@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; } body { /* background-color: rgb(240,240,240); */ margin: 0px; font-size: 14px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-weight: 400; color: var(--wh-color); /*-webkit-font-smoothing: antialiased; Fix for webkit rendering */ width: 100%; min-width: auto; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; background-color: #232830; -webkit-transition: background-color 500ms 0s; -moz-transition: background-color 500ms 0s; -ms-transition: background-color 500ms 0s; -o-transition: background-color 500ms 0s; transition: background-color 500ms 0s; } ::-webkit-selection { color: rgb(235, 235, 235); background: #3b2c87; } ::-moz-selection { color: rgb(235, 235, 235); background: #3b2c87; } ::selection { color: rgb(235, 235, 235); background: #3b2c87; } :root { --wh-color: rgb(235, 235, 235); /* --blue-color: #3b2c87; */ --blue-color: rgb(59,44,135); --grey-color: #232830; --fs-1: 13em; --fs-2: 1.45em; --fs-3: 2.1em; --fs-4: 1.3em; --fs-5: 2.5em; --fs-6: 1.45em; --fs-7: 5em; --padding: 50px; } .typography_1 { font-size: var(--fs-1); font-weight: 600; line-height:1; 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; } .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_3 { font-size: var(--fs-3); color: var(--wh-color); font-weight: 600; 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; } .typography_4 { /* Menu */ font-size: var(--fs-4); 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; } .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; } .typography_6 { font-size: var(--fs-6); color: var(--wh-color); font-weight: 400; 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; } .typography_7 { font-size: var(--fs-7); color: var(--blue-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; } /* Page Loader */ #loading { position: fixed; width: 100%; height: 100vh; background: #232830; z-index: 99999999999; } .noScrollSimple { overflow: hidden; touch-action: none; } .btn-6 { position: relative; overflow: hidden; /* border: 2px solid #ebebeb; */ width: 150px; font-weight: 600; padding: 15px 5px; display: inline-block; text-decoration: none; margin-top: 35px; text-align: center; -webkit-border-bottom-right-radius: 25px; -moz-border-bottom-right-radius: 25px; -ms-border-bottom-right-radius: 25px; -o-border-bottom-right-radius: 25px; border-bottom-right-radius: 25px; -webkit-border-top-left-radius: 25px; -moz-border-top-left-radius: 25px; -ms-border-top-left-radius: 25px; -o-border-top-left-radius: 25px; border-top-left-radius: 25px; } .proj_side a{ background-color: #31227b; z-index: 1; } .btn-6 span { position: absolute; display: block; width: 0px; height: 0px; border-radius: 50%; background-color: #3b2c87; -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -moz-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -ms-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -o-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .btn-6:hover { color: var(--wh-color); } .btn-6:hover span { width: 225%; height: 562.5px; } .btn-6:active { background-color: #3b2c87; } .mask_cont { width: 77%; max-width: 1250px; /* overflow: hidden; */ margin: 0 auto; text-align: center; background: inherit; will-change: transform; } /*.gradient_mask, .gradient_mask_2*/ .sectitle, .sectitle_2 { /* width:200px; */ height:100%; margin-top: 100px; margin:0 auto; text-transform: uppercase; text-align:center; /* -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ display: inline-block; will-change: transform; } .sectitle{ color:#2D323C; } .sectitle_2{ /* color:rgb(93,65,206); */ /* color: rgb(93,65,206) officual previous */ color: rgb(59,44,135); } .sectitle div#en .sectitle_2 div#en{ display: inline !important; } .spacer{ margin-top:150px;} .section_bl { width: 100%; position: relative; padding-top: 75px; padding-bottom: 100px; overflow: hidden; /* background-color: rgb(35, 40, 48); */ background-color: #232830; color: var(--wh-color); text-align: center; } .section_bl2 { width: 100%; position: relative; padding-top: 75px; padding-bottom: 100px; overflow: hidden; /* background-color: #2d2dfc; */ /* background-color: rgb(83,55,196); */ background-color: rgb(49,34,123); /* background-color: rgb(78,50,194); Official previous */ color:rgb(35, 40, 45); } .section_bl3 { width: 100%; position: relative; padding-top: 75px; padding-bottom: 100px; overflow: hidden; background-color: #2D323C; color:rgb(40, 45, 50); text-align: center; } .block_cont { display: inline-block; vertical-align: middle; line-height: 1.5; font-size: 1.4em; letter-spacing: 0.02em; /* font-weight:300; */ font-weight: 400; color: var(--wh-color); font-family: 'Open Sans', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Vision */ .row_cont_vision { width: 77%; max-width: 1250px; min-height: 600px; } .row_cont_vision{ vertical-align: middle; margin: 0 auto; position: relative; display: flex; margin-bottom: 50px; background: inherit; overflow: hidden; } .vision_line_bg{ display: block; position: absolute; top: 50px; bottom: 50px; width: 100%; background-image: -webkit-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -moz-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -ms-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -o-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-position: center center; -webkit-background-clip: content-box; -moz-background-clip: content-box; -ms-background-clip: content-box; -o-background-clip: content-box; background-clip: content-box; -webkit-text-fill-color: transparent; /* z-index: 2; */ } /* provaaaa */ .vision_img_cont { display: flex; flex: 1; width: 65%; min-width: 250px; max-width: 320px; position: relative; vertical-align: middle; z-index: 3; height: 100%; /* min-height: 645px; */ margin: auto 0% auto 6%; } /* .vision_img{ background: url("../images/annie-spratt-dDNnVA2Cc5I-unsplash.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%; position: relative; width: 100%; height: auto; -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; } */ .vision_img { position: relative; width: 100%; height: auto; -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; overflow: hidden; } .vision_img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cont_vis_txt{ position: relative !important; width: 60%; vertical-align: middle; text-align: left; /* background-color: #2D333C; display: table-cell;*/ /* padding: 0px var(--padding); */ z-index: 2; } .vision_line_bg_1 { display: none; } .vision_txt_cont{ /* width: 100%; */ display: inline-block; vertical-align: middle; /* padding: 25px 0px; */ text-align: left; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin-right: 5%; padding: 100px var(--padding); } .row_cont_vision, .vision_img_cont, .vision_txt, .vision_line_bg, .vision_img, .vision_img img, .vision_line_bg_1 { will-change: transform; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .services_cont, .kf_container, .cnt_container { width: 77%; max-width: 1250px; } /* .kf_container { width: calc((77% + 4%) - 10px); max-width: 1303px; } */ .contleft { width: 100%; line-height: 1.5; /* font-size: 1.4em; */ letter-spacing: 0.02em; font-weight: 400; color: #cccccc; font-family: 'Open Sans', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; flex: 1; position: relative; margin: 0 auto; vertical-align: middle; display: table; } .vision_img_cont img{ width: 100%; height: 100%; -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; } /* .vision_txt_cont{ width:50%; display: table-cell; vertical-align: middle; } */ /* .vision_txt{ padding-right: 25px; line-height: 1.6em;} */ /* Services */ .services_cont { position: relative; /* width: 84.5%; max-width: 1250px; */ margin: 0 auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; display: table; margin-bottom: 50px; } .skilldesc { position: relative; /* min-height: 350px; */ padding: 0%; width: 100%; display: inline-block; float: left; text-align: left; margin: 1% 1%; line-height: 1.5; } .skillsimg{ /* background-color: rgba(255, 255, 255, .1); */ background-color: rgb(59,44,135); /* background-color: rgb(88,60,205); officual previous */ color: var(--wh-color); -webkit-border-bottom-right-radius: 25px; -moz-border-bottom-right-radius: 25px; -ms-border-bottom-right-radius: 25px; -o-border-bottom-right-radius: 25px; border-bottom-right-radius: 25px; -webkit-border-top-left-radius: 25px; -moz-border-top-left-radius: 25px; -ms-border-top-left-radius: 25px; -o-border-top-left-radius: 25px; border-top-left-radius: 25px; } .skills_wrap { padding: var(--padding); display: inline-block; } .skillsimg { position: relative; /* padding: 3.5%; */ width: 48%; height: 100%; /* min-height: 270px; */ display: inline-block; float: left; } .cont_skillstext { /* width: 85%; height: 100%; */ margin: 0 auto; text-align: left; /* padding: 3%; */ } .skillsimg:first-child { margin: 0 2% 2% 0; } .skillsimg:nth-child(2) { margin: 0 0 2% 2%; } .skillsimg:nth-child(3) { margin: 2% 2% 0 0; } .skillsimg:nth-child(4) { margin: 2% 0 0 2%; } .skilldesc { margin: 0 auto; /*text-align:left;*/ } .proj_title { line-height: 1; /*color:#444444; padding: 0px 3%; */ margin: 0px auto 25px; text-align: left; } .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%; */ width: 100%; padding: 0% 0%; margin-bottom: 25px; } .cont_skillsimg img { width: 100%; max-width: 65px; height: auto; margin: 0 auto; float:left; } .cont_skillsimg object { width: 100px; height: auto; margin: 0 auto; } /* Known for Sec */ .sect_cont { width: 100%; display: flex; vertical-align: middle; justify-content: center; position: relative; } .orange { position: absolute; right: 0; display: inline-block; opacity: 0; } .mkz { width: 100%; } .kf_container { position: relative; /* width: 100%; max-width: 1300px; */ margin: 0 auto; /*margin-bottom: 100px;*/ text-align: center; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .row_cont{ width: 100%; height: 100%; vertical-align: middle; /* display: flex; */ position: relative; margin: 100px auto 50px; text-align: center; overflow: hidden; } .grid-item{ width: 100%; position: relative; /* display: flex; */ } .elem_title_resp { display: none; transform-origin: left top; pointer-events: none; margin-bottom: 45px; } .etr_inline{ display:inline-block; } .proj_cont_overlay { display: block; position: absolute; left: 0; top: 0; /* background: #232830; */ width: 100%; height: 100%; background-image: -webkit-linear-gradient(135deg, transparent -200%, #232830 -190%); background-image: -moz-linear-gradient(135deg, transparent -200%, #232830 -190%); background-image: -ms-linear-gradient(135deg, transparent -200%, #232830 -190%); background-image: -o-linear-gradient(135deg, transparent -200%, #232830 -190%); background-image: linear-gradient(135deg, transparent -200%, #232830 -190%); background-position: "100px 100px"; -webkit-background-clip: content-box; -moz-background-clip: content-box; -ms-background-clip: content-box; -o-background-clip: content-box; background-clip: content-box; -webkit-text-fill-color: transparent; /* -webkit-background-clip: content-box; -webkit-text-fill-color: transparent; */ } .proj_cont_overlay_1 { display: block; position: absolute; left: 0; top: 0; /* background: #232830; */ width: 100%; height: 100%; background-image: -webkit-linear-gradient(-135deg, transparent -200%, #232830 -190%); background-image: -moz-linear-gradient(-135deg, transparent -200%, #232830 -190%); background-image: -ms-linear-gradient(-135deg, transparent -200%, #232830 -190%); background-image: -o-linear-gradient(-135deg, transparent -200%, #232830 -190%); background-image: linear-gradient(-135deg, transparent -200%, #232830 -190%); background-position: "100px 100px"; -webkit-background-clip: content-box; -moz-background-clip: content-box; -ms-background-clip: content-box; -o-background-clip: content-box; background-clip: content-box; -webkit-text-fill-color: transparent; /* -webkit-background-clip: content-box; -webkit-text-fill-color: transparent; */ } .box_image { position: relative; width: 100%; /* margin: 25px auto; */ display: inline-block; vertical-align: middle; overflow: hidden; height: 100%; max-height: 650px; /* border: 1px solid blue; */ } .proj_side_cont{ /* padding: 5%; */ padding: var(--padding); vertical-align: middle; display: flex; align-items: center; background-color: rgba(45,50,60,.75); -webkit-backdrop-filter: saturate(100%) blur(12px); -moz-backdrop-filter: saturate(100%) blur(12px); -ms-backdrop-filter: saturate(100%) blur(12px); -o-backdrop-filter: saturate(100%) blur(12px); backdrop-filter: saturate(100%) blur(12px); -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; z-index: 999; box-sizing: border-box; } .element_img_cont, .element_img_cont_1 { justify-content: center; align-items: center; overflow: hidden; height: 100%; /* max-height: 600px; */ } /* .element_img_cont, .element_img_cont_1 { display: flex; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-image: -webkit-linear-gradient(45deg, rgba(45, 50, 60, 1) -200%, rgba(35, 40, 48, 1) -190%); background-image: -moz-linear-gradient(45deg, rgba(45, 50, 60, 1) -200%, rgba(35, 40, 48, 1) -190%); background-image: -ms-linear-gradient(45deg, rgba(45, 50, 60, 1) -200%, rgba(35, 40, 48, 1) -190%); background-image: -o-linear-gradient(45deg, rgba(45, 50, 60, 1) -200%, rgba(35, 40, 48, 1) -190%); background-image: linear-gradient(45deg, rgba(45, 50, 60, 1) -200%, rgba(35, 40, 48, 1) -190%); background-position: center center; background-size: cover; -webkit-background-clip: content-box; -moz-background-clip: content-box; -ms-background-clip: content-box; -o-background-clip: content-box; background-clip: content-box; -webkit-text-fill-color: transparent; z-index: 2; } */ .grad_mask { position: absolute; /* top: -76%; */ /* right: -90%; */ width: 100%; height: 100%; transform-origin: bottom left; overflow: hidden; /* border: 1px sold red; */ } .eic_wrap { position: relative; width: 100%; height: 100%; margin-right: 50px; /* min-width: 2000px; */ display: block; float: left; } .grad_mask .element_img_cont { /* width: 100%; height: 100%; */ background-image: -webkit-linear-gradient(to right, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -moz-linear-gradient(to right, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -ms-linear-gradient(to right, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -o-linear-gradient(to right, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: linear-gradient(to right, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-size: cover; -webkit-text-fill-color: skewX(45deg) skewY(0deg); -webkit-transform: skewX(45deg) skewY(0deg); -moz-transform: skewX(45deg) skewY(0deg); -ms-transform: skewX(45deg) skewY(0deg); -o-transform: skewX(45deg) skewY(0deg); transform: skewX(45deg) skewY(0deg); transform-origin: bottom left; /* border: 1px solid red; */ z-index: 999; } .element_img_cont { position: absolute; bottom: 0; /* right: -60%; */ right: -80%; width: 200%; height: 270%; background-image: -webkit-linear-gradient(to right, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -moz-linear-gradient(to right, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -ms-linear-gradient(to right, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -o-linear-gradient(to right, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: linear-gradient(to right, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-position: center center; /* background-attachment: fixed; */ -webkit-text-fill-color: skewX(45deg) skewY(0deg); -webkit-transform: skewX(45deg) skewY(0deg); -moz-transform: skewX(45deg) skewY(0deg); -ms-transform: skewX(45deg) skewY(0deg); -o-transform: skewX(45deg) skewY(0deg); transform: skewX(45deg) skewY(0deg); transform-origin: bottom left; /* border: 1px solid red; */ min-width: 2700px; /* min-width: 230vw; */ padding-right: 31px; } .grad_mask1 { position: absolute; /* top: -76%; */ /* right: -90%; */ width: 100%; height: 100%; transform-origin: bottom right; overflow: hidden; /* border: 1px sold red; */ } .eic1_wrap { position: relative; width: 100%; height: 100%; margin-left: 0px; /* min-width: 2000px; */ display: block; float: right; } .grad_mask1 .element_img_cont_1 { /* width: 100%; height: 100%; */ background-image: -webkit-linear-gradient(to left, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -moz-linear-gradient(to left, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -ms-linear-gradient(to left, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: -o-linear-gradient(to left, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-image: linear-gradient(to left, rgba(35, 40, 48, 1) 96%, rgba(35, 40, 48, 0) 100%); background-size: cover; -webkit-transform: skewX(135deg) skewY(0deg); -moz-transform: skewX(135deg) skewY(0deg); -ms-transform: skewX(135deg) skewY(0deg); -o-transform: skewX(135deg) skewY(0deg); transform: skewX(135deg) skewY(0deg); transform-origin: bottom right; /* border: 1px solid red; */ z-index: 999; } .element_img_cont_1 { position: absolute; bottom: 0; /* right: -60%; */ left: -80%; width: 200%; height: 270%; background-image: -webkit-linear-gradient(to left, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -moz-linear-gradient(to left, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -ms-linear-gradient(to left, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: -o-linear-gradient(to left, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-image: linear-gradient(to left, rgb(35, 40, 48) 96%, rgba(35, 40, 48, 0) 100%); background-position: center center; /* background-attachment: fixed; */ -webkit-transform: skewX(135deg) skewY(0deg); -moz-transform: skewX(135deg) skewY(0deg); -ms-transform: skewX(135deg) skewY(0deg); -o-transform: skewX(135deg) skewY(0deg); transform: skewX(135deg) skewY(0deg); transform-origin: bottom right; /* border: 1px solid red; */ min-width: 2700px; /* min-width: 230vw; */ padding-right: 31px; } .proj_img img { z-index: 1; /* width: 96% !important; height: 96% !important; */ padding: 5px; width: 99%; height: auto; } /* .element_img_cont img{ flex-shrink: 0; width:100%; height:100%; object-fit: cover; object-position: center center; min-width: 100%; min-height: 100%; } */ .box_image{ margin-top: 4%; margin-bottom: 4%; } /*proj_side_cont alternate text alignment */ .psc_n1 .proj_side, .psc_n2 .proj_side, .psc_n3 .proj_side, .psc_n4 .proj_side{ text-align: left; } .psc_n1, .psc_n3 { position: absolute; bottom: 0px; top: 0px; left: 6%; /* max-width: 200px; */ } .psc_n2, .psc_n4 { position: absolute; bottom: 0px; top: 0px; right: 6%; /* max-width: 200px; */ } .proj_side { margin: 0 auto; display: grid; text-align: center; margin-top: -10px; } .proj_tags { width: 100%; line-height: 1.2; margin-top:20px; } .projecte_title { line-height: 1.1; transform-origin: left top; /* white-space: nowrap; */ pointer-events: none; margin-bottom: 10px; } .psc_n1 .proj_side a, #gslide_13 .proj_side_cont .proj_side a { float: left; } #gslide_12 .proj_side_cont .proj_side a, #gslide_14 .proj_side_cont .proj_side a { float: right; } /* .proj_overlay{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(36deg, rgb(0,0,0), rgb(30,30,30)); background: -moz-linear-gradient(36deg, rgb(0,0,0), rgb(30,30,30)); background: -ms-linear-gradient(36deg, rgb(0,0,0), rgb(30,30,30)); background: -o-linear-gradient(36deg, rgb(0,0,0), rgb(30,30,30)); background: linear-gradient(36deg, rgb(0,0,0), rgb(30,30,30)); opacity: 0.25; } */ .mask { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; margin: 0 auto; opacity: 0; -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; display: none; } .mask:hover { opacity: 0; } /*.round-button { width: 15%; margin: 20% 42%; } .round-button-circle { width: 60%; height: 0; padding-bottom: 100%; margin-left: 0px; border: 4px solid transparent; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; -ms-border-radius: 9999px; -o-border-radius: 9999px; border-radius: 9999px;} */ .plus_ico { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -52.5%); -moz-transform: translate(-50%, -52.5%); -ms-transform: translate(-50%, -52.5%); -o-transform: translate(-50%, -52.5%); transform: translate(-50%, -52.5%); display: flex; justify-content: center; align-items: center; color: var(--wh-color); border: 1px solid transparent; background: #31227b; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -ms-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -ms-border-top-left-radius: 15px; -o-border-top-left-radius: 15px; border-top-left-radius: 15px; overflow: hidden; outline: none; border-color: transparent; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .plus_ico::after { content: ''; position: absolute; height: 5px; width: 50%; background: var(--wh-color); border-radius: 999px; } .plus_ico::before { content: ''; position: absolute; background: var(--wh-color); height: 50%; width: 5px; border-radius: 999px; } /* Project side nav bar */ /* ScrollMagic Animations */ #cd-vertical-nav { opacity: 1; /* opacity: 0; visibility:hidden; */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } /* #cd-vertical-nav.visible{ opacity: 1; visibility:visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } */ /* #cd-vertical-nav.visible { position: fixed; } */ /* Social */ #gslide_19{ margin-top: 100px; } .social_title, .social_title_1{ font-weight: 600; text-align: center; line-height: 2; } .social_title{ margin: 100px 0px 25px; } .social_title_1 { margin: 50px 0 25px; } .social_wrap { width: 77%; max-width: 1250px; text-align: center; margin: 0 auto; display: inline-block; height: 100%; } .social_cont { display: inline-block; } .social_cont_1{ height: 100%; margin: 0 auto; position: relative; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } a.social, .social{ height: auto; margin: 0 auto; overflow: hidden; /* min-height: 250px; */ margin-top: -1px; /* width: 100px; */ padding: 0 25px; float: left; color:var(--wh-color); text-align: center; font-size:1.1em; letter-spacing: 0.02em; font-weight: 400; min-width: 100px; } .social_imdb{ background: url(../images/social/imdb.png) no-repeat; background: url(../images/social/imdb.svg) no-repeat, linear-gradient(transparent, transparent); } .social_crew_uni{ background: url(../images/social/crew_united.png) no-repeat; background: url(../images/social/crew_united.svg) no-repeat, linear-gradient(transparent, transparent); } .social_tmdb{ background: url(../images/social/tmdb.png) no-repeat; background: url(../images/social/tmdb.svg) no-repeat, linear-gradient(transparent, transparent); } .social_sky{ background: url(../images/social/sky.png) no-repeat; background: url(../images/social/sky.svg) no-repeat, linear-gradient(transparent, transparent); } .social_appletv{ background: url(../images/social/appletv.png) no-repeat; background: url(../images/social/appletv.svg) no-repeat, linear-gradient(transparent, transparent); } .social_netflix{ background: url(../images/social/netflix.png) no-repeat; background: url(../images/social/netflix.svg) no-repeat, linear-gradient(transparent, transparent); } .social_prime{ background: url(../images/social/prime.png) no-repeat; background: url(../images/social/prime.svg) no-repeat, linear-gradient(transparent, transparent); } .social_film_director{ background: url(../images/social/film_director.png) no-repeat; background: url(../images/social/film_director.svg) no-repeat, linear-gradient(transparent, transparent); } .social_imdb, .social_crew_uni, .social_tmdb, .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { background-position: center; background-size: 90%; width: 130px; height: 130px; margin: 0px auto; margin-top: 2px; /* display: table-cell; filter: -webkit-brightness(0) invert(1); filter: -moz-brightness(0) invert(1); filter: -ms-brightness(0) invert(1); filter: -o-brightness(0) invert(1); filter: brightness(0) invert(1); */ opacity: .75; } /* .social_sky, .social_appletv, .social_netflix, .social_prime{ width: 150px; height: 150px;} */ /* .social_film_director{ background-position: center; background-size: 90%; width: 75px; height: 75px; margin-top: 2px; margin:0 auto; filter: -webkit-brightness(0) invert(1); filter: -moz-brightness(0) invert(1); filter: -ms-brightness(0) invert(1); filter: -o-brightness(0) invert(1); filter: brightness(0) invert(1); opacity: .75; } */ .soc_txt{ margin-top:10px; font-size: 1.2em; } .social_imdb, .social_crew_uni, .social_tmdb { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } .social_imdb:hover, .social_crew_uni:hover, .social_tmdb:hover { opacity: 1; -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } /*======= Contact_Section =======*/ .cnt_container { margin: 100px auto 25px; position: relative; text-align: center; display: flex; align-items: center; } .iframe_cont { width: 85%; /* padding-left: 3.6%; */ max-width: 1490px; vertical-align: middle; background-color: #31227b; } .ct_cont { vertical-align: middle; margin-top: -75px; max-width: 180px; margin: 0 8%; } .contact_txt, .contact_txt_mail, .contact_txt_resp { /* font-size: 1.25em; letter-spacing: 0.02em; font-weight: 400; */ width: auto; /*margin-top: 1.6%; display: inline-block;*/ color: #3F4F59; vertical-align: middle; line-height: 1em; height: auto; text-align: left; } .contact_txt a, .contact_txt_mail a, .contact_txt_resp a { color: var(--wh-color) !important; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-decoration: none; outline: none; } .contact_txt a:hover, .contact_txt_mail a:hover, .contact_txt_resp a:hover { color: rgba(235,235,235,.75) !important; } /*.contact_txt:first-child{ margin-top:0px; }*/ .ct_icon_email { background: url(../images/icons/email.png) no-repeat; background: url(../images/icons/email.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 30px 30px; background-position: left center; } .ct_icon_phone { background: url(../images/icons/phone.png) no-repeat; background: url(../images/icons/phone.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 30px 30px; background-position: left center; } .ct_icon_insta { background: url(../images/icons/instagram.png) no-repeat; background: url(../images/icons/instagram.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 30px 30px; background-position: left center; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { /*width: 88%; height:40px;*/ padding-left: 60px; /*margin-right: 30px; min-width:250px;*/ display: table; vertical-align: middle; margin: 30px 0 0px 0; } .ct_icon_insta { margin-top: 0px; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { width: 100%; max-width: 185px; /* border:1px solid red; */ height: 40px; } .contact_txt, .contact_txt_mail { display: table-cell; vertical-align: middle; /* margin-right: 75px; */ } .contact_txt a, .contact_txt_mail a, .contact_txt_resp a { display: inline; } .contact_txt, .contact_txt_mail, .contact_txt_resp, .ct_icon_email, .ct_icon_phone, .ct_icon_insta { vertical-align: middle; } .writeme { width: 100%; /*height:100%;*/ min-height: 425px; /* border:1px solid red; */ 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%; font-size: 1.4em; font-weight: 400; line-height: 1.5; letter-spacing: 0.02em; text-align: center; color: #3F4F59; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; margin-bottom: 90px; margin-top: -8px; } .contact_txt_resp { display: none; } .contact_txt, .contact_txt_mail, .contact_txt_resp, .contact_txt a:hover, .contact_txt_mail a:hover, .contact_txt_resp a:hover { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } /* Footer */ .footer { overflow: hidden !important; position: relative; width: 100%; text-align: center; /* background-color: #101317; */ background-color: #14191d; padding-bottom: 100px; } .svg_cont_footer { position: relative; margin: 0 auto; ; width: 100%; max-width: 350px; text-align: center; } .svg-container_foot { /*background: #23333f;*/ padding: 2em; max-width: 580px; margin: 0 auto; } .svg-container_foot svg { max-width: 150px; } .foot { width: 80%; margin: 0 auto; position: relative; } .text { width: 100%; max-width: 1490px; margin: 15px auto 0px; text-align: center; /* display: inline; */ } .footrow_c, .footrow_r, .footrow_l { /*width:33%;*/ width: 100%; height: auto; margin: 0 auto; text-align: left; font-family: inherit; font-size: 1.2em; font-weight: 400; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; color: #fdfdfd; letter-spacing: 0.02em; display: inline-block; vertical-align: middle; } .footrow_c { text-align: center; margin-bottom: 15px; /* line-height: 1.7em; */ } .footrow_r, .footrow_r a, .footrow_l { text-align: center; margin: 15px auto; } .footrow_c a, .footrow_r a { text-decoration: none; color: var(--wh-color); } .footrow_l a { text-decoration: none; color: rgba(235,235,235,.75); display: inline-block; } .footrow_l a:hover, .footrow_c a:hover, .footrow_r a:hover { color: var(--blue-color); } .footrow_l a, .footrow_l a:hover, .footrow_c a, .footrow_c a:hover, .footrow_r a, .footrow_r a:hover { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } .cpttc_item, .cpttc_blk { display: inline-block; } .cpttc_blk { margin: 0px 5px 0px 10px; } .copyright { display: inline-block; } #year { display: inline-block; } /*! * 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;font-display:swap;}.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:3.4em;font-weight:100;}.fa-angle-up::before{content:"\f106"}.fa-angle-down::before{content:"\f107"}.icon-heart:before{content:"\f004";}#hearticon{display:inline-block;transform-origin:50% 50%;color:#ebebeb;}.fa-heart{font-size:.85em;font-weight:100;} /* ===================== Responsiveness ===================*/ @media only screen and (max-width: 1249px) { .writeme{ min-height: 565px; } } @media only screen and (max-width: 1172px) { #cookie-bar p { max-width: 90%; } } @media only screen and (max-width: 1153px) { .writeme { min-height: 565px; } } @media only screen and (max-width: 1150px) { :root { --fs-1: 11em; } } @media only screen and (max-width: 1100px) { :root { --fs-1: 10em; --padding: 45px; } .container_intro { width: 60%; } .row_cont_vision { min-height: unset; } /* .skillsimg, .skillsimg_1 { width: 40.65%; } */ /* Project sec */ /* .projecte_title { font-size: 5em; } */ /* .social_cont_1{ width:60%; max-width: 540px; } .social_cont_1 .social:nth-child(4), .social_cont_1 .social:nth-child(5){ width:40%; float: left; } */ .spacer { margin-top: 100px; } .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { display: inline-block; } .btn-6 { padding: 15px 0px; } .contact_txt, .contact_txt_mail { width: 100%; /* display:inline-block; */ max-width: 175px; } } @media only screen and (max-width: 1073px) { #cookie-bar a { margin-left: 0; } } @media only screen and (max-width: 1024px) { .vision_img_cont{ min-height: 540px; min-width: 280px; } /* .vision_line_bg{ top: 6%; bottom: 6%; min-height: 250px; } */ .cont_vis_txt{ width: 60%; } /* .skillsimg, .skillsimg_1 { width: 40.5%; } */ /* .psc_n2, .psc_n4, .psc_n1, .psc_n3{ max-width: 181px; } */ .proj-side{ width: 91%; } .proj_tags{ margin-top:10px; width: 80%; } } @media only screen and (max-width: 1000px) { .container_intro { max-width: 450px; } .row_cont_vision, .services_cont, .kf_container, .cnt_container { width: 80%; } /* .skillsimg, .skillsimg_1 { width: 40.3%; } */ /* .social_cont_1{ width:67%; } */ } @media only screen and (max-width: 960px) { :root { --fs-1: 9.5em; } } @media only screen and (max-width: 923px) { .writeme { min-height: 655px; } } @media only screen and (max-width: 900px) { :root { /* --fs-2: 1.25em; */ --fs-7: 3em; --padding: 35px; } /*section { margin-top: 75px; } */ /* arrow down */ .box_arrow_down { height: 65px; } /* menu */ #header { height: 55px; } #header, #header.active { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } #header { -webkit-backdrop-filter: none !important; -moz-backdrop-filter: none !important; -ms-backdrop-filter: none !important; -o-backdrop-filter: none !important; backdrop-filter: none !important; } #header.active{ background-color: rgba(0, 0, 0, .95); } #parent_1 { width: 78%; } .child_3 { display: block; margin-top: 2px; width: 40px; height: 40px; text-align: center; float: left; } .logo_menu { width: 0px; height: 0px; margin-top: 0px; } .logo_menu.active { width: 50px !important; height: 50px; margin: 0px 0px; } .logo_menu, .logo_menu.active { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } .logo_menu, .logo_menu.active { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; } .menu-container { border-radius: 0%; top: 2px; height: 1%; right: 8px; position: fixed; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 100%; z-index: 10; } .menu-container.active { /*background-color: #505050;*/ background: var(--blue-color); top: -50%; height: 200%; right: -50%; width: 200%; } .menu-container, .menu-container.active { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.3s; transition-timing-function: initial; transition-delay: initial; } .menu-toggle { display: block; position: absolute; height: 25px; width: 30px; top: 13px; right: 0; background: transparent; cursor: pointer; } .menu-list { position: fixed; 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%); /*position: fixed; top: 25%;*/ width: 100%; /*height: calc(100% - 200px); height: auto;*/ z-index: 10; visibility: hidden; -webkit-transition: all 300ms cubic-bezier(0.235, 0.005, 0.44, 1); -moz-transition: all 300ms cubic-bezier(0.235, 0.005, 0.44, 1); -ms-transition: all 300ms cubic-bezier(0.235, 0.005, 0.44, 1); -o-transition: all 300ms cubic-bezier(0.235, 0.005, 0.44, 1); transition: all 300ms cubic-bezier(0.235, 0.005, 0.44, 1); text-align: center; margin: 0 auto; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 2.3em; font-weight: 300; letter-spacing: 1.5px; } .menu-list.active { visibility: visible; } /* hided "li" logo menu */ /*.menu-list li:nth-of-type(4),*/ .hide_om { display: none; } .menu-item { padding: 1% 0%; } ul { list-style: none; padding: 0; margin: 25px auto; display: inline-block; position: relative; } ul li { opacity: 0; width: 100%; padding-right: 0px; -webkit-transition: all 500ms cubic-bezier(0.235, 0.005, 0.44, 1); -moz-transition: all 500ms cubic-bezier(0.235, 0.005, 0.44, 1); -ms-transition: all 500ms cubic-bezier(0.235, 0.005, 0.44, 1); -o-transition: all 500ms cubic-bezier(0.235, 0.005, 0.44, 1); transition: all 500ms cubic-bezier(0.235, 0.005, 0.44, 1); } nav ul li a { cursor: pointer; text-decoration: none; color: var(--wh-color); -webkit-transition: all 250ms cubic-bezier(0.235, 0.005, 0.44, 1); -moz-transition: all 250ms cubic-bezier(0.235, 0.005, 0.44, 1); -ms-transition: all 250ms cubic-bezier(0.235, 0.005, 0.44, 1); -o-transition: all 250ms cubic-bezier(0.235, 0.005, 0.44, 1); transition: all 250ms cubic-bezier(0.235, 0.005, 0.44, 1); } ul li a:hover { color: var(--wh-color); } nav li.menu-item.current a { color: var(--wh-color); } /*.menu-list.open { visibility: visible; }*/ nav.active li a:hover { color: rgba(235,235,235,.7); } nav a { opacity: 1; color: #fdfdfd; font-size: 1.3em; } nav a:hover { text-decoration: none; -webkit-transition: width .5s ease, color .5s ease; -moz-transition: width .5s ease, color .5s ease; -ms-transition: width .5s ease, color .5s ease; -o-transition: width .5s ease, color .5s ease; transition: width .5s ease, color .5s ease; } nav.active li { -webkit-animation: fadeIn .35s ease forwards; -moz-animation: fadeIn .35s ease forwards; -ms-animation: fadeIn .35s ease forwards; -o-animation: fadeIn .35s ease forwards; animation: fadeIn .35s ease forwards; -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -ms-animation-delay: .1s; -o-animation-delay: .1s; animation-delay: .1s; } nav.active li:nth-of-type(1) { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } nav.active li:nth-of-type(2) { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -ms-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } nav.active li:nth-of-type(3) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -ms-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } nav.active li:nth-of-type(4) { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -ms-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } nav.active li:nth-of-type(5) { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } nav.active li:nth-of-type(6) { -webkit-animation-delay: .7s; -moz-animation-delay: .7s; -ms-animation-delay: .7s; -o-animation-delay: .7s; animation-delay: .7s; } nav.active li:nth-of-type(7) { -webkit-animation-delay: .7s; -moz-animation-delay: .7s; -ms-animation-delay: .7s; -o-animation-delay: .7s; animation-delay: .7s; } nav.active .menu-link { width: 100%; } @-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @-moz-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @-ms-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @-o-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } .middle-align { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; } .noscroll { /*margin: 0; overflow: hidden;*/ overflow: hidden; margin: 0; -webkit-overflow-scrolling: touch; } .lang_switch { position: relative; bottom: 0; right: 0; left: 0; top:unset; } .lang_div { height: 100%; padding: 0px; position: relative; text-align: center; } .lang_separator { color: var(--wh-color); width: 50px; display: contents; } .button_lang, .button_lang.active { color: var(--wh-color); width: 50px; display: contents; } .button_lang:hover, .current_lang, .button_lang.active:hover, .active.current_lang { color: rgba(235,235,235,.7); } .module_full_bg { background-position: 45% center; background-attachment: local; } /* .skillsimg, .skillsimg_1 { width: 40.23%; } */ /* Social Sec */ /* .social_cont_1{ width:75%; max-width: 540px; } */ /* Project sec */ .grid-item { flex: 1.47; } /* .kf_container { width: 88%; } */ .proj_side_cont { flex: .63; /* padding: 5% 9%; */ } .btn-6 { padding: 12px 0px; } /*======= Contact_Section =======*/ /* .cnt_container { width: 92%; margin: 75px auto; max-width: 1250px; position: relative; } .iframe_cont { width: 55.9%; max-width: 1490px; display: inline-block; vertical-align: middle; } */ .ct_cont { display: inline-block; vertical-align: middle; margin-top: -75px; } .contact_txt, .contact_txt_mail, .contact_txt_resp { font-size: 1.25em; font-weight: 400; width: auto; /*margin-top: 1.6%;*/ letter-spacing: 0.02em; vertical-align: middle; } .contact_txt a, .contact_txt_mail a, .contact_txt_resp a { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-decoration: none; outline: none; } /* .contact_txt_mail { display: none; } */ .contact_txt_resp { display: table-cell; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { width: 88%; height: 40px; padding-left: 50px; margin-right: 30px; max-width: 160px; display: table; vertical-align: middle; margin: 30px auto 0px auto; } .contact_txt, .contact_txt_mail { /* display: inline-block; */ vertical-align: middle; max-width: 156px; /* margin-right: 75px; */ } .contact_txt a, .contact_txt_mail a, .contact_txt_resp a { display: inline-block; } .contact_txt, .contact_txt_mail, .contact_txt_resp, .ct_icon_email, .ct_icon_phone, .ct_icon_insta { vertical-align: middle; text-align: left; } /*Footer*/ .footrow_c, .footrow_r, .footrow_l { width: 100%; text-align: center; } /* Cookie Page */ .section_cookiep{ width:83%; margin: 0 auto; } .cp_title{ margin: 20px auto 100px;} .cp_middle_title{ font-weight: 400; font-size:1.93em; } .cp_little_title{ font-weight: 600; font-size: 1.8em; line-height: 1.25; } .cp_text ul li, .text_block ul li{ width: 93%; } } @media only screen and (max-width: 850px) { :root { --fs-1: 8.5em; } .container_intro { max-width: 400px; } /* .skillsimg, .skillsimg_1 { width: 40.05%; } */ /* Sect Title */ } @media only screen and (max-width: 800px) { :root { --fs-5: 3em; } #parent_1 { width: 80%; } .vision_line_bg { top: 50px; bottom: 50px; } .container_intro{ width:65%; } .mask_cont { width: 80%; } /* Vision .visiom_img_cont { width: 100%; height: 250px; margin-top: 50px; display: inline-block; }*/ .vision_txt{ width:100%; padding-left: 0%; margin-bottom:50px; display: table-header-group; vertical-align: middle; } /* Vision */ .row_cont_vision{ display: table; margin-top: 50px; } .vision_img_cont { height: 250px; min-width: unset; /* margin: auto 2.5% auto 5%; */ display: table-footer-group; flex: 1; width: 100%; position: relative; margin: 0 auto; vertical-align: middle; } .vision_img{ height: 250px; } .vision_txt_cont{ position: relative; padding: var(--padding); margin-right: 0px; display: inline-block; } .cont_vis_txt{ width: 100%; padding-left: 0%; padding-right: 0%; /* height: 35vh; */ margin-bottom: 30px; display: grid; } .vision_line_bg{ display: none; } .vision_txt{ margin-bottom: 0px; } .vision_line_bg_1{ display: block; position: absolute; top: 0%; bottom: 0%; width: 100%; z-index: 0; background-image: -webkit-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -moz-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -ms-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: -o-linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-image: linear-gradient(45deg, #2d323c -200%, #232830 -190%); background-position: "100px 100px"; -webkit-background-clip: content-box; -moz-background-clip: content-box; -ms-background-clip: content-box; -o-background-clip: content-box; background-clip: content-box; -webkit-text-fill-color: transparent; -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; } /* Services */ .skillsimg { position: relative; /* padding: 7%; */ width: auto; height: 100%; display: inline-block; float: left; margin: 15px auto; } .skillsimg:first-child { margin: 15px auto; } .skillsimg:nth-child(2) { margin: 15px auto; } .skillsimg:nth-child(3) { margin: 15px auto; } .skillsimg:nth-child(4) { margin: 15px auto; } div#gslide_5, div#gslide_6, div#gslide_7, div#gslide_8 { margin: 15px auto 15px auto; } /* project */ .container { width: 100%; margin: 0px auto; } .row_cont { width: 100%; margin-bottom: 25px; } .projecte_title { display: none !important; } .btn-6 { padding: 10px 10px; margin-top: 20px; width: 135px; } .psc_n2, .psc_n4, .psc_n1, .psc_n3{ max-width: 90%; } .proj-side{ width: 100%; } .proj_cont_overlay, .proj_cont_overlay_1 { z-index: 9; pointer-events: none; } /* projecte */ .container .row_cont:nth-child(2) .grid-item { display: flex; flex: 1; flex-direction: column; margin-top: 25px; } .grid-item { text-align: left; } .box_image { order: 1; width: 100%; margin: 0 auto 30px; display: inline-block; overflow: hidden; /* display: flex; */ } .proj_side_cont { order: 2; width: 100%; margin: 0 auto; display: inline-block; text-align: left; position: relative; left: unset; right: unset; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background: rgb(45, 50, 60); -webkit-backdrop-filter: none; -moz-backdrop-filter: none; -ms-backdrop-filter: none; -o-backdrop-filter: none; backdrop-filter: none; } .psc_n2, .psc_n4, .psc_n1, .psc_n3 { max-width: 100%; } .projecte_title, .elem_title_resp { margin: 30px auto 25px; } .grid-item .elem_title_resp { display: inline-block; margin: 15px auto 25px 0px; text-align: left; line-height: 1.2em; } .proj_tags { margin-top: 5px; text-align: left; color: rgba(235, 235, 235, 1); line-height: 1.5; font-weight: 400; width: 100%; } .proj_button { margin-top: 25px; } .grid-sizer { width: 100%; } .container .row_cont:nth-child(1) .grid-item .elem_title_resp { margin-top: 0px; } .container .row_cont:nth-child(2) .grid-item .elem_title_resp { margin-top: 25px; } /* switch button with + icon */ .btn-6 { display: none !important; } .row_cont:first-child { margin-top: 55px; } .mask { opacity: 1; height: 100%; width: 100%; display: inline-block; z-index: 5; } .mask:hover { opacity: 1; } .plus_ico { width: 50px; height: 50px; } a.iframe{ z-index:10; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .proj_img, .proj_img:hover { -webkit-border-bottom-left-radius: 25px; -moz-border-bottom-left-radius: 25px; -ms-border-bottom-left-radius: 25px; -o-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-top-right-radius: 25px; -ms-border-top-right-radius: 25px; -o-border-top-right-radius: 25px; border-top-right-radius: 25px; overflow: hidden; } .proj_img img { z-index: 1; width: 100% !important; height: 100% !important; padding: 0px; opacity: 1; } .box_image { z-index: 4; position: relative; } .proj_img span{ position: absolute; display: block; width: 0px; height: 0px; border-radius: 50%; background-color: rgb(45, 50, 60); opacity: 0.65; -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -moz-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -ms-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -o-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transition: width 0.4s ease-in-out, height 0.4s ease-in-out; left: 50%; top: 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%); z-index: 2; overflow: hidden; } .proj_img { border: 1px solid #232830; position: relative; } .proj_img img { position: relative; overflow: hidden; z-index: 1; } .element_img_cont, .element_img_cont_1 { z-index: 99; } .box_image:hover { color: var(--wh-color); } .proj_img:hover span { width: 300%; height: 300%; z-index: 2; } .proj_img:active span{ background-color: rgb(45, 50, 60); opacity: 0.65; } /* Working For */ .social_cont{ display: flex; flex-wrap: wrap; justify-content: center; } .social{ width: 49%; padding: 0; text-align: center; } .social_imdb, .social_crew_uni, .social_tmdb, .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { margin: 0 auto; display: inline-flex; width: 125px; } /* contact*/ .writeme { min-height: 545px; } .cnt_container { display: block; } .iframe_cont { width: 100%; } .ct_cont { margin: 50px 0 0 0; max-width: unset; width: 100%; } .contact_txt, .contact_txt_mail, .contact_txt_resp, .ct_icon_email, .ct_icon_phone, .ct_icon_insta { font-size: 1.14em; text-align: left; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { width: 100%; max-width: 450px; float: left; } .contact_txt_resp { display: none; } .contact_txt_mail { display: table-cell; } } @media only screen and (max-width:750px) { .writeme { min-height: 565px; } } @media only screen and (max-width:670px) { .cpttc_item:last-child { margin-top: 15px; } } @media only screen and (max-width:650px) { :root { --fs-1: 6em; --fs-5: 3em; } .spacer{ margin-top: 50px; } .element_img_cont { right: -120%; } .element_img_cont_1 { left: -120%; } .proj_img { position: relative; min-height: 300px; } .proj_img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #proj_4 .box_image img { object-position: right; } #proj_5 .box_image img { object-position: left; } .iframe_cont { width: 100%; } .footrow_c, .footrow_r, .footrow_l { margin: 25px auto; } .cpttc_item, .cpttc_blk { width: 100%; } .cpttc_blk { margin: 5px auto 0px; } .cpttc_item:last-child { margin: 0 auto; } } @media only screen and (max-width: 600px) { .writeme { min-height: 655px; } } @media only screen and (max-width: 550px) { .element_img_cont, .element_img_cont_1 { min-width: 1800px; } } @media only screen and (max-width: 506px) { .writeme { min-height: 670px; } } @media only screen and (max-width: 489px) { #cookie-bar a { margin-left: 0; } } @media only screen and (max-width: 480px) { :root { --fs-1: 4.5em; --fs-3: 1.5em; --fs-5: 2.5em; --fs-7: 2em; } /* body { font-size: 12px; } */ .skills_wrap { word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .mask_cont{ max-width: 1250px; } .spacer { margin-top: 15px; } /* Social */ .social_imdb, .social_crew_uni, .social_tmdb, .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { width: 100px; } .soc_txt{ padding-top:10px; max-width: 70px; margin: 0 auto; } /* contact*/ .cnt_container{ margin-top: 75px; overflow: hidden; } .writeme { display: flex; } .ct_cont { margin: 50px 0 0 0; max-width: unset; width: 100%; } .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.02em; text-transform: uppercase; -webkit-font-smoothing: antialiased; z-index: 3; position: relative; display: inline-block; } .ct_itme_cont { width: 100%; margin: 25px auto; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { max-width: 306px; } /* .contact_txt_mail { display: none; } */ .contact_txt_resp { display: table-cell; } /* Cookie Page */ .section_cookiep{ margin-top:25px; margin-bottom:25px; } .cp_title{ margin: 0px auto 50px; } .cp_text ul li, .text_block ul li{ width: 90%; } } @media only screen and (max-width: 380px) { :root { --fs-1: 3.65em; --padding: 25px; } /* body{ font-size: 10px; } */ .row_cont { margin: 75px auto 50px; } .element_img_cont, .element_img_cont_1 { min-width: 900px; } /* Social */ .social_imdb, .social_crew_uni, .social_tmdb, .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { width: 100px; } .ct_icon_email, .ct_icon_phone, .ct_icon_insta { max-width: 178px; } .contact_txt a, .contact_txt_mail a, .contact_txt_resp a { display: inline-block; line-height: 1.4em; } /* .contact_txt_mail { display: none; } */ .contact_txt_resp { display: table-cell; } } @media only screen and (max-width: 300px) { body { font-size: 4.8vw; } :root { --fs-1: 3.65em; } .row_cont_vision, .services_cont, .kf_container, .cnt_container { width: 90%; } .mask_cont { width: 90%; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .row_cont { margin: 50px auto 50px; } /* contact*/ .writeme { min-height: 660px; } .footrow_c a, .footrow_r a, .footrow_l a { display: inline-block; width: 100%; } .footrow_r, .footrow_l { margin: 15px auto; line-height: 1.2em; } } @media only screen and (max-width: 256px) { .writeme { min-height: 695px; } } @media only screen and (max-width: 250px) { :root { --fs-1: 4.3em; --fs-5: 2.5em; } .linea_2 { width: 100%; } a.scrolldown, a.scrollup { width: unset; } .sectitle, .sectitle_2{ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .plus_ico { width: 45px; height: 45px; } /* Social */ .social{ width:100%; } .social_cont_1 .social:nth-child(4), .social_cont_1 .social:nth-child(5){ width:100%; float: left; } .social_imdb, .social_crew_uni, .social_tmdb, .social_sky, .social_appletv, .social_netflix, .social_prime, .social_film_director { width: 80px; height: 100px; } /* contact*/ .ct_cont { margin-top: 25px; } } @media only screen and (max-width: 205px) { .sectitle, .sectitle_2{ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .element_img_cont, .element_img_cont_1 { min-width: 700px; } .plus_ico { width: 45px; height: 45px; } .plus_ico::before { width: 4px; } .plus_ico::after { height: 4px; } } @media only screen and (max-width: 175px) { .plus_ico { width: 40px; height: 40px; } } @media only screen and (max-width: 156px) { :root { --padding: 15px; } .writeme { min-height: 700px; } } @media only screen and (max-width: 100px) { body { font-size: 5px; } /* .section_bl, .section_bl2, .row_cont_vision, .services_cont, .kf_container, .cnt_container, .proj_img, .knockout, .knockout svg { min-width: 150px; } */ .module_full_bg { overflow: hidden; } .knockout svg, .skillsimg, .row_cont, .knockout_1, .foot { min-width: 100px; } .container_intro svg { min-width: 75px; } .cont_skillsimg img { width: 40px; } .knockout { display: inline-block !important; } .knockout_1 { min-height: none; min-width: none; } .footrow_c, .footrow_r, .footrow_l { font-size: 7px; } }