@charset "utf-8";

/*
	=================================================================================
	CSS INFO  /shop/css/commerce.css
	=================================================================================
	
	version: 	1.1
	fecha: 		20.11.2015

*/

/*
  =================================================================================
  TABLA DE CONTENIDOS
  =================================================================================
  
  - CLASES GENERALES
  - LAYOUT
  - CABECERA
  - PASOS
  - CART
    > TABLA RESPONSIVE
    > CAMPOS ESPECIALES
    > RESUMEN
	- FORMULARIOS
		> CONTROL DE ERRORES
		> CUPÓN DESCUENTO
	- BOTONES
	- ACORDEÓN
	- DIRECCIONES
	- CLASES DE AYUDA
	- MEDIA QUERIES

	- GUS

*/


/*
	=================================================================================
	CLASES GENERALES
	=================================================================================
*/

	body {
		font-family: 'Lato', sans-serif;
	}

	a {
		text-decoration: none !important;
	}

	h3 {
		display: block;
		margin: 0 0 15px 0;
		font-family: 'Raleway', sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 36px;
		color: rgb(68, 68, 68);
	}

	body.no_icons .button .glyphicon {
		display: none !important;
	}



/*
	=================================================================================
	LAYOUT
	=================================================================================
*/

	.container,
	.row {
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

	#footer {
    background-color: #FFF;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding: 20px 0 20px 0;
    margin-top: 40px;
	}



