html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body{
font-size: 16px;
font-family: 'ubuntu', monospace;
position: relative;
background: url("../img/licensias-min.JPG");
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;

}
header {
height: 60px;
width: 100%;
position: relative;
background: transparent;
z-index: 100;
}
header h1{
display: none;
}
header nav .ioMenuMovil{
line-height: 40px;
height: 45px; 
margin: 0px 0px 0px 3px;
cursor: pointer;
width: 120px;
padding-top: 5px;
z-index: 100;
}
header nav #hideMenu img{
margin-top: 40px;
height:70px; 
width: 70px;
}
header nav #card_menu{
position: relative;
height: 100%;
width: 230px;
background:-webkit-linear-gradient(top, rgba(23,23,23,1) 0%, rgba(0,0,0,0.5) 100%);
top: -50px;
left: 0px;
border-right: 3px solid #AFAEAE;
display: none;
z-index: 100;
padding-bottom: 0px;/*20px*/
}
header nav .ioMenuMovil img{
position: relative;
top:-25px;
height: 250%;
}
header nav #card_menu #logo_menu{
height: 200px;
margin: 30px 0px;
width: 80%;
margin-left: 10%;
text-align: center;
margin-bottom: 40px;
opacity: 1;
}
header nav #card_menu #logo_menu img{
width: 100%;
}
header nav #card_menu ul{
margin-top: 30px;
}
header nav #card_menu ul li{
list-style: none;
font-size: 1.5em;
line-height: 37px;
}
header nav #card_menu ul li a{
text-decoration: none;
color:rgb(108,181,244);
font-family:'Quicksand'; 
font-weight:bold;
}
header nav #card_menu ul li:hover{
border-bottom:2px solid #1A4C85;
}
h2{
vertical-align: middle;
text-decoration: none;
color: white;
font-weight: lighter;
font-size: 1.4em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color:#1A4C85;
}


.cuadra{
margin-bottom: 100px;
}

.logoimg{
position: relative;
width:150px;
height:150px;
margin: 0 auto;
margin-top:40px; 
}

.logoimg figure,img{
width: 100%;
margin: 0 auto;
}

.intro{
position: relative;
text-align: center;
margin: 0 auto;
}

.intro h1{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
}

.intro p{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 1.2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
width: 300px;
text-align: center;
margin: 0 auto;
line-height: 2;
}

.botonesini{
position: relative;
margin: 0 auto;
width: 300px;
margin-top: 60px;
}

.botonini1{
position: relative;
height: 65px;
width: 270px;
background: white;
color:#00588E;
font-family:"Quicksand";
font-weight: bold;
font-size: 1.5em;
cursor: pointer;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out 0.1s;
margin: 10px;
border-radius: 5px; 
}

.botonini1:hover{
text-decoration:underline ;
border-color: #1A4C85;
}

.botonini2{
position: relative;
height: 65px;
width: 270px;
font-family:"Quicksand";
font-weight: bold;
font-size: 1.5em;
background: #00588E;
color: white;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out 0.1s;
}

#botonini1i{
margin-bottom: 30px;
}

#botonini2i{
margin-bottom: 30px;
}

.botonini2:hover{
text-decoration:underline ;
border-color: #1A4C85;
}


.botoneslicen2{
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
margin-top: 50px;

}


.cuadro{
position: relative;
border: 1px solid black; 
border-radius: 5px;
height: 330px;
width: 300px;
display: inline-block;
background: white;
margin: 10px 10px 20px 10px;
}


.logoblue{
position: relative;
margin: 0 auto;
height: 110px;
width: 110px;
margin-top: 15px; 
}


.logoblue figure,img{
width: 100%;
margin: 0 auto;
}

.licenci{
position: relative;
margin: 0 auto;
font-size: 1.6em;
text-align: center;
text-transform: uppercase;
background: -webkit-linear-gradient(top, #878787, #000);
background-image: linear-gradient(to right top, #325385, #264277, #1c3269, #14225b, #0d124c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 10px;
}



.meses{
position: relative;
margin: 0 auto;
text-align: center;
color:#242424;
font-size: 1.13em;
font-family: "Quicksand";
margin-top: 10px;
text-transform: uppercase;
}

.promo{
position: relative;
margin: 0 auto;
text-align: center;
text-decoration: line-through;
color:#707070;
font-size: 1.2em;
font-family: "Quicksand";
margin-top: 10px
}

.precio{
position: relative;
margin: 0 auto;
text-align: center;
color:black;
font-size: 1.7em;
font-family: 'Lato';
margin-top:10px;
font-weight: bold;
}

.boton{
position: relative;	
text-align:center center;
display: block;
margin: 0 auto ;
height: 29px;
width: 120px;
border:1px solid #00588E;
border-radius: 10px;
font-size: 1em;
color: white;
background:#00588E; /* #00B7FA*/
font-family: "Quicksand" , sans-serif;
text-transform: uppercase;
cursor: pointer;
margin-top: 20px;
}


.cajagrande{
position: relative;
width: 85%;
max-width: 1000px;
background:transparent;
left: 15px;
margin: 0 auto;
padding: 0px;
}

/*  para las promociones 
.cajagrande:after{
content: '-50 %';
position: absolute;
margin:auto;
height:80px;
width:80px;
background: #00588E;
border-radius: 50%;
margin-left:-25px;
top:-30px;
color: white;
text-align: center;
vertical-align: middle;
line-height: 77px;
font-size: 1.6em;
font-family: "Lato"; 
padding: 0px; 
}
*/


#mes1{
margin-top: 30px;
left: 18px;
}

#mes3{
margin-top: 30px;
left: 18px;
}

