/*
Theme Name: Clikofertas Theme
Author: Eder Gularte
Author URI: https://clikofertas.com/
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starktheme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
*,*:before,*:after{margin: 0; padding: 0; box-sizing: border-box;}
*{max-width: 100%; }
html{font-size: 62.5%}
html, body, header, footer, main, ul, li, p, a{list-style: none;}
body{height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-size: 1.6rem}
body > header{display: flex; flex-direction: column; flex-wrap: nowrap;}
body > main{display: flex; flex-direction: column;}
body > footer{display: flex; flex-direction: column;}
/*MEDIA*/
img,picture source{max-width: 100%; vertical-align: middle; border: none; height: auto;}
object,embed,video,iframe,figure,iframe[style]{max-width: 100%; height: auto;}
img{width: 100%; height: auto;}
.ratio{position: relative; padding-bottom: 56.25%; float: left; width: 100%; height: 0;}
.media{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
/*BTN*/
.btn{padding: 6px 12px; border-radius: 6px; cursor: pointer;}
.btn span{font-size: 0.75em}
/*TEXT*/
h2{font-size: 3em; line-height: 6.6rem; font-weight: 900}
h3{font-size: 2rem; line-height: 3.4rem; font-weight: 900}
h4{font-size: 1.6rem; line-height: 2.8rem;}
h5{font-size: 1.2rem; line-height: 2.2rem;}
.title{font-size: 1.8rem; line-height: 2.8rem; font-weight: 900}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
a.btn:hover{text-decoration: none;}
p{font-size: 1.6rem; line-height: 2.6rem;}
ul{list-style: none; width: 100%;}
hr{width: 94%; padding: 5px; margin: 0px auto; border: 0; border-bottom: 1px solid rgba(210,210,210,1);}
.tagline{font-weight: 900}
.text-left{text-align: left; width: 100%;}
.text-center{text-align: center;}
.fontzero, .font-zero, .fontezero, .fonte-zero{font-size: 0; line-height:0;}
.typewriter{display: none;}
.container_middle .content{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
strong,
mark{font-weight: 900; background: initial;}
body > header .container_top .flex{display: flex; flex-direction: column; justify-content: center; align-items: center;}
body > header .flex{display: flex; justify-content: space-between; align-items: center;}
body > header .flex-row{flex-direction: row}
body > header .flex .box-item{flex: 1;}
/*forms*/
fieldset input[type=text],
fieldset input[type=password],
fieldset input[type=number],
fieldset input[type=mail],
fieldset input[type=phone],
fieldset select,
fieldset option,
fieldset textarea{width: 100%;}
fieldset{padding: 10px 0 5px 0;}
fieldset a{width:100%; display: block !important; text-align: center;}
.form-group{display: table; padding: 1px 0; width: 100%;}
.form-group .input-group{display: table-row; width: 100%;}
.form-group .input-group .input-before,
.form-group .input-group .form-control,
.form-group .input-group .input-after{display: table-cell;} 
.form-group .input-group .input-before,
.form-group .input-group .input-after{width: 1%; white-space: nowrap; vertical-align: middle;} 
.form-group .input-after.button-group{padding: 0;}
.form-group .input-after.button-group button{box-shadow: none; border: none; display: block}
.form-group .input-after.button-group button span{display: none;}
.form-group .input-group.textarea{display: block; padding-left: 10px;}
.form-group .input-group.textarea .input-before.icon{padding: 5px 0;}
.form-group .input-group .input-after.no-padding .button{margin-top: -6px;}
.form-group {border-radius: 4px; border: rgba(0,0,0,0.2) solid 1px; padding: 0 2px;}
.input-group .input-before,
.input-group .input-after,
.input-group .form-control{padding:0px 10px;}
.input-group .input-before{border-right: 1px solid rgba(0,0,0,0.2);}
.input-group .input-after{border-left: 1px solid rgba(0,0,0,0.2);}
.input-group .input-before.check,
.input-group .form-control.check{padding:5px 10px;}
.forms .form-control{width: 100% !important;}
.forms header{padding: 10px !important;}
.forms header h3{font-size: 1.3em}
.menu{min-height: 100%;}
@media(min-width: 48em){
	html{font-size: 50%}
	body > header .container_top .flex{flex-direction: row;}
	.typewriter{display: initial;}
	.container_middle .content{flex-wrap: nowrap;}
	.j_toogle{display: none;}
	.fieldset-group{display: flex; justify-content: space-between;}
}