:root { /* default without colorclode*/
  --bold1: #2b4d9b;
  --bold2: #616161;
}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html,body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;
  font-family: 'Crimson Pro', serif;
width:100%;color:#616161;margin:0;overflow-x:hidden;height: 100%;}


body{
	background: url("https://storage.googleapis.com/coffs-web.appspot.com/img/bg.jpg") rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}
body.about{
  background: url("https://storage.googleapis.com/coffs-web.appspot.com/img/bg_cork.jpg") rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}
body.services{
  background: url("https://storage.googleapis.com/coffs-web.appspot.com/img/bg_light.jpg") rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}
body.gallery{
	background: url("https://storage.googleapis.com/coffs-web.appspot.com/img/bg_timber.jpg") rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}

a{color:inherit;text-decoration:none;}

a.standard:hover{
  color:#115F9F;
  text-decoration:underline;
}

.clear{
  clear:both;
}
.h10{
  clear:both;
  height:10px;
}
.top{
  position:relative;
  background: #fff;
  float:left;
  width:100%;
  height:250px;
}

.top .content{
  position:absolute;
  width:1000px;
  left:0;
  right:0;
  height:250px;
  margin:auto;
}
.top h3{
  font-family: 'Montserrat', sans-serif;
  color:#000;
  font-weight:bold;
  text-shadow:0 1px 0 #fff;
  background:rgba(0, 0, 0, 0.0);
}
.top h3{
  font-size:1.8em;
  margin-top:20px;
  float:right;
}
img{
  width:100%;
  height:auto;
}
img.logo{
  float:left;
  margin-top:30px;
  width:309px;
  height:181px;
}
img.facebook,img.insta{
  position:absolute;
  bottom:40px;
  width:100px;
  height:100px;
  cursor:pointer;
}
img.insta{
  right:0;
}
img.facebook{
  right:120px;
}

.menu,.submenu{
  position:relative;
  float:left;
  padding:20px;
  width:100%;
}
.menu{
  background:#2b4d9b;
  position:relative;
}

.menu .links,.submenu .links{
  position:relative;
  width:1000px;
  margin:0 auto;
}
.submenu .links{
  width:250px;
  font-size:1.1em;
}
.menu .links a,.submenu .links a{
  color:#fff;
  padding:10px;
  margin-right:20px;
}
.menu .links a{
  border-bottom:5px solid #2b4d9b;
}
.quoteMSG{
  float:right;
  color:#ff0000;
  font-family: 'Permanent Marker', cursive;
}
.menu .links a:hover,.menu .links a.active,.submenu .links a:hover,.submenu .links a.active{
  border-bottom:5px solid #fff;
}

.menu .links a:hover,.menu .links a.active,.submenu .links a:hover,.submenu .links a.active{
  border-bottom:5px solid #fff;
}
.newPage{
  clear:both;
  width:1000px;
  position:relative;
  margin:0 auto;
  padding:20px 0;
  color:#fff;
/*  background-color: rgba(0, 0, 0, 0.2);*/
}
.newPage h1{
  color:#fff;
  text-shadow:0 1px 0 #333;
  font-weight:bold;
}
p,li{
  font-size:1.4em;
  text-align: justify;
  text-shadow:0 1px 0 #333;
  font-weight:bold;
}

#contactform{
  float:left;
  padding:20px 50px;
  width:100%;
  margin:10px 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius:15px;
}