/*
	=================================================================================
	CABECERA
	=================================================================================
*/

	.logo {
		height: 70px;
		padding-top: 15px;
	}
	
	.logo img { 
		height: 30px;
		margin-top: 5px;
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

 

/*
	=================================================================================
	PASOS
	=================================================================================
*/

	/* Anulamos la transición por defecto de bootstrap */
	.progress-bar {
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
	}

	#steps {
		background: #f8f8f8;
		border-top: 1px solid #e7e7e7;
		border-bottom: 1px solid #e7e7e7;
		padding-top: 15px; /*** 40px */
		padding-bottom: 15px; /*** 40px */
		margin-bottom: 40px;
	 	-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

	#steps .bs-wizard-step { padding: 0; position: relative; }
	#steps .bs-wizard-step + .bs-wizard-step {}
	#steps .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
	#steps .complete .bs-wizard-stepnum, #steps .active .bs-wizard-stepnum { font-weight: bold; }
	#steps .bs-wizard-step .bs-wizard-info {color: #999; font-size: 16px;}
	#steps .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
	#steps .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
	#steps .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; background: #eaeaea;}
	#steps .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
	#steps .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
	#steps .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
	#steps .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
	#steps .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
	#steps .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #eaeaea;}
	#steps .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
	#steps .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
	#steps .bs-wizard-step:last-child  > .progress {width: 50%;}
	#steps .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }



/*
	=================================================================================
	CART
	=================================================================================
*/

	/*
		CART > TABLA RESPONSIVE
		Basada en https://css-tricks.com/responsive-data-table-roundup/
	*/
		#tabla-responsive table {
			width: 100%
		}

		#tabla-responsive thead tr th {
			vertical-align: bottom;
			border-bottom: 2px solid #dddddd;
			line-height: 20px;
			font-weight: bold;
			font-size: 16px;
			font-family: 'Lato', sans-serif !important;
		}

		#tabla-responsive td {
		  /*padding: 12px 15px;*/
		  vertical-align: middle;
		  border-color: #E5E5E5;
		  border-bottom: 1px solid #dddddd;
		}

		#tabla-responsive .glyphicon {
			font-size: 12px;
			color: #bbb;
		}
		#tabla-responsive .glyphicon:hover {
			color: #000;
			cursor: pointer;
		}

		#tabla-responsive td:first-child {
			padding-left: 0;
			text-align: center;
		}
		#tabla-responsive td img {
			height: 60px;
		}


		#tabla-responsive tbody td:last-child {
			text-align: center;
		}

		#tabla-responsive thead .quantity {
			text-align: center;
		}
		#tabla-responsive thead .subtotal {
			text-align: right !important;
		}

		#tabla-responsive .image {
			width: 100px;
		}
		#tabla-responsive .price {
			width: 125px;
		}
		#tabla-responsive .quantity {
			width: 112px;
		}
		#tabla-responsive .subtotal {
			width: 110px;
		}
		#tabla-responsive .remove {
			width: 15px;
		}



		@media only screen and (min-width : 601px) {

			/* Si estoy mostrando la tabla en formato normal, elimino el borde inferior de la última fila */
			#tabla-responsive tbody tr:last-child td {
				border: 0;
			}
			
		}

		@media only screen and (max-width: 600px) {
			
			#tabla-responsive .image,
			#tabla-responsive .price,
			#tabla-responsive .quantity,
			#tabla-responsive .subtotal,
			#tabla-responsive .remove {
				width: auto;
			}


			/* Si estoy viendo la tabla en formato cuadrícula elimino los border internos */
			#tabla-responsive tbody tr td {
				border: 0;
			}

			/* Force table to not be like tables anymore */
			#tabla-responsive table, 
			#tabla-responsive thead, 
			#tabla-responsive tbody, 
			#tabla-responsive th, 
			#tabla-responsive td, 
			#tabla-responsive tr { 
				display: block; 
			}
		 
			/* Hide table headers (but not display: none;, for accessibility) */
			#tabla-responsive thead tr { 
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
		 
			#tabla-responsive tr {
				border: 1px solid #ccc;
				margin-bottom: 15px;
			}
		 
			#tabla-responsive td { 
				/* Behave like a "row" */
				border: none;
				border-bottom: 1px solid #eee; 
				position: relative;
				padding-left: 35%; 
				white-space: normal;
				text-align:left;
			}
		 	#tabla-responsive td:before { 
				/* Now like a table header */
				position: absolute;
				/* Top/left values mimic padding */
				top: 6px;
				left: 8px;
				width: 30%; 
				padding-right: 10px; 
				white-space: nowrap;
				text-align:left;
				font-weight: bold;
			}
			#tabla-responsive td:first-child { 
				padding: 5px; 
				text-align: center;
			}
			#tabla-responsive td:first-child img {
				display: block;
	  		max-width: 100%;
	  		height: auto;
	  		max-height: 200px;
	  		margin: 0 auto;
			}
		 	#tabla-responsive td:before {
		 		content: attr(data-title);
		 	}
		 	#tabla-responsive tbody .quantity {
				text-align: left !important;
			}
			#tabla-responsive tbody td:nth-child(6) {
				padding-left: 50% !important;
				text-align: left !important;
			}

		}

		
		
			



		/*
			CART > CAMPOS ESPECIALES
		*/
			#tabla-responsive tbody .quantity {
				text-align: center;
				font-size: 0;
			}
			#tabla-responsive tbody .quantity .qty {
				display: inline-block;
				width: 50px;
				height: 40px;
				line-height: 40px;
				border: 0;
				border-left: 1px solid #DDD;
				border-right: 1px solid #DDD;
				background-color: #EEE;
				text-align: center;
				padding: 0;
				font-size: 16px;
				font-weight: bold;
			}
			#tabla-responsive tbody .quantity .plus,
			#tabla-responsive tbody .quantity .minus {
				display: inline-block;
				cursor: pointer;
				border: 0;
				padding: 0;
				width: 30px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #EEE;
				font-size: 16px;
				font-weight: bold;
				transition: background-color .2s linear;
				-webkit-transition: background-color .2s linear;
				-o-transition: background-color .2s linear;
			}


		/*
			CART > RESUMEN
		*/
			.resume {
				padding: 10px 20px;
				background: #f8f8f8; 
				color: #545454;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				-ms-border-radius: 5px;
				-o-border-radius: 5px;
				border-radius: 5px;
				margin-bottom: 20px;
			}

			table#summary {
				margin-bottom: 10px;
			}
			table#summary td {
				text-align: right;
			}
			table#summary h2 {
				margin-top: 0;
				font-size: 20px;
			}
			table#summary h3 {
				text-align: center;
				margin-bottom: 0;
			}
			


