/* ==========================================================================
	#Reset
========================================================================== */
* { padding: 0; margin: 0; outline: 0; }

/* ==========================================================================
	#Base
========================================================================== */
html,
body { height: 100%; }

html { overflow-y: scroll; }
body { background: #fff; 
/*background: url(images/bg.png) no-repeat center center fixed; */
font-family: 'Eurostile', sans-serif; 
font-size: 13px; line-height: 1.54; color: #8c8c8c; 
-webkit-text-size-adjust: none; 
color: #b4bbc0; 
    /*background-image: url('images/Snedker_BG_3.jpg');*/
    /*background-repeat: no-repeat;*/
    /*background-position: top center;*/
    /*background-size: cover;*/
    
}

a { color: #7f7f7f; cursor: pointer; text-decoration: none; }

a {
    color: #b4bbc0;
}
a { 
	-webkit-transition: color .3s linear; 
	     -o-transition: color .3s linear; 
	        transition: color .3s linear; 
}
a:hover { color: #00c0f3; }

img { border: 0; vertical-align: middle; }

header,
main,
section,
nav,
footer { display: block; }

p { padding-bottom: 15px; }

h4 { font-family: 'Eurostile', sans-serif; font-size: 13px; line-height: 1.54; color: #00c0f3; }
.tnk-message h4 {
        font-family: 'Eurostile', sans-serif;
        font-size: 10pt;
        line-height: 1.25;
        font-weight: normal;
}

/* ==========================================================================
	#Helpers 
========================================================================== */
.clearfix:before,
.clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.hidden { display: none; }

.alignleft { float: left; }
.alignright { float: right; }

.cols { margin-right: -20px; }
.col { float: left; padding-right: 20px; }

.col-1of4 { width: 225px; }
.col-2of4 { width: 470px; }

/* ==========================================================================
	#Containers 
========================================================================== */
.wrapper { position: relative; height: 100%; }
.shell { overflow: hidden; width: 960px; margin: 0 auto; }

/* ==========================================================================
	#Header
========================================================================== */
.header { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 90px; border-bottom: 2px solid #d9d9d9; background: #fff; }

.logo { overflow: hidden; float: left; width: 210px; height: 70px; margin-top: 10px; white-space: nowrap; text-indent: 100%; background-image: url(images/Snedker_new.jpg);
	-webkit-background-size: 210px 70px;
	        background-size: 210px 70px;
}
.logo {
    background-image: url('images/Snedker_SVG_1.svg');
}

.nav { float: right; padding-top: 34px; }
.nav ul { overflow: hidden; list-style: none outside none; }
.nav li { float: left; }
.nav li + li { padding-left: 28px; }
.nav > ul > li > a { display: inline-block; padding-bottom: 30px; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: -0.5px; }
.nav a { 
	-webkit-transition: border-color .3s linear; 
	     -o-transition: border-color .3s linear; 
	        transition: border-color .3s linear; 
}
.nav a:hover,
.nav .current a { color: #00c0f3; border-color: #00c0f3; }

.nav-btn { display: none; }

.nav ul li {
	font-family: 'Archer Extra', sans-serif;
	font-size: 13pt;
}

.nav ul li a {
	text-transform: lowercase;
}


/* ==========================================================================
	#Section
========================================================================== */
.section { min-height: 100%; }
.section .shell { padding-top: 144px; }
.section-content { max-width: 470px; }
.section-image { padding-top: 6px; }
.section-image.alignleft { margin-right: 20px; }
.section-image.alignright { margin-left: 20px; }

/* ==========================================================================
	#Slider
========================================================================== */
.slider { position: relative; width: 960px; height: 170px; padding-top: 149px; margin: 0 auto; }
.slider-clip { overflow: hidden; margin: 0 -9px; }
.slides { list-style: none outside none; }
.slide { float: left; padding: 0 9px; }
.slide a { display: block; border: 1px solid transparent; }
.slide a { 
	-webkit-transition: border-color .3s linear; 
	     -o-transition: border-color .3s linear; 
	        transition: border-color .3s linear; 
}
.slide a:hover { border-color: #00c0f3; }

.slider-actions a { position: absolute; top: 224px; display: block; width: 17px; height: 20px; font-size: 0; line-height: 0; background: url(images/sprite.png) no-repeat 0 0; }
.slider-actions a { 
	-webkit-transition: opacity .3s linear; 
	     -o-transition: opacity .3s linear; 
	        transition: opacity .3s linear; 
}
.slider-actions .disabled { opacity: 0; }

.slider-actions .slider-next { right: -28px; background-position: -134px -74px; }
.slider-actions .slider-next:hover { background-position: -113px -74px; }

.slider-actions .slider-prev { left: -27px; background-position: -176px -74px; }
.slider-actions .slider-prev:hover { background-position: -155px -74px; }

.project { display: none; }
.projects .shell { padding-top: 55px; }
.project-image img { max-width: 100%; height: auto; }
.project-image img ~ img { margin-top: 20px; }
.project-content { position: relative; }
.project-entry { padding: 14px 20px 0 0; color: #9e9d9d; }
.project-entry {
    color: #b4bbc0;
}
.project-entry p { padding-bottom: 0; }
.project-actions { position: absolute; bottom: 0; right: 0; }

/* ==========================================================================
	#Contacts
========================================================================== */
.contacts { float: right; padding-bottom: 84px; margin-top: -7px; }

.form-contact .form-row ~ .form-row { padding-top: 33px; }
.form-contact .form-label { display: block; padding: 8px 0 12px; }
.form-contact .field { width: 470px; height: 16px; padding: 10px 0; border-width: 0 0 1px; border-style: solid; border-color: #d9d9d9; font-family: 'Eurostile'; font-size: 13px; line-height: 1.2; }
.form-contact .field {
    color: #b4bbc0 !important;
}
.form-contact .field::placeholder {
    color: #b4bbc0 !important;
}

.form-contact .field:focus { border-color: #00c0f3; }
.form-contact .field:hover { border-color: #a6a6a6; }
.form-contact .field-textarea { width: 448px; height: 68px; padding: 10px; border: 1px solid #d9d9d9; resize: none; }
.form-contact .form-actions { padding: 20px 0; text-align: right; }
.form-contact .form-btn { padding: 3px 18px 2px; cursor: pointer; border: 1px solid #dddddd; text-transform: uppercase; background: #fff; color: #7f7f7f; font-family: 'Eurostile'; font-size: 13px; }
.form-contact .form-btn {
    color: #b4bbc0;
}
.form-contact .form-btn:hover { background: #00c0f3; color: #fff; border-color: #00c0f3; }


.form-contact .error .field { border-color: #f39500; }

.form-contact .field,
.form-contact .form-btn { border-radius: 0; -webkit-appearance: none; }

.form-contact .field,
.form-contact .form-btn {
-webkit-transition: all .3s linear; 
     -o-transition: all .3s linear; 
        transition: all .3s linear; 
 }

.contacts-inner { width: 195px; padding-top: 30px; margin-left: auto; }

/* ==========================================================================
	#Footer
========================================================================== */
.footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99; height: 50px; padding-top: 29px; border-top: 2px solid #dedede; background: white; color: #7f7f7f; font-size: 12px; }
.footer a { color: #7f7f7f; }

.copyrights { float: left; }
.credits { float: right; }
.credits a:hover { text-decoration: underline; color: #fff; }
.footer {
    color: #b4bbc0;
}
.footer a {
    color: #b4bbc0;
}

/* ==========================================================================
	#Icons
========================================================================== */
[class^="ico-"] { display: inline-block; vertical-align: middle; background-image: url(images/sprite.png); background-repeat: no-repeat; }

.ico-close { width: 14px; height: 14px; background-position: -131px -98px; }
.ico-close:hover { background-position: -113px -98px; }


.splash { height: 100%; display: none; }

[data-splash="true"] .splash { display: table; }
[data-splash="true"] .wrapper { display: none; }

/* ==========================================================================
	#Media queries
========================================================================== */

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

	.slider,
	.shell { 
		-webkit-box-sizing: border-box; 
		   -moz-box-sizing: border-box; 
		        box-sizing: border-box; 
	}

	.shell { width: 100%; padding: 0 20px; }

	.section .shell { padding: 144px 20px 0; }

	.section-content { width: 32%; }

	.slider { width: 757px; height: auto; padding: 148px 20px 0; margin: 0 auto; }
	.slide { margin-bottom: 18px; }

	.projects { position: relative; }
	.project { width: 470px; margin: 0 auto; }
	.project-content { position: static; }
	.project-actions { bottom: auto; top: 138px; right: 20px; }
	.project .col-2of4 ~ .col { padding-top: 20px; }
	.project .col-1of4 ~ .col-2of4 { padding-top: 20px; }
	
	.contacts { float: none; position: relative; padding-top: 168px; }
	.contacts-inner { position: absolute; top: -21px; left: 50%; width: 470px; margin-left: -235px; }
	.form-contact { width: 470px; margin: 0 auto; }
	.form-contact .form-actions { padding-top: 12px; }
}

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

	.shell { padding: 0 10px; }
	.section .shell { padding: 90px 10px 0; }
	
	.header { height: 60px; }
	.header .shell { overflow: visible; }

	.logo { width: 120px; height: 40px; margin-top: 9px; background-image: url(images/logo-mobile@2x.png); background-position: 0 0;
		-webkit-background-size: 120px 40px;
		        background-size: 120px 40px;
	}
	.logo {
	    
	   background-image: url('images/Snedker_SVG_1.svg');
	}
	
	.nav-btn { display: block; text-transform: uppercase; }
	.nav-btn:before { width: 8px; height: 8px; background: url(images/sprite.png) no-repeat -197px -74px; content: '';  display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }

	.nav { padding-top: 20px; }
	.nav ul { position: absolute; top: 60px; left: 0; right: auto; width: 100%; padding: 10px; border-width: 0 0 1px 1px; border-style: solid; border-color: #00c0f3; background: #fff; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;

		-webkit-transform: translateX(100%); 
		-ms-transform: translateX(100%); 
		-o-transform: translateX(100%); 
		transform: translateX(100%); 
	}
	.nav ul.visible {
		-webkit-transform: translateX(0); 
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		transform: translateX(0); 

	}
	.nav ul { 
		-webkit-transition: -webki-transform .3s linear; 
		-o-transition: -o-transform .3s linear; 
		-moz-transition: -moz-transform .3s linear; 
	    transition: transform .3s linear;
	}
	.nav li { float: none; }
	.nav li + li { padding: 5px 0 0; }
	.nav ul > li > a { padding: 0; display: block; border-bottom: 0; text-align: center; }

	.section-image,
	.section-content { width: 100%; float: none; }

	.section-image.alignleft,
	.section-image.alignright { margin: 0; }

	.section-image.alignleft { padding-bottom: 20px; }
	.section-image img { width: 100%; height: auto; }

	.slider { width: 100%; padding: 94px 10px 0; }
	.slider-clip { margin: 0 -5px; text-align: center; }
	.slides { display: inline-block; font-size: 0; line-height: 0; }
	.slide { width: 44%; padding: 0 5px; margin-bottom: 9px; float: none; display: inline-block; vertical-align: top; }
	.slide img { width: 100%; height: auto; }
	
	.projects .shell { padding: 0 0 0; }
	.project { width: 100%; text-align: center; }
	.project-image .cols { margin: 0; }
	.project-image .col { float: none; width: 100%; }
	.project-image .col {
    margin-bottom: 15px;
        }
	.project-image .col-2of4 img { width: 100%; height: auto; }

	.project-image .col-1of4 ~ .col-1of4 { padding-top: 20px; }
	.project-content { position: relative; }
	.project-actions { top: 12px; right: 10px; }

	.form-contact .field,
	.form-contact { width: 100%; }
	.form-contact .field { 
	-webkit-box-sizing: border-box; 
	   -moz-box-sizing: border-box; 
	        box-sizing: border-box; 
	    }
	.form-contact .field { height: 34px; }
	.form-contact .field-textarea { height: 89px; }

	.contacts { padding: 181px 10px 84px; }
	.contacts-inner { top: -25px; left: 10px; margin-left: 0; }

	.footer { position: static; height: 63px; padding-top: 16px; text-align: center; }
	.copyrights,
	.credits { float: none; padding: 0; }
	.copyrights { padding-bottom: 6px; }

}

.home-wrap {
	display: flex;

}

#slideshow { 
	
	position: relative; 
	width: 50%; 
	height: auto;
    min-height: 551px;
    max-width: 960px;
    overflow: hidden;
    width: 100%;
	/* padding: 10px; 
	box-shadow: 0 0 20px rgba(0,0,0,0.4);  */
  }
  
  #slideshow > div { 
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
  }

  p {
	font-family: 'Eurostile', sans-serif;
	font-size: 10pt;
	line-height: 1.25;
  }

  .title-wrap {
	  text-align: center;
  }
  .title-wrap h3 {
	font-family: 'Archer Extra', sans-serif;
	font-size: 14pt;
	  font-style: italic;
	  font-weight: bold;
	  
  }
  .quote-wrap h2 {
	
	  font-family: 'Archer Extra', sans-serif;
	font-size: 30pt;
	text-align: right;
	  padding-right: 50px;
  }

  h2 {
	text-align: left;
	font-family: 'Archer Extra', sans-serif;
	font-size: 30pt;
	font-weight: normal;
  }

  h3 {
	font-family: 'Archer Extra', sans-serif;
	font-size: 14pt;
	  font-style: italic;
	  font-weight: bold;
	  
  }

  #services h3 {
	  padding-left: 50px;
	  margin-bottom: 20px;
  }

  .client-wrap .row {
	  display: flex;
	  margin-bottom: 30px;
  }
  .client-wrap .section-content {
	  padding: 15px;
  }
  .client-wrap h3 {
	  padding-left: 50px;
	  margin-bottom: 20px;
  }

  li.project_text {
	  float: left;
	  
  }

  li.project_text h3 {
	padding-left: 30px;
  }

  /* .slider-clip ul {
	  display: flex;
  }

  .slider-clip .project_item {
	max-width: 25%;
	width: 100%;
	min-height: 170px;
  } */

  .projects .shell {
	  /* padding-top: 144px;
	  margin-top: 100px; */
  }

  .slider {
	  height: auto;
  }

  .slide {
	  padding-top: 9px;
	  padding-bottom: 9px;
  }

  .col-3of4 {
	  width: 675px;
  }

  .col-4of4 {
	  width: 940px;
  }

  .contact-wrap {
	  display: flex;
	 
  }
  
  @media (max-width: 767px) {
     .contact-wrap {
	  flex-direction: column;
     }
	 li.project_text {
	     width: 50%;
    height: 150px;
    display: inline-block;
    line-height: 1;
    float: none;
	 }
	 ul.slides {
	     width: 100%;
	     
	 }
	 ul.slides li.slide {
	     min-width: 44%;
	 }
	 
	 .client-wrap .row {
	     flex-direction: column;
	 }
	 #slideshow img {
	     width: 100%;
	     margin-top: 50%;
	 }
	 .project-image {
	     padding: 0 20px;
	 }
  
  }

  .contact-text {
	  padding: 15px;
  }

  .form-contact {
	  padding: 15px;
  }
  
  .project-image .no-padding {
   padding: 0;   
  }
  
  .w715 {
    width: 715px;    
  }
  
  .w960 {
      width: 960px;
  }
  
  .w265 {
      width: 265px;
  }
  
  .w225 {
      width: 225px;
  }
  .padding-left {
      padding-left: 20px;
      padding-right: 0;
  }
  
 @media only screen and (max-width: 767px) {
    section {
        padding: 0 15px;
    }
    .padding-left {
      padding-left: 0;
    }
      .form-contact {
	  padding: 0;
  }
  .client-wrap .section-content {
	  padding: 0;
  }
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(images/Snedker_BG_3.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}