@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500;600;700;800&family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
    font-family: 'Nunito', sans-serif;
}
 html {
    scroll-behavior: smooth;
}
.impadding{
    padding: 20px;
}
.marginbotm{
    margin-bottom: 60px;
}

.marblog9{
    margin-top: 40px;
}
.marde9{
    padding-right: 40px;
}
.mariz9{
    padding-left: 40px;
}

a:focus, a:hover {
    color: #555555;
    text-decoration: none;
}

img{
	width: 100%;
}
.nosotrosmargen{
    margin-top: 120px;
}

.imgblog{
    width: 60%;
    margin-bottom: 40px;
    margin-top: 20px;
}

.paginator{
    margin-top: 30px;
    text-align: center;
}
.ttc{
    text-align: center;
}
#pagin a{
    color: black;
    text-decoration: none;
}
.paginator a{
    text-decoration: none;
    color: black;
}

.paginator{
    color: black;
}
.negrita-pag{
    background-color: #787A54;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
}

.negrita-pag-otros{
    color: rgba(50,50,50,1.00);
    margin: 0px 4px;
}



/* .....................FORMULARIO....................*/
.booking-form-box{
    max-width: 550px;
    margin: 0 auto;
    margin-top: 10px;
}
.input-grp2{
    width: 500px;
    display: inline-block;
}
.reserva{
    width: 100%;
    font-size: 14px!important;
    border: 1px solid #ced4da!important;
    box-shadow: none!important;
    border-radius: 0!important;
    background: rgba(255, 255, 255, 0.74);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: center;
    display: block;
    background: #787A54;
    border-radius: 20px;
    margin-top: 20px;
/*    border: 1px solid rgba(255, 255, 255, 1.0);*/
}
.reserva::hover{
    background: rgb(120, 122, 84)!important;
    color: #fff!important;
    transition: 0.5s;
}

.booking-form{
    padding: 0 20px 20px;
}
.booking-form label{
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: #1f1f1f;
}
input::placeholder{
    color: #9c9c9c !important;
}

.input-grp2 .form-control{
    width: 100%;
}

.form-group label{
    margin-top: -20px;
    color: #555555;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 12px;
}
.form-group label a{
    margin-top: -20px;
    color: #555555;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-decoration: underline;
}
.form-group{
    text-align: center;
    margin-top: 10px;
}
#emailHelp{ /*no vamos a compartir tu email con nadie small*/
    text-align: center;
    margin: 0 auto;
    clear: both;
    margin-top: 10px;
}


.pagination a {
    color: white;
/*    background-color: #555555;*/
    padding: 8px 16px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
/*    transition: background-color .3s;*/
}

.pagination a.active {
/*    background-color: #555555;*/
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #787A54;
    border-color: #787A54;
}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    z-index: 2;
    color: #1f1f1f;
    background-color: #eee;
    border-color: #ddd;
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #787A54;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-color: rgb(221, 221, 221);
    border-right-color: rgb(221, 221, 221);
    border-bottom-color: rgb(221, 221, 221);
    border-left-color: rgb(221, 221, 221);
}
/*quienes somos*/
.quien{
    padding-top: 40px;
    padding-left: 40px;
}

.quien0{
    padding-top: 0px;
    padding-right: 40px;
}

.quien1{
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
    color: #1f1f1f;
    letter-spacing: 1px;
    margin-bottom: 0px;
}

.quienh3{
    font-size: 25px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: #1f1f1f;
}

/* CARROUSEL */
.carousel{
    height: 100vh;
    position: relative;
}

.carousel, .item, .active{
    height: 100%;    
}

.carousel-inner{
    height: 100%;    
}

.img-area{
    width: 100%;
    height: 100%;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.carousel-inner .item:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(38, 38, 38, 0.8);
}

.carousel-caption{
    top: 30%;
    bottom: auto;
}
.carousel-caption h1{
    font-size: 35px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a09469;
}

.carousel-caption h2{
    font-size: 65px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
}
.carousel-caption p{
    font-size: 17px;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.carousel-caption .par1{
    font-size: 25px;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 11px;
}
.carousel-caption .par2{
    font-size: 14px;
    font-weight: 200;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.carousel-caption a{
    background: #787A54;
    color: #fff;
    padding: 10px 25px;
    font-size: 17px;
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
/*  text-transform: uppercase;*/
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    letter-spacing: 1px;
}

.carousel-caption a:hover{
    background: #78915D;
}


/* iconos */

.icon{
    width: 60px;
    height: 60px;
/*    background-color: rgba(159, 159, 128, 0);*/
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;   
}





.img99{
    width: 50%;
}

.altur{
  height: 120px;
} 
.altur1{
  height: 220px;
} 
.padentro{
    padding-left: 10px;
    padding-right: 10px;
}


.rojo{
    background-color: red;
}
.azul{
    background-color: blue;
}


.botonjuntos{
    overflow: auto;
    margin-top: 20px;
}  
.boton12{
    margin-top: 15px;
    padding: 5px 10px;
/*    margin-right: 8px;*/
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    color: #0a0a0a;
    background-color: #ebebeb;
}
.boton11{
    padding: 5px 10px;
    border: 0;
    float: right;
    border-radius: 15px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    color: #0a0a0a;
    background-color: #ebebeb;
}
.boton{
    padding: 5px 10px;
    border-radius: 15px;
    float: right;
    border: 0;
    background: #ebebeb;
    color: #0a0a0a;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}
.boton3{
    background: #787A54;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
/*  text-transform: uppercase;*/
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    letter-spacing: 1px;
    border: 0px;
}

.boton3:hover{
    text-decoration: none;
    background: #78915D;
    color: #fff;
}


/*  buscador rápido */
#search-box {
  -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
          transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: #ebebeb;
}
#search-box + label .search-icon {
  color: black;
}
#search-box:hover {
  color: white;
  background: #c8c8c8;
  box-shadow: 0 0 0 5px #3d4752;
}
#search-box:hover + label .search-icon {
  color: white;
}
#search-box:focus {
  -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
          transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  border: none;
  outline: none;
  box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 200px;
  border-radius: auto;
  background: #ebebeb;
  color: black;
}
#search-box:focus + label #search-icon {
  color: black;
}
#search-box:not(:focus) {
  text-indent: -5000px;
}

