html,body{width:100%;height:100%;}
body
{
  background-color: #f0f0f0;
  font-family:'Open Sans Condensed', sans-serif;
  overflow-x:hidden;
}
.text-vertical-center
{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.text-vertical-center h1
{
  margin:0;
  padding:0;
  font-size:4.5em;
  font-weight:700;
}

/* Custom #cc0808 Styles */
.btn-dark
{
  border-radius:0;
  color:#fff;
  background-color:rgba(255,40,40,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active
{
  color:#fff;
  background-color:rgba(255,40,40,0.7);
}
.btn-light
{
  border-radius:0;
  color:#5e67a2;
  background-color:rgba(240,240,240,1);
}
#access-modal .btn-light
{
  width:200px;
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active
{
  color:#5e67a2;
  background-color:rgba(240,240,240,0.8);
}
hr.small
{
  max-width:100px;
}
.bg-primary
{
  background-color:#5e67a2;
}
.bg-primary hr
{
  border-top-color:#ff2727;
}
a,
.about h2,
.text-primary
{
  color:#5e67a2;
}
a:focus,
a:hover
{
  color:#ff2727;
}

/* BOOTSTRAP OVERRIDES / ADD ------------------------------------------------- */
p {
  font-size: 18px;
}
.btn-primary {

}
.special-p {
  font-size:140% !important;
}
input.form-control,
label[for="pictureFile"] {
  height: 45px !important;
}
label[for="pictureFile"] {
  vertical-align: middle;
  display: table-cell;
  border-radius: 0;
}
.form-control {
  border-radius: 0px !important;
}

/* MENU / UI ---------------------------------------------------------------- */
#menu
{
  z-index:1000;
  position:fixed;
  right:0;
  width:250px;
  height:100%;
  transform:translateX(250px);
  overflow-y:auto;
  background:rgba(255,40,40,0.90);
  transition:all 0.4s ease 0s;
}
.sidebar-nav
{
  position:absolute;
  top:0;
  width:250px;
  margin:0;
  padding:0;
  list-style:none;
}
.sidebar-nav li
{
  text-indent:20px;
  line-height:55px;
}
.sidebar-nav li a
{
  display:block;
  text-decoration:none;
  color:white;
  font-size:26px;
}
.sidebar-nav li a:hover
{
  text-decoration:none;
  color:#fff;
  background:rgba(94,103,162, 0.2);;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus
{
  text-decoration:none;
}
.sidebar-nav > .sidebar-brand
{
  height:55px;
  font-size:18px;
  line-height:55px;
}
.sidebar-nav > .sidebar-brand a
{
  color:rgba(94,103,162, 1);;
}
.sidebar-nav > .sidebar-brand a:hover
{
  color:#fff;
  background:none;
}
#menu-toggle
{
  z-index:200;
  position:fixed;
  top:8px;
  right:8px;
}
#menu.active
{
  right:250px;
  width:250px;
  transition:all 0.4s ease 0s;
}
.toggle
{
  margin:8px 8px 0 0;
}
#top
{
  font-size:30px;
}
#to-top
{
  display:none;
  position:fixed;
  bottom:8px;
  right:8px;
  z-index:100;
}
#to-next
{
  position:fixed;
  width:70px;
  height:95px;
  margin-top:15px;
  padding:0;
  border-radius:0 !important;
  font-size:40px;
  color:white;
  background:rgba(255,40,40,0.4);
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  z-index:100;
}
#to-next *{
  cursor:pointer;
  cursor:hand;
}
#to-next:hover,
#to-next:focus
{
  outline:none;
  color:white;
  background:rgba(255,40,40, 0.7);
}
#to-next i.animated
{
  transition:transform 0.8s, opacity 0.8s;
  animation:movedown 1.0s infinite linear;
}
#to-next:hover i.animated
{
  animation:pulse 1.0s infinite linear;
}

/* HOME --------------------------------------------------------------------- */
body::before{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content: url("../../images/backgrounds/bkg-1.jpg") url("../../images/backgrounds/bkg-2.jpg") url("../../images/backgrounds/bkg-3.jpg") url("../../images/backgrounds/bkg-4.jpg") url("../../images/backgrounds/bkg-5.jpg");
}
.header
{
  display:table;
  position:relative;
  width:100%;
  height:100%;
  background-image:url("../../images/backgrounds/bkg-1.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:scroll;
  background-size:cover;
  transition:background-image 2s;
  animation:backgroundfader 20s 4s ease-out infinite;
}
#logo
{
  width:350px;
  margin:0;
  transition:height 0.8s, width 0.8s;
}
header > div:first-child
{
  background-color:rgba(250,250,250,0.55);
}
header h3
{
  font-size:26px;
  color:#ff2727;
  opacity:1;
  transition:font-size 0.8s;
  animation:colorfading 8s ease-out infinite;
}

.ui-btn-spedomotique
{
  position: absolute;
  background-image: url(../../images/specialiste-domotique-hager.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  left: 10px;
  top: 10px;
  width:128px;
  height:56px;
}
.ui-btn-spedomotique:hover
{
  animation: lowpulse 0.8s infinite ease-in-out;
}
@media screen and (min-width:   0px) and (max-width: 480px) { #logo { width:360px; } header h3 { font-size:22px; } }
@media screen and (min-width: 481px) and (max-width: 640px) { #logo { width:385px; } header h3 { font-size:24px; } }
@media screen and (min-width: 641px) and (max-width: 800px) { #logo { width:410px; } header h3 { font-size:26px; } }
@media screen and (min-width: 801px) and (max-width:1024px) { #logo { width:460px; } header h3 { font-size:28px; } }
@media screen and (min-width:1025px) and (max-width:1280px) { #logo { width:520px; } header h3 { font-size:30px; } }
@media screen and (min-width:1281px) and (max-width:1440px) { #logo { width:640px; } header h3 { font-size:32px; } }
@media screen and (min-width:1441px) and (max-width:1600px) { #logo { width:760px; } header h3 { font-size:34px; } }
@media screen and (min-width:1601px) and (max-width:1920px) { #logo { width:880px; } header h3 { font-size:34px; } }
@media screen and (min-width:1921px) and (max-width:2560px) { #logo { width:1100px; } header h3 { font-size:36px; } }

/* SLOGAN SERVICES /  -------------------------------------------------- */
.about
{
  padding:50px 0;
}

/* SERVICES ----------------------------------------------------------------- */
.services
{
  padding:50px 0;
}
.service-item
{
  margin-bottom:30px;
}
.service-item .fa-circle
{
  color:#5e67a2;
}
.service-item .fa.text-primary
{
  color:#ff2727;
}
.service-item p
{
  font-size:16px;
}
.services h4
{
  font-size:20px;
  font-weight:bolder;
}

/* PORTFOLIO ---------------------------------------------------------------- */
#nos-realisations {
  padding:0;
  padding-bottom: 0px;
}
.portfolio
{
  padding: 0;
}
.portfolio h2
{
  background:rgba(255,40,40, 0.7);
  height:48px;
  line-height:48px;
  margin:0;
  margin-bottom: 0px;
}
.portfolio-box
{
  position: relative;
  display: inline;
  display: flow-root;
  max-width: 650px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.portfolio-box:focus
{
  outline: none;
}
.portfolio-box img
{
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.portfolio-box:hover img
{
  -webkit-transform: scale(1.3);
  transform: scale(1.3);

}
.no-gutter > [class*='col-']
{
  padding-right: 0;
  padding-left: 0;
}
.portfolio-modal-window
{
  display: none;
  position: fixed;
  z-index: 10000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.9);
  vertical-align:middle;
}
.portfolio-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 56px;
  font-weight: bold;
  transition: 0.3s;
}
.portfolio-modal-close:hover,
.portfolio-modal-close:focus {
  cursor: pointer;
}
@media only screen and (max-width: 700px){
  .portfolio-modal-picture{
    width: 100%;
  }
}
.portfolio-modal-picture
{
  display: block;
  position:absolute;
  margin: auto;
  max-width: 90%;
  max-height:80%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* PARTENAIRES -------------------------------------------------------------- */
.partenaires
{
  padding:50px 0;
}
.partenaire-item
{
  display:inline-flex;
  width:128px;
  height:128px;
	background-color:#fff;
	background-size:90%;
	background-repeat:no-repeat;
	background-position:center;
	background-origin:content-box;
  margin:12px;
  padding:40px 8px;
  border:2px solid #5e67a2;
	border-right-color:#ff2727;
	border-bottom-color:#ff2727;
  border-radius: 50%;
  outline:none;
}
.partenaire-item:hover
{
  animation:lowpulse 0.8s infinite ease-in-out;
}
.partenaire-item img
{
  padding:0;
  margin:0 auto;
  border:none;
  outline:none;
  max-width:128px;
  max-height:64px;
}

/* CONTACTS ----------------------------------------------------------------- */
.contact-title
{
  margin-bottom: 15px;
}
.label-danger
{
  visbility: hidden;
}
.label-contact-copy,
.form-control
{
  font-size: 20px;
}
select#fContactSubject
{
  height: 45px;
}
.call-to-action
{
  padding:50px 0;
}
.call-to-action .btn
{
  width:140px;
  margin:10px;
}
.li-contact a {
  color: white !important;
  text-decoration: underline !important;
}

/* GMAP --------------------------------------------------------------------- */
.map
{
  height:500px;
}
@media(max-width:768px){ .map { height:75%; } }
.map iframe
{
  pointer-events:none;
}

/* FOOTER ------------------------------------------------------------------- */
footer
{
  background-color: white;
  padding:25px 0;
}

/* ANIMATIONS --------------------------------------------------------------- */
@keyframes colorfading
{
  0%,
  100% { color:#ff2727; border-color:#ff2727; }
  50%  { color:#5e67a2; border-color:#5e67a2; }
}
@keyframes backgroundfader{
  0%,100% { background-image: url("../../images/backgrounds/bkg-1.jpg"); }
20% { background-image: url("../../images/backgrounds/bkg-2.jpg"); }
40% { background-image: url("../../images/backgrounds/bkg-3.jpg"); }
60% { background-image: url("../../images/backgrounds/bkg-4.jpg"); }
80% { background-image: url("../../images/backgrounds/bkg-5.jpg"); }
}
@keyframes movedown
{
  0%   { transform:translateY(0);    opacity:1; }
  100% { transform:translateY(25px); opacity:0; }
}
@keyframes pulse
{
  0%,
  100% { transform:scale(1);   }
  50%  { transform:scale(1.2); }
}
@keyframes lowpulse
{
  0%,
  100% { transform:scale(1);   }
  50%  { transform:scale(0.95); }
}