/*

 CSS GENERAL
 Theme Name: Mi Claro
 Theme Description: Mi Claro
 Version: 1.0
 Authors: FA

*/

/* --- ELEMENT reset -------------------------------------------------*/

body,h1,h2,h3,h4,h5,p,img,fieldset,input,table {
	margin: 0;
	padding: 0;
	border: 0;
	overflow-x: hidden;
}

h1 span,h2 span,h3 span {
	display: none;
}

/* --- CHARSET definition-------------------------------------------------*/

@CHARSET "UTF-8";

/* --- BASIC definition -----------------------------------------------*/

html,body {
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
  font-family: 'amxregular','Roboto', Arial, Helvetica, sans-serif;
}

body {
  font-family: 'amxregular','Roboto', Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #3C3C3C;
  overflow-x: none;
}

/* --- FONT definition -----------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

.roboto-l {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.roboto-r {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.roboto-m {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.roboto-b {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.roboto-black {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

@font-face {
    font-family: 'amxblack';
    src: url('../fonts/amx-black-webfont.woff2') format('woff2'),
         url('../fonts/amx-black-webfont.woff') format('woff'),
         url('../fonts/AMX-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxblack_italic';
    src: url('../fonts/amx-blackitalic-webfont.woff2') format('woff2'),
         url('../fonts/amx-blackitalic-webfont.woff') format('woff'),
         url('../fonts/AMX-BlackItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxbold';
    src: url('../fonts/amx-bold-webfont.woff2') format('woff2'),
         url('../fonts/amx-bold-webfont.woff') format('woff'),
         url('../fonts/AMX-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxbold_italic';
    src: url('../fonts/amx-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/amx-bolditalic-webfont.woff') format('woff'),
         url('../fonts/AMX-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxitalic';
    src: url('../fonts/amx-italic-webfont.woff2') format('woff2'),
         url('../fonts/amx-italic-webfont.woff') format('woff'),
         url('../fonts/AMX-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxmedium';
    src: url('../fonts/amx-medium-webfont.woff2') format('woff2'),
         url('../fonts/amx-medium-webfont.woff') format('woff'),
         url('../fonts/AMX-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxmedium_italic';
    src: url('../fonts/amx-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/amx-mediumitalic-webfont.woff') format('woff'),
         url('../fonts/AMX-MediumItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amxregular';
    src: url('../fonts/amx-regular-webfont.woff2') format('woff2'),
         url('../fonts/amx-regular-webfont.woff') format('woff'),
         url('../fonts/AMX-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

.amx-reg {
  font-family: 'amxregular', sans-serif;
}

.amx-medium {
  font-family: 'amxmedium', sans-serif;
}

.amx-bold {
  font-family: 'amxbold', sans-serif;
}

.f-red {
  color: #E1251B;
}

.f-black {
  color: #3C3C3C;
}

.f-gray {
  color: #9A9A9A;
}

.f-blue {
  color: #0097A9;
}

.f-green {
  color: #44AF69;
}

/* --- FONT SIZE definition -----------------------------------------------*/

.f-reg-i {
  font-size: 20px;
  line-height: 30px;
}

.f-card-def {
  font-size: 18px;
}

.f-confirm {
  font-size: 22px;
  line-height: 32px;
}


.f-sms-ii-title {
  font-size: 28px;
}

.f-balance-def {
  font-size: 24px;
  line-height: 32px;
}

.f-big-title {
  font-size: 42px;
  line-height: 40px;
}

/* --- GENERAL definition -------------------------------------------------*/

.autocont,
.basicrow {
  width: 100%;
  height: auto;
  float: left;
  box-sizing:border-box;
}

.m-top,
.m-top-first {
  margin-top: 20px;
}

.m-top-less {
  margin-top: 13px;
}

.txt-centerer {
  text-align: center;
}

.txt-lft {
  text-align: left;
}


.c-lpd-header {
  background-color: #DA291C;
  height: 75.38px;
  width: 100%;
  float: left;
  text-align: center;
}

.c-lpd-head-logo {
  width: 114.672px;
  height: 29.909px;
  display: block;
  margin: 0 auto;
}

.c-lpd-head-logo {
  margin-top: 20px;
}

.bg-white-def {
  background-color: #ffffff;
  padding: 70px 40px;
}

.basicrow.rel {
  position: relative;
}

.autocont {
  width: auto;
}

.floater-left {
  float: left;
}