#search-submit {
	display:none;
}

.search-icon {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}
#form-bus-rap{
	position:absolute;
	top: 8px;
	left: 60px;
}




.over{
    overflow: auto;
}

.order{
    order: -1;
}
.ic{
    color: rgba(240, 248, 255, 0);
}
#redes .linh:hover{
    color: #555555;
}
.fottienda{
    width: 1000px;
}
.lineafina{
    border-bottom: 1px solid #555555;
    margin-bottom: 30px;
}

.categoria ul{
    text-decoration: none;
    list-style-type: none;
    color: black;
    font-size: 15px;
}
.f2 ul{
    text-decoration: none;
    list-style-type: none;
    color: black;
    font-size: 15px;
}
.categoria li,a{
    text-decoration: none;
    list-style-type: none;
    color: black;
    font-size: 15px;
}




.categoria a.active{
   color: #9b9b9b;
    font-weight: bold;
}





/*
.pro-txt{
    width: 100%;
    float: left;
}
*/

.marca1:hover{
    color: #555555;
}
.ficha {
    width: 45%;
    float: left;
    margin-left: 5%;
}
/*
.precio{
    width: 20%;
    float: right;
}
*/
.precio1 {
    font-size: 17px;
    color: #787A54;
    line-height: inherit;
    margin-top: -15px;
    text-align: left;
}
.precio12 {
    font-size: 20px;
    color: #555555;
    line-height: inherit;
/*    margin-top: 10px;*/
    text-align: left;
    float: left;
    width: 100%;
    font-weight: bold;
}
.f2 ul li {
    width: 11%;
    float: left;
    margin-right: 1%;
    padding: 10px 0px;
    font-size: 20px;
}

.f2 ul li a.active{
   color: #9b9b9b;
    font-weight: bold;
}
.f2 ul li a:hover{
   color: #9b9b9b;
    font-weight: bold;
}
.psize{
    font-family: 'Nunito', sans-serif;
	font-size: 18px;		
	color: black;
    margin-bottom: 20px;
    font-weight: 200;
    border-bottom: 1px solid rgba(85, 85, 85, 0.57);
    border-top: 1px solid rgba(85, 85, 85, 0.57);
    padding-top: 10px;
    padding-bottom: 10px;
}
.marca {
    font-size: 25px;
    line-height: inherit;
    font-weight: bold;
    margin-bottom: -15px;
    color: black;
    text-align: left;
}
.modelo {
    font-size: 18px;
    line-height: inherit;
    color: black;
    font-weight: normal;
    margin-bottom: 5px;
}

.marca1 {
    font-size: 17px;
    margin-top: 10px;
    line-height: inherit;
/*    font-weight: bold;*/
    margin-bottom: -0.1%;
    color: black;
}
.modelo1 {
    font-size: 15px;
    line-height: inherit;
/*    color: black;*/
    font-weight: normal;
    margin-top: 0px;
}

.ruta a{
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #1f1f1f;
}
.ruta{
    margin-bottom: 20px;
}
.f1, .f2, .f3, .f4 {
    margin-bottom: 30px;
    overflow: auto;
}

.ficha-neopreno img{
    width: 40%;
    float: left;
}
#related .col-25 {
    width: 49.7%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}
#related .productosrela {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #787A54;
    font-family: 'Nunito', sans-serif;
	font-size: 20px;		
	color: #787A54;
    margin-top: 30px;
    text-align: center;

}
#form2 {
    margin-top: 20px;
    clear: both;
    margin-bottom: 20px;
    overflow: auto;
}

#form2 select {
    margin-top: 4px;
    display: block;
    margin-right: 20px;
    width: 65px;
    border: 1px solid #d1d1d1;
    float: left;
    height: 45px;
    font-size: 18px;
    color: gray;
}

#formulario fieldset {
    border: 0px;
}

#formulario legend {
    display: none;
}

#formulario input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
#formulario label {
   font-size: 15px;
}
#formulario textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 120px;
}

#formulario input.botonEnviar {
    width: 100px;
}

#formulario .sin-width {
    width: 20px;
}

.info{
    padding: 5px;
    background-color: #787A54;
    color: #1f1f1f;
    margin-bottom: 20px;
}
.verde{
    color: #787A54;
}
.opiniones{
/*  border: 1px solid #787A54;  */
    background-color: #f0f0f0;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    line-height: 10px;
    padding-top: 15px;
}


/*............galeria tienda.............*/

.container11{
  position: relative;
  width: 100%;
}
.container11:hover {
  opacity: 0.6;
}


.containerimaghover{
  position: relative;
  width: 100%;
}
.containerimaghover:hover .overlayimaghover {
  opacity: 1;
}
.imaghover{
    display: block;
    width: 100%;
    height: auto;
}
.overlayimaghover{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #040707;
}

.textimaghover {
  color: white;
    font-family: 'Nunito', sans-serif;
    
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.texalq1{
    padding-left: 30px;
}
.texalq2{
    padding-right: 30px;
}

.texalq3{
    margin-left: 30px;
}
.texalq4{
    padding-right: 30px;
}


.logo{
	width: 170px;}
.ic{
	width: 20px;
    height:20px;
    margin-right: 10px;
    margin-bottom: 8px;
}
.ic1{
	width: 20px;
    height:20px;
}

.ic12{
	width: 20px;
    height:20px;
    margin-left: 5%;
}

/*............video.............*/

.banner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    background-image: url(imagenes/keko.jpg);
    justify-content: center;
    align-items: center;
}

