/****************************************\
 *   Click&Drive. All Rights Reserved   *
\****************************************/

html, body { height: 100%; min-width: 280px; }
html { background-color: #2D3438; }

body {
	background-color: #f1f1f1;
	color: rgba(0, 0, 0, 0.87);
	font-family: 'Montserrat', Verdana, Arial;
	overflow-y: scroll;
}

	body.login {overflow-y: auto}

a {
	color: #3b1942;
	text-decoration: none;
	transition: color, background-color .12s ease-out;
}

a:hover, a:focus, span {color: #e30e7d}
input, select, textarea, span.data {font-family: 'Droid Sans Mono', courier, monospace; color: rgba(0, 0, 0, .56)}
input[type=submit], .ff {font-family: inherit}
button {border: none}
fieldset {background-color: #fff; border: 0; padding: 0 1em; margin: 2em 0; min-height: 5em; box-shadow: 0 0 0 1px rgb(224, 224, 224) inset, 0 0 2em -.5em rgba(0, 0, 0, .12)}
legend {background-color: #e0e0e0; padding: .4em 1em; box-shadow: 0 0 0 1px rgb(213, 213, 213) inset, 0 0 2em -.5em rgba(0, 0, 0, .12)}
select {background-color: #fff}
select[disabled] {background-color: #eee}
option[disabled] {color: rgba(0, 0, 0, 0.38)}
del {color: #ef9a9a}

blockquote {
	font-style: italic;
	line-height: 1.3;
	margin: 1em auto 0;
	padding: 0.25em 50px;
	position: relative;
}

blockquote:before {
	color: rgba(0, 0, 0, .12);
	content: "\201C";
	display: block;
	font-size: 100px;
	left: -5px;
	position: absolute;
	top: -25px;
}

blockquote cite {
	color: rgba(0, 0, 0, .38);
	display: block;
	font-size: 1.15em;
	margin-top: 15px;
	text-align: right;
}

blockquote cite:before {
	content: "\2014 \2009";
}

.no-anim {-webkit-animation: none; animation: none}
.fr {float: right}
.fl {float: left}
.clear {display: block; clear: both}
.ofa {overflow: auto !important}
.ofv {overflow: visible !important}
.ofh {overflow: hidden !important}
.dn {display: none !important}
.ac {text-align: center}
.tj {text-align: justify}
.mc {margin: 0 auto 1em !important}
.mh {max-height: 32em; overflow: auto}
.fh {min-height: 12em}
.alltr{transition: all .2s ease}
.underline{text-decoration: underline}

.w2 {width: 20%}
.w3 {width: 30%}
.w4 {width: 40%}
.w5 {width: 50%}
.w6 {width: 60%}
.w7 {width: 70%}
.w8 {width: 80%}
.w9 {width: 90%}

.chosen.w2, .chosen2.w2, .chosen3.w2 {width: 20% !important}
.chosen.w3, .chosen2.w3, .chosen3.w3 {width: 30% !important}
.chosen.w4, .chosen2.w4, .chosen3.w4 {width: 40% !important}
.chosen.w5, .chosen2.w5, .chosen3.w5 {width: 50% !important}
.chosen.w6, .chosen2.w6, .chosen3.w6 {width: 60% !important}
.chosen.w7, .chosen2.w7, .chosen3.w7 {width: 70% !important}
.chosen.w8, .chosen2.w8, .chosen3.w8 {width: 80% !important}
.chosen.w9, .chosen2.w9, .chosen3.w9 {width: 90% !important}

.w11 {width: 11.11111111%}
.w12 {width: 12.5%}
.w14 {width: 14.28571429%}
.w16 {width: 16.66666666%}
.w25 {width: 25%}
.w33 {width: 33.33333333%}
.w37 {width: 37.5%}
.w41 {width: 41.66666666%}
.w58 {width: 58.33333333%}
.w62 {width: 62.5%}
.w66 {width: 66.66666666%}
.w75 {width: 75%}
.w85 {width: 85.71428571%}
.w87 {width: 87.5%}
.w88 {width: 88.88888888%}

.f1 {font-size: 1em}
.f2 {font-size: 2em}
.f3 {font-size: 3em}
.f4 {font-size: 4em}
.f5 {font-size: 5em}
.f6 {font-size: 6em}

.fm1 {font-size: 1.5em}
.fm2 {font-size: 2.5em}
.fm3 {font-size: 3.5em}
.fm4 {font-size: 4.5em}
.fm5 {font-size: 5.5em}

.fs {font-size: .862em}

.fs1 {font-size: .1em}
.fs2 {font-size: .2em}
.fs3 {font-size: .3em}
.fs4 {font-size: .4em}
.fs5 {font-size: .5em}
.fs6 {font-size: .6em}
.fs7 {font-size: .7em}
.fs8 {font-size: .8em}
.fs9 {font-size: .9em}

.fs75 {font-size: .75em}
.fs85 {font-size: .85em}
.fs94 {font-size: .94em}
.fs95 {font-size: .95em}

.mt1 {margin: .2em .1em}

.mtt3 {margin-top: 0.3em}

.ml1 {margin-left: 1em}
.ml2 {margin-left: 2em}

.mlm0 {margin-left: .5em}

.mr1 {margin-right: 1em}
.mr2 {margin-right: 2em}

.mm1 {margin: .5em}

.nmi  {margin: 0 !important}
.nmti {margin-top: 0 !important}
.nmli {margin-left: 0 !important}
.nmri {margin-right: 0 !important}
.nmbi {margin-bottom: 0 !important}
.nbsi {box-shadow: none !important}
.nmhi {min-height: 0 !important;}

.pmlm7i {margin-left: 7.5% !important}

.npi  {padding: 0 !important}

.pm1 {padding: .5em}

.lh11 {line-height: 1.1}
.lh12 {line-height: 1.2}
.lh13 {line-height: 1.3}
.lh14 {line-height: 1.4}
.lh15 {line-height: 1.5}

.grey      {color: rgba(0, 0, 0, .54);}
.green     {color: green}
.darkgreen {color: darkgreen}
.orange    {color: orange}
.orangered {color: orangered}
.red       {color: red}
.darkred   {color: darkred}
.black     {color: rgba(0, 0, 0, 0.87);}
.white     {color: white;}
.lgrey     {color: rgb(189, 189, 189);}
.icolor    {color: inherit;}

.bggreen  {background-color: rgb(180, 200, 180) !important}
.bgred    {background-color: rgb(220, 175, 175) !important}
.bgorange {background-color: rgb(255, 220, 175) !important}
.bgyellow {background-color: rgb(255, 255, 200) !important}
.bgaccent {background-color: rgb(240, 190, 220) !important}
.bgbtnsel {background-color: rgb(228, 15, 126, 55%) !important}

.mono {font-family: 'Droid Sans Mono', courier, monospace}
.bold {font-weight: bold}
.upper {text-transform: uppercase;}

.pointer { cursor: pointer; }

.rel {position: relative !important}
.abs {position: absolute !important}
.fix {position: fixed !important}

.abs-tr {top: 0; right: 0}
.abs-tl {top: 0; left: 0}
.abs-br {bottom: 0; right: 0}
.abs-bl {bottom: 0; left: 0}

.dil  {display: inline}
.dilb {display: inline-block}

.help {
	position: relative;
	height: 24px;
	width: 24px;
	background-size: 24px;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4px;
	margin: 2px;
	opacity: .54;
	z-index: 100;
}

	.help.big {
		height: 36px;
		width: 36px;
		background-size: 36px;
		padding: 3px;
		margin: 6px;
	}

	.help.disabled {
		opacity: .26;
	}

	.help.info-outline-white {
		color: white;
		background-position: right;
		padding: 0 24px 0 0;
		background-size: 20px;
		opacity: .7;
	}

.button {
	background-color: #e40f7e;
	color: white;
	display: inline-block;
	height: 3em;
	position: relative;
	text-align: center;
	padding: 0 1em;
}
.button:hover {color: white}
.button:focus {color: white;box-shadow: 0 0 0 4px #e85997 inset}
.button.dark {background-color: #57355a}
.button.dark:hover,
.button.dark:focus,
.button.dark.active {background-color: #e40f7e}
.button.light {background-color: #8b738d}
.button.light:hover,
.button.light:focus {background-color: #e85997}
.button.off, .button[disabled] {background-color: #9e9e9e}
.button.off:hover,
.button.off:focus {background-color: #e40f7e}
.button[disabled]:hover { background-color: #9e9e9e; }
.button.low,
.button.low:hover,
.button.low:focus {
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
}
.button.low.inline {
	margin: -.2em 0 0 1em !important;
}
a.button {line-height: 3em}
#page input.button.low {border: none !important}

.base {background-color: #f8f8f8}

.close {
	background-color: #e30e7d;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.5em;
	cursor: pointer;
	float: right;
	height: 3em;
	width: 3em;
}
.close:focus {box-shadow: 0 0 0 4px #e85997 inset}

.bar {
	background-color: #e0e0e0;
	color: #3b1942;
	min-height: 3em;
	line-height: 3em;
	margin: 0 0 1em;
	overflow: hidden;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}
.bar.title {font-size: 1.5em}
.bar.mline {white-space: nowrap;height: auto;min-height: 3em}
.bar h2, .bar h3, .bar h4, .bar h5, .bar h6 {
	box-sizing: border-box;
	margin: 0;
	overflow: hidden;
	padding: 0 25%;
	position: absolute;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
.bar h2 {font-size: 1.16em}
.bar h3 {font-size: 1.08em}
.bar h4 {font-size: 1em}
.bar h5 {font-weight: normal}
#page .bar select {
	background-color: #e0e0e0;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
	color: #3b1942;
	cursor: pointer;
	font-size: inherit;
	font-weight: bold;
	height: 2.45rem;
	margin: 0;
	padding: 0 1em;
}
#page .bar select:focus {
	background-color: #f1f1f1;
	box-shadow: none;
}

.bar .arrow.back {
	background-color: #d5d5d5;
	background-position: center left 0.4em;
	background-repeat: no-repeat;
	color: #757575;
	cursor: pointer;
	height: 3em;
	left: 0;
	padding-left: 3em;
	position: absolute;
	z-index: 10;
}

.box {
	background-color: #f1f1f1;
	box-sizing: border-box;
	margin: 0 0 1em;
	min-height: 8em;
	position: relative;
}
.box.semi {width:48%}
.in {margin: 0 1% 1em}
.box.bdr {border: 1px solid #e0e0e0;}

.block {
	background-color: #e0e0e0;
	box-sizing: border-box;
	color: rgba(0, 0, 0, .54);
	display: inline-block;
	line-height: 3em;
	padding: 0 1em;
	overflow: hidden;
	margin: 0;
}

	.block.icon {
		background-position: 1em center;
		background-repeat: no-repeat;
		background-size: 2.5em 2em;
		padding: 0 1em 0 4.5em;
	}

		.block.icon.fr {
			background-position: right 1em center;
			padding: 0 4.5em 0 1em;
		}

		.block.icon.notext {
			background-position: center;
			background-size: 2.2em;
			height: 3em;
			padding: 0;
			width: 3em;
		}

	a.block:hover {
		background-color: #d0d0d0;
	}

.arrow {background-size: 2.2em !important}

.content {position: relative; padding: 0 1em 0.01em}
.content form {color: rgba(0, 0, 0, .57)}
.sec {color: rgba(0, 0, 0, .54); font-size: .862em}

.alert, .success, .notice, .info {
	background-position: right 0em bottom -1em;
	background-repeat: no-repeat;
	box-sizing: border-box;
	color: rgba(0, 0, 0, 0.57);
	font-size: .8em;
	margin-bottom: 1.2em;
	padding: 1em;
}

	.alert.f1, .success.f1, .notice.f1, .info.f1 {
		font-size: .9em;
	}

	.alert.s, .success.s, .notice.s, .info.s {
		font-size: .74em;
	}

	.alert.xs, .success.xs, .notice.xs, .info.xs {
		font-size: .68em;
	}

	.alert p, .success p, .notice p, .info p {
		display: inline-block;
		line-height: 1.5em;
		margin: .75em 0;
	}

	.alert .button:focus, .success .button:focus, .notice .button:focus, .info .button:focus {
		box-shadow: none;
	}

.alert {
	background-color: #ffa726;
	border-left: 1em solid #d47a1c;
}

	.alert .button {
		background: #d47a1c;
	}

.success {
	background-color: #75b72d;
	border-left: 1em solid #528120;
}

	.success .button {
		background: #528120;
	}

.notice {
	background-color: #e0e0e0;
	border-left: 1em solid #79647d;
}

	.notice .button {
		background: #79647d;
	}

.info {
	background-color: #ffcbe2;
	border-left: 1em solid #e85997;
}

	.info .button {
		background: #e85997;
	}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 13em;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
	z-index: 100;
}

	.dropdown-content.r {
		right: 0;
	}

	.dropdown-content.l {
		left: 0;
	}

	.dropdown-content.t {
		top: 2em;
	}

	.dropdown-content.b {
		bottom: 2em;
	}

	.dropdown-content.m {
		padding: .5em 0;
		min-width: 18em;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown-content .spacer {
		margin: .5em 0 0;
		border: 0;
	}

	.dropdown-content p {
		color: rgba(0,0,0,.54);
		display: block;
		margin: 0;
		padding: .6em .8em;
		text-align: center;
	}

	.dropdown-content p.d {
		color: rgba(0,0,0,.38);
	}

	.dropdown-content p.h {
		background-color: #8b738d;
		color: rgba(255,255,255,.7);
	}

	.dropdown-content a {
		color: rgba(0,0,0,.54);
		display: block;
		padding: .6em 1.2em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
	}

		.dropdown-content a:hover, .dropdown-content a:focus {
			background-color: #eee;
		}

		.dropdown-content a.red {
			color: red;
		}

			.dropdown-content a.red:hover, .dropdown-content a.red:focus {
				background-color: rgba(255, 0, 0, .08);
			}


.circlebtn {
	background-color: #eee;
	border-radius: 4em;
	display: block;
	height: 2.5em;
	width: 2.5em;
	margin: 0 .5em;
}

	.circlebtn.cancel {
		background-size: 1.4em;
		background-repeat: no-repeat;
		background-position: center;
		margin: 0 auto;
		cursor: pointer;
	}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	border-top: .5em solid #3b1942;
	border-right: .5em solid transparent;
	border-left: .5em solid transparent;
}

#ac {
	margin: 0 auto;
	color: rgba(0, 0, 0, .24);
	text-align: center;
	position: absolute;
	font-size: .6em;
	top: .5em;
	width: 100%;
}

/* Checkout
***********************************/

#navcart {
	background-color: #3b1942;
	cursor: pointer;
	height: 4em;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-color .2s ease-out;
	width: 7.6em;
}

	#navcart .cart {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 3em;
		display: inline-block;
		float: right;
		height: 4em;
		width: 4em;
	}

	#navcart .count {
		background: white;
		border-radius: .2em;
		color: #3b1942;
		display: inline-block;
		float: right;
		height: 1.4em;
		line-height: 1.4em;
		margin: 1.3em 0.4em;
		position: relative;
		width: 2.4em;
	}

		#navcart .count::after {
			content: '';
			border-bottom: .35em solid transparent;
			border-left: .65em solid #fff;
			border-top: .35em solid transparent;
			height: 0;
			position: absolute;
			right: -.6em;
			top: .35em;
			width: 0;
		}

		#navcart .count a {
			color: #3b1942;
			font-size: 1.2em;
			font-weight: bold;
		}

#navcart:hover {
	background-color: #57355a;
}

	#navcart:hover .count a {
		color: #57355a;
	}

#navcart.active {
	background-color: #e30e7d;
}

	#navcart.active .count a {
		color: #e30e7d;
	}


#navcart.left {
	right: initial;
	left: 0;
}

	#navcart.left .cart {
		float: left;
	}

	#navcart.left .count {
		float: left;
	}

		#navcart.left .count::after {
			border-left: 0;
			border-right: 0.66666em solid #fff;
			right: initial;
			left: -.6em;
		}


.cartlist {
	border-top: 2px dashed #9e9e9e;
	margin-top: 1em;
	min-height: 19.9em;
}

	.cartlist.m {
		margin-top: 2em;
		min-height: 18.9em;
	}

	.cartlist .item {
		border-bottom: 2px dashed #9e9e9e;
		color: rgba(0, 0, 0, .54);
		min-height: 4em;
		overflow: hidden;
		padding: .5em;
		position: relative;
	}

		.cartlist .item.full {
			max-height: auto;
		}

		.cartlist .item .title {
			border-bottom: 1px solid #e0e0e0;
			color: #e30e7d;
			font-size: 1.25em;
			font-weight: bold;
			padding-bottom: .1em;
			width: 80%;
		}

		.cartlist .item .desc {
			color: #9E9E9E;
			font-size: .75em;
			padding: .5em 0 0;
			transition: .4s all ease-out;
			width: 80%;
		}

			.cartlist .item .desc p {
				float: left;
				margin: 0;
			}

			.cartlist .item:hover .desc {
				color: #57355a;
			}

		.cartlist .item .cancel {
			background-position: center;
			background-repeat: no-repeat;
			background-size: 1.25em;
			cursor: pointer;
			height: 1.25em;
			padding: .5em;
			position: absolute;
			right: 0;
			top: 0;
			width: 1.25em;
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			filter: grayscale(100%);
			opacity: .4;
			transition: .4s all ease-out;
		}

			.cartlist .item:hover .cancel {
				-webkit-filter: grayscale(0%);
				-moz-filter: grayscale(0%);
				-o-filter: grayscale(0%);
				-ms-filter: grayscale(0%);
				filter: grayscale(0%);
				opacity: 1;
			}

		.cartlist .item .price {
			bottom: 0;
			color: #e30e7d;
			font-size: 1.25em;
			font-weight: bold;
			padding: 0 .4em .4em 0;
			position: absolute;
			right: 0;
			text-align: right;
		}

		.cartlist .item del.price {
			bottom: 2.65em;
			color: #ef9a9a;
			font-size: 0.75em;
			padding: 0 .66666em 0 0;
		}

	.cartlist .total {
		color: #57355a;
		min-height: 4.5em;
		overflow: hidden;
		padding: .5em;
		position: relative;
	}

		.cartlist .total .title {
			color: #57355a;
			font-size: 1.6em;
			font-weight: bold;
			text-align: right;
			width: 100%;
		}

		.cartlist .total .price {
			color: #e30e7d;
			font-size: 1.8em;
			font-weight: bold;
			padding-top: .1em;
			text-align: right;
		}

.cartresume {
	background-color: #e0e0e0;
	bottom: 0em;
	min-height: 22em;
	max-height: 22em;
	position: absolute;
	right: 0px;
	top: -1em;
}

	.cartresume .title {
		background-color: #ab9aad;
		color: #3b1942;
		font-weight: bold;
		line-height: 3em;
		min-height: 3em;
		overflow: hidden;
		position: relative;
		text-align: center;
		text-transform: uppercase;
	}

	.cartresume .item {
		border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
		height: 3em;
		line-height: 3em;
		padding: 0 1em;
		white-space: nowrap;
	}

		.cartresume .item .desc {
			color: #57355a;
			float: left;
			font-size: 1.1em;
			font-weight: bold;
		}

		.cartresume .item .price {
			color: #e30e7d;
			float: left;
			font-size: 1.25em;
			font-weight: bold;
			text-align: right;
		}

		.cartresume .legal {
			bottom: 5em;
			color: rgba(0, 0, 0, .54);
			font-size: .75em;
			padding: .75em;
			position: absolute;
		}

		#page .cartresume .cart {
			background-position: left 1.5em center;
			background-repeat: no-repeat;
			background-size: 2.5em;
			border: 1px solid transparent;
			bottom: 0;
			box-sizing: border-box;
			margin: 0;
			overflow: hidden;
			padding-left: 4.5em !important;
			position: absolute;
			text-align: left;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

/*** *** Responsive *** ***/

@media (max-width: 1200px) {

	#page .cartresume .cart {
		background-position: left .75em center;
		padding-left: 3.5em !important;
	}

}

@media (max-width:  920px) {

	.cartlist {
		font-size: 1.2em;
	}

	.cartlist .item .desc {
		font-size: 1em;
	}

	.cartlist .item .cancel {
		background-size: 1.75em;
		height: 2em;
		width: 2em;
	}

	.cartlist .item del.price {
		bottom: 2.2em;
		font-size: 1em;
		padding: 0 .5em 0 0;
	}

	.cartresume {
		bottom: initial;
		font-size: 1.2em;
		margin: 1.5em 0 2em;
		position: relative;
		right: initial;
		top: initial;
	}

	#page .cartresume .cart {
		background-position: left 1.5em center;
		padding-left: 4.5em !important;
	}

}

