﻿@font-face {
  font-family: 'fontello';
  src: url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.eot?43789202');
  src: url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.eot?43789202#iefix') format('embedded-opentype'),
       url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.woff2?43789202') format('woff2'),
       url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.woff?43789202') format('woff'),
       url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.ttf?43789202') format('truetype'),
       url('https://atencionalcliente.movistar.co/recursos_proyectos/header_movistar_co/css/icon/fontello.svg?43789202#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent;
}
.icon-icon-movistar:before { content: '\e800'; }
.icon-icons-chat:before { content: '\e801'; }
.icon-icons-search:before { content: '\e802'; }
.icon-icons-eye:before { content: '\e803'; }
.icon-icons-eyec:before { content: '\e804'; }
.icon-icons-mm:before { content: '\e805'; }
.icon-icons-up:before { content: '\e806'; }
.icon-icons-down:before { content: '\e807'; }

header#menuPrinc i{
	width: inherit;
	height: inherit;
	color: #818181;
}
/**/
header#menuPrinc{
	font-family: 'TelefonicaRegular';
    line-height: 1.1;
    color: #818181;
    font-weight: normal;
    background: #001eb4;
    position: fixed;
    width: 100%;
    left: 0;
}
header#menuPrinc ul, header#menuPrinc ul li{
	list-style: none;
	margin: 0;
	padding: 0;
}
header#menuPrinc ul li a{
	text-decoration: none;
	color: #818181;
	display: block;
}

header#menuPrinc ul li a:hover, header#menuPrinc ul li a.active{
	text-decoration: underline;
	color: #bbbbbb;
}
header#menuPrinc ul.menu_left{
	float: left;
}
header#menuPrinc ul.menu_right{
	float: right;
}
header#menuPrinc section > div{
	max-width: 1200px;
	margin: 0 auto;
}
header#menuPrinc section a.btn_blue{
	background: #00a9e0;
	color: #ffffff;
	padding: 0.8em;
	display: table;
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
	line-height: 1;
	width: 100%;
	text-align: center;
}
header#menuPrinc section a.btn_blue:hover{
	background: #1aa3da;
	color: #ffffff;
}

/*
	TOP
*/
header#menuPrinc section#menuPrinc_top:after{
	content: "";
	display: block;
	clear: both;
}
header#menuPrinc section#menuPrinc_top{
	background: #f4f4f4;
	padding: 0.5em;
}
header#menuPrinc section#menuPrinc_top ul li{
	display: inline-block; *display: inline; zoom: 1;
    vertical-align: top;
    margin-left: 1em;
    font-size: 1em;
}
header#menuPrinc section#menuPrinc_top ul li:first-child{
	margin-left: 0;
}
header#menuPrinc section#menuPrinc_top ul li a{
	color: #818181;
	display: block;
}
header#menuPrinc section#menuPrinc_top ul li a:hover{
	color: #00a9e0;
}
header#menuPrinc section#menuPrinc_top ul li a.active{
	font-family: 'TelefonicaRegularBold';
	font-weight: normal;
}

/*
	PRINCIPAL
*/
header#menuPrinc section#menuPrinc_nav:after{
	content: "";
	display: block;
	clear: both;
}
header#menuPrinc section#menuPrinc_nav{
	background: #001eb4;
	padding: 1em 0.5em;
}
header#menuPrinc section#menuPrinc_nav > div > div{
	display: inline-block; *display: inline; zoom: 1;
    vertical-align: middle;
}
header#menuPrinc section#menuPrinc_nav > div .logoPrinc{
	width: 18%;
}
header#menuPrinc section#menuPrinc_nav > div .otherPrinc{
	width: 19%;
	float: right;
}
header#menuPrinc section#menuPrinc_nav ul li{
	display: inline-block; *display: inline; zoom: 1;
    vertical-align: middle;
    padding-left: 1em;
    font-size: 1.1em;
}
header#menuPrinc section#menuPrinc_nav ul li:first-child{
	padding-left: 0;
}
header#menuPrinc section#menuPrinc_nav ul li a:hover i{
	color: #00a9e0;
}
header#menuPrinc section#menuPrinc_nav ul li a i.icon-icons-down,
header#menuPrinc section#menuPrinc_nav ul li a i.icon-icons-up{
	font-size: 1em;
	line-height: 1.5;
}
header#menuPrinc section#menuPrinc_nav ul li a i.icon-icons-down:hover,
header#menuPrinc section#menuPrinc_nav ul li a i.icon-icons-up{
	color: #00a9e0;
}
header#menuPrinc section#menuPrinc_nav ul li a i.icon-icons-chat{
	font-size: 2em;
}
header#menuPrinc section#menuPrinc_nav ul li a i{
	font-size: 1.5em;
	text-align: center;
}
header#menuPrinc section#menuPrinc_nav .otherPrinc ul li:last-child{
	float: right;
}

