/* ------------------------------------------
ALPINE COUNTRY RENTALS STYLESHEET
Author: Bullet Point Marketing Inc.
Web: www.bulletpoint.ca
Date: July 13, 2014
Version: 1.0

Almost Black (background): #383838;
Yellow: #FC0;
Light Grey:
Logo Blue: #003483;

------------------------------------------- */

/***
@font-face {
    font-family: Oswald-Stencil;
    src: url(http://www.alpinecountryrentals.com/fonts/Oswald-Stencil.otf);
}
@font-face {
    font-family: Oswald-Light;
    src: url(http://www.alpinecountryrentals.com/fonts/Oswald-Light.otf);
}
@font-face {
    font-family: Oswald-Bold;
    src: url(http://www.alpinecountryrentals.com/fonts/Oswald-Bold.otf);
}
@font-face {
    font-family: Oswald-Regular;
    src: url(http://www.alpinecountryrentals.com/fonts/Oswald-Regular.otf);
}
*/

/*************************************** HEADING STYLES */
h1 { font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 2em; }
h2 { font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 1.6em; }
h2.cta { font-size: 3em !important; }
h3 { font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 1.3em; margin: 0; padding: 0; }
h3.cta { font-size: 2em !important; margin: 6px 0px; }
h4 { font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 1.2em; }
h5 { font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 1em; }

.tight { margin: 0px }
.red { color: red !important; }

ul li {
	list-style-position: inside;
}

