.t02c {
    height: 600px;
}

.t02c .header-a {
    height: 100%;
}

.t02c .carousel,
.t02c .carousel-inner,
.t02c .carousel-item {
    height: 600px;
}

.t02c .carousel-inner {
    overflow-x: hidden;
}

/*.test {
    background-image: url("icon_login.png");
    height:300px;
    width:500px;
    border:1px solid red;
    content:"";
}*/

.t02c .carousel-control{
    background: none !important;
    width: 40px;
    z-index: 300;
    border: 0;
}

.t02c .carousel-indicators {
    bottom: 40px;
    z-index: 300;
    margin-bottom: 25px;
}

.t02c .carousel-indicators .indicator {
    margin-left: 5px;
    width: 12px;
    height: 12px;
    opacity: 1;
}

.t02c .carousel-indicators .indicator.active {
    width: 16px;
    height: 16px;
}

@media (max-width: 1024px) {
    .t02c .carousel-indicators {
        bottom: 8px;
    }
}

.t02c .carousel-item {
    overflow: hidden;
}

@media (min-width: 768px) {
    .t02c .item-media {
        position: relative;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        height: 600px;
    }

    .t02c .item-media-obj {
        min-height: 100%;
        display: block;
        width: 100%;
    }

    .t02c .item-media-obj > img {
        min-height: 100%;
        min-width: unset;
        max-width: unset;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .t02c .item-media-obj.max-width {
        min-width: 100%;
    }

    .t02c .item-media-obj.max-width > img {
        min-width: 100%;
    }
}

.t02c .item-gradient,
.t02c .item-caption {
    position: absolute;
    z-index: 200;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:100vw;
}

.t02c .item-gradient {
    z-index: 100;
}

.t02c .item-gradient .item-gradient-patch {
    width: 100%;
    height: 100%;
}

.t02c .item-caption .container {
    height: 100%;
}

.t02c .item-caption-flex {
    width: 64%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
}

.t02c .item-headline {
    z-index: 3;
}

.t02c .item-headline .h3 {
    font-size: 36px;
    line-height: 41px;
    margin-bottom: 5px;
}

.t02c .item-description {
    z-index: 4;
}

.t02c .item-description p {
    margin-bottom: 10px;
}

.t02c .item-info {
    padding-top: 10px;
    line-height: 1.1;
    font-size: 85%;
}

.t02c .item-info p {
    margin-bottom: 10px;
}

.t02c .item-buttons {
    padding-top: 10px;
}

.t02c .item-button {
    display: inline-block;
    margin-right: 15px;
}

.t02c .item-button .btn {
    white-space: normal;
    line-height: 1.1;
    font-size: 0.9em;
}

.t02c .theme-darkblue {
    --t02c-button-color: #003254;
}

.t02c .theme-blue {
    --t02c-button-color: #0080c5;
}

.t02c .theme-blue2 {
    --t02c-button-color: #0091df;
}

.t02c .theme-orange {
    --t02c-button-color: #f08f00;
}

.t02c .theme-green {
    --t02c-button-color: #92c108;
}

.t02c .theme-magenta {
    --t02c-button-color: #e3075a;
}

.t02c .item-button .btn-theme,
.t02c .item-button .btn-theme:hover,
.t02c .item-button .btn-theme:focus,
.t02c .item-button .btn-theme.focus,
.t02c .item-button .btn-theme:active,
.t02c .item-button .btn-theme.active {
    background-color: var(--t02c-button-color, #28bdd6);
    border-color: var(--t02c-button-color, #28bdd6);
    color: #fff;
}

.t02c .item-button .btn-outline-theme,
.t02c .item-button .btn-outline-theme:hover,
.t02c .item-button .btn-outline-theme:focus,
.t02c .item-button .btn-outline-theme.focus,
.t02c .item-button .btn-outline-theme:active,
.t02c .item-button .btn-outline-theme.active {
    background-color: transparent;
    border-color: var(--t02c-button-color, #28bdd6);
    color: var(--t02c-button-color, #28bdd6);
}

.t02c .item-description,
.t02c .item-description-100 {
    font-size: 16px;
    line-height: 1.4;
}

.t02c .item-description-150 {
    font-size: 125%;
    line-height: 1.2;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .t02c .item-headline .h3 {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (max-width: 875px) {
    .t02c .item-caption-flex {
        width: 90%;
    }
}

@media (min-width: 768px) {
    .t02c .item-caption-text {
        background: transparent !important;
    }
}

@media (max-width: 767px) {
    .t02c,
    .t02c .carousel,
    .t02c .carousel-inner,
    .t02c .carousel-item {
        height: auto;
    }

    .t02c .carousel {
        position: relative;
    }

    .t02c .item-media {
        position: relative;
    }

    .t02c .item-gradient {
        display: none;
    }

    .t02c .item-caption .container {
        padding: 0;
    }

    .t02c .item-caption-flex {
        padding-bottom: 10px;
        width: 100%;
    }

    .t02c .item-caption-text {
        padding: 15px;
    }

    .t02c .item-caption-text .theme-fg,
    .t02c .item-caption-text .item-description {
        color: #fff !important;
    }

    .t02c .item-description {
        padding-top: 10px;
    }

    .t02c .item-caption {
        display: block;
        position: relative;
        transition: initial;
    }

    .t02c .item-headline .h3 {
        font-size: 24px;
        line-height: 28px;
    }

    .t02c .item-description {
        font-size: 16px;
        line-height: 20px;
    }

    .t02c .item-buttons {
        padding-top: 20px;
        text-align: center;
    }

    .t02c .item-buttons .item-button {
        display: block;
        margin-bottom: 15px;
    }

    .t02c .item-buttons .item-button .btn {
        width: 50%;
        padding: 8px 10px !important;
    }

    .t02c .item-info {
        text-align: center;
        padding: 10px 20px;
    }

    .t02c .carousel-indicators {
        bottom: 0;
        margin-bottom: 5px;
    }

    .t02c .carousel.indicators-on-media .carousel-indicators {
        top: var(--t02c-indicators-top);
        bottom: auto;
        margin-bottom: 0;
        transform: translateY(-100%);
    }

    .t02c .item-media {
        aspect-ratio: 480 / 276;
        overflow: hidden;
    }

    .t02c .item-media-obj {
        display: block;
        width: 100%;
        height: 100%;
    }

    .t02c .item-media-obj > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .t02c .carousel-control {
        top: 0;
        bottom: auto;
        height: calc(100vw / (480 / 276));
    }

    .t02c .carousel-indicators {
        top: calc(100vw / (480 / 276) - 10px);
        left: 50%;
        right: auto;
        bottom: auto;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding: 0;
        justify-content: center;
        transform: translate(-50%, -100%);
    }
}

@media (max-width: 400px) {
    .t02c .item-buttons .item-button .btn {
        width: 80%;
    }
}