<!-- ## PARA RETIRAR A PUBLICICDADE COMENTAR ESTA LINHA -->
<!-- ## PARA RETIRAR A PUBLICICDADE TROCAR PARA none -->
		
	#publicidade{display: block;} 
	#nasbancas{display: block;}
		
	div#bkgPublicidade{ 
		top:0;
		left:0;
		width: 100%;
		height:100vh;
		position: fixed;
		z-index: 1999;
		background-color: #000;
		opacity: 0.8;
		display: block;
		}


	div#nasbancas {
		 position:absolute;
		 z-index: 2000;
		 left: 32%;
		 margin-left: 0;
		 top: 40px;
		 color: #FFF ;
		 font-size: 36px;
		 text-shadow: 10px 10px 10px #000;
		 font-weight: 700;
	}

	@media screen and (max-width: 680px) {

	}

	#publicidadeAvulsa {
		z-index: 5000000;
		position: absolute;
		top: 17%;
		width: 1200px;
		height: 450px;

		left: 50%;
		margin-left: -600px;

		cursor:pointer;
		}
	
	#publicidadeAvulsa img {
		width: 100%;
		height: auto;
		}
	
	#publicidadeAvulsaMobile {
		display: none;
		}
		
	@media screen and (max-width: 680px) and (orientation: portrait) { 
	
		div#nasbancas {
			top: 30px;
			 left: 20%;
			 margin-left: 0;
			 font-size: 22px;
			 
		}
		div#publicidadeAvulsa {
			 display: none;
		}
		#publicidadeAvulsaMobile {
			display: block;
			
			z-index: 5000000;
			position: absolute;
			
			top: 10%;
			margin-left: 10%;
			width: 80%;
			height: auto;
			cursor:pointer;

			}
		#publicidadeAvulsaMobile img {
			width: 100%;
			height: auto;
		}
	}
	@media screen and (max-width: 680px) and (orientation: landscape) {
		
		div#nasbancas {
			 top: 10px;
			 left: 32%;
			 margin-left: 0;
			 font-size: 22px;
		}
		div#publicidadeAvulsa {
			 min-height: auto;
			 width: 80%;
			 left: 0;
			 margin-left: 11%;
		}
		
	}
	
		
/* ##### ANIMAÇÃO ENTRADA CONTEUDO PUBLICIDADE DESTAQUE ################ */
	
	div#publicidadeDestaque {
		 position:absolute;
		 z-index: 2100;
		 left: 6%;
		 /*left: 50%;*/
		 /*margin-left: -120px;*/
		 top: 100px;
		 cursor: pointer;
		 box-shadow: 5px 5px 5px #000;
		 
		 width: 30%;
		 height: auto;
		 
		 animation-name: entraPublicidadeDestaque;
		 animation-duration: 2.0s;
		 
		-moz-animation-name: entraPublicidadeDestaque;  
		-moz-animation-duration: 2.0s;
		
		-webkit-animation-name: entraPublicidadeDestaque;  
		-webkit-animation-duration: 2.0s;
	}

	#publicidadeDestaque img{
		width: 100%;
		height: auto;
		}
			
	@media screen and (max-width: 680px) {
		div#publicidadeDestaque {
			 width: 90%;
			  left: 5%;
		 	margin-left: 0;
		}
	}
	
	
	@keyframes entraPublicidadeDestaque {
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}
	@-moz-keyframes entraPublicidadeDestaque { /*moz firefox*/
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}
	@-webkit-keyframes entraPublicidadeDestaque { /*webik Chrome*/
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}


	#publicidade, #publicidade2, #publicidade3, #publicidade4 {
		 position:absolute;
		 z-index: 2000;
		 width: 20%;
		 height: auto;
		 <!--top: 65%;-->
		 cursor: pointer;
		 box-shadow: 5px 5px 5px #000;
	}
	
	@media screen and (max-width: 600px) and (orientation: portrait) {
		#publicidade, #publicidade2, #publicidade3, #publicidade4, #publicidadeDestaque { 
				position: relative !important;
				left:10% !Important; 
				top: 80px !important;
				margin-left: 0 !Important; 
				width:80% !Important;
				display: block !Important;
				margin-top: 10px !important;
				
		 }
	}
	
