@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400);
@import url('nuvens.css');

body {

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	margin:0;
	padding: 0;
}
body,html {
	height: 100%;
}

p{

	/*font-size: 16px;*/
}
p.quem-somos-descricao{

	background-color: #fff;
	padding: 15px 10px;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 4px solid #eee;
	border-bottom: 4px solid #eee;
}

/* Passo a passo */

.passo-a-passo{

	text-align: center;
}
.passo-a-passo i.como-funciona{
	
	color: #fff;
	line-height: 180px;
	background-color: #8CC440;
	font-size: 100px;
	width: 180px;
	height: 180px;
	border-radius: 100%;
	border-top: 2px solid #6B9433;
	border-left: 2px solid #6B9433;
	border-right: 8px solid #6B9433;
	border-bottom: 8px solid #6B9433;
	
}
.passo-a-passo p{
	
	margin-top: 20px;
	/*font-size: 16px;*/
	text-align: justify;
	/*font-weight: 400;*/
}

.social-media{
	
    width: 100%;
    height: 0; /* A mágica está aqui */
    padding-bottom: 100%; /* ... e está aqui */
    float: left;
    position: relative;
}

.social-media .block{
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 10px !important;
  height: 100%;
  z-index: 81;
  background-color: #000;
}

.social-media .block:before {

  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
 }

.block.facebook{

	background-color: #3B5998;
}

.block.twitter{

	background-color: #55ACEE;
}
.instagram{
	
	background-image: url(../img/bg-insta.png);
	background-repeat: no-repeat;
	background-position: top;
	background-color: #DFD5C3;
}
.timeline{

	border-radius: 0 !important;
}

.instagram-box{

	position: absolute;
	z-index: 90;
	padding: 10px;
	width: 100%;
	height: 100%;
}
.twitter-timeline{

	width: 100% !important;
	height: 100% !important;
	padding: inherit;
}
.fb-like-box{
	
	/*position: absolute !important;*/
	/*top: 0 !important;
	left: 0 !important;*/
	width: 100% !important;
	height: 100% !important;
	/*margin: 10px;*/
	z-index: 85;

}

/* Testes */

/* Gera um quadrado responsivo. */
.square{
    width: 100%;
    height: 0; /* A mágica está aqui */
    padding-bottom: 100%; /* ... e está aqui */
    float: left;
    position: relative;
}

/*
    Veja mais sobre como centralizar o texto no box aqui:
    http://css-tricks.com/centering-in-the-unknown/
*/
.block{

  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
}
 
.block:before{

  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}
 
.centered{

	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	padding: inherit;
	width: 100%;
	height: 100%;
	color: #FFF;
	padding: 10px;
 }

 /* Fim testes */


.fb-like-box span{

	background-color: #fff;
}
.fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe{
	

    width: 100% !important;
    height: 100% !important;
}
/*{
	
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 200px !important;
	height: 100% !important;
}*/

.mascara{

	display: none;
	position: fixed;
	z-index: 9998;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
}

.frame{

	
	position: fixed;
	top: 5%;
	left: 5%;
	z-index: 9999;
	width: 90%;
	height: 90%;
	background-color: #fff;
	border-radius: 5px;
}

.frametop{

	position: fixed;
	background-color: #f5f5f5;
	border-bottom: 1px solid #eee;
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid #ccc;
	width: 90%;
	height: 50px;
}

.frame-content{

	float: left;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: auto;
	text-align: left;
	/*border-radius: 0 0 5px 5px;*/
	padding: 10px;
	bottom: 0px;
}

.frame-content img{

	max-width: 100%;
}



.fechar{

	padding: 10px 15px;
	/*border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-top: 0;
	border-left: 0;*/
	border: 0;
	border-radius: 5px;
	background-color: #f5f5f5;
	position: absolute;
	right: 5px;
	top: 5px;

}

#clouds{
	
	/*background-color: #C1DCE4;*/
	display: block;
	position: absolute;
	width: 100%;
	height: 360px !important;
	overflow: hidden;
	top: 0;
	/*top: 0;*/
}

header{

	background: #999;
	position: fixed;
	width: 100%;
	display: table;
	height: auto;
	background-color: #FFFFFF;
	overflow: auto;
	z-index: 9997;
	box-shadow: 0 0 5px #888888;box-shadow: 0 0 5px #888888;
}

#logo-container img{
	
	padding: 20px;
	margin-top: 0px;
	margin-left: 450px;
}