@media (max-width: 480px) {

	#page .cartresume .cart {
		font-size: 1.1em;
	}

}

@media (max-width: 460px) {

	#page .cartresume .cart {
		background-position: left .75em center;
		padding-left: 3.5em !important;
	}

}

@media (max-width: 420px) {

	#page .cartresume .cart {
		font-size: 1em;
	}

}

/* Login / Registro
***********************************/

.login .main {
	background-image: url(/img/bglogin.jpg);
	background-size: cover;
	background-position: top center;
}

.login footer {
	background-color: transparent !important;
}

#login form {
	box-shadow: 0em 0.5em 3em rgba(0, 0, 0, 0.3);
	background-image: linear-gradient(-30deg,#451d4d 0%,#8f1360 100%);
}

.form {
	font-size: 1rem;
	height: auto;
	margin: 4% auto 0;
	position: relative;
	width: 25em;
}

	.form form {
		-webkit-animation: fadeInTop 1s;
		animation: fadeInTop 1s;
		background-color: #3b1942;
		position: relative;
	}

	.form .logow {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 9em;
		height: 8em;
	}

	.form h2 {
		color: white;
		font-size: 1.4em;
		margin: 0 0 1em;
		text-align: center;
		text-transform: uppercase;
	}

	.form input, .form select {
		box-sizing: border-box;
		border: none;
		box-shadow: none;
		height: 3.5em;
		font-size: 1em;
		margin: 0 9% 1.6em;
		padding: 1em;
		width: 82%;
	}

		.form input::-webkit-input-placeholder {text-transform: uppercase}
		.form input:-moz-placeholder {text-transform: uppercase}
		.form input::-moz-placeholder {text-transform: uppercase}
		.form input:-ms-input-placeholder {text-transform: uppercase}

		.form input:focus {
			box-shadow: 0 0 0 4px #e85997 inset;
		}

	.form input[type=submit] {
		background-color: #e30e7d;
		border: none;
		color: #3b1942;
		cursor: pointer;
		font-weight: bold;
		margin: 0 9% 2.2em;
		text-transform: uppercase;
	}

	.form label, .form .label {
		color: rgba(255,255,255,.7);
		margin: 0 9%;
		font-size: .86em;
		display: block;
	}

		.form label input, .form label select {
			font-size: .94em;
			margin: .2em 0 1.2em;
			width: 100%;
		}

		.form label input:focus {
			box-shadow: 0 0 0 4px #e85997 inset;
		}

		.form label select:focus {
			box-shadow: 6px 0 0 0 #e85997 inset, 0 0 2em -.5em rgba(0, 0, 0, .12);
		}

	form span.group {
		display: block;
		margin: .2em 0 1.1em;
	}

		form span.group input {
			float: left;
			margin: 0 0 0 2% !important;
			min-width: initial;
			width: 32%;
		}

		form span.group.g2 input {
			width: 49%;
		}

		form span.group input:first-child {
			margin: 0 !important;
		}

