@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
@import url('https//fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    color: rgba(34, 35, 36, 0.863);
    color: grey;
    color: dimgray;
    
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    
}

/* Style a top navigation bar: add background color, margins, paddings */
.topnav {
    background-color: rgba(34, 35, 36, 0.863);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: .5em 1em;
    text-decoration: none;
    font-size: 1em;
}

/* Style the font awesome icons: add color - white */
i {
    color: white;
} 

/* Add an active class to highlight the current page */
.active {
    background-color: #1b75bc;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

.topnav .right {
    float: right;
    margin-right: 1em;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 1em;
    border: none;
    color: white;
    padding: .5em 1em;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
} 

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(34, 35, 36, 0.863);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: white;
    padding: .5em 1em;
    text-decoration: none;
    display: block;
    text-align: left;
}

/*Add a background color to links on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #00afef;
}

/* Add a background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #00afef;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When the screen is less than 880 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 880px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 880px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }

/* Style the header, add the image */
.header {
    background-image: url("Images/Studio_Cover5.jpg");
    background-size: cover;
    display: flex;
}

/* Style the logo in the header */
#logo {
    width: 20%;
    height: auto;
    margin-top: 4%;
    margin-left: 7%;
    margin-right: 11%;
    margin-bottom: 4%;
}

/* Style the slogan in the header */
#slogan {
    max-width: 43%;
    height: auto;
    margin-right: 4%;
    margin-top: 3%;
    text-align: end;
    flex-grow: 1;
    margin-left: 15%;
}

/* Style the main body */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
    align-items: center;
}

/* When the screen is less than 800 pixels wide, adjust the max width for the main body */
@media screen and (max-width: 800px) {
    .main {
      max-width: 100%;
      margin: .5em auto;
      padding: .5em;
      align-items: center;
    }
  } 

/* Style the "Klijenti" section */


h1 {
    color: #1b75bc;
    font-weight: 900;
    margin-left: .5em;
    margin-bottom: .1em;
    padding: 0;
}

.klijenti a {
    color: #1b75bc;
    text-decoration: none;
}

.klijenti a:hover {
    background-color: #00afef54;
} 

/* Style the "O nama" section */
.o-nama {
    display: flex;
    flex-wrap: wrap;
   
    align-items: center;
    /* background-color: white;
    border-radius: 10px; */
}

/* Split it in two equal boxes */
.box {
    flex: 45%;
    padding: 10px;
}

.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.zasto-mi {
    padding: 0 3%;
    
    /* background-color: #00afef3a; */
}

.showreel_section {
    padding: 0;
    text-align: center;
   /* background-color: #00afef3a; */
}

.zasto-mi h2 {
    color: #1b75bc;
    font-weight: bold;
    font-size: 1.3em;
    text-align: justify;
}

.zasto-mi h3 {
    text-align: justify;
}

.o-nama .showreel-video {
    background-color: #00afef;
    text-align: center;
    padding: 0;
    margin: 0;
}
/* Adjust for smaller screens */
@media screen and (max-width: 900px) {
    .box {
        flex: 70%;
        padding: 10px;
    }
    .zasto-mi h2 {
        text-align: center;
        color: grey;
        color: dimgray;
        color: #1b75bc;
    }
    .zasto-mi h3 {
        text-align: center;
    }
    .showreel_section {
        padding: 0;
        text-align: center;
       /* background-color: #00afef3a; */
    }
}


/* Style the "Sve usluge" section */

.sve-usluge {
    display: flex;
    flex-wrap: wrap;
    margin: .5em;
    align-items: first baseline;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.137);
}

.usluge {
    margin: 0;
    padding: 0 1em;
    max-width: 25%;
}

.sve-usluge h3 {
    color: rgb(31, 30, 30);
    font-weight: 900;
    padding: 0 1em;
}

.sve-usluge a {
    text-decoration: none;
}  

h3 a:hover {
    color: #1b75bc;
}

.usluge_image {
    max-width: 100%;
    padding: 0 .5em;
}

/* Adjust for smaller screens */
@media screen and (max-width: 950px) {
    .usluge {
        max-width: 50%;
        padding: 0 1em;
    }
    
    .sve-usluge h3 {
        font-size: 1em;
    }
} 

