@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');



::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #f0f0f0;
}

::-webkit-scrollbar
{
    width: 5px;
    background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #cecece;
}


/* Corpo */

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
 
  overflow-x: hidden;

  overflow-y: visible;
  background-color: #fff;

  font-family: Poppins;
  font: 100% Poppins, sans-serif;

  scroll-behavior: smooth;

  text-decoration: none;
}
h1{
    line-height: 130%;
    font-weight: 700;
    font-size: 2.4rem;
    margin: 0;
    color: #ff500a;
}
h4{
    line-height: 130%;
    font-weight: 700;
    font-size: 2.4rem;
    margin: 0;
    color: #606060;
}


h3{
    line-height: 130%;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0;
    color: #ff500a;
}
h2{
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 150%;
    margin: 0;
    color: #606060;
}
p{
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 180%;
    margin: 0;
    color: #303030;
    word-wrap: break-word;
}
.pp{
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 150%;
    margin: 0;
    color: #a3a3a3;
    text-align: center;
    word-wrap: break-word;
}
#resposta_span, #resposta_span_02{
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    color: #606060;
    word-wrap: break-word;
}



.container{
    width: 100%;

    height: auto;

    margin: 0;

    position: relative;
    display: flex;

    flex-direction: column;
    justify-content: start;

    background-color: #fff;

    z-index:980;
}

section{
    width: 100%;
    height: auto;
    background-color: transparent;

    display: block;

    transition-duration: 0.3s; 
}


#section{
    width: 100%;
    height: auto;
    background-color: transparent;

    display: block;

    transition-duration: 0.3s; 
}
#sessao_01{
    width: 100%;
    height: 100vh;
    background-color: transparent;

    display: block;

    transition-duration: 0.3s;
}

/* Slider */

.div-slider{
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: black;
}
.slides-front {
    padding: 0;
    width: 100%;
    height: 100vh;
    display: block;
    margin: auto;
    position: relative;
}

.slides-front * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides-front input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;

    width: 100%;
    height: 100vh;

    display: block;
    position: absolute;

    transition: all .7s ease-in-out 0.1s;
}

.slide img {
    width: 100%;
    height: 100vh;
    object-fit: cover;

    background-color: transparent;
}

.nav label {
    width: 150px;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;
    transition: opacity 1s ease-in-out 0.1s;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
    width: 120px;
    bottom: 90;
    height: 15px;
    display: flex;

    justify-content: space-between;
    align-items: center;

    position: absolute;
    right: 60;

    text-align: center;

    background-color: transparent;
}

.nav-dot {
    
    width: 8px;
    height: 8px;

    margin-left: 8px; 

    position: relative;
    border-radius: 50%;

    display: inline-block;
    background-color: rgba(255, 255, 255, 0.6);

    border-color: #fff;
    border-width: 0px;
    border-style: solid;

    transition-duration: 0.3s;
}
.active, .nav-dot:hover {

    border-color: #fff;
    border-width: 3px;
    border-style: solid;

    cursor: pointer;
    background-color: rgba(255, 255, 255, 1);

    transition-duration: 0.3s;
}

@media screen and (max-width: 768px) /* mobile */
{
    .nav-dots{
    right: 40;
    width: 140px;}
    .nav-dot {
    width: 12px;
    height: 12px;}
}


input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,{
    background: rgba(0, 0, 0, 0.8);
}



@media screen and (max-width: 768px) /* mobile */
{
    #section{
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

    #sessao_01{
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

    .div-slider{
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

    .slides-front {
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

    .slide {
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

    .slide img {
    width: 100%;
    height: auto;
    min-height: 570px;
    max-height: 100vh;}

}







/*Sessão 01 */


#sessao_02{
    height: calc(100vh - 50px);
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sessao_02 .img{
    margin-top: 0vh;
    width: auto;
    height: 65vh;

    position: relative;

    background-color: transparent;
}
#sessao_02 .img img{
    width: auto;
    height: 100%;
    object-fit: cover;
}
#sessao_02 .conteudo{
    width: auto;
    height: 65vh;

    margin-left: 80px;

    flex-direction: column;

    position: relative;

    background-color: transparent;
}
#sessao_02 .conteudo .list{
    width: auto;
    height: auto;
    position: relative;
    display: flex;

    margin-top: 15px;
    margin-bottom: 35px;

    flex-direction: column;
    justify-content: start;

    background-color: transparent;
}
#sessao_02 .conteudo .list div{

    color: #606060;

    margin-top: 1rem;
    vertical-align:text-bottom;

    flex-direction: row;
    justify-content: start;
    align-items: center;
    display: flex;
    background-color: transparent;
}
@media screen and (max-width: 768px) /* mobile */
{
    #sessao_02{
    height: auto;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    }
    #sessao_02 .img{
    width: calc(100vw - 80px);
    max-width: 350px;
    height: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-left: 40px;
    }
    #sessao_02 .img img{
    width: 100%;
    height: auto;
    }
    #sessao_02 .conteudo{
    width: auto;
    height: auto;
    margin-left: 40px;
    margin-bottom: 80px;
    }
}

/*Sessão 03 */

#sessao_03{
    height: 50vh;
    width: 100%;

    position: relative;
    display: block;
    justify-content: center;
    align-items: center;

    background-image: url(https://lanlanoficial.com.br/img/img_maps.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    background-color: transparent;
}

#sessao_03_B{
    height: 50vh;
    width: 100%;

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sessao_03_B .mapsembed{

    height: 50vh;
    width: calc(100% - 300px);
    max-width: calc(1920px - 300px);

    background-image: url(https://lanlanoficial.com.br/img/mapspoints.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    border-radius: 10px;
    border-width: 0px;

    color: #fff;
    line-height: 100%;
    font-weight: 700;
    font-size: 2.3rem;
    text-align: center;


    justify-content: center;
    align-items: center;
    flex-direction: column;

    bottom: 25vh;

    position: relative;
    display: flex;

    box-shadow: 0 16px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 16px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 16px 24px 0 rgba(0,0,0,.1);
}
.mapsembed .box{
    height: auto;
    width: 400px;

    margin-top: 40px;

    padding: 20px;

    background-color: #fff;

    border-radius: 5px;
    border-width: 0px;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
}
.mapsembed .box .pesquisar{
    min-height: 40px;
    min-width: 40px;
    margin-left: 20px;

    background-color: #ff500a;

    border-style: solid;
    border-width: 1.2px;
    border-radius: 50%;
    border-color: #ff500a;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;
    transition-duration: 0.3s;
    cursor: pointer;

}
.mapsembed .box .pesquisar:hover{
    transform: scale(1.1);
    transition-duration: 0.3s;
}
@media screen and (max-width: 768px) /* mobile */
{
    #sessao_03_B .mapsembed{
        width: calc(100% - 80px);
    }
    .mapsembed .box{
        width: calc(100% - 80px);
    }
}

/* Sessão 04 */

#sessao_04{
    height: calc(100vh + 50px);
    width: 100%;

    display: block;
    justify-content: center;
    align-items: center;

    background-image: url(https://lanlanoficial.com.br/img/img_solta.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fff;

    background-color: transparent;
}
#sessao_04_B{
    width: 100%;
    height: 0px;
    background-color: transparent;

    display: block;
}


/* Sessão 05 */