.banner .content{
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.banner .content h1{
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    animation: Slide_Up 1s ease;

}

.banner .content p{
    font-size: 1.5em;
    color: #fff;
    line-height: 30px;
    margin-bottom: 30px;
    animation: Slide_Up 1.2s ease;

}

.banner .boton1{
    animation: Slide_Up 1.4s ease;
}

.marbot{
	margin-bottom: 0.7%;
}
/*............video.............*/


/*...........animacion.......*/
@keyframes Slide_Up{
    0%{
        transform: translateY(250px);
    }
    100%{
        transform: translateY(0)
    }
    
}


/*
.backgro{
     background-color: black;
    opacity: 0.8;
}
*/
.logob{
	width: 120px;
}
.pat{
	width: 120%;
}
.icono{
	width: 30px;
    margin-top: 20px;
}
.mxw{
    max-width: 1300px;
    margin: 0px auto;
}
.ocultar{
	display: none;
}
.gale{
    padding: 20px;
}
.gale1{
    padding-left: 20px;
}

.clear{
    clear: both;
}

.izq{
    float: left;
}
.izqu{
    float: left;
}

.der{
    float: right;
}

.marlef{
    margin-left: 4%;
}
.marbot1{
	margin-bottom: 30px;
}
.marbot200{
	margin-bottom: 60px;
    top: -40px;
}

.marbot2{
	margin-bottom: 20px;
}

.marbot{
	margin-bottom: 0.7%;
}

.pad1{
    padding-right: 0.35%;
}
.pad2{
    padding-right: 0.15%;
    padding-left: 0.15%;
}
.pad3{
    padding-left: 0.35%;
}
.martop{
	margin-top: 38px;
}
.martop1{
	margin-top: 110px;
}
.martop12{
	margin-top: 0px;
}

.rosa{
    background-color: pink;
}
.movilfoto{
    display: none;
}
.escrifoto{
    display:block;
}
.movfoto{
    display: none;
}
.escfoto{
    display:block;
}
.movfoto1{
    display: none;
}

.escfoto1{
    display:block;
}
.categolin{
    border-bottom: 2px solid #787A54;
    width: 95px;
    font-weight: bold;
    color: #787A54;
}
.hambur{
    display: none; /*ocultar imagen boton/hamburguesa*/
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 45px;
    height: 45px;
}


.fotot{
    width: 80%;
    height: 40%;
    overflow: hidden;
}
.div1:hover{
    width: 500px;
    height: 220px;
    padding: 5px;
    /*super importante porque sino no funciona la animación*/
    position: relative;
    left: -450px;
    animation-name: mover;
    animation-duration: 1s;
    
    animation-timing-function: linear;
    animation-iteration-count: 1; /*cuanto va a durar: infinito | sino pongo 1 vez y ya*/
    /*animation: mover 5s linear infinite;*/ /*si quiero ponerlo en abreviado*/
    
    animation-delay:0s; /*si quiero que se retrase la animación*/
    animation-fill-mode: forwards; /*como he puesto que se ejecute una vez, al final no quiero que desaparezca, y por eso pongo forwards*/
}

    @keyframes mover{ /*aqui  definimos los fotogramas de la primera: que empiece siendo un color y termina siendo otro color*/
        from{left: -450px;} /*sería -150px pero le pongo mas para que no este pegado al borde*/
        to{left: 100px;} /*posicion final*/
    }

.animacion2{
    display: inline-block;
    cursor: pointer;
}

.animacion2:hover{
    animation-name: bounce;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    z-index: 50;
    position: relative;
}
.animacion3:hover{
    animation-name: swing;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    z-index: 50;
    position: relative;
}

/* ......................... NAV ....................... */

nav {
	width:100%;
	height:auto;
    margin: 0 auto;
/*    background-color: #efb3b3;*/
}
nav ul {
	list-style-type: none;
    display: flex;
    justify-content: flex-start;
    margin-top: 17px;
    padding-top: 5px;
}

nav ul li a {
	display: block;
	padding: 5px 25px;
	font-size: 16px;
	color: #4b6948;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
	text-decoration: none;
}

.nav ul li a::after{
    content: '';
    width: 0;
    height: 5px;
    background: red;
    display: block;
/*    margin: auto;*/
    transition: .5s;
}

.nav ul li a:hover::after{
    width: 100%;
/*     margin-bottom: -80px;*/
}

.navfijo{
    position: fixed;
    top: 0px;
    width: 100%; /* si usamos position: fixed, siempre width: 100% | el alto del nav es el alto del contenido */
    z-index: 99; /*aplimiento: para que lo demás pase por debajo. todo el contenido esta en z-index:0, entonces podria poner z-index:1*/
    background-color: white;
box-shadow: 3px 4px 300px 2px rgba(0,0,0,0.10);
}

.hambur{
    display: none; /*ocultar imagen boton/hamburguesa*/
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 30px;
    width: 55px;
    height: 55px;
}
/* ......................... PADRE / HIJO ....................... */

.padre{
	position: relative;
}

.hijo{
	position: absolute;
	width: 100%;
	top: 52%;
	left: 8%;
}

.hijo5{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 10%;
}

.hijo1{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0%;
    font-size: 40px;
}

.hijo2{
	position: absolute;
	width: 100%;
	top: 70%;
	left: 15%;
}
.hijo3{
	position: absolute;
	width: 70%;
	top: 60%;
	left: 10%;
}

.hijo4{
	position: absolute;
	width: 100%;
	top: 20px;
	left: 20px;
}
.fotopor{
    width: 100%;
    height: 88%;
    overflow: hidden;
}


/* ......................... TEXTOS ....................... */


h3{
    font-size: 60px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 22px;
    color: white;
}
.titdos{
    font-size: 40px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 22px;
    color: #1f1f1f;
}
.tittres{
    font-size: 25px;
    font-weight: 800;
    font-family: 'Fira Sans', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 22px;
    color: #1f1f1f;
}

h4{
    font-family: 'Nunito', sans-serif;
	font-size: 24px;
    font-weight: 400;
	color: black;
    letter-spacing: 0px;
    margin-bottom: 8px;
/*    text-transform: uppercase; */
}
.iminsta{
    width: 14.28%;
}
.proofer{
    margin-top: 30px;
}
.proof1{
    margin-bottom: 12px;
}
.titgran{
    font-family: 'Nunito', sans-serif;
	font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
    margin-bottom: 8px;
/*    text-transform: uppercase; */
}
h5{
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
	color: #555555;
    letter-spacing: 0px;
    margin-bottom: 8px;
/*    text-transform: uppercase; */
    margin-bottom: 18px;
}

.pprecio{
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
	font-size: 15px;		
	color: white;
    text-align: center;
    letter-spacing: 2px; 
}
.ppreciocaja{
     background-color: #555555;
    height: 35px;
    width: 190px;
    padding: 10px;
}
.ppreciocaja2{
     background-color: #555555;
    height: 35px;
    width: 200px;
    padding: 10px;
}
.pmabotm{
    margin-bottom: 10px;
}
.pmabotm2{
    margin-bottom: 100px;
}
.pmabotm3{
    margin-bottom: 60px;
}

p{
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
    color: #1f1f1f;
    margin-bottom: 16px;
}

li{
	font-family: 'Nunito', sans-serif;
	font-size: 14px;		
	color: rgba(52,54,53,1.00);
    line-height: 22px; /* interlineado */ 
}
.pslide{
	font-family: 'Nunito', sans-serif;
    /*font-family: 'paul_slabregular-trail';*/
	font-size: 100px;		
	color: white;
    
    line-height: 92%;
    margin-bottom: 35px;
    letter-spacing: 2px;

}


.text{
    font-family: 'Nunito', sans-serif;
	font-size: 19px;		
	color: black;
    margin-bottom: 20px;
    width: 100%;
}

.medio{
	text-align: center;
}
.med{
    margin: 0px auto;
}
.negrita{    
    font-weight: bold;
}
.ptienda{
    font-family: 'Nunito', sans-serif;
	font-size: 28px;		
	color: black;
    text-align: center;
    background-color: white;
    width: 70%;
    padding-top:4%;
    padding-bottom: 4%;
    padding-left: 4%;
    padding-right: 4%;
        
}
.cono{
    margin-top: 150px;
    font-family: 'Nunito', sans-serif;
	font-size: 50px;		
	color: black;
    margin-bottom: 10px;
}


.line{
    border-bottom: 5px solid black;
    width: 200px;
    margin-bottom: 20px;
    margin-left: -4%;
    margin-top: 30px;
}
.line1{
    border-bottom: 5px solid black;
    width: 200px;
    margin-bottom: 20px;
    margin-left: -4%;
    margin-top: -10px;
}
.line2{
    border-bottom: 2px solid black;
    width: 454px;
    margin-bottom: 20px;
    margin-left: 32%;
    margin-top: 5px;
}


/* ......................... NAV TIENDA  ....................... */

.rotate {
    transform: rotate(180deg);
    padding-left: 10px;
}
#navv ul{
    height: 100%;
    width: 100%;
    list-style: none;
    display: block;
}

