/*************************************************** 
FAJAR SENTOSA -- CSS
***************************************************/

/*************************************************** 
WEBFONT
****************************************************/
@font-face {
	font-family: 'bodytext';
	src: url('../webfont/ipi-regular-webfont.eot');
	src: url('../webfont/ipi-regular-webfont.woff') format('woff'), 		/* Pretty Modern Browsers */
			 url('../webfont/ipi-regular-webfont.ttf') format('truetype'), 			/* Safari, Android, iOS */
			 url('../webfont/ipi-regular-webfont.svg#ipi') format('svg');/* Legacy iOS */
}

@font-face {
	font-family: 'italic';
	src: url('../webfont/ipi-italic-webfont.eot');
	src: url('../webfont/ipi-italic-webfont.woff') format('woff'), 		/* Pretty Modern Browsers */
			 url('../webfont/ipi-italic-webfont.ttf') format('truetype'), 			/* Safari, Android, iOS */
			 url('../webfont/ipi-italic-webfont.svg#ipi') format('svg');/* Legacy iOS */
}

@font-face {
	font-family: 'light';
	src: url('../webfont/ipi-light-webfont.eot');
	src: url('../webfont/ipi-light-webfont.woff') format('woff'), 		/* Pretty Modern Browsers */
			 url('../webfont/ipi-light-webfont.ttf') format('truetype'), 			/* Safari, Android, iOS */
			 url('../webfont/ipi-light-webfont.svg#ipi') format('svg');/* Legacy iOS */
}

@font-face {
	font-family: 'bold';
	src: url('../webfont/ipi-semibold-webfont.eot');
	src: url('../webfont/ipi-semibold-webfont.woff') format('woff'), 		/* Pretty Modern Browsers */
			 url('../webfont/ipi-semibold-webfont.ttf') format('truetype'), 			/* Safari, Android, iOS */
			 url('../webfont/ipi-semibold-webfont.svg#ipi') format('svg');/* Legacy iOS */
}

@font-face {
	font-family: 'headline';
	src: url('../webfont/ipi-thin-webfont.eot');
	src: url('../webfont/ipi-thin-webfont.woff') format('woff'),
			 url('../webfont/ipi-thin-webfont.ttf') format('truetype'),
			 url('../webfont/ipi-thin-webfont.svg#ipi') format('svg');
}


body, p {
	font-family: 'bodytext', 'Raleway', sans-serif;
	font-weight: 400; /*Rule for Raleway and sans-serif*/
	font-style: normal;

/*	font-size: 1.8em;*/

}

h1, h2, h3, h4, h5, h6 {
	font-family: 'headline', 'Raleway', sans-serif
	font-weight: 400; /*Rule for Raleway and sans-serif*/
	font-style: normal;	
}

/*************************************************** 
FONT SIZING
****************************************************/
body {
/*	font-size: 16px;*/
	line-height: 1.5;
	letter-spacing: 0.5px;
}

h1 {
/*	font-size: 3rem;*/
	letter-spacing: 3px;
}

h2 {
/*	font-size: 2rem;*/
	letter-spacing: 3px;
}

h3 {
/*	font-size: 1.6rem;*/
	letter-spacing: 3px;
}

h4 {
/*	font-size: 1.6rem;*/
	letter-spacing: 3px;
}

