@import url(../libs/bootstrap/bootstrap-reboot.min.css); @import url(../css/odometer-theme-minimal.css); @font-face { font-family: "AGOpus"; font-weight: normal; font-style: normal; src: url("../fonts/AGOpus/AGOpus.eot"); src: url("../fonts/AGOpus/AGOpus.eot?#iefix") format("embedded-opentype"), url("../fonts/AGOpus/AGOpus.woff") format("woff"), url("../fonts/AGOpus/AGOpus.ttf") format("truetype"); } @font-face { font-family: "AGOpusC-Bold"; font-weight: bold; font-style: normal; src: url("../fonts/AGOpusC-Bold/AGOpusC-Bold.eot"); src: url("../fonts/AGOpusC-Bold/AGOpusC-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/AGOpusC-Bold/AGOpusC-Bold.woff") format("woff"), url("../fonts/AGOpusC-Bold/AGOpusC-Bold.ttf") format("truetype"); } @font-face { font-family: "AvenirNext"; font-weight: normal; font-style: normal; src: url("../fonts/AvenirNext-Regular/AvenirNext-Regular.eot"); src: url("../fonts/AvenirNext-Regular/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirNext-Regular/AvenirNext-Regular.woff") format("woff"), url("../fonts/AvenirNext-Regular/AvenirNext-Regular.ttf") format("truetype"); } @font-face { font-family: "AvenirNext-Medium"; font-weight: normal; font-style: normal; src: url("../fonts/AvenirNext-Medium/AvenirNext-Medium.eot"); src: url("../fonts/AvenirNext-Medium/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirNext-Medium/AvenirNext-Medium.woff") format("woff"), url("../fonts/AvenirNext-Medium/AvenirNext-Medium.ttf") format("truetype"); } * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } *::-webkit-input-placeholder { color: #666; opacity: 1; } *:-moz-placeholder { color: #666; opacity: 1; } *::-moz-placeholder { color: #666; opacity: 1; } *:-ms-input-placeholder { color: #666; opacity: 1; } body input:focus:required:invalid, body textarea:focus:required:invalid { color: #666; } body input:required:valid, body textarea:required:valid { color: #666; } html, body { height: 100%; } body { font-size: 16px; min-width: 320px; position: relative; line-height: 1.65; font-family: "AGOpus", sans-serif; overflow-x: hidden; } .img-responsive { display: block; max-width: 100%; height: auto; } img { max-width: 100%; height: auto; } .text-center { text-align: center; } ::-moz-selection { color: #fff; } ::selection { color: #fff; } img { max-width: 100%; height: auto; } main { width: 100%; min-height: 100vh; background-color: #006df0; background-image: -webkit-linear-gradient(296deg, #006df0, #003bdd); background-image: -o-linear-gradient(296deg, #006df0, #003bdd); background-image: linear-gradient(154deg, #006df0, #003bdd); } #statistic { width: 100%; height: 100%; 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-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 320px) { #statistic { padding-top: 40px; padding-bottom: 30px; } } @media only screen and (min-width: 480px) { #statistic { padding-top: 60px; padding-bottom: 40px; } } @media only screen and (min-width: 1200px) { #statistic { padding-top: 80px; padding-bottom: 125px; } } @media only screen and (min-width: 1680px) { #statistic { padding-top: 120px; padding-bottom: 225px; } } .logo { max-width: 150px; margin-bottom: 40px; } @media only screen and (min-width: 1200px) { .logo { max-width: 200px; margin-bottom: 60px; } } @media only screen and (min-width: 1680px) { .logo { max-width: 240px; margin-bottom: 90px; } } .content { text-align: center; margin-bottom: 30px; } .content h1 { font-size: 26px; margin-bottom: 20px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 1px; text-align: center; color: #fff; font-family: "AGOpus", sans-serif; } .content .info { opacity: 0.7; font-family: "AvenirNext", sans-serif; font-family: "AGOpus", sans-serif; font-family: "AvenirNext-Medium", sans-serif; font-size: 20px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: -0.6px; text-align: center; color: #fff; } @media only screen and (min-width: 480px) { .content h1 { font-size: 36px; margin-bottom: 20px; } .content .info { font-size: 26px; } } @media only screen and (min-width: 767px) { .content h1 { font-size: 48px; margin-bottom: 20px; } .content .info { font-size: 26px; } } @media only screen and (min-width: 1200px) { .content h1 { font-size: 72px; margin-bottom: 25px; } .content .info { font-size: 30px; } } @media only screen and (min-width: 1680px) { .content { margin-bottom: 120px; } .content h1 { font-size: 92px; margin-bottom: 30px; } .content .info { font-size: 40px; } } .counter { -webkit-border-radius: 10px; border-radius: 10px; background-color: #0052fb; min-width: 70%; padding: 10px; -webkit-transform: skewX(-20deg); -ms-transform: skewX(-20deg); transform: skewX(-20deg); text-align: center; } @media only screen and (min-width: 1200px) { .counter { padding: 50px; -webkit-border-radius: 20px; border-radius: 20px; } } @media only screen and (min-width: 1680px) { .counter { padding: 90px; -webkit-border-radius: 40px; border-radius: 40px; } } @-webkit-keyframes numbers { from { opacity: 0; top: -50px; } to { opacity: 1; top: 0px; } } @keyframes numbers { from { opacity: 0; top: -50px; } to { opacity: 1; top: 0px; } } .number { font-family: "AGOpusC-Bold"; font-size: 16px; font-weight: bold; font-style: none; font-stretch: normal; line-height: 1; letter-spacing: normal; text-align: center; letter-spacing: 10px; color: #fff; -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); position: relative; } .number span { position: relative; display: inline-block; } .number.animation span { -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation: numbers 1s ease-in-out forwards; animation: numbers 1s ease-in-out forwards; } h1:not(.site-title):before, h2:before { display: none; } @media only screen and (min-width: 767px) { .number { font-size: 60px; letter-spacing: 15px; } } @media only screen and (min-width: 1200px) { .number { font-size: 80px; letter-spacing: 25px; } } @media only screen and (min-width: 1300px) { .number { font-size: 100px; letter-spacing: 25px; } } @media only screen and (min-width: 1681px) { .number { font-size: 110px; letter-spacing: 40px; } } @media only screen and (min-width: 1920px) { .number { font-size: 140px; letter-spacing: 40px; } } main { position: relative; } main #statistic { position: relative; z-index: 2; } main #videoBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.2; z-index: 1; } @media only screen and (max-width: 1200px) { main #videoBg { /*display: none;*/ } }