#gotoregister .close {
	position: absolute;
	right: 0;
	top: 0;
}

#gotoregister h2 {
    margin: 0;
    line-height: 4em;
}

#register {
	width: 60em;
	max-width: 100%;
}

	#register .col {
		width: 50%;
	}

	#register .header {
		height: 3em;
		background-color: #ab0c5f;
		margin-bottom: 2em;
	}

	#register h2 {
		line-height: 2.175em;
		margin: 0 0 0 2em;
		text-align: left;
		white-space: nowrap;
	}

	#register .close {
		position: absolute;
		right: 0;
		top: 0;
	}

	#register input[type=submit] {
		margin-top: 1.2em;
	}

#toreg {
	-webkit-animation: fadeIn 1.4s;
	animation: fadeIn 1.4s;
	background-color: #dedede;
	background-position: center 1em;
	background-repeat: no-repeat;
	background-size: 3em;
	box-sizing: border-box;
	color: #3b1942;
	cursor: pointer;
	display: block;
	margin: 1.2em 0;
	padding: 4.8em 1.6em .9em;
	text-align: center;
	text-decoration: none;
	transition: all .1s ease-in;
}

	#toreg:hover, #toreg:focus {
		background-color: #d3d3d3;
	}

	#toreg span {
		color: #e30e7d;
	}

