/* PROJECTS : VANA FINE JEWELLERY  	*/
/*   CREATOR : LULU KWA http://lulukwa.com/	   */
/*   DATE : 20200504	  */


* {margin: 0;}
body, html { font-family: 'Merriweather', serif; height: 100%; font-size: 18px; }

a { color: #FEB729; }
a:hover,
a:active,
a:focus  { color: #000000; text-decoration: none; outline: none; }

h1 { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; }
h2, h3, h4, h5 { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; }
p, ul li, ol li { line-height: 1.8; }

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }


.Transition02 {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;	
}
.Transition05 {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;	
}
.Transition03 {
  -webkit-transition: all 1.0s cubic-bezier(0.54,-0.21, 0.89, 0.01);
  -moz-transition: all 1.0s cubic-bezier(0.54,-0.21, 0.89, 0.01);
  -ms-transition: all 1.0s cubic-bezier(0.54,-0.21, 0.89, 0.01);
  -o-transition: all 1.0s cubic-bezier(0.54,-0.21, 0.89, 0.01);
  transition: all 1.0s cubic-bezier(0.54,-0.21, 0.89, 0.01);	
}
.Transition04 {
  -webkit-transition: all 2.2s cubic-bezier(0.2, 0.02, 0, 0.93);
  -moz-transition: all 2.2s cubic-bezier(0.2, 0.02, 0, 0.93);
  -ms-transition: all 2.2s cubic-bezier(0.2, 0.02, 0, 0.93);
  -o-transition: all 2.2s cubic-bezier(0.2, 0.02, 0, 0.93);
} 

.my-100 {margin-top: 8rem; margin-bottom: 8rem;}
.py-100 {padding-top: 8rem; padding-bottom: 8rem;}

/*============================================================================================*/
/* COMPONENTS */
/*============================================================================================*/
.white-txt { color: #FFFFFF; }
.yellow-txt { color: #FEB729; }

h2.TitleIcon { position: relative; margin-top: 90px; display: inline-block; font-size: 48px; }
h2.TitleIcon:before { content: url(../images/icon_jewellery.png); position: absolute; top:-100px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; display: block; }
h2.TitleIcon.white-txt:before { content: url(../images/icon_jewellery_w.png); }

.btn { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; border-radius: 0; padding-left: 2rem; padding-right: 2rem; }

.btn-Icon { color: #FFFFFF; display: block; }
.btn-Icon:hover { color: #FEB729; }

/*BTN WHITE*/
.btn-White { color: #000000; background-color: #FFFFFF; border-color: #FFFFFF; } 
 
.btn-White:hover, .btn-White:focus, 
.btn-White:active, .btn-White.active, 
.open .dropdown-toggle.btn-White { color: #000000; background-color: #FEB729; border-color: #FEB729; } 
 
.btn-White:active, .btn-White.active, 
.open .dropdown-toggle.btn-White { background-image: none; } 
 
.btn-White.disabled, .btn-White[disabled], 
fieldset[disabled] .btn-White, .btn-White.disabled:hover, 
.btn-White[disabled]:hover, fieldset[disabled] .btn-White:hover, 
.btn-White.disabled:focus, .btn-White[disabled]:focus, 
fieldset[disabled] .btn-White:focus, .btn-White.disabled:active, 
.btn-White[disabled]:active, fieldset[disabled] .btn-White:active, 
.btn-White.disabled.active, .btn-White[disabled].active, 
fieldset[disabled] .btn-White.active { background-color: #FFFFFF; border-color: #FFFFFF;} 
 
.btn-White .badge { color: #FFFFFF; background-color: #000000; }

/*BTN WHITE OUTLINE*/
.btn-W-Outline { color: #FFFFFF; border-color: #FFFFFF;  }
.btn-W-Outline:hover, .btn-W-Outline:focus, 
.btn-W-Outline:active, .btn-W-Outline.active, 
.open .dropdown-toggle.btn-W-Outline { color: #FEB729; border-color: #FEB729; } 
 
.btn-W-Outline:active, .btn-W-Outline.active, 
.open .dropdown-toggle.btn-W-Outline { background-image: none; } 
 
.btn-W-Outline.disabled, .btn-W-Outline[disabled], 
fieldset[disabled] .btn-W-Outline, .btn-W-Outline.disabled:hover, 
.btn-W-Outline[disabled]:hover, fieldset[disabled] .btn-W-Outline:hover, 
.btn-W-Outline.disabled:focus, .btn-W-Outline[disabled]:focus, 
fieldset[disabled] .btn-W-Outline:focus, .btn-W-Outline.disabled:active, 
.btn-W-Outline[disabled]:active, fieldset[disabled] .btn-W-Outline:active, 
.btn-W-Outline.disabled.active, .btn-W-Outline[disabled].active, 
fieldset[disabled] .btn-W-Outline.active {  border-color: #FEB729;} 

/*BTN Black OUTLINE*/
.btn-Black-Outline { color: #000000; border-color: #000000;  }
.btn-Black-Outline:hover, .btn-Black-Outline:focus, 
.btn-Black-Outline:active, .btn-Black-Outline.active, 
.open .dropdown-toggle.btn-Black-Outline { color: #FEB729; border-color: #FEB729; } 
 
.btn-Black-Outline:active, .btn-Black-Outline.active, 
.open .dropdown-toggle.btn-Black-Outline { background-image: none; } 
 
.btn-Black-Outline.disabled, .btn-Black-Outline[disabled], 
fieldset[disabled] .btn-Black-Outline, .btn-Black-Outline.disabled:hover, 
.btn-Black-Outline[disabled]:hover, fieldset[disabled] .btn-Black-Outline:hover, 
.btn-Black-Outline.disabled:focus, .btn-Black-Outline[disabled]:focus, 
fieldset[disabled] .btn-Black-Outline:focus, .btn-Black-Outline.disabled:active, 
.btn-Black-Outline[disabled]:active, fieldset[disabled] .btn-Black-Outline:active, 
.btn-Black-Outline.disabled.active, .btn-Black-Outline[disabled].active, 
fieldset[disabled] .btn-Black-Outline.active {  border-color: #FEB729;} 


/*SLICK*/
.slick-slide:focus { outline: none; }
.slick-prev, .slick-next { z-index: 1; width: 50px; height: 50px; border: 1px solid #FEB729; border-radius: 50%; }
.slick-next { right: 25px; }
.slick-prev { left: 25px; }
.slick-prev:before, .slick-next:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 23px; opacity: 1; color: #FEB729; }
.slick-prev:before { content: "\f053"; padding-right: 5px; }
.slick-next:before { content: "\f054"; padding-left: 5px; }

.slick-dots { bottom: 25px; }
.slick-dots li button {  border-radius: 50%; width: 10px; height: 10px; background: transparent; border: 2px solid #FEB729; padding: 0; }
.slick-dots li.slick-active button { background: #FEB729;  }
.slick-dots li button:before { content: ""; }

/*MODAL*/
.modal .modal-body { padding: 0; overflow: hidden; }
.modal .modal-body:after { content: url(../images/bg_jewellery_sm.png); position: absolute; bottom: -180px; right: -80px; }
.modal .modal-content { border-radius: 0; }
.modal .modal-content .CloseModal { position: absolute; top: -30px; right: 0; color: #FFFFFF; font-family: 'Archivo Narrow', sans-serif; font-weight: 400; }
.modal .modal-content .ModalImgBox { background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; height: 100%; width: 100%; margin-left: -15px; }
.modal .modal-content .ModalContentBox { padding: 3rem 2rem; }


/*============================================================================================*/
/* SITE STRUCTURE */
/*============================================================================================*/
html.ComingSoonPG { background: url(../images/vana_fine_coming_soon.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.ComingSoonWrap { display: block; width: 100%; height: 100%; position: relative;  }

main { margin-top: 123px; }

/* HEADER */
header .navbar{ background: #FFFFFF;  }
header .navbar .nav-item { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; font-size: 20px;  }
header .navbar .nav-item a.nav-link { color: #000000; padding-left: 1rem; padding-right: 1rem; }
header .navbar .nav-item a.nav-link:hover { color: #FEB729; }

/* Animated Hamburger Menu */
.navbar-toggler[data-toggle="collapse"] {	padding: 0;	border: none;	font-size: inherit;	color: #444;	position: relative; }
.navbar-toggler-icon { width: 24px; height: 18px; display: block; position: relative; background-image: none; border-bottom: 2px solid; transition: all 0.2s ease; }
.navbar-toggler-icon:before,
.navbar-toggler-icon:after { content: ""; right: 0; width: 100%; display: block; position: absolute; border-top: 2px solid; transition: all 0.2s ease; }
.navbar-toggler-icon::before { top: 0%; }
.navbar-toggler-icon:after { top: 50%; }

.navbar-toggler[data-toggle="collapse"][aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; transform: rotate(45deg); }
.navbar-toggler[data-toggle="collapse"][aria-expanded="true"] .navbar-toggler-icon:before { -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); transform: rotateZ(90deg); }
.navbar-toggler[data-toggle="collapse"][aria-expanded="true"] .navbar-toggler-icon:after { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); }
.navbar-toggler[data-toggle="collapse"][aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[data-toggle="collapse"][aria-expanded="true"] .navbar-toggler-icon:after { width: 100%; top: 50%; }


/* FOOTER */
footer { background: #FEB729; }
footer p { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; color: #000000; margin-bottom: 0; font-size: 14px; }
footer a { color: #000000; }
footer a:hover { color: #FFFFFF; }
footer .footer-icon { font-size: 30px; }

/* BUTTON TO TOP */
#FixedCTABox { position: fixed; bottom: 20px; right: 0px; width: 50px; height: 110px; z-index: 100;	display: none; }
.BtnTop a { background: #E4E4E4; width: 50px; height: 50px; display: block; text-decoration: none; z-index: 1; }
.BtnTop a i { color: #FEB729; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	transition: all 0.3s ease; }
.BtnTop a:hover i { color: #000000; top: 10px; } 

/*============================================================================================*/
/* HOME */
/*============================================================================================*/
.OpeningWrap { display: block;  background: #FFFFFF; position: fixed; width: 100%; height: 100%; z-index: 99999; overflow: hidden; }
#myVideo { position: fixed;  top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000000; width: 100%; height: auto; }
.SkipBtn { position: fixed; z-index: 1000001; bottom: 50px; right: 50px; font-family: 'Archivo Narrow', sans-serif; font-weight: 400;  }

/* SLIDER MAIN BANNER SEC */
.MainBanner { position: relative; z-index: 20; }

.MainBanner .BannerWrap { position: relative; z-index: 20; }
.MainBanner .BannerWrap .BannerContent { position: relative; z-index: 100; }
.MainBanner .BannerWrap .container { min-height: 650px; }
.MainBanner .BannerWrap h1 { font-size: 38px; }
.MainBanner .BannerWrap p { font-size: 16px; }

.MainBanner .BannerWrap .BannerImg { background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 90; }

.MainBanner.slick-slider .slick-slide .BannerWrap .BannerImg { transform: scale(1.1); -webkit-transition:all 6s cubic-bezier(0.26, 0.01, 0.57, 1.01); }
.MainBanner.slick-slider .slick-slide.slick-active .BannerWrap .BannerImg { transform: scale(1);  }

.MainBanner.slick-slider .slick-slide .BannerWrap h1 { transform: translate(0px, 20px); opacity: 0; -webkit-transition: all 1.6s 0.5s cubic-bezier(0.59, 0.06, 0, 1); }
.MainBanner.slick-slider .slick-slide.slick-active h1 { transform: translate(0px, 0px); opacity: 1; }

.MainBanner.slick-slider .slick-slide .BannerWrap p { transform: translate(0px, -20px); opacity: 0; -webkit-transition: all 1.6s 0.5s cubic-bezier(0.59, 0.06, 0, 1); }
.MainBanner.slick-slider .slick-slide.slick-active p { transform: translate(0px, 0px); opacity: 1; }

.MainBanner.slick-slider .slick-slide .BannerWrap a.btn { transform: translate(0px, -20px); opacity: 0; -webkit-transition: all 1.6s 0.5s cubic-bezier(0.59, 0.06, 0, 1); }
.MainBanner.slick-slider .slick-slide.slick-active a.btn { transform: translate(0px, 0px); opacity: 1; }


/*OUR STORY SEC*/
.OurStoryWrap { position: relative; z-index: 10; }
.OurStoryWrap .img-bgtop { position: absolute;  top: -190px; left: 170px; }
.OurStoryWrap .img-bgbottom { position: absolute;  bottom: -340px; right: 100px; }

.img-layer-container { position: relative; top: 50px; left: -30px; z-index: 11; }
.img-layer-container .img-ourstory { position: absolute; top: 0; left: 20px; }
.img-layer-container .img-rectangle { position: absolute; top: 70px; right: 20px; }



/*COLLECTIONS SEC*/
.CollectionsListing { width: 100%; height: 400px; margin: 20px 0px 100px; }
.CollectionsListing ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; }
.CollectionsListing ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 400px; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; }

.CollectionsListing ul li .Item { display: block; overflow: hidden; width: 100%; }
.CollectionsListing ul li .Item a { display: block; height: 400px; width: 100%; position: relative; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  -webkit-transition: all 400ms ease; transition: all 400ms ease;  }
.CollectionsListing ul li .Item a * { opacity: 1; margin: 0; text-overflow: ellipsis; position: relative; white-space: nowrap; overflow: hidden;  -webkit-transition: all 400ms ease; transition: all 400ms ease; }
.CollectionsListing ul li .Item a span.btn-WOutline { color: #FFFFFF; border-color: #FFFFFF; top: 50%; transform: translateY(-50%); opacity: 0; }
.CollectionsListing ul li .TitleBox { position: absolute; bottom: -60px; display: block; width: 100%; text-align: center;  }

.CollectionsListing ul:hover li { width: 8%; }
.CollectionsListing ul:hover li:hover { width: 13%; }
.CollectionsListing ul:hover li:hover .Item a { background: rgb(254,183,41,0.5) }
.CollectionsListing ul:hover li:hover .Item a span.btn-WOutline { opacity: 1; }

/*TESTIMONAILS SEC*/
.TestimonialsWrap { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 12; }
.TestimonialsWrap:before { content: ""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgb(255,255,255,.40) }

.TestimonialsListing {}
.TestimonialsListing .Item { background: #FFFFFF; margin: 2.5rem .5rem 0; padding: 2rem 1rem 1rem; padding-top: 3rem; position: relative; min-height: 370px; }
.TestimonialsListing .Item .Badge { position: absolute; top: -40px; left:50%; transform: translateX(-50%); }

.TestimonialsListing .slick-next { right: -55px; }
.TestimonialsListing .slick-prev { left: -55px; }
.TestimonialsListing .slick-dots { bottom: -45px; }

/*INSTAGRAM SEC*/
.InstagramWrap { background: #F2F2F2; position: relative; z-index: 10; }
.InstagramWrap .img-bginsta { position: absolute;  top: 200px; left: 50px; z-index: 11; }

.JuicerWrap .juicer-feed { overflow-y: inherit; overflow-x: inherit;  }
.JuicerWrap .juicer-feed.slider .slick-prev, 
.JuicerWrap .juicer-feed.slider .slick-next { width: 50px; height: 50px; border: 1px solid #FEB729; border-radius: 50%; background: transparent; top: 90px; }
.JuicerWrap .juicer-feed.slider .slick-prev { left: -60px; padding: 10px 10px 10px 10px; }
.JuicerWrap .juicer-feed.slider .slick-next { right: -60px; padding: 10px 10px 10px 10px; }
.JuicerWrap .juicer-feed.slider .slick-prev:before, 
.JuicerWrap .juicer-feed.slider .slick-next:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 23px; opacity: 1; color: #FEB729; line-height: inherit; }
.JuicerWrap .juicer-feed.slider .slick-prev:before { content: "\f053"; }
.JuicerWrap .juicer-feed.slider .slick-next:before { content: "\f054"; }
.JuicerWrap .juicer-feed .j-instagram-bg { background: transparent; }


/*WHY US SEC*/
.WhyUsWrap { position: relative; z-index: 5; }
.WhyUsWrap .img-bgwhyus { position: absolute;  top: 200px; right: 50px; z-index: 6; }

/*CONTACT US SEC*/
.ContactUsWrap { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
.ContactUsWrap:before { content: ""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.70) }

.GoogleMapWrap { display: block; height: 400px; width: 100%; }


/*============================================================================================*/
/* SUB PAGES */
/*============================================================================================*/

.PageCover { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 4rem 0; }
.PageCover:before { content: ""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.40) }
.PageCover h1 { font-size: 48px; font-weight: 500; color: #FFFFFF; }