@charset "UTF-8";
.presdisenoweb {
    background-color: white;
    width: 100%;
    background: url('../imgs/patt1.png') no-repeat;
    background-position: 0% 45%;
}
.margpresdisweb { padding: 16% 0 25% 0 }
h1 {
    font-family: "Lato",sans-serif;
    font-weight: 700;
    font-size: 1.7em;
    text-align: left;
    color: #333;
}
p {
    font-family: "Lato",sans-serif;
    font-weight: 300;
    font-size: 1em;
    color: #444;
    word-spacing: 0.12em;
}
.uvp {
    width: 47%;
    float: left;
    display: block;
    margin: 2% 0 0 6%;
}
.margpresdisweb img {
    width: 46%;
    float: right;
    display: block;
}
.btn {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 0.85em;
    color: white;
    text-align: center;
    padding: 1% 4% 1% 4%;
    text-decoration: none;
    float: left;
    display: inline-block;
    margin: 1.5% 0 0 6%;
    background-color: #0281aa;
    -webkit-box-shadow: -0.19em 0.19em 0 #01465e;
    -moz-box-shadow: -0.19em 0.19em 0 #01465e;
    -ms-box-shadow: -0.19em 0.19em 0 #01465e;
    -o-box-shadow: -0.19em 0.19em 0 #01465e;
    box-shadow: -0.19em 0.19em 0 #01465e;
}
.btnuno {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 0.85em;
    color: white;
    text-align: center;
    padding: 1% 4% 1% 4%;
    text-decoration: none;
    float: left;
    display: inline-block;
    margin: 1.5% 0 0 2%;
    background-color: #0281aa;
    -webkit-box-shadow: -0.19em 0.19em 0 #01465e;
    -moz-box-shadow: -0.19em 0.19em 0 #01465e;
    -ms-box-shadow: -0.19em 0.19em 0 #01465e;
    -o-box-shadow: -0.19em 0.19em 0 #01465e;
    box-shadow: -0.19em 0.19em 0 #01465e;
}
.btn:hover,
.btn:focus { color: #333 }
@media screen and (max-width:900px) { 
	.presdisenoweb {
	    background: url('../imgs/patt2.png') no-repeat;
	    background-position: 100% 90%;
	}
	.margpresdisweb { padding: 45% 0 55% 0 }
	.uvp {
	    width: 70%;
	    margin: 0% 0 0 10%;
	}
	.margpresdisweb img { display: none }
	.btn, .btnuno {
	    padding: 1.2% 5% 1.2% 5%;
	    margin: 1.5% 0 0 10%;
	}
}
@media screen and (max-width:600px) { 
	.margpresdisweb { padding: 30% 0 40% 0 }
	.uvp {
	    width: 88%;
	    margin: 0% 0 0 6%;
	}
	.uvp h1 { width: 80% }
	.btn, .btnuno {
	    padding: 4% 5% 4% 5%;
	    margin: 3% 0 0 7%;
	}
}
.caracteristicas {
    width: 100%;
    background-color: rgb(2,129,170);
}
.margcaract { padding: 9% 0 7% 0 }
h2 {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: white;
    text-align: left;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
h6 {
    font-family: "Lato",sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: white;
    text-align: center;
    float: left;
    display: inline-block;
    background-color: #01465e;
    border-radius: 50% 50%;
    padding: 2.3% 2.3% 2.3% 2.3%;
    margin: 0 3.5% 0 0;
    -webkit-transition: background-color 0.5s ease-in;
    -moz-transition: background-color 0.5s ease-in;
    -ms-transition: background-color 0.5s ease-in;
    -o-transition: background-color 0.5s ease-in;
    transition: background-color 0.5s ease-in;
}
.conttext {
    float: left;
    display: block;
    width: 52%;
    margin: 0 0 0 3%;
}
.caracterst {
    padding: 1.5% 0 1.5% 0;
    margin: 1.5% 0 1.5% 0;
}
.conttext p { color: #DDD }
.conttext p,
.conttext h2 {
    float: left;
    display: block;
    width: 80%;
}
.margcaract img {
    float: right;
    display: block;
    width: 40%;
    margin: 1% 2% 0 0;
}
.caracterst:hover h6,
.caracterst:focus h6 {
    background-color: white;
    color: #01465e;
}
@media screen and (max-width:900px) { 
	.caracteristicas { overflow: hidden }
	.margcaract { padding: 20% 0 25% 0 }
	.conttext {
	    width: 75%;
	    margin: 0 0 0 8%;
	}
	.margcaract img {
	    float: left;
	    width: 60%;
	    margin: 2% 0% -40% 20%;
	}
}
@media screen and (max-width:600px) { 
	.conttext {
	    width: 90%;
	    margin: 0 0 0 6%;
	}
	h2 { margin-top: 2.5% }
	h6 {
	    font-size: 1em;
	    padding: 3.5% 3.5% 3.5% 3.5%;
	}
	.conttext p { width: 100% }
	.margcaract img {
	    float: left;
	    width: 80%;
	    margin: 8% 0% -50% 10%;
	}
}
.precios {
    background-color: white;
    width: 100%;
}
.margprecios { padding: 6% 0 8% 0 }
.margprecios h2 {
    color: #333;
    text-align: center;
}
.txtprecios {
    width: 70%;
    float: left;
    display: block;
    text-align: center;
    margin: 0 0 0 15%;
}
.cotizper {
    width: 90%;
    float: left;
    display: block;
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 0.85em;
    color: white;
    text-align: center;
    padding: 1.5% 0 1.5% 0;
    text-decoration: none;
    margin: 5% 0 0 5%;
    background-color: #0281aa;
    -webkit-box-shadow: -0.19em 0.19em 0 #01465e;
    -moz-box-shadow: -0.19em 0.19em 0 #01465e;
    -ms-box-shadow: -0.19em 0.19em 0 #01465e;
    -o-box-shadow: -0.19em 0.19em 0 #01465e;
    box-shadow: -0.19em 0.19em 0 #01465e;
}
.cotizper:hover,
.cotizper:focus { color: #333 }
.contenedorpaq {
    width: 94%;
    float: left;
    display: block;
    margin: 3% 0 0 3%;
}
.paquete {
    width: 25%;
    float: left;
    display: block;
    text-align: center;
}
.paquete h3,
.paquete h4,
.paquete h4,
.paquete p { width: 100% }
.paquete h3 {
    font-family: "Lato",sans-serif;
    font-weight: 700;
    font-size: 1em;
    color: white;
    padding: 5% 0 5% 0;
    margin: 0 0 0 0;
}
.paquete h4 {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 2.5em;
    color: white;
    padding: 10% 0 10% 0;
    margin: 0 0 0 0;
}
.paquete h4 span { font-size: 0.4em }
.non h3 { background-color: rgba(2,168,221,0.9) }
.par h3 { background-color: rgba(1,71,94,0.9) }
.non h4 { background-color: rgba(70,189,227,0.9) }
.par h4 { background-color: rgba(2,129,170,0.9) }
.paquete p {
    border: 1px solid #ECECEC;
    padding: 5% 0 5% 0;
    margin: 0 0 0 0;
    font-size: 0.85em;
}
@media screen and (max-width:900px) { 
	.margprecios { padding: 8% 0 8% 0 }
	.txtprecios {
	    width: 80%;
	    margin: 0 0 0 10%;
	}
	.contenedorpaq {
	    width: 75%;
	    margin: 5% 0 0 12.5%;
	}
	.paquete { width: 50% }
	.cotizper {
	    width: 75%;
	    padding: 1.8% 0 1.8% 0;
	    margin: 6% 0 0 12.5%;
	}
}
@media screen and (max-width:600px) { 
	.margprecios { padding: 10% 0 10% 0 }
	.txtprecios {
	    width: 90%;
	    margin: 0 0 0 5%;
	}
	.contenedorpaq {
	    width: 90%;
	    margin: 5% 0 0 5%;
	}
	.paquete {
	    width: 100%;
	    margin-top: 5%;
	}
	.cotizper {
	    width: 85%;
	    padding: 3% 0 3% 0;
	    margin: 8% 0 0 7.5%;
	}
	.paquete h4 { padding: 6% 0 6% 0 }
	.paquete p { padding: 3% 0 3% 0 }
}
.portafolio {
    width: 100%;
    background-color: rgb(2,129,170);
}
.margporta { padding: 8% 0 8% 0 }
.contporta {
    width: 47%;
    margin: 0 0 0 3%;
    float: left;
    display: inline-block;
}
.portafolio h5 {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: white;
    padding: 0 9% 0 11%;
    word-spacing: 0.2em;
}
.portafolio p {
    color: #DDD;
    padding: 0 9% 0 11%;
}
.texttest h5,
.texttest p { padding: 0 0% 0 0% }
.texttest h5 span { font-size: 0.7em }
.imgporta {
    width: 50%;
    position: relative;
    float: left;
    display: inline-block;
}
.imgporta p { color: white }
.imgporta img {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.8s ease-out;
    -moz-transition: opacity 0.8s ease-out;
    -o-transition: opacity 0.8s ease-out;
    transition: opacity 0.8s ease-out;
}
.cornerlink {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: white;
    background: rgb(70,189,227);
    text-decoration: none;
    text-align: left;
    -webkit-transition: opacity 0.8s ease-in;
    -moz-transition: opacity 0.8s ease-in;
    -o-transition: opacity 0.8s ease-in;
    transition: opacity 0.8s ease-in;
}
.hover_effect .cornerlink,
.imgporta:hover .cornerlink { opacity: 1 }
.testporta {
    width: 40%;
    margin: 0 0 0 7%;
    float: left;
    display: inline-block;
}
@media screen and (max-width:900px) { 
	.margporta { padding: 15% 0 15% 0 }
	.contporta {
	    width: 60%;
	    margin: 0 0 0 20%;
	}
	.testporta {
	    width: 70%;
	    margin: 5% 0 0 15%;
	}
	.texttest { text-align: center }
}
@media screen and (max-width:600px) { 
	.contporta { display: none }
	.testporta {
	    width: 80%;
	    margin: 5% 0 0 10%;
	}
}

p.tooltip {outline:none; }
p.tooltip strong {line-height:30px;}
p.tooltip:hover {text-decoration:none;} 
p.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
p.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
p.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}