/*
Theme Name: Dune Rider Responsive
Author: Monster Graphics | PBS
Version: 1.0
*/


* {
	margin:0;
	padding:0;
}   
    
    
body {
	background:#eee;
	font-family: 'Open Sans', sans-serif;
	color:#525252;
	font-size: 16px;
    line-height: 1.6;
	overflow-x:hidden;
}

.bodybg {
	background:#fff url(images/dunes-bg.jpg) no-repeat center top / cover;
	height:238px;
	position:absolute;
	width:100%;
	z-index:-10;
	top:0;
}

.home .bodybg {
	height:761px;
}
	
h1,h2,h3,h4,h5,h6 {
	font-weight:700;
	color:#000;
	font-family: 'Open Sans', sans-serif;
}

.alignright {
	text-align:right;
}

.centered {
	text-align:center;
}

h1 {
	font-size:45px;
}

.h1pre {
	color:#0085C0;
	font-size:30px;
	font-weight:400;
	display:block;
	line-height:1;
}

.area2  h2 {
	font-size:30px;
	color:#000;
	font-weight:700;
}

h2 {
	font-size:30px;
	color:#0086C3;
	font-weight:400;
	line-height:1.4;
}
	

img {
	max-width:100%;
	height:auto;
}

img.alignright {
  float: right;
  margin: 0 0 15px 15px;
}

ul{
    margin: 0 0 1em 0;
    padding: 0 0 0 2em;
    list-style: none;
}

ol {
    margin: 0 0 1em 0;
    padding: 0 0 0 2em;
}

li {
	position: relative;
	line-height:24px;
}

p.button2 a,
.gform_button { 
	color:#ffffff!important;
	padding:11px 18px;
	font-weight:600;
	font-size:16px;
	text-decoration:none;
	background:#D90000;
	border-radius:5px;
	border: 0 none;
}

p.button2 a:hover { 
	background:#EF0F0F;
}

.quote {
	color:#1D84BF;
	font-size:20px;
	margin-bottom:19px;
}

.author {
	color:#535353;
	font-size:14px;
	font-weight:600;
	font-style:italic;
}

.wrap {
	width:1279px;
	margin:0 auto;
	position:relative;
}

.wrap.headpad {

}

header.topheader {
	position:relative;
}


header.topheader h1{
	background:url(images/dunrider-logo.png) no-repeat 0 0 transparent;
	width:327px;
	height:129px;
	text-indent:-9999px;
	margin:16px 0 29px;
	padding:0;
}

header.topheader h1 a{
	width:327px;
	height:129px;
	display:block;
}

.searcharea {
  top: 13px;
  position: absolute;
  right: 0;
}

#searchform #s {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: transparent;
    border-style: solid none solid solid;
    border-width: 0px medium;
    color: #333333;
    float: left;
    font-size: 15px;
    height: 38px;
    line-height: 36px;
    padding: 0 0 0 12px;
    width: 214px;
    background: #fff;
	border:0;
}

#searchsubmit {
  background: transparent url(images/search-icon.png) no-repeat scroll 0 0;
  border: medium none;
  cursor: pointer;
  float: left;
  height: 23px;
  margin: 7px 0 0 -30px;
  width: 23px;
}

.headerphone {
  top: 8px;
  position: absolute;
  right: 250px;
}

.headerphone p {
	color:#fff;
	font-size:30px;
}

.bolder{
	font-weight:800;
}


nav.topnav {
	background:rgba(255,255,255,0.6)
}

nav.topnav ul {
  color: #ffffff;
  text-decoration: none;
  padding:0px;
  margin:0 0 0 0px;
}

nav.topnav ul li {
	float:left;
	position:relative;
	line-height: 64px;
}

nav.topnav ul li  a{
	color:#333333;
	text-decoration:none;
	padding:0 20px;
	font-weight:600;
	font-size:16px;
	text-transform:uppercase;
	display: block;
}

nav.topnav ul li  a:hover,
li.current-page-ancestor a,
li.current_page_item a {
	color:#fff!important;
	background:#D90000;
}

.topsocial li {
  float: right;
  height: 46px;
  list-style: outside none none;
  margin-left: 13px;
  text-indent: -9999px;
  width: 46px;
}

.topsocial li a {
  display: block;
  height: 46px;
  width: 46px;
}

.topsocial li.fb {
  background: rgba(0, 0, 0, 0) url("images/facebook-icon.png") no-repeat scroll 0 0 / cover ;
}

.topsocial li.yt {
  background: rgba(0, 0, 0, 0) url("images/youtube-icon.png") no-repeat scroll 0 0 / cover ;
}

