/* 

	Exactubooks . Components

*/

/* Buttons */

	/* Buttons . Defaults */
		button,
		.button,
		a.button {
			display: inline-block;
			font-family: "Gotham";
			font-weight: 200;
			text-align: center;
			text-decoration: none;
			border: 1px solid transparent;
			box-sizing: border-box;
			cursor: pointer;
			outline: none;
			user-select: none;
			transition: 0.2s filter ease-in-out;
		}

		button:hover,
		.button:hover,
		button.hover,
		.button.hover {
			filter: brightness(110%) !important;
		}

		button.pressed,
		.button.pressed {
			filter: brightness(90%) !important;
			transition: none;
		}

		button.disabled,
		button.disabled:hover
		button.pressed.disabled,
		.button.disabled,
		.button.pressed.disabled,
		.button.disabled:hover {
			opacity: 0.3;
			filter: none;
			cursor: not-allowed;
		}

	/* Buttons . Sizing */

		/* Extra small */
		@media (min-width: 10px) {

			button, 
			.button    { height: 36px; padding: 1px 16px 0px 16px; line-height: 34px; font-size: 14px; border-radius: 16px; }
			.bs_tiny   { height: 16px; padding: 1px  8px 0px  8px; line-height: 14px; font-size: 10px; border-radius:  8px; }
			.bs_small  { height: 24px; padding: 1px 12px 0px 12px; line-height: 22px; font-size: 12px; border-radius: 12px; }
			.bs_medium { height: 36px; padding: 1px 14px 0px 14px; line-height: 34px; font-size: 14px; border-radius: 18px; }
			.bs_large  { height: 48px; padding: 1px 16px 0px 16px; line-height: 46px; font-size: 16px; border-radius: 24px; }

		}

		/* Small */
		@media (min-width: 768px) {
			
			button, 
			.button    { height: 36px; padding: 1px 16px 0px 16px; line-height: 34px; font-size: 14px; border-radius: 16px; }
			.bs_tiny   { height: 16px; padding: 1px  8px 0px  8px; line-height: 14px; font-size: 10px; border-radius:  8px; }
			.bs_small  { height: 24px; padding: 1px 12px 0px 12px; line-height: 22px; font-size: 12px; border-radius: 12px; }
			.bs_medium { height: 36px; padding: 1px 14px 0px 14px; line-height: 34px; font-size: 14px; border-radius: 18px; }
			.bs_large  { height: 48px; padding: 1px 16px 0px 16px; line-height: 46px; font-size: 16px; border-radius: 24px; }

		}

		/* Medium */
		@media (min-width: 992px) {

			button, 
			.button    { height: 36px; padding: 1px 16px 0px 16px; line-height: 34px; font-size: 14px; border-radius: 16px; }
			.bs_tiny   { height: 16px; padding: 1px  8px 0px  8px; line-height: 14px; font-size: 10px; border-radius:  8px; }
			.bs_small  { height: 24px; padding: 1px 12px 0px 12px; line-height: 22px; font-size: 12px; border-radius: 12px; }
			.bs_medium { height: 36px; padding: 1px 14px 0px 14px; line-height: 34px; font-size: 14px; border-radius: 18px; }
			.bs_large  { height: 48px; padding: 1px 16px 0px 16px; line-height: 46px; font-size: 16px; border-radius: 24px; }

		}

		/* Buttons . Width . Relative width */
		.bw_full,
		.bw_wide,
		.bw_narrow { 
			padding: 0px;
		}

		/* Buttons . Sizing . Absolute width */
		.bw_100   { width:  100px !important; }
		.bw_150   { width:  150px !important; }
		.bw_200   { width:  200px !important; }
		.bw_250   { width:  250px !important; }
		.bw_300   { width:  300px !important; }
		.bw_350   { width:  350px !important; }

		.bw_100, .bw_150, .bw_200,
		.bw_250, .bw_300, .bw_350 { 
			min-width:  100px !important; 
		}

		/* Extra small */
		@media (min-width: 10px) {

			.bw_normal { width:  240px; }
			.bw_full   { width:  100%; }
			.bw_wide   { width:  80%;  }
			.bw_narrow { width:  50%;  }

		}

		/* Small */
		@media (min-width: 768px) {

			.bw_normal { width:  240px; }
			.bw_full   { width:  100%; }
			.bw_wide   { width:  80%;  }
			.bw_narrow { width:  50%;  }

		}

		/* Medium */
		@media (min-width: 992px) {

			.bw_normal { width:  240px; }
			.bw_full   { width:  100%; }
			.bw_wide   { width:  80%;  }
			.bw_narrow { width:  50%;  }

		}

	/* Buttons . Colors */

		button,
		.button,
		a.button {
			color: #ffffff;
			background-color: #3898F2;
		}

		.bc_red {
			color: #ffffff;
			background-color: #E35254 !important;
		}

		.bc_green {
			color: #ffffff;
			background-color: #60B57E !important;
		}

		.bc_blue {
			color: #ffffff;
			background-color: #3898F2 !important;
		}

		.bc_orange {
			color: #ffffff;
			background-color: #ffaa54 !important;
		}

		.bc_yellow {
			color: #ffffff;
			background-color: #ffea00 !important;
		}

		.bc_dark_gray,
		.bc_dark_grey {
			color: #ffffff;
			background-color: #59595b !important;
		}

		.bc_medium_gray,
		.bc_medium_grey {
			color: #ffffff;
			background-color: #bbbcbf !important;
		}

		.bc_light_gray,
		.bc_light_grey {
			color: rgba(0,0,0,0.6)!important;
			background-color: #e6e6e7 !important;
		}

		.bc_white {
			border: 1px solid #3898F2 !important;
			color: #3898F2!important;
			background-color: white !important;
		}

		.bc_black {
			color: #ffffff;
			background-color: black !important;
		}

