/* FONT CUSTOMIZATIONS */

h1, h2, h3 {font-weight:bold !important}
h1 {font-size:3rem !important}
h2 {font-size:2.5rem !important}
h3 {font-size:1.5rem !important}
h5 {line-height: 1.2em !important;}

.btn-primary {
    color: #002d72 !important;
    background-color: #c4d600 !important;
    border-color: #c4d600 !important;
}
.btn {
    border-radius: 25px !important;
}
.text-lime {color: #c4d600 !important}

#main-header #blue-wave-inner #main-header-lob a {
    font-size: 1.6em;
}

#dropdownMenu2.btn-secondary {background-color:#ffffff; 
    border-color: #ffffff;
    color: #53565a; font-weight:lighter}




/* LAYERS - MOBILE FIRST */
/* This first section pertains to xs size and up. media queries ahead to cover any overrides needed for sm, md, lg, xl */
/* Note also that any mods will cascade up to next size in order listed below and may need to be overridden in each */

#hero {overflow:hidden; position:relative}
.mantle-bg-wrapper {position:absolute; overflow-x:visible; width:100%;  }
img.mantle-bg {position:absolute; margin-top:-1460px}
.mantle {position:relative; overflow:visible;  }
.mantle .row {overflow:visible; position: relative; }
.solution-nav-box {width:100%; height:auto; border-bottom:6px solid #ffffff; border-radius: 4px; background-color: #ffffff; margin: 5px;  filter: drop-shadow(0 0 0.25rem #000000); padding:10px 10px; text-align:center}
.solution-nav-box:hover {border-bottom:6px solid #00bdf2; filter: drop-shadow(0 0 0.75rem #000000);}
.mantle-inner2 a {text-decoration:none; color:#53565a}
.mantle-inner2 .arrow {width:100%; position:absolute; display: flex; bottom:30px; align-items:center;  justify-content: center;}
#spring-hero-background-shape1 { transform: rotate(-30deg) ; opacity:0; transition: all 1.5s; }
#spring-hero-background-shape1.reset { transform: rotate(0deg) ; opacity:1; }
#spring-hero-background-shape2 { transform: rotate(-30deg) ; opacity:0; transition: all 1s; }
#spring-hero-background-shape2.reset { transform: rotate(0deg) ; opacity:1; }
#spring-hero-background-shape3 { transform: rotate(-30deg) ; opacity:0; transition: all 1.5s; }
#spring-hero-background-shape3.reset { transform: rotate(0deg) ; opacity:1; }
#spring-hero-background-shape4 { transform: rotate(-30deg) ; opacity:0; transition: all 1s; }
#spring-hero-background-shape4.reset { transform: rotate(0deg) ; opacity:1; }




#module1 {overflow:hidden; }
.module1 {overflow:visible; position: relative; }
.solution-inner {position:relative; display:flex;  justify-content: center;  width:100%;   }
.solution-inner-photo {position:relative; width:100%; }
/*.solution-inner2 {position:absolute; overflow:visible; display:flex; align-items:center;  justify-content: center;  width:100%; }*/
#module1-bg {position:absolute;  overflow:visible; width:80%; transform: translateY(0%)  translateX(5%); opacity:0; transition: all 1.5s;}
#module1-bg.reset { transform: translateY(0%) translateX(-15%); opacity:1;}
#module1-photo {width:100%; transform: translateX(20%); opacity:0; transition: all 1s; }
#module1-photo.reset { transform: translateX(0%); opacity:1; }
#module1-text { transform: translateX(-20%); opacity:0; transition: all 1.5s;}
#module1-text.reset {  transform: translateX(0px); opacity:1; }
#module1-bg img {width:100%;  }
#module1-photo img {width:100%;  }
.solution-icon {width:65px; display:flex; align-items:center;  justify-content: center; }


#module2 {overflow:hidden}
.module2 {overflow:visible; position: relative; }
#module2-bg {overflow:visible; position:absolute; width:100%; transform: translateX(25%) translateY(18%) }

.carousel-indicators {
	position:absolute !important;
	top:25%;
    left: 0;
    z-index: 15;
    -ms-flex-pack: left;
    justify-content: left;
    padding: 0 !important;
    margin: 0 !important;
	/*transform: rotate(90deg);*/
	width:77px;
	height:218px;
	display:block;
	background-image: url("/icg/sa/spring/assets/img/solutions/indicator-line.png");
	background-repeat:no-repeat;
	background-position:center center;
}



.carousel-indicators li {
    background-color: #fff;
    height: 15px;
    width: 15px;
	margin:30px;
    border: 1px solid #00bdf2;
    border-radius: 50%;
	
}

.carousel-indicators li.active {
    height: 15px;
    width: 15px;
    border: 1px solid #00bdf2;
    background-color: #00bdf2;
    margin: 30px;
}

.carousel-item {padding-left:20%}
.carousel-item h3 {padding-top:40%}




#module3 {overflow:hidden; }
.module3 {overflow:visible; position: relative; }
#module3-bg {position:absolute;  overflow:visible;  width:80%; transform: translateY(0%)  translateX(0%); opacity:0; transition: all 1.5s;}
#module3-bg.reset { transform: translateY(0%) translateX(15%); opacity:1;}
#module3-photo {width:100%; transform: translateX(-20%); opacity:0; transition: all 1s; }
#module3-photo.reset { transform: translateX(0%); opacity:1; }
#module3-text { transform: translateX(20%); opacity:0; transition: all 1.5s;}
#module3-text.reset {  transform: translateX(0px); opacity:1; }
#module3-bg img {width:100%;  }
#module3-photo img {width:100%;  }



.module4 { width:100%; }
.module4 img { width:60%; }




#module5 {overflow:hidden; }
.module5 {overflow:visible; position: relative; }
#module5-bg {position:absolute;  overflow:visible;  width:80%; transform: translateY(0%)  translateX(5%); opacity:0; transition: all 1.5s;}
#module5-bg.reset { transform: translateY(0%) translateX(-15%); opacity:1;}
#module5-photo {width:100%; transform: translateX(20%); opacity:0; transition: all 1s; }
#module5-photo.reset { transform: translateX(0%); opacity:1; }
#module5-text { transform: translateX(-20%); opacity:0; transition: all 1.5s;}
#module5-text.reset {  transform: translateX(0px); opacity:1; }
#module5-bg img {width:100%;  }
#module5-photo img {width:100%;  }



#module6 {overflow:hidden; }
.module6 {overflow:visible; position: relative; }
#module6-bg {position:absolute; overflow:visible;  width:80%; transform: translateY(0%)  translateX(0%); opacity:0; transition: all 1.5s;}
#module6-bg.reset { transform: translateY(0%) translateX(15%); opacity:1;}
#module6-photo {width:100%; transform: translateX(-20%); opacity:0; transition: all 1s; }
#module6-photo.reset { transform: translateX(0%); opacity:1; }
#module6-text { transform: translateX(20%); opacity:0; transition: all 1.5s;}
#module6-text.reset {  transform: translateX(0px); opacity:1; }
#module6-bg img {width:100%;  }
#module6-photo img {width:100%;  }



#module7 {overflow:hidden; }
.module7 {overflow:visible; position: relative; }
#module7-bg {position:absolute;  overflow:visible;  width:80%; transform: translateY(0%)  translateX(5%); opacity:0; transition: all 1.5s;}
#module7-bg.reset { transform: translateY(0%) translateX(-15%); opacity:1;}
#module7-photo {width:100%; transform: translateX(20%); opacity:0; transition: all 1s; }
#module7-photo.reset { transform: translateX(0%); opacity:1; }
#module7-text { transform: translateX(-20%); opacity:0; transition: all 1.5s;}
#module7-text.reset {  transform: translateX(0px); opacity:1; }
#module7-bg img {width:100%;  }
#module7-photo img {width:100%;  }


#module8 {overflow:hidden; }


#get-started {overflow:hidden}
.get-started {overflow-x:visible; position: relative; margin-left: auto; margin-right: auto; }
.get-started-inner1 {position:absolute; height:250px; overflow:visible; transform: translateX(-40%); }
.get-started-inner2 {padding-left: 5%; padding-right: 5%; transform: translateY(-0%);}
#get-started-background-shapes img {height:250px; transform: translateY(0); transform: translateX(10%);}
#get-started-text {padding-right:10%; padding-top: 50px; padding-left:0%}
#get-started-form {padding-top: 50px; padding-left: 5%; padding-right: 5%; }



/* MEDIA QUERIES */
/* Extra small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	
.mantle-inner1 img.mantle-bg {width:800%; height:916%; transform: translateY(-60%);  } /* height of this image is 1.14 x width */
.mantle-inner2  { 
	padding-bottom: 0px;
}
	

}

/* Medium-Large devices (desktops, Tablet and up, 768px and up)  */
@media (min-width: 768px) { 

	img.mantle-bg {margin-top:-1450px}

.mantle-inner1 img.mantle-bg {width:200%; height:228%; transform: translateY(-60%);  } /* height of this image is 1.14 x width */
.mantle-inner2 {padding-bottom:100px}
#spring-hero-lines img {visibility:visible; width:140%; }

.carousel-item {padding-left:10%}

.module4 img { width:100%; padding:0 0%}

	
.get-started-inner1 {height:300px; transform: translateX(-30%); }
.get-started-inner2 {height:300px;  }
#get-started-background-shapes img {height:300px; }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

img.mantle-bg {margin-top:-1500px}

.mantle-inner2 {padding-bottom:120px}
	
	
.solution-nav-box {height:300px;  padding:50px 10px; text-align:center}
	
.get-started {overflow:visible; height:450px;}
.get-started-inner1 {position:absolute; height:450px; transform: translateX(-70%); }
.get-started-inner2 {position:absolute; height:450px; overflow:visible; margin-left: 0%;  }
#get-started-background-shapes img {height:450px; }
#get-started-text {padding-right:25%; }
#get-started-form {padding-left:50px}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	
img.mantle-bg { margin-top:-1360px}
	
.mantle-inner2 {padding-bottom:250px}
	
.get-started-inner1 {transform: translateX(-60%); }

}




/* -------------- IE HACKS ------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .mantle-bg-wrapper { left:-960px; text-align:center }
	.solution-inner #module1-bg img {transform: translateX(12.5%)}
	.solution-inner #module3-bg img {transform: translateX(12.5%)}
	.solution-inner #module5-bg img {transform: translateX(12.5%)}
	.solution-inner #module6-bg img {transform: translateX(12.5%)}
	.solution-inner #module7-bg img {transform: translateX(12.5%)}
}

/* IF NEEDED LATER - MORE MEDIA QUERIES FOR IE

@media all and (min-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

@media all and (min-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
*/