/* CSS Document

Author: Richard Jarvis, © AA Tourism 2013

[ TABLE OF CONTENTS ]

1. Generic Styles / OOCSS
2. Main Editable Elements
    2.1. Headings
    2.2. Main Navigation
    2.3. Company Branding
    2.4. Content Blocks
3. Footer
4. Template Colors
5. Media Queries
    5.1 Screen size: 1200px wide
    5.2 Screen size: 1024px wide
    5.3 Screen Size: 764px wide
    5.4 Screen Size: 480px wide
    5.5 Screen Size: 320px wide
*/


/**********************************************

/* 1. Generic Styles  OOCSS - Use them as you please*/
.fullWidth {width: 100%;}
.absolute {position: absolute;}
.relative {position: relative;}
.fixed {position: fixed;}
.floatLeft {float: left;}
.floatRight {float: right;}
.noFloat {float: none;}
.center {margin: 0 auto;}
.clearFix {clear: both; height: 1px; overflow: hidden;}
.clearLeft {clear: left;}
.textRight {text-align: right;}
.textCenter {text-align: center;}
.textLeft {text-align: left;}
.upperCase {text-transform: uppercase;}
.lowerCase {text-transform: lowercase;}
.titleCase {text-transform: capitalize;}
.noMargin {margin: 0;}
.noPadding {padding: 0;}
.noWrap {white-space: nowrap;}
.noOverflow {overflow: hidden;}
.overflow {overflow: auto;}
.bold {font-weight: bold;}
.hide {display: none;}
.hideText {text-indent: -9999px;}
.show,.block {display: block;}
.inline {display: inline-block;}
.pointer {cursor: pointer !important;}
.noPointer {cursor: default !important;}
.first {margin-left: 0 !important;}
.last {margin-right: 0 !important;}
.marginRight{margin:0 10px 0 0;}
.marginBottom{margin-bottom:15px !important;}
.marginTop {margin-top: 15px;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix {*zoom: 1;}
/*End Generic Styles*/

/*2 Main Editable Elements*/
body{
  background:#DEECF3;
}

body, a{
  color: #333333;
}

i {
  margin:0 10px;
}

hr{
  border-top:1px solid #DDDDDD;
  border-bottom:1px solid #FFFFFF;
}

/*2.1 Headings*/
h1{
  margin:0;
  line-height:60px;
  text-shadow: 1px 1px 2px #111111;
  filter: dropshadow(color=#111111, offx=1, offy=1);
  float: left;
}

h2{
}

h3{
  margin:5px 0 0 0;
  padding:0 0 12px;
}

/*End Headings*/

/*2.2 Navigation*/
nav {
  height: auto;
  width: 100%;
  font-size: 1em;
  position: relative;
}

nav ul {
  padding: 0;
  height: 52px;
  margin:0;
}

nav li {
  display: inline;
  float: left;
  margin:0;
  padding:0 10px;
}

nav a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 52px;
}

nav li a {
  /*border-right: 1px solid #576979;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;*/
}

nav li:last-child a {
  border-right: 0;
}

nav a#pull {
  display: none;
}
/*End Navigation*/

/*2.3 Company Branding*/
.headingColorBG{
  *zoom: 1;
}

.logo {
  position:absolute;
  z-index:1000;
  padding:10px;
  -webkit-box-shadow: 0px 0px 8px 4px #666666; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
  box-shadow: 0px 0px 8px 4px #666666; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
  max-height:92px;/*Change to height of logo */
  max-width:227px;/*Change to width of logo */
}

.logo img {
  width:100%;
  height:auto;
  max-height:92px;
  max-width:227px;
}

.mobileLogo{
  display:none;
}
/*End Company Branding*/

/*2.4 Content Blocks*/
#pageTitle{
  margin:-60px 0 0 0;
  position:relative;
  z-index: 2;
}

#content{
  margin:20px 0;
}

#mainContent article{
  border:1px solid #DDDDDD;
  margin:15px 0;
}

.infoBlock{
  padding:10px;
}

.infoBlock .slideCopy{
  right:20px !important;
}

.textBox {
  display: block;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 15px;
  background: #fff;
  border: #ccc;
}

.textBox strong {
  color: #2D607D;
}

