@font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; src: url("../g-font/Light/OpenSans-Light.eot") format("embedded-opentype"), url("../g-font/Light/OpenSans-Light.woff2") format("woff2"), url("../g-font/Light/OpenSans-Light.woff") format("woff"), url("../g-font/Light/OpenSans-Light.ttf") format("truetype"), url("../g-font/Light/OpenSans-Light.svg") format("svg"); font-display: swap; } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url("../g-font/Regular/OpenSans-Regular.eot") format("embedded-opentype"), url("../g-font/Regular/OpenSans-Regular.woff2") format("woff2"), url("../g-font/Regular/OpenSans-Regular.woff") format("woff"), url(../g-font/Regular/OpenSans-Regular.ttf) format("truetype"), url("../g-font/Regular/OpenSans-Regular.svg") format("svg"); font-display: swap; } @font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; src: url("../g-font/Semibold/OpenSans-Semibold.eot") format("embedded-opentype"), url("../g-font/Semibold/OpenSans-Semibold.woff2") format("woff2"), url("../g-font/Semibold/OpenSans-Semibold.woff") format("woff"), url("../g-font/Semibold/OpenSans-Semibold.ttf") format("truetype"), url("../g-font/Semibold/OpenSans-Semibold.svg") format("svg"); font-display: swap; } @font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; src: url("../g-font/Bold/OpenSans-Bold.eot") format("embedded-opentype"), url("../g-font/Bold/OpenSans-Bold.woff2") format("woff2"), url("../g-font/Bold/OpenSans-Bold.woff") format("woff"), url("../g-font/Bold/OpenSans-Bold.ttf") format("truetype"), url("../g-font/Bold/OpenSans-Bold.svg") format("svg"); font-display: swap; } /*html { overflow-y: scroll; -webkit-overflow-scrolling: touch; }*/ body { font-family: "Open Sans", Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; /*-webkit-font-smoothing: antialiased; Fix for webkit rendering -webkit-text-size-adjust: 100%;*/ margin: 0 auto; font-size: 14px; font-weight: 400; /*background-color:#ffffff;*/ background: #232830; -webkit-tap-highlight-color: transparent; position: relative !important; overflow-x: hidden; width: 100%; overflow: auto; } ::-webkit-selection { color: rgb(253, 253, 253); background: #3b2c87; } ::-moz-selection { /* Code for Firefox */ color: rgb(253, 253, 253); background: #3b2c87; } ::selection { color: rgb(253, 253, 253); background: #3b2c87; } :root { --wh-color: #ebebeb; --blue-color: #3b2c87; --grey-color: #232830; --base-font-size: 14px; --fs-1: calc(var(--base-font-size) * 5); --fs-2: calc(var(--base-font-size) * 1.45); --fs-5: calc(var(--base-font-size) * 2.5); --padding: 50px; } .typography_1 { font-size: var(--fs-1); color: var(--wh-color); font-weight: 700; font-family: "Open Sans", Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; letter-spacing: 0.02em; } .typography_2 { font-size: var(--fs-2); color: var(--wh-color); font-weight: 400; font-family: "Open Sans", Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; letter-spacing: 0.02em; } .typography_5 { font-size: var(--fs-5); color: var(--wh-color); font-weight: 700; letter-spacing: 0.02em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-family: 'Open Sans', Arial, Helvetica, sans-serif; } a, a:active, a:focus, a:visited { outline: none; } /*=================*/ body, html { width: 100%; height: 100%; margin: 0; max-width: 100%; } .section_ifr { width: 100%; position: relative; padding-top: 50px; padding-bottom: 50px; overflow: hidden; background: #232830; } .section_ifr_1 { width: 100%; position: relative; padding-top: 50px; padding-bottom: 50px; overflow: hidden; background: #232830; } /*.c19_intro{ min-height: 550px;}*/ .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro { /* height: 80%; */ /* height: 80vh; */ min-height: 750px; position: relative !important; background: rgb(62, 61, 64); /*overflow: scroll;*/ display: block; overflow: hidden; } .p1_intro { background: -webkit-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/wigs/wigs_cover_1.jpg); background: -moz-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/wigs/wigs_cover_1.jpg); background: -ms-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/wigs/wigs_cover_1.jpg); background: -o-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/wigs/wigs_cover_1.jpg); background: radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/wigs/wigs_cover_1.jpg); background-repeat: no-repeat; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center bottom; } .p2_intro { background: -webkit-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/sfx/sfx_cover_1.jpg); background: -moz-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/sfx/sfx_cover_1.jpg); background: -ms-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/sfx/sfx_cover_1.jpg); background: -o-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/sfx/sfx_cover_1.jpg); background: radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/sfx/sfx_cover_1.jpg); background-repeat: no-repeat; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center bottom; } .p3_intro { background: -webkit-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/historical_movies/historical_movie_cover.jpg); background: -moz-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/historical_movies/historical_movie_cover.jpg); background: -ms-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/historical_movies/historical_movie_cover.jpg); background: -o-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/historical_movies/historical_movie_cover.jpg); background: radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/historical_movies/historical_movie_cover.jpg); background-repeat: no-repeat; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center bottom; } .p4_intro { background: -webkit-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/special_makeup/specialmakeup_cover.jpg); background: -moz-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/special_makeup/specialmakeup_cover.jpg); background: -ms-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/special_makeup/specialmakeup_cover.jpg); background: -o-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/special_makeup/specialmakeup_cover.jpg); background: radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/special_makeup/specialmakeup_cover.jpg); background-repeat: no-repeat; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 30% 50%; } .p5_intro { background: -webkit-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/character_design/character_design_cover.jpg); background: -moz-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/character_design/character_design_cover.jpg); background: -ms-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/character_design/character_design_cover.jpg); background: -o-radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/character_design/character_design_cover.jpg); background: radial-gradient(rgba(35, 35, 35, .85), rgba(62, 61, 64, .6)), url(../images/projs/character_design/character_design_cover.jpg); background-repeat: no-repeat; background-attachment: local; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center bottom; } .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(23, 28, 30); opacity: 0; /* opacity: 0.35; */ } .if_intro_txt { font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #ebebeb; font-size: .95em; font-weight: 300; letter-spacing: .8px; text-transform: uppercase; margin-top: 15px; } .if_intro_txt_1, .if_intro_txt_2 { font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #ebebeb; font-size: 1.3em; font-weight: 400; letter-spacing: .8px; margin-top: 5px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .if_intro_txt_1 { text-transform: capitalize; } .if_intro_txt_2 { text-transform: none; } .tx1 { line-height: 1; text-align: center; /* text-transform: uppercase; */ letter-spacing: .8px; position: absolute; left: 50%; top: 30%; -webkit-transform: translate(-50%, -70%); -moz-transform: translate(-50%, -70%); -ms-transform: translate(-50%, -70%); -o-transform: translate(-50%, -70%); transform: translate(-50%, -70%); width: 100%; height: auto; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-animation: fadeIn .35s; -moz-animation: fadeIn .35s; -ms-animation: fadeIn .35s; -o-animation: fadeIn .35s; animation: fadeIn .35s; } .if_icons_cont { width: 60%; height: 75px; margin: 0 auto; position: absolute; left: 50%; top: 65%; -webkit-transform: translate(-50%, -65%); -moz-transform: translate(-50%, -65%); -ms-transform: translate(-50%, -65%); -o-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } .if_icon { width: 25%; display: inline-block; float: left; text-align: center; } .if_icon img { width: 45px; height: 45px; display: inline-block; } .if_icon a { color: #ebebeb !important; border-bottom: 1px solid transparent; } .if_icon a:hover { color: #ebebeb; opacity: .75; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-decoration: none; outline: none; border-bottom: 1px solid transparent; } .if_icon a, .if_icon a:hover{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; transition-property: initial; transition-duration: 0.5s; transition-timing-function: initial; transition-delay: initial; } .intro-text { position: fixed; display: block; } .main_cont { width: 77%; margin: 50px auto 100px; position: relative; max-width: 1250px; /* background: rgb(240, 240, 240); */ height: auto; } .tx_cont { width: 80%; height: auto; margin: 150px auto 50px; text-align: left; padding: 0px; margin-bottom: 27px; /*margin-bottom:-18px; position:fixed; top:0; right: 0;*/ } .img_cont { width: 100%; height: auto; margin: 0 auto; display: inline-block; position: relative; } /* .img_cont img { border-radius: 25px; } */ .if_img_cont { position: relative; display: inline-block; overflow: hidden; } .tx_desc { width: 100%; margin: 0 auto; padding: 0px; text-align: left; line-height: 1.5; letter-spacing: .015em; } .vision_title{ display: inline-block; margin-bottom: 50px; font-weight: 800; width: 100%; text-align: center; } .text_desc p { margin: 12.5px auto; padding: var(--padding); } .tx_list { position: relative; float: none; width: 80%; margin: 50px auto; list-style: none; text-align: left; font-family: "Open Sans", Arial, Helvetica, sans-serif; padding: 0; margin-top: 50px; } .tx_list li:first-child { border: 0; padding-top: 0; } .tx_list li:last-child { margin-bottom: 25px; } .tx_list li { border-top: 1px solid #ebebeb; padding: 3px 0 4px; overflow: hidden; display: table; width: 100%; } a:link { text-decoration: none; cursor: pointer; color: #ebebeb; } a:hover { border-bottom: 1px solid #3b2c87; text-decoration: none; } a:visited { color: #3b2c87; text-decoration: none; } .tx_list li line { color: #ebebeb; } .wb_title { display: inline-block; visibility: visible; } .img_cont img { position: relative; max-width: 100%; border: 0px solid transparent; } /* .img_wrapper { width: 100%; height: 0; padding-bottom: 150%; position: relative; } picture { position: absolute; } */ .scrollable-container { overflow-y: scroll; /* Enable vertical scrolling */ scroll-behavior: smooth; /* Apply smooth scrolling behavior */ /* Add any additional styles as needed */ } /* picture { max-width: 100%; height: auto; display: block; } */ /* img::before { display: block; content: ''; padding-top: calc(100% * 2 / 3); } */ .lazyload {display: inline-block; } .lazyload.fade-in { /* width: 100%; height: auto; */ /* background-color: var(--grey-color); */ outline: none; opacity: 0; -webkit-animation: fadeIn .5s ease-in-out forwards !important; -moz-animation: fadeIn .5s ease-in-out forwards !important; -ms-animation: fadeIn .5s ease-in-out forwards !important; -o-animation: fadeIn .5s ease-in-out forwards !important; animation: fadeIn .5s ease-in-out forwards !important; } .fade-in.visible { opacity: 1; } /* .lazyload.loading { background-image: url('../images/lazy.png'); background-size: 20px 20px; background-repeat: no-repeat; background-position: center; } .lazyload.loaded { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } */ /* .img_wrapper { position: relative; width: 100%; padding-top: 50%; } .img_wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } */ .picture { margin: 2% 0 !important; width: 100%; display: inline-block; overflow: hidden; position: relative; float: left; } .double_pics_l { margin: 2% 2% 2% 0 !important; float: left; width: 48%; display: inline-block; overflow: hidden; position: relative; } .double_pics_r { margin: 2% 0 2% 2% !important; float: left; width: 48%; display: inline-block; overflow: hidden; position: relative; } picture { display: block; } .margin-zero { margin: -2px auto !important; } /*.clear{ clear:both;}*/ .proj_subtitle { letter-spacing: .6px; text-transform: capitalize; line-height: 1; margin: 100px auto 50px; display: inline-block; width: 100%; text-align: center; } .iframe_foot_line { background-color: #3b2c87; position: absolute; bottom: 0; width: 100%; height: 3px; /* display: none; */ } /**! * @link https://github.com/goodleby/expander * @version 0.0.2 */ .expander-inited .expander-dropdown { transition: all 300ms ease; transition-property: opacity, visibility; visibility: hidden; opacity: 0; display: none; } .expander-inited.opened .expander-dropdown { visibility: visible; opacity: 1; } /* Plus Minus Icon */ .plus-minus-toggle { cursor: pointer; height: 21px; position: relative; width: 21px; } .plus-minus-toggle:before, .plus-minus-toggle:after { background: #000; content: ''; height: 5px; left: 0; position: absolute; top: 0; width: 21px; -webkit-transition: transform 500ms ease; -moz-transition: transform 500ms ease; -ms-transition: transform 500ms ease; -o-transition: transform 500ms ease; transition: transform 500ms ease; } .plus-minus-toggle:after { transform-origin: center; } .plus-minus-toggle.collapsed:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .plus-minus-toggle.collapsed:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* /Plus Minus Icon/ */ /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: 'FontAwesome'; src: url(../font/fontawesome-webfont.eot); src: url(../font/fontawesome-webfont.eot) format('embedded-opentype'), url(../font/fontawesome-webfont.woff2) format('woff2'), url(../font/fontawesome-webfont.woff) format('woff'), url(../font/fontawesome-webfont.ttf) format('truetype'), url(../font/fontawesome-webfont.svg) format('svg'); font-weight: normal; font-style: normal } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .fa-3-4x { font-size: 3.4em; font-weight: 100; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } /* animate.css -http://daneden.me/animate * Version - 3.5.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * Copyright (c) 2016 Daniel Eden */ /* animate.css -http://daneden.me/animate * Version - 3.5.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -ms-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } /* Vendor prefixes for older browser support */ @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUp { from { opacity: 0; -moz-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInUp { from { opacity: 0; -ms-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUp { from { opacity: 0; -o-transform: translateY(30px); transform: translateY(30px); } to { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: .05s; -moz-animation-delay: .05s; -ms-animation-delay: .05s; -o-animation-delay: .05s; animation-delay: .05s; } .fadeInUp_1 { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: .15s; -moz-animation-delay: .15s; -ms-animation-delay: .15s; -o-animation-delay: .15s; animation-delay: .15s; } .fadeInUp_2 { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: .25s; -moz-animation-delay: .25s; -ms-animation-delay: .25s; -o-animation-delay: .25s; animation-delay: .25s; } .fadeInUp_3 { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: .35s; -moz-animation-delay: .35s; -ms-animation-delay: .35s; -o-animation-delay: .35s; animation-delay: .35s; } /*@media only screen and (min-width: 0px) and (max-width: 1295px) { .tx_list { float:none; margin:0 auto; width:70%; } }*/ /* readmore.js class */ article { position: relative !important; } code { color: #777; } .tx_desc { position: relative; } .tx_desc a { /*padding-top: 20px;*/ height: auto; /*background: linear-gradient(to bottom,rgba(255,255,255,0) 0,white 18%,white 100%);*/ background: transparent; font-size: .85em; font-weight: 300; border: none; outline: none; display: block; text-align: center; } .tx_desc a:hover { border: none; } /* .container { margin: 0 auto; max-width: 960px; }*/ #info +.readmore-js-toggle { padding-bottom: 1.5em; /*border-bottom: 1px solid #999;*/ font-weight: bold; } #demo { padding: 0 50%; } .show_btn { display: inline-block; padding: 0px 10px; color: #3b2c87; text-transform: none; height: 50px; } .show_btn:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50px; border: none; /*background: linear-gradient(to bottom,rgba(255,255,255,0) 0,white 18%,white 100%);*/ } .show_btn:hover { background-color: transparent; border-color: transparent; color: #3b2c87; } a div.show_btn, a div.show_btn:hover, .isDisabled div.show_btn { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-delay: initial; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; } .isDisabled { pointer-events: none !important; } .isDisabled div.show_btn { color: transparent; /*animation: color-fadeout .5s; other keywords like "infinite alternate" can be useful here */ -webkit-animation-name: color-fadeout; -moz-animation-name: color-fadeoute; -ms-animation-name: color-fadeout; -o-animation-name: color-fadeout; animation-name: color-fadeout; -webkit-animation-duration: .5s; -moz-animation-duration: .5s; -ms-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; } /*@keyframes color-fadeout { 0% { color: #00726d; } 100% { color: transparent; } }*/ @-webkit-keyframes color-fadeout { 0% { color: #3b2c87; } 100% { color: transparent; } } @-moz-keyframes color-fadeout { 0% { color: #3b2c87; } 100% { color: transparent; } } @-ms-keyframes color-fadeout { 0% { color: #3b2c87; } 100% { color: transparent; } } @-o-keyframes color-fadeout { 0% { color: #3b2c87; } 100% { color: transparent; } } @keyframes color-fadeout { 0% { color: #3b2c87; } 100% { color: transparent; } } /* ==============ReadMore linear gradient check================= */ /* Below is the custom gradient styling. */ [data-readmore] { position: relative; } /* Set default styling of gradient. Note the height of 0. We'll transition the height, rather than the background. I think this makes for a smoother effect. This also has the added benefit of not overlaying the text at the bottom with an absolutely positioned pseudo-element—even if it is transparent—which could prevent text selection. */ [data-readmore]:before { content: ''; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; display: block; background: linear-gradient(rgba(35, 40, 48, 0), rgba(35, 40, 48, 1)); background: -webkit-linear-gradient(rgba(35, 40, 48, 0), rgba(35, 40, 48, 1)); background: -moz-linear-gradient(rgba(35, 40, 48, 0), rgba(35, 40, 48, 1)); background: -ms-linear-gradient(rgba(35, 40, 48, 0), rgba(35, 40, 48, 1)); background: -o-linear-gradient(rgba(35, 40, 48, 0), rgba(35, 40, 48, 1)); /* Be sure to use the same speed value as in your Readmore configuration, keeping in mind that CSS transition speed is stated in seconds. */ -webkit-transition: height .35s; -moz-transition: height .35s; -ms-transition: height .35s; -o-transition: height .35s; transition: height .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } /* Set the height of the gradient to 80 when CLOSED */ [data-readmore][aria-expanded="false"]:before, /* Also when transitioning from OPEN to CLOSED */ [data-readmore][aria-expanded="true"].transitioning:before { height: 80px; } /* This isn't strictly necessary, but I think it makes for a smoother effect. */ /* Set the height of the gradient to 0 when transitioning from CLOSED to OPEN */ [data-readmore][aria-expanded="false"].transitioning:before { height: 0; } @media only screen and (max-width: 1100px) { :root { --padding: 45px; } .gradient_mask{ font-size: 10em; } .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro { /*background-position: center -150px;*/ /* height: 60%; */ height: 60vh; min-height: 350px; max-height: 500px; } /* .main_cont { width: 85%; } */ .video_container{ width: 85%; } } @media only screen and (max-width: 1000px) { .main_cont { width: 80%; } } @media only screen and (max-width: 900px) { body { font-size: 14px; } :root { --fs-2: calc(var(--base-font-size) * 1.45); --padding: 35px; } .element_text_2 { opacity: .75; font-size: 3em; } .element_img_cont:after { opacity: 0; } } @media only screen and (max-width: 850px) { .gradient_mask{ font-size: calc(var(--base-font-size) * 9); } } @media only screen and (max-width: 800px) { :root { --fs-1: calc(var(--base-font-size) * 4.5); --fs-5: calc(var(--base-font-size) * 3); } .gradient_mask{ font-size: calc(var(--base-font-size) * 9); } /* .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro { background-position: center bottom; background-attachment: local; background-size: cover; min-height: 450px; max-height: 450px; height: 450px; overflow: hidden; } */ .tx1 { left: 50%; top: 30%; -webkit-transform: translate(-50%, -120%); -moz-transform: translate(-50%, -120%); -ms-transform: translate(-50%, -120%); -o-transform: translate(-50%, -120%); transform: translate(-50%, -120%); width: 100%; height: auto; text-align: center; } .if_icons_cont { width: 65%; height: 100px; left: 50%; top: 60%; -webkit-transform: translate(-50%, -110%); -moz-transform: translate(-50%, -110%); -ms-transform: translate(-50%, -110%); -o-transform: translate(-50%, -110%); transform: translate(-50%, -110%); } .if_icon { width: 49.9%; min-height: 125px; } .if_icon:nth-child(3), .if_icon:nth-child(4) { margin-top: 25px; } .if_icon img { width: 40px; height: 40px; display: inline-block; } .if_intro_txt { margin-top: 15px; } .main_cont { margin: 50px auto; } .video_container{ width: 85%; } .tx_cont { width: 100%; } .img_cont { width: 100%; border: 0; padding: 0; } .tx_list { float: none; margin: 50px auto; width: 85%; } .tx_list li h8 { width: 120px; padding-right: 10px; padding-top: 5px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-weight: 400; /*text-transform: uppercase;*/ font-size: 1.55em; line-height: 1.6; /*color:rgb(45,45,45);*/ display: table-cell; vertical-align: text-top; } .tx_list li h9 { display: table-cell; vertical-align: top; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-weight: 300; line-height: 1.45; letter-spacing: .3px; text-align: left; color: #3b2c87; font-size: 1.65em; padding-left: 10px; padding-top: 5px; } .element_text_2 { opacity: .75; font-size: 3em; } .element_img_cont:after { opacity: 0; } } @media only screen and (max-width: 600px) { .gradient_mask{ font-size: 7.5em; } /* awards section */ .if_awards_cont, .if_awards_cont_1 { width: 100%; height: 75px; position: relative; } .if_award_2 { width: 49%; display: inline-table; float: left; text-align: center; margin: 25px auto; } .if_award_3 { width: 49%; display: inline-table; float: left; text-align: center; margin: 25px auto; } .if_award_1 img, .if_award_2 img, .if_award_3 img { width: 49%; height: 50%; max-width: 200px; min-width: 150px; display: inline-block; } } @media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { :root { --fs-1: calc(var(--base-font-size) * 2.5); --fs-5: calc(var(--base-font-size) * 2.5); } .gradient_mask{ font-size: calc(var(--base-font-size) * 7); } /* .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro { background-position: center top; height: 400px; background-attachment: local; min-height: 400px; max-height: 400px; } */ .tx_cont { margin-bottom: 10px; } .tx_list { float: none; margin: 0 auto; width: 90%; } .tx1 { width: 95%; top: 30%; -webkit-transform: translate(-50%, -150%); -moz-transform: translate(-50%, -150%); -ms-transform: translate(-50%, -150%); -o-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } .if_icons_cont { width: 85%; height: 100px; left: 50%; top: 65%; -webkit-transform: translate(-50%, -115%); -moz-transform: translate(-50%, -115%); -ms-transform: translate(-50%, -115%); -o-transform: translate(-50%, -115%); transform: translate(-50%, -115%); } .if_icon { width: 49.9%; min-height: 105px; } .video_container{ width: 90%; } .tx_list li h8 { width: 85px; font-size: 1.15em; line-height: 1.7; } .tx_list li h9 { font-size: 1.2em; padding-left: 0px; line-height: 1.4; } .img_cont img { margin-top: 4.5px; } .wb_title { font-size: .8em; display: none; visibility: hidden; } .element_text_2 { font-size: 2.5em; } .element_img_cont:after { opacity: 0; } } @media only screen and (min-width: 0px) and (max-width: 480px) { :root { --fs-1: calc(var(--base-font-size) * 2.5); --fs-5: calc(var(--base-font-size) * 2.5); } .gradient_mask{ font-size: calc(var(--base-font-size) * 6); } /* .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro { background-position: center top; height: 400px; background-attachment: local; min-height: 400px; max-height: 400px; } */ .tx_cont { margin-bottom: 10px; } .tx_list { float: none; margin: 25px auto 50px; width: 90%; } .tx1 { width: 95%; top: 30%; -webkit-transform: translate(-50%, -150%); -moz-transform: translate(-50%, -150%); -ms-transform: translate(-50%, -150%); -o-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } .if_icons_cont { width: 90%; height: 100px; left: 50%; top: 65%; -webkit-transform: translate(-50%, -115%); -moz-transform: translate(-50%, -115%); -ms-transform: translate(-50%, -115%); -o-transform: translate(-50%, -115%); transform: translate(-50%, -115%); } .if_intro_txt_1, .if_intro_txt_2 { font-size: 1.3em; } .if_icon { width: 49.9%; min-height: 110px; } .video_container{ width: 90%; } .tx_list li h8 { width: 85px; font-size: 1.15em; line-height: 1.7; } .tx_list li h9 { font-size: 1.2em; padding-left: 0px; padding-top: 7px; line-height: 1.4; } .img_cont img { margin-top: 4.5px; } .wb_title { font-size: .8em; display: none; visibility: hidden; } .element_text_2 { font-size: 2em; } .element_img_cont:after { opacity: 0; } } @media only screen and (max-width: 455px) { .double_pics_r, .double_pics_l { margin: 25px 0% 0% 0% !important; float: none; width: 100%; } .double_pics_r { margin-top: 25px !important; } .picture { margin: 25px 0% 0% 0% !important; width: 100%; } /* .picture .img_fitHeight { position: absolute !important; left: 50%; top: 50%; max-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 100%; width: auto; max-width: none; } */ /* .img_wrapper { padding-top: 100%; } */ /* .img_cont img { position: relative; width: 100%; padding-top: 11.5em; } .img_cont div { overflow: hidden; margin: 0px auto; width: 100%; height: 100%; display: block; } */ .picture { display: block; /* padding-top: 100%; */ position: relative; overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; margin-top: 20px; } /* .image { position: absolute !important; left: 50%; top: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } */ } @media only screen and (max-width: 380px) { body{ font-size: 14px; } :root { --padding: 25px; } .gradient_mask{ font-size: calc(var(--base-font-size) * 4.5); } } @media only screen and (max-width: 300px) { body { font-size: 4.8vw; } :root { --base-font-size: 4.8vw; } .gradient_mask{ font-size: 4em; } .main_cont { width: 90%; } .if_award_1, .if_award_2, .if_award_3 { width: 100%; display: inline-table; float: left; text-align: center; margin: 25px auto; } .if_award_1 img, .if_award_2 img, .if_award_3 img { width: 100%; height: 50%; max-width: 100px; min-width: 150px; display: inline-block; } .section_ifr_1{ padding-top: 30px; padding-bottom: 30px; } } @media only screen and (max-width: 250px) { .gradient_mask{ font-size: 3.5em; word-break: break-word; } } @media only screen and (max-width: 100px) { body { font-size: 5px; } :root { --base-font-size: 5px; } .p1_intro, .p2_intro, .p3_intro, .p4_intro, .p5_intro, .tx_desc, .proj_subtitle, .double_pics_r, .double_pics_l, .picture { min-width: 100px; } }