.promo-search-wrapper {margin-bottom: 30px; display: inline-block; width: 100%; max-width: 300px; position: relative;}
.promo-search-dropdown {cursor: pointer; border: 2px solid #c1bcbc; border-radius: 50px; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 10px 20px; background-color: #FFF; position: relative; z-index: 11;}
.promo-search-selected {color: #c1bcbc; font-size: 16px; font-weight: bold;}
.promo-search-caret {width: 12px; height: 8px; background: url('../images/icon-caret-down-blue.png') no-repeat 0 0;}
.promo-search-choices {display: none; position: absolute; top: calc(100% - 24px); left: 0; right: 0; z-index: 10; background:#FFF; border: 2px solid #45c0be; border-top: 0; border-radius: 20px; padding-left: 5%; padding-right: 5%; padding-top: 20px;}
.promo-search-item {padding: 10px 5% 10px 0; border-bottom: 1px solid #45c0be;}
.promo-search-choices a:last-child .promo-search-item {border-bottom: 0;}
.promo-search-choices a {color: #000;}
.promo-search-choices a:hover {color: #45c0be;}
.promo-search-dropdown.active {border-bottom: 0; border-radius: 20px 20px 0 0; border-color: #45c0be;}

.promo-list-wrapper {display: flex; flex-wrap: wrap; display: grid; grid-auto-rows: 1fr; grid-template-columns: 25% 25% 25% 25%;}
.promo-item {padding-left: 5%; padding-right: 5%; margin-bottom: 25px;}
.promo-item-inner {transition: var(--transition); border: 2px solid #dcdcdc; border-radius: 30px; padding: 20px 5% 20px 5%; position: relative;}
.promo-item-image {text-align: center; margin-bottom: 20px; height: 200px; background-repeat: no-repeat; background-size: contain; background-position: center center;}
.promo-item-bottom {display: flex; align-items: center; justify-content: space-between;}
.promo-item-button {transition: var(--transition); color: #FFF; width: 100%; background-color: #45c0be; padding: 7px 5%; border-radius: 5px 20px 5px 20px; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-align: center;}
.promo-item-end-date-wrapper { margin-left: 5%; color: #000;}
.promo-item-end-date-label {font-size: 8px;}
.promo-item-end-date {font-size: 12px;}
.promo-last-deal {position: absolute; background: url('../images/promo-last-deal.png') no-repeat 0 0; width: 142px; height: 46px; top: -15px; right: -10px; font-weight: bold; font-size: 14px; text-align: center; padding-right: 10px; padding-bottom: 15px; display: flex; align-items: center; justify-content: center; color: #FFF;;}
.promo-item a:hover .promo-item-inner {border-color: #8fcea3}
.promo-item a:hover .promo-item-button {color: #FFF; background-color: var(--blue);}

#section-promotion-contact {margin-bottom: 30px;}
#section-promotion-contact .section-title {margin-bottom: 40px; position: relative; padding-right: 10%; padding-top: 20px;}
.title-decor-blue {position: absolute; top: 0; right: 0; background: url('../images/title-decor-blue.png'); width: 33px; height: 32px;}
.promotion-contact-left {float: left; width: 50%; padding-right: 3%;}
.promotion-contact-right {float: left; width: 50%; padding-left: 3%;}
.promotion-contact-box {
    background: rgb(226,244,253);
    background: linear-gradient(90deg, rgba(226,244,253,1) 0%, rgba(173,229,250,1) 100%);
    padding: 50px 5% 70px 5%; border-radius: 40px 40px 150px 40px;
}

#section-promotion-detail {width: 65%; padding-right: 2.5%; float: left;}
#section-top-promotion {width: 35%; padding-left: 2.5%; float: left;}

.promotion-image-item-outer {display: none;}
.promotion-image-item-outer.active {display: block;}
.promotion-image-item {/*border-radius: 30px; background-repeat: no-repeat; background-size: contain; background-position: center center;*/ width: 100%; /*height: 670px;*/}
.promotion-image-item img {width: 100%; border-radius: 30px;}
.promotion-image-slider-wrapper {margin-bottom: 20px;}
.promotion-image-slider-wrapper .tns-controls {display: none;}
.promotion-thumb-slider-wrapper {padding-left: 43px; padding-right: 43px;}
.promotion-thumb-item {padding-left: 10px; padding-right: 10px;}
.promotion-thumb-item-image {background-repeat: no-repeat; background-size: contain; background-position: center center; width: 100%; height: 150px;}

#section-promotion-detail .section-title {margin-bottom: 5px;}
.promotion-image-slider-wrapper {margin-bottom: 20px;}
.promotion-thumb-slider-wrapper {margin-bottom: 50px;}
.promotion-price {font-size: 19px; margin-bottom: 15px;}
.promotion-price .bold {font-weight: bold;}
.promotion-item-list {margin-bottom: 20px; border-top: 2px solid #8bd8d6; border-bottom: 2px solid #8bd8d6; padding-top: 25px; padding-bottom: 10px;}
.promotion-item-list ul {padding-left: 20px;}
.promotion-item {line-height: 1.5em; list-style-image: url('../images/promotion-item-list.png')}
.promotion-desc {font-size: 16px;}

.top-promotion-box {background: #f2f8fb; border-radius: 20px; padding: 30px 7% 30px 7%;}
.top-promotion-title {font-size: 16px; margin-bottom: 10px;}
.top-item {margin-bottom: 15px;}
.top-item-thumb {transition: var(--transition); float: left; width: 30%; padding-right: 2.5%; height: 80px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.top-item-info {float: left; width: 70%; padding-left: 2.5%;}
.top-item-title {font-weight: bold; font-size: 12px; line-height: 1.1em; transition: var(--transition);}
.top-item-date {font-size: 12px; transition: var(--transition);}
.top-promotion-list a {color: #000;}
.top-promotion-list a:hover .top-item-title, .top-promotion-list a:hover .top-item-date {color: #999;}
.top-promotion-list a:hover .top-item-thumb {opacity: var(--imageopacity);}

#section-promoorder {margin-bottom: 40px;}

label{font-size: 14px; color: var(--blue); margin-bottom: 5px;}
input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="email"], input[type="number"], select {width: 100%; border: 2px solid #94dbda; outline: none; border-radius: 10px; padding: 6px 20px; font-size: 17px; color: #939393;}
input[type="text"]:disabled, input[type="date"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, select:disabled {background: #CCC; color: #FFF;}
input[type="checkbox"] {width: 20px; height: 20px;}
.form-group-row {display: flex; justify-content: space-between;}
.form-group-col {width: 47.5%;}
.form-group {position: relative;}
.dica-custom-date {position: relative; z-index: 1; background-color: transparent; cursor: pointer;}
.datepicker-icon {width: 19px; height: 21px; background: url('../images/icon-calendar-green.png') no-repeat 0 0; background-size: 100% 100%; position: absolute; bottom: 10px; right: 20px; z-index: 0;}
.dica-upload-form-wrapper { position: relative;}
.dica-btn-upload {border: 0; border-radius: 5px; position: absolute; width: 100%; max-width: 105px; height: 30px; background-color: #939393; font-size: 12px; color: #FFF; top: 50%; right: 15px; transform: translateY(-50%);}

.promoorder-title-wrapper {margin-bottom: 30px; padding-left: 250px;}
.promoorder-title {font-weight: bold; font-size: 36px; color: var(--blue); line-height: 1.1em;}
.promoorder-subtitle {font-size: 17px; line-height: 1.3em; color: #a0a0a0;}
.promoorder-step-wrapper {width: 250px; float: left; padding-right: 5%;}
.promoorder-step-item {transition:var(--transition); display: block; border-radius: 10px; background-color: #f2f2f2; padding: 10px 20px; margin-bottom: 20px; cursor: pointer; position: relative;}
.promoorder-step-item-title {transition:var(--transition); font-size: 16px; font-weight: bold; color: var(--blue);}
.promoorder-step-item-desc {transition:var(--transition); font-size: 12px; color: var(--blue);}
.promoorder-step-item:hover, .promoorder-step-item.active {background-color: var(--blue); box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -webkit-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -moz-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75);}
.promoorder-step-item:hover .promoorder-step-item-title, .promoorder-step-item:hover .promoorder-step-item-desc, .promoorder-step-item.active .promoorder-step-item-title, .promoorder-step-item.active .promoorder-step-item-desc {color: #FFF; }
.promoorder-step-active-arrow {transition: var(--transition); width: 20px; height: 20px; background-color: var(--blue); position: absolute; top: 50%; right: -10px; transform: translateY(-50%) rotate(45deg); opacity: 0;}
.promoorder-step-item.active .promoorder-step-active-arrow {opacity: 1;}

.promoorder-form {display: none;}
#promoorder-form-1 {display: block;}

.promoorder-box-wrapper {padding-left: 5%;}
.promoorder-box {float: left; width: calc(100% - 250px); background: #FFF; border-radius: 30px; border: 2px solid #d9d9d9; padding: 30px 5%; box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -webkit-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -moz-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75);}
.promoorder-box-title {font-size: 24px; font-weight: bold; color: var(--blue); margin-bottom: 20px; line-height: 1.3em;}
.promoorder-box-header {display: flex; align-items: center; justify-content: space-between;}
.promoorder-box-footer {display: flex; align-items: center; justify-content: space-between;}
.promoorder-box-footer button {margin-right: 10px;}
.promoorder-box-footer button:last-child {margin-right: 0;}
.promoorder-box-button-right {display: flex; align-items: center;}
.promoorder-item {padding-bottom: 50px; margin-bottom: 50px; border-bottom: 2px solid #bfbfbf;}

.summary-item-title {font-size: 14px; font-weight: bold; color: #FFF; background-color: var(--blue); padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; display: inline-block;}
.summary-item-left {float: left; width: 50%; padding-right: 2.5%;}
.summary-item-right {float: left; width: 50%; padding-left: 2.5%;}
.summary-item-group {margin-bottom: 20px;}
.summary-item-label {font-size: 14px; color: #46c1be; margin-bottom: 5px;}
.summary-item-value {font-weight: bold; font-size: 17px; color: var(--blue);}

@media screen and (max-width: 1100px) {
    .promo-item-bottom {flex-direction: column;}
    .promo-item-end-date-wrapper {display: flex; justify-content: space-between; align-items: center; width: 100%;}
    .promo-item-button {margin-bottom: 5px;}
    .promo-item-end-date-label {font-size: 11px;}
    .promo-item-end-date {font-size: 14px;}
}

@media screen and (max-width: 1000px) {
    .promo-list-wrapper {grid-template-columns: 33.33% 33.33% 33.33%;}
    #section-promotion-detail .section-title {font-size: 31px;}
}

@media screen and (max-width: 900px) {
    #section-promotion-detail .section-title {font-size: 30px;}
}

@media screen and (max-width: 800px) {
    #section-promotion-detail .section-title {font-size: 29px;}
    .promotion-price {font-size: 17px;}
    .promotion-item, .promotion-desc {font-size: 15px;}
}

@media screen and (max-width: 700px) {
    .promo-list-wrapper {grid-template-columns: 50% 50%;}
    #section-promotion-detail .section-title {font-size: 28px;}
}

@media screen and (max-width: 600px) {
    #section-promotion-detail .section-title {font-size: 32px;}
    .promotion-price {font-size: 19px;}
    .promotion-item, .promotion-desc {font-size: 16px;}
    #section-promotion-detail {float: none; margin-bottom: 30px; width: 100%; padding-right: 0;}
    #section-top-promotion {float: none; padding-left: 0; width: 100%;}
    .top-promotion-title {font-size: 24px; text-align: center; margin-bottom: 20px;}
}

@media screen and (max-width: 550px) {
    #section-promotion-detail .section-title {font-size: 30px;}
}

@media screen and (max-width: 500px) {
    #section-promotion-detail .section-title {font-size: 28px;}
    .promotion-price {font-size: 17px;}
    .promotion-item, .promotion-desc {font-size: 15px;}
}

@media screen and (max-width: 450px) {
    .promo-list-wrapper {grid-template-columns: 100%;}
    .promo-search-wrapper {max-width: unset;}
}

@media screen and (max-width: 400px) {
    
}

@media screen and (max-width: 350px) {
}