nav.topnav ul li#menu-item-29,
nav.topnav ul li.ytnav {
	float:right;
	width:64px;
	text-indent: -9999px;
}

nav.topnav ul li#menu-item-29 {
	background:url(images/facebook-icon.png) no-repeat 0 0 #004988;
}

nav.topnav ul li.ytnav {
	background:url(images/youtube-icon.png) no-repeat 0 0 #E01800;
}

nav.topnav ul li.fbnav a:hover{
	background:url(images/facebook-icon.png) no-repeat 0 0 #004988;
}

nav.topnav ul li.ytnav a:hover {
	background:url(images/youtube-icon.png) no-repeat 0 0 #E01800;
}

nav.topnav ul ul { /* this targets all sub menus */
	display: none; /* hide all sub menus from view */
	position: absolute;
	top: 64px; /* this should be the same height as the top level menu -- height + padding + borders */
	left:0px;
	z-index:1000;
	background: #fff;
	height:auto;
	width:240px;
	overflow:hidden;
	-webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
	background: #fff;
}

nav.topnav ul ul li { /* this targets all submenu items */
	float: none; /* overwriting our float up above */
	line-height:3em;
	margin:0;
	background:#fff;
	border-bottom:1px solid #D4D5D7;
	text-align:center;
}

nav.topnav ul li ul li a {
	color:#666;
}

nav.topnav ul ul li:last-child { 
	border-bottom:0 none;
}

nav.topnav ul ul li a { /* target all sub menu item links */ 
	display:block; 
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	font-size:16px;
	margin:0;
	padding:0;
}

nav.topnav  ul.sub-menu li a {
	color:#000;
	border:0 none;
}
  
  
nav.topnav ul ul li.current-menu-item a,
nav.topnav ul ul li a:hover {
	color:#eb2414;
	border:0 none;
}

nav ul li:hover > ul {
	display: inline; /* show sub menus when hovering over a parent */
}

nav.topnav ul li ul li {
  text-align: left;
  float:none;
  padding: 0 0 0 20px;
}

nav.topnav ul li ul li a{
	font-size:14px;
}

.wrap.hero {
	background:#333;
	box-shadow: inset 0px 0px 35px rgba(0,0,0,0.8);
	padding:2.3%;
	box-sizing: border-box;
}

.grid {
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 588px;
  height: 214px;
  float: left;
  border: 4px solid #333;
  border-color: none;
  border-radius: 0px;
  	box-sizing: border-box;
	position:relative;
	overflow:hidden;
}

.grid-item--width2 { 
width: 590px; 
height:428px
}

.grid-item--width3 { 
width: 294px; 
}

.grid-item--height3 { 
height: 597px; 
}

.grid1 {
	background:#528ac5 url("images/lighthouse-walk.jpg") no-repeat scroll 0 0 / cover ;
	height:428px;
}

.grid2 {
	background:url(images/sanddunes.jpg) no-repeat 0 0 #528AC5;
}

.grid3 {
	background:url(images/bus-sand.jpg) no-repeat 0 0 #528AC5;
}

.grid4 {
	background:url(images/face.jpg) no-repeat 0 0 #528AC5;
}


.rollover-text {
	background:rgba(0,0,0,0.6);
	position:absolute;
	bottom:-478px;
	left:0px;
	z-index:5;
	width:100%;
	height:100%;
	transition:all 0.3s ease-in-out 0s;
	padding:5%;
	box-sizing: border-box;
}

.grid-item:hover > .rollover-text{
	opacity:1;
	bottom:0;
}

.grid-item h2 {
  bottom: 5%;
  color: #ffffff;
  font-size: 50px;
  font-weight: 800;
  left: 5%;
  line-height: 1.3;
  opacity: 1;
  position: absolute;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  width: 75%;
  	transition:all 0.5s ease-in-out 0s;
}

.grid2.grid-item h2 {
  font-size: 40px;
}

.grid3.grid-item h2,
.grid4.grid-item h2 {
  font-size: 30px;
}


.grid-item:hover > h2{
	opacity:0;
	transition:all 0.5s ease-in-out 0s;
}

.grid-item p {
	color:#fff;
	margin: 0 0 14px;
	font-size:14px;
}

.grid3.grid-item p,
.grid4.grid-item p {
	font-size:11px;
}

.grid-item p.button2 { 
	margin-top:20px;
}


.wrap.main{
	background:#fff;
	box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1);
	border-top: 1px solid #ffffff;
}

