/* Template Name: gandy resume - Engineer: WGandy */ /* 1. TEMPLATE BACKGROUNDS 1.1. works IMG BACKGROUND 1.2. news IMG BACKGROUND 1.3. hero slider IMG BACKGROUND 1.4. home multiple images IMG BACKGROUND 2. reset 3. layout 4. headings 4.1. section headings 5. header 6. logo 7. social icons 7.1. social icons home 7.2. social icons team 8. about 9. services 10. works 11. navigation 12. introduction 13. front page 14. left side 15. right side 16. overlay 17. link effect 18. to top arrow 19. preloader 20. copyright 21. center container 22. item folio 23. section subheading 24. contact form 25. button 26. button more 27. lower page 28. home page IMG/VIDEO slider 29. section page IMG slider 30. videos 30.1. YouTube video 30.2. Vimeo video 31. containment 32. typed text 33. news carousel 34. news modal 35. news quote 36. news 37. team / news headers 38. text elements height 39. text elements position 40. headers about / contact 41. Slick CUSTOM 42. Owl Carousel CUSTOM 43. Lity CUSTOM 44. PhotoSwipe CUSTOM 45. Swiper CUSTOM 46. home multiple images 47. divider */ /* 1. TEMPLATE BACKGROUNDS */ /* 1.1. works IMG BACKGROUND */ /* .item-works-01 {background-image: url(../img/works/1.jpg);} .item-works-02 {background-image: url(../img/works/2.jpg);} .item-works-03 {background-image: url(../img/works/3.jpg);} .item-works-04 {background-image: url(../img/works/4.jpg);} .item-works-05 {background-image: url(../img/works/5.jpg);} .item-works-06 {background-image: url(../img/works/6.jpg);} .item-works-07 {background-image: url(../img/works/7.jpg);} .item-works-08 {background-image: url(../img/works/8.jpg);} */ /* 1.2. news IMG BACKGROUND */ /* .news-bg-1 {background-image: url(../img/news/1.jpg);} .news-bg-2 {background-image: url(../img/news/2.jpg);} .news-bg-3 {background-image: url(../img/news/3.jpg);} .news-bg-4 {background-image: url(../img/news/4.jpg);} */ /* 1.3. hero slider 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.4. home multiple images IMG BACKGROUND */ /* .home-img-top-left {background-image: url(../img/background/home-img-top-left.jpg);} .home-img-top-center {background-image: url(../img/background/home-img-top-center.jpg);} .home-img-top-right {background-image: url(../img/background/home-img-top-right.jpg);} .home-img-bottom-left {background-image: url(../img/background/home-img-bottom-left.jpg);} .home-img-bottom-center {background-image: url(../img/background/home-img-bottom-center.jpg);} .home-img-bottom-right {background-image: url(../img/background/home-img-bottom-right.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 { }line-height: 1; */ 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; } /* 3. layout */ body { font-family: 'Raleway', sans-serif; font-size: 15px; font-style: normal; font-weight: 500; text-align: left; color: #e0e0e0; background: #111; -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-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; line-height: 1.5; } /* a { color: #e0e0e0; 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-backface-visibility: hidden; backface-visibility: hidden; -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; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } a:hover, a:visited, a:active, a:focus { color: #e0e0e0; text-decoration: none; outline: none; font-weight: 500; -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; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } */ p { font-size: 15px; font-weight: 500; text-align: left; letter-spacing: 0.05em; color: #e0e0e0; line-height: 2; -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-backface-visibility: hidden; backface-visibility: hidden; } /* p a, p a:hover { color: #e0e0e0; text-decoration: none; outline: none; font-weight: 500; -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; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } */ strong { font-weight: bold; } ::-moz-selection { background: #fff; color: #fff; } ::selection { background: #fff; color: #fff; } .nopadding { padding: 0!important; margin: 0!important; } /* 4. headings */ h1.home-page-title { position: relative; font-family: 'Oswald', sans-serif; font-size: 125px; font-weight: 700; color: #fff; text-align: left; text-transform: uppercase; letter-spacing: -0.35vw; line-height: 1; margin: 0 0 -4px -8px; z-index: 1; } @media all and (min-width: 1920px) { h1.home-page-title { font-size: 165px; margin: 0 0 -6px -10px; } } @media only screen and (max-width: 995px) { h1.home-page-title { font-size: 105px; color: #fff; margin: 0 0 -3px -6px; } } @media only screen and (max-width: 880px) { h1.home-page-title { color: #fff; } } @media only screen and (max-width: 768px) { h1.home-page-title { font-size: 65px; margin: 0 0 -1px -3px; } } h2.home-page-title-all { font-family: 'Oswald', sans-serif; font-size: 80px; line-height: 1; font-style: normal; text-transform: uppercase; text-align: left; font-weight: 700; letter-spacing: -0.05em; color: #e0e0e0; margin: -11px 0 -2px 0; } @media all and (min-width: 1920px) { h2.home-page-title-all { font-size: 100px; margin: -11px 0 -2px 0; } } @media only screen and (max-width: 1200px) { h2.home-page-title-all { font-size: 60px; margin: -6px 0 0 0; } } /* 4.1. section headings */ h2.section-heading { font-family: 'Oswald', sans-serif; font-size: 18px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: -0.02em; position: relative; margin: -4px 0; padding: 0; z-index: 10; } @media all and (min-width: 1920px) { h2.section-heading { font-size: 20px; margin: -5px 0 -4px 0; } } @media only screen and (max-width: 995px) { h2.section-heading { font-size: 16px; margin: -3px 0; } } /* 5. header */ .header { position: absolute; top: 0; left: 0; width: 50%; height: auto; -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } @media only screen and (max-width: 880px) { .header { width: 100%; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .page-loaded .header { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* 6. logo */ .logo { position: absolute; display: block; width: 59px; height: 35px; top: 55px; left: 55px; background: url(../img/logo-light.png) no-repeat; z-index: 98; } @media only screen and (max-width: 880px) { .logo { background: url(../img/logo-light.png) no-repeat; } } @media only screen and (max-width: 768px) { .logo { top: 25px; left: 25px; } } /* 7. social icons */ /* 7.1. social icons home */ .social-icons-home-wrapper { position: absolute; left: 50px; bottom: 52px; text-align: left; z-index: 98; } @media only screen and (max-width: 768px) { .social-icons-home-wrapper { left: 20px; bottom: 23px; } } .social-icons-home-wrapper ul { margin: 0 auto; padding: 0; list-style-type: none; } .social-icons-home-wrapper ul li { display: inline-block; margin: 0 auto; padding: 0 0 0 5px; } ul.social-icons-home { font-size: 20px; line-height: 1; margin: 0; padding: 0; position: relative; } @media only screen and (max-width: 768px) { ul.social-icons-home { font-size: 18px; } } ul.social-icons-home a { padding: 0; color: #fff; 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; } @media only screen and (max-width: 880px) { ul.social-icons-home a { color: #fff; } } ul.social-icons-home a:hover { padding: 0; color: #fff; text-decoration: none; opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -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; } @media only screen and (max-width: 880px) { ul.social-icons-home a:hover { color: #fff; } } /* 7.2. social icons team */ .social-icons { position: relative; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: normal; font-style: normal; text-transform: uppercase; text-align: center; letter-spacing: -0.02em; color: #fff; background: none; border: none; width: auto; height: auto; line-height: 1; -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-backface-visibility: hidden; backface-visibility: hidden; -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; margin: 0 auto -5px auto; } .social-icons.social-icons-dark { margin: -4px auto -4px auto; } .social-icons a, .social-icons a:hover { outline: none; text-decoration: 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-backface-visibility: hidden; backface-visibility: hidden; color: #fff; letter-spacing: -0.02em; } .social-icons.social-icons-dark a, .social-icons.social-icons-dark a:hover { color: #e0e0e0; } /* .social-icons li a:hover, .social-icons li a:visited, .social-icons li a:active, .social-icons li a:focus { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: normal; font-style: normal; text-transform: uppercase; } */ .social-icons li { display: inline; font-size: 12px; color: #fff; font-weight: 700; letter-spacing: -0.02em; padding: 0; line-height: 2; } /* .social-icons.social-icons-dark li { } */ .social-icons li span { color: #fff; letter-spacing: -0.02em; padding: 0 10px; } .social-icons.social-icons-dark li span { color: #e0e0e0; } /* 8. about */ .timeline { position: relative; margin: 10px 0 0 0; } h3.cd-timeline-name { position: relative; font-family: 'Oswald', sans-serif; font-size: 30px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: -0.04em; color: #e0e0e0; line-height: 1.25; margin: -6px 0 -4px 0; } h4.cd-timeline-date { position: relative; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: normal; color: #e0e0e0; margin: 0 0 -12px 0; top: -7px; } .cd-timeline-position { display: block; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; padding: 0; text-align: left; letter-spacing: -0.04em; color: #e0e0e0; margin: 4px 0 3px 0; } @media only screen and (max-width: 768px) { .cd-timeline-position { font-size: 15px; margin: 4px 0; } } .timeline { position: relative; padding: 0; list-style: none; } .timeline:before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 2px; margin-left: -1.5px; background-color: #1d1d1f; } .timeline>li { position: relative; margin-bottom: 50px; min-height: 50px; } .timeline>li:before, .timeline>li:after { content: ""; display: table; } .timeline>li:after { clear: both; } .timeline>li .timeline-panel { position: relative; float: right; width: 100%; padding: 0 0 25px 100px; text-align: left; } .timeline>li .timeline-panel.timeline-panel-last { padding: 0 0 0 100px; } .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li .timeline-image { position: absolute; left: 0; width: 80px; height: 80px; margin-left: 0; border: 5px solid #111; text-align: center; color: #111; background-color: #111; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0 0 10px rgba(95, 95, 95, .35); -moz-box-shadow: 0 0 10px rgba(95, 95, 95, .35); box-shadow: 0 0 10px rgba(95, 95, 95, .35); z-index: 100; } .timeline-image .img-circle { 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; } .timeline-image:hover .img-circle { -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(95, 95, 95, .35); -moz-box-shadow: 0 0 10px rgba(95, 95, 95, .35); box-shadow: 0 0 10px rgba(95, 95, 95, .35); } .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 20px 25px 100px; text-align: left; } .timeline>li.timeline-inverted>.timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li.timeline-inverted>.timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li:last-child { margin-bottom: 0; } .timeline .timeline-body>p, .timeline .timeline-body>ul { margin-bottom: 0; } .timeline .timeline-body>p { margin-top: -7px; margin-bottom: -5px; } @media only screen and (min-width: 1200px) { .timeline:before { left: 50%; } .timeline>li { min-height: 140px; } .timeline>li .timeline-panel { float: left; width: 40%; padding: 0 55px 25px 0; } .timeline>li .timeline-panel.timeline-panel-last { padding: 0 55px 0 0; } .timeline>li .timeline-image { width: 140px; height: 140px; margin-left: -70px; left: 50%; } .timeline>li.timeline-inverted>.timeline-panel { float: right; text-align: left; padding: 0 0 25px 55px; } } @media all and (min-width: 1920px) { .timeline:before { left: 50%; } .timeline>li { min-height: 170px; } .timeline>li .timeline-panel { float: left; width: 40%; padding: 0 55px 25px 0; } .timeline>li .timeline-panel.timeline-panel-last { padding: 0 55px 0 0; } .timeline>li .timeline-image { width: 170px; height: 170px; margin-left: -85px; left: 50%; } .timeline>li.timeline-inverted>.timeline-panel { float: right; text-align: left; padding: 0 0 25px 55px; } } /* 9. services */ .panel-wrapper { position: relative; background: none; width: 100%; height: calc(100% + 300px); margin: -33px 0 -53px 0; z-index: 1; } @media only screen and (max-width: 768px) { .panel-wrapper { margin: -33px 0 -50px 0; } } .panel-title { position: relative; display: inline-block; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: #e0e0e0; margin: 0; } @media only screen and (max-width: 768px) { .panel-title { font-size: 15px; } } .panel-group .panel { border: none; background: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .panel-group .panel .panel-heading { border: none; background: none; } .panel-group .panel .panel-heading h4 a { display: block; background: none; padding: 15px; -webkit-transition: 0.15s all ease-in-out; -moz-transition: 0.15s all ease-in-out; -ms-transition: 0.15s all ease-in-out; -o-transition: 0.15s all ease-in-out; transition: 0.15s all ease-in-out; } .panel-group .panel .panel-heading h4 a:hover, .panel-group .panel .panel-heading h4 a:not(.collapsed) { background: none; -webkit-transition: 0.15s all ease-in-out; -moz-transition: 0.15s all ease-in-out; -ms-transition: 0.15s all ease-in-out; -o-transition: 0.15s all ease-in-out; transition: 0.15s all ease-in-out; } .panel-group .panel .panel-heading h4 a:not(.collapsed) i:before { content: "\f209"; font-family: "Ionicons"; } .ion { font-size: 13px; } .panel-group .panel .panel-heading h4 a i { position: relative; display: block; top: 11px; left: -30px; color: #fff; color: #e0e0e0; text-align: center; } @media only screen and (max-width: 768px) { .panel-group .panel .panel-heading h4 a i { top: 10px; } } .panel-group .panel .panel-body { padding-top: 0; } .panel-group .panel .panel-heading + .panel-collapse > .list-group, .panel-group .panel .panel-heading + .panel-collapse > .panel-body { border-top: none; background: none; padding: 0; } .panel-group .panel + .panel { border: none; margin-top: -15px; } .panel-body p { text-align: left; position: relative; } .panel-collapse { position: relative; top: -33px; } @media only screen and (max-width: 768px) { .panel-collapse { top: -31px; } } /* 10. works */ .circle-wrapper-full { position: relative; display: block; overflow: hidden; width: 100%; padding-bottom: 100%; height: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 0; } /* .circle-wrapper-full .carousel-item-all { position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 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; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 0; } */ .circle-wrapper-full .carousel-item-all { position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 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; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; z-index: 0; } /* 11. navigation */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: none; -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 1001; } .page-loaded #header { 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: 880px) { .page-loaded #header { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .nav-menu-animation { position: fixed; width: 100%; height: 100%; fill: none; stroke-dasharray: 1; stroke-width: 0.25; stroke: #777; -webkit-animation: spin 23s linear infinite; -moz-animation: spin 23s linear infinite; -ms-animation: spin 23s linear infinite; -o-animation: spin 23s linear infinite; animation: spin 23s linear infinite; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; z-index: 0; } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .round-menu.direction { background: #fff; top: 55px; right: 55px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } @media only screen and (max-width: 880px) { .round-menu.direction { background: #fff; } } @media only screen and (max-width: 768px) { .round-menu.direction { top: 25px; right: 25px; } } .round-menu { position: absolute; display: block; width: 60px; height: 60px; top: 42px; right: 39px; margin: 0; padding: 0; border: none; background: none; -webkit-transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition-property: color, -webkit-transform; transition-property: color, -webkit-transform; transition-property: transform, color; transition-property: transform, color, -webkit-transform; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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: hidden; cursor: pointer; z-index: 10; } @media only screen and (max-width: 768px) { .round-menu { top: 12px; right: 9px; } } .round-menu::before { content: ""; position: absolute; display: block; width: 60px; height: 60px; top: -webkit-calc(50% - 30px); top: -moz-calc(50% - 30px); top: calc(50% - 30px); left: -webkit-calc(50% - 30px); left: -moz-calc(50% - 30px); left: calc(50% - 30px); background: #fff; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 0; } .round-menu.direction.round-menu::before { background: #fff; } @media only screen and (max-width: 880px) { .round-menu.direction.round-menu::before { background: #fff; } } .round-menu .dot-1, .round-menu .dot-2, .round-menu .dot-3 { position: absolute; display: block; width: 5px; height: 5px; top: -webkit-calc(50% - 3px); top: -moz-calc(50% - 3px); top: calc(50% - 3px); left: -webkit-calc(50% - 3px); left: -moz-calc(50% - 3px); left: calc(50% - 3px); background: #fff; -webkit-transition: -webkit-transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; transition: -webkit-transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, -webkit-transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 1; } .round-menu.direction .dot-1, .round-menu.direction .dot-2, .round-menu.direction .dot-3 { background: #111; } @media only screen and (max-width: 880px) { .round-menu.direction .dot-1, .round-menu.direction .dot-2, .round-menu.direction .dot-3 { background: #111; } } .round-menu .dot-1 { -webkit-transform: translateX(-12px); transform: translateX(-12px); } .round-menu .dot-3 { -webkit-transform: translateX(12px); transform: translateX(12px); } .round-menu:hover::before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .round-menu:hover .dot-1, .round-menu:hover .dot-2, .round-menu:hover .dot-3 { mix-blend-mode: exclusion; background: #fff; } .round-menu:hover .dot-1, .round-menu:hover .dot-3 { -webkit-transform: translateX(0); transform: translateX(0); } nav.navigation-menu { position: fixed; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; 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); } nav.navigation-menu.show { -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; 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); } nav.navigation-menu, nav.navigation-menu.show { text-align: center; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; z-index: 1001; } nav.navigation-menu, nav.navigation-menu.show { position: relative; display: block; overflow: hidden; width: 500px; height: 500px; left: 0; right: 0; margin-left: auto; margin-right: auto; -webkit-clip-path: circle(); -moz-clip-path: circle(); clip-path: circle(); background: #fff; object-fit: cover; } @media all and (min-width: 1920px) { nav.navigation-menu, nav.navigation-menu.show { width: 700px; height: 700px; } } @media only screen and (max-width: 1200px) { nav.navigation-menu, nav.navigation-menu.show { width: 400px; height: 400px; } } @media only screen and (max-width: 768px) { nav.navigation-menu, nav.navigation-menu.show { width: 300px; height: 300px; } } nav.navigation-menu a, nav.navigation-menu a:hover { text-decoration: 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; } nav.navigation-menu a:link, nav.navigation-menu a:visited, nav.navigation-menu a:active { color: #5f5f5f; } nav.navigation-menu li { margin: 0 auto 8px auto; } nav.navigation-menu li:last-child { margin: 0 auto; } nav.navigation-menu a { font-family: 'Oswald', sans-serif; font-size: 20px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: normal; line-height: 1; } @media only screen and (max-width: 995px) { nav.navigation-menu a { font-size: 18px; } } @media only screen and (max-width: 768px) { nav.navigation-menu a { font-size: 16px; } } .nav-menu-wrapper { position: fixed; width: 100%; height: 100%; z-index: 1; } .nav-menu-links { position: relative; width: 100%; height: auto; } /* 12. introduction */ .introduction h3 { position: relative; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: #e0e0e0; margin: -4px 0 -3px 0; } @media only screen and (max-width: 880px) { .introduction h3 { color: #fff; } } @media only screen and (max-width: 768px) { .introduction h3 { font-size: 15px; margin: -4px 0 -2px 0; } } .introduction { position: relative; width: 100%; margin: 0 0 0 55px; -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 0; } @media only screen and (max-width: 880px) { .introduction { margin: 0 0 0 55px; padding: 0 15px 0 0; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; z-index: 1; } } @media only screen and (max-width: 768px) { .introduction { width: 90%; margin: 0; left: 25px; } } .page-loaded .introduction { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* 13. front page */ .fireOT { position: absolute; width: 100%; height: 100%; z-index: -1; } @media only screen and (max-width: 880px) { .fireOT { z-index: 1; } } /* 14. left side */ @media only screen and (max-width: 880px) { .fireOT-left { clear: both; float: none; position: relative!important; width: 100%; height: auto!important; } } .left-side-home { width: 50vw; height: 100%; -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; overflow: hidden; } @media only screen and (max-width: 880px) { .left-side-home { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .page-loaded .left-side-home { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .left-side { width: 50vw; height: auto; -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; overflow: auto; } @media only screen and (max-width: 880px) { .left-side { width: 100%; margin: auto; padding: 0 15px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .page-loaded .left-side { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .left-side .container-home { width: 100%; height: auto; padding: 25px 65px 0 45px; overflow-x: hidden; overflow-y: hidden; } @media only screen and (max-width: 880px) { .left-side .container-home { width: auto; } } .left-side .container { width: 100%; height: auto; padding: 25px 72px 0 55px; overflow-x: hidden; overflow-y: hidden; } @media only screen and (max-width: 880px) { .left-side .container { width: auto; padding: 25px 40px 0 40px; } } @media only screen and (max-width: 768px) { .left-side .container { padding: 25px 10px 0 10px; } } /* 15. right side */ @media only screen and (max-width: 880px) { .fireOT-right { clear: both; float: none; position: relative!important; width: 100%; min-height: 500px!important; } } .slide { position: relative; } .slide.active { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .right-side { position: fixed; width: 100vw; height: 100%; top: 0; right: 0; -webkit-transition: 1.9s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -moz-transition: 1.9s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -ms-transition: 1.9s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -o-transition: 1.9s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; transition: 1.9s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; background: none; overflow-x: hidden; overflow-y: hidden; } .page-loaded .right-side { position: fixed; width: 50vw; height: 100%; top: 0; right: 0; background: none; } @media only screen and (max-width: 880px) { .page-loaded .right-side { position: absolute; width: 100%; } } /* 16. overlay */ .overlay:before { content: ""; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } @media only screen and (max-width: 880px) { .overlay:before { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } .page-loaded .overlay:before { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .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 { background: rgba(0, 0, 0, .6); -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; } /* 17. link effect */ a.link-effect { position: relative; display: inline-block; text-decoration: none; color: inherit; } a.link-effect::after { content: ""; position: absolute; display: block; width: 100%; height: 1px; left: 0; bottom: 0; padding: 0; background-color: #e0e0e0; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -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); } a:hover.link-effect::after { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left 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); } /* 18. to top arrow */ .to-top-arrow { position: fixed; right: 55px; bottom: -10px; width: 50px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; color: #111; background: #fff; 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 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; cursor: pointer; z-index: 100; } @media only screen and (max-width: 880px) { .to-top-arrow { color: #111; background: #fff; } } @media only screen and (max-width: 768px) { .to-top-arrow { right: 25px; } } .to-top-arrow.show { bottom: 35px; -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: 768px) { .to-top-arrow.show { bottom: 5px; } } .to-top-arrow:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* 19. preloader */ .preloader-bg { position: fixed; width: 100%; height: 100%; overflow: hidden; background: #111; z-index: 999999; } #preloader { position: fixed; display: table; table-layout: fixed; width: 100%; height: 100%; overflow: hidden; background: #111; 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: auto; 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(255, 255, 255, .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(255, 255, 255, .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); } } .preloader-after { position: fixed; width: 100vw; top: 0; right: 0; bottom: 0; -webkit-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.55s; -moz-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.55s; -ms-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.55s; -o-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.55s; transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.55s; overflow: hidden; z-index: 999; } .page-loaded .preloader-after { right: -100vw; } .preloader-after::before { content: ""; position: absolute; width: 100vw; top: 0; left: 0; bottom: 0; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: #1d1d1f; z-index: 0; } .preloader-after::after { content: ""; position: absolute; width: 0; top: 0; left: 33.333vw; bottom: 0; -webkit-transition: 1.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -moz-transition: 1.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -ms-transition: 1.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -o-transition: 1.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; transition: 1.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: #000; z-index: 1; } @media only screen and (max-width: 880px) { .preloader-after::after { left: 20vw; } } .page-ready .preloader-after::after { width: 33.333vw; } @media only screen and (max-width: 880px) { .page-ready .preloader-after::after { width: 60vw; } } .preloader-after .preloader-after-inner { position: absolute; width: 100vw; height: 100vh; right: 0; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.15s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.15s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.15s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.15s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.15s; object-fit: cover; background: #111; z-index: 2; } .page-loaded .preloader-after .preloader-after-inner { width: 20vw; } /* 20. copyright */ .copyright { position: relative; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: normal; color: #fff; margin: 0 0 1px 0; } .copyright, .copyright a, .copyright a:hover { color: #e0e0e0; text-decoration: none; font-weight: 700; } .copyright-home { position: fixed; bottom: 51px; right: 55px; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: right; letter-spacing: normal; color: #fff; margin: 0; z-index: 10; } @media only screen and (max-width: 995px) { .copyright-home { position: absolute; } .copyright-home.copyright-home-slider { display: none; visibility: hidden; } } @media only screen and (max-width: 768px) { .copyright-home { bottom: 21px; right: 25px; } .copyright-home.copyright-home-slider { display: block; visibility: visible; } } .copyright-home, .copyright-home a, .copyright-home a:hover { color: #fff; text-decoration: none; font-weight: 700; } .copyright-home { -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .page-loaded .copyright-home { 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: 880px) { .page-loaded .copyright-home { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } /* 21. center container */ .center-container-home { position: relative; display: table; table-layout: fixed; width: 50%; height: 100%; background: none; z-index: 98; } @media only screen and (max-width: 880px) { .center-container-home { position: absolute; width: 100%; } } .center-block-home { display: table-cell; vertical-align: middle; } .center-container-menu { position: fixed; display: table; width: 100%; height: 100%; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; z-index: 100; } .center-block-menu { display: table-cell; vertical-align: middle; } .center-container { position: absolute; display: table; table-layout: fixed; width: 100%; height: 100%; } .center-block { display: table-cell; vertical-align: middle; } /* 22. item folio */ .item-folio__caption { display: none; visibility: hidden; } /* 23. section subheading */ .section-subheading-wrapper { position: relative; width: 100%!important; height: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center!important; margin: -4px auto -6px -25px; } @media only screen and (max-width: 995px) { .section-subheading-wrapper { margin: -4px auto -6px -15px; } } .section-subheading-wrapper-all { position: relative; margin: -33px 0 -4px 0; } h2.section-subheading { position: relative; display: inline-block; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: #e0e0e0; } @media only screen and (max-width: 768px) { h2.section-subheading { font-size: 15px; } } .section-subheading { margin: 0 auto -6px auto; } h2.section-subheading::after { content: ""; position: absolute; width: 25px; height: 1px; top: 50%; left: 100%; background-color: #e0e0e0; margin-left: 25px; } @media only screen and (max-width: 995px) { h2.section-subheading::after { width: 15px; margin-left: 15px; } } h2.section-subheading span { position: relative; display: inline-block; padding-right: 0; line-height: 1; } /* 24. contact form */ #contact-form { position: relative; width: 100%; top: -20px; margin: 0; padding: 0; } form { margin: 0; padding: 0; } #form 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; letter-spacing: 0.05em; line-height: 1.5; font-style: normal; font-weight: 600; text-align: left; color: #e0e0e0; -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: 100px; 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; letter-spacing: 0.05em; line-height: 1.5; font-style: normal; font-weight: 600; text-align: left; color: #e0e0e0; -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 { 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, .5); -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: 700; letter-spacing: 0.15em; text-transform: uppercase; text-align: left; color: #e0e0e0; margin: 0; padding: 25px 0 0 15px; line-height: 1; -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-backface-visibility: hidden; backface-visibility: hidden; } #form .error { position: absolute; display: block; font-size: 9px; text-transform: uppercase; font-weight: 700; color: #e0e0e0; margin: 0 0 0 5px; padding: 0; letter-spacing: 0.15em; -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-backface-visibility: hidden; backface-visibility: hidden; } .make-space { margin-left: 15px; margin-right: 15px; } ::-webkit-input-placeholder { font-size: 13px; color: #e0e0e0; } :-ms-input-placeholder { font-size: 13px; color: #e0e0e0; } ::-moz-placeholder { font-size: 13px; color: #e0e0e0; } input:-moz-placeholder { font-size: 13px; color: #e0e0e0; } 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; } /* 25. button */ .the-button-wrapper { position: relative; width: 175px; height: auto; line-height: 1.5; padding: 0; text-align: center; cursor: pointer; z-index: 10; } .the-button-wrapper { margin: -8px 0 3px 6px; } @media all and (min-width: 1920px) { .the-button-wrapper { width: 205px; margin: -5px 0 5px 6px; } } @media only screen and (max-width: 995px) { .the-button-wrapper { margin: -3px 0 8px 6px; } } @media only screen and (max-width: 768px) { .the-button-wrapper { width: 175px; margin: -3px 0 1px 6px; } } .the-button-wrapper.the-button-wrapper-home { margin: -9px 0 0 6px; } @media all and (min-width: 1920px) { .the-button-wrapper.the-button-wrapper-home { margin: -7px 0 0 6px; } } @media only screen and (max-width: 995px) { .the-button-wrapper.the-button-wrapper-home { margin: -9px 0 0 6px; } } .the-button-wrapper.the-button-wrapper-form { margin: 47px 0 -39px 21px; } @media all and (min-width: 1920px) { .the-button-wrapper.the-button-wrapper-form { margin: 51px 0 -35px 21px; } } @media only screen and (max-width: 995px) { .the-button-wrapper.the-button-wrapper-form { margin: 47px 0 -39px 21px; } } .the-button-wrapper.the-button-wrapper-more { text-align: center; max-width: 205px!important; margin: -7px auto 4px auto; } @media all and (min-width: 1920px) { .the-button-wrapper.the-button-wrapper-more { margin: -5px auto 5px auto; } } @media only screen and (max-width: 995px) { .the-button-wrapper.the-button-wrapper-more { margin: -3px auto 8px auto; } } @media only screen and (max-width: 768px) { .the-button-wrapper.the-button-wrapper-more { margin: -3px auto 1px auto; } } .the-button { position: relative; width: 175px; font-size: 10px; font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: 0.10em; color: #e0e0e0; background: none; padding: 10px 40px 0 40px; top: 13px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } @media all and (min-width: 1920px) { .the-button { width: 205px; font-size: 11px; letter-spacing: 0.25em; padding: 11px 40px 0 40px; } } @media only screen and (max-width: 768px) { .the-button { width: 175px; font-size: 10px; letter-spacing: 0.10em; } } @media only screen and (max-width: 880px) { .the-button-wrapper.the-button-wrapper-home .the-button { color: #fff; } } .the-button:hover:before { width: 100%; } .the-button:hover:after { width: 100%; } .the-button::before { content: ""; position: absolute; width: 15px; height: 38px; top: -2px; left: -6px; border: 1px solid #e0e0e0; border-right: 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; } @media all and (min-width: 1920px) { .the-button::before { width: 20px; height: 47px; top: -5px; } } @media only screen and (max-width: 880px) { .the-button-wrapper.the-button-wrapper-home .the-button::before { border: 1px solid #fff; border-right: none; } } @media only screen and (max-width: 768px) { .the-button::before { width: 15px; height: 38px; top: -2px; } } .the-button::after { content: ""; position: absolute; width: 15px; height: 38px; top: -2px; right: -6px; border: 1px solid #e0e0e0; border-left: 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; } @media all and (min-width: 1920px) { .the-button::after { width: 20px; height: 47px; top: -5px; } } @media only screen and (max-width: 880px) { .the-button-wrapper.the-button-wrapper-home .the-button::after { border: 1px solid #fff; border-left: none; } } @media only screen and (max-width: 768px) { .the-button::after { width: 15px; height: 38px; top: -2px; } } .the-button-submit { width: 175px; top: -19px; margin: 0 0 12px 0; border: none; } @media all and (min-width: 1920px) { .the-button-submit { width: 205px; border: none; } } @media only screen and (max-width: 768px) { .the-button-submit { width: 175px; top: -19px; } } button.button-all { border: none; } button.button-all span { position: relative; top: -12px; } button.button-all { position: relative; height: 49px; margin: -2px auto; } @media all and (min-width: 1920px) { button.button-all { height: 53px; } } @media only screen and (max-width: 995px) { button.button-all { height: 49px; margin: -7px auto; } } @media only screen and (max-width: 768px) { button.button-all { margin: -7px 0 0 0; position: relative; } } /* 26. button more */ .more-wraper { position: relative; width: 120px; height: 120px; margin: 0; } .more-wraper-center { position: relative; width: 120px!important; max-width: 120px; height: 120px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; z-index: 1; } .more-button-bg-center { background: #5f5f5f; border: 2px dashed #5f5f5f; } .more-button-circle { display: block; width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-clip: content-box; padding: 2.5px; } .more-wraper:hover .more-button-circle, .more-wraper-center:hover .more-button-circle { -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -ms-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; } .more-button-txt-center { position: absolute; top: 60px; left: 60px; width: 120px!important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: normal; color: #e0e0e0; margin: 0 auto; } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 27. lower page */ .lower-page { position: relative; height: auto; min-height: inherit; overflow: hidden; margin-left: 0; margin-right: 0; background: #111; z-index: 15; } @media only screen and (max-width: 768px) { .lower-page { margin-left: 25px; margin-right: 25px; } } .lower-page.lower-page-modal { position: relative; height: auto; min-height: inherit; overflow: hidden; margin-left: 0; margin-right: 0; } @media only screen and (max-width: 768px) { .lower-page.lower-page-modal { padding: 0 10px; } } /* 28. home page IMG/VIDEO slider */ .home-img-container { position: absolute!important; display: block; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -moz-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -ms-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -o-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); overflow: hidden; z-index: 0; } .home-img-container.img-poster { left: 50vw; } .slider, .slider-all { position: absolute!important; width: 50vw; height: 100vh; left: 0; top: 0; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.2s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.2s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.2s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.2s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.2s; overflow: hidden; } .slider { z-index: 1; } .slider-all { z-index: 0; } .page-loaded .slider, .page-loaded .slider-all { width: 50vw; height: 100vh; left: 0; top: 0; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .page-loaded .slider .slide, .page-loaded .slider-all .slide-all { width: 30vw!important; overflow: initial; } .home-slide-content, .home-slide-content-all { position: absolute; width: 100%; height: auto; left: 54px; bottom: 47px; -webkit-transition: 0.2s cubic-bezier(0.67, 0.02, 0.2, 0.97); -moz-transition: 0.2s cubic-bezier(0.67, 0.02, 0.2, 0.97); -ms-transition: 0.2s cubic-bezier(0.67, 0.02, 0.2, 0.97); -o-transition: 0.2s cubic-bezier(0.67, 0.02, 0.2, 0.97); transition: 0.2s cubic-bezier(0.67, 0.02, 0.2, 0.97); z-index: 1; } @media only screen and (max-width: 880px) { .home-slide-content, .home-slide-content-all { display: none; } } .home-slide-content-all { -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .page-loaded .home-slide-content-all { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .right-side p { opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2s; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: #fff; margin: 0 0 -8px 0; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } @media only screen and (max-width: 768px) { .right-side p { font-size: 15px; } } .page-loaded .right-side p { position: relative; font-weight: 600; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; z-index: 1; } .right-side h2 { position: relative; font-family: 'Oswald', sans-serif; font-size: 30px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: -0.04em; color: #fff; line-height: 1.25; margin: -5px 0 3px 0; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; overflow: hidden; } .page-loaded .right-side .slide p, .page-loaded .right-side .slide h2 { opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; } .page-loaded .right-side .slick-current p, .page-loaded .right-side .slick-current h2 { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .slide-img.active { position: relative; display: block; width: 100%; height: 100%; background: #111; overflow: hidden; } .slide-img img { display: block; width: 25vw; height: 100vh; right: 0; left: auto; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.65s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.65s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.65s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.65s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.65s; object-fit: cover; } @media only screen and (max-width: 880px) { .slide-img img { width: 100vw; } } .page-loaded .slide-img img { width: 62vw; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .page-loaded .slide-img img { width: auto; } } @media only screen and (max-width: 880px) { .page-loaded .slide-img img { width: 100vw; } } /* 29. section page IMG slider */ .about-img-container, .services-img-container, .works-img-container, .news-img-container, .contact-img-container, .about-img-container.mobile, .services-img-container.mobile, .works-img-container.mobile, .news-img-container.mobile, .contact-img-container.mobile { position: absolute!important; display: block; width: 0; height: 100vh; top: 0; left: 0; -webkit-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -moz-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -ms-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -o-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); background: #111; overflow: hidden; z-index: 99; } @media only screen and (max-width: 880px) { .about-img-container.mobile, .services-img-container.mobile, .works-img-container.mobile, .news-img-container.mobile, .contact-img-container.mobile { display: none; } } @media only screen and (max-width: 880px) { .about-img-container, .services-img-container, .works-img-container, .news-img-container, .contact-img-container, .about-img-container.img-poster, .services-img-container.img-poster, .works-img-container.img-poster, .news-img-container.img-poster, .contact-img-container.img-poster { width: 100%; } } .about-img-container.img-poster, .services-img-container.img-poster, .works-img-container.img-poster, .news-img-container.img-poster, .contact-img-container.img-poster { width: 100vw; } .about-img-container .slide-img, .services-img-container .slide-img, .works-img-container .slide-img, .news-img-container .slide-img, .contact-img-container .slide-img { position: absolute; left: -30vw; -webkit-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -moz-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -ms-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); -o-transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97); } .page-loaded .about-img-container .slide-img, .page-loaded .services-img-container .slide-img, .page-loaded .works-img-container .slide-img, .page-loaded .news-img-container .slide-img, .page-loaded .contact-img-container .slide-img { left: -30vw; } @media only screen and (max-width: 880px) { .page-loaded .about-img-container .slide-img, .page-loaded .services-img-container .slide-img, .page-loaded .works-img-container .slide-img, .page-loaded .news-img-container .slide-img, .page-loaded .contact-img-container .slide-img { left: 0; } } .page-loaded .about-img-container.img-poster .slide-img, .page-loaded .services-img-container.img-poster .slide-img, .page-loaded .works-img-container.img-poster .slide-img, .page-loaded .news-img-container.img-poster .slide-img, .page-loaded .contact-img-container.img-poster .slide-img { left: 0; } /* 30. videos */ /* 30.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; } } /* display: block; *//* uncomment the following to show an image for mobile devices */ #videoContainment { position: absolute; display: block; width: 50vw!important; height: 100vh!important; top: 0; left: 0; bottom: 0; right: 0; background: #000; z-index: 0; } @media only screen and (max-width: 880px) { #videoContainment { width: 100vw!important; height: 100%!important; } } /* 30.2. Vimeo video */ .vimeo-bg { display: none; } @media only screen and (max-width: 880px) { .vimeo-bg { position: relative; 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; /* uncomment the following to show an image for mobile devices */ /* display: block; */ } #vimeo-videoContainment { display: none; } } #vimeo-videoContainment { position: absolute; display: block; width: 50vw!important; height: 100vh!important; top: 0; left: -50%; bottom: 0; right: 0; background: #000; z-index: 0; } @media only screen and (max-width: 880px) { #vimeo-videoContainment { width: 100%!important; height: 100%!important; left: 0; } } #vimeo-videoContainment iframe, #vimeo-videoContainment object, #vimeo-videoContainment embed { border: none; } /* 31. containment */ #allContainment { position: absolute; display: block; width: 100vw!important; height: 100vh!important; top: 0; left: -50%; bottom: 0; right: 0; background: #000; z-index: 0; } @media only screen and (max-width: 880px) { #allContainment { left: 0; } } #home-multiple-imagesContainment { position: absolute; display: block; width: 50vw; height: 100vh; top: 0; left: 0; bottom: 0; right: 0; background: #111; z-index: 0; } @media only screen and (max-width: 880px) { #home-multiple-imagesContainment { width: 100%; height: 100%; } } /* 32. typed text */ h1.typed-effect { position: relative; font-family: 'Oswald', sans-serif; font-size: 85px; font-weight: 700; color: #fff; text-align: left; text-transform: uppercase; letter-spacing: -0.35vw; line-height: 1; margin: 0 0 -3px -4px; z-index: 1; } @media all and (min-width: 1920px) { h1.typed-effect { font-size: 125px; margin: 0 0 -4px -5px; } } @media only screen and (max-width: 995px) { h1.typed-effect { font-size: 65px; color: #fff; margin: 0 0 -1px -4px; } } @media only screen and (max-width: 880px) { h1.typed-effect { color: #fff; } } @media only screen and (max-width: 768px) { h1.typed-effect { font-size: 50px; margin: 0 0 0 -3px; } } .typed-cursor { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* 33. news carousel */ #news-carousel { z-index: 10; position: relative; margin: 0; } .news-item-inner { position: relative; width: 100%; margin: 0; padding: 0; } p.text { position: relative; text-align: left; margin: -4px 0 1px 0; } @media only screen and (max-width: 768px) { p.text { padding: 0; } } .news-bg-wrapper { position: relative; width: 100%; height: auto; min-height: 600px; 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; } @media only screen and (max-width: 1200px) { .news-bg-wrapper { min-height: 600px; } } @media only screen and (max-width: 995px) { .news-bg-wrapper { min-height: 435px; } }/* min-height: 500px; */ @media only screen and (max-width: 768px) { .news-bg-wrapper { min-height: 315px; } } /* min-height: 400px; */ /* 34. news modal */ .news-modal .modal-content { min-height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: border-box; background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; margin: 0; padding: 0; border: none; background: #111; } /* 35. news quote */ .blog-quote { line-height: 100px; padding: 0 0 0 50px; border-left: 5px solid #e0e0e0; margin: 0; } @media only screen and (max-width: 768px) { .blog-quote { padding: 0 0 0 30px; margin: 0; } } .blog-quote p { position: relative; font-family: 'Oswald', sans-serif; font-style: normal; font-weight: 700; font-size: 50px; text-align: left; text-transform: none; letter-spacing: -0.02em; color: #e0e0e0; margin: -12px 0 0 0; top: -4px; width: 100%; line-height: 1; text-shadow: 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-backface-visibility: hidden; backface-visibility: hidden; } /* @supports((text-stroke: 1px #e0e0e0) or (-webkit-text-stroke: 1px #e0e0e0)) { .blog-quote p { color: transparent; -webkit-text-stroke: 1px #e0e0e0; text-stroke: 1px #e0e0e0; text-shadow: none; } } @media only screen and (max-width: 1200px) { .blog-quote p { margin: -12px 0 0 0; top: -4px; } } @media only screen and (max-width: 995px) { .blog-quote p { font-size: 40px; margin: -10px 0 0 0; top: -2px; } } @media only screen and (max-width: 768px) { .blog-quote p { font-size: 30px; margin: -5px 0 0 0; } } */ /* .blog-quote p span { color: #e0e0e0; -webkit-text-stroke: 1px #e0e0e0; text-stroke: 1px #e0e0e0; text-shadow: none; } */ /* nopadding */ @media only screen and (max-width: 768px) { .nopadding { padding: 0!important; margin: 0!important; } } .nopadding.nopadding-xs { margin-left: -15px!important; margin-right: -15px!important; } @media only screen and (max-width: 768px) { .nopadding.nopadding-xs { margin-left: -10px!important; margin-right: -10px!important; } }/* padding: 0!important; margin: 0!important; */ /* 36. news */ .news-info-title { position: relative; font-family: 'Oswald', sans-serif; font-size: 40px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: -0.04em; color: #e0e0e0; line-height: 1.25; margin: -8px 0 -5px 0; } @media only screen and (max-width: 995px) { .news-info-title { font-size: 30px; margin: -6px 0 -4px 0; } } .news-info-date { position: relative; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: normal; color: #e0e0e0; margin: -2px 0; } .news-info-category { display: block; font-family: 'Oswald', sans-serif; font-size: 17px; font-style: normal; font-weight: 700; text-transform: uppercase; padding: 0; text-align: left; letter-spacing: -0.04em; color: #e0e0e0; margin: -4px 0 -3px 0; } @media only screen and (max-width: 768px) { .news-info-category { font-size: 15px; margin: -4px 0 -2px 0; } } /* 37. team / news headers */ .section-title-inner { font-family: 'Oswald', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: -0.02em; line-height: 1.25; color: #e0e0e0; margin: -2px auto; padding: 0; -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-backface-visibility: hidden; backface-visibility: hidden; } @media only screen and (max-width: 1200px) { .section-title-inner { font-size: 14px; } } .section-title-inner.section-title-inner-dark { color: #5f5f5f; } /* 38. text elements height */ p, h1, h2,h4, h5, h6, p, .txt p, #news p { line-height: 2; } /* h3, */ .section-title-inner { line-height: 1.5; } h1.section-header, .blog-quote p { line-height: 1.35; } /* 39. text elements position */ h1.section-header { margin: -10px 0 2px 0; } @media all and (min-width: 1920px) { h1.section-header { font-size: 60px; margin: -16px 0 2px 0; } } @media only screen and (max-width: 1200px) { h1.section-header { margin: -12px 0 3px 0; } } @media only screen and (max-width: 995px) { h1.section-header { font-size: 40px; margin: -9px 0 1px 0; } } @media only screen and (max-width: 768px) { h1.section-header { font-size: 30px; margin: -5px 0 1px 0; } } /* 40. headers about / contact */ h6.about, h6.contact { position: relative; font-family: 'Oswald', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; letter-spacing: -0.02em; color: #e0e0e0; margin: -6px 0; padding: 0; -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-backface-visibility: hidden; backface-visibility: hidden; z-index: 10; } @media only screen and (max-width: 1200px) { h6.about, h6.contact { font-size: 14px; } } .awesome { color: #5f5f5f; -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-backface-visibility: hidden; backface-visibility: hidden; } .col-all .awesome { -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; } .col-all:hover .awesome { color: #e0e0e0; -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; } /* 41. Slick CUSTOM */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; height: 100vh; margin: 0; padding: 0; overflow: hidden; } .slick-list:focus { outline: none; } .slick-slider .slick-track, .slick-slider .slick-list { -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); } .slick-track { position: relative; display: block; top: 0; left: 0; margin-left: auto; margin-right: auto; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); -webkit-transition: 0.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -moz-transition: 0.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -ms-transition: 0.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; -o-transition: 0.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; transition: 0.6s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0s; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { position: relative; display: block; float: left; width: 0vw!important; height: 100vh; min-height: 1px; overflow: hidden; -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 0.6s; } .page-loaded .slick-slide { width: 50vw!important; } @media only screen and (max-width: 880px) { .page-loaded .slick-slide { width: 100vw!important; } } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-loading .slick-slide { visibility: hidden; } /* 42. Owl Carousel CUSTOM */ .owl-carousel { cursor: grab; } .owl-nav-custom-team, .owl-nav-custom-works, .owl-nav-custom-news, .owl-nav-custom-news-all { position: relative; width: 114px!important; max-width: 114px; height: 50px; left: 2px; right: 0; margin-left: auto; margin-right: auto; margin: 2px auto; text-align: center; overflow: hidden; } .owl-buttons { position: static; } .owl-prev, .owl-next { position: absolute; display: block; text-align: center; } .owl-prev { left: 0; } .owl-next { left: 60px; } .owl-prev, .owl-next { width: 50px; height: 50px; line-height: 50px; -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; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; font-size: 12px; color: #fff; background: #5f5f5f; cursor: pointer; z-index: 10; } .owl-prev:hover, .owl-next:hover { -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; } .owl-prev.disabled, .owl-next.disabled, #works-section-carousel.owl-prev.disabled, #works-section-carousel.owl-next.disabled, #news-section-carousel.owl-prev.disabled, #news-section-carousel.owl-next.disabled { content: ""; position: absolute; display: block; width: 50px; height: 50px; line-height: 50px; background: #ccc!important; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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); cursor: default!important; } #owl-carousel-works { margin: -25px 0 0 0; } /* 43. Lity CUSTOM */ .lity { z-index: 99999; cursor: crosshair; background: rgba(0, 0, 0, .55); } .lity-close { top: 40px; left: 40px; font-weight: 500!important; } @media only screen and (max-width: 768px) { .lity-close { top: 15px; left: 15px; } } .lity-close:active { top: 40px; left: 40px; } @media only screen and (max-width: 768px) { .lity-close:active { top: 15px; left: 15px; } } .lity-close, .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { text-shadow: none; } /* 44. PhotoSwipe CUSTOM */ .pswp__bg { background: #111; } .pswp__counter { color: #e0e0e0; opacity: 1; } .pswp__caption__center { color: #e0e0e0; } .pswp__share-modal { background: rgba(0, 0, 0, 0.5); } .pswp__img--placeholder--blank { background: #111; } .pswp__top-bar, .pswp__caption { background-color: rgba(17, 17, 17, 1); } .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(17, 17, 17, 1); } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../photoswipe/default-skin/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; } /* @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { } */ .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(17, 17, 17, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } /* 45. Swiper CUSTOM */ /* Swiper style 1 */ .hero-slider-wrapper { position: relative; width: 100%; height: 100%; z-index: 2; } .hero-slider-wrapper-img { position: absolute; top: 0; right: 0; bottom: 0; left: 300px; z-index: 1; } @media only screen and (max-width: 995px) { .hero-slider-wrapper-img { left: 0; } } .hero-slider-bg { position: absolute; width: 100%; height: 100%; 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; z-index: 1; } .swiper-container { width: 100%; height: 100%; margin: 0 auto; } .hero-slider-img .swiper-slide { position: relative; float: left; width: 100%; height: 100%; overflow: hidden; } .swiper-slide-txt { position: relative; width: 100%!important; padding: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 1; } @media only screen and (max-width: 995px) { .swiper-slide-txt { padding: 0 10px; left: 0; } } .swiper-slide-txt-inner { position: relative; max-width: 600px; } @media only screen and (max-width: 995px) { .swiper-slide-txt-inner { max-width: 100%; } } .hero-slider-bg-controls { position: absolute; right: 49px; bottom: 55px; z-index: 10; } @media only screen and (max-width: 768px) { .hero-slider-bg-controls { right: 19px; bottom: 25px; } } .swiper-slide-controls { display: inline-block; width: 50px; height: 50px; line-height: 50px; -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; font-size: 16px; color: #111; background: #fff; cursor: pointer; } .swiper-slide-controls.slide-prev, .swiper-slide-controls.slide-next { position: relative; width: 50px!important; left: 0; right: 0; margin-left: auto; margin-right: 6px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .swiper-slide-controls:hover { -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; background: #fff; } @media only screen and (max-width: 768px) { .swiper-slide-controls.slide-next { margin-top: 10px; } } .swiper-slide-pagination { position: absolute; width: 8px; left: 58px; bottom: 59px; z-index: 10; } @media only screen and (max-width: 995px) { .swiper-slide-pagination { left: 100px; bottom: 94px; } } @media only screen and (max-width: 768px) { .swiper-slide-pagination { left: 60px; bottom: 54px; } } .swiper-slide-pagination::before { content: ""; position: absolute; top: -50px; left: 0; right: 0; bottom: -50px; background: none; } .swiper-slide-pagination .swiper-pagination-bullet { position: relative; width: 100%; height: 6px; background: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .swiper-slide-pagination .swiper-pagination-bullet:last-child { margin-bottom: 0; } .swiper-slide-pagination .swiper-pagination-bullet::before, .swiper-slide-pagination .swiper-pagination-bullet::after { content: ""; position: absolute; width: 6px; height: 6px; top: 0; left: 50%; background: #fff; margin: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .swiper-slide-pagination .swiper-pagination-bullet::after { content: ""; position: absolute; width: 8px; height: 8px; top: 50%; left: 50%; margin: -4px 0 0 -1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -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; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .swiper-slide-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { -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; -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); background: #fff; } .slider-progress-bar { position: absolute; top: 0; left: 0; z-index: -1; } .circle-svg { position: relative; -webkit-transform: scale(1) rotate(-90deg); -moz-transform: scale(1) rotate(-90deg); -ms-transform: scale(1) rotate(-90deg); -o-transform: scale(1) rotate(-90deg); transform: scale(1) rotate(-90deg); -webkit-transition: transform .4s ease; -moz-transition: transform .4s ease; -ms-transition: transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease; -webkit-transition: -webkit-transform .4s ease; -moz-transition: -moz-transform .4s ease; -ms-transition: -ms-transform .4s ease; -o-transition: -o-transform .4s ease; transition: transform .4s ease; } .circle-svg circle, .circle { fill: none; stroke: #fff; stroke-dasharray: 3; stroke-width: 1px; } .slider-progress-bar.slider-active .circle { stroke-dashoffset: 200px; -webkit-transition: linear 4s stroke-dashoffset; transition: linear 4s stroke-dashoffset; } .swiper-slide-controls-play-pause { position: absolute; width: 50px; height: 50px; line-height: 50px; right: 175px; bottom: 55px; -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; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; font-size: 16px; color: #fff; background: none; cursor: pointer; z-index: 10; } @media only screen and (max-width: 768px) { .swiper-slide-controls-play-pause { right: 145px; bottom: 25px; } } .swiper-slide-controls-play-pause:hover { -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; background: none; } .swiper-slide-controls-play-pause i, .swiper-slide-controls-play-pause i { -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; } .swiper-slide-controls-play-pause.slider-on-off i::before, .slider-on-off-switch { content: "\f478"; position: relative; width: 50px!important; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; } /* Swiper style 2 */ .swiper-container-wrapper { padding-top: 0!important; height: 100%!important; } .swiper-slide { overflow: hidden; } .swiper-slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #111; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-slide-inner-bg { position: absolute; width: 100%; height: 100%; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s; -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s; -ms-transition: opacity .6s ease-in-out, transform 2s ease .7s; -o-transition: opacity .6s ease-in-out, transform 2s ease .7s; transition: opacity .6s ease-in-out, transform 2s ease .7s; -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); opacity: 0.2; -moz-opacity: 0.2; -webkit-opacity: 0.2; filter: alpha(opacity=20); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; } .swiper-slide-duplicate-active .swiper-slide-inner-bg, .swiper-slide-active .swiper-slide-inner-bg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .swiper-slide-inner-bg-2 { position: absolute; width: 100%; height: 100%; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .swiper-slide-duplicate-active .swiper-slide-inner-bg-2, .swiper-slide-active .swiper-slide-inner-bg-2 { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .swiper-slide-inner-txt { position: absolute; width: 100%; height: auto; left: 54px; bottom: 47px; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 15; } @media only screen and (max-width: 880px) { .swiper-slide-inner-txt { display: none; visibility: hidden; } } .swiper-slide-active .swiper-slide-inner-txt { -webkit-transition: opacity 1.8s ease 1.2s; -moz-transition: opacity 1.8s ease 1.2s; -ms-transition: opacity 1.8s ease 1.2s; -o-transition: opacity 1.8s ease 1.2s; transition: opacity 1.8s ease 1.2s; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* extras */ .swiper-slide-pagination { position: absolute; width: 8px; top: 50%; right: 62px; left: auto; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 100; } @media only screen and (max-width: 880px) { .swiper-slide-pagination { display: none; visibility: hidden; right: 32px; } } @media only screen and (max-width: 995px) { .hero-slider-bg-controls-wrapper { display: none; visibility: hidden; position: absolute; width: 100%; right: 0; bottom: 0; z-index: 100; } } @media only screen and (max-width: 880px) { .hero-slider-bg-controls-wrapper { display: block; visibility: visible; } } .swiper-top { display: none; visibility: hidden; } @media only screen and (max-width: 880px) { .swiper-top { display: block; visibility: visible; } } .swiper-bottom { display: block; visibility: visible; } @media only screen and (max-width: 880px) { .swiper-bottom { display: none; visibility: hidden; } } /* page loaded */ .swiper-slide-inner-txt p, .swiper-slide-inner-txt h2, .hero-slider-bg-controls, .swiper-slide-pagination, .swiper-slide-controls-play-pause-wrapper { -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: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .page-loaded .swiper-slide-inner-txt p, .page-loaded .swiper-slide-inner-txt h2, .page-loaded .hero-slider-bg-controls, .page-loaded .swiper-slide-pagination, .page-loaded .swiper-slide-controls-play-pause-wrapper { 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: 880px) { .swiper-slide-inner-txt p, .swiper-slide-inner-txt h2, .hero-slider-bg-controls, .swiper-slide-pagination, .swiper-slide-controls-play-pause-wrapper { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } /* hero container */ .hero-fullscreen { position: absolute; display: block; width: 50vw!important; height: 100vh!important; top: 0; left: 0; bottom: 0; right: 0; background: #111; z-index: 0; } @media only screen and (max-width: 880px) { .hero-fullscreen { width: 100vw!important; height: 100%!important; } } .hero-bg { position: relative; width: 100%; 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; } .hero-fullscreen-FIX { width: 100%; height: 100%; } /* copyright home hidden */ .copyright-home.copyright-home-hidden { display: none; visibility: hidden; } @media only screen and (max-width: 880px) { .copyright-home.copyright-home-hidden { display: block; visibility: visible; } } /* 46. home multiple images */ .home-img-top-left { position: absolute; width: 33.33%; height: 50%; left: 0; top: 0; 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; } .home-img-top-center { position: absolute; width: 33.33%; height: 50%; left: 33.33%; top: 0; 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; } .home-img-top-right { position: absolute; width: 33.33%; height: 50%; left: 66.66%; top: 0; 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; } .home-img-bottom-left { position: absolute; width: 33.33%; height: 50%; left: 0; bottom: 0; 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; } .home-img-bottom-center { position: absolute; width: 33.33%; height: 50%; left: 33.33%; bottom: 0; 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; } .home-img-bottom-right { position: absolute; width: 33.33%; height: 50%; left: 66.66%; bottom: 0; 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; } /* 47. divider */ .divider-s, .divider-m, .divider-m-2, .divider-l, .divider-l-2, .divider-xl { position: relative; width: 100%; margin: 0 auto; background: none; z-index: -1; } .divider-s { height: 25px; } .divider-m { height: 50px; } .divider-m-2 { height: 50px; } @media only screen and (max-width: 768px) { .divider-m-2 { height: 25px; } } .divider-l { height: 100px; } .divider-l-2 { height: 50px; } @media only screen and (max-width: 768px) { .divider-l-2 { height: 100px; } } .divider-xl { height: 200px; } @media only screen and (max-width: 768px) { .divider-xl { height: 100px; } } .visible-mobile-devices, .visible-mobile-devices-xs { display: none; visibility: hidden; } @media only screen and (max-width: 995px) { .visible-mobile-devices { display: block; visibility: visible; } } @media only screen and (max-width: 880px) { .visible-mobile-devices-xs { display: block; visibility: visible; } } .team-item-divider { position: relative; display: block; width: 100%; height: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; padding: 0; overflow: hidden; z-index: 2; }