/* Mídia */

section.content{

	background-image: url(http://subtlepatterns.com/patterns/cream_pixels.png);
}

.mosaico{
	
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 4px solid #333;
	border-bottom: 6px solid #333;
}

.mosaico img{

	position: relative;
	width: 100%;
	padding: 0;
	top: 0;
	left: 0;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
}

.mosaico:hover img{

	filter: none;
	-webkit-filter: grayscale(0%);
}

.mosaico .mascara-mosaico{
	
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0,0,0,0.5);
	text-align: center;
}

.mosaico .mascara-mosaico .botao{
	
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -60px;
	margin-top: -20px;
	width: 120px;
	padding: 10px;
	background-color: #3DB5BE;
	border-right: 2px solid #2E8E96;
	border-bottom: 2px solid #2E8E96;
	border-radius: 5px;
	color: #fff;
	opacity: 1;
	font-family: 'Lobster', cursive;
	cursor: pointer;
}

.mosaico .mascara-mosaico .botao:hover{

	background-color: #3CA9B2;
}

.mosaico .legenda-mosaico{

	position: absolute;
	bottom: 20px;
	right: 0;
	color: #fff;
	padding: 10px;
	background-color: rgba(0,0,0,0.9);
}
/*
.mosaico .mascara::after{
	
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	background: rgba(0,0,0,0.5);
}*/

/*

.mosaico li{
	
	position: relative;
	text-decoration: none;
	width: 33.3%;
	float: left;
	display: block;
}
ul.mosaico li .botao{
	
	position: relative;
	top: 40%;
	left: 30%;
	width: 120px;
	padding: 10px;
	background-color: #831818;
	border-right: 2px solid #661414;
	border-bottom: 2px solid #661414;
	border-radius: 5px;
	color: #fff;
	opacity: 1;
}
.mascara-botao{
	
	text-align: center;
	line-height: 100%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	display: none;
	z-index: 8888;
	top: 0;
	cursor: pointer;
}
ul.mosaico li:hover img{

	filter: none;
	-webkit-filter: grayscale(0%);
}

ul.mosaico li:hover::after{
		
	line-height: 100%;
	font-family: FontAwesome;
	content: '&#60div class&#61&#39botao&#39&#62\f055 Clique para ampliar&#60&#47div&#62';
	width: 100%;
	height: 100%;
	background-color: #000;
	top: 10px;
	position: absolute;
	display: block;
	z-index: 8888;
	top: 0;
	bottom: 0;
	opacity: 0.5;
}*/
/*ul.mosaico li::after{
	
	content: "";
	width: 100px;
	height: 100px;
	margin: 5px;
	background-color: #000;
	top: 10px;
	right: 5px;
	position: absolute;
	display: block;
	z-index: 99999;
	top: 0;
	bottom: 0;
}*/
ul.mosaico li img{

	width: 100% !important;
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	opacity: 0.2;*/
	position: relative;
	/*-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;*/
	/*-webkit-filter: blur(1px); filter: url(#blur-effect-1);*/

	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
}


.midia .img-container{

	height: 100px;
	padding: 0;
	text-align: center;
	border-radius: 5px;
	margin: 5px 0;
	float: left;
}

/*section#quemsomos::after {

	content: "";
	background: url(http://subtlepatterns.com/patterns/small_steps.png);
	opacity: 0.2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: relative;
	height: 100%;
	width: 100%;
	z-index: -2;   
}*/

/*#quemsomos::before{

	content: "";
	background: url(../img/coffee.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	background-color: #C1C1C1;
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;  
	background-color: #8CC440;
}*/

/*
.midia .img-container #jornal-commercio{

	background-image: url('../img/logo_jornaldocommercio.png');
}*/

