﻿/*** to remove after dev time ****/

.hpsection {
	width: 100%;
	min-height: 300px;
}

#holdingimage {
	width: 100%;
	display: block;
}

#hpslide video {
	height: auto;
	margin: auto;
	display: table;
	width: 100%;
	background: #000;
	margin-top: -6.5vw;
}

#hpslide {
	width: 100%;
	height: 43vw;
	overflow: hidden;
	margin-bottom: 150px;
}

#hpslidecontent {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	top: 43vw;
	background-image: linear-gradient(115deg,#024e4e,#024e4e);
}

#hpslidecontent p {
	display: none;
}


/*** new slideshow, removing video */

#slideshowpd {
	width: 100%;
	height: 90vh;
	overflow: hidden;
}

#slideshowpd li {
	width: 100%;
	height: 90vh;
	background-position: center center;
	background-size: cover;
}

#bannereva {
	display: none;
	max-width: 1200px;
	margin: 0 auto;
	height: auto;
}

#bannereva img {
	width: 100%;
	height: auto;
	margin-top: calc(5em - 40px);
	cursor: pointer;
}

#bottomslide {
	width: 100%;
	overflow: hidden;
}




.animatedhpslidetitle {
	margin-left: 0vw;
	margin-top: 70vh;
	color: white;
	text-transform: uppercase;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 100vw;
}

.animatedhpslidetitle > div {
	width: auto;
	float: left;
}

.animatedhpslidetitle > div.textsl {
	background: radial-gradient(rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.2) 80%, rgba(0,0,0,0) 100%);
	padding: 20px;
	font-weight: lighter;
}


.animatedhpslidetitle h1 {
	font-size: 35px;
	width: auto;
	float: left;
	font-weight: lighter !important;
	font-family: Playfair;
}

.animatedhpslidetitle h2 {
	font-size: 25px;
	width: auto;
	float: left;
	clear: left;
	font-weight: lighter !important;
}

.animatedhpslidetitle img {
	float: left;
	width: auto;
	height: 190px;
	margin-right: 30px;
	margin-top: -100px;
}

.animatedhpslidetitle > div.imasl {
	opacity: 0;
	filter: alpha(opacity=0);
	float: right;
}

/* animation 2*/

.animatedhpslidetitle h1, .animatedhpslidetitle h2 {
	opacity: 0;
	filter: alpha(opacity=0);
}

/* animation 3*/
/*.animatedhpslidetitle 
{
	margin-left: 100vw;
	width:40vw;
}*/

/*animation 4*/
/*.animatedhpslidetitle 
{
	width:40vw;
}

.animatedhpslidetitle h1
{
	margin-left:40vw;
	opacity:0;
	filter:alpha(opacity=0);
}

.animatedhpslidetitle h2
{
	margin-left:40vw;
	opacity:0;
	filter:alpha(opacity=0);
}*/

/*media queries*/

/****** awards *********/

#slideshowawards li img {
	width: 100%;
	position: relative;
	z-index: 999;
}

#slideshowawards li {
	width: 100%;
}

.awardlogo {
	margin-top: -450px;
}

.awardtext {
	margin-top: -230px;
	width: 100%;
	color: white;
	font-size: 30px;
	letter-spacing: 2px;
	text-align: center;
	position: relative;
	display: block;
	text-transform: uppercase;
	font-weight: bold;
}

.awardfadein {
	z-index: 99999;
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-transition: opacity 0.5s 2s, filter 0.5s 2s;
	-webkit-transition: opacity 0.5s 2s, filter 0.5s 2s;
	-o-transition: opacity 0.5s 2s, filter 0.5s 2s;
	-ms-transition: opacity 0.5s 2s, filter 0.5s 2s;
	transition: opacity 0.5s 2s, filter 0.5s 2s;
}

.cycle-slide-active .awardfadein {
	opacity: 1;
	filter: alpha(opacity=100);
}

