html {
    height:100%;
     scroll-behavior: smooth;
}



 hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;

    border-width: 1px;
}

.padd{
	margin:0 -5px;



}

body{

  height:100%;

}

.maximum{
max-width:1240px;
margin:0 auto 0 auto;
padding:1em 2em;
}

.maximum1{
max-width:1240px;
margin:0 auto 0 auto;
padding:0;
}

.maximum2{
max-width:1240px;
margin:0 auto 0 auto;
padding:1em 0em 1em 1.5em;
}



h1{

font-family: 'questa-slab', sans-serif;
font-weight: 300;
font-style: normal;
  padding:0 0 10px 0;
  margin:0;
  color:#fff;
  font-size:3em;
  }

  h2{
  font-family: 'questa-slab', sans-serif;
  font-weight: 300;
  font-style: normal;
	text-align:center;
  padding:0 .5em .3em .5em;
  margin:0;
  color:#2f2f30;
 font-size:3em;
 line-height:1.1em;
  }

h3{

  font-family: 'questa-slab',sans-serif;
font-weight: 300;
font-style: normal;
  margin:0;
  color:#2f2f30;
  font-size:3em;

text-align:left;
  }

 h4 {

   font-family: 'source-code-pro', monospace;
   font-weight: 400;
   font-style: normal;
font-size:1.2em;
text-align:left;
line-height:1.2em;
letter-spacing:.01em;

}

 h5{
 margin:0;
 font-family: 'questa-sans', sans-serif;
 font-weight: 400;
 font-style: normal;
font-size:1.1em;
text-align:center;

color:#ce3920;
}

p{
font-family: 'questa', serif;
font-weight: 300;
font-style: normal;
margin:.2em 0;
color:#2f2f30;
font-size:1.2em;
line-height:1.5em;

}




.brand{

  text-align:center;
 margin:3em auto 0 auto;
  width:auto;
  padding:2em;

  }


  #intro{

 margin:-30px auto 0 auto;
 height:60px;
  width:auto;
  padding:0 5em 1em 5em;

  }


    .spacer{

 margin:0 auto 0 auto;
  width:auto;
  padding:5em 0 1em 0;

  }
    .spacer2{

 margin:0 auto 0 auto;
  width:auto;
  padding:2em 0 2em 0;

  }

  .spacer3{

margin:0 auto 0 auto;
width:auto;
padding:2em 0 0 0;

}

  .spacer4{

margin:0 auto 0 auto;
width:auto;
padding:1em 0 0 0;

}


.nop{padding:0;}

.pad{
  padding:2px;


}

#about{
background-color:#efefef;
padding:40px 0 30px 0;

}







 a.about{
color:#ce3920;
text-decoration:none;
-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}



.headtitle{

font-size:1.1em;
letter-spacing:.03em;
}


.marg{
margin-top:30px;

}

.bul{
  font-family: 'questa-sans', sans-serif;
  font-weight: 300;
  font-style: normal;
font-size:1em;
display:block;
margin-bottom: 3px;
}


.wrapper{min-height:100%; position:relative}

.nav ul{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin:20px 0 0 0;
  float:right;

}
.nav li {
  float: left;
  margin-left:20px;
}







.nav ul li a {
font-size:1em;
font-family: 'source-code-pro', monospace;
font-weight: 400;
font-style: normal;
color:gray;
letter-spacing:.1em;
  -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    text-decoration: none;
}

.home .nav ul li a:hover, .work .nav ul li a:hover  {
color:#ce3920;



}

.mail{
 background: url('../images/icons/mail_sprite.png') 0 0;
  height:18px;
  width:30px;
  display:inline-block;
  background-size:60px;
   position: relative;
    text-indent: -9999px;
    background-repeat: no-repeat;
    margin:2px 15px 0 0;
  }

.mail span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
   background: url('../images/icons/mail_sprite.png')  -30px 0;
    opacity: 0;
 height:18px;
  width:30px;
  display:inline-block;
  background-size:60px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition:  opacity 0.5s;

    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}


a.mail:hover span {
opacity:1;

}



#header{
margin-bottom: 0em;
width: 100%;
background-image: url('../images/featured/japanese-garden-3.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;
border:15px white solid;

}



.logo{
padding:10px 10px 10px 15px;
margin:0 0 10px 0;


}

#horizon
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top:45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    overflow: visible;
    visibility: visible;
    display: block;
    }



.cont{
max-width: 1200px;
margin:0 auto 0 auto;
padding:0;
}





.window{
display:block;
height:20em;
width:100%;

}

.window:hover {
text-decoration:none;



}

.sub{
  display:block;
  opacity:0;
  background-image:
url('../images/project_header/opacity.png');
background: cover;
background-repeat: repeat;
background-position: center;
height:100%;
width:100%;
position:relative;
font-family: 'source-code-pro', sans-serif;
font-weight: 400;
font-style: normal;
padding:15px;
font-size:1.3em;
line-height: 1.5em;
letter-spacing:.01em;
color: white;
-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}



.window:hover .sub{
 opacity:1;


}