.midia .img-container img{
	
	margin: 5px 20px;
	/*position: relative;*/
	/*max-width: 100% auto;*/
	max-height: 50px;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.midia img:hover{

	filter: none;
	-webkit-filter: grayscale(0%);
}

.foto{

	padding: 10px 5px;
	margin: 10px 0;
	background-color: #fff;
	border-right: 4px solid #eee;
	border-bottom: 4px solid #eee;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	/*border-bottom: 2px solid #eee;*/
}

.foto, .foto h3{
	

	text-align: center !important;
}

.foto h3{
		
	font-family: 'Lobster', cursive;
	color: #36BAB5;
}
.foto img{


	overflow: hidden;
	border-radius: 100%;
	width: 100px;
	height: 100px;
	margin: 10px;
	border: 4px solid #E2E2E2;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

h1{
	
	font-family: 'Lobster', cursive;
	-ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg);
    display: block;
    margin-bottom: 60px;
    text-shadow: 2px 2px #FFF;
    /*background-color: #bbb;*/
}

h1 span{
	
	padding: 10px 5px;
	border-bottom: 2px solid #000;
}



h2 i{

	/*background-color: #fff;*/
	padding-top: 10px; 
	line-height: 100px;
	border-radius: 100%;
	height: 50px;
	width: 50px;
	text-align: center;
	margin: 0 auto;
	border: 1px dashed #333;
	/*background-color: rgba(0,0,0,0.2);*/
	font-size: 20px;
	color: #000;
	/*color: #;*/
}

.foto:hover{

	/*border-radius: 5px;*/
	background-color: #F7F7F7;
}

.foto:hover img{

	filter: none;
	-webkit-filter: grayscale(0%);
	border-color: #fff;
}


.quemsomos-social-icons i{

	font-size: 30px;
	margin: 5px;
	color: #CCC;
}
.quemsomos-social-icons i:hover{

	cursor: pointer;
}

.quemsomos-social-icons i.facebook:hover{
	
	color: #425F9C;
}

.quemsomos-social-icons i.linkedin:hover{

	color: #0077B5;
}

.quemsomos-social-icons i.google-plus:hover{

	color: #CC3333;
}

.quemsomos-social-icons i:hover{

	-webkit-animation: rotating 2s linear infinite;
}



@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.menu-show{

	display: block !important;
}

.menu-hide{

	display: none !important;
}

header .logo, .header .logo-mobile{
	
	padding:10px;
}

header .logo {

	width: 200px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

header .navbar{

	margin-top: 25px;
	margin-right: 12px;
}

header .navbar ul li a{
	
	color: #666;
	/*border-radius: 3px;*/
	margin: 2px;
	padding: 10px 10px; 
}

header .navbar ul li a:hover, header .navbar ul li a:visited, header .navbar ul li a:active, header .navbar ul li a:focus{
	

	/*color: #FFFFFF;*/
	/*background-color: #8CC440 !important;*/

	background-color: #fff !important;
	
}

header .navbar ul li .active{
	
	background-color: #fff;
	border-bottom: 4px solid #8CC440;
	/*background-color: #8CC440;*/
}

/* Conteúdo */
.conteudo {
	display: block;
	width: 100%;

}



section {
	/*display: table;*/
	width: 100%;
	height: 100%;
	display: table;
	position: relative;
	padding-bottom: 50px;
	/*background: rgba(0,0,0,0.15);*/
}

section.mobile{
	
	position: relative;
	height: 100% !important;
}

section:first-child {
	/*background: rgba(0,0,0,0.25);*/
}

.menu-button{

	color: #000;
	position: absolute;
	right: 10px;
	top: 30px;
	vertical-align: middle;
}

/* Section Formulário */

#video-container{
	
	margin-top: 20px;
	padding: 10px;
}

#home{
	
	/*overflow: hidden;*/
	padding-bottom: 50px;
	height: auto;
	background-color: #C1DCE4;
	background-image: url('../img/arvoresnovas2.png');
	background-repeat: repeat-x;
	background-position: 90% 100%;
}

#home h1{
	
	margin-top: 40px;
	margin-bottom: 40px;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}
#home h2 i{
	
	border: none;
	color: #666;
}

section#clientes{
	
	color: #eee;
	background-color: rgba(153, 60, 96, 0.71);
	background-image: url(../img/bg/footer_lodyas.png);
	/*background: linear-gradient(45deg, white 50%, #e5e5e5 50%);
	background-size: 200px 200px;*/
}

.clientes-social-icons{
	
	text-align: center;
	position: relative;
	color: #999;
	bottom: 0;
}

.clientes-social-icons i{

	font-size: 30px;
	margin: 5px;
	color: #CCC;
	
}
.clientes-social-icons i:hover{

	cursor: pointer;
}

.clientes-social-icons i.facebook:hover{
	
	color: #425F9C;
}

.clientes-social-icons i.linkedin:hover{

	color: #0077B5;
}

.clientes-social-icons i.google-plus:hover{

	color: #CC3333;
}