/*** *** Animación *** ***/

@keyframes fadeIn {
	0% {opacity: 0;}
	20% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeInTop {
	from {opacity: 0; top: -4em;}
	to {opacity: 1; top: 0;}
}

/*** *** Responsive *** ***/

@media (max-width: 840px) {

	#register label {
		margin: 0 6%;
	}

}

@media (max-width: 560px) {

	#register .col {
		width: 100%;
	}

	#register h2 {
		font-size: 1em;
		line-height: 3em;
		margin: 0 0 0 8px;
	}

	#register label {
		margin: 0 8%;
	}

}

@media (max-width: 420px) {

	.form { width: 100% }

}

/* Header
***********************************/

.top {
	-webkit-animation: moveGradient 12s ease infinite;
	animation: moveGradient 12s ease infinite;
	background: #e30e7d;
	background: -moz-linear-gradient(right, #3b1942, #e30e7d);
	background: -o-linear-gradient(right, #3b1942, #e30e7d);
	background: -webkit-linear-gradient(left, #3b1942, #e30e7d);
	background: linear-gradient(to right, #3b1942, #e30e7d);
	background-size: 140%;
	height: 0.32em;
	position: relative;
	width: 100%;
}

.main {
	background-color: #f1f1f1;
	height: auto;
	min-height: 100%;
}

	.main::after {
		clear: both;
		content: '';
		display: block;
		height: 7.5em;
		width: 100%;
	}

/*** *** Animación *** ***/

@keyframes moveGradient {
	0% { background-position: 100% }
	50% { background-position: 0% }
	100% { background-position: 100% }
}

/* Panel
***********************************/

#panel {
	background: white;
	box-shadow: 0 0 2em #e0e0e0;
	margin: 0 auto;
	max-width: 85em;
	padding: 0 0 2em;
	width: 100%;
}

#page {
	float: right;
	min-height: 25em;
	padding: 0 2em 0 1em;
	width: 65em;
	width: calc(100% - 20em);
}

	#page.full {
		float: none;
		width: auto;
		padding: 2em;
	}

	#page.legal {
		font-size: 12px;
		font-family: "Lucida Sans", Tahoma, Arial;
	}

#page input, #page select, #page textarea {
	border: 1px solid rgb(224, 224, 224);
	box-shadow: 0 0 2em -.5em rgba(0, 0, 0, .12);
	box-sizing: border-box;
	font-size: .94em;
	height: 3em;
	margin: .25em 0 .757em 2em;
	min-width: 4em;
	padding: .32em .32em .32em 1em;
	transition: .2s background ease-out;
}

#page input[type=submit] {
	padding: .32em 1em;
}

#page input.add, #page input.remove {
	background-position: right 9px center;
	background-repeat: no-repeat;
	background-size: 24px;
}

#page .input-arrow {
    display: inline-block;
    height: 2.2em;
    margin: -0.8em -1.1em -0.8em .8em;
    opacity: .38;
    width: 2.2em;
}

#page textarea {
	height: 12em;
	margin: 0 0 .4em;
	max-height: 30em;
	max-width: 100%;
	padding: .6em 1em;
	width: 100%;
}

	#page input:required, #page select:required, #page textarea:required {
		border: 1px solid rgb(220, 175, 175);
		box-shadow: 0 0 2em -.5em rgba(0, 0, 0, .12);
	}

	#page input:required:valid, #page select:required:valid, #page textarea:required:valid {
		border: 1px solid rgb(180, 200, 180);
		box-shadow: 0 0 2em -.5em rgba(0, 0, 0, .12);
	}

	#page input:focus {
		border: 1px solid #e85997 !important;
		box-shadow: 0 0 0 3px #e85997 inset, 0 0 2em -.5em rgba(0, 0, 0, .12) !important;
	}

	#page select:focus, #page textarea:focus {
		box-shadow: 6px 0 0 0 #e85997 inset, 0 0 2em -.5em rgba(0, 0, 0, .12) !important;
	}

	#page .bar .button {
		box-sizing: border-box;
		position: relative;
		z-index: 10;
	}

	#page .bar .button.mme {
		margin: 1em .5em;
	}

	#page .bar .button.icon {
		background-repeat: no-repeat;
		background-size: 1.7em;
		background-position: center left .65em;
		padding-left: 3em !important;
	}

	#page input.mini, #page textarea.mini, #page select.mini, #page .bar .button.mini {
		font-size: 0.72em;
	}

	#page input.small, #page textarea.small, #page select.small, #page .bar .button.small {
		font-size: 0.86em;
	}

	#page input.normal, #page textarea.normal, #page select.normal, #page .bar .button.normal {
		font-size: 1em;
	}

	#page input.big, #page textarea.big, #page select.big, #page .bar .button.big {
		font-size: 1.1em;
	}

	#page input.max, #page textarea.max, #page select.max, #page .bar .button.max {
		font-size: 1.2em;
	}

	#page input.full, #page select.full, #page .button.full {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	#page .button.full { padding: 0 }