#navv ul li{
    line-height: 0px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
/*    background: red;*/

}

#navv ul li:last-child{
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#navv ul li a{
    position: relative;
    color: #1f1f1f;
    text-decoration: none;
    font-size: 16px;
    padding-left: 0px;
    font-weight: 300;
    display: block;
    width: 100%;
}
.pagi{
    margin-top: -43px;
}
#navv .vtod{
    color: black;
    font-weight: 500;
}

#navv ul li .descrip{
/*     background: red;*/
    margin-right: 10px;
}

#navv ul li.active a{
    color: #787A54;
/*    background: #1e1e1e;*/
    border-left-color: #787A54;
}

#navv ul ul{
    position: static;
    display: none;
}

#navv ul .flecha1-show.show1{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha2-show.show2{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha3-show.show3{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha4-show.show4{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha5-show.show5{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha6-show.show6{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha7-show.show7{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha8-show.show8{
    display: block;
    padding-left: 20px;
}
#navv ul .flecha9-show.show9{
    display: block;
    padding-left: 20px;
}
#navv ul .flecha10-show.show10{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha11-show.show11{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha12-show.show12{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha13-show.show13{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha14-show.show14{
    display: block;
    padding-left: 20px;
}

#navv ul .flecha15-show.show15{
    display: block;
    padding-left: 20px;
}

#navv ul li.active ul li a{
    color: #1f1f1f;
/*    background: white;*/
    border-left-color: transparent;
}


#navv ul ul li a:hover{
    color: #787A54!important;
    background: #fff!important;
}


.sidebar1 a{
    color: #1f1f1f;
    display: block;
    width: 100%;
    line-height: 26px;
    text-decoration: none;
    padding-left: 0px;
    box-sizing: border-box;
    transition: 0.5s;
    transition-property: background;
}

.sidebar1 a:hover{
    color: #787A54!important;
    background: #fff!important;
}


.sidebar1 i{
    padding-right: 10px;
}

label #sidebar_btn{
    z-index: 1;
    color: #fff;
    position: fixed;
    cursor: pointer;
    left: 300px;
    font-size: 20px;
    margin: 5px 0;
    transition: 0.5s;
    transition-property: color;
}

#check:checked ~ .sidebar1{
    left: -190px;
}

#check:checked ~ .sidebar1 a span{
    display: none;
}
#check:checked ~ .sidebar a span{
    display: none;
}


#check:checked ~ .sidebar1 a{
    font-size: 20px;
    margin-left: 170px;
    width: 80px;
}


#check:checked ~ .sidebar1 .holl{
   display: none;
}


.sidebar1{
/*    background: #2F323A;*/
    width: 30%;
/*    background: red;*/
    float: left;
    position: relative;
    margin-top: 0px;
    padding-top: 0px; 
/*    position: fixed;*/
/*    left: 0;*/
/*    width: 250px;*/
/*    height: 100%;*/
    transition: 0.5s;
    transition-property: left;
    
}

.containertienda{
    margin-bottom: 100px;
    overflow: auto;
}
.contcategoria{
    width: 30%;
    float: left;
}
.contproductos{
    width: 70%;
    float: left;
}
.col-33{
    width: 20%;
    display: inline-block;
    /*vertical-align: top;*/
    margin-left: 2%;
    margin-right: 2%;
}

.contproductos .producto {
/*    width: 42.5%;*/
    width: 23.5%;
    display: inline-block;
    vertical-align: top;
    padding: 0px 5px;
    margin-bottom: 40px;
}

/* ......................... FICHA PRODUCTO ....................... */
.wrapper{
    width: 100%;
    margin: 15px auto;  
}

