/******************************************************************
Site Name: Wizzya There Bus Service
Author:  Kaine Menzie
Description: Website
Version: 1.0
Stylesheet: Main Stylesheet
******************************************************************/
/*font-face*/

/****************
*Skeleton grid for layout
*****************/
@import url('normalize.css');
@import url('skeleton.css');

/********************************
   HTML5 display definitions
***********************************/
/*Correct `block` display not defined in IE 8/9.*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }
/*Correct `inline-block` display not defined in IE 8/9.*/
audio, canvas, video { display: inline-block; }
/*Address `[hidden]` styling not present in IE 8/9. Hide the `template` element in IE, Safari, and Firefox < 22.*/
[hidden], template { display: none; }
/********************************
   Reset
***********************************/
*, *:before, *:after {
  box-sizing: border-box;
}
h1, h2, h3, h4 {
	padding: 0px; margin: 0px;
	font-family: 'Raleway', Helvetica Neue, Helvetica, 'Open Sans', Arial, sans-serif;
}

/********************************
   Base
***********************************/
body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 100;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.6);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.6);
  box-shadow: 0px 0px 10px rgba(0,0,0,.6);
}
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	background:url(../images/bg-repeat.jpg) repeat-x;
	background-position: 0px 176px;
	/*background: url(../images/main-bg.png) repeat #FDFFFC;*/
	/*background: url(../images/background.jpg) repeat-x #FDFFFC;*/
}


