/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #c4bc2c; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #26201e; 
}
.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;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

/* 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;
}
@font-face {
  font-family: 'OldStandard';
  src: url(OldStandardTT-Bold.ttf) format('truetype'),url(OldStandardTT-Bold.woff) format('woff');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Shadows';
  src: url(ShadowsIntoLight.ttf) format('truetype'),url(ShadowsIntoLight.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'OpenSans';
  src: url(OpenSans-Regular.ttf) format('truetype'),url(OpenSans-Regular.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'OpenSansBold';
  src: url(OpenSans-Bold.ttf) format('truetype'),url(OpenSans-Bold.woff) format('woff');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Oswald-VariableFont';
  src: url(Oswald-VariableFont_wght.ttf) format('truetype'),url(Oswald-VariableFont_wght.woff) format('woff');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'RobotoSlab-VariableFont';
  src: url(RobotoSlab-VariableFont_wght.ttf) format('truetype'),url(RobotoSlab-VariableFont_wght.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}
body,h1,h2,h3,h4,h5,h6{font-family:'RobotoSlab-VariableFont', sans-serif; font-weight: 400;}
body{color:#FFFFFF;}
.titulo{font-family:'Oswald-VariableFont', sans-serif; font-weight: 700;}
.subtitulo{font-family:'Shadows',Verdana,sans-serif; font-weight: 400;}
.negrita{font-family:'OpenSansBold',Verdana,sans-serif; font-weight: 700;}
.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*/
.colorvino{color:#630a44;}
.bazulc{color:#630a44!important;background-color:#f9efd0!important;}
.bazulo{color:#ffffff!important;background-color:#630a44!important;}
.azulo{color: #630a44!important;}
.fondogris{background-color:#efefef!important;}
/*boton*/
.btn{min-width:250px;border:#ffffff; border-radius:8px;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:#FFFFFF;background-color:#630a44;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 #ffffff;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{width: 80%;}
/*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: #630a44;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;}

.familia{background-image: url("grupos.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;}
/*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: #630a44;
}

/* 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: #630a44;
}

/* 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}
	body, .modal-content, #carrito{background-image: url("fondo-horizontal.jpg"); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;}
}
/* Vertical */
@media screen and (orientation:portrait){
	.horizontal {display: none!important}
	body, .modal-content, #carrito{background-image: url("fondo-vertical.jpg"); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;}
}