#sessao_05{
    height: calc(100vh - 50px);
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sessao_05 .img{
    margin-top: 0vh;
    width: auto;
    height: 50vh;

    position: relative;

    background-color: transparent;
}
#sessao_05 .img img{
    width: auto;
    height: 100%;
    object-fit: cover;
}
#sessao_05 .conteudo{
    width: auto;
    height: 50vh;

    margin-left: 80px;

    flex-direction: column;

    position: relative;

    background-color: transparent;
}
@media screen and (max-width: 768px) /* mobile */
{
    #sessao_05{
    height: auto;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    }
    #sessao_05 .img{
    width: calc(100vw - 80px);
    max-width: 350px;
    height: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-left: 40px;
    }
    #sessao_05 .img img{
    width: 100%;
    height: auto;
    }
    #sessao_05 .conteudo{
    width: auto;
    height: auto;
    margin-left: 40px;
    margin-bottom: 80px;
    }
}

/* Sessão 06 */

#sessao_06{
    height: 100vh;
    width: 100%;


    display: block;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sessao_06 .fundo{

    background-image: url(https://lanlanoficial.com.br/img/img_video.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;

    cursor: pointer;
}
#sessao_06 .pesquisar{
    height: 80px;
    width: 80px;

    background-color: transparent;

    border-style: solid;
    border-width: 0px;
    border-radius: 50%;
    border-color: transparent;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;
    transition-duration: 0.3s;
    cursor: pointer;

}
#sessao_06 .pesquisar:hover{
    fill: #ffd600;
    transform: scale(1.1);
    transition-duration: 0.3s;
}


#video_negatoscopio {

    position: fixed;

    top:0;

    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);

    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    display: none; /* trocar */

    opacity: 0;
    transition: 0.5s ease-out;

    overflow: hidden;



    z-index:999;

    background-color: transparent;
}
#video_box{

  width: 100%;
  max-width: 600px;
  height: 80vh;


  max-width: 75%;
  max-height: 70vh;

  position: relative;
  display: flex;

  border-radius: 5px;
  padding-top: 50px;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #fff;

  z-index:999;
}
@media screen and (max-width: 768px) /* mobile */
{
    #video_box{
    width: calc(100% - 80px);
    max-width: 600px;
    height: 50vh;}

}
.video_fechar {
  width: 20px;
  height: 20px;

  position: absolute;
  right: 15;
  top: 15;


  background-image: url(https://lanlanoficial.com.br/img/fechar.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;



  transition-duration: 0.3s;

  background-color: #fff;
}
.video_fechar:hover, .video_fechar:focus {

  transition-duration: 0.3s;

  opacity: 1.0;
  -moz-opacity:1.0;
  -webkit-opacity:1.0;

}
#negatoscopio {

    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    display: flex;

    background-color: #000;

    filter:alpha(opacity=0.5);
    opacity: 0.5;
    -moz-opacity:0.5;
    -webkit-opacity:0.5;

    overflow: hidden;

    z-index:998;
}


/* Sessão 07 */


#sessao_07{
    height: auto;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 80px 0px 100px 0px;

    background-color: transparent;
}
#sessao_07 .conteudo{
    width: auto;
    height: auto;


    flex-direction: column;

    position: relative;

    background-color: transparent;
}
#sessao_07 .form{
    margin-top: 0vh;
    width: auto;
    height: auto;

    margin-left: 120px;

    position: relative;

    background-color: transparent;
}


@media screen and (max-width: 768px) /* mobile */
{
    #sessao_07{
    height: auto;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    }
    #sessao_07 .conteudo{
    width: calc(100vw - 80px);
    max-width: 350px;
    height: auto;
    margin-bottom: 60px;
    margin-left: 40px;
    }
    #sessao_07 .form{
    width: calc(100vw - 80px);
    max-width: 350px;
    height: auto;
    margin-left: 40px;
    }
}






.ancora{
    position: relative;
    top: 50;
    width: 100%;
    height: 0px;
    background-color: transparent;

    display: flex;

    z-index: 1000;

}
.ancora_02{
    position: relative;
    top: 0;
    width: 100%;
    height: 0px;
    background-color: transparent;

    display: flex;

    z-index: 1000;

}

#sessao_bar{
    width: 100%;
    height: 50px;
    display: flex;


    position: relative;

    justify-content: center;
    align-items: center;
    
    bottom: 50;

    z-index:999;

    background-color: transparent;
}
#sessao_bar_top{
    width: 100%;
    height: 50px;
    display: flex;

    position: relative;

    justify-content: center;
    align-items: top;
    
    top: 0;

    z-index:999;

    background-color: transparent;
}
.complet_right{
    width: calc(50% - 90px);
    height: 50px;

    position: absolute;
    right: 0;

    background-color: #fff;
}
.complet_left{
    width: calc(50% - 90px);
    height: 50px;

    position: absolute;
    left: 0;

    background-color: #fff;
}



.climbdown{

  height: 30px;
  width: 30px;

  position: absolute;

  top: -5;

  display: flex; /* lado a lado */
  justify-content: center; 
  align-items: center;

  background-color: transparent; /* transparent */

  z-index: 1000; /* 3º lugar */
}
.climbdown a{
  width: 30px;
  height: 30px;

  display: flex; /* lado a lado */
  justify-content: center; 
  align-items: center;

  transition-duration: 0.3s;

  background-color: transparent;
}
.climbdown a:hover{
  margin-bottom: -8px;
  transition-duration: 0.3s;
}
.climbup{

  height: 30px;
  width: 30px;

  position: absolute;

  top: -5;

  display: flex; /* lado a lado */
  justify-content: center; 
  align-items: center; 

  background-color: transparent; /* transparent */

  z-index: 1000; /* 3º lugar */
}
.climbup a{
  width: 30px;
  height: 30px;

  display: flex; /* lado a lado */
  justify-content: center; 
  align-items: center;



  transition-duration: 0.3s;

  background-color: transparent;
}
.climbup a:hover{
  margin-bottom: 8px;
  transition-duration: 0.3s;
}

.mobilegeral, .mobilegeral_2 {

display: none;

}
.desktopgeral, .desktopgeral_2 {

display: none;

}
@media screen and (max-width: 768px) /* mobile */
{
    .desktopgeral{display: none;}
    .mobilegeral{display: flex;}

    .desktopgeral_2{display: none;}
    .mobilegeral_2{display: block;}
}
@media screen and (min-width: 769px) /* desktop */
{
    .mobilegeral{display: none;}
    .desktopgeral{display: flex;}

    .mobilegeral_2{display: none;}
    .desktopgeral_2{display: block;}
    
}

/* Preloader */
 
#preloader {
    position:fixed;

    width: 100%;
    height: calc(var(--vh, 1vh) * 100);

    display: flex; /* lado a lado */
    flex-direction: column; /* ative column para ficar em cascata */
    justify-content: center; 
    align-items: center; 

    background-color:#ff500a; /* cor do background que vai ocupar o body */
    z-index: 1000; /* z-index para jogar para frente e sobrepor tudo */

    opacity:1;
    transition: 0.5s 1s ease-out; /* duração delay efeito */
}

#preloader-logo{
    opacity:1;
    transition: 0.3s 0.7s ease-out; /* duração delay efeito */
}

