@charset "utf-8";
/* CSS Document */

body {
		font-size:0.9rem;
	}
	
	
	.bigcheckbox {
		width:25px;
		height:25px;
	}
	
	.bigradiobox {
		width:20px;
		height:20px;
		margin-bottom:30px !important;
		position:relative;
		top:5px;
	}
	
	
	.cc-selector input{
		margin:0;padding:0;
		-webkit-appearance:none;
		   -moz-appearance:none;
				appearance:none;
				opacity:0
	}
	.paypal{background-image:url(img/icon-pay-pal.jpg);}
	.bancaria{background-image:url(img/icon-bancaria.jpg);}
	.oxxo{background-image:url(img/icon-oxxo.jpg);}
	
	.cc-selector input:active +.drinkcard-cc{opacity: .9;}
	.cc-selector input:checked +.drinkcard-cc{
		-webkit-filter: none;
		   -moz-filter: none;
				filter: none;
	}
	.drinkcard-cc{
		cursor:pointer;
		background-size:contain;
		background-repeat:no-repeat;
		display:inline-block;
		width:100px;height:70px;
		-webkit-transition: all 100ms ease-in;
		   -moz-transition: all 100ms ease-in;
				transition: all 100ms ease-in;
		-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
		   -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
				filter: brightness(1.8) grayscale(1) opacity(.7);
	}
	.drinkcard-cc:hover{
		-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
		   -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
				filter: brightness(1.2) grayscale(.5) opacity(.9);
	}
	
  	#header {
		background:rgba(250, 250, 250, 1);
		padding:20px 0;
		/*height: 100px;*/
	}
	#header #logo img {
		padding-top:4px;
		position:relative
	}
	
	#header.header-scrolled #logo img {
		padding-top:0px;
	}
	#contact {
		padding-top:100px;
		padding-bottom:0px;
	}
  	#footer {
		padding:0;
	}
	#footer .copyright {
		padding-bottom:0px;
	}
	#regForm {
	  background-color: #ffffff;
	  margin: 100px auto;
	  padding: 40px;
	  width: 100%;
	  min-width: 300px;
	}
	
	.form-control {
		border-radius:4px;
	}
	
	form sup {
		color:#ce1126;
	}
	
	/* Style the input fields */
	input {
	  padding: 10px;
	  font-size: 17px;
	  font-family: "Montserrat", sans-serif;
	  border: 1px solid #aaaaaa;
	}
	
	/* Mark input boxes that gets an error on validation: */
	input.invalid {
	  background-color: #ffdddd;
	}
	
	/* Hide all steps by default: */
	.tab {
	  display: block;
	  margin-bottom:30px;
	}
	
	.steps{font-size:0.9rem;color:#ADADAD;text-align:center;padding:17px 0}

	/*.steps .steps-items{margin-left:20px}*/

	.steps .steps-item{width:200px;display:inline-block;border-top:2px solid #1a37b7;}

	.steps .steps-item:last-child{width:0;margin:0;border-top:none;}

	.steps .steps-item .steps-item-label{margin-left:-184px;position:relative;top:20px}

	@media screen and (max-width:767px) {

		.steps .steps-item .steps-item-label{position:relative;top:20px; width:100px}

		.steps .steps-item { width: 165px; }

		.steps .steps-item .steps-item-label { margin-left: -140px; font-size:10px}

		.steps .steps-item .steps-item-label.last-label { margin-right: -118px !important; width:100px}

	}

	/*@media screen and (max-device-width: 767px){.steps{margin:10px 0 0 0}.steps .steps-item{width:90px}.steps .steps-item .steps-item-label{margin-left:-108px}}*/

	.steps .steps-item .steps-item-label.last-label{margin-right:-156px}

	.steps .steps-item.steps-item-is-current .steps-item-label{color:#212121}

	.steps .steps-item.steps-item-is-current .steps-item-icon{background:#ce1126;color:#ce1126}

	.steps .steps-item.steps-item-is-current .steps-item-icon:after{background:#ce1126;color:#ce1126}

	.steps .steps-item-icon{width:26px;height:26px;position:relative;top:-35px;;border-radius:50%;background:#1a37b7;font-size:11px;color:#1a37b7}
	
	.steps .last-label .steps-item-icon{left:-10px}

	.steps .steps-item-icon:after{content:'';display:block;background:#fff;width:22px;height:22px;border-radius:50%;position:absolute;top:2px;left:2px}

	.steps .steps-item-icon .icon-check{position:relative;top:8px;left:0px;z-index:1;opacity:0}

	.success-page .steps .steps-item-icon .icon-check{opacity:1}
	
	.row {
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display:         flex;
	}
	.row > [class*='col-'] {
		 display: flex;
		 flex-direction: column;
	}
	.checkout-left{
		background: #ce1126;
		color: #fff;
		margin:100px auto 0 auto;
		padding:0 20px;
		border-radius: 4px 4px 0 0
		
	}
	.checkout-left h3 {
		margin:20px 0;
	}
	
	.checkout-left h4 {
		margin:20px 0;
	}
	
	.checkout-left .quantity {
		/*width:100%;*/
		margin:20px 0;
		padding:5px;
		color:#fff;
		font-weight:bold;
		background: none;
		/*border-radius:4px;*/
		border:none;
		border-bottom: 1px solid #fff;
	}
	
	.checkout-left .total {
		/*width:100%;*/
		margin:20px 0;
		padding:5px;
		color:#fff;
		font-weight:bold;
		background: none;
		/*border-radius:4px;*/
		border:none;
		/*border-bottom: 1px solid #fff;*/
	}
	
	.checkout-left input[type="text"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	  color: #fff;
	  opacity: 1; /* Firefox */
	}
	
	.checkout-left input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
	  color: #fff;
	}
	
	.checkout-left input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */
	  color: #fff;
	}
	
	.checkout-right {
		background: #fff;
		color: #212121;
		margin:0 auto 100px auto;
		padding:40px 20px;
		border-radius:0 0 4px 4px
		
	}
	
	.checkout-right h6 { 
		font-weight:bold;
	}
	.tab .col-md-1 {
		display:table-cell;
		vertical-align:middle;
		padding:25px 15px;
	}
	
	.col-md-11 img {
		display:table-cell;
		vertical-align:middle;
		/*height:50px;*/
		/*width:auto*/
		max-width:200px;
		height:auto
	}
	
	@media screen and (max-width:767px) {
		.tab .col-md-1 {
			display:table-cell;
			vertical-align:middle;
			padding:0px 0 0 15px;
		}
		
		.col-md-11 img {
			display:table-cell;
			vertical-align:middle;
			/*height:50px;*/
			/*width:auto*/
			width:100%;
			max-width:100px;
			height:auto
		}	
	}
	
	.radio-container {
		box-sizing: border-box;
		font-size: 13px;
		/*line-height: 30px;*/
		margin: 0;
		outline: 0;
		overflow: hidden;
		padding: 0;		
	}


	.radio-container input {
		box-sizing: border-box;
		margin: 0;
		outline: 0;
		padding: 0;
		position: relative;
		top: 2px;
		vertical-align: top;
		cursor:pointer
	 }
	 
	 .checkbox-container {
		box-sizing: border-box;
		font-size: 13px;
		line-height: 30px;
		margin: 0;
		outline: 0;
		overflow: hidden;
		padding: 0;		
	}


	.checkbox-container input {
		box-sizing: border-box;
		margin: 0;
		outline: 0;
		padding: 0;
		position: relative;
		top: 2px;
		vertical-align: top;
		cursor:pointer
	 }
	 
	 .radio-container label {
		 margin:3px 25px 0 -3px;
		 padding-left:10px;
		 cursor:pointer
	 }
	 
	 .checkbox-container label {
		 margin:0px 25px 0 -3px;
		 padding-left:10px;
		 cursor:pointer
	 }
	 
	 .btn-continue {
		 border-radius: 4px;
		 background: #333;
		 color: #fff;
	 }
	 
	 .receipt {
		 padding:15px;
		 margin-top:90px
	 }
	 
	 .receipt-container {
		 padding:15px;
	 }
	 
	 .receipt .bank-logo {
		 width:100px;
		 height:auto;
	 }
	 
	 .receipt .receipt-title {
		 color:#ce1126;
		 font-weight:500
	 }
	 .receipt .order-summary {
		 display:block;
		 padding:15px;
		 width:auto;
		 background: #ce1126;
		 color: #fff;
		 text-align:center;
		 border-radius: 4px;
		 margin-bottom:20px;
	 }
	 .receipt .title>h5 {
		 font-weight:500;
		 padding:10px;
		 margin:0
	 }
	 
	 .receipt .cell-value>p{
		 font-weight:normal;
		 padding:10px;
		 margin:0
	 }
	 
	 .receipt .order-summary-cell {		 
		 display:table-cell;
		 border-collapse:collapse;
		 border: 1px solid #ced4da;
		 outline:auto;
	 }
	 
	 .receipt-footer {
		 font-size:14px;		 
	 }
	 
	 @media screen and (max-width:767px){
		 #header #logo img {
			 /*max-height: 50px;*/
			 /*margin-top:-14px*/
		 }
		  
		 #header.header-scrolled #logo img {
			/*max-height: 50px;*/
			 margin-top:0px !important
		 } 
		 .receipt {
			 /*border-top: 1px solid #ced4da;*/
		 }
		 .col-md-10 img {
			display:table-cell;
			vertical-align:middle;
			height:auto;
			width:100%;
			padding:10px 0
		}
		
		.checkout-left {
			margin-top:50px;
			margin-bottom:0px;
		}
		.checkout-right {
			margin-top:0px;
			margin-bottom:0px
		}
		#contact {
			padding-bottom:0px;
		}
		.radio-container label {
		    /*margin:-28px 0 0 0px;*/
	    }
		.checkbox-container label {
		    margin:-28px 0 0 0px;
			padding-left:10px;
	    }
		.checkbox-container label.check-option-yes {
		    margin:-28px 0 0 25px;
			padding-left:10px;
	    }
		.bank-logo {
			text-align:center !important;
		}
		.receipt {
			 margin-top:50px
		}
		
		h3 {
			font-size:1.5rem !important;
		}
		.checkout-left .total {
			/*font-size:1.5rem;*/
		}
		
		.checkout-left .quantity {
			margin:0;
		}
	 }
	 
	 @media (min-width: 1024px) {
	  #header #logo {
		  /*margin-top: -14px;*/
	  }
	  
	  #header.header-scrolled #logo {		  
		  margin-top: 0
	  }
	 }
	 
	 hr {
		 background-image: linear-gradient(to right, #ce1126 50%, #1a37b7 50%);
		 height:2px;
		 border:none
	 }