@import url('reset.css');

@font-face {
font-family: 'RTFCanadianSyllabics';
	src:url(../fonts/"RTFCANSY.eot") format("eot"),
	url(../fonts/"RTFCANSY.woff") format("woff"),
	url(../fonts/"RTFCANSY.ttf") format("truetype"),
	url(../fonts/"RTFCANSY.svg#RTFCanadianSyllabics") format("svg");
font-weight:normal;
font-style:normal;
}
@font-face {
font-family: 'gisha';
src: url(../fonts/'gisha.eot');
src: url(../fonts/'gisha.eot?#iefix') format('embedded-opentype'),
	url(../fonts/'gisha.woff') format('woff'),
	url(../fonts/'gisha.ttf') format('truetype'),
	url(../fonts/'gisha.otf') format('opentype'),
	url(../fonts/'gisha.svg#gisha') format('svg');
font-style: normal;
font-stretch: normal;
unicode-range: U+000D-25CA;
}
@font-face {
font-family: 'gisha-bold';
src: url(../fonts/'gisha-bold.eot');
src: url(../fonts/'gisha-bold.eot?#iefix') format('embedded-opentype'),
	url(../fonts/'gisha-bold.woff') format('woff'),
	url(../fonts/'gisha-bold.ttf') format('truetype'),
	url(../fonts/'gisha-bold.otf') format('opentype'),
	url('../fonts/gisha-bold.svg#gisha-bold') format('svg');
font-style: normal;
font-stretch: normal;
unicode-range: U+000D-25CA;
}


.col_25 {
width:23%;
margin:0 2% 0 0;
float:left;
}
.col_33 {
width:27%;
margin:0 3% 9%;
float:left;
}
.col_50 {
width:48%;
margin:0 2% 0 0;
float:left;
}
.col_66 {
width:64%;
margin:0 2% 0 0;
float:left;
}
.col_75 {
width:73%;
margin:0 2% 0 0;
float:left;
}
.col_100 {
width:98%;
margin:0 2% 0 0;
}

.col_25.wrap {
width:25%;
margin:0;
}
.col_33.wrap {
width:33%;
margin:0;
}
.col_50.wrap {
width:50%;
margin:0;
}
.col_66.wrap {
width:66%;
margin:0;
}
.col_75.wrap {
width:75%;
margin:0;
}
.col_100.wrap {
width:100%;
margin:0;
}
.cntr {text-align:center}
.left {text-align:left}
.right {text-align:right}

.img {max-width:100%}

a.button {color:auto}

@media only screen and (max-width:480px) {
/* Smartphone, etc */
.header {margin-bottom:0}
.logo, .slogan {
display:block;
float:none;
text-align:center;
}
.express {font-size: 75%}
}

@media only screen and (max-width:768px) {
/* Tablet */
.col_25,
.col_33,
.col_66,
.col_50 ,
.col_75  {
width:98%;
float:none;
}   
}


@media print {
* {
background:transparent !important;
color:black !important;
text-shadow:none !important;
filter:none !important;
-ms-filter:none !important;
}
a, a:visited {
color:#444 !important;
text-decoration:underline;
}
img {max-width:100% !important}
@page {margin: 1px}
p, h2, h3 {
orphans:3;
widows:3;
}
h2, h3{page-break-after:avoid}  
.header, .form {display:none}
.col_33, .col_66, .col_50  {
width:98%;
float:none;
} 
}


/* Desktop */

body {
font-family: 'Open Sans', sans-serif !important;
color:#333;
background: url(/vendors/capemudgeresort/media/BG-pattrn.jpg) 1px 0 repeat;
}


a {color:#004dd9}
a:hover {color:#ea0000}
a:visited {color:#551a8b}

ul li, ol li {padding:0 0 .4em}

.cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .cf             { zoom: 1; } /* IE6 */
*:first-child+html .cf { zoom: 1; } /* IE7 */


.container {
max-width:1054px;
margin:0 auto;
padding-left: 3px;
}

.header {margin: 1px auto}

.logo, .slogan {
display: block;
float: none;
padding: 0 5% 2%;
margin: 3em auto 0;
max-width: 350px;
height: auto;
}
.slogan {margin: 0 auto}


/* navigation container */

nav {margin-top: 5px}
#banner {
position: absolute;
display: block;
width: 100%;
max-width: 1114px;
height: 60px;
top: 20.5em;
left: 50%;
margin-left: -562px;
z-index: 99;
}
#banner .bg {
position: relative;
display: block;
background: url(/vendors/capemudgeresort/media/banner.png) 0 0 repeat-x;
width: 1036px;
margin: 0 auto;
height: 60px;
}
#banner img.fl, #banner img.fr {
float:left;
width: 100%;
max-width: 39px;
}
#banner img.fr {float:right}

@media only screen and ( max-width: 1152px ) {
#banner {
max-width: 840px;
top: 20.5em;
left: 50%;
margin-left: -420px;
}
#banner .bg {width: 762px}
}
@media only screen and ( max-width: 860px ) {
nav {margin-top: 0}
#banner .bg {
width: 860px;
margin: -0.4em auto 0;
}
#banner img.fl, #banner img.fr  {display: none}
}
@media only screen and ( max-width: 800px ) { #banner, .bg  {display: none} }



/* content */

#backdrop {
display: inline-block;
width: 100%;
max-width: 1086px;
background: #FFF;
padding: 4px 6px 4px 4px;
}
#innerbox {
display: inline-block;
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid #E9DFCE;
background: #FFF;
}

