html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.default-neat-grid {
margin-bottom: 4rem;
margin-left: 13%;
margin-right: 2%;
}
.default-neat-grid::after {
clear: both;
content: "";
display: block;
}
@media (min-width: 768px) {
.default-neat-grid {
margin-bottom: 5rem;
margin-left: 30%;
margin-right: 3%;
}
}
.clear {
background-color: none;
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.clear {
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.clear {
width: calc(100% - 4rem);
float: left;
margin-left: 2rem;
}
}
.col1 {
background-color: none;
margin-bottom: 1rem;
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col1 {
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
margin-bottom: 2rem;
}
}
@media (min-width: 1168px) {
.col1 {
width: calc(100% - 4rem);
float: left;
margin-left: 2rem;
}
}
.col1-1 {
background-color: none;
margin-bottom: 2rem;
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col1-1 {
width: calc(66.6666666667% - 1.6666666667rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.col1-1 {
width: calc(66.6666666667% - 3.3333333333rem);
float: left;
margin-left: 2rem;
}
}
.col2to1 {
background-color: none;
margin-bottom: 2rem;
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col2to1 {
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.col2to1 {
width: calc(50% - 3rem);
float: left;
margin-left: 2rem;
}
}
.col2to2 {
background-color: none;
margin-bottom: 2rem;
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col2to2 {
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.col2to2 {
width: calc(50% - 3rem);
float: left;
margin-left: 2rem;
}
}
.col2to2-1 {
background-color: none;
margin-bottom: 2rem;
margin-right: 49%;
width: calc(100% - 2rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col2to2-1 {
width: calc(100% - 1.5rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.col2to2-1 {
width: calc(50% - 3rem);
float: left;
margin-left: 2rem;
}
}
.col3 {
background-color: none;
margin-bottom: 2rem;
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col3 {
width: calc(33.3333333333% - 1.3333333333rem);
float: left;
margin-left: 1rem;
}
}
@media (min-width: 1168px) {
.col3 {
width: calc(33.3333333333% - 2.6666666667rem);
float: left;
margin-left: 2rem;
}
}
.col4 {
background-color: none;
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
}
@media (min-width: 768px) {
.col4 {
width: calc(50% - 1.5rem);
float: left;
margin-left: 1rem;
margin-bottom: 2rem;
}
}
@media (min-width: 1168px) {
.col4 {
width: calc(25% - 2.5rem);
float: left;
margin-left: 2rem;
}
}
header {
padding-top: 20px;
min-height: 100px;
margin-bottom: 110px;
color: #0750a4;
}
@media (min-width: 768px) {
header {
padding-top: 50px;
margin-bottom: 100px;
}
}
@media (min-width: 1168px) {
header {
padding-top: 50px;
margin-bottom: 100px;
}
}
.logo {
background-image: url("../img/logo_Internews_ukr_blue2.png");
background-size: cover;
width: 150px;
height: 35px;
margin: 3px 25px 0 0;
float: right;
}
@media (min-width: 768px) {
.logo {
margin: -6px 60px 0 0;
width: 200px;
height: 47px;
}
}
@media (min-width: 1168px) {
.logo {
margin: -6px 60px 0 0;
width: 214px;
height: 50px;
}
}
header ul {
display: none;
margin: 0px 0 0 60px;
padding-left: 0;
list-style: none;
}
@media (min-width: 1050px) {
header ul {
display: block;
}
}
header ul li a {
text-decoration: none;
font-weight: 400;
}
header ul.menu {
float: left;
}
header ul.menu > li {
float: left;
margin-left: 0px;
margin-right: 35px;
}
header ul.menu li:last-of-type {
margin-right: 0;
}
header ul.menu li {
font-size: 0.95rem;
}
header ul.menu li a {
position: relative;
padding-bottom: 6px;
}
header ul.menu li a::before,
header ul.menu li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
header ul.menu li a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
header ul.menu li a:hover::before,
header ul.menu li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
header ul.menu li a:hover {
color: #0750a4;
}
ul.submenu li a.lang {
font-weight: 600;
margin-right: 1rem;
}
ul.submenu li a.lang::before {
border-bottom: 2px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.submenu li a.lang:hover::before,
ul.submenu li a.lang:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
ul.submenu li a {
font-size: 0.9rem;
padding-bottom: 2px;
text-decoration: none;
position: relative;
}
ul.submenu li a::before,
ul.submenu li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
ul.submenu li a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.submenu li a:hover::before,
ul.submenu li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
ul.submenu li a:hover {
color: #0750a4;
}
ul.submenu li a.inside {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px dashed #0750a4;
padding: 0px 0px 0px 0px;
}
ul.submenu {
display: none;
margin: 0px 0 0 60px;
padding-left: 0;
list-style: none;
}
@media (min-width: 768px) {
ul.submenu {
display: block;
}
}
.search-wrapper{
display: none;
color: #0250a4;
margin-top: 50px;
margin-left: 60px;
position: relative;
border-bottom: 0px solid #0250a4;
padding-bottom: 1px;
transform-origin: 100% 50%;
width: 25px;
height: 40px;
cursor: pointer;
transition: 250ms ease;
}
@media (min-width: 1050px) {
.search-wrapper {
display: block;
}
}
.search-wrapper.focused {
width: 230px;
padding-bottom: 0px;
border-bottom: 1px solid #0250a4;
}
.search-wrapper.focused input {
color: #0250a4;
transform: scale(1);
}
.search-wrapper.focused input.search-input {
width: 170px;
padding: 0 0 0 15%;
}
.search-wrapper.focused button {
width: 15px;
font-size: 1.5rem;
font-weight: 300;
margin-left: 0;
display: inline-block;
}
.search-wrapper input {
background: transparent;
border: 0;
color: white;
outline: none;
height: 40px;
width: 0;
overflow: hidden;
font-weight: 400;
transform: scale(0);
transform-origin: 0 50%;
transition: 275ms ease;
}
.search-wrapper input::placeholder {
color: #0250a4;
}
.search-wrapper button {
border: 0;
padding-left: 15px;
background: transparent;
float: left;
position: absolute;
margin-left: 170px;
display: none;
}
.search-wrapper svg {
position: absolute;
font-size: 18px;
top: 20px;
left: 2px;
transform: translateY(-50%);
}
img.search-icon {
height: 16px;
position: absolute;
font-size: 18px;
top: 20px;
left: 2px;
transform: translateY(-50%);
}
.hamburger {
width: 20px;
cursor: pointer;
}
.hamburger:hover .hamburger__line,
.hamburger.closed .hamburger__line,
.hamburger.closed .hamburger__line.blue{
stroke: #0750a4;
}
.hamburger__line {
stroke-width: 5;
stroke-linecap: square;
stroke: #0750a4;
transition: all 0.15s ease-out;
}
.hamburger__line.blue,
.hamburger.open .hamburger__line {
/*stroke: #7cb6c6 !important;*/
stroke: #7cb6c6;
}
.icon1 .animation .animation__top {
transform-origin: 20px 10px;
}
.icon1 .animation .animation__bottom {
transform-origin: 20px 30px;
}
.icon1 .animation.open .animation__middle {
opacity: 0;
}
.icon1 .animation.open .animation__top {
animation: topIcon1-open 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.open .animation__bottom {
animation: bottomIcon1-open 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.closed .animation__top {
animation: topIcon1-closed 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.closed .animation__bottom {
animation: bottomIcon1-closed 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
@keyframes topIcon1-open {
0% {
transform: none;
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(10px) rotate(45deg);
}
}
@keyframes bottomIcon1-open {
0% {
transform: none;
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(-10px) rotate(-45deg);
}
}
@keyframes topIcon1-closed {
0% {
transform: translateY(10px) rotate(45deg);
}
50% {
transform: translateY(10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes bottomIcon1-closed {
0% {
transform: translateY(-10px) rotate(-45deg);
}
50% {
transform: translateY(-10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
.current {
border-bottom: 1px solid #0750a4;
}
.lang.current {
border-bottom: 2px solid #0750a4;
}
#footer {
padding: 0px 1% 0 0;
width: 99%;
min-height: 280px;
background-color: #2e2f2d;
position: absolute;
color: #7cb6c6;
}
@media (min-width: 768px) {
#footer {
padding: 20px 1% 0 0;
}
}
#footer .footerMenu {
display: block;
width: 100%;
margin-bottom: 20px;
}
@media (min-width: 768px) {
#footer .footerMenu {
float: right;
width: 68%;
margin-bottom: 70px;
}
}
@media (min-width: 1168px) {
#footer .footerMenu {
float: left;
width: 40.5%;
margin-bottom: 0px;
}
}
#footer .footerMenu ul {
margin: 0;
padding-left: 25px;
padding-bottom: 20px;
list-style: none;
}
@media (min-width: 768px) {
#footer .footerMenu ul {
margin-top: 25px;
padding-bottom: 0px;
margin-bottom: 10px;
padding-left: 0;
}
}
@media (min-width: 1168px) {
#footer .footerMenu ul {
margin: 0;
padding: 0;
margin-top: 20px;
}
}
#footer .footerMenu ul li {
font-size: 0.9rem;
font-weight: 500;
}
#footer .footerMenu ul li a {
color: #7cb6c6;
text-decoration: none;
position: relative;
}
#footer .footerMenu ul li a::before,
#footer .footerMenu ul li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
#footer .footerMenu ul li a::before {
border-bottom: 2px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
#footer .footerMenu ul li a:hover::before,
#footer .footerMenu ul li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
#footer .footerMenu > ul {
overflow: hidden;
}
@media (min-width: 768px) {
#footer .footerMenu > ul > li {
float: left;
padding-left: 1.5em;
}
}
#footer .footerMenu .fooSub {
color: #7cb6c6;
padding-top: 3px;
margin-top: 0;
padding-left: 0;
}
#footer .footerMenu .fooSub li {
font-weight: 200;
font-size: 0.75rem;
line-height: 1.8;
}
#footer .footerMenu .fooSub li a::before {
border-bottom: 1px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
#footer .subscribe-box {
overflow: hidden;
width: 100%;
}
@media (min-width: 768px) {
#footer .subscribe-box {
float: left;
width: 30%;
}
}
@media (min-width: 1168px) {
#footer .subscribe-box {
width: 33%;
}
}
@media (min-width: 1500px) {
#footer .subscribe-box {
width: 33%;
}
}
#footer .subscribe {
overflow: hidden;
width: 85%;
text-align: left;
font-size: 0.9rem;
padding-left: 25px;
padding-top: 40px;
margin-bottom: 20px;
font-weight: 500;
}
@media (min-width: 768px) {
#footer .subscribe {
font-size: 0.75rem;
text-align: left;
margin-top: 30px;
padding-left: 60px;
margin-bottom: 20px;
padding-top: 0;
}
}
@media (min-width: 1168px) {
#footer .subscribe {
font-size: 0.9rem;
text-align: left;
padding-left: 60px;
padding-top: 0;
}
}
input.subscribe_box {
background-color: #2e2f2d;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #7cb6c6;
padding: 2px 0px 8px 0px;
margin-top: 0px;
margin-bottom: 20px;
font-size: 0.75rem;
width: 93%;
font-weight: 300;
display: block;
float: left;
caret-color: #7cb6c6;
}
@media (min-width: 768px) {
input.subscribe_box {
width: 80%;
font-size: 0.7rem;
}
}
@media (min-width: 1168px) {
input.subscribe_box {
font-size: 0.75rem;
width: 220px;
}
}
.footerMenu .full-list {
float: left;
}
button.send {
display: block;
font-size: 1.5rem;
line-height: 1rem;
color: #7cb6c6;
background-color: #2e2f2d;
border-top: 120px;
border-left: 0;
border-right: 0;
border-bottom: 0px solid #7cb6c6;
margin-top: 10px;
padding: 0px 0 5px 7px;
position: relative;
font-weight: 300;
margin-left: -15px;
}
#footer .subscribe .send:hover {
color: #7cb6c6;
}
#footer .social {
overflow: hidden;
width: 100%;
margin-bottom: 100px;
}
@media (min-width: 768px) {
#footer .social {
width: 30%;
float: left;
margin-bottom: 90px;
padding-top: 0px;
}
}
@media (min-width: 1168px) {
#footer .social {
width: 25%;
float: right;
margin-bottom: 0;
padding-top: 0px;
}
}
#footer .social .social-wrapper {
padding-left: 25px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
#footer .social .social-wrapper {
padding-left: 0;
margin-bottom: 0px;
padding-left: 60px;
}
}
@media (min-width: 1168px) {
#footer .social .social-wrapper {
padding-left: 0;
margin-top: 25px;
}
}
#footer .social ul {
font-size: 0.5rem;
list-style: none;
padding: 0;
}
#footer .social ul li {
color: #7cb6c6;
font-size: 0.7rem;
line-height: normal;
padding-top: 4px;
font-weight: 300;
}
#footer .social ul li span.small {
color: #7cb6c6;
}
#footer .social ul.soc {
overflow: hidden;
}
#footer .social ul.soc li {
float: left;
padding-right: 20px;
color: #7cb6c6;
font-size: 0.65rem;
padding-top: 7px;
font-weight: 400;
text-transform: uppercase;
}
@media (min-width: 768px) {
#footer .social ul.soc li {
padding-top: 0px;
}
}
#footer .social ul li a {
color: #7cb6c6;
text-decoration: none;
}
#footer .social ul li a {
text-decoration: underline;
}
#footer .copyright-box {
padding: 0;
position: absolute;
bottom: 0;
left: 0;
width: 90%;
color: #7cb6c6;
}
@media (min-width: 768px) {
#footer .copyright-box {
width: 99%;
}
}
#footer .copyright {
font-size: 0.65rem;
font-weight: 200;
display: inline-block;
width: 95%;
padding: 20px 0 10px 25px;
}
@media (min-width: 768px) {
#footer .copyright {
width: 40%;
padding: 20px 55px 25px 60px;
}
}
#footer .copyright span {
color: #7cb6c6;
font-weight: 500;
}
#footer .dev {
font-size: 0.65rem;
font-weight: 200;
width: 95%;
padding: 0px 0 25px 25px;
}
@media (min-width: 768px) {
#footer .dev {
display: inline-block;
width: 30%;
text-align: right;
padding: 20px 60px 25px 0;
float: right;
}
}
@media (min-width: 1168px) {
#footer .dev {
padding: 20px 0px 25px 0;
text-align: left;
width: 25%;
}
}
#footer .dev span {
color: #7cb6c6;
font-weight: 500;
}
img.icon {
height: 23px;
}
#footer .footerMenu ul.full-list.second {
margin-left: 10px;
}
#footer .footerMenu ul.full-list.second li{
float: none;
}
@media (min-width: 375px) {
#footer .footerMenu ul.full-list.second {
margin-left: 20px;
}
}
@media (min-width: 414px) {
#footer .footerMenu ul.full-list.second {
margin-left: 25px;
}
}
@media (min-width: 768px) {
#footer .footerMenu ul.full-list.second {
margin-left: 0;
}
#footer .footerMenu ul.full-list.second > li:nth-child(2){
margin-top: 5px;
}
}
.post-img,
.in-text img,
.in-text video {
width: 115%;
margin-left: -15%;
padding: 1.8rem 0;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.post-img,
.in-text img,
.in-text video {
width: 110%;
margin-left: -10%;
padding: 3rem 0;
margin-bottom: 0;
}
}
@media (min-width: 1168px) {
.post-img,
.in-text img,
.in-text video {
width: 115%;
margin-left: -15%;
padding: 3rem 0;
}
}
.in-text img.v {
width: 115%;
margin-left: -15%;
padding: 1.8rem 0;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.in-text img.v {
margin-left: -10%;
width: 60%;
float: left;
margin-right: 50px;
padding: 1.7rem 0 2rem 0;
margin-bottom: 1.2rem;
}
}
@media (min-width: 1168px) {
.in-text img.v {
margin-left: -15%;
}
}
.post-def-img {
float: left;
width: 107.5%;
margin-left: -6.4%;
padding: 1.8rem 1.8rem 4rem 0;
}
@media (min-width: 768px) {
.post-def-img {
width: 40%;
margin-left: -15%;
padding: 6rem 0rem 4rem 0;
}
}
@media (min-width: 1168px) {
.post-def-img {
width: 30%;
}
}
.report-desctop {
visibility: hidden;
display: none;
}
@media (min-width: 768px) {
.report-desctop {
visibility: hidden;
display: none;
}
}
@media (min-width: 1168px) {
.report-desctop {
visibility: visible;
display: block;
}
}
.report-mobile {
visibility: visible;
display: block;
}
@media (min-width: 768px) {
.report-mobile {
visibility: visible;
display: block;
}
}
@media (min-width: 1168px) {
.report-mobile {
visibility: hidden;
display: none;
}
}
h2.title#report {
margin-top: 3rem;
margin-bottom: 4rem;
}
@media (min-width: 768px) {
h2.title#report {
margin-top: 7rem;
margin-bottom: 3rem;
}
}
ul.reports,
ul.years {
list-style: none;
padding-left: 0px;
margin-top: -60px;
padding-top: 0px;
margin-bottom: 0rem;
}
@media (min-width: 768px) {
ul.reports,
ul.years {
padding-top: 35px;
margin-top: 0px;
}
}
ul.reports li,
ul.years li {
padding-left: 0px;
float: left;
}
ul.reports li span {
font-size: 3rem;
font-weight: 100;
text-decoration: none;
}
@media (min-width: 768px) {
ul.reports li span {
font-size: 5rem;
}
}
@media (min-width: 1168px) {
ul.reports li span {
font-size: 5rem;
}
}
.reports {
width: 90%;
float: left;
}
#next-slide {
display: inline-block;
width: 5%;
float: right;
margin-top: -45px;
cursor: pointer;
}
@media (min-width: 768px) {
#next-slide {
margin-top: 25px;
}
}
#prev-slide {
display: inline-block;
width: 5%;
float: left;
margin-top: -45px;
cursor: pointer;
margin-left: -30px;
}
@media (min-width: 768px) {
#prev-slide {
margin-top: 25px;
margin-left: -60px;
}
}
ul.reports li span:hover {
color: #0750a4;
}
ul.reports ul.period,
ul.years ul.det {
list-style: none;
padding-left: 0px;
margin-top: -15px;
}
@media (min-width: 768px) {
ul.reports ul.period,
ul.years ul.det {
padding-top: 15px;
margin-top: 0;
}
}
@media (min-width: 1168px) {
ul.reports ul.period,
ul.years ul.det {
padding-top: 15px;
margin-top: 0;
}
}
ul.reports ul.period li,
ul.years ul.det li {
float: none;
margin: 0;
margin-bottom: -3px;
}
@media (min-width: 768px) {
ul.reports ul.period li,
ul.years ul.det li {
margin-bottom: -3px;
}
}
@media (min-width: 1168px) {
ul.reports ul.period li,
ul.years ul.det li {
margin-bottom: -3px;
}
}
ul.reports ul.period li a.period {
font-size: 0.8rem;
font-weight: 400;
text-decoration: none;
}
@media (min-width: 768px) {
ul.reports ul.period li a.period {
font-size: 1rem;
position: relative;
}
ul.reports ul.period li a.period::before,
ul.reports ul.period li a.period::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
ul.reports ul.period li a.period::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.reports ul.period li a.period:hover::before,
ul.reports ul.period li a.period:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
}
@media (min-width: 1168px) {
ul.reports ul.period li a.period {
font-size: 1rem;
}
}
ul {
overflow: hidden;
}
.reports li a.arrow {
font-size: 2rem;
padding-top: 10px;
font-weight: 200;
}
.reports li a.arrow:hover {
color: #2e2f2d;
}
.reports li.arrow {
padding-top: 20px;
margin: 0;
}
@media (min-width: 768px) {
.reports li.arrow {
padding-top: 5px;
}
}
@media (min-width: 1168px) {
.reports li.arrow {
padding-top: 5px;
}
}
.arrow {
font-size: 2rem;
padding-top: 10px;
font-weight: 200;
}
ul.services {
padding-left: 1.6em;
list-style-type: none;
}
ul.services > li {
text-indent: -1.5em;
line-height: 1.6;
margin-bottom: 10px;
}
ul.services > li:before {
content: "\2014\a0";
margin-right: 5px;
}
h2.services {
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
h2.services {
margin-bottom: 1rem;
}
}
#next-slide,
#prev-slide {
opacity: 1;
}
#next-slide.disabled,
#prev-slide.disabled {
opacity: 0;
}
#prev-slide {
opacity: 0;
}
#prev-slide.abled {
opacity: 1;
}
.achievements {
width: 115%;
margin-left: -15%;
margin-top: 0;
margin-bottom: -40px;
}
@media (min-width: 768px) {
.achievements {
margin-top: -20px;
margin-left: -15%;
width: 115%;
max-height: 28vw;
}
}
.achievements .number {
font-size: 4.5rem;
font-weight: 800;
overflow: hidden;
white-space: nowrap;
color: #b1cae4;
opacity: 0.5;
}
@media (min-width: 375px) {
.achievements .number {
font-size: 5.5rem;
}
}
@media (min-width: 768px) {
.achievements .number {
font-size: 13rem;
}
}
@media (min-width: 1168px) {
.achievements .number {
font-size: 15rem;
}
}
.achievements .text {
font-size: 1rem;
color: #b1cae4;
opacity: 0.5;
font-weight: 400;
text-transform: uppercase;
margin-top: -10px;
letter-spacing: 0.18em;
}
@media (min-width: 768px) {
.achievements .text {
font-size: 2rem;
margin-top: -40px;
}
}
@media (min-width: 1168px) {
.achievements .text {
font-size: 2.5rem;
}
}
ul.years {
margin-top: -25px;
}
@media (min-width: 768px) {
ul.years {
margin-top: 0;
}
}
ul.years li {
font-size: 3rem;
font-weight: 100;
text-decoration: none;
width: 100%;
margin-right: -10px;
margin-top: 20px;
}
@media (min-width: 768px) {
ul.years li {
margin-top: 0;
font-size: 5rem;
width: 50%;
margin-bottom: 80px;
}
}
@media (min-width: 1300px) {
ul.years li {
width: 30%;
margin-right: -15px;
margin-bottom: 0;
}
}
ul.years li ul.det li {
font-size: 0.75rem;
line-height: 1.6;
font-weight: 400;
text-decoration: none;
width: 100%;
}
@media (min-width: 768px) {
ul.years li ul.det li {
line-height: 1.7;
width: 80%;
margin-top: 20px;
font-size: 0.9rem;
}
}
ul.years li ul.det li.long {
width: 100%;
}
@media (min-width: 768px) {
ul.years li ul.det li.long {
width: 120%;
}
}
ul.years,
ul.det {
overflow: visible;
}
@media (min-width: 768px) {
ul.years li.long-date {
margin-bottom: 0;
}
}
html {
font-size: 17px;
letter-spacing: 0em;
}
body {
font: 100% "Montserrat", sans-serif;
color: #0750a4;
}
h1 {
font-size: 1.7rem;
line-height: 1.1;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 2rem;
margin-top: 0.45rem;
}
@media (min-width: 768px) {
h1 {
font-size: 3.5rem;
margin-bottom: 3rem;
}
}
@media (min-width: 1168px) {
h1 {
font-size: 3.5rem;
margin-bottom: 4rem;
}
}
h2 {
font-size: 1.4rem;
line-height: 1.2;
text-transform: uppercase;
font-weight: 800;
margin-top: 4rem;
margin-bottom: 1.7rem;
}
@media (min-width: 768px) {
h2 {
font-size: 2.6rem;
margin-bottom: 3rem;
margin-top: 7rem;
}
}
h3 {
font-size: 1.1rem;
line-height: 1.2;
text-transform: uppercase;
font-weight: 600;
}
@media (min-width: 768px) {
h3 {
font-size: 1.4rem;
line-height: 1.25;
}
}
@media (min-width: 1168px) {
h3 {
font-size: 1.6rem;
line-height: 1.3;
}
}
h4 {
font-size: 1rem;
line-height: 1.2;
color: #0750a4;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3em;
margin-top: 15px;
}
@media (min-width: 768px) {
h4 {
font-size: 1.2rem;
margin-top: 25px;
}
}
@media (min-width: 1168px) {
h4 {
font-size: 1.3rem;
}
}
h5 {
margin-bottom: 0;
font-size: 1.2rem;
font-weight: 500;
color: #0750a4;
line-height: 1.15;
}
.rang-news h5{
margin-top: 20px;
}
@media (min-width: 768px) {
h5 {
font-size: 1.4rem;
}
.rang-news h5, .rang-news h5 a.event{
font-size: 1.2rem;
}
.col2to1 h5, .col2to1 h5 a.event {
font-size: 1.2rem;
}
}
@media (min-width: 1168px) {
h5 {
font-size: 1.4rem;
}
.rang-news h5{
margin-top: 25px;
}
.col2to1 h5, .col2to1 h5 a.event {
font-size: 1.4rem;
}
}
h6 {
font-size: 0.9rem;
line-height: 1.65;
font-weight: 400;
margin-bottom: 0;
margin-top: 20px;
color: #0750a4;
}
@media (min-width: 768px) {
h6 {
font-size: 1.2rem;
line-height: 1.75;
}
}
@media (min-width: 1168px) {
h6 {
font-size: 1.2rem;
}
}
blockquote {
line-height: 33px;
}
p {
font-size: 0.85rem;
line-height: 1.8;
}
@media (min-width: 768px) {
p {
font-size: 1rem;
line-height: 1.9rem;
}
}
@media (min-width: 1168px) {
p {
font-size: 1rem;
line-height: 1.9rem;
}
}
a {
color: #0750a4;
}
b {
font-weight: 600;
}
ul {
line-height: 1.9rem;
padding-left: 30px;
}
@media (min-width: 768px) {
ul {
padding-left: 70px;
}
}
@media (min-width: 1168px) {
ul {
padding-left: 70px;
}
}
li {
font-size: 0.85rem;
line-height: 1.9;
}
@media (min-width: 768px) {
li {
font-size: 1rem;
line-height: 1.9rem;
}
}
@media (min-width: 1168px) {
li {
font-size: 1rem;
line-height: 1.9rem;
}
}
ul.gorizontal {
list-style: none;
padding-left: 0;
}
li.gorizontal {
float: left;
margin-right: 50px;
}
ol {
line-height: 1.9rem;
padding-left: 30px;
}
@media (min-width: 768px) {
ol {
padding-left: 70px;
}
}
@media (min-width: 1168px) {
ol {
padding-left: 70px;
}
}
.opportunity {
margin-bottom: -20px;
}
@media (min-width: 768px) {
.opportunity {
margin-bottom: -40px;
}
}
@media (min-width: 1168px) {
.opportunity {
margin-bottom: -40px;
}
}
h1.contact {
margin-bottom: 0rem;
}
@media (min-width: 768px) {
h1.contact {
margin-bottom: 2rem;
}
}
@media (min-width: 1168px) {
h1.contact {
margin-bottom: 2rem;
}
}
a.link {
text-decoration: none;
font-size: 0.9rem;
color: #0750a4;
background-color: #f2f7fb;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
padding: 10px 0px 9px 0px;
font-weight: 400;
}
@media (min-width: 768px) {
a.link {
font-size: 1.05rem;
}
}
@media (min-width: 1168px) {
a.link {
font-size: 1.05rem;
}
}
a.link:hover {
border-bottom: 2px solid #0750a4;
}
.secondary {
letter-spacing: 0.5em;
color: #0750a4;
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
font-size: 0.65rem;
line-height: 1.4;
}
@media (min-width: 768px) {
.secondary {
font-size: 1rem;
margin-bottom: 10px;
}
}
@media (min-width: 1168px) {
.secondary {
font-size: 1.3rem;
}
}
@media (min-width: 1168px) {
h4.about {
margin-top: 15px;
}
}
.subtitle {
font-size: 0.75rem;
line-height: 1.5;
letter-spacing: 0.5em;
color: #999;
text-transform: uppercase;
font-weight: 500;
}
.news {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
.news {
font-size: 1.95rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
.news {
font-size: 1.95rem;
line-height: 1.4;
}
}
.event {
font-size: 1.1rem;
line-height: 1.45;
text-transform: none;
font-weight: 500;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
.event {
font-size: 1.4rem;
line-height: 1.45;
}
}
@media (min-width: 1168px) {
.event {
font-size: 1.4rem;
line-height: 1.45;
}
}
p.description,
.description p,
span.description {
font-size: 0.75rem;
line-height: 1.65;
margin-bottom: 0;
}
@media (min-width: 768px) {
p.description,
.description p,
span.description {
/*font-size: 0.9rem;*/
font-size: 0.7rem;
line-height: 1.7;
}
/* .rang-news p.description{
font-size: 0.7rem;
}*/
}
@media (min-width: 1168px) {
p.description,
.description p,
span.description {
/*font-size: 0.9rem;*/
font-size: 0.8rem;
line-height: 1.7;
}
/*.rang-news p.description{
font-size: 0.8rem;
}*/
}
.category {
color: #0750a4;
font-weight: 400;
margin-bottom: 2rem;
margin-top: 2.5rem;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.category {
margin-top: 4.5rem;
margin-bottom: 3rem;
}
}
@media (min-width: 1168px) {
.category {
margin-top: 4.5rem;
margin-bottom: 3rem;
}
}
.post-date {
margin-bottom: 2.8rem;
color: #0750a4;
font-size: 0.65rem;
letter-spacing: 0.18em;
}
.sign {
color: #0750a4;
float: left;
width: 65.5%;
font-size: 0.6rem;
font-style: italic;
margin-top: -3.5em;
text-align: left;
margin-left: -15%;
}
@media (min-width: 768px) {
.sign {
font-size: 0.7rem;
margin-top: -3.5em;
width: 110%;
margin-left: -10%;
}
}
@media (min-width: 1168px) {
.sign {
font-size: 0.7rem;
margin-left: -15%;
}
}
ul.no-padding {
list-style: none;
padding: 0;
margin-top: 10px;
}
.contacts {
font-size: 0.9rem;
margin-bottom: -2px;
}
@media (min-width: 768px) {
.contacts {
font-size: 1rem;
}
}
@media (min-width: 1168px) {
.contacts {
font-size: 1rem;
}
}
.small {
color: #0750a4;
}
.details {
margin-bottom: 5rem;
font-size: 0.8rem;
line-height: 1.7;
}
h2.title.inside-break.team {
display: block;
}
@media (min-width: 768px) {
h2.title.inside-break.team {
width: 50%;
}
}
@media (min-width: 1168px) {
h2.title.inside-break.team {
width: 30%;
}
}
input {
-webkit-appearance: none;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-appearance: none;
}
h1.error {
font-size: 10rem;
margin-bottom: 0rem;
letter-spacing: 0.18em;
}
p.error {
font-size: 1.3rem;
margin-top: 0;
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
p.error {
font-size: 1.95rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
p.error {
font-size: 1.95rem;
line-height: 1.4;
}
}
figure h4 {
cursor: pointer;
border-bottom: 2px solid #f2f7fb;
display: inline-block;
transition: border-bottom 0.2s easy;
}
figure h4:hover {
border-bottom: 2px solid #0750a4;
transition: border-bottom 0.2s easy;
}
h5 a,
h1 a,
h2 a,
h3 a,
h4 a,
h6 a {
cursor: pointer;
border-bottom: 2px solid #f2f7fb;
display: inline;
transition: border-bottom 0.2s easy;
}
h5 a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h6 a:hover {
border-bottom: 2px solid #0750a4;
transition: border-bottom 0.2s easy;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
.in-text h1 {
font-size: 1.2rem;
line-height: 1.6rem;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3rem;
margin-top: 55px;
}
@media (min-width: 768px) {
.in-text h1 {
font-size: 1.7rem;
line-height: 2.2rem;
margin-bottom: 0.3rem;
}
}
.in-text h2 {
font-size: 1.1rem;
line-height: 1.5rem;
text-transform: uppercase;
font-weight: 600;
margin-top: 4rem;
margin-bottom: 0.3rem;
margin-top: 55px;
}
@media (min-width: 768px) {
.in-text h2 {
font-size: 1.6rem;
line-height: 2.1rem;
margin-bottom: 0.3rem;
}
}
.in-text h3 {
font-size: 1rem;
line-height: 1.4rem;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3rem;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h3 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 1168px) {
.in-text h3 {
font-size: 1.5rem;
}
}
.in-text h4 {
font-size: 0.9rem;
line-height: 1.3rem;
color: #0750a4;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3em;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h4 {
line-height: 1.9rem;
font-size: 1.4rem;
}
}
@media (min-width: 1168px) {
.in-text h4 {
font-size: 1.4rem;
}
}
.in-text h5 {
text-transform: uppercase;
margin-bottom: 0;
font-size: 0.8rem;
font-weight: 600;
color: #0750a4;
line-height: 1.2rem;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h5 {
line-height: 1.8rem;
font-size: 1.3rem;
}
}
@media (min-width: 1168px) {
.in-text h5 {
font-size: 1.3rem;
}
}
.in-text h6 {
text-transform: uppercase;
font-size: 0.75rem;
line-height: 1.15rem;
font-weight: 600;
margin-bottom: 0;
margin-top: 50px;
color: #0750a4;
}
@media (min-width: 768px) {
.in-text h6 {
font-size: 1.2rem;
line-height: 1.6rem;
}
}
@media (min-width: 1168px) {
.in-text h6 {
font-size: 1.2rem;
}
}
.in-text ul {
margin-top: 25px;
padding-left: 70px;
list-style-type: none;
padding-left: 17px;
}
@media (min-width: 768px) {
.in-text ul {
padding-left: 60px;
}
}
.in-text ol {
margin-top: 25px;
margin-bottom: 28px;
padding-left: 17px;
}
@media (min-width: 768px) {
.in-text ol {
padding-left: 60px;
}
}
.in-text ul > li {
text-indent: -1.5em;
line-height: 1.6;
margin-bottom: 10px;
}
.in-text ol > li {
line-height: 1.6;
margin-bottom: 10px;
}
.in-text ul > li:before {
content: "\2014\a0";
margin-right: 5px;
}
.in-text blockquote p {
margin: 45px 0 45px -40px;
font-size: 1.1rem;
line-height: 1.45;
}
@media (min-width: 768px) {
.in-text blockquote p {
margin: 45px 0 45px 20px;
font-size: 1.4rem;
line-height: 1.45;
}
}
.in-text hr {
margin: 70px 0;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid #0750a4;
}
.in-text pre {
margin: 40px 0;
}
.in-text iframe {
width: 107.5%;
height: 45vw;
margin-left: -6.4%;
padding: 1.8rem 0;
}
@media (min-width: 768px) {
.in-text iframe {
width: 110%;
height: 39vw;
margin-left: -10%;
padding: 3rem 0;
}
}
@media (min-width: 1168px) {
.in-text iframe {
width: 115%;
height: 40vw;
margin-left: -15%;
}
}
.view-all h5 a {
display: inline-block;
color: #0750a4;
border-bottom: 0px solid #0750a4;
padding: 0px 0 5px 0;
position: relative;
}
.view-all h5 a::before,
.view-all h5 a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.view-all h5 a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
.view-all h5 a:hover::before,
.view-all h5 a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
mark {
background: #0750a4;
color: #f2f7fb;
}
.description {
margin-bottom: 1rem;
font-size: 0.7rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.description {
font-size: 0.8rem;
line-height: 1.7;
}
}
@media (min-width: 1168px) {
.description {
font-size: 0.8rem;
}
}
.noPortrait .position {
margin-top: 4px;
font-size: 0.65rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.noPortrait .position {
font-size: 0.8rem;
line-height: 1.7;
}
}
@media (min-width: 1168px) {
.noPortrait .position {
font-size: 0.8rem;
}
}
img.post-img.team {
padding-bottom: 0;
}
.ourteam h2 {
margin-bottom: 1rem;
}
.portrait {
width: 100%;
padding-bottom: 150%;
position: relative;
background-position: center;
background-size: cover;
}
.description-wrap {
min-height: 90px;
}
.pop-up {
display: none;
color: #7cb6c6;
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #2e2f2d;
overflow: scroll;
}
.pop-up .col2to1 {
margin-top: -60px;
}
.pop-up-content {
position: relative;
top: 0px;
left: 0;
height: 100%;
text-align: left;
overflow: scroll;
color: #7cb6c6;
}
.pop-up-content .post-def-img {
padding: 0;
width: 100%;
margin-left: 0%;
margin-top: 33px;
margin-bottom: 50px;
}
@media (min-width: 768px) {
.pop-up-content .post-def-img {
margin-bottom: 30px;
margin-right: 40px;
margin-left: -15%;
width: 40%;
margin-top: 65px;
}
}
@media (min-width: 991px) {
.pop-up-content .post-def-img {
width: 34%;
margin-right: 50px;
margin-top: 105px;
}
}
@media (min-width: 1168px) {
.pop-up-content .post-def-img {
width: 33%;
}
}
.pop-up-content:not(.for-media-guide) h2,
.pop-up-content:not(.for-media-guide) h4,
.pop-up-content:not(.for-media-guide) p {
padding-left: 0;
}
.exp-det {
margin-bottom: 50px;
}
@media (min-width: 768px) {
.exp-det {
margin-bottom: 70px;
}
}
.pop-up-content:not(.for-media-guide) h2 {
margin-top: 55px;
margin-bottom: 1.5rem;
font-size: 1.5rem;
margin-left: -13%;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) h2 {
font-size: 2.6rem;
margin-bottom: 2rem;
}
}
@media (min-width: 991px) {
.pop-up-content:not(.for-media-guide) h2 {
margin-top: 95px;
}
}
.pop-up-content:not(.for-media-guide) h4 {
margin-top: 3rem;
margin-bottom: 0.7rem;
color: #7cb6c6;
font-size: 1.1rem;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) h4 {
font-size: 1.2rem;
}
}
@media (min-width: 1168px) {
.pop-up-content:not(.for-media-guide) h4 {
font-size: 1.3rem;
}
}
.pop-up-content:not(.for-media-guide) p {
font-size: 0.95rem;
line-height: 1.8rem;
}
.pop-up-content:not(.for-media-guide) ul {
position: relative;
list-style: none;
margin-bottom: 50px;
margin-top: 100px;
padding: 0;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) ul {
margin-bottom: 0;
margin-top: 0;
position: fixed;
left: 60px;
bottom: 60px;
}
}
.pop-up-content:not(.for-media-guide) ul li {
padding: 0;
margin: 5px 0;
line-height: 1.5rem;
}
.pop-up-content:not(.for-media-guide) ul li a {
color: #7cb6c6;
font-size: 0.8rem;
padding-bottom: 2px;
text-decoration: none;
position: relative;
}
.pop-up-content:not(.for-media-guide) ul li a::before,
.pop-up-content:not(.for-media-guide) ul li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.pop-up-content:not(.for-media-guide) ul li a::before {
border-bottom: 1px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
.pop-up-content:not(.for-media-guide) ul li a:hover::before,
.pop-up-content:not(.for-media-guide) ul li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.pop-up-content:not(.for-media-guide) ul li a span {
padding: 10px;
}
h5.team a.news:hover {
color: #0750a4;
padding-bottom: 100px;
}
.pop-up-preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 45%;
width: 100%;
height: 60px;
}
.pop-up-preloader .lines {
width: 200px;
height: 40px;
position: absolute;
}
.pop-up-preloader .lines .line {
width: 200px;
height: 2px;
background-color: #7cb6c6;
position: absolute;
clip: rect(0, 0, 20px, 0);
top: 0;
animation: slide 2s ease 0s infinite;
}
@keyframes slide {
0% {
clip: rect(0, 0, 20px, 0);
}
30% {
clip: rect(0, 200px, 20px, 0);
}
50% {
clip: rect(0, 200px, 20px, 0);
}
80% {
clip: rect(0, 200px, 20px, 200px);
}
100% {
clip: rect(0, 200px, 20px, 200px);
}
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.handle {
position: fixed;
left: 25px;
top: 30px;
margin-top: 9px;
background-color: #7cb6c6;
width: 20px;
height: 2px;
display: block;
transform: rotate(45deg);
float: right;
border-radius: 2px;
}
.handle:after {
content: "";
background-color: #7cb6c6;
width: 20px;
height: 2px;
display: block;
float: right;
border-radius: 2px;
z-index: -1;
transform-origin: center center;
transform: rotate(90deg);
}
@media (min-width: 768px) {
.handle {
left: 60px;
top: 60px;
}
}
.col1.teamlastcol {
margin-bottom: 0.8rem;
}
.main-about {
color: #0750a4;
position: absolute;
width: 80%;
right: 0;
top: 20vh;
padding: 0 10%;
}
@media (min-width: 768px) {
.main-about {
left: 30%;
width: 60%;
padding: 0 3%;
top: 30vh;
}
}
@media (min-width: 1168px) {
.main-about {
width: 55%;
}
}
.main-about h1, .intro-desc {
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
line-height: 1.5;
padding-right: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.main-about h1::after, .intro-desc::after {
border-right: 0.1em solid #0750a4;
animation: blink-caret 1s step-end infinite;
content: "";
padding-right: 10px;
}
@media (min-width: 500px) {
.main-about h1, .intro-desc {
font-size: 1.1rem;
line-height: 1.6;
}
}
@media (min-width: 768px) {
.main-about h1, .intro-desc {
font-size: 1.3rem;
line-height: 1.6;
}
}
@media (min-width: 1024px) {
.main-about h1, .intro-desc {
font-size: 1.3rem;
line-height: 1.6;
}
}
@media (min-width: 1168px) {
.main-about h1, .intro-desc {
font-size: 1.5rem;
line-height: 1.6;
}
}
@media (min-width: 1500px) {
.main-about h1, .intro-desc {
font-size: 1.7rem;
line-height: 1.6;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #0750a4;
}
}
.main-about img {
width: 100%;
margin-bottom: -600px;
}
.main-page {
width: 100%;
}
@media (min-width: 768px) {
.main-page {
width: 100%;
}
}
@media (min-width: 840px) {
.main-page {
width: 250px;
}
}
@media (min-width: 1168px) {
.main-page {
width: 100%;
}
}
h4 a {
text-decoration: none;
}
figcaption h3 {
margin-bottom: 7px;
}
figcaption h3 a {
text-decoration: none;
}
.bottom {
padding-bottom: 0;
margin-top: 6rem;
margin-bottom: 1rem;
}
.project-description,
figcaption p {
margin-bottom: 1rem;
font-size: 0.7rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.project-description,
figcaption p {
font-size: 0.9rem;
line-height: 1.7;
}
}
.typing {
width: 100%;
min-height: 250px;
text-align: left;
}
.typing h1 {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.typing .cursor {
opacity: 1;
font-weight: 100;
-webkit-animation: blink 0.5s infinite;
-moz-animation: blink 0.5s infinite;
-ms-animation: blink 0.5s infinite;
-o-animation: blink 0.5s infinite;
animation: blink 0.5s infinite;
}
@-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#flexProjects {
column-width: 340px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
margin-top: -30px;
}
@media (min-width: 768px) {
#flexProjects {
column-gap: 30px;
column-width: 250px;
margin-top: -260px;
}
}
@media (min-width: 1168px) {
#flexProjects {
column-gap: 60px;
column-width: 320px;
margin-top: -280px;
}
}
.project-first {
height: 0px;
}
@media (min-width: 768px) {
.project-first {
height: 240px;
}
}
div#flexProjects figure {
cursor: pointer;
opacity: 1;
width: 100%;
margin: 0 0 15px;
padding-bottom: 10px;
display: inline-block;
column-break-inside: avoid;
transform: translateY(80px);
}
@media (min-width: 768px) {
div#flexProjects figure {
width: auto;
}
}
div#flexProjects figure img {
width: 100%;
height: auto;
border: 1px solid rgba(0, 0, 150, 0.1);
}
div#flexProjects figure figcaption {
margin-bottom: 1.8rem;
}
@media (min-width: 768px) {
div#flexProjects figure figcaption {
margin-bottom: 3.5rem;
}
}
@media (min-width: 1168px) {
div#flexProjects figure figcaption {
margin-bottom: 3.5rem;
}
}
#flexProjects.single {
column-width: 350px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
}
@media (min-width: 768px) {
#flexProjects.single {
column-width: 280px;
column-gap: 30px;
margin-top: -270px;
}
}
#flexProjects.team {
column-width: 350px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
}
@media (min-width: 768px) {
#flexProjects.team {
margin-top: -240px;
column-width: 180px;
column-gap: 30px;
}
}
@media (min-width: 1168px) {
#flexProjects.team {
margin-top: -240px;
column-width: 215px;
column-gap: 30px;
}
}
@media (min-width: 1500px) {
#flexProjects.team {
column-width: 250px;
}
}
@media (min-width: 2000px) {
#flexProjects.team {
column-width: 350px;
max-width: 1800px;
column-gap: 35px;
}
}
#flexProjects.team h4 {
margin-bottom: 0.2rem;
}
h5.team {
margin-top: 0;
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
h5.team {
font-size: 1.95rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
h5.team {
font-size: 1.95rem;
line-height: 1.4;
}
}
.animate-block {
opacity: 1 !important;
transition: 1.5s all;
transform: translateY(-80px);
animation: come-in 0.8s ease forwards;
}
.animate-block:nth-child(odd) {
animation-duration: 0.6s;
}
.head-content {
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.head-content {
height: 115vh;
}
}
.slider {
display: none !important;
background-size: cover;
}
@media (min-width: 768px) {
.slider {
display: block !important;
width: 28%;
position: relative;
top: -590px;
left: 0;
}
}
.slider div {
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.slider div {
width: 100%;
}
}
.marquee, .inv {
margin-top: 100px;
font-size: 12rem;
font-weight: 800;
overflow: hidden;
white-space: nowrap;
}
@media (min-width: 768px) {
.marquee, .inv {
font-size: 15rem;
margin-top: 300px;
}
}
@media (min-width: 1168px) {
.marquee, .inv {
margin-top: 300px;
}
}
.marquee div{
color: #e0eaf4;
color: #b1cae4;
width: 100%;
padding-right: 1em;
opacity: 0.3;
}
.prelo {
position: fixed;
top: 0;
right: 0vw;
width: 100vw;
bottom: 0;
z-index: 999;
transition: 1s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.55s;
overflow: hidden;
}
.prelo img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: absolute;
right: 0;
transition: 1.5s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.15s;
z-index: 2;
}
.prelo:after {
content: "";
background: #79bdd7;
position: absolute;
top: 0;
left: 0vw;
bottom: 0;
width: 0;
transition: 1.9s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0s;
z-index: 1;
}
@media (min-width: 768px) {
.prelo:after {
left: 20vw;
}
}
.prelo:before {
content: "";
background: #4d5f7a;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 0;
}
.loaded .prelo {
right: -100vw;
}
.loaded .prelo img {
width: 20vw;
}
.ready .prelo:after {
width: 100vw;
}
@media (min-width: 768px) {
.ready .prelo:after {
width: 70vw;
}
}
.prelo.hide {
display: none;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to {
transform: translateY(0);
}
}
.title {
margin-left: -14%;
}
@media (min-width: 768px) {
.title {
margin-left: -10%;
}
}
@media (min-width: 1168px) {
.title {
margin-left: -15%;
}
}
.view-all h5 {
margin-top: -45px;
}
.view-all h5 a {
text-decoration: none;
padding: 0 0 6px 0;
font-size: 1rem;
position: relative;
}
.view-all h5 a::before,
.view-all h5 a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.view-all h5 a::before {
border-bottom: 2px solid #0750a4;
transform: scale3d(0, 1, 1);
}
.view-all h5 a:hover::before,
.view-all h5 a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.view-all h5 a:hover {
color: #0750a4;
}
#map, #rangMap {
margin-top: 2rem;
height: 300px;
}
@media (min-width: 768px) {
#map, #rangMap {
margin-top: 4rem;
height: 500px;
}
}
@media (min-width: 1168px) {
#map, #rangMap {
height: 500px;
}
}
.map {
margin-top: 5rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.map {
margin-top: 6rem;
}
}
@media (min-width: 1168px) {
.map {
margin-top: 6rem;
}
}
a[href^="tel"] {
color: inherit;
text-decoration: none;
}
.from-top {
margin-top: 7%;
}
.to_bottom {
margin-bottom: 1rem;
}
.inside-break {
margin-top: 1em;
}
@media (min-width: 768px) {
.inside-break {
margin-top: 3em;
}
}
.inside-break.projects {
margin-top: 3em;
}
@media (min-width: 768px) {
.inside-break.projects {
margin-top: 8em;
}
}
.inside-break.team {
margin-top: 2em;
}
@media (min-width: 768px) {
.inside-break.team {
margin-top: 3em;
}
}
@media (min-width: 1168px) {
.inside-break.team {
margin-top: 5.5em;
}
}
.form-send {
color: #0750a4;
background-color: #f2f7fb;
/*border: 0;
padding: 0 0 6px 0;*/
border: 1px solid #0750a4;
padding: 10px 35px 12px;
margin-top: 45px;
font-weight: 500;
position: relative;
}
.form-send::before,
.form-send::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.form-send::before {
border-bottom: 2px solid #0750a4;
transform: scale3d(0, 1, 1);
}
.form-send:hover::before,
.form-send:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
form {
display: block;
}
form.close {
display: none;
}
form .form-send.alert {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
#submit {
cursor: pointer;
}
.success-message {
display: none;
}
.success-message.open {
display: block;
}
.success-message h3 {
margin-top: 0;
}
.success-message .success-text {
margin-bottom: 20px;
}
.alert.alert-danger {
margin-top: 9px;
}
.alert.alert-danger p {
margin-bottom: 39px;
}
.box {
font-size: 0.9rem;
width: 100%;
background-color: #f2f7fb;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #0750a4;
padding: 10px 0px 10px 0px;
}
input {
outline: none;
margin-bottom: 35px;
}
button {
outline: none;
}
textarea {
outline: none;
border-radius: 0px;
-webkit-appearance: none;
}
::placeholder {
color: #0750a4;
opacity: 1;
}
:-ms-input-placeholder {
color: #0750a4;
}
::-ms-input-placeholder {
color: #0750a4;
}
:focus::-webkit-input-placeholder {
color: transparent;
}
:focus::-moz-placeholder {
color: transparent;
}
:focus:-moz-placeholder {
color: transparent;
}
:focus:-ms-input-placeholder {
color: transparent;
}
input.subscribe_box::placeholder {
color: #7cb6c6;
opacity: 1;
}
input.subscribe_box:-ms-input-placeholder {
color: #7cb6c6;
}
input.subscribe_box::-ms-input-placeholder {
color: #7cb6c6;
}
input.subscribe_box:focus::-webkit-input-placeholder {
color: transparent;
}
input.subscribe_box:focus::-moz-placeholder {
color: transparent;
}
input.subscribe_box:focus:-moz-placeholder {
color: transparent;
}
input.subscribe_box:focus:-ms-input-placeholder {
color: transparent;
}
p.for-search {
margin-top: 4rem;
}
.content {
position: relative;
}
.submenuwrap {
position: absolute;
bottom: 45px;
left: 0;
}
.submenuwrap.fix {
position: fixed;
left: 0;
bottom: 60px;
}
p.openg {
margin-top: 110px;
}
p.n-f {
margin-top: 30px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
p.n-f {
margin-top: 75px;
}
}
@media (min-width: 768px) {
.for-project {
margin-top: 180px;
}
}
@media (min-width: 830px) {
.for-project {
margin-top: 300px;
}
}
@media (min-width: 1168px) {
.for-project {
margin-top: 310px;
}
}
.for-project p.n-f {
margin-top: 0;
}
@media (min-width: 768px) {
.for-project p.n-f {
margin-top: 75px;
}
}
@media (min-width: 768px) {
.home .for-project {
margin-top: 180px;
}
}
@media (min-width: 830px) {
.home .for-project {
margin-top: 260px;
}
}
@media (min-width: 1168px) {
.home .for-project {
margin-top: 310px;
}
}
html {
font-size: 17px;
letter-spacing: 0em;
}
body {
font: 100% "Montserrat", sans-serif;
color: #0750a4;
}
h1 {
font-size: 1.7rem;
line-height: 1.1;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 2rem;
margin-top: 0.45rem;
}
@media (min-width: 768px) {
h1 {
font-size: 3.5rem;
margin-bottom: 3rem;
}
}
@media (min-width: 1168px) {
h1 {
font-size: 3.5rem;
margin-bottom: 4rem;
}
}
h2 {
font-size: 1.4rem;
line-height: 1.2;
text-transform: uppercase;
font-weight: 800;
margin-top: 4rem;
margin-bottom: 1.7rem;
}
@media (min-width: 768px) {
h2 {
font-size: 2.6rem;
margin-bottom: 3rem;
margin-top: 7rem;
}
}
h3 {
font-size: 1.1rem;
line-height: 1.2;
text-transform: uppercase;
font-weight: 600;
}
@media (min-width: 768px) {
h3 {
font-size: 1.4rem;
line-height: 1.25;
}
}
@media (min-width: 1168px) {
h3 {
font-size: 1.6rem;
line-height: 1.3;
}
}
h4 {
font-size: 1rem;
line-height: 1.2;
color: #0750a4;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3em;
margin-top: 15px;
}
@media (min-width: 768px) {
h4 {
font-size: 1.2rem;
margin-top: 25px;
}
}
@media (min-width: 1168px) {
h4 {
font-size: 1.3rem;
}
}
h5 {
margin-bottom: 0;
font-size: 1.2rem;
font-weight: 500;
color: #0750a4;
line-height: 1.15;
}
@media (min-width: 768px) {
h5 {
font-size: 1.4rem;
}
.col2to1 h5 {
font-size: 1.2rem;
}
}
@media (min-width: 1168px) {
h5 {
font-size: 1.4rem;
}
.col2to1 h5 {
font-size: 1.4rem;
}
}
h6 {
font-size: 0.9rem;
line-height: 1.65;
font-weight: 400;
margin-bottom: 0;
margin-top: 20px;
color: #0750a4;
}
@media (min-width: 768px) {
h6 {
font-size: 1.2rem;
line-height: 1.75;
}
}
@media (min-width: 1168px) {
h6 {
font-size: 1.2rem;
}
}
blockquote {
line-height: 33px;
}
p {
font-size: 0.85rem;
line-height: 1.8;
}
@media (min-width: 768px) {
p {
font-size: 1rem;
line-height: 1.9rem;
}
}
@media (min-width: 1168px) {
p {
font-size: 1rem;
line-height: 1.9rem;
}
}
a {
color: #0750a4;
}
b {
font-weight: 600;
}
ul {
line-height: 1.9rem;
padding-left: 30px;
}
@media (min-width: 768px) {
ul {
padding-left: 70px;
}
}
@media (min-width: 1168px) {
ul {
padding-left: 70px;
}
}
li {
font-size: 0.85rem;
line-height: 1.9;
}
@media (min-width: 768px) {
li {
font-size: 1rem;
line-height: 1.9rem;
}
}
@media (min-width: 1168px) {
li {
font-size: 1rem;
line-height: 1.9rem;
}
}
ul.gorizontal {
list-style: none;
padding-left: 0;
}
li.gorizontal {
float: left;
margin-right: 50px;
}
ol {
line-height: 1.9rem;
padding-left: 30px;
}
@media (min-width: 768px) {
ol {
padding-left: 70px;
}
}
@media (min-width: 1168px) {
ol {
padding-left: 70px;
}
}
.opportunity {
margin-bottom: -20px;
}
@media (min-width: 768px) {
.opportunity {
margin-bottom: -40px;
}
}
@media (min-width: 1168px) {
.opportunity {
margin-bottom: -40px;
}
}
h1.contact {
margin-bottom: 0rem;
}
@media (min-width: 768px) {
h1.contact {
margin-bottom: 2rem;
}
}
@media (min-width: 1168px) {
h1.contact {
margin-bottom: 2rem;
}
}
a.link {
text-decoration: none;
font-size: 0.9rem;
color: #0750a4;
background-color: #f2f7fb;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
padding: 10px 0px 9px 0px;
font-weight: 400;
}
@media (min-width: 768px) {
a.link {
font-size: 1.05rem;
}
}
@media (min-width: 1168px) {
a.link {
font-size: 1.05rem;
}
}
a.link:hover {
border-bottom: 2px solid #0750a4;
}
.secondary {
letter-spacing: 0.5em;
color: #0750a4;
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
font-size: 0.65rem;
line-height: 1.4;
}
@media (min-width: 768px) {
.secondary {
font-size: 1rem;
margin-bottom: 10px;
}
}
@media (min-width: 1168px) {
.secondary {
font-size: 1.3rem;
}
}
@media (min-width: 1168px) {
h4.about {
margin-top: 15px;
}
}
.subtitle {
font-size: 0.75rem;
line-height: 1.5;
letter-spacing: 0.5em;
color: #999;
text-transform: uppercase;
font-weight: 500;
}
.news {
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
.news {
/*font-size: 1.95rem;*/
font-size: 1.7rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
.news {
font-size: 1.95rem;
line-height: 1.4;
}
}
.event {
font-size: 1.1rem;
line-height: 1.45;
text-transform: none;
font-weight: 500;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
.event {
font-size: 1.4rem;
line-height: 1.45;
}
}
@media (min-width: 1168px) {
.event {
font-size: 1.4rem;
line-height: 1.45;
}
}
p.description,
.description p,
span.description {
font-size: 0.75rem;
line-height: 1.65;
margin-bottom: 0;
}
@media (min-width: 768px) {
p.description,
.description p,
span.description {
/*font-size: 0.9rem;*/
font-size: 0.7rem;
line-height: 1.7;
}
}
@media (min-width: 1168px) {
p.description,
.description p,
span.description {
/*font-size: 0.9rem;*/
line-height: 1.7;
font-size: 0.8rem;
}
}
.category {
color: #0750a4;
font-weight: 400;
margin-bottom: 2rem;
margin-top: 2.5rem;
font-size: 0.9rem;
}
.rang-news .category {
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.category {
margin-top: 4.5rem;
margin-bottom: 3rem;
}
}
@media (min-width: 1168px) {
.category {
margin-top: 4.5rem;
margin-bottom: 3rem;
}
}
.post-date {
margin-bottom: 2.8rem;
color: #0750a4;
font-size: 0.65rem;
letter-spacing: 0.18em;
}
.sign {
color: #0750a4;
float: left;
width: 65.5%;
font-size: 0.6rem;
font-style: italic;
margin-top: -3.5em;
text-align: left;
margin-left: -15%;
}
@media (min-width: 768px) {
.sign {
font-size: 0.7rem;
margin-top: -3.5em;
width: 110%;
margin-left: -10%;
}
}
@media (min-width: 1168px) {
.sign {
font-size: 0.7rem;
margin-left: -15%;
}
}
ul.no-padding {
list-style: none;
padding: 0;
margin-top: 10px;
}
.contacts {
font-size: 0.9rem;
margin-bottom: -2px;
}
@media (min-width: 768px) {
.contacts {
font-size: 1rem;
}
}
@media (min-width: 1168px) {
.contacts {
font-size: 1rem;
}
}
.small {
color: #0750a4;
}
.details {
margin-bottom: 5rem;
font-size: 0.8rem;
line-height: 1.7;
}
h2.title.inside-break.team {
display: block;
}
@media (min-width: 768px) {
h2.title.inside-break.team {
width: 50%;
}
}
@media (min-width: 1168px) {
h2.title.inside-break.team {
width: 30%;
}
}
input {
-webkit-appearance: none;
box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-appearance: none;
}
h1.error {
font-size: 10rem;
margin-bottom: 0rem;
letter-spacing: 0.18em;
}
p.error {
font-size: 1.3rem;
margin-top: 0;
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
p.error {
font-size: 1.95rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
p.error {
font-size: 1.95rem;
line-height: 1.4;
}
}
figure h4 {
cursor: pointer;
border-bottom: 2px solid #f2f7fb;
display: inline;
transition: border-bottom 0.2s easy;
}
figure h4:hover {
border-bottom: 2px solid #0750a4;
transition: border-bottom 0.2s easy;
}
h5 a,
h1 a,
h2 a,
h3 a,
h4 a,
h6 a {
cursor: pointer;
border-bottom: 2px solid #f2f7fb;
display: inline;
transition: border-bottom 0.2s easy;
}
h5 a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h6 a:hover {
border-bottom: 2px solid #0750a4;
transition: border-bottom 0.2s easy;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
.in-text h1 {
font-size: 1.2rem;
line-height: 1.6rem;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3rem;
margin-top: 55px;
}
@media (min-width: 768px) {
.in-text h1 {
font-size: 1.7rem;
line-height: 2.2rem;
margin-bottom: 0.3rem;
}
}
.in-text h2 {
font-size: 1.1rem;
line-height: 1.5rem;
text-transform: uppercase;
font-weight: 600;
margin-top: 4rem;
margin-bottom: 0.3rem;
margin-top: 55px;
}
@media (min-width: 768px) {
.in-text h2 {
font-size: 1.6rem;
line-height: 2.1rem;
margin-bottom: 0.3rem;
}
}
.in-text h3 {
font-size: 1rem;
line-height: 1.4rem;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3rem;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h3 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 1168px) {
.in-text h3 {
font-size: 1.5rem;
}
}
.in-text h4 {
font-size: 0.9rem;
line-height: 1.3rem;
color: #0750a4;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.3em;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h4 {
line-height: 1.9rem;
font-size: 1.4rem;
}
}
@media (min-width: 1168px) {
.in-text h4 {
font-size: 1.4rem;
}
}
.in-text h5 {
text-transform: uppercase;
margin-bottom: 0;
font-size: 0.8rem;
font-weight: 600;
color: #0750a4;
line-height: 1.2rem;
margin-top: 50px;
}
@media (min-width: 768px) {
.in-text h5 {
line-height: 1.8rem;
font-size: 1.3rem;
}
}
@media (min-width: 1168px) {
.in-text h5 {
font-size: 1.3rem;
}
}
.in-text h6 {
text-transform: uppercase;
font-size: 0.75rem;
line-height: 1.15rem;
font-weight: 600;
margin-bottom: 0;
margin-top: 50px;
color: #0750a4;
}
@media (min-width: 768px) {
.in-text h6 {
font-size: 1.2rem;
line-height: 1.6rem;
}
}
@media (min-width: 1168px) {
.in-text h6 {
font-size: 1.2rem;
}
}
.in-text ul {
margin-top: 25px;
padding-left: 70px;
list-style-type: none;
padding-left: 17px;
}
@media (min-width: 768px) {
.in-text ul {
padding-left: 60px;
}
}
.in-text ol {
margin-top: 25px;
margin-bottom: 28px;
padding-left: 17px;
}
@media (min-width: 768px) {
.in-text ol {
padding-left: 60px;
}
}
.in-text ul > li {
text-indent: -1.5em;
line-height: 1.6;
margin-bottom: 10px;
}
.in-text ol > li {
line-height: 1.6;
margin-bottom: 10px;
}
.in-text ul > li:before {
content: "\2014\a0";
margin-right: 5px;
}
.in-text blockquote p {
margin: 45px 0 45px -40px;
font-size: 1.1rem;
line-height: 1.45;
}
@media (min-width: 768px) {
.in-text blockquote p {
margin: 45px 0 45px 20px;
font-size: 1.4rem;
line-height: 1.45;
}
}
.in-text hr {
margin: 70px 0;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid #0750a4;
}
.in-text pre {
margin: 40px 0;
}
.in-text iframe {
width: 107.5%;
height: 45vw;
margin-left: -6.4%;
padding: 1.8rem 0;
}
@media (min-width: 768px) {
.in-text iframe {
width: 110%;
height: 39vw;
margin-left: -10%;
padding: 3rem 0;
}
}
@media (min-width: 1168px) {
.in-text iframe {
width: 115%;
height: 40vw;
margin-left: -15%;
}
}
.view-all h5 a {
display: inline-block;
color: #0750a4;
border-bottom: 0px solid #0750a4;
padding: 0px 0 5px 0;
position: relative;
}
.view-all h5 a::before,
.view-all h5 a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.view-all h5 a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
.view-all h5 a:hover::before,
.view-all h5 a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
mark {
background: #0750a4;
color: #f2f7fb;
}
#footer {
padding: 0px 1% 0 0;
width: 99%;
min-height: 280px;
background-color: #2e2f2d;
position: absolute;
color: #7cb6c6;
}
@media (min-width: 768px) {
#footer {
padding: 20px 1% 0 0;
}
}
#footer .footerMenu {
display: block;
width: 100%;
margin-bottom: 20px;
}
@media (min-width: 768px) {
#footer .footerMenu {
float: right;
width: 68%;
margin-bottom: 70px;
}
}
@media (min-width: 1168px) {
#footer .footerMenu {
float: left;
width: 40.5%;
margin-bottom: 0px;
}
}
#footer .footerMenu ul {
margin: 0;
padding-left: 25px;
padding-bottom: 20px;
list-style: none;
}
@media (min-width: 768px) {
#footer .footerMenu ul {
margin-top: 25px;
padding-bottom: 0px;
margin-bottom: 10px;
padding-left: 0;
}
}
@media (min-width: 1168px) {
#footer .footerMenu ul {
margin: 0;
padding: 0;
margin-top: 20px;
}
}
#footer .footerMenu ul li {
font-size: 0.9rem;
font-weight: 500;
}
#footer .footerMenu ul li a {
color: #7cb6c6;
text-decoration: none;
position: relative;
}
#footer .footerMenu ul li a::before,
#footer .footerMenu ul li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
#footer .footerMenu ul li a::before {
border-bottom: 2px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
#footer .footerMenu ul li a:hover::before,
#footer .footerMenu ul li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
#footer .footerMenu > ul {
overflow: hidden;
}
@media (min-width: 768px) {
#footer .footerMenu > ul > li {
float: left;
padding-left: 1.5em;
}
}
#footer .footerMenu .fooSub {
color: #7cb6c6;
padding-top: 3px;
margin-top: 0;
padding-left: 0;
}
#footer .footerMenu .fooSub li {
font-weight: 200;
font-size: 0.75rem;
line-height: 1.8;
}
#footer .footerMenu .fooSub li a::before {
border-bottom: 1px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
#footer .subscribe-box {
overflow: hidden;
width: 100%;
}
@media (min-width: 768px) {
#footer .subscribe-box {
float: left;
width: 30%;
}
}
@media (min-width: 1168px) {
#footer .subscribe-box {
width: 33%;
}
}
@media (min-width: 1500px) {
#footer .subscribe-box {
width: 33%;
}
}
#footer .subscribe {
overflow: hidden;
width: 85%;
text-align: left;
font-size: 0.9rem;
padding-left: 25px;
padding-top: 40px;
margin-bottom: 20px;
font-weight: 500;
}
@media (min-width: 768px) {
#footer .subscribe {
font-size: 0.75rem;
text-align: left;
margin-top: 30px;
padding-left: 60px;
margin-bottom: 20px;
padding-top: 0;
}
}
@media (min-width: 1168px) {
#footer .subscribe {
font-size: 0.9rem;
text-align: left;
padding-left: 60px;
padding-top: 0;
}
}
input.subscribe_box {
background-color: #2e2f2d;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #7cb6c6;
padding: 2px 0px 8px 0px;
margin-top: 0px;
margin-bottom: 20px;
font-size: 0.75rem;
width: 93%;
font-weight: 300;
display: block;
float: left;
caret-color: #7cb6c6;
}
@media (min-width: 768px) {
input.subscribe_box {
width: 80%;
font-size: 0.7rem;
}
}
@media (min-width: 1168px) {
input.subscribe_box {
font-size: 0.75rem;
width: 220px;
}
}
.footerMenu .full-list {
float: left;
}
button.send {
display: block;
font-size: 1.5rem;
line-height: 1rem;
color: #7cb6c6;
background-color: #2e2f2d;
border-top: 120px;
border-left: 0;
border-right: 0;
border-bottom: 0px solid #7cb6c6;
margin-top: 10px;
padding: 0px 0 5px 7px;
position: relative;
font-weight: 300;
margin-left: -15px;
}
#footer .subscribe .send:hover {
color: #7cb6c6;
}
#footer .social {
overflow: hidden;
width: 100%;
margin-bottom: 100px;
}
@media (min-width: 768px) {
#footer .social {
width: 30%;
float: left;
margin-bottom: 90px;
padding-top: 0px;
}
}
@media (min-width: 1168px) {
#footer .social {
width: 25%;
float: right;
margin-bottom: 0;
padding-top: 0px;
}
}
#footer .social .social-wrapper {
padding-left: 25px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
#footer .social .social-wrapper {
padding-left: 0;
margin-bottom: 0px;
padding-left: 60px;
}
}
@media (min-width: 1168px) {
#footer .social .social-wrapper {
padding-left: 0;
margin-top: 25px;
}
}
#footer .social ul {
font-size: 0.5rem;
list-style: none;
padding: 0;
}
#footer .social ul li {
color: #7cb6c6;
font-size: 0.7rem;
line-height: normal;
padding-top: 4px;
font-weight: 300;
}
#footer .social ul li span.small {
color: #7cb6c6;
}
#footer .social ul.soc {
overflow: hidden;
}
#footer .social ul.soc li {
float: left;
padding-right: 20px;
color: #7cb6c6;
font-size: 0.65rem;
padding-top: 7px;
font-weight: 400;
text-transform: uppercase;
}
@media (min-width: 768px) {
#footer .social ul.soc li {
padding-top: 0px;
}
}
#footer .social ul li a {
color: #7cb6c6;
text-decoration: none;
}
#footer .social ul li a {
text-decoration: underline;
}
#footer .copyright-box {
padding: 0;
position: absolute;
bottom: 0;
left: 0;
width: 90%;
color: #7cb6c6;
}
@media (min-width: 768px) {
#footer .copyright-box {
width: 99%;
}
}
#footer .copyright {
font-size: 0.65rem;
font-weight: 200;
display: inline-block;
width: 95%;
padding: 20px 0 10px 25px;
}
@media (min-width: 768px) {
#footer .copyright {
width: 40%;
padding: 20px 55px 25px 60px;
}
}
#footer .copyright span {
color: #7cb6c6;
font-weight: 500;
}
#footer .dev {
font-size: 0.65rem;
font-weight: 200;
width: 95%;
padding: 0px 0 25px 25px;
}
@media (min-width: 768px) {
#footer .dev {
display: inline-block;
width: 30%;
text-align: right;
padding: 20px 60px 25px 0;
float: right;
}
}
@media (min-width: 1168px) {
#footer .dev {
padding: 20px 0px 25px 0;
text-align: left;
width: 25%;
}
}
#footer .dev span {
color: #7cb6c6;
font-weight: 500;
}
img.icon {
height: 23px;
}
#footer .footerMenu ul.full-list.second {
margin-left: 0;
}
@media (min-width: 375px) {
#footer .footerMenu ul.full-list.second {
margin-left: 0;
}
}
@media (min-width: 414px) {
#footer .footerMenu ul.full-list.second {
margin-left: 0;
}
}
@media (min-width: 768px) {
#footer .footerMenu ul.full-list.second {
margin-left: 0;
}
}
header {
padding-top: 20px;
min-height: 100px;
margin-bottom: 110px;
color: #0750a4;
}
@media (min-width: 768px) {
header {
padding-top: 50px;
margin-bottom: 100px;
}
}
@media (min-width: 1168px) {
header {
padding-top: 50px;
margin-bottom: 100px;
}
}
.logo {
background-image: url("../img/logo_Internews_ukr_blue2.png");
background-size: cover;
width: 150px;
height: 35px;
margin: 3px 25px 0 0;
float: right;
}
@media (min-width: 768px) {
.logo {
margin: -6px 60px 0 0;
width: 200px;
height: 47px;
}
}
@media (min-width: 1168px) {
.logo {
margin: -6px 60px 0 0;
width: 214px;
height: 50px;
}
}
header ul {
display: none;
margin: 0px 0 0 60px;
padding-left: 0;
list-style: none;
}
@media (min-width: 1050px) {
header ul {
display: block;
}
}
header ul li a {
text-decoration: none;
font-weight: 400;
}
header ul.menu {
float: left;
}
header ul.menu > li {
float: left;
margin-left: 0px;
margin-right: 35px;
}
header ul.menu li:last-of-type {
margin-right: 0;
}
header ul.menu li {
font-size: 0.95rem;
}
header ul.menu li a {
position: relative;
padding-bottom: 6px;
}
header ul.menu li a::before,
header ul.menu li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
header ul.menu li a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
header ul.menu li a:hover::before,
header ul.menu li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
header ul.menu li a:hover {
color: #0750a4;
}
ul.submenu li a.lang {
font-weight: 600;
margin-right: 1rem;
}
ul.submenu li a.lang::before {
border-bottom: 2px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.submenu li a.lang:hover::before,
ul.submenu li a.lang:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
ul.submenu li a {
font-size: 0.9rem;
padding-bottom: 2px;
text-decoration: none;
position: relative;
}
ul.submenu li a::before,
ul.submenu li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
ul.submenu li a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.submenu li a:hover::before,
ul.submenu li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
ul.submenu li a:hover {
color: #0750a4;
}
ul.submenu li a.inside {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px dashed #0750a4;
padding: 0px 0px 0px 0px;
}
ul.submenu {
display: none;
margin: 0px 0 0 60px;
padding-left: 0;
list-style: none;
}
@media (min-width: 768px) {
ul.submenu {
display: block;
}
}
.search-wrapper {
display: none;
color: #0250a4;
margin-top: 50px;
margin-left: 60px;
position: relative;
border-bottom: 0px solid #0250a4;
padding-bottom: 1px;
transform-origin: 100% 50%;
width: 25px;
height: 40px;
cursor: pointer;
transition: 250ms ease;
}
.second-row{
display: flex;
width: 100%;
}
.second-row .search-wrapper{
margin-left: 46px;
margin-top: 0px;
}
.second-row .search-wrapper:before{
position: absolute;
content: "|";
left: -26px;
top: 8px;
font-size: 1.1rem;
}
#sign-in-wrapper{
color: #0250a4;
display: none;
/*margin-top: 50px;*/
margin-left: 60px;
margin-bottom: 5px;
padding-bottom: 6px;
/*background-color: red;*/
align-self: flex-end;
font-size: 0.9rem;
cursor: pointer;
position: relative;
/*font-weight: 500;
text-transform: uppercase;*/
}
#sign-in-wrapper::before,
#sign-in-wrapper::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
#sign-in-wrapper::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
#sign-in-wrapper:hover::before,
#sign-in-wrapper:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
#sign-in-wrapper:hover {
color: #0750a4;
}
#sign-in-wrapper a{
text-decoration: none;
position: relative;
z-index: 99;
}
.autorization-pop-up, .registration-pop-up{
display: none;
color: #7cb6c6;
/*height: auto;
width: 440px;*/
/*width: calc(100% - 120px);
height: 100%;*/
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
overflow: scroll;
top: 0;
left: 0;
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
background-color: #2e2f2d;
/*padding: 60px;
padding-bottom: 80px;*/
}
.forms-wrapper{
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-form-wrapper{
padding: 60px 60px 80px;
width: 440px;
/* background-color: red;*/
}
.handle-wrapper{
cursor: pointer;
width: 50px;
height: 50px;
position: fixed;
left: 45px;
top: 45px;
}
#login-form, #register-form, #restore-form, #logout-form, #reset-form, .additional-form{
display: flex;
flex-direction: column;
width: 100%;
/*width: calc(100% - 80px);
margin-left: 80px;*/
}
.login-form-wrapper form{
display: flex;
flex-direction: column;
}
span.autorization-title, span.map-autorization-title{
font-weight: 600;
text-transform: uppercase;
font-size: 2.4rem;
display: block;
margin-bottom: 30px;
margin-top: 40px;
}
label a{
color: #7cb6c6;
}
#account label a{
color: #0750A4;
}
#register-form{
display: none;
}
span.map-autorization-title{
font-size: 1.7rem;
}
@media (max-width: 768px) {
.autorization-pop-up, .registration-pop-up {
/*padding: 30px;*/
padding: 0;
width: 100%;
height: 100vh;
/* width: calc(100% - 60px);
height: calc(100vh - 60px);*/
}
span.map-autorization-title{
font-size: 6vw;
}
.login-form-wrapper{
padding: 60px 0;
}
.handle-wrapper{
left: 10px;
top: 15px;
}
#login-form, #register-form, #restore-form, #logout-form, #reset-form, .additional-form{
margin-left: 20%;
width: 70%;
}
#account #login-form, #account #register-form, #account #restore-form,
#account #logout-form,#account #reset-form, #account .additional-form{
margin-left: 0%;
width: 100%;
}
span.autorization-title, .button.autorization-title{
/* margin-top: 110px;*/
font-size: 2rem;
}
#account .col2to1{
display: flex;
flex-direction: column;
}
#account #accountDeactivateForm .col2to1{
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
.options{
margin-top: 40px;
display: flex;
gap: 20px;
}
.options.mobile{
display: none;
}
@media (max-width: 768px){
.options, .options.mobile{
display: block;
margin-top: 60px;
}
.options a{
display: block;
margin-bottom: 20px;
}
}
.options .deactivate{
flex: 1;
text-align: center;
}
#not-deactivate{
display: inline-block;
color: #0750A4;
margin-top: 20px;
cursor: pointer;
position: relative;
padding-bottom: 6px;
font-size: .9rem;
}
.additional-txt {
font-size: .9rem;
margin-top: 50px;
}
.additional-txt.second{
margin-top: -10px;
}
.additional-txt span, .additional-txt a, .lead a{
display: inline-block;
cursor: pointer;
position: relative;
/*margin-left: 10px;*/
font-weight: 500;
/*font-weight: 500;*/
}
.additional-txt a, .lead a{
color: #7cb6c6;
text-decoration: none;
}
#account .additional-txt a, #partialUserResetForm .lead a{
color: #0750A4;
}
.additional-txt a.deactivate{
margin-right: 20px;
flex: 1;
text-align: center;
}
.form-group{
display: flex;
}
.form-group label{
width: 120px;
display: block;
font-size: .9rem;
}
@media (max-width: 768px) {
.form-group{
display: block;
}
.form-group label{
margin-bottom: 4px;
}
.additional-txt.second{
margin-top: 0px;
}
}
.additional-form .form-group label, #account label,
.wider-label label{
width: 200px;
}
.checkbox{
width: 100%;
margin-bottom: 25px;
}
.checkbox label, #account .checkbox label{
width: 100%;
font-size: .75rem;
cursor: pointer;
position: relative;
margin-left: 30px;
}
.autorization-pop-up input[type='checkbox'],
.registration-pop-up input[type='checkbox'],
#account input[type='checkbox'] {
width: 20px;
height: 20px;
margin-right: 10px;
-webkit-appearance: none;
position: absolute;
margin-bottom: 0;
cursor: pointer;
left: -30px;
}
.autorization-pop-up input[type='checkbox']:before,
.registration-pop-up input[type='checkbox']:before,
#account input[type='checkbox']:before {
position: absolute;
content: "";
width: 17px;
height: 17px;
top: -2px;
border: 1px solid #7cb6c6;
background-color: #2e2f2d;
cursor: pointer;
}
#account input[type='checkbox']:before {
border: 1px solid #0750A4;
background-color: #f2f7fb;
}
.autorization-pop-up input[type='checkbox']:checked:after,
.registration-pop-up input[type='checkbox']:checked:after,
#account input[type='checkbox']:checked:after{
position: absolute;
content: "";
display: block;
width: 4px;
height: 8px;
border: solid #7cb6c6;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 1px;
left: 6px;
}
#account input[type='checkbox']:checked:after{
border: solid #0750A4;
border-width: 0 2px 2px 0;
}
.form-group{
margin-bottom: 30px;
}
.form-control, input.form-control{
background-color: #2e2f2d;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #7cb6c6;
padding: 4px 0px 8px 4px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 0.9rem;
width: 93%;
font-weight: 300;
display: block;
float: left;
color: #7cb6c6;
caret-color: #7cb6c6;
}
input.form-control:-webkit-autofill, input.form-control:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #2e2f2d inset;
-webkit-text-fill-color: #7cb6c6;
}
#partialUserResetForm input.form-control,
#account input.form-control{
background-color: #f2f7fb;
color: #0750A4;
border-color: #0750A4;
font-weight: 300;
}
#partialUserResetForm input.form-control:-webkit-autofill,
#partialUserResetForm input.form-control:-webkit-autofill:focus,
#account input.form-control:-webkit-autofill,
#account input.form-control:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #f2f7fb inset;
-webkit-text-fill-color: #0750A4;
}
#partialUserResetForm .col1,
#account .col1{
margin-bottom: 10px;
}
@media (max-width: 768px) {
.form-group{
margin-bottom: 40px;
}
}
body > p.flash-message.success{
background-color: #0750A4 !important;
}
#accountDeactivateForm .form-group{
display: block;
margin-bottom: 70px;
/*margin-top: 25px;*/
}
#accountDeactivateForm .form-group label{
width: auto;
}
#accountDeactivateForm .button{
width: 100%;
}
.autorization-pop-up input::placeholder,
.registration-pop-up input::placeholder {
color: #79bdd7;
font-size: 0.75rem;
opacity: .7;
}
.autorization-pop-up input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button,
.registration-pop-up input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button {
background-color: #79bdd7;
}
.autorization-pop-up .button,
#partialUserResetForm .button,
#account .button {
margin-top: 30px;
color: #79bdd7;
background-color: #2e2f2d;
/*border: 0;*/
border: 1px solid #79bdd7;
/*padding: 0 0 6px 0;*/
padding: 10px 35px 12px;
margin-top: 10px;
font-weight: 500;
position: relative;
align-self: flex-start;
text-decoration: none;
text-align: center;
}
#partialUserResetForm .button,
#account .button {
background-color: #f2f7fb;
color: #0750A4;
border: 1px solid #0750A4;
}
.autorization-pop-up #logout-form .button{
/* margin-top: 0;*/
/* font-weight: 600;*/
}
.autorization-pop-up .button::before,
.autorization-pop-up .button::after,
#partialUserResetForm .button::before,
#partialUserResetForm .button::after,
#account .button::before,
#account .button::after,
.additional-txt span::before,
.additional-txt span::after,
.additional-txt a::before,
.additional-txt a::after,
.lead a::before, .lead a::after,
#not-deactivate::before,
#not-deactivate::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.autorization-pop-up .button::before,
#partialUserResetForm .button::before,
#account .button::before,
.additional-txt span::before,
.additional-txt a::before,
.lead a::before,
#not-deactivate::before{
border-bottom: 2px solid #79bdd7;
transform: scale3d(0, 1, 1);
}
.additional-txt span::before,
.additional-txt a::before,
.lead a::before{
border-bottom: 1px solid #79bdd7;
}
#partialUserResetForm .button::before,
#account .additional-txt span::before,
#account .additional-txt span::after,
#account .additional-txt a::before,
#account .additional-txt a::after,
#not-deactivate::after,
#account .button::before {
border-bottom: 2px solid #0750A4;
}
.lead a::before, .lead a::after,
#partialUserResetForm .additional-txt a::before,
#partialUserResetForm .additional-txt a::after,
#not-deactivate::before{
border-bottom: 2px solid #0750A4;
}
.additional-txt span::after,
.additional-txt a::after{
border-bottom: 1px solid #79bdd7;
}
.additional-txt span:hover::after,
.additional-txt a:hover::after,
.lead a:hover::after,
#partialUserResetForm .additional-txt a:hover::after,
#account .additional-txt span:hover::after,
#account .additional-txt a:hover::after,
#not-deactivate:hover::after{
border-bottom: none;
}
.autorization-pop-up .button:hover::before,
.autorization-pop-up .button:hover::after,
#partialUserResetForm .button:hover::before,
#partialUserResetForm .button:hover::after,
#account .button:hover::before,
#account .button:hover::after,
.additional-txt span:hover::before,
.additional-txt span:hover::after,
.additional-txt a:hover::before,
.additional-txt a:hover::after,
.lead a:hover::before,
.lead a:hover::after,
#not-deactivate:hover::before,
#not-deactivate:hover::after,
#partialUserResetForm .additional-txt a:hover::before,
#partialUserResetForm .additional-txt a:hover::after{
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
@media (min-width: 1050px) {
.search-wrapper, #sign-in-wrapper {
display: block;
}
}
.search-wrapper.focused {
width: 230px;
padding-bottom: 0px;
border-bottom: 1px solid #0250a4;
}
.search-wrapper.focused input {
color: #0250a4;
transform: scale(1);
}
.search-wrapper.focused input.search-input {
width: 170px;
padding: 0 0 0 15%;
}
.search-wrapper.focused button {
width: 15px;
font-size: 1.5rem;
font-weight: 300;
margin-left: 0;
display: inline-block;
}
.search-wrapper input {
background: transparent;
border: 0;
color: white;
outline: none;
height: 40px;
width: 0;
overflow: hidden;
font-weight: 400;
transform: scale(0);
transform-origin: 0 50%;
transition: 275ms ease;
}
.search-wrapper input::placeholder {
color: #0250a4;
}
.search-wrapper button {
border: 0;
padding-left: 15px;
background: transparent;
float: left;
position: absolute;
margin-left: 170px;
display: none;
}
.search-wrapper svg {
position: absolute;
font-size: 18px;
top: 20px;
left: 2px;
transform: translateY(-50%);
}
img.search-icon {
height: 16px;
position: absolute;
font-size: 18px;
top: 20px;
left: 2px;
transform: translateY(-50%);
}
.hamburger {
width: 20px;
cursor: pointer;
}
.hamburger:hover .hamburger__line,
.hamburger.closed .hamburger__line,
.hamburger.closed .hamburger__line.blue {
stroke: #0750a4;
}
.hamburger__line {
stroke-width: 5;
stroke-linecap: square;
stroke: #0750a4;
transition: all 0.15s ease-out;
}
.hamburger__line.blue,
.hamburger.open .hamburger__line {
/* stroke: #7cb6c6 !important;*/
stroke: #7cb6c6;
}
.icon1 .animation .animation__top {
transform-origin: 20px 10px;
}
.icon1 .animation .animation__bottom {
transform-origin: 20px 30px;
}
.icon1 .animation.open .animation__middle {
opacity: 0;
}
.icon1 .animation.open .animation__top {
animation: topIcon1-open 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.open .animation__bottom {
animation: bottomIcon1-open 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.closed .animation__top {
animation: topIcon1-closed 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
.icon1 .animation.closed .animation__bottom {
animation: bottomIcon1-closed 0.5s cubic-bezier(0.1735, 0, 0.32, 1.275) 1 forwards;
}
@keyframes topIcon1-open {
0% {
transform: none;
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(10px) rotate(45deg);
}
}
@keyframes bottomIcon1-open {
0% {
transform: none;
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(-10px) rotate(-45deg);
}
}
@keyframes topIcon1-closed {
0% {
transform: translateY(10px) rotate(45deg);
}
50% {
transform: translateY(10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes bottomIcon1-closed {
0% {
transform: translateY(-10px) rotate(-45deg);
}
50% {
transform: translateY(-10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
.current {
border-bottom: 1px solid #0750a4;
}
.lang.current {
border-bottom: 2px solid #0750a4;
}
.main-about {
color: #0750a4;
position: absolute;
width: 80%;
right: 0;
top: 20vh;
padding: 0 10%;
}
@media (min-width: 768px) {
.main-about {
left: 30%;
width: 60%;
padding: 0 3%;
top: 30vh;
}
}
@media (min-width: 1168px) {
.main-about {
width: 55%;
}
}
.main-about h1, .intro-desc {
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
line-height: 1.5;
padding-right: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.main-about h1::after, .intro-desc::after {
border-right: 0.1em solid #0750a4;
animation: blink-caret 1s step-end infinite;
content: "";
padding-right: 10px;
}
@media (min-width: 500px) {
.main-about h1, .intro-desc {
font-size: 1.1rem;
line-height: 1.6;
}
}
@media (min-width: 768px) {
.main-about h1, .intro-desc {
font-size: 1.3rem;
line-height: 1.6;
}
}
@media (min-width: 1024px) {
.main-about h1, .intro-desc {
font-size: 1.3rem;
line-height: 1.6;
}
}
@media (min-width: 1168px) {
.main-about h1, .intro-desc {
font-size: 1.5rem;
line-height: 1.6;
}
}
@media (min-width: 1500px) {
.main-about h1, .intro-desc {
font-size: 1.7rem;
line-height: 1.6;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #0750a4;
}
}
.main-about img {
width: 100%;
margin-bottom: -600px;
}
.main-page {
width: 100%;
}
@media (min-width: 768px) {
.main-page {
width: 100%;
}
}
@media (min-width: 840px) {
.main-page {
width: 250px;
}
}
@media (min-width: 1168px) {
.main-page {
width: 100%;
}
}
h4 a {
text-decoration: none;
}
figcaption h3 {
margin-bottom: 7px;
margin-top: 0;
}
figcaption h3 a {
text-decoration: none;
}
.bottom {
padding-bottom: 0;
margin-top: 6rem;
margin-bottom: 1rem;
}
.project-description,
figcaption p {
margin-bottom: 1rem;
font-size: 0.7rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.project-description,
figcaption p {
font-size: 0.9rem;
line-height: 1.7;
}
}
.typing {
width: 100%;
min-height: 250px;
text-align: left;
}
.typing h1 {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.typing .cursor {
opacity: 1;
font-weight: 100;
-webkit-animation: blink 0.5s infinite;
-moz-animation: blink 0.5s infinite;
-ms-animation: blink 0.5s infinite;
-o-animation: blink 0.5s infinite;
animation: blink 0.5s infinite;
}
@-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#flexProjects {
column-width: 340px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
margin-top: -30px;
}
@media (min-width: 768px) {
#flexProjects {
column-gap: 30px;
column-width: 250px;
margin-top: -260px;
}
}
@media (min-width: 1168px) {
#flexProjects {
column-gap: 60px;
column-width: 320px;
margin-top: -280px;
}
}
.project-first {
height: 0px;
}
@media (min-width: 768px) {
.project-first {
height: 240px;
}
}
div#flexProjects figure {
cursor: pointer;
opacity: 1;
width: 100%;
margin: 0 0 15px;
padding-bottom: 10px;
display: inline-block;
column-break-inside: avoid;
transform: translateY(80px);
}
@media (min-width: 768px) {
div#flexProjects figure {
width: auto;
}
}
div#flexProjects figure img {
width: 100%;
height: auto;
border: 1px solid rgba(0, 0, 150, 0.1);
margin-bottom: 15px;
cursor: pointer;
}
div#flexProjects figure figcaption {
margin-bottom: 1.8rem;
}
@media (min-width: 768px) {
div#flexProjects figure figcaption {
margin-bottom: 3.5rem;
}
}
@media (min-width: 1168px) {
div#flexProjects figure figcaption {
margin-bottom: 3.5rem;
}
}
#flexProjects.single {
column-width: 350px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
}
@media (min-width: 768px) {
#flexProjects.single {
column-width: 280px;
column-gap: 30px;
margin-top: -270px;
}
}
#flexProjects.team {
column-width: 350px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
}
@media (min-width: 768px) {
#flexProjects.team {
margin-top: -240px;
column-width: 180px;
column-gap: 30px;
}
}
@media (min-width: 1168px) {
#flexProjects.team {
margin-top: -240px;
column-width: 215px;
column-gap: 30px;
}
}
@media (min-width: 1500px) {
#flexProjects.team {
column-width: 250px;
}
}
@media (min-width: 2000px) {
#flexProjects.team {
column-width: 350px;
max-width: 1800px;
column-gap: 35px;
}
}
#flexProjects.team h4 {
margin-bottom: 0.2rem;
}
h5.team {
margin-top: 0;
font-size: 1.4rem;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-decoration: none;
margin-bottom: 0;
}
@media (min-width: 768px) {
h5.team {
font-size: 1.95rem;
line-height: 1.4;
}
}
@media (min-width: 1168px) {
h5.team {
font-size: 1.95rem;
line-height: 1.4;
}
}
.animate-block {
opacity: 1 !important;
transition: 1.5s all;
transform: translateY(-80px);
animation: come-in 0.8s ease forwards;
}
.animate-block:nth-child(odd) {
animation-duration: 0.6s;
}
.head-content {
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.head-content {
height: 115vh;
}
}
.slider {
display: none !important;
background-size: cover;
}
@media (min-width: 768px) {
.slider {
display: block !important;
width: 28%;
position: relative;
top: -590px;
left: 0;
}
}
.slider div {
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.slider div {
width: 100%;
}
}
.marquee {
margin-top: 100px;
font-size: 12rem;
font-weight: 800;
overflow: hidden;
white-space: nowrap;
}
@media (min-width: 768px) {
.marquee {
font-size: 15rem;
margin-top: 300px;
}
}
@media (min-width: 1168px) {
.marquee {
margin-top: 300px;
}
}
.marquee div {
color: #e0eaf4;
color: #b1cae4;
width: 100%;
padding-right: 1em;
opacity: 0.3;
}
.prelo {
position: fixed;
top: 0;
right: 0vw;
width: 100vw;
bottom: 0;
z-index: 999;
transition: 1s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.55s;
overflow: hidden;
}
.prelo img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: absolute;
right: 0;
transition: 1.5s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0.15s;
z-index: 2;
}
.prelo:after {
content: "";
background: #79bdd7;
position: absolute;
top: 0;
left: 0vw;
bottom: 0;
width: 0;
transition: 1.9s cubic-bezier(0.5, 0.05, 0.3, 0.95) 0s;
z-index: 1;
}
@media (min-width: 768px) {
.prelo:after {
left: 20vw;
}
}
.prelo:before {
content: "";
background: #4d5f7a;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 0;
}
.loaded .prelo {
right: -100vw;
}
.loaded .prelo img {
width: 20vw;
}
.ready .prelo:after {
width: 100vw;
}
@media (min-width: 768px) {
.ready .prelo:after {
width: 70vw;
}
}
.prelo.hide {
display: none;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to {
transform: translateY(0);
}
}
.report-desctop {
visibility: hidden;
display: none;
}
@media (min-width: 768px) {
.report-desctop {
visibility: hidden;
display: none;
}
}
@media (min-width: 1168px) {
.report-desctop {
visibility: visible;
display: block;
}
}
.report-mobile {
visibility: visible;
display: block;
}
@media (min-width: 768px) {
.report-mobile {
visibility: visible;
display: block;
}
}
@media (min-width: 1168px) {
.report-mobile {
visibility: hidden;
display: none;
}
}
h2.title#report {
margin-top: 3rem;
margin-bottom: 4rem;
}
@media (min-width: 768px) {
h2.title#report {
margin-top: 7rem;
margin-bottom: 3rem;
}
}
ul.reports,
ul.years {
list-style: none;
padding-left: 0px;
margin-top: -60px;
padding-top: 0px;
margin-bottom: 0rem;
}
@media (min-width: 768px) {
ul.reports,
ul.years {
padding-top: 35px;
margin-top: 0px;
}
}
ul.reports li,
ul.years li {
padding-left: 0px;
float: left;
}
ul.reports li span {
font-size: 3rem;
font-weight: 100;
text-decoration: none;
}
@media (min-width: 768px) {
ul.reports li span {
font-size: 5rem;
}
}
@media (min-width: 1168px) {
ul.reports li span {
font-size: 5rem;
}
}
.reports {
width: 90%;
float: left;
}
#next-slide {
display: inline-block;
width: 5%;
float: right;
margin-top: -45px;
cursor: pointer;
}
@media (min-width: 768px) {
#next-slide {
margin-top: 25px;
}
}
#prev-slide {
display: inline-block;
width: 5%;
float: left;
margin-top: -45px;
cursor: pointer;
margin-left: -30px;
}
@media (min-width: 768px) {
#prev-slide {
margin-top: 25px;
margin-left: -60px;
}
}
ul.reports li span:hover {
color: #0750a4;
}
ul.reports ul.period,
ul.years ul.det {
list-style: none;
padding-left: 0px;
margin-top: -15px;
}
@media (min-width: 768px) {
ul.reports ul.period,
ul.years ul.det {
padding-top: 15px;
margin-top: 0;
}
}
@media (min-width: 1168px) {
ul.reports ul.period,
ul.years ul.det {
padding-top: 15px;
margin-top: 0;
}
}
ul.reports ul.period li,
ul.years ul.det li {
float: none;
margin: 0;
margin-bottom: -3px;
}
@media (min-width: 768px) {
ul.reports ul.period li,
ul.years ul.det li {
margin-bottom: -3px;
}
}
@media (min-width: 1168px) {
ul.reports ul.period li,
ul.years ul.det li {
margin-bottom: -3px;
}
}
ul.reports ul.period li a.period {
font-size: 0.8rem;
font-weight: 400;
text-decoration: none;
}
@media (min-width: 768px) {
ul.reports ul.period li a.period {
font-size: 1rem;
position: relative;
}
ul.reports ul.period li a.period::before,
ul.reports ul.period li a.period::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
ul.reports ul.period li a.period::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
ul.reports ul.period li a.period:hover::before,
ul.reports ul.period li a.period:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
}
@media (min-width: 1168px) {
ul.reports ul.period li a.period {
font-size: 1rem;
}
}
ul {
overflow: hidden;
}
.reports li a.arrow {
font-size: 2rem;
padding-top: 10px;
font-weight: 200;
}
.reports li a.arrow:hover {
color: #2e2f2d;
}
.reports li.arrow {
padding-top: 20px;
margin: 0;
}
@media (min-width: 768px) {
.reports li.arrow {
padding-top: 5px;
}
}
@media (min-width: 1168px) {
.reports li.arrow {
padding-top: 5px;
}
}
.arrow {
font-size: 2rem;
padding-top: 10px;
font-weight: 200;
}
ul.services {
padding-left: 1.6em;
list-style-type: none;
}
ul.services > li {
text-indent: -1.5em;
line-height: 1.6;
margin-bottom: 10px;
}
ul.services > li:before {
content: "\2014\a0";
margin-right: 5px;
}
h2.services {
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
h2.services {
margin-bottom: 1rem;
}
}
#next-slide,
#prev-slide {
opacity: 1;
}
#next-slide.disabled,
#prev-slide.disabled {
opacity: 0;
}
#prev-slide {
opacity: 0;
}
#prev-slide.abled {
opacity: 1;
}
.achievements {
width: 115%;
margin-left: -15%;
margin-top: 0;
margin-bottom: -40px;
}
@media (min-width: 768px) {
.achievements {
margin-top: -20px;
margin-left: -15%;
width: 115%;
max-height: 28vw;
}
}
.achievements .number {
font-size: 4.5rem;
font-weight: 800;
overflow: hidden;
white-space: nowrap;
color: #b1cae4;
opacity: 0.5;
}
@media (min-width: 375px) {
.achievements .number {
font-size: 5.5rem;
}
}
@media (min-width: 768px) {
.achievements .number {
font-size: 13rem;
}
}
@media (min-width: 1168px) {
.achievements .number {
font-size: 15rem;
}
}
.achievements .text {
font-size: 1rem;
color: #b1cae4;
opacity: 0.5;
font-weight: 400;
text-transform: uppercase;
margin-top: -10px;
letter-spacing: 0.18em;
}
@media (min-width: 768px) {
.achievements .text {
font-size: 2rem;
margin-top: -40px;
}
}
@media (min-width: 1168px) {
.achievements .text {
font-size: 2.5rem;
}
}
ul.years {
margin-top: -25px;
}
@media (min-width: 768px) {
ul.years {
margin-top: 0;
}
}
ul.years li {
font-size: 3rem;
font-weight: 100;
text-decoration: none;
width: 100%;
margin-right: -10px;
margin-top: 20px;
}
@media (min-width: 768px) {
ul.years li {
margin-top: 0;
font-size: 5rem;
width: 50%;
margin-bottom: 80px;
}
}
@media (min-width: 1300px) {
ul.years li {
width: 30%;
margin-right: -15px;
margin-bottom: 0;
}
}
ul.years li ul.det li {
font-size: 0.75rem;
line-height: 1.6;
font-weight: 400;
text-decoration: none;
width: 100%;
}
@media (min-width: 768px) {
ul.years li ul.det li {
line-height: 1.7;
width: 80%;
margin-top: 20px;
font-size: 0.9rem;
}
}
ul.years li ul.det li.long {
width: 100%;
}
@media (min-width: 768px) {
ul.years li ul.det li.long {
width: 120%;
}
}
ul.years,
ul.det {
overflow: visible;
}
@media (min-width: 768px) {
ul.years li.long-date {
margin-bottom: 0;
}
}
.term {
padding-top: 1.5rem;
font-size: 0.65rem;
letter-spacing: 0.18em;
margin-bottom: 1.8rem;
margin-top: 2rem;
}
@media (min-width: 768px) {
.term {
padding-top: 2rem;
margin-top: 1rem;
}
}
@media (min-width: 1168px) {
.term {
padding-top: 2.3rem;
}
}
h1.vacancy {
margin-bottom: -1.5rem;
}
@media (min-width: 768px) {
h1.vacancy {
margin-bottom: -1rem;
}
}
h3.vacancy {
margin-bottom: -0.2em;
margin-top: 0.7rem;
}
h3.vacancy.closed {
text-decoration: line-through;
}
h3.vacancy.closed a {
border-bottom: 2px solid #f2f7fb;
display: inline;
}
h3.vacancy.closed a:hover {
border-bottom: 2px solid #f2f7fb;
}
a.vacancy {
text-decoration: none;
}
.vacancy-status {
font-size: 0.7rem;
font-weight: 400;
margin-top: -2.7rem;
float: right;
}
@media (min-width: 768px) {
.vacancy-status {
font-size: 0.8rem;
margin-top: 1.2rem;
float: right;
min-width: 30%;
min-height: 3rem;
text-align: right;
margin-left: 30%;
}
}
@media (min-width: 1168px) {
.vacancy-status {
margin-left: 20%;
}
}
p.vacancy {
max-width: 100%;
}
@media (min-width: 768px) {
p.vacancy {
max-width: 70%;
}
}
.pagination {
padding: 120px 0 0 0;
}
.pagination ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.pagination ul li {
display: inline-block;
margin: 10px;
}
@media (min-width: 768px) {
.pagination ul li {
margin: 12px;
}
}
@media (min-width: 1168px) {
.pagination ul li {
margin: 12px;
}
}
.pagination ul li a {
font-size: 0.8rem;
text-decoration: none;
padding: 7px 10px;
color: #0750a4;
position: relative;
}
.pagination ul li a::before,
.pagination ul li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
}
.pagination ul li a::before {
border-bottom: 1px solid #0750a4;
transform: scale3d(0, 1, 1);
}
.pagination ul li a:hover::before,
.pagination ul li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.pagination ul li.left-arrow {
font-weight: 300;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
@media (min-width: 830px) {
.pagination ul li.left-arrow {
margin-right: 30px;
}
}
.pagination ul li.left-arrow a.left-arrow {
font-size: 1.3rem;
}
.pagination ul li.right-arrow {
font-weight: 300;
padding-right: 0;
margin-left: 20px;
}
@media (min-width: 830px) {
.pagination ul li.right-arrow {
margin-left: 30px;
}
}
.pagination ul li.right-arrow a.right-arrow {
font-size: 1.3rem;
}
.pagination ul li a:hover {
padding-top: 8px;
}
.pagination ul li a.is-active {
color: #0750a4;
font-weight: 600;
padding-top: 8px;
border-bottom: 2px solid #0750a4;
}
.pagination.desktop {
display: none;
}
@media (min-width: 768px) {
.pagination.desktop {
display: block;
}
}
.pagination.mobile {
padding-top: 0px;
text-align: left;
display: block;
}
@media (min-width: 768px) {
.pagination.mobile {
display: none;
}
}
.post-img,
.in-text img,
.in-text video {
width: 115%;
margin-left: -15%;
padding: 1.8rem 0;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.post-img,
.in-text img,
.in-text video {
width: 110%;
margin-left: -10%;
padding: 3rem 0;
margin-bottom: 0;
}
}
@media (min-width: 1168px) {
.post-img,
.in-text img,
.in-text video {
width: 115%;
margin-left: -15%;
padding: 3rem 0;
}
}
.in-text img.v {
width: 115%;
margin-left: -15%;
padding: 1.8rem 0;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.in-text img.v {
margin-left: -10%;
width: 60%;
float: left;
margin-right: 50px;
padding: 1.7rem 0 2rem 0;
margin-bottom: 1.2rem;
}
}
@media (min-width: 1168px) {
.in-text img.v {
margin-left: -15%;
}
}
.post-def-img {
float: left;
width: 107.5%;
margin-left: -6.4%;
padding: 1.8rem 1.8rem 4rem 0;
}
@media (min-width: 768px) {
.post-def-img {
width: 40%;
margin-left: -15%;
padding: 6rem 0rem 4rem 0;
}
}
@media (min-width: 1168px) {
.post-def-img {
width: 30%;
}
}
.overlay {
color: #79bdd7;
height: 100%;
width: 0;
position: fixed;
z-index: 50;
top: 0;
left: 0;
background-color: #343535;
overflow-x: hidden;
transition: width 0.7s;
}
.overlay-back {
height: 100%;
width: 0;
position: fixed;
z-index: 50;
top: 0;
left: 0;
background-color: #79bdd7;
overflow-x: hidden;
transition: width 0.4s;
}
.overlay-back2 {
height: 100%;
width: 0;
position: fixed;
z-index: 50;
top: 0;
left: 0;
background-color: #79bdd7;
overflow-x: hidden;
transition: width 0.4s;
transition-delay: 0.2s;
}
.overlay.open,
.overlay-back.open,
.pop-up-preloader-wrapper.open,
.overlay-back2.open {
width: 100%;
}
.overlay-content {
position: relative;
top: 5rem;
width: 100%;
visibility: hidden;
transition-delay: 0s;
margin-left: 20%;
text-align: left;
margin-top: 25px;
overflow: hidden;
}
.overlay-content.open {
visibility: visible;
opacity: 1;
transition-delay: 0.5s;
}
.overlay-content.closed {
visibility: hidden;
opacity: 0;
transition-delay: 0s;
}
.overlay a {
padding: 3px;
margin-bottom: 8px;
text-decoration: none;
font-size: 1rem;
color: #79bdd7;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #79bdd7;
}
.overlay .menuClose {
cursor: pointer;
position: absolute;
left: 25px;
font-size: 65px;
left: 20px;
}
.lang-block {
margin-top: 35px;
}
.lang-block a {
display: inline;
font-weight: 600;
}
.menuOpen {
margin-left: 25px;
font-size: 30px;
cursor: pointer;
z-index: 888;
position: absolute;
}
@media (min-width: 768px) {
.menuOpen {
margin-left: 60px;
}
}
@media (min-width: 1050px) {
.menuOpen {
display: none;
}
}
.noScroll {
/* position: fixed;*/
overflow: hidden;
}
.search-wrapper-mob {
color: #79bdd7;
margin-top: 60px;
margin-left: 1px;
position: relative;
border-bottom: 0px solid #79bdd7;
padding-bottom: 1px;
transform-origin: 100% 50%;
width: 25px;
height: 40px;
cursor: pointer;
transition: 250ms ease;
width: 200px;
padding-bottom: 0px;
border-bottom: 1px solid #79bdd7;
}
.search-wrapper-mob input {
background: transparent;
border: 0;
color: #79bdd7;
outline: none;
height: 40px;
width: 0;
overflow: hidden;
font-weight: 400;
transform: scale(0);
transform-origin: 0 50%;
transition: 275ms ease;
padding: 0 0 0 15%;
width: 85%;
transform: scale(1);
}
.search-wrapper-mob input::placeholder {
color: #79bdd7;
}
.search-wrapper-mob svg {
position: absolute;
font-size: 18px;
top: 20px;
left: 2px;
transform: translateY(-50%);
}
.description {
margin-bottom: 1rem;
font-size: 0.7rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.description {
font-size: 0.8rem;
line-height: 1.7;
}
}
@media (min-width: 1168px) {
.description {
font-size: 0.8rem;
}
}
.noPortrait .position {
margin-top: 4px;
font-size: 0.65rem;
line-height: 1.5;
}
@media (min-width: 768px) {
.noPortrait .position {
font-size: 0.8rem;
line-height: 1.7;
}
}
@media (min-width: 1168px) {
.noPortrait .position {
font-size: 0.8rem;
}
}
img.post-img.team {
padding-bottom: 0;
}
.ourteam h2 {
margin-bottom: 1rem;
}
.portrait {
width: 100%;
padding-bottom: 150%;
position: relative;
background-position: center;
background-size: cover;
}
.description-wrap {
min-height: 90px;
}
.pop-up {
display: none;
color: #7cb6c6;
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #2e2f2d;
overflow: scroll;
}
.pop-up .col2to1 {
margin-top: -60px;
}
.pop-up-content {
position: relative;
top: 0px;
left: 0;
height: 100%;
text-align: left;
overflow: scroll;
}
.pop-up-content .post-def-img {
padding: 0;
width: 100%;
margin-left: 0%;
margin-top: 33px;
margin-bottom: 50px;
}
@media (min-width: 768px) {
.pop-up-content .post-def-img {
margin-bottom: 30px;
margin-right: 40px;
margin-left: -15%;
width: 40%;
margin-top: 65px;
}
}
@media (min-width: 991px) {
.pop-up-content .post-def-img {
width: 34%;
margin-right: 50px;
margin-top: 105px;
}
}
@media (min-width: 1168px) {
.pop-up-content .post-def-img {
width: 33%;
}
}
.pop-up-content:not(.for-media-guide) h2,
.pop-up-content:not(.for-media-guide) h4,
.pop-up-content:not(.for-media-guide) p {
padding-left: 0;
}
.exp-det {
margin-bottom: 50px;
}
@media (min-width: 768px) {
.exp-det {
margin-bottom: 70px;
}
}
.pop-up-content:not(.for-media-guide) h2 {
margin-top: 55px;
margin-bottom: 1.5rem;
font-size: 1.5rem;
margin-left: -13%;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) h2 {
font-size: 2.6rem;
margin-bottom: 2rem;
}
}
@media (min-width: 991px) {
.pop-up-content:not(.for-media-guide) h2 {
margin-top: 95px;
}
}
.pop-up-content:not(.for-media-guide) h4 {
margin-top: 3rem;
margin-bottom: 0.7rem;
color: #7cb6c6;
font-size: 1.1rem;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) h4 {
font-size: 1.2rem;
}
}
@media (min-width: 1168px) {
.pop-up-content:not(.for-media-guide) h4 {
font-size: 1.3rem;
}
}
.pop-up-content:not(.for-media-guide) p {
font-size: 0.95rem;
line-height: 1.8rem;
}
.pop-up-content:not(.for-media-guide) ul {
position: relative;
list-style: none;
margin-bottom: 50px;
margin-top: 100px;
padding: 0;
}
@media (min-width: 768px) {
.pop-up-content:not(.for-media-guide) ul {
margin-bottom: 0;
margin-top: 0;
position: fixed;
left: 60px;
bottom: 60px;
}
}
.pop-up-content:not(.for-media-guide) ul li {
padding: 0;
margin: 5px 0;
line-height: 1.5rem;
}
.pop-up-content:not(.for-media-guide) ul li a {
color: #7cb6c6;
font-size: 0.8rem;
padding-bottom: 2px;
text-decoration: none;
position: relative;
}
.pop-up-content:not(.for-media-guide) ul li a::before,
.pop-up-content:not(.for-media-guide) ul li a::after {
box-sizing: inherit;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.pop-up-content:not(.for-media-guide) ul li a::before {
border-bottom: 1px solid #7cb6c6;
transform: scale3d(0, 1, 1);
}
.pop-up-content:not(.for-media-guide) ul li a:hover::before,
.pop-up-content:not(.for-media-guide) ul li a:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
.pop-up-content:not(.for-media-guide) ul li a span {
padding: 10px;
}
h5.team a.news:hover {
color: #0750a4;
padding-bottom: 100px;
}
.pop-up-preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 45%;
width: 100%;
height: 60px;
}
.pop-up-preloader .lines {
width: 200px;
height: 40px;
position: absolute;
}
.pop-up-preloader .lines .line {
width: 200px;
height: 2px;
background-color: #7cb6c6;
position: absolute;
clip: rect(0, 0, 20px, 0);
top: 0;
animation: slide 2s ease 0s infinite;
}
@keyframes slide {
0% {
clip: rect(0, 0, 20px, 0);
}
30% {
clip: rect(0, 200px, 20px, 0);
}
50% {
clip: rect(0, 200px, 20px, 0);
}
80% {
clip: rect(0, 200px, 20px, 200px);
}
100% {
clip: rect(0, 200px, 20px, 200px);
}
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.handle {
position: fixed;
left: 25px;
top: 30px;
margin-top: 9px;
background-color: #7cb6c6;
width: 20px;
height: 2px;
display: block;
transform: rotate(45deg);
float: right;
border-radius: 2px;
}
.handle:after {
content: "";
background-color: #7cb6c6;
width: 20px;
height: 2px;
display: block;
float: right;
border-radius: 2px;
z-index: -1;
transform-origin: center center;
transform: rotate(90deg);
}
@media (min-width: 768px) {
.handle {
left: 60px;
top: 60px;
}
}
.col1.teamlastcol {
margin-bottom: 0.8rem;
}
body.oc-loading,
body.oc-loading * {
cursor: wait !important;
}
.stripe-loading-indicator {
height: 5px;
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 2000;
}
.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded {
height: 5px;
display: block;
background: #0090c0;
position: absolute;
-webkit-box-shadow: inset 0 1px 1px -1px #fff, inset 0 -1px 1px -1px #fff;
box-shadow: inset 0 1px 1px -1px #fff, inset 0 -1px 1px -1px #fff;
}
.stripe-loading-indicator .stripe {
width: 100%;
-webkit-animation: oc-infinite-loader 60s linear;
animation: oc-infinite-loader 60s linear;
}
.stripe-loading-indicator .stripe-loaded {
width: 0;
opacity: 0;
filter: alpha(opacity=0);
}
.stripe-loading-indicator.loaded {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.stripe-loading-indicator.loaded .stripe-loaded {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: width 0.3s linear;
transition: width 0.3s linear;
width: 100% !important;
}
.stripe-loading-indicator.hide {
display: none;
}
body > p.flash-message {
position: fixed;
width: 500px;
left: 50%;
top: 13px;
margin-left: -250px;
color: #ffffff;
font-size: 14px;
padding: 10px 30px 10px 15px;
z-index: 10300;
word-wrap: break-word;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.15);
text-align: center;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
body > p.flash-message.fade {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.5s, width 0s;
transition: all 0.5s, width 0s;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
body > p.flash-message.fade.in {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
body > p.flash-message.success {
background: #8da85e;
}
body > p.flash-message.error {
background: #cc3300;
}
body > p.flash-message.warning {
background: #f0ad4e;
}
body > p.flash-message.info {
background: #5fb6f5;
}
body > p.flash-message button.close {
float: none;
position: absolute;
right: 10px;
top: 8px;
color: white;
font-size: 21px;
line-height: 1;
font-weight: bold;
opacity: 0.2;
filter: alpha(opacity=20);
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
outline: none;
}
body > p.flash-message button.close:hover,
body > p.flash-message button.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
@media (max-width: 768px) {
body > p.flash-message {
left: 10px;
right: 10px;
top: 10px;
margin-left: 0;
width: auto;
}
}
[data-request][data-request-validate] [data-validate-for]:not(.visible),
[data-request][data-request-validate] [data-validate-error]:not(.visible) {
display: none;
}
a.oc-loading:after,
button.oc-loading:after,
span.oc-loading:after {
content: "";
display: inline-block;
vertical-align: middle;
margin-left: 0.4em;
height: 1em;
width: 1em;
animation: oc-rotate-loader 0.8s infinite linear;
border: 0.2em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
opacity: 0.5;
filter: alpha(opacity=50);
}
@-moz-keyframes oc-rotate-loader {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes oc-rotate-loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes oc-rotate-loader {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes oc-rotate-loader {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
@keyframes oc-rotate-loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes oc-infinite-loader {
0% {
width: 0;
}
10% {
width: 42%;
}
20% {
width: 63%;
}
30% {
width: 78.75%;
}
40% {
width: 88.59375%;
}
50% {
width: 94.130859375%;
}
60% {
width: 97.07244873046875%;
}
70% {
width: 98.58920574188232%;
}
80% {
width: 99.35943391174078%;
}
90% {
width: 99.74755670045852%;
}
100% {
width: 99.9423761471391%;
}
}
@-webkit-keyframes oc-infinite-loader {
0% {
width: 0;
}
10% {
width: 42%;
}
20% {
width: 63%;
}
30% {
width: 78.75%;
}
40% {
width: 88.59375%;
}
50% {
width: 94.130859375%;
}
60% {
width: 97.07244873046875%;
}
70% {
width: 98.58920574188232%;
}
80% {
width: 99.35943391174078%;
}
90% {
width: 99.74755670045852%;
}
100% {
width: 99.9423761471391%;
}
}
@-o-keyframes oc-infinite-loader {
0% {
width: 0;
}
10% {
width: 42%;
}
20% {
width: 63%;
}
30% {
width: 78.75%;
}
40% {
width: 88.59375%;
}
50% {
width: 94.130859375%;
}
60% {
width: 97.07244873046875%;
}
70% {
width: 98.58920574188232%;
}
80% {
width: 99.35943391174078%;
}
90% {
width: 99.74755670045852%;
}
100% {
width: 99.9423761471391%;
}
}
@-ms-keyframes oc-infinite-loader {
0% {
width: 0;
}
10% {
width: 42%;
}
20% {
width: 63%;
}
30% {
width: 78.75%;
}
40% {
width: 88.59375%;
}
50% {
width: 94.130859375%;
}
60% {
width: 97.07244873046875%;
}
70% {
width: 98.58920574188232%;
}
80% {
width: 99.35943391174078%;
}
90% {
width: 99.74755670045852%;
}
100% {
width: 99.9423761471391%;
}
}
@keyframes oc-infinite-loader {
0% {
width: 0;
}
10% {
width: 42%;
}
20% {
width: 63%;
}
30% {
width: 78.75%;
}
40% {
width: 88.59375%;
}
50% {
width: 94.130859375%;
}
60% {
width: 97.07244873046875%;
}
70% {
width: 98.58920574188232%;
}
80% {
width: 99.35943391174078%;
}
90% {
width: 99.74755670045852%;
}
100% {
width: 99.9423761471391%;
}
}
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
}
.owl-carousel {
display: none;
z-index: 1;
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden;
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none;
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
display: block;
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
background: 0 0;
color: inherit;
border: none;
padding: 0 !important;
font: inherit;
}
.owl-carousel.owl-loading {
opacity: 0;
display: block;
}
.owl-carousel.owl-hidden {
opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-grab {
cursor: move;
cursor: grab;
}
.owl-carousel.owl-rtl {
direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
float: right;
}
.owl-carousel .animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
z-index: 0;
}
.owl-carousel .owl-animated-out {
z-index: 1;
}
.owl-carousel .fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.owl-height {
transition: height 0.5s ease-in-out;
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 0.4s ease;
}
.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
max-height: 0;
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d;
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 0.1s ease;
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
display: none;
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 0.4s ease;
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
}
.reports {
position: relative;
}
.reports.owl-carousel .owl-stage-outer {
overflow: visible;
}
.owl-theme .owl-dots,
.owl-theme .owl-nav {
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.owl-theme .owl-nav {
margin-top: 10px;
}
.owl-theme .owl-nav [class*="owl-"] {
color: #fff;
font-size: 14px;
margin: 5px;
padding: 4px 7px;
background: #d6d6d6;
display: inline-block;
cursor: pointer;
border-radius: 3px;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
background: none;
color: #fff;
text-decoration: none;
}
.owl-theme .owl-nav .disabled {
opacity: 0;
cursor: default;
}
.owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 10px;
}
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
}
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #d6d6d6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 0.2s ease;
border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #869791;
}
body {
background-color: #f2f7fb;
}
body.homepage {
background-color: #f2f7fb;
}
.content {
min-height: calc(100vh - 310px);
}
.stripe {
background: #0750a4 !important;
}
.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded {
background: #0750a4 !important;
}
.about-content a {
color: #7cb6c6;
font-weight: 800;
}
.dev a,
.dev a:hover {
color: #7bb5c5;
text-decoration: none;
}
.year-wrapper {
position: relative;
margin-left: -1rem;
padding-top: 1.5rem;
}
@media (min-width: 768px) {
.year-wrapper {
padding-top: 2rem;
}
}
@media (min-width: 1168px) {
.year-wrapper {
margin-left: -2rem;
padding-top: 2.3rem;
}
}
.year-wrapper .year {
font-size: 6rem;
margin-left: calc(-14% + 1rem);
position: absolute;
top: 3rem;
font-weight: 800;
overflow: hidden;
white-space: nowrap;
color: #b1cae4;
opacity: 0.5;
z-index: -3;
}
@media (min-width: 768px) {
.year-wrapper .year {
font-size: 13rem;
margin-left: calc(-10% + 1rem);
}
}
@media (min-width: 1168px) {
.year-wrapper .year {
font-size: 15rem;
margin-left: calc(-15% + 2rem);
}
}
.year-wrapper .event {
border-bottom: none;
}
.year-wrapper .event:hover {
border-bottom: 2px solid #0750a4;
}
.year-wrapper .media-author {
margin-top: 30px;
margin-bottom: 15px;
}
.year-wrapper .post-date {
margin-top: 30px;
margin-bottom: 0;
}
.media-article {
margin-top: -20px;
margin-bottom: 10px !important;
}
@media (min-width: 1168px) {
.media-article {
margin-top: -40px;
}
}
#footer .footerMenu > ul.full-list.third > li{
float: none;
}
#footer .footerMenu > ul > li{
padding-left: 0;
}
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 1em;
}
@media (min-width: 375px) {
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 2em;
}
}
@media (min-width: 414px) {
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 2.5em;
}
}
@media (min-width: 768px) {
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 3em;
}
}
@media (min-width: 1168px) {
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 3.5em;
}
}
@media (min-width: 1500px) {
#footer .footerMenu > ul.second > li, #footer .footerMenu > ul.third > li{
padding-left: 4em;
}
}
@media (max-width: 768px){
#footer .footerMenu > ul.third{
margin-top: -10px;
width: calc(100% - 50px);
}
#footer .footerMenu > ul:nth-child(1){
width: calc(45% - 25px);
}
#footer .footerMenu > ul.second{
width: 45%;
}
#footer .footerMenu > ul.second > li{
padding-left: 0;
}
#footer .footerMenu > ul.full-list.third > li{
padding-left: 0;
}
#footer .footerMenu > ul.full-list.third > li:nth-child(1) {
float: left;
width: 45%;
margin-right: 25px;
}
#footer .footerMenu > ul.full-list.third > li:nth-child(3){
margin-top: -20px;
}
}
/* RANG styling */
.head-content.rang{
position: relative;
}
.rang .logo {
/*background-image: url("../img/USAID_Horiz_Ukranian_RGB_2-Color.svg");
height: 44px;
width: 150px;*/
background-size: cover;
width: 110px;
height: 38px;
margin: 3px 25px 0 0;
float: right;
background-image: none;
}
.rang .logo img{
width: 100%;
}
@media (min-width: 768px) {
.rang .logo {
margin: -6px 60px 0 0;
/*width: 200px;
height: 59px;*/
width: 130px;
height: 49px;
}
}
@media (min-width: 1168px) {
.rang .logo {
margin: -6px 60px 0 0;
/*width: 215px;
height: 64px;*/
width: 150px;
height: 56px;
}
}
/*header ul.menu li a.bold, .overlay-content a.bold, footer .footerMenu ul li a.bold{
font-weight: 700;
}*/
.rang .menuOpen {
margin-left: 25px;
font-size: 30px;
cursor: pointer;
z-index: 888;
position: absolute;
}
@media (min-width: 768px) {
.rang .menuOpen {
margin-left: 60px;
}
}
@media (min-width: 1050px) {
.rang .menuOpen {
display: block;
}
}
@media (min-width: 1220px) {
.rang .menuOpen {
display: none;
}
}
.rang header ul {
display: none;
margin: 0px 0 0 60px;
padding-left: 0;
list-style: none;
}
@media (min-width: 1220px) {
.rang header ul {
display: block;
}
}
.rang .search-wrapper, .rang #sign-in-wrapper {
display: none;
}
@media (min-width: 1220px) {
.rang .search-wrapper, .rang #sign-in-wrapper{
display: block;
}
}
.bg{
width: 90%;
height: 118%;
position: absolute;
top: 0;
right: 0;
z-index: -1;
/*overflow: hidden;*/
}
@media (min-width: 768px){
.bg{
width: 68%;
height: 91vh;
}
}
.firstScreen{
height: 18rem;
}
.rangBackground, .rangLogo{
position: absolute;
}
.rangLogo img{
object-fit: cover;
width: 100%;
}
.rangBackground img{
height: 100%;
position: absolute;
right: -10vw;
/*transform: translateX(10vw);
background-color: #f00;*/
}
.image-wrapper img{
object-fit: cover;
width: 100%;
height: 100%;
}
.rangBackground{
top: 0;
right: 0;
height: 60vh;
width: 100%;
overflow: hidden;
/*background-color: #ff0;*/
pointer-events: none;
}
@media (min-width: 768px){
.rangBackground{
height: 95vh;
}
}
.rangLogo{
bottom: 0px;
right: 10%;
width: 150px;
}
@media (min-width: 768px){
.rangLogo{
right: auto;
left: 0;
}
}
.rang.head-content{
margin-bottom: 90px;
}
@media (min-width: 768px){
.rang.head-content{
height: 108vh;
margin-bottom: 0;
}
}
a.image-wrapper{
display: block;
width: 95%;
height: 300px;
}
.rang-news a.image-wrapper{
display: block;
width: 75vw;
height: calc(75vw / 1.77);
}
@media (min-width: 768px){
.rang-news a.image-wrapper{
display: block;
width: 29vw;
height: calc(29vw / 1.77);
}
}
section.default-neat-grid{
margin-bottom: 100px;
}
@media (min-width: 768px){
section.default-neat-grid{
margin-bottom: 200px;
}
}
section.default-neat-grid:last-of-type{
margin-bottom: 5rem;
}
.for-link{
margin-top: 0px;
}
@media (min-width: 768px){
.for-link{
margin-top: 50px;
}
}
.for-link a{
text-decoration: none;
font-size: 17px;
}
@media (min-width: 860px) {
.for-link a{
font-size: 19px;
}
}
.rang-event{
margin-top: 2.5rem;
}
@media (min-width: 768px){
.rang-event{
margin-top: 4.5rem;
}
}
.rang .materials{
column-width: 340px;
column-gap: 0px;
width: 100%;
max-width: 1100px;
padding-top: 10px;
/*margin-top: -30px;*/
}
@media (min-width: 768px){
.rang .materials{
column-gap: 30px;
column-width: 250px;
padding-top: 50px;
/*margin-top: -260px;*/
}
}
@media (min-width: 1168px){
.rang .materials{
column-gap: 60px;
column-width: 320px;
/*margin-top: -280px;*/
}
}
.rang .materials .material{
cursor: pointer;
opacity: 1;
width: 100%;
margin: 0 0 15px;
padding-bottom: 10px;
display: inline-block;
column-break-inside: avoid;
transform: translateY(30px);
/*margin-top: 60px;*/
}
@media (min-width: 768px){
.rang .materials .material{
/*width: 30%;*/
width: auto;
}
}
section .materials .material:nth-child(2), section .materials .material:nth-child(3){
margin-top: 40px;
}
@media (min-width: 768px){
section .materials .material:nth-child(2), section .materials .material:nth-child(3){
margin-top: 60px;
}
}
@media (min-width: 860px){
section .materials .material:nth-child(3){
margin-top: 0;
}
section .materials .material:nth-child(2){
margin-top: 80px;
}
}
@media (min-width: 1714px){
section .materials .material:nth-child(2){
margin-top: 0;
}
}
a.download.form-send.to_bottom{
display: inline-block;
margin-top: 2rem;
text-decoration: none;
font-size: 15px;
}
@media (min-width: 768px){
a.download.form-send.to_bottom{
font-size: 17px;
}
}
a.form-send.to_bottom{
display: inline-block;
}
#footer .footerMenu > ul.full-list.first > li{
float: none;
}
.footer-menu, .external-links{
width: 100%;
float: left;
display: block;
}
.footer-menu ul{
columns: 2;
}
@media (min-width: 768px){
.footer-menu ul{
columns: 3;
}
}
.external-links{
margin-top: 10px;
margin-bottom: 40px;
}
@media (min-width: 768px){
.external-links{
margin-top: 20px;
margin-bottom: 0;
}
}
.external-links ul li{
float: left;
margin-right: 4rem;
}
.external-links ul li a{
font-weight: 300;
}
#footer .footerMenu .footer-menu> ul > li{
padding-left: 0;
}
#footer .footerMenu .footer-menu> ul> li:nth-child(1),
#footer .footerMenu .footer-menu> ul> li:nth-child(2),
#footer .footerMenu .footer-menu> ul> li:nth-child(3)/*,
#footer .footerMenu .footer-menu> ul> li:nth-child(4) */{
padding-left: 0;
}
@media (min-width: 375px) {
#footer .footerMenu .footer-menu> ul> li{
padding-left: 1em;
}
}
@media (min-width: 414px) {
#footer .footerMenu .footer-menu> ul > li{
padding-left: 1.5em;
}
}
@media (min-width: 768px) {
#footer .footerMenu .footer-menu> ul> li{
padding-left: 0;
}
/*#footer .footerMenu .footer-menu> ul> li:nth-child(2){
padding-bottom: 20px;
}*/
#footer .footerMenu .footer-menu> ul> li:nth-child(5), #footer .footerMenu .footer-menu> ul> li:nth-child(6), #footer .footerMenu .footer-menu> ul> li:nth-child(7) {
padding-left: 1.3em;
}
}
@media (min-width: 1168px) {
/*#footer .footerMenu .footer-menu> ul> li{
padding-left: 0;
}*/
#footer .footerMenu .footer-menu> ul> li:nth-child(5), #footer .footerMenu .footer-menu> ul> li:nth-child(6), #footer .footerMenu .footer-menu> ul> li:nth-child(7) {
padding-left: 1.3em;
}
}
@media (min-width: 1360px){
#footer .footerMenu .footer-menu> ul> li:nth-child(5), #footer .footerMenu .footer-menu> ul> li:nth-child(6), #footer .footerMenu .footer-menu> ul> li:nth-child(7) {
padding-left: 2.7em;
}
}
@media (min-width: 768px){
#footer .footerMenu .external-links ul li a::before{
border-bottom: 1px solid #7cb6c6;
}
}
.contacts span.index{
display: block;
}
.goal{
margin-top: -20px;
position: relative;
}
.goal span{
margin-left: -14%;
float: left;
font-weight: 800;
}
.num{
margin-left: -14%;
}
@media (min-width: 768px){
.goal span, .num{
margin-left: -10%;
}
}
@media (min-width: 1168px){
.goal span, .num{
margin-left: -15%;
}
}
.goal p{
margin-top: 0;
float: left;
}
.goal p, .goal span{
font-size: 1.1em;
line-height: 1.6;
}
@media (min-width: 500px){
.goal p, .goal span{
font-size: 1.2em;
line-height: 1.6;
}
}
@media (min-width: 768px){
.goal p, .goal span{
font-size: 1.4em;
line-height: 1.6;
}
}
@media (min-width: 1168px){
.goal p, .goal span{
font-size: 1.5em;
line-height: 1.6;
}
}
.num{
position: absolute;
font-weight: 800;
font-size: 20rem;
color: #b1cae4;
opacity: 0.5;
top: -120px;
left: 0;
z-index: -1;
}
@media (min-width: 768px){
.num{
font-size: 25rem;
}
}
.theses h4{
margin-top: 30px;
margin-bottom: 25px;
}
.theses .in-text{
columns: 1;
}
@media (min-width: 1168px){
.theses .in-text{
columns: 2;
column-gap: 2rem;
}
}
.theses .in-text ul{
margin-top: 0;
padding-left: 30px;
}
.theses .in-text ul > li{
margin-bottom: 20px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.project-goal{
margin-bottom: 100px;
}
.project-goal:last-of-type{
margin-bottom: 0;
}
@media (min-width: 768px){
.project-goal{
margin-bottom: 150px;
}
}
.theses .in-text ul li ol{
padding-left: 25px;
}
.theses .in-text ul li ol li{
text-indent: 0;
}
.members{
columns: 1;
margin-top: 10px;
margin-bottom: 100px;
}
@media (min-width: 500px){
.members{
columns: 2;
margin-top: 20px;
}
}
@media (min-width: 768px){
.members{
margin-top: 40px;
}
.members{
margin-bottom: 150px;
}
}
@media (min-width: 1300px){
.members{
columns: 3;
}
}
.member{
display: inline-block;
/*column-width: 340px;*/
column-width: auto;
column-gap: 60px;
margin-bottom: 20px;
}
.member div.description{
margin-bottom: .5rem;
}
.member .description{
font-size: 0.7rem;
}
@media (min-width: 768px){
.member .description{
font-size: 0.8rem;
}
}
a.contact{
display: block;
margin-bottom: 2px;
}
.partner{
margin-bottom: 50px;
}
@media (min-width: 768px){
.partner{
margin-bottom: 80px;
}
}
.partner .in-text ul{
padding-left: 30px;
}
.partner .post-date{
position: relative;
}
.partner img{
height: 70px;
}
.partner-logo{
margin-bottom: 5px;
}
@media (min-width: 768px){
.partner img{
height: 90px;
}
.partner-logo{
margin-bottom: 10px;
}
}
.content.rang{
overflow: hidden;
}
.content.rang.materials{
overflow: visible;
}
@media (min-width: 768px) {
#flexProjects.docs {
margin-top: -240px;
}
}
@media (min-width: 1168px) {
#flexProjects.docs {
margin-top: -200px;
}
}
.content.rang.materials h5{
margin-top: 10px;
}
#footer .footerMenu ul li a.current{
border-bottom: 2px solid #7cb6c6;
}
#footer .footerMenu ul li .fooSub a.current{
border-bottom: 1px solid #7cb6c6;
}
.overlay-content.open a{
padding-left: 0;
padding-right: 0;
}
.overlay-content.open a.current{
border-bottom: 1px solid #7cb6c6;
display: inline-block;
}
.overlay #sign-in-wrapper-mobile{
display: inline-block;
/*margin-top: 30px;*/
position: absolute;
right: 30px;
top: 30px;
cursor: pointer;
}
.in-text img.v.main-photo{
padding-top: 0.5rem;
}
/*header ul.menu li a.bold, .overlay-content a.bold, footer .footerMenu ul li a.bold{
position: relative;
}
header ul.menu li a.bold:after, .overlay-content a.bold:after, #footer .footerMenu ul li a.bold:after{
position: absolute;
content: var(--ukraine);
text-transform: uppercase;
padding-top: 7px;
padding-left: 1px;
left: 0;
bottom: 0px;
display: block;
color: #0750a4;
letter-spacing: 1.18em;
font-size: 7px;
font-weight: 500;
}*/
header ul.menu li a.rang-for-menu, .overlay-content a.rang-for-menu, #footer .footerMenu ul li a.rang-for-menu{
letter-spacing: 0.8em;
text-transform: uppercase;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 93px;
height: 26px;
display: inline-block;
margin-top: 6px;
}
#footer .footerMenu ul li a.rang-for-menu{
height: 31px;
margin-top: 8px;
}
header ul.menu li a.rang-for-menu.ukr, .overlay-content a.rang-for-menu.ukr, #footer .footerMenu ul li a.rang-for-menu.ukr{
letter-spacing: 0.8em;
text-transform: uppercase;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 140px;
height: 27px;
display: inline-block;
margin-top: 1px;
}
#footer .footerMenu ul li a.rang-for-menu.ukr{
width: 110px;
height: 24px;
}
@media (max-width: 768px){
.overlay-content a.rang-for-menu{
margin-left: 2px;
}
}
header ul.menu li a.rang-for-menu:before, .overlay-content a.rang-for-menu:before, #footer .footerMenu ul li a.rang-for-menu:before{
margin-top: 3px;
}
/*header ul.menu li a.bold.rang-for-menu:after, .overlay-content a.bold.rang-for-menu:after, #footer .footerMenu ul li a.bold.rang-for-menu:after{
position: absolute;
content: var(--rang);
padding-top: 8px;
padding-left: 0;
left: 0;
bottom: 0px;
display: block;
color: #0750a4;
font-size: 7px;
font-weight: 500;
letter-spacing: 0;
}
.overlay-content a.bold:after, #footer .footerMenu ul li a.bold:after{
color: #7cb6c6;
letter-spacing: 1.3em;
}
.overlay-content a.bold{
margin-bottom: 6px;
padding-bottom: 8px;
}
.overlay-content a.bold.ukr{
padding-bottom: 9px;
}
.overlay-content a.bold.ukr:after{
letter-spacing: 1.45em;
}
#footer .footerMenu ul li a.bold:after{
letter-spacing: 1.05em;
}
#footer .footerMenu ul li a.bold.ukr{
padding-bottom: 9px;
}
#footer .footerMenu ul li a.bold.ukr:after{
letter-spacing: 1.18em;
padding-top: 8px;
}
header ul.menu li a.bold.ukr:after{
letter-spacing: 1.3em;
padding-top: 8px;
}*/
@media (max-width: 768px){
/*#footer .footerMenu ul li a.bold:after{
padding-top: 16px;
padding-bottom: 18px;
}
#footer .footerMenu ul li a.bold.ukr:after{
padding-top: 17px;
}
#footer .footerMenu ul li a.bold{
padding-bottom: 10px;
}
#footer .footerMenu ul li a.bold.ukr{
padding-bottom: 9px;
}*/
#footer .footerMenu.rang-footerMenu ul{
margin-bottom: -35px;
}
#footer .footerMenu.rang-footerMenu ul.full-list{
height: 150px;
/*margin-bottom: -10px;*/
}
#footer .footerMenu.rang-footerMenu ul.full-list li{
margin-bottom: 5px;
}
}
/*@media (min-width: 768px){
#footer .footerMenu ul li a.bold{
padding-bottom: 8px;
}
}*/
.overlay-content .lang-block a{
margin-right: 15px;
}
.main-about h1.rangTitle{
font-size: 1.7rem;
margin-bottom: 1rem;
/*font-size: 1.7rem;*/
line-height: 1.1;
text-transform: uppercase;
font-weight: 800;
/*margin-bottom: 2rem;
margin-top: 0.45rem;*/
}
@media (min-width: 414px) {
.main-about h1.rangTitle{
font-size: 2rem;
}
}
@media (min-width: 768px) {
.main-about h1.rangTitle{
font-size: 3rem;
margin-bottom: 1rem;
}
}
@media (min-width: 1200px){
.main-about h1.rangTitle{
font-size: 3.2rem;
}
}
@media (min-width: 1500px){
.main-about h1.rangTitle{
font-size: 3.7rem;
margin-bottom: 2rem;
}
}
@media (min-width: 1800px){
.main-about h1.rangTitle{
font-size: 4rem;
}
}
.main-about h1.rangTitle:after{
border-right: 0;
animation: none;
content: "";
padding-right: 0;
}
.intro-screen{
margin-top: -80px;
}
@media (min-width: 768px){
.intro-screen{
display: flex;
align-items: center;
}
}
.intro-screen .slider{
top: 0;
}
.intro-screen .main-about{
position: relative;
top: 0;
padding: 0 9% 0 11%;
}
@media (min-width: 768px){
.intro-screen .main-about{
left: 15px;
padding: 0 3%;
}
}
.rang-slider, .slide{
min-height: 300px;
}
.intro-desc {
font-size: 0.9rem;
line-height: 1.5;
}
@media (min-width: 500px) {
.intro-desc {
font-size: 1rem;
line-height: 1.6;
}
}
@media (min-width: 768px) {
.intro-desc {
font-size: 1.2rem;
margin-bottom: 30px;
}
}
@media (min-width: 1024px) {
.intro-desc {
font-size: 1.2rem;
}
}
@media (min-width: 1168px) {
.intro-desc {
font-size: 1.3rem;
}
}
@media (min-width: 1500px) {
.intro-desc {
font-size: 1.5rem;
}
}
figcaption .desc-cont{
margin-top: -0.5em;
}
div#flexProjects figure{
width: 99%;
}
div#flexProjects.team figure{
cursor: default;
}
div#flexProjects.team figure h4:hover{
border-bottom: 0px;
cursor: default;
}
.media-guide .map{
position: absolute;
right: 0;
top: -170px;
/*background-color: red;*/
width: 70vw;
height: 40vw;
/*@media only screen and (max-width: $tablet-plus){
padding-top: 5px;
}
@media only screen and (max-width: $tablet){
padding-top: 20px;
}
@media only screen and (max-width: $mobile){
padding-top: 0px;
height: 80vh;
margin-top: 60px;
}
@media only screen and (max-width: 320px){
height: 90vh;
}*/
}
.media-guide #map-container {
height: 35vw;
overflow: hidden;
width: 100%;
width: 70vw;
/*@media only screen and (max-width: $tablet){
hght: 52vw;
}
@media only screen and (max-width: $mobile){
height: 65vw;
height: 80vw;
}*/
}
#smaller-map{
width: 27vw;
position: absolute;
left: 30px;
top: 90px;
/*border: 2px solid red;*/
height: 30vw;
position: sticky;
float: left;
}
@media (max-width: 768px){
#smaller-map{
display: none;
}
}
.media-guide .background-text{
text-transform: uppercase;
font-weight: 800;
pointer-events: none;
width: 100%;
height: calc(100% + 150px);
overflow: hidden;
/*background-color: blue;*/
position: absolute;
top: -200px;
left: 0;
}
.media-guide .background-text span{
position: absolute;
opacity: .15;
font-size: 11vw;
z-index: 0;
}
.media-guide .background-text span:nth-child(1){
left: 140px;
/*top: -150px;*/
}
.media-guide .background-text span:nth-child(2){
left: -40px;
/*top: 40px;
top: 190px;*/
top: 10.5vw;
}
.media-guide .background-text span:nth-child(3){
right: -50px;
top: 36.5vw;
}
.media-guide .project-desc{
padding-top: 14vw;
}
.media-guide .project-desc .title{
margin-bottom: 1.5rem;
width: 45vw;
font-size: 4.5vw;
}
.media-guide .project-desc .short-description .desc,
.media-guide .project-desc .short-description span,
.media-guide .project-desc .short-description ul li{
line-height: 1.7rem;
font-size: 0.9rem;
}
.media-guide .project-desc .short-description .desc{
width: 30vw;
}
.media-guide .project-desc .short-description ul{
padding-left: 20px;
gap: 30px;
columns: 2;
margin-top: 8px;
}
.media-guide .project-desc .short-description ul li{
break-inside: avoid-column;
}
.media-guide .project-desc .short-description span{
line-height: 1.5;
display: block;
font-weight: 800;
}
@media (max-width: 950px){
.media-guide .submenu{
max-width: 120px;
}
.media-guide .submenu li{
line-height: 1.6;
margin-top: 6px;
}
.media-guide .project-desc{
padding-top: 21vw;
}
.media-guide .project-desc .title{
margin-bottom: 1rem;
font-size: 5.2vw;
z-index: 10;
position: relative;
}
.media-guide .map{
top: -175px;
width: 85vw;
height: 47vw;
}
.media-guide #map-container {
width: 85vw;
height: 40vw;
}
.media-guide .project-desc .short-description .desc{
width: auto;
}
}
@media (max-width: 768px){
.media-guide .map{
width: 100vw;
height: 55vw;
}
.media-guide #map-container {
width: 100vw;
height: 48vw;
}
.media-guide .background-text span{
font-size: 14vw;
}
.media-guide .background-text span:nth-child(1){
left: 80px;
/*top: -150px;*/
}
.media-guide .background-text span:nth-child(2){
left: -40px;
top: 35.5vw;
}
.media-guide .background-text span:nth-child(3){
top: 48.5vw;
right: -20px;
}
.media-guide .project-desc .title{
margin-bottom: 1rem;
font-size: 6.7vw;
width: auto;
}
.media-guide .map{
top: -160px;
}
.media-guide .project-desc{
padding-top: 30vw;
}
.media-guide .project-desc .short-description ul{
columns: 1;
}
}
@media (max-width: 600px){
.media-guide .map{
width: 100vw;
height: 66vw;
}
.media-guide #map-container {
width: 100vw;
height: 60vw;
}
.media-guide .project-desc{
padding-top: 35vw;
}
.media-guide .background-text span:nth-child(2){
top: 46.5vw;
left: -20px;
}
.media-guide .background-text span:nth-child(3){
top: 58.5vw;
}
}
@media (max-width: 414px){
.media-guide .project-desc{
padding-top: 31vw;
}
.media-guide .project-desc .title{
font-size: 9vw;
}
.media-guide .background-text span:nth-child(1){
left: 20px;
top: 30px;
}
.media-guide .background-text span:nth-child(2){
top: 51.5vw;
left: -20px;
}
.media-guide .background-text span:nth-child(3){
top: 64.5vw;
right: 20px;
}
}
@media (max-width: 320px){
.media-guide .project-desc{
padding-top: 23vw;
}
}
@media (min-width: 1220px){
.media-guide .background-text{
top: -150px;
}
.media-guide .background-text span:nth-child(3){
top: 31.5vw;
}
.media-guide .project-desc{
padding-top: 17vw;
}
}
@media (min-width: 1360px) {
.media-guide .project-desc .short-description .desc,
.media-guide .project-desc .short-description span,
.media-guide .project-desc .short-description ul li{
font-size: 1rem;
line-height: 1.8rem;
}
.media-guide .project-desc .short-description span{
padding-top: 5px;
}
}
@media (min-width: 1600px){
.media-guide .project-desc{
padding-top: 20vw;
}
.media-guide .project-desc .short-description ul{
columns: 3;
}
}
@media (min-width: 1800px){
.media-guide .project-desc .short-description .desc,
.media-guide .project-desc .short-description span,
.media-guide .project-desc .short-description ul li{
font-size: 1.1rem;
line-height: 1.9rem;
}
}