@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;
	z-index: 1;
}

p.skip-link__wrapper {
    /* text-indent: -1px; */
    display: none !important;
}

div {

}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

.mediaelement-audio audio, audio.mediaelementjs {
    width: 100%;
}

.views-row {
    display: block;
    clear: both !important;
}

.view.view-video-gallery.view-id-video_gallery.view-display-id-page_1 div.col-2, .view.view-video-gallery.view-id-video_gallery.view-display-id-page_2 div.col-2, .view.view-video-gallery.view-id-video_gallery.view-display-id-page_3 div.col-2, .view.view-video-gallery.view-id-video_gallery.view-display-id-page_4 div.col-2, div.audio.col-2 {
	width: 40%;
	border-radius: 1rem;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px -4px 8px rgba(255, 255, 255, 0.8);
	padding-top: 10px;
	margin: 20px 5% 50px 5%;
}
 div.audio.col-2, div.audio.col-2 a {
 	text-align: center;
 }

.view.view-video-gallery.view-id-video_gallery.view-display-id-page_1, span.audio-image img {
	float: left;
	margin: 0 15px 20px 0;
	width: 100px !important;
	height: 100px !important;
}

.view.view-video-gallery.view-id-video_gallery.view-display-id-page_1 p.title {
    font-size: 17px;
}

.view-id-online_forms .col-3 {
    /* border: 1px solid #ccc; */
    padding: 15px;
    /* margin: 15px; */
    text-align: center;
}
.view-id-online_forms .col-3 span.ext {display: none !important;}

input {
	outline: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial Black;
	text-transform: capitalize;
}

iframe {width: 100% !important; frameborder: 0 !important; border: none !important;}

hr {height: 1px; color:#000; background: #000; border: none;}

p {
	line-height: 1.5;
}

span.answer {
	display: block;
	padding: 5px 5px 5px 15px;
	padding: 5px 5px 5px 15px;
	margin-left: 10px;
	background: ghostwhite;
    border-left: 2px solid green;
}

span.answer p {
    display: contents !important;
}

span.answer b {
	color: #396733;
}

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

.clear {clear: both;}

.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;
}

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

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

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

