*{
  margin: 0;
  padding: 0;
}

body{
  font-size: 16px;
  line-height: 24px;
  color: #3A383A;

  font-family: "proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 400;   
}

img{
  border: 0;
  max-width: 100%;
  vertical-align:middle;
}

a{
  text-decoration: none;
  transition: .7s color, .7s background-color;
  cursor: pointer;
  color: #DA262E;  
}
a:focus{
  outline: none;
}
a:hover{
  transition: .3s color, .3s background-color;
}

h2{
  color: #DA262E;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  margin: 30px 0;
}

h3{
  color: #DA262E;
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 2px solid #DA262E;  
}
h3.portfolioh3{
  margin-bottom: 20px;
}

h4{
  color: #3A383A;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px 0;
}
h5{
  color: #DA262E;
  font-size: 17px;
  font-weight: 700;
}

p{
  margin-bottom: 15px;
}

ul, ol{
  margin: 0 0 15px 30px;
}

.container{
  width: 98%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.container.narrow{
  max-width: 700px;
}
.container.verynarrow{
  max-width: 450px;
}

#header{
  text-align:right;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 20px;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 120px;
  padding: 15px 0;
  background-color:#FFFFFF;
  z-index: 95;
  font-weight: 700;
  letter-spacing: 1px;
  transition: .7s opacity;
}
#header.hidden{
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: .5s height, .5s padding;
}
#header.nothidden{
  height: 120px;
  padding: 15px 0;
  transition: .5s height, .5s padding;
}

#header h1{
  float: left;
  margin-left: -15px;
  margin-top: 10px;
}


#header #contacts{
  padding-top: 5px;
  font-size: 15px;
  line-height: 25px;
}

.tel{
  color: #DA262E;
  display: block;
  padding: 5px 10px;
  font-weight: 700;
}
#header .tel{
  float: right;
}
#lightbox .tel{
  margin-bottom: 20px;
}
#lightbox .button{
  margin-top: 15px;
}
#lightbox a{
  color: #DA262E;  
}

#header #contacts #sendfiles{
  display: block;
  float:right;
  border: 2px solid #DA262E;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #DA262E;
  line-height: 20px;
}

#header #contacts #sendfiles:hover{
  background-color: #DA262E;
  color: #FFFFFF;  
}



#header #contacts #specialslink{
  display: block;
  float:right;
  border: 2px solid #DA262E;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #FFFFFF;
  background-color: #DA262E;
  line-height: 20px;
  margin-right: 15px;
  transition: .3s border-color, .3s background-color, .3s color;
}

#header #contacts #specialslink:hover{
  background-color: #FFFFFF;
  color: #DA262E;
  border-color: #DA262E;
  transition: .3s border-color, .3s background-color, .3s color;
}



#header #contacts #tel:hover{
  color: #3A383A;
}
#header ul{
  clear: right;
  list-style-type: none;
  margin: 0;
  padding-top: 45px;
}
#header ul li{
  display: inline;
}
#header ul li a{
  display: inline-block;
  color: #3A383A;
  font-size: 15px;
  letter-spacing: 2px;
  margin-left: 20px; 
}
#header ul li a:hover, #header ul li a.current{
  color: #DA262E;  
}

#header ul li a .line{
  display:block;
  border-bottom: 1px solid #DA262E;
  margin: 0 auto;
  width: 0;
  transition: .7s width;
}
#header ul li a:hover .line{
  width: 100%;
  transition: .3s width;
}



#header.fade{
  opacity: .92;
  transition: .3s opacity;
}




#topspace{
  height: 152px;
}

.clear{ clear: both; }

#graphic img{
  display: block;
  width: 100%;
}
#heading{
  background-color: #DA262E;
  color: #FFFFFF;
  padding: 20px 0;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 1px;
}
#heading h2{
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  font-size: 22px;
  color: #FFFFFF;
}
#heading p{
  margin:10px 0 0 0;
}

.homelink{
  display: block;
  float: left;
  width: 48%;
  height: 230px;
  margin: 0 1% 12px 1%;
  position: relative;
  overflow: hidden;
}
.homelink .img{
  display: block;
  height: 200px;
  background-size: cover;
  background-position: center center;
}
.homelink .title{
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #3A383A;
  color: #FFFFFF;
  height: 30px;
  line-height: 30px;
  text-transform: uppercase;
}

