/*
CSSGrid is a Responsive CSS Grid designed to work on web and mobile devices. (www.cssgrid.co)
Please don't steal. Support this grid and buy a license from: http://codecanyon.net/item/responsive-html5-css-grid/4928861

-------------------------------------------------------------
CSS Structure:

01. Default styles for page design (not required for CSS Grid)
02. fixed (f) and percentage (p) column setup
-------------------------------------------------------------
*/


/* 01. Default styles for page design -------------------------- */

/* Generated your own fonts from http://www.fontsquirrel.com/tools/webfont-generator */

@font-face {
    font-family: 'BodoniClassic-RomanRegular';
    src: url('../fonts/bodonclarom-webfont.eot');
    src: url('../fonts/bodonclarom-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bodonclarom-webfont.woff') format('woff'),
         url('../fonts/bodonclarom-webfont.ttf') format('truetype'),
         url('../fonts/bodonclarom-webfont.svg#BodoniClassic-RomanRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'textabold';
    src: url('../fonts/texta-bold-webfont.eot');
    src: url('../fonts/texta-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texta-bold-webfont.woff2') format('woff2'),
         url('../fonts/texta-bold-webfont.woff') format('woff'),
         url('../fonts/texta-bold-webfont.ttf') format('truetype'),
         url('../fonts/texta-bold-webfont.svg#textabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'textalight';
    src: url('../fonts/texta-light-webfont.eot');
    src: url('../fonts/texta-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texta-light-webfont.woff2') format('woff2'),
         url('../fonts/texta-light-webfont.woff') format('woff'),
         url('../fonts/texta-light-webfont.ttf') format('truetype'),
         url('../fonts/texta-light-webfont.svg#textalight') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	width:100%;
	margin:0 auto;
	background-color:#58585a;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	-webkit-text-size-adjust: none;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
	overflow-x:hidden;
}
html {
	margin:0 auto;
	overflow-x:hidden;
}
.animate, .submit { /* Makes columns animate when @media css changes */
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
}
a {
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
	opacity: 1.0;
	text-decoration:none;
}
p {
	font-weight:normal;
}
img,
img a {
	border:0;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
}
h1, h2, h3 {
	margin:0;
	padding:0;
}
h1 {
	font-family:"BodoniClassic-RomanRegular", "Times New Roman", Times, serif;
	font-weight:bold;
	position:absolute;
	z-index:3;
	width:100%;
	text-align:center;
}
h2 {
	font-family:"BodoniClassic-RomanRegular", "Times New Roman", Times, serif;
	position:absolute;
	z-index:3;
	width:100%;
	text-align:center;
}
.arrow {
	position:absolute;
	bottom:18px;
	font-family:'textalight', Arial, Helvetica, sans-serif;
	color:#fff;
	z-index:3;
	width:100%;
	height:60px;
	text-align:center;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:40px;
	-moz-background-size:40px;
}
.arrow a {
	color:#fff;
	display:block;
	padding-bottom:40px;
}
.arrow a:hover {
	opacity:0.7;
}


h3 {
	font-family:'textalight', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-weight:normal;
	font-size:24px;
	line-height:26px;
	padding-left:25px;
	padding-right:25px;
	padding-top:22px;
	padding-bottom:25px;
}
.wrapper {
	width:100%;
	height:100%;
	min-height:100%;
	position:absolute;
}
.slide1 {
	width:100%;
	height:100%;
	min-height:100%;
	position:relative;
}
.slide2 {
	width:100%;
	height:100%;
	min-height:100%;
	position:relative;
}
.img-left {
	background-color:#58585a;
	width:50%;
	height:100%;
	position:absolute;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position:center center;
	background-image: url(../images/left.jpg);
	background-repeat: no-repeat;	
}
.img-right {
	background-color:#58585a;
	width:50%;
	height:100%;
	position:absolute;
	margin-left:50%;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position:center center;
	background-image: url(../images/right.jpg);
	background-repeat: no-repeat;	
}
.triangle-top {
	width:100%;
	height:50%;
	position:absolute;
	top:0;
	z-index:1;
	background-image: url(../images/triangle-top.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
.triangle-bot {
	width:100%;
	height:50%;
	position:absolute;
	top:50%;
	z-index:1;
	background-image: url(../images/triangle-bot.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.logo-top {
	width:100%;
	height:35%;
	position:absolute;
	top:0;
	z-index:2;
	background-image: url(../images/the-junction.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:250px;
	-moz-background-size:250px;
}

.content {
	max-width:1060px;
	margin:0 auto;
}

.phoneus {
	font-family:'textabold', Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	font-size:32px;
	float:left;
	line-height:46px;
}
.phoneus a {
	color:#fff;
}
.raywhite {
	float:right;
	margin-top:5px;
	margin-right:10px;
	width:190px;
	height:60px;
	display:inline-block;
	background-image: url(../images/raywhite.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size:180px;
	-moz-background-size:180px;
}

.smallprint {
	font-size:11px;
	line-height:13px;
	font-family:'textalight', Arial, sans-serif;
	font-weight:normal;
	color:#ccc;
	padding-top:20px;
	padding-bottom:20px;
}
.smallprint a {
	color:#fff;
	padding-bottom:1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}


/* iOS Slider */
.responsiveHeight {
	height: 480px;
	padding-bottom: 0;
	position: relative;
	overflow: visible;
}
.responsiveHeight > .inner {
	position: absolute;
	width: 100%;
	height: 100%;
}
.iosSlider {
	position: relative;
	top: 0;
	left: 0;
	overflow: visible;
	width: 100%;
	height: 100%;
}
.iosSlider .slider {
	width: 100%;
	height: 100%;
}
.iosSlider .slider .item {
	float: left;
	width: 1020px;
	height: 100%;
	text-align: center;
}
.iosSlider .slider .item img {
	width: 100%;
}

.arrow-left a {
	color:transparent;
	width:70px;
	height:70px;
	display:block;
	position:absolute;
	left:0;
	margin-left:25px;
	top:50%;
	margin-top:-60px;
	z-index:4;
	background-image: url(../images/arrow-left.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:24px;
	-moz-background-size:24px;
	opacity:1;
	border:0;
}
.arrow-right a {
	color:transparent;
	width:70px;
	height:70px;
	display:block;
	position:absolute;
	right:0;
	margin-right:25px;
	top:50%;
	margin-top:-60px;
	z-index:4;
	background-image: url(../images/arrow-right.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:24px;
	-moz-background-size:24px;
	opacity:1;
	border:0;
}
.arrow-left a:hover,
.arrow-right a:hover {
	opacity:0.8;
}


.indicators {
	position: relative;
	top: 10px;
	left: 0;
	width: 1024px;
	height: 10px;
	margin: 0 auto;
	z-index: 10;
}

.indicators .item {
	float: left;
	width: 8px;
	height: 8px;
	margin: 0 5px 0 0;
	border: 1px solid #000;
}

.indicators .selected {
	background: #666;
}

.edge-right {
	left:50%;
	margin-left:510px;
	width:500px;
	height:480px;
	position:absolute;
	z-index:4;
	background-color:rgba(88,88,90,0.70);
}
.edge-left {
	left:50%;
	margin-left:-1010px;
	width:500px;
	height:480px;
	background-color:rgba(88,88,90,0.70);
	position:absolute;
	z-index:4;
}

@media screen and (max-width: 1024px) {
	
.responsiveHeight {
	height: 0;
	padding: 0 0 47% 0; /* responsive slider height = 40% of the browser width */ /* 1024/400 = 0.39 */
}
.iosSlider .slider .item {
	float: left;
	width: 100%;
	height: 100%;
	text-align: center;
}

.indicators {
	width: 100%;
}
.edge-left,
.edge-right {
	display:none;
}

}











/* Custom Form elements */
form,
fieldset {
	padding:0;
	margin:0;
	border:0;
}
.rego {
	margin:0 auto;
	padding-top:0;
	text-align:left;
}
input {
	font-family:'textalight', Arial, sans-serif;
	font-weight:normal;
	font-size:15px;
	color:#fff;
	-webkit-appearance: none;
	width:96%;
	padding-top:3px;
	height:34px;
	padding-left:10px;
	border-radius: 0;
	text-align:left;
	margin-bottom:18px;
	background-color:#58585a;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
}
input.error {
	border-top-color: #ff9933;
	border-bottom-color: #ff9933;
}
input.lesswidth {
	width:96%;
}

.text-left {
	text-align:left;
}
.send {
	margin:0 auto;
}
input.submit {
	margin-top:5px;
	font-family:'textalight', Arial, sans-serif;
	font-weight:normal;
	font-size:16px;
	background-color:#ee364c;
	padding-top:6px;
	padding-bottom:6px;
	height:36px;
	color:#fff;
	cursor:pointer;
	text-align:center;
	width:98%;
	padding-left:10px;
	border:0;
}
.submit a {
	color:#fff;
	display:inline-block;
}
.submit:hover {
	background-color:#999;
	border-right-color: #999;
	border-left-color: #999;
	color:#fff;
}
.error-msg {
	font-family:'textabold', Arial, sans-serif;
	font-weight:normal;
	display:none;
	color:#ff9933;
	font-size:15px;
	margin-top:0;
}
.mandatory {
	font-family:'textalight', Arial, sans-serif;
	font-weight:normal;
	font-size:12px;
	color:#76c5d5;
	padding-top:10px;
	padding-bottom:40px;
}
/* Make placeholder text 100% visible */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color:#ccc;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
	color:#ccc;
	opacity:1;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
	color:#ccc;
	opacity: 1;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	color:#ccc;
}


.jstyling-select.error,
.custom-select.error {
	border-color: #ff6633;
}

.jstyling-select {	font-family:'textalight', Arial, sans-serif;font-weight:normal; margin: 0; padding: 0; position:relative; z-index: 0; color:#ccc; text-align:left;
width:96%;

	background-color:#58585a;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCC;
	border-bottom-color: #CCC;

}
.jstyling-select-t {white-space: nowrap; overflow: hidden;}
.jstyling-select-l {margin: 0; padding: 0; width: 100%; display: none; position: absolute; overflow-y: auto; z-index: 1000;}
.jstyling-select-l div {list-style: none; display: block; white-space: nowrap; overflow: hidden;}
.jstyling-select-l div:hover {}
.jstyling-select-l div.disabled {}
.jstyling-select-l div.disabled:hover {}
.jstyling-select.active {z-index: 700; }    
.jstyling-select.active .jstyling-select-l {display: block;}
.jstyling-checkbox, .jstyling-radio {margin: 0; padding: 0; display: inline-block; z-index: 1;}
.jstyling-checkbox input[type=checkbox], .jstyling-radio input[type=radio] {opacity: 0; filter: alpha(opacity = 0); z-index: 0;}
.jstyling-select select { visibility: hidden; width: 1px; height: 1px; position: absolute; }


/* Select wrapper */ 
.jstyling-select { padding-top:3px; padding-bottom:5px; width: 98%; border-top-width: 0px;
font-size:15px;
padding-bottom:0;
height:34px;
	background-color:#58585a;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
 cursor: pointer; margin-bottom: 18px; }
.red .jstyling-select { background-color:#58585a; border-bottom-color: #ff9933;border-top-color: #ff9933; }
/* Select current option */
.jstyling-select-s { height: 31px; line-height: 31px; background: url(../images/dd.png) no-repeat right center; padding-left: 10px;}
.jstyling-select-t {width: 90%;} 

/* Select options list*/
.jstyling-select-l {max-height: 190px; border: 1px solid #555; border-top: 0; top: 0px; left: -1px; background-color: #444; } 
    .jstyling-select-l div {height: 37px; line-height: 37px; border-top: 1px solid #555; padding: 0 10px; padding-top:0; padding-left:10px; padding-bottom:0; background-color:#444;} 
    .jstyling-select-l div:hover { background: #333; }
    .jstyling-select-l div.disabled {background: #fff;}
    .jstyling-select-l div.disabled:hover {color: #000000;}
    .jstyling-select-l div:first-child {border-top: 0}
.jstyling-select.active {background-position: 100% -28px;}
.jstyling-select.disabled {background-color: #fff;}

/* Checkbox */
.jstyling-checkbox {width: 16px; height: 16px;  background: url(../images/jcusel-checkbox-radio.png) no-repeat;  vertical-align: middle;}
.jstyling-checkbox.active {background-position: 100% -16px;}
.jstyling-checkbox.disabled {background-position: 100% -32px;}
.jstyling-checkbox.active.disabled {background-position: 100% -48px;}

/* Radio button */
.jstyling-radio {width: 25px; height: 25px;  background: url(../images/radio.png) no-repeat; background-position: 0 0;  vertical-align: middle; margin-right: 2px;}
.jstyling-radio.active {background-position: 0 -25px;}
.jstyling-radio.disabled {background-position: 100% -96px;}
.jstyling-radio.active.disabled {background-position: 100% -112px;}



/* Warning Sign for Internet Explorer 8 users (This website does not support IE8) */

#warning {
	background-color:#333;
	padding:20px;
	color:#999;
	margin-bottom:10px;
	line-height:21px;
	font-size:16px;
}
#warning strong {
	color:#fff;
}
#warning a {
	color:#fff;
	font-weight:normal;
	padding-bottom:0px;
	text-decoration:none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;
}
#warning a:hover {
	color:#fff;
	font-weight:normal;
	padding-bottom:0px;
	text-decoration:none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: .fff;
}



/* 02. fixed (f) and percentage (p) column setup -------------------------- */

/* Add style to columns to make them visible */

.f1,
.f2,
.f3,
.f4,
.f5,
.f6,
.f7,
.f8,
.p1,
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8
{
	font-weight:normal;
	margin:0 auto;
}