.btn {
	color: #fff;
	font-weight: bold;
	padding: 10px 15px;
	border-radius: 5px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aed300+0,2b8b00+100 */
	background: rgb(174,211,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(174,211,0,1) 0%, rgba(43,139,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(174,211,0,1) 0%,rgba(43,139,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(174,211,0,1) 0%,rgba(43,139,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aed300', endColorstr='#2b8b00',GradientType=0 ); /* IE6-9 */
}

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.banner {
	width: 100%; 
	height: 100vh;
	float: left;
	z-index: 1;
	border: px solid #000;
	overflow: hidden;
	/* padding-bottom: 80px; */
}

div.inner-banner {
	width: 100%; 
	height: 390px;
	float: left;
	z-index: 1;
	border: px solid #000;
	overflow: hidden;
	/*padding-bottom: 80px;*/
}

.inner-banner img {
    width: 100% !important;
}

div.header {
	width: 100%;
	height: auto;
	float: left;
	top: 0;
	padding-top: 1.5%;
	position: absolute;
	z-index: 99;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+3,000000+100&0.87+32,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.87) 3%, rgba(0,0,0,0.87) 32%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.87) 3%,rgba(0,0,0,0.87) 32%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.87) 3%,rgba(0,0,0,0.87) 32%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.no-bg {background: #fff !important;}

div.header.no-bg {
	position: relative !important;
	float: left;
	margin: 0;
}

.no-bg div.topbar h2 {color: #fff; font-size: 40px; text-align: center; margin: 0.5% 0;}

div.sticky-wrapper.is-sticky div#sticky-bar {
	width: 100% !important;
	height: auto !important;
	padding: 5px 40px;
	color: #000;
	background: #fff;
	left: 0 !important;
	overflow: hidden;
	z-index: 999;
	-webkit-box-shadow: 0px 10px 2px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 2px -10px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 2px -10px rgba(0,0,0,0.75);
}

div.sticky-wrapper.is-sticky div#sticky-bar div.left {width: 30%;} 
div.sticky-wrapper.is-sticky div#sticky-bar div.right {width: 56% !important; max-width: 100% !important; margin-top: 1.5%;}
div.sticky-wrapper.is-sticky div#sticky-bar div.right div.gov-logo { width:50%; float: left; color: #000 !important; margin: 0 !important;}
div.sticky-wrapper.is-sticky div#sticky-bar div.right div.gov-logo p {border-right: 1px solid #000; padding: 1% 3% 1% 0 !important;}
div.sticky-wrapper.is-sticky div#sticky-bar div.right div.gov-logo img {margin-top: 0.5% !important;}
div.sticky-wrapper.is-sticky div#sticky-bar div.left a img {width: 38%;}
div.sticky-wrapper.is-sticky div#sticky-bar div.right div.nav-btn { color: #000; margin: 0 !important; text-shadow: none;}

div.sticky-wrapper.is-sticky div#sticky-bar div.left img.logo-text, div.sticky-wrapper.is-sticky div#sticky-bar div.left p.ministry {display: none !important;}

div.header div.left {width: 80%; height: auto; padding-left: 2%;}
div.header div.left a {float: left;}
div.header div.left img.logo-text {margin: 6.8% 0 0 0;}
p.ministry {color: #fff; font-size: 12px; font-weight: bold; font-style:italic; margin: 0; margin-top: -5px;}
.no-bg p.ministry {color: #000 !important;}
div.header div.right {width: 20%; max-width: 198px; height: auto; overflow: hidden;}
div.header div.right div.gov-logo {color: #fff; margin: 36% 0 0 0; font-weight: bold !important;}
.no-bg div.gov-logo {color: #000 !important;}
.no-bg div.gov-logo p {border-right: 1px solid #000 !important;}
div.header div.right div.gov-logo p {font-size: 10px !important; float: left; text-transform: uppercase; margin: 0; border-right: 1px solid #fff; padding: 3% 4% 3% 0;}
div.header div.right div.gov-logo img {margin-left: 4%; margin-top: 1.7%;}
div.header div.right div.nav-btn {color: #fff; text-align: right; font-size: 23px; margin: 10% 0 0 0; text-shadow: 1px 1px #000;}
.no-bg div.nav-btn {color: #000 !important; text-shadow: none !important;}
div.header div.right div.nav-btn:hover {cursor: pointer;}
header div.row, div.header div.row {margin: 0 auto !important;}

div.menu-holder {
	display: block;
    width: 23%;
    height: auto;
    z-index: 99;
	float: left;
    position: absolute;
    right: 0;
	overflow: hidden;
    top: 195px;
	background: rgba(0, 0, 0, 0.9);
	/*border: 1px solid red;*/
}
div.menu-holder * {border-radius: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; outline: none; padding: 0;}
div#menu {
	
}
div#menu a { color: #fff; }
div#menu ul {margin: 0 !important;}

a#close {
	color: #FF0000;
	display: block;
	padding: 1%;
    text-align: right;
}

div.topbar {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	padding: 0 5%;
	background: url('../../images/topbar-bg.jpg') no-repeat top center;
	background-size: cover;
}
div.topbar div.left {width: 70%;}
div.topbar div.left ul.news {width: 80%; list-style: none; float: left; margin: 0 auto; overflow: hidden;}
div.topbar div.left ul.news li {display: inline-block; padding: 0 0.2% 0 1.5%; border-left: 1px solid #fff;}
div.topbar div.left ul.news li p {color: #fff; font-family: Garamond; font-weight: bold; margin-bottom: 5px; font-size: 17px; line-height: 0.9; margin-top: 6px;}
div.topbar div.left ul.news li p a {color: #fff;}
div.topbar div.left ul.news li span {color: #deb202; font-weight: normal; display: block; clear: both !important;}
div.topbar p.title {color: #fff; text-transform: uppercase; letter-spacing: 1px; float: left; line-height: 0.5;}
div.topbar div.right {width: 30%; display: flex;}
div.topbar div.right form {display: flex; width: 100%;}
div.topbar div.right form div {width: 100%;}
div.topbar div.right label {display: none !important;}
div.topbar div.right input {padding: 10px 15px; border: none; margin-top: 1.5%; border-radius: 5px;}
div.topbar div.right input[type='search'] {float: left; width: 68%;}
div.topbar div.right input[type='submit'] {
	max-width: 80px;
	float: right;
	margin-left: 1%;
	color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    background: linear-gradient(rgb(174, 211, 0) 0%, rgb(43, 139, 0) 100%);
}

div.tabbed {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	background: #eee; /*#e9e9e9*/
	z-index: 1;
}

ul.tabs {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

ul.tabs li {
        display: block;
        border-top: none;
        border-bottom: none;
        background: none;
		padding: 1rem 2rem;
    }
ul.tabs li:hover {
	background-color: #f4fff3;
}	
	ul.tabs li.is-active {
		border-bottom: 3px solid #255207;
		background-color: #f4fff3;
	} 

	ul.tabs li a{
       
		color: black;
		font-weight: bold;
		text-decoration: none;
    }
	ul.tabs li.is-active a {
		color: #083f00;
	}

div.tabbed div.row {padding: 5%;}
div.tabbed #block-jcdc-quicktabsaboutus {width: 100%; height: auto; overflow: hidden;}
div.tabbed div.left, div.tabbed #block-jcdc-quicktabsaboutus .item-list {width: 25%; padding-right: 2%; float: left;}
div.tabbed div.left ul, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul.quicktabs-tabs {list-style: none; margin: 0; display: inline-grid; line-height: 2;}
div.tabbed div.left ul li, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li {padding: 2% 14% 2% !important; width: 200px; text-align: right;}
div.tabbed div.left ul li.active, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li.active {color: #356500; border-right: 1px solid #000;}
div.tabbed div.left ul li a, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li a {color: #000;}
div.tabbed div.left ul li.active a, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li.active a {color: #356500; font-weight: bold;}
div.tabbed div.right, div.tabbed .quicktabs-tabpage {width: 75%; padding-left: 0.8%; float: right;}
div.tabbed div.right p, div.tabbed .quicktabs-tabpage p {line-height: 2; margin: 0;}

div.members {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	display: grid;
}

div.members div.row {padding: 2% 5% 5%;}
div.members div.row::after {
    content: "";
    clear: both;
    display: table;
}
div.members h2 {text-align: center; margin-bottom: 5px;}
div.members p.title {text-align: center; margin-top: 5px;}
div.members p.profile-name {font-size: 20px; height: 40px; color: #346400; text-align: center; margin-bottom: 0 !important; line-height: 1 !important;}
div.members p.profile-name a {color: #346400;}
div.members p.profile-title {font-size: 17px; height: 50px; color: #7c7c7c; text-align: center; margin: 0; line-height: 1 !important;}

div.members div.member-list {width: 100%; height: auto; float: left;}
div.members div.member-list div.col-4 { padding: 0; }
div.members div.col-4 {margin-bottom: 20px;}
div.members div.col-4 img {border-radius: 50% !important;}
div.members div.col-4 p.email-btn, div.members div.col-4 p.tele-btn {width: 50%; height: auto; float: left; margin: 0;}
div.members div.col-4 p.email-btn a {display: block; width: 32px; height: 32px; margin: 0px auto; font-size: 0; background: url('../../images/email.png') no-repeat top center;}
div.members div.col-4 p.tele-btn a {display: block; width: 32px; height: 32px; margin: 0px auto; font-size: 0; background: url('../../images/phone.png') no-repeat top center;}

div.members ul.nav, div.members ul.quicktabs-tabs {width: 70%; height: auto; display: block; margin: 30px auto; padding: 15px 10px; list-style: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; overflow: hidden;}
div.members ul.nav li, div.members ul.quicktabs-tabs li {display: block; float: left; width: 25%; padding:0; text-align: center;}
div.members ul.nav li a, div.members ul.quicktabs-tabs li a {color: #000;}
div.members ul.nav li.active a, div.members ul.quicktabs-tabs li.active a {color: #346400; font-weight: bold;}

div.careers {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
}

div.careers div.row {padding: 0; margin: 0;}
div.careers div.left {width: 50%; background: url("../../images/career-bg.jpg") no-repeat top center; padding: 12% 10%;}
div.careers div.right {width: 50%; background: url("../../images/placement-bg.jpg") no-repeat top center; padding: 12% 10%;}
div.careers div.left p, div.careers div.right p{color: #fff; font-size: 25px; text-align: center; letter-spacing: 1px; margin-bottom: 5px;}
div.careers div.left a, div.careers div.right a{color: #ffc000; text-align: center; letter-spacing: 1px; display: block;}

div.links {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
}

div.links ul {
	width: 100% !important;
	padding: 0 !important;
}

div.links li.col-5 {text-align: center; color: #575757;}
.no-bg div.links li.col-5 { border-top: 1px solid #ccc; padding-top: 3%;}
div.links li.col-5 a, .no-bg div.links li.col-5 a {color: #575757;}
.no-bg div.links div.row {padding: 0 8%;}

div.inner-nav {
	width: 100%;
	height: auto;
	float: left;
	color: #fff;
	overflow: hidden;
	background: #eee; /*#440001*/
}

div.inner-nav div.row {margin-bottom: 0 !important;}
div.inner-nav ul {width: 100%; list-style: none; margin: 0; padding: 0 5%;}
div.inner-nav ul li {display: block; width: 20%; float: left; box-sizing: border-box; text-align: center; padding: 1% 0 2.5%;}
div.inner-nav ul li.menu-item--active-trail, div.inner-nav ul li:hover {background: url("../../images/inner-nav-bg.png") no-repeat bottom center;}
div.inner-nav a {color: #083f00; text-align: center; font-weight: bold;} /*#fff*/

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

div.main-content div.row {padding: 2% 10%;}
div.main-content div.main { line-height: 2;}
div.main-content div.main h2 {margin-top: 0 !important; color: #000; line-height: normal !important; }
div.main-content div.left {width: 70%; padding-right: 2.5%;}
div.main-content div.left.full {width: 100%;}
div.main-content div.left ul, div.main-content div.right ul{list-style-type: circle;}
div.main-content div.left ul li a {color: #440001; font-weight: bold;}
div.main-content div.right ul li a {color: #000;}
div.main-content div.right {width: 30%; border-left: 1px solid #ccc; padding: 0 2%;}
div.main-content div.right div.col-4 {width: 100%; text-align: center;}
div.main-content div.right div.col-4 img {width: 70% !important;}
div.main-content div.right a.more {color: #000; font-weight: bold; text-align: center; display: block;}

ul.pager {
	width: 100%;
	display: block;
	clear: both;
}
ul.pager li {
	display: inline-block;
    margin: 0 10px;
}

div.main-content a:hover {
	color: #440001;
}

div.main-content table {
    border-collapse: collapse;
    width: 100%;
}

div.main-content th, div.main-content td {
    text-align: left;
    padding: 8px;
}

div.main-content tr:nth-child(even){background-color: #f2f2f2;}

p.title {font-size: 13px;}

/*views filter style*/
.view-filters {
    display: inline-block;
    margin-bottom: 20px;
}
/*hiding views filter 'apply' button*/
.views-exposed-widget.views-submit-button {
    display: none;
}
/*views filter style*/

/*p.entry-form a, div.field-name-field-entry-form a, div.field-name-field-link a {display: block; width: 329px; height: 81px; font-size: 0; background: url('../../images/entry-btn.png') no-repeat center;}*/

p.application-form a, div.field-name-field-application-form a, div.field-name-field-link a {display: block; width: 329px; height: 81px; font-size: 0; background: url('../../images/entry-btn.png') no-repeat center;}

p.handbook a, div.field-name-field-handbook a {display: block; width: 329px; height: 81px; font-size: 0; background: url('../../images/handbook-btn.png') no-repeat center;}
div.field-name-field-handbook span {background: none !important; padding: 0 !important;}
p.entry-form span.file img, p.application-form span.file img, div.field-name-field-entry-form span.file img, div.field-name-field-application-form span.file img, p.handbook span.file img, div.field-name-field-handbook span.file img {display: none !important;}

div.offices {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
}

div.offices div.row {
    padding: 2% 10%;
}

form#webform-client-form-80 label {width: 100%; float: left;}
form#webform-client-form-80 input[type='submit'] {width: 150px; float: left; clear: both; background: linear-gradient(rgb(174, 211, 0) 0%, rgb(43, 139, 0) 100%); border: none; color: #fff; margin-top: 10px; font-weight: bold;}
form#webform-client-form-80 input[type='submit']:hover {cursor: pointer;}
form#webform-client-form-80 input, textarea, select {
	/*width: 100%;*/
	padding: 10px 12px;
	float: left;
}

div.live {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	background: url('../../images/live-bg.jpg') top center no-repeat;
	background-size: cover;
}

div.live div.left {
	color: #fff;
	width: 40%;
	padding: 2% 1% 2% 5%;
}
div.live div.left h2 {color: #fff; margin: 5% 0 2% 0;}
div.live div.left a.btn {display: inline-block; text-decoration: none;}
div.live div.left p {text-align: justify; margin: 10% 0; line-height: 2; font-size: 16px;}

div.live div.right {
	width: 60%;
	padding: 2% 5% 2% 1%;
}
div.live div.right img {float: right;}
div.live div.right div.empty-box { 
	width: 92%;
    height: 370px;
    border: 1px solid #fff;
    z-index: 5;
    float: right;
    margin-top: -51.7%;
    margin-right: 1.2%;
	position: relative;
}

div.live div.right div.empty-box div.play {
	width: 30%;
	height: auto;
	position: absolute;
	bottom: 10%;
	right: 5%;
	overflow: hidden;
	border: px solid red;
}
div.live div.right div.empty-box div.play a.play-btn {width:100%; max-width: 64px; height: 64px; display: block; background: url('../../images/play-btn.png') no-repeat top center; font-size: 0; margin: 5% auto;}
div.live div.right div.empty-box div.play a {text-align: center; display: block; color: #fff;}
div.live div.right div.empty-box div.play a.play-btn:hover {cursor: pointer;}

div.news-events {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	z-index: 1;
}

div.news-events div.row {margin: 0 auto;}
div.news-events div.left.col{width: 50%;  background: #f3f3f3;}
div.news-events div.right.col{width: 50%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faa21b+0,f7ec1e+100 */
	background: #faa21b; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #faa21b 0%, #f7ec1e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #faa21b 0%,#f7ec1e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #faa21b 0%,#f7ec1e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faa21b', endColorstr='#f7ec1e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div.news-events div.left.col h2 {background: #fff; display: block; width: 100%; margin: 0 0 2% 0; padding: 2% 0 2% 15%;}
div.news-events div.right.col h2 {margin: 0; margin-left: 8%; padding: 2% 0;}

div.news-box {width: 100%; max-width: 100%; height: auto; float: left; padding-left: 10%;}
div.news-box div.left {width: 35%; max-width: 200px; margin-bottom: 3%;}
div.news-box div.right {width: 75%; padding-right: 2%; margin-bottom: 3%;}
div.news-box div.right h3 {margin-top: 0; line-height: 1.5;}
div.news-box div.right h3 a {color: green;}
div.news-box div.right p {margin: 0;}
div.news-box div.right p.date {color: #b6b6b6; font-size: 14px;}

div.news-events div.left.col div.news-box, div.news-events div.left.col div.twitter-feed {width: 100%; height: auto; float: left; padding-left: 10%;}
div.news-events div.left.col div.twitter-feed {background: #fff;}
div.news-events div.left.col div.left {width: 35%; max-width: 141px !important; margin-bottom: 3%; padding: 0;}
div.news-events div.left.col div.right {width: 75%; padding-right: 2%; margin-bottom: 3%;}
div.news-events div.left.col div.right h3, div.news-events div.right.col div.right h3 {font-size: 19px; font-weight: bold; font-family: 'Arial Narrow'; margin: 0 0 1% 0;}
div.news-events div.left.col div.right h3 a {color: #000;}
div.news-events div.left.col div.right p {margin: 0;}
div.news-events div.left.col div.right p.date {color: #b6b6b6; font-size: 14px;}

div.news-events div.right.col div.event {width: 100%; height: auto; float: left; border-top: 1px solid #000;}
div.news-events div.right.col div.event a {color: #000;}
div.news-events div.right.col div.left {width: 25%; max-width: 235px;}
div.news-events div.right.col div.right {width: 75%; padding: 2%;}

div.news-events .more-link {float: right; font-size: 18px; font-weight: bold; margin-right: 27px; text-transform: capitalize;}
div.news-events .more-link a {color: #000;}

div.contact {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	padding-bottom: 5%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7ec1e+0,ffc900+99 */
	background: #f7ec1e; /* Old browsers */
	background: -moz-linear-gradient(top, #f7ec1e 0%, #ffc900 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f7ec1e 0%,#ffc900 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f7ec1e 0%,#ffc900 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7ec1e', endColorstr='#ffc900',GradientType=0 ); /* IE6-9 */
	z-index: 1;
}

div.contact div.left {width: 50%; padding-left: 10%;}
div.contact div.left h2 {margin-bottom: 0;}
div.contact div.left hr {width: 5%; float: left; clear: both; margin-bottom: 5%;}
div.contact div.left i { float: left; clear: both; font-size: 20px; color: #255207;}
div.contact div.left p { font-size: 18px; float: left; margin: 0 0 1% 2.5%;}

div.contact div.right {width: 50%; padding: 0 15% 0 5%;}
div.contact div.right p {font-size: 18px; text-align: justify;}
div.contact div.right p.heading {font-size: 25px; font-weight: bold;}
div.contact div.right hr {margin-bottom: 5%;}
div.contact div.right div.col-5 {text-align: center;}
div.contact div.right a.fb {width: 57px; height: 57px; display: block; font-size: 0; background: url('../../images/fb.png') no-repeat top center;}
div.contact div.right a.tw {width: 57px; height: 57px; display: block; font-size: 0; background: url('../../images/tw.png') no-repeat top center;}
div.contact div.right a.yt {width: 57px; height: 57px; display: block; font-size: 0; background: url('../../images/yt.png') no-repeat top center;}
div.contact div.right a.ig {width: 57px; height: 57px; display: block; font-size: 0; background: url('../../images/ig.png') no-repeat top center;}
div.contact div.right a.in {width: 57px; height: 57px; display: block; font-size: 0; background: url('../../images/in.png') no-repeat top center;}

div.map {
	width: 100%;
	height: auto;
	float: left;
	padding: 0.5%;
	overflow: hidden;
	background: url('../../images/map-bg.jpg') no-repeat top center;
	background-size: cover;
	z-index: 1;
}

 a.map-btn {
	display: block;
	width: 170px;
	height: 66px;
	font-size: 0;
	z-index: 3;
    right: 25px;
    margin-top: -90px;
	position: absolute;
	background: url('../../images/popup-btn.png') no-repeat top center;
}

.slide-map {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    float: left;
    z-index: 2;
	margin-top: -120px;
    display: none;
}

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

div.footer ul {list-style: none; padding: 2% 0; margin: 0 auto 0 auto; text-align: center;}
div.footer ul li {display: inline-block; text-transform: capitalize; margin: 0; border-right: 1px solid #fff; padding: 1px 1%; text-align: center;}
div.footer ul li:last-child {border: none !important;}
div.footer ul li a {color: #fff; font-size: 15px;}
div.footer ul li ul {display: none !important;}
div.footer div.left, div.footer div.right {padding: 0 5%;}
div.footer p {text-transform: capitalize; font-size: 14px;}
div.footer p a {color: #fecc02; }
.mobile {display: none !important;}

/* 1. Target the menu UL */
div.footer .navigation .menu {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0;

  display: flex; /* Make items display in a row */
  flex-wrap: nowrap; /* Prevent items from wrapping to the next line */

  /* Key properties for horizontal scrolling */
  overflow-x: auto; /* Enable horizontal scrolling when content overflows */
  -webkit-overflow-scrolling: touch; /* Enhance scrolling on iOS devices */

  /* Optional: Hide scrollbar but keep functionality */
  /* For Webkit browsers (Chrome, Safari): */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

div.footer .navigation .menu::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Webkit */
}


/* 2. Style the individual menu items (LI) */
div.footer .navigation .menu .menu-item {
  flex-shrink: 0; /* Prevent items from shrinking */
  padding: 0 15px; /* Add horizontal spacing between items */
  white-space: nowrap; /* Keep text on a single line */
}

/* 3. Style the links (A) */
div.footer .navigation .menu .menu-item a {
  display: block; /* Make the whole link clickable area */
  padding: 10px 0; /* Add vertical padding for clickable area */
  text-decoration: none;
  color: #ffffff;
  /* Add more styling: font-size, font-weight, hover effects etc. */
}

/* Optional: Add some styling to indicate scrollability */
div.footer .navigation {
  position: relative; /* For potential gradients or shadows */
}

/* Optional: Add a subtle fade effect on the edges */
/* This requires a bit more advanced CSS with pseudo-elements and gradients */
div.footer .navigation::before,
div.footer .navigation::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 30px; /* Width of the fade effect */
  pointer-events: none; /* Allow clicks through the fade */
  z-index: 1; /* Ensure it's above the menu */
}

div.footer .navigation::before {
  left: 0;
  background: linear-gradient(to right, #440001, #3e0102e0);
  /* You might need to adjust the background color to match your menu's background */
}

div.footer .navigation::after {
  right: 0;
  background: linear-gradient(to left, #440001, #3e0102e0);
}

/* Hide fade if content doesn't overflow (requires JS to detect overflow) */
/* This part is more complex and typically done with JS */
/* .navigation.no-overflow::before, .navigation.no-overflow::after { display: none; } */


/*media queries*/

/*DESKTOPS*/
@media screen and (min-width: 1024px), screen and (min-device-width: 1024px) {
    
    .mobile {
		display: none !important;
	}
	div.banner {
	width: 100%; 
	height: auto !important;
	/* padding-bottom: 80px; */
}
}

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

	div.banner, div.inner-banner {height: auto !important; padding: 0 !important;}
	div.flexslider {margin: 0 !important;}
	div.header.no-bg {padding: 0 !important;}
	div.header div.left {width: 70% !important;}
	div.header div.right {width: 40% !important;}
	a.header__logo img {width: 60%;}
	img.logo-text.desktop, p.ministry.desktop {display: none !important;}
	
	div.header div.right div.gov-logo {margin-top: 20%;}
}

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

	.desktop {
		display: none !important;
	}
	.mobile {
		display: block !important;
	}
	
	div.col-2 {width: 100% !important; max-width: 100% !important;}
	
	div.banner, div.inner-banner {height: auto !important; padding: 0 !important;}
	nav.breadcrumb {display: none !important;}
	div.flexslider {margin: 0 !important;}
	.flex-direction-nav {display: none !important;}
	div.row {padding: 0px 10px !important; margin: 10px 0 !important;}
	
	div.left, div.right, div.tabbed #block-jcdc-quicktabsaboutus, div.tabbed .quicktabs-tabpage {width: 100% !important; float: left;}
	div.tabbed div.left ul li.active, div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li.active {border: none !important;}
	div.tabbed p {text-align: justify;}
	div.main-content h2 {text-align: center;}
	div.main-content p {text-align: justify;}
	@media screen and (orientation: portrait){
		div.col-4 {width: 50% !important;}
		div.col-5 {width: 100% !important;}
		div.header div.left, div.header div.right {width: 50% !important; padding: 0 !important;}
		div.sticky-wrapper.is-sticky div#sticky-bar div.left {width: 50% !important;}
		div.sticky-wrapper.is-sticky div#sticky-bar div.right {width: 50% !important; margin-top: 5%;}
		
		.no-bg div.links li.col-5 {border: none !important;}
		div.links ul li p a img {width: 50% !important;}
		div.links ul li p a {font-size: 12px !important; font-weight: bold !important;}
		div.links ul li p {margin: 0 !important; padding: 0 !important;}
		
		div.inner-nav ul li {font-size: 12px !important;}
		
		div.news-events div.left.col div.news-box, div.news-events div.left.col div.twitter-feed {padding: 0 10px;}
		div.news-events div.left.col div.left {max-width: 100% !important; text-align: center;}
		div.news-events div.left.col div.left img {margin: 0 auto !important; text-align: center;}
		div.news-events div.left.col div.right p {text-align: left !important;}
		div.news-events div.left.col div.right {text-align: center;}
		div.news-events div.right.col div.left {max-width: 100% !important; text-align: center;}
		div.news-events div.right.col div.right {text-align: center;}
		div.news-events div.left.col h2, div.news-events div.right.col h2 {text-align: center !important;padding-left: 0 !important; margin: 0;}
		div.members ul.nav li, div.members ul.quicktabs-tabs li {width: 100% !important;}
		div.contact div.col-5 {width: 25% !important;}
		form#webform-client-form-80 input[type='submit'] {width: 50% !important;}
		
	}
	@media screen and (orientation: landscape){
		div.header div.left {width: 60% !important;}
		div.header div.right .desktop {display: block !important;}
		div.header div.right div.gov-logo {margin-top: 0 !important;}
		div.header div.right div.gov-logo img {margin-top: 1.8% !important;}
		
		div.sticky-wrapper.is-sticky div#sticky-bar div.left a img {width: 35% !important;}
		div.sticky-wrapper.is-sticky div#sticky-bar div.right {margin-top: 2.5%;}
		div.sticky-wrapper.is-sticky div#sticky-bar div.right div.gov-logo {width: 60% !important;}
		div.sticky-wrapper.is-sticky div#sticky-bar div.right div.gov-logo img {margin-top: 0 !important;}
		
		/*div.news-events div.left.col div.news-box {padding-left: 5%;}*/
		div.news-events div.left.col div.left {width: 35% !important;}
		div.news-events div.left.col div.right {width: 65% !important; padding-left: 2% !important;}
		div.news-events div.right.col div.left {width: 25% !important;}
		div.news-events div.right.col div.right {width: 75% !important;}
		
		div.contact div.col-5 {width: 20% !important;}
		
		form#webform-client-form-80 input[type='submit'] {width: 30% !important;}
	}
	
	div.header div.left img {width: 50% !important;}
	div.header div.right {position: absolute;right: 15px;}
	div.sticky-wrapper.is-sticky div#sticky-bar div.left {width: 40% !important;}
	div.sticky-wrapper.is-sticky div#sticky-bar div.gov-logo.mobile {margin: 0 auto; display:flex !important;}
	div.sticky-wrapper.is-sticky div#sticky-bar div.gov-logo.mobile p {height: 20px; font-size: 10px; text-transform: uppercase; margin: 5px 0 0 0 !important; padding-right: 2.5%; border-right: 1px solid #000; }
	div.sticky-wrapper.is-sticky div#sticky-bar div.gov-logo.mobile img {margin-left: 2.5%; margin-top: 5px;}
	div.sticky-wrapper.is-sticky div#sticky-bar div.right div.nav-btn {right: 2%;position: fixed !important;}
	
	div.sticky-wrapper.is-sticky div#sticky-bar {padding: 0 10px !important;}
	
	div.topbar {padding: 0 !important;}
	div.topbar div.left p {width: 25% !important;}
	div.topbar div.left ul.news {width: 100% !important;margin: 0 !important; padding:0 !important;}
	div.topbar div.left ul.news li {border: none !important;}
	
	p.title {display: block;width: 100%;line-height: 1 !important;margin: 0; text-align: center !important!important;}
	div.topbar div.left ul.news li p {display: inline;}
	div.topbar div.right form {width: 50% !important; margin: 0 auto !important; display: none;}
	
	div.menu-holder {width: 70% !important; top: 60px !important; /*position: absolute !important;*/}
	
	div.news-events div.row {padding: 0 !important;}
	div.news-events div.row, div.contact div.row {margin-bottom: 0 !important; margin-top: 0 !important;}
	
	form#webform-client-form-80 input, textarea, select {width: 100% !important;}
	
	div.live div.left h2 {margin: 0 0 2% !important;}
	div.live div.left p {margin: 2% 0 !important;}
	div.live div.right {padding: 2% 0 2% 0;}
	div.live div.right div.empty-box {width: 95%; right: 1.4%; margin-top: -54%; height: 175px;}
	div.map {padding: 2.5% !important;}
	 div.tabbed #block-jcdc-quicktabsaboutus .item-list {width: 100% !important;}
	 div.tabbed #block-jcdc-quicktabsaboutus .item-list ul li {padding: 0 !important;}
	 div.tabbed #block-jcdc-quicktabsaboutus .item-list ul {line-height: 1 !important;}
	 
	 div.members ul.nav li, div.members ul.quicktabs-tabs li {width: 50% !important;}
	
	div.footer div.left, div.footer div.right { text-align: center !important; padding: 0 !important;}
	div.footer ul li {text-align: center;width: 100%;border: none;padding: 2% 0;}
	
}

/*PHONES*/
@media screen and (max-width: 720px), screen and (max-device-width: 720px) {
	
	h1, h2, h3, h4, h5, h6 {font-size: 150% !important;}
	
}

/*\
drupal styles
*/



@media print {
  .breadcrumb {
    display: none;
  }
}

.breadcrumb__list {
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.breadcrumb__item  a {color: #fff;}

.messages,
.messages--status {
  margin: 1.5rem 0;
  position: relative;
  padding: 10px 10px 10px 44px;
  border: 1px solid #0072b9;
}

[dir="rtl"] .messages,
[dir="rtl"] .messages--status {
  padding: 10px 44px 10px 10px;
  background-position: 99% 8px;
}

.messages__icon {
  position: absolute;
  top: 50%;
  left: 10px;
  height: 24px;
  width: 24px;
  margin-top: -12px;
  line-height: 1;
}

[dir="rtl"] .messages__icon {
  left: auto;
  right: 0;
}

.messages__icon path {
  fill: #0072b9;
}

.messages__highlight,
.messages--error .error,
.messages.error .error {
  color: #000;
}

.messages__list {
  margin: 0;
}

.messages__item {
  list-style-image: none;
}

.messages--ok-color,
.messages,
.messages--status,
.ok,
.revision-current {
  background-color: #f6fcff;
  color: #0072b9;
}

.messages--warning-color,
.messages--warning,
.messages.warning,
.warning {
  background-color: #fffce6;
  color: #000;
}

.messages--error-color,
.messages--error,
.messages.error,
.error {
  background-color: #fff0f0;
  color: #c00;
}

.messages--warning,
.messages.warning {
  border-color: #fd0;
}

.messages--warning path, .messages.warning path {
  fill: #fd0;
}

.messages--error,
.messages.error {
  border-color: #c00;
}

.messages--error path, .messages.error path {
  fill: #c00;
}