.full-width-content:nth-child(2n) {
    background-color: var(--background-full-alternate);
}
.full-width-content:nth-child(1){
    position: relative;
}

div.hero{
    position: relative;
    background-color: aqua;
    font-size: 1rem;
    aspect-ratio: 4.5/1 ; 
    width: 100%;
    @media (max-width: 1200px) {  aspect-ratio: 3/1;font-size: 0.9rem; }
    @media (max-width: 900px) {  aspect-ratio: 3 / 1.2; font-size: 0.8rem; };
    @media (max-width: 750px) {  aspect-ratio: 3 / 1.6; font-size: 0.8rem; };
    @media (max-width: 600px) {  aspect-ratio: 3 / 2.5; font-size: 0.8rem; };
    @media (max-width: 440px) {  aspect-ratio: 3 / 3.3; font-size: 0.8rem; };
    @media (max-width: 340px) {  aspect-ratio: 3 / 4.5; font-size: 0.75rem; };
     
    
     & > .imgContainer{
        display:block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0; left: 0;  
        & picture, img{
            height: 100%;
            width: 100%;
            object-fit: cover;
           
        }
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
            z-index: 1;
            pointer-events: none;
        }
       
    }
    & .centered-content{
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        color: #FFF;
        font-size: 1em;
        gap: 1.5em;

        & > * {
            align-self: flex-start;
        }
        & .hero-text{
            padding: 0;
            max-width: 800px;
            text-align: center;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            & h1{
                margin: 0;
                text-transform: uppercase;
                font-weight: 600;
                font-size: 2.5em;
                margin-bottom: .5em ;
                max-width: 800px;
            }
            & h2{
                margin: 0;
                font-size: 1.2em;
                line-height: 1.5em;
                color: #FFF;
                font-weight: 500;
            }
        }
        & form{
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 1em;
            & > *{
                flex: 1;
            }
            & >  .buttonFlipper{
                margin-left: 3em;
            }
            @media (max-width: 900px) {
                flex-direction: column;
                & > .custom_select1{
                    margin-left: 0;
                }
                & > * {
                    width: 100%;
                }
                & > .buttonFlipper {
                    margin-left: 0;
                    height: var(--element-height);
                    min-height: calc(1.3em + 0.6em);
                    flex-shrink: 0;
                    
                }
            }
            & input , & .custom_select1 select, & .buttonFlipper{
                width: 100%;
                margin: 0;
                border: 1px solid #fff;
                border-radius: 25px;
                cursor: pointer;
                text-align: center;
                background: none;
                outline: none;
                color: white;
                box-sizing: border-box;
                font-weight: inherit;
                font-family: inherit;
                font-size: 1em;
                padding: 0.3em;
                text-transform: uppercase  ;
            }
          
            
            & .buttonFlipper {
               --element-height:calc(1em + 0.6em);
                font-size:1.2em; 
                --button-bg-color: #FFF;
                --button-text-color: #000;
                font-weight: 500;
                margin-left: 3em;
            }
            @media (max-width: 900px) { 
                .buttonFlipper {
                    margin-left: 0;
                }
                 .custom_select1 select{
                    font-size: .85em;
                 }
             }
        }
    }
    
   
}
.custom_select1{
    position: relative;
    display: block;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    cursor:pointer;
    & > select{

      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: #00000055;
      border: 1px solid #FFF;
      border-radius: 20px;
      padding: 10px 35px 10px 15px;
      font-weight: inherit;
      font-size:inherit;
      cursor: pointer;
      font-family: inherit;
      outline: none;
      display: block;
      width: 100%;
      padding: 0.3em;
      text-align: center;
      text-align-last: center;
      direction: ltr;
    color: #FFF;
    }
    & > select:focus {
        border-color: #f0dbdb;
    }
    &::after {
      content: "▼";
      font-size: 0.9em;
      color: #f1f0f0;
      position: absolute;
      right: 0.9em;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }
    & option{
        padding: 0.8em;
        font-size: 0.9em;
		cursor:pointer;
        background-color: #323333;
      &:checked {
          background: #040404;   /* blue highlight */
          color: #fff;
        }
      &:hover {
        background: #6e4949;
      }
}
}


.PageCarouselEvents {
  padding: 4em 0 5em; /* top right/left bottom */
}

/* все последующие .PageCarouselEvents (те, что идут после первой) обнуляют только верхний */
.PageCarouselEvents ~ .PageCarouselEvents {
  padding-top: 0;
}

#dropdownList{
	opacity: 1;
	
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
    margin: 0;
    padding: 0;
	padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    margin-top: 10px;
    background: white;
    border: #000 solid 1px;
	position: absolute;
    width: 250px;
	z-index: 10;
	margin-left: 0px;
	color: black;
    left: 0;
   
	list-style-type: none;
    margin: 0;
	& .li{
		float: none;
		padding: 3px 5px 3px 5px;
		text-transform: uppercase;
		font-weight: 500;
		font-size: 1em;
		margin: 0;
		display:block;
		& a{
			color: black;
			text-decoration:none;
			display:block;
		}
	}
}

#filter-event-place{
    position: relative;
}

#dropdownList::after, #eventsTypeList::after {
    content: "";
    position: absolute;
    top: -5px;
    /* основной белый треугольник */
    left: 50%;
    
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    z-index: 1000001;
    box-sizing: border-box;
}

#dropdownList {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

#dropdownList.show {
    margin: 10px 0;
    opacity: 1;
    transform: translateX(0) translateY(0);
    pointer-events: auto;
}
#dropdownList.events-dropdown-list {
    position: absolute;
    width: 330px;
    background: white;
    border-top: none;
    z-index: 10;
    margin-left: 0px;
    color: black;
    left: 0;
    border: #000 solid 1px;
    font-size: 0.9em
    ;
    
}

.events-dropdown-list div {
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    color: black;
    float: none;
}

.events-dropdown-list a {
    color: black;
    text-decoration: none;
    
    padding: 0.5em 0.3em; ;
    display: block;
    font-size: 1rem;
    &:hover {
       background: var(--background-full-alternate);
    }
}

.events-dropdown-list div:hover {
    background: #f0f0f0;
}

.events-dropdown-input::placeholder {
    color: white;
    opacity: 1;
}

.events-dropdown-input {
    cursor: pointer;
}