#award {
	padding: 0 20px;
}

#awardplainsection {
	width: 100%;
	max-width: 1200px;
	padding-top: 80px;
	margin: 0px auto;
	text-align: center;
}

#awardplainsection h1.jph1 {
	width: 94%;
	margin: 0 auto;
	font-size: 23px;
	line-height: 35px;
}

#awardplainsection p {
	color: #9b9b9b;
	font-size: 16px;
	line-height: 23px;
	padding-top: 30px;
}

#awardplainsection a {
	font-size: 24px;
	width: 240px;
	display: block;
	text-align: center;
	padding: 20px 0px;
	text-transform: uppercase;
	background: #024e4e;
	color: white;
	margin: 40px auto 10px auto;
	-moz-transition: color 0.5s, background 0.5s;
	-webkit-transition: color 0.5s, background 0.5s;
	-o-transition: color 0.5s, background 0.5s;
	-ms-transition: color 0.5s, background 0.5s;
	transition: color 0.5s, background 0.5s;
}

#awardplainsection a:hover {
	background: #a6a6a6;
}

.awardoneline div div {
	float: left;
	padding-top: 25px;
	color: #fff;
	font-size: 17px;
	line-height: 23px;
}

.awardoneline div div:last-child {
	padding-right: 0px;
}

.awardoneline div div h3 {
	font-family: Playfair;
	letter-spacing: 2px;
	text-align: left;
}

.awardoneline img {
	float: left;
	margin-right: 25px;
	width: 90px;
}

.awardoneline > div {
	margin-right: 70px;
	float: left;
}

.awardoneline {
	width: 100%;
	display: block;
	height: auto;
	float: left;
	margin: 30px 0px 0px 0px;
	background: #D8C0AA;
	padding: 10px;
}

#extraaward > h3 {
	font-size: 20px;
	color: #fff;
	float: left;
	width: 30%;
	display: block;
	float: left;
	padding-top: 10px;
	font-family: Playfair;
}

#extraaward {
	width: 100%;
	display: table;
	padding: 20px 10px;
	margin: 0px;
	background: #986542;
	float: left;
}

#extraaward > p {
	width: 66%;
	color: white;
	display: block;
	float: left;
	padding: 0px 2%;
}

#awardbtt {
	display: block;
	width: 100%;
	float: left;
}

.hpwrapper {
	display: table;
	width: 100%;
	background: #F4E3D4;
}




@media screen and (max-width:1250px) {
	#bannereva {
		width: 90vw;
	}
}

@media screen and (max-width:1200px) {
	.awardoneline > div {
		margin-right: 50px;
		float: left;
	}
}

@media screen and (max-width:1135px) {
	.animatedhpslidetitle img {
		height: 180px;
	}
}

@media screen and (max-width: 1100px) {
	.hpbannercontent .right {
		padding: 0 !important;
	}
}

@media screen and (max-width:1080px) {
	.awardoneline > div {
		width: 96%;
		margin: 10px 2%;
	}

	.awardoneline > div span {
		width: calc(100% - 115px);
	}

	.animatedhpslidetitle {
		margin-top: 65vh;
	}

	.animatedhpslidetitle > div.textsl {
		width: 100%;
	}

	.animatedhpslidetitle > div.imasl {
		float: left;
		width: 100%;
		clear: both;
		display: block;
		height: auto;
	}

	.animatedhpslidetitle img {
		height: 140px;
		margin: 0px auto;
		display: block;
		float: none;
	}
}

@media screen and (max-width:950px) {
	/*#hpslidecontent
	{
		padding-top:57vw !important;
	}*/
}

@media screen and (max-width:767px) {
	.jph1 {
		font-size: 25px;
		line-height: 27px;
	}

	#awardplainsection h1.jph1 {
		font-size: 20px;
		text-align: justify;
	}

	#extraaward > h3, #extraaward > p {
		width: 94%;
		padding: 10px 0px;
		margin: 0px 3%;
	}
}

