/* ==================================== 
Including some fonts from 'assets/font' 
==================================== */
/* Titles Font */
@font-face {
    font-family: 'Badaboom';
    src: url('assets/font/Badaboom.TTF') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Paragraphs Font */
@font-face {
    font-family: 'VTC_Letterer_Pro';
    src: url('assets/font/VTC_Letterer_Pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==================================== 
=========== General Styling ===========
==================================== */
body {
    margin: 0;
    padding: 0;
    background-color: #412f7d;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Badaboom;
}

p {
    font-family: VTC_Letterer;
}

.page {
    width: 100%;
    height: 100vh;
    z-index: 10;
    background-color: #fff;
    font-family: Montserrat;
}

.section-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 4rem;
    grid-area: Title;
    text-shadow: -6px 8px 0px #0c0c0c , 0px -3px #000000;
    color: #ffffff;
}

/* ==================================== 
=========== Navbar Styling ============
==================================== */
.navbar-logo {
    grid-area: Header-Logo;
    height: 25px;
    width: 130px;
    position: fixed;
    margin-top: 15px;
    margin-left: 15px;
}

.nav-links {            /* Container for the nav-link */
    grid-area: Nav;
    padding: 0.5rem;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #ffffff;
    font-weight: 300;
    transition: all ease-in-out 150ms;
}

.nav-link:hover {
    color: #ffffff;
    border: 1px solid #fff;
    border-style: inset;
}

/* ==================================== 
=========== Header Styling ============
==================================== */
#header {
    background-color: transparent;
}

/* Parallax */
.keyart,
.keyart_layer {
    height: 100vh;
}

#parallax {
    display: block;
}

.keyart {
    position: relative;
    z-index: -1;
}

.keyart_layer {
    background-position: center center;
    background-size: cover;
    width: 100%;
}

.keyart_layer.parallax {
    position: fixed;
}

#keyart-0 {
    background-image: url("gallery/Parallax/parallax0.jpg");
}

#keyart-1 {
    background-image: url("gallery/Parallax/parallax1.png");
}

#keyart-2 {
    background-image: url("gallery/Parallax/parallax2.png");
}

#keyart-3 {
    background-image: url("gallery/Parallax/parallax3.png");
}

#keyart-4 {
    background-image: url("gallery/Parallax/parallax4.png");
}

#keyart-5 {
    background-image: url("gallery/Parallax/parallax5.png");
}

#keyart-6 {
    background-color: rgba(71, 27, 27, 0.45);
    background-image: url('gallery/noisy-texture-200x200-o3-d19-c-292929-t0.png');
    background-repeat: repeat;
    background-size: auto;
    opacity: 0;
}

/*#keyart-scrim {
    background-color: #ffaf00;
    opacity: 0;
}*/
/* Header Heading */
.header-logo {
    width: 40%;
    height: auto;
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: 50;
}

.btn-header {
    position: absolute;
    top: 55%;
    left: 35%;
    width: 30%;
    text-transform: uppercase;
    color: #ffffff;
    border: 1px solid #fff;
}

.btn-header:hover {
    background-color: #fff;
    color: #321b33;
}

/* ==================================== 
=========== About Styling =============
==================================== */
#about {
    overflow: hidden;
    display: grid;
    grid-template-columns: 5px 1fr 1fr 5px;
    grid-template-rows: 10px auto auto 10px;
    grid-template-areas: '. . . .' '. Panel1 Panel1 .' '. Panel2 Panel3 .' '. . . .';
    grid-gap: 20px;
    background-image: url('gallery/noisy-texture-200x200-o23-d22-c-ffffff-t0.png');
}

.about-card h4 {
    text-align: center;
    font-size: 2rem;
    margin-top: 1rem;
    text-shadow: -6px 8px 0px #0c0c0c , 0px -3px #000000;
    color: #ffffff;
    z-index: 1;
}

.about-card p {
    font-size: 1.4rem;
    font-family: VTC_Letterer_Pro;
    grid-area: Text;
    height: auto;
    text-align: center;
    margin: 1em;
    color: #ffffff;
    z-index: 1;
}

#about-title {
    grid-area: Title;
    z-index: 10;
    margin: 1rem;
    margin-bottom: 0;
}

.about-card {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.about-card::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.44);
}

.about-card:hover {
    background-position: left;
}

