/*==============================================================================*/
/*								Fonts 											*/
/*==============================================================================*/
@font-face { font-family: CenturyGothic; src: url(../fonts/CenturyGothicRegular.woff); }
@font-face { font-family: Century; src: url(../fonts/CenturyNormal.ttf); }
@font-face { font-family: CenturyBold; src: url(../fonts/CenturyBold.ttf); }
@font-face { font-family: CenturyBoldItalic; src: url(../fonts/CenturyBoldItalic.ttf); }
@font-face { font-family: Impact; src: url(../fonts/Impact.ttf); }
@font-face { font-family: Impacted; src: url(../fonts/Impacted.ttf); }

/*==============================================================================*/

html {
  touch-action: manipulation;
}

body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	font-family: CenturyGothic;
	background: rgba(241, 241, 241, 0.9);
}

a, a:visited, a:active {
	text-decoration: none;
	color: inherit;
}

input {
	-webkit-appearance: none;
	transition: ease-in 0.2s;
}

input:hover {
	-webkit-filter: brightness(120%);
	filter: brightness(120$);
	transition: ease-in 0.2s;
}
	
.mobile {
	display: none;
}

.desktop {
	display: inherit;
}

/*===================== Loading Div ============================*/
.loading {
    position:   absolute;
    z-index:    490;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 235, 239, 244, 0.5) 
                url(../img/loading.gif) 
                50% 50% 
                no-repeat;
}

.loading.main {
	position: fixed;
	z-index: 1000;
	display: none;
	opacity: 0.8;
}

/*===================== End Loading Div ============================*/

.fill {
	width: 100%;
	height: 100%;
}

.menuBtn {
	position: absolute;
	top: 55px;
	left: 30px;
	
	width: 5vmin;
	height: 5vmin;
	
	min-width: 40px;
	min-height: 40px;
	
	background: rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	
	z-index: 500;
}

.menuBtn img {
	width: 100%;
}

.menuBtn.top {
	top: 15px;
	position: fixed;
}

.menuBtn:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, 0.6);
}

.section {
	position: relative;
	float: left;
	width: 100%;
}

.close {
	font-family: CenturyGothic;
	font-weight: bold;
	/* font-size: 20px; */
	font-size: 1.25em;
	color: #FFFFFF;
	line-height: 32.5px;
	text-align: center;
	
	width: 35px; height: 35px;
	border-radius: 5px;
	background: rgba(90, 90, 90, 1);
}

.close:hover {
	cursor: pointer;
	background: rgba(140, 140, 140, 1);
}

.sideMenu {
	position: fixed;
	top: 0;
	left: -450px;
	
	background: rgba(24, 24, 24, 0.9);
	height: 100vh;
	width: 400px;
	
	z-index: 1000;
	transition: ease-in 0.3s;
}

.sideMenu.show {
	left: 0;
	transition: ease-in 0.3s;
}

.sideMenu .close {
	position: absolute;
	top: 40px;
	left: 30px;
}

.sideMenu .element {
	position: relative;
	width: calc(100% - 35px);
	height: 50px;
	line-height: 50px;
	float: left;
	
	/* font-size: 20px; */
	font-size: 1.25em;
	
	margin: 10px 0 0 0;
	padding-left: 35px;
	
	color: #a7a7a7;
}

.sideMenu .element:first-child {
	margin-top: 120px;
}

.sideMenu .element.sub {
	color: #5e832e;
	/* font-size: 18px; */
	font-size: 1.125em;
	height: 30px;
	line-height: 30px;
	margin-top: 0;
}

.sideMenu .element:hover, .sideMenu .element:focus {
	cursor: pointer;
	color: #ffffff;
	background: rgba(167, 167, 167, 0.6);
}

.sideMenu .element.selected {
	font-weight: bold;
}


/* =========================================================================================== */





.header {
	background: url(../img/dottedbkg.png) repeat;
	/* height: 800px; */
	height: 725px;
}

.hBanner {
	height: 150px;
	/* background: rgba(241, 241, 241, 0.9); */
	z-index: 200;
}

.header .logo {
	position: absolute;
	top: 10px;
	left: 80px;
}

.header .hFooter {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 70px;
	overflow: hidden;
	background: url(../img/artwork.png) repeat;
	background-size: contain; 
}

.hFooter {
	display: none;
}

.header.contactus {
	background: none;
	height: 140px;
}


/* =========================================================================================== */