.clientes-social-icons i:hover{

	-webkit-animation: rotating 2s linear infinite;
}



@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

section#solucoes{

	background-color: #E0E0E0;
}

section#home .botao{

	padding: 20px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #EF592C;
	border-right: 3px solid #B84928;
	border-bottom: 3px solid #B84928;
	border-top: 1px solid #B84928;
	border-left: 1px solid #B84928;
	color: #FFFFFF;
	font-size: 18px;
	width: 100%;
	font-family: 'Lobster', cursive;
	/*text-transform: uppercase;*/
}

section#home .botao:hover{
	
	background-color: #DF5026;
}

section#home input[type=text], section#home input[type=email]{
	
	width: 100%;
	padding: 15px 5px;
	background-color: #FFFFFF;
	border-radius: 3px;
	margin-bottom: 5px;
	border-right: 3px solid #2E8E96;
	border-bottom: 3px solid #2E8E96;
	border-top: 1px solid #8DBABD;
	border-left: 1px solid #8DBABD;
}

/* Rodapé */

#clientes-apoiadores{

	margin: 50px;
}

#contato{
	
	color: #eee;
	height: 100%;
	padding: 20px 0;
	background-color: #333;
}

#contato h1{

	text-shadow: 2px 2px #222;
}

#contato h1 span{

	border-color: #fff;
}

#contato .logo{
	
	width: 140px;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

#contato .botao{

	padding: 10px 20px;
	border-radius: 3px;
	background-color: #8CC540;
	border-right: 3px solid #71A135;
	border-bottom: 3px solid #71A135;
	border-top: 1px solid #71A135;
	border-left: 1px solid #71A135;
	color: #FFFFFF;
	font-size: 16px;
	text-transform: uppercase;
}
#contato .botao:hover{

	background-color: #83BA3B;
}

#contato input[type=text], #contato input[type=email], #contato textarea{
	
	width: 100%;
	padding: 10px 5px;
	background-color: #FFFFFF;
	border-radius: 3px;
	margin-bottom: 5px;
	border-right: 3px solid #CCCCCC;
	border-bottom: 3px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	color: #666 !important;
}

.captcha{
	
	margin-right: 10px;
	width: 50% !important;
}

#contato a{

	color: #fff;
}

#contato ul.blog{

	list-style: none;
	margin: 0;
	padding: 0;
}

#contato ul.blog li{
	
	background-color: #555;
	border-right: 3px solid #444;
	border-bottom: 2px solid #444;
	margin-bottom: 2px;
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	/*border-bottom: 1px solid #555;*/
}

/* Copyright */

#copyright{

	font-size: 14px;
	color: #666;
}

.baixe{
	
	right: 0;
	font-weight: bold;
	font-size: 14px;
	padding: 3px 3px;
	background-color: #FFC202;
	color: #fff;
	border-radius: 5px;
}

/* Paralax */
/* Configura os textos */
.text {

	font-family: 'Lobster', cursive;
	color: #fff;
	font-size: 50px;
	text-shadow: 2px 2px 0 #000;
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	padding: 20px;
	width: 35%;
	bottom: 100px;
	left: 10%;
	border-radius: 5px;
}

/* Configura os elementos "parallax" */
.parallax{
	
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: 50% 0;
}

/* Configura um background para cada elemento */
.div1 {
	background-image: url(../img/meio-ambiente.jpg);
}
.div2 {
	background-image: url(../img/plantando.jpg);
}
.div3 {
	background-image: url(../img/copa.jpg);
}

/* Configura o texto lorem ipsum */
.qualquer_coisa {
	padding: 20px;
}
.qualquer_coisa h2, 
.qualquer_coisa p{
	padding: 20px;
	margin: 1.3 0;
}

/* Mapa */

#map-canvas {
	
	margin-top: 20px;
	border-radius: 3px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border-bottom: 3px solid #444;
	border-right: 2px solid #444;
}

h2{
	
	font-family: 'Lobster', cursive;
	padding: 10px 2px 20px 2px;
	/*margin-bottom: 10px;*/
	/*border-bottom: 1px solid #eee;
	margin-bottom: 20px;*/
	/*min-width: 300px;*/
}


.justify{
	text-align: justify;
}


#clientes h2, #clientes h2 i{
	
	color: #FFF;
	border-color: #fff;

	/*padding: 12px 6px;*/
	/*color: #A89F94;*/
	/*border-bottom: 2px solid #A89F94;*/
	/*font-weight: bold;*/
}