.tabs ul{
    display: flex;
    background: #fbfbfb;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 10px;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: 100%;
}
.tabs ul li{
    width: 200px;
    padding: 10px;
    border-right: 1px solid #dddddd;
    text-align: center;
    font-size: 15px;
    color: #787A54;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    
}
.tabs ul li .text{
    font-size: 15px;
    color: #787A54;
}
.tabs ul li:last-child{
    border-right: 0px;
}

.tabs ul li .icon{
    font-size: 16px;
/*    vertical-align: middle;*/
}
.tabs ul li:before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #787A54;
    transition: all 0.2s ease;
    opacity: 0;
}

.tabs ul li:hover,
.tabs ul li.active{
    background: #f3f5ee;
    color: #78915D;
}



.tabs ul li:hover:before,
.tabs ul li.active:before{
    opacity: 1;
}
.wrapper .content{
    background: #fbfbfb;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
}

.tab_content p{
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
}
/* ......................... BOTONES ....................... */

a{text-decoration: none;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 27px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
  display: block;
}
#admin-modal{
    display: block;
    background-color: rgba (150,150,150,1.00);
    width: 100%;
    overflow: auto;
    padding: 20px;
    
}
/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0; 
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
} 


/* Full-width inputs */
input[type=text], input[type=password] {
  width: 90%;
  padding: 12px 20px;
  margin: 8px auto;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  color: #1f1f1f;
  background-color: #787A54;
  padding: 5px 10px;
  margin: 0 auto;
    text-align: center;
  border: none;
  cursor: pointer;
}

.login{
    width: 40%;
    height: 40px;
/*    display: block;*/
    margin: 0px auto;
    margin-top: 20px;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  width: auto;
  float: left;
  padding: 10px 18px;
  background-color: #aa5858;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 20%;
  border-radius: 30%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* ......................... FOOTER ....................... */

.footeruno{
	background-color: black;
	padding: 10px 0px 40px 0px;    
    margin-top: -5px;
    
}   

footer p{
    color: white;
    margin-bottom: 0px;
    line-height: 22px;
}
.footerdos{
    background: #787A54;
    padding: 5px 0px 5px 0px;    
}
.footerdos p{
    margin-top: 10px;
    color: #1f1f1f;
}
footer .logob{
    margin-top: 12px;
}
.mbom{
    margin-bottom: 10px;
}
.linh{
    line-height: 22px;;
}

.mt{
    padding-top: 22px;
}
.mm{
    background-color: rebeccapurple;
}
.margo{
    margin-top: 8%;
}
.mato1{
    margin-top: 10%;
}
.mato2{
    margin-top: 45px;
}

.mato3{
    margin-top: 22px;
}
.redes a:hover{
    color: #555555;
    text-decoration: none;
    
}
/* ......................... Estilos de GRID ....................... */
 
.fx{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}  
.fx-m{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}   
.fx-st{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}    

/*[class*="col-"]{
 
    padding: 5px;
}*/
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-51{width: 48.66%;}
.col-6{width: 50%;} 
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;} 
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;} 
    
.subir{
    margin-top: 40px;
    z-index: 10;
    position: relative; /*para que se ponga encima, es el padre, no hay hijos pero da igual*/
}
/* ......................................... ABOUT ......................................... */
/* ......................................... ABOUT ......................................... */
/* ......................................... ABOUT ......................................... */

/* .............................. RESPONSIVE MOVIL .............................. */


@media screen and (max-width:1600px){ /* ESTILOS PARA TABLET */

.modal-content {
  width: 68%;
}
    
input[type=text], input[type=password] {
  width: 80%;
}

} 

@media screen and (max-width:1420px){ /* ESTILOS PARA TABLET */
#form-bus-rap{
	left: 10px;
/*    background: red;*/
} 
  

}

@media screen and (max-width:1380px){ /* ESTILOS PARA TABLET */
.padlad{
    padding-left: 20px;
    padding-right: 20px;
}  
      .modal-content {
  width: 60%;
}
    
input[type=text], input[type=password] {
  width: 62%;
} 
}

@media screen and (max-width:1320px){ /* ESTILOS PARA TABLET */
#form-bus-rap{
	left: 200px;
/*    background: blue;*/
} 
  .modal-content {
  width: 60%;
}
    
input[type=text], input[type=password] {
  width: 62%;
}      
}





@media screen and (max-width:1280px){ /* ESTILOS PARA TABLET */
.col-t-1{width: 8.33%;}
.col-t-2{width: 16.66%;}
.col-t-3{width: 25%;}
.col-t-4{width: 33.33%;}
.col-t-5{width: 41.66%;}
.col-t-51{width: 48.66%;}
.col-t-6{width: 50%;} 
.col-t-7{width: 58.33%;}
.col-t-8{width: 66.66%;}
.col-t-9{width: 75%;} 
.col-t-10{width: 83.33%;}
.col-t-11{width: 91.66%;}
.col-t-12{width: 100%;}    
  
#related .col-25 {
    width: 42 .7%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    background: yellow;
} 
    
.martop12{
	margin-top: -20px;
}    
    

  .modal-content {
  width: 50%;
}
    
input[type=text], input[type=password] {
  width: 46%;
}     
    .login{
        display: block;
        margin-left: 0px;
    }
 .cono{
    margin-top: 150px;
	font-size: 50px;		
    margin-bottom: 10px;
}

.line{
    border-bottom: 5px solid black;
    width: 200px;
    margin-bottom: 20px;
    margin-left: -4%;
    margin-top: 30px;
}

.text{
	font-size: 18px;		
    margin-bottom: 20px;
}    
    
    
.mxw{
    max-width: 98%;
    margin: 0px auto;
}  
.martop1{
	margin-top: 100px;
}    
    
.porties{
    width: 100%;
    height: 300%;
}

.padlad{
    padding-left: 20px;
    padding-right: 20px;
}  
.fotopor{
    width: 100%;
    height: auto;
    overflow: hidden;
}  

    .mboton1{
        margin-bottom: 20px;
    }

    
.hijo{
	position: absolute;
	width: 700px;
	top: 56%;
	left: 8%;
} 

