@import url("public-service-layout.css");
@import url("public-service-typo.css");

/* apply a natural box layout model to all elements, but allowing components to change */
html {
	box-sizing: border-box;
	height:100%;
}

body{
	height:100%;
}

*, *:before, *:after {
  	box-sizing: inherit;
}

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

.displayNone {
	display: none;
}

strong{
	font-weight: bold;
}



/* BANNER HERO IMAGE */
#banner_hero {
	max-width: 765px;
	margin: 1.414rem auto -1.414rem auto;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #fff;
}



/* PRODUCTS */
#products header{
	height: 2.7rem;
}

#products header h3{
	width: 68%;
	line-height: 2.7rem;
}

#products header h3 svg{
	width: 32px;
	height: 32px;
	margin-top: 4px;
	margin-right: .8rem;
}

#products header .currency-txt{
	width: 28%;
	line-height: 2.7rem;
	padding-left: 1rem;
}

/* TICKETS */
.ticket{
	background: #F2F2F2;
	padding: 1.5rem 0;
	margin-bottom: 1.414rem;
}
.ticket_f{
	display: flex;
	flex-direction: row;
	padding: 1.5rem;
	margin-bottom: 1.414rem;
	color: white;
	border-radius: 1rem;
}

.ticket:hover{
	background: #E6E6E6;
	cursor: pointer;
}

.ticket-radio{
	width: 15%;
	height: 32px;
	background: url(bg/bg-icon-radio-off-32.png) no-repeat center center;
}

.ticket-radio-selected{
	width: 15%;
	height: 32px;
	background: url(bg/bg-icon-radio-on-32.png) no-repeat center center;
}

.ticket-type{
	width: 53%;
	padding-right: 1.414rem;
}
.ticket-info{
	width: 62%;
	padding-right: 1.414rem;
	border-right: 3px Dashed white;
}
.ticket-info h3{
	margin: 0;
	font-size: 1.3rem;
	/* line-height: 1.5; */
	margin-bottom: 1rem;
}

.ticket-price{
	width: 32%;	
}
.ticket-price_f{
	display: flex;
	flex-direction: column;
	align-items:flex-end;
	justify-content: center;
	width: 38%;
	padding: 0 0 0 1.414rem;
	font-size: 2rem;
	font-weight: 600;
	position: relative;
}
.qty{
	display: flex;
	flex-direction: row;
	align-items: baseline;
}
.price{
	margin: 1.3rem 0;
}
.qty select{
	margin: 1.3rem 0 1.3rem 1.3rem;
}
.discount{
	width: 85%;
	height: 48px;
/*	display: inline-block;*/
	position: absolute;
	bottom: -30px;
	background: #E6E6E6 url(bg/bg_icon_discount.png) no-repeat left center;;
	color: black;
	font-size: 1.3rem;
	font-style: italic;
	text-align: right;
	vertical-align: middle;
	padding: 16px;
	border-radius: 0 0 1rem 1rem;
}
.ticket_assign{
	background: #f7f7f7;
	margin: 16px 0;
	padding: 16px;
}
.ticket_assign button{	
	margin: 0;
}


/* ADDITIONAL PRODUCTS */
.additional-product{
	padding: 1.414rem 0;
}

.additional-product-sold-out{
	color: #999999;
}

.additional-product-info{
	width: 50%;
}

.additional-product-quantity{
	width: 25%;
}

.additional-product-price{
	width: 25%;
	padding-left: 1rem;
}

/*TOTAL*/
.total{
	height: 2.7rem;
	margin: 2.7rem 0;
	width: 46%;
	margin-left: auto;
}

/*TOTAL*/
.total-register{
	text-align: left;
	background-color: #F2F2F2;	
	height: 4rem;
	padding-top: .5rem;
	padding-left: 46%;
	margin-left: auto;
}

/*DATA POLITIC*/
#data-politic{
}