#spinner{
    width: 150px;
    height: 150px;
    
    border: 2px solid #ff500a;
    border-top:3px solid #ffd600;
    border-radius: 100%;
    
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;
    
    animation: spin 1s infinite linear;

    opacity:1;
    transition: 0.3s 0.7s ease-out; /* duração delay efeito */
}

@keyframes spin{

    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

/* Uteis */

.div{

    display: flex;

    width: 100%;
    height: 1px;

    margin-top: 15px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: #dddddd;
}

/* Menu */

nav{

    height: 70px;
    width: 100%;

    position: fixed;
    top: 0;

    display: flex;
    justify-content: space-between; /* posiciona nos extremos */
    align-items: center;

    background-color: transparent;
    z-index: 999; /* 2º lugar */

    transition-duration: 0.3s;
}
#nav-bar{

    height: 70px;
    width: 100%;

    position: fixed;
    top: 0;

    display: flex;
    justify-content: space-between; /* posiciona nos extremos */
    align-items: center;

    background-color: #ff500a;
    z-index: 998; /* 2º lugar */

    transition-duration: 0.3s;
}


.logo{
    margin-left: 60px;
    z-index: 999; /* 2º lugar */

    width: 94px;
    height: 45px;
    background-image: url("https://lanlanoficial.com.br/img/logotipo-white.svg");
    background-repeat: no-repeat;

    transition-delay: 0.2s;
    transition-duration: 0.3s;
    cursor: pointer;
}
.logomobile{
    margin-left: 30px;
    z-index: 999; /* 2º lugar */

    width: 94px;
    height: 45px;
    background-image: url("https://lanlanoficial.com.br/img/logotipo-white.svg");
    background-repeat: no-repeat;

    transition-delay: 0.2s;
    transition-duration: 0.3s;
    cursor: pointer;

}

.itens{
    position: absolute;
    display: flex;
    justify-content: center; /* posiciona nos extremos */


    right: 105;
    width: auto;

    background-color: transparent;

}
.itens li {
    list-style: none;

    margin-right: 60px;

    font-weight: 500;
    font-size: 14px;
    color: #fff;

    text-decoration: none;
    cursor: pointer;  
}
.itens li a {
  position: relative;
  color: #fff;
  text-decoration: none;
}

.pag_visited, #item_animation::after {
    content: "";
  
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;

    width: 8px;
    height: 8px;
    border-radius: 50%;

    bottom: -15;

    background-color: #ffd600;

    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;

    opacity: 0;
}
#item_animation.after::after {
  opacity: 1;
}
#item_animation:hover:after {
  opacity: 1;
}
#item_animation:active:after {
  opacity: 1;
}
#item_animation:visited:after {
  opacity: 1;
}


#menu_desktop .redessociais{
    position: relative;
    display: flex;
    justify-content: space-between; /* posiciona nos extremos */

    right: 0;
    margin-right: 60px;
    width: 45px;


    background-color: transparent;
}

#menu_desktop .redessociais .icone{
    cursor: pointer; 
    fill: #fff;
    transition-duration: 0.3s;
}
#menu_desktop .redessociais .icone:hover{
    fill: #ffd600;
    transition-duration: 0.3s;
}




/* Mobile */



.nav-links{

    position: absolute;
    right: 0px;
    height: 150vh;

    top: -20px;

    margin-right: 0px;
    background-color: #ff500a;

    justify-content: normal; /* justificação normal */

    display: flex;
    flex-direction: column;
    align-items: left;

    width: 100%; /* LARGURA DO MENU MOBILE */
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
}

.nav-links .redessociais{
    position: relative;
    display: flex;

    justify-content: space-between; /* posiciona nos extremos */

    width: 80px;

    background-color: transparent;
}

.nav-links .redessociais .icone{
    cursor: pointer; 
    fill: #fff;
    transition-duration: 0.3s;
}
.nav-links .redessociais .icone:hover{
    fill: #ffd600;
    transition-duration: 0.3s;
}



.nav-links li{ /* tens do menu */
    list-style: none;

    margin-right: 0px;
    margin-left: 30px;

    opacity: 0;
    margin-top: 40px;
    transition-duration: 0.3s;

    font-weight: 500;
    font-size: 18px;
    color: #fff;

    background-color: transparent;

}

.nav-links li a {
  position: relative;
  color: #fff;
  text-decoration: none;  
}


.nav-links a{
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

.nav-links .div{
  display: flex;

  width: auto;
  height: 1px;

  margin-top: 40px;
  margin-right: 40px;
  margin-left: 40px;
  background-color: #6d6d6d;
}
.nav-links .nav-social{
  margin-left: 50px;

  width: 100px;

  flex-direction: row;
  justify-content: space-between; 
  align-items: flex-end;

  opacity: 0;
  margin-left: 40px;
  margin-top: 40px;
  display: flex;
}

.burger{

    width: auto;
    height: auto;
    margin-right: 20px;
    padding: 11px 8px 11px 8px;

    display: block;
    cursor: pointer;

    background-color: transparent;

    z-index: 999; /* 2º lugar*/
}
.burger div{ /* linhas menu */
    width: 18px;
    height: 2px;
    margin: 5px;

    border-radius: 50px;

    color: #fff;
    transition: all 0.3s ease;
    transition-delay: 0.2s;

    background-color: #fff;
}
.toggle .line1{transform: rotate(-45deg) translate(-5px, 5px);}
.toggle .line2{opacity: 0;}
.toggle .line3{transform: rotate(45deg) translate(-5px, -5px);}




@media screen and (max-width: 768px) /* mobile */
{
    .logo{display: none;}
    .logomobile{display: flex;}

    .nav-links{width: 100%;}
    .nav-links li{margin-left: 40px;}

    #menu_desktop{display: none;}

}
@media screen and (min-width: 769px) /* desktop */
{
    .logo{display: flex;}
    .logomobile{display: none;}

    .burger{display: none;}
}

.nav-active{
    transform: translateX(0%);
}
@keyframes navLinkFade{

    from{
        opacity: 0;
        transform: translateX(20px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}




/* Footer */
#footer_fake{
    height: 50px; /* Segurança pro descer */
    width: 100%;

    display: block;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: #ededed;
}


#footer{

    width: 100%;
    height: 150px;

    padding: 40px 40px 40px 40px;

    position: relative;

    display: flex;

    flex-direction: row;
    justify-content: start;
    align-items: center;

    z-index:980;

    background-color: #ededed;
}
#footer .container{

    width: calc(100% - 80px);
    max-width: calc(1920px - 80px);
    height: 100%;

    background-color: transparent;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; 

}
#footer .box{

    width: auto;
    height: 100%;

    white-space: nowrap;

    margin-right: 40px;

    background-color: transparent;

    text-align: left;
    font-size: 14px;
    color: #707070;
    line-height: 220%;

    text-decoration: none;
}
#footer .box strong{
    font-weight: 700;
    font-size: 16px;
    color: #303030;

}
#footer .box a{
    text-decoration: none;
    cursor: pointer;
    color: #707070;
    transition-duration: 0.3s;
}
#footer .box a:hover{
    text-decoration: none;
    cursor: pointer;
    color: #303030;
    transition-duration: 0.3s;
}

#footer .redessociais{
    position: relative;
    display: flex;
    justify-content: start; /* posiciona nos extremos */

    width: auto;

    background-color: transparent;
}

