*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'gotham_lightregular';
}

iframe { background: url(assets/img/VT-AGUA-DE-COCO-ICE.jpg); }

body, html  {  	
	font-size: 16px;
}

h1,h2,h3,h4,h5,h6{
	color:#00ff7e;
}

a {
	text-decoration:none;
}

div.clear{
	clear: both !important;
}

.bg{
	background:#009349;
}

/*CABEÇALHO*/
header{
	float:left;
	width:100%;
	position: sticky;
    top: 0;
	z-index:9999;
}

.topo{
	/*max-width: 1280px;*/
	padding: 4% 6% 0 6%;
	position:absolute;
	width:100%;
}
a > h1.logo{
	display:inline-table;
	float:left;
	
}	
h1.logo{
	background: url(assets/img/logo-coco-ice.png) center center/120px;
	width:120px;
	height:87px;
	font-size: 0;
	background-repeat: no-repeat;
}

/* Menu responsivo */ 
input#control-nav {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* Menu */
nav.menu{
	float:right;
	display:inline-table;
	text-transform:uppercase;
}	
nav.menu li{
	display:inline;
}

nav.menu li a{
	margin: 0 2.5rem;
	text-decoration:none;
	line-height:150%;
	color: #00ff7e;
}

nav.menu li a:hover{
	font-family: 'gotham_ultraregular';
	border-bottom: 6px solid #00ff7e;
}

section{
	width:100%;
	display:block;
	height:100vmin;
}

section article .bg-cinza, .bg-verde, .folhas, .garrafa,
.bg-verde-claro, .bg-cinza-escuro, .bg-tabela, .bg-produtos {
	position:absolute;
	display: inline-block;
    width: 99.1vmax;
    height: 100vmin;
	vertical-align: middle;
}

section.rodape{
	width:100%;
	display:block;
	height:50vmin;
	background:#009349;
}

section article .bg-rodape{
	position:absolute;
	display: inline-block;
    width: 99.1vmax;
	vertical-align: middle;
	height: 50vmin;
}
	
section .content{
	margin: 0 8% 0% 6%;
	width:86%;
	display:inline-block;
	position:absolute;
	float:left;
	z-index:5;
	overflow:hidden;
	height:100vmin;
}

section .content h2{
	font-size:8rem;
	position:relative;
	top:30%;
	font-family: 'gotham_ultraregular';
	line-height:75%;
	text-align:right;
	color:#FFF;
}

section .content h4{
	font-size:1.3rem;
	position:relative;
	top:30%;
	text-align:right;
	color:#FFF;
}

section .content h3{
	font-size:1.5rem;
	position:relative;
	top:30%;
	font-family: 'gotham_mediumregular';
	text-align:right;
}

section .content h2.title{
	font-size:8rem;
	position:relative;
	top:5%;
	font-family: 'gotham_ultraregular';
	line-height:75%;
	color:#FFF;
	text-align:left;
}

/*====FOOTER====*/
.logo-footer{width:100%; height:100px; position:absolute; z-index:5; margin-top:20px;}
.logo-footer h1{width:170px; height:123px; background:url(assets/img/logo-footer.png) center center/170px no-repeat; font-size:0; text-align:center; margin: 0 auto; z-index:5;}
.info{width:100%; height:100px; position:absolute; z-index:5; margin-top:160px;}
.info h3{margin: 0 auto; width:150px; color:#FFF;}
.info p {margin: 0 auto; width:300px; color:#FFF; text-transform:uppercase; line-height:130%;}
.info h3:hover, .info p:hover{color:#00ff7e;}
.menu-footer{width:100%; height:70px; line-height:70px; margin-top:240px; display:block !important; position:absolute; z-index:5;  background:none;}
	.menu-footer ul{padding:0 !important; text-align:center; list-style:none;}
	.menu-footer li{padding:0;  border:none; width:auto; display:inline-block;}
	.menu-footer li a{color:#FFF; font-size:1em; width:auto; margin:15px; text-transform: uppercase; font-weight:bold}
	.menu-footer li a:last-child{padding-right:0;}
	.menu-footer li a:hover{color:#00ff7e; 	border-bottom: 6px solid #00ff7e;}


@media screen and (min-width: 300px) and (max-width: 767px){
	nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 250px;
		border-left: 1px solid #ccc;
		background: #fff;
		overflow-x: auto;
		z-index: 2;
		-webkit-transition: all 500ms ease;
		transition: all 500ms ease;
		-webkit-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}
	.control-nav {
		position: absolute;
		right: 20px;
		top: 35px;
		display: block;
		width: 30px;
		padding: 5px 0;
		border: solid #009349;
		border-width: 3px 0;
		z-index: 2;
		cursor: pointer;
	}

	.control-nav:before {
		content: "";
		display: block;
		height: 3px;
		background: #009349;
	}

	.control-nav-close {
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		display: block;
		z-index: 1;
		background: rgba(0,0,0,0.4);
		-webkit-transition: all 500ms ease;
		transition: all 500ms ease;
		-webkit-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}
	
	/* Menu */
	nav.menu{
		height:100%;
		margin:0;
	}
	nav.menu li{
		display:block;
		width: 250px;
	}

	nav.menu li a{
		width:100%;
		float:left;
		padding:15px 10px;
	}
	
	/* checked nav */
	input#control-nav {
		display: block;
	}

	input#control-nav:focus ~ .control-nav {
		border-color: #000;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
	}

	input#control-nav:focus ~ .control-nav:before {
		background: #000;
	}

	input#control-nav:checked ~ nav,
	input#control-nav:checked ~ .control-nav-close {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	section article .bg-cinza, .bg-verde, .folhas, .garrafa,
	.bg-verde-claro, .bg-cinza-escuro, .bg-tabela, .bg-produtos {
		width:100%;
		height:100vmin;
	}
	
	section article .bg-rodape{
		width:100%;
		height:50vmin;
	}
	section .content h2{
		font-size:4rem;
		position:relative;
		top:20%;
	}

	section .content h4{
		font-size:1rem;
		position:relative;
		top:20%;
	}
	
	section .content h2.title{
		font-size:2.5rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 959px){
	
	
}

@media screen and (min-width: 960px) and (max-width: 1279px){
	/* Menu responsivo */ 
	input#control-nav {
	  visibility: hidden;
	  position: absolute;
	  left: -9999px;
	  opacity: 0;
	}
	
	nav.menu li a{
		padding: 0 10px;
	}
	
	section .content h2.title{
		font-size:5rem;
		top:3%;
	}
}

@media screen and (min-width: 1280px) and (max-width: 1600px){
	nav.menu li a{
		padding: 0 .5rem;
	}
	
	section .content h2.title{
		font-size:6rem;
		top:3%;
	}
	
	section article .bg-cinza, .bg-verde, .folhas, .garrafa,
    .bg-verde-claro, .bg-cinza-escuro, .bg-tabela, .bg-produtos {
        width: 98.7vmax;
    }
	section article .bg-rodape{
	    width: 98.7vmax;
	}
}