/*
Theme Name: DropDownCommunity Custom Theme
Theme URI: https://dropdowncommunity.com/
Description: Custom WordPress theme
Author: Milena Petkanova
Author URI: https://gargamena.com/
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: dropdowncommunity
*/

/*
General styles
*/

/* Reset */
html { box-sizing: border-box; font-size: 18px; line-height: 24px; }
*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, p, section, menu, nav { margin: 0; padding: 0; font-weight: normal; font-style: normal; }
/* [hidden] { display: none !important; } */
ol, ul { list-style: none; }
img { max-width: 100%; height: auto; }
input { outline: none; -webkit-appearance: none; }
textarea { outline: none; -webkit-appearance: none; }
input:focus, textarea:focus { outline: none; -webkit-appearance: none; border: none !important; resize: none; }
@media(max-width: 1025px) {
  html { font-size: 16px; }
}

/* Colors */
:root {
  --earth-blue-color: #375673;
}

/* Fonts */
@font-face {
  font-family: "PantonRust";
  src: url('./../fonts/panton-rust/PantonRustHeavy-GrSh.otf') format('truetype');
  font-weight: 800;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url('./../fonts/montserrat/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Tags */
*, *::before, *::after { font-family: 'Montserrat', sans-serif; font-size: 16px; letter-spacing: 0.2px; }
::selection { color: var(--earth-blue-color); background-color: black; }
::-moz-selection { color: var(--earth-blue-color); background-color: black; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: black; }
::-webkit-scrollbar-thumb { background: white; }
body { background-color: black; color: white; }
img { display: block; }
a { display: block; text-decoration: none; color: white; opacity: 1; }
a:hover { cursor: pointer; text-decoration: none; transition: opacity 0.3s; }
p { margin-bottom: 15px; }
input,
textarea { width: 100%; font-size: 18px; line-height: 24px; color: white; background: transparent; border: none; border-bottom: 1px solid white; padding: 8px; transition: all 0.3s; }
input::placeholder, 
textarea::placeholder { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #ABAAAA; }
input:focus,
textarea:focus { border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important; }

h1 { font-size: 42px; line-height: 56px; font-weight: 900; font-family: 'PantonRust', sans-serif; }
h2 { font-size: 36px; line-height: 48px; font-weight: 900; font-family: 'PantonRust', sans-serif; }
h3 { font-size: 26px; line-height: 36px; font-weight: 500; font-family: 'PantonRust', sans-serif; }
h4 { font-size: 22px; line-height: 30px; font-weight: 900; }
h5 { font-size: 18px; line-height: 30px; font-weight: 600; }
@media(max-width: 1350px) {
  h1 { font-size: 38px; line-height: 48px; }
  h2 { font-size: 32px; line-height: 40px; }
  h3 { font-size: 24px; line-height: 30px; }
}

/* Helpers */
.btn { width: 180px; font-weight: bold; font-size: 12px; line-height: 18px; text-transform: uppercase; text-align: center; opacity: 1; padding: 12px; }
.btn:hover, .btn:active { cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }
.btn:disabled, .btn[disabled] { opacity: 0.6; }
.btn-primary { background: white; border: 1px solid white; color: black; }
.btn-secodary { background: black; border: 1px solid white; color: white; }
.more-btn { margin: 0 auto; margin-top: 60px; }
.container { position: relative; z-index: 1; display: flex; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; padding: 120px 15px; }
.title { width: 100%; letter-spacing: 1px; margin-bottom: 80px; }
.paragraph { margin-bottom: 15px; }
.paragraph:last-child { margin-bottom: 0; }
.background-image { width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: center; }
.absolute-center-horizontal { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.absolute-center-vertical { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.expandable { overflow: hidden; transition: max-height 0.3s ease-in; }
.expandable.expanded { transition: max-height 0.3s ease-in; }
.desktop-version { display: flex !important; }
.mobile-version { display: none !important; }
@media(max-width: 1350px) {
  .title { margin-bottom: 50px; }
  .container { max-width: 960px; }
}
@media(max-width: 1025px) {
  .container { max-width: 556px; padding: 80px 30px; }
  .desktop-version { display: none !important; }
  .mobile-version { display: flex !important; }
}

/* Animations */
@keyframes blink { 50% { opacity: 0.0; } }
@-webkit-keyframes blink { 50% { opacity: 0.0; } }
.blink { animation: blink 1s step-start 1s infinite; -webkit-animation: blink 1s step-start 1s infinite; }

/* Custom grid */
.cols { margin: 0 -40px; display: flex; flex-wrap: wrap; }
.col { width: 100%; padding: 0 40px; }
.col-1of2 { width: 50%; }
.col-1of3 { width: 33.33%; }
@media(max-width: 1025px) {
  .cols { margin: 0; }
  .col-1of2 { width: 100%; }
  .col-1of3 { width: 100%; padding: 0; }
}

/* Modal */
.modal { z-index: 999; background-color: white; color: black; padding: 0; }
.modal-spinner { height: 42px; }
.modal a { display: inline-block; color: black; opacity: 0.6; text-decoration: underline; }
.modal a.btn { display: block; color: white; opacity: 1; text-decoration: none; }
.modal a.close-modal { display: none; background-color: black; right: 0; }
.modal p { width: 100%; }
.modal .main-image { height: 400px; }
.modal .container { padding: 30px; }
.modal .title { margin-bottom: 15px; }
.modal .image { margin-bottom: 15px; }
.modal .btn { margin-bottom: 15px; }
.modal .embed-container { margin-bottom: 15px; }
@media(max-width: 1025px) {
  .modal .container { padding: 20px; }
}

/* embed-container */
.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; width: 100%; max-width: 100%; height: auto; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
General elements
*/

/* header */
.header { width: 100%; position: fixed; top: 0; left: 0; z-index: 9; }
.header .container {  max-width: 100%; justify-content: space-between; padding: 30px 30px; }
.header .logo-btn { z-index: 9; }
.header .logo-img { width: 72px; height: auto; border-radius: 6px; }
@media(max-width: 1350px) {
  .header .container { padding: 30px 20px; }
  .header .logo-img { width: 60px; }
}
@media(max-width: 1025px) {
  .header { background: black; }
  .header .container { padding: 10px; }
  .header .logo-img { width: 50px; }
}

/* burger-btn */
.burger-btn-wrapper { width: 72px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 6px; background: black; }
.burger-btn { z-index: 9; display: flex; flex-direction: column; width: 51px; cursor: pointer; background: black; padding: 3px 5px; }
.burger-btn:hover { cursor: pointer; }
.burger-btn span { background: #fff; border-radius: 10px; height: 4px; margin: 4px 0; transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.burger-btn span:nth-of-type(1){ width:50%; }
.burger-btn span:nth-of-type(2) { width: 100%; }
.burger-btn span:nth-of-type(3) { width: 75%; }
.burger-btn.opened span:nth-of-type(1) { transform-origin:bottom; transform: rotatez(45deg) translate(5px,0px) }
.burger-btn.opened span:nth-of-type(2) { transform-origin:top; transform: rotatez(-45deg) }
.burger-btn.opened span:nth-of-type(3) { transform-origin:bottom; width: 50%; transform: translate(18px,-7px) rotatez(45deg); }
@media(max-width: 1350px) {
  .burger-btn-wrapper { width: 60px; height: 50px; }
}
@media(max-width: 1025px) {
  .burger-btn { width: 44px; }
  .burger-btn span { margin: 3px 0; }
  .burger-btn.opened span:nth-of-type(3) { transform: translate(15px,-6px) rotatez(45deg); }
}

/* nav */
.nav { width: 72px; height: 60px; position: absolute; right: 30px; border-radius: 6px; background: black; transition: width .6s, height .6s; overflow: hidden; z-index: 8; }
.nav.opened { width: 320px; height: auto; }
.nav .items-list { opacity: 0; padding: 40px; }
.nav .items-list.shown { opacity: 1; transition: opacity .5s; transition-delay: .6s; }
.nav .items-list .item { text-transform: capitalize; font-weight: bold; font-size: 12px; line-height: 18px; text-transform: uppercase; padding: 10px; }
.nav .items-list .item .nav-btn { width: 100%; font-size: 16px; line-height: 24px; text-align: left; padding: 0; }
.nav .items-list .lang-item { display: flex; align-items: center; margin-top: 20px; }
.nav .items-list .lang-item .divider { width: 3px; height: 16px; background: white; opacity: 0.6; margin: 0 10px; }
.nav .items-list .lang-item .lang-btn { width: auto; }
@media(max-width: 1350px) {
  .nav { width: 60px; height: 50px; right: 20px; }
}
@media(max-width: 1025px) {
  .nav { width: 0; height: 0; top: 0; right: 0; box-shadow: none; border-radius: 0; }
  .nav.opened { width: 100%; height: 100vh; }
  .nav .items-list { padding-left: 60px; padding-top: 120px; }
}

/* socials-menu */
.socials-menu { z-index: 9; height: 180px; position: fixed; left: 30px; top: 0; bottom: 0; border-radius: 6px; margin-top: auto; margin-bottom: auto; background: black; }
.socials-menu .socials-list { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.socials-menu .socials-list .social-btn { width: 72px; }
.socials-menu .socials-list .social-btn svg { font-size: 24px; }
.socials-menu .socials-list .social-btn img { width: 24px; margin: 0 auto; margin-top: 5px; }
@media(max-width: 1350px) {
  .socials-menu { left: 20px; }
  .socials-menu .socials-list .social-btn { width: 60px; }
}
@media(max-width: 1025px) {
  .socials-menu { width: 200px; height: 60px !important; top: 5px; bottom: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; }
  .socials-menu .socials-list { flex-direction: row; }
  .socials-menu .socials-list .social-btn { width: 42px; }
  .socials-menu .socials-list .social-btn svg { font-size: 18px; }
  .socials-menu .socials-list .social-btn img { margin-top: 0; }
}

/* live-btn */
.live-btn { position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 30px 15px; }
.live-btn .text { font-family: 'PantonRust', sans-serif; font-size: 18px; color: black; margin-bottom: 5px; }
.live-btn .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #EC2D17; margin-bottom: 15px; margin-left: 10px; }

/* footer */
.footer .container { justify-content: center; padding: 60px; padding-bottom: 50px; }
.footer .container .text { margin: 0; }

/*
Sections
*/

/* hero-section */
.hero-section { min-height: 100vh; position: relative; }
.hero-section .cover-image { position: absolute; height: 100%; width: 100%; background-position-y: 20%; }
.hero-section .icons { top: 32px; bottom: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }
.hero-section .icons .icons-image { height: 120px; width: auto; background-image: url('./assets/images/icons-cropped.png'); background-size: contain; margin-bottom: 18px; }
.hero-section .icons .text { text-align: center; font-family: inherit; font-weight: 600; font-size: 48px; text-transform: uppercase; text-shadow: 2px 2px 14px rgb(0 0 0 / 50%); }
@media(max-width: 1025px) {
  .hero-section .cover-image { background-position-x: 20%; }
  .hero-section .icons { top: 90px; }
  .hero-section .icons .icons-image { background-image: url('./assets/images/icons-cropped-mobile.png'); margin-bottom: 15px; }
  .hero-section .icons .text { font-size: 32px; }
}

/* intro-section */
.intro-section .intro-list { display: flex; flex-wrap: wrap; }
.intro-section .intro-element { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 80px; }
.intro-section .intro-element:last-child { margin-bottom: 0; }
.intro-section .intro-element .title { margin-bottom: 15px; }
/* .intro-section .intro-element p { line-height: 24px; } */
.intro-section .image-wrapper { width: 45%; height: 420px; border-radius: 6px; order: 2; }
.intro-section .content-wrapper { width: 50%; }
@media(max-width: 1025px) {
  .intro-section .intro-element { margin-bottom: 60px; }
  .intro-section .image-wrapper { width: 100%; height: 260px; margin-bottom: 20px; order: 1; }
  .intro-section .intro-element:nth-child(1) .image-wrapper { height: 300px; }
  .intro-section .content-wrapper { width: 100%; }
}

/* upcoming-section */
.upcoming-section { padding-bottom: 120px; }
.upcoming-section .upcoming-list { width: 100%; }
.upcoming-section .upcoming-element { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.upcoming-section .divider { margin: 0 12px; }
.upcoming-section .cta-btn { width: auto; display: inline-block; font-size: 16px; padding: 0; margin-right: 15px; }
@media(max-width: 1025px) {
  .upcoming-section { padding-bottom: 0; }
  .upcoming-section .upcoming-element { margin-bottom: 40px; }
  .upcoming-section .name { width: 100%; margin: 4px 0 12px; }
  .upcoming-section .buttons { width: 100%; display: flex; }
  .upcoming-section span { line-height: 30px; }
  .upcoming-section .divider { margin: 0 8px; }
  .upcoming-section .cta-btn { width: 15px; }
}

/* contact-section */
.contact-section .container { justify-content: space-between; }
.contact-section form * {  max-width: 681px; font-family: 'Montserrat', sans-serif; }
.contact-section .contact-wrapper { width: 42%; }
.contact-section .form-row { margin-bottom: 30px; }
.contact-section .wpcf7-not-valid-tip { font-size: 14px; font-weight: 600; }
.contact-section .wpcf7 form.failed .wpcf7-response-output, .contact-section .wpcf7 form.aborted .wpcf7-response-output { border-color: #FF8C72; }
.contact-section .wpcf7 form .wpcf7-response-output { margin: 0; }
.contact-section .contact-info { padding: 25px 0; }
.contact-section .contact-info .info-btn { text-align: left; display: flex; align-items: center; padding: 5px 0; }
.contact-section .contact-info .text { padding: 0 12px; text-transform: lowercase; }
.contact-section .donate-wrapper { width: 42%; }
.contact-section .donate-wrapper .text { margin-bottom: 30px; }
@media(max-width: 1350px) {
  .contact-section textarea { max-height: 180px; }
}
@media(max-width: 1025px) {
  .contact-section .contact-wrapper { width: 100%; }
  .contact-section .donate-wrapper { width: 100%; padding: 30px 0; }
}

/* multimedia-section */
.multimedia-section .instagram-wrapper { width: 1090px; padding: 30px 0 100px; }
@media(max-width: 1350px) {
  .multimedia-section .instagram-wrapper { padding: 0; }
}

/* slick-slider */
.slider-wrapper { max-width: 1090px; width: 100%; margin: 0 auto; padding: 100px 0; }
.slick-slider { max-height: 300px; }
.slick-slider .slider-arrow { position: absolute; top: 100px; }
.slick-slider .slider-arrow:hover { cursor: pointer; }
.slick-slider .slick-dots li button:before { color: white; font-size: 12px; }
.slick-slider .right-arrow { right: -50px; }
.slick-slider .left-arrow { left: -50px; }
.slick-slider .video-text { width: 90%; }
@media(max-width: 1350px) {
  .slick-slider { max-height: 360px; }
}
@media(max-width: 1025px) {
  .slider-wrapper { padding-bottom: 0; }
  .slick-slider .slider-arrow { top: auto; bottom: -20px; z-index: 9; }
  .slick-slider .right-arrow { right: 0; }
  .slick-slider .left-arrow { left: 0; }
}
@media(max-width: 1025px) {
  .slick-slider { max-height: 360px; }
}
@media(max-width: 620px) {
  .slick-slider { max-height: 275px; }
}

/* interviews-section */
.interviews-section {  min-height: 100vh; }
.interviews-section .interviews-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.interviews-section .interview { margin-bottom: 42px; position: relative; transition: all 0.3s; flex-direction: column; word-wrap: break-word; }
.interviews-section .main-image { width: 180px; height: 180px; border-radius: 50%; margin-bottom: 10px; }
.interviews-section .name { padding: 12px 0; }
.interviews-section .read-more { opacity: 0; display: flex; align-items: center; justify-content: flex-end; }
.interviews-section .read-more span { font-weight: bold; font-size: 14px; text-transform: uppercase; margin-right: 12px; margin-bottom: 4px; }
.interviews-section .read-more i { font-size: 22px; }
.interviews-section .interview .overlay { opacity: 0; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.interviews-section .interview:hover .overlay,
.interviews-section .interview.touched .overlay { opacity: 0.42; transition: opacity 0.3s; cursor: pointer; }
.interviews-section .interview:hover .read-more,
.interviews-section .interview.touched .read-more { opacity: 1; transition: opacity 0.3s; }
.interviews-section .more-btn { margin-top: 0; }
@media(max-width: 1025px) {
  .interviews-section .title { text-align: center; }
  .interviews-section .main-image { margin: 0 auto; margin-bottom: 10px; }
  .interviews-section .name { text-align: center; }
}

/* news-section */
.news-section {  min-height: 100vh; }
.news-section .news-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.news-section .news-single { margin-bottom: 42px; position: relative; transition: all 0.3s; flex-direction: column; word-wrap: break-word; }
.news-section .main-image { width: 100%; height: 180px; margin-bottom: 15px; }
.news-section .date { font-size: 16px; }
.news-section .read-more { opacity: 0; display: flex; align-items: center; justify-content: flex-end; }
.news-section .read-more span { font-weight: bold; font-size: 14px; text-transform: uppercase; margin-right: 12px; margin-bottom: 4px; }
.news-section .read-more i { font-size: 22px; }
.news-section .news-single .overlay { opacity: 0; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.news-section .news-single:hover .overlay,
.news-section .news-single.touched .overlay { opacity: 0.42; transition: opacity 0.3s; cursor: pointer; }
.news-section .news-single:hover .read-more,
.news-section .news-single.touched .read-more { opacity: 1; transition: opacity 0.3s; }
.news-section .more-btn { margin-top: 0; }
@media(max-width: 1025px) {
  .news-section .container { padding-bottom: 0; }
}

/* responsive youtube video */
.youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; }
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7; }
.youtube .play-button { width: 75px; height: 45px; background-color: black; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; }
.youtube .play-button:before { content: ""; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.youtube img,
.youtube .play-button { cursor: pointer; }
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before { position: absolute; }
.youtube .play-button,
.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); }
.youtube iframe { height: 100%; width: 100%; top: 0; left: 0; }
@media(max-width: 1025px) {
}

/* partners-section */
.partners-section { background-color: white; }
.partners-section .container { padding-bottom: 40px; }
.partners-section .partners-list { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.partners-section .title { color: black; }
.partners-section .partner-element { width: 25%; margin-bottom: 80px; }
.partners-section .partner-element img { width: auto; height: 125px; object-fit: contain; }
.partners-section .partner-btn { width: auto; padding: 0; }
@media(max-width: 1025px) {
  .partners-section .title { text-align: center; }
  .partners-section .partner-element { width: 100%; }
  .partners-section .partner-element img { margin: 0 auto; }
}