.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.icon .iconlist > li {
	color: #ed1432;
	
}

.iconlist > li [class^="icon-"]:first-child {
	color: #ed1432;
	color: var(--themecolor);
}

@font-face {
font-family: "The Rain";
src: url("fontem/TheRainBold.woff2");
src: 

url("fontem/TheRainBold.woff2") format("opentype")
;
}

@font-face {
font-family: "The Rain";
src: url("css/fonts/TheRainBold.otf");
src: 

url("css/fonts/TheRaiBold.otf") format("opentype")
;
}

@font-face {
	font-family: "Cleopatra";
	src: url("css/fonts/Cleopatra.ttf");
	src: url("fontsm/font-icons.eot") format("embedded-opentype"),
		url("fonts/font-icons.woff") format("woff"),
		url("fonts/font-icons.ttf") format("truetype"),
		url("fonts/font-icons.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
font-family: "Shinykind";
src: url("/fontem/Shinykind-Regular.woff2");
src: url("fontem/Shinykind-Regular.woff") format("opentype")
;
}


@font-face {
font-family: "Rapihaf";
src: url("/fontem/RapihafRegular.woff2");
src: url("fontem/RapihafRegular.woff") format("opentype")
;
}


@font-face {
font-family: "Creampuff";
src: url("/fontem/Creampuff.woff2");
src: url("fontem/Creampuff.woff") format("opentype")
;
}

@font-face {
font-family: "Aurigle";
src: url("/fontem/Aurigle.woff2");
src: url("fontem/Aurigle.woff") format("opentype")
;
}

@font-face {
font-family: "Ladquest";
src: url("/fontem/LadquestRegular.woff2");
src: url("fontem/LadquestRegular.woff") format("opentype")
;
}



@font-face {
font-family: "Baloo";
src: url("/fontem/Baloo.woff2");
src: url("fontem/Baloo.woff") format("opentype")
;
}

@font-face {
font-family: "Farmhouse Christmas";
src: url("/fontem/FarmhouseChristmasRegular.woff2");
src: url("fontem/FarmhouseChristmasRegular.woff") format("opentype")
;
}


@font-face {
font-family: "Lost Treasure";
src: url("/fontem/LostTreasure.woff2");
src: url("fontem/LostTreasure.woff") format("opentype")
;
}



@font-face {
font-family: "League Gothic";
src: url("/fontem/LeagueGothic-Regular.woff2");
src: url("fontem/LeagueGothic-Regular.woff") format("opentype")
;
}



@font-face {
font-family: "Raleway";
src: url("font-3/Raleway-Medium.woff2");
src: url("font-3/Raleway-Medium.woff") format("opentype")
;
}


@font-face {
font-family: "Raleway";
src: url("font-3/Raleway-MediumItalic.woff2");
src: url("font-3/Raleway-MediumItalic.woff") format("opentype")
;
}


@font-face {
font-family: "Raleway";
src: url("font-3/Raleway-Light.woff2");
src: url("font-3/Raleway-Light.woff2") format("opentype")
;
}


@font-face {
font-family: "Raleway";
src: url("font-3/Raleway-Italic.woff2");
src: url("font-3/Raleway-Italic.woff") format("opentype")
;
}


@font-face {
font-family: "Raleway";
src: url("font-3/Raleway-SemiBold.woff2");
src: url("font-3/Raleway-SemiBold.woff2) format("opentype")
;
}


h2  {
    font-family: 'raleway';
    font-weight: normal;
    font-style: extrabold;
}






#page-title.page-title-parallax h1 {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0;
}

#page-title.page-title-parallax span {
	margin-top: 30px;
    font-weight: 400;
    color: #666;
    font-size: 17px;
}

.about-img > img {
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 80%;
}

.about-img > img + img {
	position: relative;
	margin-top: 60px;
	border: 12px solid #FFF;
}











 /* This is needed to target iPads in landscape and portrait mode when using PARALLAX BG images  (other non-parallax BG images are fine...) .. parallax on iPhones works without this (it doesn't do parallax effect but it shows the same image as a still, and at the correct scale... , but not iPads .. with iPads, what happens without this code is an ugly extreme zoom in.. this is the only thing that seems to work ... no customisation needed for the individual sections.. just this code in the global CSS..*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
  .x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
 background-attachment:scroll !important;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  
}
}

/* this is needed to top the running out of smaller parallax images */
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
 	background-position: center center !important;
}