#footer .redessociais .icone{
    cursor: pointer; 
    fill: #707070;
    transition-duration: 0.3s;
}
#footer .redessociais .icone:hover{
    fill: #303030;
    transition-duration: 0.3s;
}



#footer_02{

    width: 100%;
    height: 40px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
    
    font-size: 9px;
    color: #707070;
    line-height: 150%;

    z-index:980;

    background-color: #fff;
}



@media screen and (max-width: 768px) /* mobile */
{
    #footer{
        height: auto;
        padding: 40px 40px 20px 40px;
    }
    #footer .container{
        margin-top: 20px;
        height: 100%;
        flex-direction: column; 
    }
    #footer .box{
        margin-bottom: 40px;
        margin-right: 0px;
        text-align: center;
    }
    #footer .redessociais{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}



#preview {

    margin-top: 10px;

    width: 100px;
    height: 100px;

    display: flex;

    position: relative;

    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-width: 1px;
    border-radius: 50%;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    transition-duration: 0.3s;
}
#preview img{
    width: 100%;
    height: 100%;

    border-style: solid;
    border-radius: 50%;
    border-width: 0px;
    
    object-fit: cover;
    position: relative;
}
#preview label {

    position: absolute;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: transparent;

    border-style: solid;
    border-radius: 50%;
    border-width: 0px;

    fill: rgba(0,0,0,.3);

    cursor: pointer;

    transition-duration: 0.3s;
}
#preview label:hover{
    fill: #909090;
    transition-duration: 0.3s;
}
input[type='file'] {
    display: none
}

#preview_img{
    opacity: 0;
}
#resposta_img{
    width: 250px;
    height: 30px;
    position: relative;
    top: 35;
    left: 90;
    font-size: 10px;
    font-weight: 400;
    margin: 0;
    color: #606060;
    word-wrap: break-word;
}




a{
  text-decoration: none;
  cursor: pointer;
}
label{
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: #606060;

  text-align: left;

  /*padding-left: 15px;*/

  background-color: transparent;
}
input {
  width: 100%;
  height: 40px;

  margin-top: 10px;

  position: relative;

  border-style: solid;
  border-color: rgba(0,0,0,.1);
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;

  font-size: 12px;
  font-weight: 500;
  color: #303030;

  box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

  transition-duration: 0.3s;
}

textarea {
  width: 100%;
  height: 80px;

  margin-top: 10px;

  position: relative;

  border-style: solid;
  border-color: rgba(0,0,0,.1);
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;

  font-size: 12px;
  font-weight: 500;
  color: #303030;
  font-family: Poppins;

  box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

  resize: none;

  transition-duration: 0.3s;
}


select {
  width: 100%;
  height: 40px;

  margin-top: 10px;

  position: relative;

  border-style: solid;
  border-color: rgba(0,0,0,.1);
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;

  font-size: 12px;
  font-weight: 500;
  color: #303030;

  box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

  transition-duration: 0.3s;
}

/* após clicar */
input:hover, input:focus, select:hover, select:focus, #preview:hover {
  border-color: #909090;
  transition-duration: 0.3s;
  background-color: #fff;
}

textarea:focus, input:focus, select:focus, button:focus {
    border-color: #909090;
  transition-duration: 0.3s;
    outline: 0;
    background-color: #fff;
}

input[type='date']
{
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}








.botao-comum
{
    display: inline-block;
    position: relative;

  width: auto;
  min-width: 120px;

  height: 40px;
  padding: 0px 30px 0px 30px;

    font-weight: 500;
    font-size: 16px;
  text-align: center;

    cursor:pointer;
    color:#fff;

    border-style: solid;
  border-width: 1.2px;
  border-radius: 5px;
  border-color: #ff500a;

  background-color: #ff500a;

    transition: all 0.3s;
    transition-duration: 0.3s;
}
.botao-comum:hover, .botao-comum:focus{

  transition-duration: 0.3s;
  color: #ff500a;
  border-color: #ff500a;
  background-color: transparent;
}
.botao-secundario
{
    display: inline-block;
    position: relative;

  width: auto;
  min-width: 120px;

  height: 40px;
  padding: 0px 30px 0px 30px;

    font-weight: 500;
    font-size: 16px;
  text-align: center;

    cursor:pointer;
    color:#ff500a;

    border-style: solid;
  border-width: 1.2px;
  border-radius: 5px;
  border-color: #ff500a;

  background-color: transparent;

    transition: all 0.3s;
    transition-duration: 0.3s;
}
.botao-secundario:hover, .botao-secundario:focus{

  transition-duration: 0.3s;
  color: #fff;
  border-color: #ff500a;
  background-color: #ff500a;
}
.botao-terciario
{
    display: inline-block;
    position: relative;

    width: 200px;

    height: 40px;
    padding: 0px 30px 0px 30px;

    font-weight: 500;
    font-size: 16px;
    text-align: center;

    cursor:pointer;
    color:#fff;

    border-style: solid;
    border-width: 1.2px;
    border-radius: 5px;
    border-color: #ff500a;

    background-color: #ff500a;

    transition: all 0.3s;
    transition-duration: 0.3s;
}
.botao-terciario:hover, .botao-terciario:focus, .botao-terciario:active, .botao-terciario:visited{

    transform: scale(1.1);
    transition-duration: 0.3s;
}
.botao-telefone
{

    display: flex;
    position: relative;

    flex-direction: row;
    align-items: center;

    width: auto;
    min-width: 120px;

    height: 40px;
    padding: 0px 30px 0px 30px;

    cursor:pointer;
    color:#ff500a;

    font-weight: 500;
    font-size: 16px;
    text-align: center;

    border-style: solid;
    border-width: 1.2px;
    border-radius: 5px;
    border-color: rgba(0,0,0,.1);

    background-color: transparent;

    transition: all 0.3s;
    transition-duration: 0.3s;
}

.botao-tel
{

    display: flex;
    position: relative;

    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: auto;

    margin-bottom: 5px;
    margin-top: 5px;

    height: auto;

    cursor:pointer;
    color:#606060;

    background-color: transparent;
}

#aviso, #adicionar_unidade, #alterar_unidade, #deletar_unidade{

    position: fixed;

    top:0;

    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);

    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    display: none; /* trocar */

    opacity: 0;
    transition: 0.5s ease-out;

    overflow: hidden;

    z-index:999;

    background-color: transparent;
}
#aviso_box{
  width: 200px;
  height: auto;


  max-width: 75%;
  max-height: 70vh;

  position: relative;
  display: flex;

  padding-top: 30px;

  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;

  border-radius: 10px;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);
  -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);

  background-color: #fff;

  z-index:999;
}
.aviso_fechar {
  width: 20px;
  height: 20px;

  position: absolute;
  right: 15;
  top: 15;


  background-image: url(https://lanlanoficial.com.br/img/fechar.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;



  transition-duration: 0.3s;

  background-color: #fff;
}
.aviso_fechar:hover, .aviso_fechar:focus {

  transition-duration: 0.3s;

  opacity: 1.0;
  -moz-opacity:1.0;
  -webkit-opacity:1.0;

}
#texto_aviso, #texto_deletar{
    font-size: 13px;
    font-weight: 400;
    text-align: center;

    display: flex;
    position: relative;
    margin-top: 20px;

    margin: 0;
    color: #606060;
    word-wrap: break-word;
}




