
/*-- Banner --*/
.stBanner { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; }
    .stBanner .stBanner-group { display: none; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; height: 780px; background: transparent center center no-repeat; background-size: cover; }

        .stBanner .stBanner-group.active { display: flex; /*animation: activeFade 2s;*/ }
		/* .stBanner .stBanner-group.hidden { animation: activeFadeOut 2s; } */

        .stBanner .stBanner-group img { width: 100%; }


.stBanner .caption { width:100%; }
    .stBanner .caption h1 { font-size:105px; color:#fff; width:100%; text-align:center; }
    .stBanner .caption p { text-align:center; margin:40px 0; color:#fff; font-size:24px; }
        .stBanner .caption p span { border-right:3px solid #000; padding:0 10px 0 5px; }
            .stBanner .caption p span:last-of-type { border:none; }
    .stBanner .caption .btn { display:table; }



.stBanner .stBanner-Navigation { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; display: flex; justify-content: center; align-items: center; }

    .stBanner .stBanner-Navigation .left,
    .stBanner .stBanner-Navigation .right { display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; font-family: Prompt; cursor: pointer; }

        .stBanner .stBanner-Navigation .right::before { content:''; height:30px; width:30px; background:url(../Images/whiteArrow.png); background-size:cover;  }
		.stBanner .stBanner-Navigation .left::before { content:''; height:30px; width:30px; background:url(../Images/whiteArrow.png); background-size:cover; transform:rotate(180deg); }

        .stBanner .stBanner-Navigation .left:hover::before,
        .stBanner .stBanner-Navigation .right:hover::before { color: blue; }

	.stBanner > .left { position:absolute; left:0; z-index:1; }
    .stBanner > .right { position:absolute; right:0; z-index:1; }


    .stBanner .stBanner-Navigation .thumb { display:inline-block; width: 20px; height: 20px; filter: grayscale(0); cursor: pointer; background-color: #fff; margin: 0 5px; user-select: none; border-radius: 50px; }
		.stBanner.dots .stBanner-Navigation .thumb.active { border: 1px solid #000; opacity: 1; background-color:#000; }

.stBanner.title .stBanner-Navigation .thumb { color: #fff; display:flex; justify-content:center; align-items:center; }
.stBanner.numbers .stBanner-Navigation .thumb { color: #fff;  display:flex; justify-content:center; align-items:center; }
.stBanner.dots .stBanner-Navigation .thumb { border-radius: 50px; }

@media only screen and (max-width: 1279px) {
	.stBanner .stBanner-group { height:600px; }
	.stBanner .caption h1 { font-size:85px; }
	.stBanner .caption p { font-size:19px; }
}

@media only screen and (max-width: 991px) {
	.stBanner .caption p span { width:100%; display:block; border:none; }
}




/* @keyframes activeFade { */
    /* 0% { opacity: 0; z-index:0; } */
    /* 100% { opacity: 1; z-index:1; } */
/* } */

/* @keyframes activeFadeOut { */
    /* 0% { opacity: 1; z-index:1; } */
    /* 100% { opacity: 0; z-index:0; } */
/* } */








/*---RotatingBanner-ex1---*/
.rotatingBanner-ex1 { height:597px; }
	.rotatingBanner-ex1 .stBanner-Navigation { left:unset; right:30px; }
	.rotatingBanner-ex1 .stBanner-group { height:597px; }
	.rotatingBanner-ex1 .caption { height:330px; background:rgba(0,0,0,0.5); }
	.rotatingBanner-ex1 .stBanner-group img { height:auto; width:auto; position:relative; top:0px; margin:0 auto; display:block; margin-top:-38px; border-radius:20px; border:3px solid #fff; }
	.rotatingBanner-ex1 .caption h4 { color:#fff; font-size:38px; margin-top:60px; }
	.rotatingBanner-ex1 .caption p { font-size:18px; color:#fff; font-weight:200; text-align:left; width:100%; max-width:550px; margin-top:20px; }
	.rotatingBanner-ex1 .stBanner-Navigation .left,
	.rotatingBanner-ex1 .stBanner-Navigation .right { display:none; }
	.rotatingBanner-ex1 .stBanner-Navigation .thumb { width:10px; height:10px; }


@media only screen and (max-width: 1419px) {
	.rotatingBanner-ex1 .caption .col-2 { padding:0 40px; }
}

@media only screen and (max-width: 1365px) {
	.rotatingBanner-ex1 .stBanner-group img { margin-top:-21px; }
}
 
@media only screen and (max-width: 1279px) {
	.rotatingBanner-ex1 .caption .col-2 > div { width:50%; }
	.rotatingBanner-ex1 .stBanner-group img { margin-top:20px; }
}

@media only screen and (max-width: 768px) {
	.rotatingBanner-ex1 .caption .col-2 > div { width:100%; }
	.rotatingBanner-ex1 .caption .col-2 > div:first-of-type { display:none; }
	
}





/*---RotatingBanner-ex2---*/
.rotatingBanner-ex2 { height:597px; }
	.rotatingBanner-ex2 .stBanner-Navigation { left:unset; right:30px; }
	.rotatingBanner-ex2 .stBanner-group { height:597px; }
	.rotatingBanner-ex2 .caption { height:330px; background:none; padding:0 130px }
	.rotatingBanner-ex2 .stBanner-group img { height:auto; width:auto; position:relative; top:0px; margin:0 auto; display:block; margin-top:-38px; border-radius:20px; border:3px solid #fff; }
	.rotatingBanner-ex2 .caption h4 { color:#fff; font-size:38px; margin-top:60px; }
	.rotatingBanner-ex2 .caption p { font-size:18px; color:#fff; font-weight:200; text-align:left; width:100%; max-width:550px; margin-top:20px; }
	.rotatingBanner-ex2 .stBanner-Navigation .left,
	.rotatingBanner-ex2 .stBanner-Navigation .right { display:none; }
	.rotatingBanner-ex2 .stBanner-Navigation .thumb { width:10px; height:10px; }


@media only screen and (max-width: 1419px) {
	.rotatingBanner-ex2 .caption .col-2 { padding:0 40px; }
}

@media only screen and (max-width: 1365px) {
	.rotatingBanner-ex2 .stBanner-group img { margin-top:-21px; }
}
 
@media only screen and (max-width: 1279px) {
	.rotatingBanner-ex2 .caption .col-2 > div { width:50%; }
	.rotatingBanner-ex2 .stBanner-group img { margin-top:20px; }
}

@media only screen and (max-width: 768px) {
	.rotatingBanner-ex2 .caption .col-2 > div { width:100%; }
	.rotatingBanner-ex2 .caption .col-2 > div:last-of-type { display:none; }
	
}











