/* -------------------------------- 

Primary style

-------------------------------- */
html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

*, *::after, *::before { box-sizing: border-box; }






header { position: relative; }
header h1 { text-align: center; font-size: 2rem; }

@media only screen and (min-width: 768px) {
    header h1 { font-size: 3rem; }
}

@media only screen and (min-width: 1170px) {
    header h1 { font-weight: 300; }
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-product-viewer-wrapper { text-align: center; padding: 2em 0; }
.cd-product-viewer-wrapper > div { display: inline-block; }
.cd-product-viewer-wrapper .product-viewer { position: relative; z-index: 10; display: inline-block; overflow: hidden; }
.cd-product-viewer-wrapper img { /* this is the image visible before the image sprite is loaded */ display: block; position: relative; z-index: 10; }
.cd-product-viewer-wrapper .product-sprite { position: absolute; z-index: 9999; top: 0; left: 0; height: 100%; /* our image sprite is composed by 16 frames */ width: 1600%; background: url(../assets/img/micr.jpg) no-repeat center center; background-size: 100%; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; }
.cd-product-viewer-wrapper.loaded .product-sprite { /* image sprite has been loaded */ opacity: 1; cursor: ew-resize; }

.cd-product-viewer-handle { position: relative; z-index: 99999; width: 60%; max-width: 300px; border-radius: 50em; margin: 2em auto 3em; height: 4px; background: #b4b4b4; }
.cd-product-viewer-handle .fill { /* this is used to create the loading fill effect */ position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; border-radius: inherit; background: #1c69d4; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; }
.no-csstransitions .cd-product-viewer-handle .fill { display: none; }
.loaded .cd-product-viewer-handle .fill { /* image sprite has been loaded */ opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.2s 0.3s; transition: transform 0.3s, opacity 0.2s 0.3s; }
.cd-product-viewer-handle .handle { position: absolute; z-index: 99999; display: inline-block; height: 44px; width: 44px; left: 0; top: -20px; background: #000 url(../../images/cd-arrows.png) no-repeat center center; border-radius: 50%; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.24), 0 0 20px rgba(0, 0, 0, 0.2); /* replace text with image */ text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: box-shadow 0.2s; -moz-transition: box-shadow 0.2s; transition: box-shadow 0.2s; }
.cd-product-viewer-handle .handle:active { box-shadow: 0 0 0 0 rgba(181, 66, 64, 0), 0 0 20px rgba(0, 0, 0, 0.2); }
.loaded .cd-product-viewer-handle .handle { /* image sprite has been loaded */ -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-animation: cd-bounce 0.3s 0.3s; -moz-animation: cd-bounce 0.3s 0.3s; animation: cd-bounce 0.3s 0.3s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; cursor: ew-resize; }

@-webkit-keyframes cd-bounce {
    0% { -webkit-transform: translateX(-50%) scale(0); }
    60% { -webkit-transform: translateX(-50%) scale(1.1); }
    100% { -webkit-transform: translateX(-50%) scale(1); }
}

@-moz-keyframes cd-bounce {
    0% { -moz-transform: translateX(-50%) scale(0); }
    60% { -moz-transform: translateX(-50%) scale(1.1); }
    100% { -moz-transform: translateX(-50%) scale(1); }
}

@keyframes cd-bounce {
    0% { -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); }
    60% { -webkit-transform: translateX(-50%) scale(1.1); -moz-transform: translateX(-50%) scale(1.1); -ms-transform: translateX(-50%) scale(1.1); -o-transform: translateX(-50%) scale(1.1); transform: translateX(-50%) scale(1.1); }
    100% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
}

.showcaseLay2 .navLink.medium .navigation li:after { width: 15px; height: 1px; float: right; }
.showcaseLay2 .navLink.medium .navigation li.selected:after { width: 30px; }

.showcaseLay2 .ofrLay2 { display: block!important; }
.showcaseLay2 .ofrLay1 { display: none!important; }

.showcaseLay2 .ucFullImage .lTitleBlk { font-weight: 400; font-size: 32px!important; position: relative; margin-bottom: 20px !important; padding-bottom: 10px !important;; }
.showcaseLay2 .ucFullImage .lTitleBlk:before { content: ""; background: #ccc; height: 2px; width: 28px; position: absolute; bottom: 0px; left: 50%; }

.square-flipOff { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform: perspective(1000px); -moz-transform: perspective(1000px); -ms-transform: perspective(1000px); transform: perspective(1000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /* border: 1px solid #efefef; */ position: relative; float: left; margin: 10px; box-shadow: 0px 60px 30px #00000024; margin: 20px; }
.square-flipOff .squareOff { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d; z-index: 1; }
.squareOff { background-size: cover; background-position: center center; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); overflow: hidden; position: absolute; top: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; }
.square-containerOff { padding: 40px 40px 0px; text-align: center; position: relative; top: 14%; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(0px) scale(1); -ms-transform: translateY(-50%) translateX(0px) scale(1); transform: translateY(-50%) translateX(0px) scale(1); transform-style: preserve-3d; z-index: 2; }
.square-container2Off { padding: 40px; text-align: center; position: relative; top: 50%; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88); transform-style: preserve-3d; z-index: 2; }
.square-flipOff h3 { color: #477bbc; font-family: "bmw bold",arial; font-size: 16px; line-height: 26px; }
.square-flipOff h2 { color: black; font-family: "bmw light",arial; font-size: 18px; letter-spacing: 0.5px; margin-bottom: 0px; }
.flip-overlayOff { display: block; background: rgba(0,0,0,0.0); width: 100%; height: 100%; position: absolute; top: 0; }
.square-flipOff .square2Off { background-color: rgb(255, 255, 255) !important; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); transform-style: preserve-3d; z-index: 1; }
/*.flipImageOff { height: 67%; width: 100%; background-size: cover; background-position: center center; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); overflow: hidden; position: absolute; bottom: 0; }*/
.squareOff, .square2Off, .square-flipOff { width: 100%; height: 100%; }
.square-flipOff { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform: perspective(1000px); -moz-transform: perspective(1000px); -ms-transform: perspective(1000px); transform: perspective(1000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /* border: 1px solid #efefef; */ position: relative; float: left; margin: 10px; box-shadow: 0px 60px 30px #00000024; }
.square2Off { background-size: cover; background-position: center center; -ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); overflow: hidden; position: absolute; top: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.square-flipOff:hover .squareOff { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); transform-style: preserve-3d; }
.square-flipOff:hover .square2Off { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d; }
.square-flipOff:hover .square-container2Off { -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1); transform-style: preserve-3d; }
.square-flipOff:hover .square-containerOff { -webkit-transform: translateY(-50%) translateX(-650px) scale(.88); -ms-transform: translateY(-50%) translateX(-650px) scale(.88); transform: translateY(-50%) translateX(-650px) scale(.88); transform-style: preserve-3d; }
.square-flipOff:hover .squareOff .boxshadow, .square-flipOff:hover .squareOff .textshadow { -webkit-box-shadow: 240px 42px 58px -8px rgb(0 0 0 / 0%); -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0); box-shadow: 240px 42px 58px -8px rgb(0 0 0 / 0%); }
.square-flipOff { width: 355px; height: 355px; }
.square-flipOff .squareOff .boxshadow, .square-flipOff .squareOff .textshadow, .square-flipOff .square2Off .boxshadow, .square-flipOff .square2Off .textshadow { -ms-transition: 0.60s; transition: 0.60s; -webkit-transition: 0.60s; }
.flipLiOff { padding: 10px !important; }
.square2Off .button.squarestroke02 { background: #1c69d4; color: #fff; max-width: 260px; border: none; margin-left: 0px; font-size: 18px; opacity: 1; letter-spacing: 1px!important; position: relative; border-radius: 0px; padding-top: 12px; width: auto !important; padding: 16px 32px; }
.square2Off .button.squarestroke02:hover { background: #1c69d4!important; color: #fff!important; }
.square2Off h2 { font-size: 24px; color: #fff; }
.flip-overlayOff { display: block; background: rgba(0,0,0,0.0); width: 100%; height: 100%; position: absolute; top: 0; }
.square2Off .flip-overlayOff { display: block; background: rgba(0,0,0,1.0); width: 100%; height: 100%; position: absolute; top: 0; }
.square-flip { /*width: 355px;*/ height: 355px; }
.showcaseLay2 .ucOffer .grid h2 { color: #000; text-align: center; }


.container.fullWdtGlry { height: auto!important; }
.ucFullBGSlider .wrap { padding: 0px!important; }
.ucFullBGSlider .thumbnail-77 { background-color: #000!important; }
.ucFullBGSlider .box-77:hover .thumbnail-77 img, .ucFullBGSlider .thumbnail-77 img { -webkit-transform: scale(1)!important; transform: scale(1)!important; opacity: 0.77!important; }
.ucFullBGSlider .owl-nav button { font-size: 20px!important; width: 80px!important; height: 80px!important; background-color: rgba(0,0,0,0.41)!important; color: #FFF!important; }
.ucFullBGSlider .owl-nav button i { font-size: 40px!important; }
.ucFullBGSlider .carousel .owl-nav { left: 80px!important; right: 80px!important; transform: translateY(calc(-50% - 40px))!important; }
.ucFullBGSlider .margb .mreInfo { }
.ucFullBGSlider .margb p:first-child { font-weight: bold; margin-bottom: 10px!important; }
.ucFullBGSlider .margb { position: absolute; bottom: 10%; width: 40%; left: 190px; font-size: 18px; margin-bottom: 0px!important; }
.ucFullBGSlider .margb p { font-size: 18px!important; color: #FFF!important; }
.ucFullBGSlider .toCenter.bottom { width: 100%; }
.ucFullBGSlider .nextSlide img { margin-bottom: 0px; }

@media only screen and (min-width: 768px) {
    .ucFullBGSlider .margb .mreInfo { display: block!important; }
}
@media only screen and (max-width: 1199px) {
    .ucFullBGSlider .carousel .owl-nav { left: 45px!important; right: 45px!important; }
    .ucFullBGSlider .owl-nav button { font-size: 24px!important; width: 50px!important; height: 50px!important; }
    .ucFullBGSlider .owl-nav button i { font-size: 24px!important; }
    .ucFullBGSlider .margb { position: initial!important; padding: 20px; transform: none!important; width: 100%!important; }
    .ucFullBGSlider .margb p { font-size: 16px!important; color: #000!important; }
}

@media only screen and (max-width: 768px) {
    .ofrLay2 .col-4-12.flipLiOff { max-width: 100%; }
    .ofrLay2 .col-4-12.flipLiOff .square-flipOff { margin: 0px; box-shadow: 0px 0px 21px 0px #00000024; width: 100%; }
    .ucFullBGSlider .carousel .owl-nav { transform: none!important; }
    .ucFullBGSlider .margb p { font-size: 14px!important; }
}
@media screen and (max-width: 767px) {
    .ucFullBGSlider .carousel .owl-nav { top: 15%!important; left: 15px!important; right: 15px!important; }
    .ucFullBGSlider .owl-nav button { font-size: 10px!important; width: 35px!important; height: 35px!important; }
    .ucFullBGSlider .owl-nav button i { font-size: 18px!important; }
}

.galleryRpt img { margin: auto; }