#titulo{
    height: auto;
    width: 100%;

    margin-top: 70;
    padding: 60px;

    position: relative;
    display: block;

    background-color: #fff;
}
#titulocenter{
    height: auto;
    width: 100%;

    margin-top: 70;
    padding: 80px 0px 80px 0px;

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-color: transparent;
}

.espaco{

    width: 100%;
    height: 1px;

    bottom: 0;

    position: relative;

    background-color: #dddddd;
}
#corpo{
    height: auto;
    width: calc(100% - 120px);
    max-width: 800px;


    margin-top: 20px;
    margin-bottom: 20px;
    padding: 60px;

    position: relative;
    display: block;

    background-color: transparent;
    word-wrap: break-word;
}
#corpo li{
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 180%;
    margin: 0;
    color: #303030;
    word-wrap: break-word;
}
#corpo strong{
    font-weight: 500;
    font-size: 0.9rem;
}
@media screen and (max-width: 768px) /* mobile */
{
    #titulo{
    width: calc(100% - 80px);
    padding: 40px;
    }
    #corpo{
    width: calc(100% - 80px);
    padding: 40px;
    }
    #titulocenter{
    width: calc(100% - 80px);
    margin-left: 40px;
    padding: 80px 0px 80px 0px;
    }
}

/* Atendimento */

#atendimento{
    height: auto;
    width: 100%;

    margin-top: 0px;
    margin-bottom: 80px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;

    background-color: transparent;
}
#atendimento .conteudo{
    width: 350px;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;

    background-color: transparent;

    border-style: solid;
    border-color: #fff;
    border-width: 1px;
    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
}
#atendimento .form{
    width: 350px;
    height: auto;

    margin-left: 120px;

    position: relative;

    background-color: transparent;
}

@media screen and (max-width: 768px) /* mobile */
{
    #atendimento{
    width: calc(100% - 80px);
    margin-left: 40px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: transparent;
    }
    #atendimento .conteudo{
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-bottom: 60px;
    }
    #atendimento .form{
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-left: 0px;
    }
}


/* Trabalhe conosco */


#trabalheconosco{
    height: auto;
    width: 100%;

    margin-bottom: 80px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;

    background-color: transparent;
}
#trabalheconosco .form{
    width: calc(100% - 120px);
    max-width: 800px;
    height: auto;

    display: block;

    position: relative;

    background-color: transparent;
}

@media screen and (max-width: 768px) /* mobile */
{
    #trabalheconosco{
    width: calc(100% - 80px);
    margin-left: 40px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: transparent;
    }
    #trabalheconosco .form{
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-left: 0px;
    }
    #aninhado{
    flex-direction: column;
    }
    #metade{
    width: 100%;
    }
}

/* Seja franqueado */

#progresso{
    width: 100%;
    height: 40px;

    position: relative;

    display: flex;

    justify-content: center;
    align-items: start;

    background-color: transparent;
}
#progresso .box{
    width: 280px;
    height: 40px;

    display: flex;

    flex-direction: row;
    justify-content: space-between;
    align-items: center;


    background-color: transparent;
}

#point_1, #point_2, #point_3{
    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #fff;

    border-radius: 50%;

    font-weight: 700;
    font-size: 1rem;
    line-height: 150%;
    color: #e9e9e9;
    text-align: center;

    z-index:980;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.2);

    transition-duration: 0.3s;
    cursor: pointer;
}
#point_1.after, #point_2.after, #point_3.after{
    background-color: #ff500a;
    color: #fff;
}
#text_1, #text_2, #text_3{
    width: 90px;
    height: auto;

    position: absolute;

    bottom: -50;

    padding-top: 20px;

    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    margin: 0;
    color: #e9e9e9;
    word-wrap: break-word;

    background-color: transparent;
}
#text_1.after, #text_2.after, #text_3.after{
    color: #606060;
}
#etapa_01, #etapa_02, #etapa_03, #etapa_01_B, #etapa_02_B, #etapa_03_B{
    display: none;
}



#pontilhado{
    width: 200px;
    height: 20px;

    position: absolute;

    z-index:979;

    border-style: dotted;
    border-width: 0px 0px 4px 0px;
    border-color: #e9e9e9;
}





#sejaumfranqueado_selecao{
    height: auto;
    width: 100%;

    margin-top: 60px;
    margin-bottom: 80px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sejaumfranqueado_selecao .form{
    width: calc(100% - 120px);
    max-width: 800px;
    height: auto;

    display: block;

    position: relative;

    background-color: transparent;
}
#aninhado{
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}
#metade{
    width: calc(50% - 10px);
    height: auto;
}

@media screen and (max-width: 768px) /* mobile */
{
    #sejaumfranqueado_selecao{
    width: calc(100% - 80px);
    margin-left: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    }
    #sejaumfranqueado_selecao .form{
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-left: 0px;
    }
    #aninhado{
    flex-direction: column;
    }
    #metade{
    width: 100%;
    }
}


/* */

#sejaumfranqueado_03{
    height: auto;
    width: 100%;

    padding: 80px 0px 80px 0px;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    background-color: transparent;
}
#sejaumfranqueado_03 .conteudo{
    width: calc(100% - 160px);
    height: auto;

    margin-top: 40px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;

    background-color: transparent;
}

#sejaumfranqueado_03 .box {
    width: 50%;
    height: auto;
    position: relative;
    display: flex;

    flex-direction: row;
    justify-content: start;
    align-items: center;

    border-radius: 10px;

    padding: 20px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    background-color: transparent;
    cursor: pointer;
    top: 0;
    transition-duration: 0.3s;
}
#sejaumfranqueado_03 .box_02 {
    width: 50%;
    height: auto;
    position: relative;
    display: flex;

    margin-left: 40px;

    flex-direction: row;
    justify-content: start;
    align-items: center;

    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    background-color: transparent;

    cursor: pointer;
    top: 0;
    transition-duration: 0.3s;
}
#sejaumfranqueado_03 .box:hover, #sejaumfranqueado_03 .box_02:hover, #sejaumfranqueado_03 .box:active, #sejaumfranqueado_03 .box_02:active{
    top: -5px;
    transition-duration: 0.3s;
}
/* box alto */
#sejaumfranqueado_03 .conteudo_02{
    width: calc(100% - 160px);
    height: auto;

    margin-top: 40px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;

    background-color: transparent;
}

#sejaumfranqueado_03 .boxalto {
    width: 50%;
    height: 260px;

    position: relative;
    display: flex;

    flex-direction: column;
    justify-content: start;
    align-items: center;

    border-radius: 10px;

    padding: 40px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    background-color: transparent;
    cursor: pointer;
    top: 0;
    transition-duration: 0.3s;
}
#sejaumfranqueado_03 .boxalto_02 {
    width: 50%;
    height: 260px;
    position: relative;
    display: flex;

    margin-left: 40px;

    flex-direction: column;
    justify-content: start;
    align-items: center;

    border-radius: 10px;

    padding: 40px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    background-color: transparent;
    cursor: pointer;
    top: 0;
    transition-duration: 0.3s;
}
#sejaumfranqueado_03 .boxalto:hover, #sejaumfranqueado_03 .boxalto_02:hover, #sejaumfranqueado_03 .boxalto:active, #sejaumfranqueado_03 .boxalto_02:active{
    top: -5px;
    transition-duration: 0.3s;
}
@media screen and (max-width: 1100px) /* mobile */
{
    #sejaumfranqueado_03 .conteudo_02{
    width: calc(100% - 80px);
    flex-direction: column;
    align-items: center;
    margin-left: 0px;}

    #sejaumfranqueado_03 .boxalto{
    width: calc(100% - 40px);
    max-width: 260px;
    padding: 20px;
    height: 280px;}

    #sejaumfranqueado_03 .boxalto_02 {
    width: calc(100% - 40px);
    margin-left: 0px;
    margin-top: 40px;
    max-width: 260px;
    padding: 20px;
    height: 280px;}
}

