.centro{ max-width: 1430px; margin: 0 auto; display: block; }
.esq{ float: left; }
.dir{ float: right; }
.clear{ clear: both; }

div{ position: relative;}
*{ padding: 0; margin: 0;}
a{ text-decoration: none; color:#fff;}

a, .listamodelos li .box .infos .frase, .listamodelos li .box .infos .fone {transition: all 0.3s;}

body{ margin: 0; padding: 0; background: #372E3E; color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 400; font-family: 'Montserrat', sans-serif; }

header{
 padding-bottom: 30px;
}
.top{ 
    background: #00A5A5; border-bottom: #00DDDD 1px solid;
    color: #122738;
    margin-bottom: 37px; display: block; 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
    width: 100%;
     font-size: 17px;
    font-weight: 900;
}
.top .centro{ padding: 0 10px;}

div.centro p{
  margin-right:10px;
  margin-left:10px;
  text-align:justify;
}

div.centro ol{
  margin-right:20px;
  margin-left:25px;
  text-align  :justify;
  line-height :1.2em;
}

#termos_splash.lightbox{
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
#termos_splash.lightbox > div{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
#termos_splash.lightbox img{
	max-width: 90%;
    width: auto;
    height: 85%;
}

#termos_splash.lightbox:target, .openmodal {
	outline: none;
	display: table;
}

.pad{ padding: 22px;}
.w25{ width: 30%; }
.w45{ width: 45%; }
.w60{ width: 60%; }
.w70{ width: 70%; }

.grayblock{
  background: #00A5A5;
  border-bottom: #ecc0c0 1px solid;
  color:#fff;
  padding: 9px 20px;
  display: block;
}

.space{ width: 100%; height: auto;}
.space .boxjanela{
    position: relative;
    height: auto;
    background: url(../imgs/bg.gif);
    border-top: rgba(0,0,0,0.4) solid 1px;
    border-bottom: rgba(0,0,0,0.4) solid 1px;
    padding: 0px;
    display: inline-block;
    text-align: left;
    border-radius: 5px;
    /*overflow: hidden;*/
}
.fecharjanela{
  position : absolute; right: 7px; top: 3px
  font-size: 18px;
  color: white;
  text-shadow: 0 0 2px #fff;
  cursor:pointer;
}

.btnsumit{
    background: #00A5A5;
    color: #fff;
    font-weight: 100;
    font-size: 12px;
    text-transform: uppercase;
    width: auto;
    float: right;
    line-height: normal;
    height: 33px;
    cursor: pointer;
}
.boxjanela input{ margin: 3px 0; }

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-danger {
    color: #fff;
    background-color: #00A5A5;
    border-color: #d43f3a;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

div.termos_uso{
  font-size:14px;
  color:#fff;
  margin-bottom: 8px;
}

#text_termos{
  width:100%;
  height: 160px;
  resize: none;
  border:1px solid #00A5A5;
  overflow:auto;
  background-color:#fff;
  color:black;
}

.color-rejected{
  color:orange;
  font-size:14px;
  text-decoration:none;
}


