.bg-img-SINGLE { background-image: url(../img/background/SINGLE-bg.jpg); } .button { background-color: #A52A2A; border: none; color: #ffffff; padding: 8px 29px; text-align: center; text-decoration: none; display: inline-block; font-size: 13px; cursor: pointer; } .button:hover { text-decoration: none; } h3{ color:#800000; } .button:visited { text-decoration: none; } .button-wrapper{ margin:20px 0px 23px 0px; } .bg-img-SINGLE-TITLE { background-image: url(../img/background/SINGLE-TITLE-bg.jpg); } /* 1.2. about skills IMG BACKGROUND */ .img-fullwidth-about-skills { background-image: url(../img/background/about-skills-bg.jpg); } /* 1.3. facts parallax IMG BACKGROUND */ .parallax-facts { background-image: url(../img/background/parallax-facts-bg.jpg); } /* 1.4. slick fullscreen slideshow IMG BACKGROUND */ .bg-img-1 { background-image: url(../img/background/hero-bg-1.jpg); } .bg-img-2 { background-image: url(../img/background/hero-bg-2.jpg); } .bg-img-3 { background-image: url(../img/background/hero-bg-3.jpg); } .bg-img-4 { background-image: url(../img/background/hero-bg-4.jpg); } /* 1.5. ken burns slideshow IMG BACKGROUND */ .kenburns-slide-1 { background-image: url(../img/background/hero-bg-1-2.jpg); } .kenburns-slide-2 { background-image: url(../img/background/hero-bg-2-2.jpg); } .kenburns-slide-3 { background-image: url(../img/background/hero-bg-3-2.jpg); } .kenburns-slide-4 { background-image: url(../img/background/hero-bg-4-2.jpg); } /* 1.6. works gallery IMG BACKGROUND */ .img-fullwidth-works-1 { background-image: url(../img/works/works-1.jpg); } .img-fullwidth-works-2 { background-image: url(../img/works/works-2.jpg); } .img-fullwidth-works-3 { background-image: url(../img/works/works-3.jpg); } .img-fullwidth-works-4 { background-image: url(../img/works/works-4.jpg); } .img-fullwidth-works-5 { background-image: url(../img/works/works-5.jpg); } .img-fullwidth-works-6 { background-image: url(../img/works/works-6.jpg); } .img-fullwidth-works-7 { background-image: url(../img/works/works-7.jpg); } .img-fullwidth-works-8 { background-image: url(../img/works/works-8.jpg); } /* 2. reset */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } html, body { height: 100%; line-height: 170%; } body { } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } *:focus { outline: none; } /* remove dotted outline from links, button and input element */ a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: 0; outline: 0; } /* IE10 scrollbar FIX */ html { -ms-overflow-style: scrollbar; } /* 3. layout */ body { font-family: 'Raleway', sans-serif; font-size: 15px; font-style: normal; font-weight: 400; text-align: center; color: #5f5f5f; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; } a { color: #800000; text-decoration: none; outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } a:hover, a:visited, a:active, a:focus { color: #5f5f5f; text-decoration: underline; outline: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color:#800000; } p a, p a:hover { color: #5f5f5f; text-decoration: underline; outline: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } strong { font-weight: bold; } ::-moz-selection { background: #5f5f5f; color: #fff; } ::selection { background: #5f5f5f; color: #fff; } .nopadding { padding: 0!important; margin: 0!important; } /* 3.1. upper page */ .upper-page { position: relative; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; margin: 0; } /* 3.2. lower page */ #about-skills, #works, #resume, #services, #news, #contact, #credits { position: relative; height: auto; min-height: inherit; overflow: hidden; margin-left: 50px; margin-right: 50px; background: none; } #facts{ } @media only screen and (max-width: 640px) { #about, #about-skills, #works, #services, #facts, #news, #contact, #credits { margin-left: 0; margin-right: 0; } } @media only screen and (max-width: 880px) { .about-col-last { margin-top: 65px; } } .works-item { position: relative; height: 100%; min-height: 700px; overflow: hidden; margin-left: 50px; margin-right: 50px; background: none; } @media only screen and (max-width: 880px) { .works-item { height: auto; min-height: inherit; } } @media only screen and (max-width: 640px) { .works-item { height: auto; min-height: inherit; margin-left: 0; margin-right: 0; } } #credits { margin-bottom: 50px; } @media only screen and (max-width: 640px) { #credits { margin-bottom: 0; } } /* 4. borders */ .border-top, .border-top.top-position, .border-top.top-position-primary, .border-bottom, .border-bottom.bottom-position, .border-bottom.bottom-position-primary, .border-left, .border-left.left-position, .border-left.left-position-primary, .border-right, .border-right.right-position, .border-right.right-position-primary { position: fixed; background: #fff; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; z-index: 100; } .border-top.top-position-primary, .border-bottom.bottom-position-primary, .border-left.left-position-primary, .border-right.right-position-primary { background: #e0e0e0; } .border-top { width: 100%; height: 110px; left: 0; top: 0; } @media only screen and (max-width: 880px) { .border-top { height: 70px; } .sections-represation{ marigin-bottom:30px; } } @media only screen and (max-width:576px){ .image-wrapper{ width:100%; } .facebookiframs{ margin-bottom:27px; } .sections-represation{ marigin-bottom:30px; } } .border-top.top-position { -webkit-transform: translateY(-110px); -moz-transform: translateY(-110px); -ms-transform: translateY(-110px); -o-transform: translateY(-110px); transform: translateY(-110px); } @media only screen and (max-width: 880px) { .border-top.top-position { -webkit-transform: translateY(-70px); -moz-transform: translateY(-70px); -ms-transform: translateY(-70px); -o-transform: translateY(-70px); transform: translateY(-70px); } } .border-top.top-position-primary { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } @media only screen and (max-width: 880px) { .border-top.top-position-primary { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .border-bottom { width: 100%; height: 110px; left: 0; bottom: 0; } @media only screen and (max-width: 880px) { .border-bottom { height: 50px; } } .border-bottom.bottom-position { -webkit-transform: translateY(110px); -moz-transform: translateY(110px); -ms-transform: translateY(110px); -o-transform: translateY(110px); transform: translateY(110px); } @media only screen and (max-width: 880px) { .border-bottom.bottom-position { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } } .border-bottom.bottom-position-primary { -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } @media only screen and (max-width: 880px) { .border-bottom.bottom-position-primary { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @media only screen and (max-width: 640px) { .border-bottom.bottom-position-primary { -webkit-transform: translateY(110px); -moz-transform: translateY(110px); -ms-transform: translateY(110px); -o-transform: translateY(110px); transform: translateY(110px); } } .border-left { width: 110px; height: 100%; left: 0; top: 0; } @media only screen and (max-width: 880px) { .border-left { width: 50px; } } .border-left.left-position { -webkit-transform: translateX(-110px); -moz-transform: translateX(-110px); -ms-transform: translateX(-110px); -o-transform: translateX(-110px); transform: translateX(-110px); } @media only screen and (max-width: 880px) { .border-left.left-position { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } } .border-left.left-position-primary { -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px); transform: translateX(-60px); } @media only screen and (max-width: 880px) { .border-left.left-position-primary { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (max-width: 640px) { .border-left.left-position-primary { -webkit-transform: translateX(-110px); -moz-transform: translateX(-110px); -ms-transform: translateX(-110px); -o-transform: translateX(-110px); transform: translateX(-110px); } } .border-right { width: 110px; height: 100%; right: 0; top: 0; } @media only screen and (max-width: 880px) { .border-right { width: 50px; } } .border-right.right-position { -webkit-transform: translateX(110px); -moz-transform: translateX(110px); -ms-transform: translateX(110px); -o-transform: translateX(110px); transform: translateX(110px); } @media only screen and (max-width: 880px) { .border-right.right-position { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } } .border-right.right-position-primary { -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } @media only screen and (max-width: 880px) { .border-right.right-position-primary { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (max-width: 640px) { .border-right.right-position-primary { -webkit-transform: translateX(110px); -moz-transform: translateX(110px); -ms-transform: translateX(110px); -o-transform: translateX(110px); transform: translateX(110px); } } /* 5. social icons */ .social-icons-wrapper-share { position: fixed; display: block; visibility: visible; right: 20px; bottom: 11px; -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; z-index: 1002; } @media only screen and (max-width: 640px) { .social-icons-wrapper-share { display: none; visibility: hidden; } } .social-icons-wrapper-share.bottom-position { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .social-widgets-wrap { position: relative; right: 14px; top: 0; float: right; display: none; } .social-widgets { float: right; } .social-widgets a { display: block; } .social-widgets ul { list-style-type: none; } .social-widgets ul li { display: inline-block; text-align: right; } .social-widgets ul li { font-size: 16px; width: 16px; height: 16px; line-height: 16px; margin-left: 5px; margin-right: 5px; margin-top: 3px; text-align: center; float: right; } .social-widgets ul li:first-child { margin-left: 0; } .social-toggle-wrap { float: right; } .social-toggle-wrap:hover { cursor: pointer; } .social-toggle { float: right; } .social-toggle i { font-size: 20px; color: #800000; } .social-icon a { padding: 0; color: #800000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .social-icon a:hover { padding: 0; text-decoration: none; } /* 6. line left */ /* REMOVED due to redundancy! */ /* 7. line right */ /* REMOVED due to redundancy! */ /* 8. line buttons */ /* REMOVED due to redundancy! */ /* 9. home credits */ .bottom-credits { position: fixed; display: block; visibility: visible; width: auto; height: 50px; left: 20px; bottom: -14px; font-size: 9px; text-transform: uppercase; text-align: left; letter-spacing: 0.05em; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; z-index: 1002; } .bottom-credits.bottom-position { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .bottom-credits a, .bottom-credits a:hover { color: #800000; text-decoration: none; } /* 10. clearfix */ .clearfix:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } /* 11. hero */ /* 11.1. hero overlay */ .overlay:before { content: ""; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .overlay-dark-60:before { background: rgba(0, 0, 0, .6); -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } .overlay-dark-60-video:before, .overlay-dark-60-video-mobile:before { background: rgba(0, 0, 0, .6); -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; } .overlay-dark-60-video-mobile:before { display: none; } @media only screen and (max-width: 880px) { .overlay-dark-60-video-mobile:before { display: block; } } .overlay-dark-40:before { background: rgba(0, 0, 0, .4); -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } .overlay-dark-40-video:before, .overlay-dark-40-video-mobile:before { background: rgba(0, 0, 0, .4); -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; } .overlay-dark-40-video-mobile:before { display: none; } @media only screen and (max-width: 880px) { .overlay-dark-40-video-mobile:before { display: block; } } /* 11.2. hero container */ .hero-fullscreen { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; z-index: 0; } /* 11.3. hero bg */ .hero-bg { position: absolute; width: 100%; height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } /* 11.4. hero fullscreen FIX */ .hero-fullscreen-FIX { width: 100%; height: 100%; } /* 11.5. hero center container */ .hero-center-container { position: relative; display: table; table-layout: fixed; width: 100%; height: 100%; z-index: 1; } .hero-center-block { display: table-cell; vertical-align: middle; } /* 11.6. hero home page title */ h1.home-page-title { position: relative; font-family: 'Montserrat', sans-serif; font-size: 90px; font-weight: 800; color: #fff; text-shadow: 1px 1px 2px #111; text-align: center; text-transform: uppercase; letter-spacing: 0.20em; line-height: 1; margin: 0 auto; padding: 0 55px; z-index: 1; } @media only screen and (max-width: 880px) { h1.home-page-title { font-size: 70px; font-weight: 700; letter-spacing: -0.04em; } } @media only screen and (max-width: 640px) { h1.home-page-title { font-size: 40px; padding: 0 40px; } } h1.home-page-title-hide, h1.home-page-title-show { -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; } h1.home-page-title-hide { opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; letter-spacing: 0.40em; } @media only screen and (max-width: 880px) { h1.home-page-title-hide { letter-spacing: 0.20em; } } h1.home-page-title-show { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; letter-spacing: 0.20em; } @media only screen and (max-width: 880px) { h1.home-page-title-show { letter-spacing: -0.04em; } } /* 12. main navigation */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: none; z-index: 1001; } .logo .logo-dark, .main-navigation-bg .logo .logo-dark { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; height: auto; } .navbar-bg-switch { position: fixed; width: 100%; top: 0; left: 0; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; z-index: 999; } .main-navigation { -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .main-navigation.top-position { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .main-navigation .navbar-nav li a { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: #800000; padding: 26px 15px 0 15px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; cursor: pointer; } @media only screen and (max-width: 768px) { .main-navigation .navbar-nav li a { padding: 10px 15px; } } .main-navigation .navbar-nav li a:hover { color: #800000; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .nav li a:focus, .nav li a:hover { color: #5f5f5f; background: none; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .main-navigation-bg { height: 70px; background: none; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } @media only screen and (max-width: 768px) { .main-navigation-bg { height: auto; min-height: 70px; background: rgba(255, 255, 255, 1); } .main-navigation-bg.main-navigation-bg-position-primary { background: #e0e0e0; } } .gandhari-logo-area{ background-image:url('../aishveryaanidhi_images/SoloShow/Yellow-strip.png'); padding:80px; } @media only screen and (max-width:576px){ .gandhari-logo-area img{ width:100%; } .gandhari-logo-area{ background-image:url('../images/Yellow-strip.png'); padding:70px 20px; } } .main-navigation-bg .main-navigation .navbar-nav li a { color: #800000; padding: 26px 15px 0 15px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } @media only screen and (max-width: 768px) { .main-navigation-bg .main-navigation .navbar-nav li a { padding: 10px 15px; } } .main-navigation-bg .main-navigation .navbar-nav li a:hover { color: #5f5f5f; } @media only screen and (max-width: 768px) { .navbar-toggle .icon-bar { background: #111; margin-top: 63px; } .main-navigation-bg .navbar-toggle .icon-bar { background: #111; } .navbar-toggle { margin-top: -45px; margin-right: -10px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .main-navigation-bg .navbar-toggle { margin-top: -45px; margin-right: -10px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .navbar-collapse { background: rgba(255, 255, 255, 1); } .navbar-collapse.navbar-collapse-position-primary { background: #e0e0e0; } } .main-navigation-bg .link-underline-menu:before { bottom: -5px; background: #111; } .navbar-nav li.active, .navbar-nav > .active > a { color: #b7b7b7!important; text-decoration: none; } .navbar-nav > .active > a { background: none; } .main-navigation-bg .navbar-nav li.active, .main-navigation-bg .navbar-nav > .active > a { color: #fcfcfc!important; } @media (min-width: 768px) { .navbar-nav { position: relative; right: -50%; } .navbar-nav > li { position: relative; left: -50%; } .navbar-nav > li a { vertical-align: middle; } } /* 12.1. main navigation link underline */ .link-underline-menu { position: relative; text-decoration: none; cursor: pointer; } .link-underline-menu:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0; background: #5f5f5f; visibility: hidden; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .link-underline-menu:hover:before { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } @media only screen and (max-width: 768px) { .link-underline-menu:hover:before { visibility: hidden; } } .link-underline-menu.active:before { background: #b7b7b7; } .main-navigation-bg .link-underline-menu.active:before { background: #fcfcfc; } /* 13. section */ .sections { position: relative; z-index: 5; } @media only screen and (max-width: 1200px) { .sections { width: 100%!important; } } @media only screen and (max-width: 640px) { .sections { padding: 0 10px; } } section h2.section-heading { position: relative; font-family: 'Lato', sans-serif; font-size: 48px; font-weight: 600; text-transform: uppercase; line-height: 1.3; text-align: center; letter-spacing: 1.5px; color: #111; margin: 0 0 -20px 0; padding: 0; z-index: 1; } @media only screen and (max-width: 880px) { section h2.section-heading { font-size: 60px; font-weight: 700; margin: 0 0 -15px 0; } } @media only screen and (max-width: 640px) { section h2.section-heading { font-size: 33px; margin: 0 0 -10px 0; } } section h2.section-heading.section-heading-light { color: #fff; margin-left: 15px; margin-right: 15px; } h2.section-subheading, h2.section-subheading-light { font-family: 'Montserrat', sans-serif; font-size: 23px; font-style: normal; font-weight: 700; text-transform: uppercase; margin-top: ; text-align: center; letter-spacing: 0.05em; } .Artistic-Director{ border:1px solid #d5d4d4; padding-top:32px; box-shadow:0px 1px 10px rgba(29,34,47,0.1); } h2.section-subheading { color: #800000; } h2.section-subheading-light { color: #fff; margin-left: 15px; margin-right: 15px; } h2.section-subheading span, h2.section-subheading-light span { position: relative; display: inline-block; padding-right: 0; line-height: 1; } h2.section-subheading span:before, h2.section-subheading-light span:before { content: ""; position: absolute; display: block; top: 50%; right: 0; width: 30px; height: 0; margin-top: -2px; } h2.section-subheading span:before { border-top: none; } h2.section-subheading-light span:before { border-top: none; } /* 14. about */ /* 14.1. about images */ .section-about { background: #fff; margin-top: -27px; padding: 0 0 172px 0; overflow: visible; z-index: 1; } @media only screen and (max-width: 880px) { .section-about { margin-top: -47px; padding: 0; } } .section-about img { max-width: 100%; border: 20px solid #fff; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-about img { width: 700px; } } @media only screen and (max-width: 880px) { .section-about img { border: none; } } .about-section-images-carousel { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; margin: 127px 0 0 0; height: auto; } @media only screen and (min-width: 1024px) { .about-section-img:nth-of-type(1) { margin: -25px -300px 0 0; } .about-section-img:nth-of-type(2) { position: relative; bottom: -180px; margin: 0 0 0 200px; } .about-section-img:nth-of-type(3) { margin: -100px 0 0 -100px; } } @media only screen and (max-width: 880px) { .about-section-images-carousel { margin: 47px 0 0 0; } } /* 14.2. about fullwidth IMG */ .img-fullwidth-wrapper { position: relative; min-height: 550px; } @media only screen and (max-width: 880px) { .img-fullwidth-wrapper { min-height: 500px; } } .img-fullwidth { position: absolute; height: auto; min-height: 550px; top: 0; bottom: 0; } @media only screen and (max-width: 880px) { .img-fullwidth { min-height: 500px; } } .img-fullwidth.img-fullwidth-bg-light { background: #f2f2f2; text-align: center; padding: 0 150px; } @media only screen and (max-width: 880px) { .img-fullwidth.img-fullwidth-bg-light { padding: 0 15px; } } @media only screen and (max-width: 640px) { .img-fullwidth.img-fullwidth-bg-light { padding: 0 10px; } } .img-fullwidth-all { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } /* 14.3. about testimonials */ .testimonials-carousel { position: relative; width: 100%; margin: 0 auto; padding: 0; } .testimonials-carousel, .testimonials-quote, .testimonials-quote-img { -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); } .testimonials-quote-img { position: relative; font-size: 100px; font-weight: 700; color: #111; margin: -10px auto 56px auto; } .testimonials-quote p { text-align: center; } .testimonials-signature { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #111; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; margin: 62px auto -5px auto; } .testimonials-signature:before { content: "― "; display: inline-block; } /* 14.4. about skills */ .about-skills-heading { font-family: 'Montserrat', sans-serif; font-size: 40px; font-style: normal; font-weight: 700; text-transform: uppercase; margin: 0 0 74px -3px; padding: 0; text-align: center; letter-spacing: -0.04em; color: #111; } .about-skills p { text-align: center; color: #111; margin-top: 11px; } .about-skills { margin-top: 5px; } /* 14.5. about skills bar */ .show-skillbar { position: relative; padding: 0; margin: 0; padding-left: 0; text-align: left; } .skillbar { position: relative; display: inline-block; width: 100%; height: 21px; margin: 29px 0 82px 0; background: none; letter-spacing: 0.05em; } .skillbar-bar { display: inline-block; max-width: 50%; height: 1px; background: none; margin: 0 0 3px 0; } .skill-bar-percent { position: absolute; width: 320px!important; top: -41px; left: 0; right: 0; margin-left: auto; margin-right: auto; line-height: 1; font-size: 11px; font-family: 'Montserrat', sans-serif; font-size: 100px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: -0.04em; color: #111; background: none; z-index: 0; } /* 15. works */ /* 15.1. works gallery */ .works-section { margin-left: 70px; margin-right: 70px; } @media only screen and (max-width: 640px) { .works-section { margin-left: 20px; margin-right: 20px; } } .works-section.section-100vh { height: -webkit-calc(100vh - 60px); height: -moz-calc(100vh - 60px); height: calc(100vh - 60px); } @media (max-width: 768px) { .works-section.section-100vh { height: -webkit-calc(100vh - 40px); height: -moz-calc(100vh - 40px); height: calc(100vh - 40px); } } .works-section:last-child { margin-bottom: 0; } .works-section.section-gallery .box-img { position: relative; width: 100%; height: 100%; display: block; background: #fff; overflow: hidden; } .works-section.section-gallery .works-section-gallery-box { position: absolute; top: 0; left: 0; } .works-section.section-gallery .works-section-gallery-box.img-1 { width: 20%; height: 40%; padding: 0 10px 10px 0; } .works-section.section-gallery .works-section-gallery-box.img-2 { left: 20%; width: 20%; height: 40%; padding: 0 10px 10px 10px; } .works-section.section-gallery .works-section-gallery-box.img-3 { top: 40%; width: 40%; height: 60%; padding: 10px 10px 0 0; } .works-section.section-gallery .works-section-gallery-box.img-4 { left: 40%; width: 40%; height: 60%; padding: 0 10px 10px 10px; } .works-section.section-gallery .works-section-gallery-box.img-5 { top: 60%; left: 40%; width: 20%; height: 40%; padding: 10px 10px 0 10px; } .works-section.section-gallery .works-section-gallery-box.img-6 { top: 60%; left: 60%; width: 20%; height: 40%; padding: 10px 10px 0 10px; } .works-section.section-gallery .works-section-gallery-box.img-7 { left: 80%; width: 20%; height: 50%; padding: 0 0 10px 10px; } .works-section.section-gallery .works-section-gallery-box.img-8 { top: 50%; left: 80%; width: 20%; height: 50%; padding: 10px 0 0 10px; } @media (max-width: 1600px) { .works-section.section-gallery { height: auto; padding: 0!important; } .works-section.section-gallery .works-section-gallery-box { position: relative; float: left; height: 50vh!important; } .works-section.section-gallery .works-section-gallery-box.img-1 { width: 50%; } .works-section.section-gallery .works-section-gallery-box.img-2 { left: auto; width: 50%; padding-right: 0; } .works-section.section-gallery .works-section-gallery-box.img-3 { top: auto; width: 100%; padding: 10px 0 10px 0; } .works-section.section-gallery .works-section-gallery-box.img-4 { left: auto; width: 50%; padding: 10px 10px 10px 0; } .works-section.section-gallery .works-section-gallery-box.img-5 { top: auto; left: auto; width: 50%; padding: 10px 0 10px 10px; } .works-section.section-gallery .works-section-gallery-box.img-6 { top: auto; left: auto; width: 100%; padding: 10px 0 10px 0; } .works-section.section-gallery .works-section-gallery-box.img-7 { left: auto; width: 50%; padding: 10px 10px 0 0; } .works-section.section-gallery .works-section-gallery-box.img-8 { top: auto; left: auto; width: 50%; padding: 10px 0 0 10px; } } @media (max-width: 768px) { .works-section.section-gallery { padding: 0; } .works-section.section-gallery .works-section-gallery-box { height: 32vh!important; } .works-section.section-gallery .works-section-gallery-box.img-1 { padding-right: 10px; padding-bottom: 10px } .works-section.section-gallery .works-section-gallery-box.img-2 { padding-left: 10px; padding-bottom: 10px; } .works-section.section-gallery .works-section-gallery-box.img-3 { padding-top: 10px; padding-bottom: 10px; } .works-section.section-gallery .works-section-gallery-box.img-4 { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; } .works-section.section-gallery .works-section-gallery-box.img-5 { padding-top: 10px; padding-left: 10px; padding-bottom: 10px; } .works-section.section-gallery .works-section-gallery-box.img-6 { padding-top: 10px; padding-bottom: 10px; } .works-section.section-gallery .works-section-gallery-box.img-7 { padding-top: 10px; padding-right: 10px; } .works-section.section-gallery .works-section-gallery-box.img-8 { padding-top: 10px; padding-left: 10px; } } @media (max-width: 600px) { .works-section.section-gallery .works-section-gallery-box { width: 100%!important; height: 40vh!important; } .works-section.section-gallery .works-section-gallery-box.img-1, .works-section.section-gallery .works-section-gallery-box.img-2, .works-section.section-gallery .works-section-gallery-box.img-3, .works-section.section-gallery .works-section-gallery-box.img-4, .works-section.section-gallery .works-section-gallery-box.img-5, .works-section.section-gallery .works-section-gallery-box.img-6, .works-section.section-gallery .works-section-gallery-box.img-7, .works-section.section-gallery .works-section-gallery-box.img-8 { padding: 10px 0; } .works-section.section-gallery .works-section-gallery-box.img-1 { padding-top: 0; } .works-section.section-gallery .works-section-gallery-box.img-8 { padding-bottom: 0; } } @media (max-width: 1024px) { .works-section.section-100vh { height: auto; padding: 120px 0; } .works-section.section-gallery { padding: 0; } } @media screen and (min-width: 1600px) and (max-height: 900px) { .works-section.section-gallery { height: auto; padding: 0!important; } .works-section.section-gallery .works-section-gallery-box { position: relative; float: left; height: 60vh!important; } .works-section.section-gallery .works-section-gallery-box.img-1 { width: 50%; } .works-section.section-gallery .works-section-gallery-box.img-2 { left: auto; width: 50%; padding-right: 0; } .works-section.section-gallery .works-section-gallery-box.img-3 { top: auto; width: 100%; padding: 15px 0 15px 0; } .works-section.section-gallery .works-section-gallery-box.img-4 { left: auto; width: 50%; padding: 15px 15px 15px 0; } .works-section.section-gallery .works-section-gallery-box.img-5 { top: auto; left: auto; width: 50%; padding: 15px 0 15px 15px; } .works-section.section-gallery .works-section-gallery-box.img-6 { top: auto; left: auto; width: 100%; padding: 15px 0 15px 0; } .works-section.section-gallery .works-section-gallery-box.img-7 { left: auto; width: 50%; padding: 15px 15px 0 0; } .works-section.section-gallery .works-section-gallery-box.img-8 { top: auto; left: auto; width: 50%; padding: 15px 0 0 15px; } } @media screen and (min-width: 1025px) and (max-height: 900px) { .works-section.section-100vh { height: auto; padding: 120px 0; } } .force-height { height: 100%; } .force-height .row, .force-height .works-section-col { height: 100%; } .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter>[class^="col-"], .row.no-gutter>[class*=" col-"] { padding-left: 0; padding-right: 0; } @media (max-width: 1024px) { [class*="col-md"] { float: left; width: 100%; left: auto; right: auto; } } .no-mrg-pdg { margin: 0; padding: 0; } /* 15.2. works hover effect */ .icon-works { position: absolute; width: 100%; top: 50%; text-align: center; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; transition: all 0.35s ease-out; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; z-index: 1; } .icon-works a { position: relative; display: inline-block; vertical-align: middle; text-decoration: none; width: 44px; height: 44px; line-height: 44px; margin: 0 2px; font-size: 20px; background: #fff; border: 1px solid #fff; color: #111; -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; transition: all 0.35s ease-out; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .icon-works a.iw-slide-left { -webkit-transform: translate3d(-60px,0,0); -moz-transform: translate3d(-60px,0,0); -ms-transform: translate3d(-60px,0,0); -o-transform: translate3d(-60px,0,0); transform: translate3d(-60px,0,0); } .icon-works a.iw-slide-right { -webkit-transform: translate3d(60px,0,0); -moz-transform: translate3d(60px,0,0); -ms-transform: translate3d(60px,0,0); -o-transform: translate3d(60px,0,0); transform: translate3d(60px,0,0); } .image-works:hover .icon-works a { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .icon-works a:hover { background: #111; border: 1px solid #111; color: #fff; } .icon-works a:hover:after { background: #111; } .image-works:hover .icon-works { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .icon-works a:before { position: relative; z-index: 1; } .icon-works a i { position: relative; z-index: 1; } .image-works { position: relative; z-index: 5; } .image-works>.hover-effect { position: absolute; background: #fff; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.35s ease-out; -moz-transition: opacity 0.35s ease-out; -ms-transition: opacity 0.35s ease-out; -o-transition: opacity 0.35s ease-out; transition: opacity 0.35s ease-out; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); height: -webkit-calc(100% - 20px); height: -moz-calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px; bottom: 10px; right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; } .image-works:hover .hover-effect { opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; filter: alpha(opacity=75); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } .pswp__img--placeholder--blank { background: #fff; } /* 16. services */ .services-heading-wrapper { position: relative; top: 27px; } @media only screen and (max-width: 880px) { .services-heading-wrapper-secondary { top: -12px; } } .services-heading { font-family: 'Montserrat', sans-serif; font-size: 15px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 0.05em; color: #111; margin-bottom: 106px; } @media only screen and (max-width: 880px) { .services-heading-secondary { margin-bottom: 67px; } } .services-heading { padding: 56px 0 0 0; } .services-number-title { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 400px!important; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: -0.04em; color: #e0e0e0; z-index: -1; line-height: 1; } @media only screen and (max-width: 640px) { .services-number-title { width: 300px!important; } } .services-number-title { top: 36px; font-size: 65px; } .services-columns .border-left-services { border-left: 1px solid #e0e0e0; } @media only screen and (max-width: 880px) { .services-columns .border-left-services { border-left: none; } } .services-columns .border-top-services { border-top: none; } .services-columns .border-top-services:after { content: ""; position: absolute; width: 555px; border-bottom: 1px solid #e0e0e0; top: -40px; left: 0; right: 0; margin: auto; } @media only screen and (max-width: 1200px) { .services-columns .border-top-services:after { width: 470px; } } @media only screen and (max-width: 880px) { .services-columns .border-top-services:after { border-bottom: none; } } .services-padding { padding: 0 90px 0 90px; text-align: center; } @media only screen and (max-width: 880px) { .services-padding { padding: 0 15px; } } @media only screen and (max-width: 880px) { .services-padding-primary, .services-padding-secondary { margin-top: -74px; } } .mb40 { margin-bottom: 40px!important; } .mt40 { margin-top: 40px!important; } @media only screen and (max-width: 880px) { .mt40 { margin-top: -35px!important; } } .services-top-txt { padding-bottom: 30px; } .services-bottom-txt { padding-bottom: 70px; } @media only screen and (max-width: 880px) { .services-bottom-txt-last { padding-bottom: 0; } } /* 17. facts */ /* 17.1. facts counter */ .facts-counter-wrapper { padding: 0; margin-top: 0; } @media only screen and (max-width: 880px) { .facts-counter-wrapper { font-size: 35px; margin-top: -10px; } } .facts-counter-number { font-family: 'Montserrat', sans-serif; font-size: 35px; font-weight: 700; line-height: 1.3; text-align: center; color: #fff; } .facts-counter-number.large { font-size: 50px; margin-top: -15px; } @media only screen and (max-width: 880px) { .facts-counter-number.large { font-size: 35px; margin-top: 0; } } .facts-counter-description { color: #fff; text-align: center; text-transform: uppercase; } @media only screen and (max-width: 880px) { .facts-counter-description.facts-counter-description-primary { margin-bottom: 55px; } } .facts-counter-description-img { display: block; font-size: 25px; text-align: center; color: #fff; margin: 22px 0 23px 0; } @media only screen and (max-width: 880px) { .facts-counter-description-img { font-size: 20px; margin: 20px 0 10px 0; } } .facts-counter-description-img.large { font-size: 40px; margin: 15px 0 23px 0; } @media only screen and (max-width: 880px) { .facts-counter-description-img.large { font-size: 20px; margin: 20px 0 10px 0; } } .facts-counter-title { font-size: 11px; letter-spacing: 0.05em; } @media only screen and (max-width: 880px) { .facts-counter-title { font-size: 10px; } } .facts-counter-title.large { font-size: 12px; } @media only screen and (max-width: 880px) { .facts-counter-title.large { font-size: 10px; } } /* 17.2. facts parallax */ .parallax-overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .75); z-index: 0; } .parallax { display: block; width: 100%; height: 100%; overflow: hidden; padding: 147px 0 141px 0; } @media only screen and (max-width: 880px) { .parallax { padding: 97px 0 91px 0; } } .parallax-facts { position: relative; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; border: none; z-index: 1; } @media only screen and (max-width: 880px) { .parallax-facts { -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } } /* 18. contact */ .contact-info-wrapper { margin-top: -15px; } .contact-info-description { font-family: 'Raleway', sans-serif; color: #5f5f5f; text-align: center; text-transform: none; } .contact-info-description-img { display: block; font-size: 30px; text-align: center; color: #111; margin: 15px 0 15px 0; padding-bottom: 10px; } @media only screen and (max-width: 880px) { .contact-info-description-img-secondary { margin-top: 60px; } } .contact-info-text { font-size: 14px; } .contact-info-text a, .contact-info-text a:hover { text-decoration: none; } /* 18.1. contact modal launcher */ .contact-modal-launcher-wrapper { position: relative; width: 350px; height: auto; margin: -10px auto 0 auto; line-height: 1.5; } @media only screen and (max-width: 640px) { .contact-modal-launcher-wrapper { width: 280px; } } .contact-modal-launcher-wrapper a, .contact-modal-launcher-wrapper a:hover { text-decoration: none; } a.button-link { display: inline-block; font-family: 'Raleway', sans-serif; font-style: normal; font-weight: 500; font-size: 11px; text-align: center; text-transform: uppercase; letter-spacing: 0.65em; color: #111; text-align: left; text-transform: uppercase; cursor: pointer; padding: 0; } @media only screen and (max-width: 640px) { a.button-link { font-size: 10px; letter-spacing: 0.55em; } } a.button-link span { position: relative; padding: 0 0 0 57px; z-index: 2; } @media only screen and (max-width: 640px) { a.button-link span { padding: 0 0 0 24px; } } a.button-link:before { content: ""; position: relative; display: block; width: 30px; height: 2px; top: 20px; left: -3px; background-color: #111; -webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; } @media only screen and (max-width: 640px) { a.button-link:before { width: 10px; top: 20px; } } a.button-link i { position: relative; display: inline-block; top: 4px; left: 10px; margin: 0; padding: 0 0 0 13px; font-size: 21px; color: #111; -webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; } @media only screen and (max-width: 640px) { a.button-link i { padding: 0; top: 4px; } } a.button-link:hover:before { left: 100%; } a.button-link:hover i { left: 50px; } @media only screen and (max-width: 640px) { a.button-link:hover i { left: 30px; } } /* 18.2. contact modal center container */ .center-container-contact-modal { position: absolute; display: table; height: 100%; width: 100%; left: 0; top: 0; background: none; } .center-block-contact-modal { display: table-cell; vertical-align: middle; } .center-block-contact-modal-padding-top { padding: 35px 0 0 0; } @media only screen and (max-width: 880px) { .center-block-contact-modal-padding-top { padding: 73px 0 0 0; } } .center-block-contact-modal-padding-bottom { padding: 0 0 35px 0; } @media only screen and (max-width: 880px) { .center-block-contact-modal-padding-bottom { padding: 0 0 69px 0; } } .center-container-contact-modal h2.section-heading { font-family: 'Montserrat', sans-serif; font-size: 60px; font-weight: 700; color: #111; text-align: center; text-transform: lowercase; letter-spacing: -0.35vw; line-height: 1; margin: 0; padding: 0 15px; z-index: 1; } @media only screen and (max-width: 480px) { .center-container-contact-modal h2.section-heading { padding: 0 30px; } } @media only screen and (max-width: 880px) { .center-container-contact-modal h2.section-heading { font-size: 40px; } } .center-container-contact-modal p { font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1; font-style: normal; font-weight: 400; text-align: center; color: #5f5f5f; margin: 20px 0 0 0; padding: 0 15px; } @media only screen and (max-width: 480px) { .center-container-contact-modal p { padding: 0 30px; } } /* 18.3. contact modal inner */ .contact-modal-wrapper { position: relative; width: 50%; margin: 0 auto; } @media only screen and (max-width: 1200px) { .contact-modal-wrapper { width: 90%; } } .contact-modal { position: fixed; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); height: -webkit-calc(100% - 140px, 100px, 100px, 100px); height: -moz-calc(100% - 140px, 100px, 100px, 100px); height: calc(100% - 140px, 100px, 100px, 100px); top: 70px; right: 50px; bottom: 50px; left: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; border: none; background: #fff; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; overflow-x: hidden; overflow-y: auto; z-index: 1005; } .contact-modal.close { visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .contact-modal.open { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); height: -webkit-calc(100% - 140px, 100px, 100px, 100px); height: -moz-calc(100% - 140px, 100px, 100px, 100px); height: calc(100% - 140px, 100px, 100px, 100px); top: 70px; right: 50px; bottom: 50px; left: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; border: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } @media only screen and (max-width: 640px) { .contact-modal, .contact-modal.open { width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; border: none; } } .contact-modal-closer { position: relative; width: 50px; height: auto; margin: 31px auto 0 auto; font-size: 20px; text-align: center; color: #111; cursor: pointer; } /* 18.4. contact modal form */ #contact-form { width: 100%; margin: 46px auto 25px -10px; padding: 0; text-align: center; line-height: 1; } form { margin: 0; padding: 0; } #form input { position: relative; width: 100%; height: 45px; border-bottom: 1px solid #5f5f5f; border-left: none; border-right: none; border-top: none; padding: 5px 5px; background: none; margin: 10px 0 10px 0; font-family: 'Raleway', sans-serif; font-size: 13px; line-height: 1.5; font-style: normal; font-weight: normal; color: #5f5f5f; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } textarea { position: relative; width: 100%; height: 80px; border-bottom: 1px solid #5f5f5f; border-left: none; border-right: none; border-top: none; padding: 5px 5px; background: none; margin: 5px; font-family: 'Raleway', sans-serif; font-size: 13px; line-height: 1.5; font-style: normal; font-weight: normal; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #form textarea { color: #5f5f5f; margin: 10px 0 10px 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #form input:hover, #form textarea:hover { border-color: rgba(95, 95, 95, .35); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #form input:focus, #form textarea:focus { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .success { font-family: 'Raleway', sans-serif; font-size: 10px; font-style: normal; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; color: #5f5f5f; margin: 0 auto; padding: 50px 0 60px 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #form .error { position: absolute; font-size: 9px; text-transform: uppercase; color: #5f5f5f; display: block; margin: 0; padding: 0; letter-spacing: 0.15em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 200px!important; } .make-space { margin-left: 15px; margin-right: 15px; } ::-webkit-input-placeholder { font-size: 12px; color: #5f5f5f; } :-ms-input-placeholder { font-size: 12px; color: #5f5f5f; } ::-moz-placeholder { font-size: 12px; color: #5f5f5f; } input:-moz-placeholder { font-size: 12px; color: #5f5f5f; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } textarea:focus::-webkit-input-placeholder { color: transparent; } textarea:focus:-ms-input-placeholder { color: transparent; } textarea:focus::-moz-placeholder { color: transparent; } textarea:focus:-moz-placeholder { color: transparent; } /* 19. footer */ #footer { position: relative; height: 50%; min-height: inherit; overflow: hidden; margin-left: 50px; margin-right: 50px; background: none; } @media only screen and (max-width: 640px) { #footer { height: auto; margin-left: 0; margin-right: 0; } } /* 19.1. footer logo */ .footer-credits-logo { margin: 0 auto 20px auto; } .footer-credits-logo img { width: auto; height: auto; } /* 19.2. footer social icons */ .social-icons-wrapper { position: relative; margin: 0 auto; } .social-icons-wrapper ul { margin: 0 auto; padding: 0; list-style-type: none; } .social-icons-wrapper ul li { display: inline-block; margin: 0 auto; padding: 0 0 0 5px; } ul.social-icons { font-size: 16px; line-height: 1; color: #111; margin: 0; padding: 0; position: relative; } ul.social-icons a { padding: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } ul.social-icons a:hover { padding: 0; color: #111; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } /* 19.3. footer newsletter form */ section h2.section-heading.newsletter { font-size: 25px; margin-bottom: 29px; } @media only screen and (max-width: 480px) { section h2.section-heading.newsletter { font-size: 20px; } } #subscribe-wrapper { position: relative; width: 300px; height: 160px; margin: 0 auto 79px auto; background: none; text-align: center; } @media only screen and (max-width: 480px) { #subscribe-wrapper { width: 260px; } } .newsletter { position: relative; clear: both; border: none; background: none; padding: 0; overflow: hidden; } #subscribe input { position: relative; width: 225px; height: 40px; text-align: center; color: #5f5f5f; border: none; border-bottom: 1px solid #5f5f5f; background: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #subscribe input:focus, #subscribe textarea:focus { color: #5f5f5f; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #subscribe input:hover { border-color: rgba(95, 95, 95, .35); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .subscribe-success { font-family: 'Raleway', sans-serif; font-size: 10px; font-style: normal; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; color: #5f5f5f; margin: 0 auto; padding: 68px 0 60px 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #subscribe .subscribe-error { font-size: 9px; text-transform: uppercase; text-align: center; color: #5f5f5f; display: block; margin: 2px auto 0 auto; padding: 0; letter-spacing: 0.15em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input[type="text"].subscribe-email::-webkit-input-placeholder { font-size: 12px; color: #5f5f5f; } input[type="text"].subscribe-email:-ms-input-placeholder { font-size: 12px; color: #5f5f5f; } input[type="text"].subscribe-email::-moz-placeholder { font-size: 12px; color: #5f5f5f; } input:focus.subscribe-email::-webkit-input-placeholder { color: transparent; } input:focus.subscribe-email:-ms-input-placeholder { color: transparent; } input:focus.subscribe-email::-moz-placeholder { color: transparent; } input:focus.subscribe-email:-moz-placeholder { color: transparent; } /* 20. preloader */ .preloader-bg { position: fixed; width: 100%; height: 100%; overflow: hidden; background: #fff; z-index: 999999; } #preloader { position: fixed; display: table; table-layout: fixed; width: 100%; height: 100%; overflow: hidden; background: #fff; z-index: 999999; } #preloader-status { display: table-cell; vertical-align: middle; } .preloader-position { position: relative; margin: 0 auto; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader { position: relative; width: 45px; height: 45px; left: 50%; top: 50%; margin-left: -22px; margin-top: 2px; -webkit-animation: rotate 1s infinite linear; -moz-animation: rotate 1s infinite linear; -ms-animation: rotate 1s infinite linear; -o-animation: rotate 1s infinite linear; animation: rotate 1s infinite linear; border: 3px solid rgba(0, 0, 0, .15); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .loader span { position: absolute; width: 45px; height: 45px; top: -3px; left: -3px; border: 3px solid transparent; border-top: 3px solid rgba(0, 0, 0, .75); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 21. center container */ .center-container { position: relative; display: table; table-layout: fixed; width: 100%; height: 100%; } .center-block { display: table-cell; vertical-align: middle; } /* 22. divider */ .dividerOT.out-top, .dividerOT.out-bottom, .dividerOT.dividerOT-inner { position: relative; width: 100%; margin: 0 auto; background: none; z-index: -1; } .dividerOT.out-top, .dividerOT.out-bottom, .dividerOT.dividerOT-inner { height: 115px; } @media only screen and (max-width: 880px) { .dividerOT.out-top, .dividerOT.out-bottom, .dividerOT.dividerOT-inner { height: 100px; } } /* 23. buttons */ .bt-nav { position: relative; display: inline-block; width: 35px; height: 35px; text-indent: -10000px; cursor: pointer; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .bt-nav:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .bt-nav em:after, .bt-nav em:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; margin-top: 1px; margin-left: -5px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .bt-nav em:before { margin-left: 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .bt-nav.zoom-item { text-indent: inherit; } .bt-nav.zoom-item:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .bt-nav.close { width: 44px; height: 44px; line-height: 44px; margin: 0 2px; font-size: 20px; background: #111; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .bt-nav.close em:after, .bt-nav.close em:before { width: 2px; height: 20px; margin-top: -10px; margin-left: -1px; background: #fff; } /* 24. link underline */ .link-underline { position: relative; display: inline-block; } .link-underline::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #5f5f5f; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .link-underline:hover::before { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } /* 25. button effect */ .c-btn { position: relative; display: inline-block; border: 1px solid #111; background: none; letter-spacing: 0.25em; font-weight: 700; font-size: 10px; text-transform: uppercase; text-align: center; color: #111; margin: 20px 0 0 0; padding: 11px 25px 9px 25px; -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .c-btn-contact-modal-wrapper-only { padding: 18px 25px 16px 25px; } .c-btn.fullwidth-liquid { width: 225px; color: #fff; background: #111; border: none; } .c-btn::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #111; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .c-btn.fullwidth-liquid::before { background: #5f5f5f; } .c-btn:hover::before, a:hover .c-btn::before { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .c-btn span { display: inline-block; position: relative; z-index: 2; } .c-btn:hover, a:hover .c-btn { color: #fff; } .c-btn.fullwidth-liquid:hover { color: #fff; } .c-btn.c-btn-inverse-dark { font-size: 10px; color: #fff; margin: 20px 0 0 0; padding: 14px 20px; } .c-btn.c-btn-inverse-dark { background: rgba(0, 0, 0, 1); } .c-btn.c-btn-inverse-dark:visited, .c-btn.c-btn-inverse-dark:active, .c-btn.c-btn-inverse-dark:focus { } .c-btn-inverse-dark::before { background: rgba(255, 255, 255, 1); } .c-btn.c-btn-inverse-dark:hover { color: #111; } .c-btn-modal { margin-top: 65px; } /* 26. to top arrow */ .to-top-arrow { position: fixed; right: 70px; bottom: -10px; width: 50px; height: 50px; line-height: 50px; cursor: pointer; font-size: 16px; text-align: center; color: #fff; background: #800000; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; z-index: 105; } @media only screen and (max-width: 640px) { .to-top-arrow { right: 20px; } } .to-top-arrow.show { bottom: 50px; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media only screen and (max-width: 640px) { .to-top-arrow.show { bottom: 0; } } .to-top-arrow:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* 27. Slick v1.6.0 CUSTOM */ /* 27.1. slick slide */ .slick-slide { height: 100%; background: none; } .slick-slider { margin-bottom: 0; margin-top: 0; cursor: auto; } /* 27.2. slick slide flickering FIX */ .slick-track, .slick-list { -webkit-perspective: 2000; perspective: 2000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 27.3. slick fullscreen slideshow */ .slick-fullscreen-img-fill { position: relative; display: block; width: 100%; overflow: hidden; } .slick-fullscreen-img-fill img { position: relative; display: inline-block; min-width: 100%; max-width: none; min-height: 100%; } .slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill, .slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill { height: 100vh; background: none; } .slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img, .slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img { position: relative; width: auto; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .slick-fullscreen .slick-dots, .slick-fullscreen-slideshow .slick-dots { position: absolute; width: 100%; height: 5px; left: 0; bottom: 0; margin: 0; padding: 0; background: rgba(255, 255, 255, .25); list-style-type: none; } .Artistic-Director{ border:1px solid #d5d4d4; padding-top:32px; box-shadow:0px 1px 10px rgba(29,34,47,0.1); } .slick-fullscreen .slick-dots li button, .slick-fullscreen-slideshow .slick-dots li button { display: none; } .slick-fullscreen .slick-dots li, .slick-fullscreen-slideshow .slick-dots li { position: absolute; float: left; width: 0; height: 5px; left: -5px; background: #fff; } .slick-fullscreen .slick-dots li.slick-active, .slick-fullscreen-slideshow .slick-dots li.slick-active { width: 100%; -webkit-animation: progressDots 4s both; -moz-animation: progressDots 4s both; -ms-animation: progressDots 4s both; -o-animation: progressDots 4s both; animation: progressDots 4s both; } @-webkit-keyframes progressDots { from { width: 0; } to { width: 100%; } } @keyframes progressDots { from { width: 0; } to { width: 100%; } } .slick-fullscreen, .slick-fullscreen-slideshow { background: none; } .slick-fullscreen .slick-slide, .slick-fullscreen-slideshow .slick-slide { display: none; float: left; height: 100%; } .slick-initialized .slick-slide { display: block; } /* 27.4. slick navigation */ .slick-prev:before, .slick-next:before { font-size: 15px; color: #111; } /* 28. videos */ /* 28.1. YouTube video */ .YT-bg { display: none; } @media only screen and (max-width: 880px) { .YT-bg { position: relative; height: 100%; background-image: url(../img/background/YT-bg.jpg); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; /* uncomment the following to show an image for mobile devices */ /* display: block; */ } } #videoContainment { position: absolute; display: block; width: 100%!important; height: 100%!important; left: 0; top: 0; bottom: 0; right: 0; background: #000; z-index: 0; } /* 28.1.1. jquery.mb.YTPlayer v3.1.13 CUSTOM */ .mb_YTPBar .mb_YTPProgress { background: #fff; height: 10px; } .mb_YTPBar .mb_YTPseekbar { background: #5f5f5f; height: 10px; } .mb_YTPBar .mb_YTPLoaded { background: #db0018; } .mb_YTPBar { opacity: 0.25; -moz-opacity: 0.25; -webkit-opacity: 0.25; filter: alpha(opacity=25); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; z-index: 100!important; } @media only screen and (max-width: 880px) { .mb_YTPBar { display: none; visibility: hidden; } } .mb_YTPBar.visible, .mb_YTPBar:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .mb_YTPBar .buttonBar, .mb_YTPBar:hover .buttonBar { background: none; } .mb_YTPBar, .mb_YTPBar span.mb_YTPUrl a { color: #fff; } .mb_YTPBar .level { background-color: #fff; } @media only screen and (max-width: 880px) { .mb_YTPBar span.mb_OnlyYT, .mb_YTPBar span.mb_YTPUrl { display: none; visibility: hidden; } } #changeVideo { position: absolute; top: 135px; right: 155px; width: auto; margin: 0; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; cursor: pointer; z-index: 100; } @media only screen and (max-width: 880px) { #changeVideo { top: auto; bottom: 75px; right: 75px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .page-loaded #changeVideo { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } #changeVideo .active { color: #111; background: rgba(255, 255, 255, 1); } @media only screen and (max-width: 480px) { .mb_YTPBar .mb_YTPUrl.ytpicon { display: none; } } /* 28.2. Vimeo video */ .vimeo-bg { display: none; } @media only screen and (max-width: 880px) { .vimeo-bg { position: relative; display: block; height: 100%; background-image: url(../img/background/vimeo-bg.jpg); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } #vimeo-videoContainment { display: none; } } #vimeo-videoContainment { position: absolute; display: block; width: 100%!important; height: 100%!important; left: 0; top: 0; bottom: 0; right: 0; background: #000; z-index: 0; } #vimeo-videoContainment iframe, #vimeo-videoContainment object, #vimeo-videoContainment embed { border: none; } /* 28.3. HTML5 video */ .html5-bg { display: none; } @media only screen and (max-width: 880px) { .html5-bg { position: relative; height: 100%; background-image: url(../img/background/html5-bg.jpg); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; /* uncomment the following to show an image for mobile devices */ /* display: block; */ } } .html5-videoContainment { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } /* 29. elements home call */ /* 29.1. main navigation logo home call */ .logo, .logo.logo-home-call { margin: -8px auto 0 auto; } @media only screen and (max-width: 880px) { .logo, .logo.logo-home-call { margin: 3px 0 0 -10px; } } /* 29.2. main navigation home call */ .main-navigation { padding: 20px 0 0 0; } .main-navigation.main-navigation-home-call { padding: 0; } @media only screen and (max-width: 880px) { .main-navigation, .main-navigation.main-navigation-home-call { padding: 0 4px 0 0; } } /* 29.3. home credits home call */ .bottom-credits { left: 40px; bottom: 16px; color: #800000; } @media only screen and (max-width: 880px) { .bottom-credits { left: 20px; bottom: -14px; } } .bottom-credits.bottom-credits-home-call { left: 20px; bottom: -14px; } /* 29.4. social icons home call */ .social-icons-wrapper-share { right: 40px; bottom: 39px; } @media only screen and (max-width: 880px) { .social-icons-wrapper-share { right: 20px; bottom: 11px; } } .social-icons-wrapper-share.social-icons-wrapper-share-home-call { right: 20px; bottom: 11px; } /* 30. ken burns slideshow */ .kenburns-slide-wrapper { position: relative; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; z-index: 0; } .kenburns-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-animation: KenBurnsSlideShow 24s linear infinite 0s; -moz-animation: KenBurnsSlideShow 24s linear infinite 0s; -ms-animation: KenBurnsSlideShow 24s linear infinite 0s; -o-animation: KenBurnsSlideShow 24s linear infinite 0s; animation: KenBurnsSlideShow 24s linear infinite 0s; } .kenburns-slide-1, .kenburns-slide-2, .kenburns-slide-3, { background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .kenburns-slide-1 { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .kenburns-slide-2 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; } .kenburns-slide-3 { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -ms-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } /*.kenburns-slide-4 { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; -o-animation-delay: 18s; animation-delay: 18s; }*/ @-webkit-keyframes KenBurnsSlideShow { 0% { opacity: 0; -webkit-transform: scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transformm: scale(1); } } @-moz-keyframes KenBurnsSlideShow { 0% { opacity: 0; -moz-transform: scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(1); } } @-o-keyframes KenBurnsSlideShow { 0% { opacity: 0; -o-transform: scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(1); } } @keyframes KenBurnsSlideShow { 0% { opacity: 0; transform: scale(1); -ms-transform: scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1.1); -ms-transform: scale(1.1); } 100% { opacity: 0; transform: scale(1); -ms-transform: scale(1); } } /* 31. enllax */ .enllax-all { position: absolute; top: -89px; font-family: 'Montserrat', Arial, sans-serif; font-size: 400px; font-weight: 800; text-transform: uppercase; line-height: 1.3; text-align: center; letter-spacing: -0.04em; color: #e0e0e0; white-space: nowrap; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; z-index: -1; } @media only screen and (max-width: 880px) { .enllax-all { top: -69px; font-size: 300px; } } @media only screen and (max-width: 640px) { .enllax-all { top: -24px; font-size: 200px; } } /* 32. Owl Carousel v2.2.0 CUSTOM */ .owl-buttons { position: static; } .owl-prev, .owl-next { position: absolute; display: block; top: 50%; margin-top: -35px; width: 50px; height: 50px; line-height: 50px; font-size: 12px; color: #111; text-align: center; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } #news-carousel .owl-prev, #news-carousel .owl-next { color: #fff; } .owl-prev { left: -50px; } .owl-next { right: -50px; } .owl-prev:before, .owl-next:before { content: ""; position: absolute; display: block; width: 50px; height: 50px; background: #fff; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #news-carousel .owl-prev:before, #news-carousel .owl-next:before { background: #202020; } .owl-prev:before { left: 55px; top: 9px; } #news-carousel .owl-prev:before { left: 40px; } @media only screen and (max-width: 640px) { #news-carousel .owl-prev:before { left: 45px; } } .owl-next:before { right: 55px; top: 9px; } #news-carousel .owl-next:before { right: 40px; } @media only screen and (max-width: 640px) { #news-carousel .owl-next:before { right: 45px; } } .owl-prev .owl-custom, .owl-next .owl-custom { position: relative; } .owl-prev .owl-custom { position: relative; top: 8px; left: 54px; } #news-carousel .owl-prev .owl-custom { left: 39px; } @media only screen and (max-width: 640px) { #news-carousel .owl-prev .owl-custom { left: 44px; } } .owl-next .owl-custom { position: relative; top: 8px; right: 54px; } #news-carousel .owl-next .owl-custom { right: 39px; } @media only screen and (max-width: 640px) { #news-carousel .owl-next .owl-custom { right: 44px; } } .owl-prev:hover, .owl-next:hover { -webkit-transition: 0 none; -moz-transition: 0 none; -ms-transition: 0 none; -o-transition: 0 none; transition: 0 none; } .owl-prev:hover:before, .owl-next:hover:before, .owl-prev:active:before, .owl-next:active:before, .owl-carousel:hover .owl-prev, .owl-carousel:hover .owl-next { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .owl-carousel:hover .owl-prev { left: -35px; } .owl-carousel:hover .owl-next { right: -35px; } /* 33. scroll indicator */ .scroll-indicator-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #202020; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .scroll-indicator-wrapper.bottom-position { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .scroll-indicator-wrapper.scroll-indicator-wrapper-position-secondary { opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .scroll-indicator { position: absolute; height: 60px; width: 60px; bottom: 110px; left: 50%; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); cursor: pointer; z-index: 1005; } @media only screen and (max-width: 880px) { .scroll-indicator { height: 50px; width: 50px; bottom: 95px; } } .arrow { position: relative; color: #fff; font-size: 16px; text-align: center; -webkit-transition: -webkit-transform 0.6s ease; -moz-transition: -moz-transform 0.6s ease; transition: transform 0.6s ease; -webkit-animation: scroll-indicator 1s infinite; -moz-animation: scroll-indicator 1s infinite; -o-animation: scroll-indicator 1s infinite; animation: scroll-indicator 1s infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); cursor: pointer; } .arrow-move-down { position: relative; top: 10px; } @media only screen and (max-width: 880px) { .arrow-move-down { top: 5px; } } @-webkit-keyframes scroll-indicator { 0% { bottom: -13px; } 50% { bottom: -8px; } 100% { bottom: -13px; } } @-moz-keyframes scroll-indicator { 0% { bottom: -13px; } 50% { bottom: -8px; } 100% { bottom: -13px; } } @keyframes scroll-indicator { 0% { bottom: -13px; } 50% { bottom: -8px; } 100% { bottom: -13px; } } /* 34. news */ @media only screen and (max-width: 880px) { #news-carousel { margin: -30px 0 0 0; } } #news .news-item { padding: 30px 0; opacity: 0.25; -moz-opacity: 0.25; -webkit-opacity: 0.25; filter: alpha(opacity=25); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; -webkit-transform: scale3d(0.8, 0.8, 1); -moz-transform: scale3d(0.8, 0.8, 1); -ms-transform: scale3d(0.8, 0.8, 1); -o-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } @media only screen and (max-width: 640px) { #news .news-item { padding: 30px 30px; } } #news .owl-item.active.center .news-item { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale3d(1.0, 1.0, 1); -moz-transform: scale3d(1.0, 1.0, 1); -ms-transform: scale3d(1.0, 1.0, 1); -o-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); } .owl-carousel .owl-item img { margin: 0; padding: 0; background: #fff; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .news-item .news-content img { max-width: 100%; -webkit-transition: all .8s ease-out; -moz-transition: all .8s ease-out; -ms-transition: all .8s ease-out; -o-transition: all .8s ease-out; transition: all .8s ease-out; } .news-item:hover .news-content img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .35); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .35); box-shadow: 0 0 10px rgba(0, 0, 0, .35); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } .news-content { position: relative; overflow: hidden; margin: 0; width: 100%; min-width: 250px; height: auto; color: #111; text-align: left; background-color: #fff; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .25); -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .25); box-shadow: 0 10px 20px rgba(0, 0, 0, .25); } .news-content a { color: #111; } .news-content img { max-width: 100%; vertical-align: top; margin: 0; padding: 0; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .news-content .date { position: absolute; width: 100%; background-color: #fff; top: 0; right: 0; padding: 15px 20px; text-align: right; font-size: 9px; letter-spacing: 1px; color: #111; text-transform: uppercase; } .news-content .date:before { content: ""; position: absolute; width: 0; height: 0; top: 100%; left: 0; border-style: solid; border-width: 0 400px 35px 0; border-color: transparent #fff transparent transparent; } @media only screen and (max-width: 1200px) { .news-content .date:before { border-width: 0 800px 35px 0; } } .news-content figcaption { position: relative; width: 100%; background-color: #fff; padding: 20px; } .news-content figcaption:before { content: ""; position: absolute; width: 0; height: 0; bottom: 100%; left: 0; border-style: solid; border-width: 35px 0 0 400px; border-color: transparent transparent transparent #fff; } @media only screen and (max-width: 1200px) { .news-content figcaption:before { border-width: 35px 0 0 800px; } } .news-content h2 { font-family: 'Montserrat', sans-serif; font-size: 17px; color: #111; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; text-align: left; } .news-content h3 { font-family: 'Raleway', sans-serif; margin: 5px 0 20px 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #5f5f5f; } .news-content p { margin: 30px 0 20px 0; } /* 34.1. news modal */ .news-modal .modal-content .modal-content-date { width: 100%; background-color: #fff; top: 0; right: 0; padding: 0 0 12px 0; text-align: right; font-size: 9px; letter-spacing: 1px; color: #111; text-transform: uppercase; } .news-modal .modal-content { padding: 126px 0 50px 0; min-height: 100%; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; text-align: center; -webkit-background-clip: border-box; background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; } .news-modal .modal-content h2 { font-family: 'Montserrat', sans-serif; font-size: 24px; line-height: 1; letter-spacing: -0.04em; font-style: normal; text-transform: uppercase; text-align: right; font-weight: 700; color: #111; } .news-modal .modal-content p { text-align: center; margin-bottom: 30px; } .news-modal .modal-content p.item-intro { font-family: 'Raleway', sans-serif; padding: 10px 0 0 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #5f5f5f; text-align: right; } .news-modal .modal-content ul.list-inline { margin-top: 0; margin-bottom: 30px; } .news-modal .modal-content img { margin: 56px 0 59px 0; } .news-modal .close-modal { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 50px!important; height: 50px; top: 24px; top: 52px; background-color: transparent; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .news-modal .close-modal:hover { opacity: 0.30; -moz-opacity: 0.30; -webkit-opacity: 0.30; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .news-modal .close-modal .lr { width: 1px; height: 25px; margin: 10px 0 0 23px; background-color: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); z-index: 1050; } .news-modal .close-modal .lr .rl { width: 1px; height: 25px; background-color: #000; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); z-index: 1051; } .modal-quote p { font-size: 20px; font-weight: 600; text-align: center; padding: 0 150px; margin: 55px 0 0 0; } @media only screen and (max-width: 640px) { .modal-quote p { padding: 0 50px; } } .modal-last { margin: 90px 0 0 0; } .modal-line { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 150px!important; height: 1px; background: #e0e0e0; z-index: 1; } .modal-line:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 1px; background: #111; -webkit-animation: modal-line 2s linear infinite both; -moz-animation: modal-line 2s linear infinite both; animation: modal-line 2s linear infinite both; z-index: 2; } @keyframes modal-line { 0% { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; transform: scale(0, 1); } 45% { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; transform: scale(1, 1); } 55% { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; transform: scale(1, 1); } 100% { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; transform: scale(0, 1); } } /* 34.2. news modal form */ .modal-form { width: 100%; margin: 122px auto 65px auto; padding: 0; text-align: center; line-height: 1; } .modal-form .comment-title { font-family: 'Montserrat', sans-serif; font-size: 24px; line-height: 1; letter-spacing: -0.04em; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 700; color: #111; margin: 0 0 36px 0; } .form-modal input { position: relative; width: 100%; height: 40px; border-bottom: 1px solid #5f5f5f; border-left: none; border-right: none; border-top: none; padding: 5px 5px; background: none; margin: 10px 0 10px 0; font-family: 'Raleway', sans-serif; font-size: 13px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: center; color: #5f5f5f; } .form-modal textarea { color: #5f5f5f; margin: 10px 0 10px 0; } .form-modal input:hover, .form-modal textarea:hover { border-color: rgba(95, 95, 95, .35); } .form-modal input, .form-modal textarea, .form-modal input:hover, .form-modal textarea:hover, .form-modal input:focus, .form-modal textarea:focus { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } /* 35. wave */ /* 35.1. wave bottom border */ .border-bottom-wave, .border-bottom-wave.bottom-position, .border-bottom-wave.bottom-position-primary { position: fixed; background: #fff; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; z-index: 100; } .border-bottom-wave.bottom-position-primary { background: #e0e0e0; } .border-bottom-wave { width: 100%; height: 0; left: 0; bottom: 0; } @media only screen and (max-width: 640px) { .border-bottom-wave { height: 50px; } } .border-bottom-wave.border-bottom-wave-secondary { height: 50px; } .border-bottom-wave.bottom-position { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .border-bottom-wave.bottom-position-primary { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } @media only screen and (max-width: 640px) { .border-bottom-wave.bottom-position-primary { -webkit-transform: translateY(110px); -moz-transform: translateY(110px); -ms-transform: translateY(110px); -o-transform: translateY(110px); transform: translateY(110px); } } /* 35.2. wave effect */ #wave { position: fixed; width: 100%; height: 100%; overflow: hidden; bottom: 0; left: 0; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; z-index: 100; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #wave { z-index: 10; } } @media only screen and (max-width: 640px) { #wave { display: none; } } #wave, #wave.bottom-position, #wave.wave-position-secondary { -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; } #wave.bottom-position, #wave.wave-position-secondary { -webkit-transform: translateY(300px); -moz-transform: translateY(300px); -ms-transform: translateY(300px); -o-transform: translateY(300px); transform: translateY(300px); }