@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quando&display=swap');

body {margin: 0; font-family: 'Quando'; font-size: 70%; background-color: #c2af98; text-align: center; padding-top: 10px}

a:link, a:visited {color:#bb6a35; text-decoration: none; outline:none}
a:hover {color:#6e412f;}

p {margin: 0; padding: 10px; hyphens: auto; text-align: justify}

.clear {clear: both}

h1, h2, h3, h4, h5 {margin: 0; padding:0; color:#000}

h1 {font-size: 260%; font-weight: normal}

h2 {font-size:180%; font-weight:normal}

h3 {font-size:120%; font-weight:bold}

h4 {font-size: 100%; font-weight: normal; font-style: italic}

h5 {font-size: 80%; font-weight: normal}

ul, ol {margin: 1em 0 1em 2em; padding:0}

/*#cabecera {
margin:auto;
width:1200px;
height: 200px;
background-image: url(../img/logoPP.jpg);
background-repeat: no-repeat;
background-position: center top;
}*/

.menu {width:100%; overflow: hidden; margin: 10px auto; vertical-align: middle; font-size:1.3em; text-align:center}

.menu ul {margin: 0; padding: 0; list-style:none; display: contents}

.menusinenlace {padding: 10px 15px; background: #b86436; color: #fff; font-weight: bold; display: inline-table}

.menu ul li {display: inline-table; margin: 5px}

.menu ul li a {display: block; position: relative; padding: 10px 15px; border: 0; background: #b86436; color: #fff; font-weight: bold; text-decoration: none; cursor: pointer}
.menu ul li a:hover {background: #FF9000; color:#000}

.menu ul li.seleccionado a {background: #FFF; color: #FF9000}

.menu ul li.hijo a {background: #6e412f; color: #fff; margin: 0; padding: 10px 15px}
.menu ul li.seleccionadopadre a {background: #fff; color: #000; margin: 0; padding: 10px 15px}

.menu ul li.seleccionadohijo a {background: #fff; color: #000; margin: 0; padding: 10px 15px}

.menu ul li.hijo a:hover {background: #FF9000; color: #fff}

.foto {padding-top:5px; text-align:center; display: inline-block; max-width: 350px; overflow: hidden; margin: 10px; vertical-align: middle}

.pprivacidad {padding-left:20px; text-align:justify}

.piefoto {text-align:center; padding-top:5px; padding-bottom: 20px; font-size:16px}

#enunciado {font-size: 30px; background-color: #e4d1c7; color: #bb6a35; padding-top: 15px; padding-bottom: 15px; margin-top: 20px}

#contenedor {max-width: 1600px; padding-top: 20px; margin: auto}

#contenido {background-color: #f4e4df; overflow: hidden; padding: 30px 10px; border-top-width: 1px; border-top-style: solid; border-top-color: #f4e4df; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #f4e4df; display: flex; flex-direction: column; align-items: center}

.textos {margin-left:5px; margin-right:5px; font-size:1.2em; text-align: justify}

.titulo {padding: 15px; font-size:26px; color: #bb6a35; text-align:center}

.irfixeda, .irfixedb {position:fixed; z-index:1000; right:20px; filter: drop-shadow(2px 2px 2px black)}
.irfixeda {bottom:80px}
.irfixedb {bottom:130px}

.productos-admin {font-size:13px; color: #000}

.footerbot {display: inline-table; width: 100%; max-width: 750px; overflow: hidden; margin: 10px; vertical-align: middle}

.imgcabecera {display: inline-table; width: 100%; border-radius: 5px; max-width: 500px; overflow: hidden}

textarea, input  {padding: 5px; color: #bb6a35; max-width: 350px;}

#contenido-catalogo {background-color: #f4e4df; height: auto; overflow: hidden; border-top-width: 1px; border-top-style: solid; border-top-color: #f4e4df; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #f4e4df}

.catalogo {max-width: 400px; margin: 20px; display: inline-block; vertical-align: middle; font-size:1.2em; text-align:center}

@media only screen and (max-width: 600px){
#contenedor {max-width: 400px}
#contenido {width: 90%; margin: 0px auto}
#contenido img {width: 100%; height: auto}
.catalogo {width: 95%; margin: 0px auto}
.footerbot {width: 95%}
.menu {margin-top: 25px}
.menu ul li { border: none; margin: 10px}
.foto {max-width: 150px}
.imgcabecera {max-width: 400px; margin: 5px 0px}
.slides_container {max-width: 330px; height: 246px}
.slides_container div.slide {width: 360px; margin-left: 15px}
.caption {width: 100%; margin-left: -25px;}
.pagination {margin-left: -126px;}
.slide img {max-width: 340px; margin-left: -60px;}
}

.catalogo-textos {display: inline-table; width: 100px; vertical-align: middle; padding:10px; background: white; border-radius: 4px; text-align: left; overflow: hidden; font-size: 12px}

.catalogo-imagen {width:200px; display: inherit; vertical-align: middle}

.catalogo-texto {padding-top:10px}

#pie {background-color: #e4d1c7}

.copy, .aviso, .privacidad, .email-estudiosruiz, .tlf {margin:20px 40px; max-width: 400px; display: inline-block; vertical-align:text-top; line-height: 200% !important}

.tlf {font-size:18px}

/*****************SLIDER*******/
#example {width: 550px; height: auto; padding-top: 0px}


/*	Slideshow     */

#slides {height: auto; top: 15px; left: 4px; z-index: 100}

/*
Slides container
Important: Set the width of your slides container Set to display none, prevents content flash
*/

.slides_container {width: 100%; overflow: hidden; max-width: 800px}

/*
Each slide
Important: Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/

.slides_container div.slide {height: auto}

/*	Pagination */

.pagination {max-width: 620px; margin:auto}

.pagination li {margin-left:235px; margin-top:10px; list-style:none}

.pagination li a {display: block; width: 12px; height: 0; padding-top: 12px; margin-left: 15px; background-image: url(../img/slidermultiple/pagination.png); background-position: 0 0; float: left; overflow: hidden}

.pagination li.current a {background-position:0 -12px}

.caption {background: #b86436; width: 100%; color: #fff; font-size: 16px; padding:5px}

.slide img {width: 100%; max-width: 800px}

embed {width: 100%}


/*****************SLIDER*******/

@media only screen and (min-width: 600px) and (max-width: 800px){
.slides_container {max-width: 600px; height:320px}
.slides_container div.slide {width:600px; margin-left: 10px}
.caption {width: 100%; margin-left: 0px;}
.pagination {margin-left: 20px;}
.slide img {max-width: 550px; margin-left: -12px;}
/*
.slides_container div.slide {width: 360px; margin-left: 15px}
.caption {width: 100%; margin-left: -25px;}
.pagination {margin-left: -126px;}
.slide img {max-width: 340px; margin-left: -60px;}*/
}

.cabecero_redes img, #ir_redes img  {-webkit-filter: drop-shadow(0px 0px 2px black); filter: drop-shadow(0px 0px 2px black);}

.cabecero_redes img a:hover, #ir_redes img  {-webkit-filter: drop-shadow(0px 0px 2px black); filter: drop-shadow(0px 0px 2px black); position: fixed; bottom: 220px; right: 8px;}

.fadeflecha {opacity: 0.7; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out}

.fadeflecha:hover {opacity: 1;}


/*********************** Formulario ***********************/

.form-label {width:140px !important;}

.form-label-left {width:100px !important;}

.form-line {padding-top:12px; padding-bottom:12px;}

.form-label-right{width:150px !important;}

.form-all {max-width:690px !important; font-family:inherit; font-size:12px;}

.form-buttons-wrapper {margin-top: 10px; margin-bottom: 10px;}

.form-submit-button, .boton, .boton:link, .boton:visited, .boton2:link, select {color: black !important; background: #e4d1c7 !important; font-size: 14px; padding: 10px !important; border: 1px solid #999 !important; cursor: pointer; font-family: inherit; line-height: 1; position: relative; text-align: center; text-decoration: none; border-radius: 4px !important; outline: none}

select option:first-child:checked {font-family: 'Quando' !important; font-style: italic; font-weight: bold; background: #6e412f  !important; color: white !important}

select option:last-child:checked {font-family: 'Quando' !important; font-style: italic; font-weight: bold; color: #6e412f  !important; background: white !important}

.form-submit-button:hover {background: #bb6a35 !important; color: white !important;}

.boton:hover {background: #bb6a35 !important; color: white !important;}

.form-submit-button:focus, .form-submit-button:active, .boton:focus, .boton:active {background: #6e412f !important; color: white !important;}

.boton2, .boton2:link, .boton2:visited {color: white !important; background: #6e412f !important; border-radius: 4px !important;}
.boton2:hover {background: #bb6a35 !important; color: white !important;}
.boton2:focus, .boton2:active {background: black !important; color: white !important;}