#about-card1 {
    grid-area: Panel1;
    background-image: url('gallery/panel1.png');
    background-position: center center;
    background-size: cover;
}

#about-card2 {
    grid-area: Panel2;
    background-position: center center;
    background-size: cover;
    background-image: url('gallery/panel2.png');
}

#about-card3 {
    height: auto;
    grid-area: Panel3;
    background-position: center center;
    background-size: cover;
    background-image: url('gallery/panel3.png');
}

/* ==================================== 
============ Video Styling ============
==================================== */
.about-video {
    margin-bottom: -10px;
    position: relative;
}

.about-video::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('gallery/noisy-texture-200x200-o23-d22-c-ffffff-t0.png');
    opacity: 0.2;
    margin-bottom: 0;
}

.about-video video {
    width: 100%;
    height: auto;
}

/* ==================================== 
=========== Cohorts Styling ===========
==================================== */
.cohorts {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 1fr 1fr 1fr 20%;
    grid-template-rows: 10% 1fr 1fr 10%;
    z-index: 50;
    position: relative;
    padding-bottom: 10px;
    background-image: url('gallery/RocketOverlay.jpg');
    grid-template-areas: '. . . . .' '. Logo1 Logo2 Logo3 .' '. Logo4 Logo6 Logo7 .' '. . . . .';
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-top: 35px solid #ffffff;
    border-bottom: 35px solid #ffffff;
    border-image-repeat: url('gallery/noisy-texture-200x200-o23-d22-c-ffffff-t0.png');
}

#cohort-1 {
    grid-area: Logo1;
}

#cohort-2 {
    grid-area: Logo2;
}

#cohort-3 {
    grid-area: Logo3;
}

#cohort-4 {
    grid-area: Logo4;
}

#cohort-5 {
    grid-area: Logo5;
}

#cohort-6 {
    grid-area: Logo6;
}

#cohort-7 {
    grid-area: Logo7;
}

.cohorts-logo {
    display: flex;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: auto;
    transition: all ease-in-out 150ms;
    z-index: 60;
    padding: 40px;
}

.cohorts-logo:hover {
    transform: scale(1.1);
}

/* ==================================== 
=========== Team Styling ==============
==================================== */
section#team {
    display: grid;
    grid-template-columns: [Rocket-start] 5% auto 30px auto 30px auto 30px auto 5% [Rocket-end];
    grid-template-rows: [Rocket-start] 70px auto 5% auto [Rocket-end];
    grid-template-areas: '. . . . . . . . .' '. . Title Title Title Title Title . .' '. . . . . . . . .' '. Member1 . Member2 . Member3 . Member4 .';
    background-color: rgba(23, 16, 44, 0.76);
    border-bottom: 35px solid #ffffff;
}

#team::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('gallery/ComicOverlay4.jpg');
    background-size: cover;
    background-position: center center;
}

#team-title {
    grid-area: Title;
    z-index: 20;
}

.team-member {
    width: 200px;
    height: 320px;
    background-color: transparent;
    display: flex;
    justify-self: center;
    z-index: 1;
    background-position: center center;
    background-size: cover;
}

.team-member::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
}

div#member-1 {
    grid-area: Member1;
    background-image: url('gallery/Team/card3a.jpg');
    transition: all ease-in-out 150ms;
}

div#member-1:hover {
    background-image: url('gallery/Team/card3b.jpg');
    transform: scale(1.1);
    box-shadow: 0 0 24px 1px #8b0e15;
}

div#member-2 {
    grid-area: Member2;
    background-image: url('gallery/Team/card4a.jpg');
    transition: all ease-in-out 150ms;
}

div#member-2:hover {
    background-image: url('gallery/Team/card4b.jpg');
    transform: scale(1.1);
    box-shadow: 0 0 24px 1px #8b0e13;
}

div#member-3 {
    grid-area: Member3;
    background-image: url('gallery/Team/card1a.jpg');
    transition: all ease-in-out 150ms;
}

div#member-3:hover {
    background-image: url('gallery/Team/card1b.jpg');
    transform: scale(1.1);
    box-shadow: 0 0 24px 1px #04435e;
}

div#member-4 {
    grid-area: Member4;
    background-image: url('gallery/Team/card2a.jpg');
    transition: all ease-in-out 150ms;
}