span.thirdCompanyColor strong {
  color: #fff;
}

.tariff{
  border-top:1px solid #DDDDDD;
  padding:10px;
}

.tariff h3{
  padding:0;
}

#mainContent article span{
  font-size:18px;
}

#mainContent article span i{
  margin:0 2px;
}

#mainContent hr{
  margin: 0 0 10px;
}

/*#mainContent img{
  padding:5px;
  border:1px solid #DDDDDD;
  margin: 0 10px 0 auto;
}*/

.video-container{
  max-width:460px;
  max-height:258px;
  margin: 20px auto;
}

.video{
  padding:5px 5px 0 5px;
  border:1px solid #CCCCCC;
  margin:0 auto;
}

.summary-container {
  background:transparent;
  margin:0 0 20px;
  height: 200px;
  position: relative;
  overflow:hidden;
}

.summary-container img {
  width:100%;
}

.summary{
  bottom: -147px;
  font-size: 13px;
  padding:10px;
  position: absolute;
  width: 100%;
  height:100%;
  text-align: left;
  text-shadow: 1px 1px 2px #111111;
  filter: dropshadow(color=#111111, offx=1, offy=1);
}

.summary h3{
  border-bottom:1px solid #2D607D;
}

.summary p{
  border-top:1px solid #88B7D2;
  padding:10px 0 0 0;
}

#contact i{
  margin:0 10px 0 0;
}

#contact span{
  font-size:14px;
  font-weight:600;
  line-height:26px;
}

.fotorama__img {
  margin-right: 0!important;
}

/*Content*/
.menu p {
  padding: 5px 0;
}

.menu h3 {
  margin-bottom: 8px;
}

.menu table, .pigs table {
  border: none;
  margin: 10px 0;
}

table tr {
  height: 25px;
  text-align: left;
}

.menu table, .pigs table tr td:first-child {
  width: 150px;
  text-align: left;
}

h3.text-center {
  margin-top: 0px;
}

.heading-1 {
  margin-bottom: 15px!important; padding: 10px; background: #FF9C00/*#2D607D*/; color: #fff!important; border: 1px solid #F99500; box-shadow: inset 0 1px 0 #fff;
}

.pigs {
  text-align: left;
}

.pigs h3 {
  text-transform: capitalize;
  text-decoration: none;
  font-weight: 400;
  color: #2D607D;
}

.pigs strong {
  color: #2D607D;
}

.contactNum {
  font-size: 17px!important;
  text-align: center;
  display: block;
}

/*Sidebar*/
aside hr{
  margin: 15px 0;
}

aside article{
  border:1px solid #DDDDDD;
  padding:10px;
  font-size:13px;
}

.thumb{
  max-width:100px;
  margin:0 10px 0 auto;
}

.padding-10 {
  padding: 10px;
}

span.price {
  font-size: 16px!important;
}
/*End Content Blocks-*/

/*Footer*/
footer{
  font-size:12px;
  padding: 25px 0 15px;
}

footer i{
  margin:0;
}

footer ul, footer li{
  list-style:none;
  margin:0;
  padding:0;
  display:inline-block;
}

footer #social{
  float:right;
}

footer #social a:hover{
  color:#DDDDDD;
  text-decoration:none;
}

ul.links{
  margin:0 0 0 0px;
}

.links li{
  padding: 0px;
  margin: 0 0 5px 0;
}

footer hr{
  border-top:1px solid #21465C;
  border-bottom:1px solid #A9CFE2;
}

footer a {
  color: #fff!important;
}

footer a:hover {
  color: #FF9C00!important;
}
/*End Footer*/

/*4. Template Colours*/
.primaryCompanyColor, nav a, footer a, .btn-primary, .btn-info{
  color:#FFFFFF;
}

.secondaryCompanyColor {
  color: #2D607D;
  text-shadow: 0 1px #fff;
  font-weight: 400;
}

a:hover {
  color: #2D607D;
}

.headingColorBG{
  background:rgba(55, 122, 160, 0.8);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC183147,endColorstr=#CC183147)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC183147,endColorstr=#CC183147);   /* IE6 & 7 */
}