.homelink .slide{
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  background-image: url(images/transparentred.png);
  text-align: center;
  color: #FFFFFF;
  transition: 1s top, 1s left;
}
.homelink.slideleft .slide{
  top:0;
  left: -100%;
}
.homelink.slidetop .slide{
  top:-100%;
  left: 0%;
}
.homelink.slideright .slide{
  top:0;
  left: 100%;
}



.homelink .slide span{
  display: block;
}
.homelink .slide .slidepad{

  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 30px;
}
.homelink .slide .slideheading{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
.homelink .slide .intro{
  margin: 15px 0;
}
.homelink .slide .clickhere{
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  padding: 5px;
  text-transform: uppercase;
  font-weight: 700;
}
.homelink:hover .slide{
  top: 0;
  left: 0;
  transition: .5s top, .5s left;
}

#footer{
  background-color: #DA262E;
  color: #FFFFFF;
  padding: 25px 0;
  border-top: 30px solid #FFFFFF;
  position: relative;
  z-index:2;
} 
#footer.signxfooter{
  background-color: #282752;
}
#footer a{
  color: #FFFFFF;
  text-transform: uppercase;
}
#footer h4{
  color: #FFFFFF;
  margin-bottom: 2px;
}
#footer .third{
  float: left;
  width: 29%;
  padding: 0 2%;
  border-left: 1px solid #FFFFFF;
  text-align: center;
  font-size: 13px;
  min-height: 75px;
}
#footer .third:first-child{
  border:0;
}
#footer #engage{
  font-size: 16px;
  font-family: "foco",sans-serif;
    
}


#copy{
  position:relative;
  z-index:2;
  background-color: #3A383A;
  color: #FFFFFF;
  padding: 5px 0;
  font-size: 11px;
}
#copy #bottomlinks{
  float:right;
}
#copy #bottomlinks a{
  margin-left: 20px;
  color: #FFFFFF;
}

#footer a:hover, #copy a:hover{
  text-decoration: underline;
}


.fullwidth{
  margin-bottom: 50px;
  float: none;
  clear: both;
}
.item{
  clear: both;
}
.item .text{
  float: left;
  width: 48%;
  padding: 0 2% 40px 0;
}
.item .image{
  float: right;
  width: 48%;
  padding: 0 0 40px 2%;
}

.item:nth-child(2n+2) .text{
  float: right;
  padding: 0 0 40px 2%;
}
.item:nth-child(2n+2) .image{
  float: left;
  padding: 0 2% 40px 0;
}

.item .image iframe{
  width: 100%;
  height: 300px;
}

#contactform{
  background-color: #E7E7E8;
  padding: 30px 0;
  text-align: center;
}

#contactform+#footer{
  margin-top:0;
  border-top:0;
}

#contactform h3{
  border: 0;
  padding:0;
}

.input, .textarea{
  display: block;
  background-color: #FFFFFF;
  margin: 10px auto;
  width: 96%;
  padding: 5px 2%;
  border: 0;
  border-radius: 3px;
  font-family: arial;
  font-size: 13px;
  transition: 1s box-shadow;
}
.textarea{
  height: 80px;
}
input:focus,  .textarea:focus{
  box-shadow: 0 0 5px #666666;
  transition: .3s box-shadow;
}
.button{
  background-color: #DA262E;
  border: 0;
  color: #FFFFFF;
  font-family: "proxima-nova",sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 3px;
  padding: 5px 25px;
  cursor: pointer;
  transition: .5s background-color;
}
.button:hover{
  transition: .3s background-color;
  background-color: #3A383A; 
}


#portfoliolist{
  list-style-type: none;
  margin: 0 0 20px 0;
}
#portfoliolist li{
  display: inline;
  margin-right: 20px;
}
#portfoliolist li a{
  color: #000000;
}
#portfoliolist li a:hover{
  text-decoration: underline;
}
#portfoliolist li.current a{
  color: #DA262E; 
}


#portfolio a{
  transition: .3s width, .3s height;
}

#portfolio a span{
  display: block;
  float: left;
  margin: 0 2% 20px 0;
  background-color: #f1f1f1;
  transition: .3s box-shadow;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  transition: .3s all;
  overflow:hidden;
  position: relative;
  transition: 1s all;
}

#portfolio a:hover span{
  background-size: 105% auto;
  transition: .5s all;
}


