/* 
Theme Name: Transportes ochoa
Template Theme URI: https://pimpart.net/
Author: El equipo de PIMPart
Description: Plantilla desarrollada por el equipo de PIMPart peru para Transportes ochoa
Version: 1.0
*/
/*ajustes iniciales*/
*{font-family: 'Muli', sans-serif;}
h1, h2, h3, h4, h5, h6, a, p{font-family: 'Muli', sans-serif;}
a{text-decoration:none;color:rgb(45, 95, 245);}
.columnas{display: flex; flex-direction: column;}
.filas{display: flex; flex-direction: row;}
.wrap{flex-wrap: wrap;}
.justifycenter{justify-content: center;}
.alignitem{align-items: center;}
.aligncontent{align-content: center;}
.marginauto{margin: auto;}
.arriba{margin-bottom: auto;}
.abajo{margin-top: auto;}
.derecha{margin-left: auto;}
.izquierda{margin-right: auto;}
.textocentro{text-align: center;}
.textojustificado{text-align: justify;}
.padding0{padding: 0px;}
.textoblanco{color:white;}
.textonegro{color:black;}
.fondoblanco{background-color: white;}
.fondonegro{background-color: black;}
.displaynone{display:none;}
.ancho100{width: 100%;}
.ancho95{width: 94.999%;}
.ancho90{width: 89.999%;}
.ancho85{width: 84.999%;}
.ancho80{width: 79.999%;}
.ancho75{width: 74.999%;}
.ancho70{width: 69.999%;}
.ancho65{width: 64.999%;}
.ancho60{width: 59.999%;}
.ancho55{width: 54.999%;}
.ancho50{width: 49.999%;}
.ancho45{width: 44.999%;}
.ancho40{width: 39.999%;}
.ancho35{width: 34.999%;}
.ancho30{width: 29.999%;}
.ancho25{width: 24.999%;}
.ancho20{width: 19.999%;}
.ancho15{width: 14.999%;}
.ancho10{width: 9.999%;}
.ancho5{width: 4.999%;}
.alto100{height: 100%;}
.padding20{padding: 20px 0px;}
.padding10{padding: 10px 0px;}
.padding30{padding: 30px 0px;}
.padding40{padding: 40px 0px;}
.padding50{padding: 50px 0px;}
.padding60{padding: 60px 0px;}
.padding70{padding: 70px 0px;}
.padding80{padding: 80px 0px;}
.padding90{padding: 90px 0px;}
.padding100{padding: 100px 0px;}
.sinlista{list-style: none;padding:0px;}
.margin0{margin:0px;}
.cursor{cursor: pointer;}
.spacebetween{justify-content: space-between;}
.fondofixed{background-attachment: fixed;}
.sindesbordex{overflow-x: hidden;}
.sindesbordey{overflow-y: hidden;}
.positionabsolute{position:absolute;}
.positionfixed{position:fixed;}
.positionrelative{position:relative;}
.letterspacing05{letter-spacing: 0.5px;}
.letterspacing1{letter-spacing: 1px;}
.letterspacing2{letter-spacing: 2px;}
.margin3{margin:3%;}
.mayusculas{text-transform: uppercase;}
.minusculas{text-transform: lowercase;}
.hover1:hover{filter: opacity(0.7);transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover2:hover{letter-spacing: 1px;transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover3:hover{filter: blur(2px);transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover4:hover{filter: brightness(0.9);transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover5:hover{color:rgba(170,172,0,1.00);border-color:rgba(170,172,0,1.00);letter-spacing: 1px;transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover6:hover{transform: scale(1.1);transition-duration: 0.3s;transition-timing-function: ease-out;}
.hover1{transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover2{transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover3{transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover4{transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover5{transition-duration: 0.2s;transition-timing-function: ease-out;}
.hover6{transition-duration: 0.3s;transition-timing-function: ease-out;}
.boton1{width: 180px;height: 40px;color: yellow;border: solid;border-color: yellow;display: flex;justify-content: center;align-items: center;border-radius: 15px;}
.boton2{width: 180px;height: 40px;color: white;display: flex;justify-content: center;align-items: center;background-color: rgba(50,50,50,1.00);text-transform: uppercase;font-size: 14px;}
.fondorojo{background-color:rgba(165,67,0,1);}
.fondoplomo{background-color: rgba(228,228,228,1.00);}
.textogris{color: #202834;}
.textorojo{color: rgba(165,67,0,1);}
.textosombra{text-shadow: 2px 2px 10px rgba(0,0,0,0.75);}
/*fin de ajustes iniciales*/
/*menu*/
#totalmenu{
	z-index:1000;
	height: 100px;
	max-height: 100px;
}
#totalmenu h1{
	margin-top: auto;
	margin-bottom: auto;
}
.main-nav ul{
	list-style: none;
	display: flex;
	flex-direction: row;
	padding: 0px;
}
.main-nav ul li {
	width: 100px;
	text-align: center;
}
.main-nav{
	margin: auto 0px;
	padding: 0px;
}
.main-nav ul li a{
	color: white;
	text-shadow: 1px 1px 3px rgba(0,0,0,1);
}
.main-nav ul li a:hover{
	letter-spacing: 1px;
	cursor: pointer;
	
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	color:yellow;
}

.main-nav ul li:hover,.main-nav h1:hover {
	transform: scale(1.2);
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.main-nav ul li,.main-nav h1 {
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#menu-menu-principal{
	display: flex;
	flex-wrap: wrap;
}
#totalmenu2{
	display:none;
}
.custom-logo:hover{transform: scale(1.1)!important;transition-duration: 0.3s;transition-timing-function: ease-out;}
.custom-logo{transition-duration: 0.3s;transition-timing-function: ease-out;}
/*fin menu*/
/*slider*/
.textoslide{
	height: 100%;
}
.textoslide h1{
	font-size:65px;
	margin-bottom: 0px;
}
.textoslide p{
	font-size: 25px;
}
.slider{
	max-height: 700px;
	overflow: hidden;
}
/*fin slider*/
/*Fondo slider*/
.fondoslider{
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/*Fin slider*/
/*seccion video*/
.areavideo{
	height:100%;
	min-height: 300px;
}
.seccion1{
	background-color: rgb(17,41,116);
}.seccion1 h2{
	font-size:40px;	 
}
.seccion1 p {
	font-size: 15px;
}
/*fin seccion video*/
/* menu categorias*/
#menucategoria{
	list-style: none;
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	min-height: 120px;
	padding-left: 0px;
}
#menucategoria li{
	width: 20%;
	min-width: 200px;
	height: 100%;
	min-height:110px;
	position: relative;
	display: flex;
	border-left: solid 0.5px rgba(32,40,52,0.3);
	margin-bottom: 10px;
}
#menucategoria li a{
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 23px;
	font-weight: 600;
}
#menucategoria li a img{
	margin: auto;
	margin-bottom: 0px;
	width: 50px;
	height: auto;
	display: flex;
	flex-direction: column;
}
#menucategoria li:hover{
	transform: scale(1.1);
	font-weight: bold;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#menucategoria li{
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.imgcat{
	width:150px;
	height: 150px;
}
.titulosfront{
	font-size: 45px;
}
/*fin menu categorias*/
/*repartidor*/
#zonarepartidor{
	height:500px;
}
#zonarepartidor div{
	width: 100%;
	height: 100%
}
#repartidor{
	z-index: 10;
	position: relative;
	width: 85%;
	height: auto;
	animation-name: movimiento;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	top:0px;

}
#carretera{
	animation-name: movimiento2;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;

}
/*fin repartidor*/
/*menu footer*/
#menufooter a:hover{
	letter-spacing:0.8px;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#menufooter a{
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#menufooter li{
	margin-top: 5px;
	margin-bottom: 5px;
}
/**/
/*boton subir*/
.botonsubir{
	width: 60px;
	height:60px;
	background-color:rgb(17,41,116);
	display:none;
}
#botonsubir{
	z-index:80;
	left: 20px;
	bottom:20px;
	overflow: hidden;
	border-radius: 10px;
	filter: opacity(0.75);
	box-shadow: 2px 2px 15px rgba(0,0,0,0.3);
}
#botonsubir img{
	width:80%;
	height: 80%;
	margin: 5px;
}
/*fin boton subir*/