.floater-right {
  float: right;
}

.lpd-red-btn {
  height: 59.53px;
  width: 345px;
  display: block;
  margin: 0 auto;
  background-color: #E1251B;
  text-decoration: none!important;
  color: #ffffff!important;
  font-family: 'amxbold', sans-serif;
  font-size: 16px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  box-sizing:border-box;
  padding-top: 15px;
  font-size: 20px;
  line-height: 30px;
}

.lpd-red-btn {
  margin-top: 35px;
}

.landing-half {
  width: 50%;
  height: auto;
  float: left;
}

.foot-cont {
  background-color: #1F1D1D;
  float: left;
  width: 100%;
  height: 57px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  box-sizing:border-box;
  padding: 0 60px;
}

.landing-mu-img {
  width: 46%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 3.5%;
}



.miclaro-text-logo {
  width: 73.96px;
  height: 20.95px;
  display: inline-block;
}

.foot-half-ii,
.foot-half {
  width: 50%;
  height: auto;
  float: left;
  text-align: left;
  margin-top: 17px;
}

.foot-half-ii {
  text-align: right;
}

.mc-ldp-link-def {
  color: #0097A9!important;
}

.extrainfo-cont {
  width: 100%;
  padding: 60px 60px;
  background-color: #F4F5F7;
  float: left;
}

.foot-cont a {
  color: #ffffff!important;
  text-decoration: none!important;
}

.foot-claro-lpd-logo {
  width: 55px;
  height: 20px;
  float: left;
}

.foot-claro-lpd-text {
  width: auto;
  height: auto;
  float: left;
  margin-top: 5px;
  margin-left: 8px;
}

.extrainfo-half-i {
  width: 35%;
  height: auto;
  float: left;
  font-size: 32px;
  line-height: 40px;
  padding-top: 30px;
}

.extrainfo-half-ii {
  width: 65%;
  height: auto;
  float: left;
  text-align: center;
}

.extrainfo-box {
  width: 160px;
  height: 132px;
  margin: 0 10px;
  display: inline-block;
  border: 1px solid #D3D3D3;
  border-radius: 13px 13px 13px 13px;
  -webkit-border-radius: 13px 13px 13px 13px;
  -moz-border-radius: 13px 13px 13px 13px;
  font-size: 14px;
  text-align: center;
  vertical-align: top;
}

.extrainfo-box {
  margin-top: 10px;
}

.extrainfo-icon {
  width: 46px;
  height: 46px;
  display: block;
  margin: 0 auto;
}

.extrainfo-icon {
  margin-bottom: 10px;
  margin-top: 20px;
}

.mc-landing-phrase {
  width: 440px;
  height: auto;
  float: left;
}

/* --- RESPONSIVE definition -------------------------------------------------*/

@media only screen and (max-width: 1350px){
  .extrainfo-box {
    float: left;
  }
}

@media only screen and (max-width: 1250px){
  .extrainfo-half-ii,
  .extrainfo-half-i {
    width: 100%;
  }

  .extrainfo-cont {
    padding: 20px 0px;
  }

  .extrainfo-half-ii {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .extrainfo-box {
    float: none;
  }

  .mc-landing-phrase {
    width: 100%;
    text-align: center;
  }

  .landing-half {
    width: 100%;
  }

  .landing-mu-img {
    position: static;
    width: 500px;
    margin: 0 auto;
  }

  .landing-mu-img {
    margin-top: 40px;
    margin-bottom: -4px;
  }

  .bg-white-def {
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 768px){
  .bg-white-def {
    padding: 40px 25px;
  }

  .bg-white-def {
    padding-bottom: 0;
  }

  .landing-mu-img {
    width: 92%;
  }

  .lpd-red-btn {
    width: 100%;
  }

  .extrainfo-box {
    margin-top: 20px;
  }

  .extrainfo-box {
    width: 43%;
  }

  .foot-cont {
    height: auto;
    padding: 0;
  }

  .foot-half-ii,
  .foot-half {
    width: 100%;
    text-align: center;
  }

  .foot-claro-lpd-text,
  .foot-claro-lpd-logo {
    float: none;
    margin: 0 auto;
    display: block;
  }

  .foot-claro-lpd-text {
    margin-top: 10px;
  }

  .foot-claro-lpd-logo {
    margin-top: 10px;
  }

  .foot-half-ii {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .extrainfo-cont {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .mc-landing-phrase {
    float: left;
  }
}