#portfolio a .normal{
  width: 31%;
  height: 200px;
}

#portfolio a .high{
  width: 31%;
  height: 420px;
}
#portfolio a .wide{
  width: 64%;
  height: 200px;
}


#portfolio .dark{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color: #000000;
  opacity:0;
  transition: .5s opacity;
}
#portfolio a:hover .dark{
  opacity: .5;
  transition: .5s opacity;
} 
#portfolio .title{
  display: block;
  width: 80%;
  padding: 0 5% 5px 5%;
  text-align:center;
  position: absolute;
  top: 55%;
  left: 5%;
  transform: translateY(-50%);
  font-style: normal;
  color: #FFFFFF;
  font-size: 14px;
  opacity:0;
  transition: .5s all;
  font-size: 20px;
  text-shadow: 0 0 5px #000000;
}
#portfolio a:hover .title{
  opacity: 1;
  transition: 1s all;
  top: 50%;
}
#portfolio .line{
  margin: 0 auto;
  border-bottom: 1px solid #CCCCCC; 
  opacity: .7;
  width:0;
  transition: .5s all;
  height: 5px;
}
#portfolio a:hover .line{
  display: block;
  width: 100%;
  opacity: 1;
  transition: .5s opacity, 1.5s width;
}
 

.red{
  color: #DA262E;
}

#links{
  margin: 0 0 0 52%;
  list-style-type: none;
}
#links li{
  display: inline;
}
#links a{
  display: block;
  float: left;
  background-color: #DA262E;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 20px;
  width: 32%;
  margin-right: 2%;
  padding: 3px 0;
  border-radius: 5px;
  margin-bottom: 15px;
}
#links li:last-child a{
  margin-right:0;
}
#links a:hover{
  background-color: #3A383A; 
} 


.way{
  margin: 20px auto;
  max-width: 600px;
}

#enquire{
  position: fixed;
  top: 50%;
  right: 0;
  display: block;
  color: #FFFFFF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 25px 15px;
  margin-top: -100px;
  background-color: #3A383A;
  z-index: 97;
}

#enquire:hover{
  background-color: #DA262E;
}


#sent{
  background-color: #3A383A;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 30px;
  text-align:center;
  padding: 20px;
  border-radius: 5px;
  margin: 15px 0;  
}

#submenu{
  background-color: #282752;
  text-align:center;
  margin-bottom: 30px;
}
#submenu.certa{
   background-color: #DA262E; 
}
#submenu ul{
  list-style-type: none;
  margin: 0;
  height: 50px;
}
#submenu ul li{
  display: inline;
}
#submenu ul li a{
  display: block;
  float:left;
  color: #FFFFFF;
  text-transform: uppercase;
  transition: .7s background-color;
  line-height: 50px;
  height: 50px;
  width: 16.66666666666%;
  padding:0;
  margin:0;
}

#submenu.certa ul li a{
  width: 20%;
}
#submenu ul li a.current, #submenu ul li a:hover{
  background-color: #DA262E;
  transition: .3s background-color;
}
#submenu.certa ul li a.current, #submenu.certa ul li a:hover{
  background-color: #4D4D4F;
}



#division{
  display:block;
  font-weight:700;
  font-size: 16px;
  padding-top: 15px;
}
#division img{
  margin-left: 10px;
}








#lightbox{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  z-index: 5;
  opacity:1;
  transition: .5s left, .5s opacity;
}
#lightbox.out{
  left: -100%;
  opacity:0;
  transition: .5s left, .5s opacity;
}
#lightbox #closelightbox{
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color:#000000;
  opacity: .5;
  cursor:auto;
}

#lightboxinner{
  background-color: #E7E7E8;
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);  
  z-index: 7;
  text-align:center;
  padding: 30px;
  border-radius: 5px;
}
#lightboxinner h3{
  border:none;
}
#lightboxinner #closebutton{
  position: absolute;
  right:5px;
  top: 5px;
}



#home{
  margin-top: 100vh;
  position: relative;
  z-index: 2;
}
.homeblock{
  border-top: 1px solid #DA262E;
  min-height: 100vh;
  height: 100vh;
  background-color: #DA262E;
  text-align: center;
  position: relative;
  color: #FFFFFF;
  font-family: "proxima-nova",sans-serif;  
  font-size: 30px;
  line-height: 35px;
}
.homeblock h2{
  color: #FFFFFF;
  font-size: 90px;
  line-height:90px;
  font-family: "foco",sans-serif;
  font-style: normal;
  font-weight: 900;
  margin-bottom: 50px;
}
.homeblock h2 a{
  color: #FFFFFF;
}