.primaryColorBG, #mainContent img, .video, .mobileLogo{
  background:#FFFFFF;
}

.navColor {
  background: #ffcc00; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmOWMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjljMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #ffcc00 0%, #ff9c00 75%, #ff9c00 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(75%,#ff9c00), color-stop(100%,#ff9c00)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffcc00 0%,#ff9c00 75%,#ff9c00 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffcc00 0%,#ff9c00 75%,#ff9c00 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffcc00 0%,#ff9c00 75%,#ff9c00 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffcc00 0%,#ff9c00 75%,#ff9c00 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff9c00',GradientType=0 ); /* IE6-8 */
}

.secondaryColorBG{
  /*background:#333333;*/
  background: #549ac5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0OWFjNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY0JSIgc3RvcC1jb2xvcj0iIzM4NzlhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY0JSIgc3RvcC1jb2xvcj0iIzM4NzlhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzODc5YTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #549ac5 0%, #3879a0 64%, #3879a0 64%, #3879a0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#549ac5), color-stop(64%,#3879a0), color-stop(64%,#3879a0), color-stop(100%,#3879a0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #549ac5 0%,#3879a0 64%,#3879a0 64%,#3879a0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #549ac5 0%,#3879a0 64%,#3879a0 64%,#3879a0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #549ac5 0%,#3879a0 64%,#3879a0 64%,#3879a0 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #549ac5 0%,#3879a0 64%,#3879a0 64%,#3879a0 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#549ac5', endColorstr='#3879a0',GradientType=0 ); /* IE6-8 */
}

.logo{
  background:#3C7DA5;
}

.btn-primary {
  background: #FF9C00;
}

.book-btn {
  padding: 10px 20px;
  padding-left: 8px;
  border-radius: 8px;
  margin-top: 10px;
  color: #224860;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 1px #FFD148;
  box-shadow: 0px 3px  #234961;
  /*transition: all .1s;*/
}

.book-btn:hover {
  /*margin-top: 13px;
  box-shadow: 0px 2px  #234961;*/
  background: #FF9C00;
}

.btn-info {
  background: #5499C3;
}

nav a:hover, footer a:hover{
  color:#38789E;
}

.infoBlock{
  background:#f5f5f5;
}

.tariff h3, #mainContent article span{
  color: #01456B;
}

footer, footer #social a:hover{
  color:#DDDDDD;
}

.amenities, .affiliations {
  margin: 2px;
  border: none;
}

/********************************************
Content Boxes
********************************************/
.contentboxwrapper {
  margin: 0 0 10px 0;
  padding: 0;
  border: 1px solid #DDDDDD;
  background: #F5F5F5;
  clear: both;
}

.contentboxcontent {
  clear: both;
}

.contentboxheader {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #DDDDDD;
}

.contentboxheader h2 {
  color: #2D607D;
  text-shadow: 0 1px #FFFFFF;
  font-weight: 400;
  margin: 0;
}

.contentboximagewrapper {
  display: table-cell;
  min-width: 220px;
}

.contentboximage {
  max-width: 100%;
  padding: 5px;
  border: 1px solid #DDDDDD;
  margin: 10px 10px 10px 10px;
  background-color: #FFFFFF;
}

.contentboxtext {
  display: table-cell;
  text-align: left;
  max-width: 100%;
  width: 100%;
  vertical-align: top;
  padding: 10px 10px 0 10px;
}

.contentboxfooter {
  border-top: 1px solid #DDDDDD;
  padding: 10px 0;
}

.contentboxfooter h3 {
  float: left;
  clear: right;
  padding: 0 0 0 10px;
  margin: 0;
}

.contentboxfooterbuttons {
  /* Just a container */
}

.contentboxfooterbuttons a {
  margin-right: 10px;
}

.contentboxfooterbuttons::after {
  /* ClearFix Hack */
  content: "";
  clear: both;
  display: table;
}

/*5.Media Queries */

/*5.1 Screen size: 1200px wide*/
@media screen and (max-width: 1200px) {
  nav li {
    padding:0 5px;
  }

  nav ul{
    float:right;
  }

  nav li {
  padding:0 2px;
  }
}

