:root { --gradient-primary: linear-gradient(to top left, #39b385, #9be15d); --color-primaryslider_32454: #5ec576; --first-colorslider_32454: #E3F8FF; --second-colorslider_32454: #DCFAFB; --third-colorslider_32454: #FFE8DF; --accent-colorslider_32454: #FF5151; --dark-colorslider_32454: #161616; } /*Tipografia responsive*/ :root{ --body-fontslider_32454: 'Open Sans'; --h1-font-sizeslider_32454: 1.5rem; --h3-font-sizeslider_32454: 1rem; --normal-font-sizeslider_32454: 0.938rem; --smaller-font-sizeslider_32454: 0.75rem; } @media screen and (min-width: 768px){ :root{ --h1-font-sizeslider_32454: 2rem; --normal-font-sizeslider_32454: 1rem; --smaller-font-sizeslider_32454: 0.813rem; } } #slider_29775 { background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/aspace-gym-effec658658997390-1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } /* apply to class pulsating circle */ .pulsating-circle { position: absolute; transform: translateX(-50%) translateY(-50%); width: 30px; height: 30px; } .pulsating-circle:before { content: ''; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; margin-top: -100%; border-radius: 45px; background-color: #01a4e9; opacity: 0.7; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } .pulsating-circle:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: white; opacity: 0.5; border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, .3); animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite; } @keyframes pulse-ring { 0% { transform: scale(0.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-dot { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @media screen and (min-width:768px) { #slider_29775 { min-height: inherit } .slider-boulders { min-height: inherit } .slider-gyms1 { min-height: inherit } .slider-gyms2 { min-height: inherit } .slider-gyms3 { min-height: inherit } .slider-shape { min-height: inherit } .sliderhero232 { min-height: inherit } } @media screen and (max-width:768px) { #slider_29775 { min-height: 300px } .slider-boulders { min-height: 300px } #slider_29775 { min-height: 300px } .slider-boulders { min-height: 300px } .slider-gyms1 { min-height: 300px } .slider-gyms2 { min-height: 300px } .slider-gyms3 { min-height: 300px } .slider-shape { min-height: 300px } .sliderhero232 { min-height: 300px } .slide-text-info h1 { font-size: 2.9em; font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; font-weight: 100; color: #fff } .slide-text-info h1 span { font-weight: 800 } .slide-text-info h2 { color: #fff; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; font-size: 1.9em } .slide-text-info { margin: 2.5% 0; left: 16%; margin-top: 60px } .slide-text p { font-size: 1.472em; width: 50%; margin: 0 auto; font-weight: 200; line-height: 1.6em; margin-bottom: 1em } .slide-text ul li { font-size: .872em; width: 50%; margin: 0 auto; font-weight: 200; line-height: 2.6em; margin-bottom: 1em } } @media screen and (min-width:768px) { .slide-text-info h1 { font-size: 5.2em; font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; font-weight: 100; color: #fff } .slide-text-info h1 span { font-weight: 800 } .slide-text-info h2 { color: #fff; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; font-size: 3.9em } .slide-text-info { margin: 2.5% 0; text-align: left; position: absolute; left: 16%; margin-top: 200px } .slide-text p { font-size: 2.472em; width: 50%; margin: 0 auto; font-weight: 200; line-height: 2.6em; margin-bottom: 1em } .slide-text ul li { font-size: 1.472em; width: 50%; margin: 0 auto; font-weight: 200; line-height: 2.6em; margin-bottom: 1em } } .sliderhero232 { background: url(http://design.dronstar.com/wp-content/uploads/2022/03/aspace-gym-effec658658997390.846t8-1.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100% } .bodya { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; text-align: center } @media (min-width:121px) and (max-width:590px) { .bodya { padding-top: 80px } } @media (min-width:590px) and (max-width:1090px) { .bodya { padding-top: 160px } } @media screen and (min-width:1090px) { .bodya { padding-top: 260px } } .bodya h1 { margin: 0; text-transform: uppercase; color: #fff; letter-spacing: 2px; position: relative } .bodya h1:after, .bodya h1:before { content: "Get Up! Challenge yourself today"; position: absolute; top: 0; color: #fff; background-color: #000; overflow: hidden } .bodya h1:after { left: 2px; text-shadow: -1px 0 #ff1b1b; animation: glitch1 2s infinite ease } .bodya h1:before { left: -2px; text-shadow: 1px 0 #2124ff; animation: glitch2 10s infinite ease } @keyframes glitch1 { 0% { clip-path: inset(65% 0 8% 0) } 4% { clip-path: inset(5% 0 70% 0) } 8% { clip-path: inset(60% 0 27% 0) } 12% { clip-path: inset(37% 0 18% 0) } 16% { clip-path: inset(42% 0 13% 0) } 20% { clip-path: inset(46% 0 9% 0) } 24% { clip-path: inset(34% 0 67% 0) } 28% { clip-path: inset(3% 0 26% 0) } 32% { clip-path: inset(2% 0 31% 0) } 36% { clip-path: inset(87% 0 2% 0) } 40% { clip-path: inset(15% 0 47% 0) } 44% { clip-path: inset(97% 0 2% 0) } 48% { clip-path: inset(48% 0 49% 0) } 52% { clip-path: inset(88% 0 11% 0) } 56% { clip-path: inset(31% 0 65% 0) } 60% { clip-path: inset(42% 0 58% 0) } 64% { clip-path: inset(17% 0 76% 0) } 68% { clip-path: inset(78% 0 6% 0) } 72% { clip-path: inset(1% 0 48% 0) } 76% { clip-path: inset(73% 0 1% 0) } 80% { clip-path: inset(80% 0 7% 0) } 84% { clip-path: inset(14% 0 81% 0) } 88% { clip-path: inset(83% 0 1% 0) } 92% { clip-path: inset(32% 0 60% 0) } 96% { clip-path: inset(86% 0 5% 0) } 100% { clip-path: inset(63% 0 17% 0) } } @keyframes glitch2 { 0% { clip-path: inset(9% 0 71% 0) } 4% { clip-path: inset(2% 0 33% 0) } 8% { clip-path: inset(75% 0 19% 0) } 12% { clip-path: inset(97% 0 3% 0) } 16% { clip-path: inset(22% 0 59% 0) } 20% { clip-path: inset(74% 0 8% 0) } 24% { clip-path: inset(65% 0 11% 0) } 28% { clip-path: inset(6% 0 54% 0) } 32% { clip-path: inset(2% 0 6% 0) } 36% { clip-path: inset(10% 0 57% 0) } 40% { clip-path: inset(21% 0 46% 0) } 44% { clip-path: inset(30% 0 9% 0) } 48% { clip-path: inset(25% 0 35% 0) } 52% { clip-path: inset(25% 0 35% 0) } 56% { clip-path: inset(14% 0 45% 0) } 60% { clip-path: inset(38% 0 15% 0) } 64% { clip-path: inset(5% 0 64% 0) } 68% { clip-path: inset(86% 0 9% 0) } 72% { clip-path: inset(17% 0 30% 0) } 76% { clip-path: inset(99% 0 2% 0) } 80% { clip-path: inset(20% 0 15% 0) } 84% { clip-path: inset(70% 0 30% 0) } 88% { clip-path: inset(36% 0 43% 0) } 92% { clip-path: inset(61% 0 33% 0) } 96% { clip-path: inset(50% 0 17% 0) } 100% { clip-path: inset(19% 0 47% 0) } } .hero-wrapper-agency { clip-path: ellipse(71% 59% at 48% 37%); background: linear-gradient(45deg, #4c4683, #71baf5); height: 621px } .hero-wrapper-jobs { clip-path: ellipse(71% 59% at 48% 37%); background: linear-gradient(45deg, #4c4683, #6cbaa5); height: 621px } .introIconsWrap { max-width: 1170px; margin: 0 auto; text-align: center; position: relative; margin-top: -50px; text-transform: uppercase; } .introIcons { display: flex; justify-content: space-between; } .introIcons img { width: 100%; transform: scale(.6); } .introIconCircleWrap { background: var(--body-color); border-radius: 50%; position: relative; z-index: 88; height: 140px; width: 140px; margin: 0 auto 25px; } .introIconCircle { height: 130px; width: 130px; position: absolute; left: calc(50% - 65px); top: calc(50% - 65px); border-radius: 50%; background: #ABB0FF; } .introIcon:hover .introIconCircle { height: 130px; width: 130px; left: calc(50% - 65px); top: calc(50% - 65px); } .introIcon img { z-index: 99; position: relative; } .introIcon:hover img { transform: scale(.5); transition: .3s; } .introIconsWrap p { font-weight: 600; font-size: 20px; } .introIcon p { position: relative; top: 0px; font-family: var(--body-font); } .introIcon:hover p { position: relative; top: -10px; transition: .3s; } .introIconsWrap a { text-decoration: none; } .introIconsWrap .faculty .introIconCircle { background: #ABB0FF; } .introIconsWrap .faculty p { color: var(--text-color); } .introIconsWrap .graduation .introIconCircle { background: #ABB0FF; } .introIconsWrap .graduation p { color: var(--text-color); } .introIconsWrap .research .introIconCircle { background: #ABB0FF; } .introIconsWrap .research p { color: var(--text-color); } .introIconsWrap .library .introIconCircle { background: #ABB0FF; } .introIconsWrap .library p { color: var(--text-color); } .introIconsWrap .contact .introIconCircle { background: #ABB0FF; } .introIconsWrap .contact p { color: var(--text-color); } @media (max-width: 768px) { .introIcons { display: block; justify-content: space-around; margin-top: 40px; } .introIconsWrap { margin-top: -2; margin-top: -30px; } .introIconCircleWrap { height: 80px; width: 80px; } .introIcon p { font-size: 15px; top: -10px; } .introIcon .introIconCircle { height: 80px; width: 80px; left: calc(50% - 40px); top: calc(50% - 40px); } .introIcon:hover .introIconCircle { height: 60px; width: 60px; left: calc(50% - 30px); top: calc(50% - 30px); } .introIcon { width: 30%; display: inline-block; } } /* ##### BREAK SECTION MENU - SECTION 1 #### */ .break1 { max-width: 20%; width: 20%; margin: 0 auto; text-align: center; position: relative; margin-top: 10px; } .hero-wrapper { clip-path: ellipse(118% 54% at 50% 45%); background-image: url(http://localhost/wordpress/wp-content/uploads/2022/06/grunge-bricks-cracked-1920.jpg); background: linear-gradient(45deg, #4c4683, #71baf5) } .hero-wrapper { clip-path: ellipse(118% 54% at 50% 45%); background: linear-gradient(45deg, #4c4683, #71baf5) } .hero-wrapper-renovar { clip-path: ellipse(118% 54% at 50% 45%); background-image: url(http://localhost/wordpress/wp-content/uploads/2022/06/grunge-bricks-cracked-1920.jpg) } #hero-slider-main { width: 100%; height: 94vh; clip-path: ellipse(110% 52% at 50% 45%); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/aspace-IMG234387.jpg) top center; background-size: cover } #hero-slider-main::before { content: ""; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background: linear-gradient(rgba(52, 69, 96, 0.367), rgba(8, 29, 56, .7)) } #hero-slider-main .container { position: relative; text-align: center } #hero-slider-main h1 { margin: 0; font-size: 2.5rem; font-weight: 700; color: #fff } #hero h1 span { color: var(--primary-color) } #hero h2 { color: rgba(255, 255, 255, .9); margin: 10px 0 0 0; font-size: 24px } #hero .icon-box { padding: 30px 0; transition: ease-in-out .3s; height: 100%; text-align: center; display: block; border-radius: .25rem; background: rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/30042.svg); background-repeat: no-repeat; background-size: contain } #hero .icon-boxb { padding: 30px 0; transition: ease-in-out .3s; height: 100%; text-align: center; display: block; border-radius: .25rem; background: rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/307770.svg); background-repeat: no-repeat; background-size: contain } #hero .icon-boxc { padding: 30px 0; transition: ease-in-out .3s; height: 100%; text-align: center; display: block; border-radius: .25rem; background: rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/32817.svg); background-repeat: no-repeat; background-size: contain } #hero .icon-boxd { padding: 30px 0; transition: ease-in-out .3s; height: 100%; text-align: center; display: block; border-radius: .25rem; background: rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/32740.svg); background-repeat: no-repeat; background-size: contain } #hero .icon-boxe { padding: 30px 0; transition: ease-in-out .3s; height: 100%; text-align: center; display: block; border-radius: .25rem; background: rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); background: url(https://fitness.dronstar.com/wp-content/uploads/2021/12/307770.svg); background-repeat: no-repeat; background-size: contain } #hero .icon-box i { font-size: 20px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 50%; width: 53px; display: block; padding: 16px; margin: 0 auto } #hero .icon-box h3 { font-weight: 500; margin: 12px 0 0 0; padding: 0; font-size: 1.2rem; line-height: 1; color: #fff; letter-spacing: .5px; text-shadow: 2px 2px 2px rgba(0, 0, 0, .35) } #hero .icon-box h3 a { color: #fff; transition: ease-in-out .3s } #hero .icon-box h3 a:hover { color: var(--primary-color) } #hero .icon-box:hover { background: rgba(0, 0, 0, .3); border-color: var(--primary-color); transform: translateY(-5px) scale(1.02) } #hero .icon-box:hover i { background-color: #000 } @media (max-width:768px) { #hero { height: auto } #hero h1 { font-size: 28px; line-height: 36px } #hero h2 { font-size: 20px; line-height: 24px } } .content__title { font-size: 4vw; margin: 35vh 0 0 0; position: relative; color: var(--color-title); animation-name: glitch-anim-text; animation-duration: var(--time-anim); animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: calc(var(--delay-anim) + var(--time-anim) * .2) } .slider-motion { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effec65865899739invert.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; overflow: hidden } .motion-x { margin-left: 0!important; margin-right: 0!important; padding-right: 0!important; padding-left: 0!important } #slider_29771 { background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .header__content1 { padding-top: 200px } @media screen and (max-width:768px) { .title-ss { max-width: 800px; margin-left: auto; margin-right: auto; color: #f2f2f2; text-transform: uppercase; font-size: 35px; font-family: Montserrat, sans-serif; line-height: 1.38; border-bottom: 3px solid #e1b25abf; padding-bottom: 30px; margin-bottom: 30px; position: relative; font-weight: 800 } .title-ss span { display: block; -webkit-transition: opacity 2s ease, -webkit-transform 1.5s ease; transition: opacity 2s ease, -webkit-transform 1.5s ease; -o-transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease, -webkit-transform 1.5s ease; -webkit-transform: translateX(-60%); -ms-transform: translateX(-60%); transform: translateX(-60%); opacity: 0 } .title-ss.animation .title__strong, .title-ss.animation span { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1 } } @media screen and (min-width:768px) { .title-ss { max-width: 800px; margin-left: auto; margin-right: auto; color: #f2f2f2; text-transform: uppercase; font-size: 65px; font-family: Montserrat, sans-serif; line-height: 1.38; border-bottom: 3px solid #e1b25abf; padding-bottom: 30px; margin-bottom: 30px; position: relative; font-weight: 800 } .title-ss span { display: block; -webkit-transition: opacity 2s ease, -webkit-transform 1.5s ease; transition: opacity 2s ease, -webkit-transform 1.5s ease; -o-transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease, -webkit-transform 1.5s ease; -webkit-transform: translateX(-60%); -ms-transform: translateX(-60%); transform: translateX(-60%); opacity: 0 } .title-ss.animation .title__strong, .title-ss.animation span { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1 } } .title__strong { color: #e1b25abf; display: inline-block; padding-right: 13px; padding-left: 13px; background-color: #fff; -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: opacity 2s ease, -webkit-transform 1.5s ease; transition: opacity 2s ease, -webkit-transform 1.5s ease; -o-transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease; transition: opacity 2s ease, transform 1.5s ease, -webkit-transform 1.5s ease; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0 } .header-composition__text { color: #f2f2f2; font-size: 30px; line-height: 1.5 } #slider_29178_slide01 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect-squar-gradientmap-black-2.jpg)!important; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .slider-boulders { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect.-text.jpg)!important; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .square-fix { border-radius: 0; left: 0; position: absolute } .square-fix-right { border-radius: 0; right: 0; position: absolute } .button3 { display: inline-block; text-decoration: none; padding: .5em; font-weight: bold; transition: all .5s; -webkit-background-clip: text; -webkit-text-fill-color: #3021215e; color: #2e2b2b } .button3:hover { text-shadow: 0px 0px 0px rgba(255, 255, 255, .75) } .button3:hover:after { left: 100%; top: 100%; bottom: 100%; right: 100% } .button3:before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; border-radius: 5px; transition: all .5s } .button3:after { content: ''; display: block; position: absolute; left: 2px; top: 2px; bottom: 2px; right: 2px; z-index: -1; border-radius: 5px; transition: all .5s } .b-orange, .b-orange:before { background: rgba(255,193,7,1); background: -moz-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,193,7,1)), color-stop(100%, rgba(255,87,34,1))); background: -webkit-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -o-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -ms-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 ) } .slider-gyms1 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect4-2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .slider-gyms2 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect4.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .slider-gyms3 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect4-3.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } @media (min-width:920px) { .colored_sections div { padding: 73px 75px 70px 80px } .colorbox { position: absolute; bottom: 0; display: -webkit-inline-box } } @media (max-width:919px) { .colored_sections div { padding: 7px 7px 7px 8px } } .colored_sections { margin-left: 0!important; margin-right: 0!important } .colored_sections h2, .colored_sections h2 span { line-height: 35px; margin-bottom: 25px; font-size: 25px; font-weight: 700; color: #fff } .colored_sections h2 span { margin-bottom: 0; display: block } .colored_sections p { margin-bottom: 34px; color: #fff } .red_section { opacity: 0.7; background-color: #f66 } .dark_section { opacity: 0.7; background-color: #272d43 } .green_section { opacity: 0.7; background-color: #82b541 } .slider-shape { background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effect.-text.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } @media (min-width: 576px) { .welcome-text h2 { font-weight: 700; font-size: 82px; display: block; margin-bottom: 0; background: -webkit-linear-gradient(#ff9696, #ffe89e); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .welcome-text p { color: #fff; margin-bottom: 50px; display: block } .welcome-text p { animation-delay: .5s; opacity: 1 } .welcome-text-v1 { color: #fff } .welcome-text { position: relative; z-index: 1; margin: 0; left: 0; position: absolute; text-align: center; top: 100px; width: 100%; padding-top: 20px; color: #fff } } @media (max-width: 576px) { .welcome-text h2 { font-weight: 700; display: block; margin-bottom: 0; background: -webkit-linear-gradient(#ff9696, #ffe89e); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .welcome-text p { color: #fff; margin-bottom: 50px; display: block } .welcome-text p { animation-delay: .5s; opacity: 1 } .welcome-text-v1 { color: #fff } .welcome-text { position: relative; z-index: 1; margin: 0; left: 0; position: absolute; text-align: center; width: 100%; padding-top: 120px; color: #fff; bottom: 20px } } @media (min-width: 576px) { .psfit-caption h1 { font-weight: 700; font-size: 82px; display: block; margin-bottom: 0; background: -webkit-linear-gradient(#cc176c, #b2ebd8); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .psfit-caption p { color: #fff; margin-bottom: 50px; display: block } .psfit-caption p { animation-delay: .5s; opacity: 1 } .psfit-caption-v1 { color: #fff } .psfit-caption { position: relative; z-index: 1; margin: 0; left: 0; text-align: center; width: 100%; } } @media (max-width: 576px) { .psfit-caption h1 { font-weight: 700; display: block; margin-bottom: 0; background: -webkit-linear-gradient(#cc176c, #b2ebd8); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .psfit-caption p { color: #fff; margin-bottom: 50px; display: block } .psfit-caption p { animation-delay: .5s; opacity: 1 } .psfit-caption-v1 { color: #fff } .psfit-caption { position: relative; z-index: 1; margin: 0; left: 0; text-align: center; width: 100%; bottom: 20px } } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); outline: none } .btn-5 { width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; background: rgb(98, 93, 93); background: linear-gradient(0deg, rgb(61, 60, 60) 0%, rgb(243, 240, 239) 100%) } .btn-5:hover { color: #47464e; background: transparent; box-shadow:none } .btn-5:before, .btn-5:after{ content:''; position:absolute; top:0; right:0; height:2px; width:0; background: #f0094a; box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002; transition:400ms ease all } .btn-5:after{ right:inherit; top:auto; left:0; bottom:0 } .btn-5:hover:before, .btn-5:hover:after{ width:100%; transition:800ms ease all } /* 9 */ .btn-9 { border: none; transition: all 0.3s ease; overflow: hidden } .btn-9:after { position: absolute; content: " "; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #1fd1f9; background-image: linear-gradient(315deg, #cc176c 0%, #b2ebd8 74%); transition: all 0.3s ease } .btn-9:hover { background: transparent; box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3); color: #fff } .btn-9:hover:after { -webkit-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3) } .hero-mail-btn { font-family: Oswald, Sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; fill: #ffffff; color: #fff; background-color: #fc0; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #81a46b; border-radius: 5px 5px 5px 5px } .hero-mail-btn:hover { font-family: Oswald, Sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; fill: #aea0a0; color: #948888; background-color: #fffbea; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #81a46b; border-radius: 5px 5px 5px 5px } .top_wrapper { max-width: 800px; margin-left: auto; margin-right: auto; color: #f2f2f2; text-transform: uppercase; font-size: 65px; font-family: Montserrat, sans-serif; line-height: 1.38; border-bottom: 3px solid #e1b25abf; padding-bottom: 30px; margin-bottom: 30px; position: relative; font-weight: 800; margin-bottom: 150px } .top_text { padding-top: 190px } @media screen and (max-width:1768px) { #vidtop-content { top: 0; color: #fff; padding: 80px } .btn325 { position: absolute; top: 150px; left: 0 } .btn326 { position: absolute; top: 150px; right: 0 } } .vid-info { position: absolute; width: 33%; background: rgba(0, 0, 0, .3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif } .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2 } .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0, 0, 0, .5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center } @media all and (max-width:600px) { .vid-info { width: 50%; padding: .5rem } .vid-info h1 { margin-bottom: .2rem } } @media all and (max-width:500px) { .vid-info .acronym { display: none } } @media screen and (min-width:768px) { .video-info-mobil { display: none } } @media screen and (max-width:768px) { .video-info-desktop { display: none } } .gym-slider1 h1 { word-spacing: 1.5 } .btn-shadow { box-shadow: 1px 2px 2px rgb(0 0 0 / 27%); line-height: 52px; display: inline-block; padding: 0 25px; font-size: 18px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, .27); -webkit-box-shadow: 1px 2px 2px rgb(0 0 0 / 27%) } .vjs-control-bar { display: none!important } .box-tasvir { overflow: hidden; height: 320px; width: 320px; position: relative; margin: 0 auto } @keyframes masihscroll { 0% { transform: translateY(0) } 50% { transform: translateY(-50%) } 100% { transform: translateY(0) } } .box-tasvir img { width: 100%; height: auto; max-width: 100%; transition: all 3s; animation-duration: 25s; animation-name: masihscroll; animation-iteration-count: 1000 } @media screen and (min-width:768px) { .text-mobile22 { padding-left: 140px; padding-top: 100px } } .title-website-02 { color: #f60; font-family: Rajdhani, Sans-serif; font-size: 5.8rem; font-weight: 700; text-transform: uppercase; line-height: 1.2em; -webkit-box-shadow: -4px 7px 46px 2px rgba(255, 255, 255, .603); -moz-box-shadow: -4px 7px 46px 2px rgba(255, 255, 255, .61); -o-box-shadow: -4px 7px 46px 2px rgba(240, 237, 237, .708); box-shadow: -4px 7px 46px 2px rgba(235, 228, 228, .616) } .section__layer { width: 100%; height: 100%; position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 1 } .main-bg-call { opacity: 0.5; background: #f36510 } @media screen and (min-width:1208px) { .small_intro h1 { font-family: 'Wallpoet', cursive; font-size: 55px; color: white; font-weight: 700; text-transform: capitalize; margin-bottom: 20px } } @media screen and (max-width:1208px) { .small_intro h1 { font-family: 'Wallpoet', cursive; font-size: 35px; color: white; font-weight: 700; text-transform: capitalize; margin-bottom: 20px } } @media screen and (min-width:1208px) { .small_intro p { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px 0 } } @media screen and (max-width:1208px) { .small_intro p { color: #222; font-size: 28px; font-weight: 700; margin: 0 0 20px 0 } } .section__layerslider { width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center } @media only screen and (min-width:1280px) { .gyms-caption h1 { color: #fff; font-size: 75px; line-height: 80px; font-weight: 300; text-transform: uppercase; letter-spacing: -5px; margin-bottom: 40px } } .gyms-caption { position: absolute; left: 0; right: 0; text-align: center; text-transform: uppercase; z-index: 15; color: #fff; bottom: inherit } .gyms-caption { position: absolute; right: 15%; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; font-weight: 500 } @media screen and (max-width:768px) { .section__layer svg { max-width: 100%; max-height: 100%; -o-object-fit: cover; object-fit: cover } } @media screen and (min-width:900px) { .section__layer { left: 10% } } .section__layer .layer { position: absolute; width: auto; height: 90%; flex: 0 0 auto } .iguana .section__image img { left: auto; right: 0; transform: translate(0) } .section_iguana { width: 100%; height: 100vh; position: relative; overflow: hidden } .section_iguana .container { height: 100% } .section_iguana__wrapper { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column } .section_iguana__wrapper { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column } @media screen and (min-width:768px) { .section_iguana__wrapper { padding-top: 0; padding-left: 5rem; align-items: flex-start } } @media screen and (min-width:900px) { .section_iguana__wrapper { padding-top: 0; flex-direction: row; align-items: center } .section_iguana__wrapper.img-left { flex-direction: row-reverse } } @media screen and (min-width:1200px) { .section_iguana__wrapper { padding-left: 0 } } .section_iguana__wrapper .left, .section_iguana__wrapper .right { width: 100% } @media screen and (min-width:900px) { .section_iguana__wrapper .left, .section_iguana__wrapper .right { width: 50% } } @media screen and (min-width:900px) { .section_iguana__wrapper .left--large { width: 70% } } .section_iguana__wrapper .left--large+.right { width: 30% } .section_iguana__wrapper { display: flex; align-items: flex-start; justify-content: center } @media screen and (max-width:900px) { .section_iguana__wrapper .right.video { margin-top: 5rem } } .xlarge { font-size: 2.6rem; font-weight: 500 } @media screen and (min-width:768px) { .xlarge { font-size: 2.8rem } } .svg-border-animation { position: absolute; width: 320px; height: 60px; left: 30%; transform: translate(-50%, -50%) } .hover-text { position: absolute; line-height: 60px; width: 320px; top: 0; color: #333; font-size: 28px; text-align: center; cursor: pointer } .shape { fill: transparent; stroke-width: 4px; stroke: #333; stroke-dasharray: 160 520; stroke-dashoffset: -460 } .svg-border-animation:hover .hover-text { transition: .5s; color: #3f51b5 } .svg-border-animation:hover .shape { -webkit-animation: draw .5s linear forwards; animation: draw .5s linear forwards } @keyframes draw { 0% { stroke-dasharray: 160 520; stroke-dashoffset: -460; stroke-width: 4px } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; stroke: #3F51B5 } } #backgroundlogo { position: inherit } .backgroundlogo { overflow: hidden; background-image: url(https://localhost/wordpress/wp-content/uploads/2021/12/Untitled3.png) } .social-style-two { display: inline-flex } .social-style-two a { margin: 0 3px; width: 40px; height: 40px; font-size: 13px; border-radius: 50%; text-align: center; line-height: 40px; display: inline-block; background: #fff } .social-style-two a:hover { background: var(--heading-color, #2d2d2d) } .social-style-two a i { color: var(--heading-color, #2d2d2d); -webkit-transition: .5s; transition: .5s; line-height: inherit } .social-style-two a:hover i { color: #fff } .social-style-two a:first-child { margin-left: 0 } .social-style-two a:last-child { margin-right: 0 } .logofooaspace { position: absolute; z-index: 2 } .mc4wp-form { margin: 0; padding: 1.5em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #99cddd } .mc4wp-form label, .mc4wp-form-submit { color: #fff; text-shadow: 1px 1px 0 #289dcc } .mc4wp-form, .mc4wp-form-control { margin: 10px 0 20px 0 } .mc4wp-form-control:focus { border: 2px solid #289dcc } div.mc4wp-form-response-output { background: #f8f8f8; text-align: center; width: 92.5%; margin: 1em 0 1em 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } .mc4wp-form-fields p label input[type=email] { background: #f8f8f8; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-top: 15px } .mc4wp-form-fields p label input[type=email]:hover { background: #49e9be; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } .mc4wp-form-fields p label input[type=submit] { color: #000!important; background-color: #fc0707!important; border-color: #e90000 } .anunciate span iframe { color: #000!important; background-color: #fc0707!important; border-color: #e90000 } .select-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .email-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .name-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .sslider-content>span::before { content: ""; background: #190a32; height: 3px; float: left; width: 60px; margin-top: 15px; margin-right: 10px } .sslider-content h2 { color: #190a32; padding-right: 5% } .sslider-content p { color: #676f67; font-size: 16px; margin-bottom: 0 } .sslider-content>span { font-size: 22px; font-weight: 500; color: #ff3494; display: block; margin-bottom: 20px; margin-top: 30px } .sslider-content>span { font-size: 16px; font-weight: 500; color: #ff3494; text-transform: uppercase; letter-spacing: 6px; display: block; margin-bottom: 20px } .sslider-content h2 { font-size: 33px; color: #fff; letter-spacing: -2px; line-height: 1.1; margin-bottom: 40px } .sslider-content h2 span { color: #ff3494 } .sslider-content p span { display: inline-block; height: 2px; width: 40px; background: #ff3494; margin-right: 20px; position: relative; top: -4px } .sslider-content p { color: #fff; font-size: 16px; margin-bottom: 0 } .ssmall-title { background: #f7f4fe; display: inline-block; border-radius: 20px } .ssmall-title li { display: inline-block; padding: 5px 20px; color: #190a32 } .ssmall-title li:first-child { background: #7d4196; border-radius: 20px; color: #fff; padding: 5px 30px } .ss-btn { background: transparent linear-gradient(90deg, #7d4196 0, #ff3494 100%) 0 0 no-repeat padding-box; box-shadow: 3px 4px 25px #c63A9580; color: #fff } .ss-btn { background: #fff; color: #ff3494 } .ss-btn:hover { background: transparent linear-gradient(90deg, #ff3494 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; box-shadow: 3px 4px 25px #c63A9580 } .ss-btn1 { background: #f60; color: #fff; font-size: 15px; font-family: var(--font-alt); box-shadow: 3px 4px 20px #f4f0f3f9 } .ss-btn2:hover { background: transparent linear-gradient(90deg, #ff3494 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; box-shadow: 3px 4px 25px #c63A9580 } .ss-btn2 { background: #fff; color: #f60; font-size: 15px; font-family: var(--font-alt); box-shadow: 3px 4px 20px #f4f0f3f9 } .ss-btn1:hover { background: transparent linear-gradient(90deg, #f60 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; font-size: 15px; font-family: var(--font-alt); box-shadow: 3px 4px 25px #f4f0f3f9 } .s-btn { background: #fff; color: #ff3494 } .s-btn:hover { background: transparent linear-gradient(90deg, #ff3494 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; box-shadow: 3px 4px 25px #c63A9580 } .s-btn { -moz-user-select: none; background: transparent linear-gradient(90deg, #7d4196 0, #ff3494 100%) 0 0 no-repeat padding-box; box-shadow: 3px 4px 25px #c63A9580; border: none; border-radius: 50px; color: #fff; display: inline-block; font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1; margin-bottom: 0; padding: 15px 35px; text-align: center; text-transform: unset; touch-action: manipulation; transition: all .3s ease 0s; vertical-align: middle; white-space: nowrap; position: relative } .home3main1 { border-style: solid; border-width: 4px 0 0; border-color: #ff0; border-radius: 0 33% 0 33%; width: 350px } .home3main1 img { border-style: solid!important; border-width: 4px 0 0!important; border-color: #ff0!important; border-radius: 0 33% 0 33%!important } .home3main2 { border-style: solid; border-width: 4px 0 0; border-color: #ff0; border-radius: 33% 0 33% 0; width: 350px } .elementor-element-de814b2 { left: 30px } .home3main2 img { border-style: solid!important; border-width: 4px 0 0!important; border-color: #ff0!important; border-radius: 33% 0 33% 0!important } .home3button1 { --btn-icon-spacing: 8px; font-weight: 400; min-width: 0; min-height: 0; border-style: solid; border-width: 0 0 1px; border-radius: 0 0 0 0; transition-property: all; transition-duration: .3s; transition-timing-function: ease; transition-delay: 0s; color: #fff; background: #0000; border-color: #ff0 } .home3button1 div div a span span i { margin-left: 8px } .btn-wrp { animation-duration: 1.3s; animation-fill-mode: both } .btn-wrp .btn-link { border-bottom: 1px solid #000; color: #000; font-size: 17px; font-weight: 700; line-height: 1 } .btn-wrp .btn-link:hover { color: #f4a460; border-color: #f4a460 } .left-50 { left: 50px } .slider_84 { padding-top: 40px } @media (min-width:121px) and (max-width:590px) { .slider_26878_slide01 { height: 100vh } } .slider84text { padding-top: 40px } .slider84text h1 { padding-top: 40px } .service-item-ar { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) } .service-thumb-ar { overflow: hidden; z-index: -1 } .service-item-ar:hover { cursor: pointer } .service-content-ar { padding: 0 30px 30px 30px } .service-content-ar i { color: #fff!important; display: inline-block!important; margin-bottom: 10px!important; z-index: 1!important } .service-content-ar i:before { background-color: #bfca02!important; border-radius: 2px!important; padding: 10px!important } .service-a-ar { color: #bfca02; text-transform: uppercase!important; font-size: 12px!important; font-weight: 600!important; font-family: "Work Sans", sans-serif!important } .service-content-ar h1 { margin: 0 0 10px; font-weight: 400; line-height: 1.7; color: #263a4f; letter-spacing: -.5px } .year-content { position: absolute; width: auto; height: auto; left: 80px; top: 150px } .year-content h2 { color: #263a4f; font-size: 100px; position: relative; margin-bottom: 20px; z-index: 1 } .year-content h2:before { background-color: transparent; position: absolute; content: ""; width: 120px; height: 120px; border: 5px solid #bfca02; left: -10px; top: -80px; z-index: -1 } .year-content span { font-family: Poppins, sans-serif; color: #263a4f; text-transform: uppercase; font-weight: 600 } .section-heading h2 { font-size: 32px; display: block } .section-heading span { display: inline-block; text-transform: uppercase; font-size: 12px; color: #263a4f; font-weight: 600; letter-spacing: 0; font-family: "Work Sans", sans-serif; position: relative; margin-bottom: 10px; z-index: 1 } .section-heading span:before { background-color: transparent; position: absolute; content: ""; width: 30px; height: 30px; left: -15px; top: -10px; border: 3px solid #bfca02; opacity: .5; z-index: -1 } .btn-shadow { box-shadow: 1px 2px 2px rgb(0 0 0 / 27%); line-height: 52px; display: inline-block; padding: 0 25px; font-size: 18px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, .27); -webkit-box-shadow: 1px 2px 2px rgb(0 0 0 / 27%) } .select-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .email-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .name-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .bypostauthor { display: block; padding: .5em .5em .5em -webkit-calc(.5em + 32px); padding: .5em .5em .5em calc(.5em + 32px); -webkit-border-radius: 5px; border-radius: 5px; border: 3px solid rgba(255, 102, 99, .2) } @media (min-width:1291px) { .aspace-video-iframe { width: 850px; padding-left: 0; right: 50px } } @media (min-width:991px) and (max-width:1290px) { .aspace-video-iframe { width: 850px; padding-left: 0; right: 50px } } @media (min-width:768px) and (max-width:990px) { .aspace-video-iframe { width: 720px; padding-left: 0; right: 80px } } @media (min-width:540px) and (max-width:767px) { .aspace-video-iframe { width: 520px; padding-left: 0; right: 80px } } @media (min-width:350px) and (max-width:539px) { .aspace-video-iframe { width: 320px; padding-left: 0; right: 60px } } @media (min-width:250px) and (max-width:349px) { .aspace-video-iframe { width: 250px; padding-left: 0; right: 40px } } .button--consultation { background: #931313; font-size: 16px } .button--consultation:hover { background: #b18a8a; font-size: 17px } .white-opacity6 { background: #fff; opacity: .6; max-width: fit-content } .gradient-1 { background: -webkit-radial-gradient(#e1641b, #f5a106); background: radial-gradient(#fa9a0a, #f5a106); border-radius: 10px; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; } .gradient-2 { background: -webkit-radial-gradient(#cc2b5e, #753a88); background: radial-gradient(#cc2b5e, #753a88) } .gradient-3 { background: -webkit-radial-gradient(#43cea2, #185a9d); background: radial-gradient(#43cea2, #185a9d) } .gradient-4 { background: linear-gradient(90deg, red 10%, transparent 10%, transparent 20%, red 20%, red 30%, transparent 50%, red 50%, red 70%, transparent 70%, red 80%) 1 1 } .gradient-5 { background: linear-gradient(90deg, red 10%, transparent 10%, transparent 20%, red 20%, red 30%, transparent 50%, red 50%, red 70%, transparent 70%, red 80%) 1 1; border-image: linear-gradient(90deg, red 10%, transparent 10%, transparent 20%, red 20%, red 30%, transparent 50%, red 50%, red 70%, transparent 70%, red 80%) 1 1 } .gradientradial-1 { background-position: center center; background: radial-gradient(circle, #000, #fff) } .gradientradial-2 { background-position: center center; background: radial-gradient(ellipse, #000, #fff) } .gradientradial-3 { background: radial-gradient(left bottom, circle farthest-side, #f7ff08 0, #21ad11 50%, #00a3ef 80%) } .img-rotate-left img { transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out } .img-rotate-left:hover img { transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg) } .layer-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .img-inner-shadow { top: 0; right: 0; bottom: 0; left: 0 } .img-inner-shadow:hover>.layer-image { box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9) } .img-inner-shadow:hover { box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9) } .img-inner-shadow>.layer-image { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow:hover .layer-image { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow:hover { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow img { top: 0; right: 0; bottom: 0; left: 0 } .img-inner-shadow:hover>.layer-image { box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9) } .img-inner-shadow:hover img { box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 120px rgba(0, 0, 0, .9) } .img-inner-shadow>.layer-image img { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow img { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow:hover .layer-image img { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow:hover img { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow-2 .layer-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .img-inner-shadow-2:hover .layer-image { box-shadow: inset 0 0 120px rgba(255, 255, 255, .9); -moz-box-shadow: inset 0 0 120px rgba(255, 255, 255, .9); -webkit-box-shadow: inset 0 0 120px rgba(255, 255, 255, .9) } .img-inner-shadow-2 .layer-image { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .img-inner-shadow-2:hover .layer-image { transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out } .bmi-head { font-family: Montserrat, sans-serif; font-style: normal; font-weight: 900; font-size: 60px; line-height: 73px; letter-spacing: .05em; margin-left: 60px } .bmi-desc { font-style: normal; font-weight: 400; font-size: 20px; letter-spacing: .09em; margin-left: 60px } .bmi-text { line-height: 30px; letter-spacing: .05em } .bmi-input { height: 60px } .tabletr { height: 40px; font-size: 20px; color: #fff; background: #000 } @media screen and (max-width:600px) { .calculate { line-height: 25px; width: 300px; margin: 0 auto; letter-spacing: .05em } .bmi-desc { font-size: 16px; margin-left: 10px; padding: 0 } .bmi-head { font-size: 44px; margin-left: 10px; padding: 0 } .bmi-text { font-size: 14px; line-height: 28px } .bmi-link { justify-content: center!important } .calculate-btn { justify-content: center!important } } @media (min-width:768px) { .bmi-desc { font-size: 16px } .bmi-head { font-size: 44px } } .footer-widget p { margin-bottom: 27px } .animate-border { position: relative; display: block; width: 115px; height: 3px; background: #007bff } .animate-border:after { position: absolute; content: ""; width: 35px; height: 3px; left: 0; bottom: 0; border-left: 10px solid #fff; border-right: 10px solid #fff; -webkit-animation: animborder 2s linear infinite; animation: animborder 2s linear infinite } @-webkit-keyframes animborder { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(113px); transform: translateX(113px) } } @keyframes animborder { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(113px); transform: translateX(113px) } } .animate-border.border-white:after { border-color: #fff } .animate-border.border-yellow:after { border-color: #f5b02e } .animate-border.border-orange:after { border-right-color: #007bff; border-left-color: #007bff } .animate-border.border-ash:after { border-right-color: #eef0ef; border-left-color: #eef0ef } .animate-border.border-offwhite:after { border-right-color: #f7f9f8; border-left-color: #f7f9f8 } @keyframes primary-short { 0% { width: 15% } 50% { width: 90% } 100% { width: 10% } } @keyframes primary-long { 0% { width: 80% } 50% { width: 0% } 100% { width: 80% } } .dk-footer { padding: 75px 0 0; background-color: #151414; position: relative; z-index: 2 } .dk-footer .contact-us { margin-top: 0; margin-bottom: 30px; padding-left: 80px } .dk-footer .contact-us .contact-info { margin-left: 50px } .dk-footer .contact-us.contact-us-last { margin-left: -80px } .dk-footer .contact-icon i { font-size: 24px; top: -15px; position: relative; color: #007bff } .dk-footer-box-info { position: absolute; top: -122px; background: #202020; padding: 40px; z-index: 2 } .dk-footer-box-info .footer-social-link h3 { color: #fff; font-size: 24px; margin-bottom: 25px } .dk-footer-box-info .footer-social-link ul { list-style-type: none; padding: 0; margin: 0 } .dk-footer-box-info .footer-social-link li { display: inline-block } .dk-footer-box-info .footer-social-link a i { display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; background: #000; margin-right: 5px; color: #fff } .dk-footer-box-info .footer-social-link a i.fa-facebook { background-color: #3b5998 } .dk-footer-box-info .footer-social-link a i.fa-twitter { background-color: #55acee } .dk-footer-box-info .footer-social-link a i.fa-google-plus { background-color: #dd4b39 } .dk-footer-box-info .footer-social-link a i.fa-linkedin { background-color: #0976b4 } .dk-footer-box-info .footer-social-link a i.fa-instagram { background-color: #b7242a } .footer-awarad { margin-top: 285px; align-items: center } .footer-awarad p { color: #fff; font-size: 24px; font-weight: 700; margin-left: 20px; padding-top: 15px } .footer-info-text { margin: 26px 0 32px } .footer-left-widget { padding-left: 80px } .footer-widget .section-heading { margin-bottom: 35px } .footer-widget h3 { font-size: 24px; color: #fff; position: relative; margin-bottom: 15px } .footer-widget ul { width: 50%; float: left; list-style: none; margin: 0; padding: 0 } .footer-widget li { margin-bottom: 18px } .footer-widget p { margin-bottom: 27px } .footer-widget a { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s } .footer-widget a:hover { color: #32304a } .footer-widget:after { content: ""; display: block; clear: both } .dk-footer-form { position: relative } .dk-footer-form input[type=email] { padding: 14px 28px; border-radius: 50px; background: #2e2e2e; border: 1px solid #2e2e2e } .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::-webkit-input-placeholder { color: #878787; font-size: 14px } .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::placeholder { color: #878787; font-size: 14px } .dk-footer-form button[type=submit] { position: absolute; top: 0; right: 0; padding: 12px 24px 12px 17px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border: 1px solid #007bff; background: #007bff; color: #fff } .dk-footer-form button:hover { cursor: pointer } .contact-us { position: relative; z-index: 2; margin-top: 65px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .contact-icon { position: absolute } .contact-icon i { font-size: 36px; top: -5px; position: relative; color: #007bff } .contact-info { margin-left: 75px; color: #fff } .contact-info h3 { font-size: 20px; color: #fff; margin-bottom: 0 } .footer-67 { display: block } .col_white_amrc { color: #fff } .pt2 { padding-top: 40px; margin-bottom: 20px } .mb10 { padding-bottom: 15px } .footer_ul_amrc { margin: 0; list-style-type: none; font-size: 14px; padding: 0 0 10px 0 } .footer_ul_amrc li { padding: 0 0 5px 0 } .footer_ul_amrc li a { color: #ccc } .footer_ul_amrc li a:hover { color: #fff; text-decoration: none } .fleft { float: left } .padding-right { padding-right: 10px } .footer_ul2_amrc { margin: 0; list-style-type: none; padding: 0 } .footer_ul2_amrc li p { display: table } .footer_ul2_amrc li a:hover { text-decoration: none } .footer_ul2_amrc li i { margin-top: 5px } .bottom_border { border-bottom: 1px solid #323f45; padding-bottom: 20px } .foote_bottom_ul_amrc { list-style-type: none; padding: 0; display: table; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto } .foote_bottom_ul_amrc li { display: inline } .foote_bottom_ul_amrc li a { color: #999; margin: 0 12px } .social_footer_ul { display: table; margin: 15px auto 0 auto; list-style-type: none } .social_footer_ul li { padding-left: 20px; padding-top: 10px; float: left } .social_footer_ul li a { color: #ccc; border: 1px solid #ccc; padding: 8px; border-radius: 50% } .social_footer_ul li i { width: 20px; height: 20px; text-align: center } .body-sections-show { height: 60px } .generic-anchor { color: #8db9ed } .generic-anchor:hover { color: #ccc } .generic-anchor:visited { color: #8db9ed } .flex-rw { display: flex; flex-flow: row wrap } .main-34 { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font: 10em Oswald, sans-serif; color: #9b9b9b; line-height: 1 } .footer-34 { background: #373737; margin-top: auto; width: 100% } .footer-list-top>li { text-align: center; padding-bottom: 10px; list-style: none } .footer-list-header { padding: 10px 0 5px 0; color: #fff; font: 2.3vw Oswald, sans-serif } .footer-list-anchor { font: 1.3em "Open Sans", sans-serif } .footer-social-section { width: 100%; align-items: center; justify-content: space-around; position: relative; margin-top: 5px } .footer-social-section::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 10px; border-top: 1px solid #8db9ed; width: calc(100% - 20px) } .footer-social-overlap { position: relative; z-index: 2; background: #373737; padding: 0 20px; display: flex } .footer-social-connect { display: flex; align-items: center; font: 3.5em Oswald, sans-serif; color: #fff } .footer-social-small { font-size: .6em; padding: 0 20px } .footer-social-overlap>a { font-size: 3em } .footer-social-overlap>a:not(:first-child) { margin-left: .38em } .footer-bottom-section { width: 100%; padding: 10px; border-top: 1px solid #fff; margin-top: 10px } .footer-bottom-section>div:first-child { margin-right: auto } .footer-bottom-wrapper { font-size: 1.5em; color: #fff; display: inline-flex; justify-content: center; align-items: center } .footer-bottom-wrapper a { padding: 2px } .footer-address { display: inline; font-style: normal } @media screen and (min-width:1768px) { .footer-list-top { width: 33.333%!important } } @media screen and (min-width:768px) { .footer-list-top { width: 33.333%!important } } @media screen and (min-width:768px) { .footer-list-header { font-size: 2em } .footer-list-anchor { font-size: 1.1em } .footer-social-connect { font-size: 2.5em } .footer-social-overlap>a { font-size: 2.24em } .footer-bottom-wrapper { font-size: 1.3em } .btn323 { top: 140px } .btn324 { top: 240px } .pulsating-circle { top: 140px; left: 0 } } @media only screen and (max-width:568px) { .main-34 { font-size: 5em } .footer-list-top { width: 100%!important } .footer-list-header { font-size: 3em } .footer-list-anchor { font-size: 1.5em } .footer-social-section { justify-content: center } .footer-social-section::after { top: 25% } .footer-social-connect { margin-bottom: 10px; padding: 0 10px } .footer-social-overlap { display: flex; justify-content: center } .footer-social-icons-wrapper { width: 100%; padding: 0 } .footer-social-overlap>a:not(:first-child) { margin-left: 20px } .footer-bottom-section { padding: 0 5px 10px 5px } .footer-bottom-wrapper { text-align: center; width: 100%; margin-top: 10px } .btn323 { top: 100px } .btn324 { top: 200px } .btn325 { position: absolute; top: 120px; left: 0 } .btn326 { position: absolute; top: 120px; right: 0 } .pulsating-circle { top: 100px; left: 0 } } @media only screen and (max-width:480px) { .footer-social-overlap>a { margin: auto } .footer-social-overlap>a:not(:first-child) { margin-left: 0 } .footer-bottom-rights { display: block } } @media only screen and (max-width:320px) { .footer-list-header { font-size: 2.2em } .footer-list-anchor { font-size: 1.2em } .footer-social-connect { font-size: 2.4em } .footer-social-overlap>a { font-size: 2.24em } .footer-bottom-wrapper { font-size: 1.3em } .btn323 { top: 80px } .btn324 { top: 160px } .btn325 { position: absolute; top: 80px; left: 0 } .btn326 { position: absolute; top: 80px; right: 0 } .pulsating-circle { top: 80px; left: 0 } } .spinner-snake { display: inline-block; border: 4px solid transparent; border-top-color: #26a2ff; border-left-color: #26a2ff; border-bottom-color: #26a2ff; text-align: center; cursor: pointer; vertical-align: middle; width: 39px; height: 39px; border-radius: 50%; animation: spinner-rotate .8s infinite linear } @keyframes spinner-rotate { 0% { transform: rotate(0) } 100% { transform: rotate(1turn) } } #load { width: 100%; height: 100%; position: fixed; z-index: 9999 } .login-page { width: 360px; padding: 8% 0 0; margin: auto } .form-agency01 { position: relative; z-index: 1; background: #fff; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2), 0 5px 5px 0 rgba(0, 0, 0, .24) } .form-agency01 input { font-family: Roboto, sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px } .form-agency01 button { font-family: Roboto, sans-serif; text-transform-agency01: uppercase; outline: 0; background: #4caf50; width: 100%; border: 0; padding: 15px; color: #fff; font-size: 14px; -webkit-transition: all .3 ease; transition: all .3 ease; cursor: pointer } .form-agency01 button:active, .form-agency01 button:focus, .form-agency01 button:hover { background: #43a047 } .form-agency01 .message-agency01 { margin: 15px 0 0; color: #b3b3b3; font-size: 12px } .form-agency01 .message-agency01 a { color: #4caf50; text-decoration: none } .form-agency01 .register-form-agency01 { display: none } .container-agency01 { position: relative; z-index: 1; max-width: 300px; margin: 0 auto } .clipdesign1 { width: 100%; padding-left: 16%; padding-right: 16%; background-image: -webkit-gradient(linear, left bottom, right top, from(#d16ba5), color-stop(#c777b9), color-stop(#ba83ca), color-stop(#aa8fd8), color-stop(#9a9ae1), color-stop(#8aa7ec), color-stop(#79b3f4), color-stop(#69bff8), color-stop(#52cffe), color-stop(#41dfff), color-stop(#46eefa), to(#5ffbf1)); background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); overflow: visible; -webkit-clip-path: polygon(0 0, 91% 0, 70% 100%, 0 100%); clip-path: polygon(0 0, 91% 0, 70% 100%, 0 100%); min-height: 90vh } .container-agency01:after, .container-agency01:before { content: ""; display: block; clear: both } .container-agency01 .info { margin: 50px auto; text-align: center } .container-agency01 .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1a1a1a } .container-agency01 .info span { color: #4d4d4d; font-size: 12px } .container-agency01 .info span a { color: #000; text-decoration: none } .container-agency01 .info span .fa { color: #ef3b3a } .bg-213 { background: url(../dist/img/lib/pyramids.svg); background-size: cover; background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; background-repeat: no-repeat; background: #f5d70d; background: linear-gradient(90deg, #f5d70d 5%, #b92f2f 96%); box-shadow: 10 1px 4px 8px #c5c5c5; height: auto; width: 100%; animation-name: wrapper; -moz-animation: wrapper 3s forwards; -webkit-animation: wrapper 3s forwards; -ms-animation: wrapper 3s forwards; animation: wrapper 3s forwards } .bg-214 svg { background: #f5d70d; background: linear-gradient(90deg, #f5d70d 5%, #b92f2f 96%); display: block; position: relative; transform-origin: center; width: calc(100% + 12px); transform: translateY(50%) } .bg-214-shape-fill { fill: #6e0d2d; fill-opacity: .7 } .bg-215 { width: 100%; height: 150px; background: url(../dist/img/lib/pyramids.svg); background-size: 812px; background-size: auto; background-repeat: no-repeat; padding-bottom: calc(10% * 3 / 40) } .bg-226 { width: 100%; height: 150px; background: url(../dist/img/lib/pyramids.svg); background-size: 812px; background-size: auto; background-repeat: no-repeat; padding-bottom: calc(10% * 3 / 40); animation-name: wrapper; -moz-animation: wrapper 3s forwards; -webkit-animation: wrapper 3s forwards; -ms-animation: wrapper 3s forwards; animation: wrapper 3s forwards } .bg-265-big-top>#waveSvg { fill: rgb(20, 20, 220) } svg#waveSvg { fill: blue } .icon-img-wrapper:hover { background: #2a80a6 } .eb-infobox-wrapper.eb-infobox-ilhvtar .number-or-icon:hover { background: #2a80a6 } .bg-564 { background: url(https://agency.dronstar.com/wp-content/uploads/2021/12/3bfe8e2e-video-sce-bg-pattarn.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .bg-569 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/bg-1.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .bg-570 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/moving-forward-2.png); background-size: contain; background-repeat: no-repeat; background-position: right 20% bottom 34%; width: 100%; height: 100% } .bg-265 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr4.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 280px; width: 573px; -webkit-background-size: contain; background-size: contain; z-index: 0; margin-bottom: -1px; top: 184em } .bg-265b { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr3.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 280px; width: 573px; -webkit-background-size: contain; background-size: contain; z-index: 0; margin-bottom: -1px; top: 183em } .bg-265b-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr3.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 400px; width: 100%; -webkit-background-size: contain; background-size: contain; z-index: 0; margin-bottom: -1px; opacity: .5 } .bg-265-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr4.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 400px; width: 100%; -webkit-background-size: contain; background-size: contain; z-index: 0; margin-bottom: -1px } .bg-568 { background: url(https://agency.dronstar.com/wp-content/uploads/2021/12/3bfe8e2e-video-sce-bg-pattarn.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .bg-566 { background: url(https://agency.dronstar.com/wp-content/uploads/2021/12/3bfe8e2e-video-sce-bg-pattarn.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .bg-270-big-lightrose-deg-right { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/light-rose-deg-right.png); position: absolute; right: 0; background-repeat: no-repeat; height: 700px; width: 100%; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; opacity: .5 } .bg-265-big-lightrose { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/light-rose-.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 400px; width: 100%; -webkit-background-size: cover; background-size: cover; z-index: 0; margin-bottom: -1px; opacity: .5 } .bg-265-big-lightrose2 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/light-rose-deg-left2.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 400px; width: 100%; -webkit-background-size: cover; background-size: cover; z-index: 0; margin-bottom: -1px; opacity: .5 } .bg-265-big-lightrose-center { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/light-rose-deg-center.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 500px; width: 100%; -webkit-background-size: cover; background-size: cover; z-index: 0; margin-bottom: -1px; opacity: .5 } .bg-265-big-lightrose-deg { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/light-rose-deg.png); position: absolute; left: 0; background-repeat: no-repeat; bottom: 0; height: 400px; width: 100%; -webkit-background-size: cover; background-size: cover; z-index: 0; margin-bottom: -1px; opacity: .5 } .bg-270blue-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr2.png); position: absolute; right: 0; background-repeat: no-repeat; height: 700px; width: 100%; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; margin-left: auto; transform: translateX(0) translateY(-90%); opacity: .5 } .bg-270blue-bihhg { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr2.png); left: auto; right: 0; transform: translate(0) } .bg-271blue-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr5.png); position: absolute; right: 0; background-repeat: no-repeat; height: 700px; width: 100%; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; margin-left: auto; transform: translateX(0) translateY(-90%); opacity: .5 } .bg-272blue-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/road_map_3.png); position: absolute; right: 0; background-repeat: no-repeat; height: 700px; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; margin-left: auto; transform: translateX(0) translateY(-90%); opacity: .5 } .bg-273blue-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr5.png); position: absolute; background-repeat: no-repeat; height: 700px; width: 100%; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; margin-left: auto; transform: rotate(270deg); top: 70%; opacity: .5 } .bg-274blue-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr5.png); position: relative; background-repeat: no-repeat; height: 700px; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: -1px; margin-right: 0; margin-left: auto; top: -808px; opacity: .5; right: 0; overflow: hidden } .bg-275blue-big-vertical-left { position: relative; background-repeat: no-repeat; height: 396px; width: 100%; right: 107em; z-index: -1; margin-bottom: -1px; top: -181em; background-size: cover; transform: rotate(90deg); overflow: overlay } .bg-275blue-big-vertical { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/backgr5.png); position: relative; background-repeat: no-repeat; height: 589px; -webkit-background-size: contain; background-size: cover; z-index: -10; margin-bottom: 9px; margin-right: 0; margin-left: auto; inset-block-start: -353px; opacity: .5; right: -50%; overflow: hidden; transform: rotate(270deg); bottom: 0 } .zindex1 { z-index: 1 } .zindex4 { z-index: 134 } .testin img { inset: -106px; transition: transform 10s cubic-bezier(.22, .63, .6, .88) 0s; transform: translateX(0) translateY(0) translateZ(0) } .bg-267 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/coin3.png); position: absolute; background-repeat: no-repeat; height: 100%; width: 100%; left: 8%; z-index: 0; margin-bottom: -1px; top: 153em } .bg-268 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/coin2.png); position: absolute; background-repeat: no-repeat; height: 100%; width: 100%; left: 80%; z-index: 0; margin-bottom: -1px; top: 173em } .bg-269 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/coin2.png); position: absolute; background-repeat: no-repeat; height: 100%; width: 100%; left: 80%; z-index: 0; margin-bottom: -1px; top: 173em } .bg-267small { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-11.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-1 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-1.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-2 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-2.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-3 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-3.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-4 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-4.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-5 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-5.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-6 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos-12.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-7 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/elementospequenos10.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-267small-8 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/Untitled-1-1.png); position: absolute; background-repeat: no-repeat; height: 200px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain; transform: rotate(90deg) } .bg-267big-1 { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/road_map_2.png); position: absolute; background-repeat: no-repeat; height: 700px; width: 100%; left: -5%; z-index: -10; margin-bottom: -1px; top: 130em; background-size: contain } .bg-266 { padding: 90px 0 130px 0; background-color: #2052f5; color: #fff; position: relative; z-index: 3 } .bg-565 { background: url(https://agency.dronstar.com/wp-content/uploads/2021/12/9086d0ef-get-in-touch-bg-pettarn.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100% } .bg-267-big { background-image: url(https://agency.dronstar.com/wp-content/uploads/2022/01/coin3.png); position: absolute; background-repeat: no-repeat; height: 140px; width: 100%; left: 8%; z-index: 10; margin-bottom: -1px } .bg-566 svg { fill: rgb(56, 49, 5); background-color: #6db3f2; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; margin-left: auto; opacity: .5 } .bg-566 img { background-color: #6db3f2; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; margin-left: auto; opacity: .5 } .bg-566:after svg { fill: red; background-color: rgba(0, 0, 0, .37); content: ''; display: block; height: 100% } .bg-566:before { fill: red; background-color: rgba(0, 0, 0, .37); content: ''; display: block; height: 100% } .bg-566 { background: linear-gradient(rgba(191, 179, 20, .5) 50%, rgba(137, 130, 42, .5) 50%, rgba(0, 0, 0, .5)50%), url("https://agency.dronstar.com/wp-content/uploads/2022/01/file-02-coverlow.png"), linear-gradient(rgba(110, 19, 19, .5) 50%, rgba(0, 0, 0, .5)100%); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; margin-left: auto } .bg-567 { background: url(https://localhost/wordpress/wp-content/uploads/2021/12/bgbg-1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center right; width: 100%; margin-left: auto; float: right } .customright { right: 25% } .bg-static1 { top: 0; position: absolute } .bg-567 { background: url(https://localhost/wordpress/wp-content/uploads/2021/12/bgbg-1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center right; width: 100%; margin-left: auto; float: right } .customright { right: 25% } .bg-static1 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/token_1.png); top: 0; position: relative; background-size: contain; background-repeat: no-repeat } .bg-static2 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/token_2.png); top: 0; position: relative; background-size: contain; background-position: center center; height: 250px; background-repeat: no-repeat } .bg-static3 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/token_3.png); top: 0; position: relative; background-size: contain; background-position: center center; height: 250px; background-repeat: no-repeat } .bg-static4 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/token_4.png); top: 0; position: relative; background-size: contain; background-repeat: no-repeat } .bg-static5 { background: url(https://agency.dronstar.com/wp-content/uploads/2022/01/token_5.png); top: 0; position: relative; background-size: contain; background-repeat: no-repeat } .right-25 { right: 25%; position: relative } .right-50 { right: 50%; position: relative } .right-75 { right: 75%; position: relative } .right-100 { right: 100%; position: relative } .right-125 { right: 125%; position: relative } .right-150 { right: 150%; position: relative } .customtop1 { top: -130%; position: relative; z-index: 124 } .customtop3 { top: -20%; position: relative; z-index: 124 } .customtop2 { top: 60%; position: relative; z-index: 124 } .customtop4 { top: -170%; position: relative; z-index: 124 } .customtop5 { top: -30%; position: relative; z-index: 124 } .text-line-before { content: ""; display: block; z-index: 1; left: 18px; top: 0; height: 30px; border: 1px solid #fff; border-width: 0 0 0 1px; border-spacing: 15px 50px; position: absolute } .text-border-1 h2 { width: 100%; height: 200px; float: left; border: 4px solid #fff; border-width: 0 0 0 4px; border-color: #fff; border-style: solid; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; counter-increment: bc; padding: 0 5px 5px 5px } .rightcustom2 { right: 130px; position: relative; z-index: 134 } .bottom-custom1 { bottom: 0 } #searchform-3 { display: inline-flex; top: 0 } #searchform-3:hover input { width: 100px; padding: 0 10px } #searchform-3 input { border: none; background: 0 0; outline: 0; padding: 0; font-size: 18px; color: #fff; width: 0; transition: .4s; left: 50px; top: 0; line-height: 57px } #searchform-3 button li { font-size: 15px } #searchform-3 button { color: #00b7ff; border-radius: 50%; border: none; cursor: pointer; transition: .4s; top: 0; left: 50px; display: block; padding-left: 10px; padding-right: 10px } #searchform-4 { position: relative; top: 0; left: 0; padding: 5px; border-radius: 5px } #searchform-4:hover { width: 100% } #searchform-4 { display: inline-flex; background: linear-gradient(45deg, #333, #5a5454); top: 0 } #searchform-4:hover input { width: 100%; padding: 0 10px } #searchform-4 input { border: none; background: 0 0; outline: 0; padding: 0; font-size: 18px; color: #fff; width: 0; transition: .4s; left: 50px; top: 0 } #searchform-4 button li { font-size: 15px } #searchform-4 button { color: #00b7ff; border-radius: 50%; border: none; background-color: #333; cursor: pointer; transition: .4s; top: 0; left: 50px; width: 26px } #loginform { padding-bottom: 20px } #loginform body { font-family: "Open Sans", Helvetica, Arial, sans-serif; background: #ededed } #loginform button, #loginform input { border: none; outline: 0; background: 0 0; font-family: "Open Sans", Helvetica, Arial, sans-serif } #loginform .form { position: relative; width: 640px; height: 100%; transition: transform 1.2s ease-in-out; padding: 50px 30px 0 } #loginform button { display: block; margin: 0 auto; width: 260px; height: 36px; border-radius: 30px; color: #fff; font-size: 15px; cursor: pointer } #loginform #rememberme { overflow: hidden; z-index: 2; position: absolute; left: 97px; height: 20px } .login-submit { background-color: brown } #loginform span { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: transform 1.2s } #loginform h2 { width: 100%; font-size: 26px; text-align: center } #loginform label { display: block; width: 260px; margin: 25px auto 0; text-align: center } #loginform label span { font-size: 12px; color: #817a7a; text-transform: uppercase } #loginform input { display: block; width: 100%; margin-top: 5px; padding-bottom: 5px; font-size: 16px; border-bottom: 1px solid rgba(0, 0, 0, .4); text-align: center } #loginform .submit { margin-top: 40px; margin-bottom: 20px; background: #d4af7a; text-transform: uppercase } @media screen and (min-width:768px) { .text-mobile22 { padding-left: 140px; padding-top: 100px } } .title-website-02 { color: #f60; font-family: Rajdhani, Sans-serif; font-size: 5.8rem; font-weight: 700; text-transform: uppercase; line-height: 1.2em; -webkit-box-shadow: -4px 7px 46px 2px rgba(255, 255, 255, .603); -moz-box-shadow: -4px 7px 46px 2px rgba(255, 255, 255, .61); -o-box-shadow: -4px 7px 46px 2px rgba(240, 237, 237, .708); box-shadow: -4px 7px 46px 2px rgba(235, 228, 228, .616) } .section__layer { width: 100%; height: 100%; position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 1 } @media screen and (max-width:768px) { .section__layer svg { max-width: 100%; max-height: 100%; -o-object-fit: cover; object-fit: cover } } @media screen and (min-width:900px) { .section__layer { left: 10% } } .section__layer .layer { position: absolute; width: auto; height: 90%; flex: 0 0 auto } .iguana .section__image img { left: auto; right: 0; transform: translate(0) } .section_iguana { width: 100%; height: 100vh; position: relative; overflow: hidden } .section_iguana .container { height: 100% } .section_iguana__wrapper { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column } .section_iguana__wrapper { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column } @media screen and (min-width:768px) { .section_iguana__wrapper { padding-top: 0; padding-left: 5rem; align-items: flex-start } } @media screen and (min-width:900px) { .section_iguana__wrapper { padding-top: 0; flex-direction: row; align-items: center } .section_iguana__wrapper.img-left { flex-direction: row-reverse } } @media screen and (min-width:1200px) { .section_iguana__wrapper { padding-left: 0 } } .section_iguana__wrapper .left, .section_iguana__wrapper .right { width: 100% } @media screen and (min-width:900px) { .section_iguana__wrapper .left, .section_iguana__wrapper .right { width: 50% } } @media screen and (min-width:900px) { .section_iguana__wrapper .left--large { width: 70% } } .section_iguana__wrapper .left--large+.right { width: 30% } .section_iguana__wrapper { display: flex; align-items: flex-start; justify-content: center } @media screen and (max-width:900px) { .section_iguana__wrapper .right.video { margin-top: 5rem } } .xlarge { font-size: 2.6rem; font-weight: 500 } @media screen and (min-width:768px) { .xlarge { font-size: 2.8rem } } .svg-border-animation { position: absolute; width: 320px; height: 60px; left: 30%; transform: translate(-50%, -50%) } .hover-text { position: absolute; line-height: 60px; width: 320px; top: 0; color: #333; font-size: 28px; text-align: center; cursor: pointer } .shape { fill: transparent; stroke-width: 4px; stroke: #333; stroke-dasharray: 160 520; stroke-dashoffset: -460 } .svg-border-animation:hover .hover-text { transition: .5s; color: #3f51b5 } .svg-border-animation:hover .shape { -webkit-animation: draw .5s linear forwards; animation: draw .5s linear forwards } @keyframes draw { 0% { stroke-dasharray: 160 520; stroke-dashoffset: -460; stroke-width: 4px } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; stroke: #3F51B5 } } #backgroundlogo { position: inherit } .backgroundlogo { overflow: hidden; background-image: url(https://localhost/wordpress/wp-content/uploads/2021/12/Untitled3.png) } .social-style-two { display: inline-flex } .social-style-two a { margin: 0 3px; width: 40px; height: 40px; font-size: 13px; border-radius: 50%; text-align: center; line-height: 40px; display: inline-block; background: #fff } .social-style-two a:hover { background: var(--heading-color, #2d2d2d) } .social-style-two a i { color: var(--heading-color, #2d2d2d); -webkit-transition: .5s; transition: .5s; line-height: inherit } .social-style-two a:hover i { color: #fff } .social-style-two a:first-child { margin-left: 0 } .social-style-two a:last-child { margin-right: 0 } .logofooaspace { position: absolute; z-index: 2 } .mc4wp-form { margin: 0; padding: 1.5em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #99cddd } .mc4wp-form label, .mc4wp-form-submit { color: #fff; text-shadow: 1px 1px 0 #289dcc } .mc4wp-form, .mc4wp-form-control { margin: 10px 0 20px 0 } .mc4wp-form-control:focus { border: 2px solid #289dcc } div.mc4wp-form-response-output { background: #f8f8f8; text-align: center; width: 92.5%; margin: 1em 0 1em 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } .mc4wp-form-fields p label input[type=email] { background: #f8f8f8; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-top: 15px } .mc4wp-form-fields p label input[type=email]:hover { background: #49e9be; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } .mc4wp-form-fields p label input[type=submit] { color: #000!important; background-color: #fc0707!important; border-color: #e90000 } .anunciate span iframe { color: #000!important; background-color: #fc0707!important; border-color: #e90000 } .select-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .email-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .name-form-control { background-color: #fff; border-radius: 0; padding: 15px 10px; box-shadow: none } .sslider-content>span::before { content: ""; background: #190a32; height: 3px; float: left; width: 60px; margin-top: 15px; margin-right: 10px } .sslider-content h2 { color: #190a32; padding-right: 5% } .sslider-content p { color: #676f67; font-size: 16px; margin-bottom: 0 } .sslider-content>span { font-size: 22px; font-weight: 500; color: #ff3494; display: block; margin-bottom: 20px; margin-top: 30px } .sslider-content>span { font-size: 16px; font-weight: 500; color: #ff3494; text-transform: uppercase; letter-spacing: 6px; display: block; margin-bottom: 20px } .sslider-content h2 { font-size: 33px; color: #fff; letter-spacing: -2px; line-height: 1.1; margin-bottom: 40px } .sslider-content h2 span { color: #ff3494 } .sslider-content p span { display: inline-block; height: 2px; width: 40px; background: #ff3494; margin-right: 20px; position: relative; top: -4px } .sslider-content p { color: #fff; font-size: 16px; margin-bottom: 0 } .ssmall-title { background: #f7f4fe; display: inline-block; border-radius: 20px } .ssmall-title li { display: inline-block; padding: 5px 20px; color: #190a32 } .ssmall-title li:first-child { background: #7d4196; border-radius: 20px; color: #fff; padding: 5px 30px } .ss-btn { background: transparent linear-gradient(90deg, #7d4196 0, #ff3494 100%) 0 0 no-repeat padding-box; box-shadow: 3px 4px 25px #c63A9580; color: #fff } .ss-btn { background: #fff; color: #ff3494 } .ss-btn:hover { background: transparent linear-gradient(90deg, #ff3494 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; box-shadow: 3px 4px 25px #c63A9580 } .ss-btn1 { background: #f60; color: #fff; font-size: 15px; font-family: var(--font-alt); box-shadow: 3px 4px 20px #f4f0f3f9 } .ss-btn1 label { display: inherit } .ss-btn2 label { display: inherit } .ss-btn1:hover { background: transparent linear-gradient(90deg, #f60 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; font-size: 15px; font-family: var(--font-alt); box-shadow: 3px 4px 25px #f4f0f3f9 } .s-btn { background: #fff; color: #ff3494 } .s-btn:hover { background: transparent linear-gradient(90deg, #ff3494 0, #7d4196 100%) 0 0 no-repeat padding-box; color: #fff; box-shadow: 3px 4px 25px #c63A9580 } .s-btn { -moz-user-select: none; background: transparent linear-gradient(90deg, #7d4196 0, #ff3494 100%) 0 0 no-repeat padding-box; box-shadow: 3px 4px 25px #c63A9580; border: none; border-radius: 50px; color: #fff; display: inline-block; font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1; margin-bottom: 0; padding: 15px 35px; text-align: center; text-transform: unset; touch-action: manipulation; transition: all .3s ease 0s; vertical-align: middle; white-space: nowrap; position: relative } .home3main1 { border-style: solid; border-width: 4px 0 0; border-color: #ff0; border-radius: 0 33% 0 33%; width: 350px } .home3main1 img { border-style: solid!important; border-width: 4px 0 0!important; border-color: #ff0!important; border-radius: 0 33% 0 33%!important } .home3main2 { border-style: solid; border-width: 4px 0 0; border-color: #ff0; border-radius: 33% 0 33% 0; width: 350px } .elementor-element-de814b2 { left: 30px } .home3main2 img { border-style: solid!important; border-width: 4px 0 0!important; border-color: #ff0!important; border-radius: 33% 0 33% 0!important } .home3button1 { --btn-icon-spacing: 8px; font-weight: 400; min-width: 0; min-height: 0; border-style: solid; border-width: 0 0 1px; border-radius: 0 0 0 0; transition-property: all; transition-duration: .3s; transition-timing-function: ease; transition-delay: 0s; color: #fff; background: #0000; border-color: #ff0 } .home3button1 div div a span span i { margin-left: 8px } .btn-wrp { animation-duration: 1.3s; animation-fill-mode: both } .btn-wrp .btn-link { border-bottom: 1px solid #000; color: #000; font-size: 17px; font-weight: 700; line-height: 1 } .btn-wrp .btn-link:hover { color: #f4a460; border-color: #f4a460 } .left-50 { left: 50px } .slider_84 { padding-top: 40px } @media (min-width:121px) and (max-width:590px) { .slider_26878_slide01 { height: 100vh } } .slider84text { padding-top: 40px } .slider84text h1 { padding-top: 40px } .service-item-ar { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) } .service-thumb-ar { overflow: hidden; z-index: -1 } .service-item-ar:hover { cursor: pointer } .service-content-ar { padding: 0 30px 30px 30px } .service-content-ar i { color: #fff!important; display: inline-block!important; margin-bottom: 10px!important; z-index: 1!important } .service-content-ar i:before { background-color: #bfca02!important; border-radius: 2px!important; padding: 10px!important } .service-a-ar { color: #bfca02; text-transform: uppercase!important; font-size: 12px!important; font-weight: 600!important; font-family: "Work Sans", sans-serif!important } .service-content-ar h1 { margin: 0 0 10px; font-weight: 400; line-height: 1.7; color: #263a4f; letter-spacing: -.5px } .year-content { position: absolute; width: auto; height: auto; left: 80px; top: 150px } .year-content h2 { color: #263a4f; font-size: 100px; position: relative; margin-bottom: 20px; z-index: 1 } .year-content h2:before { background-color: transparent; position: absolute; content: ""; width: 120px; height: 120px; border: 5px solid #bfca02; left: -10px; top: -80px; z-index: -1 } .year-content span { font-family: Poppins, sans-serif; color: #263a4f; text-transform: uppercase; font-weight: 600 } .section-heading h2 { font-size: 32px; display: block } .section-heading span { display: inline-block; text-transform: uppercase; font-size: 12px; color: #263a4f; font-weight: 600; letter-spacing: 0; font-family: "Work Sans", sans-serif; position: relative; margin-bottom: 10px; z-index: 1 } .section-heading span:before { background-color: transparent; position: absolute; content: ""; width: 30px; height: 30px; left: -15px; top: -10px; border: 3px solid #bfca02; opacity: .5; z-index: -1 } .btn-shadow { box-shadow: 1px 2px 2px rgb(0 0 0 / 27%); line-height: 52px; display: inline-block; padding: 0 25px; font-size: 18px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, .27); -webkit-box-shadow: 1px 2px 2px rgb(0 0 0 / 27%) } @media (min-width:450px) and (max-width:555px) { .contact-form1 { justify-content: center; width: 450px } } @media (min-width:230px) and (max-width:450px) { .contact-form1 { width: 250px } } .success-wrap { transform: translateY(-60%); padding: 48px 70px 48px 80px; border-top: 10px solid #fff } .success-item { display: flex; padding-left: 16px; border-right: 1px solid #ff8432 } .success-wrap.row>div:last-child.success-item { border-right: 0 } .wpupg-template-overlay { left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); color: #fff; padding: 5px; box-sizing: border-box; border-style: solid; border-color: #000; border-radius: 0; width: 100% } .post-title-item { box-sizing: border-box; padding: 5px; font-weight: 700!important; display: block; word-break: break-word; font-size: 30px; margin-bottom: 18px; line-height: 100%!important; color: #fff; padding-top: 5px; padding-left: 5px } .demo-2 { --color-text: #aaa; --color-bg: #000; --color-link: #1c1cc9; --color-link-hover: #aaa; --color-info: #1c1cc9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --color-title: #fff; --time-anim: 4s; --delay-anim: 2s; --blend-mode-1: none; --blend-mode-2: none; --blend-mode-3: none; --blend-mode-4: overlay; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: transparent; --blend-color-3: transparent; --blend-color-4: #fb909a; --blend-color-5: #1c1cc9 } .glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden } .glitch__img { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(https://agency.dronstar.com/wp-content/uploads/2022/06/aspace-gym-effec658658997390.846t8.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend-mode-1) } .glitch__img:nth-child(n+2) { opacity: 0 } .glitch__img:nth-child(n+2), .imgloaded { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite } .glitch__img:nth-child(2), .imgloaded { background-color: var(--blend-color-2); background-blend-mode: var(--blend-mode-2); animation-name: glitch-anim-1 } .glitch__img:nth-child(3), .imgloaded { background-color: var(--blend-color-3); background-blend-mode: var(--blend-mode-3); animation-name: glitch-anim-2 } .glitch__img:nth-child(4), .imgloaded { background-color: var(--blend-color-4); background-blend-mode: var(--blend-mode-4); animation-name: glitch-anim-3 } .glitch__img:nth-child(5), .imgloaded { background-color: var(--blend-color-5); background-blend-mode: var(--blend-mode-5); animation-name: glitch-anim-flash } @keyframes glitch-anim-1 { 0% { opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) } 2% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) } 4% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) } 6% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) } 8% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 10% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 12% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 14% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 16% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 18% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 21.9% { opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0) } 100%, 22% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes glitch-anim-2 { 0% { opacity: 1; transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) } 3% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) } 5% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) } 7% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 9% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) } 11% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) } 13% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 15% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) } 17% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) } 19% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) } 20% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) } 21.9% { opacity: 1; transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) } 100%, 22% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes glitch-anim-3 { 0% { opacity: 1; transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%) } 1.5% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%) } 2% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%) } 2.5% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 3% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%) } 5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%) } 5.5% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%) } 7% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%) } 8% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%) } 9% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%) } 10.5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%) } 11% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%) } 13% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%) } 14% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%) } 14.5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%) } 15% { -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%) } 16% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 18% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%) } 21.9% { opacity: 1; transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1) } 100%, 22% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes glitch-anim-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%) } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1) } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) } } @keyframes glitch-anim-flash { 0%, 5% { opacity: .2; transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0) } 100%, 5.5% { opacity: 0; transform: translate3d(0, 0, 0) } } #breadcrumbs li { list-style: none; color: #fff; font-size: 20px } .bg-midnight-blue { background-color: #2c3e50 } .footer-v1 { padding-top: 20px; padding-bottom: 20px; color: rgb(158 94 94 / 80%); text-align: center } .footer-v1 .brand { font-size: 20px; font-weight: 400; font-weight: 500; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(158 94 94 / 80%) } .footer-v1 .brand.active, .footer-v1 .brand:focus, .footer-v1 .brand:hover { color: #1abc9c } .footer-v2 { padding-top: 100px; padding-bottom: 100px; text-align: center } .footer-v2 .brand { display: inline-block; margin-bottom: 25px } .footer-v2 .text { font-size: 14px; font-weight: 400; color: rgba(150, 42, 42, .8); margin: 0 80px; line-height: 1.45 } .footer-v2 .btn { margin-top: 30px; background-color: #ebedee; color: #7f8c8d; font-size: 13px; line-height: 20px; padding: 6px 13px 8px } .footer-v2 .btn:focus, .footer-v2 .btn:hover { background-color: #eff1f1 } .footer-v2 .btn.active, .footer-v2 .btn:active { background-color: #c8c9ca } .footer-v2 .btn [class^=fui-] { font-size: 16px; font-weight: 400; color: #3498db } @media (max-width:991px) { .footer-v2 .text { margin: 0 } } .btn-icons>[class^=fui-] { margin-left: 4px; margin-right: 4px; line-height: inherit; display: inline-block; vertical-align: top } [class^=fui-] { display: inline-block; vertical-align: middle } .bin-banner, .subscribe-form { padding-top: 40px; padding-bottom: 40px; font-size: medium } .bin-banner, .subscribe-form .col-sm-4 { text-align: right } @media (max-width:767px) { .bin-banner, .subscribe-form .col-sm-4 { text-align: center } } .bin-banner, .subscribe-form form { margin: 0; position: relative } .bin-banner, .subscribe-form input[type=text] { width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: 0 0; line-height: 59.99999999999999px; font-size: 50px; font-weight: 400; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -1px } .bin-banner, .subscribe-form input[type=text]:-moz-placeholder { color: #fff } .bin-banner, .subscribe-form input[type=text]::-moz-placeholder { color: #fff; opacity: 1 } .bin-banner, .subscribe-form input[type=text]:-ms-input-placeholder { color: #fff } .bin-banner, .subscribe-form input[type=text]::-webkit-input-placeholder { color: #fff } .bin-banner, .subscribe-form input[type=text].placeholder { color: #fff } .bin-banner, .subscribe-form input[type=text]::-webkit-input-placeholder { font-weight: 500; letter-spacing: -1px } .bin-banner, .subscribe-form input[type=text]:-moz-placeholder { font-weight: 500; letter-spacing: -1px } .bin-banner, .subscribe-form input[type=text]::-moz-placeholder { font-weight: 500; letter-spacing: -1px } .bin-banner, .subscribe-form input[type=text]:-ms-input-placeholder { font-weight: 500; letter-spacing: -1px } .bin-banner, .subscribe-form .ani-placeholder { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; padding-left: 6px; line-height: 59.99999999999999px; font-size: 50px; font-weight: 400; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif } .bin-banner, .subscribe-form .btn { margin-top: 8px; font-weight: 500; width: 220px; max-width: 100% } @media (max-width:767px) { .bin-banner, .subscribe-form { padding-left: 5px; padding-right: 5px; margin-left: -5px; margin-right: -5px } } @media (max-width:480px) { .bin-banner, .subscribe-form .ani-placeholder, .subscribe-form input[type=text] { width: 100%; margin-bottom: 33px; line-height: 27px; font-size: 25px; font-weight: 400; color: inherit; text-align: center } } .footer-v12 { padding-top: 190px; padding-bottom: 110px; text-align: center; font-size: 84.3px; font-weight: 400; color: rgba(44, 62, 80, .2); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -2px } .footer-v12:before { content: ''; position: absolute; top: 110px; left: 0; right: 0; height: 2px; overflow: hidden; background: #ebedee } .footer-v12 [class*=fui-] { font-size: 60px; font-weight: 400; color: #e74c3c; vertical-align: baseline } @media (min-width:1200px) { .footer-v12 { font-size: 84px; font-weight: 400; color: rgba(44, 62, 80, .2); font-weight: 800 } } @media (max-width:1199px) { .footer-v12 { font-size: 82px } } @media (max-width:991px) and (min-width:768px) { .footer-v12 { font-size: 56px; font-weight: 400; color: rgba(44, 62, 80, .2); font-weight: 800 } } @media (max-width:767px) { .footer-v12 { font-size: 36px; font-weight: 400; color: rgba(44, 62, 80, .2); font-weight: 800 } .footer-v12 [class*=fui-] { font-size: 32px } } @media (max-width:480px) { .footer-v12 { font-size: 26px; font-weight: 400; color: rgba(44, 62, 80, .2); padding-top: 150px; font-weight: 800 } .footer-v12 [class*=fui-] { font-size: 18px; font-weight: 400; color: #e74c3c } } .col-sm-6-v3 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; -webkit-box-flex: 0 } @-webkit-keyframes phone-shape { 0% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent } 25% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 50% { border-top-color: rgba(255, 255, 255, .95); border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 75% { border-top-color: rgba(255, 255, 255, .95); border-right-color: rgba(255, 255, 255, .95); border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 100% { border-top-color: rgba(255, 255, 255, .95); border-right-color: rgba(255, 255, 255, .95); border-bottom-color: rgba(255, 255, 255, .95); border-left-color: rgba(255, 255, 255, .95) } } @keyframes phone-shape { 0% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent } 25% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 50% { border-top-color: rgba(255, 255, 255, .95); border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 75% { border-top-color: rgba(255, 255, 255, .95); border-right-color: rgba(255, 255, 255, .95); border-bottom-color: transparent; border-left-color: rgba(255, 255, 255, .95) } 100% { border-top-color: rgba(255, 255, 255, .95); border-right-color: rgba(255, 255, 255, .95); border-bottom-color: rgba(255, 255, 255, .95); border-left-color: rgba(255, 255, 255, .95) } } @-webkit-keyframes stroke-vertical { 0% { height: 0%; opacity: 0 } 100% { height: calc(100% + 4px); opacity: 1 } } @keyframes stroke-vertical { 0% { height: 0%; opacity: 0 } 100% { height: calc(100% + 4px); opacity: 1 } } @-webkit-keyframes stroke-horizontal { 0% { width: 0%; opacity: 0 } 100% { width: calc(100% + 4px); opacity: 1 } } @keyframes stroke-horizontal { 0% { width: 0%; opacity: 0 } 100% { width: calc(100% + 4px); opacity: 1 } } @-webkit-keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes phone-rotate { 0% { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0) } 100% { -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); transform: rotateX(50deg) rotateY(0) rotateZ(-42deg) } } @keyframes phone-rotate { 0% { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0) } 100% { -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-42deg); transform: rotateX(50deg) rotateY(0) rotateZ(-42deg) } } @-webkit-keyframes show-display { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 50px 0 transparent } 100% { -webkit-transform: translateZ(75px); transform: translateZ(75px); box-shadow: -50px 40px 50px 0 rgba(0, 0, 0, .4) } } @keyframes show-display { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 50px 0 transparent } 100% { -webkit-transform: translateZ(75px); transform: translateZ(75px); box-shadow: -50px 40px 50px 0 rgba(0, 0, 0, .4) } } .containerphone div { box-sizing: border-box } .containerphone div, .containerphone iframe, .containerphone:after, .containerphone:before { -webkit-transition: all 3s; transition: all 3s; -webkit-animation-fill-mode: forwards!important; animation-fill-mode: forwards!important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .containerphone { -webkit-perspective: 2400px; perspective: 2400px; position: absolute; left: 0; top: 0; width: 100vw; 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; margin-top: 40px } @media (max-width:979px) { .containerphone { -webkit-transform: scale(.8); transform: scale(.8) } } @media (max-width:767px) { .containerphone { -webkit-transform: scale(.6); transform: scale(.6) } } @media (max-width:479px) { .containerphone { -webkit-transform: scale(.45); transform: scale(.45) } } .containerphone .phone-shape { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); position: relative; border: 2px solid rgba(255, 255, 255, .95); border-color: transparent; border-radius: 56px; width: 428px; height: 869px; margin: 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(-45deg); transform: rotateX(50deg) rotateY(0) rotateZ(-45deg); -webkit-animation: .3s phone-shape 4.2s, 8.4s phone-rotate; animation: .3s phone-shape 4.2s, 8.4s phone-rotate } .containerphone .phone-shape .phone-display { z-index: 99; position: absolute; border: 2px solid rgba(255, 255, 255, .95); border-color: transparent; top: 100px; bottom: 100px; right: 25px; left: 25px; padding: 0; -webkit-animation: .3s phone-shape 4.8s; animation: .3s phone-shape 4.8s } .containerphone .phone-shape .phone-display .iframe-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .001; -webkit-animation: 1.8s fade-in 6.6s, 1.8s show-display 7.2s; animation: 1.8s fade-in 6.6s, 1.8s show-display 7.2s } .containerphone .phone-shape .phone-display .iframe-container iframe { position: absolute; border: none; background: 0 0; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: all; margin: 0; padding: 0; -webkit-transform: translateZ(1px); transform: translateZ(1px); box-shadow: 0 0 50px 0 transparent } .containerphone .phone-shape .phone-display .iframe-container:before { content: " "; font-size: 0; position: absolute; top: 0; left: -4px; width: 4px; height: 100%; background: rgba(0, 0, 0, .8); -webkit-transform: rotateY(90deg) translateX(2px) translateZ(2px); transform: rotateY(90deg) translateX(2px) translateZ(2px) } .containerphone .phone-shape .phone-display .iframe-container:after { content: " "; font-size: 0; position: absolute; left: 0; bottom: -4px; height: 4px; width: 100%; background: rgba(0, 0, 0, .8); -webkit-transform: rotateX(90deg) translateY(-2px) translateX(0) translateZ(2px); transform: rotateX(90deg) translateY(-2px) translateX(0) translateZ(2px) } .containerphone .phone-shape .phone-hole { position: absolute; width: 14px; height: 14px; left: 50%; margin-left: -7px; border: 2px solid rgba(255, 255, 255, .95); border-color: transparent; border-radius: 50%; top: 46px; -webkit-animation: .3s phone-shape 5.4s; animation: .3s phone-shape 5.4s } .containerphone .phone-shape .phone-button { position: absolute; width: 60px; height: 60px; left: 50%; margin-left: -30px; border: 2px solid rgba(255, 255, 255, .95); border-color: transparent; border-radius: 50%; bottom: 24px; -webkit-animation: .3s phone-shape 6s; animation: .3s phone-shape 6s } .containerphone .graphic-guides { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .containerphone .graphic-guides .bottom, .containerphone .graphic-guides .center, .containerphone .graphic-guides .left, .containerphone .graphic-guides .right, .containerphone .graphic-guides .top { position: absolute; background: rgba(255, 255, 255, .4); opacity: 0 } .left { position: absolute; background: rgba(255, 255, 255, .4); opacity: 0 } .graphic-guides .left { position: absolute; background: rgba(255, 255, 255, .4); opacity: 0 } .containerphone .graphic-guides .top { -webkit-animation: .6s stroke-horizontal .6s; animation: .6s stroke-horizontal .6s; height: 2px; left: -2px; top: -2px } .graphic-guides .top { -webkit-animation: .6s stroke-horizontal .6s; animation: .6s stroke-horizontal .6s; height: 2px; left: -2px; top: -2px } .top { -webkit-animation: .6s stroke-horizontal .6s; animation: .6s stroke-horizontal .6s; height: 2px; left: -2px; top: -2px } .containerphone .graphic-guides .right { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 3s; animation: .6s stroke-vertical 3s; width: 2px; right: -2px; top: -2px } .containerphon .graphic-guides .right { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 3s; animation: .6s stroke-vertical 3s; width: 2px; right: -2px; top: -2px } .right { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 3s; animation: .6s stroke-vertical 3s; width: 2px; right: -2px; top: -2px } .containerphone .graphic-guides .bottom { -webkit-animation: .6s stroke-horizontal 1.2s; animation: .6s stroke-horizontal 1.2s; height: 2px; left: -2px; bottom: -2px } .graphic-guides .bottom { -webkit-animation: .6s stroke-horizontal 1.2s; animation: .6s stroke-horizontal 1.2s; height: 2px; left: -2px; bottom: -2px } .bottom { -webkit-animation: .6s stroke-horizontal 1.2s; animation: .6s stroke-horizontal 1.2s; height: 2px; left: -2px; bottom: -2px } .containerphone .graphic-guides .left { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 1.8s; animation: .6s stroke-vertical 1.8s; width: 2px; left: -2px; top: -2px } .graphic-guides .left { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 1.8s; animation: .6s stroke-vertical 1.8s; width: 2px; left: -2px; top: -2px } .left { height: calc(100% + 4px); -webkit-animation: .6s stroke-vertical 1.8s; animation: .6s stroke-vertical 1.8s; width: 2px; left: -2px; top: -2px } .containerphone .graphic-guides .center { -webkit-animation: .6s stroke-vertical 2.4s; animation: .6s stroke-vertical 2.4s; width: 2px; left: 50%; margin-left: -1px; top: -2px } .graphic-guides .center { -webkit-animation: .6s stroke-vertical 2.4s; animation: .6s stroke-vertical 2.4s; width: 2px; left: 50%; margin-left: -1px; top: -2px } .center { -webkit-animation: .6s stroke-vertical 2.4s; animation: .6s stroke-vertical 2.4s; width: 2px; left: 50%; margin-left: -1px; top: -2px } .containerphone .graphic-guides .bottom:before, .containerphone .graphic-guides .top:before { content: " "; font-size: 0; position: absolute; top: 0; left: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to right, transparent 0, rgba(255, 255, 255, .4) 100%) } .graphic-guides .bottom:before, .graphic-guides .top:before { content: " "; font-size: 0; position: absolute; top: 0; left: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to right, transparent 0, rgba(255, 255, 255, .4) 100%) } .bottom:before, .top:before { content: " "; font-size: 0; position: absolute; top: 0; left: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to right, transparent 0, rgba(255, 255, 255, .4) 100%) } .containerphone .graphic-guides .bottom:after, .containerphone .graphic-guides .top:after { content: " "; font-size: 0; position: absolute; top: 0; right: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to right, rgba(255, 255, 255, .4) 0, transparent 100%) } .graphic-guides .bottom:after, .graphic-guides .top:after { content: " "; font-size: 0; position: absolute; top: 0; right: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to right, rgba(255, 255, 255, .4) 0, transparent 100%) } .bottom:after, .top:after { content: " "; font-size: 0; position: absolute; top: 0; right: -60px; width: 60px; height: inherit; background: -webkit-linear-gradient(left, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to right, rgba(255, 255, 255, .4) 0, transparent 100%) } .containerphone .graphic-guides .center:before, .containerphone .graphic-guides .left:before, .containerphone .graphic-guides .right:before { content: " "; font-size: 0; position: absolute; right: 0; top: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, .4) 100%) } .graphic-guides .center:before, .graphic-guides .left:before, .graphic-guides .right:before { content: " "; font-size: 0; position: absolute; right: 0; top: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, .4) 100%) } .center:before, .left:before, .right:before { content: " "; font-size: 0; position: absolute; right: 0; top: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, transparent 0, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, .4) 100%) } .containerphone .graphic-guides .center:after, .containerphone .graphic-guides .left:after, .containerphone .graphic-guides .right:after { content: " "; font-size: 0; position: absolute; right: 0; bottom: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, transparent 100%) } .graphic-guides .center:after, .graphic-guides .left:after, .graphic-guides .right:after { content: " "; font-size: 0; position: absolute; right: 0; bottom: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, transparent 100%) } .center:after, .left:after, .right:after { content: " "; font-size: 0; position: absolute; right: 0; bottom: -60px; height: 60px; width: inherit; background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4) 0, transparent 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, transparent 100%) } .flat .containerphone .phone-shape { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0)!important; transform: rotateX(0) rotateY(0) rotateZ(0)!important } .containerphone .phone-shape { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0)!important; transform: rotateX(0) rotateY(0) rotateZ(0)!important } .phone-shape { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0)!important; transform: rotateX(0) rotateY(0) rotateZ(0)!important } .controls { position: absolute; top: 20px; right: 20px } .controls span { cursor: default; font-family: sans-serif; padding: 8px 20px; border-radius: 2px; background: rgba(255, 255, 255, .6); color: #333 } .containerphone .flat .controls span { background: #fff } .slider-main-header { display: flex; justify-content: center; align-items: center } .slider-main-span { font-size: calc(50px + 1vw); font-weight: bolder; } /* slider leaks */ .header__title_leaks { flex: 1; max-width: 115rem; display: grid; /* grid-template-columns: 3fr 2fr; */ row-gap: 3rem; align-content: center; justify-content: center; align-items: center; justify-items: center; margin-top: 40px; margin-left: 20px; } .header__title_leaks h1 { font-size: 5.5rem; line-height: 1.35; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } .highlight_leaks { position: relative; } .highlight_leaks::after { display: block; content: ''; position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 0.7; transform: scale(1.07, 1.05) skewX(-15deg); background-image: var(--gradient-primary); } .btn--text_leaks { display: inline-block; background: none; font-size: 1.7rem; font-family: inherit; font-weight: 500; color: var(--color-primary); border: none; border-bottom: 1px solid var(--color-primary); padding-bottom: 2px; cursor: pointer; transition: all 0.3s; } @media screen and (min-width:600px) { .header__img_leaks { width: 100%; grid-column: 2 / 3; grid-row: 1 / span 4; transform: translateY(-6rem); margin-top: 70px; } } @media screen and (max-width:600px) { .header__img_leaks { width: 100%; grid-column: 2 / 3; grid-row: 1 / span 4; transform: translateY(-6rem); margin-top: 170px; } } /* slider leaks2 */ .landing__leaks2 { position: relative; z-index: 2; height: 520px; margin: 25px auto; overflow: hidden; } .landing__leaks2 .logo svg { fill: #1E1C45; } .landing__leaks2 .base__leaks2 { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding: 38px; color: #082352; background: #fff; } .landing__leaks2 .image { display: none; } /*-------------------- Copy --------------------*/ .copy__leaks2 { position: relative; z-index: 2; } .title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } .copy__leaks2 .title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } .copy__leaks2 .title__leaks2 small { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-top: 50px; line-height: 1; display: block; text-indent: 3px; } .copy__leaks2 .text__leaks2 { color: #282652; width: 400px; font-size: 90%; } .copy__leaks2 .cta__leaks2 { cursor: pointer; margin-top: 40px; background: linear-gradient(25deg, #2f2d56, #6e355b); color: #fff; text-transform: uppercase; display: inline-block; border-radius: 30px; text-decoration: none; padding: 10px 30px; font-weight: 600; } h1.copy__leaks2 { position: relative; z-index: 2; } h1.title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h1.title__leaks4 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #c334a8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h1.title__leaks5 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(65deg, #34c3b8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 18%); } h1.copy__leaks2 h1.title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h1.copy__leaks2 h1.title__leaks2 small { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-top: 50px; line-height: 1; display: block; text-indent: 3px; } h1.copy__leaks2 h1.text__leaks2 { color: #282652; width: 400px; font-size: 90%; } h1.copy__leaks2 h1.cta__leaks2 { cursor: pointer; margin-top: 40px; background: linear-gradient(25deg, #2f2d56, #6e355b); color: #fff; text-transform: uppercase; display: inline-block; border-radius: 30px; text-decoration: none; padding: 10px 30px; font-weight: 600; } h2.copy__leaks2 { position: relative; z-index: 2; } h2.title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h2.copy__leaks2 h2.title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h2.copy__leaks2 h2.title__leaks2 small { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-top: 50px; line-height: 1; display: block; text-indent: 3px; } h2.copy__leaks2 h2.text__leaks2 { color: #282652; width: 400px; font-size: 90%; } h2.copy__leaks2 h2.cta__leaks2 { cursor: pointer; margin-top: 40px; background: linear-gradient(25deg, #2f2d56, #6e355b); color: #fff; text-transform: uppercase; display: inline-block; border-radius: 30px; text-decoration: none; padding: 10px 30px; font-weight: 600; } /*-------------------- Overlay --------------------*/ .base__leaks2.overlay__leaks2 { z-index: 2; clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px); color: #fff; background: linear-gradient(45deg, #082352, #6f2d52); transition: all 0.6s ease-in-out; transform-origin: 0 0; } .base__leaks2.overlay__leaks2.over { clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px); } .base__leaks2.overlay__leaks2 .logo svg { fill: #fff; } .base__leaks2.overlay__leaks2 .image { display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; } .base__leaks2.overlay__leaks2 .image::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; background: linear-gradient(42deg, #082352, #6f2d52); opacity: 0.8; } .base__leaks2.overlay__leaks2 .title__leaks2 { background-image: linear-gradient(0, #fff, #fff); } .base__leaks2.overlay__leaks2 .text__leaks2 { color: #fff; } .base__leaks2.overlay__leaks2 .cta__leaks2 { background: #fff; color: #0A2452; } /* text-purple */ span.text-purple-600 { opacity: 1; color: purple; } /* Digital-marketing-1 */ .header-video { list-style-type: none; display: inline-block; position: absolute; top: 517px; left: 41% } .text-mockup-2 { width: 192px; font-size: 14px; font-weight: 400; position: absolute; top: 10px; left: 90px } .img-header-mockup-2 { position: absolute; top: -32px } .contact-mockup-2 li { display: inline-block; font-size: 18px; font-weight: 700; padding-top: 60px; padding-right: 90px } .contact-mockup-2 li i { padding-right: 20px; color: #e6ac00 } .title-mockup-2 { font-size: 48px; font-weight: 700; letter-spacing: .48px; line-height: 60px; padding-top: 120px } .title-mockup-2 span { color: #e6ac00 } .desc-mockup-2 { font-size: 18px; font-weight: 500; padding-top: 20px; padding-bottom: 50px } .button-mockup-2 { cursor: pointer; font-size: 18px; text-transform: uppercase; font-weight: 700; width: 360px; padding: 16px 43px; border: 1px solid #e6ac00; -webkit-box-shadow: 0 10px 30px rgba(217, 138, 0, .25); box-shadow: 0 10px 30px rgba(217, 138, 0, .25); border-radius: 35px; background-color: #383838; background-image: -webkit-gradient(linear, left bottom, left top, from(#e18f00), to(#e6ad00)); background-image: -o-linear-gradient(bottom, #e18f00 0, #e6ad00 100%); background-image: linear-gradient(to top, #e18f00 0, #e6ad00 100%) } h1.title__leaks2 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h1.title__leaks3 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #c334a8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); } h1.title__leaks4 { font-size: 52px; font-weight: 700!important; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(65deg, #34c3b8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 18%); } h2.title__leaks5 { font-size: 42px; font-weight: 700!important; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(65deg, #34c3b8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 18%); } h3.title__leaks6 { font-size: 32px; font-weight: 700!important; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(65deg, #34c3b8, #ced599); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 18%); } h1.copy__leaks7 h1.title__leaks7 { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: rgb(0 0 0 / 55%); }