@font-face { font-family:"Open Sans"; font-weight:300; font-style:normal; src: url("../g-font/open_sans/Light/OpenSans-Light.eot"); src: url("../g-font/open_sans/Light/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../g-font/open_sans/Light/OpenSans-Light.woff2") format("woff2"), url("../g-font/open_sans/Light/OpenSans-Light.woff") format("woff"), url("../g-font/open_sans/Light/OpenSans-Light.ttf") format("truetype"), url("../g-font/open_sans/Light/OpenSans-Light.svg#OpenSansLight") format("svg"); font-display: swap; } @font-face { font-family:"Open Sans"; font-weight:400; font-style:normal; src: url("../g-font/open_sans/Regular/OpenSans-Regular.eot"); src: url("../g-font/open_sans/Regular/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../g-font/open_sans/Regular/OpenSans-Regular.woff2") format("woff2"), url("../g-font/open_sans/Regular/OpenSans-Regular.woff") format("woff"), url("../g-font/open_sans/Regular/OpenSans-Regular.ttf") format("truetype"), url("../g-font/open_sans/Regular/OpenSans-Regular.svg#OpenSansRegular") format("svg"); font-display: swap; } @font-face { font-family:"Open Sans"; font-weight:600; font-style:normal; src: url("../g-font/open_sans/Semibold/OpenSans-Semibold.eot"); src: url("../g-font/open_sans/Semibold/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("../g-font/open_sans/Semibold/OpenSans-Semibold.woff2") format("woff2"), url("../g-font/open_sans/Semibold/OpenSans-Semibold.woff") format("woff"), url("../g-font/open_sans/Semibold/OpenSans-Semibold.ttf") format("truetype"), url("../g-font/open_sans/Semibold/OpenSans-Semibold.svg#OpenSansSemibold") format("svg"); font-display: swap; } @font-face { font-family:"Open Sans"; font-weight:700; font-style:normal; src: url("../g-font/open_sans/Bold/OpenSans-Bold.eot"); src: url("../g-font/open_sans/Bold/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../g-font/open_sans/Bold/OpenSans-Bold.woff2") format("woff2"), url("../g-font/open_sans/Bold/OpenSans-Bold.woff") format("woff"), url("../g-font/open_sans/Bold/OpenSans-Bold.ttf") format("truetype"), url("../g-font/open_sans/Bold/OpenSans-Bold.svg#OpenSansBold") format("svg"); font-display: swap; } /*! * 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; transform: translate(0, 0); } .fa-3-4x { font-size: 2.8em; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-angle-up::before { content: "\f106"; } .fa-angle-down::before { content: "\f107"; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transform: none !important; backface-visibility: hidden; will-change: auto; } html { overflow-y: scroll; } body { /*background-color: rgb(248,248,248);*/ margin: 0px; font-size: 14px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*color:#222222; -webkit-font-smoothing: antialiased; Fix for webkit rendering */ width: 100%; min-width: 100%; overflow: hidden; background-color: #f9fafc; -webkit-tap-highlight-color: transparent; -webkit-transition: background-color .8s ease; -moz-transition: background-color .8s ease; -ms-transition: background-color .8s ease; -o-transition: background-color .8s ease; transition: background-color .8s ease; overflow-x: hidden; transform: translateZ(0); } /*===== Scrollbars Style =======*/ ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .0); width: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1); -webkit-transition: linear 300ms opacity; -moz-transition: linear 300ms opacity; -o-transition: linear 300ms opacity; transition: linear 300ms opacity; } ::-webkit-scrollbar-thumb { background-color: gray; background-color: rgba(0, 0, 0, 0.5); } ::-webkit-scrollbar-track:hover { background-color: rgba(253, 253, 253, .5); } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .5); cursor: auto !important; } /*==== customized selection ===*/ ::-webkit-selection { color: rgb(253, 253, 253); background: #00726d; } ::-moz-selection { /* Code for Firefox */ color: rgb(253, 253, 253); background: #00726d; } ::selection { color: rgb(253, 253, 253); background: #00726d; } a, a:active, a:focus, a:visited { outline: none; } .if_1_intro { background: -webkit-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/esch_iframe.jpg); background: -moz-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/esch_iframe.jpg); background: -ms-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/esch_iframejpg); background: -o-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/esch_iframe.jpg); background: linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/esch_iframe.jpg); background-repeat: no-repeat; background-attachment: fixed !important; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 40% 50%; } .if_2_intro { background: -webkit-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/bong_iframe.jpg); background: -moz-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/bong_iframe.jpg); background: -ms-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/bong_iframe.jpg); background: -o-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/bong_iframe.jpg); background: linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)), url(../images/bong_iframe.jpg); background-repeat: no-repeat; background-attachment: fixed !important; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 60% -20%; } .if_1_intro, .if_2_intro { height: 70% !important; height: 70vh !important; min-height: 450px; max-height: 600px; position: relative !important; overflow: hidden; } .if_txt_into { width: 85%; max-width: 1650px; margin: 0px auto; /* position: relative;*/ min-height: 150px; flex-direction: column; justify-content: center; align-items: center; display: flex; height: 70%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bg_local { background-attachment: local; } .prefoot_bong { background-image: -webkit-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/lotus-1205631_1920.jpg); background-image: -moz-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/lotus-1205631_1920.jpg); background-image: -ms-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/lotus-1205631_1920.jpg); background-image: -o-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/lotus-1205631_1920.jpg); background-image: linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/lotus-1205631_1920.jpg); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50%; background-attachment: fixed; position: relative; width: 100%; height: 100%; } .prefoot_esch { background-image: -webkit-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/mountain-maple-3841575_1920.jpg); background-image: -moz-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/mountain-maple-3841575_1920.jpg); background-image: -ms-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/mountain-maple-3841575_1920.jpg); background-image: -o-linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/mountain-maple-3841575_1920.jpg); background-image: linear-gradient(to right bottom, rgba(133, 105, 136, 0.85), rgba(29, 119, 123, 0.85)), url(../images/mountain-maple-3841575_1920.jpg); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50%; background-attachment: fixed; position: relative; width: 100%; height: 100%; } .prefoot_txt { width: 80%; max-width: 800px; padding: 99px 0; margin: 0 auto; } .prefoot_quote { margin: 0 auto; line-height: 1.5; font-size: 1.5em; color: #ebedf0; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; padding: 10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .quote_sign_1, .quote_sign_2 { font-size: 4em; font-weight: 400; display: inline-block; line-height: 0; color: #1d777b; } .quote_sign_1 { vertical-align: middle; } .quote_sign_2 { vertical-align: sub; } section { /* min-height: 360px; padding: 50px 0px 100px;*/ padding: 50px 0px; text-align: center; width: 100%; } section:nth-child(1) { /* min-height: 360px; padding: 50px 0px 100px;*/ padding-top: 0px; text-align: center; } .intro_bg { height: 34.67em; height: 50vh; min-height: 485px; position: relative !important; background: rgb(228, 228, 228); /*overflow: scroll;*/ display: block; overflow: hidden; } .name_quote_1 { position: absolute; left: 50%; top: 45%; -webkit-transform: translate(-50%, -45%); -moz-transform: translate(-50%, -45%); -ms-transform: translate(-50%, -45%); -o-transform: translate(-50%, -45%); transform: translate(-50%, -45%); font-size: 3em; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; margin-right: -100px; z-index: 99; width: 70%; float: right; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*text-align: left;*/ } .sign_quote_1 { font-size: .7em; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 25px; text-indent: -.75em; padding-left: .75em; /*text-align: left;*/ } .quote_sign_a, .quote_sign_b { font-size: 4em; font-weight: 400; display: inline-block; line-height: 0; color: #1d777b; } .quote_sign_a { vertical-align: middle; } .quote_sign_b { vertical-align: sub; width: 20px; height: 20px; margin-left: 20px; margin-top: -90px; } .title { font-size: 5.5em; text-align: center; z-index: 1; margin-top: .5em; line-height: 1.5; letter-spacing: -0.015em; font-weight: 600; color: black; font-family: "Open Sans", Arial, Helvetica, sans-serif; } .section { width: 100%; position: relative; padding-top: 0px; /*top: -300px;*/ } .slide .grid { height: 100%; } .desc_txt { width: 49%; margin: 0 auto; padding: 0px; text-align: left; font-size: 1.5em; color: #262729; line-height: 1.5; letter-spacing: -0.015em; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .desc_txt p { margin: 12.5px auto; /* Careful, this breaks the word wherever it is without a hyphen */ overflow-wrap: break-word; word-wrap: break-word; /* Adds a hyphen where the word breaks */ -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /*font-size:inherit;*/ } .grid { /* display: block;*/ width: 80%; height: 100%; max-width: 1735px; vertical-align: middle; margin: 0 auto; position: relative; display: inline-block; } .grid-item { width: 60%; /*margin: 0 0 10px 0; background: transparent; width: 100%; padding: 25px 0px; */ display: inline-block; vertical-align: middle; } .card { width: 85%; display: grid; align-items: center; justify-content: center; vertical-align: bottom; margin: 0 auto; height: 100%; } .cont_img { width: 80%; height: auto; overflow: hidden; margin: 0 auto; display: flex; padding-bottom: 100%; min-height: 220px; min-width: 220px; } .grid-item-sm-1-4 { width: 25%; } .grid_item_img { width: 39.8%; display: inline-block; } .grid_item_txt { /*width: 100%;*/ display: inline-block; } .grid-item-sm-3-4 { width: 75%; } .grid-item-sm-1 { width: 100%; } .left { float: left; } .right { float: right; } .spacer { width: 100%; padding-top: 50px; padding-bottom: 50px; } .foot_spacer { padding: 25px 0px; } .cont_1st { width: 80%; margin: 0 auto; max-width: 800px; } .sec_title { width: 100%; text-align: center; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 3em; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; margin: 0px auto 50px auto; } .wh { color: #ebedf0; } .blk { color: #262729; } .text_block { display: inline-block; vertical-align: middle; font-size: 1.3em; color: #262729; line-height: 1.5; letter-spacing: -0.015em; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; } .name_cont { position: relative; /*top: 22%; left: 20%; height: 13%; width: 100%; margin: 0% 0 0 -22%;*/ } .name_title { font-size: 4em; text-align: center; z-index: 1; /*1margin-top:.5em;*/ } .name_1 { /*color: #1d777b;*/ background-image: -webkit-linear-gradient(to left bottom, rgb(133, 105, 136), rgb(29, 119, 123)); /* For Chrome and Safari */ background-image: -moz-linear-gradient(to left bottom, rgb(133, 105, 136), rgb(29, 119, 123)); /* For old Fx (3.6 to 15) */ background-image: -ms-linear-gradient(to left bottom, rgb(133, 105, 136), rgb(29, 119, 123)); /* For pre-releases of IE 10*/ background-image: -o-linear-gradient(to left bottom, rgb(133, 105, 136), rgb(29, 119, 123)); /* For old Opera (11.1 to 12.0) */ background-image: linear-gradient(to right bottom, rgb(133, 105, 136), rgb(29, 119, 123)); /* Standard syntax; must be last */ color: transparent; -webkit-background-clip: text; background-clip: text; } .name_2 { color: #856988; } .name_subtitle { text-align: left; font-size: 2.5em; color: #262729; line-height: 1.35; letter-spacing: -0.015em; font-weight: 800; font-family: "Open Sans", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*margin-top:1em;*/ } .name_desc { font-size: 1.5em; color: #262729; line-height: 1.5; letter-spacing: -0.015em; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; margin-top: 2em; } .big_lett { width: 100%; font-size: 25em; line-height: 0; color: rgb(235, 237, 240); font-weight: 600; text-transform: uppercase; position: absolute; top: .75em; z-index: -1; /* mix-blend-mode: soft-light; */ } .bl_1 { text-align: center; left: 28%; top: 75px; } .bl_2 { text-align: center; left: -28%; top: 75px; } /* Blocked elements for mobile and touch device */ .section_blocked { padding: 100px 0px; /* padding-bottom: 150px; */ } .nc_blocked { z-index: 2 !important; transform: translate3d(0px, 100px, 0px) !important; } .bl_blocked { z-index: 1 !important; opacity: .8; transform: translate3d(0px, 100px, 0px) !important; } /* /Blocked elements for mobile and touch device/ */ .cont_gr { width: 85%; display: inline-block; vertical-align: middle; /*padding: 25px 0px;*/ position: relative; margin: 0 auto; height: 45em; background-color: #1d777b; } /*.pres_img_1 { background: url(../images/profile_1.jpg) no-repeat; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50%; position: relative; width: 100%; height: 100%; } .pres_img_2 { background: url(../images/profile_2.jpg) no-repeat; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50%; position: relative; width: 100%; height: 100%; margin-top: -300px; } */ /* service */ .grid-item-sm-1 { width: 100%; } .skills_container { position: relative; width: 90%; max-width: 1650px; margin: 0px auto; margin-top: 50px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .border_am { border-top: 3px solid #00726d; width: 70px; margin: 20px auto 0; } .boxskillsinside { width: 100%; height: 100%; margin: 0 auto; vertical-align: middle; text-align: left; position: relative; display: inline-block; } .skillsimg { position: relative; padding: 0%; width: 32%; height: 100%; display: inline-block; float: left; margin: 1% 1% 0% 1%; } .skillsimg:first-child { margin-left: 0%; } .skillsimg:last-child { margin-right: 0%; } .cont_skillsimg { height: auto; margin: 0 auto; overflow: hidden; text-align: center; /*min-height:250px;*/ margin-top: -1px; /*margin-bottom: 40px; margin-left:-1px;*/ width: 89.3%; padding: 0% 0%; } .cont_skillsimg img { width: 65px; height: auto; margin: 0 auto; /*float:left;*/ } .cont_skillsimg object { width: 100px; height: auto; margin: 0 auto; } .cont_skillstext { width: 85%; height: 100%; margin: 0 auto; text-align: center; } .skilldesc { margin: 0 auto; /*text-align:left;*/ } .proj_title { font-size: 1.358em; font-weight: 600; letter-spacing: -0.015em; /*text-transform: capitalize;*/ text-transform: uppercase; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-family: "Open Sans", Arial, Helvetica, sans-serif; line-height: 1; color: #262729; margin: 25px auto; text-align: center; } .proj_desc { font-size: 1.5em; color: #262729; line-height: 1.5; letter-spacing: -0.015em; font-weight: 00; font-family: "Open Sans", Arial, Helvetica, sans-serif; } /* readmore.js class */ /* == inear gradient shadow bottom readmore div .shadow{ background: linear-gradient(rgba(248, 248, 248, 0), rgba(248, 248, 248, 1)); position: absolute; bottom: 0px; width: 100%; height: 50px; display: inline-block; } == class switch shadow bottom readmore div .shadow{ position: absolute; bottom: 0px; width: 100%; height: 50px; display: inline-block; } .shadow_1{ background: linear-gradient(rgba(248, 248, 248, 0), rgba(248, 248, 248, 1)); } .shadow_2{ background: linear-gradient(rgba(140, 186, 187, 0), rgba(140, 186, 187, 1)); } */ article { position: relative !important; /*box-shadow: inset 5px -14px 90px 20px rgba(255,255,255,1);*/ } code { color: #777; } .desc_txt { position: relative; } .desc_txt 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; } .desc_txt 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: rgb(62,61,64); text-transform: none; height: 50px; } .show_btn:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50px; border:none; }*/ .show_btn { flex: 1 1 auto; border-radius: 999px; -webkit-font-smoothing: antialiased; display: inline-block; color: #ebedf0; text-align: center; outline: none; margin: 0 auto; cursor: pointer; background-size: 200% auto; background-image: linear-gradient(to right, rgba(133, 105, 136, 0.9) 0%, rgba(29, 119, 123, 0.9) 55%, rgba(133, 105, 136, 0.9) 100%); -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } .show_btn i { display: flex; justify-content: center; width: 30px; height: 30px; padding: 10px; line-height: 31px; -webkit-font-smoothing: antialiased; z-index: 3; position: relative; } .show_btn_txt { padding: 10px 20px 9px; float: left; line-height: 1.2; font-size: 1.2em; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; letter-spacing: -0.015em; text-transform: uppercase; -webkit-font-smoothing: antialiased; z-index: 3; position: relative; } .show_btn:hover { background-position: right center; /* change the direction of the change here */ } .show_btn, .show_btn_txt:hover { -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } .show_btn:hover { background-color: transparent; border-color: transparent; color: #ebedf0; } a div.show_btn, a div.show_btn:hover, .isDisabled div.show_btn { -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } .isDisabled { pointer-events: none !important; display: none !important; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } .isDisabled div.show_btn { background-image: none; color: transparent; pointer-events: none; cursor: none; opacity: 0; /*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; } /* 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(240, 240, 240, 0), rgba(240, 240, 240, 1)); -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; } /*======= Contact_Section =======*/ .cnt_container { width: 82%; margin: 0 auto; max-width: 1650px; position: relative; } .iframe_cont { width: 100%; max-width: 800px; /*width: 55.9%;*/ /*padding-left: 3.6%;*/ display: inline-block; vertical-align: middle; } .ct_cont { width: 100%; margin: 0 auto; max-width: 900px; display: inline-block; vertical-align: middle; /*margin-top: -75px;*/ margin-top: 50px; } .ct_itme_cont { width: 49%; display: inline-block; vertical-align: middle; margin: 0 auto; } .ct_itme_cont a { display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-decoration: none; outline: none; } .ct_icon_txt { font-size: 1.5em; font-weight: 600; width: auto; margin-top: 20px; color: #262729; letter-spacing: -0.015em; display: block; vertical-align: middle; text-decoration: underline 2px rgba(80, 80, 80, 0); } .ct_itme_cont a:hover .ct_icon_txt { text-decoration-color: rgba(80, 80, 80, 1); -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; transition: all 0.35s ease-out; } .contact_txt { font-size: 1.1em; font-weight: 600; width: auto; margin-top: 4%; color: #262729; letter-spacing: -0.015em; display: inline-block; vertical-align: middle; } .contact_txt a { color: #262729; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-decoration: none; outline: none; } .contact_txt a:hover { color: #00716F; } /*.contact_txt:first-child{ margin-top:0px; }*/ .ct_icon_email { background: url(../images/icons/email_1.png)no-repeat; background: url(../images/icons/email_1.svg) no-repeat, linear-gradient(transparent, transparent); } .ct_icon_pin { background: url(../images/icons/placeholder_1.png) no-repeat; background: url(../images/icons/placeholder_1.svg) no-repeat, linear-gradient(transparent, transparent); } .ct_icon_phone { background: url(../images/icons/phone.png) no-repeat; background: url(../images/icons/phone.svg) no-repeat, linear-gradient(transparent, transparent); } .ct_icon_email, .ct_icon_pin, .ct_icon_phone { background-size: 37px 37px; background-position: left center; text-align: left; width: 37px; height: 37px; display: inline-block; vertical-align: middle; margin: 30px auto 0px auto; } .contact_txt, .ct_icon_email, .ct_icon_pin, .ct_icon_phone { vertical-align: middle; } .writeme { width: 100%; height: 100%; min-height: 305px; overflow: hidden; display: flex; } .c_form_title { width: 100%; max-width: 850px; padding: 0px; margin: 0 auto; font-family: "Open Sans", Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; /*-webkit-font-smoothing: antialiased; font-weight:300; font-size:2em; line-height:1.5;*/ font-size: 1.5em; font-weight: 600; letter-spacing: -0.015em; text-align: center; color: #262729; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; margin-bottom: 30px; margin-top: -8px; } /* Footer */ .footer { overflow: hidden !important; position: relative; width: 100%; height: 3px; /*height:100%; z-index:1;*/ text-align: center; /*background-color:rgb(62,61,64);*/ background-image: -webkit-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)); background-image: -moz-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)); background-image: -ms-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)); background-image: -o-linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)); background-image: linear-gradient(to right bottom, rgba(133, 105, 136, 0.7), rgba(29, 119, 123, 0.7)); } /*@keyframes color-fadeout { 0% { color: #00726d; } 100% { color: transparent; } }*/ @-webkit-keyframes color-fadeout { 0% { color: #ebedf0; } 100% { color: transparent; } } @-moz-keyframes color-fadeout { 0% { color: #ebedf0; } 100% { color: transparent; } } @-o-keyframes color-fadeout { 0% { color: #ebedf0; } 100% { color: transparent; } } @keyframes color-fadeout { 0% { color: #ebedf0; } 100% { color: transparent; } } /* ==============ReadMore linear gradient check================= */ .openifbtn_cont { margin: 0 auto; width: 100%; margin-top: 50px; display: inline-block; } a.open_if_btn, .contact_btn { flex: 1 1 auto; border-radius: 999px; -webkit-font-smoothing: antialiased; display: inline-block; color: #fdfdfd; text-align: center; outline: none; margin: 0 auto; cursor: pointer; background-size: 200% auto; background-image: linear-gradient(to right, rgba(133, 105, 136, 1) 0%, rgba(29, 119, 123, 1) 55%, rgba(133, 105, 136, 1) 100%); -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } .contact_btn {} a.open_if_btn:hover, a.contact_btn:hover { background-position: right center; } .open_if_btn_txt, .cnt_btn_txt { padding: 10px 20px 9px; float: left; line-height: 1.2; font-weight: 600; font-family: "Open Sans", Arial, Helvetica, sans-serif; letter-spacing: -0.015em; text-transform: uppercase; -webkit-font-smoothing: antialiased; z-index: 3; position: relative; } .open_if_btn_txt { font-size: .86em; } .cnt_btn_txt { font-size: 1.3em; } .cnt_btn_txt_resp { display: none; } a.open_if_btn, a.open_if_btn:hover { -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; transition-property: all; transition-duration: 0.35s; transition-timing-function: ease; transition-delay: initial; } a:visited { text-decoration: none; } a:link, a:hover { text-decoration: none; cursor: pointer; } @media only screen and (max-width: 1124px) { /*.if_2_intro{ height: 60%; height: 60vh; min-height: 350px; max-height: 500px; }*/ .name_quote_1 { width: 75%; } .desc_txt { width: 60%; } /* contact*/ .iframe_cont { width: 100%; } } /* referring to 1100px main page */ @media only screen and (max-width: 989px) { body { font-size: 13px; } .if_1_intro, .if_2_intro { background-attachment: local !important; min-height: 370px; max-height: 370px; } .if_1_intro { background-position: 40% 0%; } .if_2_intro { background-position: 60% 0%; } .name_quote_1 { font-size: 2.5em; } } @media only screen and (max-width: 900px) { section:nth-child(1) { padding-top: 0px; padding-bottom: 25px !important; text-align: center; } .spacer { width: 100%; padding-top: 1% !important; padding-bottom: 5% !important; } .foot_spacer { padding: 25px 0px; } } @media only screen and (max-width: 800px) { body { font-size: 13px; } .name_quote_1 { widows: 90%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -40%); -moz-transform: translate(-50%, -40%); -ms-transform: translate(-50%, -05%); -o-transform: translate(-50%, -40%); transform: translate(-50%, -40%); font-size: 2.5em; } .desc_txt { width: 80%; } /* contact*/ .writeme { height: 305px; } } /* referring to 889px main page */ @media only screen and (max-width: 800px) { .name_quote_1 { widows: 90%; left: 50%; top: 40%; -webkit-transform: translate(-50%, -40%); -moz-transform: translate(-50%, -40%); -ms-transform: translate(-50%, -05%); -o-transform: translate(-50%, -40%); transform: translate(-50%, -40%); font-size: 2.5em; } .slide .grid { margin-bottom: 50px; } .card { width: 100% !important; max-height: none !important; max-width: none !important; } .grid_item_img { width: 65%; margin: 0 auto; display: inline-block; } .cont_img { width: 100%; } .grid_item_txt { width: 100%; margin: 0 auto; display: inline-block; } .grid_cont div.grid:nth-child(3) { display: flex !important; flex-flow: row wrap !important; } .grid_cont div.grid:nth-child(3) .grid_item_img { order: 1; } .grid_cont div.grid:nth-child(3) .grid_item_txt { order: 2; } .big_lett { mix-blend-mode: soft-light; } .bl_1 { text-align: center; left: 285px; top: 75px; } .bl_2 { text-align: center; left: -285px; top: 75px; } .ct_cont, .ct_itme_cont { width: 100%; } .writeme { height: 385px; } .foot_spacer { padding: 25px 0px; } } /* referring to 650px main page */ @media only screen and (max-width: 584px) { .name_quote_1 { line-height: 1.1; font-size: 2.3em; } .bl_1 { text-align: center; left: 150px; top: 75px; } .bl_2 { text-align: center; left: -150px; top: 75px; } } @media only screen and (max-width: 480px) { body { font-size: 13px; } .if_1_intro { background-position: 65% 50%; } .if_2_intro { background-position: 40% 0%; } /* .prefoot_esch {} */ .prefoot_bong { background-position: 20% 50%; background-attachment: local; } .spacer { width: 100%; padding-top: 5% !important; padding-bottom: 5% !important; } .slide .grid { margin-bottom: 0px; } .grid_cont { margin-bottom: 100px; } .sec_title { font-size: 2.5em; letter-spacing: -0.015em; } .name_subtitle { font-size: 2em; } .name_quote_1 { left: 50%; top: 45%; -webkit-transform: translate(-50%, -40%); -moz-transform: translate(-50%, -40%); -ms-transform: translate(-50%, -05%); -o-transform: translate(-50%, -40%); transform: translate(-50%, -40%); font-size: 1.8em; } .name_desc { font-size: 1.5em; letter-spacing: -0.005em; line-height: 1.5em; } .if_1_intro, .if_2_intro { background-attachment: local !important; min-height: 450px; max-height: 450px; } .ct_itme_cont { width: 100%; margin: 25px auto; } .ct_icon_email, .ct_icon_pin, .ct_icon_phone { margin: 0px auto; } /*.if_2_intro, .if_1_intro{ background-attachment: local; height:70% !important; }*/ .cnt_btn_txt { display: none; } .cnt_btn_txt_resp { padding: 10px 20px 9px; float: left; line-height: 1.2; font-size: 1.3em; font-weight: 400; font-family: "Open Sans", Arial, Helvetica, sans-serif; letter-spacing: -0.005em; text-transform: uppercase; -webkit-font-smoothing: antialiased; z-index: 3; position: relative; display: inline-block; } .foot_spacer { padding: 12.5px 0px; } } @media only screen and (max-width: 250px) { body { font-size: 5.3vw; } }