@media screen and (max-width: 499px) {
    .usluge {
        max-width: 100%;
        padding: 0 1em;
    }  
} 

/* Style the footer */

.footer {
    max-width: 100%;
    background-color: rgba(34, 35, 36, 0.863);
    color: white;
    padding: 0;
    margin: 0;
    text-align: center;
}

.footer-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 .5em;
}

.prvi-deo {
    flex: 20%;
}

.footer-image {
    max-width: 110px;
    float: left;
    margin: 1em 1em;
}

.footer-container ul {
    list-style-type: none;
    text-decoration: none;
    flex-grow: 1;
    text-align: end;
    margin: 0 5em 0 0; 
    align-items: center;
}

.footer-nav li {
    display: inline;
    padding: 0 1em;
}

.footer-nav li a {
    text-decoration: none;
}

.footer-nav img {
    width: 3%; 
    min-width: 30px;  
} 

.footer-nav img:hover {
    background-color: #00afef;
    padding: .2em;
    border-radius: 10px;
}

.copyright {
    color: white;
    font-size: 1em;
    margin: 0;
    padding-bottom: 1em;
}

/* Adjust for smaller screens */
@media screen and (max-width: 681px) {
    .footer-image {
        max-width: 70px;
    }
    .footer-container ul {
        text-align: center;
        margin: 0 2em 0 0; 
    }
    .footer-nav img {
        min-width: 23px;  
    }
    .copyright {
        font-size: .8em;
    }
} 

/* Adjust for smaller screens */
@media screen and (max-width: 424px) {
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
    }

    .footer-nav li {
        max-width: 50%;
    }
} 


/* Style the Top Button */ 

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1b75bc ; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 50%; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #00afef; /* Add a different background color on hover */
  }

  /* Adjust for smaller screens */
@media screen and (max-width: 500px) {
    #myBtn {
        right: 10px; /* Place the button 30px from the right */
        font-size: 12px; /* Increase font size */
    }
} 


/* Style "Usluge" page */

.naslov h1 {
    margin: 1em 0;
    padding: 0 0 0 .3em;
}


.article h2 {
    color: #1b75bc;
    font-weight: 900;
    font-size: larger;
    margin: 0;
    padding: 0 0 0 .4em;
}

.row {
    text-align: justify;
    margin: .5em 0;
    padding: 0 .5em;
    height: auto;
}

.service-image {
    max-width: 30%;
    /* min-width: 370px;
     padding: .5em; */
}

.service-image.right {
    float: right;
    padding-left: 1em;
}

.left {
    float: left;
    padding-right: 1em;
}

.audio {
    margin: 0 0.2rem;
    
}

.audio h3 {
    margin: 0 0 .5em 0;
    padding: 0 .5em;
}

.row a {
    text-decoration: none;
    color: #1b75bc;
    font-weight: bold;
}

.gaming {
    height: 230px;
}


/* Adjust for smaller screens */
@media screen and (max-width: 700px) {
    .service-image {
        margin: .5em;
        max-width: 200px;
    }
} 

@media screen and (max-width: 850px) {
    .gaming {
        height: max-content;
    }
}

/* OSTALE USLUGE */

.fullscreen {
    width: 100%;
    height: 42vh;
}

.gallery {
    
    overflow: auto;
    white-space: nowrap;
}

.gallery-images {
    display: inline-block;
    width: 200px;
    margin: 0;
    padding: .5em;
}

.produkcija {
    display: flex;
    align-items: center;
    margin: 0;
    padding: .5em 0;
}

.produkcija-image {
    flex: 50%;
    padding: 0 1em;
}

.produkcija-text {
    flex: 60%;
    padding: 0 1em;
}

.produkcija p {
    text-align: justify;
    
}

.dodatno {
    text-align: center;
    padding: 0 0 1em 0;
}

#video_produkcija {
    color: #1b75bc;
}

/* Adjust for smaller screens */
@media screen and (max-width: 450px) {
    .produkcija {
        flex-wrap: wrap;
    }
    .service-image-produkcija {
        max-width: 400px;
    }
} 


.slavisha {
    max-width: 200px;
    float: right;
    border-radius: 50%;
    margin: 0 1em;
    padding: 0;
}