.trio {margin-top: 2%}
.trio h1 {
font-family: Tangerine;
font-weight: 400;
font-size: 2.4em;
color: #222;
text-align: left;
padding: 0; 
margin: 5% 0 0;
}
.trio img {
float: left;
border: 5px solid #CFC9C0;
width: 100%;
max-width: 150px;
height: auto;
margin: 0 8px 3px 0;
}
.col_33.trio .content {
line-height: 1.6em;
margin-top: -10px;
}
.col_33.trio .content h2 {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
font-weight: normal;
}
@media only screen and ( max-width: 1024px ) { 
.trio h1 {text-align: center}
.trio img {
display: block;
float: none;
margin: 0 auto 2em;
} 
}
@media only screen and ( max-width: 768px ) { 
.trio h1 {text-align: left}
.trio img {
display: block;
float: left;
margin: 0 10px 0 0
} 
}
@media only screen and ( max-width: 640px ) { 
.trio {
margin-top: 9%;
border: 1px solid #CCC;
border-width: 0 0 1px;
padding-bottom: 5%;
} 
.trio h1 {text-align: left}
.trio img {
display: block;
float: left;
} 
}
@media only screen and ( max-width: 320px ) { 
.trio h1 {text-align: center}
.trio img {
display: block;
float: none;
margin: 0 auto 2em;
} 
}


/* footer */

footer {
background-color: #292c2f;
width: 100%;
border: 1px solid #FFECBD;
border-width: 1px 0 0;
margin-top: 9%;
}
.footer {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-size: .95em;
padding: 55px 50px;
position: relative;
display: block;
max-width: 1320px;
height: auto;
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right {
display: inline-block;
vertical-align: top;
}

/* Footer left */

.footer-left {
width: 30%;
margin-right: 7%;
}

.footer-left-guts {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
}

.footer-left .logo {
width: 100%;
margin: 0;
}
.footer-left img {
max-width: 300px;
width: 100%;
padding: 0 10px 0 0;
}
.footer-links {
display:block;
text-align: center;
}
.footer-links a {
color:  #fff;
margin: 2em auto 0;
padding: 0;
line-height: 1.8;
text-decoration: none;
}
.footer-links span {color:#F93}
.footer-copy {
color: #8f9296;
font-size: .95em;
font-weight: normal;
margin: 2em auto 0;
text-align: center;
}
.credentials {
display: block;
width: 300px;
margin: 2em auto 0;
}

@media only screen and ( max-width: 1080px ) { 
.footer-left .logo {
width: 100%;
margin: 0 auto;
}
.footer-center.guts {
max-width: 460px;
width: 100%;
}
.credentials {margin: 2em auto}

}
@media only screen and ( max-width: 600px ) { .footer-left h3, .footer-copy {font-size: 90% } }


/* Footer centre */

.footer-center {
width: 32%;
color: #999;
margin: 1% 5% 0 0;
}
.footer-center.guts {
max-width: 370px;
width: 100%;
}
.footer-center i {
color: #fff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer-center i.fa-envelope {
font-size: 16px;
line-height: 38px;
margin: 50px 10px 50px 0;
}

.footer-center a {
color:  #888;
margin: 2em auto 0;
padding: 0;
line-height: 1.8;
text-decoration: none;
}
.footer-center a:hover {
color:  #fff;
text-decoration: underline;
}
.TAwidget {
max-width: 300px;
width:100%;
display: block;
margin:2em auto 0;
}

@media only screen and ( max-width: 600px ) { 
.footer {padding: 5em 0 0}
.footer-center {
background-color: #222;
margin: 5% 0 0;
padding: 9% 0;
}
.footer-center.guts {width: 100%}

.TAwidget {text-align:center}
}

/* Footer right */

.footer-right {
width: 20%;
padding: 1.5em 0 0 5%;
}

.footer-about {
line-height: 20px;
color:  #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer-about span {
display: block;
color:  #fff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-right p a {color:#FFF;text-decoration:none}
.footer-right p a:hover {text-decoration:underline}

.footer-icons {margin-top: 25px; border: none}

.footer-icons a {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color:  #33383b;
border-radius: 2px;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
.footer-about.credits {
margin: 2em 0 0;
padding-bottom: 5em;
}
.footer-about.credits a {
color: #999;
font-size: .95em;
}
@media only screen and (max-width: 1100px)  { .footer-right {max-width: 480px} }

@media only screen and (max-width: 1100px)  {
.footer-left, .footer-center, .footer-right {
display: block;
width: 100%;
margin: 0 auto 40px;
text-align: center;
}
.footer-center-guts {
width: 50%;
margin: 0 auto; 
text-align: left;
}
.footer-left.cf p.logo {
display: block;
max-width: 360px;
}
.footer-center i {margin-left: 0}
}

@media only screen and (max-width: 320px)  {
.footer-center-guts {
width: 100%;
text-align: left;
}

}


#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:100%;
background:url(/vendors/capemudgeresort/media/totop.png) no-repeat left top;
z-index: 99;
}
#toTopHover {
background:url(/vendors/capemudgeresort/media/totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {outline:none}