/* ==================================================
   CSS Imports
================================================== */

@import url("reset.css");
@import url("owlcarousel.css");
@import url("uikit.scrollspy.css");

/* ==================================================
   Icon Fonts
================================================== */

@import url("fonts/fontawesome/font-awesome.css");

/* ==================================================
   Google Fonts
================================================== */

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");

/* ==================================================
   Global Styles
================================================== */
:root {
	--primary-color: #535352;
	--secondary-color: #ab1c24;
	--tertiary-color: #000;
	--white: #fff;
	--black: #000;
	--light-gray:#dbdbdb;
	--medium-gray:#bfbfbf;
	--dark-gray:#919191;
	--body-color: #000;
	--headline-color: #ab1c24;
}
*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html
{
	height: 100%;
	overflow: auto;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 32px;
	font-weight: 300;
	color: var(--body-color);
	background: var(--white);
	
	text-rendering: optimizeLegibility;
	vertical-align: baseline;
}

::selection
{
	background: var(--primary-color);
	color: var(--white);
}

::-moz-selection
{
	background: var(--primary-color);
	color: var(--white);
}

a
{
	color: var(--primary-color);
	text-decoration: none;
	border-bottom: 1px dotted transparent;
}

	a:hover
	{
		color: var(--secondary-color);
		border-bottom: 1px dotted var(--secondary-color);
	}

/* ==================================================
   Default Typography
================================================== */

p
{
	color: var(--body-color);
	margin: 0 0 20px 0;
}

strong
{
	font-weight: 600;
}

em
{
	font-style: italic;
}

h1
{
	color: var(--headline-color);
	font-size: 46px;
	line-height: 1.2;
	margin: 0 0 30px 0;
	text-transform: none;
	font-weight: 300;
}
h1 span {
	font-size: 65px;
	line-height: 1.5;
}
h2
{
	font-size: 38px;
	line-height: 1.2;
	margin: 0 0 30px 0;
	text-transform: none;
	font-weight: 300;
}
h3
{
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 30px 0;
	text-transform: none;
	font-weight: 300;
}
.font-xs {
	font-size: 8px;
}
.font-s {
	font-size: 12px;
}
.font-m {
	font-size: 16px;
}
.font-l {
	font-size: 21px;
}
.font-xl {
	font-size: 26px;
}

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

.overlay {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: var(--white);
	opacity: 0.6;
}
/* ==================================================
   Background Colours
================================================== */
.bgimage {
	background-image: url('/images/image1.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	height: 100vh;
	position: relative;
}

.colour1
{
	background: var(--primary-color);
}
.colour1 p,.colour1 li,.colour1 h1,.colour1 h2,.colour1 h3,.colour1 h4,.colour1 h5,.colour1 h6 {
	color: var(--white);
}
.colour1 a {
	color: var(--white);
	border-bottom: 1px dotted transparent;
}
.colour1 a:hover {
	color: var(--secondary-color);
	border-bottom: 1px dotted var(--secondary-color);
}

.colour2
{
	background: var(--secondary-color);
}
.colour2 p,.colour2 li.colour2 h1,.colour2 h2,.colour2 h3, .colour2 h4,.colour2 h5,.colour2 h6 {
	color: var(--white);
}
.colour2 a {
	color: var(--white);
	border-bottom: 1px dotted transparent;
}
.colour2 a:hover {
	color: var(--tertiary-color);
	border-bottom: 1px dotted var(--tertiary-color);
}

.colour3
{
	background: var(--tertiary-color);
}
.colour3 p,.colour3 li,.colour3 h1,.colour3 h2,.colour3 h3, .colour3 h4,.colour3 h5,.colour3 h6 {
	color: var(--white);
}
.colour3 a {
	color: var(--white);
	border-bottom: 1px dotted transparent;
}
.colour3 a:hover {
	color: var(--primary-color);
	border-bottom: 1px dotted var(--primary-color);
}

/* ==================================================
   Separator Arrows
================================================== */

.arrow-separator
{
	position: relative;
}

.arrow-separator:after
{
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 12px;
	left: 50%;
	margin-left: -12px;
	z-index: 11;
}
	
.arrow-white:after
{
	border-color: var(--white) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); /** Using RGB to remove dark line in Firefox **/
}

.arrow-theme1:after
{
	border-color: var(--primary-color) rgba(26,188,156,0) rgba(26,188,156,0) rgba(26,188,156,0);
}

.arrow-theme2:after
{
	border-color: var(--secondary-color) rgba(22,160,133,0) rgba(22,160,133,0) rgba(22,160,133,0);
}



.arrow-grey:after
{
	border-color: var(--tertiary-color) rgba(238,238,238,0) rgba(238,238,238,0) rgba(238,238,238,0);
}

/* ==================================================
   General Layout Styles
================================================== */

.fullwidth
{
	width: 100%;
	padding: 60px 30px;
	min-width: 280px;
}

.fullwidth .bodycontainer
{
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	text-align: center;
}
	
#topcontainer
{
	padding-top: 10vh;
}

#topcontainer h1
{
	margin-bottom: 0;
	color: var(--black);
}

#topcontainer p
{
	margin-bottom: 0;
	color: var(--black);
}

#topcontainer p span
{
	font-size: 90px;
	line-height: 90px;
	color: var(--secondary-color);
}
	