.mainCarouselle {
	top: -150px;
}

.carouselleContainer, .carouselleContainer .slider {
	position: relative;
	float: left;
	width: 100%;
}

.carouselleContainer .imagesContainer, .carouselleContainer .imagesContainer img {
	float: left;
	width: 100%;	
	transition: 0.2s ease-in;
}

.carouselleElement {
	position: relative;
	width: 100% ;
}

.carouselleElement .catText {
	position: absolute;
	right: 100px;
	bottom: 20%;
	width: 25%;
	min-width: 337px;
}

.carouselleElement .catText .catButton {
	margin: 25px 0 20px 0;
	background: url(../img/d_cat_btn.png) !important;
	width: 291px;
	height: 49px;
	transition: ease-in 0.2s;
}

.carouselleElement .catText .catButton:hover {
	cursor: pointer;
	-webkit-filter: brightness(120%);
	filter: brightness(120%);
	transition: ease-in 0.2s;
}
/* =========================================================================================== */

.body {
	font-family: CenturyGothic;
	width: calc(100% - 160px);
	padding: 80px;
	color: #686868;
	/* font-size: 19px; */
	font-size: 1.1875em;
}

.body h1 {
	font-weight: bold;
	color: #8dc63f;
	/* font-size: 40px; */
	font-size: 2.5em;
}

.body h2 {
	/* font-size: 30px; */
	font-size: 1.875em;
}

.news {
	font-family: CenturyGothic;
}

.news .left, .news .right {
	float: left;
}

.news .left {
	text-align: right;
	width: calc(40% - 60px);
	padding-left: 60px;
	margin-bottom: 40px;
}

.news .left img {
	width: calc(100% - 60px);
	margin: 0 20px 0 0;
}

.news .right {
	width: calc(60% - 60px);
	padding-right: 50px;
}

.news .right h1 {
	margin-top: 0;
	color: #a1a1a1;
}

.news .right h2 {
	color: #e30613;
}


/* =========================================================================================== */
/* Contact Us */
.section.body.contactus {
	padding-bottom: 50px;
}

.section.body.contactus .left, .section.body.contactus .right {
	position: relative;
	width: calc(50% - 60px);
	padding: 30px;
	float: left;
	height: 500px;
}

.section.body.contactus .left {
	background: rgba(141, 198, 63, 1);
	color: #ffffff;
}

.section.body.contactus .left h1 {
	color: #ffffff;
	margin: 0;
}

.section.body.contactus .left .down {
	position: absolute;
	bottom: -50px;
	left: 50px;
}

.section.body.contactus .right input, .section.body.contactus .right label, .section.body.contactus .right textarea {
	float: left;
	clear: left;
	margin: 0 0 5px 15px;
	/* font-size: 15px; */
	font-size: 0.9375em;
}

.section.body.contactus .right input, .section.body.contactus .right textarea {
	width: 350px;
	font-family: CenturyGothic;
	/* font-size: 14px; */
	font-size: 0.875em;
	border: none;
	padding: 10px;
	margin-bottom: 15px;
	
	background: rgba(215, 215, 215, 1);
}

/* =========================================================================================== */
/* Contact Form Map */

.contactFormMap {	
	position: relative;
	
	width: calc(100% - 160px);
	margin: 0 80px 50px 80px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.29);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.29);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.29);
}