@media screen and (max-width: 768px) /* mobile */
{
    #sejaumfranqueado_03{
    height: auto;
    align-items: center;
    padding-left: 0px;}

    #sejaumfranqueado_03 h1{

    text-align: center;
    margin: 0;}

    #sejaumfranqueado_03 .conteudo{
    width: calc(100% - 80px);
    flex-direction: column;
    margin-left: 0px;}

    #sejaumfranqueado_03 .box{
    width: calc(100% - 40px);}

    #sejaumfranqueado_03 .box_02 {
    width: calc(100% - 40px);
    margin-left: 0px;
    margin-top: 40px;
    }

}
#sejaumfranqueado_04{
    height: auto;
    width: 100%;

    padding: 80px 0px 80px 0px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sejaumfranqueado_04 .conteudo{
    width: 300px;
    height: auto;

    flex-direction: column;

    justify-content: start;
    align-items: start;

    display: flex;

    position: relative;

    background-color: transparent;
}
#sejaumfranqueado_04 .conteudo .linhas{
	width: 250px;
	height: auto;

	margin-bottom: 20px; 

	display: flex;

	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	position: relative;

	background-color: transparent;

	cursor: pointer;

	transition-duration: 0.3s;
}
#sejaumfranqueado_04 .conteudo .linhas:hover, #sejaumfranqueado_04 .conteudo .linhas:active{
	width: 260px;
	transition-duration: 0.3s;
}
#sejaumfranqueado_04 .circle{
    margin-top: 0vh;
    width: 55vh;
    height: 55vh;

    margin-left: 120px;

    position: relative;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background-image: url("https://lanlanoficial.com.br/img/dotted.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 95%;

    cursor: pointer;

    background-color: transparent;

    transition-duration: 0.3s;
}
#sejaumfranqueado_04 .circle:hover, #sejaumfranqueado_04 .circle:active{

	background-size: 100%;
	transition-duration: 0.3s;

}
#sejaumfranqueado_04 .texto{

	width: 50%;
	height: 50%;

	text-align: center;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: transparent;

}
@media screen and (max-width: 768px) /* mobile */
{
    #sejaumfranqueado_04{
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0px 80px 0px;
    }
    #sejaumfranqueado_04 .conteudo{
    width: calc(100% - 80px);
    max-width: 350px;
    height: auto;
    align-items: center;
    margin-bottom: 60px;
    }
    #sejaumfranqueado_04 .circle{
    width: calc(100% - 100px);
    max-width: 350px;
    height: calc(100vw - 100px);
    max-height: 350px;
    margin-left: 0px;
    }
}


/* 05 */

#sejaumfranqueado_05{
    height: auto;
    width: 100%;

    padding: 80px 0px 120px 0px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#sejaumfranqueado_05 .box{
    width: calc(100% - 160px);
    max-width: calc(1920px - 300px);
    height: 250px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    display: flex;
    position: relative;


    background-image: url(https://lanlanoficial.com.br/img/img_franquia.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    border-radius: 10px;

    background-color: black;
}
.gradiente{
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, black, rgba(0,0,0,0.5), rgba(0,0,0,0.3));

	border-radius: 10px;
	position: absolute;

	top: 0;
	right: 0;
}
@media screen and (max-width: 768px) /* mobile */
{
	#sejaumfranqueado_05{
    padding: 40px 0px 120px 0px;}
	#sejaumfranqueado_05 .box{
    width: calc(100% - 80px);
    text-align: center;
	align-items: center;
	padding-left: 0px;}

}


/* botão voltar */
#pag_anterior{

    width: 65px;
    height: 20px;
    cursor: pointer;
    position: relative;

    display: block;
    text-align: right;

    top: 130;
    left: 60;

    background-image: url(https://lanlanoficial.com.br/img/pag_anterior.png);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 5;

    transition-duration: 0.3s;

    z-index: 999;
    background-color: transparent;
}
#pag_anterior:hover, #pag_anterior:active{
    background-position: 0;
    transition-duration: 0.3s;
}
@media screen and (max-width: 768px) /* mobile */
{
    #pag_anterior{
        top: 100;
        left: 30;
    }
}


/* História */

#historia{
    margin-top: 70;
    height: 70vh;
    width: 100%;


    position: relative;
    display: block;
    justify-content: center;
    align-items: center;

    background-image: url(https://lanlanoficial.com.br/img/img_maps.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    background-color: transparent;
}

#diagramacao{
    width: 100%;

    height: auto;

    margin-top: 100px;
    margin-bottom: 80px;

    position: relative;
    display: flex;

    flex-direction: row;
    justify-content: center;
    align-items: start;

    background-color: transparent;
}

#texto{
    width: 300px;
    display: flex;
    position: relative;

    flex-direction: column;

    margin-right: 80px;

    background-color: transparent;
}
#texto_2{
    width: 300px;
    display: flex;
    position: relative;

    flex-direction: column;

    margin-left: 80px;

    background-color: transparent;
}

#foto{
    width: 300px;
    height: 200px;
    display: flex;
    position: relative;
    flex-direction: column;
}
#foto img{
    width: auto;    
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

#historia_04{
    margin-top: 20px;
    height: 70vh;
    width: 100%;


    position: relative;
    display: block;
    justify-content: center;
    align-items: center;

    background-image: url(https://lanlanoficial.com.br/img/muito-mais-que-uma-coxinha.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    background-color: transparent;
}


#historia_05{

    height: auto;
    width: 100%;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#quote{
    margin-top: 60px;
    margin-bottom: 100px;
    height: auto;
    width: 100%;
    max-width: 600px;


    position: relative;
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}

@media screen and (max-width: 768px) /* mobile */
{
    #historia{
    height: 50vh;
    width: 100%;}
    #diagramacao{
    flex-direction: column;
    padding: 0px 40px 0px 40px;}
    #diagramacao{
    margin-bottom: 20px;}
    #foto{
    width: calc(100% - 80px);
    max-width: 500px;
    height: 300px;
    margin-bottom: 60px;}
    #texto, #texto_2{
    width: calc(100% - 80px);
    max-width: 500px;
    margin: 0px;}
    #historia_04{
    height: 70vh;
    margin-top: 0px;}
    #quote{
    margin-top: 20px;
    margin-bottom: 80px;
    width: calc(100% - 80px);    
    }
}




/* Unidades */


#unidades{
    margin-top: 70;
    height: calc(50vh - 35px);
    width: 100%;

    position: relative;
    display: block;
    justify-content: center;
    align-items: center;

    background-image: url(https://lanlanoficial.com.br/img/img_maps.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    background-color: transparent;
}

