* {
	box-sizing: border-box;
  }

html, body, div#header, #main { width:100%; height:100%; margin:0;}

html.sr .load-hidden {
    visibility: hidden;
}

body {
	margin:0;
	padding:0;
	font:14px 'Lato';
	
}

.clear {
clear:both;
}


.logo-big {

	position:fixed;
	top:20px;
	left:calc(50% - 120px);
	width:240px;
	height:80px;
	z-index: 1002;
	background:	url("../images/logo-big-shadow.png") no-repeat top left; 
	transition-property: all;
	transition-duration: .5s;

}

.logo-small {

	position:fixed;
	top:10px;
	left:calc(50% - 90px);
	width:180px;
	height:60px;
	z-index: 1002;
	background:	url("../images/logo-small-shadow.png") no-repeat top left; 
	transition-property: all;
	transition-duration: .5s;

}


.logo-background-first {

	position:fixed;
	top:0px;
	left:0px;
	height:153px;
	width:100%;
	background:rgba(255,255,255,0.50);
	border-bottom:0px solid #fff; 
	z-index: 1001;
	transition-property: all;
	transition-duration: 1s;
	backdrop-filter:blur(2px);
}

.logo-background {

	position:fixed;
	top:0px;
	left:0px;
	height:117px;
	width:100%;
	background:rgba(240, 240, 240, 0.96);
	border-bottom:0px solid #fff;
	z-index: 1001;
	transition-property: all;
	transition-duration: 1s;
	backdrop-filter:blur(2px);
}


.header-down-arrow {
    position: absolute;
    bottom: 36px;
    width: 36px;
    height: 36px;
    left: 50%;
    margin-left: -18px;
    background-image: url(../images/chevron-down.png);
    background-size: cover;
    cursor: pointer;
    animation-duration: 1s;
    z-index: 1001;
    border: 2px solid #fff;
	border-radius: 50%;
	transition-property: all;
	transition-duration: .2s;
}

.header-down-arrow:hover {
    position: absolute;
    bottom: 40px;
    width: 40px;
    height: 40Px;
    left: 50%;
    margin-left: -20px;
	animation-duration: 1s;
	transition-property: all;
	transition-duration: .2s;

}


.slider{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;

}
#slider {
	position: relative;
  	width: 100%;
  	height: 100%;
  	overflow-x: hidden;
 	overflow-y: scroll;
	perspective: 8px;
	perspective-origin: 0%;
	display: flex;
}

.slide{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
	transform: translateZ(0px);
	animation: animateZ 2s infinite;
}

#slideposition {

display:none;

}

.slidecontent{

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

}


.checker-overlay{

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:	url("../images/fillpattern.png") top left; 

}


.slide-1 {
	background:	url("../images/slide-1.jpg") no-repeat top left; 

}

.slide-2 {
	background:	url("../images/slide-2.jpg") no-repeat top left; 

}

.slide-3 {
	background:	url("../images/slide-3.jpg") no-repeat top left; 

}

.slide-4 {
	background:	url("../images/slide-4.jpg") no-repeat top left; 

}

.slide-title {

	position:absolute;
	width:auto;
	left:5%;
	top:28%;
	color:#fff;
	font:26px "Fira Sans Condensed";
	text-shadow: 2px 2px 4px rgba(0,0,0,0.31);
	background:rgba(0,0,0,0.60);
	padding:12px 18px;
}


.slide-description {

	position:absolute;
	width:80%;
	left:10%;
	top:calc(26% + 60px);
	color:rgb(65, 65, 65);
	font:14px "Lato";
	font-weight:300;
	/* text-shadow: 2px 2px 4px rgba(0,0,0,0.21); */
	background:rgba(255,255,255,0.90);
	padding:20px 30px;
	line-height:20px;
}

.slide-button {

	text-align:center;
	position:absolute;
	width:300px;
	left:calc(50% - 150px);
	bottom:16%;
	color:#fff;
	font:24px "Fira Sans Condensed";
	font-weight:normal;
	background:rgba(4,161,214,0.70);
	padding:16px 24px;
	line-height:24px;
	cursor:pointer;
	transition-property: all;
	transition-duration: .5s;
}


.heading-text {
	
	margin:6px 5%;
	padding:6px 0;
	color:#009380;
	font:32px "Fira Sans Condensed";
	border-bottom:1px solid #eee;
	
}

.heading-text-2 {
	
	margin:6px 5%;
	padding:6px 0;
	color:#e28c1b;
	font:32px "Fira Sans Condensed";
	border-bottom:1px solid #eee;
	
}

.main-text {

	padding:0 5% 12px 5%;
	color:rgb(65, 65, 65);
	font:15px "Lato";
	font-weight:400;
	line-height:24px;

}

.main-text-2 {

	padding:0 5% 12px 5%;
	color:#fff;
	font:15px "Lato";
	font-weight:400;
	line-height:24px;

}

.main-text-image {

	text-align:center;
	padding:24px 0;

}

#nanosolveit-image img {

width:90%;

}

#nav {

	position:fixed;

}

.nav-first {
	width:100%;
	position:fixed;
	top:116px;
	left:0px;
	z-index:1002;
	font-family:'Fira Sans Condensed';
	transition-property: all;
	transition-duration: 1s;


}

.nav {
	width:100%;
	position:fixed;
	top:80px;
	left:0px;
	z-index:1002;
	font-family:'Fira Sans Condensed';
	transition-property: all;
	transition-duration: 1s;
	
}

.btn{
	position:relative;
	width:25%;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	background:rgba(0, 147, 128, 0.6);
	padding:10px 0px;
	text-align: center;
	font-size:14px;
	margin:0;
	text-decoration:none;
	letter-spacing:2px;
	text-transform:uppercase;
  }
  


  .section-2 {

	padding:20px 5% 20px 5%;

  }


  .big-icon {

	width:90%;
	padding:20px;
	margin:20px 5% 20px 5%;
	background: #eee;
  }



 .big-icon-title {

	text-align:center;
	color:#009380;
	font:22px "Fira Sans Condensed";
	padding:0 0 18px 0px;
}

.big-icon-image {

	text-align:center;

	}
	
	
.big-icon-image img {

	width:120px;

  }

.big-icon-description {

	text-align:center;
	color:#666;
	font:14px "Lato";
	font-weight:400;
	line-height:24px;
	padding:18px 24px;


}

.big-icon-button {

	text-align:center;
	width:60%;
	bottom:25%;
	color:#fff;
	font:16px "Fira Sans Condensed";
	font-weight:normal;
	background:#04a1d6;
	padding:12px 14px;
	cursor:pointer;
	margin:12px 20% 24px 20%;
	transition-property: all;
	transition-duration: .5s;
}

.big-icon-button:hover {

	width:70%;
	background:#009380;
	margin:12px 15% 24px 15%;
	transition-property: all;
	transition-duration: .5s;
}

.section-3 {

	padding:20px 5%;
	background:url("../images/back-section-3.jpg") top left no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;

  }

.section-4 {

	padding:20px 5%;
	background:#f2f2f2;

}

#fatfooter-wrapper {
	position:relative;
	padding:0;
	width:100%;
	background-color:#00574b;
	
	height:280px;

}

	
	#fatfooter-container {
	position:relative;
	width:80%;
	margin:0px auto;
	padding:30px 0;
	color:#fff;
	
	}