.contactFormMap .activeOverlay {
	width: 100%;
	height: 100%;
	position: absolute;
	text-align: center;
	line-height: 400px;
	color: #ffffff;
	font-family: CenturyGothic;
	/* font-size: 18px; */
	font-size: 1.125em;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.contactFormMap iframe {
	width: calc(100% - 20px);
	min-height: 400px;
	margin: 10px;
	/*pointer-events: none;*/
}

.contactFormMap .section img {
	margin: 10px;
}

/* =========================================================================================== */


.footer {
	margin-top: 40px;
}

.footer .left, .footer .right {
	float: left;
	width: 50%;
	
	color: #6d6d6d;
}

.footer .right {
	width: calc(50% - 100px);
	padding-left: 0;
	float: right;
}

.footer .right input {
	width: 300px;
	font-family: CenturyGothic;
	/* font-size: 14px; */
	font-size: 0.875em;
	border: none;
	padding: 10px;
	margin-bottom: 15px;
}

input[type="button"], input[type="submit"] {
	background: rgba(142, 199, 65, 1) !important;
	color: #ffffff !important;
	cursor: pointer !important;
}

input[type="button"]:active, input[type="submit"]:active {
	background: rgba(96, 96, 96, 1) !important;
}

.footer .left .title {
	width: calc (100% - 40px);
	height: 45px;
	line-height: 45px;
	padding-left: 40px;
	
	color: #8abe44;
	/* font-size: 20px; */
	font-size: 1.25em;
	
	background: rgba(96, 96, 96, 1);
}

.footer .left h1 {
	margin: 10px 0 0 40px;
	/* font-size: 22px; */
	font-size: 1.375em;
}

.footer .left p {
	margin: 10px 0 30px 40px;
	/* font-size: 15px; */
	font-size: 0.9375em;
}

.footer .right .title {
	width: calc(100% - 10px);
	height: 45px;
	line-height: 45px;
	padding-left: 10px;
		
	color: #8abe44;
	/* font-size: 20px; */
	font-size: 1.25em;
	
	background: rgba(216, 216, 216, 1);

}

.footer .bottom {
	float: left;
	width: 100%;
	height: 80px;
	background: rgba(96, 96, 96, 1);
}

.footer .bottom .left, .footer .bottom .right {
	width: 50%;
	float: left;
	color: #ffffff;
}

.footer .bottom .right {
	width: 510px;
	float: right;
}

.footer .bottom .left p {
	margin-left: 40px;
}

.footer .bottom .right .element {
	float: left;
	margin: 30px 0 0 40px;
	/* font-size: 15px; */
	font-size: 0.9375em;
}

.footer .bottom .right .element a, .footer .bottom .right .element a:visited, .footer .bottom .right .element a:active {
	text-decoration: none !important;
	color: #ffffff;
}

.footer .bottom .right .element img {
	float: right;
	margin-right: 10px;
}
/* =========================================================================================== */

@media screen and (max-width: 1130px) {
	.footer .bottom .left {
		width: 100%;
		text-align: center;
	}
	
	.footer .bottom .right {
		float: none;
		margin: 0 auto;
	}
	
	.footer .bottom .right .element {
		margin-top: 0;
	}
	
	.footer .bottom {
		height: 120px;
	}
}

@media screen and (max-device-width: 768px), screen and (max-width: 630px) {
	body {
		-webkit-appearance: none;
	}
	
	.body h1:first-child {
		margin-top: 60px;
	}
	
	.mobile {
		display: inherit;
	}
	
	.desktop {
		display: none;
	}
	
	.body {
		padding: 35px;
		width: calc(100% - 70px);
	}
	
	.header {
		height: 54vh;
		min-height: 450px;
	}

	.header.contactus {
		background: none;
		height: 140px;
		min-height: 140px;
	}
	
	.news .left {
		width: calc(100% - 60px);
	}
	
	.news .right {
		width: calc(100% - 60px);
		padding: 35px;
	}
	
	.footer .left, .footer .right {
		width: 100%;
	}
	
	.section.body.contactus .left, .section.body.contactus .right {
		width: calc(100% - 60px);
		height: auto;
	}
	
	.section.body.contactus .right input, .section.body.contactus .right label, .section.body.contactus .right textarea {
		/* font-size: 30px; */
		width: 600px;
	}

	.section.body.contactus .left .down {
		display: none;
	}
	
	.footer .left h1 {
		/* font-size: 22px; */
		font-size: 2em;
	}
	
	.footer .left p, .footer .right p, .footer .right input {
		font-size: 1.7em;
		margin: 10px 0 30px 40px;
	}
	
	.footer .left .title, .footer .right .title {
		/* font-size: 20px; */
		font-size: 2.5em;
		padding-left: 10px;
	
	}
	
	.footer .bottom {
		height: 175px;
	}
	
	.sideMenu {
		left: -600px;
		widht: 600px;
	}
	
	.sideMenu.show {
		left: 0;
		width: 600px;
	}
	
	.sideMenu .element, .sideMenu .element.sub {
		font-size: 2vmax;
		height: 60px;
	}

	.sideMenu .element.sub {
		padding-left: 60px;		
	}
	
	.carouselleElement .catText {
		bottom: 40%;
	}

}

@media screen and (max-device-width: 768px) and (orientation: landscape), screen and (max-width: 630px) and (orientation: landscape) {
	.header {
		height: 170vh;
		min-height: 750px;
	}
	
	.body h1:first-child {
		margin-top: 80px;
	}
}