.homeblock#videoblock{
  border:none;
  background-color: #000000;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  color: #4D4D4F;
  z-index: 1;
}
.homeblock#videoblock h2{
  margin-bottom:100px;
  font-size: 80px;
  line-height: 85px;
  color:#4D4D4F;
}
.homeblock#save{
  font-size: 18px;
  line-height: 25px;
}
.homeblock .inner{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
}
.homeblock .inner.wideinner{
  max-width: 1100px;
}
.homeblock .inner.extrawideinner{
  max-width: 1350px;
}

#home .homeblock:nth-child(2n+2){
  background-color: #FFFFFF;
  color: #DA262E;
}
#home .homeblock:nth-child(2n+2) h2, #home .homeblock:nth-child(2n+2) h2 a{
  color: #DA262E;
}

#homelogo{
  margin-bottom: 40px;
}
.bold{
  font-weight: 900;
}

.whiteborderbutton{
  display: inline-block;
  border: 2px solid #FFFFFF;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #FFFFFF;
  font-size: 16px;
  margin-top: 30px;
}
.whiteborderbutton:hover{
  background-color: #FFFFFF;
  color: #DA262E;  
}


.redborderbutton{
  display: inline-block;
  border: 2px solid #DA262E;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #DA262E;
  font-size: 16px;
  margin-top: 30px;
}
.redborderbutton:hover{
  background-color: #DA262E;
  color: #FFFFFF;  
}


.save{
  width: 49%;
  float: left;
}
.save + .save{
  margin-left: 2%;
}

.save img{
  max-height: 450px;
}
.save h3{
  text-align:left;
  margin-bottom: 20px;
}


#videoblock video{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}
#videoblock .inner{
  position: relative;
  z-index: 3;
}
#videoblock #filter{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: #FFFFFF;
  opacity: .7;
}




#scrollbutton, .homescrollbutton{
  display: block;
  width: 40px;
  height: 39px;
  margin: 0 auto;
  position:Relative;
  z-index:3;
  -webkit-animation: bounceOut 5s linear;
     -moz-animation: bounceOut 5s linear;
      -ms-animation: bounceOut 5s linear;
       -o-animation: bounceOut 5s linear;
          animation: bounceOut 5s linear;  

  animation-iteration-count:infinite;
}



@-moz-keyframes bounceOut{
  0%{ height: 39px; }
  5%{ height: 60px; }
  10%{ height: 49px; }
  15%{ height: 60px; }
  20%{ height: 39px; }
  100%{ height: 39px; }
}

@-webkit-keyframes bounceOut{
  0%{ height: 39px; }
  5%{ height: 60px; }
  10%{ height: 49px; }
  15%{ height: 60px; }
  20%{ height: 39px; }
  100%{ height: 39px; }
}

@-o-keyframes bounceOut{
  0%{ height: 39px; }
  5%{ height: 60px; }
  10%{ height: 49px; }
  15%{ height: 60px; }
  20%{ height: 39px; }
  100%{ height: 39px; }
}

@-ms-keyframes bounceOut{
  0%{ height: 39px; }
  5%{ height: 60px; }
  10%{ height: 49px; }
  15%{ height: 60px; }
  20%{ height: 39px; }
  100%{ height: 39px; }
}

keyframes bounceOut{
  0%{ height: 39px; }
  5%{ height: 60px; }
  10%{ height: 49px; }
  15%{ height: 60px; }
  20%{ height: 39px; }
  100%{ height: 39px; }
}

#scrollbutton img, .homescrollbutton img{
  position:absolute;
  left:0;
  top:0;
}
#scrollbutton img.hover, .homescrollbutton img.hover{
  opacity: 0;
  transition: 1s opacity;
}
#scrollbutton:hover img.hover, .homescrollbutton:hover img.hover{
  opacity: 1;
  transition: .3s opacity;
}

.homescrollbutton{
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -20px;
}
.homescrollbutton.scrollup img{
  transform: rotate(180deg);
}




#mobilenav{
  display: none;
  position:relative;
  z-index:90;
} 
#body_home #mobilenav{
  display: block;
}

