html, body {height: 100%;}
body {display: flex; flex-direction: column; font-family: 'Montserrat';}

/* typography */

h1, h2, h3, h4, h5 {text-transform: uppercase; font-weight: 700;}
h1 {text-transform: none; font-size: 2.5rem; font-weight: 700;}
h2 {font-size: 3rem; font-weight: 700;}

/* link, btns */

a {color: #000; transition: all .25s ease-out;}
a:hover {color: #0d6efd;}

.btn-primary {background-color: #4a77b5; border-color: #4a77b5;}
.btn-outline-primary {border-color: #fff; color: #fff;}
.btn-outline-primary.active {background-color: #fff; border-color: #fff; color: #4a77b5;}
.btn-outline-primary:hover {background-color: #fff; border-color: #fff; color: #4a77b5;}

/* helpers */
.w100 {width: 100%}

/* forms */

.form-control {background-color: #F3F6FF; border-color: #4a77b5; border-radius: 2rem;}

/* main */

header {position: relative; z-index: 1; background-color: rgb(60 87 129 / 75%);}
header .moskvin-flex {justify-content: flex-end;}

.moskvin-logo {text-align: center; background-image: url('../images/logo_bg.png'); background-repeat: no-repeat; background-size: 100%; background-position: top 0.75rem center; position: relative;}

.moskvin-logo:before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('../images/logo_blick.png'); background-repeat: no-repeat; background-size: 100%; background-position: top 1.45rem center;}
.moskvin-logo a {font-family: 'Proxima Nova'; font-weight: 700; color: #fff; text-decoration: none; font-size: 2rem; text-transform: uppercase;}

.moskvin-header-panel {}

.moskvin-flex {display: flex; align-items: center;}

.moskvin-menu-link {font-size: 1.125rem; color: #fff; text-transform: uppercase; font-weight: 500; text-decoration: none}
.moskvin-menu-link + .moskvin-menu-link {margin-left: 1rem}

.moskvin-social {margin-left: 3rem; display: flex; align-items: center}
.moskvin-social-link {color: #fff; font-size: 1.5rem; text-decoration: none; line-height: 0rem;}
.moskvin-social-link + .moskvin-social-link {margin-left: 1rem;}

.moskvin-social-svg {position: relative; top: -2px;}

.moskva-video {margin-top: -96px; min-height: 450px; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgb(0 0 0 / 25%) 100%);
    display: flex; flex-direction: column;}


.moskva-thematic-video {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -100;
}

.moskvin-first-td {position: absolute; bottom: 5rem; width: 100%; color: #fff;}

.moskvin-first-description {font-size: 1.15rem; font-weight: 400; margin-right: 5rem;}

.moskva-about {padding-top: 5rem; background-position: left bottom; background-size: 100%; background-repeat: no-repeat; background-color: #456ba1; color: #fff;}
.moskva-about h2 {margin-bottom: 2rem; color: #fff;}

.moskva-about-tb {margin-bottom: 2rem;}

.moskva-about-tabs .tab-pane {text-align: justify;}

.moskva-about-images {margin-left: 10rem; margin-right: 5rem;}
.moskva-about-images img {max-width: 100%;}

.moskva-about-image {flex: 0 0 50%; flex-wrap: wrap; padding: 0.25rem;}
.moskva-about-image img {width: 100%;}

.moskva-about-image:nth-child(1) {padding-left: 2rem; padding-top: 2rem;}
.moskva-about-image:nth-child(3) {padding-left: 4rem;}
.moskva-about-image:nth-child(4) {padding-right: 2rem;}

[class^="moskva-about-image-"] {position: relative; display: flex; justify-content: center;}

.moskva-about-image-1 > img {border-radius: 40px 40px 20px 40px;}
.moskva-about-image-2 > img {border-radius: 40px 40px 40px 20px;}
.moskva-about-image-3 > img {border-radius: 40px 20px 40px 40px;}
.moskva-about-image-4 > img {border-radius: 20px 40px 40px 40px;}

.moskva-ai-caption {position: absolute; bottom: 1rem; background: #3562ff; color: #fff; padding: 0 1rem; border-radius: 1rem;}

.moskva-services {padding: 5rem 0; position: relative; color: #456ba1;}
.moskva-services:before {
    content: ''; 
    position: absolute; 
    top: 0;
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-image: url('../images/projects_top.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}
.moskva-services:after {
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0; 
    background-image: url('../images/projects_bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
}
.moskva-services .container {position: relative; z-index: 1;}
.moskva-services h2 {margin-bottom: 2rem;}
.moskva-services h3 {text-transform: none; margin-bottom: 0.25rem;}

.moskva-services-description {margin-bottom: 4rem;}

.moskva-services-projects {border-bottom: 2px solid #456ba1; margin-bottom: 4rem;}
.moskva-services-projects [class^="col-"] {margin-bottom: 4rem;}

.moskva-services-more {margin-bottom: 4rem;}

.moskva-project {text-decoration: none; color: #456ba1;}
.moskva-project:hover .moskva-project-title {color: #0d6efd; transition: all .25s ease-out;}
.moskva-project:hover .moskva-project-image {opacity: .8; transition: all .25s ease-out;}

.moskva-project-image {margin-bottom: 1rem;}
.moskva-project-image img {max-width: 100%; border-radius: 0.5rem; border: 1px solid #456ba1; box-shadow: 3px 3px 0 #456ba1;}

.moskva-project-title {padding: 0 1rem; line-height: 1.125rem;}

.moskva-zoomers {padding: 5rem 0;}

.moskva-zoomers-description {margin-bottom: 4rem;}

.moskva-zoomers-video {padding-bottom: 5rem;}
.moskva-zoomers-video video {max-width: 100%; border-radius: 2.5rem;}

.moskva-initiatives {
    padding: 5rem 0;
    background: rgb(54,98,255);
    background: linear-gradient(90deg, rgba(54, 98, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

.moskva-initiatives-list {display: flex; flex-wrap: nowrap; align-items: center; margin-top: 4rem;}

.moskva-initiative {flex: 1.125; padding-left: 1rem; padding-right: 1rem; position: relative;}

.moskva-initiative:first-child, .moskva-initiative:last-child {flex: 1;}

.moskva-initiative-image {}
.moskva-initiative-image:before {content: ''; display: block; top: 0; bottom: 0; left: 1rem; right: 1rem; background-color: rgb(0 0 0 / 50%); position: absolute; border-radius: 3rem;}

.moskva-initiative-image img {max-width: 100%; border-radius: 3rem;}

.moskva-initiative-absolute {position: absolute; padding: 3rem; bottom: 1rem; left: 0; right: 0; color: #fff;}

.moskva-initiative-name {font-size: 1.5rem; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #fff; padding-bottom: 1rem; margin-bottom: 1rem;}

.moskva-order {padding: 5rem 0; background-position: right 10% top 5rem; background-repeat: no-repeat; background-size: 30%; background-attachment: fixed; color: #456ba1; position: relative;}
.moskva-order:before {
    content: ''; 
    position: absolute; 
    top: 0;
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-image: url('../images/projects_top.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}
.moskva-order:after {
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0; 
    background-image: url('../images/projects_bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
}
.moskva-order .container {position: relative; z-index: 1;}

.moskva-order-description {font-size: 1.5rem;}
.moskva-order-description img {margin-left: .5rem;}

.moskva-order-price {padding-top: 4rem; margin-top: 4rem; border-top: 1px solid #DEE5FC; margin-bottom: 4rem;}

.moskva-op-caption {font-size: 2.25rem;}

.moskva-op-price {font-size: 4rem; font-weight: 800; margin-bottom: 4rem;}

.moskva-op-item {display: flex; flex-wrap: nowrap;}
.moskva-op-item + .moskva-op-item {margin-top: 1rem;}

.moskva-opi-icon {color: #4a77b5; margin-right: 1rem; font-size: 1.5rem;}

.moskva-opi-project {text-align: justify;}

.moskva-order-terms {font-size: .875rem; color: #4a77b5;}
.moskva-order-terms a {color: #4a77b5;}

footer {background-color: #4a77b5; padding-top: 4rem; padding-bottom: 1.5rem;}
footer .moskvin-menu {margin-bottom: .5rem;}
footer .moskvin-social {margin-left: 0;}
footer .moskvin-logo img {max-width: 100%;}

.footer-bottom-otv {margin-bottom: 1rem;}

.footer-bottom-copyright {color: #fff;}

/* modals */

.modal-backdrop.show {opacity: .75;}

.moskva-modal .modal-body {padding: 0;}
.moskva-modal .btn-close,
.moskva-modal .btn-close-white {position: absolute; right: -2rem;}

.moskva-modal .modal-content {border-radius: 0; background-color: transparent;}

/* fly social */

.moskvin-fly-social {position: fixed; bottom: 2rem; z-index: 2000;}

@media (min-width: 576px)
{
    .moskvin-fly-social {right: calc((100% - 540px) / 2);}
}
@media (min-width: 768px) 
{
    .moskvin-fly-social {right: calc((100% - 720px) / 2);}
}
@media (min-width: 992px) 
{
    .moskvin-fly-social {right: calc((100% - 960px) / 2);}
}
@media (min-width: 1200px)
{
    .moskvin-fly-social {right: calc((100% - 1140px) / 2);}
}
@media (min-width: 1400px)
{
    .moskvin-fly-social {right: calc((100% - 1320px) / 2);}
}

.moskvin-fly-list {display: none;}
.moskvin-fly-list > a {width: 50px; height: 50px; border-radius: 50px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; margin-bottom: 1rem;}

.fly-fa-instagram {
    background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
}

.fly-fa-whatsapp {background: #00e676;}
.fly-fa-vk {background: rgb(39, 135, 245);}
.fly-fa-telegram-plane {background: #24a3e0;}
.fly-fa-odnoklassniki {background: #FF9800;}

.moskvin-fly-toggler {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 1.5rem; border-radius: 50px; background-color: #3662FF; color: #fff; text-decoration: none; animation: pulse 2s infinite;}
.moskvin-fly-toggler:hover {color: #000;}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 26, 89, 0.8);
  }
  70% {
      -webkit-box-shadow: 0 0 0 .75rem rgba(0, 26, 89, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 26, 89, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 26, 89, 0.8);
    box-shadow: 0 0 0 0 rgba(0, 26, 89, 0.8);
  }
  70% {
      -moz-box-shadow: 0 0 0 .75rem rgba(0, 26, 89, 0);
      box-shadow: 0 0 0 .75rem rgba(0, 26, 89, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0, 26, 89, 0);
      box-shadow: 0 0 0 0 rgba(0, 26, 89, 0);
  }
}