@charset "utf-8";
/* CSS Document for Go-Jamaica Serices Page */
@font-face { 
font-family: new-font; 
src: url('');
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}

div {

}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

input {
	outline: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Adobe Caslon Pro"; font-weight: normal; 
}

h1 {font-size: 38px;}
h2 {font-size: 24px;}

hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

 hr.white {
  width: 80%;
  border: 0; 
  height: 1px;
  background-image: -webkit-linear-gradient(left, #3bb173, #ffffff, #3bb173);
  background-image: -moz-linear-gradient(left, #3bb173, #ffffff, #3bb173);
  background-image: -ms-linear-gradient(left, #3bb173, #ffffff, #3bb173);
  background-image: -o-linear-gradient(left, #3bb173, #ffffff, #3bb173); 
}

p {
	line-height: 1.5;
}

div.row {
	width: 100%;
	max-width: 1440px;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 0 150px;
	margin: 20px auto;
}

.clear {clear: both;}
ol {margin: 0; width: 100%; padding: 0;}
ol li {margin: 5px; padding: 2px; line-height: 1.3;}

.full {
	max-width: 100% !important;
	padding: 0 !important;
}

.col-2 {
    width: 50%;
    height: auto;
    float: left;
    padding: 0 2%;
    overflow: hidden;
}

.col-3 {
    width: 33.3%;
    height: auto;
    float: left;
    padding: 0 2%;
    overflow: hidden;
}

.col-4 {
    width: 25%;
    height: auto;
    float: left;
    padding: 0 2%;
    overflow: hidden;
}

.first {
    padding-left: 0 !important;
}

.last {
    padding-right: 0 !important;
}

a.btn {display: block; padding: 8px 10px; float: right; border:2px solid #000; color: #000; margin:0 10px; }
a.watch {display: block; margin:-120px auto 0 auto; padding: 12px 14px; width: 130px; position: absolute; float: none; left: 48%; text-align: center; background: #FFFF00; color: #000; font-weight: bold;}
a.watch2 {display: block; margin:-170px auto 0 auto; padding: 12px 14px; width: 130px; position: absolute; float: none; left: 48%; text-align: center; background: #FFFF00; color: #000; font-weight: bold;}

div.left {
	float: left;
}

div.right {
	float: right;
}


div.wrapper {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	border: px solid #000;
}

div.ad img {
    display: block;
    text-align: center;
    margin: 0 auto;
}

div.topbar {
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	overflow: hidden;
}
div.topbar div.row {width: 80%; margin: 20 auto;}
div.topbar div.left {width: 20%; max-width: 182px;}
div.topbar div.right {width: 80%; margin-top: 30px;}
div.topbar div.box.right, div.topbar div.box.left {width: 50% !important; max-width: 50% !important; margin:0;}
div.topbar div.right a.btn {display: block; margin: 20px auto 0 auto; float: none; width: 100px; text-align: center;}
div.topbar h1 {font-size: 33px;}

div.topbar div#countdown { width: 100%; height: auto; margin: 0 auto; display: block;}

div.topbar div#countdown h1 {margin: 0;}

div.banner img {width: 100%;}

div.titlebar h1 {margin:0; text-align: center;}

div.menu {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: relative;
}

div.menu ul {padding:0; margin:20px auto; width: 80%; text-align: center;}
div.menu ul li {display: inline-block; margin: 5px 5px; text-align: center;}
div.menu ul li ::after {content: "  |"; margin-left: 5px;}
div.menu ul li:last-child ::after {content: "  ";}
div.menu ul li a {color: #000; font-size: 20px;}

#countdown{
	font-family: sans-serif;
	color: #000;
	display: inline-block;
	font-weight: 100;
	text-align: center;
}

#countdown > div{
	padding: 10px;
	border-radius: 3px;
	/*background: #00BF96;*/
	background: #f1f1f1;
	display: inline-block;
}

#countdown div > span{
	color: #fff;
	padding: 10px;
	border-radius: 3px;
	background: #000;
	font-size: 35px;
	letter-spacing: 4px;
	font-weight: bold;
	/*background: #00816A;*/
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}

div.titlebar {
	width: 100%;
	height: auto;
	float: left;
	color: #fff;
	overflow: hidden;
	background: #3bb173;
}

div.section1 {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: relative;
}
div.section1 p.quote {font-size: 35px; font-family: "century";line-height: 1.3; padding:0 5%;}
div.section1 p.quote {text-align: center; margin-bottom: 0;}
div.section1 p.quote span {font-size: 50px;}
div.section1 p.auth {text-align: right; margin-top: 0; margin-right: 60px; font-size: 35px; font-weight: normal; font-family: "century";line-height: 1.2;}
div.section1 div.legends {width: 100%; height: auto; overflow: hidden; float: left;}
div.section1 div.left {width: 50%; margin: 20px 0 50px 0;}
div.section1 div.left img {text-align: center; margin: 0 auto; display: block;}
div.section1 div.right {width: 50%; margin: 20px 0 50px 0;}
div.section1 span.left {
   
}
div.section1 div.right h1 {line-height: 1.2;}
div.section1 div.row img.placeholder {display: block; text-align: center; margin: 0 auto;}

div.section1 span.right {
    top: 10px;
    position: relative;
    left: 6px;
}
div.section1 span.right p {text-align: justify;}

div.section1 p.caption {color: #a3a2a3; text-align: center; font-size: 14px; padding: 0 35px;}

div.main {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: relative;
}

div.main div.row {padding:0 250px !important;}
p.title {text-align: center; font-size: 18px; margin-bottom: 40px;}
div.main div.col-3 {margin: 20px 0;}

div.section2 {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3bb173+0,077f40+100 */
	background: rgb(59,177,115); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgba(59,177,115,1) 0%, rgba(7,127,64,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(59,177,115,1) 0%,rgba(7,127,64,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgba(59,177,115,1) 0%,rgba(7,127,64,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb173', endColorstr='#077f40',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div.section2 h1 {text-align: center; color: #fff;}

div.section2 hr{
  width: 80%;
  border: 0; 
  height: 1px;
  background-image: -webkit-linear-gradient(left, #077f40, #ffffff, #077f40);
  background-image: -moz-linear-gradient(left, #077f40, #ffffff, #077f40);
  background-image: -ms-linear-gradient(left, #077f40, #ffffff, #077f40);
  background-image: -o-linear-gradient(left, #077f40, #ffffff, #077f40); 
}

div.section2 div.col-4 {margin-top: 60px; color: #fff; position: relative;}
div.section2 div.col-4 h2 {margin: 3px 0; color: #fff; line-height: 1.2; text-align: center; height: 45px; letter-spacing:2px; word-spacing:2px;}
div.section2 div.col-4 p { line-height: 1.2; height: 110px;}
div.section2 div.col-4 a.btn {border: 2px solid #fff; color: #fff; float: none; margin: 0 auto; width: 80%; text-align: center; bottom: 0px;}

div.section3 {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: relative;
}

div.section3 h1 {text-align: center;}
div.section3 hr {
  width: 80%;
  border: 0; 
  height: 1px;
  background-image: -webkit-linear-gradient(left, #ffffff, #000000, #ffffff);
  background-image: -moz-linear-gradient(left, #ffffff, #000000, #ffffff);
  background-image: -ms-linear-gradient(left, #ffffff, #000000, #ffffff);
  background-image: -o-linear-gradient(left, #ffffff, #000000, #ffffff); 
}
div.section3 h2 {
	text-align: center;
    background: #fff;
    margin-top: -27px !important;
    /* width: 100%; */
    max-width: 230px;
    margin: 0 auto;
    display: block;
}
div.section3 ul {margin: 10px auto; width: 80%; text-align: center; padding: 0;}
div.section3 ul li {display: inline-block; text-align: center;}
div.section3 ul li a {width: 70px; height: 69px; font-size: 0; display: block; text-align: center;}
div.section3 ul li a.fb {background: url('../images/fb.png') no-repeat top center;}
div.section3 ul li a.tw {background: url('../images/tw.png') no-repeat top center;}
div.section3 ul li a.ig {background: url('../images/ig.png') no-repeat top center;}
div.section3 ul li a.yt {background: url('../images/yt.png') no-repeat top center;}

div.footer {
	width: 100%;
	height: auto;
	float: left;
	color: #fff;
	position: relative;
	overflow: hidden;
	background: #30a668;
}

div.footer ul {padding: 0px; margin: 20px auto; width: 80%; text-align: center;}
div.footer ul li {display: inline-block; margin: 2px 5px; text-align: center;}
div.footer ul li ::after {content: "  |"; margin-left: 5px;}
div.footer ul li:last-child ::after {content: " ";}
div.footer ul li a {color: #fff;}

div.white-popup-block {
    background: #fff;
    padding: 20px 30px;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 70%; margin: 0 auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.mobile {
		display: none !important;
	}


/*media queries*/

/*DESKTOPS*/
@media screen and (min-width: 1024px), screen and (min-device-width: 1024px) {
    
    .mobile {
		display: none !important;
	}
}

/*TABLETS*/
@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {

	div.left, div.right {padding: 2% !important;}
	.embed-container {max-width: 100% !Important;}
	
	div.topbar div.right {margin-top: 0;}
	
}

/*TABLETS PROTRAIT 800*/
@media screen and (max-width: 800px), screen and (max-device-width: 800px) {

	.desktop {
		display: none !important;
	}
	
	h1 {font-size: 25px !important;}
	h2 {font-size: 18px !important;}
	
	div.row {width: 100% !Important; padding: 0 10px !important; margin: 5px 0 !important;}
	div.ad div.row, div.banner div.row {padding: 0 !important;}
	div.topbar div.row div.left {float: none !important; margin: 0 auto !important;}
	div.topbar div.row div.right { width: 100% !important; float: left !important; margin: 0 !important;}
	div.topbar div.box.right, div.topbar div.box.left {width: 100% !important; max-width: 100% !important; float: left !important; margin: 0 !important;}
	div.topbar div.row #countdown div > span {font-size: 18px !important;}
	
	div.section1 p.quote {font-size: 25px !important;}
	div.section1 p.auth {font-size: 25px !important;}
	div.section1 span.left {top: -10px !important; left: 15px !important;}
	div.section1 div.left, div.section1 div.right {width: 100% !important; float: left !important;}
	div.section1 div.left { margin-bottom: 0 !important;}
	
	div.main div.row {padding: 0 !important;}
	
	div.col-3, div.col-4 {width: 100% !important; float: left;}
	div.section2 div.col-4 p {height: auto !important;}
	div.col-3 img, div.col-4 img {display: block !important; margin:0 auto !important; text-align: center !important;}
	
	div.section3 h2 {max-width: 150px !important; margin-top: -22px !important;}
	
	.embed-container {max-width: 100% !important;}
	
	div.footer p {text-align: center !important;}
	
	a.watch {margin: -50px auto 0 auto !important; left: 30% !important;}
	
	@media screen and (orientation: landscape) {
		a.watch {left: 40% !important; margin: -90px auto 0 auto !important;}
	}
}

/*PHONES*/
@media screen and (max-width: 720px), screen and (max-device-width: 720px) {
	
	
	
}