div#member-4:hover {
    background-image: url('gallery/Team/card2b.jpg');
    transform: scale(1.1);
    box-shadow: 0 0 24px 1px #6b3992;
}

/* ==================================== 
=========== Services Styling ==========
==================================== */
#services {
    background: #0f2027; /* fallback for old browsers */
    background: linear-gradient(to right, 
        rgba(65, 47, 125, 0.4), 
        rgba(83, 61, 157, 0.4)),
        url('gallery/services-background.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    display: grid;
    grid-template-columns: 5% 1fr 1fr 1fr 1fr 5%;
    grid-template-rows: 70px auto 5% 1fr 70px;
    grid-template-areas: '. . . . . .' '. Title Title Title Title .' '. . . . . .' '. Card1 Card2 Card3 Card4 .' '. . . . . .';
    grid-column-gap: 20px;
}

#services-title {
    grid-area: Title;
}

#card-1 {
    grid-area: Card1;
    background: linear-gradient(
      rgba(15, 32, 39, 0.50), 
      rgba(32, 58, 67, 0.50),
      rgba(247, 121, 125, 0.50)
    ), url('gallery/designstudio.jpg');
    background-position: center center;
    background-size: cover;
}

#card-2 {
    grid-area: Card2;
    background: linear-gradient(
      rgba(15, 32, 39, 0.50), 
      rgba(32, 58, 67, 0.50),
      rgba(247, 121, 125, 0.50)
    ), url('gallery/facilities.jpg');
    background-position: center center;
    background-size: cover;
    color: rgba(195, 20, 50, 0.55);
    height: auto;
}

#card-3 {
    grid-area: Card3;
    background: linear-gradient(
      rgba(15, 32, 39, 0.50), 
      rgba(32, 58, 67, 0.50),
      rgba(247, 121, 125, 0.50)
    ), url('gallery/videostudio.jpg');
    background-position: center center;
    background-size: cover;
}

#card-4 {
    grid-area: Card4;
    background: linear-gradient(
      rgba(15, 32, 39, 0.50), 
      rgba(32, 58, 67, 0.50),
      rgba(247, 121, 125, 0.50)
    ), url('gallery/workshop.jpg');
    background-position: center center;
    background-size: cover;
}

#card-1:hover {
    background-position: left center;
    filter: grayscale(90%);
}

#card-2:hover {
    background-position: left center;
    filter: grayscale(90%);
}

#card-3:hover {
    background-position: left center;
    filter: grayscale(90%);
}

#card-4:hover {
    background-position: left center;
    filter: grayscale(90%);
}

div.service-card {
    border: 3px solid #000;
    position: relative;
    display: grid;
    grid-template-columns: 8% 1fr 8%;
    grid-template-rows: 15% 20% 40% auto 8%;
    grid-template-areas: '. . .' '. Title .' '. Text .' '. Button .' '. . .';
    transition: all ease-in-out 300ms;
    height: auto;
}

service-card:hover {
    background-position: left;
}

.service-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 10px solid #fff;
    z-index: 0;
}

.card-title {
    grid-area: Title;
    text-transform: uppercase;
    align-self: center;
    color: #ffffff;
    text-align: center;
    font-weight: 400;
}

.card-text {
    grid-area: Text;
    color: #ffffff;
    text-align: center;
    font-size: 1.4rem;
    font-family: VTC_Letterer_Pro;
}

.card-button {
    text-align: center;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    grid-area: Button;
    text-transform: uppercase;
    transition: all ease-in-out 150ms;
    height: 60%;
    z-index: 1;
}

.card-button:hover {
    background-color: #fff;
    color: #141414;
    text-decoration: none;
}

/* ==================================== 
=========== Contacts Styling ==========
==================================== */
section#contacts {
    display: grid;
    grid-template-columns: 20px 1fr 20px 1fr 20px;
    grid-template-rows: 20px 1fr 20px;
    grid-template-areas: '. . . . .' '. Info . Map .' '. . . . .';
    background-color: #ffffff;
    background-image: url('gallery/noisy-texture-200x200-o23-d22-c-ffffff-t0.png');
    height: auto;
}

div.info {
    grid-area: Info;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px auto 5% 1fr;
    grid-template-areas: '.' 'Title' '.' 'Form';
    background-color: #cdcdcd;
    height: auto;
    border: 3px solid #000;
    background-position: center center;
    background-size: cover;
    background-image: url('gallery/dots-bg.jpg');
}