#slavisa {
    padding-top: 1em;
    padding-bottom: 3em;
    align-items: center;
}

#slavisa h2 {
    padding: 0;
    margin: 0;
}


/* SKOLA GLASA */
.text {
    align-items: center;
    text-align: justify;
    margin: 0;
    padding: 0 1em;
}

.text h1 {
    margin: 0;
    padding: 0;
}

/* KONTAKT FORMA */

.kontakt {
    display: inline-grid;
    grid-template-columns: 2fr 1fr;
    margin: 10px 0;
    padding: 0;
}

.kontakt > * {
    margin: 10px;
    
    padding: 0;
}

.naslov-kontakt {
    margin-top: 10px;
    padding: 0;
}

.naslov-kontakt h1 {
    margin: 10px 0;
}

.kontakt-tekst {
    /* flex: 40%; */
    grid-column: 1;
    text-align: justify;
    padding: 0;
}

.kontakt-tekst a {
    text-decoration: none;
    color: #1b75bc;
    font-weight: bold;
}

.kontakt-form {
    grid-column: 2;
}

form {
    /* max-width: 500px; */
    margin: 0;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label {
    display: block;
    margin-bottom: 0;
    width: 280px;
    border-radius: 5px;
    padding: 5px;
    border: 1px transparent;
    font-size: 16px;
}

input, textarea {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    max-width: inherit;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
}

button[type="submit"] {
    background-color: #1b75bc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #00afef;
}

.g-recaptcha {
    margin: 20px 0;
    padding: 0;
    text-align: left;
}


/* Adjust for smaller screens */
@media screen and (max-width: 780px) {

    .kontakt {
        display: flex;
        flex-direction: column;
        margin: 10px;
    }

    form {
        max-width: 350px;
        margin: 0;
        padding: 5px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    
    label {
        padding: 5px 1px;
        border: 1px transparent;
        font-size: 14px;
    }
    
    input, textarea {
        max-width: 350px;
        min-width: 180px;
        padding: 10px 5px;
        font-size: 14px;
    }

    .recaptcha {
        width: 180px;
        margin: 5px 0;
    }

} 

@media screen and (max-width: 400px) {

    #fieldset {
        max-width: 250px;
    }
    input, textarea {
        max-width: 250px;
    }
}    

/* Style Klijenti section */

/*
.temporary {
    background-color: black;
}
*/

#zadovoljni_klijenti {
    color: #1b75bc;
    font-weight: 900;
    margin-left: .1em;
    margin-bottom: .1em;
    padding: 0;
}

.klijenti-row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    padding: 5px;
    align-items: center;
    text-align: center;
    
}

.klijenti-row > * {
    background-color: white;
    border-radius: 10px;
}

.lidl-client {
    flex: 15%;
    padding: 5px;
    margin: 5px;
}

#lidl {
    width: 90%;
    margin: 0;
    padding: 5px;
    padding-top: 10px;
}

.samsung-client {
    flex: 28%;
    padding: 1px;
    margin: 5px;
}

#samsung {
    width: 90%;
    margin: 0;
    padding: 5px;
    padding-top: 10px;
}

.autokomerc-client {
    flex: 29%;
    padding: 1px;
    margin: 5px;
}

#autokomerc {
    width: 100%;
    margin: 0;
    padding: 5px;
    padding-top: 10px;
}

/* .airserbia-client {
    flex: 38%;
    padding: 1px;
    margin: 5px;
}

#airserbia {
    width: 100%;
    margin: 0;
    padding: 5px;
    padding-top: 10px;
} */

.jaffa-client {
    flex: 15%;
    padding: 1px;
    margin: 5px;
}

#jaffa {
    width: 97%;
    margin: 0;
    padding: 5px;
    padding-top: 9px;
}

.cinestar-client {
    flex: 22%;
    padding: 1px;
    margin: 5px;
}

#cinestar {
    width: 92%;
    margin: 0 10px;
    padding: 5px;
    padding-top: 10px;
}

.ps5-client {
    flex: 20%;
    padding: 1px;
    margin: 5px;
}

#ps5 {
    width: 100%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.cedevita-client {
    flex: 21%;
    padding: 1px;
    margin: 5px;
}

#cedevita {
    width: 100%;
    margin: 0;
    padding: 5px;
    padding-top: 15px; 
}

