/* 
	Theme Name: Yachtmans Rest Theme
	Theme URI: 
	Author: 3deep
	Author URI:  http://3deepmedia.com
	Description:  Yachtmans custom theme by 3deep Media
	Version: 0.1 Alpha
	Tags: yachtmans, 3deep, responsive, featured-images, custom-menu, custom-header, post-formats
*/




/* //////////////////////////////// CUSTOM STYLES //////////////////////////////// */ 

/* General */



hr { height: 1px; margin: 10px 0; padding: 0; border: 0; border-top: 1px solid #CCC; width: 90%; }

/* Call to Action Buttons */

.button { 
	padding: 15px 20px; margin: 10px 0; display: block; text-align: center; text-decoration: none !important; 
	background-color: #666; color: #FFF !important; 
	font-size: 1em; text-transform: uppercase; font-weight: 400; 
	border: none; border-radius: 0; -webkit-border-radius: 0;
	-webkit-transition: all .3s ease-in; transition: all .3s ease-in; 
}
.button:hover { background-color: #336699; color: #FFF; text-decoration: none; }

.button.thin { max-width: 250px; float: left; } 

.button.simple { background: #EEE; color: #666 !important; font-weight: 400; border: 1px solid #CCC; }
.button.simple:hover { background: #CCC; }

/* Banner Titles */

.full-width.banner-title { width: 100%; position: absolute; z-index: 1000; background: transparent; margin-top: -80px; }
.full-width.banner-title section { background: transparent; }
.full-width.banner-title section h1 { color: #FFF !important; padding: 5px 20px; margin: 0; border-left: 4px solid #4891A9; font-weight: 200; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.58); }
.full-width.banner-title section h1 a { text-decoration: none; color: #FFF !important; }

.vc_pagination { margin-bottom: 0 !important; }

/* Vimeography Overides */

.vimeography-thumbnails { padding: 0; }

.vimeography-bugsauce .vimeography-thumbnails .vimeography-slides li {
    width: 186px;
    height: 108px;
    margin: 0 8px 0 0;
    position: static;
    display: block !important;
    float: left !important;
}

/* Grid Builder Boxes */



.box-image { position: relative; z-index: 1; }
vc_gitem-animated-block { margin-bottom: -10px !important; }

.box-title { color: #FFF; display: block; padding: 0; top: 0; margin: 0; margin-bottom: 0 !important;}
.box-title h4 { padding: 0; margin: 0; display: block; font-weight: 400; }
.box-title h4 a { padding: 20px; display: block; background: url(img/ui/pattern.png); background-color: #333; color: #FFF !important; opacity: 1 !important; -webkit-opacity: 1 !important;  }
.box-title h4 a:hover { background: rgba(0,0,0,0.8); color: #4BC2F1 !important; opacity: 1; }

div.box-content { padding: 0 !important; margin: 0 !important; }

.vc_grid-item:hover .box-title h4 a { background: #000 !important; color: #4BC2F1 !important; opacity: 1 !important; }

.box-content p { padding: 20px; }



/*.content-wrap .vc_section.white .vc_row .vc_column_container .vc_column-inner { padding-top: 40px !important; } */

div.wpb_text_column.wpb_content_element.stats { display: block; overflow: hidden; background: #f6f6f6; margin-bottom: 20px !important; }

.stats ul { list-style: none; padding: 0; margin: 0; }
.stats ul li { list-style: none; padding: 10px 0 10px 50px; margin: 0; border-bottom: 5px solid #FFF; }

.stats ul li:nth-child(1)  { background: url(img/icons/icon-location.svg) no-repeat left 10px center; background-size: 30px; }
.stats ul li:nth-child(2) { background: url(img/icons/icon-calendar.svg) no-repeat left 10px center; background-size: 30px; }
.stats ul li:nth-child(3) { background: url(img/icons/icon-tag2.png) no-repeat left 10px center; background-size: 25px; }

div.wpb_text_column.wpb_content_element.map { 
	display: block; overflow: hidden; background: #f6f6f6; margin-bottom: 20px !important; 
	width: 100%; height: 300px;
}

/* Tabs */

.vc_tta-tab > a { border: 0 !important; }

.vc_tta-tab.vc_active a { 
	background: #FFF !important; 
	color: #4BC2F1 !important;
	border: 0 !important; 
	border-top: 2px solid #4BC2F1 !important;
	border-bottom: 1px solid #FFF !important;
}
.vc_tta-tab.vc_active > a::after { border: 0 !important; }
.vc_tta-tab.vc_active > a::before { border: 0 !important; }

.vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels .vc_tta-panel-body { background: #FFF !important; }

/* Video Play Button */

.video-bkg { min-height: 300px; }

.play { 
	margin: 50px 0 0 -100px; width: 200px; height: 70px; position: absolute; z-index: 1000; display: block; left: 50%; top: 50%;
	background: url(img/icons/icon-play.png) no-repeat center center; background-size: 70px; 
}

.play span { color: #FFF; font-weight: 400; font-size: 20px; position: absolute; bottom: -40px; margin: 0 auto; width: 100%; text-align: center; }

.fancybox-slide--iframe .fancybox-content {
	/* width  : 1000px;
	height : 600px; */
	max-width  : 70%;
	max-height : 70%;
	margin: 0;
}

/* Boxes */

a.box { margin: 0 0 30px 28%; width: 45%; position: relative; text-decoration: none; text-align: center; overflow: hidden; display: inline-block; border-radius: 1000px; -webkit-border-radius:  1000px; }
a.box h4 { 
	width: 100%; font-size: 12px; 
	position: absolute; display: block; width: 100%; text-align: center; 
	font-weight: normal; color: #FFF; top: auto; margin: 0; padding: 10% 0; margin: 35% 0 15px 0;
	background-color: rgba(0,0,0,0.6); letter-spacing: 0.2em; 
	-webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; 
	font-family: 'Biryani', helvetica, arial, serif; font-weight: 400; 
}
a.box img { width: 100%; height: auto; display: block; margin: 0;}
a.box p { color: #666; line-height: 20px; margin: 20px 0 0 0;  }
a.box:hover { cursor: pointer;}
a.box:hover h4, a.box:focus h4, a.box.active h4 { background: rgba(109,138,145,0.7); letter-spacing: 0.4em; }
a.box:hover p { color: #000; }

a.box:hover h4, a.box:focus h4 { margin: 0; padding: 48% 0; }

/* Contact Box */

.contact-box { padding: 30px; background: #EEE; }


/* Tables */
table { width: 100%; border: 1px solid #CCC; border-collapse:collapse; clear: both; font-size: 14px; color: #666; text-align: left; background-color: #FFF; }
table th { padding: 10px; border: 1px solid #666; font-weight: bold; text-align: left; font-size: 12px; background: #666; color: #FFF; }
table td { padding: 10px; border: 1px solid #CCC; font-size: 12px; vertical-align: middle; line-height: 14px; }
table td a { color: #FF6600; }
table td a:hover { color: #29ABE2; }

table.order td { width: 50%; }
table.order3 td { width: 15%; }

table.blank th { border: none; padding: 10px; margin: 0; font-weight: normal; }
table.blank td { border: none; padding: 10px; margin: 0;  }
table.blank input, table.blank select { margin: 0 0 10px 0; width: auto !important; }

table td span { width: 15px; height: 15px; display: block; float: right; border-radius: 50%; -webkit-border-radius: 50%; right: 10px; top: 5px; }
table td span.not-set { width: auto; float: none; }


/* Contact Box */
.contact-box { overflow: hidden; margin: 0 0 20px 0; }
.contact-box h3 { font-size: 18px; color: #666; display: block; margin: 0 0 20px 0; font-weight: normal; line-height: 30px; letter-spacing: 0.3em; }
.contact-box p { color: #666; font-size: 14px; line-height: 20px; 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; }


.banner-logo { width: 300px; height: 100px; position: absolute; z-index: 1000; top: 50%; left: 50%; margin: -50px 0 0 -150px; background: url(img/logo-yachtsmans-rest-box.svg) no-repeat center; background-size: 100%; }
.banner-logo.v2 { background: url(img/halzephron-white.png) no-repeat center; background-size: 70%; }

.banner-arrow { width: 40px; height: 40px; margin: 0 0 0 -20px; position: absolute; z-index: 1000; bottom: 10%; left: 50%;  background: url(img/icons/icon-arrow-down.png) no-repeat center; background-size: 100%; opacity: 0.3; -webkit-opacity: 0.3; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.banner-arrow:hover, .banner-arrow:focus { opacity: 0.8; -webkit-opacity: 0.8;} 

/* Pedals Grid */

.pedals-grid h4 { background-color: #000; padding: 10px 20px; color: #FFF !important; text-transform: uppercase; text-align: center; }

/* Map Element - Remove Margin */

#wrap_map_5ca48cf91c9fa { margin: 0 !important; }

/* REvslider Fix for black slide on second rotation */

.slotholder {
   filter:none !important;
}


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




@media screen and (orientation: landscape) and (max-width: 768px) {

	/* Boxes  */

	a.box { width: 100%; }
	a.box h4 { font-size: 12px; line-height: 14px; }
	a.box:hover { letter-spacing: 0.2em; }

}

@media screen and (orientation: portrait) {

}



/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

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

	.banner-logo { width: 400px; height: 200px; margin: -100px 0 0 -200px; }

	.banner-arrow { width: 60px; height: 60px; margin: 0 0 0 -30px; }
	
}


/* //////////////////////////////// big ipad version //////////////////////////////// */

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

	/* Video Section */

	.video-bkg { min-height: 400px; }
	.play { margin: 90px 0 0 -100px; width: 200px; height: 120px; background-size: 100px; }

	/* Boxes  */

	a.box { width: 100%; margin: 0; }
	a.box h4 { font-size: 12px; line-height: 14px; }
	a.box:hover { letter-spacing: 0.2em; }

	.banner-logo { width: 500px; height: 200px; margin: -100px 0 0 -250px; }
	.banner-arrow { width: 80px; height: 80px; margin: 0 0 0 -40px; }

}

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

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

	/* Video Section */

	.video-bkg { min-height: 450px; }
	.play { margin-top: 100px; }

	/*  Boxes  */

	a.box { margin-bottom: 35px; }
	a.box h4 { font-size: 16px; line-height: 22px; }
	a.box:hover h4 { letter-spacing: 0.2em; }

	.banner-logo { width: 600px; height: 300px; margin: -150px 0 0 -300px; }

}

/* //////////////////////////////// very wide version //////////////////////////////// */ 

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

	.video-bkg { min-height: 500px; }

	.play { margin-top: 130px; }

	.banner-logo { width: 700px; height: 350px; margin: -175px 0 0 -350px; }


}

/* //////////////////////////////// extra wide version //////////////////////////////// */ 

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

	.banner-logo { width: 1000px; height: 500px; margin: -250px 0 0 -500px; }

}

/* //////////////////////////////// extra extra wide version //////////////////////////////// */ 

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




}