.pslide{
	font-size: 500%;		
}
.gale{
    padding: 10px;
}
.subir{
    margin-top: -70px;
    margin-left: 0px;
    margin-bottom: 10px;
}  
.ptienda{
    font-size: 24px;		
    width: 78%;
} 
.mbajo{
    margin-bottom: 25px;
}  
         
.hijo1{
	top: 40%;
	left: 0%;
}   
    
.altur01{
  height: 120px;
} 
.altur11{
  height: 240px;    
}   
.altur02{
  height: 120px;
} 
.altur12{
  height: 240px;
}  
.altur03{
  height: 120px;
} 
.altur13{
  height: 220px;
}  
.altur04{
  height: 120px;
} 
.altur14{
  height: 220px;
}     
    
}



@media screen and (max-width:1100px){ /* ESTILOS PARA TABLET */
  
.hijo1{
	top: 40%;
	left: 0%;
} 
.martop12{
	margin-top: 0px;
}        
#related .col-25 {
    width: 42.7%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    background: blue;
    margin: 0 auto;
} 
.altur01{
  height: 120px;
} 
.altur11{
  height: 240px;
    
}   
.altur02{
  height: 120px;
} 
.altur12{
  height: 240px;
}  
.altur03{
  height: 120px;
} 
.altur13{
  height: 240px;
}  
.altur04{
  height: 120px;
} 
.altur14{
  height: 240px;
}  
    
.hambur{       
    display: block;
    padding: 5px;
    /*margin: 0px auto; si quiero que aparezca en la mitad: */
}    
nav{
    width: 100%; /*no hace falta*/
    display: none; /*como la hamburguesa esta fuera del nav oculto todo el nav*/
}

nav ul{ 
    display: block;
    /*flex-direction: column;*/
    width: 100%;
}

nav ul li{
    display: block; /*le doy lo contrario de inline block*/
   /* margin: 0px auto;
    margin-bottom: 10px;*/
}
nav ul li a{
    text-align: center; /*centrar los textos*/
    color: rgba(0,0,0,1.00);
    width: 100%; /*no hace falta porque le he dado el ancho con padding*/
    /*margin-right: 0px;
    padding: 5px;*/
}   
    
.movilfoto{
    display: block;
}
.escrifoto{
    display: none;
}
     

.movfoto1{
    display: block;
}

.escfoto1{
    display:none;
}
   
.logo{
    margin-left: 250%;
}    
    .botonjuntos{
        position: absolute;
        left: 20px;
    }    

.fx-m{
    display: flex;
}
.marbo98{
    margin-bottom: 20px;
}    
.marlef{
    margin-left: 2%
}    

.col-tb-1{width: 8.33%;}
.col-tb-2{width: 16.66%;}
.col-tb-3{width: 25%;}
.col-tb-4{width: 33.33%;}
.col-tb-5{width: 41.66%;}
.col-tb-6{width: 50%;} 
.col-tb-7{width: 58.33%;}
.col-tb-8{width: 66.66%;}
.col-tb-9{width: 75%;} 
.col-tb-10{width: 83.33%;}
.col-tb-11{width: 91.66%;}
.col-tb-12{width: 100%;}       
    
}
@media screen and (max-width:1000px){ /* ESTILOS PARA TABLET */

.hijo{
	position: absolute;
	width: 700px;
	top: 55%;
	left: 8%;
/*    background-color: red;*/
}    
        .ocultara{
    display: none;
} 
  
.hijo1{
	top: 40%;
	left: 0%;
}    
.hijo1, .cono{
    font-size: 28px;
}
    
.padlad{
    padding-left: 20px;
    padding-right: 20px;
}   
    .martop2{
	margin-top: 82px;
}  
    
.line{
    border-bottom: 5px solid black;
    width: 200px;
    margin-bottom: 20px;
    margin-left: -4%;
    margin-top: 30px;
}
#form-bus-rap{
	position:absolute;
	top: 8px;
	left: 13px;
}

.text{
	font-size: 18px;		
    margin-bottom: 20px;
}    

.fl{
    display: block;
}   
   
.logo{
    margin-left: 230%;
}

   
.hijo2{
	position: absolute;
	width: 100%;
	top: 70%;
	left: 10%;
}   
    
.subir{
    margin-top: -110px;
    margin-left: 80px;
    margin-bottom: 20px;
}   
.h2{
	font-size: 20px;		
}   
.ptienda{
    font-size: 22px;		
    width: 78%;
} 
    .mbjo{
    margin-bottom: 12px;
}
        .banner .content h1{
    font-size: 3.2em;
    margin-bottom: 10px;
}

.banner .content p{
    font-size: 1.5em;
    line-height: 30px;
    margin-bottom: 20px;
}

    .altur01{
  height: 120px;
} 
.altur11{
  height: 280px;
    
}   
.altur02{
  height: 120px;
} 
.altur12{
  height: 280px;
}  
.altur03{
  height: 120px;
} 
.altur13{
  height: 320px;
}  
.altur04{
  height: 120px;
} 
.altur14{
  height: 320px;
} 
 
}