/*5.2 Screen size: 1024px wide*/
@media screen and (max-width: 1024px) {
  .container {
    width: auto;
  }

  nav {
    font-size: 11px;
  }

  .mobileHide{
    display:none;
    visibility:hidden;
  }

  nav {
    height: auto;
    font-size:13px;
  }

  nav.col-md-10{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  nav ul {
    width: 100%;
    display: none;
    height: auto;
    margin:0;
  }

  nav a#pull {
    display: block;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #B96F00;
  }

  nav li {
    width: 50%;
    float: left;
    position: relative;
    padding:0;
  }

  nav li a {
    border-bottom: 1px solid #B96F00;
    border-top:1px solid #FFCF2D;
    border-right:1px solid #FFCF2D;
    border-left:1px solid#B96F00;
  }

  nav a {
    text-align: left;
    width: 100%;
  }

  .logo{
    display:none;
  }

  .mobileLogo{
    display:block;
    text-align:center;
    padding:20px 0;
    background: #3C7DA5;
    width: auto;
  }
}

/*5.3 Screen size: 764px wide*/
@media screen and (max-width: 769px) {
  #social{
    margin-top:10px;
  }

  #pageTitle{
    margin:0;
    position:relative;
  }

  footer .floatRight{
    float:left !important;
    text-align:left !important;
  }

  h1.floatLeft {
    float: none;
    text-align: center;
    position:
  }

  h1 {
    float: none;
    text-align: center;
  }

  .book-btn {
    display: block;
    text-align: center;
    margin: 0 0 10px 0;
    transition: all .2s;
  }

  .book-btn:hover {
    transition: none;
  }

  .book-btn.floatRight{
    float: none;
  }
}

/*5.4 Screen size: 750px wide*/
@media only screen and (max-width : 750px) {
  .infoBlock img.floatLeft {
    float: none;
    display: block;
    margin:10px 0 10px 0!important;
  }

  .contentboximagewrapper {
    display: block;
    text-align: center;
  }

  .contentboximage {
    display: inline-block;
    max-width: 100%;
    padding: 5px;
    border: 1px solid #DDDDDD;
    margin: 10px 0;
  }

  .contentboxtext {
    display: block;
    text-align: left;
    max-width: 100%;
    width: auto;
    vertical-align: top;
    padding: 0 10px 0 10px;
  }
}

/*5.4 Screen size: 480px wide*/
@media only screen and (max-width : 480px) {
  nav {
    border-bottom: 0;
  }

  nav ul {
    display: none;
    height: auto;
  }

  nav a#pull:after {
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }

  #social.floatRight{
    float:left;
  }

  #social.textRight{
    text-align:left;
  }

  .infloBlock {
    text-align: center;
  }

  .infoBlock .floatLeft {
    float: none;
  }

  .infoBlock img.floatLeft {
    display: block;
    margin: 0 auto!important;
  }

  .infoBlock ul {
    padding-left: 0;
  }

  span.floatRight {
    float: none;
  }

  .infoBlock span {
    display: block;
    padding-bottom: 10px;
    text-align: center;
  }

  .infoBlock h2 {
    text-align: center;
  }

  .infoBlock ul li, .infoBlock p {
    padding-top: 10px;
    text-align: center;
    list-style: none;
  }

  .tariff div.floatRight {
    float: none;
  }

  .tariff div a{
    display: block;
    margin: 10px auto;
    overflow: auto;
  }

  .contentboxfooter {
    border-top: 1px solid #DDDDDD;
    padding: 10px 0;
  }

  .contentboxfooter h3 {
    float: none;
    clear: right;
    padding: 0 0 0 10px;
    margin: 0;
  }

  .contentboxfooterbuttons a {
    margin: 10px;
    float: none;
  }
}

/*5.5 Screen size: 320px wide*/
@media only screen and (max-width : 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }

  nav li a {
    border-bottom: 1px solid #000000;
    border-top:1px solid #666666;
  }

  aside .thumb{
    width:100%;
    max-width:100%;
    display:block;
  }

  aside .floatRight{
    float:left;
  }

  .btn{
    margin:5px 0;
  }

  .contentboximage {
    max-width: 100%;
    padding: 5px 0;
    border: none;
    margin: 0;
  }
}
/*End Media Queries */