@import "reset.css";

.comp-closed {font-size:1.85rem; line-height:2.25rem; margin:2rem 2rem 1rem 7rem; text-align:center;}
.winner-list {margin:1rem 2rem 4rem 8rem;}
	.winner-list li {width:48%; float:left; list-style:none; font-size:1.25rem; line-height:1.6rem; text-align:center;}
@media only screen and (max-width : 767px) {
	.comp-closed {margin:2rem 2rem 2rem 2rem;}
	.winner-list {margin:0.5rem 2rem 4rem;}
}

/* General things */
html, body {width:100%; font-family:arial, sans-serif; font-size:12px; line-height:16px; color:#490e00; background:#26110b;}

.content p {font-size:1.5rem; line-height:2rem; color:#000; margin-bottom:1.5rem;}
.error-message {width:90%; margin:1rem 0 3rem 8% !important; font-size:1.25rem !important; line-height:1.5rem !important; color:#ff0000 !important; text-algin:center; padding:1rem 2rem;}

.content {width:80%; max-width:942px; background:url('../images/bg-page.jpg') no-repeat center top #bd8859; margin:0 auto 5rem; position:relative;}
	.content .bigw {width:7.5rem; max-width:94px; position:absolute; top:2rem; right:2rem;}
	.content .headline {width:85%; margin:6rem auto 2rem; display:block;}
	.content .deco-holly {width:15%; position:absolute; top:36rem; left:0;}
	.content .deco-tower {width:45%; position:absolute; top:31rem; right:0;}
	.content > .container {width:55%;}
		.content .intro {margin-top:-5.5rem;}
			.content .intro img {margin-left:auto; margin-right:auto; margin-bottom:1rem; padding-left:6rem; display:block;}
			.content form {width:100%; margin-top:2rem;}
				.ui-datepicker .ui-datepicker-header {background:#a3722b; color:#fff;}
				.content form input[type="text"], .content form select {width:92%; background-color:transparent; border:none; outline:none; color:#490e00; font-size:1.25rem; padding:2.5px 0 5px 0;  margin-left:8%; -webkit-appearance:none; border-bottom:2px solid #490e00;}
				.content form select {background:url('../images/icon-dropdown.png') no-repeat 98% center transparent;}
					.content form .short {width:42% !important; float:left;}
					select.placeholder {color:#490e00; opacity:0.6;}
					::-webkit-input-placeholder {color:#490e00; opacity:0.6;}
					::-moz-placeholder {color:#490e00; opacity:0.6;}
					:-ms-input-placeholder {color:#490e00; opacity:0.6;}
					:-moz-placeholder {color:#490e00; opacity:0.6;}
						.content form input.error, .content form select.error {border-color:#ff0000; color:#490e00;}
							.content form input.error::-webkit-input-placeholder {color:#ff0000;}
							.content form input.error::-moz-placeholder {color:#ff0000;}
							.content form input.error:-ms-input-placeholder {color:#ff0000;}
							.content form input.error:-moz-placeholder {color:#ff0000;}
							.content form select.placeholder.error {color:#ff0000;}
						.content .error-list label {display:block; margin-left:8%; font-size:1.25rem; font-weight:bold; line-height:1.25rem; color:#490e00;}
				.content form .btn {display:block; padding:0.25rem 2.5rem; float:right; background:transparent; border:1px solid #490e00; outline:none; -webkit-appearance:none; color:#490e00; font-size:1.5rem; font-weight:bold; text-align:center; cursor:pointer;}
					p.checkbox {margin-left:8%; font-size:0.75rem; color:#490e00;}
					p.checkbox checkbox {margin:0;}
					p.checkbox a {color:#490e00;}
					p.checkbox a:hover {text-decoration:none;}
				.error-list {margin-top:1.5rem;}
	
	.confirmation {text-align:center;}
		.confirmation h2 {width:85%; text-align:center; font-size:2rem; line-height:2.5rem; margin:0 auto 2rem;}
		.confirmation h2.first {color:#a3722b; text-decoration:underline; margin-bottom:0.5rem;}
		.confirmation .link {display:inline-block; padding:1rem 1.5rem; margin:0 auto 15rem; background:#a3722b; outline:none; -webkit-appearance:none; color:#fff; font-size:2rem; font-weight:bold; text-align:center; text-decoration:none; border-radius:10px; cursor:pointer;}

footer {width:100%; background:#fff; text-align:center;}
	footer .container {padding:15px 0; position:relative;}
		footer img {position:absolute; left:5%; top:0; margin-top:0.75rem;}
		footer a {font-size:0.75rem; color:#643422; margin:0 0.75rem; text-decoration:none;}
		footer a:hover {text-decoration:underline;}

/* Terms */
.terms .content {background:url('../images/bg-page-terms.jpg') no-repeat center top #bd8859;}
	.terms .content > .container {width:85%; margin:6rem auto;}
		.terms h2 {font-size:2rem; line-height:2rem; text-align:center; font-weight:bold; margin:0 auto 1rem;}
		.terms li {font-size:1.25rem; line-height:1.75rem; margin-bottom:1rem; margin-left:10px;}
			.terms li li {margin-left:25px; margin-bottom:0;}
		.terms p {font-size:1.25rem; line-height:1.75rem; margin-bottom:1rem; color:#490e00;}
		.terms table {font-size:1.25rem; line-height:1.75rem; margin:1rem 0 1rem 5rem; border-collapse:collapse;}
			.terms table td {border:1px solid #490e00; padding:0.75rem 0.75rem 0;}


/* Helper classes */
.mobile {display:none !important;}
.hidden {display:none !important; visibility: hidden;}
.clearfix:before, .clearfix:after {content: " ";  display: table;}
.clearfix:after {clear: both;}
.float-right {float:right;}
.float-left {float:left;}

/* Media queries */

/* Smartphone */
@media only screen and (max-width : 767px) {
	/* General */
	.desktop {display:none !important;}
	.mobile {display:block !important; width:100%;}
	.content {width:100%; padding:2rem 0 0; margin-bottom:0; background-size:150% !important; background-position-x:100%;}
		.bigw {width:5rem !important; top:1rem !important; right:1rem !important;}
		.headline {width:95% !important; margin-top:3rem !important;}
		.intro {margin-top:0 !important;}
		.intro img {width:85%; margin-left:auto; margin-right:auto; padding-left:0 !important;}
		.deco-holly {position:relative !important; float:left; top:0 !important;}
		.deco-tower {position:relative !important; float:right; top:0 !important;}
		.content form {margin-top:4.5rem;}
			.content form input[type="text"], .content form select {margin:0 4% 1rem; font-size:1rem;}
			p.checkbox {margin:0 3% !important; line-height:0.85rem;}
			.content form .btn {margin-right:4%;}
			.error-message {padding:1rem 5%; margin:1rem auto 3rem !important;}
	
	footer a {display:inline-block !important; margin:0 5% 2rem !important;}
	footer img {position:relative; top:0; left:0; display:block; margin:0 auto 1rem !important; padding-top:1rem;}
	.content > .container {width:100%; background:none; margin:0 !important;}
	
	footer .container {width:100% !important; padding:0;}
	footer .inline-content {width:90% !important; padding:1rem 5%; text-align:center; font-size:1.25rem;}
		footer a {display:block; margin:0.75rem 0;}
		footer .yt-website {background:#1a1a1a;}
		footer .logo-yellowtail {width:30%; float:left; padding:0 !important;}
		footer strong {width:40%; float:right; padding-top:0.25rem;}

}

/* Tablet */
@media only screen and (min-width : 768px) and (max-width : 1024px) { 
	
}