#countdown
{
	color: var(--dark-gray);
}	
	
#countdown a{
	font-weight:600;
}

#countdown h2{
	color:var(--dark-gray);
	font-weight:600;
}

#countdown #countdowncont
{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

#countdown #countdowncont ul#countscript li
{
	float: left;
	width: 25%;
	padding: 30px 0;
	margin: 0;
	list-style-type: none;
}

#countdown #countdowncont ul#countscript li span
{
	font-size: 80px;
	line-height: 80px;
	font-weight: 500;
	color: var(--dark-gray);
}

#countdown #countdowncont ul#countscript li p
{
	color: var(--dark-gray);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 18px;
	margin: 0;
}
	
#maincont #signupform
{
	margin: 0 auto 20px auto;
	width: 80%;
}

.nl-box
{
	position: relative;
	width: 100%;
	min-width: 50px;
	height: 50px;
	overflow: hidden;
}

.nl-box .nl-box-input
{
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	outline: none;
	background: var(--white);
	border: 0;
	width: 100%;
	height: 50px;
	margin: 0;
	z-index: 10;
	padding: 0 65px 0 15px;
	font-family: inherit;
	font-size: 20px;
	color: var(--medium-gray);
	
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	
	-webkit-appearance: none;
}

button.formbutton, .nl-box-submit 
{
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
}

.nl-box-submit
{
	background: var(--white); /* IE needs this */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
	filter: alpha(opacity=0); /* IE 5-7 */
	opacity: 0;
	color: transparent;
	border: none;
	outline: none;
	z-index: -1;
}

button.formbutton
{
	color: var(--primary-color);;
	background: var(--secondary-color);
	z-index: 90;
	border: 0;
	height: 50px;
}

button.formbutton span
{
	font-size: 19px;
	transition:all 300ms;
}
			
button.formbutton:hover
{
	background: var(--secondary-color);
}
button.formbutton:hover span
{
	font-size:28px;
	transition:all 300ms;
}
#quotecont
{
	padding: 30px 0;
}

#quotecont .owl-theme .owl-controls .owl-page span
{
	background: var(--medium-gray);
}
	
#quotecont .owl-theme .owl-controls .owl-page.active span,
#quotecont .owl-theme .owl-controls.clickable .owl-page:hover span
{
	background: var(--primary-color);;
}

#footercont
{
	position: relative;
	font-size: 18px;
}

#footercont #socialmedia ul
{
	margin: 0 0 30px 0;
}

#footercont #socialmedia ul li
{
	display: inline-block;
	list-style-type: none;
	margin: 0 10px;
}

#footercont #socialmedia ul li a
{
	font-size: 36px;
	color: var(--dark-gray);
}
		
#footercont #socialmedia ul li a:hover
{
	color: var(--primary-color);
}
			
#footercont p.backtotop
{
	margin: 0 0 40px 0;
}

#footercont p.backtotop a
{
	position: relative;
	display: inline-block;
	background: var(--tertiary-color);
	font-size: 32px;
	line-height: 32px;
	color: var(--dark-gray);
	padding: 5px 12px;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
		
#footercont p.backtotop a:hover
{
	background-color: var(--primary-color);;
	color: var(--white);
	text-decoration: none;
}
			
#footercont p.backtotop a:active
{
	top: 2px;
}

/* ==================================================
   Responsive Media Queries - Tablets
================================================== */

@media screen and (max-width: 768px)
{

	body
	{
		font-size: 18px;
		line-height: 1.2;
	}
	
	#topcontainer h1,
	#topcontainer h1 span
	{
		font-size: 48px;
		line-height: 1.2;
	}
	
	#countdown #countdowncont
	{
		max-width: 400px;
	}
	
	#countdown #countdowncont ul#countscript li
	{
		width: 50%;
		padding: 10px 0;
	}
		
	#countdown #countdowncont ul#countscript li span
	{
		font-size: 70px;
		line-height: 70px;
	}
			
	#quotecont
	{
		padding: 15px 0;
	}
		
	#footercont
	{
		font-size: 19px;
	}
		
	#footercont #footerleft
	{
		float: none;
		padding: 30px 0;
		text-align: center;
	}
		
	#footercont #socialmedia ul li a
	{
		font-size: 32px;
	}
		
	#footercont #footerright
	{
		float: none;
	}
	
}

/* ==================================================
   Responsive Media Queries - Mobiles
================================================== */

@media screen and (max-width: 480px)
{	

	body
	{
		font-size: 21px;
		line-height: 27px;
	}
	
	#topcontainer h1,
	#topcontainer h1 span
	{
		font-size: 36px;
		line-height: 1.2;
		
	}
	
	#countdown #countdowncont ul#countscript li
	{
		padding: 6px 0;
	}
	
	#countdown #countdowncont ul#countscript li span
	{
		font-size: 62px;
		line-height: 62px;
	}

	#countdown #countdowncont ul#countscript li p
	{
		font-size: 16px;
		line-height: 16px;
	}
		
	#maincont #signupform
	{
		margin: 0 auto 20px auto;
		width: 100%;
	}
	
	#quotecont
	{
		padding: 5px 0;
	}
	
	#footercont #socialmedia ul li
	{
		margin: 0 5px;
	}

	#footercont #socialmedia ul li a
	{
		font-size: 28px;
	}
	
}