/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; background-repeat: no-repeat;background-size: cover; font-family: 'Roboto', sans-serif; position: relative; background-attachment: fixed;}
/*********************************************************/
.centro {width: 50%; margin: auto; text-align: center; padding-top: 10%;}
.centro h1 {color: #fff; font-size: 2em; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 60px;}
.centro h1 span {color: #f73a41; font-weight: 700;}

.centro ul {width: 60%; margin: auto;}
.centro li {width: 46%; float: left; margin: 0 1% 0 1%  }

.centro .formulario {width: 50%; margin: auto;}
.centro .formulario span {display: block; text-align: left; padding-top: 5px; color: #fff; font-weight: 300; font-style: italic; font-size: 0.8em;}
.centro .imput {width: 100%; border: 2px solid #f73a41; border-radius: 25px; padding: 20px; color: #f73a41; background-color: transparent; font-weight: 500; letter-spacing: 2px; font-family: 'Roboto', sans-serif;}



.centro .botao {font-family: 'Roboto', sans-serif; background-color: #f73a41; color: #fff; text-transform: uppercase; letter-spacing: 2px; padding: 10px 30px; border-radius: 10px; cursor: pointer;}
.centro .botao:hover {background-color: #fff; color: #f73a41;}

.centro ::-webkit-input-placeholder { color: #f73a41;}
.centro :-ms-input-placeholder { color: #f73a41;}
.centro ::placeholder { color: #f73a41;}

.centro .alerta {background-color: rgba(255,255,255,0.54); padding: 5px 40px; text-align: center; text-transform: uppercase;}
/*********************************************************/
.solicitacao {width: 50%; margin: auto;}
.solicitacao label {display: block; padding-bottom: 10px; font-weight: 700; text-transform: uppercase;}
.solicitacao span {color: #f73a41; display: block; padding-top: 3px; font-weight: 300; font-style: italic; }
.solicitacao .input {width: 100%; border: 2px solid #f73a41; border-radius: 25px; padding: 20px; color: #f73a41; background-color: transparent; font-weight: 500; letter-spacing: 2px; font-family: 'Roboto', sans-serif;}
.solicitacao .inputtext {width: 100%; height: 200px; resize: none; border: 2px solid #f73a41; border-radius: 25px; padding: 20px; color: #f73a41; background-color: transparent; font-weight: 500; letter-spacing: 2px; font-family: 'Roboto', sans-serif;}

.solicitacao .botao {font-family: 'Roboto', sans-serif; background-color: #f73a41; color: #fff; text-transform: uppercase; letter-spacing: 2px; padding: 10px 30px; border-radius: 10px; cursor: pointer;}
.solicitacao .botao:hover {background-color: #fff; color: #f73a41;}


/*********************************************************/
footer {width: 100%; display: table; text-align: center; position: relative; margin-top: 5%; padding-bottom: 30px;}
footer .social {padding-bottom: 60px;}
footer .social li {display: inline-block; margin: 0 2px;}
footer .social i {width: 24px; height: 24px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
footer .social i:hover {background-color: #f73a41; color: #fff;}
footer .titulo {color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;}
footer .separacao {padding: 0 10px; color: #f73a41;}

footer .fim p {color: #fff; font-weight: 500; letter-spacing: 1px; display: inline-block;}

footer .logo-ophicina {width: 200px; height: 130px; margin: 0 auto 20px auto; background-image: url("../images/ophicina.png"); background-repeat: no-repeat; background-size: 100%;}
footer .logo-footwear {width: 200px; height: 130px; margin: 0 auto 20px auto; background-image: url("../images/footwear.png"); background-repeat: no-repeat; background-size: 100%;}
/*********************************************************/
.agencia {width: 100px; height: 20px; background-image: url("../images/icon-agencia.png"); background-repeat: no-repeat; background-size: 100%; display: inline-block; margin-left: 10px; position: relative; top: 5px;}
/*********************************************************/
header {width: 100%; padding: 40px 0; display: table;}

header .menu {padding: 40px 5% 0 0;}
header .busca {float: left; margin-left: 10%; width: 50%; padding-top: 30px; position: relative; z-index: 999999;}
header .input {width: 100%; padding: 20px; border: 2px solid #fff; border-radius: 25px; font-family: 'Roboto', sans-serif; color: #fff; background-color: transparent; font-size: 1.2em; font-weight: 300; background-image: url("../images/icon-busca.png"); background-repeat: no-repeat; background-position: right top;}

header ::-webkit-input-placeholder { color: #fff;}
header :-ms-input-placeholder { color: #fff;}
header ::placeholder { color: #fff;}

header .logotopo-ophicina {width: 200px; height: 130px; float: left;background-image: url("../images/ophicina.png"); background-repeat: no-repeat; background-size: 100%; margin-left: 5%; position: relative; z-index: 999999999;}
header .logotopo-footwear {width: 200px; height: 130px; float: left;background-image: url("../images/footwear.png"); background-repeat: no-repeat; background-size: 100%; margin-left: 5%; position: relative; z-index: 999999999;}
header .logotopo-ophicina-black {width: 200px; height: 130px; float: left;background-image: url("../images/ophicina-black.png"); background-repeat: no-repeat; background-size: 100%; margin-left: 5%; position: relative; z-index: 999999999;}
header .logotopo-footwear-black {width: 200px; height: 130px; float: left;background-image: url("../images/footwear-black.png"); background-repeat: no-repeat; background-size: 100%; margin-left: 5%; position: relative; z-index: 999999999;}
/*********************************************************/
.centromenu {width: 60%; margin: auto; text-align: center; padding-top: 2%;}
.centromenu h1 {color: #fff; font-size: 2em; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 10px;}
.centromenu h1 span {color: #f73a41; font-weight: 700;}

.centromenu .left {width: 45%; float: left;}
.centromenu img {border: 5px solid #fff;}
.centromenu .right {width: 50%; float: right; text-align: left; }

.centromenu .dados li {font-weight: 300; line-height: 25px; width: 100%;}
.centromenu .botoes {width: 100%; text-align: center;}
.centromenu .botoes li {display: inline-block; background-color: #f73a41; color: #fff; padding: 10px 25px; font-weight: 400; font-size: 1.2em; margin: 0 5px 10px 5px;}
.centromenu .botoes li:hover {background-color: #000;}
.centromenu .botoes i {padding-left: 10px;}
/*********************************************************/
.subcategorias {width: 100%; text-align: center; display: table; padding: 10% 0 10px 0;}
.subcategorias li {background-color: #f73a41; color: #fff; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 10px; display: inline-block; margin: 0 10px 20px 10px; min-width: 20%; font-size: 0.9em; }
.subcategorias li:hover {background-color: #fff; color: #f73a41;}
/*********************************************************/
.arquivos {width: 100%; display: table; text-align: center; padding: 10% 0 20px 0;}
.arquivos li {width: 22%; margin: 0 1% 30px 1%; display: inline-block;}
.arquivos h2 {font-size: 0.9em; text-align: left;}
.arquivos i {color: #f73a41; font-size: 1.8em;}

.arquivos .imagem {width: 100%; height: 160px; border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.arquivos .texto {width: 100%; height: 80px; padding: 20px 15px; background-color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}

.arquivos .esquerda {width: 75%; float: left;}
.arquivos .direita {width: 10%; float: right;}

video {width: 100%;}
/*********************************************************/
.marcas {width: 100%; display: table; padding: 60px 0;}

.marcas .esquerda {width: 45%; float: left;}
.marcas .direita {width: 40%; float: right; max-height: 450px; overflow: auto;}

.titulos {width: 100%; height: 40px; background-color: #dfdfdf; padding: 10px; border: 1px solid #ccc;}
.titulos li {float: left; width: 25%; text-align: left; font-weight: 700;}
.titulos .maior {width: 50%;}

.resultado {width: 100%; display: table; padding: 10px; border: 1px solid #ccc;}
.resultado li {float: left; width: 25%; border-bottom: 1px solid #ccc; min-height: 100px; padding-top: 10px;}
.resultado .maior {width: 50%;}
.resultado img {width: auto; height: auto; max-height: 80px; max-width: 60%;}


.galeria {width: 100%; display: table; padding: 40px 0;}
.galeria h2 {text-transform: uppercase; padding-bottom: 40px; color: #f73a41;}
.galeria li {width: 18%; float: left;  margin: 0 1% 30px 1%;}
.galeria a {color: #f73a41;}
.galeria .img {background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; height: 120px; border: 3px solid #fff;}
.galeria .texto {padding: 5px; text-align: center; font-size: 0.9em; font-weight: 700; border-bottom: 2px solid #fff;}