/* Forms */

	input,
	textarea {
		font-family: "Adobe Caslon Pro";
		font-weight: bold;
	}

	/* Labels */

		/* Labels . Defaults */

			label {
				display: block;
				color: #8C8C8C !important;
			}

			

		/* Labels . Sizing */

			/* Extra small */
			@media (min-width: 10px) {

				label		 { font-size: 18px; }
				label.tiny	 { font-size: 10px; }
				label.small	 { font-size: 14px; }
				label.medium { font-size: 18px; }
				label.large	 { font-size: 20px; }

			}

			/* Small */
			@media (min-width: 768px) {

				label		 { font-size: 18px; }
				label.tiny	 { font-size: 10px; }
				label.small	 { font-size: 14px; }
				label.medium { font-size: 18px; }
				label.large	 { font-size: 20px; }

			}

			/* Medium */
			@media (min-width: 992px) {

				label		 { font-size: 18px; }
				label.tiny	 { font-size: 10px; }
				label.small	 { font-size: 14px; }
				label.medium { font-size: 18px; }
				label.large	 { font-size: 20px; }

			}

	/* Placeholders */

		::placeholder {
			color: rgba(0,0,0,0.2);
			opacity: 1;
			font-family: Gotham;
		}

	/* Textfields */

		/* Textfields . Defaults */

			input[type="text"],
			input[type="password"] {
				color: #404040;
				background-color: #F8F8F8;
				border: 1px solid #B3B6B7;
				box-sizing: border-box;
				outline: none;
				transition: all 0.2s ease-in-out;
				font-weight: 300;
			}

			input[type="text"]:focus,
			input[type="password"]:focus {
				border-color: #3898F2;
			}

			input[type="text"]:disabled,
			input[type="password"]:disabled {
				opacity: 0.3;
				user-select: none;
			}

			input[type="text"]:read-only,
			input[type="password"]:read-only {
				background-color: transparent;
				border: 1px dashed rgba(0,0,0,0.2)!important;
			}

			input[type="text"]:read-only:focus,
			input[type="password"]:read-only:focus {
				border: 1px dashed rgba(0,0,0,0.2)!important;
			}

		/* Textfields . Sizing */

			/* Extra small */
			@media (min-width: 10px) {

				input[type="text"],
				input[type="password"]			{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].tiny,
				input[type="password"].tiny		{ height: 16px; padding: 0px  6px 0px  6px; line-height: 15px; font-size: 10px; }
				input[type="text"].small,
				input[type="password"].small	{ height: 24px; padding: 0px 10px 0px 10px; line-height: 24px; font-size: 14px; }
				input[type="text"].medium,
				input[type="password"].medium	{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].large,
				input[type="password"].large	{ height: 48px; padding: 0px 16px 0px 10px; line-height: 46px; font-size: 28px; }

			}

			/* Small */
			@media (min-width: 768px) {

				input[type="text"]				{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].tiny,
				input[type="password"].tiny		{ height: 16px; padding: 0px  6px 0px  6px; line-height: 15px; font-size: 10px; }
				input[type="text"].small,
				input[type="password"].small	{ height: 24px; padding: 0px 10px 0px 10px; line-height: 24px; font-size: 14px; }
				input[type="text"].medium,
				input[type="password"].medium	{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].large,
				input[type="password"].large	{ height: 48px; padding: 0px 16px 0px 10px; line-height: 46px; font-size: 28px; }

			}

			/* Medium */
			@media (min-width: 992px) {

				input[type="text"]				{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].tiny,
				input[type="password"].tiny		{ height: 16px; padding: 0px  6px 0px  6px; line-height: 15px; font-size: 10px; }
				input[type="text"].small,
				input[type="password"].small	{ height: 24px; padding: 0px 10px 0px 10px; line-height: 24px; font-size: 14px; }
				input[type="text"].medium,
				input[type="password"].medium	{ height: 36px; padding: 0px 10px 0px 10px; line-height: 34px; font-size: 18px; }
				input[type="text"].large,
				input[type="password"].large	{ height: 48px; padding: 0px 16px 0px 10px; line-height: 46px; font-size: 28px; }

			}

	/* Textareas */

		/* Textareas . Defaults */

			textarea {
				padding: 10px;
				color: #404040;
				background-color: #F8F8F8;
				border: 1px solid #B3B6B7;
				box-sizing: border-box;
				outline: none;
				transition: all 0.2s ease-in-out;
			}

		/* Textareas . Sizing */

			/* Extra small */
			@media (min-width: 10px) {
				textarea		{ font-size: 18px; }
				textarea.tiny	{ font-size: 10px; }
				textarea.small	{ font-size: 14px; }
				textarea.medium	{ font-size: 18px; }
				textarea.large	{ font-size: 20px; }
			}

			/* Small */
			@media (min-width: 768px) {
				textarea		{ font-size: 18px; }
				textarea.tiny	{ font-size: 10px; }
				textarea.small	{ font-size: 14px; }
				textarea.medium	{ font-size: 18px; }
				textarea.large	{ font-size: 20px; }
			}

			/* Medium */
			@media (min-width: 992px) {
				textarea		{ padding: 10px 10px 0px 10px; line-height: 23px; font-size: 18px; }
				textarea.tiny	{ padding: 6px   6px 0px  6px; line-height: 15px; font-size: 10px; }
				textarea.small	{ padding: 10px 10px 0px 10px; line-height: 19px; font-size: 14px; }
				textarea.medium	{ padding: 10px 10px 0px 10px; line-height: 23px; font-size: 18px; }
				textarea.large	{ padding: 16px 16px 0px 16px; line-height: 25px; font-size: 20px; }
			}

	/* Radio buttons */

		.radio {
			display: inline-block;
		}

		.radio label {
			display: inline-block;
			color: #404040 !important;
		}

	/* Checkbox buttons */

		.checkbox {
			display: inline-block;
		}

		.checkbox label {
			display: inline-block;
			color: #404040 !important;
		}

	/* Layout */

		/* Extra small */
		@media (min-width: 10px) {

			form label {
				margin-bottom: 4px;
			}

			form input {
				margin-bottom: 24px;
			}


		}

		/* Small */
		@media (min-width: 768px) {

			form label {
				margin-bottom: 4px;
			}

			form input {
				margin-bottom: 24px;
			}

		}

		/* Medium */
		@media (min-width: 992px) {

			form label {
				margin-bottom: 4px;
			}

			form input {
				margin-bottom: 24px;
			}

		}

