/* - - - - - - - - UNIVERSAL SELECTORS - - - - - - - - */

@font-face {
  font-family: Lobster;
  src: url(fonts/Lobster.otf);
}

* {
  font-family: 'Times New Roman', Times, serif;
 }
 
 body {
  padding-bottom: 60px;
 }
 
 .menu-logo {
   height: 2rem;
   margin-bottom: 5px;
   margin-right: 7px;
 }
 
 .download-link {
   font-weight: 600;
 }
 
 .download-link:hover {
   color: blue!important;
 }
 
 /* - - - - - - - - NAVIGATION - - - - - - - - */
 
 .hider {
  background-color: rgb(221, 255, 222);
 }
 
 .desktop-nav ul {
   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-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   text-align: center;
   -ms-flex-flow: row;
       flex-flow: row;
   list-style: none;
   padding-left: 0;
   margin: 0;
   height: 60px;
 }
 
 .desktop-nav ul li {
   padding: 18px 21px;
   -webkit-transition: background-color 500ms linear;
   -o-transition: background-color 500ms linear;
   transition: background-color 500ms linear;
 }
 
 .desktop-nav {
   margin-bottom: 16px;
 }
 
 a {
   color: black!important;
 }
 
 .desktop-nav ul a:hover {
   text-decoration: none;
 }
 
 .desktop-nav ul li:hover {
   background-color: rgba(1, 1, 1, 0.03);
   -webkit-transition: background-color 500ms linear;
   -o-transition: background-color 500ms linear;
   transition: background-color 500ms linear;
 }
 
 header {
   background-color: rgb(221, 255, 222);
   background-size: cover;
   background-position: center;
 }
 
 #brand-name {
   text-transform: capitalize;
   text-align: center;
   padding-top: 1.25rem;
   color: rgb(49, 49, 49);
   font-family: 'Lobster';
 }
 
 #idezet {
   padding-bottom: 30px;
   font-size: 32px;
   font-style: italic;
   text-align: right;
   margin-right: 25%;
   margin-top: -40px;
   margin-bottom: 0;
   font-family: 'Cormorant Garamond', serif;
   font-weight: 800;
 }
 
 #ecsszlogo {
   height: 180px;
   margin-right: 15px;
 }
 
 #english-flag {
   width: 40px;
   position: absolute;
   right: 70px;
   top: 15px;
   border: 1px solid white;
   padding: 1px;
 }
 
 #english-flag:hover {
   border: 1px solid blue;
 }
 
 .custom-height {
   line-height: 12px;
 }
 
 p {
   font-size: 18px;
 }
 
 footer p {
   font-size: 16px;
 }

 .flag-holder {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   position: absolute;
   right: 20px;
   top: 20px;
 }

 .flag-holder img {
   width: 40px;
 }

 .flag-holder p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  margin-right: 5px;
 }
 
 /* - - - - - - - - FOOTER - - - - - - - - */
 
 footer {
   height: 60px;
 }
 
 footer p {
   margin: 0;
   padding: 0;
 }
 
 /* - - - - - - - - MEDIA QUERIES - - - - - - - - */
 
 @media all and (max-width: 1400px) {
   #brand-name {
     font-size: 5vw;
   }
   #idezet {
     font-size: 32px;
   }
   #ecsszlogo {
     height: 12vw;
   }
   .desktop-nav ul {
     margin: 0;
   }
   #english-flag {
     right: 15px;
   }
   .flag-holder p {
     display: none;
   }
 }
 
 @media all and (max-width: 991px) {
   nav ul {
     display: none;
     border: none;
   }
   nav ul li {
     padding: 0;
   }
   nav ul li:first-of-type{
     margin-top: 1rem;
   }
   #brand-name,
   #idezet {
     display: none;
   }
   .desktop-nav {
     display: none;
   }
   header {
     display: none!important;
   }   
   footer {
    display: none!important;
  }
}

 @media all and (min-width: 701px) {
  #copyright-mobile {
    display: none!important;
  }
 }
 
 @media all and (min-width: 992px) {
  .hider {
    display: none!important;
  }
  #copyright-hider {
    display: none!important;
  }
}

@media all and (max-width: 521px) {
  .brand-big {
    display: none!important;
  }
  .hider-title-rolunk {
    display: none!important;
  }
}

@media all and (min-width: 522px) {
  .brand-small {
    display: none!important;
  }
  .hider-title-ecssz {
    display: none!important;
  }
}

@media all and (max-width: 521px) {
  .brand-big {
    display: none!important;
  }
}

@media all and (min-width: 522px) {
  .brand-small {
    display: none!important;
  }
}