@media screen and (max-width:800px){ /* ESTILOS PARA TABLET */
.col-tt-1{width: 8.33%;}
.col-tt-2{width: 16.66%;}
.col-tt-3{width: 25%;}
.col-tt-4{width: 33.33%;}
.col-tt-5{width: 41.66%;}
.col-tt-6{width: 50%;} 
.col-tt-7{width: 58.33%;}
.col-tt-8{width: 66.66%;}
.col-tt-9{width: 75%;} 
.col-tt-10{width: 83.33%;}
.col-tt-11{width: 91.66%;}
.col-tt-12{width: 100%;}
    
.fx-m{
    display: flex;
}

  .tittres{
    font-size: 20px;
}


/*
 h3{
	font-size: 30px;		
    margin-bottom: 3px;
}
*/
    
/*
.textblanco{
	font-size: 17px;		
    margin-bottom: 10px;
}
*/
.m102{
    margin-top: 20px;
}    
.mt{
    padding-top: -900px;
}
.h2{
	font-size: 26px;	
   color: red;
}  
    .marca1 {
    font-size: 17px;
}
.modelo1 {
    font-size: 15px;
}
.precio1 {
    font-size: 17px;
}  
/*
.subir2{
    margin-top: -90px;
    margin-left: 20px;
    margin-bottom: 40px;
}  
*/
.hijo{
	position: absolute;
	width: 700px;
	top: 52%;
	left: 12%;
/*    background-color: pink;*/
}
   
.pslide{
	font-size: 380%;		
} 
 
.ptienda{
    font-size: 18px;		
    width: 78%;
}  

table{
width: 430px; 
}

.tab1{
    width: 400px;
}
.subir{
    margin-top: -10px;
    margin-left: 50px;
    margin-bottom: 10px;
}  
    

    
 .categoria li{
    border-bottom: 1px solid black;
}  
 .contcategoria{
    width: 100%;
    float: left;
}
.contproductos{
    width: 100%;
    float: left;
}
.sidebar1{
/*    background: #2F323A;*/
    width: 100%;
    float: left;   
}
.contproductos .producto {
    width: 49.5%;
    font-family: 'Nunito', sans-serif;
    padding: 0px 5px;
    margin-bottom: 40px;
}   

.altur01{
  height: 80px;
} 
.altur11{
  height: 300px;    
}   
.altur02{
  height: 80px;
} 
.altur12{
  height: 300px;
}  
.altur03{
  height: 80px;
} 
.altur13{
  height: 340px;
}  
.altur04{
  height: 80px;
} 
.altur14{
  height: 340px;
}     
   
.marde9 {
    padding-right: 0px;
}   
.mariz9 {
    padding-left: 0px;
}
.quien{
    padding-left: 0px;
}   
.quien0{
    padding-right: 0px;
}   
  .modal-content {
  width: 80%;
}
    
input[type=text], input[type=password] {
  width: 83%;
}   
     
    
}    


@media screen and (max-width:680px){ /* ESTILOS PARA MOVIL */
   .imgblog{
    width: 100%;
    margin-bottom: 30px;
    margin-top: 15px;
}  
.input-grp2{
    width: 380px;
    margin: 0 auto;
}    
.altur01{
  height: 80px;
}     
.altur11{
  height: 335px;    
}   
.altur02{
  height: 80px;
} 
.altur12{
  height: 335px;
}  
.altur03{
  height: 80px;
} 
.altur13{
  height: 360px;
}  
.altur04{
  height: 80px;
} 
.altur14{
  height: 360px;
}  
  .modal-content {
  width: 80%;
}
    
input[type=text], input[type=password] {
  width: 83%;
}  

}  


@media screen and (max-width:640px){ /* ESTILOS PARA MOVIL */
.fx{
    display: block;
}
.fx-m{
    display: flex;
}
  .modal-content {
  width: 80%;
 }
   
    
input[type=text], input[type=password] {
  width: 90%;
}      
    table{
width: 360px; 
}
    
.tab1{
    width: 360px;
}

    
 .contproductos{
    width: 100%;
    float: left;
}
   .imgblog{
    width: 100%;
    margin-bottom: 30px;
    margin-top: 15px;
} 
.contproductos .producto {
    width: 49%;
    font-family: 'interstatebold';
    padding: 0px 5px;
    margin-bottom: 40px;
}  
    
.pagination a {
  padding: 8px 10px;
  text-decoration: none;
font-family: 'Nunito', sans-serif;
    font-size: 11px;
  transition: background-color .3s;
}
      .marca1 {
    font-size: 15px;
}
.modelo1 {
    font-size: 13px;
}
.precio1 {
    font-size: 15px;
}  
    .ficha {
        margin-top: 10px;
    width: 95%;
    float: left;
    margin-left: 0%;
}
.ficha-neopreno img{
    width: 95%;
    float: left;
}

.boton4{
    width: 100%;
    font-size: 16px;
}       
.marca {
    font-size: 19px;
}    
.modelo {
    font-size: 17px;  
}

.precio12 {
    font-size: 17px;
}    
.psize{
     font-size: 16px;
}
.h5{
    font-size: 14px;
}    
#related .productosrela {
    font-size: 19px;
}    
.patroc {
    font-size: 19px;
}    
    
.col-m-1{width: 8.33%;}
.col-m-2{width: 16.66%;}
.col-m-3{width: 25%;}
.col-m-4{width: 33.33%;}
.col-m-5{width: 41.66%;}
.col-m-6{width: 50%;} 
.col-m-7{width: 58.33%;}
.col-m-8{width: 66.66%;}
.col-m-9{width: 75%;} 
.col-m-10{width: 83.33%;}
.col-m-11{width: 91.66%;}
.col-m-12{width: 100%;}
    
.movfoto{
    display: none;
}
.escfoto{
    display: block;
}    

.mbomm{
    margin-bottom: 20px;
}    
.movfoto1{
    display: block;
}

.escfoto1{
    display:none;
} 
    
    
.pslide{
	font-size: 300%;		
} 
.subir{
    margin-top: -18px;
    margin-left: 90px;
    margin-bottom: 16px;
} 

.logo{
    margin-left: 170%;
}   
.hambur{       
    display: block;
    padding: 5px;
    /*margin: 0px auto; si quiero que aparezca en la mitad: */
}
  
nav{
    width: 100%; /*no hace falta*/
    display: none; /*como la hamburguesa esta fuera del nav oculto todo el nav*/
}

nav ul{ 
    display: block;
    /*flex-direction: column;*/
    width: 100%;
}

nav ul li{
    display: block; /*le doy lo contrario de inline block*/
   /* margin: 0px auto;
    margin-bottom: 10px;*/
}
nav ul li a{
    font-family: 'Nunito', sans-serif;
    text-align: center; /*centrar los textos*/
    color: rgba(0,0,0,1.00);
    width: 100%; /*no hace falta porque le he dado el ancho con padding*/
    /*margin-right: 0px;
    padding: 5px;*/
}    
 

.bb{
/*    display: block;*/
/*    margin: 0px auto;*/
    background-color: red;
}
.movilfoto{
    display: block;
}
.escrifoto{
    display: none;
}

.movfoto{
    display: block;
}
.escfoto{
    display: none;
}  
#form1 input{
	width: 40%;
}

/*
h3{
	font-size: 27px;		
    margin-bottom: 3px;
}
*/
    
