body {
    font-family:'Roboto', arial;
  margin:0px;
  padding:0px;
  background:white;
  color:black;
}

input, select, button, textarea {
font-size: 16px;
}

input, textarea, select, button {
border: 2px solid #ecf2ff;
color: #666666;
margin: 5px;
padding: 7px 10px;
background: #FFFFFF;
border-radius: 9px;
}
*, :focus, :hover {
outline: none;
}
input:hover,input:focus{
border:solid 2px gray;
}
input[type=button]:hover,input[type=submit]:hover,input[type=button]:focus,input[type=submit]:focus{
background:gray;
color:white
}

input[type=button]:active,input[type=submit]:active{
background:gray;
color:white
}


pre{
   font-family:'Roboto', arial;  
}
    
.rad10{
    border-radius:10px;
}
.rad5{
border-radius:5px;
}
.det-box{

}
table{

overflow: hidden;
}
a{

text-align:center;

text-decoration:none;
}
a:hover{

}
#logo{
border-radius:50%;
background:white;
padding:3px;
}

#cab{
box-shadow: 0 0 10px 0 #777;
}
#banner{
height: 200px;
width:95%;
overflow:auto;
background:;
}
#det_prod{

border-radius:10px;
box-shadow: ;
padding:10px;
}
#det_prod_img{
background: white;
padding: 10px;
border-radius: 10px 0 0 10px;
height: 420px;
}
#det_prod_img_center{
margin: 0 auto;

height: 400px;
padding-top: 10px;
}
#det_prod_img div{
border-radius:5px;
}
#det_prod_precio{

text-align:initial;
padding:10px;

}
.cab-bco a{
color:white;
}
.cab-bco a:hover{
background:rgba(255,255,255,.5);

}
.cab-bco a:active{
background:rgba(255,255,255,1);
color:rgba(0,0,0,1);
}
.cab-neg a{
color:black;
}
.cab-neg a:hover{
background:rgba(255,255,255,.5);

}
.cab-neg a:active{
background:rgba(255,255,255,1);
color:rgba(0,0,0,1);
}
#CantImgs{
overflow-x:auto;
}
.familias
{
    text-align:center;
    display:inline-block;
    width:100%;
    margin:0px;
    padding-top:5px;
    margin-bottom:10px;
}

.fsquare 
{
    width:10%;
    height:30px;
    text-align:center;
    display:inline-block;
    background:#147CC0;
}
.fsquare p{
    margin: auto;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}
.sub-familias
{
    display:inline-block;
    width:100%;
    margin:0px;
    padding-left:1%;
    padding-top:5px;
    background:none;
    color:gray;
    font-size:.8em;
} 
 
.sfsquare 
{
    width:10%;
    height:25px;
    text-align:center;
    display:inline-block;
    background:#147CC0;
}
.sfsquare p{
    margin: auto;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}

.phead{
    background:#d6c0c0;
    width:90%;
    margin:auto;
    
}
.container
{
    background: rgba(255,255,255,.7);
}
.sombra:hover
{
    -webkit-box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
}

.square
{
   
    text-align:left;
    border: 1px solid #DADDE1;
  
    background:white;
    

}
.square_det
{
    margin:auto;
    width:;
    height:350px;
    text-align:left;
    border:;
    display:inline-block;
    background:white;
    overflow:hidden;

}
.pcontainer
{
    text-align:center;
    display:inline-block;
    width:100%;
    margin:0px;
    margin-top:30px;
    margin-bottom:20px;
    
}
.psquare
{
    margin:5px;
    width:30px;
    height:30px;
    text-align:center;
    display:inline-block;
    
}

.art_title{
    padding-top:5px;
    padding-bottom:5px;
}
.art_image{
    
}
.col-6 {
   padding-left: 0.2em;
   padding-right: 0.2em;
   padding-bottom: 0.2em;
}
.card{
    height: 100%;
    padding-top:5%;
    padding-bottom:5%;
}

.container{
    padding:0px;
}


.img-contenedor{    
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Relacionado al ancho del contenedor */
}
.img-cuadrado {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit:scale-down;
}
.art_image_center{
    
    max-width: 100%;
   height: fit-content;
    justify-content: center;
    align-items: center;
    display: flex;
}
.art_image2{
    border: green solid 1px;
    object-fit:contain;
    object-position: center;
}
.art_title:hover{
    -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.transparente{
float:;
position:fixed;
right:0px;
left:0px;
top:0px;
bottom:0px;
background: black;
z-index: 100;
filter:alpha(opacity=70);
-moz-opacity: 0.8;
opacity: 0.8;
}


.contenedor{
float:;
position: fixed;
background:#D4D0C8;
min-width:50%;
height:90%;
z-index: 150;

top:5%;
left:5%;
right:5%;
filter:alpha(opacity=100);-moz-opacity:;opacity:;
box-shadow: 0 0 10px 0 black;
border-radius:10px;
/*margin: 30px auto auto 30px;*/
/*margin-left:-300px;
margin-top:-200px;*/
}
#contenido{
height:90%;
}
#float_head{
box-shadow: 0 4px 5px -1px gray;
margin-bottom: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#float_head h3{
margin:0px
}

</style>

<style>
/*
Slideshow
*/
* {box-sizing: border-box;}

.mySlides {display: none;}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
padding:auto;

}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
}

.active {
border: solid 2px gray;
}

/* Fading animation */
.fade {
    opacity:1;
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.fade:not(.show) {
    opacity: 1;
}

@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

.btn{
bg-color:;
}

.btn:hover{
cursor:pointer;
background: lightgreen;
}