/* Global setting */
body {font-family: Helvetica, Arial, sans-serif; font-size: 100%; text-align: center; line-height: 125%; background-color: rgb(245,243,246); color: rgb(83,63,99);}

* {margin:0 auto; padding:0px;}

/* Padding */
.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.padding15 {padding: 15px;}
.padding20 {padding: 20px;}
.padding40 {padding: 40px;}
.padding50 {padding: 50px;}
.padding60 {padding: 60px;}

/* Display */
.show {display: block;}
.hide {display: none;}

/* Clear */
.clearr {clear: right;}
.clearl {clear: left;}
.clear {clear: both;}

/* Colours */
.colour100 {color: rgb(83,63,99);}
.colour75 {color: rgb(119,101,130);}
.colour50 {color: rgb(159,146,168);}
.colour25 {color: rgb(204,197,210);}
.colour5 {color: rgb(245,243,246);}

/* Wrapper */
#wrapper {width: 100%; max-width: 1024px;}
#wrapper_inner {width: 100%; display: block; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*box-shadow: 0px 0px 5px rgb(83,63,99);*/}
#wrapper_grid {width: 100%; display: block; float: left; padding: 0px 0px 0px 0px; background: url("../images/site/12_colREM.gif") 0 0 repeat-y;}

/* Holders */
#main {float: left; width: 100%; margin: 0px 0px 0px 0px;}

/*  RESPONSIVE - http://www.responsivegridsystem.com/  */
/*  For IE10 which ignores the meta tag  */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}
/*  Sections  */
.section {clear: both; padding: 0px; margin: 0px;}
/*  Column Setup  */
.col {display: block; float: left; margin: 1% 0 1% 1.6%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box;}
.col:first-child {margin-left: 0;}
/*  CSS Clear Fix  */
.clearfix:before,
.clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1; /* For IE 6/7 */}
/*  Grid of 3  */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}
/*  Grid of 4  */
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 74.6%;}
.span_2_of_4 {width: 49.2%;}
.span_1_of_4 {width: 23.8%;}
@media only screen and (max-width: 1024px) {
#wrapper_inner {box-shadow: none;}
}
@media only screen and (max-width: 768px) {
#wrapper {width: 100%;}
#wrapper_inner {width: 100%;}
#wrapper_grid {width: 100%;}
.col {margin: 1% 0 1% 0%;}
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 50%;}
.span_1_of_3 {width: 50%;}
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 100%;}
.span_2_of_4 {width: 100%;}
.span_1_of_4 {width: 50%;}
}
@media only screen and (max-width: 480px) {
#wrapper {width: 100%;}
#wrapper_inner {width: 100%;}
#wrapper_grid {width: 100%;}
.col {margin: 1% 0 1% 0%;}
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 100%;}
.span_1_of_3 {width: 100%;}
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 100%;}
.span_2_of_4 {width: 100%;}
.span_1_of_4 {width: 100%;}
}
@media only screen and (max-width: 320px) {
#wrapper {width: 100%;}
#wrapper_inner {width: 100%;}
#wrapper_grid {width: 100%;}
.col {margin: 1% 0 1% 0%;}
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 100%;}
.span_1_of_3 {width: 100%;}
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 100%;}
.span_2_of_4 {width: 100%;}
.span_1_of_4 {width: 100%;}
}

/* Header */
#header {width: 1024px; position: absolute; top: 0px; left:0px; right:0px; margin: 0 auto; z-index: 3;}
#header.fixed {position: fixed;}
#header #logo {width: 150px; max-width: 50%; float: left; display: block; margin: 0px 0px 0px 20px; position: absolute; top: 0px; left:0px; right:0px; z-index: 3;}
#header #logo.show {display: block;}
#header #logo.hide {display: none;}
#header #logo img {width: 150px; max-width: 100%;}
#header #logosmall {width: 90px; float: right; display: none; margin: 5px 0px 0px 50px; position: absolute; top: 0px; left:0px; right:0px; z-index: 3;}
#header #logosmall.show {display: block;}
#header #logosmall.hide {display: none;}
#header #logosmall img {width: 90px;}
@media only screen and (max-width : 1024px) {  
#header {width: 100%;}
}
@media only screen and (max-width : 700px) {  
#header {width: 100%;}
#header #logo {float: none; margin: 0 auto;}  
}

