@font-face {
  font-family: 'MacklinSans';
  src: url('fonts/MacklinSans-Thin.otf');
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: 'MacklinSans';
  src: url('fonts/MacklinSans-Light.otf');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'MacklinSans';
  src: url('fonts/MacklinSans-Regular.otf');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'MacklinSlab';
  src: url('fonts/MacklinSlab-Medium.otf');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'MacklinText';
  src: url('fonts/MacklinText-Regular.otf');
  font-style: normal;
  font-weight: 400;
}
body, html {
  overflow-x: hidden;
  transform: translate3d(0, 0, 0);
}
body{
	font-family: 'MacklinText';
	font-weight: 400;
}
.linkinit{
	color: #1d1d1d;
}
.linkinit:hover,.linkinit:active{
	color: #1d1d1d;
	text-decoration: none;
}
.linkinit2{
	color: #1d1d1d;
}
.linkinit2:hover,.linkinit2:active{
	color: #1d1d1d;
	text-decoration: none;
}
#encabezado{
	display: -ms-flexbox!important;
    display: flex!important;    
	padding: 40px 35px;
}
#logosmeta{
	width: 103%;
    margin-left: -33px;
    margin-top: -90px;	
}
.mitaddiv{
	display: -ms-flexbox!important;
    display: flex!important;
    flex-wrap: wrap;
    align-items: center;
    width: 60%;
}
.encizq{
	width: 50%;
}
.encder{
	width: 50%;
	text-align: right;
}
#listopt{
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 2;
}
#listopt li{
    display: inline-block;
    margin-left: 15px;
}
#containerprin{
	display: -ms-flexbox!important;
    display: flex!important;
    padding-left: 110px;
    padding-right: 110px;
}	
.divprin1{
	padding-right: 100px;
	width: 40%;
}
.divprin2{
	width: 60%;
	padding-right: 60px;
}
.divprin3{
	width: 40%;
}
.bgbody{
	background-color: #ffffff;
	    overflow-x: hidden;
	
}
.fondoimg{
	background-image: url('../img/login/fondollamada.png'); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: bottom; 
	/*height: 100vh;*/
}
#logoprinc{
	width: 187px;
}
footer{
	display: -ms-flexbox!important;
    display: flex!important;  
	padding: 40px 35px;
	    align-items: end;

}
#logofooter{
	    width: 45px;
}
.footerlink{
	padding-left: 31px;
}
#formdiv{
	    margin-top: 70px;
	background: #ffffff;
    padding: 20px 15px;
        border-radius: 9px;
    box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 20%);
}
#formdiv h3{
    margin: 0;
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #252525;
     font-family: 'MacklinSans';
}
#formdiv .form-control{
	font-weight: 200;
    color: #252525 !important;
    font-family: 'MacklinSans';
    background: transparent;
    border: 0;
    border-bottom: 1px solid #a5baca;
    margin-bottom: 15px;
    font-size: 1.1em;
}
#formdiv .form-control:focus,#formdiv .form-control:focus{
		outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control::placeholder {
  color: #252525 !important;
}
.btnlog{
    display: block;
    width: 100%;
    color: #ffffff;
    font-family: 'MacklinSans';
    background: #4b99d2;
    border: 0;
    border-radius: 10px;
    font-size: 1.1em;
    padding: 9px 10px;
    font-weight: 300;
}
.correoolv{
	color: #4b99d2;
	font-family: 'MacklinSans';
	 font-weight: 200;
}
.recur{
	color: #252525;
    font-size: 1em;
    font-weight: 200;
    font-family: 'MacklinSans';
    margin-top: 13px;
    margin-bottom: 10px;
}
.checkl{
	margin-right: 5px;
}
.titlemd{
	font-family: 'MacklinSans';
    font-weight: 500;
    color: #0c0c0c;
    margin-bottom: 30px;
    width: 100%;
}
.parraf1{
	    color: #0c0c0c;
    font-family: 'MacklinSans';
    font-weight: 400;
    margin-bottom: 14px;
    font-size: 1.1em;
}
.btncomprar{
	color: #ffffff;
    width: 65%;
    background-color: #4bd24b;
    border: 0;
    padding: 5px 7px;
    border-radius: 11px;
    font-size: 1.1em;
    font-family: 'MacklinSans';
    font-weight: 300;
}
.minilink{
	font-family: 'MacklinSans';
    font-weight: 400;
    font-size: 0.7em;
    color: black;
       display: block;
}

#panelform{
	position: absolute;
    right: -458px;
    background: white;
    height: 100%;
    top: 0;
    bottom: 0;
    display: -ms-flexbox!important;
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
    width: 435px;
        transition: all 0.4s ease;
}