/* ##### ANIMAÇÃO ENTRADA CONTEUDO PUBLICIDADE 1 ################ */
	
	div#publicidade {
		 left: 40%;
		 top: 100px;
		 animation-name: entraPublicidade;
		 animation-duration: 2.0s;
		 
		-moz-animation-name: entraPublicidade;  
		-moz-animation-duration: 2.0s;
		
		-webkit-animation-name: entraPublicidade;  
		-webkit-animation-duration: 2.0s;
	}
	
	@keyframes entraPublicidade {
		0%  {margin-left: -500px;}
		10%  {opacity: 0.2}
		80% {margin-left: 40%;}
		70% {opacity: 0.5}
	}
	
	@-moz-keyframes entraPublicidade { /*moz firefox*/
		0%  {margin-left: -500px;}
		10%  {opacity: 0.2}
		80% {margin-left: 40%;}
		70% {opacity: 0.5}
	}
	
	@-webkit-keyframes entraPublicidade { /*webik Chrome*/
		0%  {margin-left: -500px;}
		10%  {opacity: 0.2}
		80% {margin-left: 40%;}
		70% {opacity: 0.5}
	}
	
	div#publicidade img {
		width: 100%;
		height: auto;
		}

/* ##### ANIMAÇÃO ENTRADA CONTEUDO PUBLICIDADE 2 ################ */


	div#publicidade2 {  
		 left: 67%;
		 top: 100px;
		 
		 animation-name: entraPublicidade2;
		 animation-duration: 3.0s;
		 
		-moz-animation-name: entraPublicidade2;  
		-moz-animation-duration: 3.0s;
		
		-webkit-animation-name: entraPublicidade2;  
		-webkit-animation-duration: 3.0s;
	}
	
	
	@keyframes entraPublicidade2 {
		0%  {margin-top: -1000px;}
		50% {margin-top: -700px;}
		80% {margin-top: 5%;}
	}
	
	@-moz-keyframes entraPublicidade2 { /*moz firefox*/
		0%  {margin-top: -1000px;}
		50% {margin-top: -700px;}
		80% {margin-top: 5%;}
	}
	
	@-webkit-keyframes entraPublicidade2 { /*webik Chrome*/
		0%  {margin-top: -1000px;}
		50% {margin-top: -700px;}
		80% {margin-top: 5%;}
	}
	
	div#publicidade2 img {
		width: 100%;
		height: auto;
		}
		
	/* ##### ANIMAÇÃO ENTRADA CONTEUDO PUBLICIDADE 3 ################ */
	
	div#publicidade3 {
		 left: 45%;
		 top: 41%;
		 
		 animation-name: entraPublicidade3;
		 animation-duration: 2.0s;
		 
		-moz-animation-name: entraPublicidade3;  
		-moz-animation-duration: 2.0s;
		
		-webkit-animation-name: entraPublicidade3;  
		-webkit-animation-duration: 2.0s;
	}
	@keyframes entraPublicidade3 {
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}
	@-moz-keyframes entraPublicidade3 { /*moz firefox*/
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}
	@-webkit-keyframes entraPublicidade3 { /*webik Chrome*/
		0%  {margin-left: 1500px;}
		10%  {opacity: 0.2}
		80% {margin-left: -1000;}
		70% {opacity: 0.5}
	}
	
	div#publicidade3 img {
		width: 100%;
		height: auto;
		}
	
	/* ##### ANIMAÇÃO ENTRADA CONTEUDO PUBLICIDADE 4 ################ */
	div#publicidade4 {
		  left: 72%;
		  top: 41%;
		 
		 animation-name: entraPublicidade4;
		 animation-duration: 3.0s;
		 
		-moz-animation-name: entraPublicidade4;  
		-moz-animation-duration: 3.0s;
		
		-webkit-animation-name: entraPublicidade4;  
		-webkit-animation-duration: 3.0s;
	}
	
	div#publicidade4 img {
		width: 100%;
		height: auto;
		}
		
	@keyframes entraPublicidade4 {
		0%  {margin-top: 1000px;}
		70% {margin-top: 700px;}
		90% {margin-top: 5%;}
	}
	
	@-moz-keyframes entraPublicidade4 { /*moz firefox*/
		0%  {margin-top: 1000px;}
		70% {margin-top: 700px;}
		90% {margin-top: 5%;}
	}
	
	@-webkit-keyframes entraPublicidade4 { /*webik Chrome*/
		0%  {margin-top: 1000px;}
		70% {margin-top: 700px;}
		90% {margin-top: 5%;}
	}
	
