@import url("generic.css");
@import url("top-menu.css");
@import url("sidebar-navigation.css");
@import url("slideshow-carousel.css");
@import url("gallery.css");
@import url("subpages.css");


/****************************************
	Layout
****************************************/
	.MainWrapper {
		max-width:1320px;
		display:block;
		margin:0px auto;
		position:relative;
	}


	/**===== TOP HEADER ==**/
	#TopHead {
		width:100%;
		position:relative;
		z-index:1001;
		height:auto !important;
		background:#fff;
	}
	#TopHeadHeightFixed { display:none;}

	#TopHead .BotmRow {
		background:#fff;
			-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2);
		box-shadow:0 3px 3px rgba(0,0,0,.2);
	}

	#TopHead .BotmRow .Logo {
		float:left;
		margin:15px 0 15px 40px;
	}
	

@media All and (min-width:991px) {
	#TopHead.th_active .Logo {
		margin-top:5px;
		margin-bottom:8px;
	}
	#TopHead.th_active .Logo img { height:57px;}
}



	/*===== HEADING STYLE ==*/
	.TitleStyle {
		position:relative;
		text-align:Left;
		margin-bottom:5vh;
	}
	.TitleStyle.Center { text-align:center;}

	.TitleStyle .Top {
		font-size:50px;
		line-height:50px;
		font-weight:700;
		color:#252525;
		position:relative;
		margin-bottom:20px;
	}

	.TitleStyle .Bottom,
	.TitleStyle .Tagline {
		font-family: 'Aldrich', sans-serif;
		font-size:20px;
		line-height:24px;
		font-weight:normal;
		color:#252525;
		text-transform:uppercase;
		letter-spacing:5px;
	}
	.TitleStyle .Bottom span {
		background:#d49658;
			-webkit-border-radius:2px;
		border-radius:2px;
		display:inline-block;
		padding:3px 8px 1px 12px;
	}
	
	.TitleStyle .Tagline {
		color:#02326c;
		letter-spacing:normal;
		margin-bottom:40px;
	}
	.TitleStyle .Tagline span {
		position:relative;
		padding-left:85px;
	}
	.TitleStyle .Tagline span::before {
		content:'';
		height:2px;
		width:80px;
		background:#bdc7d3;
		position:absolute;
		left:0;
		bottom:6px;
	}

	.SubHeading {
		font-size:25px;
		line-height:30px;
		font-weight:500;
		color:#252525;
		position:relative;
		margin-bottom:10px;
	}



	/**===== BODY CONTENTS ==**/
	.WhiteWrapper, .GreyWrapper, .DarkWrapper, .LightWrapper, .ColorWrapper {
		position:relative;
		padding:8vh 0 5vh 0;
	}
	.WhiteWrapper { background:#fff;}
	.GreyWrapper { background:#bdc7d3;}
	.DarkWrapper { background:#02326c;}
	.LightWrapper { background:#f2f5f8;}
	.ColorWrapper { background:#d49658;}


	.ParallaxWrapp { color:#fff;}
	.ParallaxWrapp > div {
		background:rgba(0,0,0,.7);
		padding:8vh 0 5vh 0;
	}

	.ParallaxWrapp .TitleStyle .Top { color:#fff;}
	.ParallaxWrapp .TitleStyle .Bottom { color:#d3955e;}
	.ParallaxWrapp .TitleStyle .Bottom span { color:#fff;}



	/*===== DESIGN LAYOUT ==*/
	#Intro {
		height: calc(100vh - 100px);
		position:relative;
	}
	#Intro::before, #Intro::after,
	.BorderImage::before, .BorderImage::after {
		content:'';
		border:1px solid rgba(255,255,255,0.25);
		position:absolute;
		z-index:1;
	}
	#Intro::before,
	#Intro::after { z-index:1;}
	
	#Intro::before,
	.BorderImage::before {
		top:20px;
		right:40px;
		bottom:20px;
		left:40px;
	}
	#Intro::after,
	.BorderImage::after {
		top:40px;
		right:20px;
		bottom:40px;
		left:20px;
	}

	.BorderImage { position:relative;}
	.BorderImage img { width:100%;}
	
	.BorderImage .Title {
		font-size:5vw;
		line-height:.9;
		text-transform:uppercase;
		font-weight:900;
		color:rgba(255,255,255,0.2);
		position:absolute;
		left:70px;
		bottom:70px;
		z-index:2;
	}
	.SideBoxColum .flex-column-reverse .BorderImage .Title {
		left:auto;
		right:70px;
	}


	/*= Sidebar Slide Popup */
	.SlidePopup {
		display:none;
		background:#d49658;
		width: 100%;
		max-width: 480px;
		height: 100vh;
		position:fixed;
		top:0;
		right:0;
		z-index:1002;
	}
	.SlidePopup .Inner {
		padding:40px;
		height:100%;
	}
	
	.SlidePopup > .WrappClose {
		height:30px;
		width:30px;
		position:absolute;
		top:0;
		right:0;
		cursor:pointer;
		padding:5px;
	}
	
	.SlidePopup::before {
		content:'';
		border:5px solid rgba(255,255,255,0.25);
		position:absolute;
		top:25px;
		right:25px;
		bottom:25px;
		left:25px;
	}

	.SlidePopup .Box {
		background:#fff;
		padding:40px;
		height:100%;
		position:relative;
		z-index:1;
		overflow-y:auto;
	}

	#GetinTouch .FormWrapper .row > *  {
		flex: 0 0 100%;
    	max-width: 100%;
	}
	#GetinTouch .FormWrapper .btn { min-width:100%;}
	
	.Margin30 .row {
		margin-left:-30px;
		margin-right:-30px;
	}
	.Margin30 .row > * {
		padding-left:30px;
		padding-right:30px;
	}
	
	.ImageStyle {
		position:relative;
		text-align:center;
	}
	.ImageStyle::before {
		content:'';
		background:#f2f5f8;
		position:absolute;
		left:0;
		right:-27%;
		bottom:0;
		height:62%;
	}
	.ImageStyle img {
		position:relative;
		z-index:1;
	}
	
	#Welcome { padding-bottom:160px;}
	.Intrduction { margin-top:60px;}


	#About.DarkWrapper { padding:0;}

	#About > .row { margin:0;}
	#About > .row > * { padding:0;}
	
	.ColorBox {
		width:100%;
		background:#d49659;
		padding: 30px 0 50px 80px;
		position:relative;
	}
	#About .ColorBox::before,
	#About .ColorBox::after {
		content:'';
		background:#d49659;
		position:absolute;
	}
	#About .ColorBox::before {
		width:115%;
		height:60px;
		left:0;
		top:-60px;
	}
	#About .ColorBox::after {
		width:15%;
		height:100%;
		top:0;
		right:-15%;
		z-index:1;
	}

	.ColorBox .TitleStyle .Tagline { color:#000;}
	.ColorBox .TitleStyle .Top,
	.ColorBox .TitleStyle .Bottom { color:#fff;}
	.ColorBox .TitleStyle .Bottom span { background:#02326c;}
	.ColorBox .TitleStyle .Tagline span::before { background:rgba(0,0,0,0.15);}

	.Boxxx {
		text-align:left;
		font-size:16px;
		line-height:24px;
		font-weight:500;
	}
	.Boxxx .Icon img {
		height:70px;
		margin-bottom:20px;
	}
	.Boxxx .Title {
		font-size:21px;
		line-height:22px;
		font-weight:700;
		text-transform:uppercase;
		color:#252525;
		letter-spacing:2px;
		margin-bottom:16px;
	}
	
	.ColorBox .Boxxx { color:#e6cbb1;}
	.ColorBox .Boxxx .Title { color:#000;}
	
	.Boxxx .btn { min-width: 140px;}
	.Boxxx .Theme.btn.AnchorBtn a {
		padding-top:12px;
		padding-bottom:12px;
	}


	.VideoBox {
		position:relative;
		background-color:#000;
		overflow:hidden;
		cursor:crosshair;
	}
	.VideoBox > img {
		width:100%;
		opacity:0.4;
			-webkit-transition: 0.5s ease;
		transition: 0.5s ease;
	}
	.VideoBox:hover > img {
		opacity:0.6;
			-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}

	.VideoBox .Icon {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	#FashionVideo.MyBox .modal-dialog {
		width: 80%;
		max-width: 100%;
	}
	#FashionVideo.MyBox .modal-content {
		background:none;
		margin:0;
		padding:0;
	}
	#FashionVideo.MyBox .modal-content .modal-body { padding:0;}

	#OurFocus .Boxxx {
		color:#bdc7d3;
		font-weight:400;
		margin-bottom:30px;
	}
	#OurFocus .Boxxx .Title {
		color:#d49658;
		font-weight:800;
	}

	.PlayBtn a {
		display:inline-block;
		color:#fff;
		font-size:14px;
		line-height:46px;
		text-transform:uppercase;
		font-weight:700;
		letter-spacing:0.02em;
		padding-left:15px;
	}
	.PlayBtn a:not([href]):not([tabindex]),
	.PlayBtn a:not([href]):not([tabindex]):hover { color:#fff;}

	.PlayBtn span {
		height:36px;
		width:36px;
		background:rgba(255,255,255,0.2);
		display:block;
		text-align:center;
			-webkit-border-radius:40px;
		border-radius:40px;
		float:left;
		position:relative;
		top:5px;
		left:-10px;
			-webkit-transition: 0.4s ease;
		transition: 0.4s ease;
	}
	.PlayBtn span::before {
		content:'';
		position:absolute;
		top:-5px;
		left:-5px;
		height:46px;
		width:46px;
		border:2px solid rgba(255,255,255,0.2);
			-webkit-border-radius:40px;
		border-radius:40px;
	}

	.PlayBtn svg {
		height:12px;
		width:12px;
		fill:#fff;
		position:relative;
		top:-6px;
		left:2px;
	}

	.PlayBtn a:hover span { background:#d3955e;}
	.PlayBtn a:hover span::before { border-color:#d3955e;}

	#OurFocus > .MainWrapper > .row {
		margin-left:-30px;
		margin-right:-30px;
	}
	#OurFocus > .MainWrapper > .row > * {
		padding-left:30px;
		padding-right:30px;
	}

	.SideBoxColum > .row { margin:0;}
	.SideBoxColum > .row > * {
		padding:0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		background:#fff;
	}

	.SideBoxColum .Inner {
		padding:30px 80px;
		position:relative;
		z-index:1;
	}


	.ColorBanner { position:relative;}
	.ColorBanner::before {
		content:'';
		background-image:url(../images/circle.png);
		height:397px;
		width:397px;
		position:absolute;
		top:-180px;
		left:-180px;
	}
	.ColorBanner .Inner {
		background-color:#d49658;
		background-image:url(../images/map.png);
		background-repeat:no-repeat;
		background-position:top center;
		color:#fff;
		padding:100px;
		position:relative;
		z-index:1;
	}

	.ColorBanner .TitleStyle .Tagline { color:#000;}
	.ColorBanner .TitleStyle .Top,
	.ColorBanner .TitleStyle .Bottom { color:#fff;}
	.ColorBanner .TitleStyle .Bottom span { background:#02326c;}
	.ColorBanner .TitleStyle .Tagline span::before { background:rgba(0,0,0,0.15);}
	
	.ColorBanner .Link a {
		color:#000;
		font-size:16px;
		line-height:22px;
		font-weight:600;
		text-transform:uppercase;
		border-bottom:2px solid #000;
	}
	.ColorBanner .Link a:hover {
		color:#fff;
		border-color:#fff;
	}

	.SocialLink {
		background:#fff;
		text-align:center;
	}
	.SocialLink .Links {
		font-size:50px;
		line-height:60px;
		font-weight:800;
		color:#bdc7d3;
		margin-bottom:20px;
	}
	.SocialLink .Links a {color:#bdc7d3;}
	.SocialLink .Links a:hover {color:#02326c;}
	
	.SocialLink .Links svg {
		height: 48px;
		width: 48px;
		fill: #02326c;
		position: relative;
		top: -6px;
	}
	.SocialLink .Links span { padding:0 8px 0 10px;}

	#GetinTouch .SocialLinks {
		text-align: center;
		border-bottom: 1px solid #e0e7f0;
		padding-bottom: 15px;
		margin-top: 15px;
	}
	.SocialLinks a { display:inline-block;}
	.SocialLinks svg {
		height:40px;
		width:40px;
		fill:#bdc7d3;
			-webkit-transition: 0.4s ease;
		transition: 0.4s ease;
	}
	.SocialLinks a:hover svg {fill:#02326c;}



	/*===== FOOTER ==*/
	#Footer {
		background:#252525;
		font-size:14px;
		line-height:20px;
		color:#777;
		text-transform:uppercase;
		letter-spacing:0.06em;
		text-align:center;
		font-weight:700;
		padding:45px 0 40px 0;
	}

	#Footer a { color:#777;}
	#Footer a:hover { color:#fff;}
	#Footer a.moreInfo span { border-color:#fff;}

	#Footer .Inline {display: inline-block;}
	#Footer .Hide {
		padding: 0 15px;
		color: #999;
	}




/****************************************
	MEDIA QUERIES
****************************************/

/***** for 1400px or less ===========*/
@media All and (max-width:1480px) {
	.MainWrapper {
		margin:0px 5%;
		max-width:100%;
	}
	
	#TopHead .BotmRow .Logo { margin-left:20px;}
	
	.TitleStyle .Tagline {margin-bottom: 20px;}
	.TitleStyle .Top {
		font-size: 40px;
		line-height: 44px;
	}
	.Intrduction { margin-top: 30px;}
	.ImageStyle::before { right:-32%;}

	.ColorBox { padding: 20px 0 40px 40px; }
	
	.SideBoxColum .Inner { padding:40px 30px;}

	.SlidePopup .Box { padding:30px;}
	.SlidePopup .TitleStyle .Top {
		font-size: 30px;
		line-height: 30px;
		margin-bottom: 10px;
	}
}


/***** for 1280px or less ===========*/
@media All and (max-width:1280px) {
	#Intro {height:auto;}
}

@media All and (max-width:1199px) {
	#TopHead {
		background:#fff;
		height:70px !important;
		position:fixed;
			-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2);
		box-shadow:0 3px 3px rgba(0,0,0,.2);
	}
	#TopHeadHeightFixed {
		display:block;
		height:70px;
	}

	#TopHead .BotmRow {
		background: none;
		box-shadow: none;
	}
	#TopHead .BotmRow .Logo {
		float:none;
		margin:8px 0 11px 10px;
	}
	#TopHead .BotmRow .Logo img { height:51px;}

	.ImageStyle::before {
		right: -20px;
		left: -20px;
	}
	.Intrduction { margin-top: 0;}

	#Welcome.WhiteWrapper { padding-bottom:0;}

	#About .ColorBox::before,
	#About .ColorBox::after { display:none;}
	
	.ColorBox { padding: 40px 30px 20px 30px;}
	
	#OurFocus > .MainWrapper > .row {
		margin-left:-15px;
		margin-right:-15px;
	}
	#OurFocus > .MainWrapper > .row > * {
		padding-left:15px;
		padding-right:15px;
	}
	
	#Contact.WhiteWrapper {padding:0;}
	#Contact .MainWrapper { margin:0;}
	.SocialLink { padding-top:40px;}

	.MainWrapper { margin:0px 20px;}
	#TopHead .BotmRow .Logo { margin-left:15px;}
	
	.Margin30 .row {
		margin-left:-15px;
		margin-right:-15px;
	}
	.Margin30 .row > * {
		padding-left:15px;
		padding-right:15px;
	}
	
	#OurFocus .Boxxx { text-align:center;}
	
	.Introduction { padding:0 10px;}
	.ColorBanner::before { display:none;}

	.ColorBanner .Inner { padding:40px 30px;}
	
	.BorderImage .Title {font-size: 7vw;}
	.BorderImage .Title {
		left: 60px !important;
		right: auto !important;
		bottom:60px;
	}
}


/***** for 1024px or less ===========*/
@media All and (max-width:991px) {
	.ParallaxWrapp { background-attachment:scroll;}

	/*.BorderImage .Title {
		font-size: 40px;
		line-height: 38px;
		left: 50px;
		bottom: 50px;
	}
	.SideBoxColum .flex-column-reverse .BorderImage .Title { right:50px;}*/

	.SocialLink .Links {
		font-size: 5vw;
		line-height: 1.1em;
		font-weight: 700;
	}
}


/***** for 768px or less ===========*/
@media All and (max-width:767px) {
	.ColorBox .Boxxx { text-align:center;}
}

@media All and (max-width:760px) {
	.WhiteWrapper, .GreyWrapper, .DarkWrapper, .LightWrapper, 
	.ColorWrapper, .ParallaxWrapp > div { padding: 40px 0 20px 0;}

	.TitleStyle {margin-bottom: 25px;}
	
	.TitleStyle .Top {
		font-size: 30px;
		line-height: 30px;
		margin-bottom:15px;
	}
	
	.TitleStyle .Bottom,
	.TitleStyle .Tagline {
		font-size: 18px;
		line-height: 22px;
	}
	.TitleStyle .Bottom span{ padding-bottom:2px;}
	.TitleStyle .Tagline { margin-bottom: 25px;}
	
	#FashionVideo.MyBox .modal-dialog { width:95%;}
	
	#Intro::before,
	.BorderImage::before {
		top:10px;
		right:20px;
		bottom:10px;
		left:20px;
	}
	#Intro::after,
	.BorderImage::after {
		top:20px;
		right:10px;
		bottom:20px;
		left:10px;
	}

	.ImageWrapper::before {height: 50px;}
	
	.BorderImage .Title {
		left: 35px !important;
		bottom: 35px;
		font-size: 8vw;
	}
}


/***** for 576px or less ===========*/
@media All and (max-width:576px) {
	.TitleStyle .Top {
		font-size: 24px;
		line-height: 28px;
		font-weight: 600;
		margin-bottom:10px;
	}
	.TitleStyle .Bottom,
	.TitleStyle .Tagline { letter-spacing:2px;}
	.TitleStyle .Tagline { margin-bottom: 20px;}
	.TitleStyle .Bottom span { padding-bottom: 0;}
	
	#OurFocus .Boxxx { line-height:22px;}
	.Boxxx .Title {
		font-size: 19px;
		line-height: 20px;
	}

	/*.BorderImage .Title {
		font-size: 30px;
		line-height: 28px;
		left: 30px;
		bottom: 30px;
	}
	.SideBoxColum .flex-column-reverse .BorderImage .Title { right:30px;}*/
	
	.ColorBox, .SideBoxColum .Inner,
	.ColorBanner .Inner {
		padding-left:20px;
		padding-right:20px;
	}
	.Introduction {padding: 0;}
	
	#Footer .Hide {display: none;}
	#Footer .Inline {display: block;}
	
	.SlidePopup .Inner { padding: 25px;}
	.SlidePopup::before {
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
	}
	.SlidePopup .Box { padding: 20px;}
	.SlidePopup .TitleStyle .Top {
		font-size: 26px;
		line-height: 28px;
		margin-bottom: 8px;
	}
	
	.Boxxx .Theme.btn.AnchorBtn a { padding:10px;}
}

/***** for 480px or less ===========*/
@media All and (max-width:400px) {

}