/* GLOBAL STYLES */
body, html  {
  height:100%;
}

/* LAYOUT */
#name { line-height:60px; }
#name a:hover { text-decoration:none; color:#eee; }
#logo { position:absolute; top:70px; width:270px; }

.bg-orange { background-color:#F49100; }
.bg-orange a { color:#fff; }

#wrap { 
  position:relative;
  z-index:2;
}
#bg {
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  height:100%;
  width:100%;
  z-index:1;
  background:url(/img/bg.jpg) no-repeat top left #fff;
}
#footer {
  z-index:2;
  position:relative;
}

/* TYPO */

/* NAVI */

.navi ul { list-style:none; margin:0; padding:0; display:table; width:100%; }
.navi ul li { display:table-cell; text-align:center; border-right:3px solid #F49100; /* width:33.334%; */ }
.navi ul li.last { border-right:none;  }
.navi ul li a { color:#fff; background-color:#636466; display:block; font-size:1.5em; line-height:2em; }
.navi ul li.active a,
.navi ul li a:hover { background-color:#87888A; text-decoration:none; }

/* BOOTSTRAP OVERRIDES */


/* HELPER Classes */
.center { text-align:center; margin:auto; }
.uppercase { text-transform:uppercase; }
.justify { text-align:justify;}
.bold { font-weight:bold; }
.spacer, .spacer1, .spacer2, .spacer3, .spacer4 { display:block; }
.spacer, .spacer1 { height:1em; }
.spacer2 { height:2em; }
.spacer3 { height:3em; }
.spacer4 { height:4em; }
.left1 { margin-left:1.5em; }
.left2 { margin-left:3em; }
.pre-line { white-space:pre-line; }
.relative { position:relative; }
.right { text-align:right; }
.green { color:#84BD29; }

/* BOOTSTRAP - OVERRIDE */

/* BOOTSTRAP INPUT */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(244, 145, 0, 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(244, 145, 0, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(244, 145, 0, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(244, 145, 0, 0.6);
}

/* CONTACT FORM*/
.error {
  display:block;
  font-style:italic;
}


/* CSS3-FX */
.sha { box-shadow:0px 0px 2px #aaa; }
.gr1 {
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #fafafa, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #fafafa, #f2f2f2);
  background-image: -o-linear-gradient(top, #fafafa, #f2f2f2);
  background-image: linear-gradient(to bottom, #fafafa, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
}


  
/* STICKY FOOTER*/
html, body { 
	height: 100%;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -40px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 40px;
}
#footer {
  line-height:40px;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* RESPONSIVE PART */

@media (min-width: 1200px) {

}
@media (min-width: 980px) and (max-width: 1199px) {
  #logo { position:absolute; top:60px; width:220px; }
  #name { font-size:2em; line-height:40px; }
}

/* ONLY TABLET & PHONE */
@media (max-width: 979px) {
  #logo { position:absolute; top:70px; width:170px; }
  #name { font-size:1.5em; line-height:40px; }
}

/* ONLY TABLET */
@media (min-width: 768px) and (max-width: 979px) {
}
/* ONLY PHONE */
@media (max-width: 767px) {
  .bg-orange { margin:0 -20px; }
  #name { margin-bottom:50px; padding:30px 0 0 30px; width:55%; font-size:2em; }
  #logo { position:absolute; top:10px; right:10px; width:20%; min-width:150px; margin-bottom:20px; }
  .middle-phone { text-align:center; }
  #footer { height:auto; }
  #footer, 
  #footer .right { text-align:center; }
}
@media (max-width: 480px) {
  #name { font-size:1.6em; }
}