@charset "utf-8";
/* CSS Document */

.float-left {
	float: left;
}

.icon-disclaimer {
	background: url("../images/disclaimer-promos.png") no-repeat center;
	width: 144px;
	height: 75px;
}

.box-promo-rs { display: none;}

.text-yellow-jumper { color: #ffdc00;}
.text-black-jumper {color:#000;}
.bg-black { background-color:#000; }
.bg-dark-blue-jumper { background-color:#0e2134; }
.bg-yellow-jumper { background-color:#ffdc00; }
.bg-orange-jumper {background-color:#ff8000;}
.bg-jumper-thunder { background-image: url("../images/productos-servicios/tiendas-otros-servicios/vayven/marcas-propias/bg-jumper-thunder.png"); background-position: top; background-repeat: repeat-x;}
.bg-features-jumper { background-image:url("../images/productos-servicios/tiendas-otros-servicios/vayven/marcas-propias/bg-features-jumper.jpg"); background-position: top; background-repeat: repeat-y; }

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#ffffff!important;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

a.float:hover, a.float:active, a.float:focus {
	color:#ffffff!important;
	width:65px;
	height:65px;
	font-size:35px;
}

.my-float{
	margin-top:16px;
}

.lnk-promo { display: block;}

.lnk-promo-paraguas { display: block;}

.pawa-bottom-img {
	background-image: url("../images/productos-servicios/tiendas-otros-servicios/vayven/marcas-propias/pawa-bg-bottom.jpg");
	background-position: bottom;
	background-repeat: repeat-x;
	height: 386px;
}

#footer-menu a {
	color: #ffffff !important;
	text-decoration: underline;
}

#footer-menu a:hover {
	color: #ffffff !important;
	text-decoration: none;
}

.promo-margin-n { margin-top: -40px!important;}

.google-maps {
    position: relative;
    padding-bottom: 75%; /*This is the aspect ratio*/
    height: 0;
    overflow: hidden;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

.btn.btn-slider { font-size:17px; padding: 10px 32px;}
.btn-slider-promo { font-size:19px!important; padding: 5px 20px;}
.btn-slider-promo:hover, .btn-slider-promo:focus { background: #f6da00; border-color: #f6da00; color: #ff1e0a; }

.btn.btn-medium-pd { padding: 10px 15px 10px 15px; }

/*...BOXES MARCAS EXCLUSIVAS...*/

.marca-pawa-box-rs {display: none;}

/*....MENU HEADER.....*/

.menu-top-rs {
	display: none;
}

.banner-cnt-rs { display: none;}
.banner-cnt-mr { display: none;}

.container-menu-top {
  position: relative;
}

.header-menu-top {
  position: absolute;
  top:0;
  right:0;
  z-index: 50;
}

.header-menu-top ul {
	list-style-type: none;
	margin: 35px 30px 0 0;
	overflow: hidden;
}

.menu-top-inner-pages ul {
	margin: 35px 40px 0 0 !important;
}

.header-menu-top ul span {
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
}


.header-menu-top ul li {
	display: inline;
}

.header-menu-top ul li a {
	color: #ffffff;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
  	text-align: center;
	padding: 16px 13px 16px 13px;
  	text-decoration: none;
}

.header-menu-top ul li a:hover {
  	text-decoration: underline;
}

.home-slider-rs {
	display: none;
}

.bg-voltexmap { background-color:#dfe9ed; }




/*....END MENU HEADER....*/

/*....MAIN SUBMENU OPEN....*/

.left-sidebar-nav .menu-list .menu-list-item .sub-menu-open li a {font-size:15px; padding:6px 0 6px 13px;}
.left-sidebar-nav .menu-list .menu-list-item .sub-menu-open li a.menum-open-active { background-image:url("../images/bullet-submenu-main.png"); background-position:left; background-repeat:no-repeat; }
.left-sidebar-nav .menu-list .menu-list-item .sub-menu-open li.last-submenu-item { border-bottom: none;}

.left-sidebar-nav .menu-list .menu-list-item .sub-menu-open .sub-menu-item li a {font-size:15px; padding:6px 0 6px 25px;}
/*.left-sidebar-nav .menu-list .menu-list-item .sub-menu-open .sub-menu-item li a.menum-active { background-image:url("../images/bullet-menu-main.png"); background-position:left; background-repeat:no-repeat;   }*/

.main-menu-item-rs { display: none;}

/*..........................*/

/*.......SUBMENU.........*/

.pages-submenu ul {
	list-style-type: none;
	margin: 25px 0 25px 0;
	text-align: center;
}

.pages-submenu ul span {
	color: #ff1e0a;
	font-size: 16px;
	font-weight: 600;
}


.pages-submenu ul li {
	display: inline;
	text-align: center;
}

.pages-submenu ul li a {
	color: #ff1e0a;
	font-size: 16px;
	font-weight: 600;
  	text-align: center;
	padding: 0 8px 0 8px;
  	text-decoration: none;
}

.pages-submenu ul li a:hover {
  	text-decoration: underline;
}

/*.......END SUBMENU.........*/

.d-inline-block {
    display: inline-block!important;
}

/*Box Filosofía */

.d-table-cell {
    display: table-cell!important;
}

/* feature box style 1 */
.feature-box-1 {display: table}
.feature-box-1 .char-value {display: table-cell; vertical-align: middle}


.separator-line-horizontal-medium-light3 {
    width: 18%;
    height: 1px;
}

/*..................*/

.submenu-padding {
    display: block;
    padding: .1rem 1rem !important;
}

.slider-zoom-slide .swiper-slide.swiper-slide-active .slider-zoom-content { opacity: 0.85;}

.bg-footer { background-color: #666666;}
.border-bottom-gray { border-bottom: 1px solid #cccccc; }
.footer-dark ul li { padding-bottom: 1px; }

/*...........CUSTOM FONT SIZES.............*/

.title-slider-home { font-size: 75px; line-height:80px; }
.subtitle-slider-home { font-size: 30px; line-height:50px; }
.title-novedades-home { font-size: 33px; line-height:39px; }
.title-novedades { font-size: 33px; line-height:42px; }
.text-slider-home { font-size:20px; line-height:27px; }
.text-productos-home a { font-size:19px; line-height:25px; font-weight: 700; color: #FFFFFF; }
.text-counter-home { font-size: 50px; font-weight: 700; }
.text-desc-counter-home { font-size: 16px; line-height: 21px; font-weight: 500; }
.text-submenu { font-size:15px; line-height:21px; }
.title-amenidades-vayven { font-size: 28px; line-height: 35px; }
.text-amenidades-vayven { font-size:16px; line-height:23px; }
.title-pages { font-size: 41px; line-height: 46px; font-weight: 800; }
.title-pages-medium { font-size: 38px; line-height: 43px; font-weight: 800; }
.main-subtitle-pages { font-size: 37px; line-height: 42px; font-weight: 700; }
.text-filosofia { font-size: 23px; line-height:31px; }
.red-big-number { font-size: 45px; font-weight: 700; color:#FF1E0A;}
.title-lubricantes { font-size:14px; line-height:20px; }
.title-slider-valor { font-size: 29px; line-height: 33px; }
.text-slider-industria { font-size: 23px; line-height:29px; }
.text-cs-15 { font-size: 15px; line-height:23px; }
.text-cs-17 { font-size: 17px; line-height:25px; }
.text-cs-18 { font-size: 18px; line-height:28px; }
.title-cs-26 { font-size: 26px; line-height:33px; }
.title-cs-28 { font-size: 28px; line-height:34px; }
.title-cs-30 { font-size: 30px; line-height:39px; }
.title-cs-32 { font-size: 32px; line-height:40px; }
.title-cs-35 { font-size: 35px; line-height:45px; }

/*...LISTAS ENUMERADAS CON COUNTER.....*/

div.list {
  counter-reset: list-number;
}
/** Note that we can use counter-increment in :before psuedo element **/
div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#ff1e0a;
  border-radius:50%;
  color:#fff;
  font-weight: 700;
}

/*...ESTILO DE LISTAS SENCILLA...*/

ul.list-default { 
	list-style:none;
	list-style-type:none;
	list-style-position: outside;
	margin: 8px 0 12px 5px;
	}

ul.list-default li {
	background:url("../images/bullet-list.png") no-repeat left top;
	list-style-type: none;
	padding:0 14px 12px 16px;
	text-align:left;
	text-decoration:none;
}

.voltex-faqs-label { background-color: #ff1e09; display: inline-block; vertical-align: middle; padding: 3px 11px; font-size: 16px; font-weight: 600; line-height: 24px; color: #fff; text-transform: uppercase; margin-left: 0px; border-radius: 1px; margin-bottom: 12px; }

/*...LABELS DE LUBRICANTES.....*/

.lubricantes-label-standard { background-color: #ff1e09; display: inline-block; vertical-align: middle; padding: 2px 9px; font-size: 14px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; margin-left: 10px; border-radius: 1px; }
.lubricantes-label-premium { background-color: #26569e; display: inline-block; vertical-align: middle; padding: 2px 9px; font-size: 14px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; margin-left: 10px; border-radius: 1px; }
.lubricantes-label-sintetica { background-color: #01833d; display: inline-block; vertical-align: middle; padding: 2px 9px; font-size: 14px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; margin-left: 10px; border-radius: 1px; }
.lubricantes-label-transmisiones { background-color: #cc9d1a; display: inline-block; vertical-align: middle; padding: 2px 9px; font-size: 14px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; margin-left: 10px; border-radius: 1px; }

.label-como-ser-socio { background-color: #ff1e09; display: inline-block; vertical-align: middle; padding: 12px 12px; font-size: 16px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; border-radius: 1px; }

.lubricantes-rec-title { background-color: #ff1e09; display: inline-block; vertical-align: middle; padding: 2px 9px; font-size: 15px; font-weight: 600; line-height: 20px; color: #fff; text-transform: uppercase; border-radius: 8px; }

/*...MOSTRAR MÁS EN LUBRICANTES.....*/

#mostrarmas-automotriz {
    display: none;
}

#mostrarmas-automotriz:target {
    display: block;
}

#mostrarmas-automotriz + ul.controls {
    list-style-type: none;
}

#mostrarmas-automotriz + ul.controls .hide,
#mostrarmas-automotriz:target + ul.controls .show {
    display: none;
}

#mostrarmas-automotriz:target + ul.controls .hide,
#mostrarmas-automotriz + ul.controls .show {
    display: inline-block;
}

#mostrarmas-industria {
    display: none;
}

#mostrarmas-industria:target {
    display: block;
}

#mostrarmas-industria + ul.controls {
    list-style-type: none;
}

#mostrarmas-industria + ul.controls .hide,
#mostrarmas-industria:target + ul.controls .show {
    display: none;
}

#mostrarmas-industria:target + ul.controls .hide,
#mostrarmas-industria + ul.controls .show {
    display: inline-block;
}


/*.......................................*/

/*...........CSS GOOGLE MAPS............*/

.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:600px; /* your iframe height */
   top:600px;  /* your iframe height */
   margin-top:-600px;  /* your iframe height */
}

/*........TABLA UBICACIONES..............*/

table {
	width: 100%;
	background-color: #f2f2f2;
	border: 1px solid #ccc;
}

table th, td {
	border: 1px solid #ccc;
}

table th {
	text-align: center;
}
/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "First Name"; }
		td:nth-of-type(2):before { content: "Last Name"; }
		td:nth-of-type(3):before { content: "Job Title"; }
		td:nth-of-type(4):before { content: "Favorite Color"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
	}

/*........CUSTOM RESPONSIVE..............*/

@media (max-width: 1280px) {

	.title-small { font-size: 37px; line-height: 42px; }
	.title-pages-medium { font-size: 30px; line-height: 35px; }
	.space-acexperto { height: 23px;}
	.title-friend-rotate { font-size: 28px; line-height:25px !important; }
	.banner-cnt-qs { display: none;}
	.banner-cnt-mr { display: block;}
	
}

@media (max-width: 1350px) {
	
	.title-slider-home { font-size: 70px; line-height:72px; padding-left: 90px;}
	.text-slider-home { font-size:19px; line-height:25px; padding-left: 90px;}
	.btn-slider-home {padding-left: 90px;}
	.title-novedades { font-size: 28px; line-height:35px; }
	
	.header-menu-top ul li a {
	font-size: 13px;
}
    
}

@media screen and (max-width: 991px) {
	
	.container-menu-top { display: none;}
	
	.title-slider-home { font-size: 67px; line-height:70px; text-align: center; padding-left: 0; }
	.text-slider-home { font-size:25px; line-height:30px; text-align: center; padding-left: 0; }
	
	.text-extra-large { font-size: 23px !important; line-height: 32px;}
	
    .side-menu-header.mobile-top-space {
        background-color: transparent;
        padding-left: 0;
    }

    .side-menu-header {
        border-bottom: 0 !important;
    }

    .hide-mainmenu {
        display: none;
    }

    body {
        padding-top: 0 !important;
    }
	
	.side-menu-header {
	  top: 50px !important;
	}
	
	
	.menu-top-rs {
		display: block;
		height: 40px;
		background-color: #ff1e09;
		text-align: right;
	}
	
	.rs-bg-color {
		background-color: #ff1e09;
	}

	.menu-top-rs ul {
		list-style-type: none;
		margin: 0;
	}

	.menu-top-rs ul {
		margin: 0 10px 0 0 !important;
		padding: 5px 0 0 0;
	}

	.menu-top-rs ul span {
		color: #ffffff;
		font-size: 13px;
		font-weight: 400;
	}


	.menu-top-rs ul li {
		display: inline;
	}

	.menu-top-rs ul li a {
		color: #ffffff;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		padding: 12px 10px 12px 10px;
		text-decoration: none;
	}

	.menu-top-rs ul li a:hover {
		text-decoration: underline;
	}
		
}

@media screen and (max-width: 575px) {
	
	.text-cs-18 { font-size: 16px; line-height:25px; }
	.text-subtitle { font-size:16px; line-height:25px; }
	.title-pages { font-size: 36px; line-height: 42px; font-weight: 800; }
	.title-pages-medium { font-size: 33px; line-height: 40px; }
	.title-amenidades-vayven { font-size: 25px; line-height: 30px; }
	.text-amenidades-vayven { font-size:15px; line-height:17px; }
	.text-slider-industria { font-size: 20px; line-height:25px; }
	.title-cs-35 { font-size: 32px; line-height:40px; }
	.title-cs-30 { font-size: 27px; line-height:34px; }
	.title-cs-32 { font-size: 27px; line-height:33px; }
	.text-productos-home a { font-size:16px; line-height:25px; font-weight: 700; color: #FFFFFF; }
	.title-novedades-home { font-size: 28px; line-height:32px; }
	.title-novedades { font-size: 28px; line-height:33px; }
	
	.btn.btn-large { font-size:14px; padding: 10px 22px;}
	
	.rs-display-block { display: block;}
	.rs-no-display { display: none;}

	.main-menu-item-rs { display: block;}
	
	.banner-cnt { display: none;}
	.banner-cnt-mr { display: none;}
	.banner-cnt-rs { display: block;}
	.marca-pawa-box {display: none;}
	.marca-pawa-box-rs {display: block;}
	
	.container-menu-top { display: none;}
	
	.rsp-align-center { text-align: center;}
	
	.title-slider-home { font-size: 37px; line-height:42px; text-align: center; }
	.text-slider-home { font-size:16px; line-height:24px; text-align: center; }	
	
	.home-slider { display: none; }
	.home-slider-rs { display: block; }
	.btn.btn-slider { font-size:15px; padding: 5px 20px; background-color: #ffffff; color: #666666;}
	
	.box-promo-rs { display: block;}
	.box-promo-d { display: none;}
	
	.submenu-section { margin-top: -50px; padding-top: 15px; overflow: visible; }
	
	.sm-text-justify { text-align: justify !important; }


	.pages-submenu ul {
		margin: 15px 0 10px 0;
	}
	
	.pages-submenu ul li {
		display: block;
		text-align: left;
	}

	.pages-submenu ul li a {
		display: block;
		border-bottom: 1px dotted #B3B3B3;
		text-align: left;
		padding: 5px 8px 5px 8px;
		text-decoration: none;
	}
	
	.pages-submenu ul span {
		display: none;
	}
	
	.sm-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.btn.btn-medium-pd { padding: 13px 15px 13px 15px; font-size: 13px;}

	
}



@media screen and (max-width: 375px) {
	
	.box-promo-rs { display: block;}
	.box-promo-d { display: none;}
	.title-novedades { font-size: 24px; line-height:32px; }
	.title-extra-medium { font-size: 30px; line-height: 40px; }
	
	.marca-pawa-box {display: none;}
	.marca-pawa-box-rs {display: block;}
	
	.btn-slider-promo { font-size:17px!important; padding: 3px 15px;}
.btn-slider-promo:hover, .btn-slider-promo:focus { background: #f6da00; border-color: #f6da00; color: #ff1e0a; }
	
	.wrapper-promociones { background-color: #000; padding-top: -200px!important; clear: both;}
	
	.float{
	right:20px;
	bottom:20px;
}
	
}








