/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


/**
 * Main styles for responsive content
 */
 section, header, footer {
	padding: 0 15px;
}

@media (min-width: 575.98px){
	section, header, footer {
		padding: 0 calc(50vw - 340px);
	}
}

@media (min-width: 799.98px){
	section, header, footer {
		padding: 0 calc(50vw - 380px);
	}
}

@media (min-width: 991.98px) {
	section, header, footer {
		padding: 0 calc(50vw - 500px);
	}
}

@media (min-width: 1199.98px){
	section, header, footer {
		padding: 0 calc(50vw - 600px);
	}
}

@media (min-width: 1599.98px){
	section, header, footer {
		padding: 0 calc(50vw - 740px);
	}
}

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {
    display:none;
}


/**
 * FONTS
 */
@font-face {
	font-family: 'Open Sans';
	src: url(OpenSans.ttf);
}

@font-face {
	font-family: 'Montserrat';
	src: url(Montserrat.ttf);
}

@font-face {
	font-family: 'Oswald';
	src: url(Oswald.ttf);
}


/**
 * MAIN
 */
body{
	margin: 0;
}

main {
    overflow: hidden;
    padding-top: calc(4em + 8vmin);
}

section {
    margin: 160px 0;
}

section:first-child {
    margin: 0 0 160px 0;
}

header {
    height: calc(2.0em + 8vmin);
    position: fixed;
    background: #ffffffa3;
    -webkit-backdrop-filter: blur(17px);
            backdrop-filter: blur(17px);
    z-index: 10;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
}

img.logo {
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
}

.header-line {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* width: 100%; */
}

.header-line span.ico {
    width: 3em;
    height: 3em;
    stroke: #000;
    stroke-width: 2px;
}

a {
    outline: none;
    color: inherit;
    text-decoration: initial;
    text-transform: initial;
}

button {
    padding: 20px 85px;
    font-family: 'Oswald';
    font-size: 17px;
    border-radius: 12px;
    cursor: pointer;
}

button.blue {
   background-color: #316EEB;
   border: 2px solid #fff;
   color: #fff;
}

button.blue:hover {
    background-color: #fff;
    border: 2px solid #316EEB;
    color: #316EEB;
}

button.red {
    background-color: #FE0A00;
    border: 2px solid #FE0A00;
    color: #fff;
}

button.red:hover {
    background-color: #fff;
    border: 2px solid #FE0A00;
    color: #FE0A00;
}

.button-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


h1 {
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: calc(2.0em + 1vmin);
    line-height: 3rem;
    text-transform: uppercase;
}

h2 {
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: calc(2em + 1vmin);
    text-transform: uppercase;
}

h3 {
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: calc(1em + 1vmin);
    line-height: calc(1.5em + 1vmin);
    margin: 0;
    text-align: center;
}

.section-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 20px;
}

.header-description {
    margin-left: auto;
    text-transform: uppercase;
    font-family: 'Oswald';
    font-size: 17px;
    letter-spacing: 3px;
    color: #000;
    padding-right: 30px;
}

.header-description.white{
    color: #fff;
}

.text-block {
    padding: 2em 3em;
    border-radius: 20px;
    background: rgba(242, 242, 242, 0.78);
    -webkit-backdrop-filter: blur(17.5px);
            backdrop-filter: blur(17.5px);
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: calc(0.5em + 1vmin);
    line-height: calc(1.2em + 1vmin);
    color: #4B4B4B;
}

.figure-background{
	position: absolute;
	z-index: -1;
	background-size: contain;
	background-repeat: no-repeat;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}


.figure-background svg {
    overflow: visible;
    width: 100%;
    height: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.hidden {
    display: none !important;
}

.ico {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 5em;
    height: 5em;
    margin-right: 1.5em;
}

.ico svg {
    -webkit-transition: fill 0.3s;
    -o-transition: fill 0.3s;
    transition: fill 0.3s;
    width: 100%;
    height: 100%;
    fill: #000;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

div#menu-modal {
    position: fixed;
    right: 5%;
    top: calc(4.0em + 8vmin);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 40px;
    background: rgba(242, 242, 242, 0.78);
    -webkit-backdrop-filter: blur(17.5px);
            backdrop-filter: blur(17.5px);
    border-radius: 20px;
    z-index: 5;
}

ul.menu-list {
    list-style: none;
    font-family: 'Oswald';
    text-transform: uppercase;
    padding: 0;
}

.text-header.blue{
    color: #316EEB;
}

.text-header.red{
    color: #FE0A00;
}

li.menu-item {margin-bottom: 30px;letter-spacing: 3px;font-size: 27px;}

li.menu-item a:hover {
    color: #FE0A00;
}

.modal-hide{
    right: -500px !important;
}

.text-block ul {
    padding: 10px;
}

.text-block li::marker {
    color: #fe0900;
}

@media (max-width: 821px) {
    .text-block{
        padding: 1em 1.5em;
    }
    
    h1 {
        font-size: calc(1.2em + 1vmin);
        line-height: calc(1.2em + 1vmin);
    }
    
    section {
        margin: 80px 0;
    }

    .header-description {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        text-align: end;
    }
    .ico {
        width: 3em;
        height: 3em;
    }

    .header-line span.ico {
        width: 2em;
        height: 2em;
    }
}

/**
 * HELLO
 */

.hello-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 80px;
}