.chipsy-client {
    flex: 22%;
    padding: 1px;
    margin: 5px;
}

#chipsy {
    width: 95%;
    margin: 0;
    padding: 10px 10px 5px 5px; 
}

.bohemian-client {
    flex: 15%;
    padding: 1px;
    margin: 5px;
}

#bohemian {
    width: 90%;
    margin: 0 ;
    padding: 5px;
    padding-top: 10px;
}


.CS_Channels-client {
    flex: 28%;
    padding: 1px;
    margin: 5px;
}

#CS_Channels {
    width: 95%;
    margin: 0;
    padding: 5px;
}

.tricoman-client {
    flex: 29%;
    padding: 1px;
    margin: 5px;
}

#tricoman {
    width: 95%;
    margin: 0 ;
    padding: 5px;
    padding-top: 10px;
}

.shosha-client {
    flex: 13%;
    padding: 1px;
    margin: 5px;
}

#shosha {
    width: 85%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.soccer-client {
    flex: 21%;
    padding: 1px;
    margin: 5px;
}

#soccer {
    width: 90%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.santamed-client {
    flex: 10%;
    padding: 1px;
    margin: 5px ;
}

#santamed {
    width: 70%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.sga-client {
    flex: 18%;
    padding: 1px;
    margin: 5px;
}

#sga {
    width: 80%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.koton-client {
    flex: 12%;
    padding: 1px;
    margin: 5px;
}

#koton {
    width: 85%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.fpa-client {
    flex: 12%;
    padding: 1px;
    margin: 5px;
}

#fpa {
    width: 87%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.defacto-client {
    flex: 15%;
    padding: 1px;
    margin: 5px;
}

#defacto {
    width: 90%;
    margin: 0px;
    padding: 5px; 
    padding-top: 10px;
}

.buzz-client {
    flex: 18%;
    padding: 1px;
    margin: 5px;
}

#buzz {
    width: 90%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.activecollab-client {
    flex: 23%;
    padding: 1px;
    margin: 5px;
}

#activecollab {
    width: 100%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.webility-client {
    flex: 18%;
    padding: 1px;
    margin: 5px;
}

#webility {
    width: 90%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.uvdance-client {
    flex: 15%;
    padding: 1px;
    margin: 5px;
}

#uvdance {
    width: 90%;
    margin: 0;
    padding: 5px; 
    padding-top: 10px;
}

.giz-client {
    flex: 25%;
    padding: 1px;
    margin: 5px;
}

#giz {
    width: 100%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.apera-client {
    flex: 15%;
    padding: 1px;
    margin: 5px;
}

#apera {
    width: 100%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

.siberian-client {
    flex: 18%;
    padding: 1px;
    margin: 5px;
}

#siberian {
    width: 90%;
    margin: 0 ;
    padding: 10px 5px; 
}

.zeleznica-client {
    flex: 19%;
    padding: 1px;
    margin: 5px;
}

#zeleznica {
    width: 100%;
    margin: 0 ;
    padding: 5px; 
    padding-top: 10px;
}

/* Adjust for smaller screens */
@media screen and (max-width: 1055px) {
    .lidl-client{
        flex: 14%;
    }
    .cinestar-client {
        flex: 20%;
    }
    .ps5-client {
        flex: 20%;
    }
    .cedevita-client{
        flex: 25%;
    }
    .chipsy-client {
        flex: 25%;
    }
    .santamed-client {
        flex: 12%;
    }
    #santamed {
        width: 82%; 
    }
   .soccer-client {
    flex: 20%;
   }
   .sga-client {
        flex: 20%;
   }
   .koton-client {
        flex: 14%;
   }
   .fpa-client {
    flex: 10%;
   }
   #fpa {
    width: 90%;
   }
   .defacto-client {
    flex: 17%;
   }
   .buzz-client {
    flex: 17%;
   }
   .activecollab-client {
    flex: 25%;
   }
   .webility-client {
    flex: 22%;
   }
   .uvdance-client {
    flex: 13%;
   }
   .giz-client {
    flex: 27%;
   }
   .apera-client {
    flex: 14%;
   }
   .siberian-client {
    flex: 17%;
   }
   .zeleznica-client {
    flex: 17%;
   }
}   