/*
.textblanco{
	font-size: 14px;		
    margin-bottom: 10px;
}
*/

    
h3{
    font-size: 30px;
    margin-bottom: 22px;
}
.hijo3{
	width: 70%;
	top: 50%;
	left: 20%;
}    

.logob{
    margin-bottom: 0px;
}
.pp{
    margin-left: 5%;
}
.rojo{
    background-color: red;
}
    .subb{
        margin-top: -4px;
    }

  
.margend{
    margin-left: 40px;
}

.banner .content h1{
    font-size: 34px;
    margin-bottom: 10px;
}

.banner .content p{
    font-size: 1.0em;
    line-height: 30px;
    margin-bottom: 20px;
}

.text{
 font-size: 16px; 
    margin-bottom: 4%;
}
.line{    
    margin-bottom: 25px;
    margin-left: -4%;
}

.texalq1{
    padding-left: 0px;
}
.texalq2{
    padding-right: 0px;
}
.mbom{
    margin-left: 12px;
}
.ptienda{
    font-size: 20px;		
    width: 70%;
}  
    .izq{
        float: none;
    }  
    .img99{
        width: 100%;
    }
    .hijo1{
    font-size: 34px;
}     
footer p{
    font-size: 13px;
}
    .hijo{
    width: 100%;
    left: 20px;
}
    
    

.boton1{ /* azul */
	width: 200px;
	font-size: 16px;
	padding: 15px 20px 15px 20px;
}


.boton2{ 
	width: 200px;
	font-size: 16px;
	padding: 15px 20px 15px 20px;
}
/*
.boton3:hover, .boton4:hover{
	color: black;
	background-color: white;
}
*/

/*
.boton2:hover{
	color: black;
    border: 1px solid black;
	background-color: white;
}
*/


.boton4{ 
	display: inline-block;
	width: 270px;
	text-align: center;
	color: white;
	background-color: black;
      border: 1px solid white;
	text-decoration: none;
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	padding: 15px 20px 15px 20px;
}

    .boton3{
        margin-bottom: 20px;
    }
    .marginbotm{
        margin-bottom: 30px;
    }    
/*
.boton3{ 
	display: inline-block;
	width: 150px;
	text-align: center;
	color: white;
	background-color: black;
	text-decoration: none;
	font-family: 'Public Sans', sans-serif;
	font-size: 15px;
	padding: 15px 20px 15px 20px;
}
*/
    
    .div1{
    width: 500px;
    height: 0px;
    padding: 5px;
    /*super importante porque sino no funciona la animación*/
    position: relative;
    left: -450px;
    top: -300px;
    animation-name: mover;
    animation-duration: 1s;
    
    animation-timing-function: linear;
    animation-iteration-count: 1; /*cuanto va a durar: infinito | sino pongo 1 vez y ya*/
    /*animation: mover 5s linear infinite;*/ /*si quiero ponerlo en abreviado*/
    
    animation-delay:0s; /*si quiero que se retrase la animación*/
    animation-fill-mode: forwards; /*como he puesto que se ejecute una vez, al final no quiero que desaparezca, y por eso pongo forwards*/
}

    @keyframes mover{ /*aqui  definimos los fotogramas de la primera: que empiece siendo un color y termina siendo otro color*/
        from{left: -200px;} /*sería -150px pero le pongo mas para que no este pegado al borde*/
        to{left: 30px;} /*posicion final*/
    }
   .pmam2{
    margin-bottom: 0px;
}
    
.altur{
  height: 100px;
} 
.altur1{
  height: 335px;
}  

.altur01{
  height: 130px;
} 
.altur11{
  height: 200px;    
}   
.altur02{
  height: 130px;
} 
.altur12{
  height: 200px;
}  
.altur03{
  height: 130px;
} 
.altur13{
  height: 180px;
}  
.altur04{
  height: 130px;
} 
.altur14{
  height: 230px;
}      
    
.martop2{
    margin-top: 101px;
}  
    
}


@media only screen and (max-width:600px){ /* carrousel*/
/*  carousel  */


    .carousel-caption h1{
        font-size: 20px;
    }
      .carousel-caption h2{
        font-size: 27px;
    }
     .carousel-caption p{
        font-size: 15px;
    }
      .carousel-caption a{
        font-size: 14px;
    }  
    .carousel-caption .par1{
        font-size: 17px;
    }
      .carousel-caption .par2{
        font-size: 13px;
    }
}


@media screen and (max-width:550px){ /* ESTILOS PARA MOVIL */
    
.altur01{
  height: 110px;
} 
.altur11{
  height: 260px;    
}   
.altur02{
  height: 110px;
} 
.altur12{
  height: 240px;
}  
.altur03{
  height: 110px;
} 
.altur13{
  height: 220px;
}  
.altur04{
  height: 110px;
} 
.altur14{
  height: 240px;
}      
}      
    
@media screen and (max-width:508px){ /* ESTILOS PARA MOVIL */
    
.altur01{
  height: 110px;
} 
.altur11{
  height: 260px;    
}   
.altur02{
  height: 110px;
} 
.altur12{
  height: 240px;
}  
.altur03{
  height: 110px;
} 
.altur13{
  height: 240px;
}  
.altur04{
  height: 110px;
} 
.altur14{
  height: 280px;
}      
}  

@media screen and (max-width:450px){ /* ESTILOS PARA MOVIL */
    
.altur01{
  height: 100px;
} 
.altur11{
  height: 270px;    
}   
.altur02{
  height: 100px;
} 
.altur12{
  height: 270px;
}  
.altur03{
  height: 100px;
} 
.altur13{
  height: 260px;
}  
.altur04{
  height: 100px;
} 
.altur14{
  height: 330px;
}      
} 
    
@media screen and (max-width:380px){ /* ESTILOS PARA MOVIL */

.altur03{
  height: 80px;
} 
.altur13{
  height: 280px;
}  
table{
width: 280px; 
}

.tab1{
width: 280px;
}
    }

@media screen and (max-width:380px){ /* ESTILOS PARA MOVIL */
.altur01{
  height: 100px;
} 
.altur11{
  height: 300px;    
} 
}