@media screen and (max-width:630px) {
	.jpbttslide {
		font-size: 18px !important;
		width: 40vw !important;
		margin: 10px 5vw;
	}

	#slideshowbtts {
		margin-top: 0px !important;
	}

	.awardoneline > div {
		clear: left;
		width: 92% !important;
		margin-left: 4% !important;
	}

	#awardplainsection, #hpabout {
		padding: 40px 0px !important;
	}
}

@media screen and (max-width:505px) {
	.jpbttslide {
		font-size: 14px !important;
		width: 48vw !important;
		margin: 10px 1vw !important;
		padding: 10px 0px !important;
	}


	.animatedhpslidetitle {
		margin-top: 40vh;
	}
}

@media screen and (max-width:360px) {
	.awardoneline img {
		clear: left;
		margin-left: calc(50% - 45px);
	}

	.awardoneline > div span {
		clear: left;
		width: 100%;
		margin-left: 0px !important;
	}
}


@media screen and (max-height: 1000px) and (max-width: 600px) {
	.animatedhpslidetitle {
		margin-top: 40vh;
	}
}


@media screen and (max-height: 700px) and (max-width: 600px) {
	.animatedhpslidetitle {
		margin-top: 30vh;
	}
}

@media screen and (max-height: 550px) and (max-width: 600px) {
	.animatedhpslidetitle {
		margin-top: 24vh;
	}
}


/****** videos strip and pop up ******/

#videostrips {
	display: block;
	width: 96vw;
	height: auto;
	margin: 80px 2vw 80px auto;
}

/*#videos {
	width: 96%;
	margin: 12px 2% 15px 2%;
	height: auto;
	display: table;
}*/


#videos .owl-controls
{
	display:none;
}

#videos .owl-item {
	width: calc(100% / 5);
	float: left;
	background: rgba(2,78,78,0);
	transition: 0.5s;
	margin-bottom: 5px;
}

#videos .owl-item:nth-child(6) {
	clear: left;
}

#videos .owl-item:hover {
	background: rgba(2,78,78,0.8);
	cursor: pointer;
}

#videos .owl-item img, #videos .owl-item span {
	float: left;
	display: table;
	height: auto;
	max-height: 219px;
	width: 90%;
	margin: 2px 5%;
}

#videos .owl-item:hover img {
	filter: brightness(50%);
}

#videos .owl-item span {
	color: #4B5D54;
	font-size: 23px;
	line-height: 35px;
	font-family: Playfair;
	font-weight: normal;
	transition: 0.5s,
}

#videos .owl-item:hover span {
	color: white;
}


#videopopupbig {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 9999;
	top: 0px;
	left: 0px;
	background: #D8C0AA;
}


#videopopupbig > a {
	font-size: 22px;
	width: calc(100% - 30px);
	margin-left: 15px;
	text-align: right;
	padding-top: 15px;
	display: block;
}

#videopopupbig a i {
	color: #4B5D54;
}

#videopopupcontent {
	width: 96%;
	height: 90vh;
	margin: 5vh 2%;
}

#videopopupcontent video {
	width: auto;
	height: 88vh;
	margin: 0px auto;
	display: block;
}

#puvleft, #puvright {
	display: block;
	float: left;
}

#puvleft {
	width: 80%;
}

#puvright {
	width: 20%;
}

#puvright > a {
	margin-top: 40vh;
}

/*@media screen and (max-width:1540px) 
{
	#videos li 
	{
		width: calc(100% / 5);
	}

	#videos li:nth-child(5){
		clear:left;
	}
}*/

@media screen and (max-width:810px) {
	#videos li {
		width: calc(100% / 2);
	}

	#videos li:nth-child(3), #videos li:nth-child(5), #videos li:nth-child(7), #videos li:nth-child(9) {
		clear: left;
	}


	#videos li:nth-child(6) {
		clear: none;
	}
}