/* Horizontal rule */

	hr {
		border: none;
		border-top: 1px dashed rgba(96,173,245,0.5);
		border-spacing: 0px;
	}

/* Dividers */

	.divider {
		position: relative;
		display: block;
		height: 24px;
		width: 100%;
		margin-bottom: 24px;
		line-height: 48px;
		text-align: center;
		overflow: visible;
		border-bottom: 1px dashed rgba(96,173,245,0.5);
	}

	.divider div {
		display: block;
		margin: 0px auto 0px auto;
		height: 48px;
		width: 48px;
		background-size: 48px 48px;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.divider.basket div {
		background-image: url(../media/divider.basket.png);
	}

	.divider.newsletter div {
		background-image: url(../media/divider.newsletter.png);
	}



/* Lists */

	/* Lists . Catalog */

		.list.catalog {
			font-size: 0px;
			overflow: auto;
		}

		.list.catalog .item {
			float: left;
			box-sizing: border-box;
		}

		.list.catalog .item img {
			height: auto;
			width: 100%;
			margin-bottom: 10px;
		}

		.list.catalog .item h5,
		.list.catalog .item h6,
		.list.catalog .item p {
			padding: 0px 10px;
			overflow: hidden;
		}

		.list.catalog .item h6 {
			text-transform: uppercase;
		}

		.list.catalog .item .button{
			float: none;
			display: block;
			margin: 0px auto 0px auto;
			width: 120px;
		}

		.list.catalog .item p { 
			font-weight: 400;
		}

		/* Extra small */
		@media (min-width: 10px) {


			.list.catalog {padding: 0px 16px;}
			.list.catalog .item { width: 50%; padding: 0px 8px; margin-bottom: 24px;}
			.list.catalog .item h5 {font-size: 11px !important;}
			.list.catalog .item h6 {font-size: 10px !important;}

			.list.catalog .item h5{
				height: 50px; 
			}

			.list.catalog .item h5,
			.list.catalog .item h6,
			.list.catalog .item p { padding: 0px 5px;}

			.list.catalog .item p { font-size: 14px; line-height: 20px;}
			.list.catalog .item p span { font-size: 12px; line-height: 20px;}

		}

		/* Small */
		@media (min-width: 768px) {

			.list.catalog {padding: 0px 6px;}
			.list.catalog .item { width: 33.33%; padding: 0px 16px; margin-bottom: 32px; }
			.list.catalog .item h5 {font-size: 12px !important;}
			.list.catalog .item h6 {font-size: 11px !important;}

			.list.catalog .item p { font-size: 14px; line-height: 20px;}
			.list.catalog .item p span { font-size: 12px; line-height: 20px;}

		}

		/* Medium */
		@media (min-width: 992px) {

			.list.catalog .item h5{
				height: 54px; 
			}

			.list.catalog {padding: 0px 10px;}
			.list.catalog .item { width: 50%; padding: 0px 16px; margin-bottom: 36px; }
			.list.catalog .item h5 {font-size: 13px !important;}
			.list.catalog .item h6 {font-size: 12px !important;}

			.list.catalog .item p { font-size: 14px; line-height: 20px;}
			.list.catalog .item p span { font-size: 12px; line-height: 20px;}
		}

		/* Large */
		@media (min-width: 1200px) {

			.list.catalog .item h5{
				height: 54px; 
			}

			.list.catalog {padding: 0px 10px;}
			.list.catalog .item { width: 33.33%; padding: 0px 16px; margin-bottom: 48px; }

			.list.catalog .item p { font-size: 14px; line-height: 20px;}
			.list.catalog .item p span { font-size: 12px; line-height: 20px;}

		}

	/* Lists . Categories */

		.list.categories {
			padding: 0px;
		}

		.list.categories .item {
			font-weight: 400;
		}

/* Newsletter */
	
	.form.newsletter {
		width: 70%;
		margin: 0px auto 0px auto;
		padding-top: 20px;
	}

	.form.newsletter {
		text-align: center;
	}

	.form.newsletter .input_group {
		box-sizing: border-box;
		font-size: 0px;
		overflow: auto;
		border-bottom: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 10px;
	}

	.form.newsletter .input_group div {
		padding-right: 0px;
	}

	.form.newsletter .input_group input {
		float: left;
		width: 100%;
		box-sizing: border-box;
		margin-top: 0px;
		margin-bottom: 0px;
		border: none;
		text-align: center;
		background-color: transparent;
	}

	.form.newsletter .input_group .button {
		position: relative;
		float: right;
		height: 36px;
		width: 36px;
		color: black;
		margin-top: -36px;
		font-family: Gotham;
		background-color: #ffffff;
		background-image: url(../media/arrow.right.dark.png);
		background-size: 30%;
		background-position: center center;
		background-repeat: no-repeat;
		filter: brightness(250%);
		border-radius: 0px;
	}

	.form.newsletter a {
		font-size: 10px;
	}

	/* Labels . Sizing */

	/* Extra small */
	@media (min-width: 10px) {
		.form.newsletter { width: 85%; }
		.form.newsletter .input_group input { font-size: 14px; }
	}

	/* Small */
	@media (min-width: 768px) {
		.form.newsletter { width: 80%; }
		.form.newsletter .input_group input { font-size: 16px; }
	}

	/* Medium */
	@media (min-width: 992px) {
		.form.newsletter { width: 90%; }
	}

	/* Large */
	@media (min-width: 1200px) {
		/* Headers font size */
		.form.newsletter { width: 70%; }
	}


/* Form . Product */

	.form.product {
		text-align: center;
	}

	.form.product .quantifier {
		margin: 20px 0px 20px 0px;
	}

	.form.product h3,
	.form.product h3 span {
		font-size: 18px;
		font-weight: bold;
		color: #489457;
		margin-bottom: 20px;
	}

/* Form  */
	
	form row.products,
	form row.protocols,
	form row.shipping,
	form row.info,
	form row.delivery,
	form row.invoicing,
	form row.aditional{
		background-size: 7px 1px;
		background-repeat: repeat-x;
		background-position: center bottom; 
		background-image: url(../media/dashed.blue.light.png);
	}

	form row.shipping,
	form row.aditional {
		background-image: none;
	}

	form row .row_title {
		background-position: 10px 0px;
		background-repeat: no-repeat;
		background-size: 24px 24px;
	}

	form row .row_title h3 {
		padding-left: 42px;
		font-size: 16px;
	}

	form row.products .row_title {
		background-image: url(../media/icon.cart.form.row.products.png);
	}

	form row.protocols .row_title {
		background-image: url(../media/icon.cart.form.row.protocols.png);
	}

	form row.shipping .row_title {
		background-image: url(../media/icon.cart.form.row.shipping.png);
	}

	form row.info .row_title {
		background-image: url(../media/icon.cart.form.row.info.png);
	}

	form row.delivery .row_title {
		background-image: url(../media/icon.cart.form.row.delivery.png);
	}

	form row.invoicing .row_title {
		background-image: url(../media/icon.cart.form.row.invoicing.png);
	}

	form row .row_content {
	}

	form row.payment input {
		margin-bottom: 6px !important;
	}

	/* Extra small */
	@media (min-width: 10px) {

		form row .row_title {
			background-position: 10px 4px;
			background-size: 16px;
		}

		form row .row_title h3 {
			padding-left: 32px;
			font-size: 13px;
		}

	}

	/* Small */
	@media (min-width: 768px) {

		form row .row_title {
			background-position: 10px 3px;
			background-size: 20px;
		}

		form row .row_title h3 {
			padding-left: 38px;
			font-size: 16px;
		}

	}

	/* Medium */
	@media (min-width: 990px) {


	}

	/* Large */
	@media (min-width: 1200px) {


	}

/* Amount footer */

	.amount_footer h3,
	.amount_footer span {
		color: #489457 !important;
		font-weight: bold !important;
	}

	

	/* Extra small */
	@media (min-width: 10px) {

		.amount_footer h3 {
			padding-top: 10px;
		}

		.amount_footer h3,
		.amount_footer span {
			font-size: 18px;
		}

		.amount_footer input {
			margin-top: 20px;
		}

	}

	/* Small */
	@media (min-width: 768px) {

		.amount_footer h3 {
			padding-top: 14px;
		}

		.amount_footer h3,
		.amount_footer span {
			font-size: 26px;
		}

		.amount_footer input {
			margin-top: 20px;
		}

	}

	/* Medium */
	@media (min-width: 990px) {

		.amount_footer h3 {
			padding-top: 14px;
		}

		.amount_footer h3,
		.amount_footer span {
			font-size: 26px;
		}

		.amount_footer input {
			margin-top: 20px;
		}

	}

	/* Large */
	@media (min-width: 1200px) {

		.amount_footer h3 {
			padding-top: 14px;
		}

		.amount_footer h3,
		.amount_footer span {
			font-size: 26px;
		}

		.amount_footer input {
			margin-top: 20px;
		}

	}

/* Carousel */

	.carousel {}

	.carousel .item img {
		width: 100%;
	}

/* Cart Steps overview */
.cart_steps_overview {
	margin-bottom: 48px;
}

.cart_steps_overview .cart_steps_list {
	width: 240px;
	margin: 0px auto 20px auto;
	font-size: 0px;
	text-align: center;
	overflow: auto;
	background-image: url(../media/dashed.grey.light.png);
	background-position: center center;
	background-repeat: repeat-x;
}

.cart_steps_overview .cart_steps_list .step {
	display: inline-block;
	height: 24px;
	width: 24px;
	margin: 0px 24px 0px 24px;
	background-color: #E4E5E6;
	border-radius: 12px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.cart_steps_overview .cart_steps_list .step.active {
	background-color: #3898F2;
}

.cart_steps_overview .cart_steps_list .step.done {
	background-color: #81B895;
}

.cart_steps_overview .cart_steps_list .step:first-child {
	margin-left: 0px;
}

.cart_steps_overview .cart_steps_list .step:last-child {
	margin-right: 0px;
}


.cart_steps_overview .cart_steps_list .step.basket {
	background-image: url(../media/icon.cart.step.basket.png);
}

.cart_steps_overview .cart_steps_list .step.info {
	background-image: url(../media/icon.cart.step.info.png);
}

.cart_steps_overview .cart_steps_list .step.payment {
	background-image: url(../media/icon.cart.step.payment.png);
}

.cart_steps_overview .cart_steps_list .step.finish {
	background-image: url(../media/icon.cart.step.finish.png);
}

.cart_steps_overview h2 {
	font-size: 21px;
	text-align: center;
}


.payment_info {
	border: 1px solid #404040;
}
.payment_info tr td {
	font-size: 14px;
	color: black;
}

.protocol_panel {
	margin-top: 60px;
	border: 1px dashed #B34042;
}