@charset "utf-8";
/* CSS Document */
/*===  $$ @font-face // Google fonts  ====*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,100,300italic,400italic);
/*==========  $$Etiquetas  ==========*/
html{
	font-size:16px;
}
body {
	font-size:1em; /*Fallback*/	
	font-size:1rem;
	font-family: 'Roboto', sans-serif;
}
main{/*Influye en la estructura*/
	display:block;
	width:auto;
	height:auto;
	min-height:100%;
	padding-bottom:5em;/*la misma altura del footer*/
}
main:after{/*Influye en la estructura*/
	width: 100%;
	height: 5em;/*la misma altura del footer*/
	display: block;
	clear: both;
	overflow:hidden;
}
h1 {font-family: 'Roboto', sans-serif;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    color: #FFF;
    background-color: #08b0b1;
    padding: 0.3em 0;
    margin: 0.5em auto 0;
    text-transform: uppercase;}

h2 {font-family: 'Roboto', sans-serif; font-size:2.5em; font-weight:700; text-align:left; color:#FFF; padding:0.5em 1em; text-transform:uppercase;}
#wifi h2{color:#333;}
#tethering h2{color:#333;}
h3 {
}
h4 {font-family: 'Roboto', sans-serif; font-size:1.5em; font-weight:300; text-align:left; color:#333; padding:0.2em 0.5em; background-color:#FFF; max-width:25%; text-align:center; margin-bottom:1em;}
h4.impact{width:auto; max-width:45%;}
h5 {
}
h6 {
}
p {color:#FFF; padding:0.5em 2.5em; text-align:left;}
#wifi p{color:#333;}
#tethering p{color:#333;}
i {
}
b {
}
strong {
	font-weight:bold;
}
em{
}
small {
	font-size:80%;
}
big {
	font-size:120%;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
a {
}
a:link {
	/*text-decoration:underline;*/
}
a:hover {
	/*text-decoration:underline;*/	
}
a:active {
}
a:visited {
}
a:visited:hover {
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
aside{
	overflow:hidden;
	display:block;
}
/*==========  $$Wrapper  ==========*/
.wrapper{
/*Mantener la relación de con la altura del Footer*/
	padding-bottom:-5em;
}
.wrapper:after{
	height: 5em;
}
/*=========  $$Form  =========*/
/*=========  Validación  ========*/
input:required:focus:invalid {
	background-color: red; 
	border: 1px solid black;
}
input:required:focus:valid {
	background-color: green; 
	border: 1px solid black;
}
/*=========  $$Estilos utilitarios  ========*/
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}
.space {
	height:1em;
	clear:both;
}
.img-responsive{
	width:100%;
	height:auto;
}
.invisible {
    visibility: hidden;
}
.not-desktop{
	display:none;
	/*los estilos not-tablet y no-mobile se definen en los media queries*/
}
.only-desktop{
	display: block;
}
.only-tablet, .only-mobile{
	display:none; 
}
.fullheight{
	width: 100%;
	height:450px; /*Modificar*/
}
#go-top{
	display:none;
	text-align: right;
	right:1em;
	position: fixed;
	bottom: 4em;
}
#go-top a{
	display:inline-block;
	width: 5em;
	color:white;
	padding:1em;
	font-size:0.8em;
	background:grey;
}
#go-top a:hover{
	background:#0d091a;
}
/*=========  $$Layout  ========*/
/*=========  $$Header  ========*/
header{ padding:1em 0;}
header img{max-width:400px;}

.logo{width:100%;}
.logo-container{text-align:center;}
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
	background-color:rgba(255,255,255,0.7);
	padding: 0.5em;
}
.sticky ul li a img{max-width: 58px;}
.title{display: inline-block; width: 100%;}
/*=========  $$Menu  ========*/
nav{}
nav li{text-align:center; background-image:url(../img/nav/inactive.png); background-position:center; background-repeat:no-repeat; background-size:contain;}
nav li img{width:100%; max-width:90px;}
nav li.active{background-image:url(../img/nav/active.png); background-position:center; background-repeat:no-repeat; background-size:contain; }
/*=========  $$Contenido  ========*/
#plans{margin-top:1.3em; display: inline-block;}
.ft-plans{background-color:#678fad; padding-bottom: 0.3em; }
#wifi{color:#000;}
.ft-wifi{background-color:#eaeaea; padding-bottom: 3em; color:#333 !important;}
.ft-data{background-color:#678fad; padding-bottom: 3em;}
.ft-tethering{background-color:#eaeaea; padding-bottom: 3em;}
.infographic{padding-top:2em;}
.data-plan{color:#FFF; text-align:left; padding-left:3.5em;}
.data-plan li{list-style:circle; font-size:1.5em; font-weight:100;}
/*.note{padding-bottom:3em;}*/
.warning{padding-left:0; color:#FC0; font-size:1.5em; font-weight:500}
/*tabs*/
.tabs_container {
}
.tabs {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tabs li {
	display: block; width:100%; text-align:center; border-bottom:medium solid #FFF; margin-left:2.5em;}
.tabs li a {
	display: inline-block;
	padding: 0.3em;
	text-decoration: none;
	outline: none;
	color:#FFF;
	font-family: 'Roboto', sans-serif;
	text-align:center;
	font-size: 1.5em;
    letter-spacing: 1px;	
}
#wifi .ft-wifi .tabs li{color:#333; border-bottom: medium solid #333;}
#wifi .tabs li a{color:#333;}
#tethering .ft-tethering .tabs li{color:#333; border-bottom: medium solid #333;}
#tethering .tabs li a{color:#333;}
.dark{color:#333;}
.region{font-weight: 700; background-color: #FFF; color: #3b6d93; padding: 0 0.3em;}
.tabs li a:hover {
	color:#CCC;
}
.tabs li.active a {
	background-color: none;
	border-bottom: none;
	/*border-top: 2px solid #c8070e;*/
	color:#FFF;
	font-weight:bold;
}
.tabs li.active a:hover {
	border-bottom: none;
	color:#CCC;
}
.tabs_content_container {
	border-top: none;
	padding: 0 1em;
	overflow-y:scroll;
	float:left;
}
.tab_content {
	display: none;
}
.down-arrow{width:24px; height:20px; text-align:center; margin:0 auto; padding-top:20px; background-image:url(../img/down-arrow.png); margin-left: 55%;}
.down-arrow-dark{width:24px; height:20px; text-align:center; margin:0 auto; padding-top:20px; background-image:url(../img/down-arrow-dark.png); margin-left: 55%;}
.down-arrow img{margin-top:20px;}
.video{text-align:center;}
.content{text-align:left; padding-left:2.5em; color:#FFF; padding-top: 8%;}
.tooLong{padding-top: 0.1%;}
.content li{list-style:disc !important; padding-bottom:0.3em; font-weight:300;}
.content ul{padding-bottom:1em;}
 /*contenido tabs*/
 
 .unionJack{background-image:url(../img/uk.png); background-repeat: no-repeat; height:50px; margin:10px 0;  background-position:center;  background-color: RGBA(250,250,250,0.6);}
 .eu{background-image:url(../img/eu.png); background-repeat: no-repeat; height:50px; margin:10px 0;  background-position:center;  background-color: RGBA(250,250,250,0.6);}
 .world{background-image:url(../img/worldwide.png); background-repeat: no-repeat; height:50px; margin:10px 0;  background-position:center; background-color: RGBA(250,250,250,0.6);}
 div.description{display:inline-block; width:100%; padding-left: 0.5em;}
 h3.desc-title{text-align:left; color:#FFF; padding-left:0.4em;}
 p.description{padding-left:0.5em; padding-right:3px;}
 .blackberry{background-color: #09aeb0;}
 .onlydata{background-color: #81cde7;}

/*=========  $$Footer  ========*/
footer{
	clear:both;
	display:block;
	overflow:hidden;
	bottom:0;
	height:5em;
	margin: -5em auto 0;
	text-align:center;
}
footer p{text-align:center; color:#7c7c7c; font-size:12px; padding:2em 0;}
/*=========  $$Media queries & Breakpoints  ========*/	
  @media only screen and (min-width: 1200px) {
}
/*=====  Tablet ====*/
  @media only screen and (min-width: 768px) and (max-width: 979px) {
}
 @media only screen and (max-width: 820px) {
}
/*=====  Mobile landscape====*/
 @media only screen and (min-width: 581px) and (max-width: 767px) {
}
 @media only screen and (max-width: 767px) {

}
/*=====  $$Mobile portrait  ====*/
 @media only screen and (max-width: 580px) {
}	
/*=====  Display only-tablet // only-mobile //  only-desktop  ===== */
 @media only screen and (min-width: 768px) and (max-width: 979px) {
	.only-tablet{
		display:block;
	}
	.only-desktop{
		display:none !important;
	}
	.not-tablet{
		display:none;
	}
	.infographic{text-align:center;}
	.infographic img{width:80%; margin:0 auto;}
}
 @media only screen and (min-width: 480px) and (max-width: 767px) {
	 .only-mobile{
		 display:block;
	 }
	 .only-desktop{
		display:none !important;
	}
	.not-mobile{
		display:none;
	}
	h2{font-size:1.5em;}
	.infographic{text-align:center;}
	.infographic img{width:80%; margin:0 auto;}
	.tabs li {margin-left:0; width:90%; margin:0 auto;}
	.down-arrow {margin-left:48%;}
	.down-arrow-dark{margin-left:48%;}
	h4.impact{max-width:70% !important; text-align:left;}
}
 @media only screen and (min-width: 80px) and (max-width: 479px) {
	 .only-mobile{
		 display: block;
	 }
	.only-desktop{
		display:none !important;
	}
	.not-mobile{
		display:none;
	}
	h1{font-size:2em; padding: 0.5em 1em;}
	h4{max-width:100% !important;}
	h2{font-size:1.5em;}
	.infographic{text-align:center;}
	.infographic img{width:80%; margin:0 auto;}
	.nav-list .grid-desktop3{width:25% !important;}
	.nav-list li img{ width:80%;}
	.tabs li a {font-size:1em;}
	.video{float:none !important; margin:0 auto !important; width:100% !important;}
	.warning{padding-right:0 !important;}
	.details .grid-mobile12{width:100% !important;}
	.content{padding-left:0;}
	.ft-plans{border-bottom:3px solid #FFF;}
}
/*=========  $$ Breakpoints  ========*/	
  @media only screen and (min-width: 1200px) {

}
  @media only screen and (max-width: 1200px) and (min-width: 980px) {

}
 @media only screen and (min-width: 581px) and (max-width: 979px) {
	 
 }