/*************************************** LINKS */
a, a:visited { color:#003483; text-decoration: underline; }
a:hover, a:active { color:#FC0; text-decoration: underline; }
h2.cta a:link, h2.cta a:visited { text-decoration: none !important; color: #383838 !important; }
h2.cta a:hover, h2.cta a:active { text-decoration: none !important; color: #FC0 !important; }

/*************************************** DROP-DOWN MENU */
.navigation {
	width:100%;
	background-color: #383838;
	float:left;
}

.active, .navigation ul li a:hover {
	color:#FC0 !important;
}

nav ul ul { display: none; text-transform: normal; z-index: 100; }

nav ul li:hover > ul { display: block; }

nav ul {
	background: #383838; 
	position: relative;
	display: block;
	list-style:none;
	margin:0;
	padding:0;
}
nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
	display: block;
	padding:0 40px 0 0;
	font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif; font-weight: normal;
	text-transform: uppercase;	
}

nav ul li:hover a { color: #fff; }

nav ul li a {
	color:#fff !important;
	display: block;
	text-decoration: none !important;

	font-size:18px;
	line-height:32px;
}
nav ul ul {
	padding: 0;
	position: absolute; top: 100%;
}
nav ul ul li {
	float: none; 
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a; position: relative;
	text-transform: none !important;	
}
nav ul ul li a {
	padding: 5px 10px;
	color: #fff;
}	
		

/*************************************** BODY */

@charset "utf-8";
body{
	background-color:#FFF;
	color: #383838;
	padding:0;
	margin:0;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	font-weight:normal;
}
.sprinkle { 
	background: #FFF url(../images/bg.jpg) repeat-x top left;
}
.header {
	background-color: #000;
	width:100%;
	padding:10px 0 10px 0;
	float:left;
}
.container{
	width:100%;
	max-width:990px;
	margin:0 auto;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding:0 15px;
}
.row{
	width:100%;
	float:left;
}
.suspended {
	background-image: url('https://www.alpinecountryrentals.com/images/suspended.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: 300px;
}
.logo{
	width:100%;
	max-width:270px;
	float:left;
}
.logo img{
	width:100%;
	border: none !important;
}
.social img, .col-3 img {
	border: none !important;
}
a img{ border: none !important; }
.contact span, .contact span a {
	color: #FC0;
	text-decoration: none;
}
.contact, .social {
	margin-top: 10px;
	font-size:30px;
	color:#FC0;
	float:right;
}
.contact img{	
	border:thin solid #FFF;
	border-radius:50%;
	float:left;
	margin:4px 5px 0 0;
}

.banner{
	background: #000 url('../images/border.jpg') repeat-x bottom center; text-align: center;
	width:100%;
	float:left;
	padding:10px 0 40px 0;
}
.bg { background: #FFF url(../images/bg.jpg) repeat-x top left; }
.bg-up { background: #FFF url(../images/bg-up.jpg) repeat-x bottom left; }
.slide-shadow { background: url(../images/slider-shadow.png) no-repeat bottom center; }
.content{
	width:100%;
	float:left;
}
.content .bg {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.feature { background: #000 url('../images/border.jpg') repeat-x bottom center; text-align: center; padding-bottom: 36px; }
.feature-yellow { background-color: #FC0; text-align: center;}
.feature img { width: 310px; height: auto;}

.highlight { font-size: 1.5em; text-align: center; border-top: 1px dotted #383838; border-bottom: 1px dotted #383838; }
.testimonial img { float: left; padding: 0px 20px 10px 0px; }
.testimonial-author {text-align: right; font-style: italic; }
.productbox {
	background: #FC0;
	min-height: 100px;
	padding: 10px 5px;
	margin-bottom: 2em;
}
.productbox img {
	margin-top: -10px;
	float: left;
	max-width: 275px;
}

.productbox .button {
	position: relative;
	float: right;
	margin-right: 20px;
}

.tourpic {
	float: left;
	margin-top: 0px !important;
	margin-left: 10px; margin-right: 10px; margin-bottom: 10px;
	padding: 7px; background: #FFF;
}
.guide {
	border-radius: 50%; 
	clear: left;
}
.fleft { float: left; margin-right: 50px; }
.fright { float: right; margin-left: 50px; }

.button {
   border-top: 1px solid #ffcc00;
   background: #ffcc00;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffe78f), to(#ffcc00));
   background: -webkit-linear-gradient(top, #ffe78f, #ffcc00);
   background: -moz-linear-gradient(top, #ffe78f, #ffcc00);
   background: -ms-linear-gradient(top, #ffe78f, #ffcc00);
   background: -o-linear-gradient(top, #ffe78f, #ffcc00);
   padding: 10px 20px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,0.5) 0px 1px 0px; 
	font-weight: bold; text-transform: uppercase;
	color: #000;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #ffe78f;
   background: #ffe78f;
   color: #000;
   }
.button:active {
   border-top-color: #003483;
   background: #003483;
   color: #000;
   }
.button:visited {
	color: #000;
	}

/******************************* SIDEBAR */
.sidebar-box {
   border-top: 1px solid #ffcc00;
   background: #ffcc00;  
   background: -webkit-gradient(linear, left top, left bottom, from(#ffe78f), to(#f8f3bb));
   background: -webkit-linear-gradient(top, #ffe78f, #f8f3bb);
   background: -moz-linear-gradient(top, #ffe78f, #f8f3bb);
   background: -ms-linear-gradient(top, #ffe78f, #f8f3bb);
   background: -o-linear-gradient(top, #ffe78f, #f8f3bb);	
   padding: 10px 20px;
   margin-bottom: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
	color: #000000;
   text-decoration: none;
   vertical-align: middle;
}

.widget { margin-top: 0px; margin-bottom: 3em; }
.widget img { border: none !important; }

/******************************* COLUMN LAYOUTS */
.col-1 {
	width: 66.6%;
	padding: 10px 30px 10px 10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	float:left;
}
.col-2 {
	width: 49.9%;
	padding: 10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	float:left;
}
.col-3 {
	width: 33.3%;
	padding:40px 0px 0px 30px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	float:left; text-align: left;
}
.col-4{
	width: 24.9%;
	padding:10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	float:left;
}
.home-tight {
	padding:5px 0px 0px 30px !important;
}

/******************************* FOOTER */
.footer{
	background-color: #383838;
	width:100%;
	float:left;
	color:#fff;
	font-size:12px;
	margin:0px 0 0px 0;
}

.footer a{
	color:#fff;
	text-decoration:underline;
}
.footer a:hover{
	color:#FC0;
}
.footer ul { padding: 0; margin: 0; }
.footer ul li { list-style: none; }

.copyright { 
	text-align: right;
	font-size: 0.9em;
	background-color: #000; 
	width:100%;
	float:left;
	color:#fff;
	margin: 0px 0 5px 0;	
}
.copyright a, .copyright a:visited { color: #FFF; font-size: 0.9em; }
.copyright a:hover, .copyright a:active { color: #FC0; font-size: 0.9em; }

#dl-menu {
	display:none; /* Hides Mobile Menu */
}
.dl-trigger { color: #FFF; }


/* mobile 
**********************/
/* iPhone 5 (landscape) ----------- */
@media (max-width: 1136px) {
	.feature img {width: 100%; }
	.footer ul {line-height: 2em; }
}


@media (max-width: 800px) {
	.navigation ul li{
		padding:0 25px 0 0;
	}
}

@media (max-width: 767px) {
	.navigation ul li{
		display:none; min-height: none !important;
	}
	#dl-menu {
    display: block;
    margin: 0px;
    position: relative;
    background: #383838;
    width: 100%;
    z-index: 99999;
	text-align:center;
	}
	
	.col-1, .col-2, .col-3, .col-4 {
		width:100%; padding: 40px 5px 5px 5px;
		text-align:center;
	}
	.contact, .social {
		float:none;
		margin:10px auto;
		text-align: center;
	}
	.logo{
		float:none;
		text-align: center;
	}
}
}

/* Smartphones (landscape) ----------- */
@media (max-width : 480px) {
	.productbox img { width: 100%; height: auto;}
	.productbox { padding: 10px 15px; }
	.tourpic { margin-left: 0px; margin-right: 0px; }
	h2.cta {font-size: 2em !important; }
}

/* Smartphones (portrait) ----------- */
@media (max-width : 320px) {
}