.radio {
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	line-height: 42px;
	width: 26%;
	margin: 0;
	min-height: 0;
	color: rgba(0, 0, 0, .56);
}

	.radio.xl {
		width: 42%;
		margin: 0 4%;
	}

	.radio:hover .inner {
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
		opacity: .5;
	}

	.radio input {
		width: 0 !important;
		min-width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		opacity: 0;
		padding: 0 !important;
		margin: 0 !important;
	}

	.radio input:checked + .outer .inner {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	.radio input:focus + .outer { border: 3px solid #e85997; }
	.radio input:checked + .outer { border: 3px solid #e40f7e; }

	.radio input:focus:checked + .outer .inner {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
		background-color: #57355a;
	}

	.radio .outer {
		width: 16px;
		height: 16px;
		display: block;
		float: left;
		margin: 10px 9px 10px 10px;
		border: 3px solid #bdbdbd;
		border-radius: 50%;
		background-color: #fff;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}

	.radio .inner {
		-webkit-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		width: 12px;
		height: 12px;
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		display: block;
		margin: 2px;
		border-radius: 50%;
		background-color: #e40f7e;
		opacity: 0;
	}

.radio.box {
	width: 100%;
	font-size: 14px;
}

	.radio.box .outer, .radio.box .inner {
		border-radius: 0;
	}

/* Menu
***********************************/

#menu {
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.12), -1px 0 0 rgba(0, 0, 0, 0.12) inset;
	float: left;
	overflow: hidden;
	padding: 0 1em 0 2em;
	width: 14em;
}

	#menu .logof {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 14em;
		cursor: pointer;
		height: 7em;
		margin: 1em 0 1.5em;
	}

	#menu span {
		color: rgba(255, 255, 255, .7);
	}

	#menu ul {
		padding: 0;
	}

	#menu li {
		list-style: none;
	}

		#menu li a {
			background-color: #57355a;
			background-position: center .5em;
			background-repeat: no-repeat;
			background-size: auto 2em;
			color: white;
			cursor: pointer;
			display: block;
			height: 1.5em;
			margin-bottom: 1em;
			padding: 2.7em 0 0 0;
			text-align: center;
			text-transform: uppercase;
			width: 100%;
		}

			#menu li a:focus {
				box-shadow: 0 0 0 4px #8b738d inset;
			}

		#menu li a.active {
			background-color: #e40f7e;
		}

			#menu li a.active:focus {
				box-shadow: 0 0 0 4px #e85997 inset;
			}

		#menu li a.iccopy {
			background-size: auto 2.3em;
			background-position: center .3em;
		}

header {
	float: right;
	height: 7em;
	margin: 1em 2em 1.5em 1em;
	max-width: 65em;
	max-width: calc(100% - 20em);
	overflow: hidden;
	width: 100%;
}

	header .tbar {
		background-color: #3b1942;
		box-sizing: border-box;
		color: white;
		height: 4em;
		line-height: 4em;
		position: relative;
		text-align: center;
		text-transform: uppercase;
		width: 100%;
	}

	header #user {
		background-color: #e0e0e0;
		background-position: .25em;
		background-repeat: no-repeat;
		background-size: 3em;
		height: 3em;
	}

		header #user .name, header #user .logout {
			line-height: 3em;
			height: 3em;
		}

		header #user .name {
			max-width: 28em;
			max-width: calc(70% - 9em);
			overflow: hidden;
			padding: 0 1em 0 3.75em;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		header #user .logout {
			background-position: right .875em center;
			background-repeat: no-repeat;
			padding: 0 3em 0 1em;
			background-size: 1.25em;
		}

		header #user .logout:hover {
			background-color: #bdbdbd;
		}

#subheader {
	float: right;
	max-width: 65em;
	max-width: calc(100% - 20em);
	overflow: hidden;
	width: 100%;
	padding: 0 2em 0 1em;
}

.category {
	background-color: #e0e0e0;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0px 0px 1.575em;
	padding: .875em;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 48%;
}

	.category::after {
		border-color: #e0e0e0 transparent;
		border-style: solid;
		border-width: .75em .75em 0 .75em;
		bottom: -.7em;
		content: "";
		left: 46.75%;
		left: calc(50% - 1em);
		position: absolute;
		width: 0;
	}

	.category.active {
		background-color: #e40f7e;
		color: white;
	}

	.category.active::after {
		border-color: #e40f7e transparent;
	}

/* Teorica
***********************************/

#tindex {
	margin: 0 3px 1em;
}

	#tindex .box {
		box-sizing: border-box;
		cursor: pointer;
		float: left;
		margin: .25em;
		overflow: hidden;
		transition: width .33s ease-in-out;
		position: relative;
		width: 19%;
		width: calc(16.5% - .5em);
		min-height: 7.2em;
	}

		#tindex .box img {
			display: block;
			transition: transform .6s ease-in-out;
			width: 100%;
		}

		#tindex .box:hover img {
			-webkit-transform: scale(1.14);
			-ms-transform: scale(1.14);
			transform: scale(1.14);
		}

		#tindex .box h3 {
			background: #E40F7E;
			color: white;
			font-size: 1em;
			line-height: 1.2;
			margin: 0;
			overflow: hidden;
			padding: .5em .1em;
			position: relative;
			text-align: center;
			text-overflow: ellipsis;
			text-transform: uppercase;
			/* white-space: nowrap; */
			height: 2.4em;
			width: 100%;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
		}

#tcontent {
	overflow: auto;
}

	#tcontent div {
		padding: .75em;
		box-sizing: border-box;
	}

	#tcontent .button.attachment {
		background-position: left .5em center;
		background-repeat: no-repeat;
		background-size: 2.5em;
		box-sizing: border-box;
		color: rgba(255, 255, 255, .78);
		font-size: .862em;
		height: 2.5em;
		line-height: 2.5em;
		max-width: 100%;
		overflow: hidden;
		padding: 0 1em 0 3.5em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.video-responsive {
	position: relative;
	padding: 0 !important;
	padding-top: 56.25% !important;
}

.video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*** *** Responsive *** ***/

@media (max-width: 940px) {

	#tindex div.box {
		width: 31.25%;
		width: calc(25% - .5em);
		max-height: 9em;
	}

	#tindex div.box h3 {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: rgba(228, 15, 126, 0.7);
		backdrop-filter: blur(2px);
	}

}

@media (max-width: 820px) {

	#tindex div.box {
		width: 30.75%;
		width: calc(33.33333333% - .5em);
		max-height: 6em;
	}

}

@media (max-width: 660px) {

	#tindex div.box {
		width: 47%;
		width: calc(50% - .5em);
		max-height: 2.9em;
	}

}

@media (max-width: 600px) {

	#tindex div.box {
		width: 30.5%;
		width: calc(33.33333333% - .5em);
	}

}

@media (max-width: 500px) {

	#tindex div.box {
		width: 45.5%;
		width: calc(50% - .5em);
	}

}

@media (max-width: 340px) {

	#tindex div.box {
		width: 94.75%;
		width: calc(100% - .5em);
	}

}

/* Upload
***********************************/