<!-- ## FINAL ESTILOS PUBLICIADADE ###########################################    -->


	#tela { 
		width: 1020px; 
		margin: auto; 
	}
	#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9,#item10 
	{
		position: relative;
		float: left;
		width: 80px;
		border-left: 2px solid #000;
		height: 390px;
		overflow: hidden;
		border-radius: 10px;
		cursor: pointer;
		top: 10px;
	}

	#item1 { 
		width: 190px; 
	}

	#tela img { 
		width: 190; 
		height: 380px; 
	}

	#fecharDiv{cursor:pointer;}



 /* ***************** INICIO SOBRE *********************** */
    
    div#sobre {
        display:none;
        max-width: 400px;
		width:98%;
        background-color: #fffdd8;
        color: #000;
        padding: 30px;
        border-radius: 0 0 20px 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height:150%;

        }

    div#sobre p{
        margin-bottom: 10px;
    }
        
    div#sobre p:first-child{
        margin-bottom: 25px;
    }
        
    div#sobre span {
        font-weight: 700;
    }
    

    /* ***************** INICIO ENVELOPAMENTO *********************** */
    
    div#envelopamento {
        display:none;
        max-width: 500px;
		width: 98%;
        background-color: #fffdd8;
        color: #000;
        padding: 30px;

        border-radius: 0 0 20px 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height:150%

        }

    div#envelopamento p{
        margin-bottom: 10px;
    }
        
    div#envelopamento p:first-child{
        margin-bottom: 25px;
    }
        
    div#envelopamento span {
        font-weight: 700;
    }
    
        
    div#imgMaquinas {
        width: 500px;
        height: 210px;
    }

    div#imgMaquinas img {
        position: absolute;
        width: 240px;
    }
    
    div#imgMaquinas img:first-child{ /*envelopadora*/
        vertical-align: top;
        margin-top: 10px;
        width: 270px;
    }

    div#imgMaquinas img:nth-child(2){ /*guilhotina*/
        vertical-align: top;
        margin-top: 0px;
        right: 36px;
        width: 230px;
    }
        
    div#imgMaquinas img:last-child{ /*guilhotina*/
        vertical-align: top;
        margin-top: 230px;
        margin-left: -50px;
        right: 36px;
        width: 230px;
    }
        
    #nmGuilhotina{ /*palavra guilhotina da máquina*/
        position: absolute;
        top: 320px;
        left: 320px;
    }

    #nmTroqueladora{ /*palavra Troqueladora da máquina*/
        position: absolute;
        top: 570px;
        left: 330px;
        width: 200px;
        
    }
        
    #nmEnvelopadora{ /*palavra envelopadora da máquina*/
        position: absolute;
        top: 300px;
        left: 40px;
        width: 130px;
        float:left;

    }
    
     
    div#textoEnv {
        width: 250px;
    }        
        
   /* ***************** INICIO PORTFOLIO *********************** */    
       
    div#portfolio {
        display:none;
		width: 100%;
        max-width: 400px;
        min-height: 450px;
        background-color: #fffdd8;
        color: #000;
        padding: 30px;
        cursor: pointer;
        border-radius: 0 0 20px 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height:150%;
        text-align: justify;
        float:left;  
        }
        
    div#portfolio img{
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
        
    div#portfolio button {
  
        width:400px;
        line-height: 30px;
        position: absolute;
        top: 450px;
        padding: 1px 0.4em;
        border: 2px;
        border-color: #000000; 
        border-radius: 6px 6px;
        box-shadow: 1px 1px 0 rgba(107, 107, 116, 0.51); /*  bordar opaca para dar efetio de clique*/
        color: #fff;
        background-color: #696969;
        margin-right: 2em;
        cursor:pointer;
        font-size: 14px;
        /*text-shadow: 1px 1px 1px #ffffff;*/
        
    }

    div#portfolio button:hover{
        text-shadow: 0px 0px 0px #ffffff;
        background-color: #212121;
        color: #f5ff12;
        transition: 0.5s linear all;
        
    }        
    
    div#imgPort img{
        position:absolute;
        width: 120px;
        top: 120px;
    }

    div#imgPort div img:nth-child(1){
        left: 5%;
        top: 100px;
    }
    div#imgPort div img:nth-child(2){
        left: 20%;
    }
    div#imgPort div img:nth-child(3){
        left: 30%;
        top: 110px;
    }
    div#imgPort div img:nth-child(4){
        left: 50%;
    }
    div#imgPort div img:nth-child(5){
        left: 70%;
        top: 100px;
    }
        
    div#imgPort div img:nth-child(6){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(45deg) scale(1.0);
        -moz-transform: rotate(45deg) scale(1.0);
        -ms-transform: rotate(45deg) scale(1.0);
        -o-transform: rotate(45deg) scale(1.0);
        transform: rotate(45deg) scale(1.0);
   }        
        
    div#imgPort div img:nth-child(7){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(30deg) scale(1.0);
        -moz-transform: rotate(30deg) scale(1.0);
        -ms-transform: rotate(30deg) scale(1.0);
        -o-transform: rotate(30deg) scale(1.0);
        transform: rotate(30deg) scale(1.0);
   }

    div#imgPort div img:nth-child(8){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(15deg) scale(1.0);
        -moz-transform: rotate(15deg) scale(1.0);
        -ms-transform: rotate(15deg) scale(1.0);
        -o-transform: rotate(15deg) scale(1.0);
        transform: rotate(15deg) scale(1.0);
   }

    div#imgPort div img:nth-child(9){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(0deg) scale(1.0);
        -moz-transform: rotate(0deg) scale(1.0);
        -ms-transform: rotate(0deg) scale(1.0);
        -o-transform: rotate(0deg) scale(1.0);
        transform: rotate(0deg) scale(1.0);
   }

    div#imgPort div img:nth-child(10){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(-15deg) scale(1.0);
        -moz-transform: rotate(-15deg) scale(1.0);
        -ms-transform: rotate(-15deg) scale(1.0);
        -o-transform: rotate(-15deg) scale(1.0);
        transform: rotate(-15deg) scale(1.0);
   }

    div#imgPort div img:nth-child(11){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(-30deg) scale(1.0);
        -moz-transform: rotate(-30deg) scale(1.0);
        -ms-transform: rotate(-30deg) scale(1.0);
        -o-transform: rotate(-30deg) scale(1.0);
        transform: rotate(-30deg) scale(1.0);
   }
        
    div#imgPort div img:nth-child(12){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(-45deg) scale(1.0);
        -moz-transform: rotate(-45deg) scale(1.0);
        -ms-transform: rotate(-45deg) scale(1.0);
        -o-transform: rotate(-45deg) scale(1.0);
        transform: rotate(-45deg) scale(1.0);
   }    

    div#imgPort div img:nth-child(13){
        left: 35%;
        top: 170px;
        -webkit-transform: rotate(-60deg) scale(1.0);
        -moz-transform: rotate(-60deg) scale(1.0);
        -ms-transform: rotate(-60deg) scale(1.0);
        -o-transform: rotate(-60deg) scale(1.0);
        transform: rotate(-60deg) scale(1.0);
   }         

        
        
    /* ***************** INICIO HISTORIA *********************** */    
       
    div#historia {
        display:none;
		width: 100%;
        width: 400px;
        background-color: #fffdd8;
        color: #000;
        padding: 30px;
        cursor: pointer;
        border-radius: 0 0 20px 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height:150%;
        text-align: justify;
        }
        
    div#historia img{
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
        
    div#historia button {
        width:400px;
        height:30px;
        line-height: 30px;
        position: relative;
        padding: 1px 0.4em;
        border: 2px;
        border-color: #000000; 
        border-radius: 6px 6px;
        box-shadow: 1px 1px 0 rgba(107, 107, 116, 0.51); /*  bordar opaca para dar efetio de clique*/
        color: #FFF;
        background-color: #696969;
        margin-right: 2em;
        cursor:pointer;
        font-size: 14px;
        /*text-shadow: 1px 1px 1px #ffffff;*/
    }
        
    div#historia button:hover{
        /*text-shadow: 0px 0px 0px #ffffff;*/
        background-color: #212121;
        color: #f5ff12;
        transition: 0.5s linear all;
        
    }
    
    /* ***************** CONTATO *********************** */    
            
    div#contato {
        display:none;
		
		width: 300px;
        background-color: #fffdd8;
        color: #000;
        padding: 30px;

        border-radius: 0 0 20px 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height:150%;
        height: 390px;
       
        }  
        
    #fecharDiv img:hover{
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
         opacity: 0.5;
    }
        
    #voltar{ /* Botao que fecha as div historia da figurinha*/
        position: relative;
        left: 580px;
        cursor:pointer;
    }
        
    form input {
        display: block;
        width: 100%; /* normalmente se refere ao content */
        padding: 0.5em;
        border: solid 1px #ccc;
        border-radius: 6px;
        margin-bottom: 5px;
        /* 
            inclui a border e o padding no calculo do width
            e do height
        */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    form textarea {
        display: block;
        width: 100%; /* normalmente se refere ao content */
        padding: 0.5em;
        border: solid 1px #ccc;
        border-radius: 6px;
        margin-bottom: 5px;
        /* 
            inclui a border e o padding no calculo do width
            e do height
        */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    form a{
        position: absolute;
        width:290px;
        line-height: 30px;
        top: 400px;
        left: 30px;
        padding: 1px 0.4em;
        border: 2px;
        border-color: #000000; 
        border-radius: 6px 6px;
        box-shadow: 1px 1px 0 rgba(107, 107, 116, 0.51); /*  bordar opaca para dar efetio de clique*/
        color: #fff;
        background-color: #696969;
        margin-right: 2em;
        cursor:pointer;
        font-size: 14px;
        /*text-shadow: 1px 1px 1px #ffffff;*/
        text-align: center;
    
    }
    
    form a:hover{
        text-shadow: 0px 0px 0px #ffffff;
        background-color: #212121;
        color: #f5ff12;
        transition: 0.5s linear all;
    }
        
        
    /* ***************** SEGURANÇA *********************** */        
    
    #seguranca{
        display:none;
        position: absolute;
        padding: 30px;
        top: 50%;
        left: 50%;
        margin-left: -240px;
        width: 480px;
        height: 280px;
        background-color: #fffdd8;
        text-align: justify;
        font-size: 14px;
        cursor: move;
        z-index: 200;
        transition: 1s linear all;
        border-radius: 0 20px 0 20px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        /*border: 1px #7b7b7b solid;*/
    }
    #seguranca p{
        margin-bottom: 20px;
    }
    #seguranca div{
        position: absolute;
        width: 40px;
        height: 40px;
        right: 0;
        top: 10px;
    }
        
        
    /* ***************** SUPORTE CONTATO *********************** */        
    
    #suporte{
        display:none;
        position: absolute;
        padding: 30px;
        top: 50%;
        left: 50%;
        margin-left: -240px;
        width: 480px;
        height: 280px;
        background-color: #fffdd8;
        text-align: justify;
        font-size: 14px;
        cursor: move;
        z-index: 200;
        transition: 1s linear all;
        border-radius: 0 20px 0 20px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        /*border: 1px #7b7b7b solid;*/
    }
    #suporte p{
        margin-bottom: 5px;
    }
    #suporte div:first-child{
        position: absolute;
        width: 40px;
        height: 40px;
        right: 0;
        top: 10px;
    }

    #suporte div:last-child{
        position: absolute;
        width: 150px;
        right: 40px;
        top: 110px;
    }

   /* ***************** FORMAS DE PAGAMENTO *********************** */        
    
    #formapag{
        display:none;
        position: absolute;
        padding: 30px;
        top: 50%;
        left: 50%;
        margin-left: -240px;
        width: 480px;
        height: 280px;
        background-color: #fffdd8;
        text-align: justify;
        font-size: 14px;
        cursor: move;
        z-index: 200;
        transition: 1s linear all;
        border-radius: 0 20px 0 20px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        /*border: 1px #7b7b7b solid;*/
    }
    #formapag p{
        margin-bottom: 20px;
    }
    #formapag div:first-child{
        position: absolute;
        width: 40px;7b7b7b
        height: 40px;
        right: 0;
        top: 10px;
    }

    #formapag div:last-child{
        position: absolute;
        width: 150px;
        right: 40px;
        top: 110px;
    }

         
   /* ***************** CODIGO CONSUMIDOR *********************** */        
    
    #codigoconsumidor{
        display:none;
        position: absolute;
        padding: 30px;
        top: 50%;
        left: 50%;
        margin-left: -240px;
        width: 480px;
        height: 280px;
        background-color: #fffdd8;
        text-align: justify;
        font-size: 14px;
        cursor: move;
        z-index: 200;
        transition: 1s linear all;
        border-radius: 0 20px 0 20px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        /*border: 1px #7b7b7b solid;*/
    }
        
    #codigoconsumidor p{
        margin-bottom: 20px;
    }
    
    #codigoconsumidor div:first-child{
        position: absolute;
        width: 50px;
        height: 40px;
        right: 0;
        top: 10px;
    }

    #codigoconsumidor div:nth-child(5){ /*guia defesa consumidor*/

        position: absolute;
        width: 120px;  
        height: 150px;
        left: 120px;
        top: 180px;
    }

    #codigoconsumidor div:last-child{ /*codigo defesa consumidor*/
        position: absolute;
        width: 120px;
        right: 120px;
        top: 180px;
    }        

    #codigoconsumidor div:hover{ /*guia defesa consumidor*/
        opacity: 0.6;
        transition:  0.4s linear all;
        cursor: pointer;
    }
         
    /* ************************************************************* */   
        

        #esmaece{
            display:none;
            position:fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 400;
           
            /*
            transition-duration: 1s;
            transition-property: all; /*qual propiredade que será animada 
            transition-timing-function: ease-out; /*linear
            transition-delay: 0;
            */
            /*em linha
            transition: 5s linear all 5s;*/
        }

        #anterior{
            position:fixed;
            top: 40%;
            left: 50%;
            margin-left: -360px;
            display:none;
            z-index: 400;
            cursor: pointer;
            float: left:
        }
        
        #anterior img:hover{
            width: 55px;
            transition: 0.5s linear all;
        }
        
        #proximo img:hover{
            width: 55px;
            transition: 0.5s linear all;
        }
        
        #proximo{
            position:fixed;
            top: 40%;
            left: 50%;
            margin-left: +370px;
            display:none;
            z-index: 400;
            cursor: pointer;
            float: left:
        }
        
        #paginas{
        
            position:relative;
            color: #000;
            width: 80px;
            height: 20px;
            left: 45%;
            margin-top: -40px;
            margin-bottom: 20px;
            
        }


        #textoHistoria {
            position: absolute;
            background-color: #fffdd8;
            color: #000;
            padding: 30px;
            cursor: pointer;
           
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            font-size: 12px;
            line-height:150%;
            text-align: justify;
            width: 600px;
            
            left: 50%;
            margin-left: -300px;
            top: -800px;
            
            z-index: 410;
            display:none;
            
            /*transition: 2s linear all;*/
            
            float: left;
            
            box-shadow: 10px 10px 10px #000;
            
            /*height: 80%;
            margin-bottom: 10px;*/
        }
        
        #textoHistoria div{
           /* float:left;
            background-color: #fffdd8;*/
        }
		
		
         #bkgtrans {
            position: 	fixed;
            height: 	150%;
            width: 		100%;
            border: 	2px solid #666;
            background: #000000;
            opacity:	.7;
            left: 		0px;
            top: 		0px;
            display: none;
            z-index: 500;

        }  
        
        #paginaBkg {
            position: 	fixed;
            border: 	1px solid #666;
            background: #fff;
            left: 		25%;
            top: 		8%;
            display: none;
            z-index: 501;
            box-shadow: 10px 10px 20px #000;
            border-radius: 0 0 0 0;
            overflow:hidden;
            
        }
        #fecharBkg {
            position: 	fixed;
            height: 	50px;
            width: 		25px;
            border: 	0; 
            right: 		50px;
            margin-left: 210px;
            top: 		50px;
            background-color: white;
            display: none;
            z-index: 502;
            cursor:pointer;
            overflow:hiden;
            box-shadow: 1px 1px 3px #FFF,  -1px -1px 3px #FFF;
            border-radius: 50%;
            background-color:#333;
        }

        /* galeria de fotos da home */

       #bkgFotos{
           position:fixed;
           top:0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0,0,0,0.8);
           display:none;
           cursor: pointer;
           z-index:300;
           }

       #fotosGaleria{
           position:absolute;
           z-index:300;
           display:none;
           }

        #btFechar{
            position:absolute;
            z-index:500;
            display:block;
            /*border: 2px #000 solid;*/
            width: 50px;
            height:50px;
            vertical-align: middle;
            text-align:center;
            /*background-image: url(imagens/ico_fechar.png);*/
            display:none;
            right: 20px;
            top: 20px;
            cursor:pointer;
            }