.proj1 {
background-image: url('../images/project_header/gr_header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;
}

.proj2 {
background-image: url('../images/project_header/cc_header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;
}

.proj3 {
background-image: url('../images/project_header/sc_header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}

.proj4 {
background-image: url('../images/project_header/os-header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}

.proj5 {
background-image: url('../images/project_header/wt-header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}

.proj6 {
background-image: url('../images/project_header/pk-header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}

.proj7 {
background-image: url('../images/project_header/gh-header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}
.proj8 {
background-image: url('../images/project_header/ss-header.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;

}


#tell{
  margin:0 auto 0 auto;
   width:auto;
padding-top:3em;



}


.line{
border-bottom: 5px solid #b8b5b2;
  margin:0;
  padding-top: 20px;
  max-width:30px;

}

.line2{
border-bottom: 5px solid #b8b5b2;
   margin:0 0 20px 0;
  padding:10px 0 0 0;
  max-width:30px;

}

.line5{
border-bottom: 5px solid #fff;
   margin:0 ;
  padding:10px 0 0 0;
  max-width:30px;


}

.line3{
border-bottom: 5px solid #b8b5b2;
  margin:0 auto 30px auto;

  max-width:30px;

}

.linetop{
border-top: 1px solid #aaa;
  margin:50px auto 0 auto;
max-width:600px;
}
.line4{
border-bottom: 5px solid #b8b5b2;
  margin:20px auto 20px auto;

  max-width:30px;

}



.des-2{
  font-family: 'questa-slab', sans-serif;
  font-weight: 300;
  font-style: normal;
font-size:3em;
line-height:1.4em;


color:#111;

}

.des{
font-family: "source-code-pro", monospace;
font-weight: 400;
font-style: normal;
font-size:1.2em;
line-height:1.4em;
letter-spacing:.03em;

color:#fff;

}

.desc {

  display:block; /* Hidden by default */
  position: absolute; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 35px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */

  padding: 15px; /* Some padding */

  text-align:right;


}



/* MEDIA QUERIES */





/* Mobile 580px */
@media (max-width:580px) {

.desc {

 right:5%;
 left:5%;
margin:0 auto 0 auto;
  text-align:center;


}

#content h1{

  font-size:2.7em;
  }

  .window{

  height:15em;

  }


  #header{

  border:15px white solid;

  }

   #intro{

 margin:0 auto 0 auto;
  width:auto;
  padding:0 1.5em 1em 1.5em;
  height:0;

  }


  .sub{
   opacity:1;
font-size:1.5em;
}



  #horizon
      {
      color: white;
      background-color: transparent;
      text-align: center;
      position: absolute;
      top:40%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 260px;
      height: auto;
      overflow: visible;
      visibility: visible;
      display: block;
      }

      .cont{
      max-width: 1200px;
      margin:0 auto;
      padding:0;
      }



       .maximum {
       padding:0;
}

.maximum2 {
padding:0;
}




}
/* Mobile END */





@media (max-width:1000px) {

.window{

  height:15em;

}



 .sub{
   opacity:1;

}


}

@media (max-width:850px) {

.window{

  height:15em;

}



}

@media (max-width:770px) {


}

@media (max-width:1200px) {

.window{

  height:20em;

}


}
@media (min-width:1200px) {

      .home .maximum{

padding:0;
max-width:1240px;
}

.maximum2{
max-width:1240px;
margin:0 auto 0 auto;
padding:1em 5em 1em 1.5em;
}


}



/* MEDIA QUERIES END */




.orange{
color:#ce3920;

}



.black{
color:#2f2f30;

}

.footer{
background-color:rgba(192,192,192,0.2);

}



footer p{
  font-family: 'questa-sans', sans-serif;
  font-weight: 400;
  font-style: normal;

font-size:.9em;
text-align:center;
}

.back{
background-color:rgba(192,192,192,0.6);
margin-top:1em;



}


 .image{
width:100%;
height:auto;
padding-bottom: 2em;

}






.work a{

 color:#ce3920;

text-decoration:none;
-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.work .foot{

 color:#2f2f30;

text-decoration:none;
-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.work a:hover{
color:#ce3920;
}




.grey{
background-color:#eaeaea;

}

.grey-2{
background-color:#e0dcd3;

}
.grey-3{
background-color:#dfe4ed;

}



.work footer p{
font-size:.9em;
line-height:1.5em;
text-align:center;
}

#contact{


padding:40px 20px;
background-color:#2f2f30;
}

#contact h2{
color:#fff;
text-align:center;
padding: 0;



}

#contact a{

  color:#fff;
 font-size:1em;
 line-height:1.3em;
 text-decoration:none;
 text-align:center;
 -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

}

.work #contact span.con a{

  color:#fff;
 font-size:1em;
 line-height:1.3em;
 text-decoration:none;
 text-align:center !important;
 -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

}

#contact a:hover, .work #contact span.con a:hover {
color:#ce3920;

}


 #contact a.social{
  background: url('../images/icons/linkedIn-1.png') 0 0;
  height:30px;
  width:30px;
  display:inline-block;
  background-size:60px;
   position: relative;
    text-indent: -9999px;
    text-align:center;

}



#contact a.social span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
   background: url('../images/icons/linkedIn-1.png')  -30px 0;
    opacity: 0;
 height:30px;
  width:30px;
  display:inline-block;
  background-size:60px;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -ms-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
    transition:      opacity 0.5s;
     -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

}
 #contact a.social:hover span {
opacity:1;


}

.con{
display:block;
  text-align:center;
  font-family: 'questa-sans', sans-serif;
  font-weight: 400;
  font-style: normal;
font-size:1.2em;
padding:.5em 0;
line-height:1.4em;
}



.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    -moz-animation: fadeIn .5s ease-in;
    -ms-animation: fadeIn .5s ease-in;
    -o-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}





/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
   -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
     -moz-animation-duration: 1s;
    -moz-animation-fill-mode: both;
     -ms-animation-duration: 1s;
    -ms-animation-fill-mode: both;
     -o-animation-duration: 1s;
    -o-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;

}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;

}



.topPage {
    background: url('../images/icons/top.png')0 0;
  display:block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 15px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  height:35px;
  width:35px;
  background-size:cover;
text-indent: -9999px;

}