/*====================================
        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, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1.2;
}
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; }
		
		
/*====================================
        fonts
=====================================*/
h1 {font-family:'amblebold', Arial, Helvetica, sans-serif; font-weight:normal; color:#5C7578; margin:0 0 20px 0;font-size:2em;}
h2, h3, h4{font-family:'amblebold', Arial, Helvetica, sans-serif; font-weight:normal; color:#5C7578; margin:0 0 6px 0; font-size:1.5em;}

@font-face {
    font-family: 'quicksandregular';
    src: url('fonts/quicksand-regular-webfont.eot');
    src: url('fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/quicksand-regular-webfont.woff') format('woff'),
         url('fonts/quicksand-regular-webfont.ttf') format('truetype'),
         url('fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'amblelight';
    src: url('fonts/amble-light-webfont.eot');
    src: url('fonts/amble-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/amble-light-webfont.woff') format('woff'),
         url('fonts/amble-light-webfont.ttf') format('truetype'),
         url('fonts/amble-light-webfont.svg#amblelight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amblebold';
    src: url('fonts/amble-bold-webfont.eot');
    src: url('fonts/amble-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/amble-bold-webfont.woff') format('woff'),
         url('fonts/amble-bold-webfont.ttf') format('truetype'),
         url('fonts/amble-bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*====================================
        GLOBAL
=====================================*/

* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

canvas {
    -ms-touch-action: double-tap-zoom;
}

html {
        font-size: 104%;
}

body {
        font-family: 'amblelight', Tahoma, Arial, Helvetica, sans-serif; color:#333;
		background:url(images/bg.jpg) #F5F5F5;
}

img {
    max-width: 100%;
    height: auto;
}

		strong{font-family:'amblebold', Arial, Helvetica, sans-serif; font-weight:normal;}

		/*====================================
        HEADER
=====================================*/

.head {
    width: 100%;
    z-index: 70;
    background: #5C7578;
}

.logo-holder {
    max-width: 990px;
    margin: 0 auto;
    position: relative;
    height: 190px;
	text-align:center;
    
}

.logo {
	padding:20px 0 0 0;
}

.logo-small {
    display: none;
}
		
		
/*====================================
        TOP NAV
=====================================*/

.nav-wrapper {
    width: 100%;
    height: 45px;
    background: #9EAF9F;
}

nav {
    max-width: 990px;
    margin: 0 auto;
}

.main-nav ul {
    width: 100%; 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.main-nav li {
    height: 45px;
    text-align: center;
    padding: 0;
    position: relative;
    float: left;
    margin: 0;
	width:20%;
}


.main-nav a {
    font-size: 16px; font-size: 1.15em;
    color: #fff;
    text-decoration: none;
    height: 45px;
    line-height: 45px;
    display: block;
    width: 100%;
}

.main-nav a:hover {
        background: #5C7578;
}


@media screen and (min-width: 0px) and (max-width: 800px) {
        .head {
            position: static;
        }

        .logo-small {
            top: 10px;
            left: 10px;
            margin: 0;
            display: block;
            position: absolute;
        }

        .logo-holder {
            position: relative;
            height: 60px;
            background: #5C7578;
        }

        .nav-wrapper {
            height: 1px;
            border-bottom: 0;
        }

        nav.mini 
        {
            display: block;
        }

        nav {
            float: none;
            width: 100%;
            position: relative;
        }

        nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        nav ul.mobile-nav {
            position: relative;
            overflow: hidden;
            width: 100%;
            display: none;
            margin: 0;
            padding: 0;
            list-style-type: none;
            z-index: 100;
            float: none;
        }

            nav ul.mobile-nav li {
            float: none;
            height: 40px;
            background: #9EAF9F;
            position: static;
            margin: 0;
            padding: 0;
        }

        nav ul.mobile-nav a {
            font-size: 18px; font-size: 1.3em;
            line-height: 40px;
            height: 40px;
            color: #fff;
            padding: 0 0 0 10px;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid #5C7578;
            width: 100%;
            text-align: left;
            margin: 0;
        }

    nav ul .off-canvas 
    {
        position: absolute;
        display: block;
        width: 100%;
        top: 0;
        right: -100%;
        z-index: 101;
    }

    nav ul.mobile-nav .off-canvas ul li.previous a {
        padding-left: 40px;
    }

    nav ul.mobile-nav .off-canvas ul li a {
        width: 100%;
        text-align: left;
        padding: 0 0 0 20px;
        background: rgb(0,0,0);
        margin: 0 0 1px 0;
    }
    .contacttel{display:none}
	
	
	.small-text br{display:none}.small-text{margin: 5px 0px;}
}

@media screen and (min-width: 0px) and (max-width: 480px) {
            .logo-small {
                top: 13px;
                left: 10px;
                margin: 0;
                max-width: 210px;
                height: auto;
                position: absolute;
            }
}


@media only screen and (min-width: 801px) /* larger than mobile */ {
     #menu-icon, nav.mini  {
        display: none !important;
    }
}







/*====================================
        MOBILE ICON
=====================================*/


#menu-icon {
    width: 50px;
    height: 50px;
    padding: 10px 12px;
    display: block;
    position: absolute;
    /*top: 10px;*/
    top: 5px;
    /*right: 10px;*/
    right: 5px;
    cursor: pointer;
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
}

#menu-icon.active {
    background: #9EAF9F;
}

#menu-icon span.line {
    height: 3px;
    width: 100%;
    margin: 5px 0;
    display: block;
    background: rgb(255,255,255);
    padding: 0;
    border: 0;
}

#menu-icon.active span.line {
    background: #fff;
}
		
		
	/*====================================
        SHOW HIDE 
=====================================*/

.show-small, .show-medium, .show-large {
    display: block !important;
}

@media screen and (min-width: 0px) and (max-width: 479px) {
    .show-small, .show-medium {
        display: block !important;
    }
    .show-large, .hide-small, .hide-medium, .hide-large {
        display: none !important;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .show-med-small {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .show-med-small {
        display: none;
    }
}

@media screen and (min-width: 480px) and (max-width: 800px) {
    .show-medium {
        display: block !important;
    }
    .show-small, .show-large, .hide-medium {
        display: none !important;
    }

}

 @media screen and (min-width: 801px) and (max-width: 1139px) {
    .show-large {
        display: block !important;
    }
    .show-small, .show-medium {
        display: none !important;
    }
    .hide-small, .hide-medium {
        display: block !important;
    }
}

@media screen and (min-width: 1140px) {
    .show-large {
            display: block !important;
        }
        .show-small, .show-medium {
            display: none !important;
        }
        .hide-small, .hide-medium {
            display: block !important;
        }
}
	
		

.hero-wrapper {
    width: 100%;
        background: #F1F1F1;

    overflow: hidden;
    position: relative;
    /*padding: 185px 0 0 0;*/
	    height: 374px;

}

.carousel {
    overflow: hidden;
    max-height: 375px;

}

/*------------- For mobilie menu ----------------*/

@media screen and (min-width: 481px) and (max-width: 800px) {
    .hero-wrapper {
                padding: 0;
                overflow: hidden;
            }
}

.slide {
    max-width: 990px;
    float: left;
    width: 100%;
    overflow: hidden;
}

.slide figure {
    position: relative;
    overflow: hidden;
	padding-top: 37.75%;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
		    height: 375px;

	}

.one,.two,.three,.four, .five, .six, .seven, .eight, .nine, .ten, .eleven,  .twelve, .thirteen, .fourteen {
    padding-top: 37.75%;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


.slide figcaption {
    background: #5C7578;
    background: rgba(92,117,120,0.8);
    padding: 20px 25px;
    position: absolute;
    top: 7%;
    -webkit-box-shadow: inset 0,0,5px rgb(0,0,0);
    -moz-box-shadow: inset 0,0,5px rgb(0,0,0);
     box-shadow: inset 0,0,5px rgb(0,0,0);
}

figcaption.Left {
    position: absolute;
    left: 3%;
}

figcaption.Right {
    position: absolute;
    right: 3%;
}

figcaption .large-text {
    font-size: 1.6em;
    color: rgb(255,255,255);
    padding-bottom: 10px;
    display: block;
    border-bottom: 1px solid rgb(150,150,150);
     font-weight: normal;
     text-transform: uppercase;
     line-height: 1.2em;
}

figcaption .small-text {
    display: block;
    padding-top: 10px;
    font-size: 1em;
    line-height: 1em;
    color: rgb(255,255,255);
}



@media screen and (max-width: 801px) {
    .slide figcaption {
        top: auto;
        left: 0;
        bottom: 0;
        padding: 10px;
        position: absolute;
        width: 100%;
    }
    figcaption .large-text {
        display: none;
    }
    figcaption .small-text { 
        padding: 0;
    }
}


#prev, #next {
    background: rgba(255,255,255,0.8);    
    display: block;
    height: 375px;
    width: 50%;
    /*top: 185px;*/
    top: 0;
    position: absolute;
    z-index: 30;
}

#prev {
    left: -495px;
}

#next {
    right: -495px;
}

.pagination-wrapper {
    width: 100%;
    background: rgb(0,0,0);
    height: 10px;
    clear: both;
}

.pagination {
    max-width: 990px;
    margin: 0 auto;
    text-align: center;
}

.pagination a {
    background: rgb(108,99,90);
    display: inline-block;
    width: 20%;
    height: 10px;
}

.pagination a.selected {
    background: rgb(255,255,255);
    cursor: default;
}

.pagination a span {
    display: none;
}



/*====================================
    2nd MENU BELOW HERO BANNER
=====================================*/

.spacerbar-wrapper {
    width: 100%;
    background: #9EAF9F;
	height:30px;
    text-align: center;
}

.spacerbar-wrapper-stay {
    width: 100%;
    background: #A11A1C;
	height:50px;
    text-align: center;
	color: #FFFFFF
}

.spacerbar {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    text-align: center;
    max-width: 1140px;
}

.page-none .todo-nav{display:none !important}
.page-none .accommodation-nav{display:none !important}

.page-accommodation .todo-nav{display:none !important}
.page-accommodation .none-nav{display:none !important}

.page-todo .accommodation-nav{display:none !important}
.page-todo .none-nav{display:none !important}



.sub-nav ul {width: 100%; margin: 0;padding: 0;list-style-type: none;}
.sub-nav li {height: 30px;text-align: center;padding: 0;position: relative;float: left;margin: 0;width:25%;}
.sub-nav a {font-size: 12px; font-size: 0.9em;color: #fff;text-decoration: none;height: 30px;line-height: 30px;display: block;width: 100%;}
.sub-nav a:hover {background: #5C7578;}


.desktop-fixed {
    position: fixed;
    z-index: 60;
}

/*----- Not fixed on tablet size portrait --------*/


@media screen and (max-width: 801px) {
    .desktop-fixed {
        position: static;
        z-index: 60;
    }
   .spacerbar-wrapper {
        display: none;
    }
		.hero-wrapper {}

}




.contacttel{
    position: absolute;
    right: 20px;
    top: 40px;
    background: transparent;
    height: 50px;
}

.contacttel p {
    font-size: 1.5em;
    color: #fff;
     font-family: 'quicksandregular', Tahoma, sans-serif;
}
.contacttel p a{
    text-decoration:none; color:#fff;
}
.sitetitleheader{
	    font-size: 36px;
		text-transform: uppercase;
    color: #fff;
	text-decoration:none;
     font-family: 'quicksandregular', Tahoma, sans-serif;
	 line-height:none;
	 margin:0; padding:0;
	 text-align:center;
}
.sitetitleheader img {
    margin-top:6px;
	 
}




#footer{background:#5C7578;color:#fff}
.footwrap {max-width: 990px;margin: 0 auto;padding-top:15px}
.footleft {width: 74%;float: left; clear:left; margin:0 0 10px 10px; }
.footmap {width: 222px;float: right;margin: 0 10px 0 10px;}
.footclear {clear: both;padding: 0 15px;height:1px;}

.footercenter{} .footerleft{text-align:right}



#footer-ta, #footer-fb, #footer-in, #footer-tw, #footer-yt, #footer-g {width:56px; height:38px; overflow:hidden; display:inline-block; margin:0 10px 0 0;}
	
#footer-ta{background:url(images/ta-footer.png) 0 0 no-repeat;} 
#footer-ta:hover{background:url(images/ta-footer.png) -57px 0px no-repeat;}	

#footer-in{background:url(images/in-footer.png) 0 0 no-repeat;}
#footer-in:hover{background:url(images/in-footer.png) -57px 0px no-repeat;}

#footer-fb{background:url(images/fb-footer.png) 0 0 no-repeat;}
#footer-fb:hover{background:url(images/fb-footer.png) -57px 0px no-repeat;}

#footer-tw{background:url(images/tw-footer.png) 0 0 no-repeat;}
#footer-tw:hover{background:url(images/tw-footer.png) -57px 0px no-repeat;}

#footer-yt{background:url(images/yt-footer.png) 0 0 no-repeat;}
#footer-yt:hover{background:url(images/yt-footer.png) -57px 0px no-repeat;}

#footer-g{background:url(images/g+-footer.png) 0 0 no-repeat;}
#footer-g:hover{background:url(images/g+-footer.png) -57px 0px no-repeat;}


	#footer-nav{height:120px}
	#footer-nav ul {padding: 0;margin: 0;font-size:16px;font-family:'amblelight', Arial, Helvetica, sans-serif;}
	#footer-nav li {float: left; display: inline;position: relative;min-width: 80px;list-style: none;margin-right:10px;}
	.wideli{width: 150px;}
	.wideishli{width: 105px;}
	.bli{font-family:'amblebold', Tahoma, Arial, Helvetica, sans-serif}

	#footer-nav li a {color:#fff;text-decoration:none;}
	#footer-nav li a:hover {text-decoration:underline;}
	#footer-nav ul ul {position: absolute;left: 0;top: 100%;display: block;}
	#footer-nav ul ul li{width:100%;}

.footervb{float:left; width:70px}
.footercopy{float:left; margin:10px 0 0 1px} .footercopy p{color:#fff; font-size:13px; margin:0; line-height:1.5em}.footercopy p a{color:#fff;}.footercopy p a:hover{text-decoration:none;}
.lgfoothide{display:none}
@media screen and (max-width: 999px) {
	.footwrap {width: 100%;margin: 0 auto;padding-top:15px}
	.footleft {width: 99%;padding:0; margin:0 0 10px 0; }
	.footmap {display:none;}
	.footervb{display:none;}
	.footercopy{width:100%; text-align:center;margin:0 0 0 1px}
	#footer-nav{display:none;}
	.footercenter{text-align:center} .footerleft{text-align:center}
	.lgfoothide{margin:6px 0;display:inline;text-align:center;}
	body{background:#5C7578}

}