/*
	=================================================================================
	FORMULARIOS
	=================================================================================
*/

	.form-myfocus input,
	.form-myfocus select,
	.form-myfocus textarea {
		border: 2px solid #ccc;
		border-radius: 3px;
		box-shadow: none;
	}
	.form-myfocus input:active,
	.form-myfocus input:focus,
	.form-myfocus select:active,
	.form-myfocus select:focus,
	.form-myfocus textarea:active,
	.form-myfocus textarea:focus {
		border-color: #999;
		box-shadow: none;
	}

	.form-myfocus label {
		display: inline-block;
		font-size: 13px;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #555;
		margin-bottom: 5px;
		cursor: pointer;
	}
	.form-myfocus .fila {
		margin-bottom: 25px;
	}
	.checkbox label, .radio label {
		font-size: 14px;
		font-family: "Lato", sans-serif;
		letter-spacing: 0;
	}


	/* 
		FORMULARIOS > CONTROL DE ERRORES
	*/
		.error {
			color: #e74c3c;
		}
		
		.form-myfocus .has-error {
			border: 2px solid #ea6153 !important;
		}
		.form-myfocus .alert {
			margin: 0;
			padding: 15px 0 0 0;
			color: #e74c3c;
			display: none;
		}


	/* 
		FORMULARIOS > CUPÓN DESCUENTO
	*/
		.form-group, #coupon_form .input-group {
			width: 100%;
		}

		#coupon_form .input-group input {
			height: 44px;
		}

		#coupon_form .input-group-addon {
			border: 2px solid #ccc;
			border-left: 0;
			padding: 0;
		}
		#coupon_form .input-group-addon button {
			display: block;
			width: 100%;
			position: relative;
			cursor: pointer;
			outline: none;
			white-space: nowrap;
			margin: 0;
			height: 40px;
			line-height: 30px;
	    font-size: 14px;
			/*background-color: #e6e6e6;*/
			background-color: #1abc9c;
			/*border-color: #1abc9c;*/
			
			color: white; /*#444;*/
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			border: 0;
			-webkit-transition: none;
			-o-transition: none;
			transition: none;
		}
		#coupon_form .input-group-addon button:hover {
		  color: #333;
		  background-color: #fff;
		  border-color: #ccc;
		}

		/* Definimos una clase especial para este input-group en modo error */
		#coupon_form .has-error .input-group-addon {
	    border: 2px solid #a94442;
	   }

		#coupon_form .has-error {
	    border: 0 !important;
		}

		#coupon_form .has-error .input-group-addon button {
	    background-color: #a94442;
	    color: #fff !important;
	  }

	  #coupon_form .has-error .form-control:focus {
	    -webkit-box-shadow: none;
	    box-shadow: none;
		}

		.coupon_message {
			display: block; 
			padding: 10px 0 0 15px;
		}
		.coupon_message.error {
			color: #e74c3c;
		}
		.coupon_message.correct {
			color: #2ecc71;
		}	







/*
	=================================================================================
	BOTONES
	=================================================================================
*/

	.button {
		display: inline-block;
		position: relative;
		cursor: pointer;
		outline: none;
		white-space: nowrap;
		margin: 0 0 10px 0;
		padding: 0 22px;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: #1ABC9C;
		color: #FFF;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		border: 2px solid transparent;
		text-shadow: none;
		border-radius: 3px;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}

	.button_default {
	  color: #333;
	  background-color: #fff;
	  border-color: #ccc;
	}
	.button_default:hover {
	  color: #333;
	  background-color: #e6e6e6;
	  border-color: #adadad;
	}

	.button_dark {
		background-color: #444;
	}
	.button_dark:hover {
		background-color: #ccc;
		color: #444;
	}

	.button_green {
	  color: #fff;
	  background-color: #1abc9c;
	  border-color: #1abc9c;
	}
	.button_green:hover {
	  color: #fff;
	  background-color: #00ad8e;
	  border-color: #00ad8e;
	}

	.button_left {
		float: left;
	}
	.button_right {
		float: right;
	}



/*
	=================================================================================
	ACORDEÓN
	=================================================================================
*/

	.accordion {
		margin-bottom: 20px;
		max-width: 550px;
	}

	.acctitle {
		display: block;
		position: relative;
		line-height: 24px;
		margin: 0;
		font-size: 14px;
		font-weight: bold;
		color: #444;
		cursor: pointer;
		border-top: 1px dotted #DDD;
		padding: 10px 0 10px 20px;
	}

	.acctitlec {
		cursor: auto;
	}

	.acctitle:first-child {
		border-top: none;
	}

	.acctitle i {
		position: absolute;
		top: 0;
		left: 0;
		width: 14px;
		text-align: center;
		font-size: 14px;
		line-height: 44px;
	}

	.acctitle i.acc-open,
	.acctitlec i.acc-closed {
		display: none;
	}

	.acctitlec i.acc-open {
		display: block;
	}

	.acc_content {
		position: relative;
		padding: 0 0 15px 20px;
	}

	.accordion.accordion-lg .acctitle {
		font-size: 23px;
		line-height: 44px;
		padding-left: 30px;
		font-weight: 400;
	}
	.accordion.accordion-lg .acctitle i {
		width: 20px;
		font-size: 20px;
		line-height: 64px;
	}
	.accordion.accordion-lg .acc_content {
		padding: 10px 0 30px 30px;
	}