#unidades_B{
    height: calc(50vh - 35px);
    width: 100%;

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#unidades_B .mapsembed{

    height: 50vh;
    width: calc(100% - 300px);
    max-width: calc(1920px - 300px);

    background-image: url(https://lanlanoficial.com.br/img/mapspoints.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #ededed;

    border-radius: 10px;
    border-width: 0px;

    color: #fff;
    line-height: 100%;
    font-weight: 700;
    font-size: 2.3rem;
    text-align: center;


    justify-content: center;
    align-items: center;
    flex-direction: column;

    bottom: 22vh;

    position: relative;
    display: flex;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
}
#unidades_B .mapsembed .box{
    height: auto;
    width: 400px;

    margin-top: 40px;

    padding: 20px;

    background-color: #fff;

    border-radius: 5px;
    border-width: 0px;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
}
#unidades_B .mapsembed .box .pesquisar{
    min-height: 40px;
    min-width: 40px;
    margin-left: 20px;

    background-color: #ff500a;

    border-style: solid;
    border-width: 1.2px;
    border-radius: 50%;
    border-color: #ff500a;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;
    transition-duration: 0.3s;
    cursor: pointer;

}
#unidades_B .mapsembed .box .pesquisar:hover, #unidades_B .mapsembed .box .pesquisar:active{
    transform: scale(1.1);
    transition-duration: 0.3s;
}
@media screen and (max-width: 768px) /* mobile */
{
    #unidades_B .mapsembed{
        width: calc(100% - 80px);
    }
    #unidades_B .mapsembed .box{
        width: calc(100% - 80px);
    }
}



#unidades_FOR, #unidades_MET{
    height: auto;
    width: 100%;

    padding: 0px 0px 0px 0px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: transparent;
}
#unidades_FOR .box, #unidades_MET .box{
    width: calc(100% - 300px);
    max-width: calc(1920px - 300px);
    height: auto;

    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 40px 0px 40px 0px;

    border-radius: 10px;

    display: flex;
    position: relative;
    
    background-color: transparent;

    cursor: pointer;

    transition-duration: 0.3s;
}
#unidades_FOR .box:hover, #unidades_FOR .box:active, #unidades_MET .box:hover, #unidades_MET .box:active{
    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    transition-duration: 0.3s;
}    
#unidades_FOR .subbox, #unidades_MET .subbox{
    width: 100%;
    height: auto;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    display: flex;

    position: relative;

    background-color: transparent;
}
#unidades_FOR .subbox_02, #unidades_MET .subbox_02{
    width: 100%;
    height: auto;

    flex-direction: column;
    justify-content: center;
    align-items: start;

    display: flex;

    position: relative;

    text-decoration: none;

    background-color: transparent;
}


@media screen and (max-width: 768px) /* mobile */
{
    #unidades_FOR .box, #unidades_MET .box{
    width: calc(100% - 80px);
    flex-direction: column;
    align-items: center;
    padding-left: 0px;}
    #unidades_FOR .subbox_02, #unidades_MET .subbox_02{
        text-align: center;
        margin-top: 40px;
        align-items: center;
    }

}





audio
{
    display: none;
}
#radio{
    width: 100%;
    height: 100vh;

    display: flex;
    position: relative;

    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#radio #capa{

    width: 100%;
    max-width: 500px;
    
    height: 200px;

    display: block;

    border-radius: 10px 10px 0px 0px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    z-index:982;

}
#slide_01, #slide_02, #slide_03, #slide_04{
    width: 100%;
    max-width: 500px;
    height: 200px;
    display: flex;
    position: absolute;

    opacity: 1;

    transition-duration: 0.5s;
}
#slide_01 img, #slide_02 img, #slide_03 img, #slide_04 img{

    border-radius: 10px 10px 0px 0px;
    width: 100%;
    height: auto;
    object-fit: cover;
}



#radio #progresso{
    width: 100%;
    max-width: 500px;
    
    height: 0px;

    display: flex;
    position: relative;

    background-color: #ff500a;

    z-index:982;
}
#radio #barra{

    width: 100%;
    max-width: 500px;
    
    height: 80px;

    display: flex;
    position: relative;

    flex-direction: row;
    justify-content: center;
    align-items: center;

    border-radius: 0px 0px 10px 10px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    background-color: #fff;

    z-index:982;
}
#titleradio{
    text-align: left;
    left: 40;
    position: absolute;
}
#mute{
    width: 40px;
    height: 40px;

    display: none;
    position: absolute;

    background-image: url(https://lanlanoficial.com.br/img/mute-01.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
    background-color: transparent; 

    right: 20;

    justify-content: center;
    align-items: center;


    cursor: pointer;

    border-radius: 50%;
    border-width: 0px;

    transition-duration: 0.3s;
}
#play, #pause{
    width: 50px;
    height: 50px;

    display: flex;
    position: absolute;

    justify-content: center;
    align-items: center;

    background-color: #ff500a;
    fill: #ffd600;

    cursor: pointer;

    border-radius: 50%;
    border-width: 0px;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);

    transition-duration: 0.3s;
}
#pause{
display: none;
}

#play:hover, #pause:hover{
    transform: scale(1.1);
    transition-duration: 0.3s;
}



#pulse {
  margin: 0px;
  display: none;
  width: 100%;
  max-width: 500px;
  height: 280px;

  border-radius: 10px;
  background: #ff500a;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 80, 10, 0.4);
  animation: pulse 1s infinite;

  z-index:980;
  position: absolute;
}
#pulse::before {
  content: '';
  box-shadow: 0 0 0 rgba(255, 80, 10, 0.4);
  animation: pulse2 1.5s infinite;

  animation-delay: 0.5s;

  border-radius: 50%;
  width: 100%;
  max-width: 500px;
  height: 280px;
  border-radius: 10px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 80, 10, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
  }
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 80, 10, 0);
    box-shadow: 0 0 0 40px rgba(255, 80, 10, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
    box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
  }
}

@-webkit-keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 80, 10, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
  }
}

@keyframes pulse2 {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 80, 10, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 80, 10, 0);
    box-shadow: 0 0 0 60px rgba(255, 80, 10, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
    box-shadow: 0 0 0 0 rgba(255, 80, 10, 0);
  }
}


input[type=range]{
    -webkit-appearance: none;

    position: absolute;
    width: 100px;
    right: 30;

    margin-bottom: 10px;

    border: none;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,.0);
    -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.0);
    -moz-box-shadow: 0 0px 0px 0 rgba(0,0,0,.0);
    transition-duration: 0.3s;

    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #e9e9e9;
    border: none;
    border-radius: 3px;
    transition-duration: 0.3s;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ff500a;
    margin-top: -4px;
    transition-duration: 0.3s;
}

input[type=range]:focus {
    outline: none;
    transition-duration: 0.3s;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
    transition-duration: 0.3s;
}



/* Firefox */

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #e9e9e9;
    border: none;
    border-radius: 3px;
    transition-duration: 0.3s;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ff500a;
    transition-duration: 0.3s;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
    transition-duration: 0.3s;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
    transition-duration: 0.3s;
}