.hello-photo img {
	-o-object-fit: contain;
	   object-fit: contain;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.hello-photo {
	/* flex: 0 0 50%; */
}

.hello-text {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 50%;
	        flex: 0 0 50%;
}

.hello-text .hello-description {
	font-family: 'Montserrat';
	font-size: calc(1em + 1vmin);
	line-height: 1.75rem;
}

@media (max-width: 821px) {
    .hello-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 20px;
    }
    
    .hello-text span {
        font-size: 1em;
        line-height: 1em;
    }
}


/**
 * ABOUT
 */
.about-wrapper {
	position: relative;
	font-size: calc(1em + 1vmin);
}


.about-grid .photo-block img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
	border-radius: 50px;
}

.about-grid {
	display: -ms-grid;
	display: grid;
	    grid-template-areas:
		'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 b b b'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a4 a4 a4 a4 a3 a3 a3'
		'a4 a4 a4 a4 a5 a5 a5'
		'a4 a4 a4 a4 a5 a5 a5'
		'a4 a4 a4 a4 a5 a5 a5'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0';
}

.about-grid .text-block:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-area: a1;
    margin-bottom: 3em;
    margin-right: 3em;
}

.about-grid .photo-block:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    top: 0;
    right: 0;
    grid-area: b;
    padding: 0 3em 3em 0;
}

.about-grid .text-block:nth-child(3) {
    -ms-grid-row: 5;
    -ms-grid-row-span: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-area: a2;
    margin-right: 3em;
    margin-bottom: 3em;
}

.about-grid .text-block:nth-child(4) {
    -ms-grid-row: 5;
    -ms-grid-row-span: 6;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: a3;
    margin-bottom: 3em;
}

.about-grid .photo-block:nth-child(5) {
    -ms-grid-row: 10;
    -ms-grid-row-span: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-area: a4;
    margin-bottom: 3em;
    padding-right: 6em;
}

.about-grid .photo-block:nth-child(6) {
    -ms-grid-row: 11;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: a5;
    margin-bottom: 3em;
    padding-right: 5em;
}

.about-grid .text-block:nth-child(7) {
    -ms-grid-row: 14;
    -ms-grid-row-span: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 7;
    grid-area: a0;
}

.about-wrapper #blue-top-rigth {
    top: -3em;
    right: -3em;
    width: calc(5.5em + 70vmin);
    height: calc(2.5em + 70vmin);
    background-image: url(./blue-top-rigth.svg);
}

.about-wrapper #red-top-rigth {
    right: -3em;
    top: -3em;
    width: calc(8em + 70vmin);
    height: calc(2.5em + 70vmin);
    background-image: url(./red-top-rigth.svg);
}

.about-wrapper #blue-middle-left {
    top: 34em;
    left: -3em;
    width: calc(5.5em + 70vmin);
    height: calc(2.5em + 70vmin);
    background-image: url(./blue-top-rigth.svg);
}

.about-wrapper #red-middle-rigth {
    top: 44em;
    right: -3em;
    width: calc(-3.5em + 70vmin);
    height: calc(-5em + 70vmin);
    background-image: url(./red-middle-rigth.svg);
}

.about-wrapper #red-bottom-left {
    top: 1810px;
    left: -50px;
    width: calc(-10em + 70vmin);
    height: calc(-11em + 70vmin);
    background-image: url(./red-bottom-rigth.svg);
}

.about-wrapper #blue-bottom-rigth {
    top: 68em;
    right: -3em;
    width: calc(9em + 70vmin);
    height: calc(1em + 70vmin);
    background-image: url(./blue-bottom-rigth.svg);
}

.about-wrapper #blue-circle {
    top: -160px;
    right: 500px;
    width: calc(-22.5em + 70vmin);
    height: calc(-22.5em + 70vmin);
    background-image: url(./blue-circle.svg);
}