/* Slideshow */
#slideshow {width: 100%; height: 500px; float:left; z-index: 1; position: relative; margin: 0px 0px 0px 0px;}
#slideshow ul, #slideshow ul li {margin: 0px 0px 0px 0px; height: 500px; padding: 0px 0px 0px 0px; z-index: 1; position: relative; overflow: hidden;}
#slideshow #image {width: 100%; float: left; height: 500px; overflow: hidden; background-size: cover;}

/* Main Title */
#title {width: 100%; font-size: 1.2em; line-height: 1.5em; margin: 0px 0px 0px 0px; z-index: 1000; position: absolute; bottom: 0px; color: #FFF;}
#title .span_4_of_4 {width: 94%; margin: 1% 3% 1% 3%;}
@media only screen and (max-width : 768px) {  
#title .span_4_of_4 {margin: 2% 3% 2% 3%;}
}

/* Transparency */
#container {width: 100%; float: left; position: relative; overflow: hidden;}
#container .transparency {-moz-opacity:0.8; opacity: 0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ background-color: rgb(119,101,130); width: 100%; height: 1000px; position:absolute; top:0px; left:0px; z-index:-1;}
#container .content {position: relative;}

/* MENUS */
/* http://www.hongkiat.com/blog/responsive-web-nav/ */
/* Main Menu */
#menu {position: fixed; z-index: 2; display: block; width: 1024px; top: 0px; margin: 0 auto; left:0px; right:0px; height: 40px;}
#menu.show {display: block;}
#menu.hide {display: none;}
#menu ul {float: right; height: 40px; font-size: .9em; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#menu li {display: inline-block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; line-height: 40px;}
#menu li a {text-decoration: none; color: #FFF; line-height: 40px; padding: 0px 20px 0px 20px; float: left; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box;}
#menu li a:hover {background-color: rgb(83,63,99); color: #FFF;}
#menu li.active a {background-color: rgb(83,63,99); padding: 0px 20px 0px 20px; color: #FFF;}
#menu li.active a:hover {}
#menu li a.language {font-weight: bold; padding: 0px 20px 0px 40px;}
#menu a#pull {display: none; width: 100%; position: fixed; top: 0px; z-index: 1; line-height: 40px; text-align: left; color: #FFF; text-decoration: none; text-indent: 25px; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ background-color: rgb(83,63,99); border-bottom: 3px solid #FFF;}  
#menu a#pull:after {content:""; background: url('../images/site/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; left: 15px; top: 10px;}  
@media only screen and (max-width : 1024px) {  
#menu {width: 100%;}  
}
@media only screen and (max-width : 700px) {  
#menu {width: 100%; display: block; opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */}  
#menu ul {width: 100%; display: none; height: auto; background-color: rgb(119,101,130); margin-top: 40px; border-bottom: 3px solid #FFF;} 
#menu li {width: 50%; float: left; position: relative; padding: 0;}  
#menu li a {border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; padding: 0; text-indent: 25px; text-align: left; width: 100%}
#menu li a.language {padding: 0;}
#menu li:last-child a {border-right: 1px solid #FFF;}
#menu li:nth-child(even) a {border-right: 0;}
/* If it's the last or the second from last and odd */
#menu li:last-child a,
#menu li:nth-last-child(2):nth-child(odd) a {border-bottom: 0;}
#menu li.active a {padding: 0;}   
#menu a#pull {display: block;}  
} 
@media only screen and (max-width : 320px) {  
#menu {width: 100%; display: none;}  
#menu ul {display: none; height: auto;}
#menu li {width: 100%;}    
#menu li a {border-right: none;}    
#menu li:last-child a {border-right: none;}
} 

/* Text */
p, h1, h2, h3, h4, ul, li {text-align: left; line-height: 1.3em;}
p {font-size: .9em; margin: .7em 0 .7em 0; color: rgb(83,63,99); font-weight: normal;}
h1 {font-size: 1em; margin: 1em 0 .5em 0; color: rgb(83,63,99); font-weight: bold;}
h2 {font-size: 1.8em; margin: 1em 0 .5em 0; color: rgb(83,63,99); font-weight: normal; float: left; width: 100%; border-top: 1px solid rgb(0,147,189); padding: 30px 0px 0px 0px;}
h3 {font-size: 1.2em; margin: 1em 0 .5em 0; color: rgb(83,63,99); font-weight: normal;}
h4 {font-size: 1em; margin: .5em 0 1em 0; color: rgb(83,63,99); font-weight: normal; float: left; width: 100%; border-bottom: 1px solid rgb(109,110,113); padding: 0px 0px 5px 0px;}
ul, ol {font-size: .9em; margin: .7em 0 .7em 0;}
ul li {font-size: 1em; list-style: disc; margin: 0px 0px 0px 30px; padding: 3px 0px 3px 0px; font-weight: normal;}
ol li {font-size: 1em; list-style: decimal; margin: 0px 0px 0px 30px; padding: 3px 0px 3px 0px; font-weight: normal;}
li p {font-size: 1em;}
.bold {font-weight: 400;}
.extrabold {font-weight: 700;}
.extraextrabold {font-weight: 900;}
.small {font-size: .8em;}
.big {font-size: 1em;}