.clear    { clear:both; display:block; }
.left     { float: left; }
.right    { float: right; }
.textLeft   { text-align: left; }
.textRight  { text-align: right; }
.textCent     { text-align: center; }
.footwhite {color: #FFFFFF;}
	.footbox a {
		color: #FFFFFF;
		text-decoration: none;}

.orange {background-color: #F4793E}
.white {color: #fff;}
/********************************
   Structure
***********************************/
header {
	width: 1200px;
	margin:0 auto;}
.main {background: url(../images/bg-cent.jpg)  center top no-repeat;}
.main::before {
}
#bg-shiv {
	position: absolute;
    top: 0px;
    right: 0px;
    /*width: 50%;*/
    width: calc(50% - 600px);
    height: 176px;
    background-color: #AD3500;
    z-index: -1;
}
/*container*/
.container {

	}

/*header*/
.header-img {
	width: 100%;
	height: 176px;
	background: url(../images/header-1200.jpg) center top no-repeat;
	}
	@media (max-device-width: 480px) {
		.header-img{
			height: 176px;
			background: url(../images/mbl/wizzya-logo-mbl.jpg) center top no-repeat;
		}
	}
.logo {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;}
/*navigation*/
nav {background: url(../images/nav-bg.png) repeat #343434; height: 49px;
}
/*image*/
.image {
	position:absolute; width:100%; height:100%; background: #AD3500;
	background-image: url(../images/winter-feast.jpg);
    background-size: cover;
}
.overlay {
	/*margin-top: 15%;*/
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
    border-radius: 3px;
    color: #FFFFFF;
    padding: 7px;
    margin: 50px auto;
    /*min-width:600px;*/
    width: 65%;
}
	@media (max-device-width: 480px) {
		.overlay{
			width: 99%;
			margin: 15px auto;
		}
	}
.innerOverlay {
	border: 2px solid rgb(220,220,220);
  	outline: 1px solid #FFF;
  	outline-offset: -6px;
  	padding: 20px;
  	border-radius: 3px;
  	text-align: center;
  }
 .innerOverlay p {font-family: Helvetica Neue, Helvetica, 'Open Sans', Arial, sans-serif;}
/*content*/
.holder {
	width: 95%;
	background-color: #DDDCE2;
	border-radius: 5px;
	border: 2px solid #424242;
	min-height: 80px;
	/*margin-bottom: 30px;*/
	margin: 30px auto;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

	.holder label, .holder input, .holder select, .holder textarea {margin: 5px 10px;}

body.party .holder {text-align: center;}
body.party .holder a {margin:10px;}
.box {
	padding: 20px 10px;
	background-color: white;
	border-radius: 5px;
	border: 2px solid #424242;
	margin-bottom: 30px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box p {padding-bottom: 5px;}
.box img {
	float: right;
	margin-left: 10px;
	height: 125px;
	width: 125px;
	padding: 5px; border: solid 1px #EFEFEF;
	border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999;
}
.content { padding: 20px 10px;}
/*book now*/
.booking-box-left {
	width:50%;
	border-right: 1px solid  #424242;
	float: left;
	text-align: center;
	height: 100%;
}
.booking-box-right {
	width:50%;
	float: left;
	line-height: 80px;
	text-align: center;
	background-color: #F4F4F4;
	font-weight: bold;
	font-size: 1.1em;
}
	.booking-box-right span {font-size: 1.6em;}
/*about*/
#about { padding-bottom: 30px;}
/*Instagram*/
#instagram {
	margin: 30px 15px;

}
/*Events*/
.event {
	float: left;
    height: 207px;
    margin: 20px 0 10px 0;
    width: 100%;
}
.event img {
	border-radius: 5px 0 0 5px;
    float: left;
    height: 100%;
    width: 28.7986%;
    border-right: 2px solid rgba(105, 105, 105, 0.5);
}
.eventTop {
	height: 136px;
    margin-bottom: 2px;
    overflow: hidden;
    position: relative;
    border-bottom: 2px solid rgba(105, 105, 105, 0.5);
}
	.eventTop h3 {
		font-weight: 500;
    	display: block;
    	padding: 20px 2% 10px;
	}
	.eventTop p {
		padding: 0 2%;
		color: #1a3e59;
	}
.event-bottom {
	height: 69px;
	position: relative;
}
	.event-bottom .contain {
		position: absolute;
		right:0;
		bottom: 3px;
	}
	.event-bottom a {text-decoration: none;}
/*footer*/
footer {
	clear: both;
	background: url(../images/footer.png) repeat-x;
	background-color: #28241C;
	/*height:160px;*/
	padding-top: 20px;}

/********************************
   Headings
***********************************/
h1 {}
h2 {
	/*text-shadow: 0 1px 1px #fff;*/
	text-transform: uppercase;
	font-size: 2.5rem;
	letter-spacing: 1px;
	line-height: 1.5;
	/*color: #1a3e59;*/
	text-align: center;
}
h3 {
	color: #1a3e59;
	font-size: 2.3rem;
	letter-spacing: 1.5px;
	line-height: 1.5;
}
.holder h2 {text-align: center; text-transform: uppercase;}
.holder h3 {text-align: center; text-transform: uppercase;}
#about h3 {text-align: center; text-transform: uppercase; margin: 10px 0;}

/********************************
   Typography
***********************************/
p {
	font-family: Georgia,Times,Times New Roman,serif;
	font-size: 1.6rem;
	padding: 10px 10px;
}
#about p {}
.heroText {
	text-transform: uppercase;
	font-size: 1.6rem;
	font-weight: bold;
	/*text-shadow: 0 1px 1px #fff;*/
	letter-spacing: 2px;
}
/********************************
   Navigation
***********************************/
nav.top ul {font-family: 'Open Sans', sans-serif;}
nav.top li {
	display: inline;
}
nav.top li a {
	display: inline-block;
	line-height: 49px;
	padding: 0 14px;
	color: #CBCBCB;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.1em;
	}
nav.top li a:hover, nav.top li a.current {
	background-color: #424242;
	cursor: pointer;
}
nav.top li a:active {
	background-color: black;
}
/********************************
   Links
***********************************/
a {
	font-size: 1.6rem;
	color: #1a3e59;
}
a.heroText {
	color: inherit;
	text-decoration: none;
}
/*a.heroText::after {
    content: " - Remember this";
}*/
/*ghost buttons*/
.ghost {
  display: inline-block;
  padding: 8px;
  color: #69C41B;
  border: 1px solid #69C41B;
  text-align: center;
  outline: none;
  text-decoration: none;
  border-radius: 4px;
  transition: border-color 0.3s ease-out,
              color 0.3s ease-out;
}
.ghost:hover,
.ghost:active {
  color: #892913;
  border-color: #892913;
  transition: border-color 0.4s ease-in,
              color 0.4s ease-in;
}
.booking-box-left a.ghost {
		margin:20px;
		/*color: #69C41B;*/
  		/*border: 1px solid #69C41B;*/
	}
	.booking-box-left a.ghost:hover {
		color: #228B22;
		border: 1px solid #228B22;
	}
/****************************************
	Icons
**************************************/
.phoneIcon {
	background: transparent url(../images/phone-icon.png) scroll no-repeat top center;
    padding: 40px 25px 8px 25px;
}
.emailIcon {
	background: transparent url(../images/mail-icon.png) scroll no-repeat top center;
    padding: 40px 25px 8px 25px;
}
.infoIcon {
	background: transparent url(../images/info-icon.png) scroll no-repeat top center;
    padding: 40px 25px 8px 25px;
}
/****************************************
	Forms
**************************************/
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    }
.form-input {
  background-color: #E9EAEC;
  width: 92.5%;
  margin: 20px auto;
  border: 1px solid #424242;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.form-heading {
  height:50px;
}
.underline {
  width:75%;
  border-bottom: 1px solid #999;
margin: 0 auto;
}
input.controls {
  background-color: #DFE0E2;
  outline: none;
  border: 1px solid #999;
}
label {color:#999;}
.tripDetails {display: none;}
form {
	padding: 15px;
}
/* form > div { display: inline-block; width: 49%; } */
label, input { display: block; }
input.controls {width:95%;}
.priceBox {
	color: #1EAEDB;
	text-align: center;
	margin:0 auto;}
.priceBox span {font-weight: bold;}
select.down {
	background-image: url(../images/down-icon.png);
	background-position: calc(100% - 5px) calc(1em - 1px); /*calc(100% - 8px) calc(1em + 2px), calc(100% - 2.5em) 0.5em*/
    background-repeat: no-repeat;
    background-size: auto auto;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none;
    width:70px;
}
span.right-arrow{
  background-image: url(../images/right-icon.png);
  display: inline-block;
  /* background-position: calc(100% - 5px) calc(1em - 1px); /*calc(100% - 8px) calc(1em + 2px), calc(100% - 2.5em) 0.5em*/ */
  background-repeat: no-repeat;
  /* background-size: auto auto;
  appearance:none;
  -moz-appearance:none; /* Firefox */
  /* -webkit-appearance:none; */
  width: 8px;
  height: 13px;
}

.flight-details {
	margin: 0 auto;
	display: none;
	}
#form-messages, #contact-form-messages {
	background-color: #f1f9f7;
    border-color: #e0f1e9;
    color: #1d9d74;
    text-align: center;
    display: none;
}
	#form-messages.alert-success, #contact-form-messages.alert-success {
		color: #4F8A10;
    	background-color: #DFF2BF;
	}
	#form-messages.error, #contact-form-messages.error, .error {
		color: #D8000C;
    	background-color: #FFBABA;
	}