.home .wrap.main {
  border-top: 0 none;
}

main p a,
.gform_wrapper a {
	color:#d90000;
	text-decoration:none;
}

main h1,
main h2,
main h3 {
	margin-bottom:0.4em;
}

main ul {
  list-style: outside disc;
}

main li {
  margin-bottom: 10px;
}


section.area1 {
	padding:0 0 48px 0;
}

section.area2 {
	padding:45px 0;
}

section.grey {
	background:#F9F9F9;
	border-top:1px solid #DDDDDD;
	border-bottom:1px solid #DDDDDD;
	padding:55px 33px;
}


/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.53%;
}
.span_10_of_12 {
  	width: 83.06%;
}

.span_9_of_12 {
  	width: 74.6%;
}

.span_9_of_12.padright {
  padding-right: 6%;
  width: 68.6%;
}

.span_8_of_12 {
  	width: 66.13%;
}

.span_7_of_12 {
  	width: 57.66%;
}

.span_6_of_12 {
  	width: 49.2%;
}

.span_5_of_12 {
  	width: 40.73%;
}

.span_4_of_12 {
  	width: 32.26%;
}

.span_3_of_12 {
  	width: 23.8%;
	position: relative;
}

.span_2_of_12 {
  	width: 15.33%;
}

.span_1_of_12 {
  	width: 6.866%;
}

.col p,
.col h3 {
	margin-bottom: 24px;
}

.col.span_4_of_12 > a {
  position: relative;
  z-index: 9999;
}

.col.span_6_of_12 > p {

}

.col.span_6_of_12.copyright {
  font-size: 14px;
  padding-top: 42px;
}

.vanity p,
.vanity p a { 
	font-size: 12px;
	color:#999999; 
	text-decoration:none;
}

.vanity p { 
	background:url(images/hugo.png) no-repeat center right;
	line-height:34px;
	padding:30px 63px 30px 0;
}


aside.sidebar {
  float: left;
  max-width: 29%;
  min-width: 270px;
  width: 100%;
}


footer#mainfooter {
	background:url(images/footer_bg.jpg) no-repeat center bottom #333333;
	 padding: 30px;
	 color:#fff;
}

.footerheader {
  padding-bottom: 104px;
}

footer nav ul {
	margin:0;
	padding:0px;
}

footer nav li{
	position:relative;
}

footer nav a {
	color:#fff;
	text-decoration:none;
	padding:0px;
	font-weight:600;
	font-size:14px; 
	font-size:14px;
	text-transform:uppercase;
	display: block;
}

footer nav li ul li{
	float:none;
	font-size:12px;
	text-transform:capitalize;
	display: block;
}

footer nav li ul li a{
	float:none;
	font-size:12px;
	text-transform:capitalize;
}

footer nav ul li  a:hover,
footer nav li.current-page-ancestor a,
footer nav li.current_page_item a {
	color:#fff;
	text-decoration:none;
	transition: all 0.5s ease 0s;
	background:none;
}

.topsocial.bottom {
  right: 0;
  top: 65px;
}

.topsocial.bottom li {
	text-indent: 9999px;
}

.sidebar .textwidget,
.sidebar .quote_rotator_widget_wrapper {
  background: #EEEEEE;
  padding:23px 44px 23px 23px;
}

.sidebar aside#black-studio-tinymce-4 .textwidget {
  background: #fff;
  padding:40px 0px 16px;
}

.sidebar aside#black-studio-tinymce-5 .textwidget {
  background: #fff;
  padding:0 0 23px 0;
  overflow:auto;
}

h2.widget-title {
	color: #ffffff;
    font-size: 18px;
    line-height: 70px;
	margin: 0;
	background: #004B89;
    font-weight: 400;
	padding: 0 0 0 23px;
}

.gallery-item {
  float: left;
  max-width: 50%;
  max-height: 216px;
}