/* Links */
a{text-decoration: underline; color:rgb(83,63,99);}
a:hover {text-decoration: none;}

/* Images */
img {border: none;} 
a img {border: none;}

/* Homepage */
#homepage_menu {background-color: rgb(245,243,246); text-align: center; font-size: .9em;}
#homepage_menu .col {margin: 0 0 0 0; height: 250px; overflow: hidden; border-right: 1px solid rgb(119,101,130); cursor: pointer;}
#homepage_menu .span_1_of_4 {width: 25%;}
#homepage_menu .col:hover {background-color: rgb(204,197,210);}
#homepage_menu .active {background-color: rgb(83,63,99);}
#homepage_menu .active:hover {background-color: rgb(83,63,99);}
#homepage_menu .title {width: 92%; float: left; margin: 4%; margin-top: 8%; color: rgb(83,63,99); text-align: center; font-weight: bold;}
#homepage_menu .col:hover .title {}
#homepage_menu .active .title {color: #FFF;}
#homepage_menu .intro {width: 92%; float: left; margin: 3% 4% 3% 4%; color: rgb(83,63,99); text-align: center;}
#homepage_menu .col:hover .intro {}
#homepage_menu .active .intro {color: #FFF;}
#homepage_menu .readmore {width: 90%; float: left; margin: 5%; color: rgb(83,63,99); text-align: center;}
#homepage_menu .col:hover .readmore a, #homepage_menu .active .readmore a {color: #FFF;}
@media only screen and (max-width : 1024px) {  
#homepage_menu .col:last-child {border-right: none;}
}
@media only screen and (max-width : 700px) {  
#homepage_menu .span_1_of_4 {width: 50%;}
#homepage_menu .col {border-bottom: 1px solid rgb(119,101,130);}
#homepage_menu .col:nth-child(even) {border-right: 0;}
}
@media only screen and (max-width : 400px) {  
#homepage_menu .col {border-right: 0; height: auto;}
#homepage_menu .span_1_of_4 {width: 100%;}
#homepage_menu .title {margin-top: 5%;}
}

/* Testimonials */
#testimonial_random {background-color: rgb(159,146,168); text-align: center; line-height: 1.4em; font-size: .9em; color: #FFF; font-style: italic;}
#testimonial_random .span_4_of_4 {width: 76%; margin: 1% 12% 1% 12%;}
#testimonial_random .name {width: 100%; float: left; text-align: center; line-height: 1.4em; font-size: 1em; font-style: normal; color: #FFF; margin-top: 1%;}
@media only screen and (max-width : 768px) {  
#testimonial_random .span_4_of_4 {width: 84%; margin: 3% 8% 3% 8%;}
}

/* Featured Images */
#featured_images {height: 300px; margin: 0px 0px 0px 0px;}
#featured_images #image {width: 100%; float: left; height: 300px; overflow: hidden; background-size: cover;}
#featured_images .col {margin: 0 0 0 0; height: 300px; overflow: hidden;}
#featured_images .span_1_of_3 {width: 33.3%;}
#featured_images .span_1_of_3:last-child {width: 33.4%;}
@media only screen and (max-width : 700px) { 
#featured_images {height: 250px;}
#featured_images #image {height: 250px;}
#featured_images .col {height: 250px;}
#featured_images .col:last-child {display: none;}
#featured_images .span_1_of_3 {width: 50%;}
}
@media only screen and (max-width : 400px) {  
#featured_images .col:last-child, #featured_images .col:nth-last-child(2) {display: none;}
#featured_images .span_1_of_3 {width: 100%;}
}