/*
	MOBILE
*/
header#menuPrinc section#menuPrinc_mob:after{
	content: "";
	display: block;
	clear: both;
}
header#menuPrinc section#menuPrinc_mob{
	background: #ffffff;
	padding: 1em 0.5em;
	display: none;
}
header#menuPrinc section#menuPrinc_mob .logoPrinc{
	width: 100px;
}
header#menuPrinc section#menuPrinc_mob .logoPrinc a{
	display: block;
}
header#menuPrinc section#menuPrinc_mob .otherPrinc{
	float: right;
	margin: 1.5em 2em 0 0;
}
header#menuPrinc section#menuPrinc_mob > div > div{
	display: inline-block; *display: inline; zoom: 1;
    vertical-align: middle;
}
header#menuPrinc section#menuPrinc_mob ul li{
	display: inline-block; *display: inline; zoom: 1;
    vertical-align: middle;
    margin-left: 1em;
    font-size: 1.1em;
}
header#menuPrinc section#menuPrinc_mob ul li:first-child{
	margin-left: 0;
}
header#menuPrinc section#menuPrinc_mob ul li .demo-icon{
	font-size: 2em;
}
header#menuPrinc section#menuPrinc_mob ul li .demo-icon.icon-icons-chat{
	font-size: 2.5em;
}
header#menuPrinc section#menuPrinc_mob ul li a.menuMob{
	width: 35px;
	height: 30px;
	padding: 0.5em 0 0;
}
header#menuPrinc section#menuPrinc_mob ul li a.menuMob hr{
	background: #9a9c9f;
	width: 100%;
	height: 2px;
	margin: 0 0 3px 0.5em;
	padding: 0;
}

/*
	SUBMENU
*/
header#menuPrinc section#subMenuPrinc > div{
	display: none;
	border-top: 1px solid #dddddd;
	padding: 1.5em 0 3em;
	border-bottom: 1px solid #dddddd;
}
header#menuPrinc section#subMenuPrinc ul{
	width: calc((100% / 5) - 5px);
    display: inline-block; *display: inline; zoom: 1;
    vertical-align: top;
}

header#menuPrinc section#subMenuPrinc ul li h4{
	font-family: 'TelefonicaRegularBold';
	font-size: 1em;
	padding: 0.5em 0 1em;
	margin: 0;
	font-weight: normal;
	text-transform: uppercase;
}
header#menuPrinc section#subMenuPrinc ul li a{
	padding-bottom: 1em;
}
header#menuPrinc section .btnMobile{
	display: none;
	position: absolute;
	width: 100%;
	padding: 1.5em 1em 0;
	left: 0;
	top: 0;
}
header#menuPrinc section .btnMobile .btnBack_sec{
	margin: 0 0 0 -8px;
	display: block;
}
header#menuPrinc section .btnMobile i{
	color: #ffffff;
	font-size: 2em;
	width: 30px;
	display: block;
}
header#menuPrinc section .btnMobile i.icon-icons-down{
	transform: rotate(90deg);
	float: left;
}
header#menuPrinc section .btnMobile i.icon-icons-eyec{
	float: right;
}

/*
	MOBILE
*/
section#navSec_mob{
	z-index: 5;
}
section#navPrinc_mob,
section#navSec_mob{
	display: none;
	width: 100%;
	min-height: 100%;
	background: #00a9e0;	
	font-family: 'TelefonicaLight';
	position: absolute;
	top: 0;
}
section#navPrinc_mob{ padding: 1.6em 1em 4em;}
section#navSec_mob{ padding: 2em 1em 4em;}
section#navPrinc_mob ul.menu_mob_pri{
	margin-top: 5em;
}
section#navPrinc_mob ul.menu_mob_pri li{
	margin-bottom: 1.5em;
	position: relative;
	padding-right: 2em;
}
section#navPrinc_mob ul li a,
section#navSec_mob ul li a{
	font-size: 1.3em;
	color: #ffffff;
	padding-bottom: 1em;
	margin-bottom: 0;
	display: block;
}
section#navSec_mob ul.menu_mob_sec li a:hover,
section#navPrinc_mob ul.menu_mob_pri li a:hover{
	color: #ffffff;
}
section#navSec_mob ul.menu_mob_sec li a i,
section#navPrinc_mob ul.menu_mob_pri li a i{
	color: #ffffff;
	float: right;
	transform: rotate(270deg);
	position: absolute;
	right: 0;
}
section#navSec_mob ul li h4{
	font-family: 'TelefonicaLight';
	font-size: 1.3em;
	padding: 0 0 2em;
	margin: 0 auto;
	font-weight: normal;
	text-align: center;
	color: #ffffff;
	max-width: 210px;
	display: block;
}
section#navSec_mob ul.menu_mob_sec{
	display: none;
}