/* Adjust for smaller screens */
@media screen and (max-width: 500px) {
    .klijenti-row {
        flex-direction: column;
        align-items: center;
    }

    .lidl-client {
        margin: 10px 20px;
    }
    #lidl {
        width: 80%;
    }

    .airserbia-client {
        margin: 10px 20px;
    }
        
    .samsung-client {
        margin: 20px;
    }

    #samsung {
        width: 80%;
    }

    .jaffa-client {
        margin: 10px 20px;
    }

    #jaffa {
        width: 90%;
    }

    .cinestar-client {
        margin: 10px 20px;
    }

    #cinestar {
        width: 80%;
    }
    
    .ps5-client {
        margin: 20px 20px;
    }

    #ps5 {
        width: 80%;
    }

    .cedevita-client {
        margin: 10px 20px;
    }

    #cedevita {
        width: 90%;
    }

    .chipsy-client {
        margin: 10px 20px;
    }

    #chipsy {
        width: 90%;
    }

    #bohemian {
        width: 70%;
    }

    .CS_Channels-client {
        margin: 20px;
        margin-top: 30px;
    }

    #CS_Channels {
        width: 90%;
    }

    .autokomerc-client {
        margin: 10px 20px;
    }
    
    #autokomerc {
        width: 85%;
        justify-content: center;
    }

    .shosha-client {
        margin: 10px 20px 0 20px;
    }
    
    #shosha {
        width: 80%;
    }

    .soccer-client {
        margin: 0 20px 10px 20px;
    }

    #soccer {
        width: 85%;
    }

    .santamed-client {
        margin: 0 20px 10px 20px;
    }

    #santamed {
        width: 70%;
    }

    .sga-client {
        margin: 20px 30px;
    }
    
    #sga {
        width: 70%;
    }

    .tricoman-client {
        margin: 10px 20px;
    }

    #tricoman {
        width: 95%;
    }

    .koton-client {
        margin: 10px 20px 0 20px;
    }

    #koton {
        width: 80%;
    }

    .defacto-client {
        margin: 0 20px 10px 20px;
    }

    .buzz-client {
        margin: 10px 20px;
    }

    .fpa-client {
        margin: 10px 20px;
    }

    #fpa {
        width: 80%;
    }

    .activecollab-client{
        margin:  20px;
    }
    
    #activecollab {
        width: 90%;
    }

    .webility-client {
        margin: 10px 20px;
    }

    #webility {
        width: 70%;
    }

    .uvdance-client {
        margin: 10px 20px;
    }

    #uvdance {
        width: 80%;
    }

    .giz-client {
        margin: 10px 20px;
    }

    #giz {
        width: 80%;
    }

    .apera-client {
        margin: 10px 20px;
    }

    #apera {
        width: 80%;
    }

    .siberian-client {
        margin: 10px 20px;
    }

    #siberian {
        width: 80%;
    }

    .zeleznica-client {
        margin: 10px 20px;
    }

    #zeleznica {
        width: 80%;
    }
} 

.showreel-box {
    display: flex-box;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.zasto-mi h1 {
    margin: 1rem 0;
}
.showreel-video {
    margin: .9rem;
    max-width: 600px;
    text-align: center;
    justify-content: center;
    align-items: center;
}



/* Adjust for smaller screens */
@media screen and (max-width: 1174px) {
    .showreel-video {
        max-width: 500px;
        text-align: center;
    }
}

@media screen and (max-width: 1000px) {
    .showreel_section {
        
        text-align: center;
        align-items: center;
        align-self: center;
        align-content: center;
    }
}

@media screen and (max-width: 888px) {
    .showreel-video {
        max-width: 700px;
    }
}

@media screen and (max-width: 788px) {
    .showreel-video {
        max-width: 600px;
    }
}

@media screen and (max-width: 600px) {
    .showreel-video {
        max-width: 500px;
    }
}

@media screen and (max-width: 550px) {
    .showreel-video {
        margin: .5rem;
        max-width: 400px;
    }
}

@media screen and (max-width: 450px) {
    .showreel-video {
        margin: .5rem;
        max-width: 300px;
    }
}

@media screen and (max-width: 360px) {
    .showreel-video {
        margin: .5rem;
        max-width: 250px;
    }
}