/* COTTAGES */
/* Cottages Intro */
#cottages_intro {background-color: rgb(83,63,99);}
#cottages_intro .col {margin: 0 0 0 0; padding: 3% 4% 3% 4%;}
#cottages_intro h1 {color: #FFF; text-align: center;}
#cottages_intro p {color: #FFF; text-align: center;}
#cottages_intro a {color: #FFF;}
/* Cottages Detail */
#cottages_detail {background-color: rgb(245,243,246); position: relative; height: auto; position: relative;}
#cottages_detail .col {margin: 0 0 0 0;}
#cottages_detail .span_1_of_4 {background-color: rgb(119,101,130); width: 25%; height: 100%; position: absolute;}
#cottages_detail .span_3_of_4 {width: 75%; padding: 5% 0% 5% 0%; margin-left: 25%; border-right: 1px solid rgb(119,101,130);}
#cottages_detail .table {display: table; position: absolute; width: 100%; height: 100%;}
#cottages_detail .vertical {display: table-cell; vertical-align: middle;}
#cottages_detail h1 {color: #FFF; text-align: center; float: left; width: 92%; margin: 0 4% 0 4%;}
#cottages_detail p {text-align: center; float: left; width: 92%; margin: 0 4% 0 4%;}
#cottages_detail #slideshow {height: 275px;}
#cottages_detail #slideshow ul, #cottages_detail #slideshow ul li {height: 275px;}
#cottages_detail #slideshow #image {height: 275px;}
@media only screen and (max-width : 1024px) {  
#cottages_detail .span_3_of_4 {border-right: none;}
}
@media only screen and (max-width : 400px) {  
#cottages_detail .span_1_of_4 {width: 100%; position: relative; padding: 5% 0% 5% 0%; margin: 10% 0 0 0;}
#cottages_detail .span_3_of_4 {width: 100%; margin: 0 0 0 0;}
#cottages_detail .table {display: block; position: relative;}
#cottages_detail .vertical {display: block; vertical-align: middle;}
}
/* Cottages Stats */
#cottages_stats {background-color: rgb(245,243,246); text-align: center; font-size: 1em;}
#cottages_stats .col {margin: 0 0 0 0; padding: 4% 0% 5% 0%; overflow: hidden; border-right: 1px solid rgb(119,101,130);}
#cottages_stats .col:first-child {border-left: 1px solid rgb(119,101,130);}
#cottages_stats .span_1_of_4 {width: 25%;}
#cottages_stats .descriptor {width: 92%; float: left; margin: 0 4% 0 4%; color: rgb(83,63,99); text-align: center;}
#cottages_stats .number {width: 92%; float: left; margin: 15% 4% 0 4%; color: rgb(83,63,99); text-align: center; font-size: 3em;}
@media only screen and (max-width : 600px) {  
#cottages_stats .number {font-size: 2em;}
}
@media only screen and (max-width : 400px) {  
#cottages_stats .col {border-bottom: 1px solid rgb(119,101,130);}
#cottages_stats .col:nth-child(even) {border-right: 0;}
#cottages_stats .span_1_of_4 {width: 50%;}
#cottages_stats .number {font-size: 1.7em; margin-top: 10%;}
}
/* Cottages Menu */
#sub_menu {width: 100%; margin: 0px 0px 0px 0px; z-index: 1000; position: absolute; bottom: 0px; font-size: 1.1em; line-height: 1.5em; color: rgb(204,197,210);}
#sub_menu .col {margin: 1% 0 1% 0;}
#sub_menu .col a {text-decoration: none; color: rgb(204,197,210); float: left; width: 100%;}
#sub_menu .col a:hover {color: #FFF;}
#sub_menu .active a {color: #FFF;}
#sub_menu .active:hover a {color: #FFF;}
#sub_menu .span_1_of_3 {width: 33.3%;}
#sub_menu .span_1_of_3:last-child {width: 33.4%;}
@media only screen and (max-width : 600px) {  
#sub_menu .col {margin: 1% 0 1% 0;}
#sub_menu .span_1_of_3 {width: 100%;}
#sub_menu .span_1_of_3:last-child {width: 100%;}
}

/* Page */
#page {background-color: rgb(245,243,246);}
#page .col {margin: 0 0 0 0; padding: 3% 4% 3% 4%;}
#page p {text-align: center;}

