@charset "utf-8";
/* CSS Document */

/* FONT IMPORT */

@font-face {
	font-family: BodoniModa18ptBold;
	src: url('/fonts/BodoniModa_18pt-Bold.woff') format('woff');
}

@font-face {
	font-family: BodoniModa9ptBold;
	src: url('/fonts/BodoniModa_9pt-Bold.woff') format('woff');
}

@font-face {
	font-family: TajawalRegular;
	src: url('/fonts/Tajawal-Regular.woff') format('woff');
}

@font-face {
	font-family: TajawalMedium;
	src: url('/fonts/Tajawal-Medium.woff') format('woff');
}

@font-face {
	font-family: TajawalBold;
	src: url('/fonts/Tajawal-Bold.woff') format('woff');
}


/* FONT STYLING */

h2, .h2 {
	font-family: BodoniModa9ptBold;
	position: relative;
	display: inline-block;
	margin-bottom: var(--space-half);
}

h2 {
	border-bottom: 2px solid var(--beige3);
}

h3, strong, input[type="submit"], p.next-date span, #small-nav a, #map a, footer a {
	font-family: TajawalBold;
}

h4 {
	font-family: TajawalMedium;
}

h1, #logo, .logo {
	font-family: BodoniModa18ptBold;
}

.logo h1 {
    font-size: 6rem;
    color: var(--beige3);
	line-height: 1;
}

.logo h3 {
    font-family: TajawalRegular;
}

input::-webkit-input-placeholder {
	font-family: TajawalRegular;
	font-size: 1.125rem;
}

input::-moz-placeholder {
	font-family: TajawalRegular;
	font-size: 1.125rem;
}

input:-ms-input-placeholder {
	font-family: TajawalRegular;
	font-size: 1.125rem;
}

input::-ms-input-placeholder {
	font-family: TajawalRegular;
	font-size: 1.125rem;
}

p, a, label, input::placeholder, .copy, input, textarea {
	font-family: TajawalRegular;
	font-size: 1.125rem;
}

h1, h2, .h2 {
	font-size: 2.625rem;
}

h3 {
	font-size: 1.375rem;
	margin-bottom: .625rem;
}

p.text-tiny {
	font-size: .875rem;
}

h4 {
	font-size: 1.75rem;
}

input[type="submit"], .btn-main, footer a {
	font-size: 1.25rem;
	font-family: TajawalBold;
}

input, #small-nav a, #map a {
	font-size: 1.125rem;
}

p {
	margin-bottom: var(--space-quarter);
	line-height: 1.5;
}

p.text-tiny {
	margin-bottom: 0;
	padding: var(--space-quarter);
}

form p {
	margin-bottom: var(--space-half);
}

label {
	margin-bottom: var(--space-quarter);
}

h4 {
	margin-bottom: var(--space-quarter);
}

h1, h2, h4, p, a, a:hover, label, input[type="submit"] {
	color: var(--white);
}

h3, .choice p, input {
	color: var(--white);
	opacity: 1;
}

a, a:hover {
	text-decoration: none;
}

.btn-main, #small-nav li {
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.btn-main:hover, #small-nav li:hover {
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05);
}

.btn-main {
	border: 2px solid var(--beige3);
	padding: .5rem var(--space) .6rem var(--space);
	margin-top: var(--space-half);
	cursor: pointer;
	text-align: center;
	display: inline-block;
} 

.btn-main:hover {
	-webkit-animation-name: smooth-colorchange;
	        animation-name: smooth-colorchange;
  	-webkit-animation-duration: 2s;
  	        animation-duration: 2s;
  	-webkit-animation-iteration-count: infinite;
  	        animation-iteration-count: infinite;
}


/* -------- RESPONSIVE -------- */

@media screen and (max-width: 800px) {
	
	h1, h2, .h2 {
		font-size: 2.25rem;
	}
	
	input::-webkit-input-placeholder {
		font-size: 1rem;
	}
	
	input::-moz-placeholder {
		font-size: 1rem;
	}
	
	input:-ms-input-placeholder {
		font-size: 1rem;
	}
	
	input::-ms-input-placeholder {
		font-size: 1rem;
	}
	
	p, a, label, input::placeholder, .copy, input, #small-nav a, #map a {
		font-size: 1rem;
	}

	h3, p.next-date span, .pricetag p span  {
		font-size: 1.25rem;
	}

	h4, input[type="submit"], .btn-main, footer a {
		font-size: 1.125rem;
	}
	
}

@media screen and (max-width: 450px) {
	
	h1, h2, .h2 {
		font-size: 1.75rem;
	}
	
	input::-webkit-input-placeholder {
		font-size: 1rem;
	}
	
	input::-moz-placeholder {
		font-size: 1rem;
	}
	
	input:-ms-input-placeholder {
		font-size: 1rem;
	}
	
	input::-ms-input-placeholder {
		font-size: 1rem;
	}
	
	p, a, label, input::placeholder, .copy, input, #small-nav a, #map a, h4, input[type="submit"], .btn-main, footer a {
		font-size: 1rem;
	}

	h3, p.next-date span, .pricetag p span  {
		font-size: 1.125rem;
	}
	
}