/*Fuentes*/
@font-face {
  font-family: 'Monserrat';
  src: url(Montserrat-Regular.ttf) format('truetype'),url(Montserrat-Regular.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}
body,h1,h2,h3,h4,h5,h6{font-family:'Monserrat',Verdana,sans-serif; font-weight: 400;}



a{text-decoration:none;}
.mayusculas{text-transform: uppercase}
.icono{width: 18px;}
/* body */
body, .carrito{color:white; background-color: black; background-image: url('https://distrito37.es/qr/biblioteca/fondo-la-bellota.jpg'); background-repeat: repeat;}

/*colores*/
.azul{background-color:#5194a5; color:white;}
.blanco{background-color:white; color:#5194a5;}

/* Flex */
.flex-vertical {
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.flex-horizontal {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-between;	
}
/*modal*/
.modal{z-index:3;display:none;padding-top:1px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8);}
.modal-content{margin:auto;position:relative;padding:0;outline:0;width:98%; max-width: 600px;}
/* Carrito */
#carrito{height:100%;width:100%;position:fixed!important;z-index:5;overflow:auto;}
.cantidadpedida{background-color: orange;padding: 5px 8px;text-align: center;font-size: 12px;vertical-align:top; margin-left:-20px;border-radius:50%;}


/* Efectos */
.blink {
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

 .marquee { width: 100%; line-height: 3px; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee p { display: inline-block; padding-left: 100%; animation: marquee 120s linear infinite; } 
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }


/* Media */
/* Horizontal */
@media screen and (orientation:landscape){
	.vertical{display: none!important}
}
/* Vertical */
@media screen and (orientation:portrait){
	.horizontal {display: none!important}
}

@media (max-width:600px){.w3-tiny{font-size:8px!important}.w3-small{font-size:10px!important}.w3-medium{font-size:12px!important}.w3-large{font-size:15px!important}
.w3-xlarge{font-size:18px!important}.w3-xxlarge{font-size:24px!important}.w3-xxxlarge{font-size:36px!important}.w3-jumbo{font-size:48px!important}
.w3-container{padding:0.01em 4px} .w3-btn{padding: 4px 4px}}
@media (max-width:992px) and (min-width:601px){}
@media (min-width:993px){}

/*input radio*/
/* The container */
.container {
  display: block;
  position: relative;
  padding: 10px 10px 10px 35px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:solid 1px #efefef;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 10px;
  left: 5px;
  height: 16px;
  width: 16px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #5194a5;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* input check boxes*/
/* The container */
.container2 {
  display: block;
  position: relative;
  padding: 10px 10px 10px 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:solid 1px #efefef;
}

/* Hide the browser's default checkbox */
.container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark2 {
  position: absolute;
  top: 10px;
  left: 5px;
  height: 16px;
  width: 16px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
  background-color: #5194a5;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark2:after {
  display: block;
}

/* Style the checkmark/indicator */
.container2 .checkmark2:after {
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}