.logo{ background: url(../imgs/bg-logo.png) no-repeat center; background-size: 100% auto; display: inline-block; position: absolute; top: 8px; }
nav{ display: none;}
nav ul{ list-style: none; font-size: 0px; }
nav ul li { display: inline-block; list-style: none; border-right: rgba(255,255,255,0.1) solid 1px; font-size: 17px;}
nav ul li a{ display: inline-block; padding: 15px; border-right: rgba(0,0,0,0.1) solid 1px; text-shadow: 1px 1px 0 #122738;}
nav ul li a:hover{ background:#122738;  color:#00A5A5; }
.aviso{ padding: 15px 0 15px 15px;}


.pink{ color: #00A5A5; text-shadow: 0 2px 0 #122738; font-weight: 800; font-size: 16px;}
.yellow{color: #C2CE99;}

.desctop{ width: 100%; border-left: rgba(0,0,0,0.35) solid 15px; padding-left: 15px;
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}
.icos span{/*border-left: rgba(0,0,0,0.2) solid 1px;*/ border-right: rgba(255,255,255,0.05) solid 1px; padding: 7px 15px;}
.icos span:first-child{ border-right: none; }
.icos span:last-child{ border-left: none; }


main{  background: url(../imgs/bg.gif); border-top: rgba(0,0,0,0.4) solid 1px; border-bottom: rgba(0,0,0,0.4) solid 1px; }
.padmain{  border-top: rgba(255,255,255,0.07) solid 1px; border-bottom: rgba(255,255,255,0.07) solid 1px; padding: 30px 0 }

.listamodelos{ list-style: none; font-size: 0px; width: 100%;}
.listamodelos li{ list-style: none; display: inline-block; font-size: 12px; width: 20%; width: calc(100% / 5);  vertical-align: top; }
.listamodelos li .box{ display: block; margin: 5px; height: 100%; position: relative;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px; 
    background: rgba(14,12,16,0.75);
    padding: 11px;
}
.listamodelos li .box .thmb{ position: relative; display: block;}
.listamodelos li .box .thmb img{ width: 100%; height: auto; z-index: 0; position: relative;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px; 
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
}

.sombraimg{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0b1721+15,0b1721+100&0+6,0+6,1+91 */
  background: -moz-linear-gradient(top, rgba(24,19,28,0) 6%, rgba(24,19,28,0.11) 15%, rgba(24,19,28,1) 91%, rgba(24,19,28,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(24,19,28,0) 6%,rgba(24,19,28,0.11) 15%,rgba(24,19,28,1) 91%,rgba(24,19,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(24,19,28,0) 6%,rgba(24,19,28,0.11) 15%,rgba(24,19,28,1) 91%,rgba(24,19,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0018131C', endColorstr='#18131C',GradientType=0 ); /* IE6-9 */
  width: 100%; height: 50px; z-index: 1; position: absolute; bottom: 0;
}

.listamodelos li .box .infos{ display: block; top: -5px; margin-bottom: -5px; position: relative; z-index: 3; }
.listamodelos li .box .infos .frase{ text-transform: uppercase; text-align: center; display: block; font-size: 11px; position: absolute; bottom: 45px; width: 100%;}
.listamodelos li .box .infos .fone{ font-size: 26px; font-weight: 900; text-align: center; display: block; word-break: break-all; text-shadow: 0 2px 0 #04787A; color: #fff; text-transform: uppercase}
.listamodelos li .box .infos .aviso{ display: block; font-size: 8px; text-align: center; padding: 0; }
.listamodelos li .box .infos .nome{  font-family: sans-serif;, font-size: 28px; white-space: nowrap; overflow: hidden; margin-bottom: 2px}

.cliqueaqui{  font-size: 10px;
    font-weight: 560;
    display: block;
    text-align: center;
    background: #4BB311;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2); letter-spacing: 1px;
    position: relative;
    z-index: 99;
    padding: 3px 0 2px 0;
    margin: 4px 0 0 0;
    border-radius: 32px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 32px;
    border-bottom: #63DF16 solid 1px;
}

.cliqueaqui::before{ content: "ME VEJA AGORA";} 

.listamodelos li .box .pinkefect{ 
  width: 101%; width: calc(100% + 2px); height: 100%; position: absolute; z-index: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e91766+1,e91766+72&1+1,0+70 */
  background: -moz-linear-gradient(top, rgba(0,165,165,1) 1%, rgba(0,165,165,0) 70%, rgba(0,165,165,0) 72%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,165,165,1) 1%,rgba(0,165,165,0) 70%,rgba(0,165,165,0) 72%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,165,165,1) 1%,rgba(0,165,165,0) 70%,rgba(0,165,165,0) 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e91766', endColorstr='#00e91766',GradientType=0 ); /* IE6-9 */
  border-top: #00DDDD 1px solid;
  margin: -12px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0.0;
  -khtml-opacity: 0.0;
  opacity: 0.0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opactiy 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.listamodelos li .box:hover .pinkefect{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.99)";
  filter: alpha(opacity=0.99);
  -moz-opacity: 0.99;
  -khtml-opacity: 0.99;
  opacity: 0.99;
}
.listamodelos li .box:hover .infos .frase{ color: #fff;}
.listamodelos li .box:hover .infos .fone{ color: #4BB311; text-shadow: 0 2px 0 #000;}


.listamodelos li .box:hover .cliqueaqui {    
    animation:myfirst 0.7s;
     -moz-animation:myfirst 0.7s infinite; /* Firefox */
    -webkit-animation:myfirst 0.7s infinite; /* Safari and Chrome */
}
.listamodelos li .box:hover .cliqueaqui::before{ content: "CLIQUE AQUI";} 

@-moz-keyframes myfirst 
{
0%   {background:#4BB311;}
50%  {background: #00A5A5; border-bottom: #00DDDD 1px solid;}
100%   {background:#4BB311;}
}
 
@-webkit-keyframes myfirst 
{
0%   {background:#4BB311;}
50%  {background: #00A5A5; border-bottom: #00DDDD 1px solid;}
100%   {background:#4BB311;}
}




footer{ background: #19141C; padding: 30px 0;}
footer .ico{ display: inline-block; margin: 10px;} 
footer .copy{ text-align: center; font-size: 9px; text-transform: uppercase; padding-top: 20px;}
.yout img{ float: right; position: relative; top: -7px; margin-left: 5px;}
.yout { width: 160px; text-align: right; padding: 5px 0 0 0}


.menufoot{ margin: 5px 0 0 0; padding: 0; list-style: none; font-size: 0; }
.menufoot li{ margin: 0; padding: 0; list-style: none; font-size: 11px; display: block;}
.menufoot li a{ margin: 2px; padding: 4px 10px 3px 10px; display: block; background: #00A5A5; border-bottom: #00DDDD 1px solid;  
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}
.menufoot li a:hover{ background: #122738; border-bottom: #000 1px solid; }

#checkbox-toggle{
    display: none
}

#menucel {
    display: none;
    right: 0;
    padding: 8px;
    margin: 0px;
    position: absolute;
    z-index: 9;
    cursor: pointer;
    font-size: 12px;
    top: 0px;
    border: none
}

#menucel span {
    display: block;
    width: 27px;
    height: 4px;
    margin: 3px;
    background: #fff;
}

@media only screen and ( max-width: 1440px ){
  .listamodelos li .box .infos .frase{ bottom: 42px; }
  .listamodelos li .box .infos .fone {font-size: 28px;}
}

@media only screen and ( max-width: 1350px ){
  .listamodelos li .box .infos .frase{ bottom: 37px; }
  .listamodelos li .box .infos .fone {font-size: 25px;}
}
@media only screen and ( max-width: 1240px ){
  .listamodelos li{ width: 25%; width: calc(100% / 4); }
}
@media only screen and ( max-width: 1111px ){
  .listamodelos li .box .infos .frase{ bottom: 32px; }
  .listamodelos li .box .infos .fone {font-size: 21px;}
  .desctop { border-left: none }
  .icos img{ height: 40px;}
  footer .ico{ margin: 10px 2px;}
}

@media only screen and ( max-width: 1000px ){
  .logofoot{ float: none; position: relative; margin: 0 auto; display: block; text-align: center}
  .menufoot{ float: none; }
  .menufoot li{ display: inline-block; margin: 10px; }
  .menufoot li a{ padding: 5px 10px 4px 10px }
  .ico{ float: none; }
  footer { text-align: center;}
}

@media only screen and ( max-width: 950px ){}

@media only screen and ( max-width: 900px ){
    
    .listamodelos li{ width: 33.333%; width: calc(100% / 3); }
    
    .top .logo img{ width: 200px; height: auto;}
    #menucel{ display: block; }
    nav { display: none; position: absolute; right: 0; top: 39px; background: rgba(0,0,0,0.95); z-index: 99;
    border-radius:  0 0 0 8px;
    -webkit-border-radius: 0 0 0 8px;
    -moz-border-radius: 0 0 0 8px;
    }
    nav ul li{ display: block; text-align:center; border-top: solid 1px rgba(255,255,255,0.05); }
    nav ul li a{ background: none; display: block; border-top: solid 1px rgba(0,0,0,0.2); line-height: auto; }
    nav ul li a:hover{background: rgba(0,118,255,0.05)}
    input[type=checkbox]:checked ~ label { background-color: #122738;}
    input[type=checkbox]:checked ~ nav { display: block; }
    
    .aviso { right: 48px; padding: 10px 0 8px 0; font-weight: 400}

}
@media only screen and ( max-width: 810px ){
    .desctop { text-align: center; width: 100%; padding-left: 0; }
    .icos{ /*display: none*/ margin-left:35px; }
    .top .logo img {
        width: 225px;
        height: auto;
    }
  .boxjanela{
    width: 90%;
  }
}
@media only screen and ( max-width: 660px ){
  .listamodelos li{ width: 50%; width: calc(100% / 2); }
  .listamodelos li .box .infos .fone {font-size: 25px;}
  .listamodelos li .box .infos .frase{ bottom: 37px; }
  .boxjanela{
    width: 90%;
  }
}

@media only screen and ( max-width: 550px ){
    
  .listamodelos li .box .infos .frase{ bottom: 32px; }
  .listamodelos li .box .infos .fone {font-size: 21px;}
  .top{ height: 38px; }
  .top .aviso{ display: none;}
  .boxjanela{
    width: 90%;
  }
}

@media only screen and ( max-width: 440px ){
  .listamodelos li .box .infos .frase{ bottom: 30px; }
  .listamodelos li .box .infos .fone {font-size: 17px;}
  .boxjanela{
    width: 90%;
  }
}
@media only screen and ( max-width: 370px ){
  .listamodelos li{ width: 100%; }
  .listamodelos li .box .infos .fone {font-size: 25px;}
  .listamodelos li .box .infos .frase{ bottom: 37px; font-size: 13px; }
  .top{ margin-bottom: 21px; }
  .top .logo img{
     width: 170px;
     height: auto;
     padding-top: 4px;
  }
  .pink { font-size: 15px; }
  body{ font-size: 12px; }
  header{ padding-bottom:  15px; }
  .padmain { padding: 11px 0; }
  .boxjanela{
    width: 90%;
  }
}
