/*----------------------------------------------------------------------------------- dark color #262424 color #b98c56 color:hover #d29f62 colorsecond #ebb16d body bg #f5f7f7 /* ----------------------------------------------------------------------------------- 0. RESET & CLEARFIX 1. BASICS (body, headers, links, etc) 2. GENERAL ELEMENTS 3. HEADER 4. FOOTER 5. MENU 6. MENU TOGGLE (Hamburger) 7. HEADER / MENU OPTIONS 8. HERO / PAGETITLE 9. PORTFOLIO 10. BLOG 11. COMMENTS 12. PAGE LOADER 13. PAGINATION 14. EXTERN PLUGINS (smartscroll,masonry,revolution slider, owl) 15. COLUMNS SECTION 16. FULLWIDTH SECTION 17. THUMB OVERLAY EFFECT 18. ANIMATIONS (portfolio, hero, text, ...) 19. ELEMENTS / SHORTCODES 20. WIDGETS 21. CUSTOM STYLE ----------------------------------------------------------------------------------- */ /*---------------------------------------------- 0. RESET & CLEARFIX ------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, .overlaycaption,figure, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; } ol, ul { list-style: none; } :focus { outline: 0; } /* deleting the default appearence for form elements */ input[type=text], input[type=password], input[type=submit], input[type=button] input[type=email], input[type=tel], textarea, button, select { -moz-appearance: none; -webkit-appearance: none; } /* HTML5 display definitions */ article, aside, details, .overlaycaption, figure, footer, header, hgroup, menu, nav, section, dialog { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } [hidden] { display: none; visibility: hidden; } .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; height: 1%; } .clear { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width:100%; } /* Disable hover pointers on scrolling (class set by js)*/ .disable-hover, .disable-hover * { pointer-events: none !important; } /*---------------------------------------------- 1. BASICS ------------------------------------------------*/ html { height: 100%; font-size: 100%; -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */ -ms-text-size-adjust: 100%; position: relative; } body { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 26px; color: rgba(0,0,0,0.6); text-align: left; position: relative; background: #f5f7f7; min-height: 100%; letter-spacing: 0.02em; } ::selection { background:#262424; color:#ffffff; } ::-moz-selection { background:#262424; color:#ffffff; } ::-webkit-selection { background:#262424; color:#ffffff; } /* Headings ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat'; font-weight: 400; font-variant-ligatures: common-ligatures; letter-spacing: -0.01em; color: #262424; } h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { font-style: italic; } h1 b, h2 b, h3 b, h4 b, h5 b, h6 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6, h1.text-light, h2.text-light, h3.text-light, h4.text-light, h5.text-light, h6.text-light { color: #ffffff; } h1 { font-size: 48px; line-height: 64px; } h2 { font-size: 40px; line-height: 54px; } h3 { font-size: 27px; line-height: 37px; } h4 { font-size: 20px; line-height: 30px; } h5 { font-size: 16px; line-height: 26px; } h6 { font-size: 11px; line-height: 19px; } /* Headers Spacing */ div h1, div h2, div h3, div h4, div h5, div h6 { margin-top: 30px; } i + h1, i + h2, i + h3, i + h4, i + h5, i + h6 { margin-top: 15px; } div h1:first-child, div h2:first-child, div h3:first-child, div h4:first-child, div h5:first-child, div h6:first-child { margin-top: 0px !important; } h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 { margin-top: 10px; } h3 + h4, h3 + h5, h3 + h6, h4 + h3, h5 + h3, h6 + h3 { margin-top: 8px; } h4 + h5, h4 + h6, h5 + h4, h6 + h4 { margin-top: 6px; } h5 + h5, h5 + h6, h6 + h5, h6 + h6 { margin-top: 4px; } .title-alt { font-family: 'Roboto'; font-weight: 300; letter-spacing: 0.01em; } .title-alt b, .title-alt strong { font-weight: 400; } .uppercase { text-transform: uppercase; letter-spacing: 0.12em; } .grey { color: rgba(0,0,0,0.6); } .text-light .grey { color: rgba(255,255,255,0.75); } /* Forms ---------------------------------------- */ ::-webkit-input-placeholder { color: transparent; } :-moz-placeholder { color: transparent; } ::-moz-placeholder { color: transparent; } :-ms-input-placeholder { color: transparent; } .text-light ::-webkit-input-placeholder { color: #ffffff; } .text-light :-moz-placeholder { color: #ffffff; } .text-light ::-moz-placeholder { color: #ffffff; } .text-light :-ms-input-placeholder { color: #ffffff; } input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number], textarea { font-family: 'Roboto'; font-weight: 400 !important; font-size: 13px !important; background: #ffffff; border: 1px solid rgba(0,0,0,0.12) !important; line-height: 22px !important; /*height: 22px;*/ color: #262424; padding: 14px 10px; transition: all 200ms ease; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius: 0px; box-sizing: border-box; resize: none; width: 100%; max-width: 100%; } .text-light input[type=text], .text-light input[type=password], .text-light input[type=email], .text-light textarea { border-color: #3d3d3d !important; color: #ffffff; background: #0f0f0f; } /*input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus { border-color: #262424 !important; } .text-light input[type=text]:focus, .text-light input[type=password]:focus, .text-light input[type=email]:focus, .text-light textarea:focus { border-color: #ffffff !important; }*/ input.false[type=text], input.false[type=password]:focus, input.false[type=email], textarea.false { border-color: #fa4d5a; } textarea { min-height: 10rem; } input[type=submit], input[type=button], button { cursor: pointer; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius: 0px; display: inline-block; font-family: 'Montserrat'; font-weight: 400; font-size: 13px; line-height: 22px; letter-spacing: -0.02em; text-align: center; margin-bottom: 5px; transition: all 0.2s ease; color: #ffffff; padding: 10px 40px; background: #262424; border: none; position: relative; } .text-light input[type=submit], .text-light input[type=button], .text-light button { background: #ffffff; color: #262424; } input[type=submit]:hover, input[type=button]:hover, button:hover { background: #b98c56; color: #ffffff; } .text-light input[type=submit]:hover, .text-light input[type=button]:hover, .text-light button:hover { background: #b98c56; color: #ffffff; } select { font-size: 13px !important; background: #ffffff; border: 1px solid rgba(0,0,0,0.12); font-weight: 400; height: 46px; width: auto; padding: 8px 20px 8px 8px; color: #262424; -moz-border-radius:0px; -khtml-border-radius:0px; -webkit-border-radius:0px; border-radius: 0px; width: 100%; max-width: 100%; background-image:url(../assets/select-arrow.png); background-position: center right; background-repeat: no-repeat; -webkit-background-size:16px 6px; -moz-background-size:16px 6px; -o-background-size:16px 6px; background-size:16px 6px; } select:focus { border-color: #262424; } .text-light select { border-color: #3d3d3d; color: #ffffff; background: #0f0f0f; background-image:url(../assets/select-arrow-light.png); } .text-light select:focus { border-color: #ffffff; } select option { cursor: pointer; padding: 5px 7px; } label { font-size: 12px; line-height: 19px !important; margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.12em; color: #262424; width: 100%; display: block; transition: color 0.2s ease; } .text-light label { color: #ffffff; } .form-row.check-error label { color: #ce4a4a; } .form-row input + label, .form-row select + label { font-family: 'Roboto'; font-weight: 400 !important; font-size: 14px !important; text-transform: none; letter-spacing: 0; } label abbr { color: rgba(0,0,0,0.5); text-decoration: none; } input[type=radio] + label, input[type=checkbox] + label { display: inline-block; width: auto; margin-left: 8px; } form { margin-top: 0px; padding: 1px 0 0 0; /* work around for margin from form-row */ } /*div form:first-child { margin-top: -25px; }*/ form .form-row { margin-top: 25px; position: relative; } .form-row.hidden { display: none; } form .form-submit { margin-top: 25px; } form .form-note { position: fixed; z-index: 10; bottom: 50px; left: calc(50% - 150px); width: 300px; display: none; } form .form-note.visible { -webkit-animation: show-hide 5s 1; -moz-animation: show-hide 5s 1; -ms-animation: show-hide 5s 1; animation: show-hide 5s 1; } @-webkit-keyframes show-hide{0%{opacity:0;visibility: visible;}20%{opacity:1;}80%{opacity:1;}100%{opacity:0;visibility: hidden;}} @-moz-keyframes show-hide{0%{opacity:0;visibility: visible;}20%{opacity:1;}80%{opacity:1;}100%{opacity:0;visibility: hidden;}} @keyframes show-hide{0%{opacity:0;visibility: visible;}20%{opacity:1;}80%{opacity:1;}100%{opacity:0;visibility: hidden;}} /* Table ---------------------------------------- */ table { margin: 25px 0 0 0 !important; border-collapse: collapse !important; table-layout: fixed; width: 100%; max-width: 100%; border: none !important; } div table:first-child { margin-top: 0px !important; } table thead th { font-family: 'Montserrat'; font-weight: 400 !important; font-size: 11px; line-height: 19px; text-transform: uppercase; letter-spacing: 0.12em; color: #262424; padding: 0 0 5px 0 !important; } .text-light table thead th { color: #ffffff; } table tr { border-bottom: 1px solid rgba(0,0,0,0.12); } table thead tr { border-bottom: 1px solid rgba(0,0,0,0.12) !important; } .text-light table tr { border-color: #3d3d3d !important; } table td, table th, table th { border-top: none !important; padding: 10px 0; } table tr th:last-child, table tr td:last-child { text-align: right; } /* Links ---------------------------------------- */ a { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0.0); color: #b98c56; border-bottom: 1px solid transparent; transition: all 0.15s ease; } a:hover { border-color: #b98c56; } /* Embedded content ---------------------------------------- */ img, object, video, audio { max-width: 100%; height: auto; display: inline-block; margin:0; vertical-align:top; } img { width: auto; max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; } p img { margin-top: 25px; } p img:first-child { margin-top: 0px; } img.alignleft { margin: 3px 25px 25px 0; float: left; } img.alignright { margin: 3px 0px 25px 25px; float: right; } p + video, p + audio { margin-top: 25px; } /* Lists ---------------------------------------- */ ul { margin-top: 15px; margin-left: 30px; list-style: disc; } ul.no-list-style { list-style: none; margin-left: 0px; } div ul:first-child, li ul:first-child { margin-top: 0px; } ol { margin-top: 15px; margin-left: 30px; list-style: decimal; } div ol:first-child, li ol:first-child { margin-top: 0px; } ul li, ol li { margin-top: 5px; } ul li:first-child, ol li:first-child { margin-top: 0px; } /* Others ---------------------------------------- */ p { margin-top: 15px; } div p:first-child { margin-top: 0px; } p.intro { font-weight: 300; letter-spacing: 0.01em; font-size: 20px; line-height: 30px; } strong, b, dt { font-weight: 500; } i, dfn, em { font-style: italic; } blockquote { font-family: "Roboto"; font-weight: 300; font-size: 28px; line-height: 46px; color: rgba(0,0,0,0.7); position: relative; max-width: 1024px; margin: 25px auto; } .column:not(.one-full) blockquote { font-size: 20px; line-height: 32px; } #page-title blockquote { font-size: 36px; line-height: 54px; } .wrapper blockquote, .wrapper-small blockquote { max-width: 100%; } .text-light blockquote, blockquote.text-light { color: rgba(255,255,255,0.8); } div blockquote:first-child { margin-top: 0px; } div blockquote:last-child { margin-bottom: 0px; } blockquote > p:first-of-type { position: relative; } blockquote > p:first-of-type:before { content: open-quote; font-family: "Times New Roman"; font-size: 120px; display: block; text-align: center; position: absolute; top: 10px; left: -20px; color: rgba(0,0,0,0.08); } .one-third blockquote > p:first-of-type:before { display: none; } blockquote.align-center > p:first-of-type:before { left: calc(50% - 25px); } .column:not(.one-full) blockquote > p:first-of-type:before { font-size: 90px; } blockquote cite { display: block; font-size: 14px; line-height: 24px; font-family: 'Montserrat'; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; font-style: normal; color: #262424; margin-top: 30px; } .text-light blockquote cite, blockquote.text-light cite { color: rgba(255,255,255,0.8); } blockquote cite .role { display: block; font-size: 14px; line-height: 20px; font-family: 'Roboto'; font-weight: 300; letter-spacing: 0.02em; text-transform: none; } blockquote figure, blockquote img { margin: 20px auto 0 auto; width: 70px; height: 70px; border-radius: 60px; overflow: hidden; text-align: center; } pre { padding: 20px; margin-top: 20px; font-size: 13px; line-height: 18px; background: #262424; color: #c9c9c9; display: block; border-radius: 3px; } div pre:first-child { margin-top: 0px; } code { padding: 0 7px 0 5px; display: inline-block; border-radius: 3px; background: #d9d9d9; color: #262424; font-size: 13px; line-height: 18px; position: relative; top: -1px; font-style: italic; } small { font-size: 12px; line-height: 18px; } /*---------------------------------------------- 2. GENERAL ELEMENTS ------------------------------------------------*/ #page-content { overflow: hidden; margin: 0; min-width: 1024px; max-width: 100%; } #header ~ #page-body { width: calc(100% - 100px); margin-left: 100px; } .wrapper, .wrapper-small, .wrapper-spaced { width: 1024px; margin: 0 auto; max-width: calc(100% - 100px); } .wrapper-small { width: 840px; } .wrapper-spaced { width: calc(100% - 100px); } .wrapper:after, .wrapper-small:after, .wrapper-spaced:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .left-float { float: left; } .right-float { float: right; } .align-center { text-align: center; } .align-right { text-align: right; } .text-light { color: rgba(255,255,255,0.7); } .colored { color: #b98c56 !important; opacity: 1 !important; } /*---------------------------------------------- 3. HEADER ------------------------------------------------*/ header { position: fixed; top: 0; left: 0; width: 100px; height: 100%; z-index: 1501; background: #ffffff; border-right: 1px solid rgba(0,0,0,0.05); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ } header.menu-is-open { width: 380px; } header::after { content:""; position: fixed; top: 0; left: 100px; width: calc(100% - 100px); height: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; -webkit-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ } header.menu-is-open::after { left: 380px; opacity: 1; visibility: visible; } header .header-inner { padding: 0; } header #logo { height: 50px; width: 150px; position: absolute; top: 13px; left: 125px; z-index: 10; transition: all 0.3s ease 0.3s; } header.minicart-visible #logo { opacity: 0; visibility: hidden; transition: all 0.3s ease; } header #logo a { border: none; } header #logo img { max-height: 100%; opacity: 0; visibility: hidden; transition: all 0.3s ease; } header #logo #light-logo { position: absolute; top: 0; left: 0; } header #logo #dark-logo { opacity: 1; visibility: visible; } header:not(.menu-is-open):not(.hero-invisible) #logo.text-light #dark-logo { opacity: 0; visibility: hidden; } header:not(.menu-is-open):not(.hero-invisible) #logo.text-light #light-logo { opacity: 1; visibility: visible; } header.bg-light:not(.top-bar) #logo.text-light #dark-logo { opacity: 0; visibility: hidden; } header.bg-light:not(.top-bar) #logo.text-light #light-logo { opacity: 1; visibility: visible; } header.menu-is-open #logo.text-light #dark-logo { opacity: 1; visibility: visible; } header.menu-is-open #logo.text-light #light-logo { opacity: 0; visibility: hidden; } body.step-final header #logo #dark-logo { opacity: 0 !important; visibility: hidden !important; } body.step-final header #logo #light-logo { opacity: 1 !important; visibility: visible !important; } .header-top-bar { width: calc(100% - 100px); height: 80px; /* height of toggle */ position: fixed; top: 0; left: 100px; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.05); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ z-index: 1400; opacity: 0; visibility: hidden; transition: all 0.3s ease; } header.hero-invisible ~.header-top-bar { width: calc(100% - 100px); visibility: visible; opacity: 1; height: 80px; /* height of toggle */ } /*---------------------------------------------- 4. FOOTER ------------------------------------------------*/ #footer { background: #262424; width: calc(100% - 100px); margin-left: 100px; font-size: 12px; line-height: 19px; } #footer .footer-inner { padding: 50px 0; } #footer p a { color: rgba(255,255,255,0.7); margin: 0 8px; border: none; } #footer p a:hover { color: #ffffff; } #footer p a:first-child { margin-left: 0; } #footer p a:last-child { margin-right: 0; } #footer p img { margin: 0 5px; } #footer p img:first-child { margin-left: 0; } #footer p img:last-child { margin-right: 0; } /*---------------------------------------------- 5. MENU ------------------------------------------------*/ #menu-inner { width: 0; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: #ffffff; -webkit-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); transition: all 600ms cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */ } header.menu-is-open #menu-inner { width: 100%; } /* Main Nav*/ nav#main-nav { width: 255px; padding-left: 125px; max-height: calc(100% - 300px); /*position: absolute; top: 125px; left: 0px;*/ margin-top: 120px; overflow-y: auto; overflow-x: hidden; /*-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);*/ transition: all 0.2s ease; } header.menu-is-open nav#main-nav { opacity: 1 !important;filter: alpha(opacity=100) !important;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; } nav#main-nav ul { width: 380px; list-style: none; margin: 0; padding: 0; } nav#main-nav > ul > li { margin: 7px 0; display: block; padding: 0; position: relative; left: 0px; } nav#main-nav > ul > li:first-child { margin-top: 0; } nav#main-nav > ul > li:last-child { margin-bottom: 0; } nav#main-nav ul > li > a { font-family: 'Roboto'; font-weight: 400; font-size: 21px; display: block; width: auto; text-transform: uppercase; letter-spacing: 0.07em; color: #262424; height: 36px; line-height: 36px; position: relative; transition: all 0.2s ease; overflow: hidden; border: none; } nav#main-nav ul > li > a:hover, nav#main-nav ul > li.current-menu-item > a, nav#main-nav ul > li:hover > a { color: #b98c56; } nav#main-nav ul > li { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); transition: all 0.5s ease; transition-delay: 0s; opacity: 0; } header.menu-is-open nav#main-nav ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); opacity: 1; } header.menu-is-open nav#main-nav > ul > li { transition-delay: 0.2s; } header.menu-is-open nav#main-nav > ul > li:nth-child(2) { transition-delay: 0.24s; } header.menu-is-open nav#main-nav > ul > li:nth-child(3) { transition-delay: 0.28s; } header.menu-is-open nav#main-nav > ul > li:nth-child(4) { transition-delay: 0.32s; } header.menu-is-open nav#main-nav > ul > li:nth-child(5) { transition-delay: 0.36s; } /* Secondary Nav*/ nav#secondary-nav { width: 255px; padding-left: 125px; /*position: absolute; bottom: 15%; left: 0px;*/ margin-top: 50px; overflow-y: auto; overflow-x: hidden; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); transition: all 0.4s ease; opacity: 0; } header.menu-is-open nav#secondary-nav { -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -o-transform: translateX(0) !important; transform: translateX(0) !important; opacity: 1; transition-delay: 0.6s; } nav#secondary-nav ul { width: 380px; list-style: none; margin: 0; padding: 0; } nav#secondary-nav > ul > li { margin: 4px 0; display: block; padding: 0; position: relative; left: 0px; } nav#secondary-nav > ul > li:first-child { margin-top: 0; } nav#secondary-nav > ul > li:last-child { margin-bottom: 0; } nav#secondary-nav ul > li > a { font-family: 'Roboto'; font-weight: 400; font-size: 12px; display: block; letter-spacing: 0.07em; color: rgba(0,0,0,0.5); height: 20px; line-height: 20px; text-transform: uppercase; transition: color 0.2s ease; border: none; } nav#secondary-nav ul > li > a:hover, nav#secondary-nav ul > li.current-menu-item > a, nav#secondary-nav ul > li:hover > a { color: #b98c56; } /*---------------------------------------------- 6. MENU TOGGLE (Hamburger) ------------------------------------------------*/ .menu-toggle { width: 100px; height: 80px; display: block; position: absolute; top: 0; left: 0; cursor: pointer; overflow: hidden; z-index: 10; transition: all 0.3s ease 0.3s; } header.minicart-visible .menu-toggle { opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* hamburger animation */ .menu-toggle span.hamburger, .menu-toggle span.hamburger:after, .menu-toggle span.hamburger:before { content: ""; display: block; width: 22px; height: 2px; background: #262424; position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -11px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); -moz-transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); -o-transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); transition-delay: 0.15s; } .menu-toggle span.hamburger:before { margin-top: -7px; top: 0; } .menu-toggle span.hamburger:after { margin-top: 7px; top: 0; } header.menu-is-open .menu-toggle span.hamburger { background: transparent; } header.menu-is-open .menu-toggle span.hamburger:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); margin-top: 0px; } header.menu-is-open .menu-toggle span.hamburger:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); margin-top: 0px; } /*---------------------------------------------- 7. HEADER FOOTER ------------------------------------------------*/ #header-footer { position: absolute; bottom: 0; left: 0; z-index: 10; transition: all 0.3s ease 0.3s; } header.minicart-visible #header-footer { opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* header cart */ #header-cart { width: 100px; height: 70px; } #header-cart #show-cart { width: 25px; height: 25px; line-height: 25px; display: block; background: #b98c56; color: #ffffff; border-radius: 20px; text-align: center; font-size: 11px; font-weight: 400; line-height: 25px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); border: none; transition: background 0.2s ease; } #header-cart #show-cart:hover { background: #262424; } #header-cart #show-cart::before { content: attr(data-name); font-family: 'Montserrat'; font-weight: 400; font-size: 10px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.12em; position: absolute; top: -17px; left: 50%; color: #262424; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; } #header-cart #show-cart:hover::before { top: -20px; opacity: 1; visibility: visible; } /*---------------------------------------------- 8. HERO / PAGETITLE ------------------------------------------------*/ #hero { position: relative; overflow: hidden; } #header ~ #hero { width: calc(100% - 100px); margin-left: 100px; } #hero.hero-full { min-height: 100vh; } #hero.hero-big { min-height: 75vh; } /* hero pagetitle */ #hero #page-title { padding-top: 100px; padding-bottom: 100px; position: relative; } #hero #page-title:not(.wrapper):not(.wrapper-small) { width: calc(100% - 100px); padding-left: 50px; padding-right: 50px; } #hero.hero-full #page-title, #hero.hero-big #page-title { margin-top: 0px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } #hero.hero-full #page-title.title-top, #hero.hero-big #page-title.title-top, #hero.hero-full #page-title.title-bottom, #hero.hero-big #page-title.title-bottom, #hero.hero-full #page-title.push-bottom:not(.title-top), #hero.hero-big #page-title.push-bottom:not(.title-top) { top: 0; -webkit-transform: translateY(0%) translateX(-50%); -moz-transform: translateY(0%) translateX(-50%); -ms-transform: translateY(0%) translateX(-50%); -o-transform: translateY(0%) translateX(-50%); transform: translateY(0%) translateX(-50%); } #hero.hero-full #page-title.title-bottom, #hero.hero-big #page-title.title-bottom { top: auto; bottom: 0; } #hero.hero-full #page-title.push-bottom:not(.title-top), #hero.hero-big #page-title.push-bottom:not(.title-top) { top: auto; bottom: 0; } /* pagetitle pusher */ #hero #page-title.pusher-title { overflow: hidden; } #hero #page-title .pusher.push-right { float: right; } #hero #page-title .pusher.one-half { width: 42%; } #hero #page-title .pusher.one-third { width: 33%; } #hero #page-title .pusher.one-fourth { width: 26%; } /* google map for hero*/ #hero > .google-map { height: 400px; } #hero.hero-full > .google-map { min-height: 100vh; } #hero.hero-big > .google-map { min-height: 75vh; } /* notfound */ .notfound { display: inline-block; width: 240px; height: 240px; border: 4px solid rgba(0,0,0,0.24); border-radius: 999px; line-height: 200px; font-size: 90px; } /*---------------------------------------------- 9. SMART NAV ------------------------------------------------*/ #smart-nav { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1401; } #smart-nav.fixed { bottom: auto; top: 0; position: fixed; margin-left: 50px; } #smart-nav .smart-nav-title { width: 100%; text-align: center; position: absolute; top: -30px; left: 0; } #smart-nav ul { overflow: hidden; list-style: none; margin: 0; padding: 0; } #smart-nav ul li { float: left; width: 90px; margin: 0; text-align: center; } #smart-nav ul li a { padding: 12px 0; color: #ffffff !important; /*border-top: 1px solid rgba(255,255,255,0.20);*/ border-bottom: none; display: block; transition: all 0.1s ease; position: relative; font-weight: 300; font-size: 11px; line-height: 15px; letter-spacing: 0.08em; text-align: center; opacity: 0.8; } #smart-nav ul li a:hover, #smart-nav.visible ul li.active a { opacity: 1; color: #b98c56 !important; } #smart-nav ul li img { margin-bottom: 6px; max-width: 80px; display: inline-block; transition: all 0.3s ease; } #smart-nav ul li img.icon-dark { position: absolute; top: 12px; left: calc(50% - 40px); opacity: 0; visibility: hidden; } #smart-nav ul li a span { display: block; } /*dark appearance */ header.hero-invisible ~ #hero #smart-nav ul li a { color: #000000 !important; } header.hero-invisible ~ #hero #smart-nav ul li a:hover { border-color: #000000; } header.hero-invisible ~ #hero #smart-nav ul li a:hover, header.hero-invisible ~ #hero #smart-nav.visible ul li.active a { color: #b98c56 !important; } header.hero-invisible ~ #hero #smart-nav ul li img.icon-dark { opacity: 1; visibility: visible; } header.hero-invisible ~ #hero #smart-nav ul li img.icon-light { opacity: 0; visibility: hidden; } /*---------------------------------------------- 10. WOO COMMERCE ------------------------------------------------*/ /* woo general */ .woocommerce button.loading, .woocommerce button.loading:hover { opacity: 1 !important; color: #b98c56 !important; background: #b98c56 !important; } .woocommerce button.loading::after { content: "\e031" !important; top: calc(50% - 15px) !important; right: calc(50% - 15px) !important; -webkit-animation: spin 1.5s linear infinite !important; -moz-animation: spin 1.5s linear infinite !important; animation: spin 1.5s linear infinite !important; color: #ffffff !important; width: 30px; height: 30px; line-height: 30px; font-size: 18px; } .woocommerce button.added::after { content: "\e017" !important; position: absolute !important; top: calc(50% - 15px) !important; right: calc(50% - 15px) !important; color: #ffffff !important; width: 30px; height: 30px; line-height: 30px; font-size: 18px; margin: 0 !important; z-index: 1; opacity: 0; visibility:hidden; } .woocommerce button.added::after { -webkit-animation: show-confirm 2s 1 !important; -moz-animation: show-confirm 2s 1 !important; -ms-animation: show-confirm 2s 1 !important; animation: show-confirm 2s 1 !important; } .woocommerce button::before { content: ""; position: absolute; top: 0; right: 0; background: #22c787; width: 100%; height: 100%; opacity: 0; visibility:hidden; transition: all 0.2s ease; } .woocommerce button.added::before { -webkit-animation: show-confirm 2.5s 1; -moz-animation: show-confirm 2.5s 1; -ms-animation: show-confirm 2.5s 1; animation: show-confirm 2.5s 1; } @-webkit-keyframes show-confirm{0%{opacity:1;visibility: visible;}70%{opacity:1;}100%{opacity:0;visibility: hidden;}} @-moz-keyframes show-confirm{0%{opacity:1;visibility: visible;}70%{opacity:1;}100%{opacity:0;visibility: hidden;}} @keyframes show-confirm{0%{opacity:1;visibility: visible;}70%{opacity:1;}100%{opacity:0;visibility: hidden;}} /* woo general */ /* Final Step */ .product-step-final { background: #ffffff; } .product-images { width: 50%; min-height: 100vh; float: left; position: relative; } .product-description { width: 50%; float: right; min-height: 100vh; position: relative; } .product-description .description-inner { padding: 100px; padding-bottom: 50px; } .product-description .excerpt { margin-top: 25px; } .price { font-size: 12px; line-height: 19px; } .amount, .amount strong { font-family: 'Montserrat'; font-weight: 700 !important; font-size: 30px !important; line-height: 34px !important; /*color: #b98c56 !important;*/ color: #262424 !important; } .price .amount { display:block; } .text-light .amount { color: #ffffff !important; } .amount .woocommerce-Price-currencySymbol, .amount .currency { font-weight: 400 !important; font-size: 0.7em; line-height: 0.7em; color: rgba(0,0,0,0.6) !important; margin: 0 3px 0 0; } .text-light .amount .woocommerce-Price-currencySymbol { color: rgba(255,255,255,0.7) !important; } .add-to-cart { margin-top: 50px; } .add-to-cart .quantity { display: none !important; } .product-description .woocommerce-variation { float: left; position: relative; } .product-description .woocommerce-variation-add-to-cart { float: right; position: relative; } .product-description .woocommerce-variation-add-to-cart a.added_to_cart { display: none !important; padding: 0 !important; font-size: 13px; line-height: 20px !important; position: absolute; bottom: -20px; right: 0; } .product-description .woocommerce-variation .woocommerce-variation-description p, .product-description .woocommerce-variation .woocommerce-variation-availability p { margin: 0 !important; font-size: inherit !important; } .product-description .woocommerce-variation .woocommerce-variation-price { display: inline-block; } .product-description .woocommerce-variation .woocommerce-variation-availability { font-size: 12px; font-weight: 400; line-height: 18px; width: auto; display: inline-block; margin-left: 10px; } .product-description .woocommerce-variation .woocommerce-variation-availability .available-on-backorder { display: none; } .product-description .woocommerce-variation .woocommerce-variation-description { position: absolute; bottom: -18px; left: 18px; font-size: 12px; line-height: 18px; } .product-description .woocommerce-variation .woocommerce-variation-shipping-state { position: absolute; top: -18px; left: 18px; font-size: 12px; font-weight: 400; line-height: 18px; width: 300px; color: #262424; } .woocommerce .out-of-stock { color: #ff4d40 !important; } .woocommerce .add-to-cart .in-stock { display: none; } .woocommerce form.variations_form { margin-bottom: 0 !important; } /* sr woo gallery */ .product-images .images { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; float: none !important; margin: 0 !important; } .product-images .images .sr-woo-gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.3s ease 0.2s; } .product-images .images .sr-woo-gallery.active { opacity: 1; visibility: visible; transition: all 0.3s ease; } /* custom variations */ .product-description table.variations { display: none; } .sr-custom-variation { margin-top: 50px; } .sr-custom-variation .sr-select { margin: 10px 0 0 0; padding: 0; list-style: none; } .sr-custom-variation .sr-select.hidden { opacity: 0; } .sr-custom-variation .sr-select li { display: inline-block; margin: 0 8px; position: relative; max-width: 48px; } .sr-custom-variation .sr-select li:first-child { margin-left: 0 !important; } .sr-custom-variation .sr-select li:last-child { margin-right: 0 !important; } .sr-custom-variation .sr-select li .name { display: block; width: 70px; text-align: center; font-size: 11px; line-height: 15px; position:relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-top: 5px; transition: color 0.2s ease; } .sr-custom-variation .sr-select li a.active + .name { color: #262424; } .sr-custom-variation .sr-select li a { display: inline-block; padding: 2px; border: 2px solid rgba(0,0,0,0.2); border-radius: 30px; color: rgba(0,0,0,0.7); } .sr-custom-variation .sr-select li a.active, .sr-custom-variation .sr-select li a:hover { border-color: #262424; } .sr-custom-variation .sr-select li a span { display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 30px; overflow: hidden; text-align: center; font-size: 12px; font-weight: 500; color: rgba(0,0,0,0.6); } .sr-custom-variation .sr-select li a.active span { color: #262424; } /* wood preview on product single */ .sr-product-wood { margin: 10px 0 0 0; padding: 0; list-style: none; } .sr-product-wood li { display: inline-block; margin: 0 12px; position: relative; width: 60px; height: 60px; padding: 3px; border: 2px solid rgba(0,0,0,0.2); border-radius: 40px; } .text-light .sr-product-wood li { border-color: rgba(255,255,255,0.2); } .sr-product-wood li:first-child { margin-left: 0 !important; } .sr-product-wood li:last-child { margin-right: 0 !important; } .sr-product-wood li a { border: none; } .sr-product-wood li img { width: 60px; height: 60px; border-radius: 50px; } .sr-product-wood li .name { display: block; width: 80px; text-align: center; font-size: 12px; line-height: 15px; position:relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-top: 10px; } /* pre selection */ .model-selection { margin-top: 50px; } .model-selection .model-inner { margin-top: 5px; } .model-selection .model small { display: inline-block; margin-left: 10px; } /* back to first button */ #back-to-first { position: fixed; top: 35px; right: 50px; border: none; color: #000000; font-family: 'Montserrat'; font-weight: 400; font-size: 10px; line-height: 19px; letter-spacing: 0.14em; text-transform: uppercase; padding-right: 30px; z-index: 11; } #back-to-first span { color: #000000; transition: color 0.2s ease; } #back-to-first:hover span { color: #b98c56; } #back-to-first::before, #back-to-first::after { content: ""; position: absolute; top: calc(50% - 2px); right: 0px; height: 2px; width: 22px; background-color: #000000; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); transition: background 0.2s ease; } #back-to-first::after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #back-to-first:hover::before, #back-to-first:hover::after { background-color: #b98c56; } /* single-fixed */ #product-single .single-fixed { position: fixed; top: 0px; right: 0px; z-index: 1401; overflow: hidden; max-height: 80px; } #product-single .single-fixed .buy-now { float: right; } #product-single .single-fixed .buy-now a { border: none; height: 30px; line-height: 30px; padding: 38px 50px 12px 50px; position: relative; display: block; transition: all 0.2s ease; background: #b98c56; color: #ffffff; } #product-single .single-fixed .buy-now a:hover { border-color: #d29f62; background: #d29f62; } #product-single .single-fixed .buy-now a > span { font-family: 'Montserrat'; font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } #product-single .single-fixed .buy-now a .price { font-size: 11px; line-height: 16px; text-align: center; padding: 5px 0; position: absolute; top: 15px; left: 0; width: 100%; transition: all 0.2s ease; color: #ffffff; } #product-single .single-fixed .buy-now a .amount { font-size: 13px !important; line-height: 20px !important; display: inline-block; margin-left: 3px; transition: all 0.2s ease; color: #ffffff !important; } #product-single .single-fixed .buy-now a .amount .woocommerce-Price-currencySymbol { color: #ffffff !important; } /* wood-types */ #product-single .single-fixed .wood-types { float: right; border-left: 1px solid rgba(0,0,0,0.05); text-align: center; padding: 16px 40px 0 40px; height: 64px; } #product-single .single-fixed .wood-types small { font-size: 12px; } #product-single .single-fixed .wood-types .sr-product-wood { margin-top: 3px; } #product-single .single-fixed .wood-types .sr-product-wood li { margin: 0 5px; width: 20px; height: 20px; padding: 0; border: none; } #product-single .single-fixed .wood-types .sr-product-wood li img { width: 20px; height: 20px; } #product-single .single-fixed .wood-types .sr-product-wood li .name { display: none; } /* share */ #product-single .single-fixed .share { float: right; border-left: 1px solid rgba(0,0,0,0.05); text-align: center; padding: 14px 40px 0 40px; height: 66px; } #product-single .single-fixed .share small { font-size: 11px; } #product-single .single-fixed .share ul { margin: -2px; } #product-single .single-fixed .share ul li a:before { font-size: 16px; } #product-single .single-fixed .share ul li.facebook a { color: #446ebf; } #product-single .single-fixed .share ul li.twitter a { color: #39aadc; } #product-single .single-fixed .share ul li.pinterest a { color: #c81e1e; } /*#product-single .single-fixed .share ul li { display: block; margin: 0; } #product-single .single-fixed .share ul li a { display: block; width: 26px; height: 27px; text-align: center; line-height: 27px; padding: 0; color: #ffffff; } #product-single .single-fixed .share ul li:nth-child(2n) a { height: 26px; line-height: 26px; } #product-single .single-fixed .share ul li a:before { font-size: 13px; } #product-single .single-fixed .share ul li.facebook a { background: #446ebf; } #product-single .single-fixed .share ul li.twitter a { background: #39aadc; } #product-single .single-fixed .share ul li.pinterest a { background: #c81e1e; }*/ /* Pre Screen */ #product-step-pre { position: fixed; top: 0; left: 100px; width: calc(100% - 100px); height: 100%; background: #ffffff; z-index: 10; } #product-step-pre .pre-inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 1024px; } #product-step-pre .pre-inner .sr-custom-variation { margin-top: 0px; margin-bottom: 0px; } #product-step-pre .pre-inner .custom-model > .sr-select { margin-top: 25px; } #product-step-pre .pre-inner .custom-model > .sr-select > li { max-width: none; width: 187px; margin: 0 20px; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a { border: none; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a > img { transition: all 0.35s ease; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a:hover > img, #product-step-pre .pre-inner .custom-model > .sr-select > li > a.active > img { transform: scale(1.05); } #product-step-pre .pre-inner .custom-model > .sr-select > li > .name { display: block; width: auto; text-align: center; font-size: 16px; line-height: 21px; margin-top: 10px; margin-bottom: 15px; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a ~ ul.sr-select li { opacity: 0; visibility: hidden; -webkit-transform: translateY(-15px) ; -moz-transform: translateY(-15px) ; -ms-transform: translateY(-15px) ; -o-transform: translateY(-15px) ; transform: translateY(-15px) ; transition: all 0.4s ease; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a.active ~ ul.sr-select li { opacity: 1; visibility: visible; -webkit-transform: translateY(0) ; -moz-transform: translateY(0) ; -ms-transform: translateY(0) ; -o-transform: translateY(0) ; transform: translateY(0) ; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a.active ~ ul.sr-select li { transition-delay: 0.1s; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a.active ~ ul.sr-select li:nth-child(2) { transition-delay: 0.16s; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a.active ~ ul.sr-select li:nth-child(3) { transition-delay: 0.22s; } #product-step-pre .pre-inner .custom-model > .sr-select > li > a ~ .add-spacer { height: 51px; line-height: 51px; margin-top: 10px; display: inline-block; opacity: 0; } /* step animation */ #product-single #product-step-start { max-height: 10000px; overflow: hidden; transition: all 0.515s ease 0.4s, max-height 0.01s ease 0.5s; } #product-single.step-pre #product-step-start, #product-single.step-final #product-step-start { max-height: 0px; opacity: 0; -webkit-transform: translateY(-89px); -moz-transform: translateY(-89px); -ms-transform: translateY(-89px); -o-transform: translateY(-89px); transform: translateY(-89px); transition: all 0.515s ease, max-height 0.01s ease 1s; } #product-single #product-step-pre { opacity: 0; visibility: hidden; transition: all 0.515s ease; -webkit-transform: translateY(-89px); -moz-transform: translateY(-89px); -ms-transform: translateY(-89px); -o-transform: translateY(-89px); transform: translateY(-89px); } #product-single.step-pre #product-step-pre { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition-delay: 0.4s; } #product-single #product-step-final { max-height: 0px; overflow: hidden; transition: max-height 0.01s ease 0.6s; } #product-single.step-pre #product-step-final, #product-single.step-final #product-step-final { max-height: 10000px; transition: max-height 0.01s ease 1s; } #product-single #product-step-final .product-images, #product-single #product-step-final .product-description { opacity: 0; -webkit-transform: translateY(-89px); -moz-transform: translateY(-89px); -ms-transform: translateY(-89px); -o-transform: translateY(-89px); transform: translateY(-89px); transition: all 0.515s ease; } #product-single.step-final #product-step-final .product-images, #product-single.step-final #product-step-final .product-description { opacity: 1; -webkit-transform: translateY(0) ; -moz-transform: translateY(0) ; -ms-transform: translateY(0) ; -o-transform: translateY(0) ; transform: translateY(0) ; transition: all 0.515s ease 0.45s; } #product-single.step-final #product-step-final .product-description { transition-delay: 0.6s; } footer { max-height: 10000px; overflow: hidden; transition: all 0.515s ease 0.4s, max-height 0.01s ease 0.5s; } body.step-pre footer, body.step-final footer { max-height: 0px; opacity: 0; transition: all 0.515s ease, max-height 0.01s ease 1s; } #back-to-first { opacity: 0; right: 40px; visibility: hidden; transition: all 0.315s ease; } #product-single.step-pre #back-to-first, #product-single.step-final #back-to-first { opacity: 1; right: 50px; visibility: visible; transition-delay: 0.8s; } #product-single .single-fixed { opacity: 0; visibility: hidden; transition: all 0.415s ease; } #header.hero-invisible ~ #page-body #product-single:not(.step-pre):not(.step-final) .single-fixed { opacity: 1; visibility: visible; } #product-single .single-fixed .buy-now, #product-single .single-fixed .wood-types, #product-single .single-fixed .share { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); opacity: 0; visibility: hidden; transition: all 0.315s ease 0.1s; } #product-single .single-fixed .wood-types { transition-delay: 0.2s; } #product-single .single-fixed .share { transition-delay: 0.3s; } #header.hero-invisible ~ #page-body #product-single:not(.step-pre):not(.step-final) .single-fixed .buy-now, #header.hero-invisible ~ #page-body #product-single:not(.step-pre):not(.step-final) .single-fixed .wood-types, #header.hero-invisible ~ #page-body #product-single:not(.step-pre):not(.step-final) .single-fixed .share { opacity: 1; visibility: visible; -webkit-transform: translateX(-0px); -moz-transform: translateX(-0px); -ms-transform: translateX(-0px); -o-transform: translateX(-0px); transform: translateX(-0px); } /*---------------------------------------------- 12. PAGE LOADER ------------------------------------------------*/ #page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100001; /* big z-index for revolution slider */ background: #ffffff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; transition-delay: 0.2s; opacity: 1; visibility: visible; } .loaded #page-loader { opacity: 0; visibility: hidden; } .loading-end #page-loader { display: none; } #page-loader .loader-name { max-width: 160px; max-height: 160px; position: absolute; top: calc(50% + 2px); left: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; transition: all 0.3s ease 0.3s; } .loaded #page-loader .loader-name { transition: all 0.4s ease; } .loading:not(.loaded) #page-loader .loader-name { opacity: 1; } #page-loader .loader-circle { position: fixed; z-index: 2001; top: 50%; left: 50%; width: 140px; height: 140px; text-align: center; padding: 0; margin-top: -70px; margin-left: -70px; -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ box-sizing: border-box; border: 4px solid #000000; border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: 0; /* Fixes the icon wobble issue in firefox */ -moz-transform-origin: 50% 53%; -webkit-animation: lightcase-loading-spin 0.8s infinite ease; -moz-animation: lightcase-loading-spin 0.8s infinite ease; -o-animation: lightcase-loading-spin 0.8s infinite ease; animation: lightcase-loading-spin 0.8s infinite ease; transition: all 0.3s ease 0.1s; } .loaded #page-loader .loader-circle { transition: all 0.4s ease; } .loading:not(.loaded) #page-loader .loader-circle { opacity: 1; } /*---------------------------------------------- 14. EXTERN PLUGINS (smartscroll,masonry,revolution slider, owl) ------------------------------------------------*/ /* masonry / isotope */ .isotope-grid { width: 100%; overflow: hidden; } div .isotope-grid:first-child { margin-top: 0px; } [class*='wrapper'] .isotope-grid { width: 100%; } .isotope-grid[class*='isotope-spaced'] { width: calc(100% - 25px); left: 25px; margin-bottom: -25px; } [class*='wrapper'] .isotope-grid[class*='isotope-spaced'] { width: calc(100% + 25px); left: 0; } .isotope-grid[class*='isotope-spaced-big'] { width: calc(100% - 50px); left: 50px; margin-bottom: -50px; } [class*='wrapper'] .isotope-grid[class*='isotope-spaced-big'] { width: calc(100% + 50px); } .isotope-grid .isotope-item { margin-right: 0px; margin-bottom: 0px; float: left; overflow:hidden; position: relative; } .isotope-grid[class*='isotope-spaced'] .isotope-item { margin-bottom: 25px; margin-right: 25px; } .isotope-grid[class*='isotope-spaced'] .grid-sizer { margin-right: 25px; } /* style modern */ .isotope-grid[class*='style-modern'] .isotope-item, .isotope-grid[class*='style-modern'] .grid-sizer { width: 25%; } .isotope-grid[class*='style-modern'] .isotope-item.wide, .isotope-grid[class*='style-modern'] .isotope-item.wide-tall { width: 50%; } .isotope-grid.style-modern-2 .isotope-item, .isotope-grid.style-modern-2 .grid-sizer { width: 50%; } .isotope-grid.style-modern-2 .isotope-item.wide, .isotope-grid.style-modern-2 .isotope-item.wide-tall { width: 100%; } .isotope-grid.style-modern-3 .isotope-item, .isotope-grid.style-modern-3 .grid-sizer { width: 33.33%; } .isotope-grid.style-modern-3 .isotope-item.wide, .isotope-grid.style-modern-3 .isotope-item.wide-tall { width: 66.66%; } .isotope-grid.style-modern-5 .isotope-item, .isotope-grid.style-modern-5 .grid-sizer { width: 20%; } .isotope-grid.style-modern-5 .isotope-item.wide, .isotope-grid.style-modern-5 .isotope-item.wide-tall { width: 40%; } .isotope-grid[class*='isotope-spaced'][class*='style-modern'] .isotope-item, .isotope-grid[class*='isotope-spaced'][class*='style-modern'] .grid-sizer { width: calc(25% - 25px); } .isotope-grid[class*='isotope-spaced'][class*='style-modern'] .isotope-item.wide, .isotope-grid[class*='isotope-spaced'][class*='style-modern'] .isotope-item.wide-tall { width: calc(50% - 25px); } .isotope-grid.style-modern-2[class*='isotope-spaced'] .isotope-item, .isotope-grid.style-modern-2[class*='isotope-spaced'] .grid-sizer { width: calc(50% - 25px); } .isotope-grid.style-modern-2[class*='isotope-spaced'] .isotope-item.wide, .isotope-grid.style-modern-2[class*='isotope-spaced'] .isotope-item.wide-tall { width: calc(100% - 25px); } .isotope-grid.style-modern-3[class*='isotope-spaced'] .isotope-item, .isotope-grid.style-modern-3[class*='isotope-spaced'] .grid-sizer { width: calc(33.33% - 25px); } .isotope-grid.style-modern-3[class*='isotope-spaced'] .isotope-item.wide, .isotope-grid.style-modern-3[class*='isotope-spaced'] .isotope-item.wide-tall { width: calc(66.66% - 25px); } .isotope-grid.style-modern-5[class*='isotope-spaced'] .isotope-item, .isotope-grid.style-modern-5[class*='isotope-spaced'] .grid-sizer { width: calc(20% - 25px); } .isotope-grid.style-modern-5[class*='isotope-spaced'] .isotope-item.wide, .isotope-grid.style-modern-5[class*='isotope-spaced'] .isotope-item.wide-tall { width: calc(40% - 25px); } .isotope-grid[class*='style-modern'] .portfolio-media { width: calc(100% + 2px); height: calc(100% + 2px); left: -1px; top: -1px; position: relative; } .isotope-grid[class*="style-modern"] .isotope-item .thumb-hover { height: 100%; } .isotope-grid[class*='style-modern'] .isotope-item img { position: absolute; left: 0; top: 0; max-width: none; } .isotope-grid[class*='style-modern'] .isotope-item img.wide-img { width: 100% !important; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .isotope-grid[class*='style-modern'] .isotope-item img.tall-img { width: auto !important; height: 100% !important; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .isotope-grid .isotope-item .do-anim { width: 100%; height: 100%; } /* lazy load */ .lazy-wrapper { width: 100%; display: block; background: rgba(0,0,0,0.06); transition: background 1s ease; } .isotope-grid[class*='style-modern'] .isotope-item .lazy-wrapper { display: initial !important; } .lazy-wrapper.loaded { width: auto !important; max-width: inherit !important; height: auto !important; min-height: auto !important; display: initial !important; background: transparent; } .lazy-wrapper .lazy-img { opacity: 0; transition: opacity 0.6s ease; } .lazy-wrapper.loaded .lazy-img { opacity: 1; } /* mute video for phat background video */ .phatvideo-bg .mute-video { font-family: 'Hind'; font-weight: 500; font-size: 12px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; bottom: 20px !important; left: auto !important; right: 20px !important; } .phatvideo-bg .mute-video.unmute:after { content: ""; height: 1px; width: calc(100% + 4px); position: absolute; top: calc(50% - 1px); left: -2px; background: #ffffff; } /*---------------------------------------------- 15. COLUMNS SECTION ------------------------------------------------*/ .column-section { margin-top: 50px; } div .column-section:first-child { margin-top: 0px; } .column { float: left; margin-right: 25px; min-height: 1px; box-sizing: border-box; } .column.push-right { float: right; margin-right: 0 !important; } .sticky-columns .column { margin: 0 !important; } .wrapper .column-section .column:first-child, .wrapper-small .column-section .column:first-child { margin-left: 0px; } .spaced-big .column { margin-right: 100px; } .column-section.full-height .column { min-height: 100vh; } .one-full { width: calc(100% - 50px); float: none; margin-right: 0; } .one-half { width: calc(50% - 37.5px); } .one-third { width: calc(33.33% - 33.33px); } .two-third { width: calc(66.66% - 41.66px); } /* ((25*4)/3) + (25/3) */ .one-fourth { width: calc(25% - 31.25px); } .two-fourth { width: calc(50% - 37.5px); } .three-fourth { width: calc(75% - 43.75px); } .one-fifth { width: calc(20% - 30px); } .two-fifth { width: calc(40% - 35px); } .three-fifth { width: calc(60% - 40px); } .four-fifth { width: calc(80% - 45px); } .one-sixth { width: calc(16.66% - 29.1px); } .two-sixth { width: calc(33.33% - 33.3px); } .three-sixth { width: calc(50% - 37.4px); } .four-sixth { width: calc(66.66% - 41.6px); } .five-sixth { width: calc(83.33% - 45.7px); } [class*='wrapper'] .one-full { width: 100%; float: none; margin-right: 0; } [class*='wrapper'] .one-half { width: calc(50% - 12.5px); } [class*='wrapper'] .one-third { width: calc(33.33% - 16.66px); } [class*='wrapper'] .two-third { width: calc(66.6% - 8.33px); } /* ((25*2)/3) - (25/3) */ [class*='wrapper'] .one-fourth { width: calc(25% - 18.75px); } [class*='wrapper'] .two-fourth { width: calc(50% - 12.5px); } [class*='wrapper'] .three-fourth { width: calc(75% - 6.25px); } [class*='wrapper'] .one-fifth { width: calc(20% - 20px); } [class*='wrapper'] .two-fifth { width: calc(40% - 15px); } [class*='wrapper'] .three-fifth { width: calc(60% - 10px); } [class*='wrapper'] .four-fifth { width: calc(80% - 5px); } [class*='wrapper'] .one-sixth { width: calc(16.66% - 20.8px); } [class*='wrapper'] .two-sixth { width: calc(33.33% - 16.7px); } [class*='wrapper'] .three-sixth { width: calc(50% - 12.5px); } [class*='wrapper'] .four-sixth { width: calc(66.66% - 8.4px); } [class*='wrapper'] .five-sixth { width: calc(83.33% - 4.2px); } [class*='wrapper'] .spaced-big .one-half { width: calc(50% - 50px); } [class*='wrapper'] .spaced-big .one-third { width: calc(33.33% - 50px); margin-right: 75px; } [class*='wrapper'] .spaced-big .two-third { width: calc(66.6% - 25px); margin-right: 75px; } /* ((75*2)/3) - (75/3) */ .sticky-columns .one-full { width: 100%; } .sticky-columns .one-half { width: 50%; } .sticky-columns .one-third { width: 33.33%; } .sticky-columns .two-third { width: 66.66%; } .sticky-columns .one-fourth { width: 25%; } .sticky-columns .two-fourth { width: 50%; } .sticky-columns .three-fourth { width: 75%; } .sticky-columns .one-fifth { width: 20%; } .sticky-columns .two-fifth { width: 40%; } .sticky-columns .three-fifth { width: 60%; } .sticky-columns .four-fifth { width: 80%; } .sticky-columns .one-sixth { width: 16.66%; } .sticky-columns .two-sixth { width: 33.33%; } .sticky-columns .three-sixth { width: 50%; } .sticky-columns .four-sixth { width: 66.66%; } .sticky-columns .five-sixth { width: 83.33%; } .last-col { margin-right: 0px !important; } /*---------------------------------------------- 16. FULLWIDTH SECTION ------------------------------------------------*/ .fullwidth-section { position: relative; } .fullwidth-section .fullwidth-content { padding: 100px 0; z-index: 5; width: 100%; } .fullwidth-section.notoppadding .fullwidth-content { padding-top: 0; } .fullwidth-section.nobottompadding .fullwidth-content { padding-bottom: 0; } .fullwidth-section.fullheight { min-height: 100vh; } .header-top-bar ~ #page-body .fullwidth-section.fullheight { min-height: calc(100vh - 80px); } .fullwidth-section.fullheight .fullwidth-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* bg slider */ .fullwidth-section .bg-slider, #hero .bg-slider { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } .fullwidth-section .bg-slider .owl-stage-outer, .fullwidth-section .bg-slider .owl-stage, #hero .bg-slider .owl-stage-outer, #hero .bg-slider .owl-stage { height: 100%; width: 100%; } .fullwidth-section .bg-slider .owl-item, #hero .bg-slider .owl-item { height: 100%; } .fullwidth-section .bg-slider .slider-item, #hero .bg-slider .slider-item { height: 100%; background-position: center center; background-size: cover; } /*---------------------------------------------- 19. ELEMENTS ------------------------------------------------*/ /* Buttons -------------------------------------------------*/ .sr-button { font-family: 'Montserrat'; font-weight: 400; font-size: 12px; line-height: 21px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,0,0.12); color: #262424 !important; display: inline-block; padding: 10px 40px; transition: all 0.2s ease; max-width: 100%; margin: 2px 0 3px 0; } .text-light .sr-button { border-color: rgba(255,255,255,0.26); color: #ffffff !important; } .sr-button:hover { border-color: rgba(0,0,0,0.3); } .text-light .sr-button:hover { border-color: rgba(255,255,255,0.5); } .sr-button.button-mini { font-size: 9px; line-height: 15px; padding: 10px 25px; } .sr-button.button-small { font-size: 10px; line-height: 17px; padding: 14px 40px; } .sr-button.button-medium { font-size: 10px; line-height: 19px; padding: 18px 50px; } .sr-button.button-big { font-size: 12px; line-height: 20px; padding: 20px 60px; } .sr-button.style-2 { border: none; background: #262424; color: #ffffff !important; } .sr-button.style-2:hover { background: rgba(0,0,0,0.7); } .text-light .sr-button.style-2 { background: #ffffff; color: #262424 !important; } .text-light .sr-button.style-2:hover { background: rgba(255,255,255,0.7); } .sr-button.style-3 { border: none; background: rgba(0,0,0,0.06); } .sr-button.style-3:hover { background: rgba(0,0,0,0.15); } .text-light .sr-button.style-3 { background: rgba(255,255,255,0.12); } .text-light .sr-button.style-3:hover { background: rgba(255,255,255,0.25); } .sr-button.style-4 { border: none; color: #ffffff !important; background: #b98c56; } .sr-button.style-4:hover { background: #d29f62; } .text-light .sr-button.style-4 { color: #ffffff !important; background: #b98c56; } .text-light .sr-button.style-4:hover { background: #d29f62; } .sr-button.button-merge { margin-right: -5px; } .sr-button.button-merge + .sr-button { position: relative; } .sr-button.button-merge + .sr-button.style-4 { color: #ffffff !important; background: #d29f62; } .sr-button.button-merge + .sr-button.style-4:hover { background: #ebb16d; } .sr-button.button-merge + .text-light .sr-button.style-4 { color: #ffffff !important; background: #d29f62; } .sr-button.button-merge + .text-light .sr-button.style-4:hover { background: #ebb16d; } .sr-button.button-merge + .sr-button::before { content: "or"; position: absolute; top: calc(50% - 10px); left: -10px; text-align:center; width: 20px; height: 20px; line-height: 19px; background: #ffffff; color: rgba(0,0,0,0.5); border-radius: 20px; font-size: 10px; letter-spacing: 0em; text-transform: lowercase; } /* with arrow button */ .sr-button-with-arrow { position: relative; display: inline-block; padding-right: 15px; color: #b98c56 !important; } .sr-button-with-arrow:hover { border-bottom: 1px solid #b98c56; } .sr-button-with-arrow:after { content: ""; position: absolute; top: calc(55% - 1px); right: 2px; border-top: 2px solid #b98c56; border-right: 2px solid #b98c56; display: block; width: 6px; height: 6px; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); transition: all 0.3s ease; } /* icon button */ .sr-button-icon { display: inline-block; font-size: 16px; width: 60px; height: 60px; line-height: 60px; text-align: center; border: 2px solid rgba(0,0,0,0.5); -moz-border-radius:50px; -khtml-border-radius:50px; -webkit-border-radius:50px; border-radius: 50px; transition: all 0.3s ease; position: relative; } .sr-button-icon:hover { border-color: #262424; color: #262424; } .text-light .sr-button-icon { border-color: rgba(255,255,255,0.5); } .text-light .sr-button-icon:hover { border-color: #ffffff; color: #ffffff; } .sr-button-icon.button-mini { font-size: 10px; width: 30px; height: 30px; line-height: 30px; } .sr-button-icon.button-small { font-size: 13px; width: 45px; height: 45px; line-height: 45px; } .sr-button-icon.button-medium { font-size: 16px; width: 60px; height: 60px; line-height: 60px; } .sr-button-icon.button-big { font-size: 20px; width: 80px; height: 80px; line-height: 80px; } .sr-button-icon i { color: #262424; } .text-light .sr-button-icon i { color: #ffffff; } .sr-button-icon.style-2 { border: none; background: #262424; color: #ffffff !important; } .sr-button-icon.style-2 i { color: #ffffff !important; } .sr-button-icon.style-2:hover { background: rgba(0,0,0,0.8); } .text-light .sr-button-icon.style-2 { background: #ffffff; color: #262424 !important; } .text-light .sr-button-icon.style-2 i { color: #262424 !important; } .text-light .sr-button-icon.style-2:hover { background: rgba(255,255,255,0.8); } .sr-button-icon.style-3 { border: none; background: rgba(0,0,0,0.06); } .sr-button-icon.style-3:hover { background: rgba(0,0,0,0.15); } .text-light .sr-button-icon.style-3 { background: rgba(255,255,255,0.12); } .text-light .sr-button-icon.style-3:hover { background: rgba(255,255,255,0.25); } .sr-button-icon i.fa { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) ; -moz-transform: translateX(-50%) translateY(-50%) ; -ms-transform: translateX(-50%) translateY(-50%) ; -o-transform: translateX(-50%) translateY(-50%) ; transform: translateX(-50%) translateY(-50%) ; } .sr-button-icon i.fa-play { margin-left: 3%; } /* icon button with text */ .sr-button-icon-text { position: relative; color: #262424; display: inline-block; border: none; } .text-light .sr-button-icon-text { color: #ffffff; } .sr-button-icon-text i { border: 2px solid rgba(0,0,0,0.5); -moz-border-radius:50px; -khtml-border-radius:50px; -webkit-border-radius:50px; border-radius: 50px; font-size: 22px; width: 60px; height: 60px; line-height: 60px; color: #262424; display: inline-block; text-align:center; font-size: 18px; transition: all 0.3s ease; } .sr-button-icon-text:hover i { border-color: #b98c56; color: #262424; } .text-light .sr-button-icon-text i { border-color: rgba(255,255,255,0.5); color: #ffffff; } .text-light .sr-button-icon-text:hover i { border-color: #b98c56; color: #ffffff; } .sr-button-icon-text i.fa-play:before { margin-left: 10%; } .sr-button-icon-text span { display: inline-block; margin-left: 20px; position: relative; top: -2px; font-family: 'Montserrat'; font-weight: 400; font-size: 16px; line-height: 50px; letter-spacing: 0.14em; text-transform: uppercase; } /* separator (hr) -------------------------------------------------*/ hr { border: none; background: rgba(0,0,0,0.12); height: 1px; width: 100%; margin: 0; margin-left: 0; } .text-light hr { background: rgba(255,255,255,0.18); } .align-center hr, hr.align-center { margin-left: auto; margin-right: auto; } .align-right hr, hr.align-right { margin-left: auto; margin-right: 0; } hr.mini { width: 25px; } hr.small { width: 50px; } hr.medium { width: 100px; } hr.big { width: 200px; } /* spacer -------------------------------------------------*/ div[class*='spacer-'] { display: block; } .spacer-mini { height: 15px; } .spacer-small { height: 25px; } .spacer-medium { height: 50px; } .spacer-big { height: 100px; } div[class*='spacer-'] + p, div[class*='spacer-'] + div, cdiv[class*='spacer-'] + blockquote, div[class*='spacer-'] + ul, div[class*='spacer-'] + h1, div[class*='spacer-'] + h2, div[class*='spacer-'] + h3, div[class*='spacer-'] + h4, div[class*='spacer-'] + h5, div[class*='spacer-'] + h6 { margin-top: 0px !important; } /* sr-vertical-gallery -------------------------------------------------*/ .sr-vertical-gallery { margin: 0; list-style: none; padding: 0; } .sr-vertical-gallery li { margin: 0; padding: 0; display: block; text-align: center; } .sr-vertical-gallery.gallery-spaced li { margin: 25px 0 0 0; } .sr-vertical-gallery.gallery-spaced li:first-child { margin: 0; } /* Inline Video -------------------------------------------------*/ .inline-video { position: relative; cursor: pointer; display: inline-block; max-width: 100%; } .slider-item.inline-video, .parallax-section.inline-video { display: inherit; } .inline-video:before { content: "\f04b"; font-family: "FontAwesome"; color: #ffffff; font-size: 20px; width: 54px; padding-left: 6px; height: 60px; line-height: 60px; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) ; -moz-transform: translateX(-50%) translateY(-50%) ; -ms-transform: translateX(-50%) translateY(-50%) ; -o-transform: translateX(-50%) translateY(-50%) ; transform: translateX(-50%) translateY(-50%) ; border: 2px solid rgba(255,255,255,0.5); -moz-border-radius:50px; -khtml-border-radius:50px; -webkit-border-radius:50px; border-radius: 50px; transition: all 0.3s ease; } .inline-video:hover::before { border-color: #ffffff; } .inline-video .inline-iframe-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .inline-video .inline-iframe-container .close-inline-video { color: #ffffff; width: 34px; height: 34px; line-height: 34px; text-align: center; position: absolute; top: 20px; left: 50%; -webkit-transform: translateX(-50%) ; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) ; border: 2px solid rgba(255, 255, 255, .5); -moz-border-radius:50px; -khtml-border-radius:50px; -webkit-border-radius:50px; border-radius: 50px; opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: all 0.3s ease; } .inline-video .inline-iframe-container .close-inline-video:hover { border-color: #ffffff; } .inline-video.active .inline-iframe-container:hover .close-inline-video { opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .inline-video .inline-iframe-container .close-inline-video:before { content: "\f00d"; font-family: "FontAwesome"; font-size: 14px; width: 34px; height: 34px; position: absolute; top: 0; left: 0; } /* team member -------------------------------------------------*/ .team-role { font-family: 'Montserrat'; font-weight: 400; font-variant-ligatures: common-ligatures; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; line-height: 20px; color: rgba(0,0,0,0.4); } .thumb-overlay .team-role { font-size: 12px; } .team-role + .team-name { margin: 0; } .text-light .team-role { color: rgba(255,255,255,0.55); } .text-light.thumb-overlay .team-role { color: rgba(255,255,255,0.7); } .team-infos { margin-top: 25px; } div .team-infos:first-child { margin: 0; } /* Tabs ------------------------------------------------*/ .tabs { margin-top: 25px; } div .tabs:first-child { margin-top: 0px; } .tabs ul.tab-nav { padding: 0; margin: 0; list-style: none; position: relative; overflow: hidden; } .tabs ul.tab-nav li { display: inline-block; margin: 0 20px 0 0; position: relative; padding-bottom: 5px; } .tabs ul.tab-nav li:after { content: ""; width: 100%; height: 1px; background: rgba(0,0,0,0.12); position: absolute; bottom: 5px; left: 0; opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease ; transition: all 0.3s ease; z-index: 0; } .text-light .tabs ul.tab-nav li:after { background: rgba(255,255,255,0.24); } .tabs ul.tab-nav li.active:after { bottom: 0px; opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .tabs ul.tab-nav li.active a { color: rgba(0,0,0,0.6); } .tabs .tab-container { margin-top: 25px; } .tabs .tab-container .tab-content.active { display: block !important; } /* tabs button */ .tabs-button ul.tab-nav li { background: rgba(0,0,0,0.06); padding: 10px 25px; margin: 0 1px 1px 0; float: left; } .tabs-button ul.tab-nav li:after { transition: none; bottom: -1px !important; background: rgba(0,0,0,0.06) !important; } .tabs-button .tab-container { margin-top: 0px; background: rgba(0,0,0,0.06); padding: 25px; } /* Toggle ------------------------------------------------*/ .toggle-item { margin-top: 25px; border-bottom: 1px solid rgba(0,0,0,0.12); } .toggle-item + .toggle-item { margin-top: 0px; } div .toggle-item:first-child { margin: 0; border-top: 1px solid rgba(0,0,0,0.12); } .toggle-title { position:relative; cursor: pointer; padding: 25px 0px 25px 50px; } .toggle-title:hover .toggle-name, .toggle-title.toggle-active .toggle-name { color: #b98c56; } .toggle-title:after { content: "\f067"; font-family: "FontAwesome"; font-size: 10px; line-height: 30px; color: #262424; width: 30px; height: 30px; position: absolute; top: 50%; left: 0px; margin-top: -17px; text-align: center; border: 2px solid rgba(0,0,0,0.12); border-radius: 50px; transition: all 0.1s ease; } .text-light .toggle-title:after { color: #ffffff; } .toggle-title.toggle-active:after { content: "\f068"; background: #262424; color: #ffffff; border-color: #262424; } .toggle-inner { padding: 0px 0 25px 50px; } /* counter -------------------------------------------------*/ .counter .counter-value { font-size: 104px; line-height: 120px; font-weight: 100; color: #b98c56; position: relative; left: -7px; display: inline-block; } .text-light .counter .counter-value {color: #ffffff; } .counter .unit { font-weight: 300; font-size: 20px; line-height: 30px; color: rgba(0,0,0,0.6); display: inline-block; margin-left: 5px; } .counter.align-center .unit { display:block; margin-top: -10px;} .text-light .counter .unit { color: rgba(255,255,255,0.7); } .counter .counter-name { font-family: "Montserrat"; text-transform: uppercase; letter-spacing: 0.12em; color: #262424; font-size: 14px; } .text-light .counter .counter-name { color: #ffffff; } .counter .counter-value.anim { opacity:0; -webkit-transition: opacity .6s ease; -o-transition: oopacity .6s ease; transition: opacity .6s ease; } .counter .counter-value.anim.animated { opacity:1; } .counter .counter-value.anim .main { display: none; } .counter .counter-value.anim .digit { position:relative; overflow:hidden; display: inline-block; vertical-align: middle; } .counter .counter-value.anim .digit > .digit-value { visibility:hidden; display: inline-block; vertical-align: middle; } .counter .counter-value.anim .digit .counter-animator { position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden; } .counter .counter-value.anim .digit .counter-animator ul { list-style:none; margin:0; padding:0; position:relative; transition: all 3s ease; } .counter .counter-value.anim .digit .counter-animator ul li { margin-top:0; } /* boxlink -------------------------------------------------*/ .box-link { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 100px 3%; text-align: center; position: relative; transition: all 0.3s ease; } .box-link:hover { background: #262424; color: #ffffff; } .box-link i.fa { border: 2px solid rgba(0,0,0,0.12); -moz-border-radius:50px; -khtml-border-radius:50px; -webkit-border-radius:50px; border-radius: 50px; width: 60px; height: 60px; line-height: 60px; color: #262424; display: inline-block; text-align:center; font-size: 18px; transition: all 0.3s ease; } .box-link:hover i.fa { border-color: rgba(255,255,255,0.24); color: #ffffff; } .box-link h1, .box-link h2, .box-link h3, .box-link h4, .box-link h5, .box-link h6 { transition: all 0.3s ease; } .box-link:hover h1, .box-link:hover h2, .box-link:hover h3, .box-link:hover h4, .box-link:hover h5, .box-link:hover h6 { border-color: rgba(255,255,255,0.24); color: #ffffff; } .box-link a.link-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /*---------------------------------------------- 17. THUMB OVERLAY EFFECT ------------------------------------------------*/ .thumb-hover { overflow: hidden; height: auto; display: block; width: 100%; max-width: 100%; position: relative; margin: 0; padding: 0; border: none; } /* overlay caption */ .thumb-hover .overlay-caption { position: absolute; top: 50%; left: 2rem; width: calc(100% - 4rem); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } .thumb-hover .overlay-caption:not(.align-left):not(.align-right) { text-align: center; } .thumb-hover .overlay-caption.bottom { top: inherit; bottom: 2rem; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .thumb-hover .overlay-caption.top { top: 2rem; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .thumb-hover .overlay-caption .caption-sub + h1.caption-name, .thumb-hover .overlay-caption h1.caption-name + .caption-sub { margin-top: 8px; } .thumb-hover .overlay-caption .caption-sub + h2.caption-name, .thumb-hover .overlay-caption h2.caption-name + .caption-sub { margin-top: 7px; } .thumb-hover .overlay-caption .caption-sub + h3.caption-name, .thumb-hover .overlay-caption h3.caption-name + .caption-sub { margin-top: 4px; } .thumb-hover .overlay-caption.hidden { opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: opacity 0.3s ease; } .thumb-hover:hover .overlay-caption.hidden { opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .thumb-hover .overlay-caption.hidden .caption-sub, .thumb-hover .overlay-caption.hidden .caption-name { display: block; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: all 0.3s ease 0.1s; } .thumb-hover .overlay-caption.align-left.hidden .caption-sub, .thumb-hover .overlay-caption.align-left.hidden .caption-name { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } .thumb-hover .overlay-caption.align-right.hidden .caption-sub, .thumb-hover .overlay-caption.align-right.hidden .caption-name { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } .thumb-hover .overlay-caption.hidden .caption-name { transition-delay: 0.2s; } .thumb-hover:hover .overlay-caption.hidden .caption-sub, .thumb-hover:hover .overlay-caption.hidden .caption-name { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .caption-dark .caption-sub , .caption-dark .caption-name { color: #000000; transition: color 0.41s ease; } .caption-light .caption-sub , .caption-light .caption-name { color: #ffffff; transition: color 0.41s ease; } /* img effect */ .thumb-hover img { -webkit-transition: all 0.6s cubic-bezier(0.600, 0.000, 0.200, 1.000); -moz-transition: all 0.6s cubic-bezier(0.600, 0.000, 0.200, 1.000); -o-transition: all 0.6s cubic-bezier(0.600, 0.000, 0.200, 1.000); transition: all 0.6s cubic-bezier(0.600, 0.000, 0.200, 1.000); -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000); } .thumb-hover:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .isotope-grid[class*='style-modern'] .isotope-item .thumb-hover:hover img.wide-img { -webkit-transform: translateY(-50%) scale(1.05); -moz-transform: translateY(-50%) scale(1.05); -ms-transform: translateY(-50%) scale(1.05); -o-transform: translateY(-50%) scale(1.05); transform: translateY(-50%) scale(1.05); } .isotope-grid[class*='style-modern'] .isotope-item .thumb-hover:hover img.tall-img { -webkit-transform: translateX(-50%) scale(1.05); -moz-transform: translateX(-50%) scale(1.05); -ms-transform: translateX(-50%) scale(1.05); -o-transform: translateX(-50%) scale(1.05); transform: translateX(-50%) scale(1.05); } /* social widget for thumb hover */ .thumb-hover .socialmedia-widget { position:absolute; left: calc(100% - 2rem); bottom: 2rem; opacity: 0; z-index: 2; transition: all 0.4s ease; margin: 0; } .thumb-hover:hover .socialmedia-widget { transition-delay: 0.2s; opacity: 1; } .thumb-hover .overlay-caption.bottom + .socialmedia-widget { top: 2rem; bottom: auto; } .thumb-hover .overlay-caption.align-left + .socialmedia-widget { left: 2rem; } /* overlay effect */ .thumb-hover.overlay-effect:before { content:""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ffffff; z-index: 1; opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: opacity 0.4s ease; } .thumb-hover.overlay-effect.text-light:before { background: #000000; } .thumb-hover.overlay-effect:hover:before { opacity: 0.7; filter: alpha(opacity=70); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .thumb-hover.text-light.overlay-effect:hover:before { opacity: 0.5; filter: alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .thumb-hover.overlay-effect:hover .caption-sub , .thumb-hover.overlay-effect:hover .caption-name { color: #000000; } .thumb-hover.text-light.overlay-effect:hover .caption-sub , .thumb-hover.text-light.overlay-effect:hover .caption-name { color: #ffffff; } /*---------------------------------------------- 20. WIDGETS ------------------------------------------------*/ /* General Widgets -------------------------------- */ .widget { margin-top: 50px; } div .widget:first-child { margin-top: 0px; } .widget-title + div, .widget-title + ul, .widget-title + p, .widget-title + ol { margin-top: 15px; } /* Social Media Widget -------------------------------- */ .socialmedia-widget { margin: 15px 0 0 0; padding: 0; list-style: none; } div .socialmedia-widget:first-child { margin: 0; } .socialmedia-widget li { display: inline-block; margin: 0; position: relative; } .socialmedia-widget li a { line-height: 20px; color: #262424; /*transition: all 0.2s ease;*/ display: block; text-align: center; padding: 0 6px 0 6px; border: none; } .socialmedia-widget li:first-child a { padding-left: 0px; } .socialmedia-widget li:last-child a { padding-right: 0px; } .text-light .socialmedia-widget li a { color: #ffffff; } .socialmedia-widget li a:before { display:block; transition: all 0.15s ease; font-family: FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .socialmedia-widget li.facebook a:before { content:"\f09a"; } .socialmedia-widget li.twitter a:before { content:"\f099" } .socialmedia-widget li.tumblr a:before { content: "\f173"; } .socialmedia-widget li.vimeo a:before { content: "\f194"; } .socialmedia-widget li.dribbble a:before { content: "\f17d"; } .socialmedia-widget li.deviantart a:before { content: "\f1bd"; } .socialmedia-widget li.behance a:before { content: "\f1b4"; } .socialmedia-widget li.flickr a:before { content: "\f16e"; } .socialmedia-widget li.linkedin a:before { content: "\f0e1"; } .socialmedia-widget li.rss a:before { content: "\f09e"; } .socialmedia-widget li.googleplus a:before { content: "\f0d5"; } .socialmedia-widget li.pinterest a:before { content: "\f0d2"; } .socialmedia-widget li.youtube a:before { content: "\f167"; } .socialmedia-widget li.mail a:before { content: "\f1fa"; } .socialmedia-widget li.instagram a:before { content: "\f16d"; } .socialmedia-widget li.xing a:before { content: "\f168"; } .socialmedia-widget li.dropbox a:before { content: "\f16b"; } .socialmedia-widget li.stumbleupon a:before { content: "\f1a4"; } .socialmedia-widget li.delicious a:before { content: "\f1a5"; } .socialmedia-widget li.wordpress a:before { content: "\f19a"; } .socialmedia-widget li.vk a:before { content: "\f189"; } .socialmedia-widget li.soundcloud a:before { content: "\f1be"; } .socialmedia-widget li.spotify a:before { content: "\f1bc"; } .socialmedia-widget li.codepen a:before { content: "\f1cb"; } .socialmedia-widget li.github a:before { content: "\f09b"; } .socialmedia-widget li.lastfm a:before { content: "\f202"; } .socialmedia-widget li.jsfiddle a:before { content: "\f1cc"; } .socialmedia-widget li.mixcloud a:before { content: "\f289"; } .socialmedia-widget li.skype a:before { content: "\f17e"; } .socialmedia-widget li.url a:before { content: "\f0ac"; } .socialmedia-widget li.facebook a:hover { color: #446ebf; } .socialmedia-widget li.twitter a:hover { color: #39aadc; } .socialmedia-widget li.tumblr a:hover { color: #4c6781; } .socialmedia-widget li.vimeo a:hover { color: #15c9f5; } .socialmedia-widget li.dribbble a:hover { color: #f14980; } .socialmedia-widget li.deviantart a:hover { color: #2ea06f; } .socialmedia-widget li.behance a:hover { color: #00b0f0; } .socialmedia-widget li.flickr a:hover { color: #f04783; } .socialmedia-widget li.linkedin a:hover { color: #81d3fd; } .socialmedia-widget li.rss a:hover { color: #ff8322; } .socialmedia-widget li.googleplus a:hover { color: #d63d1e; } .socialmedia-widget li.pinterest a:hover { color: #c81e1e; } .socialmedia-widget li.youtube a:hover { color: #ee423d; } .socialmedia-widget li.mail a:hover { color: #74624d; } .socialmedia-widget li.instagram a:hover { color: #95604b; } .socialmedia-widget li.xing a:hover { color: #036567; } .socialmedia-widget li.dropbox a:hover { color: #008cd2; } .socialmedia-widget li.stumbleupon a:hover { color: #f94213; } .socialmedia-widget li.delicious a:hover { color: #1b59c3; } .socialmedia-widget li.wordpress a:hover { color: #118bc0; } .socialmedia-widget li.vk a:hover { color: #29577b; } .socialmedia-widget li.soundcloud a:hover { color: #ff7700; } .socialmedia-widget li.spotify a:hover { color: #80b900; } .socialmedia-widget li.codepen a:hover { color: #171515; } .socialmedia-widget li.github a:hover { color: #171515; } .socialmedia-widget li.lastfm a:hover { color: #f94f14; } .socialmedia-widget li.jsfiddle a:hover { color: #0c9de8; } .socialmedia-widget li.mixcloud a:hover { color: #29587c; } .socialmedia-widget li.skype a:hover { color: #00aef3; } .socialmedia-widget li.url a:hover { color: #579abc; } .socialmedia-widget.text-style li a { font-size: 14px; font-weight: 400; color: #262424; padding: 0 8px 2px 8px; } .socialmedia-widget.text-style li:first-child a { padding-left: 0px; } .socialmedia-widget.text-style li:last-child a { padding-right: 0px; } .socialmedia-widget.text-style li a:before { display: none; } .socialmedia-widget.text-style li a:after { content:""; width: calc(100% - 16px); height: 1px; position:absolute; bottom: 5px; left: 8px; background: rgba(0,0,0,0); transition: all 0.3s ease; } .socialmedia-widget.text-style li:first-child a:after { width: calc(100% - 8px); left: 0; } .socialmedia-widget.text-style li:last-child a:after { width: calc(100% - 8px); } .socialmedia-widget.text-style li a:hover:after { bottom: 0px; background: rgba(0,0,0,0.12); } /* general animation */ [class*='do-anim'] { transition: all 0.6s ease; opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .animated[class*='do-anim'] { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translateY(); opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /*---------------------------------------------- 20. PLUGINS ------------------------------------------------*/ #simple-instagram-wrap .simple-instagram-list { overflow: hidden; width: calc(100% + 25px); margin-bottom: -25px; } #simple-instagram-wrap .simple-instagram-list li.simple-instagram-list-item { margin: 0 25px 25px 0; width: calc(25% - 25px); transition: opacity 0.2s ease; } #simple-instagram-wrap .simple-instagram-list li.simple-instagram-list-item:hover { opacity: 0.8; } /* contact form 7 */ .wpcf7 .wpcf7-form { margin-top: 0px; } .wpcf7-form > p { margin-top: 25px; } .wpcf7-form > p:first-child, .wpcf7-form > div:first-child + p { margin: 0; } .wpcf7-response-output { margin: 25px 0 0 0 !important; color: #ffffff !important; padding: 15px !important; background: #000000; border: none !important; } .wpcf7-validation-errors { background: #ce4a4a !important; } .wpcf7-not-valid-tip { color: #ce4a4a !important; font-weight: 300; font-size: 13px !important; line-height: 20px !important; margin-top: 5px !important; } /* popup */ .sr-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; /* big z-index for revolution slider */ background: rgba(0,0,0,0.6); } .sr-popup.delayed { opacity: 0; visibility: hidden; } .loaded .sr-popup.delayed { opacity: 1; visibility: visible; transition: all 0.3s ease 4s; } .loaded .sr-popup.delayed.hide { transition: none; } .sr-popup .sr-popup-inner { position: absolute; top: 50%; left: 50%; width: 600px; min-height: 100px; background: #f5f7f7; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: calc(100% - 40px) !important; } .sr-popup .sr-popup-inner .popup-content { max-height: calc(100vh - 80px); overflow-y: scroll; } .sr-popup .sr-popup-inner .close-popup { position: absolute; top: -25px; right: 0; color: #ffffff; font-family: 'Montserrat'; font-weight: 400; font-size: 10px; line-height: 20px; letter-spacing: 0.14em; text-transform: uppercase; padding-right: 30px; border: none; } .sr-popup .sr-popup-inner .close-popup::before, .sr-popup .sr-popup-inner .close-popup::after { content: ""; position: absolute; top: calc(50% - 2px); right: 0px; height: 2px; width: 18px; background-color: #ffffff; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); transition: background 0.2s ease; } .sr-popup .sr-popup-inner .close-popup::after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .sr-popup .sr-popup-inner .close-popup:hover::before, .sr-popup .sr-popup-inner .close-popup:hover::after { background-color: #b98c56; }