/*Animaciones*/

@keyframes aparecer{
	from{filter: opacity(0)}
	to{ filter: opacity(1)}
}
@keyframes agrandar{
	from{transform: scale(1);}
	to{transform: scale(1.1);}
}
@keyframes example{
	from{transform:scale(1);position:block;background-color: transparent;}
	to{transform:scale(0.85);position:fixed;background-color: rgba(0,0,0,0.5);top:0;box-shadow: 0px -10px 0px rgba(255,255,0,0.8);}
}
@keyframes example2{
	from{transform:scale(0.85);position:fixed;height:55px;}
	to{transform:scale(1);position:block;}
}
@keyframes movimiento{
	from{transform: scale(1);top:0%;}
	to{transform: scale(1);top: -60%;}
}
@keyframes movimiento2{
	from{left: 0px;filter: contrast(0.7);}
	to{left: -50%;filter: contrast(1);}
}
/*Fin animaciones*/
/**/
.price_slider_amount button, .woocommerce-product-search button{
	cursor:pointer;
	border:none;
	color:white;
	background-color: rgba(166,124,82,1.00);
	padding: 5px;
}
.price_slider_amount button:hover , .woocommerce-product-search button:hover{
	animation-name: agrandar;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}
/**/
/* arreglos woocommerce frente*/
.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product{
	text-align: center;
}
.tituloscursos{
	margin: 20px 0px;
}
/*fin woocommerce front*/
/*woocommerce interno*/
.woocommerce div.product{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.woocommerce div.product div.summary{
	margin-left: 10px;
}
#coupon_code{
	min-width: 120px;
}
/**/
/*bannergeneral*/
.bannergeneral{
	background-image: url(https://transporteochoa.com.pe/wp-content/themes/ochoa/imagenes/bannergeneral.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.bannergeneral2{
	background-image: url(https://transporteochoa.com.pe/wp-content/themes/ochoa/imagenes/bannergeneral2.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.bannergeneral3{
	background-image: url(https://transporteochoa.com.pe/wp-content/themes/ochoa/imagenes/bannergeneral3.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.bannergeneral4{
	background-image: url(https://transporteochoa.com.pe/wp-content/themes/ochoa/imagenes/bannergeneral4.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.bannergeneral5{
	background-image: url(https://transporteochoa.com.pe/wp-content/themes/ochoa/imagenes/bannergeneral5.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.bannergeneral h1{
	font-size: 45px;
}
/*fin banner general*/
/*widgets del sidebar*/
.widget ul{list-style:none;}
.widget a:hover{
	letter-spacing:0.5px;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.widget a {
	font-size: 15px;
}
/*efectos de aparicion*/
.textoslide{
	filter: opacity(0);
}
.slides-container img{
	filter: opacity(0);
}
/**/
/*fin sidebar*/
/*area de coments*/
.comment-form-comment{
	display: flex;
	flex-direction: column;
}
.commentlist, .comment-respond{
	zoom:0.8;
}
/*fin sidebar*/
/*arreglos woocommerce color*/
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
	background-color: rgba(148,0,2,1.00) !important;
}
.woocommerce ul.products li.product a img:hover{
	filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.4)) brightness(1.3);
	transform: scale(1.05);
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.woocommerce span.onsale{
	background-color:  rgba(255,240,0,1.00) !important;
	color:  rgba(148,0,2,1.00) !important;
	text-transform: uppercase;
	font-style: italic;
	font-size: 0.857em !important;
	min-height: 4.236em !important;
	line-height: 4.236 !important;
}
.pswp__bg{
	background: rgba(0,0,0,0.85) !important;
}
/*fin arreglos de color woocommerce*/
/*--------------------RESPONSIVE---------------------------*/
@media (max-width:1000px){
	.ancho100{width: 100%;}
	.ancho95{width: 100%;}
	.ancho90{width: 100%;}
	.ancho85{width: 100%;}
	.ancho80{width: 100%;}
	.ancho75{width: 100%;}
	.ancho70{width: 100%;}
	.ancho65{width: 100%;}
	.ancho60{width: 100%;}
	.ancho55{width: 100%;}
	.ancho50{width: 100%;}
	.ancho45{width: 100%;}
	.ancho40{width: 100%;}
	.ancho35{width: 100%;}
	.ancho30{width: 100%;}
	.ancho25{width: 100%;}
	.ancho20{width: 100%;}
	.ancho15{width: 100%;}
	.ancho10{width: 100%;}
	.ancho5{width: 100%;}
	.interiorresponsive{
	width: 90%;
	}
	.marginresponsive{
		margin-left: auto;
	}
	.justifyresponsive{justify-content: center;}
	.alignitemresponsive{align-items: center;}
	.aligncontentresponsive{ align-content: center;}
	}
/*menu responsive*/
#btn-menu{
	display: none;
}
#menuresponsive{
	display:none;
}
.imgresponsive{
	display: none;
}
@media (max-width:750px){
	.textoslide h1{
		font-size: 1.5em;
	}
	#menuresponsive{
	display:flex;
}
	#menuocultar{
		position: absolute;
		background: rgba(0,0,0,0.5);
		width: 100%;
		margin-right:0px;
		margin-left: -115%;
		opacity: 1 !important;
		transform: none !important;
		transition: all 0.5s;
		margin-top: 0px;
		justify-content: center;
		z-index: 1100;
		padding: 0px;
}
	#menuocultar ul{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#menuocultar ul li{
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#btn-menu:checked ~ #menuocultar{
		margin-left:0%;
}
	.imgnormal{display: none;}
	.imgresponsive{display: block;}
}
/*fin menu responsive*/
/*menu categorias*/
#menucategoria li a{
	text-align: center;
	align-items: center;
	color: rgb(17,41,116);
}
#menucategoria li a svg{
	font-size: 2em;
	margin-top: 0.3em;
}
/*fin menu catgorias*/
#botonwhatsapp{
    background-color: rgb(0, 173, 116);
    bottom: 20px;
    font-size: 2.6em;
	position:fixed;
	color: white;
	text-align: center;
}
#botonwhatsapp{
    width: 68px;
    height: 70px;
    right: 20px;
    z-index: 100000;
    border-radius: 50%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#botonwhatsapp svg, #botonwhatsapp i{
	margin-top:12px;
}

