:root {
   --main-color: #303030;
   --minor-color: white;
}
html {
   overflow-y: auto;
}
body {
   margin: 0;
   /* font-family: "Montserrat", serif; */
   /* font-family: "Parkinsans", serif; */
   font-family: "Afacad Flux", serif;
   /* font-family: "Lexend Deca", serif; */
   /* font-family: "Questrial", serif; */
   font-weight: 700;
   background-color: var(--main-color);
}


/************/
/*  NAVBAR  */
/************/
#navbar {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--main-color);
   color: var(--minor-color);
   position: relative;
   height: 100px;
   user-select: none;
}
#logo {
   width: 230px;
   position: absolute;
   left: 40px;
}
#social-cont {
   position: absolute;
   right: 40px;
}
#social-cont-mobile {
   margin-top: 50px;
   padding: 25px 0px;
}
.socials > a {
   color: white;
   margin: 0 5px;
}
.socials > a > i:hover { 
   opacity: 0.5; 
}
#menu {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
}
#menu li {
   position: relative;
}
#menu a {
   display: block;
   padding: 20px;
   text-decoration: none;
   color: var(--minor-color);
   transition: background-color 0.3s;
}
#menu a:hover {
   background-color: #3c3c3c;
}
#hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
}
#hamburger div {
   width: 25px;
   height: 3px;
   background-color: #ffffff;
   margin: 3px 0;
   border-radius: 3px;
}
#mobile-menu {
   display: none;
   background: #1d1d1d;
   position: absolute;
   z-index: 99;
   top: 100px;
   width: 100%;
   padding-top: 40px;
   text-align: center;
   box-shadow: 0px 8px 7px 1px #00000073;
}
#mobile-menu > ul > li:hover {
   background-color: #252525;
}
#mobile-menu > ul > li > a {
   text-decoration: none;
   color: white;
   padding: 15px;
   display: inline-block;
}
@media (max-width: 1100px) {
   #menu {
      display: none;
   }
   #hamburger {
      display: flex;
      position: absolute;
      right: 30px;
   }
   #mobile-menu {
      display: block;
   }
   #mobile-menu.hide {
      display: none !important;
   }
   #social-cont {
      display: none;
   }
}


/*************/
/*  CONTENT  */
/*************/
.mtop {
   margin-top: 4rem;
}
.mbottom {
   margin-bottom: 3rem;
}
.gallery-cont {
   max-width: 900px;
   margin: auto;
}
.subtitle {
   margin-left: 6px;
   margin-right: 6px;
   margin-top: 3px;
}


/****************/
/*  ALBUM-GRID  */
/****************/
.grid-item {
   position: relative;
   overflow: hidden;
   margin: 5px;
}
.grid-item img {
   width: 100%;
   height: auto;
   display: block;
   transition: opacity 0.3s ease;
}
.grid-item .overlay {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.5rem;
   opacity: 0;
   transition: opacity 0.3s ease;
}
.grid-item:hover img {
   opacity: 0.7;
}
.grid-item:hover .overlay {
   opacity: 1;
}
.cbp-l-caption-title {
   font-family: "Afacad Flux", serif;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.1;
   margin-top: 3px;
}
.cbp-l-caption-subtitle {
   font-family: "Afacad Flux", serif;
   font-size: 13px;
   font-weight: 500;
}


/*************/
/*  CONTACT  */
/*************/
#contact-form {
   margin: auto;
   max-width: 700px;
}
#contact-form > input,
#contact-form > textarea {
   height: 50px;
   display: block;
   width: 100%;
   font-family: 'Afacad Flux';
   font-size: 20px;
   margin-bottom: 12px;
   padding: 10px;
   border: 0px;
   border-bottom: 2px solid #737373;
   background: #3b3b3b00;
   color: white;
}
#contact-form > textarea {
   height: 150px;
   resize: vertical;
}
#contact-form > input:focus,
#contact-form > textarea:focus {
   outline: none;
   background: #353535;
}
#contact-form > button {
   width: 100px;
   margin-top: 20px;
   height: 50px;
   background: #1e1e1e;
   font-size: 18px;
   color: white;
}
#contact-form > input.has_error,
#contact-form > textarea.has_error {
   background: #4b3333;
   border: 1px solid red;
}


/***************/
/*  COPYRIGHT  */
/***************/
#copyright-alert {
   background: rgba(0, 0, 0, 0.57);
   padding: 1px 10px;
   border-radius: 4px;
   color: white;
   white-space: pre;
}


/*********/
/* TOAST */
/*********/
#toast {
   visibility: hidden;
   min-width: 250px;
   margin-left: -125px;
   text-align: center;
   border-radius: 5px;
   padding: 16px 40px;
   position: fixed;
   z-index: 999999;
   left: 50%;
   bottom: 30px;
   font-size: 22px;
}
#toast > div.toast-title {
   font-weight: 800;
}
#toast > div.toast-msg {
   font-weight: 500;
}
#toast.success {
   background-color: #DEF2D6;
   color: #596D51;
   border: 1px solid #596D51;
}
#toast.warning {
   background-color: #F8F3D6;
   color: #8A6E36;
   border: 1px solid #8A6E36;
}
#toast.error {
   background-color: #EBC8C4;
   color: #A84741;
   border: 1px solid #A84741;
}
#toast.info {
   background-color: #CCE8F4;
   color: #4379A0;
   border: 1px solid #4379A0;
}
#toast.show {
   visibility: visible;
}
@-webkit-keyframes fadein {
   from {bottom: 0; opacity: 0;}
   to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
   from {bottom: 0; opacity: 0;}
   to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
}