html, body { height: 100vh; width: 100vw; overflow-y: scroll; overflow-x: hidden; visibility: visible; } .breadcrumb h1 { font-size: 16px; margin: 0; } input { cursor: default; } nav.cl-effect-10 a { position: relative; display: inline-block; margin: 15px 0px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); font-size: 25px; } .container>section { margin: 0 auto; padding: 5em 3em; text-align: center; } .color-10 { background: #1B1B1B; } .cl-effect-10 { position: relative; z-index: 1; } .cl-effect-10 a { overflow: hidden; margin: 0 15px; } .cl-effect-10 a span { display: block; padding: 15px 30px 10px 30px; background: #1B1B1B; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .cl-effect-10 a::before { position: absolute; top: 0; left: 0; z-index: -1; padding: 16px 30px; width: 100%; height: 100%; background: #fff; color: #1B1B1B; content: attr(data-hover); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transform: translateX(-25%); } .cl-effect-10 a:hover span, .cl-effect-10 a:focus span { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .cl-effect-10 a:hover::before, .cl-effect-10 a:focus::before { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } /*global*/ @font-face { font-family: 'metric-regular'; src: url('../fonts/Metric-Regular.eot'); src: url('../fonts/Metric-Regular.eot#iefix') format('embedded-opentype'), url('../fonts/Metric-Regular.woff2') format('woff2'), url('../fonts/Metric-Regular.woff') format('woff'), url('../fonts/Metric-Regular.ttf') format('truetype'), url('../fonts/Metric-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'metric-bold'; src: url('../fonts/Metric-Bold.eot') format('embedded-opentype'), url('../fonts/Metric-Bold.woff') format('woff'), url('../fonts/Metric-Medium.ttf') format('truetype'), url('../fonts/Metric-Bold.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'metric-medium'; src: url('../fonts/Metric-Medium.eot') format('embedded-opentype'), url('../fonts/Metric-Medium.woff') format('woff'), url('../fonts/Metric-Medium.ttf') format('truetype'), url('../fonts/Metric-Medium.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'metric-light'; src: url('../fonts/metric-light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'metric-semibold'; src: url('../fonts/metric-semibold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } .metric-regular { font-family: 'metric-regular', sans-serif; } .metric-bold { font-family: 'metric-bold', sans-serif; } .metric-medium { font-family: 'metric-medium', sans-serif; } .metric-light { font-family: 'metric-light', sans-serif; } .metric-semi { font-family: 'metric-semibold', sans-serif; } .fs-25 { font-size: 25px; line-height: 25px; } .fs-12 { font-size: 12px; } .tcon { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; -webkit-transition: 0.3s; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 40px; background: transparent; outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } .tcon>* { display: block; } .tcon:hover, .tcon:focus { outline: none; } .tcon::-moz-focus-inner { border: 0; } .tcon-menu__lines { display: inline-block; height: 4px; width: 40px; border-radius: 0; -webkit-transition: 0.3s; transition: 0.3s; background: black; position: relative; } .tcon-menu__lines::before, .tcon-menu__lines::after { display: inline-block; height: 4px; width: 40px; border-radius: 0; -webkit-transition: 0.3s; transition: 0.3s; background: black; content: ''; position: absolute; left: 0; -webkit-transform-origin: 2.85714px center; transform-origin: 2.85714px center; width: 100%; } .tcon-menu__lines::before { top: 10px; } .tcon-menu__lines::after { top: -10px; } .tcon-transform .tcon-menu__lines { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } .tcon-menu--xcross { width: auto; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines { background: transparent; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: 40px; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .tcon-visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* ---------------------------------------------- * Generated by Animista on 2019-6-5 4:16:39 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation heartbeat * ---------------------------------------- */ @-webkit-keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /* ---------------------------------------------- * Generated by Animista on 2019-6-5 18:33:2 * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation bounce-in-top * ---------------------------------------- */ @-webkit-keyframes bounce-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-38px); transform: translateY(-38px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-38px); transform: translateY(-38px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation Scroll Down * ---------------------------------------- */ @-webkit-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-moz-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-o-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } .bouncing-container { height: 50px; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 30px; cursor: pointer; z-index: 999999; } .bouncing-line { -webkit-animation: fadeInDown 1.1s infinite both; animation: fadeInDown 1.1s infinite both; animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite; height: 50px; width: 1px; background: #5B5C5E; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); } .bouncing-line.bright { background: white; } /** * ---------------------------------------- * Tambahan FrontEnd * ---------------------------------------- */ .fancybox-toolbar>button:nth-child(2) { display: none; } .fancybox-toolbar>button:nth-child(3) { display: none; } a.next i { font-size: 32px; color: #5B5C5E; padding-top: 5px; } a.next i:hover { font-size: 32px; opacity: 0.5; } a.prev i { font-size: 32px; color: #5B5C5E; padding-top: 5px; } a.prev i:hover { font-size: 32px; opacity: 0.5; } a.prev i, a.next i.ready { font-size: 32px; color: white; cursor: pointer; } a.next, a.prev { margin: 0px 5px; } .text-cont .text h1 { font-family: 'metric-medium', sans-serif; font-size: 40px; margin: 5px 0; text-transform: uppercase; } .text-cont .text h4 { font-size: 16px; margin: 0 auto 50px; text-transform: uppercase; } .text-cont .text p { font-size: 18px; width: 85%; line-height: 25px; } .detail h1 { margin: 0px auto 60px; color: #5B5C5E; } .detail .content ul { line-height: 45px; font-size: 16px; padding-left: 15px; list-style-type: square; } .detail .content ul li { padding-left: 10px; } .detail .job-desc { padding-right: 100px; } #career-detail #section1 .detail .info .block .title { font-size: 14px; font-weight: bold; margin-bottom: 12px; font-family: 'metric-regular', sans-serif; color: #5B5C5E; } #career-detail #section1 .detail .info .block .content { font-size: 16px; text-transform: uppercase; } #hovTes .service-block, #hovTes a, .read-pub a, .service-list:hover a { transition: all 0.5s; } #hovTes:hover .service-block, #hovTes:hover a, .read-pub:hover a, .service-list:hover a { opacity: 0.45; transition: opacity 0.3s ease-in-out; } #hovTes:hover div .service-block, #hovTes:hover div a, .read-pub:hover p a, .service-list:hover p a { transition: all 0.5s; } #hovTes:hover div:hover .service-block, #hovTes:hover div:hover a, .read-pub:hover p:hover a, .service-list:hover p:hover a { opacity: 0.65; transition: opacity 0.3s ease-in-out; } #hovTes:hover div .service-block, #hovTes:hover div a, .read-pub:hover p a, .service-list:hover p a { transition: all 0.5s; } #hovTes:hover div:hover .service-block:hover, #hovTes:hover div:hover a:hover, .read-pub:hover p:hover a:hover, .service-list:hover p:hover a:hover { opacity: 1; transition: opacity 0.3s ease-in-out; } .menu-top a, .menu-bottom a { transition: all 0.5s; } .menu-top:hover a, .menu-bottom:hover a { opacity: 0.3; transition: opacity .5s ease-in-out; } .menu-top li a, .menu-bottom li a { transition: all 0.5s; } .menu-top:hover li:hover a, .menu-bottom:hover li:hover a { opacity: 1; transition: opacity .5s ease-in-out; } .menu-top li a, .menu-bottom li a { transition: all 0.5s; } .menu-top:hover li:hover a:hover, .menu-bottom:hover li:hover a:hover { opacity: 1; transition: opacity .5s ease-in-out; } .link a { transition: all 0.5s; } .link:hover a { opacity: 0.3; transition: opacity .5s ease-in-out; } .link a:hover { opacity: 1; transition: opacity .5s ease-in-out; } .link p a { transition: all 0.5s; } .link:hover p:hover a { opacity: 1; transition: opacity .5s ease-in-out; } .link:hover p:hover a:hover { opacity: 1; transition: opacity .5s ease-in-out; } /* .container.art:hover .row, */ /* .job:hover .vacancy, */ .service-area:hover .service-block { opacity: 0.25; transition: opacity .5s ease-in-out; } /* .container.art:hover .article-block:hover .row, */ /* .job:hover div:hover .vacancy, */ .service-area:hover div:hover .service-block { opacity: 0.5; transition: opacity .5s ease-in-out; } /* .container.art:hover .article-block:hover .row:hover, */ /* .job:hover div:hover .vacancy:hover, */ .service-area:hover div:hover .service-block:hover { opacity: 1; transition: opacity .5s ease-in-out; } #career #section2 .job:hover .vacancy { opacity: 0.25; transition: opacity .5s ease-in-out; } #career #section2 .vacancy:hover { opacity: 1 !important; transition: opacity .5s ease-in-out; } #publications #section2 .art:hover .article-block { opacity: 0.25; transition: opacity .5s ease-in-out; } #publications #section2 .article-block:hover { opacity: 1 !important; transition: opacity .5s ease-in-out; } .left:hover p { opacity: 1; transition: opacity .5s ease-in-out; } .left p:hover a { opacity: 0.5; transition: opacity .5s ease-in-out; } .left p:hover a:hover { opacity: 1; transition: opacity .5s ease-in-out; } .menu-area .menu-bottom ul { display: inline-flex; right: 20px; } .menu-area .menu-bottom li { padding: 0; } .service-list:hover a { opacity: 0.3; } .service-list:hover li:hover a { opacity: 0.5; } .service-list:hover li:hover a:hover { opacity: 1; } .publish-area p { font-size: 18px; line-height: 30px; margin-bottom: 35px; } .team-block .text p b { font-family: 'metric-bold', sans-serif; font-size: 18px; } .content.top p { line-height: 30px; color: #5B5C5E; /* color: #FFF; */ } /* #connect a.prev i,a.next i.ready{ font-size: 32px; color:#5B5C5E; } */ #connect #section1 .connect-area h1 { margin: 20px auto 40px; } #connect #section1 .connect-area .right p { font-family: 'metric-light'; letter-spacing: 2px; font-size: 14px; margin-bottom: 35px; } #connect #section1 .connect-area .right b { font-family: 'metric-medium', sans-serif; font-size: 14px; letter-spacing: 1px; } #connect #section1 .connect-area .left p { margin-bottom: 30px; } #clients #section3 .case-area .acc-body .block-area li { list-style: none; } #clients #section3 .case-area .acc-body .left .block-area p b { font-family: 'metric-semibold', sans-serif; font-size: 16px; font-weight: bold; } #clients #section3 .case-area .acc-body .left .block-area p { line-height: 30px; } .playhub-area p { width: 60%; margin: 0 auto; font-size: 14px; line-height: 30px; } /* #service-detail .service-detail video#eventPromo, #service-detail .service-detail video#live-event { top: 3px; height: calc(100% - 35px); } */ #service-detail .service-detail video#eventPromo, #service-detail .service-detail video#live-event { height: auto; max-width: 160px; } @media (max-width: 600px) { #service-detail .service-detail video#eventPromo, #service-detail .service-detail video#live-event { height: auto; max-width: 145px; } } .grecaptcha-badge { display: none !important; } html, body { font-family: "metric-regular"; } #page-content { position: relative; width: 100vw; height: 100vh; visibility: visible; } .pageable { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .beating-line { height: 80px; width: 25px; -webkit-animation: fadeInLeft 1s infinite both; animation: fadeInLeft 1s infinite both; position: absolute; bottom: 30px; right: 40px; cursor: pointer; } .beating-line::before { position: absolute; left: 0; top: 35px; background: white; width: 60px; height: 1px; content: "" } .beating-line.left { right: none; left: 10px; /* animation-delay: 2s; */ -webkit-animation: fadeInRight 1s infinite both; animation: fadeInRight 1s infinite both; } .beating-line.color-dark::before { background: #5B5C5E; } .scroll-horizontal { transform: rotate(270deg); position: absolute; padding-top: 79px; width: 50px; bottom: 15vh; right: 15px; cursor: pointer; } .scroll-horizontal::before { -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; position: absolute; bottom: 5px; left: 50%; width: 1px; height: 60px; background: #5B5C5E; content: ' '; } .scroll-horizontal.color-white::before { background: white; } .scroll-horizontal.color-white.left { transform: rotate(90deg); left: 15px; } #about #section2 .team-block img.invisible { width: 50%; } #section2 .col-lg-3 { /*padding: 50px;*/ } #about #section2 .team-block img { width: 100%; } .menu-action-area { /* position: fixed; */ position: absolute; background: transparent; height: 75px; width: 100%; box-shadow: none; z-index: 14; top: 0; /* transition: background 1.5s; */ transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out, padding 0.5s ease-in-out; } .menu-action-area.color-dark.bg-light { background-color: #fff !important; } .menu-action-area.top-fixed { position: fixed; } .menu-action-area.hidden { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .menu-action-area.solid-dark { top: 0; position: fixed; background: #1B1B1B; height: 75px; width: 100%; box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.15); /* transition: background 2s; */ transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out, padding 0.5s ease-in-out; } .menu-action { text-align: right; top: 15px; right: 15px; position: absolute; z-index: 14; font-size: 20px; color: white; } .menu-action>span { margin-left: 15px; font-size: 14px; } .menu-action-area.color-dark .menu-action { color: #5B5C5E; } .menu-action-area.color-dark.solid-dark .menu-action { color: #FFF; } .menu-action>.tcon { display: inline-block; transform: scale(0.8); vertical-align: middle; } .menu-action>.tcon .tcon-menu__lines, .menu-action .tcon-menu__lines::before, .menu-action .tcon-menu__lines::after { background: white; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines { background: transparent !important; } .menu-action-area.color-dark .menu-action>.tcon .tcon-menu__lines, .menu-action-area.color-dark .menu-action .tcon-menu__lines::before, .menu-action-area.color-dark .menu-action .tcon-menu__lines::after { background: #5B5C5E; } .menu-action-area.color-dark.solid-dark .menu-action>.tcon .tcon-menu__lines, .menu-action-area.color-dark.solid-dark .menu-action .tcon-menu__lines::before, .menu-action-area.color-dark.solid-dark .menu-action .tcon-menu__lines::after { background: #FFF; } .menu-area { position: fixed; top: 0; left: 0; display: block; /* visibility: hidden; */ width: 100vw; height: 100vh; background: #39393A; color: white; z-index: -1; opacity: 0; transition: all .95s; } .menu-area.active { left: 0; opacity: 1; z-index: 13; } .menu-action-area .mdi-icon-white { height: 24px; position: absolute; top: 24px; left: 40px; z-index: 14; } .menu-action-area .mdi-icon-grey { height: 24px; position: absolute; top: 24px; left: 40px; } .menu-action-area.color-dark .mdi-icon-white { display: none; } .menu-action-area.color-dark .mdi-icon-grey { display: block; } .menu-action-area.color-dark.solid-dark .mdi-icon-white { display: block; } .menu-action-area.color-dark.solid-dark .mdi-icon-grey { display: none; } #homepage .menu-action-area.color-dark .mdi-icon-grey { display: none; } .menu-area ul { padding: 0; list-style-type: none; position: absolute; top: 35%; right: 32px; transform: translateY(-50%); text-align: right; } .menu-area ul li { padding: 0; } .menu-area ul li a { display: block; font-size: 25pt; padding: 25px 0; } .menu-area ul li a:visited { color: #FFF; text-decoration: none; } .menu-area .menu-bottom { font-size: 20px; position: absolute; bottom: 60px; right: 32px; text-align: right; } .menu-area .menu-bottom a { margin: 0 25px; font-size: 14pt; } .pageable.ready { transition: transform 0.5s; } .video-bg { position: absolute; top: 0; left: 50%; /*min-width: 100vw; min-height: 100vh; width: auto;*/ height: 100%; z-index: -1000; width: auto; overflow: hidden; transform: translateX(-50%); } .breadcrumb { background-color: transparent; font-family: 'metric-semibold', sans-serif; } .breadcrumb>li+li:before { content: "\003e"; position: absolute; left: -17px; bottom: -1px; color: white; } #dark>li+li:before { content: "\003e"; position: absolute; left: -17px; bottom: -1px; color: #5B5C5E; } .breadcrumb>li { margin-left: 15px; position: relative; } .breadcrumb>li:first-child { margin-left: 0; } .breadcrumb.bright { color: white; } .breadcrumb::after { position: absolute; bottom: 0; left: 15px; width: calc(100% - 30px); height: 1px; background: #5B5C5E; /* background: #FFF; */ content: " "; } .breadcrumb.bright::after { background: white; height: 1px; } .video-bg.bottom { top: auto; bottom: 0; /* position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); */ } .frm-submit { cursor: pointer; /*position: absolute; top: 20vh; right: 12%;*/ font-size: 24px; } .btn-play { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; height: 50px; } .footer { background: #1B1B1B; color: white; padding: 27px 0px 0px; } .footer .title { font-size: 25px; color: white; width: 100%; max-width: 300px; margin: auto; display: block; text-align: center; } .footer .title .normal { padding: 20px 30px; display: none; } .footer .title .hover { display: inline-block; padding: 15px; line-height: 15px; background: white; color: #1B1B1B; } .footer .link, .footer .copy { width: 100%; padding: 15px; margin-left: auto; margin-right: auto; display: block; text-align: center; } .footer .link a { display: inline-block; margin: 0px 7px; } @supports (-webkit-overflow-scrolling: touch) { .menu-area .menu-bottom { bottom: 20vh; } .footer { padding: 27px 0px 12vh 0px; } .pageable { padding: 6vh 0; } .menu-area ul { top: 45%; } } /*homepage */ #homepage {} #homepage .img-logo {} #homepage #section2 { background: url("./../img/home-service-d.png") no-repeat center center; background-size: cover; } #homepage #section2 .service-area { width: 100%; max-width: 80vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #homepage #section2 .service-block { color: white; /* opacity:1; */ } #homepage #section2 .service-block:hover { opacity: 0.5; transition: opacity .6s; } #homepage #section2 .service-block:hover h1:hover div.service-list:hover { opacity: 1; transition: opacity .6s; } #homepage #section2 .service-block.active { opacity: 1; } #homepage #section2 .service-block h1 { margin-top: 0; text-align: center; } #homepage #section2 .service-block .service-list { overflow: hidden; transition: all .5s ease-in-out; line-height: 0; padding: 0 1em; color: transparent; text-align: center; } #homepage #section2 .service-block.active .service-list { line-height: 1.5; padding-top: 1em; padding-bottom: 5em; color: inherit; } #homepage #section2 .service-block .service-list p { margin: 0; } #homepage #section2 .service-block.active .service-list p { margin-bottom: 10px; } #homepage #section2 .service-block .service-list p.last { margin-top: 30px; } #homepage #section3 { background: url("./../img/home-client-d.png") no-repeat center center; background-size: cover; } #homepage #section3 .client-area { margin-top: 13vh; text-align: center; color: white; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; } #homepage #section3 .client-area h1 { margin-bottom: 15px; } #homepage #section3 .client-area .client-block { width: 72px; margin: 10px 20px; display: inline-block; position: relative; } #homepage #section3 .client-area .client-block .normal { position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; } #homepage #section3 .client-area .client-block .greyed { transition: all 0.5s; } #homepage #section3 .client-area .client-block:hover .normal { opacity: 1; } #homepage #section3 .client-area .client-block:hover .greyed { opacity: 0; } #homepage #section3 .client-area .bottom { margin-top: 50px; } #homepage #section3 .bottom a { opacity: 0.7; cursor: pointer; } #homepage #section3 .bottom a:hover { opacity: 1; } #homepage #section4 { background: url("./../img/home-play.png") no-repeat center center; background-size: cover; } #homepage #section4 .contact-area { width: 80vw; max-width: 800px; margin: 150px auto 0; text-align: center; color: white; } #homepage #section4 .contact-area h1 { margin-top: 76px; } #homepage #section4 .contact-area .subtitle { margin-top: 10px; } #homepage #section4 .form-area { width: 100%; padding-top: 60px; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto; } #homepage #section4 .form-area .owl-item>div { min-height: 50vh; position: relative; padding-top: 30px; } #homepage #section4 .form-area .form-block { width: 100%; transition: transform 0.5s; } #homepage #section4 .form-area input { width: 80%; text-align: center; font-size: 20px; background: transparent; border: none; border-bottom: 1px solid white; display: inline-block; padding: 10px; } #homepage #section4 .form-area textarea { vertical-align: middle; width: 80%; background: transparent; text-align: center; padding: 15px; } #homepage #section4 .form-area .form-block:last-child {} #homepage #section4 .form-area .form-block .submit-area { margin: auto; display: block; width: 80%; text-align: right; margin-top: 15px; } #homepage #section4 .form-area .form-block .submit-area .left { transform: scale(0.77); transform-origin: top left; display: inline-block; margin-right: 0; vertical-align: middle; } #homepage #section4 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: -5%; margin-top: 15px; } #connect #section2 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: -5%; margin-top: 15px; } #homepage #section4 .form-area .form-bullet span { width: 12px; height: 12px; display: inline-block; border-radius: 6px; background: #BABABA; margin: 0px 5px; vertical-align: middle; } #homepage #section4 .form-area .form-bullet span.active { width: 16px; height: 16px; display: inline-block; border-radius: 8px; background: white; } #homepage #section4 .form-area .form-bullet { margin-top: 12px } #homepage #section4 .form-area .owl-dots { text-align: center; position: absolute; bottom: 40%; width: 100%; } #homepage #section4 .form-area .owl-dot { width: 10px; height: 10px; display: inline-block; background: white; opacity: 0.25; border: 1px solid #5B5C5E; border-radius: 5px; margin: 0px 5px; border: 0; } #homepage #section4 .form-area .owl-dot.active { background: white; opacity: 1; width: 10px; height: 10px; border-radius: 10px; border: 0; } #homepage #section4 .thankyou-area { display: none; position: absolute; margin-top: 60px; top: 30%; left: 30%; text-align: center; } #homepage #section4 .thankyou-area p { font-size: 16px; margin-bottom: 50px; color: #fff; } #homepage #section4 .thankyou-area p:first-child { font-size: 24px; color: #fff; margin-bottom: 20px; } #homepage #section4 .thankyou-area p a { font-size: 14px; } #homepage #section5 { background: url("./../img/home-playhub.png") no-repeat center center; background-size: cover; } #homepage #section5 .playhub-area { margin-left: auto; margin-right: auto; width: 80%; max-width: 600px; text-align: center; margin-top: 60px; color: white; } #homepage #section5 .playhub-area h1 { margin-bottom: 20px; } #homepage #section5 #hovTes { width: 65%; margin: 8% auto 0; } #homepage #section5 .playhub-area .link-block { margin-top: 20px; padding: 0; } #homepage #section5 .playhub-area .link { color: white; cursor: pointer; font-size: 12px; } #homepage #section5 .playhub-area .link:hover { opacity: 1 } #homepage #section5 .playhub-area .link img { height: 9px; vertical-align: baseline; margin-left: 10px; } #homepage #section6 .footer { position: absolute; width: 100%; bottom: 0; } #homepage #section6 { background: url("./../img/home-publish-bg.png") no-repeat top center; background-size: cover; } #homepage #section6 .publish-area { margin: 120px auto 35px; color: white; text-align: center; padding: 15px; max-width: 500px; } /*about page*/ #about #section1, #about #section1 .about-mdi-block { width: 100vw; height: 100vh; overflow: hidden; position: relative; } #about #section1 .about-mdi-block .content { position: absolute; width: 100%; max-width: 800px; text-align: center; top: 45%; left: 50%; transform: translate(-50%, -50%); padding: 15px; } #about #section1 .about-mdi-block .content img { position: relative; display: block; width: 30%; left: 0; margin: 0 auto 12%; right: 0; } /* #about #section1 .about-mdi-block .content > *{ margin-bottom:30px; } */ #about { overflow-y: scroll; } #about * {} #about .breadcrumb { position: absolute; top: 30px; font-family: 'metric-semibold', sans-serif; font-weight: 600; font-size: 14px; padding: 8px 15px 20px; font-weight: bold; font-size: 16px; } #about .breadcrumb.bright { padding: 8px 15px 25px; } #about #section1 .breadcrumb { top: 100px; } #about #section2 { background: #1B1B1B; position: relative; } #about #section2 .team-block { margin: 15px 0px; position: relative; overflow: hidden; cursor: pointer; } #about #section2 .team-block .overlay { position: absolute; background: #1B1B1B; opacity: 0.75; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s; } #about #section2 .team-block .text { position: absolute; bottom: -300px; width: 100%; color: white; transition: all 0.5s; padding: 15px; text-align: right; text-transform: uppercase; font-size: 16px; } #about #section2 .team-block .text p { margin: 0; } #about #section2 .team-block:hover .text { bottom: 0px; transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s; } #about #section2 .team-block:hover .overlay { background: transparent; opacity: 1; transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s; } #about #section3, #about #section3 .about-life { background: #1B1B1B; width: 100vw; height: 100vh; overflow: hidden; position: relative; } #about #section3 .about-life video { width: auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; } #about #section3 .about-life .content { position: absolute; top: 70%; left: 50%; /* color: #5B5C5E; */ color: #FFF !important; width: 100%; max-width: 1200px; transform: translateX(-50%); padding: 0px 15px; } #about #section3 .about-life .beating-line::before { background: #5B5C5E; } #about .team-detail { position: fixed; top: 0; left: 100%; width: 100vw; height: 100vh; z-index: 0; transition: left 0.5s; background: #1B1B1B; overflow-y: auto; overflow-x: hidden; } #about .team-detail.active { left: 0; z-index: 5; } #about .team-detail .block {} #about .team-detail .block video { width: 100%; } #about .team-detail .block .text { color: white; width: 100%; padding: 15px 50px; } #about .team-detail .block .text h4 { font-size: 16px; } #about .team-detail .block.text-cont { overflow: auto; } #about .team-detail .close-btn { position: absolute; right: 15px; top: 15px; font-size: 30px; color: white; z-index: 6; } @media only screen and (max-width:600px) { #homepage #section4 .form-area .owl-dots { text-align: center; position: absolute; bottom: 15%; width: 100%; } #homepage #section4 .form-area { width: 100%; padding-top: 5px; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto; } #homepage #section3 .client-area .client-block { width: 60px; margin: 10px 20px; display: inline-block; position: relative; } #homepage #section3 .client-area .bottom { margin-top: 20px; } #homepage #section4 .form-area .form-block .submit-area { margin: auto; display: block; width: 80%; text-align: center; margin-top: 15px; } #homepage #section4 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: 0px; margin-top: 0px; } #homepage #section5 .playhub-area { margin-top: 130px; } #homepage #section6 .publish-area { margin: 100px auto 35px; } #connect #section2 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: 0px; margin-top: 0px; } #publications .breadcrumb { margin-left: 25px; top: 80px !important; } #clients .breadcrumb { margin-left: 25px; top: 80px !important; } #clients #section3 .case-area .acc-head { font-size: 12pt; cursor: pointer; padding-left: 30px; padding-right: 25px; padding-bottom: 5px; } #clients #section3 .case-area h1 { font-size: 12pt; margin-left: 40px; } #about #section1 .breadcrumb { margin-left: 25px; top: 80px; } #services #section1 .breadcrumb { margin-left: 25px; top: 80px; } #services .breadcrumb { margin-left: 25px; } #connect #section1 .breadcrumb { margin-left: 25px; top: 80px; } #connect #section1 .connect-area { top: 60px; } #career #section1 .breadcrumb { margin-left: 25px; top: 80px; } #connect #section1 .connect-area { top: 60%; left: 56%; } #connect #section1 .connect-area h1 { margin: 20px auto 20px; } #connect #section1 .content-block { margin-bottom: 45px !important; } #connect #section1 .connect-area .right p { margin-bottom: 20px; } .menu-area .menu-bottom ul { display: inline-flex; right: -20px; } #about #section1 .about-mdi-block .content { padding: 35px; } #about #section1 .about-mdi-block .content img { width: 50%; } #about #section3 .about-life .content { top: 55%; } } @media(min-width:600px) { #homepage #section4 .form-area .owl-dots { text-align: center; position: absolute; bottom: 15%; width: 100%; } #homepage #section4 .form-area { width: 100%; padding-top: 5px; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto; } #homepage #section3 .client-area .client-block { width: 60px; margin: 10px 20px; display: inline-block; position: relative; } #homepage #section3 .client-area .bottom { margin-top: 20px; } #homepage #section5 .playhub-area { margin-top: 130px; } #homepage #section6 .publish-area { margin: 100px auto 35px; } #publications .breadcrumb { margin-left: 25px; top: 80px !important; } #clients .breadcrumb { margin-left: 25px; top: 80px !important; } #clients #section3 .case-area .acc-head { font-size: 12pt; cursor: pointer; padding-left: 30px; padding-right: 25px; } #clients #section3 .case-area h1 { font-size: 12pt; margin-left: 40px; } #about #section1 .breadcrumb { margin-left: 25px; top: 80px; } #services #section1 .breadcrumb { margin-left: 25px; top: 80px; } #services .breadcrumb { margin-left: 25px; } #connect #section1 .breadcrumb { margin-left: 25px; top: 80px; } #connect #section1 .connect-area { top: 60px; } #career #section1 .breadcrumb { margin-left: 25px; top: 80px; } #connect #section1 .connect-area { top: 63%; left: 56%; } } @media(min-width:768px) { #homepage #section4 .form-area .owl-dots { text-align: center; position: absolute; bottom: 15%; width: 100%; } #homepage #section4 .form-area { width: 100%; padding-top: 5px; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto; } #about .team-detail .block video { position: absolute; top: 0; right: 0; transform: none; height: 100%; width: auto; left: auto; } #about #section2 .team-block img.invisible { height: 90px; } #homepage #section4 .form-area .form-block .submit-area .right { margin-right: -2%; } #connect #section2 .form-area .form-block .submit-area .right { margin-right: -2%; } #publications .breadcrumb { top: 60px; margin-left: 23px; } } @media(min-width:1200px) { .video-bg { position: absolute; top: 50%; left: 50%; /*min-width: 100vw; min-height: 100vh; width: auto;*/ height: auto; z-index: -1000; width: 100%; overflow: hidden; transform: translate(-50%, -50%); } .footer .link, .footer .copy { display: inline-flex; } .menu-area ul { right: 72px; } .beating-line { bottom: 45%; } .footer { padding: 90px 0px 5px 0px; /* height:40vh; */ } #connect .footer .title { margin: 70px auto 115px; visibility: hidden; } .footer .title { margin: 70px auto 115px; } /* #connect .footer .title .normal { display: block; line-height: 25px; visibility: hidden; } */ .footer .title .normal { display: block; line-height: 30px; } .footer .title .hover { display: none; padding: 20px 30px; line-height: 25px; } .footer .title:hover .normal { display: none; } .footer .title:hover .hover { display: block; } .footer .link { float: right; text-align: right; width: 50vw; padding-left: 90px; margin-top: 60px; } .footer .link a { margin: 0px 20px; font-size: 15px; } .footer .copy { float: left; text-align: left; width: 50vw; font-size: 15px; opacity: 0.5; padding: 20px 45px 0; margin-top: 60px; } .scroll-horizontal { bottom: 50%; transform: translateY(-50%), rotate(270deg); } } @media(min-width:2560px) { #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { left: 50%; } #clients #section3 .case-area .acc-body video.mobile, #clients #section3 .case-area .acc-body img.mobile { left: 59%; top: 10px; } } @media(min-width:1440px) { #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { left: 58.5%; } #clients #section3 .case-area .acc-body video.mobile, #clients #section3 .case-area .acc-body img.mobile { left: 66.5%; top: 10px; } } @media(min-width:1200px) { #homepage .img-logo { max-width: 20vw; } #homepage #section2 .service-area { width: 100%; max-width: 70vw; position: absolute; top: 44%; left: 50%; transform: translateX(-50%); } #homepage #section2 .service-block:hover { opacity: 1; } #homepage #section2 .service-block .service-list .right { text-align: right; } #homepage #section2 .service-block .service-list .left { text-align: left; } #homepage #section2 .service-block .service-list { opacity: 0; display: block; line-height: 1.5; padding-top: 1em; padding-bottom: 1em; color: inherit; } #homepage #section2 .service-block .service-list p { margin-bottom: 10px; } #homepage #section2 .service-block:hover .service-list { opacity: 1; } #homepage #section3 .client-area { margin-top: 22vh; } #homepage #section3 .client-area .client-block { width: 100px; } #homepage #section4 .contact-area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } #homepage #section4 .form-area .owl-item>div {} #homepage #section4 .contact-area h1 { margin-top: 90px; } #homepage #section4 .contact-area .subtitle { margin-top: 0px; } #homepage #section4 .form-area {} #homepage #section4 .form-area .form-block:last-child {} #homepage #section4 .form-area .form-bullet { margin-top: -100px } #homepage #section5 .playhub-area { margin-top: 150px; font-size: 20px; } #homepage #section5 .playhub-area .link { /* opacity:0.5; */ font-size: 16px; } #homepage #section5 .playhub-area .link:hover { opacity: 1; } #homepage #section5 .playhub-area .link img { height: 12px; margin-left: 5px; vertical-align: baseline; } #homepage #section5 .playhub-area h1 { margin-bottom: 80px; } #homepage #section6 .publish-area h1 { margin-bottom: 25px; font-size: 24px; } #homepage #section6 .publish-area h1 { font-size: 32px; } #homepage #section6 .publish-area p:nth-child(3) { margin: 35px 0px; font-size: 16px; } #homepage #section6 .publish-area p a { font-size: 16px; opacity: 0.7; cursor: pointer; } #homepage #section6 .publish-area p a:hover { opacity: 1; } #homepage #section4 .form-area .form-block .submit-area .left { transform: scale(0.77); transform-origin: top right; display: inline-block; margin-right: 20px; vertical-align: middle; } #homepage #section4 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: -2%; margin-top: 15px; } #connect #section2 .form-area .form-block .submit-area .right { display: inline-block; vertical-align: middle; margin-right: -2%; margin-top: 15px; } } @media(min-width:1200px) { #about #section3 .about-life .content { color: white !important; } #about #section3 .about-life video { min-width: 100%; max-height: none; } #about #section3 .about-life .beating-line::before { background: white; } #about .breadcrumb { left: calc(50% - 600px); top: 60px; } #about #section3 .breadcrumb { z-index: 2; color: white; } #about .team-detail .left { float: left; } #about .team-detail .right { float: right; } #about .team-detail .block { height: 100vh; } #about .team-detail .block .text { position: absolute; max-width: 600px; right: 0; top: 50%; transform: translateY(-50%) } } /* services page */ /* #services #page-content > section{ width:100vw; height:100vh; overflow:hidden; position:relative; } */ #services * {} #services #section1 { background: url("../img/services.png") no-repeat center center; background-size: cover; width: 100vw; height: 100vh; } #services #section1 video { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 100%; } #services .breadcrumb { font-family: 'metric-medium', sans-serif; position: absolute; top: 30px; padding: 8px 15px 20px; font-weight: bold; font-size: 16px; } #services #section1 .breadcrumb { top: 100px; } #services .service-area { width: 100%; max-width: 80vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #services .service-block { color: white; /* opacity:0.5; */ } /* #services .service-block.active,#services .service-block:hover{ opacity:1; } */ #services .service-block h1 { margin-top: 0; text-align: center; } #services #section1 .service-block { padding: 30px 0px; } #services #section2 { background: #1B1B1B; width: 100vw; height: 100vh; position: relative; } #services #section2 .service-block { padding: 12px 0px; } #services #section2 .service-block .text { display: none; text-align: center; font-size: 18px; line-height: 35px; } #services #section2 .service-block:hover h1 { display: none; } #services #section2 .service-block:hover .text { display: block; animation: fadeIn 1.4s; color: #fff; } #services #section3 { background: #fff; position: relative; width: 100vw; min-height: 100vh; padding: 150px 0px; } #services #section3 .breadcrumb { color: #5B5C5E; } #services #section3 .block { padding: 15px 0px; text-align: center; color: #5B5C5E; } #services #section3 .block h1 { font-size: 30px; } #services #section3 .block .description { font-size: 16px; font-style: italic; margin: 25px auto; line-height: 30px; } #services #section3 .block .person { font-size: 16px; font-weight: bold; line-height: 25px; margin: 40px auto 0; } #services #section3 .block .position { font-size: 16px; } @media(min-width:1200px) { #services .breadcrumb { top: 60px; left: calc(50% - 600px); } #services #section2 .service-block { padding: 20px 0px; min-height: 20vh; } #services #section3 .left { float: left; } #services #section3 .right { float: right; } } #service-detail * {} /* service media placement & service influencer management*/ #service-detail #section1 { width: 100vw; height: 100vh; position: relative; background: transparent; overflow: hidden; } #service-detail #section1 video { min-width: 100%; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); min-height: 100%; z-index: -1; } #service-detail .breadcrumb { font-family: 'metric-semibold', sans-serif; position: absolute; top: 100px; font-weight: bold; font-size: 16px; } #service-detail #section1 .service-list { position: absolute; list-style-type: none; color: white; top: 180px; /* font-family: 'metric-bold', sans-serif; */ top: 150px; width: 100%; text-align: center; padding-left: 0; } #service-detail #section1 .service-list li { padding: 7px 0px; } #service-detail #section1 .service-list li a { display: block; cursor: pointer; } #service-detail .service-detail { position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; z-index: -1; opacity: 0; background: rgba(27, 27, 27, 1); transition: opacity 0.5s; } #service-detail .service-detail.active { z-index: 20; opacity: 1; } #service-detail .service-detail .close-btn { position: absolute; right: 15px; top: 15px; color: white; font-size: 25px; z-index: 9999; } #service-detail .service-detail .content { position: absolute; top: 2vh; left: 55%; width: 100%; max-width: 800px; padding: 15px 0px; max-height: 50vh; transform: translateX(-50%); text-align: center; } #service-detail .service-detail .play-video { position: relative; left: 49%; bottom: 225px; color: #fff; cursor: pointer; } #service-detail .service-detail video.desktop, #service-detail .service-detail img.desktop { width: 65vw; height: auto; margin: auto; display: block; position: absolute; top: calc(20vh + 20px); z-index: 1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; max-width: 520px } #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile { width: 100%; height: 100%; margin: auto; display: block; position: absolute; top: -5px; z-index: -1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; max-width: 152px; /* border-radius: 50px; */ } /* #service-detail .service-detail video.mobile.mob-ads { width: 22.5vh; height: 100%; top: 1px; } */ #service-detail .service-detail video.mobile.mob-ads { max-width: 160px; height: auto; } #service-detail .service-detail video.mobile.mob-ig-story { top: 3px; width: 60vh; max-width: 144px; } #service-detail .service-detail video.mobile.mob-im { width: 23vh; } #service-detail .service-detail img.frame { width: 80%; margin: auto; display: block; z-index: -1; max-height: 378px; margin-top: 20vh; } #service-detail .service-detail img.frame.frame-mob { width: auto; margin-top: 0; max-height: 50vh; } /* #service-detail .service-detail .content .multi img.frame.frame-mob { max-height: 35vh; } */ #service-detail .service-detail img.frame-m { height: 30vh; width: auto; margin: auto; display: block; } #service-detail .service-detail img.frame-d { height: 30vh; width: auto; margin: auto; display: block; } #service-detail .service-detail .content .multi { position: relative; display: inline-block; margin: 0px 15px; } #service-detail .service-detail .content .content-nav { list-style-type: none; padding: 0; margin-top: 0px; color: white; } #service-detail .service-detail .content .content-nav li { display: inline-block; margin: 7px 15px; opacity: 0.7; } #service-detail .service-detail .content .content-nav li:hover, #service-detail .service-detail .content .content-nav li.active { opacity: 1; } #service-detail .service-detail .content .content-nav li a { display: block; cursor: pointer; } #service-detail .service-detail .content .owl-dots { display: none; } #service-detail .service-detail .content .owl-item p { color: white; margin-top: 30px; } #service-detail .service-detail .desc { color: white; background: black; padding: 35px 0px 50px; position: absolute; bottom: 0; max-height: 80vh; overflow: auto; width: 100%; z-index: -1; } #service-detail .service-detail .desc .title { margin-bottom: 15px; } #service-detail .service-detail .desc .title>span { display: inline-block; position: relative; } #service-detail .service-detail .desc .title>span::after { position: absolute; width: 100%; height: 2px; background: white; /* margin-top: 15px; */ content: " "; left: 0; top: 100%; } @media(max-width:600px) { #service-detail .service-detail .content .multi { margin: 0px 2px; } /* #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile { border-radius: 50px; } */ #service-detail .service-detail .content { left: 50%; top: 6vh; } } @media(min-width:1200px) { #service-detail #section1 { width: 100vw; height: 100vh; position: relative; background: transparent; overflow: hidden; } #service-detail #section1 video { min-width: 100%; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); min-height: 100%; z-index: -1; } #service-detail .breadcrumb { font-family: 'metric-semibold', sans-serif; position: absolute; top: 100px; font-weight: bold; font-size: 16px; } #service-detail #section1 .service-list { position: absolute; list-style-type: none; color: white; top: 180px; /* font-family: 'metric-bold', sans-serif; */ top: 150px; width: 100%; text-align: center; padding-left: 0; } #service-detail #section1 .service-list li { padding: 7px 0px; } #service-detail #section1 .service-list li a { display: block; cursor: pointer; } #service-detail .service-detail { position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; z-index: -1; opacity: 0; background: rgba(27, 27, 27, 1); transition: opacity 0.5s; } #service-detail .service-detail.active { z-index: 20; opacity: 1; } #service-detail .service-detail .close-btn { position: absolute; right: 15px; top: 15px; color: white; font-size: 25px; } #service-detail .service-detail .content { position: absolute; top: 2vh; left: 55%; width: 100%; max-width: 800px; padding: 15px 0px; max-height: 50vh; transform: translateX(-50%); text-align: center; } #service-detail .service-detail .play-video { position: relative; left: 49%; bottom: 225px; color: #fff; cursor: pointer; } #service-detail .service-detail video.desktop, #service-detail .service-detail img.desktop { width: 70vh; height: auto; margin: auto; display: block; position: absolute; top: 20px; z-index: 1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; max-width: 520px } /* #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile.mob-ig-ads { width: 15.5vh; height: 96%; margin: auto; display: block; position: absolute; top: 4px; z-index: -1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; max-width: 165px; border-radius: 50px; } */ #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile.mob-ig-ads { margin: auto; display: block; position: absolute; top: 0; z-index: -1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; /* border-radius: 50px; */ max-width: 160px; height: auto; } /* #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile { width: 24vh; height: 98%; margin: auto; display: block; position: absolute; top: 4px; z-index: -1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; max-width: 160px; border-radius: 50px; } */ #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile { margin: auto; z-index: -1; max-width: 160px; height: auto; top: 0; border-radius: 50px; } /* #service-detail .service-detail video.mobile.mob-ads { width: 22.5vh; height: 100%; top: 1px; } */ #service-detail .service-detail video.mobile.mob-ads { max-width: 160px; height: auto; border-radius: 50px; /* top: 20px; */ } /* #service-detail .service-detail video.mobile.mob-ig-story { top: 3px; width: 15.5vh; max-width:160px; } */ /* #service-detail .service-detail video.mobile.mob-ig-story { top: 6px; width: 40vh; max-width: 165px; } */ #service-detail .service-detail video.mobile.mob-ig-story { max-width: 160px; height: auto; margin: 0; } #service-detail .service-detail video.mobile.mob-im { width: 23vh; } #service-detail .service-detail img.frame { height: 50vh; width: auto; margin: auto; display: block; z-index: -1; max-height: 378px; } /* #service-detail .service-detail img.frame.frame-mob { width: auto; margin-top: 0; max-height: 378px; } */ #service-detail .service-detail img.frame.frame-mob { margin-top: 0; max-width: 160px; height: auto; } #service-detail .service-detail img.frame-m { height: 30vh; width: auto; margin: auto; display: block; } #service-detail .service-detail img.frame-d { height: 30vh; width: auto; margin: auto; display: block; } #service-detail .service-detail .content .multi { position: relative; display: inline-block; margin: 0px 15px; } #service-detail .service-detail .content .content-nav { list-style-type: none; padding: 0; margin-top: 30px; color: white; } #service-detail .service-detail .content .content-nav li { display: inline-block; margin: 7px 15px; opacity: 0.7; } #service-detail .service-detail .content .content-nav li:hover, #service-detail .service-detail .content .content-nav li.active { opacity: 1; } #service-detail .service-detail .content .content-nav li a { display: block; cursor: pointer; } #service-detail .service-detail .content .owl-dots { display: none; } #service-detail .service-detail .content .owl-item p { color: white; margin-top: 30px; } #service-detail .service-detail .desc { color: white; background: black; padding: 35px 0px 50px; position: absolute; bottom: 0; max-height: 80vh; overflow: auto; width: 100%; z-index: -1; } #service-detail .service-detail .desc .title { margin-bottom: 15px; } #service-detail .service-detail .desc .title>span { display: inline-block; position: relative; } #service-detail .service-detail .desc .title>span::after { position: absolute; width: 100%; height: 2px; background: white; /* margin-top: 15px; */ content: " "; left: 0; top: 100%; } #service-detail .service-detail .close-btn { display: none; } #service-detail .breadcrumb { left: calc(50% - 600px); font-size: 16px; padding: 8px 15px 20px; z-index: 12; font-weight: bold; font-size: 16px; } #service-detail .service-detail.active { z-index: 11; } #service-detail #section1 .service-list { left: calc(50% - 600px); top: 180px; width: auto; text-align: left; padding-left: 15px; z-index: 12; } #service-detail .service-detail { background: rgba(27, 27, 27, 0.8); } #service-detail .service-detail .content { transform: translateX(-40%) } #service-detail .service-detail .content .owl-carousel { transform: scale(1.2); margin-top: 100px; } #service-detail .service-detail .content .content-nav { display: block; margin-top: 7vh; } } @media (max-width: 600px) { #service-detail .service-detail img.frame.frame-mob { margin-top: 0; max-width: 145px; height: auto; } #service-detail .service-detail video.mobile, #service-detail .service-detail img.mobile { margin: auto; z-index: -1; max-width: 145px; height: auto; top: 0; border-radius: 30px; } #service-detail .service-detail video.mobile.mob-ads { max-width: 145px; height: auto; border-radius: 30px; } #service-detail .service-detail video.mobile.mob-ig-story { /* top: 3px; */ height: auto; max-width: 145px; } } /* client page*/ #clients * {} #clients #section1 { position: relative; width: 100vw; height: 30vh; overflow: hidden; } #clients .breadcrumb { font-family: 'metric-semibold', sans-serif; position: absolute; top: 30px; font-weight: bold; font-size: 16px; } #clients .breadcrumb { top: 60px; } #clients #section1 video { position: absolute; width: 100vw; top: 0; left: 0; z-index: -1; } #clients #section2 { position: relative; width: 100vw; padding: 0px 0px; } #clients #section2 .client-list { position: relative; width: 75vw; max-width: 1200px; margin: 0px auto; text-align: center; } #clients #section2 .client-list .client-block { width: 98px; margin: 10px; display: inline-block; position: relative; } #clients #section2 .client-list .client-block .normal { display: block; opacity: 0; } #clients #section2 .client-list .client-block .greyed { display: block; position: absolute; width: 100%; opacity: 1; } #clients #section2 .client-list .client-block:hover .normal { opacity: 1; transition: all ease-in-out 1s; } #clients #section2 .client-list .client-block:hover .greyed { opacity: 0; transition: all ease-in-out 1s; } #clients #section3 { position: relative; background: #1B1B1B; padding: 30px 0px; } #clients #section3 .case-area { width: 100%; /* max-width:1200px; */ margin: 120px auto; display: block; position: relative; /* padding:0px 15px; */ color: white; } #clients #section3 .case-area h1 { font-size: 12pt; } #clients #section3 .case-area .acc-block { padding: 10px 10px 0; border-bottom: 1px solid #5B5C5E; } #clients #section3 .case-area .acc-head { font-size: 12pt; cursor: pointer; } #clients #section3 .case-area .acc-head>span { float: right; } #clients #section3 .case-area .acc-head span i { font-size: 24px; } #clients #section3 .case-area .acc-body { padding: 30px 25px 85px; background: white; color: #5B5C5E; position: relative; display: none; } #clients #section3 .case-area .acc-body .block-area { margin-bottom: 30px; } #clients #section3 .case-area .acc-body .block-area p {} #clients #section3 .case-area .acc-body .block-area table { width: 100%; } #clients #section3 .case-area .acc-body .block-area table .hline { width: 100px; height: 1px; background: #5B5C5E; display: inline-block; } #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { height: calc(25vh - 36px); margin: auto; display: block; position: absolute; top: 50%; z-index: 0; background-color: white; left: 50%; transform: translate(-50%, -50%); background: transparent; width: auto !important; } #clients #section3 .case-area .acc-body video.mobile, #clients #section3 .case-area .acc-body img.mobile { height: 82%; margin: auto; display: block; position: absolute; top: 20px; z-index: -1; background-color: white; left: 50%; transform: translateX(-50%); background: transparent; width: auto; } #clients #section3 .case-area .acc-body img.frame { height: 40vh; width: auto; margin: 0 50%; display: block; } #clients #section3 .case-area .acc-body img.frame-m { height: 165px; width: auto; margin: auto; display: block; } #clients #section3 .case-area .acc-body img.frame-d { height: 165px; width: auto; margin: auto; display: block; } #clients #section3 .case-area .acc-body .content .multi { position: relative; display: inline-block; margin: 0px 15px; } #clients #section3 .case-area .acc-body .owl-dots { text-align: center; margin-top: 15px; } #clients #section3 .case-area .acc-body .owl-dot { width: 10px; height: 10px; display: inline-block; background: white; border: 1px solid black; border-radius: 5px; margin: 0px 5px; } #clients #section3 .case-area .acc-body .owl-dot.active { background: black; } @media(min-width:1200px) { #clients #section2 { padding: 30px 0px; } #clients #section2 .client-list { margin: 50px auto; } #clients .breadcrumb { left: calc(50% - 610px); padding: 8px 15px 25px; top: 60px; font-weight: bold; font-size: 16px; } #clients #section1 .breadcrumb { left: calc(50% - 600px); top: 100px; padding: 8px 15px 20px; font-family: 'metric-semibold', sans-serif; font-size: 14px; font-weight: bold; font-size: 16px; } #clients #section2 .client-list .client-block { width: 65px; } #clients #section3 .case-area h1 { font-size: 24pt; margin: 12% auto 0px; padding: 0 65px 0 125px; margin-left: 25px; } #clients #section3 .case-area .acc-head { font-family: 'metric-semibold', sans-serif; padding: 40px 65px 30px 125px; font-size: 24pt; font-size: 22pt; margin-left: 15px; } #clients #section3 .case-area .acc-body .right { float: right; padding: 0 50px; } #clients #section3 .case-area .acc-body .left { float: left; padding: 0 105px; } #clients #section3 .case-area .acc-body .vline { position: absolute; width: 1px; height: 100%; left: calc(100% * (2/3)); top: 0; background: #5B5C5E; } #clients #section3 .case-area .acc-body .bodytext { margin-left: calc(50% - 687px); } #clients #section3 .case-area .acc-body .block-area .testimoni-block { padding-left: 30px; } #clients #section3 .case-area .acc-body .block-area .testimoni-block .testimoni { font-style: italic; margin: 30px 0px; width: 55%; } #clients #section3 .case-area .acc-body .block-area .testimoni-block .from { font-weight: bold; font-family: 'metric-regular', sans-serif; font-size: 13px; } #clients #section3 .case-area .acc-body .right p b { font-family: 'metric-semibold', sans-serif; font-size: 16px; } #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { height: 77%; top: 50%; } #clients #section3 .case-area .acc-body video.mobile, #clients #section3 .case-area .acc-body img.mobile { height: 330px; top: 0%; width: auto; } #clients #section3 .case-area .acc-body video.mobile { border-radius: 50px; } #clients #section3 .case-area .acc-body img.frame-m { height: 330px; max-width: none; z-index: 0; } #clients #section3 .case-area .acc-body img.frame-d { height: 330px; z-index: 0; } #clients #section3 .case-area .acc-body .owl-dot { display: none; } } @media (max-width:600px) { #clients #section3 .case-area .acc-body video.mobile, #clients #section3 .case-area .acc-body img.mobile { height: 165px; top: 0%; width: auto; } #clients #section3 .case-area .acc-body video.mobile { border-radius: 30px; } #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { height: 77%; top: 50%; } /* #clients #section3 .case-area .acc-body video.desktop, #clients #section3 .case-area .acc-body img.desktop { left: 82%; transform: translate(-82%, -50%); } #clients #section3 .case-area .acc-body img.frame-d { transform: translate(19px); } */ } /*connect page*/ #connect * {} #connect #section1 { position: relative; width: 100vw; min-height: 100vh; overflow: hidden; z-index: 2; } #connect #section1 video { min-width: 100%; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); min-height: 100%; /* z-index:-1; */ } #connect .breadcrumb { position: absolute; top: 30px; font-family: 'metric-semibold', sans-serif; padding: 8px 15px 25px; font-size: 14px; font-weight: bold; font-size: 16px; } #connect #section1 .breadcrumb { top: 100px; /* left: 3%; */ } #connect #section1 .connect-area { position: absolute; transform: translate(-50%, -50%); width: 100%; max-width: 1300px; color: white; padding: 0px 15px; } #connect #section1 .content-block { margin-bottom: 90px; } #connect #section2 { position: relative; background: #fff; width: 100vw; height: 100vh; overflow: hidden; z-index: 2; } #connect #section2 .contact-area { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1200px; text-align: center; } #connect #section2 .contact-area h1, #connect #section2 .contact-area p { color: #5B5C5E; } #connect #section2 .contact-area .form-block { width: 100%; max-width: 600px; margin: 0px auto; } #connect #section2 .contact-area .form-block input { width: 80%; text-align: center; font-size: 20px; background: transparent; border: none; border-bottom: 1px solid #5B5C5E; display: inline-block; } #connect #section2 .contact-area .form-block textarea { vertical-align: middle; width: 80%; background: transparent; text-align: center; padding: 15px; } #captcha2 { margin-left: 10%; transform: scale(0.77); transform-origin: top left; display: inline-block; margin-right: 0; vertical-align: middle; } #connect #section2 .contact-area .form-block .submit-area { margin: auto; display: block; width: 75%; text-align: right; margin-top: 15px; } @media only screen and (max-width:600px) { #connect #section2 .contact-area .form-block .submit-area { margin: auto; display: block; width: 75%; text-align: center; margin-top: 15px; } } #connect #section2 .contact-area .form-block .submit-area .left { transform: scale(0.77); transform-origin: top left; display: inline-block; margin-right: 0; vertical-align: middle; } /* #connect #section2 .contact-area .form-block .submit-area .right{ display: inline-block; vertical-align: middle; margin-right:-5%; margin-top: -10px; } */ .frm-submit.connect { cursor: pointer; position: absolute; top: 21vh; right: 31%; font-size: 24px; } #connect #section2 .contact-area .owl-dots { text-align: center; margin-top: 15px; } #connect #section2 .contact-area .owl-dot { width: 10px; height: 10px; display: inline-block; background: #BABABA; opacity: 0.5; border: 1px solid #5B5C5E; border-radius: 5px; margin: 0px 5px; border: 0; } #connect #section2 .contact-area .owl-dot.active { background: #5B5C5E; opacity: 1; width: 10px; height: 10px; border-radius: 10px; outline-style: none; } #connect #section2 .contact-area .thankyou-area { display: none; margin-top: 60px; } #connect #section2 .contact-area .thankyou-area p { font-size: 12px; margin-bottom: 30px; } #connect #section2 .contact-area .thankyou-area p:first-child { font-size: 15px; } #connect #section2 .thankyou-area { display: none; position: absolute; margin-top: 60px; top: 50%; left: 50%; margin-right: -50%; text-align: center; transform: translate(-50%, -50%); } #connect #section2 .thankyou-area p { font-size: 20px; margin-bottom: 50px; color: #5B5C5E; } #connect #section2 .thankyou-area p:first-child { font-size: 30px; margin-bottom: 20px; color: #5B5C5E; } #connect #section2 .thankyou-area p a { font-size: 16px; } @media(min-width:1200px) { #connect .breadcrumb { left: calc(50% - 640px); top: 60px; font-weight: bold; font-size: 16px; } #connect #section1 .connect-area .left { float: left; text-align: left; } #connect #section1 .connect-area .right { float: right; text-align: right; } #connect #section2 .contact-area .owl-carousel { margin-top: 60px; } #connect #section1 .connect-area { top: 50%; left: 52.4%; } } /*publications*/ #publications * {} #publications #section1 { position: relative; width: 100vw; height: 40vh; overflow: hidden; background: #1B1B1B; } #publications .breadcrumb { font-family: 'metric-semibold', sans-serif; position: absolute; top: 30px; font-weight: bold; font-size: 16px; } #publications .breadcrumb { top: 60px; } #publications #section2 .filter-container { text-align: center; font-size: 15px; margin: 30px 0px; } #publications #section2 .filter-container .selected { padding: 5px 0px; display: inline-block; cursor: pointer; } #publications #section2 .filter-container .filter-head { list-style-type: none; padding-left: 0; display: none; } #publications #section2 .filter-container .filter-head li { padding: 5px 0px; opacity: 0.5; } #publications #section2 .filter-container .filter-head li.active { opacity: 1; } #publications #section2 .filter-container .filter-head li a { display: block; cursor: pointer; } #publications #section2 .filter-container .filter-head li:hover { opacity: 1; } #publications #section2 { padding: 15px 0px; } #publications #section2 .article-block { padding: 50px 0px; border-bottom: 1px solid #BABABA; } #publications #section2 .article-block .left-art { padding: 0 0 0 40px; } #publications #section2 .article-block .category { color: #5B5C5E; font-size: 12pt; font-weight: bold; margin: 7px 0px; } #publications #section2 .article-block .title { color: #5B5C5E; font-size: 16px; font-weight: bold; min-height: 50px; text-transform: uppercase; } #publications #section2 .article-block .author { color: #5B5C5E; font-size: 16px; font-style: italic; margin-bottom: 25px; } #publications #section2 .article-block .date { color: #5B5C5E; font-size: 16px; font-weight: bold; } #publications #section2 .article-block .desc { font-size: 16px; line-height: 25px; text-align: justify; margin: 25px auto; min-height: 120px; } #publications #section2 .article-block .link { color: #5B5C5E; font-size: 16px; font-weight: bold; margin-top: 30px; } #publications #section2 .pagination { margin: 50px 0px; text-align: center; width: 100%; } #publications #section2 .pagination>a { margin: 0px 7px; font-size: 16px; cursor: pointer; } #publications #section2 .pagination>a.active { text-decoration: underline; } @media(max-width:600px) { #publications #section2 .article-block .title { margin-top: 30px; } #publications #section2 .article-block .left-art { padding: 0 20px; } #publications #section2 .article-block .link { margin: 0px; } } @media(min-width:1200px) { #publications .breadcrumb { left: calc(50% - 600px); top: 100px; padding: 8px 15px 20px; font-weight: bold; font-size: 16px; } #publications #section2 .filter-container .selected { display: none; } #publications #section2 .filter-container .filter-head { display: block; } #publications #section2 .filter-container .filter-head li { display: inline-block; margin: 0px 15px; } #publications #section2 .article-block img { width: 100%; height: 350px; } #publications #section2 .article-block .category { display: none; } #publications #section2 .article-block .title { color: #5B5C5E; font-size: 16px; text-transform: uppercase; } #publications #section2 .pagination>a { font-size: 16px; } } /*publications detail*/ #publications-detail * {} #publications-detail #section1 { position: relative; width: 100vw; margin-top: 60px; } #publications-detail .breadcrumb { position: absolute; padding-left: 0; font-family: 'metric-semibold', sans-serif; font-size: 14px; padding: 8px 0 15px; left: calc(50% - 530px); top: 50px; font-weight: bold; font-size: 16px; color: #5B5C5E; } #publications-detail .breadcrumb::after { left: 0; width: 100%; } #publications-detail #section1 article { padding-bottom: 30px; border-bottom: 1px solid #5B5C5E; margin-bottom: 30px; margin-top: 15%; } #publications-detail #section1 article h1 { font-size: 36px; margin: 30px 0px 25px; min-height: 50px; } #publications-detail #section1 article .social-media a { margin: 7px 0px; } #publications-detail #section1 article .social-media a img { height: 30px; margin-left: 5px; } #publications-detail #section1 article .banner { width: 100%; max-height: 600px; margin: 15px 0px 50px; } #publications-detail #section1 article .author { /* font-style:italic; */ text-align: right; color: #5B5C5E; font-size: 18px; } #publications-detail #section1 article .date { font-weight: bold; text-align: right; color: #5B5C5E; font-size: 18px; } #publications-detail #section1 article .content { font-size: 18px; } #publications-detail #section2 { position: relative; width: 100vw; padding: 30px 0px; } #publications-detail #section2 .title-more { font-size: 22px; font-weight: normal; margin-bottom: 25px; color: #5B5C5E; } #publications-detail #section2 .article-block { border: 1px solid #5B5C5E; margin-bottom: 30px; } #publications-detail #section2 .article-block a img { min-height: 46vh; width: 100%; } #publications-detail #section2 .article-block .title { font-size: 18pt; margin: 30px 0 0; padding: 0px 25px; line-height: 30px; min-height: 100px; color: #5B5C5E; } #publications-detail #section2 .article-block .author { margin: 15px 25px; color: #5B5C5E; } #publications-detail #section2 .article-block .author .user { padding: 0; color: #5B5C5E; } #publications-detail #section2 .article-block .author .date { padding: 0; text-align: right; color: #5B5C5E; } .link.metric-regular:hover a { opacity: 1; } /*career*/ #career * {} #career #section1 { position: relative; width: 100vw; background: #1B1B1B; color: white; overflow: auto; } #career #section1 .fix-center { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 720px; color: white; font-size: 45pt; font-weight: bold; text-align: center; padding: 0px 15px; line-height: 70px; z-index: 1; } #career #section1 .big-scroll-container { position: relative; width: 100vw; padding: 35% 15px 0; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); overflow: auto; max-width: 1200px; } #career #section1 .big-scroll-container .block { position: relative; margin: 60px 0px; overflow: hidden; } #career #section1 .big-scroll-container .block.odd { float: left; } #career #section1 .big-scroll-container .block.even { float: right; } #career #section1 .big-scroll-container .block img { width: 100%; } #career #section1 .big-scroll-container .block .overlay { position: absolute; top: 100%; left: 0; background: rgba(27, 27, 27, 0.8); width: 100%; height: 100%; transition: top 0.5s; } #career #section1 .big-scroll-container .block:hover .overlay { top: 0; } #career #section1 .big-scroll-container .block .overlay .text { position: absolute; top: 45%; left: 50%; width: 100%; max-width: 300px; text-align: center; transform: translate(-50%, -50%); } #career #section1 .big-scroll-container .block .overlay .text .title { font-size: 25pt; font-weight: bold; } #career #section1 .big-scroll-container .block .overlay .text .desc { line-height: 35px; font-size: 16px; } #career #section2 { position: relative; z-index: 1; } #career .breadcrumb { position: absolute; top: 30px; font-family: 'metric-semibold', sans-serif; padding: 8px 15px 20px; font-weight: bold; font-size: 16px; } #career #section1 .breadcrumb { top: 100px; } #career #section2 h1 { margin: 150px 0px 100px; font-size: 25pt; color: #5B5C5E; } #career #section2 .vacancy { padding: 15px 0px; margin: 5px 0px; border-bottom: 1px solid #BABABA; /* cursor: pointer; */ } #career #section2 .vacancy .job-title, #career #section2 .vacancy .detail { font-size: 18px; font-weight: bold; text-transform: uppercase; color: #5B5C5E; } #career #section2 .vacancy .job-desc { width: 80%; line-height: 30px; font-size: 18px; color: #5B5C5E; } #career #section2 .vacancy div span { color: #5B5C5E; } #career #section2 .vacancy .detail { display: block; margin-top: 15px; } #career #section2 .col-md-10 { padding: 0 15px 100px; } #career-detail #section1 .detail .container { padding: 0; } @media(max-width:600px) { #career #section1 .fix-center { top: 60%; } #career #section2 h1 { margin: 150px 20px 100px; } /* #career #section2 .vacancy { padding: 15px 20px; } */ #career #section2 .job { margin: 0 20px; } #career #section2 .vacancy .job-desc { width: 100%; } #career #section1 .big-scroll-container { padding: 150% 15px 0; } } @media(min-width:1200px) { #career .breadcrumb { left: calc(50% - 600px); top: 60px; font-weight: bold; font-size: 16px; } #career #section1 .big-scroll-container .block { max-width: 50vw; } #career #section2 .vacancy .detail { display: inline-block; margin-top: 0; float: right; font-size: 18px; } } /*career detail*/ #career-detail * {} #career-detail .breadcrumb { font-family: 'metric-semibold', sans-serif; position: absolute; top: 30px; font-weight: bold; font-size: 16px; } #career-detail #section1 .breadcrumb { top: 70px; color: #5B5C5E; } #career-detail #section1 { position: relative; width: 100vw; height: 100vh; overflow: auto; } #career-detail #section1 .detail { margin: 150px 0px; } #career-detail #section1 .detail .block { margin-bottom: 30px; } #career-detail #section1 .detail .block .title { font-size: 15pt; font-weight: bold; margin-bottom: 20px; color: #5B5C5E; } #career-detail #section1 .detail .apply-area { text-align: center; margin: 30px 0px; } #career-detail #section1 .detail .apply-area .btn-apply { font-size: 25pt; color: white; background: #5B5C5E; padding: 20px 30px 10px; line-height: 30px; display: inline-block; } #career-detail #section1 .detail .apply-area .btn-apply:hover { color: white; background: #009FDD; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } #career-detail #section1 .detail .apply-area img { height: 13px; vertical-align: top; } @media(max-width:600px) { #career-detail #section1 .breadcrumb { top: 100px; margin-left: 25px; } #career-detail #section1 .detail { margin: 200px 35px 120px; } } @media(min-width:1200px) { #career-detail .breadcrumb { left: calc(50% - 600px); top: 60px; font-weight: bold; font-size: 16px; } #career-detail #section1 .detail .apply-area { text-align: left; } } /* Change autocomplete styles in WebKit */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: unset; -webkit-text-fill-color: #FFF; -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } #connectPage input:-webkit-autofill, #connectPage input:-webkit-autofill:hover, #connectPage input:-webkit-autofill:focus, #connectPage textarea:-webkit-autofill, #connectPage textarea:-webkit-autofill:hover, #connectPage textarea:-webkit-autofill:focus, #connectPage select:-webkit-autofill, #connectPage select:-webkit-autofill:hover, #connectPage select:-webkit-autofill:focus { border: unset; -webkit-text-fill-color: #333 !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } p.metric-light a:hover { opacity: 1; } .p-5 { padding: 5px; } /*.service-list:hover a { opacity: 0.3; } .service-list:hover li:hover a { opacity: 0.5; } .service-list:hover li:hover a:hover { opacity: 1; }*/ .error-message { padding: 15px; color: #de4444; } .email-text { text-decoration: none; text-transform: uppercase; } a.email-text:hover { opacity: 0.7; } a.link-sosmed:hover { opacity: 0.7; } .intl-tel-input { display: table-cell; } .intl-tel-input .selected-flag { z-index: 4; } .intl-tel-input .country-list { z-index: 5; } .input-group .intl-tel-input .form-control { border-top-left-radius: 4px; border-top-right-radius: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 0; } .iti__flag { background-image: url("../plugins/int-tel/img/flags.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-image: url("../plugins/int-tel/img/flags@2x.png"); } } .iti__flag-box, .iti__country-name { color: #333; } .iti { width: 80%; } /* #homepage #section4 > .iti .form-area input#phone { width: 100% !important; } */ .iti input, .iti input[type=text], .iti input[type=tel] { width: 100% !important; } input#phone { padding-left: 0px !important; } .iti__selected-flag { padding: 0 10px 7px 10px !important; } .iti--separate-dial-code .iti__selected-flag { background-color: transparent !important; }