/* //////////////////////////////// CUSTOM LIGHTBOX WITH AJAX //////////////////////////////// */

/* JS FUNCTION FOR REFERENCE */

/* 

function lightbox(page) {
    $('.ajax-lightbox').delay(500).fadeToggle();
    $('.ajax-lightbox-container').load('./inline/' + page);
}

$('.ajax-lightbox').on('click', 'a', function() {
  $('.ajax-lightbox').hide();
}); 

*/

/* LIGHTBOX AJAX CONTAINER */
/* 

<div class="ajax-lightbox">
	<div class="ajax-lightbox-container"></div>
	<a href="#" class="close-btn"></a>
</div> 

*/

/* Typography  */

@font-face {
    font-family: "Circular-Pro-Black";
    src:url("../fonts/lineto-circular-pro-black.eot");
    src:url("../fonts/lineto-circular-pro-black.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-black.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-black.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Circular-Pro-Book";
    src:url("../fonts/lineto-circular-pro-book.eot");
    src:url("../fonts/lineto-circular-pro-book.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-book.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body { 
	font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif !important;
	font-style: normal;
	font-weight: 400;
}

/* AJAX Lightbox */

.ajax-lightbox-overlay { width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 99999; display: none; }

.ajax-lightbox { 
	position: absolute;
	z-index: 1000;
	width: 350px; height: auto; 
	top: 50%;
	left: 50%; 
	margin: -125px 0 0 -175px;
	background: #333; 
	padding: 0px;
}

.ajax-lightbox-container { display: block; padding: 0px; }

.ajax-lightbox .close-btn { 
	width: 40px; height: 40px; 
	top: 10px; right: 10px;
	padding: 0px;
	display: block; position: absolute;
	background: url(../img/close.png) no-repeat center; background-size: 30px; 
}


a.link { 
	display: inline-block; clear: both; padding: 10px 20px; margin: 15px 10px 0 0; text-decoration: none; background: #FFCC00; color: #333; border-radius: 100px; 
	font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif !important;
}
a.link:hover { background: #FFBB00; }

.ajax-lightbox table { table-layout: fixed; width: 100%; margin-top: 15px; border: 1px solid #EEE;}
.ajax-lightbox table td { padding: 5px; }
.ajax-lightbox table td p { font-size: 12px; line-height: 14px; display: block; text-transform: uppercase; color: #666; }
.ajax-lightbox table td a { font-size: 12px; line-height: 14px; display: block; text-transform: uppercase; color: #FFCC00; }
.ajax-lightbox table th { font-size: 12px; line-height: 14px; text-transform: uppercase; color: #333; padding: 5px; }
.ajax-lightbox table td a:hover { text-decoration: none; color: #FFCC00; }
.ajax-lightbox table tr:nth-child(even) { background-color: #eee; }


/* Popup Inline Content */

.popup { width: 100%; height: 100%; min-height: 100px; padding: 0px; overflow: hidden; float: left; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; }
.popup.portrait img { width: 50%; margin: 0 auto; float: none; }

/* Popups - Non Flexbox */

.popup-content { display: block; }
.popup-content .content { display: block; }
.popup-content .content.text { display: block; background: #333; bottom: 0; left: 0; width: 100%; clear: both; }
.popup-content .content.text p { display: none; }

.popup-content .content.image img { width: 100%; height: 100%; display: block; }

.popup-content .content-inner { padding: 12px; }

.popup-content h5 { font-size: 14px; line-height: 18px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0; font-weight: 400; }
.popup-content p { color: #CCC; font-size: 12px; line-height: 14px; margin: 0; padding: 0; display: none; }

/* .popup-content { 
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
}
.popup-content .content { flex: 1;  }
.popup-content .content:nth-child(1) { flex: 1; background-color: #333; }
.popup-content .content:nth-child(2) { flex: 2; }
.popup-content .content:nth-child(1) { -webkit-order: 2; -ms-flex-order: 2; order: 2; }
.popup-content .content:nth-child(2) { -webkit-order: 1; -ms-flex-order: 1; order: 1; }  */

/* Vidoe Container */
.embed-container { position: relative; padding-bottom: 56.5%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* Social Sharing Version */

.share-box { 
	position: absolute; z-index: 99999; 
	width: 100%; height: 100%; 
	display: none; 
	top: 0px; 
	margin: 0; 
	background: #FFF; 
	padding: 0px;
}

.share-box-container { display: block; padding: 20px; }

.share-box h5 { margin: 0 30px 20px 0; font-size: 25px; line-height: 30px; }
.share-box p { margin: 0 0 0 0; }

.share-box .close-btn { 
	width: 40px; height: 40px; 
	top: 15px; right: 15px;
	padding: 0px;
	display: block; position: absolute;
	background: url(../img/close.png) no-repeat center; background-size: 30px; 
}



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


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

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


}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */  

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


}

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

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


	.ajax-lightbox { width: 500px; height: auto; margin: -210px 0 0 -250px; padding: 0px; top: 50%; left: 50%; }

	.ajax-lightbox .close-btn { 
		width: 40px; height: 40px; 
		top: -20px; right: -20px;
		padding: 0px;
		display: block; position: absolute;
		background: url(../img/close.png) no-repeat center; background-size: 40px; 
	}

	.share-box { width: 400px; height: auto; margin: -100px 0 0 -200px; top: 50%; left: 50%; }

	.share-box .close-btn { 
		width: 40px; height: 40px; 
		top: -20px; right: -20px;
		padding: 0px;
		display: block; position: absolute;
		background: url(../img/close.png) no-repeat center; background-size: 40px; 
	}


}

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

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

	.ajax-lightbox { width: 700px; height: auto; margin: -200px 0 0 -350px; }

	.share-box { width: 500px; margin: -100px 0 0 -300px; top: 50%; left: 50%; }

	/* Popups - Flexbox */

	.popup-content { 
		display: -webkit-flex;
  		display: -ms-flexbox;
  		display: flex;
  		overflow: hidden;
  	}
	.popup-content .content { flex: 1;  }
	.popup-content .content:nth-child(1) { flex: 2; background-color: #333; }
	.popup-content .content:nth-child(2) { flex: 1; }
	.popup-content .content:nth-child(1) { -webkit-order: 2; -ms-flex-order: 2; order: 2; }
	.popup-content .content:nth-child(2) { -webkit-order: 1; -ms-flex-order: 1; order: 1; } 

	.popup-content .content-inner { padding: 15px; }

	.popup-content .content.text { display: block; position: relative; bottom: auto; left: auto;}

	.popup-content .content.text h5 { font-size: 18px; line-height: 25px; color: #FFF; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; }
	.popup-content .content.text p { color: #CCC; font-size: 14px; line-height: 18px; margin: 0 0 10px 0; padding: 0; display: block; }



}

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

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

	.ajax-lightbox { width: 800px; height: auto; margin: -200px 0 0 -400px; }



}

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

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



}

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

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


}

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

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


}