/* ====================================
   Demo specific styling
   ==================================== */

.teaser-video {
  top:-58px;
  z-index: -99999999999999999;
  width: 100%;
  height: auto; 
}
.header-video img{
  opacity: 0;
}
.header-video--media {
  width: 100%;
  height: auto;
}
body{overflow-x: hidden;}
.header-video {
  background-image: url(../img/mobback.png);
  position: relative;
  overflow: hidden;
}
.topcorner{
  font-family: 'Futura', 'Source Sans Pro', sans-serif;
  color: white;
  font-size: 12px;
   position:absolute;
   margin-right: 20px;
   margin-top:30px;
   top:0;
   right:0;
   text-shadow: 2px 2px #000000;
  }
#logo{    -webkit-filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.75));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";}
iframe, video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

iframe {
  height: 100%;
  width: 100%;
}
#let{
position: absolute;
width:60%;
height: auto;
left:11%;
top: 8%;
opacity: 0.85;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.75));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
.we{
  width:100%;
  margin-top:-131px; 
  background: #D8D8D8;
  height:100%;
  font-family: 'Futura';
  color: gray;
  text-align: center;
}
.we img{
  width:100%;
  margin-right:50px;
  max-width: 580px;
}
.we p{
  color:black;
  font-weight: 100;
  min-height: 325px;
  font-size: 18px;
  text-align: justify;
  padding-left:10%;
  padding-right:10%;
  padding-bottom:15px;
}
.product img{max-width: 250px;padding-top: 25px;padding-bottom: 25px;
}
.indent-1 {float: left;}
.indent-1 section {width: 50%; float: left;}
.do{
  width:100%;
  background-image: url(../img/doback.jpg);
  background-position:center;
  background-repeat: no-repeat;
  height:100%;
  font-family: 'Futura';
  color: white;
  text-align: center;
}
footer{text-align: center;font-family:'Futura', 'sans-serif'; background-color: #666666;font-weight: 300;padding-top: 10px;padding-bottom: 10px; color: white;}
.contact{
  width:100%;
  margin-top:573px;
  background-image: url(../img/contact.jpg);
  background-position:center;
  background-repeat: no-repeat;
  height:100%;
  font-family: 'Futura';
  color: white;
  text-align: center;
}
.contact img:hover{opacity: .85}
.contact ul{  
  list-style: none;
  padding-top:3%;
  padding-bottom: 3%;
}
.do ul{  
  list-style: none;
  padding-top:3%;
  padding-bottom: 3%;
}
.product section:hover{opacity:.75;}
.product{width:100%;
  background: white;
  height:100%;
  font-family: 'Futura';
  color: #666666;
  text-align: center;}
#hurd{
  float: left;
  width:50%;
  background-image: url(../img/hurd.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#cantina{
  float: right;
  width:50%;
  background-image: url(../img/lc.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;}
#loewen{
  float: left;
  width:50%;
  background-image: url(../img/loewen.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#vanta{
  float: right;
  width:50%;
  background-image: url(../img/vanta.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#resysta{
  float: left;
  width:50%;
  background-image: url(../img/resysta.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#atlantic{
  float: right;
  width:50%;
  background-image: url(../img/atlantic.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#custom{
  float: left;
  width:50%;
  background-image: url(../img/custom.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;
}
#caoba{
  float: right;
  width:50%;
  background-image: url(../img/caoba.jpg);
  background-size: 100%;
  background-position:center;
  background-repeat: no-repeat;}
}
.contact ul li{display: inline;}
.contact ul li img{
  margin-top:-20px;
  width:15%;
  padding-right: 1%;
}
.contact img{
  -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.75));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";}
.contact h1{
  margin-bottom:0px;
}
.contact h2{
  margin-top:0;
  font-size: 20px;
  font-weight: 300;
}
.do ul li{display: inline;}
.do ul li img{
  width:22%;
  padding-right: 1%;
}
.do img{
  -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.75));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";}
.do h1{
  margin-bottom:0px;
}
.do h2{
  margin-top:0;
  font-size: 20px;
  font-weight: 300;
}
.product h2{
  margin-top:0;
  font-size: 20px;
  font-weight: 300;
  padding-bottom: 2%
}

.loewen{
  width:100%;
  height:auto;
  min-height: 200px;
  background-image: url(../img/loewen.jpg);
}

@media (max-width: 900px) {
  body{max-width:900px;overflow-x:hidden;}
  #let{
    width:53%;
    left:23%;
    top:7.25%
    ;
  }
  .contact{margin-top:1145px;}
  #loewen{width:100%;}
  #vanta{width:100%;}
  #hurd{width:100%;}
  #cantina{width:100%;}
  #resysta{width:100%;}
  #atlantic{width:100%;}
  #custom{width:100%;}
  #caoba{width:100%;}
  .indent-1 section {width: 100%;}
  .we img{max-width: 900px;margin-bottom: 25px;}
  .do ul li img{
      width: 45%;
      padding-bottom: 1%
    }
    .contact ul li img{
      margin-top: 0px;
      width: 33%;
      padding-bottom: 1%
    }
}
@media screen and (min-width:1000px) and (max-width: 1500px){
  #let{
    width:60%;
    left:18%;
    top:10%
    ;
  }
}
}
@media screen and (min-width:400px) and (max-width: 768px){
  body{max-width:768px;overflow-x:hidden;}
  #let{
    width:55%;
    left:23%;
    top:11%
    ;
  }
  .header-video {
  background-image: url(..img/back.jpg);
}
}
@media (max-width: 500px) {
  #logo{
    width:100px;
    height: auto;
  }
  .topcorner{
    margin-top:10px;
    font-size: 9px;
  }
  #let{
    width:35%;
    left:30%;
    top:4%
    ;
  }
.product h2{
  padding-left: 2%;
  padding-right: 2%;
}
.loewen img{
  width:55%;
  padding-top: 10%;
  padding-bottom:10%;
}
  .we p{
    font-size: 14px;
  }
  .we ul li{
  display: list-item;
  width:100%;
}
  
  .do ul li img{
    width: 60%;
    padding-bottom: 1%
  }
}

/* ====================================
   Just making stuff pretty
   ==================================== */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 100%;
}

p {
  font-size: 1.2em;
  margin-bottom: 1em;
}

h1, h2, h3 {
  font-weight: 700;
  margin-bottom: .35em;
}

h1 {
  font-size: 3em;
  line-height: 1;
}

h2 {
  font-size: 2em;
  margin-top: 1em;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 2em;
}