File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/cedarresidency.com/css/avara-gallery.css

Back
/-----------------------------------------/ /* Lightbox Gallery /-----------------------------------------/ .carousel:hover{ cursor: -moz-grab; cursor: -webkit-grab; } .carousel:active{ cursor: -moz-grabbing; cursor: -webkit-grabbing; } /----- MAIN WRAPPER -----/ .sz_image_001_wrapper{ overflow: hidden; padding: 0; /padding: 0 0 20px 0;/ } /---------------------------/ /* TRIGGER IMAGE /---------------------------/ /----- GENERAL -----/ .sz_image_001_trig_col_2{ padding: 25px 200px; } .sz_image_001_trig > .row{ margin: 0; } .sz_image_001_trig > .row > div{ padding: 0; } .sz_image_001_trig_wrap{ overflow: hidden; position: relative; } /----- IMAGE -----/ .sz_image_001_trig_img{ overflow: hidden; position: relative; } .sz_image_001_trig_img > img{ width: 100%; margin: auto; display: block; } /----- CART AND TRIGGER BUTTON -----/ .sz_image_001_trig_btn{ top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; text-align: center; position: absolute; background: rgba(0,0,0,0.75); -webkit-transform: translate(-100%,0); transform: translate(-100%,0); -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .sz_image_001_trig_wrap:hover .sz_image_001_trig_btn{ opacity: 1; visibility: visible; -webkit-transform: translate(0,0); transform: translate(0,0); } /---------- ICONS ----------/ .sz_image_001_trig_btn > a{ top: 0; left: 0; right: 0; bottom: 0; width: 50px; height: 50px; margin: auto; color: #ffffff; font-size: 12px; text-shadow: none; line-height: 50px; position: absolute; background: #2b2b2b; display: inline-block; -webkit-font-smoothing: antialiased; -webkit-transition: all 0.5s cubic-bezier(.075,.82,.165,1); transition: all 0.5s cubic-bezier(.075,.82,.165,1); } .sz_image_001_trig_btn > a:nth-child(1){ left: 51px; } .sz_image_001_trig_btn > a:nth-child(2){ right: 51px; } .sz_image_001_trig_btn > a:hover{ color: #ffffff; background: #2aa5ab; } /-----------------------------------------/ /* MODAL OR LIGHT BOX /-----------------------------------------/ /----- FADE IN AND OUT EFFECT -----/ .modal.fade.sz_img_001_mod_sld .modal-dialog{ opacity: 0; visibility: hidden; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); -o-transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); } .modal.in.sz_img_001_mod_sld .modal-dialog{ opacity: 1; visibility: visible; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /----- BACKDROP -----/ .modal-backdrop{ background: transparent; } /----- FIX THE PROBLEM OF POSITIONING CREATED BY CAROUSEL -----/ .modal.sz_img_001_mod_sld.carousel{ position: fixed; } .sz_img_001_mod_sld{ padding-left: 0 !important; padding-right: 0 !important; } /----- MODAL SIZES -----/ .sz_img_001_mod_sld > .modal-dialog{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; overflow-y: auto; overflow-x: hidden; position: absolute; background: transparent; } @media (min-width: 1301px){ .sz_img_001_mod_sld > .modal-dialog{ width: 100%; height: 100%; margin: auto; } } .sz_img_001_mod_sld > .modal-dialog > .modal-content{ outline: 0; width: 100%; border: none; margin: auto; height: 100%; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; } .sz_img_001_mod_sld > .modal-dialog::-webkit-scrollbar{ width: 2px; } .sz_img_001_mod_sld > .modal-dialog::-webkit-scrollbar-thumb{ background: #8e8e8e; -webkit-border-radius: 0; border-radius: 0; } /----- CLOSE BUTTON -----/ a.sz_image_001_close{ top: 10px; right: 10px; width: 40px; z-index: 100; height: 40px; color: #ffffff; font-size: 30px; font-weight: 100; line-height: 40px; text-align: center; position: absolute; background: transparent; text-decoration: none; text-shadow: none; text-transform: uppercase; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: all .6s cubic-bezier(0.22,0.81,0.01,0.99); transition: all .6s cubic-bezier(0.22,0.81,0.01,0.99); } .sz_image_001_close:hover{ color: #2aa5ab; background: transparent; } /-----------------------------------------/ /* SLIDER /-----------------------------------------/ /----- INDICATORS CONTROL -----/ .sz_image_001_indicators .carousel-indicators{ left: 0; right: 0; top: 15px; width: 50%; padding: 0; height: 20px; margin: auto; bottom: auto; cursor: pointer; overflow-x: auto; text-align: left; overflow-y: hidden; white-space: nowrap; } .sz_image_001_indicators .carousel-indicators li{ padding: 0; width: 7px; height: 7px; border: none; text-indent: 0; margin: 5px 2px; cursor: pointer; overflow: hidden; background: #ffffff; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transition: all cubic-bezier(0.22,0.81,0.01,0.99) 0.2s; transition: all cubic-bezier(0.22,0.81,0.01,0.99) 0.2s; } .sz_image_001_indicators .carousel-indicators .active{ width: 7px; height: 7px; border: none; text-indent: 0; margin: 5px 2px; background: #2aa5ab; } .sz_image_001_indicators .carousel-indicators::-webkit-scrollbar{ height: 2px; } .sz_image_001_indicators .carousel-indicators::-webkit-scrollbar-thumb{ background: #c0c0d3; -webkit-border-radius: 0; border-radius: 0; } /----- LEFT/RIGHT CONTROL -----/ .sz_image_001_controls .carousel-control{ top: 45%; opacity: 1; width: 40px; height: 40px; z-index: 100; color: #ffffff; font-size: 30px; cursor: pointer; font-weight: 100; overflow: hidden; line-height: 40px; text-shadow: none; position: absolute; background: transparent; text-shadow: none; text-transform: uppercase; -webkit-font-smoothing: antialiased; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); } .sz_image_001_controls .carousel-control.left{ left: 5%; } .sz_image_001_controls .carousel-control.right{ right: 5%; left: auto; } .sz_image_001_controls .carousel-control:hover{ color: #2aa5ab; background: transparent; } /----- SLIDE IMAGE -----/ .sz_image_001_slide_img{ padding: 50px 0 0 0; } .sz_image_001_slide_img > img{ width: 50%; margin: auto; display: block; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .sz_image_001_slide_txt{ width: 50%; margin: auto; padding: 15px 0; } .sz_image_001_slide_txt > a{ color: #ffffff; display: block; font-weight: 300; -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); } .sz_image_001_slide_txt > a:nth-child(1){ font-size: 18px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; } .sz_image_001_slide_txt > a > span{ color: #8e8e8e; margin-right: 5px; } .sz_image_001_slide_txt > a:hover{ color: #2aa5ab; } /-----------------------------------------/ /* RESPONSIVE /-----------------------------------------/ /---------- MEDIA 480px ----------/ @media only screen and (max-width: 480px){ /----- HEADER -----/ .sz_image_001_header{ width: 95%; } .sz_image_001_header > h1{ font-size: 20px; } /----- TRIGGER -----/ .sz_image_001_trig{ padding: 25px 0; } /----- 2 COLUMNS -----/ .sz_image_001_trig_col_2{ padding: 25px; } /----- INDICATORS CONTROL -----/ .sz_image_001_indicators .carousel-indicators{ top: 50px; width: 90%; } /----- LEFT/RIGHT CONTROL -----/ .sz_image_001_controls .carousel-control{ top: 0; } .sz_image_001_controls .carousel-control.left{ left: 15px; right: auto; } .sz_image_001_controls .carousel-control.right{ left: 66px; right: auto; } .sz_image_001_slide_img{ padding: 75px 0 0 0; } .sz_image_001_slide_img > img{ width: 90%; } .sz_image_001_slide_txt{ width: 90%; } } /---------- MEDIA 481px - 600px ----------/ @media (min-width: 481px) and (max-width: 600px){ /----- HEADER -----/ .sz_image_001_header{ width: 75%; } /----- TRIGGER -----/ .sz_image_001_trig{ padding: 25px 50px; } /----- INDICATORS CONTROL -----/ .sz_image_001_indicators .carousel-indicators{ top: 50px; width: 80%; } /----- LEFT/RIGHT CONTROL -----/ .sz_image_001_controls .carousel-control{ top: 0; } .sz_image_001_controls .carousel-control.left{ left: 15px; right: auto; } .sz_image_001_controls .carousel-control.right{ left: 66px; right: auto; } .sz_image_001_slide_img{ padding: 75px 0 0 0; } .sz_image_001_slide_img > img{ width: 80%; } .sz_image_001_slide_txt{ width: 80%; } } /---------- MEDIA 601px - 767px ----------/ @media (min-width: 601px) and (max-width: 767px){ /----- HEADER -----/ .sz_image_001_header{ width: 60%; } /----- TRIGGER -----/ .sz_image_001_trig{ padding: 25px 100px; } /----- INDICATORS CONTROL -----/ .sz_image_001_indicators .carousel-indicators{ top: 50px; width: 70%; } /----- LEFT/RIGHT CONTROL -----/ .sz_image_001_controls .carousel-control{ top: 0; } .sz_image_001_controls .carousel-control.left{ left: 15px; right: auto; } .sz_image_001_controls .carousel-control.right{ left: 66px; right: auto; } .sz_image_001_slide_img{ padding: 75px 0 0 0; } .sz_image_001_slide_img > img{ width: 70%; } .sz_image_001_slide_txt{ width: 70%; } } /---------- MEDIA 768px - 991px ----------/ @media (min-width: 768px) and (max-width: 991px){ /----- 2 COLUMNS -----/ .sz_image_001_trig_col_2{ padding: 25px 50px; } } /---------- MEDIA 992px - 1200px ----------/ @media (min-width: 992px) and (max-width: 1200px){ /----- 2 COLUMNS -----/ .sz_image_001_trig_col_2{ padding: 25px 150px; } } /-----------------------------------------/ /* BACKDROP COLORS /-----------------------------------------/ .sz_bd_black:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.9; height: 100%; margin: auto; position: fixed; background: #313131; } .sz_bd_white:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.9; height: 100%; margin: auto; position: fixed; background: #ffffff; } .sz_bd_transp:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.5; height: 100%; margin: auto; position: fixed; background: transparent; } /-----------------------------------------/ /* FIVE COLOUMNS /-----------------------------------------/ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { min-height: 1px; position: relative; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } /-----------------------------------------/ /* SLIDER TIMING FUNCTIONS /-----------------------------------------/ /---------- sz_ease ----------/ .sz_ease .carousel-inner > .item{ -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } @media all and (transform-3d), (-webkit-transform-3d){ .sz_ease .carousel-inner > .item { -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } } /---------- sz_slowSpeedy ----------/ .sz_slowSpeedy .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(0.3,1,0,1); -moz-transition-timing-function: cubic-bezier(0.3,1,0,1); transition-timing-function: cubic-bezier(0.3,1,0,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_slowSpeedy .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(0.3,1,0,1); -moz-transition-timing-function: cubic-bezier(0.3,1,0,1); transition-timing-function: cubic-bezier(0.3,1,0,1); } } /---------- sz_easeOutInCubic ----------/ .sz_easeOutInCubic .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); -moz-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutInCubic .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); -moz-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); } } /---------- sz_swing ----------/ .sz_swing .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.02,.01,.47,1); -moz-transition-timing-function: cubic-bezier(.02,.01,.47,1); transition-timing-function: cubic-bezier(.02,.01,.47,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_swing .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.02,.01,.47,1); -moz-transition-timing-function: cubic-bezier(.02,.01,.47,1); transition-timing-function: cubic-bezier(.02,.01,.47,1); } } /---------- sz_easeOutCubic ----------/ .sz_easeOutCubic .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutCubic .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } } /---------- sz_easeOutCirc ----------/ .sz_easeOutCirc .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); -moz-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutCirc .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); -moz-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); } } /---------- sz_easeOutExpo ----------/ .sz_easeOutExpo .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1); -moz-transition-timing-function: cubic-bezier(.19,1,.22,1); transition-timing-function: cubic-bezier(.19,1,.22,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutExpo .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1); -moz-transition-timing-function: cubic-bezier(.19,1,.22,1); transition-timing-function: cubic-bezier(.19,1,.22,1); } } /---------- sz_easeOutQuad ----------/ .sz_easeOutQuad .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.25,.46,.45,.94); -moz-transition-timing-function: cubic-bezier(.25,.46,.45,.94); transition-timing-function: cubic-bezier(.25,.46,.45,.94); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuad .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.25,.46,.45,.94); -moz-transition-timing-function: cubic-bezier(.25,.46,.45,.94); transition-timing-function: cubic-bezier(.25,.46,.45,.94); } } /---------- sz_easeOutQuart ----------/ .sz_easeOutQuart .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1); -moz-transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-timing-function: cubic-bezier(.165,.84,.44,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuart .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1); -moz-transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-timing-function: cubic-bezier(.165,.84,.44,1); } } /---------- sz_easeOutQuint ----------/ .sz_easeOutQuint .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.23,1,.32,1); -moz-transition-timing-function: cubic-bezier(.23,1,.32,1); transition-timing-function: cubic-bezier(.23,1,.32,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuint .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.23,1,.32,1); -moz-transition-timing-function: cubic-bezier(.23,1,.32,1); transition-timing-function: cubic-bezier(.23,1,.32,1); } } /---------- sz_easeOutSine ----------/ .sz_easeOutSine .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.39,.575,.565,1); -moz-transition-timing-function: cubic-bezier(.39,.575,.565,1); transition-timing-function: cubic-bezier(.39,.575,.565,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutSine .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.39,.575,.565,1); -moz-transition-timing-function: cubic-bezier(.39,.575,.565,1); transition-timing-function: cubic-bezier(.39,.575,.565,1); } } /-----------------------------------------/ /* Carousel Slider /-----------------------------------------/ .carousel:hover{ cursor: -moz-grab; cursor: -webkit-grab; } .carousel:active{ cursor: -moz-grabbing; cursor: -webkit-grabbing; } /----- MAIN WRAPPER -----/ .sz_portfolio_slider_wrapper{ overflow: hidden; padding: 20px 0 0 0; } /---------------------------/ /* HEADER /---------------------------/ .sz_portfolio_slider_trig{ overflow: hidden; position: relative; } .sz_portfolio_slider_trig > .carousel-inner > .item{ overflow: hidden; } /----- FONT -----/ .sz_portfolio_slider_header > h1, .sz_portfolio_slider_trig_img > a, .sz_portfolio_slider_trig_txt > a, .sz_portfolio_slider_trig_txt > ul > li > a{ margin: 0; text-decoration: none; text-shadow: none; -webkit-font-smoothing: antialiased; } /----- HEADER -----/ .sz_portfolio_slider_header{ margin: auto; text-align: center; padding: 50px 0 20px 0; } .sz_portfolio_slider_header > h1{ color: #313131; font-size: 35px; font-weight: 300; text-transform: uppercase; } /---------------------------/ /* TRIGGER SLIDER /---------------------------/ /----- GENERAL -----/ .sz_portfolio_slider_trig{ padding: 90px 10px 50px 10px; } .sz_portfolio_slider_trig_col_2{ padding: 90px 200px 50px 200px; } .sz_portfolio_slider_trig .row{ margin: 0; } .sz_portfolio_slider_trig .row > div{ padding: 10px; } .sz_portfolio_slider_trig_wrap{ overflow: hidden; position: relative; } /----- INDICATORS CONTROL -----/ .sz_portfolio_slider_indicators > .carousel-indicators{ top: 0; left: 0; right: 0; width: 97%; height: 40px; font-size: 0; margin: 0 auto; overflow-x: auto; text-align: left; overflow-y: hidden; padding-left: 15px; padding-right: 15px; white-space: nowrap; } .sz_portfolio_slider_indicators > .carousel-indicators li{ width: auto; height: 35px; margin: 0 2px; color: #4d5359; text-indent: 0; padding: 0 15px; font-size: 10px; overflow: hidden; line-height: 33px; text-align: center; letter-spacing: 1px; border: 1px solid #ebebeb; text-transform: uppercase; text-shadow: none; -webkit-font-smoothing: antialiased; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: background 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: background 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .sz_portfolio_slider_indicators > .carousel-indicators > li:first-child{ -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .sz_portfolio_slider_indicators > .carousel-indicators > li:last-child{ -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .sz_portfolio_slider_indicators > .carousel-indicators .active{ width: auto; height: 35px; margin: 0 2px; text-indent: 0; color: #ffffff; background: #2aa5ab; border: 1px solid #2aa5ab; } .sz_portfolio_slider_indicators > .carousel-indicators::-webkit-scrollbar{ height: 2px; } .sz_portfolio_slider_indicators > .carousel-indicators::-webkit-scrollbar-thumb{ background: #ebebeb; -webkit-border-radius: 0; border-radius: 0; } /----- LEFT/RIGHT CONTROL -----/ .sz_portfolio_slider_control .carousel-control{ top: 50px; opacity: 1; width: 30px; bottom: auto; height: 30px; color: #4d5359; font-size: 16px; cursor: pointer; font-weight: 700; overflow: hidden; line-height: 27px; text-shadow: none; text-align: center; position: absolute; background: transparent; border: 1px solid #ebebeb; text-transform: uppercase; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1); transition: all 0.6s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_control .carousel-control.left{ left: auto; right: 48px; margin: auto; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .sz_portfolio_slider_control .carousel-control.right{ left: auto; right: 15px; margin: auto; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .sz_portfolio_slider_control .carousel-control:hover{ opacity: 1; color: #ffffff; background: #2aa5ab; border: 1px solid #2aa5ab; } /----- IMAGE -----/ .sz_portfolio_slider_trig_img{ overflow: hidden; position: relative; } .sz_portfolio_slider_trig_img > img{ width: 100%; margin: auto; display: block; } .sz_portfolio_slider_trig_img > a{ top: 3px; left: 3px; height: 18px; color: #0b0b0b; font-size: 16px; padding: 1px 5px; line-height: 18px; position: absolute; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_img > a > span{ margin-right: 5px; } .sz_portfolio_slider_trig_img > a:hover{ color: #2aa5ab; } /----- TRIGGER BUTTON -----/ .sz_portfolio_slider_trig_btn{ top: 0; left: 0; right: 0; bottom: 0; opacity: 0; display: block; visibility: hidden; text-align: center; position: absolute; background: rgba(0,0,0,0.75); -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_wrap:hover .sz_portfolio_slider_trig_btn{ opacity: 1; visibility: visible; } .sz_portfolio_slider_trig_btn > a{ top: 0; left: 0; bottom: 0; width: 35px; right: 40px; height: 35px; margin: auto; color: #ffffff; line-height: 35px; text-align: center; position: absolute; background: #333333; display: inline-block; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_btn > a:focus{ outline: none; } .sz_portfolio_slider_trig_btn > a:hover{ color: #ffffff; background: #2aa5ab; } .sz_portfolio_slider_trig_btn > span{ display: block; } .sz_portfolio_slider_trig_btn > span > a{ top: 0; right: 0; bottom: 0; left: 40px; width: 35px; height: 35px; margin: auto; display: block; color: #ffffff; line-height: 35px; text-align: center; position: absolute; background: #333333; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_btn > span:hover > a{ color: #ffffff; background: #2aa5ab !important; } /----- TEXT CONTENT -----/ .sz_portfolio_slider_trig_txt{ position: relative; text-align: center; border: 1px solid #ebebeb; padding: 25px 5px 25px 5px; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_wrap:hover .sz_portfolio_slider_trig_txt{ background: #4d5359; border: 1px solid #4d5359; } .sz_portfolio_slider_trig_wrap:hover .sz_portfolio_slider_trig_txt > a{ color: #ffffff; } /----- TITLE -----/ .sz_portfolio_slider_trig_txt > a{ color: #4d5359; display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; text-decoration: none; text-transform: capitalize; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_wrap:hover .sz_portfolio_slider_trig_txt > a:hover{ color: #2aa5ab; } .sz_portfolio_slider_trig_txt > span > a{ color: #afb0b4; display: block; font-size: 14px; font-weight: 400; text-decoration: none; text-transform: capitalize; -webkit-transition: all .7s cubic-bezier(0.3,1,0,1); transition: all .7s cubic-bezier(0.3,1,0,1); } .sz_portfolio_slider_trig_txt > span > a:hover{ color: #2aa5ab; } /-----------------------------------------/ /* MODAL OR LIGHT BOX /-----------------------------------------/ /----- FADE IN AND OUT EFFECT -----/ .modal.fade.sz_prtf_slider_mod_sld .modal-dialog{ opacity: 0; visibility: hidden; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); -o-transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); transition: all 1s cubic-bezier(0.22,0.81,0.01,0.99); } .modal.in.sz_prtf_slider_mod_sld .modal-dialog{ opacity: 1; visibility: visible; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /----- BACKDROP -----/ .modal-backdrop{ background: transparent; } /----- FIX THE PROBLEM OF POSITIONING CREATED BY CAROUSEL -----/ .modal.sz_prtf_slider_mod_sld.carousel{ position: fixed; } .sz_prtf_slider_mod_sld{ padding-left: 0 !important; padding-right: 0 !important; } /----- MODAL SIZES -----/ .sz_prtf_slider_mod_sld > .modal-dialog{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; overflow-y: auto; overflow-x: hidden; position: absolute; background: transparent; } @media (min-width: 768px){ .sz_prtf_slider_mod_sld > .modal-dialog{ width: 100%; height: 100%; margin: auto; } } .sz_prtf_slider_mod_sld > .modal-dialog > .modal-content{ outline: 0; width: 100%; border: none; margin: auto; height: 100%; padding: 60px 0 0 0; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; } .sz_prtf_slider_mod_sld > .modal-dialog::-webkit-scrollbar{ width: 5px; } .sz_prtf_slider_mod_sld > .modal-dialog::-webkit-scrollbar-thumb{ background: #8e8e8e; -webkit-border-radius: 0; border-radius: 0; } /----- CLOSE BUTTON -----/ a.sz_portfolio_slider_close{ top: 10px; right: 10px; width: 35px; z-index: 100; height: 35px; color: #afb0b4; font-size: 18px; font-weight: 100; line-height: 35px; text-align: center; position: absolute; background: #4d5359; text-decoration: none; text-shadow: none; -webkit-transition: all .6s cubic-bezier(0.22,0.81,0.01,0.99); transition: all .6s cubic-bezier(0.22,0.81,0.01,0.99); } .sz_portfolio_slider_close:hover{ color: #ffffff; background: #2aa5ab; } /-----------------------------------------/ /* SLIDER /-----------------------------------------/ .sz_portfolio_slider_slide_txt > a, .sz_portfolio_slider_slide_txt > h1, .sz_portfolio_slider_slide_txt > p, .sz_portfolio_slider_slide_txt > ul > li > a, .sz_prtf_sldr_indicators .carousel-indicators > li > div > p, .sz_prtf_sldr_indicators .carousel-indicators > li > div > span{ margin: 0; text-decoration: none; text-shadow: none; -webkit-font-smoothing: antialiased; } .sz_prtf_slider_mod_sld .carousel-inner{ width: 70%; margin: auto; background: #4d5359; } .sz_prtf_slider_mod_sld .carousel-inner, .sz_prtf_slider_mod_sld .carousel-inner > .item{ overflow: hidden; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 45%; opacity: 1; width: 35px; bottom: auto; height: 35px; color: #afb0b4; font-size: 16px; cursor: pointer; font-weight: 700; overflow: hidden; line-height: 35px; text-shadow: none; text-align: center; position: absolute; background: #4d5359; text-transform: uppercase; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1); transition: all 0.6s cubic-bezier(0.3,1,0,1); } .sz_prtf_sldr_control .carousel-control.left{ left: 5%; margin: auto; } .sz_prtf_sldr_control .carousel-control.right{ right: 5%; left: auto; margin: auto; } .sz_prtf_sldr_control .carousel-control:hover{ opacity: 1; color: #ffffff; background: #2aa5ab; } /----- SLIDE IMAGE -----/ .sz_sldr_prtf_slider_image{ width: 75%; float: left; } .sz_sldr_prtf_slider_image > img{ width: 100%; display: block; } /----- TEXT -----/ .sz_portfolio_slider_slide_txt{ width: 25%; display: inline-block; padding: 50px 25px 15px 25px; } /----- TAGS -----/ .sz_portfolio_slider_slide_txt > ul{ padding: 0; margin: 30px 0; list-style-type: none; } .sz_portfolio_slider_slide_txt > ul > li{ display: inline-block; } .sz_portfolio_slider_slide_txt > ul > li > a{ color: #afb0b4; display: block; font-size: 12px; font-weight: 300; padding: 3px 7px; border: 1px solid #afb0b4; text-transform: capitalize; -webkit-transition: color .6s cubic-bezier(0.22,0.81,0.01,0.99); transition: color .6s cubic-bezier(0.22,0.81,0.01,0.99); } .sz_portfolio_slider_slide_txt > ul > li > a:hover{ color: #2aa5ab; border: 1px solid #2aa5ab; } /----- HEADING -----/ .sz_portfolio_slider_slide_txt > a{ color: #cccccc; display: block; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: capitalize; } .sz_portfolio_slider_slide_txt > p{ margin: 25px 0; color: #afb0b4; display: block; font-size: 14px; font-weight: 400; text-align: justify; } .sz_portfolio_slider_slide_txt > a:hover{ color: #2aa5ab; } /-----------------------------------------/ /* RESPONSIVE /-----------------------------------------/ /---------- MEDIA 480px ----------/ @media only screen and (max-width: 480px){ /----- TRIGGER -----/ .sz_portfolio_slider_trig{ padding: 90px 35px 50px 35px; } .sz_prtf_slider_mod_sld > .modal-dialog > .modal-content{ padding: 75px 0 0 0; } .sz_prtf_slider_mod_sld .carousel-inner{ width: 98%; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 175px; } .sz_prtf_sldr_control .carousel-control.left{ left: 1%; } .sz_prtf_sldr_control .carousel-control.right{ right: 1%; } /----- SLIDE IMAGE -----/ .sz_sldr_prtf_slider_image{ width: 100%; float: none; } .sz_portfolio_slider_slide_txt{ width: 100%; } } /---------- MEDIA 481px - 600px ----------/ @media (min-width: 481px) and (max-width: 600px){ /----- TRIGGER -----/ .sz_portfolio_slider_trig{ padding: 90px 60px 50px 60px; } /----- TEXT CONTENT -----/ .sz_portfolio_slider_trig_txt{ padding: 20px 5px 20px 5px; } /----- HEADING -----/ .sz_portfolio_slider_trig_txt > a{ font-size: 18px; } .sz_portfolio_slider_trig_txt > ul > li > a{ font-size: 13px; } .sz_prtf_slider_mod_sld > .modal-dialog > .modal-content{ padding: 75px 0 0 0; } .sz_prtf_slider_mod_sld .carousel-inner{ width: 80%; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 200px; } .sz_prtf_sldr_control .carousel-control.left{ left: 1%; } .sz_prtf_sldr_control .carousel-control.right{ right: 1%; } /----- SLIDE IMAGE -----/ .sz_sldr_prtf_slider_image{ width: 100%; float: none; } .sz_portfolio_slider_slide_txt{ width: 100%; } } /---------- MEDIA 601px - 767px ----------/ @media (min-width: 601px) and (max-width: 767px){ /----- TRIGGER -----/ .sz_portfolio_slider_trig{ padding: 90px 125px 50px 125px; } /----- TEXT CONTENT -----/ .sz_portfolio_slider_trig_txt{ padding: 20px 5px 20px 5px; } /----- TITLE -----/ .sz_portfolio_slider_trig_txt > a{ font-size: 18px; } .sz_portfolio_slider_trig_txt > ul > li > a{ font-size: 13px; } /----- SLIDE IMAGE -----/ .sz_sldr_prtf_slider_image{ width: 100%; float: none; } .sz_portfolio_slider_slide_txt{ width: 100%; } } /---------- MEDIA 768px - 900px ----------/ @media (min-width: 768px) and (max-width: 900px){ .sz_portfolio_slider_trig_col_2{ padding: 85px 100px 50px 100px; } .sz_prtf_slider_mod_sld .carousel-inner{ width: 98%; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 10px; } .sz_prtf_sldr_control .carousel-control.left{ left: auto; right: 50px; margin: auto; } .sz_prtf_sldr_control .carousel-control.right{ left: auto; right: 10px; margin: auto; } /----- TEXT -----/ .sz_portfolio_slider_slide_txt{ padding: 20px 20px; } .sz_portfolio_slider_slide_txt > ul{ margin: 10px 0; } .sz_portfolio_slider_slide_txt > a{ font-size: 14px; } .sz_portfolio_slider_slide_txt > p{ margin: 5px 0; font-size: 12px; } } /---------- MEDIA 901px - 991px ----------/ @media (min-width: 901px) and (max-width: 991px){ .sz_portfolio_slider_trig_col_2{ padding: 85px 100px 50px 100px; } .sz_prtf_slider_mod_sld .carousel-inner{ width: 95%; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 10px; } .sz_prtf_sldr_control .carousel-control.left{ left: auto; right: 50px; margin: auto; } .sz_prtf_sldr_control .carousel-control.right{ left: auto; right: 10px; margin: auto; } /----- TEXT -----/ .sz_portfolio_slider_slide_txt{ padding: 20px 20px; } } /---------- MEDIA 992px - 1200px ----------/ @media (min-width: 992px) and (max-width: 1200px){ .sz_prtf_slider_mod_sld .carousel-inner{ width: 80%; } /----- LEFT/RIGHT CONTROL -----/ .sz_prtf_sldr_control .carousel-control{ top: 10px; } .sz_prtf_sldr_control .carousel-control.left{ left: auto; right: 50px; margin: auto; } .sz_prtf_sldr_control .carousel-control.right{ left: auto; right: 10px; margin: auto; } /----- TEXT -----/ .sz_portfolio_slider_slide_txt{ padding: 20px 20px; } .sz_portfolio_slider_slide_txt > p{ margin: 5px 0; font-size: 12px; } } /-----------------------------------------/ /* BACKDROP COLORS /-----------------------------------------/ .sz_bd_black:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.9; height: 100%; margin: auto; position: fixed; background: #313131; } .sz_bd_white:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.9; height: 100%; margin: auto; position: fixed; background: #ffffff; } .sz_bd_transp:before{ top: 0; left: 0; right: 0; bottom: 0; width: 100%; content: ""; opacity: 0.5; height: 100%; margin: auto; position: fixed; background: transparent; } /-----------------------------------------/ /* FIVE COLOUMNS /-----------------------------------------/ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { min-height: 1px; position: relative; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } /-----------------------------------------/ /* SLIDER TIMING FUNCTIONS /-----------------------------------------/ /---------- sz_ease ----------/ .sz_ease .carousel-inner > .item{ -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } @media all and (transform-3d), (-webkit-transform-3d){ .sz_ease .carousel-inner > .item { -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } } /---------- sz_slowSpeedy ----------/ .sz_slowSpeedy .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(0.3,1,0,1); -moz-transition-timing-function: cubic-bezier(0.3,1,0,1); transition-timing-function: cubic-bezier(0.3,1,0,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_slowSpeedy .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(0.3,1,0,1); -moz-transition-timing-function: cubic-bezier(0.3,1,0,1); transition-timing-function: cubic-bezier(0.3,1,0,1); } } /---------- sz_easeOutInCubic ----------/ .sz_easeOutInCubic .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); -moz-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutInCubic .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); -moz-transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); transition-timing-function: cubic-bezier(0.22,0.81,0.01,0.99); } } /---------- sz_swing ----------/ .sz_swing .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.02,.01,.47,1); -moz-transition-timing-function: cubic-bezier(.02,.01,.47,1); transition-timing-function: cubic-bezier(.02,.01,.47,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_swing .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.02,.01,.47,1); -moz-transition-timing-function: cubic-bezier(.02,.01,.47,1); transition-timing-function: cubic-bezier(.02,.01,.47,1); } } /---------- sz_easeOutCubic ----------/ .sz_easeOutCubic .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutCubic .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } } /---------- sz_easeOutCirc ----------/ .sz_easeOutCirc .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); -moz-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutCirc .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); -moz-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); } } /---------- sz_easeOutExpo ----------/ .sz_easeOutExpo .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1); -moz-transition-timing-function: cubic-bezier(.19,1,.22,1); transition-timing-function: cubic-bezier(.19,1,.22,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutExpo .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1); -moz-transition-timing-function: cubic-bezier(.19,1,.22,1); transition-timing-function: cubic-bezier(.19,1,.22,1); } } /---------- sz_easeOutQuad ----------/ .sz_easeOutQuad .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.25,.46,.45,.94); -moz-transition-timing-function: cubic-bezier(.25,.46,.45,.94); transition-timing-function: cubic-bezier(.25,.46,.45,.94); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuad .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.25,.46,.45,.94); -moz-transition-timing-function: cubic-bezier(.25,.46,.45,.94); transition-timing-function: cubic-bezier(.25,.46,.45,.94); } } /---------- sz_easeOutQuart ----------/ .sz_easeOutQuart .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1); -moz-transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-timing-function: cubic-bezier(.165,.84,.44,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuart .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1); -moz-transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-timing-function: cubic-bezier(.165,.84,.44,1); } } /---------- sz_easeOutQuint ----------/ .sz_easeOutQuint .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.23,1,.32,1); -moz-transition-timing-function: cubic-bezier(.23,1,.32,1); transition-timing-function: cubic-bezier(.23,1,.32,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutQuint .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.23,1,.32,1); -moz-transition-timing-function: cubic-bezier(.23,1,.32,1); transition-timing-function: cubic-bezier(.23,1,.32,1); } } /---------- sz_easeOutSine ----------/ .sz_easeOutSine .carousel-inner > .item{ -webkit-transition-timing-function: cubic-bezier(.39,.575,.565,1); -moz-transition-timing-function: cubic-bezier(.39,.575,.565,1); transition-timing-function: cubic-bezier(.39,.575,.565,1); } @media all and (transform-3d), (-webkit-transform-3d){ .sz_easeOutSine .carousel-inner > .item { -webkit-transition-timing-function: cubic-bezier(.39,.575,.565,1); -moz-transition-timing-function: cubic-bezier(.39,.575,.565,1); transition-timing-function: cubic-bezier(.39,.575,.565,1); } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.1 | proxy | phpinfo | Settings