section#navPrinc_mob .MiMovistar:after{
	content: "";
	display: block;
	clear: both;
}
section#navPrinc_mob .MiMovistar{
	background: #ffffff;
	position: absolute;
	padding: 1em;
	left: 0;
	bottom: 0;
	width: 100%;
}
section#navPrinc_mob .MiMovistar p{
	font-size: 1.3em;
	color: #00a9e0;
	line-height: 1;
	float: left;
	margin: 0;
	padding: 0;
}
section#navPrinc_mob .MiMovistar p strong{
	font-size: 1.5em;
	display: block;
	clear: both;
}
section#navPrinc_mob .MiMovistar .icoMM{
	border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
	width: 40px;
	height: 40px;
	display: block;
	float: right;
	background: #5bc500;
	padding: 0.3em 0 0;
}
section#navPrinc_mob .MiMovistar .icoMM i{
	font-size: 2em;
	color: #ffffff;
	text-align: center;
}
section#navPrinc_mob ul.menu_categoria{
	border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;
	background: #ffffff;
	overflow: hidden;
	width: 180px;
	position: absolute;
	left: 3.5em;
	z-index: 4;
}
section#navPrinc_mob ul.menu_categoria li{
	display: none;
	position: relative;
}
section#navPrinc_mob ul.menu_categoria li.active{
	display: block;
}
section#navPrinc_mob ul.menu_categoria li a{
	color: #50535a;
	padding: 0.5em 1em;
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 0;
}
section#navPrinc_mob ul.menu_categoria li a i{
	color: #50535a;
	font-size: 0.7em;
	line-height: 1;
	position: absolute;
	right: 1em;
	top: 1em;
}
section#navPrinc_mob a.btnBack_home{
	font-size: 2em;
	float: left;
	transform: rotate(90deg);
	margin: 0 0 0 -9px;
}
section#navPrinc_mob a.btn_acces{
	float: right;
	font-size: 2em;
}
section#navPrinc_mob a.btnBack_home i,
section#navPrinc_mob a.btn_acces i{
	color: #ffffff ;
}

/*
    RESPONSIVE
*/
@media (max-width: 1200px){
	header#menuPrinc section#menuPrinc_top{ padding: 0.5em 1em;}
	header#menuPrinc section#subMenuPrinc > div{ padding: 1.5em 1em 3em;}
}
@media (max-width: 992px){
	header#menuPrinc section#menuPrinc_nav > div .navPrinc{ width: 56%;}
	header#menuPrinc section#menuPrinc_nav > div .otherPrinc{ width: 25%;}
	header#menuPrinc section#menuPrinc_nav > div .otherPrinc ul{ text-align: center;}
	header#menuPrinc section#menuPrinc_nav > div .otherPrinc ul li:last-child{ width: 100%; display: block;}
}
@media (max-width: 767px){
	body.body-no-scroll{ overflow: hidden;}

	header#menuPrinc.active{ overflow-y: auto; height: 100%;}
	header#menuPrinc section#menuPrinc_mob{ display: block;}
	header#menuPrinc section#menuPrinc_top, header#menuPrinc section#menuPrinc_nav{ display: none;}

	header#menuPrinc section#subMenuPrinc{ background: #00a9e0; z-index: 3; position: absolute; left: 0; top: 0; width: 100%; z-index: 6;}
	header#menuPrinc section#subMenuPrinc > div{ background: #00a9e0; padding: 2em 1em 4em; border: 0 none; min-height: 100vh;}
	header#menuPrinc section#subMenuPrinc > div ul{ display: none; width: 100%;}
	header#menuPrinc section#subMenuPrinc > div ul li h4, header#menuPrinc section#subMenuPrinc > div ul li a{ color: #ffffff; font-size: 1.3em; font-family: 'TelefonicaLight';}
	header#menuPrinc section#subMenuPrinc > div ul li h4{ text-align: center; margin: 0; padding: 0 0 2em; text-transform: inherit;}
	header#menuPrinc section#subMenuPrinc > div ul li a{ padding-bottom: 1em; margin-bottom: 0;}
	header#menuPrinc section#subMenuPrinc > div ul li a:last-child{ padding-bottom: 1em;}
}
@media (max-width: 520px){
	header#menuPrinc section#menuPrinc_mob .logoPrinc{ width: 70px;}
	header#menuPrinc section#menuPrinc_mob .otherPrinc{ margin: 0.5em 2em 0 0;}
}
/* header#menuPrinc.header_white {background-color: #ffffff} */