#mes6{
margin-top: 30px;
left: 18px;
}

#mes12{
margin-top: 30px;
left: 18px;
}


.cuadroper{
position: relative;
border: 1px solid black; 
border-radius: 5px;
height: 380px;
width: 300px;
margin: 10px;
display: inline-block;
background: white;
margin-bottom: 50px;
left: 6px;
}


.licenshow{
position: relative;
color: white;
font-family: "Ubuntu" , sans-serif;
text-decoration: underline;
font-size: 0.7em;
cursor: pointer;
text-align: center;
font-weight: lighter;
margin-top: 40px;
text-shadow: 1px 1px 1px #000000; 
}

.temporal{
position: relative;
width: 98%;
background: transparent;
}


.temshow h1{
position: relative;
color: white;
font-family: "Quicksand";
font-size:2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
text-align: center;
}


.temshow p{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 1.2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
width: 300px;
text-align: center;
margin: 0 auto;
line-height: 2;
}

.permanente{
position: relative;
width: 100%;
background: transparent;
margin-top: 40px;
}

.permanente h1{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
text-align: center;
top:-20px;
}

#volver1mes{
position: relative;
top:10px;
left:18px;
margin-bottom: 50px;
}

#volver3mes{
position: relative;
top:0px;
left:18px;
margin-bottom: 50px; 
}

#volver6mes{
position: relative;
top:0px;
left:18px;
margin-bottom: 50px; 
}

#volver12mes{
position: relative;
top:0px;
left:18px;
margin-bottom: 50px; 
}

#volverper{
position: relative;
top:0px;
left:19px;
margin-bottom: 50px; 
}


@media screen and (min-width: 600px){
body{
background:url("../img/jfjruk1488-min.jpg");
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
}

@media screen and (min-width: 767px){
body{
background:url("../img/jfjruk1488-min.jpg");
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header{
height: 55px;
background:transparent;/*rgb(0,0,210)*/
}
header h1{
display: inline-block;
width: 20%;
min-width: 200px;
margin: 0px;
height: 50px;
line-height: 50px;
margin-left: 80px;
}
header h1 > *{
display: inline-block;
vertical-align: middle;
text-decoration: none;
color: white;
font-weight: lighter;
font-size: 0.8em;
margin: 0px 3px;
font-weight: bold;
text-shadow: 0px 0px 0px #000000,
1px 1px 0px #000000, 2px 2px 0px #000000;
}
header h1 figure{
height: 40px;
width: 40px;
margin: 0px;
}
header h1 figure img{
height: 100%;
}
header nav{
display: inline-block;
vertical-align: middle;
width: 61%;
position: relative;
}
header nav #showMovil,
header nav #hideMenu{
display: none;
}
header nav #card_menu{
display: block;
display: inline-block;
border: none;
position: relative;
background: none; 
top: 4px;
width: 120%;
text-align:left;
padding-bottom: 0px;
}
header nav #card_menu figure{
display: none;
}
header nav #card_menu ul{
margin: 0px;
padding: 0px;
margin-top: -15px;
}
header nav #card_menu ul li{
display: inline-block;
width: 120px;
font-size: 1.2em;
margin: 0px 5px 0px 5px;
text-align: center;
}
header nav #card_menu ul li a{
color: white;
font-weight: bold;
text-transform:uppercase;
text-shadow: 1px 1px 1px #000000; 
}

.intro h1{
position: relative;
color: white;
font-size: 3.5em;
}


.intro p{
position: relative;
font-size: 2em;
width: 1050px;
text-align: center;
margin: 0 auto;
line-height: 2;
text-shadow: 1px 1px 1px #000000; 
}

.botonesini{
position: relative;
margin: 0 auto;
width: 700px;
margin-top: 60px;
}


.botonini1{
position: relative;
height: 65px;
width: 270px;
background: white;
color:#00588E;
font-family:"Quicksand";
font-weight: bold;
font-size: 1.5em;
cursor: pointer;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out 0.1s;
}

#botonini1i{
right:auto;
}

#botonini2i{
left:110px;	
}

.temshow h1{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 3.5em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
text-align: center;
}

.temshow p{
position: relative;
color: white;
font-family: "Quicksand";
font-size: 2em;
text-shadow: 1px 1px 1px #000000; 
font-weight: lighter;
width: 1050px;
text-align: center;
margin: 0 auto;
line-height: 2;
}



#mes1{
margin-top: 30px;
left: 15px;
}

#mes3{
margin-top: 30px;
left: 15px;
}

#mes6{
margin-top: 30px;
left: 15px;
}

#mes12{
margin-top: 30px;
left: 15px;
}

.cajagrande:after{
margin-left:600px;
}

#volver1mes{
position: absolute;
top:1080px;
left:340px;
margin-bottom: 90px; 
}

#volver3mes{
position: absolute;
top:1080px;
left:340px;
margin-bottom: 50px; 
}

#volver6mes{
position: absolute;
top:1080px;
left:340px;
margin-bottom: 50px; 
}

#volver12mes{
position: absolute;
top:1080px;
left:340px;
margin-bottom: 50px; 
}

#volverper{
position: absolute;
top:880px;
left:340px;
margin-bottom:50px; 
}

.permanente h1{
position: relative;
font-size: 3.5em;
}

.cuadroper{
left: 2px;
}

}

@media screen and (min-width: 950px){
body{
background:url("../img/jfjruk1488-min.jpg");
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
}

@media screen and (min-width: 1900px){
body{
background:url("../img/jfjruk1488-min.jpg");
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
}