div.map {
    grid-area: Map;
    height: 100vh;
    border: 3px solid #000;
}

.form {
    grid-area: Form;
}

.contact-form {
    grid-area: Form;
    display: grid;
    grid-template-columns: 10% 1fr 5% 1fr 10%;
    grid-template-rows: auto 20px auto 20px auto 30px auto;
    grid-template-areas: '. Name . Surname .' '. . . . .' '. Email Email Email .' '. . . . .' '. Message Message Message .' '. . . . .' '. Button Button Button .';
    justify-items: center;
    z-index: 10;
    font-family: VTC_Letterer_Pro;
}

.form-control {
    transition: all ease-in-out 150ms;
    resize: none;
    position: relative;
    width: 100%;
    height: auto;
    padding: 2px;
    background: #f6e58d;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: #000000 solid 3px;
}

.form-control::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 14px 0;
    border-color: transparent #f6e58d;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -20px;
    left: 242px;
}

.bubble::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 22px 16px 0;
    border-color: #000000 transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -25px;
    left: 240px;
}

.form-control:focus {
    border: none;
    outline: none;
    background-color: #fff;
    border: #000 solid 3px;
    box-shadow: none;
}

.form-control:hover {
    border: none;
    outline: none;
    border: #3a3a3a solid 3px;
    box-shadow: none;
}

.form-name {
    grid-area: Name;
}

.form-surname {
    grid-area: Surname;
}

.form-email {
    grid-area: Email;
}

.form-message {
    grid-area: Message;
    min-height: 100px;
    max-height: 130px;
}

.form-button {
    grid-area: Button;
    background-image: url('gallery/sendbtn.png');
    background-position: center center;
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat;
    transition: all ease-in-out 150ms;
    width: 70%;
    height: 115px;
}

.form-button:hover {
    transform: scale(1.2);
}

/* ==================================== 
=========== Footer Styling ============
==================================== */
.footer {
    width: 100%;
    height: auto;
    background-color: #412f7d;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 5fr 1fr;
    grid-template-areas: 'Social' 'End' 'Authors';
    position: relative;
    z-index: 100;
}

.footer p {
    font-family: Montserrat;
}

/* First Footer Section */
div.footer-social {
    grid-area: Social;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 30% 1fr 1fr 1fr 1fr 1fr 30%;
    background-color: #533d9d;
    grid-template-areas: '. Tw Fb Lin In You .';
    min-height: 50px;
    background-image: url('gallery/noisy-texture-200x200-o3-d19-c-292929-t0.png');
}

.fab-footer {
    font-size: 2rem;
    color: #ffffff;
    transition: all ease-in-out 300ms;
}

.fab-footer:hover {
    color: #c0392b;
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.footer-social a {
    text-align: center;
    align-self: center;
}

.footer-social a.a-Tw {
    grid-area: Tw;
}

.footer-social a.a-Fb {
    grid-area: Fb;
}

.footer-social a.a-Lin {
    grid-area: Lin;
}

.footer-social a.a-In {
    grid-area: In;
}

.footer-social a.a-You {
    grid-area: You;
}

/* Second Footer Section */
div.footer-end {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    color: #ffffff;
    grid-area: End;
    grid-template-areas: 'Footer-Left Footer-Center Footer-Right';
    min-height: 200px;
    background-image: url('gallery/noisy-texture-200x200-o3-d19-c-1c1c1c-t0.png');
}

/* Logo and Copyright */
div.footer-left {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '.' 'Site' 'Copy' '.';
    grid-area: Footer-Left;
}

div.footer-left p {
    text-align: center;
}

.copyright {
    grid-area: Copy;
}

.footer-logo {
    grid-area: Site;
    font-weight: 500;
    text-transform: uppercase;
    height: auto;
    width: 50%;
    justify-self: center;
}

/* Footer Contacts */
.footer-center {
    display: grid;
    grid-template-columns: 5% auto auto 5%;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: '. . . .' '. Email Email-Text .' '. Phone Phone-Text .' '. Address Address-Text .' '. . . .';
    grid-area: Footer-Center;
}

#email-icon {
    grid-area: Email;
}

#phone-icon {
    grid-area: Phone;
}

#address-icon {
    grid-area: Address;
}