textarea {
	width: 95%;
	height:40px;
}
select{background-color: #DFE0E2;}
button {
  margin-top: 15px;
  width: 90%;
  max-width: 300px;
}
textarea {background-color: #DFE0E2;}
.required:after {
  content:" *";
  color: #AC3400;
}

/********************************
   Other
***********************************/
/*Horizontal rule*/
hr {
margin: 3px 0 18px;
height: 0;
clear: both;
border: solid rgba(105, 105, 105, 0.5);
border-width: 1px 0 0;
border-top: 1px solid rgba(105, 105, 105, 0.8);
border-bottom: 1px solid rgba(105, 105, 105, 0.2);
}
/*instafeed*/
#instagram {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: #E3E3E3;
	padding: 70px 0 5px 0;
	margin-bottom: 20px;
	border-radius: 20px 0 5px 5px;}
	.instaHeading {
		position: absolute;
		top:10px;
		right: 10px;
		width: 80%;
		text-align: right;
	}
	.instaHeading h3 {line-height: 50px;}
	.instaHeading img {
		-ms-transform: rotate(16deg); /* IE 9 */
    	-webkit-transform: rotate(16deg); /* Chrome, Safari, Opera */
    	transform: rotate(16deg);}
#instafeed a img {
	width: 27%;
	margin: 2px 7px;
	border: solid 1px #FFF;
	border: solid 5px #FFF; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999;
}
/*list with icon dots*/
ul.icon-list {
    list-style-image: url('../images/wizz-icon-sml.png');
    font-family: Georgia,Times,Times New Roman,serif;
	font-size: 1.6rem;
	padding: 20px 10px;
}

#map {
    height: 300px;
    background-color: #E9EAEC;
    width: 90%;
    margin: 20px auto;
    border: 1px solid #424242;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }

/* Bookings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bookingbox {

}
.switch-field {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  /* padding: 40px; */
  overflow: hidden;
  margin: 30px auto;
  width: 240px;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  margin: 0;
  width: 120px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition:    all 0.1s ease-in-out;
  -ms-transition:     all 0.1s ease-in-out;
  -o-transition:      all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #A5DC86;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}
.select-box {
  width: 40%;
  float: left;
}
select#car-seats {width: 85px;}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (max-width: 400px) {
	h2 {
		font-size: 1rem;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 550px) {}

/* Larger than tablet */
@media (max-width: 750px) {}

/* Larger than desktop */
@media (max-width: 1000px) {}

/* Larger than Desktop HD */
@media (max-width: 1200px) {}