#sugerenciatitle{
	    font-family: 'MacklinSans';
    font-weight: 700;
}
#parrsug{
	    font-family: 'MacklinSans';
    font-size: 1.1em;
    padding-right: 60px;
    font-weight: 400;
    line-height: 1.3;
}
.inpsug{
	    border-radius: 9px;
    font-family: 'MacklinSans';
    font-weight: 200;
    color: #050505;
    border: 1.5px solid #8e8e8e;
    resize: none;
        margin-bottom: 16px;
}
.newbtns{
	padding: 6px 5px;
}
.showpanel{
	right: 0px !important;
	transition: all 0.4s ease;
	    
}
#Respuesta{
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'MacklinSans';
    font-size: 1.1em;
	font-weight: 400;
    line-height: 1.3;
}
@media only screen and (min-width: 1500px){
	#containerprin{
		padding-left: 150px;
    	padding-right: 150px;
	}
	.fondoimg{
		height: 100vh;
	}
}
@media only screen and (min-width: 1600px){
	#containerprin{
		padding-left: 160px;
    	padding-right: 160px;
	}
	#encabezado{
		padding: 50px 65px;
	}
	footer{
		padding: 50px 65px;
	}
	#listopt{
		font-size: 1.2em;
	}
	.parraf1{
		font-size: 1.3em;
	}
	.minilink{
		font-size: 1em;
	}
	#listopt{
		font-size: 1.2em;
	}
}
@media only screen and (min-width: 1800px){
	#containerprin{
		padding-left: 230px;
    	padding-right: 230px;
	}
	#encabezado{
		padding: 60px 110px;
	}
	footer{
		padding: 60px 110px;
	}
	.parraf1{
		font-size: 1.5em;
	}
}
@media only screen and (max-width: 1280px){

	.fondoimg{
		height: 100vh;
	}
}
@media only screen and (max-width: 1150px){
	#containerprin{
		padding-left: 70px;
    	padding-right: 70px;
	}
	#panelform{
		padding-left: 2rem;
    	padding-right: 2rem;
	}
	.divprin2 {
	    padding-right: 40px;
	}
}
@media only screen and (max-width: 1050px){
	.divprin1 {
	    padding-right: 40px;
	}
	.divprin2 {
	    padding-right: 0px;
	}
}
@media only screen and (max-width: 991px){
	#containerprin {
	    padding-left: 40px;
	    padding-right: 40px;
	}
	.divprin1 {
	    padding-right: 30px;
	}
	.divprin2 {
	    padding-right: 0px;
	}
	.fondoimg{
		height: auto;
	}
	.fondoimg{
		background-image: url('../img/login/fondollamadamovil.png');		
	}
	.brphone{
		display: none;
	}
}
@media only screen and (max-width: 850px){
	#containerprin {
	    padding-left: 2em;
	    padding-right: 2em;
	}
	.divprin1 {
	    padding-right: 2em;
	}
}
@media only screen and (max-width: 767px){
	#containerprin{
		flex-wrap: wrap;
	}
	.divprin1 {
	    padding-right: 2em;
	    padding-left: 2em;
	    width: 100%;
	    margin-bottom: 2rem;
	    text-align: center;
	}
	.divprin2 {
	    padding-right: 2em;
	    padding-left: 2em;
	    text-align: center;
	    width: 100%;
	}
	.divprin3 {
	    width: 100%;
	}
	.divprin3 img {
		margin: auto;
	}
	.titlemd{
		margin-bottom: 2rem;
	}
	footer {
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	}
	footer div{
		width: 100%;
    	text-align: center;
	}
	.footerlink{
		padding-left: 0px;
	}
	#logofooter {
	    width: 45px;
	    margin: 0px auto 1rem auto;
	}
	.parraf1{
		margin-bottom: 1.3rem;
	}
	.encder {
	    display: flex;
	    justify-content: end;
	    align-items: center;
	}
	#parrsug{
		padding-right: 0px;
	}
	.mitaddiv{
		width: 100%;
		padding-right: 2em;
    	padding-left: 2em;
    	text-align: center;
	}
}
@media only screen and (max-width: 500px){
	#encabezado{
		padding: 3rem 2rem;
	}
	footer{
		padding: 3rem 2rem;
	}
}
@media only screen and (max-width: 450px){
	#panelform {
		right: -300px;
	    width: 300px;
	}
	#encabezado{
		padding: 2.5rem 1.5rem;
	}
	footer{
		padding: 2.5rem 1.5rem;
	}
	.divprin1 {
	    padding-right: 0em;
	    padding-left: 0em;
	}
	.divprin2 {
	    padding-right: 0em;
	    padding-left: 0em;
	}
	#listopt li{
		margin-left: 0px;
	}
	.btncomprar{
		width: 90%;
	}
}
@media only screen and (max-width: 390px){
	#logoprinc {
	    width: 150px;
	}
}
@media only screen and (max-width: 350px){
	#logoprinc {
	    width: 130px;
	}
}