.email-text {
    grid-area: Email-Text;
    text-align: right;
}

.phone-text {
    grid-area: Phone-Text;
    text-align: right;
}

.address-text {
    grid-area: Address-Text;
    text-align: right;
}

/* Footer Menu */
.footer-right {
    display: grid;
    grid-area: Footer-Right;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas: '. . .' '. Menu .' '. . .';
    align-items: center;
}

ul.footer-menu {
    list-style: none;
    grid-area: Menu;
    margin: 0;
    padding: 0;
    text-align: center;
}

ul.footer-menu li a {
    color: #ffffff;
    transition: all ease-in-out 150ms;
}

ul.footer-menu li a:hover {
    color: #c7c7c7;
    text-decoration: none;
}

/* Third Footer Section */
.footer-authors {
    grid-area: Authors;
    background-image: url('gallery/noisy-texture-200x200-o3-d19-c-292929-t0.png');
    position: relative;
}

.authors p {
    position: absolute;
    top: 41%;
}

.authors {
    grid-area: Text;
    color: #d3d3d3;
    display: flex;
    justify-content: center;
    padding-top: 15px;
    text-align: center;
}

/* ==================================== 
======== Media Queries Styling ========
==================================== */
/* General */
@media (min-width:1200) {
    .section-title {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: 400;
        font-size: 4rem;
    }
}

@media (max-width:991px) {
    .section-title {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: 400;
        font-size: 2.6rem;
    }
}

/* Header */
@media (max-width:767px) {
    .header-logo {
        width: 60%;
        height: auto;
        position: absolute;
        top: 24%;
        left: 20%;
        z-index: 50;
    }
}

@media (max-width:575px) {
    .header-logo {
        width: 60%;
        height: auto;
        position: absolute;
        top: 40%;
        left: 20%;
        z-index: 50;
    }
}

@media (max-width:575px) {
    .btn-header {
        position: absolute;
        top: 50%;
        left: 20%;
        width: 60%;
        text-transform: uppercase;
        color: #ffffff;
        border: 1px solid #fff;
    }
}

/* About */
@media (max-width:767px) {
    #about {
        overflow: hidden;
        display: grid;
        grid-template-columns: 10px 1fr 10px;
        grid-template-rows: 10px auto auto auto 10px;
        grid-template-areas: '. . .' '. Panel1 .' '. Panel2 .' '. Panel3 .' '. . .';
        height: auto;
        grid-gap: 20px;
        background-image: url('gallery/noisy-texture-200x200-o23-d22-c-ffffff-t0.png');
    }
}

@media (max-width:767px) {
    .about-video {
        grid-area: Video;
        width: 100%;
        height: 70vh;
        display: none;
    }
}

@media (min-width:1200) {
    .about-text {
        grid-area: Text;
        text-align: center;
        font-weight: 300;
        font-size: 1.2rem;
    }
}

@media (max-width:991px) {
    .about-text {
        grid-area: Text;
        text-align: center;
        font-weight: 300;
        font-size: 0.9rem;
    }
}

@media (min-width:1200px) {
    .about-card h4 {
        font-weight: 400;
        text-align: center;
        font-size: 2.6rem;
    }
}

@media (min-width:1200px) {
    .about-card p {
        font-weight: 300;
        text-align: center;
        font-size: 1.6rem;
    }
}

/* Video */
@media (max-width:991px) {
    .about-video video {
        width: 270%;
        height: auto;
    }
}

@media (max-width:575px) {
    .about-video video {
        width: 400%;
        height: auto;
    }
}

/* Cohorts */
@media (max-width:991px) {
    .cohorts {
        width: 100%;
        height: auto;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 10%;
        grid-template-rows: 20px auto auto 20px;
        grid-template-areas: '. . . . .' '. Logo1 Logo2 Logo3 .' '. Logo4 Logo6 Logo7 .' '. . . . .';
        z-index: 50;
        position: relative;
    }
}

@media (max-width:767px) {
    .cohorts {
        width: 100%;
        height: auto;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 10%;
        grid-template-rows: 20px auto auto 20px;
        grid-template-areas: '. . . . .' '. Logo1 Logo2 Logo3 .' '. Logo4 Logo6 Logo7 .' '. . . . .';
        z-index: 50;
        position: relative;
    }
}