<!-- ***************** GALERIA DO PORTFOLIO **************************** -->

	div#bkgPort2 {
		display:block;
		position: fixed;
		top:0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.8);
		z-index:100000;
		}


	div#bkgPort {
		display:none;
		position: fixed;
		top:0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.8);
		z-index:100000;
		}
		
		
	div#portf{ /*DIV QUE AGREGA TODAS AS DIV/FOTOS */
		display:none;
		width:93%;
		float:left;
		position:absolute;
		padding: 30px;
		z-index:100001;
}		
	
	.ftPort{
		display: inline-block;
		position:relative;
		vertical-align: top;
		margin-bottom: 20px;
		margin-right: 30px;
		border-color:white;
		width: 15%;
		margin: 10px;
		/*cursor:move;*/
		padding-bottom: 10px;
		z-index: 1000;	
		transition: 0.2s ease-in-out all;
	}
	
	.ftPort img{
		width: 100%;
		box-shadow: 10px 10px 10px #000;
		position:relative;

	}
/*
	.ftPort:hover{
		z-index:2000;
		-webkit-transform: rotate(0deg) scale(1.5);
		-moz-transform: rotate(0deg) scale(1.5);
		-ms-transform: rotate(0deg) scale(1.5);
		-o-transform: rotate(0deg) scale(1.5);
		transform: rotate(0deg) scale(1.5);
	}
*/	
@media screen and (max-width: 600px) and (orientation: portrait) {
	#fechaPortfolio {margin-top: 20px;left:80%;}
	div#portf{ /*DIV QUE AGREGA TODAS AS DIV/FOTOS */
		width:88%;
		padding: 0;
		padding-top: 20px;
		margin-left: 5%;
	}
	#div#portf img {
		width: 98%;
		}
	.ftPort {
		margin-left: 30px;
		}
}
@media screen and (max-width: 600px) and (orientation: landscape) {
	#fechaPortfolio {margin-top: 20px;left:80%;}
	div#portf{ /*DIV QUE AGREGA TODAS AS DIV/FOTOS */
		width:88%;
		padding: 0;
		padding-top: 20px;
		margin-left: 5%;
	}
	#div#portf img {
		width: 98%;
		}
	.ftPort {
		margin-left: 30px;
		}
}