@media screen and (min-width: 400px) and (max-width: 1000px) {
	body {
		font-size: calc( 14px + (20 - 14) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h1 {
		font-size: calc( 24px + (48 - 24) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h2 {
		font-size: calc( 20px + (32 - 20) * ( (100vw - 400px) / ( 1000 - 400) ));
		letter-spacing: calc( 3px + (1 - 3) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h3 {
		font-size: calc( 18px + (28 - 18) * ( (100vw - 400px) / ( 1000 - 400) ));
	}

	h4 {
		font-size: calc( 15px + (23 - 15) * ( (100vw - 400px) / ( 1000 - 400) ));
	}

}




/*Setting the font-size so it won't get smaller than 14px */

@media screen and (max-width: 400px) {
    body { font-size: 14px; } 
    h1 { font-size: 24px; }
    h2 { font-size: 20px; letter-spacing: 1px;}
    h3 { font-size: 18px; }        
    h4 { font-size: 15px; }  
}


/*Setting the font-size so it won't get larger than 20px */

@media screen and (min-width: 1000px){
    body { font-size: 20px; }
    h1 { font-size: 48px; }
    h2 { font-size: 36px;  letter-spacing: 3px;}
    h3 { font-size: 28px; }
    h4 { font-size: 23px; }
}


/*************************************************** 
TO REMOVE HORIZONTAL SCROLL
****************************************************/
body {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	overflow-x: hidden; 
}


/*************************************************** 
LETTER STYLE
****************************************************/
.bold {
	font-family: 'bold', 'Raleway', sans-serif;
	font-weight: 600;
}

.italic {
	font-family: 'italic', 'Raleway', sans-serif;
	font-weight: 300i;
}


/*************************************************** 
LETTER STYLING
****************************************************/
.large-title {
	font-family: 'headline';
}

.medium-title {
	font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 8px;
	margin-top: 8px;
}

.small-title {
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 48px;
}

.small-title-lowercase {
	font-size: 1.8rem;
	letter-spacing: 5px;
}

.spec {
	display: inline-block;
	width: 100px;
}

.spec-small {
	display: inline-block;
	width: 50px;
}

.spec-large {
	display: inline-block;
	width: 120px;
}

.uppercase {
	text-transform: uppercase;
}

.small-note {
	font-size: 1.5rem;
	color: #6a6d72;
}

.left-align > ul {
	text-align: left;
 	padding-left: 32%;
 	padding-bottom: 20px;
 	padding-top: 20px;
}


.ipi-contact-info {
	text-align: left;
 	padding-left: 32%;
 	padding-bottom: 20px;
 	padding-top: 20px;
}



/*************************************************** 
TRIO TITLE
****************************************************/
.trio-parent {
	justify-content: center;
	display: flex;
	margin-top: 50px;
	margin-bottom: 50px;
}
.trio-child {
	display: inline-block;
	padding: 4px 20px 0 15px;
}

/*************************************************** 
GENERAL RULE
****************************************************/
.container {
	max-width: 1920px;
	width: 100%;
	padding: 0;
	position: relative;
}

.container-fluid {
	padding-left: 0;
	padding-right: 0;
}


/***************************************************
  STYLING THE LINKS
****************************************************/
a:link {
  text-decoration: none;
}

a {
  color: #C6A05B;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

a:hover, a:active, a:focus {
  color: #846124;
}


/*************************************************** 
PLACEMENT
****************************************************/
.center {
	margin: 0 auto;
	text-align: center;
}

.center-div {
	margin: 0 auto;
}

.margin-bottom {
	margin-bottom: 30px;
}

.block {
	display: block;
	clear: both;
}

.inline-block {
	display: inline-block;
}

.flush-right {
	float: right;
	padding-right: 20px;
}

.margin-left {
	margin-left: 20px;
}

.overflow-hidden {
	overflow: hidden;
}


/*************************************************** 
SPACING
****************************************************/
.space-tiny {
	height: 15px;
}

.space-short {
	height: 30px;
}

.space-med {
	height: 50px;
}

.space-tall {
	height: 100px;
}

/*************************************************** 
COLOR
****************************************************/
.white-text {
	color: white;
}

.cyan {
	background-color: #0098FF;
}

.navyblue {
	background-color: #003263;
}

.gold {
	background-color: #C6A05B;
}

.earlgrey {
	background-color: #7D7168;
}

.cream {
	background-color: #EEE6BA;
}

.lightgrey {
	background-color: #F8F8F8;
}

.periwinkle {
	background-color: #294568;
}

.grey6 {
	background-color: #686868;
}

.grey8 {
	background-color: #454545;
}

.teal {
	background-color: #0f584b;
}

.teal-bg {
	background-image: url(../img/teal-bg.jpg);
}

.prussian {
	background-color: #002542;
}

.prussian-bg {
	background-image: url(../img/prussian-bg.jpg);
}



/*************************************************** 
NAVIGATION
****************************************************/
.navbar {
	border-radius: 0;
	border: 0;
}

.logo img {
	margin-left: 50px;
	padding-top: 10px ;
}

.navbar-nav {
	margin-left: 30px;
	margin-right: 10px;
	text-transform: uppercase;
	font-size: 1.6rem;
	float: right;
}

.navbar-default .navbar-nav > li > a {
	font-family: 'bold';
	font-weight: 600;
	color: #161616;
	letter-spacing: 3px;
	text-shadow: 1px 1px 4px #FEFEFE;
}

.navbar-default .navbar-nav > li {
	padding-left: 3px;
	padding-right: 3px;
}

/*To push the nav below the logo and float left when the browser is smaller*/
@media screen and (max-width: 1550px){
.nav.navbar-nav {
		clear: both;
		float: none;
		display: block;
	}
}

/*To set the navigation font size smaller so that it won't form three lines in smaller screen*/
@media screen and (min-width: 768px) and (max-width: 1412px) {
	.top-navy {
		font-size: calc( 13px + (16 - 13) * ( (100vw - 768px) / ( 1412 - 768) ));
	}
}

/*Underline Stroke Effect on Hover*/
.nav li a,
.nav li a:after,
.nav li a:before {
	transition:  all 0.5s;
}

.underline-stroke li a {
	position: relative;
}

.underline-stroke li a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 0%;
	content: ' ';
	color: transparent;
	background: #555555;
	height: 1px;
}

.underline-stroke li a:hover:after {
	width: 100%;
}


/* The .navbar and .navbar.scrolled style is to make the navbar background turns translucent
white when user scrolls down. Used in conjunction with function checkScroll javascript in myscript.js */
.navbar { 
	background-color: transparent;
	border: none;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.navbar.scrolled {
  background: rgb(255, 255, 255); /* IE */
  background: rgba(255, 255, 255, 0.78); /* NON-IE */
}

@media only screen and (min-width: 992px) {
	.navbar-nav > li {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*************************************************** 
NAVBAR TOGGLE
***************************************************/
.navbar-toggle {
	background: rgb(255, 255, 255); /* IE */
	background-color: rgba(255, 255, 255, 0.2);
}

.navbar-toggle span.glyphicon-option-horizontal {
	color: white;
}

/* To make the collapsed menu has translucent white background */
@media only screen and (max-width: 768px) {
	.navbar-collapse.in {
		background: rgb(255, 255, 255); /* IE */
		background-color: rgba(255, 255, 255, 0.7);
	}
}

/*************************************************** 
VIDEO
****************************************************/

video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover !important;
}

.video-container {
	position: relative;
	width: 100%;
	height: 910px;
	max-height: 100vh;
	overflow: hidden;	
	object-fit: cover !important;
	/*The overflow and object-fit are to make the video keep its height and center when the browser is reduced */
}


/*************************************************** 
THUMBNAIL
****************************************************/
.thumbnail {
	border-radius: 0;
	border: 0;
	background-color: transparent;
}

/*************************************************** 
JUMBOTRON
****************************************************/
.jumbotron {
	margin-bottom: 0;
}


/*************************************************** 
COVER
****************************************************/
.cover img {
  position: absolute;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}



/*************************************************** 
LINK AT THE END OF PRODUCT PAGE
****************************************************/
.coda-link {
	padding: 0 10vw;
}

/*************************************************** 
UNORDERED LIST
****************************************************/
ul {
	-webkit-padding-start: 0;
}

/*************************************************** 
FLEURETTE LINER
****************************************************/
.fleurette-liner {
	margin: 15px;
}

/*************************************************** 
LINK TO FAJAR SENTOSA & CONTACT US
****************************************************/
.marble {
	background-image: url('../img/marble.jpg');
	background-repeat: no-repeat;
	height: 660px;
	width: 100%;
	display: table;
}

.outer {
	height: 1000px; /*The .outer is for Contact Us section in index */
	width: 100%;
	display: table;
	position: absolute;
	top: 0px;
	z-index: 1;
	height: 800px;
}

.middle {
	display: table-cell;
	vertical-align: middle;

}

.inner {
	width: 90%;
	height: 80%;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.inner-pattern {
	width: 90%;
	height: 80%;
	background-image: url('../img/overlay-pattern.png');
	margin-left: auto;
	margin-right: auto;
}

.column-one > ul {
	padding-left: 40%;
}

.column-one > ul > li {
	text-align: left;
	list-style-type: circle;
	margin: 10px 0;
}

.column-two > ul {
	padding-left: 40%;
}

.column-two > ul > li {
	text-align: left;
	list-style-type: circle;
	margin: 10px 0;
}

.contact-address {
	padding-left: 13%;
}



/*************************************************** 
OUTLINE BUTTON
****************************************************/

.outline-button {
	background-color: transparent;
	padding: 14px 24px;
	border: 5px solid white;
	font-family: 'bold';
}

.cyan-outline-button {
	background-color: transparent;
	padding: 14px 24px 14px 38px;
	border: 5px solid #0098FF;
	text-transform: uppercase;
	font-size: 2.3rem;
	letter-spacing: 10px;
	font-family: 'bold';
	display: inline; /*This makes the button stretch only as wide as the content. Without this it will fill the entire row */
  -webkit-transition: color ease-in 0.5s;
   -moz-transition: color ease-in 0.5s;
     -o-transition: color ease-in 0.5s;
        transition: color ease-in 0.5s; 
}

.cyan-outline-button:hover, .cyan-outline-button:active, .cyan-outline-button:focus {
  color: #41b2ff;
}


.cyan-outline-button > a {
	color: white;
	text-decoration: none;
}

.cream-outline-button {
	background-color: transparent;
	padding: 14px 24px 14px 38px;
	border: 5px solid #EEE6BA;
	text-transform: uppercase;
	font-size: 2.3rem;
	letter-spacing: 10px;
	font-family: 'bold';
	display: inline; /*This makes the button stretch only as wide as the content. Without this it will fill the entire row */
  -webkit-transition: color ease-in 0.5s;
   -moz-transition: color ease-in 0.5s;
     -o-transition: color ease-in 0.5s;
        transition: color ease-in 0.5s; 
}

.cream-outline-button:hover, .cream-outline-button:active, .cream-outline-button:focus {
  color: #fff8d4;
}

.cream-outline-button > a {
	color: white;
	text-decoration: none;
}

.cyan-outline-button-small {
	background-color: transparent;
	padding: 14px 24px 14px 38px;
	border: 5px solid #0098FF;
	text-transform: uppercase;
	font-size: 1.3rem;
	letter-spacing: 10px;
	font-family: 'bold';
	display: inline; /*This makes the button stretch only as wide as the content. Without this it will fill the entire row */
  -webkit-transition: color ease-in 0.5s;
   -moz-transition: color ease-in 0.5s;
     -o-transition: color ease-in 0.5s;
        transition: color ease-in 0.5s; 
}

.cyan-outline-button-small:hover, .cyan-outline-button-small:active, .cyan-outline-button-small:focus {
  color: #41b2ff;
}


.gold-outline-button {
  background-color: transparent;
  padding: 14px 24px;
  border: 5px solid #C6A05B;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 3px;
	font-family: 'bold';
	display: inline; /*This makes the button stretch only as wide as the content. Without this it will fill the entire row */
  -webkit-transition: color ease-in 0.5s;
   -moz-transition: color ease-in 0.5s;
     -o-transition: color ease-in 0.5s;
        transition: color ease-in 0.5s; 
}

.gold-outline-button:hover, .gold-outline-button:active, .gold-outline-button:focus {
  color: #dfb873;
}


/*************************************************** 
THUMBNAIL GALLERY EXPANDER
****************************************************/
.gallery-items { font-size: 0; }

.gallery-item {
  display: inline-block;
  vertical-align: top;
  -webkit-transition: height 500ms ease;
  -o-transition: height 500ms ease;
  transition: height 500ms ease;
}

.gallery-expander {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 500ms ease;
  -o-transition: max-height 500ms ease;
  transition: max-height 500ms ease;
}

.gallery-contents { position: relative; }

.gallery-contents:after {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;
  width: 0;
  height: 0;
  content: '';
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  -webkit-transition: border-bottom-width 500ms ease;
  -o-transition: border-bottom-width 500ms ease;
  transition: border-bottom-width 500ms ease;
}

.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }

ul {   /*This was turned off by me earlier but I'm not sure why */
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.gallery-item {
  text-align: left;
  font-size: 2rem;
  letter-spacing: 5px;
  margin: 0 5px;
  padding: 10px 0;
}

.gallery-item .thumbnail {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item .thumbnail > img {
  position: absolute;
/*  top: 50%;
  margin-top: -300px;
  max-width: 300px;*//*Turned off so that the image can be centered on the thumbnail. This rule is appropriate for tall rectangle images*/
}

.gallery-item .inner-title {
/*  margin-top: 20px;*/
  padding-bottom: 20px;
/*	text-transform: uppercase;*/
}

.gallery-item .inner-lowercase-title {
  padding-bottom: 20px;
}

.gallery-contents:after { border-bottom-color: #877C74; }

.gallery-expander { background: #877C74; }

.gallery-expander-contents {
  margin: 0 auto;
  width: 1000px;
  padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents { width: 640px;}
}
@media (max-width: 639px) {

.gallery-expander-contents { width: 100%; }
}

.gallery-expander-contents:after {
  clear: both;
  display: table;
  content: '';
}

.gallery-expander-contents > div.col {
  float: left;
  width: 480px;
}

/*@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents > div.col { width: 310px;} ---Turned off because between 640px and 999px, the image appears too small 
}*/

@media (max-width: 639px) {

.gallery-expander-contents > div.col {
  float: none;
  padding: 25px 20px 0;
  width: auto;
}
}

.gallery-expander-contents > div.col + div.col { margin-left: 40px; }

@media (min-width: 640px) and (max-width: 999px) {
	.gallery-expander-contents > div.col + div.col { 
		margin-left: 20px; 
		clear: both;
		width: 480px;
	}
}

@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}

.gallery-expander-contents div.inner-title {
  color: white;
  font-size: 4rem;
  font-family: 'headline', 'Raleway', sans-serif;
  font-weight: 300;
}

.gallery-expander-contents div.inner-lowercase-title {
  color: white;
  font-size: 4rem;
  font-family: 'headline', 'Raleway', sans-serif;
  font-weight: 300;
}

.gallery-expander-contents div.contents {
  margin-top: 10px;
  border-top: 1px solid #BCB098;
  border-bottom: 1px solid #BCB098;
  padding: 10px 0;
/*  font-size: 14px;  I need the description of the product to be in a larger font size*/ 
  line-height: 24px;
  color: white;
  font-family: 'light', 'Raleway', sans-serif;
  font-weight: 300;
}

.gallery-expander-contents div.image > img {
  width: 100%;
  display: block;
}

.contents {
  letter-spacing: 1px;
}

.gallery-item .outer-title {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
	text-transform: uppercase;
/*margin-bottom: 20px;*/
}

.gallery-item .outer-lowercase-title {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

/*Cross sign for closing the expander*/
.gallery-expander-contents div.close {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  height: 2px; /*The thickness of the cross*/
  background: #FFF; /*The color of the cross*/
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

.close:hover::before,
.close:hover::after {
  background: #333;
}

.gallery-expander-contents > .image > img {
	display: block;
	max-width: 100%;
	height: auto;
}



/*************************************************** 
RELATED THUMBNAIL
****************************************************/
.related-thumbnail {
	width: 32%;
}

.zoomin {
	position: relative;
	overflow: hidden;
	width: 154px;
	height: 154px;
/*Unfortunatelly, you can't have responsive size. You have to put in an exact number so that the overflow hidden could work. 
	Otherwise it will take the whole row space. Percentage value will not work.*/
}

.zoomin img {
	max-width: 100%; /*Required*/
  -moz-transition: all 0.3s; /*How long it takes for the zooming to take*/
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.zoomin:hover img {
  -moz-transform: scale(1.5); /*Determine how big the zooming effect will be*/
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}






/*************************************************** 
SORTING ORDER
****************************************************/

.sorting-order {
	display:none; /* Turn off the display after the sorting label is assigned for each object */
}



/***************************************************
  PARALLAX BACKGROUND
****************************************************/

section {
  position: relative;
  display: block;
  width: 100%;
  height: 800px;
  max-height: 100vh;
  overflow: hidden;
}

section .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
section .cover img {
  position: absolute;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

section .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}





/***************************************************
  PARALLAX BACKGROUND 
****************************************************/

.hero-image-title-container {
  position: relative;
}

.hero-image-title {
/*centering horizontally & vertically*/	
  width: 50%;
  height: 90%;
/*  overflow: auto;*/
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

  padding-top: 11%;
  text-shadow: 0 0.5px 2px rgba(0, 0, 0, .6); /* x, y, bluriness, color plus alpha for transparency */
}

@media screen and (max-width: 768px) {
	.hero-image-title {
		width: 80%;
	}
}

.pattern-overlay {
	background: url('../img/overlay-pattern.png');
  background-repeat: repeat;
  top: 0;
  left: 0;
  width: 100%;
/*  height: 100%;*/
	height: 1000px;
  position: absolute;
}



/***************************************************
  CONTACT US
****************************************************/

.section-contact-us {
  position: relative;
  display: block;
  width: 100%;
  min-height: 800px;
  max-height: 100vh;
  overflow: hidden;
}

.section-contact-us .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.section-contact-us .cover img {
  position: absolute;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.section-contact-us .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}


.map-responsive{
  overflow:hidden;
	padding-bottom: 74%;
  position:relative;
  height:0;
}
.map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}


.position-relative {
	position: relative;
}


.crossfade > div {
  animation-name: imageAnimation; 
  animation-duration: 35s; 
  animation-iteration-count: infinite; 
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0;
	position: absolute;
  top: 0;
  width: 100%;
  opacity:0; 
}


@keyframes imageAnimation {
  0% {
    opacity:0;
  }
  2.85% {
    opacity:1;
  }
  20% {
    opacity:1;
  }
  22.85% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

.crossfade div:nth-of-type(1) {
  background-image: url(../img/contact-us-background-01.jpg);
  animation-delay: 28s;
}
.crossfade div:nth-of-type(2) {
  background-image: url(../img/contact-us-background-02.jpg);
  animation-delay: 21s;
}
.crossfade div:nth-of-type(3) {
  background-image: url(../img/contact-us-background-03.jpg);
  animation-delay: 14s;
}
.crossfade div:nth-of-type(4) {
  background-image: url(../img/contact-us-background-04.jpg);
  animation-delay: 7s;
}
.crossfade div:nth-of-type(5) {
  background-image: url(../img/contact-us-background-05.jpg);
  animation-delay: 0;
}


@media screen and (max-width: 992px) {
	.copyrights {
		clear: both;
	}
}




/*************************************************** 
FADEIN for 3 IMAGES REGULAR THUMBNAIL 6SEC VISIBLE AND 1SEC FADE
****************************************************/
/*
@keyframes fade3 {
  0%   { opacity: 0; }
  4.76%   { opacity: 1; }
  33.33%  { opacity: 1; }
  38.09%  { opacity: 0; }
  100% { opacity: 1; }
}

.fadein3 { 
  position:relative;  
  max-width:1920px; 

}

.fadein3 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade3; 
  animation-duration: 21s; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out;
}

.fadein3 img:nth-child(1) {animation-delay: 0s;}
.fadein3 img:nth-child(2) {animation-delay: 7s;}
.fadein3 img:nth-child(3) {animation-delay: 14s;}




/*************************************************** 
FADEIN for 3 IMAGES REGULAR THUMBNAIL 6SEC VISIBLE AND 1SEC FADE
****************************************************/

@keyframes fade3 {
  0%   { opacity: 0.5; }
  3.33%   { opacity: 1; }
  23.33%  { opacity: 1; }
  36.67%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 0.5; }
}

.fadein3 { 
  position:relative;  
  max-width:1920px; 
}

.fadein3 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade3; 
  animation-duration: 30s; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out;
}

.fadein3 img:nth-child(1) {animation-delay: 0s;}
.fadein3 img:nth-child(2) {animation-delay: 10s;}
.fadein3 img:nth-child(3) {animation-delay: 20s;}





/*************************************************** 
FADEIN for 5 IMAGES REGULAR THUMBNAIL 6SEC VISIBLE AND 1SEC FADE
****************************************************/

@keyframes fade5 {
  0%   { opacity: 0; }
  2.85%   { opacity: 1; }
  20%  { opacity: 1; }
  22.85%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein5 { 
  position:relative;  
  max-width:1920px; 
  padding-bottom: 50%;

  height: 1000px;
}

.fadein5 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade5; 
  animation-duration: 35s; 
  animation-iteration-count: infinite; 
}

.fadein5 img:nth-child(1) {animation-delay: 0s;}
.fadein5 img:nth-child(2) {animation-delay: 7s;}
.fadein5 img:nth-child(3) {animation-delay: 14s;}
.fadein5 img:nth-child(4) {animation-delay: 21s;}
.fadein5 img:nth-child(5) {animation-delay: 28s;}







/*************************************************** 
FOOTER
****************************************************/
.footer {
	background-color: #454545;
	padding: 30px 15px;
	margin: 0 auto;
/*font-size: 1.3rem;*/
}

@media screen and (min-width: 992px) and (max-width: 1920px) {
	.footer {
		font-size: calc( 13px + (18 - 13) * ( (100vw - 992px) / ( 1920 - 992) ));
	}
}

.footer-border {
	border-bottom: 2px solid white;
	height: 8px;
	background-color: #454545;
}

.footer-contact-data {
	padding-left: 5%;
	padding-top: 20px;
	letter-spacing: 2px;
}

.icon {
	display: inline-block;
	vertical-align: top;
}

.footer-data {
	display: inline-block;
	padding-left: 20px;
}

ul.footnav {
	padding: 0;
}

.footnav > li > a {
	color: white;
	text-decoration: none;
}

.footnav > li {
	list-style: none;
	margin-top: 20px;
	text-transform: uppercase;
}


@media screen and (max-width: 992px) and (min-width: 768px) {
	.footnav {
		margin-left: 50%;
		width: 250px;
	}
}

@media screen and (max-width: 767px) {
	.footnav {
		margin-left: 9%;
		width: 250px;
	}
}



/***************************************************
  SCROLL TO TOP
****************************************************/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(198, 160, 91, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 999;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #C6A05B;
  opacity: 1;
}
.cd-top:hover {
  opacity: 1; /* the opacity turns to 1 when rolled over */
}




/***************************************************
   HOVER EFFECTS
****************************************************/

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);


  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);

}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}