@media (max-width:670px) and (min-height: 360px) {
    .cohorts {
        width: 100%;
        height: auto;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 10%;
        grid-template-rows: 20px auto auto 20px;
        grid-template-areas: '. . . . .' '. Logo1 Logo2 Logo3 .' '. Logo4 Logo6 Logo7 .' '. . . . .';
        z-index: 50;
        position: relative;
    }
}

@media (max-width:575px) {
    .cohorts {
        width: 100%;
        height: auto;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 15% 1fr 15%;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: '. Logo1 .' '. Logo2 .' '. Logo3 .' '. Logo4 .' '. Logo6 .' '. Logo7 .';
        z-index: 50;
        position: relative;
    }
}

@media (max-width:991px) {
    .cohorts-logo {
        display: flex;
        align-self: center;
        justify-self: center;
        width: 100%;
        height: auto;
        transition: all ease-in-out 150ms;
        z-index: 60;
    }
}

@media (max-width:767px) {
    .cohorts-logo {
        display: flex;
        align-self: center;
        justify-self: center;
        width: 100%;
        height: auto;
        transition: all ease-in-out 150ms;
        z-index: 60;
    }
}

@media (max-width:640px) and (min-height: 360px) {
    .cohorts-logo {
        display: flex;
        align-self: center;
        justify-self: center;
        height: auto;
        transition: all ease-in-out 150ms;
        z-index: 60;
        width: 100%;
    }
}

/* Team */
@media (min-width:1200px) {
    .team-member {
        width: 250px;
        height: 400px;
        background-color: #7f0000;
        display: flex;
        justify-self: center;
        z-index: 1;
    }
}

@media (min-width:1900px) {
    .team-member {
        width: 310px;
        height: 500px;
        background-color: #7f0000;
        display: flex;
        justify-self: center;
        z-index: 1;
    }
}

@media (max-width:575px) {
    #team::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('gallery/phonebackground.jpg');
        background-size: cover;
        background-position: center center;
    }
}

@media (max-width:991px) {
    section#team {
        display: grid;
        grid-template-columns: 10% 1fr 1fr 10%;
        grid-template-rows: 100px 3% 50px auto 30px auto 30px;
        grid-template-areas: '. . . .' '. Title Title .' '. . . .' '. Member1 Member2 .' '. . . .' '. Member3 Member4 .' '. . . .';
        height: auto;
        position: relative;
    }
}

@media (max-width:670px) and (min-height: 360px) {
    section#team {
        display: grid;
        grid-template-columns: 10% 1fr 1fr 10%;
        grid-template-rows: 100px 3% 2% auto 20px auto 20px;
        grid-template-areas: '. . . .' '. Title Title .' '. . . .' '. Member1 Member2 .' '. . . .' '. Member3 Member4 .' '. . . .';
        height: auto;
    }
}

@media (max-width:575px) {
    section#team {
        display: grid;
        grid-template-columns: 10% 1fr 10%;
        grid-template-rows: 50px 3% 2% 2% auto auto auto auto 20px;
        grid-template-areas: '. . .' '. Title .' '. Line .' '. . .' '. Member1 .' '. Member2 .' '. Member3 .' '. Member4 .' '. . .';
        height: auto;
        background-color: rgba(0, 0, 0, 0.63);
        grid-row-gap: 20px;
    }
}

/* Services */
@media (max-width:991px) {
    #services {
        display: grid;
        grid-template-columns: 5% 1fr 1fr 5%;
        grid-template-rows: 70px auto 5% auto 1fr 70px;
        grid-template-areas: '. . . .' '. Title Title .' '. . . .' '. Card1 Card2 .' '. Card3 Card4 .' '. . . .';
        grid-row-gap: 20px;
        height: auto;
    }
}

@media (max-width:670px) and (min-height: 360px) {
    #services {
        display: grid;
        grid-template-columns: 5% 1fr 5%;
        grid-template-rows: 70px auto 5% 1fr 1fr 1fr 1fr 70px;
        grid-template-areas: '. . .' '. Title .' '. . .' '. Card1 .' '. Card2 .' '. Card3 .' '. Card4 .' '. . .';
        grid-row-gap: 20px;
        height: 300vh;
    }
}