/*
	=================================================================================
	DIRECCIONES
	=================================================================================
*/

	.checkout_address, .checkout_addresses {
		background: #f8f8f8;
		padding: 10px 20px 10px 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 0px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.address_selected {
		background: #fff3cc;
		border-color: #fbe8aa;
	}

	.address_selected:before {
		content: "\e013";
		position: absolute;
		padding: 6px;
		right: 25px;
		top: 10px;
		color: #fff;
	  font-family: 'Glyphicons Halflings';
	  font-style: normal;
	  font-weight: 400;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  background: #fbbd19;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  -o-border-radius: 50%;
	  border-radius: 50%;
	}

	.btn-group-justified.btn-group .btn {
		border: 1px solid #e7e7e7;
		border-top: 0;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-topright: 0px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}



/*
	=================================================================================
	CLASES DE AYUDA
	=================================================================================
*/

	.nobottommargin {
		margin-bottom: 0 !important;
	}

	.divide10 {
		height: 10px;
	}
	.divide20 {
		height: 20px;
	}
	.divide30 {
		height: 30px;
	}



/*
	=================================================================================
	MEDIA QUERIES
	=================================================================================
*/

  /* Large Devices, Wide Screens */
  @media only screen and (max-width : 1200px) {

		table#summary h2 {
			font-size: 18px;
		}

  }


  /* Medium Devices, Desktops */
  @media only screen and (max-width : 992px) {

		.container {
		  width: 100% !important;
		}

		#steps .bs-wizard-step .bs-wizard-stepnum {
			font-size: 14px;
		}

		#tabla-responsive thead tr th {
			font-size: 14px;
		}

		table#summary h2 {
			font-size: 16px;
		}

		.form-myfocus .fila {
			margin-bottom: 20px;
		}

  }


  /* Small Devices, Tablets */
  @media only screen and (max-width : 768px) {

		.button_block { width: 100%; text-align: center; }

		.accordion.accordion-lg .acctitle {
	    font-size: 18px;
	    line-height: 32px;
	    padding-left: 30px;
	    font-weight: 400;
		}
		.accordion.accordion-lg .acctitle i {
	    width: 20px;
	    font-size: 18px;
	    line-height: 52px;
		}

		.form-myfocus.form-horizontal {
			max-width: 400px !important;
			margin: 0 auto;
		}

		.form-myfocus .fila {
			margin-bottom: 15px;
		}

  }


 /* Extra Small Devices, Phones */ 
  @media only screen and (max-width : 480px) {

  	body {
	    font-size: 13px;
	  }
	  h3 {
	  	font-size: 16px;
	    line-height: 36px;
	    margin-bottom: 0;
	  }

		#steps .bs-wizard-step .bs-wizard-stepnum {
			font-size: 12px;
		}
		#steps {
			padding-top: 20px;
	  	padding-bottom: 20px;
	  	margin-bottom: 20px
		}
		
		#tabla-responsive thead tr th {
			font-size: 14px;
		}

		.button_left, .button_right {
			float: none;
		}
		.button_block {
		 	display: block;
		 }

		.accordion.accordion-lg .acc_content {
			padding-top: 0;
		}

		.form-myfocus label {
			font-size: 11px;
			margin-bottom: 5px;
		}
		
		.form-myfocus .fila {
			margin-bottom: 10px;
		}

  }

  /* Custom, iPhone Retina */ 
  @media only screen and (max-width : 320px) {

  }



















/* -------------------------------------------------------------------------------------------------------------- */
/* GUS KA/Colors
/* -------------------------------------------------------------------------------------------------------------- */

.ka_status {
	-moz-border-radius:3px; border-radius:3px; -webkit-border-radius:3px;
	padding: 1px 3px 1px 3px;
	text-align:center; font-weight:normal; color:#fff;
}

.blue 	{ color: #629fcf; }
.red 		{ color: #bd4646; }
.orange { color: #CC6600; }
.green 	{ color: #379b3c; }
.green2 { color: #909139; }
.grey 	{ color: #5F5F5F; }
.grey2	{ color: #7D7D7D; }
.black 	{ color: #333333; }
.brown 	{ color: #9F6000; }
.yellow { color: #d9c855; }

.bg_blue 	{ background:#629fcf; }
.bg_green 	{ background:#379b3c; }
.bg_green2 	{ background:#63BE7a; }
.bg_yellow 	{ background:#d9c855; }
.bg_orange 	{ background:#CC6600; }
.bg_red 		{ background:#bd4646; }
.bg_grey 	{ background:#434343; }
.bg_grey2 	{ background:#6f6f6f; }
.bg_grey3 	{ background:#9f9f9f; }
.bg_brown 	{ background:#af9c7e; }
.bg_black 	{ background:#000000; }