/* 1. Painel
--------------*/
#painel .carousel img {height: calc(100vh - 120px); object-fit: cover;}
#painel .carousel .carousel-caption {top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .65); z-index: 0;}
#painel .carousel .carousel-caption h1, #painel .carousel .carousel-caption h2 {text-align: left;}
#painel .carousel .carousel-caption h1 {font-size: 36px; margin-bottom: 1.75rem;}
#painel .carousel .carousel-caption h2 {font-size: 22px; font-weight: 300; text-transform: uppercase; letter-spacing: 4px;}
#painel .carousel .carousel-caption .floating {position: absolute; top: 50%; right: 2rem; width: 40%; height: 50vh; transform: translateY(-50%); z-index: -1;}
#painel .carousel .carousel-item.active h1, #painel .carousel .carousel-item.active h2, #painel .carousel .carousel-item.active .btn {animation-name: fadeInLeft; animation-duration: 1s; animation-iteration-count: 1;}
#painel .carousel .carousel-item.active .floating {animation-name: fadeInRight; animation-duration: 1s; animation-iteration-count: 1;}
#painel .carousel .carousel-item:not(.active) h1, #painel .carousel .carousel-item:not(.active) h2, #painel .carousel .carousel-item:not(.active) .btn, #painel .carousel .carousel-item:not(.active) .floating {opacity: 0;}
#painel .carousel .carousel-indicators [data-bs-target] {-webkit-transition: width .4s ease-in-out; transition: width .4s ease-in-out;}
#painel .carousel .carousel-indicators [data-bs-target]:not(.active) {width: 15px;}

@keyframes fadeInLeft {
  from {opacity: 0; transform: translateX(-100%);}
  to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInRight {
  from {opacity: 0; transform: translateY(-50%) translateX(100%);}
  to {opacity: 1; transform: translateY(-50%) translateX(0);}
}

/* 2. Sobre
-------------*/
#sobre {text-align: right;}
#sobre ul {list-style: none; margin: 0; padding: 0;}
#sobre img {height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .35);}

/* 3. Fixed Background
------------------------*/
#fixed-background {min-height: 50vh; display: -ms-flexbox; display: flex; -ms-align-items: center; align-items: center; position: relative; z-index: 0;}
#fixed-background::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .65); z-index: -1;}
#fixed-background.estacionamento {background: url(../images/jpg/background/estacionamento.jpg); background-attachment: fixed; background-size: cover;}
#fixed-background.evento {background: url(../images/jpg/background/evento.jpg); background-attachment: fixed; background-size: cover;}
#fixed-background h1 {text-align: center; color: #FFF; line-height: 1.5; margin-bottom: 0;}
#fixed-background .triangle {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#fixed-background .triangle::before, #fixed-background .triangle::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/png/triangle.png); background-repeat: repeat-x;}
#fixed-background .triangle::before {background-size: 15px; background-position: bottom; transform: rotate(180deg);}
#fixed-background .triangle::after {background-size: 15px; background-position: bottom;}

/* 4. Estrutura
-----------------*/
#estrutura .box {text-align: center;}
#estrutura .box h2 {text-transform: uppercase; color: #CA262D; margin-bottom: 0.75rem;}
#estrutura .box .image {height: 160px; overflow: hidden; position: relative; margin-bottom: 1rem; cursor: pointer;}
#estrutura .box .image img {height: 100%; object-fit: cover;}
#estrutura .box .image .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .75); display: -ms-flexbox; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
#estrutura .box .image:not(:hover) .overlay {transform: translateY(100%);}
#estrutura .box .image .overlay i {font-size: 2.5rem; color: #FFF;}

#servicosModal .modal-header .modal-title {font-weight: 600;}

/* 5. Eventos
---------------*/
#eventos h2 {font-weight: 300; text-align: center; text-transform: uppercase; color: #767676; letter-spacing: 1px; margin-bottom: 1.75rem;}
#eventos .titulo {margin-bottom: 0.25rem;}
#eventos .slick-galeria .image {height: 250px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .65);}
#eventos .slick-galeria .image img {height: 100%; object-fit: cover;}
#eventos .slick-slider .slick-slide {margin: 5px 15px;}

/* 6. Orçamento
-----------------*/
#orcamento {background: #F5F5F5;}
#orcamento h2 {font-size: 18px; font-weight: 300; text-align: center; margin-bottom: 1.75rem;}