* {
 
  box-sizing: border-box;
}

/* Sliding Banner Section */

.banner-container { width:100%; position:relative; overflow:hidden; max-height:100%;}
 
.creative-banner { position:absolute; top:200px; left:90px; width:730px; height:300px; }
.creative-banner a { text-decoration:none }
.creative-text-1 { color:#fff; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block; margin-bottom:5px; line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
 .creative-text-2 { color:#0396e6; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block;line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
 
.diverse-banner { position:absolute; top:180px; left:100px; width:730px; height:300px; }
.diverse-banner a { text-decoration:none }
.diverse-text-1 { color:#fff; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block; margin-bottom:5px; line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
.diverse-text-2 { color:#0396e6; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block;line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
 
 .sustainability-banner { position:absolute; top:180px; left:100px; width:730px; height:300px; }
.sustainability-banner a { text-decoration:none }
.sustainability-text-1 { color:#fff; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block; margin-bottom:5px; line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
.sustainability-text-2 { color:#0396e6; font-family: "Raleway", sans-serif; font-weight: 600; font-size:36px; display:block;line-height:40px;
 animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; 
    opacity:0;
 }
 
@media screen and (max-width: 1450px) {
	
	.creative-banner { position:absolute; top:35%; left:5%; width:600px; height:300px; }
	.creative-text-1, .creative-text-2, .diverse-text-1, .diverse-text-2, .sustainability-text-1, .sustainability-text-2 { font-size:30px; line-height:36px; }
	
	.diverse-banner { position:absolute; top:35%; left:5%; width:600px; height:300px; }
	
	.sustainability-banner { position:absolute; top:35%; left:5%; width:600px; height:300px; }
}	
 
@media screen and (max-width: 1000px) {

	.creative-banner { position:absolute; top:25%; left:10%; width:270px; height:250px; }
	.creative-text-1, .creative-text-2, .diverse-text-1, .diverse-text-2, .sustainability-text-1, .sustainability-text-2 { font-size:26px; line-height:30px; }
	
	.diverse-banner { position:absolute; top:35%; left:5%; width:600px; height:300px; }
	
	.sustainability-banner { position:absolute; top:35%; left:5%; width:600px; height:300px; }
}	

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

	.creative-banner { position:absolute; top:auto; bottom:30px; width:320px; margin-left:-160px; left:50%; height:auto; text-align:center}
	
	.creative-text-1, .creative-text-2, .diverse-text-1, .diverse-text-2, .sustainability-text-1, .sustainability-text-2 { font-size:26px; line-height:30px; }
	
	.diverse-banner { position:absolute; top:auto; bottom:30px; width:320px; margin-left:-160px; left:50%; height:auto; text-align:center}
	
	.sustainability-banner { position:absolute; top:auto; bottom:30px; width:320px; margin-left:-160px; left:50%; height:auto; text-align:center}
}	
	

.splide__pagination { bottom:-30px!important;}

.splide__pagination__page { background:#7d92a5!important; border-radius:0!important; width:35px!important; height:6px!important;}

.splide__pagination__page.is-active { background:#0396e6!important; transform:none!important}

.splide__arrow { background:none!important}

.splide__arrow svg { width:30px!important; height:30px!important; }



@keyframes fade-in-and-scale-effect {
  0%   { 
opacity:0;
-ms-transform: scale(0.5);
transform: scale(0.5);

}
  100% { 
opacity:1;
-ms-transform: scale(1);
transform: scale(1);
}
}

@keyframes fade-in-and-slide-up-effect {
  0%   { 
opacity:0;
-ms-transform: translatey(20px);
  transform: translatey(20px);

}
  100% { 
opacity:1;
-ms-transform: translatey(0px);
  transform: translatey(0px);
}
}

@keyframes fade-in-from-right {
  0%   { 
opacity:0;
-ms-transform: translatex(30px);
  transform: translatex(30px);

}
  100% { 
opacity:1;
-ms-transform: translatex(0px);
  transform: translatex(0px);
}
}

.index-content-container { width:100%; position:relative; margin:120px auto 60px auto;}

.index-content-col-1 { width:24%; float:left; padding-top:20px; padding-bottom:20px; margin-left:2%;}
.index-content-col-2 { width:20%; float:left; margin-left:2%; margin-right:2%;}
.index-content-col-3 { width:24%; float:left; padding-top:20px; padding-bottom:20px;margin-left:2%; margin-right:2%;}
.index-content-col-4 { width:20%; float:left; margin-right:2%;}


.index-regional-presence-container { width:100%;}

.index-regional-presence-img { float:left; width:40%; margin-right:2%; position:relative;}
.index-regional-presence-img span { position:absolute; background:rgba(0, 0, 0, 0.8); color:#fff; width:80%; right:0; bottom:0; padding:15px; font-family: "Raleway", sans-serif; font-weight: 600; font-size:18px; line-height:22px;}

.index-regional-presence-text { float:left; width:45%; margin-right:13%; padding:20px;}

.map-img { margin:20px 0;width:450px;height:159px; }
    
@media screen and (max-width: 768px) {

	.index-content-container { width:100%; position:relative; margin:70px auto 30px auto;}
	.index-content-col-1 { width:90%; float:none; padding-top:20px; padding-bottom:20px; margin:0 auto;}
	.index-content-col-2 { width:90%; float:none; margin:0 auto;}
	.index-content-col-3 { width:90%; float:none; padding-top:20px; padding-bottom:20px; margin:30px auto 0 auto; }
	.index-content-col-4 { width:90%; float:none; margin:0 auto;}
	
	.index-regional-presence-img { float:none; width:100%; margin:20px auto 0 auto; }
	.index-regional-presence-text { float:none; width:90%; margin:0 auto; padding:20px 0;}
	
	.map-img { margin:20px 0;width:100%; height:auto }
}