#mobilenav img{
  position: fixed;  
  right: 50px;
  top: 50px;
  transition: .2s opacity;
  z-index: 90;
}
#mobilenav.white #whitenav{ opacity:1; }
#mobilenav.white #rednav{ opacity:0; }
#mobilenav.red #whitenav{ opacity:0; }
#mobilenav.red #rednav{ opacity:1; }

#header.nothidden #mobilenav #whitenav{ opacity: 0 !important; }
#header.nothidden #mobilenav #rednav{ opacity: 1 !important; }


.team{
  display: block;
  float:left;
  width: 25%;
  margin-top: 20px;
  margin-bottom: 40px;
}
.team .pad{
  padding: 0 20px;
}
.team img{
  display: block;
}
.team .name{
  font-size: 20px;
  margin: 10px 0 0 0;
  font-weight:700;
}
.team .title{
  font-size: 15px;
  color: #DA262E;
  margin: 0 0 10px 0;
  font-weight:700;
}
.team .quote, .team.contacts{
  font-size: 14px;
  line-height: 20px;
  margin-bottom:5px;
}
.team a{
  color: #3A383A; 
  font-weight:700;
}
.team a:hover{
  color: #DA262E;
}
.team:nth-child(4n+5){
  clear: both;
}

.casestudy{
  position:relative;
  display: block;
  float: left;
  width: 48%;
  height: 250px;
  margin-right: 4%;
  margin-bottom: 40px;
  background-size: cover;
  background-position: center center;
}
.casestudy:nth-child(2n+2){
  margin-right: 0;
}
.casestudy .red{
  position: absolute;
  top:0;
  right:0;
  background-color: #DA262E;
  height: 100%;
  width: 30%;
  min-width:150px;
  opacity: .7;
  color:#FFFFFF;
  transition: .7s opacity;
  overflow:hidden;
}
.casestudy .red .title{
  display: block;
  padding: 15px 15px 0 15px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}
.casestudy .red .intro{
  display: block;
  padding: 0 15px;
  font-size: 14px;
  line-height: 17px;
}
.casestudy:hover .red{
  opacity: 1;
  transition: .3s opacity;
}

#casestudygraphic{
  margin-bottom: 20px;
  display: block;
}

.half{
  float: left;
  width: 48%;
}
.half + .half{
  margin-left: 4%;
}


#welcome{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #FFFFFF;
  overflow:auto;
  opacity: 1;
  cursor:pointer;
}
#welcome.fade{
  opacity: 0;
  top: -100%;
  overflow: hidden;
  transition: 1.5s all;
}
#welcome #bottle{
  height: 516px;
  background-image: url(/images/bottle.jpg);
  background-size: cover;
  background-position: left center;
}
#welcome #bottle #name{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 130px;
  line-height: 130px;
  font-family: "foco",sans-serif;
  text-align:center;
}
#welcome #about{
  position:relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0 70px 0;
  font-family: "proxima-nova",sans-serif;  
  font-size: 30px;
  line-height: 35px;
  color: #DA262E;
  text-align: center;
}
#welcome #about h2{
  margin: 15px 0 45px 0;
}
#welcome_home{
  display:none;
}
#welcome_home.visible{
  display:block;
}

#closewelcome{
  display: inline-block;
  border: 2px solid #DA262E;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #DA262E;
  line-height: 20px;
  font-size: 16px;
  font-weight:700;
}

#closewelcome:hover{
  background-color: #DA262E;
  color: #FFFFFF;  

}

.mobileonly{ display: none !important; }


#homebuttons{
  text-align: center;
}
#homebuttons a{
  display: inline-block;
  width: 40%;
  margin: 20px 3%;
  border: 2px solid #FFFFFF;
  border-radius: 5px;
  text-align: center;
  padding: 5px 0;
  text-transform: uppercase;
  color:#FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
#homebuttons a:hover{
  background-color:#FFFFFF;
  color: #DA262E;
}


.redbutton{
  display: inline-block;
  border: 2px solid #DA262E;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 5px 15px;
  color: #FFFFFF;
  background-color: #DA262E;
  line-height: 20px;
  margin-right: 15px;
  transition: .3s border-color, .3s background-color, .3s color;
}

.redbutton:hover{
  background-color: #FFFFFF;
  color: #DA262E;
  border-color: #DA262E;
  transition: .3s border-color, .3s background-color, .3s color;
}