@media (max-width: 1201px){
    .about-grid {
            grid-template-areas: 
        'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 b b b'
		'a1 a1 a1 a1 0 0 0'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a2 a2 a2 a2 a3 a3 a3'
		'a4 a4 a4 a4 a3 a3 a3'
		'a4 a4 a4 a4 a5 a5 a5'
		'a4 a4 a4 a4 a5 a5 a5'
		'a4 a4 a4 a4 a5 a5 a5'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0'
		'a0 a0 a0 a0 a0 a0 a0';
    }

    .about-grid .photo-block:nth-child(2) {
        padding: 0;
    }
    .about-grid .text-block:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
    }
    .about-grid .photo-block:nth-child(2) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 3;
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
    }
    .about-grid .text-block:nth-child(3) {
		-ms-grid-row: 5;
		-ms-grid-row-span: 5;
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
    }
    .about-grid .text-block:nth-child(4) {
		-ms-grid-row: 5;
		-ms-grid-row-span: 6;
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
    }
    .about-grid .photo-block:nth-child(5) {
		-ms-grid-row: 10;
		-ms-grid-row-span: 4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
    }
    .about-grid .photo-block:nth-child(6) {
		-ms-grid-row: 11;
		-ms-grid-row-span: 3;
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
    }
    .about-grid .text-block:nth-child(7) {
		-ms-grid-row: 14;
		-ms-grid-row-span: 5;
		-ms-grid-column: 1;
		-ms-grid-column-span: 7;
    }

}

@media (max-width: 821px) {
    .about-grid {
            grid-template-areas: 
        'b'
        'a1'
        'a2'
        'a4'
        'a3'
        'a5'
        'a0';
    }

    .about-grid .photo-block:nth-child(2) {
        padding: 0 0 1.5em;
    }
    
    .about-grid .text-block:nth-child(1) {
        margin-right: 0;
        margin-bottom: 1.5em;
    }
    
    .about-grid .text-block:nth-child(3) {
        margin-right: 0;
        margin-bottom: 1.5em;
    }
    
    .about-grid .photo-block:nth-child(5) {
        margin-bottom: 1.5em;
        padding-right: 2em;
    }
    
    .about-grid .text-block:nth-child(4) {
        margin-bottom: 1.5em;
    }
    
    .about-grid .photo-block:nth-child(6) {
        margin-bottom: 1.5em;
        padding-right: 0;
        padding-left: 2em;
    }

    .about-wrapper #blue-top-rigth {
        top: -20px;
        right: -2em;
    }
    
    .about-wrapper #red-top-rigth {
        right: -2em;
        top: -20px;
    }
    
    .about-wrapper #red-middle-rigth {
        top: 128em;
        right: -3em;
    }
    .about-grid .text-block:nth-child(1) {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .photo-block:nth-child(2) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .text-block:nth-child(3) {
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .text-block:nth-child(4) {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .photo-block:nth-child(5) {
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .photo-block:nth-child(6) {
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .about-grid .text-block:nth-child(7) {
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
}




/**
 * PROJECTS
 */

.project-wrapper{
	position: relative;
    font-size: calc(1em + 1vmin);
}

.project-grid {
	display: -ms-grid;
	display: grid;
	    grid-template-areas: 
		'p1 p1 p1 p2 p2 p2 p2'
		'p1 p1 p1 p2 p2 p2 p2'
		'p1 p1 p1 p3 p3 p3 p3'
		'p1 p1 p1 p3 p3 p3 p3'
		'p4 p4 p4 p4 p5 p5 p5'
		'p4 p4 p4 p4 p5 p5 p5';
}

.project-grid .text-block:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: p1;
    margin-top: 2em;
}

.project-grid .text-block:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    grid-area: p2;
    margin-left: 3em;
}

.project-grid .text-block:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    grid-area: p3;
    margin-top: 4em;
    margin-left: 3.5em;
    margin-bottom: 3em;
}

.project-grid .text-block:nth-child(4) {
    -ms-grid-row: 5;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-area: p4;
    margin-top: 3em;
}

.project-grid .text-block:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-row-span: 2;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    grid-area: p5;
    margin-left: 3em;
    margin-bottom: 6em;
}

.project-wrapper #red-top{
    background-image: url(./pr-top.svg);
    width: calc(-3em + 70vmin);
    height: calc(-7.5em + 70vmin);
    top: -3em;
    right: -4em;
}

.project-wrapper #blue-middle{
    background-image: url(./pr-middle.svg);
    width: calc(-2.5em + 70vmin);
    height: calc(-4.5em + 70vmin);
    top: 10em;
    left: -4em;
}

.project-wrapper #red-bottom{
    background-image: url(./pr-bottom.svg);
    width: calc(-12em + 70vmin);
    height: calc(-10em + 70vmin);
    top: 33em;
    right: 20em;
}