@media (max-width:991px) {
    .card-button {
        text-align: center;
        background-color: transparent;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 20px;
        grid-area: Button;
        text-transform: uppercase;
        transition: all ease-in-out 150ms;
        height: 100%;
    }
}

/* Contacts */
@media (min-width:768px) and (max-width:991px) {
    section#contacts {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 'Info' 'Map';
        background-color: #eaeaea;
    }
}

@media (max-width:767px) {
    section#contacts {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 'Info' 'Map';
        background-color: #eaeaea;
        height: 200vh;
    }
}

@media (max-width:640px) and (min-height: 360px) {
    section#contacts {
        height: auto;
    }
}

@media (max-width:767px) {
    div.info {
        grid-area: Info;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10% 7% 5% 1fr;
        grid-template-areas: '.' 'Title' 'Line' 'Form';
    }
}

@media (min-width:768px) and (max-width:991px) {
    div.info {
        grid-area: Info;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10% 15% 4% 1fr 20px;
        grid-template-areas: '.' 'Title' 'Line' 'Form' '.';
        height: auto;
    }
}

@media (max-width:767px) {
    .contact-form {
        grid-area: Form;
        display: grid;
        grid-template-columns: 10% 1fr 10%;
        grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
        grid-template-areas: '. Name .' '. . .' '. Surname .' '. . .' '. Email .' '. . .' '. Message .' '. . .' '. Button .';
    }
}

@media (max-width:575px) {
    .form-button {
        grid-area: Button;
        background-image: url('gallery/sendbtn.png');
        background-position: center center;
        background-size: contain;
        background-color: transparent;
        background-repeat: no-repeat;
        transition: all ease-in-out 150ms;
        width: 100%;
        height: 115px;
    }
}

/* Footer */
@media (max-width:575px) {
    footer.footer {
        width: 100%;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 9fr 1fr;
        grid-template-areas: 'Social' 'End' 'Authors';
        color: #000000;
        height: auto;
    }
}

@media (min-width:576px) and (max-width:767px) {
    footer.footer {
        width: 100%;
        height: auto;
        background-color: #412f7d;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 4fr 1fr;
        grid-template-areas: 'Social' 'End' 'Authors';
        color: #000000;
    }
}

@media (max-width:670px) and (min-height: 360px) {
    footer.footer {
        height: auto;
    }
}

@media (max-width:575px) {
    div.footer-social {
        grid-area: Social;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 5% 1fr 1fr 1fr 1fr 1fr 5%;
        background-color: #533d9d;
        grid-template-areas: '. Tw Fb Lin In You .';
    }
}

@media (max-width:670px) and (min-height: 360px) {
    div.footer-social {
        grid-area: Social;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 20% 1fr 1fr 1fr 1fr 1fr 20%;
        background-color: #533d9d;
        grid-template-areas: '. Tw Fb Lin In You .';
    }
}

@media (min-width:576px) and (max-width:640px) {
    div.footer-social {
        grid-area: Social;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 30% 1fr 1fr 1fr 1fr 1fr 30%;
        background-color: #533d9d;
        grid-template-areas: '. Tw Fb Lin In You .';
    }
}

@media (max-width:575px) {
    div.footer-end {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        color: #ffffff;
        grid-area: End;
        grid-template-areas: 'Footer-Left' 'Footer-Center' 'Footer-Right';
        height: auto;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .footer-center {
        display: grid;
        grid-template-columns: 5% auto auto 5%;
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas: '. . . .' '. Email Email-Text .' '. Phone Phone-Text .' '. Address Address-Text .' '. . . .';
        font-size: 1rem;
    }
}

@media (max-width:767px) {
    .footer-center {
        display: grid;
        grid-template-columns: 15% auto auto 15%;
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas: '. . . .' '. Email Email-Text .' '. Phone Phone-Text .' '. Address Address-Text .' '. . . .';
        font-size: 1rem;
        grid-gap: 0px;
        grid-column-gap: 10px;
    }
}

@media (max-width:767px) {
    .email-text {
        grid-area: Email-Text;
        text-align: right;
    }
}

@media (max-width:767px) {
    .phone-text {
        grid-area: Phone-Text;
        text-align: right;
    }
}

@media (max-width:767px) {
    .footer-contacts-icons {
        display: flex;
        justify-self: right;
    }
}

@media (max-width:767px) {
    .address-text {
        grid-area: Address-Text;
        text-align: right;
    }
}