.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;	
}
.blink {
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

/* 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;}
body, #carrito{color:#000000!important;background-color:#FFFFFF!important;}
.header{color:#FFFFFF!important;background-color:#000000!important;}
.italica{font-style:italic;}
.light{font-weight: 300;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 800;}
.icono{width: 24px;}
@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}}
/*colores*/
.bazulc{color:#0063aa!important;background-color:#e3eef6!important;}
.bazulo{color:#ffffff!important;background-color:#0063aa!important;}
.azulo{color: #0063aa!important;}
.fondogris{background-color:#efefef!important;}
/*boton*/
.btn{min-width:250px;border:#0063aa;border-radius:8px;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:#FFFFFF;background-color:#000000;text-align:center;cursor:pointer;white-space:nowrap}
.btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.botonpedido{border-radius: 25px;border: solid 2px #162951;padding: 8px;margin:10px 25px;}
.botonizquierdo{width: 80%; float: left; border-radius: 0px 25px 25px 0px;padding: 8px;}
.botonderecho{	width: 80%; float: right;border-radius: 25px 0px 0px 25px;padding: 8px;}
.botoncentro{display: block; width: 80%; padding: 8px; margin:auto;}
/*modal*/
.modal{z-index:3;display:none;padding-top:1px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#FFFFFF;}
.modal-content{margin:auto;position:relative;padding:0;outline:0;width:98%; max-width: 600px; height:100%}
/*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%;}
.margencarrito{width: 600px; max-width:96%; margin:auto;}
/*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: coral;
  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: #2196F3;
}

/* 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: coral;
}

/* 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: #2196F3;
}

/* 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);
}
@media (max-width:600px){.carrito{width:100%;right:0px;top:0px;}}
@media (max-width:992px) and (min-width:601px){.carrito{width:100%;right:0px;top:0px;}}
@media (min-width:993px){.margencarrito{width: 900px; max-width:96%; margin:auto;padding-right:300px;} .carrito{width:290px;right:10px;top:80px;height:90%}}



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