@media (max-width: 821px) {
    .project-grid {
            grid-template-areas: 
        'p1'
        'p2'
        'p3'
        'p5'
        'p4';
    }

    .project-grid .text-block:nth-child(1) {
        margin-top: 0;
        margin-bottom: 1.5em;
    }
    
    .project-grid .text-block:nth-child(2) {
        margin-left: 0;
        margin-bottom: 1.5em;
    }
    
    .project-grid .text-block:nth-child(3) {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 1.5em;
    }
    
    .project-grid .text-block:nth-child(5) {
        margin-left: 0;
        margin-bottom: 1.5em;
    }
    
    .project-grid .text-block:nth-child(4) {
        margin-top: 0;
    }
    
    .project-wrapper #red-top {
        top: 3em;
    }
    
    .project-wrapper #blue-middle {
        top: 20em;
    }
    
    .project-wrapper #red-bottom {
        right: 2em;
        top: 39em;
    }
    .project-grid .text-block:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .project-grid .text-block:nth-child(2) {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .project-grid .text-block:nth-child(3) {
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .project-grid .text-block:nth-child(4) {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
    .project-grid .text-block:nth-child(5) {
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
    }
}


/**
 * PHOTO
 */

.photo-wrapper{
    position: relative;
    font-size: calc(1em + 1vmin);
}

.photo-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2em 1fr 2em 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em;
    padding: 2em;
}

.photo-grid img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.photo-wrapper #blue-bottom {
    top: 5em;
    left: -11em;
    width: calc(9em + 70vmin);
    height: calc(1em + 70vmin);
    background-image: url(./blue-bottom-rigth.svg);
    -webkit-transform: rotate(248deg) scale(.5);
        -ms-transform: rotate(248deg) scale(.5);
            transform: rotate(248deg) scale(.5);
}

.photo-wrapper #blue-top {
    top: -5em;
    right: -3em;
    width: calc(15.5em + 40vmin);
    height: calc(13.5em + 40vmin);
    background-image: url(./blue-top-rigth.svg);
    -webkit-transform: rotate(272deg);
        -ms-transform: rotate(272deg);
            transform: rotate(272deg);
}

.fancybox-image{
    border-radius: 20px;
}


@media (max-width: 821px) {
    .photo-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 2em;
        padding: 20px;
    }
    
    .photo-wrapper #blue-top {
        top: -4em;
        right: -3em;
    }

    .photo-wrapper #blue-bottom {
        top: 32em;
        left: -5em;
    }
}

/**
 * VIDEO
 */
.video-wrapper{
    position: relative;
    font-size: calc(1em + 1vmin);
    padding: 1.5em;
    height: 650px;
}

.video-wrapper img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 50%;
    border-radius: 25px;
    margin-bottom: 30px;
}

.video-block {
    border-radius: 20px;
    background: rgba(242, 242, 242, 0.78);
    -webkit-backdrop-filter: blur(17.5px);
            backdrop-filter: blur(17.5px);
    color: #4B4B4B;
    padding: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: auto !important;
}

.video-headind {
    font-family: 'Oswald';
    font-size: calc(0.5em + 1vmin);
    letter-spacing: 3px;
    line-height: calc(1.2em + 1vmin);
    margin-bottom: 10px;
    text-align: start;
    color: #000;
    text-transform: uppercase;
}

.video-description{
    font-size: calc(0.5em + 1vmin);
    line-height: calc(1.2em + 1vmin);
    font-family: 'Open Sans';
    margin-top: auto;
}

.fancybox-content {
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background: rgba(242, 242, 242, 0.78);
    -webkit-backdrop-filter: blur(17.5px);
            backdrop-filter: blur(17.5px);
}

.frame-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 821px) {
    .video-block{
        padding: 15px;
    }
    .video-wrapper{
        padding: 10px;
        height: 650px;
    }
}

@media (max-width: 480px) {
    .video-wrapper{
        padding: 10px;
        height: 410px;
    }
}


/**
 * CONTACTS
 */
.contact-wrapper{
    position: relative;
    font-size: calc(1em + 1vmin);
}

.contact-block img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    margin-bottom: 30px;
}

.contact-block {
    border-radius: 20px;
    background: rgba(242, 242, 242, 0.78);
    -webkit-backdrop-filter: blur(17.5px);
            backdrop-filter: blur(17.5px);
    color: #4B4B4B;
    padding: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.contacts-grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 55px 1fr 55px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 55px;
}

.contact-name{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-size: calc(1em + 1vmin);
    line-height: 45px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 25px;
}

.contact-description {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: calc(0.7em + 1vmin);
    text-align: left;
    width: 100%;
    margin-bottom: 35px;
}

.contact-phone,
.contact-email {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: calc(0.7em + 1vmin);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.contact-block .ico {
    width: 2em;
    height: 2em;
    margin-right: 15px;
}

@media (max-width: 1201px){
    .contact-block img {
        width: 156px;
        height: 156px;
    }

    .contacts-grid{
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: horizontal;
       -webkit-box-direction: normal;
           -ms-flex-direction: row;
               flex-direction: row;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
       gap: 30px;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
    }

    .contact-block {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 45%;
                flex: 0 0 45%;
    }
}

@media (max-width: 821px) {
    .contacts-grid{
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 55px;
    }
}