/* Master Responsive Style Sheet */ 

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, q, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; margin-bottom: 20px; }

/* Main Colours for reference
Black (trans)      rgba(0,0,0,0.7);
Purple             #795967;
Purple (trans)     rgba(121,89,103, 0.9);
Turquise           #6d8a91;
Turquise (trans)   rgba(109,138,145,0.7);
*/

/* Pure Colors 
Purple             #795967;
Purple (trans)     rgba(121,89,103, 0.9);


/* basic */
body { font-family: 'helvetica-neue', helvetica, arial, serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { color: #333; font-weight: normal; }
h2, h3, h4, h5, h6 { font-family: 'Quicksand', 'helvetica-neue', helvetica, arial, sans-serif; font-weight: 200; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 25px; line-height: 35px; margin: 0px 0px 10px 0px; font-weight: 600; color: #212121; text-transform: uppercase; font-family: 'Playfair Display SC', 'helvetica-neue', helvetica, arial, serif; }
h1.wide { letter-spacing: 0.3em; }
h2 { font-size: 18px; line-height: 25px; margin: 10px 0px; font-weight: 200; color: #6D8B91; }
h3 { font-size: 16px; line-height: 20px; margin-bottom: 12px; font-weight: 200; color: #6D8B91;}
h4 { font-size: 16px; line-height: 21px; font-weight: 200; }
h5 { font-size: 14px; line-height: 21px; color: #666; padding-bottom: 10px;}
h6 { font-size: 14px; line-height: 21px; }
p { font-size: 14px; line-height: 20px; margin: 0 0 20px; color: #666; }
p.small, ul.small { font-size: 13px; }
p.smaller, ul.smaller { font-size: 12px; }
p img { margin: 0; }
em { font-style: italic }
strong { font-weight: bold }
small { font-size: 80% }
blockquote, blockquote p { line-height: 24px; color: #777; font-style: italic; }
blockquote { font-size: 12px; border-left: 1px solid #ddd; margin: 0 0 20px; padding: 10px 20px 10px 19px; }
blockquote cite { display: block; text-indent: 42px; color: #555; position: relative; }
blockquote cite:before { content: "\201c"; font-weight: bold; font-style: normal; font: 94px/74px Arial; position: absolute; top: -2px; left: -36px; }
blockquote cite a, blockquote cite a:visited,blockquote cite a:visited { color: #555; }
hr { border: solid #ddd; clear: both; height: 0; border-width: 1px 0 0; margin: 10px 0; }
a, a:visited { color: #6d8a91; text-decoration: underline; outline: 0; }
a:hover,a:focus { color: #6d8a91; }
p a, p a:visited { line-height: inherit; }
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 20px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ol.roman { list-style: upper-roman; }
ol.alpha { list-style: lower-alpha; }
ul ul, ul ol, ol ol, ol ul { font-size: 90%; margin: 10px 0 6px 20px; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.smaller li { line-height: 18px; margin-bottom: 4px; }
ul.large li, li p { line-height: 21px; }
img.scale { width: 100%; height: auto; }
p img.left { float: left; margin: 10px 20px 10px 0; }
p img.right { float: right; margin: 10px 0 10px 20px; }
form, fieldset { margin-bottom: 20px; }

.float-left { float: left; }
.float-right { float: right; }
.hide-on-mobile { display: none; }

/* Main Structure */

html, body { width: 100%; height: 100%; }
body { background: #212121; }

.container div.sep { clear: both; float: none; display: block; width: auto; margin: 15px 0; height: 3px; }
div.sep-small { height: 1px; border-bottom: 3px dotted #CCC; }
div.sep-big { height: 4px; border-bottom: 3px dotted #CCC; }

/* 960 grid system */
.container { position: relative; display: block; margin: 0 auto; padding: 0 15px; }
.ie7 .container { position: static; }
.container .col { width: 100%; }
body .container .col.alpha { margin-left: 0; }
body .container .col.omega { margin-right: 0; }
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1 }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* Full width layout */

.full-width { margin: 0; padding: 20px 0 20px 0; } 
.full-width.center { text-align: center !important; }
.full-width.grey { background: #F2F2F2; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } 
.full-width.cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.full-width.slideshow { position: relative; padding: 0 !important; overflow: hidden; z-index:1; }
.full-width:nth-child(4) { margin-top: 0px; }
.full-width.banner { height: 150px; display: block; margin: 0; padding: 0; overflow: hidden; background-size: 100% !important; }
.full-width.banner img { width: 100%; }

.fix-nav { z-index: 9999; position: fixed; left: 0; top: 0; }

#page-wrap { float: right; width: 100%; overflow: hidden; background-color: #FFF; z-index: 8000; }
#page-wrap.thin { width: 13%; /*pointer-events: none;*/ overflow: hidden;
	-webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}
#page-wrap.thin .slideshow { height: 150px; }
#page-wrap.thin .slideshow .cycle-slideshow > div { background-size: cover !important; }

.grey { background-color: #F2F2F2 !important; }




/* ///////////////////////////////////// MOBILE NAVIGATION ///////////////////////////////////// */

#mobile-nav { position: fixed; z-index: 5000; top: 0; width: 87%; height: 100%; background: #333; overflow-y: auto; display: none; 
/*  -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow:    3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow:         3px 0px 5px 0px rgba(0, 0, 0, 0.75);*/
}
#mobile-nav a.close-mobile-nav { position: absolute; top: 0px; right: 0px; padding: 18px; background: url(/img/icons/icon-close.svg) no-repeat center; background-size: 100%; margin: 8px; text-decoration: none; font-weight: normal; }

#mobile-nav ul { clear: both; margin: 0; padding: 0;}
#mobile-nav ul li { margin: 0; padding: 0; }
#mobile-nav ul li a { display: block; border-top: 1px solid #484848; border-bottom: 1px solid #2E2E2E; color: #FFF; padding: 15px; text-decoration: none; font-family: 'helvetica-neue', helvetica, arial, serif; font-weight: 200; text-transform: uppercase !important; font-weight: 200; }
#mobile-nav ul li:last-child a { border-top: 1px solid #484848; border-bottom: 1px solid #484848; }
#mobile-nav ul ul { display: none; background: #212121; }

#mobile-nav a.book { 
	position: relative; margin: 10px; bottom: 0; display: block; padding: 12px 0; 
	font-weight: normal; font-family: 'helvetica-neue', helvetica, arial, serif; font-weight: 200;
	border-radius: 0; -webkit-border-radius: 0; background-color: rgba(150,80,120, 1); 
}
#mobile-nav a.hide { display: none; }






/* ///////////////////////////////////// HEADER ///////////////////////////////////// */

#head { position: fixed; margin-top: 20px; background: rgba(121,89,103, 1); padding: 0; margin: 0; height: 50px; z-index: 9999; width: 100%; overflow: hidden;
/*-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.46);
-moz-box-shadow:    0px 5px 5px 0px rgba(0,0,0,0.46);
box-shadow:         0px 5px 5px 0px rgba(0,0,0,0.46);*/

}
#head .container { width: 100%; padding: 0; }
#header { height: 100%; }

a.logo { margin: 0 auto; display: block; padding: 5px 0; width: 100px; height: 40px; background: url(/img/ui/logo2.png) no-repeat left center; background-size: 100%;  }

#switch { float: left; margin: 0; left: 20px; color: #FFF; text-align: center; font-size: 35px; line-height: 30px; cursor: pointer; padding: 12px 18px; }
#switch:hover { background: rgba(0,0,0,0.3); }
#switch:focus { background: rgba(0,0,0,0.3); }






/* ///////////////////////////////////// SLIDESHOW (HOME) ///////////////////////////////////// */

.slideshow { clear: both; position: relative; margin-top: 0; overflow: hidden; height: 200px;}
.slideshow .container { width: 100%; }

.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 100%; height: 100%; margin: auto; padding: 0; overflow: hidden; position: relative; }
.cycle-prev:hover, .cycle-next:hover { cursor: pointer; }

.cycle-slideshow > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-size: 130% !important; }
.cycle-slideshow > div { background: white; overflow: hidden; }
.cycle-slideshow > div > img { display: block; width: 100%; height: 100%; z-index: 1; bottom: 0;}

.cycle-slideshow span.cycle-prev { background: url(/img/ui/arrow-next.svg) no-repeat center center; background-size: 100%; width: 30px; height: 80px; position: absolute; z-index: 1000; top: 80px; right: 0px; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.cycle-slideshow span.cycle-next { background: url(/img/ui/arrow-prev.svg) no-repeat center center; background-size: 100%; width: 30px; height: 80px; position: absolute; z-index: 1000; top: 80px; left: 0px; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

span.cycle-prev:hover, span.cycle-next:hover { background-color: rgba(109,138,145,0.7); }

.icon { 
	display: none; 
	position: absolute; z-index: 7000; 
	top: 28%; left: 50%; 
	margin-left: -150px; width: 300px; height: 300px; 
	text-align: center; 
	background: url(/img/ui/pure-motif.png) no-repeat; 
	background-size: 100%;
	opacity: 0.3; -webkit-opacity: 0.3;
	pointer-events: none;

}

.spin { -webkit-animation:spin 60s linear infinite; -moz-animation:spin 60s linear infinite; animation:spin 60s linear infinite; }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.icon.left  { top: 28%; left: 70%; }
.icon.right { top: 28%; left: 30%; }


/* ///////////////////////////////////// NAVIGATION ///////////////////////////////////// */

#nav-main { display: none; }


/* ///////////////////////////////////// MAIN PAGE CONTENT ///////////////////////////////////// */

/* Call to Action Buttons */
.button { padding: 10px 30px; text-align: center; color: #FFF !important; text-decoration: none; font-size: 18px; background: #795967; display: block; margin: 0 auto; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; font-family: 'Quicksand', 'helvetica-neue', helvetica, arial, sans-serif; font-weight: 200; }
.button:hover { background: #6d8a91; cursor: pointer; }

.button.circle { background: #6d8a91; width: 120px; height: 120px; line-height: 120px; padding: 0; margin: 0px auto 20px auto; border-radius: 50%; -webkit-border-radius: 50%; text-transform: uppercase; font-size: 14px; }
.button.circle:hover { background: #795967; width: 130px; height: 130px; line-height: 130px; margin-top: -5px; }

.book { padding: 12px 18px; display: block; text-align: center; text-decoration: none !important; margin: 10px 0; background-color: #795967; color: #FFF !important; font-size: 1em; text-transform: uppercase; font-family: 'helvetica-neue', helvetica, arial, serif; font-weight: 200; border-radius: 4px; -webkit-border-radius: 4px; border: none; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
.book:hover { background-color: #6d8a91; color: #FFF; text-decoration: none; }

.btn { padding: 10px 20px; color: #965078 !important; font-weight: bold; border: 1px solid #795967; border-radius: 4px; -webkit-border-radius: 4px; font-size: 14px; text-align: center; text-decoration: none; margin: 10px 10px 10px 0px; float: left; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
.btn:hover { background-color: #795967; color: #FFF !important; }




/* Boxes */
a.box { margin: 0 0 10px 0; height: 150px; position: relative; text-decoration: none; text-align: center; overflow: hidden; display: block; }
a.box h4 { width: 100%; font-size: 12px; position: absolute; display: block; width: 100%; text-align: center; font-weight: normal; color: #FFF; top: 0; margin: 0; padding: 10px 0;  letter-spacing: 0.3em; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; text-transform: uppercase; background: rgba(109,138,145,0.9); }
a.box img { width: 100%; height: auto; display: block; margin-top: -50px;}
a.box p { float: left; line-height: 25px; margin: 15px 0 0 0; color: #666;}
a.box:hover { cursor: pointer;}
a.box:hover h4, a.box:focus h4, a.box.active h4 { background-color: rgba(121,89,103, 0.7); }
a.box:hover p { color: #000; }

a.box.small { height: 40px; text-align: left; display: inline-block; float: left; width: 46%; margin: 5px 2%; }
a.box.small img { margin-top: -150px; }

.full-width.tab-boxes.scroll-to-fixed-fixed { position: relative !important; z-index: 1; }



/* Page intro Images */
.svg.intro { fill: #EEE; display: none; width: 120px; height: 120px; float: right; margin: 0 0 0 30px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
a:hover .svg.intro { fill: #795967; }

/* Tab Style Filters */
#tab-style-filters { overflow: hidden; border-top: 2px solid #F6F6F6; padding: 15px 0 15px 15px; background: url(/img/ui/pattern.png); }
#tab-style-filters #filters .filter { margin: 0; }
#tab-style-filters #filters .filter a { margin: -2px -2px -2px 0px; width: 100%; padding: 5px; float: left; display: inline-block; vertical-align: center; border-radius: 0; -webkit-border-radius: 0; background: #FFF; border: 2px solid #F6F6F6; text-decoration: none; text-transform: uppercase; line-height: 35px; color: #666; }
#tab-style-filters #filters .filter a .svg { float: left; width: 40px; height: 40px; margin: 0 10px 0 0; fill: #666;}

#tab-style-filters #filters .filter a.active { background-color: #F6F6F6 !important; color: #6d8a91 !important; }
#tab-style-filters #filters .filter a.active .svg { fill: #6d8a91; }



/* Isotope */

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }

/* Profiles */
.profile { border-bottom: 1px dotted #CCC; padding: 0 0 20px 0; margin: 20px 0; overflow: hidden; }
.profile:first-child { margin-top: 0; }
.profile:last-child { border: none; }
.profile span { width: 33%; float: left; margin: 0 20px 10px 0; padding: 0; display: block; height: 100%; border-radius: 600px; -webkit-border-radius: 600px; overflow: hidden; }
.profile img { width: 100%; }
.profile h3 { margin-top: 10px; }

/* ////////////////////// SOCIAL MEDIA LINKS ////////////////////// */

.link-social iframe { float: right; margin-bottom: 15px; }

.link-social a { width: 50px; height: 50px; float: left; margin: 0px 10px 10px 0px; }

.link-facebook svg { fill: #CCC; }
.link-facebook:hover svg { fill: #0099D1; }

.link-twitter svg { fill: #33ccff; }
.link-twitter:hover svg { fill: #33ccff; }

/* Gallery */

.gallery { overflow: hidden; display: block; margin: 0 0 20px 0;}

/* Google Map */

#gmap-iframe { width: 100%; height: 200px; overflow: hidden; padding: 20px 0 20px 20px; margin: 30px 0; border: 1px solid #CCC; border-radius: 4px; -webkit-border-radius: 4px; background: #EEE; }

/* Contact Form */
form { display: block; }
form label { margin-bottom: 10px;}
form input, form textarea, form select { width: 90%; clear: both; float: none; padding: 10px; box-shadow: none; border: 1px solid #CCC; margin: 10px 0 10px 0; font-family: helvetica, arial, sans-serif; font-size: 14px; }
form select { cursor: pointer;}
form .thin { width: 250px; }
form .thinner { width: 150px; }
form .datepicker { cursor: pointer; }
form .float { width: 40%; float: left; margin-right: 20px; }

form li { clear: both; overflow: hidden; margin-bottom: 10px; }
form li.float { width: 45%; float: left; clear: none; margin-right: 10px; }
form li.float input { width: 80%; }
form li.checkbox input { width: 20px; margin-right: 5px; float: left; }
form li.checkbox p { float: left; font-size: 12px; color: #333; margin: 7px 0 0 0;}

form label { font-weight: normal; color: #666; font-size: 14px;}
form input.submit { border: 0; padding: 12px 20px 10px 20px; margin: 0; font-size: 14px; font-family: 'helvetica-neue', helvetica, arial, serif; font-weight: 200; display: block; float: left; width: 100px; clear: both; border-radius: 0; -webkit-border-radius: 0;}

form input:focus, form select:focus { border: 1px solid #6D8A91; }

form div.date-fields { float: left; overflow: hidden; margin-right: 10px; }
form label.date, form label.date-year  { font-size: 12px; }
form input.date { width: 25px; }
form input.date-year { width: 50px; }

form .datepicker { background: #FFF url(/img/icons/icon-calendar.svg) no-repeat 98% center; background-size: 30px; }

form h4 { color: #333; padding: 0 0 5px 0; margin: 10px 0 10px 0; display: block; }
p.hint { color: #666; font-size:12px;}

form .error {  }
form .error input, form .error select { border: 1px solid #6d8a91 !important; border-radius: 4px; -webkit-border-radius: 4px; }
form .error:after { content: "  This is a required field"; color: #6d8a91; }

form .match input { border: 1px solid #6d8a91 !important; }
form .match:after { content: "  These email fields must match" !important; color: #6d8a91; }

form .invalid input { border: 1px solid #6d8a91 !important; }
form .invalid:after { content: "  Please check this is a valid email" !important; color: #6d8a91; }

.success { margin: 0 0 20px 0; padding: 10px 10px 12px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; color: #5ba85a; border: 2px solid #5ba85a; border-radius: 4px; -webkit-border-radius: 4px;}
.errors { margin: 0 0 20px 0; padding: 10px 10px 12px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; color: #6d8a91; border: 2px solid #6d8a91; border-radius: 4px; -webkit-border-radius: 4px;}

.dibs-logo { width: 110px; float: left; margin-left: 20px; }

.smallprint { font-size: 12px; margin: 20px 0; float: left; clear: both;  }

/* Contact Box */
.contact-box { border: 1px solid #CCC; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; margin: 0 0 20px 0;}
.contact-box h3 { font-size: 16px; color: #FFF; background: #6d8a91; display: block; padding: 10px; margin: 0; font-weight: normal; line-height: 30px; text-align: center;}
.contact-box h5 { color: #6d8a91; padding: 0px 15px; }
.contact-box p { color: #666; font-size: 12px; line-height: 18px; padding: 15px; margin: 0 0 10px 0; }
.contact-box p span { font-weight: bold; margin-right: 20px; color: #666; }
.contact-box a { text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }

/* Map */
.map-box { border: 1px solid #CCC; background: #CCC; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; display: block; margin: 0 0 20px 0; }
.map-box h3 { position: absolute; z-index: 100; font-size: 14px; color: #FFF; background: #6d8a91; display: block; padding: 10px 20px; margin: 0; font-weight: normal; line-height: 30px; letter-spacing: 0.3em; text-align: center; overflow: hidden;}
.map-box p { color: #333; font-size: 14px; line-height: 18px; padding: 15px; margin: 0;}
.map-box a.btn { margin: 15px; display: block; float: none; clear: left; }
.map-box .mini-map { position: relative; width: 100%; height: 250px; display: block; overflow: hidden;}
.map-box .mini-map iframe { display: block; width: 100%; height: 100%; }

.iframe-holder { border: 1px solid #CCC; border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; }
#location-iframe { width: 100%; height: 450px; border-radius: 5px; -webkit-border-radius: 5px; }

/* Inline Content */
.inline { margin: 0; padding: 0; height: 100%; overflow: hidden; display: block; padding: 30px; background: #212121; text-align: center; font-family: helvetica, arial, sans-serif; } 
.inline h5 { font-size: 1.1em; line-height: 30px; color: #FFF; margin-bottom: 20px; font-weight: normal; }
.inline p { font-size: 14px; color: #CCC; }


/* ///////////////////////////////////// SUB NAVIGATION ///////////////////////////////////// */

.in-page-nav ul { display: block; overflow: hidden; }
.in-page-nav ul li { margin: 0 5px 10px 0; padding: 0; float: left; }
.in-page-nav ul li a { display: block; padding: 10px; text-decoration: none; font-size: 12px; text-align: right; color: #666; text-transform: uppercase; border: 1px solid #CCC; font-family: 'Quicksand', 'helvetica-neue', helvetica, arial, sans-serif; }
.in-page-nav ul li a:hover { border: 1px solid rgba(121,89,103, 0.9); color: #FFF; background: rgba(121,89,103, 0.9);}
.in-page-nav ul li a.active { border: 1px solid #6d8a91; color: #FFF; background: #6d8a91}
.in-page-nav h4 { color: #666; margin: 0 0 20px 0; }

/* Crop Image Circle */
span.crop-circle { margin: 20px 70px; padding: 0; display: block; height: 100%; border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; }
span.crop-circle img { width: 100%; transform: scale(1.1); }

/* Team Profile */
.profile h2 { font-weight: bold; margin-bottom: 0px; }
.profile p { line-height: 25px; }
.profile span.crop-circle { width: 25%; float: left; margin: 0 20px 0px 0; }

/* Offer Box */

.offer { padding: 20px; border: 2px dashed #6d8a91; overflow: visible !important; margin: 0 0 20px 0; position: relative; overflow: hidden; }
.offer h3 { color: #666; font-weight: bold; font-size: 18px; line-height: 30px; padding: 0 10%; }
.offer p { margin: 0 auto; color: #666; padding: 0 10%; }
.offer .button { display: none; position: absolute; z-index: 100; width: 70px !important; height: 70px !important; line-height: 70px !important; bottom: 0 !important; right: 10px; }


/* testimonials */
.testimonials-container { display: block; overflow: hidden; }
#testimonials { background: url(/img/ui/quotes.png) no-repeat center 65%; background-size: 300px; }
.testimonials { margin: 40px 0px 10px 0; }
.testimonials .quote { padding: 0px 10px; margin: 0 auto; height: auto !important; background: none !important; }
.testimonials .quote p { font-style: italic; font-size: 14px; line-height: 30px; }




/* ///////////////////////////////////// FOOTER ///////////////////////////////////// */

#footer { background: url(/img/ui/footer-bkg2.jpg) no-repeat center bottom; background-size: cover; background-color: #615b61; color: #FFF; }
#footer:before {  }
#footer .container { padding: 20px; }
#footer h5 { color: #FFF; font-weight: 200; margin: 0 0 20px 0; clear: both; display: block; }
#footer p { line-height: 18px; font-size: 14px; color: #EEE; }
#footer p span { color: #FFF; font-weight: bold; margin-right: 15px; }
#footer ul { overflow: hidden; margin: 20px 0;  }
#footer ul li { overflow: hidden; margin: 3px 10px 3px 0; float: left; display: block; padding: 10px 0; }
#footer ul li a {text-decoration: none; color: #FFF; font-size: 12px; padding: 10px; }

#footer ul li a { display: inline-block; background-color: rgba(0,0,0,0.3); margin-bottom: 4px; line-height: 18px; overflow: hidden; }
#footer ul li a:hover { color: #FFF; background-color: rgba(0,0,0,0.6); text-decoration: none; }

#footer a { color: #FFF; }
#footer a:hover { color: #FFF; text-decoration: underline; }

#footer a.social-link { margin: 10px 0 10px 0px; padding: 0; display: block; text-decoration: none; line-height: 45px; font-size: 12px; }
#footer a.social-link svg { width: 50px; margin: 0 10px 0 0; float: left; fill: #FFF; }

#footer #gmap-footer { width: 100%; height: 200px; display: block; border: 1px solid #666; border-radius: 6px; -webkit-border-radius: 6px; overflow: hidden;}
#footer #gmap-footer iframe { display: block; width: 100%; height: 100%; }

#footer form { }
#footer form span { color: #CCC; }
#footer input, #footer select { width: 97%; padding: 7px; border-radius: 4px; background: #EEE; -webkit-border-radius: 4px; margin: 10px 0; }
#footer label { font-size: 12px; display: block; color: #CCC;}
#footer input.submit { width: 95%; padding: 2%; text-align: center; background: #0099D1; border: none; color: #FFF; font-size: 12px; }
#footer .book { width: 100%; background: rgba(109,138,145,0.7) !important; padding: 10px 0; margin-top: 10px; }
#footer .book:hover { cursor: pointer; background-color: #6d8a91 !important; }

/* Bottom BAR */

#bottom { clear: both; margin: 0; background: #212121; bottom: 0; padding: 30px 0 20px 0; }
#bottom a, #bottom p { color: #666; font-size: 12px; }
#bottom .credit { float: left; text-align: left; }
#bottom a.admin-login { width: 120px; float: right; text-align: center; color: #FFF; background: rgba(217,217,217,0.2); margin: 0px; text-decoration: none; padding: 5px 0px; border-radius: 4px; -webkit-border-radius: 4px; }

/* Back to Top Link */
#top-link { display: block; position: fixed; z-index: 500; width: 40px; height: 40px; left: 20px; bottom: 20px; background-color: rgba(121,89,103, 0.8); cursor: pointer; }
#top-link:hover { background-color: #999; background-color: #6d8a91; }
#top-link span { display: block; width: 40px; height: 40px; background: url(/img/icons/icon-arrow2.svg) no-repeat center; background-size: 20px; }

















/* //////////////////////////////// START OF RESPONSIVE STYLES //////////////////////////////// */

@media screen and (orientation: landscape) and (max-width: 768px) {
	#mobile-nav { width: 50%; }
	#page-wrap.thin { width: 50%; }
}

@media screen and (orientation: portrait) {

}

/* ////////////////////////////////  iphone 4 portrait //////////////////////////////// */

@media screen and (min-width: 320px) {

	.full-width { padding: 15px 0; }

	.svg.intro { width: 35px; height: 35px; }

	#gmap-iframe { height: 200px; margin: 20px 0; padding: 0; }
	 
	.gallery span { width: 65px; height: 65px; margin: 0 6px 6px 0; }
	.gallery span a img { width: 100px; }  
	
}

/* ////////////////////////////////  iphone 5 portrait //////////////////////////////// */

@media screen and (min-width: 360px) {
	 
	.gallery span { width: 75px; height: 75px; margin: 0 6px 6px 0; }
	.gallery span a img { width: 120px; }  
	
}

/* //////////////////////////////// iphone landscape //////////////////////////////// */  

@media screen and (min-width: 640px)  {

	.full-width { padding: 15px 0; }
	.full-width.banner { height: 250px; }

	.svg.intro { width: 35px; height: 35px; }

	span.crop-circle { margin: 20px 20%; }

	.slideshow { height: 300px;  }

	#gmap-iframe { height: 300px; margin: 20px 0; padding: 0;}
	
	h1 { font-size: 25px; line-height: 35px; }
	h2 { font-size: 18px; line-height: 28px; margin-bottom: 25px; }  

	.col.link-social a { width: 50px; height: 50px; float: right; margin: 0px 15px 10px 10px;}
	
	.tabs li { clear: none; }
	.tabs li a { font-size: 12px; padding: 5px 15px; margin: 0px 0 8px 0; }  
	
	.gallery span { width: 78px; height: 78px; margin: 0 6px 6px 0; }
	.gallery span a img { width: 130px; }   

}

/* //////////////////////////////// ipad portrait //////////////////////////////// */

@media screen and (min-width: 768px) {
	.container { width: 720px !important; }
	.container .col { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	.container .grid1.col { width: 40px; }
	.container .grid2.col { width: 100px; }
	.container .grid3.col { width: 160px; }
	.container .grid4.col { width: 220px; } 
	.container .grid5.col { width: 280px; }
	.container .grid6.col { width: 340px; }
	.container .grid7.col { width: 400px; }
	.container .grid8.col { width: 460px; }
	.container .grid9.col { width: 520px; }
	.container .grid10.col { width: 580px; }
	.container .grid11.col { width: 640px; }
	.container .grid12.col { width: 700px; }

	#container.filter-container .grid3.col { width: 220px; }
	
	.full-width { padding: 30px 0 30px 0; } 
	.full-width.banner { height: 350px; }
	.full-width:nth-child(4) { margin-top: 0px; }

	body { font-size: 14px; }
	h1 { font-size: 25px; line-height: 40px; }
	h2 { font-size: 22px; line-height: 30px; margin-bottom: 15px; }
	h3 { font-size: 16px; line-height: 20px; }
	h4 { font-size: 16px; line-height: 24px; }
	h5 { font-size: 16px; line-height: 21px; }
	h6 { font-size: 16px; line-height: 21px; }
	.hide-on-mobile { display: block; }
	a.hide-on-mobile { display: inline-block; }
	.hide-web { display: none !important;}
	.hide-tablet { display: none !important;}

	#head { position: absolute; height: 80px; background: rgba(121,89,103, 0.7); }
	a.logo { display: block; position: relative; z-index: 1000; margin: 0 auto; padding: 10px 0; width: 160px; height: 60px; }

	.slideshow { height: 350px; }
	.full-width.banner { height: 350px; }

	#switch { display: none; }

	/* Navigation */
	#nav-main { display: block !important; position: relative; z-index: 9999; width:100%; bottom: 0; margin: -43px 0 0 0; padding: 0 !important; 
		/*background: #d1e6ea;*/ background: rgba(0,0,0,0.6);
	}
	#nav-main.scroll-to-fixed-fixed { position: fixed !important; z-index: 9999 !important; height: 40px; margin: 0; top: 0; overflow: hidden; background-color: rgba(0,0,0,0.8); }

	#nav-main ul { margin: 0; padding: 0; text-align: center; list-style: none outside none; display: block; }
	#nav-main ul li { display: inline-block; line-height: 16px; margin: 0; padding: 0; position: relative; }
	#nav-main ul li a { display: inline-block; margin: 0; padding: 10px 15px; text-align: center; color: #FFF; text-decoration: none; text-transform: uppercase; font-weight: normal; font-size: 11px; line-height: 23px; letter-spacing: 0.1em; font-family: 'Quicksand', 'helvetica-neue', helvetica, arial, sans-serif; font-weight: 200; cursor: pointer; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
	#nav-main ul li a:hover { color: #FFF; background-color: rgba(121,89,103, 0.7); cursor: pointer;}
	#nav-main ul li.active a { color: #795967; font-weight: bold; background-color: rgba(255,255,255,0.8); }

	/* Boxes */
	a.box { height: auto; width: 100%; float: none; display: block; margin-bottom: 15px; border-radius: 50%; -webkit-border-radius: 50%;  }
	a.box h4 { font-size: 12px; font-weight: normal; top: auto; margin: 35% 0 15px 0; padding: 10% 0; letter-spacing: 0.1em; }
	a.box.small h4 { font-size: 12px; font-weight: normal; top: auto; margin: 35% 0 15px 0; padding: 10% 0; letter-spacing: 0.2em; }
	a.box img { height: auto; margin: 0;}
	a.box p { line-height: 20px; margin: 20px 0 0 0; }
	a.box:hover h4, a.box:focus h4 { margin: 0; padding: 45% 0; letter-spacing: 0.1em; }
	a.box.small:hover h4, a.box.small:focus h4, a.box.active h4 { margin: 0 0 0 0; padding: 46% 0; letter-spacing: 0.1em; }

	a.box.small { height: auto; width: 100%; margin: 0; text-align: center; display: block; margin-right: 0px; }
	a.box.small img { height: 100%; margin: 0px; }

	/* Fixed Tab Boxes */
	.full-width.tab-boxes.scroll-to-fixed-fixed { position: fixed !important; top: 40px !important; z-index: 9000; height: 40px; width: 100%; padding: 0; background-color: rgba(150,80,120, 0.9) !important; }
	.full-width.tab-boxes.scroll-to-fixed-fixed .box { height: 40px; display: block; }
	.full-width.tab-boxes.scroll-to-fixed-fixed .box h4 { background: none; margin: 0; line-height: 20px; padding: 10px;}
	.full-width.tab-boxes.scroll-to-fixed-fixed .box:hover h4 { background: none; margin: 0; padding: 10px; }
	.full-width.tab-boxes.scroll-to-fixed-fixed .box img { display: none; }

	/* testiminials */
	.testimonials .quote { padding: 0px 100px; }

	/* Intro Icons */
	.svg.intro { display: block; width: 130px; height: 130px; margin: 0 20px 0 0; }

	/* tab style filter */
    #tab-style-filters { padding: 0px !important; }
    #tab-style-filters #filters .filter a { width: auto; padding: 5px 10px; font-size: 12px; }

	/* Profiles */
	.profile span { width: 15%; margin: 0 20px 10px 0; }

	/* Crop Circle */
	span.crop-circle { margin: 0px; position: relative; z-index: 0; }
	span.crop-circle img { width: 100%; transform: scale(1.1); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;  }
	span.crop-circle.small { margin: 0 0 15px 0 !important; }

	span.crop-circle.push-up { margin-top: -110px; }

	/* Offer Button */
	.offer .button { display: block; }

	/* slideshow */
	.slideshow { height: 450px; }
	.cycle-slideshow > div { background-size: 120% !important; }
	.cycle-slideshow span.cycle-prev { width: 40px; height: 60px; top: 180px; }
	.cycle-slideshow span.cycle-next { width: 40px; height: 60px; top: 180px; }
	.icon { display: block; }

	/* footer */
	#footer h5 { font-size: 1.2em; }
	#footer p { font-size: 12px; }
	#footer ul li { display: block; float: none; margin-right: 0; padding: 3px 0px; margin: 0 0 3px 0; }
	#footer ul li a {text-decoration: none; display: block; background-size: 30px; }	

	/* tabs */
	.tab-container { margin-bottom: 20px; }
	.tab-container .tab_content { border: 1px solid #ddd; background: #fff; padding: 20px 0px 20px 20px; overflow: hidden; }
	.tabs { list-style: none; margin-bottom: 0; }
	.tabs li { float: left; margin: 3px 10px 0 0; clear: none; }
	.tabs li a { font-size: 0.9em; color: #333; width: auto !important; margin-bottom: 0; border: 1px solid #ddd; border-bottom: 0; padding: 10px 15px; border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; }
	.tabs li.active { margin-top: 3px; margin-bottom: -1px; border-bottom: 1px solid #FFF; }
	.tabs li.active a { background: #fff; padding: 10px 20px; }

	/* FAQ */
	#faq .question { padding: 20px; font-size: 14px; line-height: 18px; }
	#faq .answer { padding: 20px; font-size: 14px; line-height: 18px; }
	
	/* forms */
	form input.thin { width: 300px; }
	form input.medium { width: 400px; }
	form input.wide, form textarea.wide { width: 90%; }	 
}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

@media screen and (min-width: 960px) {
	.container { width: 960px !important; }
	.container .grid1.col { width: 60px; }
	.container .grid2.col { width: 140px; }
	.container .grid3.col { width: 220px; }
	.container .grid4.col { width: 300px; }   
	.container .grid5.col { width: 380px; }
	.container .grid6.col { width: 460px; }
	.container .grid7.col { width: 540px; }
	.container .grid8.col { width: 620px; }
	.container .grid9.col { width: 700px; }
	.container .grid10.col { width: 780px; }
	.container .grid11.col { width: 860px; }
	.container .grid12.col { width: 940px; }
	
	.full-width { padding: 40px 0 40px 0; }

	.hide-tablet { display: inline-block !important;}

	a.logo { margin: 18px auto 0 auto; padding: 0; width: 250px; height: 80px;  }

	#head { height: 120px; }

	.slideshow { height: 600px; }
	.full-width.banner { height: 400px; }

	.cycle-slideshow > div { background-size: cover !important; }
	.cycle-slideshow span.cycle-prev { width: 50px; height: 100px; top: 275px; }
	.cycle-slideshow span.cycle-next { width: 50px; height: 100px; top: 275px; }

	#nav-main { display: block !important; margin: -65px 0 0 0; }
	#nav-main.scroll-to-fixed-fixed { height: 60px; margin: 0; top: 0; }
	#nav-main ul li a { font-size: 14px; line-height: 25px; padding: 20px 15px; line-height: 25px; }

	a.box { margin-bottom: 15px; }
	a.box h4 { font-size: 16px; }
	.full-width.tab-boxes.scroll-to-fixed-fixed { top: 60px !important; }

	.svg.intro { width: 140px; height: 180px; margin: -30px 40px 0 0; }

	span.crop-circle { margin: 0px; }
	
	h1 { font-size: 35px; line-height: 40px; }
	h2 { font-size: 22px; margin-bottom: 25px; }
	h3 { font-size: 16px; margin-bottom: 10px; }

	.tab-container { margin-bottom: 20px; }
	.tab-container .tab_content { border: 1px solid #ddd; background: #fff; padding: 20px 0px 20px 20px; overflow: hidden; }

	#footer .container { padding: 40px; }
	#footer ul { }
	#footer ul li { display: block; float: none; margin: 0;} 
	#footer h5 { font-size: 1.4em; }
	#footer p { font-size: 12px; }
	
	#bottom a.admin-login { width: 150px; margin: 0px 20px 0 4px; }

}

/* //////////////////////////////// large screen full wide version //////////////////////////////// */ 

@media screen and (min-width: 1500px) {

	#nav-main { display: block !important; }
	.slideshow { height: 700px; }
	.cycle-slideshow > div { background-size: 100% !important; }
	.full-width.banner { height: 450px; }

	.cycle-slideshow span.cycle-prev { width: 50px; height: 100px; top: 375px; }
	.cycle-slideshow span.cycle-next { width: 50px; height: 100px; top: 375px; }

}