.upload {

}

	.upload .drop {
		background-color: #ffffff;
		border: .4em dashed #e0e0e0;
		color: rgba(0, 0, 0, .26);
		font-weight: bold;
		margin: 1em 0 2em;
		padding: 4em;
		text-align: center;
		transition: 1s border-color cubic-bezier(0.4, 0, 0.2, 1);
	}

	.upload .drop:hover {
		border-color: #e85997;
	}

	.upload .drop input {
		display: none;
	}

	.upload .drop .button {
		background-color: rgba(0, 0, 0, .26);
		box-sizing: border-box;
		cursor: pointer;
		display: block;
		line-height: 3em;
		margin: 1em auto .5em !important;
		max-width: 14em;
	}

	.upload .drop .button:hover {
		background-color: #e40f7e;
	}

	.upload ul {
		border-top: 1px solid #e0e0e0;
		list-style: none;
		margin: 0 -1em;
		padding: 0;
	}

	.upload ul li {
		background-color: #E0E0E0;
		padding: 1rem;
		position: relative;
		border-bottom: 1px solid #c4c4c4;
	}

	.upload ul li input {
		display: none;
	}

	.upload ul li p {
		box-sizing: border-box;
		font-size: 1rem;
		font-weight: bold;
		margin: 0;
		overflow: hidden;
		padding: 8px 48px 8px 96px;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.upload ul li i {
		font-weight: normal;
		font-style: normal;
		color: #7f7f7f;
		display: block;
	}

	.upload ul li canvas {
		top: 15px;
		left: 32px;
		position: absolute;
	}

	.upload ul li span {
		width: 15px;
		height: 12px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAaCAMAAABfE/ZQAAAAh1BMVEUAAADRH0nRH0nRH0nRH0kkwnnRH0kkwnnRH0nRH0kkwnnRH0kkwnnRH0nRH0kkwnnRH0kkwnkkwnnRH0kkwnkkwnkkwnnRH0nRH0kkwnnRH0kkwnkkwnnRH0kkwnkkwnnRH0kkwnnRH0nRH0kkwnkkwnnRH0kkwnnRH0kkwnkkwnnRH0kkwnkYBzKCAAAAK3RSTlMA+NMHFY6wfmE7Breia0r72snAlYdzZz8bD/Pw28mxnIF4eG9dUVFINjMbzaeTjAAAAKNJREFUGNNljtkOgkAMRS+bgIoCAor7vk3///tsSxog3ofenJO0Mxhm+h3jcfcZ4pxoP+AT0fKFtrh0GDE+gIIoFoyJ6K5aRc3VACYaHjVsUVPBUglG6MMPlxj9pGzxl6CrlR9q37y1onMqMue8N/fEqWB021S2VFx5eIwmDHvB1yyZcB4aJkx6tEfv0AnDRTAz4QsCKhLmTS6o4gyISAEVT5k//Q4UrUi/ZncAAAAASUVORK5CYII=) no-repeat;
		position: absolute;
		top: 34px;
		right: 33px;
		cursor:pointer;
	}

	.upload ul li.working span {
		height: 16px;
		background-position: 0 -12px;
	}

	.upload ul li.error p {
		color: red;
	}

/* Promo
***********************************/

.box.focus {
	background-color: #e0e0e0;
	border: .5em solid #e40f7e;
}

.box .legend {
	background-color: #e40f7e;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.87);
	line-height: 3em;
	overflow: hidden;
	position: relative;
	padding: 0.2em 1em 0.2em 2em;
	width: auto;
	display: inline-block;
	font-weight: bold;
	top: -4px;
	left: -4px;
}

.box .legendafter {
	height: 0;
	width: 0;
	border-top: 3.4em solid #e40f7e;
	border-right: 1.75em solid transparent;
	display: inline-block;
	top: -4px;
	position: relative;
	left: -6px;
	padding-left: 4px;
}

.bgtransparent {
	background-color: transparent;
}

ul.aeoshare {
	margin: 1.5em 0 0;
	padding: 2px 4px;
}

	ul.aeoshare li {
		display: inline-block;
		margin-right: .75em;
		height: 3em;
		width: 3em;
	}

	ul.aeoshare a, ul.aeoshare i {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	ul.aeoshare i {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 1.5em;
		border-radius: 100%;
		color: #FFFFFF;
		cursor: pointer;
		text-align: center;
	}

input.rounded {
	font-size: 13px !important;
	font-family: 'Montserrat', Verdana, Arial !important;
	padding-left: 1.5em !important;
	border-radius: 6px !important;
	height: 4em !important;
}

input.iccopy {
	background-position: right 12px center;
	background-repeat: no-repeat;
	padding-right: 3.5em !important;
}

@media (max-width: 480px) {

	.box .legend {
		width: 100%;
		left: 0;
	}

	.box .legendafter {
		display: none;
	}

}

/* Tablas
***********************************/

table {
	color: rgba(0, 0, 0, .54);
	text-align: center;
	font-size: .85em;
	width: 100%;
	margin-bottom: 1em;
}

td, th {
	border: 0.5em solid #f1f1f1;
	padding: .45em .3em;
}

th {
	background-color: #e85997;
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
}

td {
	background-color: #e0e0e0;
}

	td:hover, td.hover {
		background-color: #d0d0d0;
		color: #e85997;
	}

.calendar {
	box-shadow: 0 0 0 .5em rgb(241, 241, 241) inset;
	background-color: rgb(224, 224, 224);
	transition: all .4s ease-in-out;
}

	.calendar.a {
		opacity: 0;
		transform: scale(.9);
		transition: opacity .2s ease-in-out, transform 1.2s ease-in-out;
	}

	.calendar td, .calendar th {
		min-width: 7.5em;
		position: relative;
		text-overflow: clip;
		transition: all .2s ease-out;
		white-space: nowrap;
		width: 14.2857%;
	}

	.calendar td {cursor: pointer}

	.calendar .h th {background-color: #8b738d; height: 2em}

	.calendar .h th:first-child,
	.calendar .h th.b {background-color: #57355a}
	.calendar .h th.e {background-color: #e40f7e}

	.calendar td.e {background-color: #e1c7d5}
	.calendar td.e:hover {background-color: #d8b6c8}
	.calendar td.t {background-color: #75b72d; color: rgba(255, 255, 255, 0.7)}
	.calendar td.t:hover {background-color: #75b72d}
	.calendar td.f {background-color: #ef9a9a; color: rgba(255, 255, 255, 0.7); cursor: default}
	.calendar td.f:hover {background-color: #ef9a9a}
	.calendar td.a {background-color: #ff7043; color: rgba(255, 255, 255, 0.7)}
	.calendar td.a:hover {background-color: #ff7043}
	.calendar td.s {background-color: #e88c2c; color: rgba(255, 255, 255, 0.7)}
	.calendar td.s:hover {background-color: #e88c2c}
	.calendar td.d {cursor: default}
	.calendar td.i {box-shadow: 8px 0 0 -4px rgba(0, 0, 0, 0.5) inset; padding-left: 10px}

	.calendar td .cancel-green,
	.calendar td .go-orange,
	.calendar td .go-pink {
		background-position: center;
		background-repeat: no-repeat;
		display: block;
		font-weight: normal;
		height: 100%;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity .2s ease-out;
		width: 2.08em;
	}

	.calendar td .cancel-green {
		background-color: #528120;
		background-size: 1.5em;
	}

	.calendar td .cancel-orange {
		background-color: #FF5722;
		background-size: 1.5em;
	}

	.calendar td .go-orange {
		background-color: #a3621f;
		background-size: 1.5em;
	}

	.calendar td .go-pink {
		background-color: #e85997;
		background-size: 1.5em;
	}

	.calendar td:hover .cancel-green,
	.calendar td:hover .go-orange,
	.calendar td:hover .go-pink {
		opacity: 1;
	}


.week {

}

	.week a {
		color: rgba(0, 0, 0, .54);
		margin-top: 0.5em;
		max-width: 48%;
		min-width: 32%;
		overflow: hidden;
		padding: 0;
		text-align: center;
		white-space: nowrap;
		width: 18em;
	}

	.week a:hover, .week a:focus {
		background-color: #d0d0d0;
		color: #e30e7d;
	}

ul.options {margin: 0; padding: 0}
	ul.options li {display: inline-block}
	ul.options li a {white-space: nowrap}
	ul.options li a.active {background-color: #e85997; color: white}

table.list td, table.list th { border-left: 0; border-right: 0 }
table.list th { height: 1.75em; background-color: #8b738d }
table.list tr.disabled td { background-color: #eee; color: rgba(0, 0, 0, .38); }
table.list tr.disabled td:hover,
table.list tr.disabled td.hover { background-color: #e0e0e0 }
table.list td { height: 2em }
table.list.xl td { height: 2.5em }
table.list.xl th { height: 2em }
table.list.xxl td { height: 3em }
table.list.xxl th { height: 2.25em }

/* Listado practicas
***********************************/

.practices {
	margin: 0;
	padding: 0;
}

	.practices li {
		background-color: #e0e0e0;
		box-sizing: border-box;
		display: block;
		float: left;
		margin: 0 1% 1em;
		min-height: 7.8em;
		padding: 1em 1em .6em;
		width: 48%;
		position: relative;
	}

	.practices li:hover {
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
	}

	.practices li .details {
		background-color: #9e9e9e;
		float: right;
		line-height: 3em;
		margin: 1.425em 1.425em 0 0 !important;
		padding: 0 1em !important;
	}

	.practices li:hover .details, .practices li .details:focus {
		background-color: #e40f7e;
	}

	.practices li:hover .details.limited-by-suspension {
		background-color: #b59494;
	}

	.practices li .details.limited-by-suspension:active, .practices li .details.limited-by-suspension:focus {
		background-color: #e40f68;
	}

.practices li .number {
	font-size: 1.8em;
	position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 1px 6px;
    font-weight: bold;
    color: rgba(0, 0, 0, .22);
}

/*** *** Responsive *** ***/

@media (max-width: 920px) {

	.practices li { width: 98% }

}


/* Listado profesores
***********************************/

#reportFails {
	min-height: 34em;
}

	#reportFails fieldset {
		font-size: .94em;
		min-height: 5.5em;
	}

	#reportFails a {
		color: rgba(0, 0, 0, .56);
	}

		#reportFails a:hover, #reportFails a:focus {
			color: #e30e7d;
		}


/* Footer
***********************************/

footer {
	background-color: #2D3438;
	margin: -4em auto 0;
	min-height: 4em;
	overflow: hidden;
	position: relative;
	z-index: 4;
}

	footer div {
		height: 100%;
		margin: 0 auto;
		max-width: 85em;
	}

		footer div::before {
			background-position: center;
			background-repeat: no-repeat;
			background-size: 5em;
			content: '';
			display: block;
			position: absolute;
			height: 4em;
			opacity: .3;
			width: 8em;
		}

		footer p {
			box-sizing: border-box;
			color: rgba(255, 255, 255, .12);
			margin: 0;
			padding: 1.42em 4%;
			text-align: center;
			width: 100%;
		}

			footer p a {
				color: rgba(255, 255, 255, .30);
				font-size: .85em;
			}

/*** *** Responsive *** ***/

@media (max-width: 840px) {
	footer div::before { opacity: 0 }
}

/* Separadores
***********************************/

hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .12)
}

.hr {
	background-color: #e0e0e0;
	box-shadow: 0 0 0 1px rgb(213, 213, 213) inset;
	display: inline-block;
	margin: .5em 0 0;
	padding: .4em 1em;
}

.tag {
	background-color: #e0e0e0;
	bottom: -.25em;
	box-shadow: 0 0 0 1px rgb(213, 213, 213) inset;
	display: inline-block;
	margin: .5em 0 0 6px;
	padding: .4em 1em;
	position: relative;
    z-index: -1;
    left: 6px;
}


/*

dark

hr {
	border: 0;
	border-top: 1px solid #8B738D
}

.hr {
	background-color: #8B738D;
	color: rgba(255, 255, 255, 0.7);
	display: inline-block;
	margin: .5em 0 0;
	padding: .4em 1em;
}

*/

/* ScrollBar
***********************************/

::-webkit-scrollbar{background:#f1f1f1;height:13px;width:13px}
::-webkit-scrollbar-thumb{background:#2d3438}

#panel ::-webkit-scrollbar{background:#f1f1f1;height:11px;width:11px}
#panel ::-webkit-scrollbar-thumb{background:#57355a}

/* Modal
***********************************/

.dialog,
.dialog__overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dialog {
	position: fixed;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	pointer-events: none;
	z-index: 998;
}

.dialog__overlay {
	position: absolute;
	z-index: 1;
	background: rgba(55, 58, 71, 0.9);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.dialog--open .dialog__overlay {
	opacity: 1;
	pointer-events: auto;
}

.dialog__content {
	width: 50%;
	max-width: 560px;
	min-width: 290px;
	background: #fff;
	padding: 4em;
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
}

.dialog--open .dialog__content {
	pointer-events: auto;
}

/*** *** Contenido *** ***/

.dialog h2 {
	margin: 0;
	font-weight: 400;
	font-size: 2em;
	padding: 0 0 2em;
	margin: 0;
}

.dialog .dialog__close {
	position: absolute;
	top: 0;
	right: 0;
}

.dialog .confirm {
	background-color: #e30e7d;
	color: white;
	cursor: pointer;
	display: block;
	height: 3em;
	line-height: 3em;
	margin: 1em auto 0;
	width: 80%;
}
.dialog .confirm:focus {box-shadow: 0 0 0 4px #e85997 inset}

/*** *** Animación *** ***/

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
	-webkit-animation-duration: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
	-webkit-animation-name: anim-open;
	animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
	-webkit-animation-name: anim-close;
	animation-name: anim-close;
}

@-webkit-keyframes anim-open {
	0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes anim-close {
	0% { opacity: 1; }
	100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

@keyframes anim-open {
	0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes anim-close {
	0% { opacity: 1; }
	100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

/*** *** Responsive *** ***/

@media (max-width: 420px) {
	.dialog .dialog__content {
		padding: 2em 4em 6em;
	}

	.dialog .dialog__close {
		bottom: 1.5em;
		right: 25%;
		top: initial;
		width: 50%;
	}
}

/* Load
***********************************/

body.load .top {
	-webkit-animation: loading 2s ease-out infinite;
	animation: loading 2s ease-out infinite;
	position: fixed;
	top: 0;
	z-index: 999;
}

body.load .main::before {
	content: '';
	display: block;
	height: .32em;
}

/*** *** Animación *** ***/

@keyframes loading {
	0% { background-position: 50% }
	100% { background-position: -300% }
}

/* Selection
***********************************/

::-moz-selection{background: #e85997; color: white; text-shadow: none}
::selection {background: #e85997; color: white; text-shadow: none}

/* Placeholder
***********************************/

::-webkit-input-placeholder {color: rgba(0, 0, 0, .26)}
:-moz-placeholder {color: rgba(0, 0, 0, .26)}
::-moz-placeholder {color: rgba(0, 0, 0, .26)}
:-ms-input-placeholder {color: rgba(0, 0, 0, .26)}

/* Responsive Design
***********************************/

@media (min-height: 700px) and (min-width: 500px) {

	body.login {
		overflow-y: hidden;
	}

}

@media (min-height: 633px) and (max-width: 1920px) and (min-width: 500px) {

	body.login {
		overflow-y: hidden;
	}

}

@media (min-height: 600px) and (max-width: 1380px) and (min-width: 500px) {

	body.login {
		overflow-y: hidden;
	}

}

@media (min-height: 560px) and (max-width: 920px) and (min-width: 500px) {

	body.login {
		overflow-y: hidden;
	}

}

@media (max-width: 1540px) {

	body {font-size: 0.95em}

}

@media (max-width: 1380px) {

	body {font-size: 0.9em}

}

@media (max-width: 1152px) {

	body {font-size: 0.85em}

}

@media (max-width: 1024px) {

	body {font-size: 0.8em}

	#menu {
		padding: 0 1em 0 1em;
		width: 14em;
	}

	#subheader {
		max-width: 66em;
		max-width: calc(100% - 18em);
		padding: 0 1em 0 1em;
	}

	#page {
		width: 66em;
		width: calc(100% - 18em);
		padding: 0 1em 0 1em;
	}

	header {
		margin: 1em 1em 1.5em 1em;
		max-width: 66em;
		max-width: calc(100% - 18em);
	}

}

@media (max-width:  920px) {

	body {font-size: 0.75em}

	.w1.rd,
	.w11.rd,
	.w12.rd,
	.w14.rd,
	.w16.rd,
	.w2.rd,
	.w25.rd,
	.w3.rd,
	.w33.rd,
	.w37.rd,
	.w4.rd,
	.w41.rd,
	.w5.rd,
	.w58.rd,
	.w6.rd,
	.w62.rd,
	.w66.rd,
	.w7.rd,
	.w75.rd,
	.w8.rd,
	.w85.rd,
	.w87.rd,
	.w88.rd,
	.w9.rd,
	.box.semi,
	.bar .button.rd { width: 100% }

	.bar h2,
	.bar h3,
	.bar h4,
	.bar h5,
	.bar h6 {
		position: relative;
		padding: 0 .5em;
	}

	.in {margin: 0 0 1em}

	td, th {padding: .6em .4em}

}

@media (max-width:  800px) {

	body {font-size: 0.7em}

	.block {width: 100%}
	.block.icon.fr {background-position: left 1em center; padding: 0 1em 0 4.5em}
	.block.icon.arrow.fl {background-position: left  .75em center; padding: 0 .5em 0 3.5em}
	.block.icon.arrow.fr {background-position: right .75em center; padding: 0 3.5em 0 .5em}
	.mt1 {margin: .2em 0}
	.ml1 {margin-left: 0}
	.ml2 {margin-left: 0}
	ul.options {padding-top: .5em;clear:both}
	ul.options li {width: 49%; float: left}
	ul.options li:nth-child(2n+1) {margin-right: 2%}

}

@media (max-width:  600px) {

	body {font-size: 0.75em}

	#menu {
		box-sizing: border-box;
		box-shadow: none;
		padding: 0 1em;
		width: 100%;
	}

		#menu li a {
			width: 33.33%;
			float: left;
		}

	header {
		box-sizing: border-box;
		margin: 1em 0;
		padding: 0 1em;
		max-width: none;
	}

	#subheader {
		max-width: 100%;
		box-sizing: border-box;
	}

	#page {
		box-sizing: border-box;
		padding: 1em;
		width: 100%;
	}

}

@media (max-width:  500px) {

	body {font-size: 0.8em}

	#menu li a {width: 50%}

	.category {width: 49%}

	.block.icon.arrow.fl {background-position: left  .5em center; padding: 0 .5em 0 3em}
	.block.icon.arrow.fr {background-position: right .5em center; padding: 0 3em 0 .5em}

	ul.options li {width: 100%}
	ul.options li:nth-child(2n+1) {margin-right: 0}

	.content {padding: 0 1.5em 1em}

	#menu, header, #subheader, #page {padding: 0}

}

@media (max-width:  360px) {

	#menu li a {width: 100%}

	.category {width: 50%}

	.content {padding: 0 .5em 1em}

}

@media (max-width:  300px) {

	.content {padding: 0 .2em 1em}

}

/* Stripe
***********************************/

.StripeElement {
	background-color: white;
	padding: 14px 16px;
	border-radius: 6px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
	margin: 15px 0;
}

.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
	border-color: #fa755a;
}

.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
}

.stripeBox {
	background-color: rgba(255, 255, 255, 0.7);
	margin: 60px auto;
	max-width: 520px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	padding: 15px;
	padding-bottom: 35px;
	position: relative;
}

.stripeBox .bar {
	border-radius: 6px;
	padding: 2px 0 0px;
	background-color: #e7e7e7;
}

.stripeBox form {
	margin: 25px 0 20px;
	padding: 0 25px;
}

.stripeBox .button {
	border: 0;
	width: 100%;
	border-radius: 6px;
	margin: 15px 0;
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-decoration: none;
	-webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}

.stripeBox .button:hover, .stripeBox .button:focus {
	transform: translateY(-1px);
	box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
	background-color: #e85997;
}

.stripeBox .powered-by-stripe {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAAAaCAMAAAC6jTM8AAABblBMVEVCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3BCR3AAAAD5+7TdAAAAeXRSTlMAAzdkeoAOaARGK31wVBd8JBItf215HnVyb1BNbksLAiJpJhQhWhBcEwEleEQIU1hgZQo+Zn5xe2NrQ1FzdnQ/QE84GgcxIAYqNAVfPQ8WDElMUkcubDB3PGJCCVcNOiNqSDJWOy9bXkE1EWEsOVUYNidKFVlOXR8b8WKQgQAAAt9JREFUeAHF1u9X2lYcx/FPCB9JSwQhhhCHRqS0YoCNzaBWYCvQhoHObe2k6jbturbTbut+bN3+/OaeiBwO8fgE8PXonsOD97l8T+75ApBCcpizE5ZDEjxzEc5aZA6QIpy9iIIQb0MIMqdEvnOX15IR5SSp8xyIAbxWHJykBWDYTSR5vUl1NXVRJ1NXXZ1h+gyVvrSqBXR109R5s8gSPR9lOGp5BbBWRRfIriF3D/kYwBTurwE5meSDdeB+fry7DBQ2bN6kWKIHZY74GELpqgsMuv4PaX4iwWNVxrslZj79jFp202HVpp6mY25R3Y4ybNo7jMomyWrlod/dlWusp8lGg8Jd4PP5L1KiUywa4oqh7GU3+cg7NNlCKf+gjY2gLmOP9SeK2zI6SX7Z3epZxl57/yu7jINOOpHofs1vrK7rd92uMv+tG3YOnlLoAM++42C+XjdDXnarNAtYrwKH/f5jKNGxrvJ8wTo6Pqn195vfnzg/tPM/np7hzEm8KKPCnza0l67t/sym372jvTqIn+y+VuoU3lgAUpVhtzrskgkoPVxSA7q/7DB5j+ycxttPV/bOc49e4uLi4mEZZKrknd6iN5zvPOzm6q9J+rZPC0DXvK7bfYNLZtD/TB6fNOz9Jl+1D+WSZO8UetTjonveitLY8u772/C+PCsoPQqMk+oq8MLrbI111QJyGWChL2jBXf1J15svX+N3bWWNPFZipZroGu8O1jvefN3BfF2lTKbWNQr848/lvFf7y2ufLxkj3cOlFhDi37D2ev8c/zv+/aoUtEjFIR0zylqfZPWozrBJ0qlEHFLd7Kv0mLZcIxkr0ncOwU0X4cmOdAVX5XsLwvNJvFfbUoO+pTkArW1GnxWgLI50/wMujki+fwcgl59E9+0ur/QzdQp1M84hMd/G4Hk0MgavgNMkugyE6FS70v91BglD5hQtxhlMvrU9R4lw9rLKre2xgNTcnOnevtmUgA/b0Y/9GFi/1gAAAABJRU5ErkJggg==);
	width: 119px;
	height: 26px;
	position: absolute;
	bottom: 15px;
	right: 15px;
	background-repeat: no-repeat;
}

.stripeBox .cancel-box {
	margin: 10px 0 25px;
}

.stripeBox .cancel-button {
	border: 1px solid #e7e7e7;
	padding: 6px 12px;
	border-radius: 6px;
	display: inline-block;
}

.stripeBox .cancel-button:hover, .stripeBox .cancel-button:active {
	border: 1px solid #e30e7d;
}

/* Exams
***********************************/

li.booking-error {
	margin-bottom: 5px;
}

/* Contract
***********************************/

#signContract .btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	border: 0;
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

	#signContract .btn-base {
		color: white;
		background-color: #3b1942;
		position: relative;
		cursor: pointer;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
		font-family: 'Nunito', sans-serif;
	}

/*
***********************************/

.ick {
	position: relative;
	height: 24px;
	width: 24px;
	background-size: 24px;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4px;
	margin: 2px;
	opacity: .54;
	z-index: 100;
}

	.ick.big {
		height: 36px;
		width: 36px;
		background-size: 36px;
		padding: 3px;
		margin: 6px;
	}

.ick-moneybill {
	background-image: url('/img/fa-credit-card.png');
}

.ick-eye {
	background-image: url('/img/fa-eye.png');
}

.ick-pdf {
	background-image: url('/img/icon-pdf.png');
}

.ick-dl {
	background-image: url('/img/fa-download.png');
}

.tooltipMark::after {

	content: '!';
	position: relative;
	display: inline-block;
	width: 0;
    left: -5px;
	top: -5px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgb(139 115 141 / 75%);

}

.tooltipMark-plus::after {

	content: '+';

}

.tooltipMark-question::after {

	content: '?';

}

.tooltipMark-star::after {

	content: '*';

}

.examResult.tooltipMark::after {

    margin-left: 4px;
    margin-right: 5px;
    color: #00000088;
    font-size: 0.875em;
    font-weight: normal;

}

.sspacer {
    margin: 1px auto;
    padding: 0;
    visibility:hidden;
}