/* Homepage */
#subpages {background-color: rgb(245,243,246); text-align: center; font-size: .9em;}
#subpages .col {margin: 0 0 0 0; height: 250px; overflow: hidden; border-right: 1px solid rgb(119,101,130); border-top: 1px solid rgb(119,101,130); cursor: pointer;}
#subpages .col:first-child, #subpages .col:nth-child(4n) {border-left: 1px solid rgb(119,101,130);}
#subpages .span_1_of_3 {width: 33%;}
#subpages .span_1_of_3:nth-child(3n) {width: 34%;}
#subpages .col:hover {background-color: rgb(204,197,210);}
#subpages .active {background-color: rgb(83,63,99);}
#subpages .active:hover {background-color: rgb(83,63,99);}
#subpages .title {width: 92%; float: left; margin: 4%; margin-top: 8%; color: rgb(83,63,99); text-align: center; font-weight: bold;}
#subpages .col:hover .title {}
#subpages .active .title {color: #FFF;}
#subpages .intro {width: 92%; float: left; margin: 3% 4% 3% 4%; color: rgb(83,63,99); text-align: center;}
#subpages .col:hover .intro {}
#subpages .active .intro {color: #FFF;}
#subpages .readmore {width: 90%; float: left; margin: 5%; color: rgb(83,63,99); text-align: center;}
#subpages .col:hover .readmore a, #subpages .active .readmore a {color: #FFF;}
@media only screen and (max-width : 1024px) {  
#subpages .col:last-child {border-right: none;}
}
@media only screen and (max-width : 700px) {  
#subpages .col {border-left: 0;}
#subpages .col:nth-child(even) {border-right: 0;}
#subpages .col:first-child, #subpages .col:nth-child(4n) {border-left: 0;}
#subpages .span_1_of_3 {width: 50%;}
#subpages .span_1_of_3:nth-child(3n) {width: 50%;}
}
@media only screen and (max-width : 400px) {  
#subpages .col {border-right: 0; height: auto;}
#subpages .span_1_of_3 {width: 100%;}
#subpages .span_1_of_3:nth-child(3n) {width: 100%;}
#subpages .title {margin-top: 5%;}
}


/* Map */
#map {width: 100%; margin: 0 0 0 0; float: left; border-top: 3px solid rgb(83,63,99); border-bottom: 3px solid rgb(83,63,99);}
#map .col {margin: 0 0 0 0;}

/* Form */
form {float: left; width: 100%; background-color: rgb(83,63,99); padding: 20px; color: #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
label {width: 100%; float: left; clear: both; color: #FFF; text-align: left; font-size: .9em; font-weight: 500; padding: 5px; margin: 5px 0px 0px 0px;}
input {width: 100%; float: left; background-color: #FFF; color: #000; text-align: left; font-size: .9em; border: none; padding: 3px;}
textarea {width: 100%; float: left; background-color: #FFF; color: #000; text-align: left; font-size: .9em; border: none; padding: 3px; font-family: Arial, Helvetica, sans-serif;}
.button {width: 80px; color: rgb(83,63,99); background-color: rgb(204,197,210); margin: 20px 0px 0px 0px; text-align:center; padding: 5px; float: left; border: 1px solid #FFF; font-size: .9em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.button:hover {background-color: #FFF; cursor: pointer;}

/* Footer */
#footer_contact {width: 100%; float:left; background-color: rgb(83,63,99); color: #FFF; margin: 0px 0px 0px 0px; padding: 20px 0px 20px 0px; position: relative;}
#footer_contact a {color: #FFF;}
#footer_contact #contact {font-size: .9em; line-height: 1.5em; display: inline-block; float: left; text-align: left; padding: 0 20px 0 20px;}
#footer_contact #social {font-size: 1em; display: inline-block; float: right; text-align: center; padding: 0 20px 0 20px;}
#footer_contact #social a {text-decoration: none;}
#footer_contact #social i {font-size: 2.5em;}

#logos {width: 100%; float:left; background-color: #FFF; color: #FFF; margin: 0px 0px 0px 0px; padding: 40px 0px 40px 0px;}
#logos img {display: inline-block; margin: 0px 40px 0px 40px;}

/* Footer */
#footer{width: 100%; float:left; background-color: rgb(83,63,99); color: #FFF; margin: 0px 0px 0px 0px; padding: 20px 0px 20px 0px;}
#footer a {color: #FFF;}
#footer #copyright {font-size: .8em; padding: 0 20px 0px 20px; display: block;}