html, body{
height:100%;
width: 100%;
margin: 0 auto;
padding: 0 auto;
font-size: 1em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
p{
margin: 0px;
}
#subti{
margin:0 auto;
padding: 0;
font-size: 8px;
color:#ffffff;
width:250px;
}
body{
background-image: url(../images/Fondodark.png);
//background-image: url(../images/fondo.jpg);
// background-image: url(../images/fondoparaWeb.png);
background-repeat: repeat;
font-size: 100%;
}
.sinpadding [class*="col-"] {
padding: 0;
}
.row {
padding: 0;
}
.fa-whatsapp {
color:#fff;
background:
linear-gradient(#25d366,#25d366) 14% 84%/16% 16% no-repeat,
radial-gradient(#25d366 58%,transparent 0);
}
#principal{
background-color: #263238;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
height: 100%;
width: 90%;
width: 90vw;
position:relative;
z-index: 1;
}
#menubase{
width: 102%;
position: relative;
//height: 6vh;
height: 5.8%;
z-index: 20;
}
#cuerpo{
width: 100%; /* Asume el ancho completo en pantallas pequeñas */
padding-right: 0; /* Alineado al padding de Bootstrap para container */
padding-left: 0; /* Alineado al padding de Bootstrap para container */
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #263238;
z-index: 3;
}
.miscomplementos{
position: relative;
height:86.5vh;
width:100%;
background-color:#ffffff;
}
#ppal {
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px;
}
@media (orientation: landscape){
#ppal {
width:90vmax
}
}
#mifooter{
position: absolute;
bottom: 0;
min-height:70px;
max-height:90px;
height: 7.7%;
background-color: #263238;
font-size:9px;
z-index: 4;
margin-top: 2px;
color:#FFFFFF;
padding-top:4px;
width: 99.5%;
}
#mimarca{
font-size:18px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#718E9D;
//font-size: 25px;
font-family: LeituraDisplay-Roman;
letter-spacing: .6px;
//line-height: 30px;
margin: 0;
text-shadow: 1px 2px 6px #000;
padding: 0px;
margin-top: -1px;
line-height: .8;
}
#miataud{
font-size:1rem;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: LeituraDisplay-Roman;
font-weight: 700;
}
#plateral{
font-size:1rem;
}
#marcar {
color: #AB9144;
font-size:20px;
}
#conte{
position: relative;
//width: 100%;
z-index: 6;
}
.misfotitos{
width: 100%;
height: 10%;
overflow: hidden;
}
#myCarousel{
position: relative;
z-index:10;
}
.carousel-inner{
height: 90vh;
}
.carousel-caption{
margin-left:15px;
}
.carousel-control.left {
background-image: none;
}
#myCarousel{
height: 93vh;
width: 100vw;
height: 93%;
width: 100%;
}
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.social {
-webkit-transform: scale(0.8);
/* Browser Variations: */
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
/*
Multicoloured Hover Variations
*/
#social-fb:hover {
color: #3B5998;
}
#social-tw:hover {
color: #4099FF;
}
#social-gp:hover {
color: #d34836;
}
#social-em:hover {
color: #f39c12;
}
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
#plateral{
font-size:0.5rem;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
#principal{
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
height: 93%;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
width: 100vw;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height:100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100%;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:100vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:100vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
///<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@media only screen
and (min-device-width: 1300px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 3) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 100vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:100vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 100vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/* ----------- LG70 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 640px)
and (device-height: 384px){
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#cuerpo{
height: 93vh;
width: 100vw;
position: relative;
background-color: #3C3D41;
z-index: 3;
margin-top:0px;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
@media screen and (device-width: 480px) and (device-height: 320px) and (orientation:landscape){
.foo {
height: 320px;
}
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
///
@media screen (device-width: 732px) and (device-height: 412px) and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
.foo {
height: 412px;
height: 100vh;
width: 100vw;
}
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
@media screen (max-height: 768px) and (max-height: 1024px) and (orientation:landscape){
#principal{
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
}
.foo {
height: 100vh;
width: 100vw;
// background: url(cover.jpg) center center / cover no-repeat;
}
/**
* iPad with portrait orientation.
*/
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.foo {
height: 1024px;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
}
/**
* iPad with landscape orientation.
*/
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.foo {
height: 768px;
}
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
#mifooter{
display: none;
}
}
/**
* iPhone 5
* You can also target devices with aspect ratio.
*/
@media screen and (device-aspect-ratio: 40/71) {
.foo {
height: 500px;
}
#principal{
//background-color: #ffffff;
background-image: url(../images/Fondodark.png);
background-repeat: repeat;
height: 100vh;
width: 100vw;
position:relative;
z-index: 1;
}
.misfotitos{
height: 93vh;
width: 100vw;
overflow: hidden;
}
#myCarousel{
height: 93vh;
width: 100vw;
}
.miscomplementos{
position: relative;
height:93vh;
width:100%;
background-color:#ffffff;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
ul,li{
padding:0;
margin:0;
}
li{
list-style-type:none;
}
//footer { background-color:#0c1a1e; height:8%; font-family: 'Open Sans', sans-serif; }
.footer-col { margin-top:1px; }
.logofooter { margin-bottom:10px; font-size:18px; color:#fff; font-weight:700;}
.footer-col p { color:#fff; font-size:12px; font-family: 'Open Sans', sans-serif; margin-bottom:15px;}
.footer-col p i { width:20px; color:#999;}
.footer-ul { list-style-type:none; padding-left:0; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }
.copyright { min-height:40px; background-color:#000000;}
.copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0;}
.heading7 { font-size:14px; font-weight:700; color:#d9d6d6; margin-bottom:1px;}
.post p { font-size:12px; color:#FFF; line-height:20px;}
.post p span { display:block; color:#8f8f8f;}
.bottom_ul { list-style-type:none; float:right; margin-bottom:0;}
.bottom_ul li { float:left; line-height:40px;}
.bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
.bottom_ul li a { color:#FFF; font-size:12px;}
.social-icon {
width: 30px;
height: 30px;
font-size: 15px;
background-color: blue;
color: #fff;
text-align: center;
margin-right: 10px;
padding-top: 7px;
border-radius: 50%;
}
.footer-social li{
float:left;
font-size: 18px;
// margin-left: 10px;
}
#contacto{
font-size: 13px;
}
.linked-in{
background-color:#007bb6;
}
.facebook{
background-color:#3b5998;
}
.twitter{
background-color:#1da1f2;
}
.google{
background-color:#f63e28;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.social {
-webkit-transform: scale(0.8);
/* Browser Variations: */
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img-responsive{
width: 100%;
height: 100%;
margin: 0 auto;
}
/*
Multicoloured Hover Variations
*/
#social-fb:hover {
color: #3B5998;
}
#social-tw:hover {
color: #4099FF;
}
#social-gp:hover {
color: #d34836;
}
#social-em:hover {
color: #f39c12;
}