#contactform .info{
  float:left;
  padding:10px 0;
  width:100%;
}
#contactform label{
  float:left;
  padding:10px 0;
  width:150px;
}
#contactform input,#contactform textarea{
  float:left;
  width:calc(100% - 150px);
  padding:10px;
  border:1px solid #ccc;
  border-radius:3px;
  background:#fff;
  outline:0;
}
#contactform input.error,#contactform textarea.error{
  background:#ffdcd5;
}
#contactform input:focus,#contactform textarea:focus{
  background:#e6edef;
}
/*
.footer{
  clear:both;
  float:left;
  padding:50px;
}
*/
.button{
  float:right;
  background:var(--bold1);
  border-radius:3px;
  padding:10px 20px;
  color:#fff;
  font-size:1.1em;
  cursor:pointer;
  width:auto;
}
.button:hover{
  -webkit-box-shadow: 0px 0px 25px 0px #f2f2f2;
  box-shadow: 0px 0px 25px 0px #f2f2f2;
}
.button.active{
  background:var(--bold1);
}
.menuTrigger,.closeNav {
position:absolute;
cursor: pointer;
right:20px;
top:20px;
z-index:2;
}
.top-bar{
  float:left;
  position:relative;
  height:60px;
  width:100%;
  background:#333;
}
.sidenav{
    /* 100% Full-height */
    width: 95vw; /* 0 width - change this with JavaScript */
    position: absolute;
    /*height: 100%; Stay in place */
    z-index: 999; /* Stay on top */
    top: 0; /* Stay at the top */
    right: -100vw;
    background: #333;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.2s;
    -webkit-box-shadow: -7px 15px 10px 0px rgba(0,0,0,0.70);
    box-shadow: -7px 15px 10px 0px rgba(0,0,0,0.70);
}

.sidenav.active{
    right:0;
}

.sidenav table{
  width: 100%;
  table-layout: fixed;
  padding:10px;
  border-collapse: collapse;
}
tr.navright{
  cursor:pointer;
}
.sidenav td{
  padding:30px 20px;
  color:#fff;
  font-weight:bold;
  font-size:1.4em;
  border-bottom: 1px solid #616161;
}
.sidenav td:nth-child(1),.sidenav td:nth-child(3){
  width:50px;
  color:#616161;
  font-size:1.7em;
}

.bar1, .bar2, .bar3 {
width: 50px;
height: 5px;
background-color:#333;
margin: 8px 0;
transition: 0.4s;
}
.sidenav .bar1,.sidenav .bar2,.sidenav .bar3 {
background-color:#fff;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 8px) ;
transform: rotate(-45deg) translate(-9px, 8px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-9px, -9px) ;
transform: rotate(45deg) translate(-9px, -9px) ;
}



.imageContainer{
  float:left;
  position:relative;
  margin:5px;
  width: calc(50% - 10px);
}
.imageContainer img{
  vertical-align:bottom;
  border:5px solid #fff;
}
.imageContainer.imgBeforeAfter{

}
.imageContainer.Before{
  clear:both;
}
.imageContainer span,.imageContainer p{
  position:absolute;
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
  left:5px;
  right:5px;
  margin:0 auto;
  text-align: center;
  text-shadow:0 1px 0 #333;
}
.imageContainer span{
  width:150px;
}
.imageContainer span{
  top:100px;
  font-size:3em;
}
.imageContainer p{
  width:100%;
  bottom:5px;
  font-size:2em;
}
@media (max-width:1024px) {
  .newPage,.menu .links,.top .content{
    width:100%;
  }
  .newPage,.menu .links{
    padding:20px;
  }
  .quoteMSG{
    display:none;
  }

  .top h1,.top h3{
    margin:0;
  }
  .top h1{
    font-size:3em;
  }
  .top h3{
    font-size:2.5em;
  }
}



@media (min-width:769px) {



  .menuTrigger {
    display:none;
  }

  .smallOnly{
    display:none;
  }

}
@media (max-width:768px) {

  .top{
  	float:left;
    height:auto;
    border-bottom:10px solid var(--bold1);
  }
  .top .content{
  	position:relative;
    height:auto;
    width:309px;
    margin:0 auto;
  }
  img.facebook,img.insta{
  	position:relative;
    float:left;
    margin-top:50px;
    right:auto;
  }
  .largeOnly{
    display:none;
  }
  .menu{
    display:none;
  }
  .top h3{
    font-size:2em;
  }
  .newPage#img_gallery{
    padding:0;
  }
  .imageContainer{
    margin:0;
    width:100%;
  }


}

@media (max-width:550px) {
  #contactform{
    padding:20px;
  }
  #contactform .info{
    padding:5px 0;
  }
  #contactform label,#contactform input,#contactform textarea{
    width:100%;
  }
  .top h1{
    font-size:2em;
  }
  .top h3{
    font-size:1.5em;
  }
}