#header h1{
    margin:0px;
}
body{
    margin:0;
}

/* ----- | Story-Box | ----- */
.story-box {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	cursor: pointer;
}

.story-box .story-box-image {
	width: 70%;
	height: 500px;
	z-index: 2;
	overflow: hidden;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}

.story-box .story-box-image img {
	display: block;
	height: auto;
	width: 100%;
	opacity: 1;
	transition: opacity .3s ease;
}

.story-box:hover .story-box-image img {
	opacity: .9;
}

.story-box .story-box-info {
	box-sizing: border-box;
	width: 50%;
	height: 430px;
	padding: 60px;
	margin: 35px 0 0 -20%;
	background: #fff;
	z-index: 4;
	box-shadow: 0 10px 45px rgba(0,0,0,.1);
	transition: all ease-in .3s;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}

.story-box.description-left .story-box-info {
	-ms-flex-order: -1;
	order: -1;
	margin: 35px -20% 0 0;
}

.story-box .story-box-info .story-title {
	font-family: 'Playfair Display';
	font-size: 26px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0;
	color: #1d2c4c;
}

.story-box .story-box-info .story-box-content p {
	font-size: 15px;
	font-weight: 300;
	color: #666;
	line-height: 16px;
}

.story-box .story-box-info .story-box-content a {
	font-size: 16px;
	text-decoration: underline !important;
}

/* ----- Story-Box Responsive ----- */
@media (max-width: 991px) {

	.story-box .story-box-image {
		height: auto;
		width: 100%;
		height: 400px;
		-ms-flex-order: -1;
		order: -1;
	}

	.story-box.description-left .story-box-info {
		-ms-flex-order: -1;
		order: -1;
		margin: 35px -20% 0 0;
	}

	.story-box.description-left .story-box-info { margin: -40px 5% 0; }

	.story-box .story-box-info {
		max-width: 90%;
		height: auto;
		-ms-flex-preferred-size: 90%;
		flex-basis: 90%;
		margin: -40px 5% 0;
	}
}


@media (max-width: 767px) {

	.story-box.description-left .story-box-info { margin: -100px 5% 0; }
	.story-box .story-box-info {
		padding: 35px;
		text-align: center;
		margin: -100px 5% 0;
	}
	.customers-count { border-right: none }
}

@media (max-width: 479px) {

	.story-box .story-box-info {
		width: 100%;
		padding: 15px;
		text-align: center;
		margin: -200px 5% 0;
	}
	.story-box.description-left .story-box-info { margin: -200px 5% 0; }

	ul.tab-nav:not(.tab-nav-lg) li a i {display: none;}
}


/* ----- Tab ----- */
ul.tab-nav:not(.tab-nav-lg) { border-bottom: none; }

ul.tab-nav:not(.tab-nav-lg) li {
	float: left;
	border: none;
	height: auto;
	text-align: center;
}

.tabs.tabs-alt ul.tab-nav li.ui-tabs-active a { border: none; }

ul.tab-nav:not(.tab-nav-lg) li a {
	color: #1d2c4c;
	height: auto;
	line-height: 1;
	background-color: transparent;
	font-size: 15px;
	font-weight: 400;
	padding: 0 0 20px 0;
}

ul.tab-nav:not(.tab-nav-lg) li a i {
	display: block;
	font-size: 42px;
	margin: 0 0 17px 0;
	color: var(--themecolor);
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a { top: 0; }

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--themecolor);
}

.tab-container { margin: 30px 0 0; }


/* ----- Tab Responsive ----- */
.acctitle {
	line-height: 30px;
	font-size: 16px;
	font-weight: 500;
	color: #444;
	border-top: 1px dotted #DDD;
	padding: 12px 0 12px 24px;
}
.acc_content { padding: 10px 0 25px; }
.acctitle i {
	color: var(--themecolor);
	font-size: 16px;
	top: 3px;
}

.acctitle i.icon-ok-circle,
.acctitle i.icon-remove-circle { display: none; }