/*
Theme Name: Le Franschhoek Hotel and Spa
Theme URI: http://www.lefranschhoek.co.za/
Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.
Author: Sam Ssoosi
Author URI: http://www.lefranschhoek.co.za/
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html
*/

.form_left_a {
    width: 50%;
    float: left;
    text-align: left;
    list-style: none;
    padding-right: 15px;
}

.form_right_a {
    width: 50%;
    float: right;
    text-align: left;
    list-style: none;
}

.gform_fields {
	padding: 15px;
}

.medium {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.gform_button {
    width: 49%;
    margin-top: 18px;
    background-color: #6D6E70;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 1%;
    float: right;
    clear: both;
}

.textarea {
    height: 155px;
}

.big_text textarea {
    height: 260px;
}

.gfield_select {
    height: 34px;
}

@media (min-device-width: 500px) {
.mobile_book_button {
	display: none;
}
}

@media (min-device-width: 600px) 
  and (max-device-width: 1199px) {
.container {
    width: 100%;
   /* max-width: 900px;
     was 750px */
}
.tablet-hidden {
display: none;
}
.caption-hover-accom-right1 a, .caption-hover-accom-right2 a, .caption-hover-accom-left3 a, .caption-hover-accom-left4 a, .caption-hover-accom-right5 a, .caption-hover-accom-right6 a { padding-left: 10px; padding-right: 10px; }
}

@media (min-device-width: 320px) 
  and (max-device-width: 780px) {
.mobile_book_button {
	width: 200px; color: #fff; margin: 10px auto 0px auto; background-color: #000; padding: 10px; display: block; text-align: center; font-size: 20px; font-weight: bold;
}
.mobile-hidden {
display: none;
}
.mobile-logo {
margin: 0px auto;
}
.navbar-toggle {
position: absolute;
right: 10px;
}
.h1, h1 {
font-size: 26px;
}
.enquire {
display: block;
padding: 10px;
margin-bottom: 20px;
text-align: center;
}
.footer-text {
font-size: 14px
}
}


/* custom special page  */
.holder {
    margin-top: 30px;
            width: 100%;
            max-width: 620px;
            clear:both;
            margin-bottom: 40px;
            min-height: 120px;
            -moz-transition: all .3s ease;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }
        .holder div {   
             width: 100%; float: none;
        }
       @media only screen and (min-width:620px) {
            .holder {
                margin-bottom: 20px;
            }
            .holder div {
                 width: 50%; float: left;
            }
       }
        .holder div.logo img {
        width: 100%;
        height: auto;
        max-width:294px;
        text-align:left;
        }
        .holder div.button img {
        width: 100%;
        height: auto;
        max-width:300px;
        }
        .holder a {
            -moz-transition: all .3s ease;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            /*display: block;*/
        }
        .holder a:hover {
            opacity: 0.8;
        }
        
        /*
         *
         *
         *weather widget 2016 ( mark )
         *
         **/
        
        		/*
  Docs at http://http://simpleweatherjs.com

  Look inspired by http://www.degreees.com/
  Used for demo purposes.

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}



#weather {
  width: 500px;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
}

i {
  color: #fff;
  font-family: weather;
  font-size: 66px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  text-transform: none;
float: left;
margin-left: 30px;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  text-align: left;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
  margin: 0;
  padding: 0;
}

#weather li {
  padding: 0;
  color: #ddd;
  font-size:13px;
  text-align: left;
  display: block;
  background: transparent !Important;
}

#weather .currently {
    margin: -3px 0 0 -73px;
float: left;
}

/*  end weather wiget */


a.conference-booking-homepage {
    text-align: center;
    padding: 30px 0;
    
    /**/background: #fff;
    color: #ddd;
    
    text-transform: uppercase;
    font-weight: bold;
    clear: both;
    margin: 40px 20%;
    float: left;
    display: inline-block;
    width: 60%;
    font-size: 20px;
    border-radius: 2px;
    text-decoration: none !Important;
    
    border: solid 2px #8e9093;
    padding: 10px 70px;
    color: #8e9093;
    margin-right: 10px;
}
a.conference-booking-homepage:hover {
    background: #8e9093;
    color: #fff;
}