/* Circular Content Carousel Style */ .ca-container { position:relative; margin:25px auto 20px auto; height:450px; } .ca-container.container {padding:0;} .ca-wrapper{ width:100%; height:100%; position:relative; overflow:hidden;} /* Item */ .ca-item { position:relative; float:left; width:390px; height:100%; text-align:center; -webkit-transition:opacity .15s ease-in-out, -webkit-transform .2s ease-in-out .1s; transition:opacity .15s ease-in-out, -webkit-transform .2s ease-in-out .1s; transition:opacity .15s ease-in-out, transform .2s ease-in-out .1s; transition:opacity .15s ease-in-out, transform .2s ease-in-out .1s, -webkit-transform .2s ease-in-out .1s; outline:none;} .ca-item.ca--opened {z-index: 1;} /* If a panel is opened */ .ca--is-rolling .ca-item:not(.ca--opened) {opacity: .2} .ca--is-rolling .ca-nav {display: none;} /* More button */ .ca-container .ca-more{ position: absolute; bottom: 15px; right:0px; font-weight:700; padding-right: 15px; text-transform:uppercase; border-top-right-radius:0; border-bottom-right-radius:0; } .ca-more .glyphicon {margin-left: 5px;} /* Text starting */ .ca-starting{ position: absolute; bottom: 20px; left: 20px; padding: 0; font-weight: 500; line-height: 27px; font-size: 18px; color: #a2a2a2; } .ca-starting strong { color: #999; } /* Inner item */ .ca-item-main { padding:20px; position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden; box-shadow:0px 0px 3px #000; opacity:0.7; border-radius: 3px; -webkit-transition: opacity .15s ease-out, box-shadow .15s ease-out; transition: opacity .15s ease-out, box-shadow .15s ease-out; } .ca-item.ca--opened .ca-item-main, .ca-item-main:hover { opacity:1; box-shadow:0px 0px 10px #000; } .ca-item-main .ca-background { position:absolute; top:0; left:0; right:0;bottom:0; z-index:0; background-color:#fff; border-radius:3px;} .ca-background-img {width:100%; height:100%;} /* Item content */ .ca-icon { width: 100%; height:45%; position:relative; margin:0 auto; background-repeat: no-repeat; background-position: center center; background-size:contain; } .ca-icon img {height:200px; width:auto; } .ca-icon-img {position: relative; height: 45%; width: 100%;} .ca-item .ca-title {text-transform:uppercase; font-size: 24px; color:#595959; margin: 20px 0 15px; text-align:center; line-height: 1.3; position: relative;} .ca-item .ca-text { font-size:12px; text-align:left; padding-left:0; margin:0; position:relative; font-weight: 500; line-height: 1.8; } /* Close button */ .ca-close{ position:absolute; top:10px; right:10px; width:27px; height:27px; outline:none; opacity:0.7; } .ca-close > span {margin:6px;} .ca-close:hover{ opacity:1.0; } /* Panel content */ .ca-content-wrapper{ background: #f5f5f5; position:absolute; width: calc(200% - 5px); height: calc(100% - 10px); top:5px; text-align:left; z-index:10000; overflow:hidden; border-radius: 3px; box-shadow: 0px 0px 10px #000; opacity: 0; visibility: hidden; left:0; -webkit-transition:opacity .15s ease-out .1s, left .2s ease-out .1s, visibility .2s ease-out .1s; transition:opacity .15s ease-out .1s, left .2s ease-out .1s, visibility .2s ease-out .1s; } @media (min-width: 992px) { .ca-wrapper[data-max="2"] .ca-content-wrapper {width: calc(100% - 5px);} .ca-wrapper[data-max="4"] .ca-content-wrapper {width: calc(300% - 5px);} } .ca--opened .ca-content-wrapper{ opacity: 1; visibility: visible; left:100%; } .ca-content{ width: 100%; overflow: auto; padding: 30px; height: 100%;} .ca-content .ca-panel-title { margin: 0 0 20px 0; font-size:30px; padding-bottom: 10px; color:#595959; line-height: 1.4; border-bottom: 2px solid #ccc; } .ca-content-text {margin-bottom: 20px;} /* detect if only one item */ .ca-container[data-count="1"] .ca-item.ca--opened .ca-content-wrapper {left: calc(33.3333% + 15px); } .ca-container[data-count="1"] .ca-item.ca--opened .ca-item-main {width: 33.3333%; } .ca-container[data-count="1"] .ca-item .ca-content-wrapper { width: calc(66.6666% - 20px); } /* detect if only 2 items */ .ca-container[data-count="2"] .ca-item.ca--opened .ca-content-wrapper {left: calc(100% + 5px); } .ca-container[data-count="2"] .ca-item .ca-content-wrapper { width: calc(100% - 10px); } /* Navigation */ .ca-container .znSlickNav { opacity:0; -webkit-transition: opacity .15s ease-out; transition:opacity .15s ease-out; } .ca-container:hover .znSlickNav {opacity:1; } .ca-container .znSlickNav .znSlickNav-arr {width: 50px; height: 30px; display: block; position: absolute; top: 50%; color: #fff; margin-top: -15px; text-align: center; z-index: 1; border-radius: 0px; } .ca-container .znSlickNav .znSlickNav-arr svg {display: block; margin: 0 auto; width: 50px; height: 30px;} .ca-container .znSlickNav .znSlickNav-arr polyline {stroke:currentColor; stroke-width: 10px; opacity:.2;} .ca-container .znSlickNav .znSlickNav-arr:hover polyline {stroke-width: 15px; opacity:1;} .ca-container .znSlickNav .znSlickNav-arr:active polyline {stroke-width: 25px;} .ca-container .znSlickNav .znSlickNav-arr.znSlickNav-prev {left: -50px;} .ca-container .znSlickNav .znSlickNav-arr.znSlickNav-next {right: -50px;} /* Content stuff */ .ca-content .links {margin:20px 0 0; padding:0;} .ca-content .links li {float:left; margin-left:15px; } .ca-content .links li:first-child {margin-left:0; } .ca-content .links li a {display:block; padding:0 10px; background:#CD2122; color:#fff; line-height:30px; border-radius:2px; } .ca-content .links li a span { margin:3px 10px 0 0; } .ca-content .links li.price a {background:#333; font-weight:700; } .ca-content .links li a:hover { background:#000; } .ca-content .other_images {float:right; margin: 0 0 0 20px; padding: 0; z-index: 1; max-width: 100px;} .ca-content .other_images li {margin-top:11px; max-height:98px;} .ca-content .other_images li:first-child {margin-top:0;} .ca-content .other_images li img:hover { box-shadow:0 0 10px rgba(0,0,0,0.4);} .ca-nav > span, ul.links li a, ul.other_images li img { -webkit-transition: all 150ms ease-out; transition: all 150ms ease-out; } .ca-alt .ca-item-main {padding:0;} .ca-alt .ca-item .ca-background {width:100%; height: 100%;} .ca-alt .ca-starting, .ca-alt .ca-starting strong {color:#fff;} /* Circle title for alternative style */ .title_circle { -webkit-transition: all 400ms cubic-bezier(0.680, 0, 0.265, 1); -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); } .title_circle {width:110px; height:110px; text-align:center; color: white; font-size: 13px; padding: 12px; display: table; line-height: 1.4; background-color:#CD2122; position:absolute; border-radius:50%; box-shadow:3px 3px 1px rgba(0,0,0,0.5); } .title_circle[data-size="small"] {width:80px; height:80px; font-size: 11px; padding: 8px; } .title_circle[data-size="medium"] {width:95px; height:95px; font-size: 12px; padding: 10px; } .title_circle span {display:table-cell; vertical-align:middle; position:relative; z-index:1; } .title_circle:before {content:''; position:absolute; top:7px; left:7px; background:#CD2122; width:30px; height:30px; border-radius:3px; } .title_circle[data-position="top-left"]:before { top:7px; left:7px;} .title_circle[data-position="top-right"]:before { top:7px; right:7px; left: auto;} .title_circle[data-position="bottom-left"]:before { bottom:7px; left:7px; top:auto;} .title_circle[data-position="bottom-right"]:before { bottom:7px; right:7px; left: auto; top:auto;} .title_circle[data-position="top"]:before, .title_circle[data-position="right"]:before, .title_circle[data-position="left"]:before, .title_circle[data-position="bottom"]:before {-webkit-transform:rotate(45deg); transform:rotate(45deg); } .title_circle[data-position="top"]:before {top: -10px; left: 50%; margin-left: -15px;} .title_circle[data-position="right"]:before { top:50%; right:-10px; left: auto; margin-top:-15px;} .title_circle[data-position="left"]:before { top:50%; left:-10px; margin-top:-15px;} .title_circle[data-position="bottom"]:before { bottom:-10px; left:50%; margin-left:-15px; top:auto;} .title_circle[data-position="bottom-right"] { box-shadow:-3px -3px 1px rgba(0,0,0,0.5);} .title_circle:hover {-webkit-transform:scale(1.1); transform:scale(1.1);box-shadow:5px 5px 1px rgba(0,0,0,0.5); } .title_circle[data-position="bottom-right"]:hover { box-shadow:-5px -5px 1px rgba(0,0,0,0.5);} /* Circular Catalogue Carousel */ /* Item content */ .ca-catalogue .ca-item-main {opacity: 1;left: 10px; right: 10px;padding: 0; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.38)} .ca-catalogue .ca-content { overflow: auto; height: 100%;} .ca-catalogue .ca-item .ca-background {background-repeat:no-repeat; background-position:center top; background-size: cover; overflow:hidden; } .ca-catalogue .ca-item .ca-background:before, .ca-catalogue .ca-item .ca-background:after {content: ''; left: 0; top:0; position: absolute; z-index:0; width: 100%; height: 100%; -webkit-transition:opacity .2s ease-out, top .2s ease-out; transition:opacity .2s ease-out, top .2s ease-out; border-radius: 3px;} /*.ca-catalogue .ca-item .ca-background:after {background-color: rgba(0, 0, 0, 0.35);}*/ .ca-catalogue .ca-item .ca-background:before { top:100%; top:40%;height: 60%; opacity:0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); } .ca-catalogue .ca-item:hover .ca-background:after{ opacity:0; } .ca-catalogue .ca-item:hover .ca-background:before{ opacity:1; } .circularcatalogue__details {position:absolute; bottom: 35px; text-align: start; color:#fff; width: calc(100% - 70px);left: 35px;} .circularcatalogue__tlabel {text-transform: uppercase; font-size: 12px; font-weight: 700; margin: 0 0 10px; letter-spacing: 3px;opacity: .8;} .circularcatalogue__title {font-size: 28px; font-weight: 400; font-weight: 300; margin: 0 0 10px; padding:0 0 15px; border-bottom: 1px solid rgba(255,255,255,0.4);line-height: 1.2;} .circularcatalogue__blabel { text-align: right; font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -2px; margin:0;} .circularcatalogue__more {display:block; left:35px; top:35px; position:absolute; } .circularcatalogue__more span {position:relative; display: inline-block; width:20px;vertical-align: middle;margin-top: -6px;} .circularcatalogue__more span:before, .circularcatalogue__more span:after {content:''; display:block; width:20px; height:2px; background:rgba(255, 255, 255, 0.5); position:absolute; left:0; -webkit-transition:all .2s ease-out; transition:all .2s ease-out;} .circularcatalogue__more span:after {top:6px;} .circularcatalogue__more:after {content: attr(data-text); margin-left:10px; opacity:0; display:inline-block; font-weight: 600; -webkit-transform: translateX(20px); transform: translateX(20px);font-size: 11px;color: rgba(255, 255, 255, 0.5); -webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out; transition:opacity .2s ease-out,-webkit-transform .2s ease-out; transition:opacity .2s ease-out,transform .2s ease-out; transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;vertical-align: middle; } .ca-item:hover .circularcatalogue__more:after {opacity:1; -webkit-transform: translateX(0); transform: translateX(0);} .ca--opened .circularcatalogue__more:after {content:'';} .ca--opened .circularcatalogue__more span:before, .ca--opened .circularcatalogue__more span:after {background:rgba(255, 255, 255, 0.7); -webkit-transform:rotate(45deg); transform:rotate(45deg); width: 20px; top:2px;} .ca--opened .circularcatalogue__more span:after {-webkit-transform:rotate(-45deg);transform:rotate(-45deg); top:2px; } /* more on dark */ .circularcatalogue__more--dark span:before, .circularcatalogue__more--dark span:after {background:rgba(0, 0, 0, 0.9);} .circularcatalogue__more--dark:after {color: rgba(0, 0, 0, 0.9);} .ca--opened .circularcatalogue__more--dark span:before, .ca--opened .circularcatalogue__more--dark span:after {background:rgba(0, 0, 0, 1); } /* side gallery */ .ca-catalogue .ca-gallery { float:right; margin:0 0 30px 30px; /*max-width: 170px;*/} .ca-catalogue .ca-gallery li { margin-bottom: 20px; } .ca-catalogue .ca-gallery a { opacity:1; -webkit-transition:opacity .15s ease-out; transition:opacity .15s ease-out; display: block;} .ca-catalogue .ca-gallery a:hover { opacity: 0.7; } @media screen and (max-width: 991px){ .ca-content-wrapper { width: calc(100% - 5px); } .ca-content { padding: 20px; overflow: auto; height:100%;} .ca-content .ca-panel-title {font-size: 22px; line-height: 1.3; } .ca-content-text {font-size: 12px;} .ca-catalogue .ca-gallery {max-width: 120px; } } @media (min-width: 768px) and (max-width: 991px){ .ca-wrapper[data-max="4"] .ca-content-wrapper { width: calc(200% - 5px); } } @media screen and (max-width: 767px){ .ca-item .ca-title { font-size: 16px; margin: 15px 0; } .ca-item .ca-text { font-size:11px; font-weight: 400; line-height: 1.6; } .ca-starting { max-width: 50%; text-align:left; } .ca-nav > span { opacity: 1;} .ca-container:hover .ca-nav > .ca-nav-next { right:0;} .ca-container:hover .ca-nav > .ca-nav-prev { left: 0;} .circularcarousel__slideshow .kl-slideshow-safepadding {padding-top: 45px !important;} .ca--opened .ca-content-wrapper, .ca-container[data-count="1"] .ca-item.ca--opened .ca-content-wrapper, .ca-container[data-count="2"] .ca-item.ca--opened .ca-content-wrapper {left: 20%; } .ca-content-wrapper, .ca-container[data-count="1"] .ca-item .ca-content-wrapper, .ca-container[data-count="2"] .ca-item .ca-content-wrapper {width: calc(80% - 5px); } .ca-container[data-count="1"] .ca-item.ca--opened .ca-item-main {width: auto; } .ca-catalogue .ca-gallery {max-width: 70px; } }