/* Carrusel: una única imagen descargada por diapositiva. */
.slides-container picture { display: block; }
.slides-container picture > img { display: block; width: 100%; height: auto; }


/* Ajustes de ancho y legibilidad en móviles. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

footer a,
#menufooter a {
  color: #fff;
}

@media (max-width: 750px) {
  #totalmenu,
  #totalmenu2,
  #menuocultar,
  #menuocultar .menu,
  #menuocultar ul {
    width: 100%;
    max-width: 100%;
  }

  #totalmenu2 {
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  #menuresponsive {
    width: 100%;
    justify-content: center;
    padding: 12px 0;
  }

  #menuresponsive i { color: #fff !important; }

  #menuocultar {
    left: 0;
    right: 0;
    margin-left: -100%;
  }

  #menuocultar ul {
    margin: 0;
    padding-left: 0;
  }
}


/* En móviles el encabezado no debe reducirse ni dejar una franja al desplazarse. */
@media (max-width: 750px) {
  #totalmenu2 {
    animation-name: none !important;
    animation-duration: 0s !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
  }

  #menuocultar {
    margin-left: 0;
    transform: translateX(-100%) !important;
    visibility: hidden;
    pointer-events: none;
  }

  #btn-menu:checked ~ #menuocultar {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
  }

  .areavideo {
    height: 300px;
    min-height: 300px;
  }

  .areavideo > img {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover;
    object-position: left center;
  }
}