#data-politic .checkbox{
	display: inline-block;
	vertical-align: top;
}

#data-politic input{
	display: inline-block;
	width: 2.7rem;
	margin: 0;
	padding: 0;
}

#data-politic .text{
	display: inline-block;
	width: 90%;
	padding: .65rem 0;
}


/*BUTTON*/
button, a.pay{
	width: 240px;
	height: 40px;
	color: white;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 2px;
	margin: 1.414rem 0;
	
	text-decoration: none;

	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	cursor: pointer;
	
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

button:hover, a.pay:hover {
	background: #999;
}

a.pay{
	text-align: center;
	line-height: 40px;
}

.bb{
	border-bottom: 1px solid;
}

.gray{
	color: #808080;
}

.bb-gray{
	border-bottom: 1px solid #CCCCCC;
}


/* TABLES */
table{
	width: 100%;
	background-color: #F2F2F2;	
}

tr, td {
	height: 4rem;
	vertical-align: middle;
	border-bottom: 1px solid #CCCCCC;
}

td:first-child{
	padding-left: 1rem;
}

.total-div{
	border-bottom: 2px dotted #808080;	
}

#total-table td:first-child{
	text-align: right;
	padding-right: 2rem;
}


/* FORM */
label, input, select {
	width: 100%;
	display: block;
}

label {	
	line-height: 1.3rem;
	padding: .7rem 0;
	font-weight: bold;
}

input, select {
	height: 2.7rem;
	margin-bottom: 1.414rem;
	padding: .5rem 1rem .8rem 1rem;
	font-size: 1.2rem;
	border: solid 1px #CCCCCC;
	border-radius: 2px;
}

input.date {
	height: 1.2rem;
	margin-bottom: .3rem;
	padding: 1rem;
	font-size: 1rem;
	border: solid 1px #CCCCCC;
	border-radius: 2px;
}

input:focus {
    border: solid 2px #B3B3B3;
}


/* WARNING */

#warning {
	width: 100%;
	margin-bottom: 1.414rem;
	background-color: #FBB03B;
	background-image: url(bg/warning.png);
	background-repeat: no-repeat;	
	padding: .7rem 1.414rem .7rem .7rem;	
	color: #fff;
	border-radius: 2px;	
}

.white{
	color: white;
	fill: currentColor;
	margin-right: .7rem;
}

hr.questions-separator{
	margin: 2.7rem 0 1.414rem 0;
	border: 0;
	height: 1px;
	background: url(bg/questions-separator.jpg) repeat-x 0 0;
}

.form_error {
	width: 100%;
	color: #F7931E;
	padding: .7rem 1rem .7rem 1rem;
	margin-top: -1.414rem;
}

.form_error_row {
	background: #FEEFD8;
	border-color: #FBB03B;
}

.form_error_row:focus {
	border-color: #FBB03B;
}

.flex{
	display: flex;
}

.row{
	flex-direction: row;
}

.items-center{
	align-items: center;
}



/* On screens that are 765px or less*/
@media screen and (max-width: 765px) {
	
	#banner_hero {
		margin: 0 auto -1.414rem auto;
	}
}

/* On screens that are 568px or less*/
@media screen and (max-width: 568px) {
	
  	.total{
		width: 55%;
	}
	
	.total-register{
		text-align: center;
		padding-left: 0;
	}
	
		#data-politic .text{
		width: 85%;
	}
}

/* On screens that are 440px or less*/
@media screen and (max-width: 480px) {
	
  	button{
		width: 100%;
	}
	
	.total-label{
		width: 40%;
	}

	.total-price-value{
		width: 60%;
	}	
	
	.ticket-radio{
		width: 25%;
	}

	.ticket-radio-selected{
		width: 25%;
	}

	.ticket-type{
		width: 75%;
	}
	
	.ticket-price{
		width: 100%;
		padding-left: 25%;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	
	.total{
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
	
	#data-politic .text{
		width: 80%;
	}
	
}