#arvores{
	
	
	position: absolute;
	bottom: 0px;
	left: 100px;
	z-index: 10;
}

#meio-content{

	position: relative;
	z-index: 200;
}

/* @media (min-width:320px) and (max-width: 800px) { */

/* Resolução Mobile Celular */

/*@media (min-width: 320) and (max-width: 768px) {

	header .logo,
	header .menu {
		
		display: none;
		background-color: #fff;
		text-align: center;
	}

	header .logo{
		
		display: none !important;
	}

	.logo-mobile{
		
		padding: 20px;
		display: block !important;
	}

	#iframe-video {
		margin-left: 10px;
		width: 300px;
		height: 260px;
		position: absolute;
		z-index: 10;	  
	}

	#bg-video{
		
		left: 0px;
		top: -10px;
		width: 330px;
		height: 280px;
		border-radius: 5px;
		position: relative;
		z-index: 5;
		background-color: #FFFFFF;
		-ms-transform: rotate(0.5deg);
	    -webkit-transform: rotate(0.5deg);
	    transform: rotate(0.5deg);	

	}
}*/

@media (max-width:800px){

	/*.div1 {
		background-image: url(../img/meio-ambiente_m_1.jpg);
	}
	.div2 {
		background-image: url(../img/plantando_m_1.jpg);
	}
	.div3 {
		background-image: url(../img/copa_m_1.jpg);
	}*/

	.text{

		font-size: 26px;
		width: 80%;
	}



	.img-container{
		
		width: 100%;
		float: left;
		text-align: center;
	}
	
	header .logo{
		
		width:200px;
		display: none;
	}

	header .logo-mobile,
	header .menu-button{
		
		display: block;
	}

	.menu{

		display: none;
	}

	.body{

		margin: 0;
		padding: 0;
	}

	#home .botao{

		width: 300px;
	}

	#video-container{
	
		margin-top: 10px;
		padding: 0px;
	}
	
	#video{
		
		width: 100%;
		z-index: 10;
		top: 20px;
		position: relative;
	}

	#iframe-video{
			
		margin: 0;
		padding: 0;
		width: 100%;
		height: 380px;
	}

	#bg-video{
		
		left: 0;
		width: 100%;
		height: 400px;
		border-radius: 5px;
		position: absolute;
		top: 10px;
		z-index: 5;
		background-color: #FFFFFF;
		-ms-transform: rotate(0.5deg); /* IE 9 */
	    -webkit-transform: rotate(0.5deg); /* Chrome, Safari, Opera */
	    transform: rotate(0.5deg);	

	}
}

@media (min-width:801px) and (max-width: 1024px) {

	/*.div1 {
		background-image: url(../img/meio-ambiente_m_2.jpg);
	}
	.div2 {
		background-image: url(../img/plantando_m_2.jpg);
	}
	.div3 {
		background-image: url(../img/copa_m_2.jpg);
	}*/

	header .logo{
		
		width:200px;
		display: block;
	}

	header .logo-mobile,
	header .menu-button{
		
		display: none;
	}

	.menu{

		display: block !important;
	}

	#home .botao{

		width: 300px;
	}
	
	#video{
		
		margin: 10px;
		z-index: 10;
		position: absolute;
	}

	#iframe-video{

		width: 480px;
		height: 360px;
	}

	#bg-video{
		
		width: 500px;
		height: 380px;
		border-radius: 5px;
		position: absolute;
		z-index: 5;
		background-color: #FFFFFF;
		-ms-transform: rotate(0.5deg); /* IE 9 */
	    -webkit-transform: rotate(0.5deg); /* Chrome, Safari, Opera */
	    transform: rotate(0.5deg);	

	}
}

@media (min-width:1025px){
	
	header .logo{
		
		width:200px;
		display: block;
	}

	header .logo-mobile,
	header .menu-button{
		
		display: none;
	}

	.menu{

		display: block !important;
	}

	#video{
		
		margin: 10px;
		z-index: 10;
		position: absolute;
	}

	#bg-video{
		
		width: 690px;
		height: 400px;
		border-radius: 5px;
		position: absolute;
		z-index: 5;
		background-color: #FFFFFF;
		-ms-transform: rotate(0.5deg); /* IE 9 */
	    -webkit-transform: rotate(0.5deg); /* Chrome, Safari, Opera */
	}
}