.col.notopmarg {
	margin-top:0;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


.breadcrumbs,
	main {
	padding:0 33px;
}

.breadcrumbs {
	background:#0086C2;
	font-weight:700;
}

.home .breadcrumbs {
	margin-bottom:40px;
}

.breadcrumbs a {
	font-weight:400;
	text-decoration:none;
}
	
	
.woocommerce .breadcrumbs a,
.woocommerce .breadcrumbs,
.breadcrumbs,
.breadcrumbs a  {
	line-height:70px;
	font-size:14px;
	color:#fff;
}


p.tripadvisor {
  background: rgba(0, 0, 0, 0) url("images/tripadvisor-icon.png") no-repeat scroll left center;
  line-height: 54px;
  margin: 40px 0;
  padding-left: 85px;
}

.sidebar .textwidget a {
	color:#0085C1;
	text-decoration:none;
}

p.tripadvisor a {
	color:#0085C1;
}

.col.sidebar {
  margin: 0;
  width: 33.86%;
}

.site-description {
  display: none;
}

p.footerphone {
	color:#fff;
	font-size:30px;
}

p.footerphone .bolder{
	font-weight:800;
	color:#0085C1;
}

.faq-body {
	
}

.faq-body h2 a {
	color:#0086c3;
}

.faq-body h2 {
	color: #0086c3;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
	margin: 0 0 20px;
	padding: 0 0 15px 20px;
}

li.termsfield .gfield_required {
  display: none;
}

.gfield_description {
  color: #ff0000;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */



/*********************** START RESPONSIVE *****************/
/*********************** START RESPONSIVE *****************/
/*********************** START RESPONSIVE *****************/
/*********************** START RESPONSIVE *****************/

/* for 1279px or less */
@media screen and (max-width: 1279px) {
	
	.wrap.headpad {
	padding-bottom: 15px;
	}
	
	.searcharea {
	bottom: 43px;
	}
	
	.headerphone {
	position: absolute;
	right: 0;
	top: 60px;
	}
	
	.wrap {
		max-width: 94%;
	}
	
	x.wrap.main {
	background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
	padding: 20px;
	}

	
	section.content {
	  float: none;
	  margin-right: 0%;
	  max-width:100%;
	}
	
	aside.sidebar {
	clear: left;
	margin: 30px 0 0;
	float: none;
	max-width: 100%;
	}
	
	.col .grid {
	  margin: 20px auto 0;
	  width: 100% !important;
	}
	
	.grid-item.welcome h1 {
	font-size:30px;
	}
	
	.grid-item {
	width:100%;
	background-size: cover !important;
	height: 245px;
	}
	
	.grid2.grid-item p,
	.grid3.grid-item p,
	.grid4.grid-item p	{
	font-size: 14px!important;
	}
	
	.grid-item--width2 {
	width: 100% !important;
	}
	
	.grid-item h2 {
	font-size: 30px !important;
	}
	
	.grid-item.grid2 p {
	font-size: 12px;
	}

}

/* for 1040px or less */
@media screen and (max-width: 1040px) {

	nav.topnav {
	display:none;
	}

	.searcharea{
	display:none;	
	}

	footer#mainfooter nav,
	.topsocial.bottom{
	display:none;
	}
	
	.col.vanity {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	margin: 0;
	padding: 0;
	}
		
		
}


/* for 880px or less */
@media screen and (max-width: 880px) {

	header.topheader h1 {
	margin: 16px auto 10px;
	}
	
	.headerphone {
	  position: initial;
	  right: 0;
	  text-align: center;
	}
	
	.phonetoday {
	display:none;
	}
	
	.col.span_6_of_12 > p {
	padding: 0;
	}
	
	.col {  margin: 1% 0 1% 0%; }
    
    .col.sidebar, .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12, .span_9_of_12.padright {
	width: 100%;
	padding-right:0;
	}
	
	footer#mainfooter {
	  background: #333333 none repeat scroll 0 0;
	}

	.footerheader {
	  text-align: center;
	}

	.footerheader img {
	  margin: 0 auto;
	}
	footer#mainfooter .col.span_9_of_12,
	footer#mainfooter .span_3_of_12	{
	width: 100%;
	text-align: center;
	}
	
	.footerheader {
	padding-bottom: 0;
	}
	
		
	.alignright,
	.copyright	{
	text-align: center;
	}
		
	.vanity p {
	  background: rgba(0, 0, 0, 0) url("images/hugo.png") no-repeat scroll center top;
	  line-height: 34px;
	  margin: 20px;
	  padding: 35px 0;
	}
	
}


/* for 580px or less */
@media screen and (max-width: 580px) {


	footer#mainfooter .col.span_9_of_12,
	footer#mainfooter .span_3_of_12	{
	width: 100%;
	float:none;
	}

	
	body {
	background:#fff;
	}
	
	header.topheader {
		height:auto;
	}


	.topsocial {
    display:none;
	}
	
	.breadcrumbs {
		display:none;
	}
	
	main {
	padding: 0;
	}
	
	header.topheader h1{
		background:url(images/dunrider-logo-small.png) no-repeat 0 0 transparent;
		width:214px;
		height:84px;
	}

	header.topheader h1 a{
		width:214px;
		height:84px;
	}
	

}