@charset "utf-8";
/* CSS Document */

body{
    padding:0;
    margin:0;
    font-family: 'Open Sans', sans-serif;

}

a { cursor: pointer; }



/* backgrounds */

@-webkit-keyframes pulse {
  0% {background-color: #b1dfee;}
  0% {background-color: #2a2b75;}
  25% {background-color: #416cb4;}
  50% {background-color: #6fcac7;}
  75% {background-color: #48b5e7;}
  100% {background-color: #4f53a3;}
  0% {background-color: #4e70b6;}
}
@-moz-keyframes pulse {
   0% {background-color: #b1dfee;}
  0% {background-color: #2a2b75;}
  25% {background-color: #416cb4;}
  50% {background-color: #6fcac7;}
  75% {background-color: #48b5e7;}
  100% {background-color: #4f53a3;}
  0% {background-color: #4e70b6;}
}
/* buttons */

.button{
    font-family: 'Open Sans', sans-serif;
    text-decoration:none;
    border: 1px #fff solid;
    color:#fff;
    padding:30px;
    font-weight:900;
    outline: 2px solid transparent;
    width:auto;
    -webkit-transition: all 200ms;
       -moz-transition: all 200ms;
        -ms-transition: all 200ms;
         -o-transition: all 200ms;
            transition: all 200ms;
}
.button:hover{
    outline: 3px #fff solid;
}
.button-contact{
    padding: 25px 41px;
    margin-top:5px;
    width:auto;
    background: transparent;
    border: 1px #b0dfee solid;
    outline: 2px solid transparent;
    color:#b0dfee;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight:900;
    text-decoration:none;
    cursor: pointer;
      -webkit-transition: all 200ms;
         -moz-transition: all 200ms;
          -ms-transition: all 200ms;
           -o-transition: all 200ms;
              transition: all 200ms;
}
.button-contact:focus,
.button-contact:active,
.button-contact:hover { outline:2px solid #b0dfee; }



/* Header  */

header {
    position: relative;
    width:100%;
    height:700px;
    background-color:#b0dfee;
    -webkit-animation: pulse 30s infinite alternate;
    -moz-animation: pulse 30s infinite alternate;
    z-index: 10;
}
.header-content{
    width:750px;
}
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

#product { margin-top: 700px; }

#product,
#brands,
#about,
#contact,
.footer{ position: relative; z-index: 2; }

.bg-white,
#about { background: #FFF; }

.bg-white { position: relative; float: left; width: 100%; z-index: 10; }




/* text */

h1{
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    font-weight:bold;
    color:#585657;
    text-transform:uppercase;
}
h2 {
    font-family: 'Open Sans', sans-serif;
    font-size:22px;
    font-weight:400;
    line-height:26px;
    color: rgba(255,255,255, 0.6);
}
h2 span{
    color:#fff;
}
p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight:normal;
    color:#585657;
}
.caption{
    font-size:12px;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing:1px;
}
.caption span{
    font-size:16px;
}
.menu { margin: 1.25em 0; }
.menu a {
    font-family: 'Open Sans', sans-serif;
    font-size:16px;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing:1px;
    color:#fff;
}
.menu a:hover{
    cursor:pointer;
}

/* content */

.text-center{
    text-align: center;
}
.center{
    margin: 0 auto;
}
.fixed{
    position:fixed;
}
.absolute{
    position:absolute;
}
.brands {
    position: relative;
    background: #FFFFFF;
}
.brands .intro,
.brands .description {
    position: absolute;
    right: 0;
    left: 0;
}
.text-width{
    width:550px;
}
.logo{
    position: relative;
    display: inline-block;
    width:197px;
    height:114px;
   -webkit-transition:.25s;
      -moz-transition:.25s;
       -ms-transition:.25s;
        -o-transition:.25s;
           transition:.25s;
   border-top:5px solid transparent;
}

.logo__img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.logo__img--color { opacity: 0; }

.logo:hover{
    cursor:pointer;
    border-top-color:#70cffc;
}
.logo-hover{
    border-top-color:#70cffc;
}
.product-slider {
    position: relative;
    background-color:#f6f6f6;
    overflow: hidden;
}
.photo-width {
    position: relative;
    width: 100%;
}
.product.active { left: 0; }
.product.previous { left: -100%; }
.product {
    position: absolute;
    top: 0;
    left: 100%;
    padding: 30px 0;
    width: 100%;
    z-index: 1;
}
.product--container {
    width: 50%;
    max-width: 800px;
    margin: 0 auto;
}
.product-photo {
    width:100%;
    z-index:0;
}
.arrow-left, .arrow-right{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -35px;
    opacity:.5;
   -webkit-transition:.25s;
      -moz-transition:.25s;
       -ms-transition:.25s;
        -o-transition:.25s;
           transition:.25s;
   z-index: 2;
}
.arrow-right { right: 0; }
.arrow-left:hover, .arrow-right:hover{
    opacity:1;
    cursor:pointer;
}
.nav{
    position: fixed;
    top: -500px;
    color:#fff;
    background-color:#343434;
    width:100%;
    z-index:1000;
    -webkit-transition:.25s;
       -moz-transition:.25s;
        -ms-transition:.25s;
         -o-transition:.25s;
            transition:.25s;
}
.nav.clear {
  background-color: transparent;
  border-bottom: 1px solid #FFF;
}
.nav-width { width: 490px; }
.nav-width ul { margin: 0; }
.nav li{
    list-style:none;
    float:left;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight:bold;
    padding:10px;
      padding-top:15px;
      padding-bottom:15px;
}
.nav a{
  color:#fff;
    text-decoration:none;
}
.item{
    padding:5px;
    border-bottom: transparent 5px solid;
    -o-transition:.25s;
    -ms-transition:.25s;
    -moz-transition:.25s;
    -webkit-transition:.25s;
   /* ...and now for the proper property */
   transition:.25s;
}
.item:hover{
        border-bottom: #fff 5px solid;
}
.splash-logo{
    width:964px;
}
.splash-logo--img{
    width:100%;
}
.dark-text{
    color:#333;
}
.open{
    color:#fff;
    border-bottom:1px #fff solid;
    position:absolute;
    width:100%;
     -o-transition:.25s;
   -ms-transition:.25s;
   -moz-transition:.25s;
   -webkit-transition:.25s;
   /* ...and now for the proper property */
   transition:.25s;
}
.close{
    text-align:center;
    float:right;
    padding-right:80px;
    cursor:pointer;
}
.about-img{
    width:70%;
    float:left;
    background-color:#f7f7f7;
}
.about-img img{
    width:100%;
}
.about-content{
    width:30%;
    background-color:#f7f7f7;
    margin-top:50px;
    float:left;
    min-height: 710px;
}
.about{
    font-size:14px;
    line-height:21px;
    font-weight:100;
}
.dark{
    color:#585657;
}
#contact-form { padding-top: 10px; }
.contact-content{
    width:30%;
    background-color:#ffffff;
    margin-top: -309px;
    float:right;
}

.facebook-text{
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    line-height:26px;
    font-weight:bold;
		margin-top:2px;
    margin-left:13px;
}

.facebook-text a{
    color:#3b5998;
}

#products{
width:1px;
height:1px;
float:left;
position:absolute;
top:650px;
left:0px;
background:#000000;
z-index:0;
}

/* forms */
.message {
    display: none;
    padding-top: 200px;
}
.form-fields {
  margin: 0;
  padding: 0;
  list-style: none;
}
.text-input {
  padding: 22px;
  width: 222px;
  background: #f6f6f6;
  border: 2px solid transparent;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #595657;
  resize: none;
  margin-top:5px;
}
.text-input:focus,
.text-input:active { outline: none; }

::-webkit-input-placeholder { color: #595657; opacity: 1; }
:-moz-placeholder { color: #595657; opacity: 1; }
::-moz-placeholder { color: #595657; opacity: 1; }
:-ms-input-placeholder { color: #595657; opacity: 1; }

:focus::-webkit-input-placeholder { opacity: 0; }
:focus:-moz-placeholder { opacity: 0; }
:focus::-moz-placeholder { opacity: 0; }
:focus:-ms-input-placeholder { opacity: 0; }

.error { border: 2px solid #EA6153; }
.contact-img{
    width:70%;
    float:right;
    margin-top:-10px;
    position:relative;
}
.indicator { width:175px!important; left: 0; top: 68%; opacity: 0; }
.relative { position:relative; }
.absolute { position:absolute; }
.contact-img a,
.contact-img img { display: block; }
.contact-img img { width:100%; }
.footer{
    width:100%;
    float:left;
    margin-top:-10px;
    background-color:#b0dfee;
    -webkit-animation: pulse 30s infinite alternate;
    -moz-animation: pulse 30s infinite alternate;
}
.footer-content{
    width:80%;
}
.footer-text{
    font-size:10px;
    font-weight:300;
    color:#fff;
    width:70%;
}
.footer img{
    padding-top:20px;
}
.footer-img{
    width:20%;
}
/* padding and margins */

.soft{padding:40px;}
.soft-top{padding-top:40px;}
.soft-bottom{padding-bottom:40px;}
.soft-left{padding-left:40px;}
.soft-right{padding-right:40px;}

.soft-double{padding:80px;}

.soft-top--double{padding-top:80px;}
.soft-top--triple{padding-top:120px;}
.soft-top--quarter{padding-top:10px;}
.soft-top--quad{padding-top:160px;}
.soft-top--oct{padding-top:320px;}
.soft-top--half{padding-top:20px;}
.soft-right--half{padding-right:20px;}

.soft-bottom--double{padding-bottom:80px;}


soft-left--quarter{padding-left:10px;}

.push{margin:40px;}
.push-top{margin-top:40px;}
.push-bottom{margin-bottom:40px;}
.push-left{margin-left:40px;}
.push-right{margin-right:40px;}

.push-top--double{margin-top:80px;}
.push-top--half{margin-top:20px;}
.push-top--half{margin-top:10px;}
.push-left--double{margin-left:80px;}


.flush{padding:0;}
.flush-top{padding-top:0;}
.flush-bottom{padding-bottom:0;}
.flush-left{padding-left:0;}
.flush-right{padding-right:0;}

.hard{margin:0;}
.hard-top{margin-top:0;}
.hard-bottom{margin-bottom:0;}
.hard-left{margin-left:0;}
.hard-right{margin-right:0;}



/* floats */

.float-left{float:left;}
.float-right{float:right;}



/* large screen */

@media screen and (min-width: 1800px) {
        #contact{margin-top:1000px;}
        .photo-width{width:2000px;}
}




/* tablet */

@media screen and (max-width: 1000px) {
    .text-width{width:70%;}
    .splash-logo{width:80%;}
    .header-content{width:70%;}
    header{height:800px !important;}
    .about-img{width:100%;}
    .about-content{width:100%; margin-top:0; height: auto; }
    .contact-img{width:100%;}
    .contact-content{width:100%;}
    .footer-img{width:40%;}
    .product--container{width:70%;}
    #contact{margin-top:800px;}
}


@media screen and (max-width: 680px) { .product--container{margin: 0 2.5%;} }


/* phone */

@media screen and (max-width: 560px) {
    .text-width{width:80%;}
    .nav-width{width:280px;}
    .splash-logo{width:80%;}
    .header-content{width:80%;}
    .soft-top--oct{padding-top:200px;}
    header{height:660px !important;}
    .nav li{float:none;}
    .nav{background-color:#343434;}
    .open {padding-top:0; padding-bottom:0;}
    .close{    float:none; width:280px; padding-right:0;}
    .about-img{width:100%; height:auto;}
    .about-img img{width:100%;}
    .about-content{width:100%;margin-top:0px; height: auto;}
    .contact-img{width:100%; height:auto;}
    .contact-img img{width:100%;}
    .contact-content{width:100%;margin-top:0px;}
    .footer-img{width:100%;}
    .footer-img img{width:60%;}
    .footer-content{width:100%;}
    .product--container{margin: 0 2.5%; width:80%;}
    .footer img{padding-left:80px;}
}

/* other mobile styles */
.mobile .site-header { position: relative; }
.mobile #product { margin-top: 0; }