*, *::after, *::before { box-sizing: border-box; }

html, body { width: 100%; text-align: center; }

body { font-family: 'Open Sans', sans-serif; color: #ffffff; background: #252525; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before { content: 'mobile'; display: none; }

.cd-section { height: 100%; }
.cd-section:first-child > div { background-color: #faeba1; }
.cd-section:first-child > div:before { content: none; }

.cd-section:nth-child(2) > div { background-color: #a9a1fa; }
.cd-section:nth-child(3) > div { background-color: #a1fab8; }
.cd-section:nth-child(4) > div { background-color: #facda1; }
.cd-section:nth-child(5) > div { background-color: #faa1a7; }
.cd-section:nth-child(6) > div { background-color: #a1facf; }

a { text-decoration: none; text-transform:capitalize; }
	
.container { width: 1600px; margin: 0px auto; float: none; display: inline-block; }

#logo { width:100%; background: #252525; text-align: center; color: #fff; text-transform:uppercase; float: none; display:inline-block; position: relative; padding: 30px 0px; }
#logo a { color: #fff; text-transform: uppercase; font-weight: 700; font-size: 30px; border: 7px double #fff; padding: 5px 10px 6px; }
#logo a span { margin: 0 -7px; color: #fcdb34; }
#logo a, #logo p { float: none; display: inline-block; }

#logo p { font-weight: 700; font-size: 30px; margin-left: 10px; position: relative; }
#logo p span { color: #fcdb34; width: 26px; height: 26px; border-radius: 50%; line-height: 21px; border: 2px solid #FFF; float: right; font-size: 15px; position: absolute; right: -36px; top: 50%; transform: translate(0, -50%); 
-moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); margin-top: 2px; }

.features { width: 100%; float: left; text-align: center; margin-bottom: 30px; }
.features h4{ text-transform:capitalize; font-size: 24px; margin: 0px auto; text-align: center; float: none; display: inline-block; background: #fcdb34; color: #252525; padding: 8px 10px; position: relative; }
.features h4:after { position: absolute; right: -15px; top: 0; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 40px 15px 0 0; border-color: #fcdb34 transparent transparent transparent; }
.features h4:before { position: absolute; left: -15px; top: 0; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 15px 40px 0; border-color: transparent #fcdb34 transparent transparent; }

.dt-sc-one-third { width: 32.66%; float: left; display: inline-block; margin-left: 1%; margin-bottom: 15px; position:relative; text-align: center; padding: 1% 0; border: 1px solid rgba(0,0,0,0.3); }
.dt-sc-one-third.first { margin-left: 0; }
.dt-sc-one-third a.image { width: 65%; float: none; display: inline-block; }
.dt-sc-one-third img { width: 100%; float: left; margin-bottom: 20px; }
.dt-sc-one-third h5 { width: 100%; float: left; font-size: 20px; margin-bottom: 20px; color: #252525; }

.dt-sc-one-third .overlay { position: absolute; height: 90%; background: rgba(0,0,0,0.8); position: absolute; top: 0; bottom: 0; right:0; left: 0; margin: auto; width: 100%; opacity: 0; -webkit-box-shadow: inset 0px 0px 0px 4px #fcdb34; 
-moz-box-shadow: inset 0px 0px 0px 4px #fcdb34; box-shadow: inset 0px 0px 0px 4px #fcdb34;  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dt-sc-one-third .overlay h5 { color: #fff; }
.dt-sc-one-third .overlay .overlay-content { position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); margin: 0px auto; left: 0; right: 0; }

.dt-sc-one-third:hover { border-color: #fcdb34; }
.dt-sc-one-third:hover .overlay  { opacity: 1; transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); height: 100%; width: 100%; }

.dt-sc-one-third, .dt-sc-one-third:hover, .dt-sc-one-third .overlay, .dt-sc-one-third:hover .overlay, .dt-sc-one-third .overlay .overlay-content, .dt-sc-one-third:hover .overlay .overlay-content, .dt-sc-button, .dt-sc-button:hover { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition:all 300ms linear;  -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.dt-sc-button, .cd-vertical-nav a { padding: 15px 30px; text-transform: uppercase; font-weight:500; text-align:center; color: #000; display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0);
transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color;
-webkit-transition-duration: 0.5s; transition-duration: 0.5s;  border: 1px solid #fcdb34; background: #fcdb34; text-transform:capitalize; }  
.dt-sc-button:before, .cd-vertical-nav a:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; -webkit-transform: scaleX(0); transform: scaleX(0); 
-webkit-transform-origin: 100% 50%;	transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out; }  
.dt-sc-button:hover:before, .cd-vertical-nav a:hover:before { -webkit-transform: scaleX(1);transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }

.cd-vertical-nav { position: fixed; z-index: 1; right: 3%; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);
  display: none; }

.cd-vertical-nav a { float: none; position: static; display: inline-block; padding: 0; width: 40px; height: 40px; line-height: 40px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); background: #fcdb34; margin: 10px 0px;  outline: none; border: none; }

.cd-vertical-nav a i { float: none; position: static; color: #252525; display: inline-block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); width: 40px; height: 40px;
	line-height: 40px;  text-align: center; }

.cd-vertical-nav a.inactive { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; transition: opacity 0.2s 0s, visibility 0s 0.2s; }


@media only screen and (min-height: 900px) {
	
	.container { width: 1400px; }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
	
	.container { width: 1200px; }
	
	#logo { padding: 15px 0px; }
	
}



@media only screen and (min-width: 1025px) and (max-width: 1400px) {
	
	.container { width: 900px; }	

	.cd-section > div { padding-bottom: 60px; }
	
	/*.dt-sc-one-half { padding: 5%; }	
	.dt-sc-one-half a.image, .dt-sc-one-half .dt-sc-title { width: 100%; }
	
	
	.dt-sc-one-half .dt-sc-title { position: relative; transform: translate(0); -moz-transform: translate(0); -webkit-transform: translate(0); margin-left: 0; margin-top: 20px; text-align: center; }
	.dt-sc-one-half a { text-align: center; margin: 0px auto; float: none; display: inline-block; }	*/
	
	/*.cd-vertical-nav { top: 5%; bottom: auto; transform: translateY(0%); -moz-transform: translateY(0%); -webkit-transform: translateY(0%); }*/
	
	.cd-vertical-nav { right: 1%; }
	
}

@media only screen and (min-width: 1024px) {
	
body::before { content: 'desktop'; }
body[data-hijacking="on"] { overflow: hidden; }

.cd-section { height: auto; }
.cd-section:first-of-type > div::before { display: none; }
.cd-section h2 { font-size: 4rem; font-weight: 300; }
.cd-section > div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
-webkit-backface-visibility: hidden; backface-visibility: hidden; }

[data-hijacking="on"] .cd-section { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; }
[data-hijacking="on"] .cd-section > div { visibility: visible; }
[data-hijacking="off"] .cd-section > div { opacity: 0; }
[data-animation="opacity"] .cd-section.visible > div { z-index: 1; }

.cd-vertical-nav { display: block; }

}


@media only screen and (max-width: 1024px) {
	
	.container { width: 720px; margin-bottom: 60px; }	
	
/*	.dt-sc-one-third, .dt-sc-one-third.first { padding: 5%; width: 49%; margin: 0 1% 1% 0; }	*/
/*	.dt-sc-one-third:nth-child(even) { margin: 0; }*/
	.dt-sc-one-third a { text-align: center; margin: 0px auto; float: none; display: inline-block; }	
	.dt-sc-one-third a.image { width: 80%; }
	.dt-sc-one-third, .dt-sc-one-third.first { padding: 2%; }

@media only screen and (max-width: 767px) {
	
	.container { width: 468px; }	
	
	.cd-section { height: auto; }
	
	.dt-sc-one-third, .dt-sc-one-third.first { width: 100%; padding: 5%; margin-bottom: 30px; }
	
	#logo p { padding: 12px 0 0; }
	
	.dt-sc-one-third a.image { width: 100%; }

}

@media only screen and (max-width: 467px) {
	
	.container { width: 300px; }	
	
	#logo p { padding: 10px 0px; font-size: 20px; }
	#logo p span { right: 0; left: 0; margin: 0 auto; top: auto; bottom: -35px; }
}

@media only screen and (max-width: 320px) {
	
	.container { width: 220px; }	
}