@media screen and (max-width: 768px) /* mobile */
{
    #radio{
    width: 100%;
    height: 100vh;
    }
    #radio #capa{
    width: calc(100% - 80px);
    max-width: 500px;
    height: 340px;
    }
    #slide_01, #slide_02, #slide_03, #slide_04{
    width: calc(100% - 80px);
    height: 340px;
    }
    #radio #barra{
    width: calc(100% - 80px);
    max-width: 500px;
    height: 80px;
    }
    #pulse, #pulse::before {
    width: calc(100% - 80px);
    max-width: 500px;
    height: 400px;
    }
    #titleradio{
    left: 20;
    }
    input[type=range]{
    right: 15;}
}





#radio_float{
    position: fixed;

    display: flex;

    justify-content: start;
    align-items: center;

    right: -360;
    bottom: 80;

    width: 400px;
    height: 150px;

    border-radius: 10px 0px 0px 10px;

    background-color: #ff500a;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);



    z-index: 998; /* 2º lugar */

    transition-duration: 0.5s;
}
#radio_float:hover{
    /*right: 0;*/
    right: -360;
    transition-duration: 1s;
}
#radio_float #abrir{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 100%;

    cursor: pointer;

    background-color: #ff500a;
    border-radius: 10px 0px 0px 10px;
}

#radio_float #abrir img{
    width: 16px;
    height: auto;
    margin-left: 12px;
    margin-right: 12px;

}
#radio_float #div{

    width: 100%;
    max-width: 500px;
    
    height: 150px;

    display: flex;
    position: relative;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 10px 0px 0px 10px;

    background-color: #fff;

    z-index:982;
}
#radio_float #barra{

    width: 100%;
    max-width: 500px;
    
    height: 60px;

    display: flex;
    position: relative;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #fff;
}
#radio_float #botao{
    position: relative;
    display: flex;
}
@media screen and (max-width: 768px) /* Mobile */
{
    #radio_float{
        bottom: 40;
    }
    #radio_float:hover{
        right: 0;
        transition-duration: 1s;
    }
}



















.checkbox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) 
{
  input[type="checkbox"]{
    --active: #FF500A;
    --active-inner: #fff;
    --border: rgba(0,0,0,.1);
    --border-hover: #FF500A;
    --background: #fff;
    --disabled: #edc0b4;
    --disabled-inner: #edc0b4;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    -webkit-transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  input[type="checkbox"]:after{
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
  }
  input[type="checkbox"]:checked{
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }
  input[type="checkbox"]:disabled{
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  input[type="checkbox"]:disabled:checked{
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type="checkbox"]:disabled + label{
    cursor: not-allowed;
  }
  input[type="checkbox"]:hover:not(:checked):not(:disabled){
    --bc: var(--border-hover);
  }
  input[type="checkbox"]:focus{
    box-shadow: 0 0 0 var(--focus);
  }
  input[type="checkbox"]:not(.switch){
    width: 21px;
  }
  input[type="checkbox"]:not(.switch):after{
    opacity: var(--o, 0);
  }
  input[type="checkbox"]:not(.switch):checked{
    --o: 1;
  }
  input[type="checkbox"] + label{
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  input[type="checkbox"]:not(.switch) {
    border-radius: 7px;
  }
  input[type="checkbox"]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    -webkit-transform: rotate(var(--r, 20deg));
            transform: rotate(var(--r, 20deg));
  }
  input[type="checkbox"]:not(.switch):checked {
    --r: 43deg;
  }
  input[type="checkbox"].switch {
    width: 38px;
    border-radius: 11px;
  }
  input[type="checkbox"].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    -webkit-transform: translateX(var(--x, 0));
            transform: translateX(var(--x, 0));
  }
  input[type="checkbox"].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  input[type="checkbox"].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
}


#painel{
    width: auto;

    height: auto;

    position: relative;
    display: flex;

    flex-direction: column;
    justify-content: start;

    background-color: transparent;

    z-index:980;
}
#painel_item{

    width: 100%;
    height: auto;


    margin-top: 20px;

    position: relative;

    display: flex;

    justify-content: center;
    align-items: center;


    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #dddddd;

    background-color: #fff;

    box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);
    -moz-box-shadow: 0 0px 24px 0 rgba(0,0,0,.1);



    z-index: 998; /* 2º lugar */

    transition-duration: 0.5s;
}
#painel_banner{

    


}
#painel_news{
    width: calc(100% - 80px);
    height: auto;

    margin-top: 40px;

    font-family: Poppins;
    font-weight: 500;
    font-size: 14px;
    color: #303030;
}
#table_newsletter{
  width: 100%;
  height: 500px;

  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;

  padding: 5px;

  overflow-y: scroll;

  display: flex;
  flex-direction: row;

  position: relative;

  font-weight: 500;
  font-family: Poppins;
  color: #303030;
  font-size: 10px;
 
  background-color: transparent;

}






#banner{
    width: calc(100% - 80px);
    height: auto;


    margin: 40px;

    display: flex;
    justify-content: center;

    flex-direction: row;

    position: relative;
}




#preview_01, #preview_03, #preview_05, #preview_07 {

    width: 380px;
    height: 200px;

    margin-top: 10px;

    display: flex;

    position: relative;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    background-color: rgba(0,0,0,0);
    background-blend-mode: overlay;

    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-width: 1px;
    border-radius: 10px;

    transition-duration: 0.5s;
}

#preview_02, #preview_04, #preview_06, #preview_08 {

    width: 300px;
    height: 200px;

    margin-top: 10px;

    display: flex;

    position: relative;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    background-color: rgba(0,0,0,0);
    background-blend-mode: overlay;

    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-width: 1px;
    border-radius: 10px;

    transition-duration: 0.5s;
}
#preview_01:hover, #preview_03:hover, #preview_05:hover, #preview_07:hover, #preview_02:hover, #preview_04:hover, #preview_06:hover, #preview_08:hover {
    background-color: rgba(0,0,0,0.6);
    background-blend-mode: overlay;
    transition-duration: 0.3s;
}

#preview_01 img, #preview_02 img, #preview_03 img, #preview_04 img, #preview_05 img, #preview_06 img, #preview_07 img, #preview_08 img{
    width: 100%;
    height: 100%;

    border-style: solid;
    border-radius: 10px;
    border-width: 0px;
    
    object-fit: cover;
    position: relative;
}
#preview_01 label, #preview_02 label, #preview_03 label, #preview_04 label, #preview_05 label, #preview_06 label, #preview_07 label, #preview_08 label{

    position: absolute;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: transparent;

    border-style: solid;
    border-radius: 50%;
    border-width: 0px;

    font-family: Poppins;
    font-weight: 500;
    font-size: 14px;

    opacity: 0;

    cursor: pointer;

    transition-duration: 0.5s;
}
#preview_01 label:hover, #preview_02 label:hover, #preview_03 label:hover, #preview_04 label:hover, #preview_05 label:hover, #preview_06 label:hover, #preview_07 label:hover, #preview_08 label:hover{
    fill: #fff;
    color: #fff;
    opacity: 1;
    transition-duration: 0.3s;
}

#preview_01_img, #preview_02_img, #preview_03_img, #preview_04_img, #preview_05_img, #preview_06_img, #preview_07_img, #preview_08_img {
    opacity: 0;
}



.barra-login{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.barra-login #arroba{

  position: absolute;
  right: 60;
  margin-top: 10px;
  font-size: 12px;

}
.barra-login a{

  position: absolute;
  margin-top: 10px;
  right: 60;
}