/*Bangor Splash*/
/*Top part*/
.splash-top{
	height:60vh;
	min-height:600px;
	background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/001.jpg);
	background-size:cover;
	background-position:50% 50%;
	position: relative;
	z-index: 2;
}
.splash-spacer-one{
	height: 28vh;
}
.splash-heading{
	width:1025px;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	z-index: 3;
}
.splash-heading h1{
	margin:0;
	text-shadow:3px 3px 3px #333;
	font-size:2rem;
	font-size: calc(2rem + 1vw);
	text-align: center;
	color:#fff;
	line-height: calc(2rem + 1vw);
}
.splash-heading p{
	margin:0;
	padding-top:5vh;
	text-shadow:1px 1px 1px #333;
	font-size:1.5rem;
	font-size:calc(1rem + 0.5vw);
	color:#fff;
}
.splash-top-buttons{
	position:absolute;
	bottom:0;
	height: 7vh;
	background-color:rgba(0,0,0,0.7);
	width: 100%;
	z-index: 3;
	display: none;
}
.button-wrapper{
	width:1025px;
	margin-left:auto;
	margin-right:auto;
	line-height: 7vh;
	vertical-align: middle;
	text-align: right;
}
.splash-button{
	border:1px solid white;
	border-radius:5px;
	font-size:1rem;
	text-decoration: none;
	color: #fff!important;
	text-align: right;
	padding: 1.5vh 4vh;
	margin-left: 20px;
	background-color: #B82233;
	transition:0.3s;
}
.splash-button:hover{
    text-decoration:none;
    font-size:1.1rem;
    background-color:transparent;
}
.corner-color{
    width:49%;
    height: 50%;
    position: relative;
}
.red-bg{
    top:0;
    left:0;
    transition:0.3s;
    position:absolute;
}
.red-bg:before{
    content:"";
    opacity:0;
    width:0%;
    height:60vh;
    transition:0.3s;
    display: block;
    background-image: linear-gradient(to bottom right, rgba(255,70,70,0.2),rgba(255,70,70,0) 60%);
    position:relative;
}
.red-bg:hover:before{
    content:"";
    opacity:1;
    width:60vw;
}
.blue-bg{
    top:0;
    right:0;
    transition:0.3s;
    position:absolute;
}
.blue-bg:before{
    content:"";
    opacity:0;
    height:60vh;
    transition:0.3s;
    display: block;
    position:absolute;
    right:0;
    background-image: linear-gradient(to bottom left, rgba(0,153,255,0.2),rgba(0,153,255,0) 60%);

}
.blue-bg:hover:before{
    content:"";
    opacity:1;
    width:60vw;
    right:0;
    position:absolute;
}
.green-bg{
    bottom:0;
    right:0;
    transition:0.3s;
    position:absolute;
}
.green-bg:before{
    content:"";
    opacity:0;
    height:60vh;
    transition:0.3s;
    display: block;
    background-image: linear-gradient(to top left, rgba(0,204,153,0.2),rgba(0,204,153,0) 60%);
    position: absolute;
    bottom:0;
    left: -50vw;
}
.green-bg:hover:before{
    content:"";
    opacity:1;
    width:100vw;
}
.yellow-bg{
    bottom:0;
    left:0;
    transition:0.3s;
    position: absolute;
}
.yellow-bg:before{
    content:"";
    opacity:0;
    width:0%;
    transition:0.3s;
    display: block;
    background-image: linear-gradient(to top right, rgba(240,255,72,0.2),rgba(240,255,72,0) 60%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 60vh;
}
.yellow-bg:hover:before{
    content:"";
    opacity:1;
    width: 60vw;
}
/*About block*/
.splash-wide{
	background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/002.jpg);
	background-size:cover;
	background-position: 44% 30%;
	height: 40vh;
	position: relative;
	text-align: left;
	min-height: 300px;
}
.splash-wide .splash-corner{
	display:inline-block;
	width:50%;
	margin: 0;
	text-align: left;
}
.splash-wide .splash-corner h2{
	padding:4vh 8vh;
	background-color: rgb(255,70,70);
	}
.splash h2{
    display: inline-block;
    margin: 0;
    text-align: left;
    color: #fff;
    font-size: calc(1rem + 0.3vw);
    font-weight: normal;
    font-style: italic;
}
.splash-wide .hidebox{
	height:80%;
	width: 100%;
	margin-left: 0;
	vertical-align: top;
	transition:0.3s;
	text-align: right;
}
.splash-wide .splash-revealer{
	width:20vh;
	height:20vh;
	background-color:rgb(255,70,70);
	border-radius:100%;
	transition: 0.3s;
	vertical-align: middle;
	margin-left: 10%;
	display: inline-block;
	display: none;
}
.splash-wide .splash-revealer p{
	margin:0;
	text-align:center;
	padding-top: 38%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
}
.splash-wide .splash-pullout{
	width: 33%;
	background-color:rgb(255,70,70);
	transition: 0.3s;
	vertical-align: top;
	display: inline-block;
	margin-right: -40%;
}
.splash-wide:hover .splash-pullout{
    margin-right:0;
}
.splash-wide .splash-pullout p{
    padding:1vh;
    padding-right:5vh;
    color:#fff;
}
.splash-wide .hidebox:hover .splash-revealer{
	opacity:0;
	margin-left:0%;
}
.splash-wide .hidebox:hover{
	margin-left: 0;
}
/*two halves*/
.splash-lefthalf{
	background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/003.jpg);
	background-size:cover;
	background-position: 44% 30%;
	height: 40vh;
	position: relative;
	text-align: left;
	width:50%;
	display: inline-block;
	min-height: 300px;
}
.splash-lefthalf .splash-corner{
	display:inline-block;
	width:50%;
	margin: 0;
	text-align: left;
}
.splash-lefthalf .splash-corner h2{
	padding:4vh 8vh;
	background-color: rgb(0,153,255);
	}
.splash-lefthalf .hidebox{
	height:80%;
	width: 100%;
	margin-left: 70%;
	vertical-align: top;
	transition:0.3s;
}
.splash-lefthalf .splash-revealer{
	width:20vh;
	height:20vh;
	background-color:rgb(0,153,255);
	border-radius:100%;
	transition: 0.3s;
	vertical-align: middle;
	margin-left: 0%;
	display: inline-block;
	text-align: center;
}
.splash-lefthalf .splash-revealer p{
	margin:0;
	text-align:center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	vertical-align: middle;
	display: inline-block;
}
.splash-lefthalf .splash-pullout{
	width: 40%;
	background-color:rgb(0,153,255);
	float: right;
	transition: 0.3s;
	vertical-align: top;
}
.splash-lefthalf .splash-pullout p{
    padding:1vh;
    padding-right:5vh;
    color:#fff;
}
.splash-lefthalf .hidebox:hover .splash-revealer{
	opacity:0;
	margin-left:0%;
}
.splash-lefthalf .hidebox:hover{
	margin-left: 0;
}
.splash-righthalf{
	background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/005.jpg);
	background-size:cover;
	background-position: 44% 30%;
	height: 40vh;
	position: relative;
	text-align: left;
	width: 49%;
	display: inline-block;
	vertical-align: top;
	min-height: 300px;
}
.splash-righthalf .splash-corner{
	display:inline-block;
	width:50%;
	margin: 0;
	text-align: left;
}
.splash-righthalf .splash-corner h2{
	padding:4vh 8vh;
	background-color: rgb(0,204,153);
	}
.splash-righthalf .hidebox{
	height:80%;
	width: 100%;
	margin-left: 59%;
	vertical-align: top;
	transition:0.3s;
}
.splash-righthalf .splash-revealer{
	width:20vh;
	height:20vh;
	background-color:rgb(0,204,153);
	border-radius:100%;
	transition: 0.3s;
	vertical-align: middle;
	margin-left: 10%;
	display: inline-block;
	text-align: center;
}
.splash-righthalf .splash-revealer p{
	margin:0;
	text-align:center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
}
.splash-righthalf .splash-pullout{
	width: 50%;
	background-color:rgb(0,204,153);
	float: right;
	transition: 0.3s;
	vertical-align: top;
}
.splash-righthalf .splash-pullout p{
    padding:1vh;
    padding-right:5vh;
    color:#fff;
}
.splash-righthalf .hidebox:hover .splash-revealer{
	opacity:0;
	margin-left:0%;
}
.splash-righthalf .hidebox:hover{
	margin-left: 0;
}
/*Feature Boxes*/
#splash-boxes{width:100%;min-width:1025px;display: inline-block;background-color: #fff;}
.spl-box{width:250px;display: inherit;margin: 0px 20px;padding: 30px 0;vertical-align: top;}
.icon-wrapper{border-radius:100%;height:200px;width:200px;border: 10px solid lightgrey;overflow:hidden;margin-left: auto;margin-right: auto;box-sizing: border-box;transition: 0.2s;}
.spl-box p{text-align:center;color: #555;text-shadow: none;}
.spl-box h3{text-align:center;margin: 0;padding: 15px;font-size: 1.7em;}
.icon-wrapper img{width: 80%;vertical-align: middle;}
.box-4 .icon-wrapper img{width:95%; vertical-align: middle;}
.box-2 .icon-wrapper img{height:95%;width:auto;vertical-align: middle;}
.spl-box a{
    display:block;
    text-decoration:none!important;
}
.spl-helper{
    display:inline-block;
    vertical-align:middle;
    height: 100%;
}
.spl-box.box-1:hover .icon-wrapper{
    border:20px solid blue;
}
.spl-box.box-2:hover .icon-wrapper{
    border:20px solid orange;
}
.spl-box.box-3:hover .icon-wrapper{
    border:20px solid red;
}
.spl-box.box-4:hover .icon-wrapper{
    border:20px solid yellow;
}
.spl-box h3:after{
    content:"";
    height:2px;
    background-color:lightgrey;
    width:80%;
    display:inline-block;
}
.spl-box.box-1:hover h3:after{
    background-color:blue;
}
.spl-box.box-2:hover h3:after{
    background-color:orange
}
.spl-box.box-3:hover h3:after{
    background-color:red;
}
.spl-box.box-4:hover h3:after{
    background-color:yellow;
}
/*Bottom boxes*/
/*images*/
.splash-tophalf .splash-lefthalf{
    background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/007.jpg)
}
.splash-tophalf .splash-lefthalf .splash-piebox{
    background-color:rgb(255,70,70);
}
.splash-tophalf .splash-righthalf{
    background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/004.jpg);
}
.splash-bothalf .splash-lefthalf{
    background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/008.jpg)
}
.splash-bothalf .splash-righthalf{
    background-image:url(https://learn.stocktrak.com/wp-content/uploads/2018/10/006.jpg);
    background-position:100%;
}
/*box common styling*/
.splash-pie-full{
    width:0;
    height:0;
    transition:0.3s;
    position:absolute;
}
.splash-pie-full h2, .splash-pie-full p{
    font-size:0;
    transition:0.3s;
}
.splash-letter{
    display:inline-block;
    width: 40vh;
    height: 40vh;
    z-index: 4;
    position:absolute;
    text-align: left;
    vertical-align: middle;
}
.splash-tophalf .splash-lefthalf, .splash-tophalf .splash-righthalf,
.splash-bothalf .splash-lefthalf, .splash-bothalf .splash-righthalf{
    position:relative;
    overflow: hidden;
}
.splash-letter{
    border-radius: 100%;
    transition:0.3s;
}
.splash-letter h1{
    display: inline-block;
    margin:0;
    text-align: left;
    margin-left: 10vh;
    font-size: 9vh;
    color: #fff;
}
.splash-tophalf .splash-lefthalf:hover .splash-pie-full, .splash-tophalf .splash-righthalf:hover .splash-pie-full,
.splash-bothalf .splash-lefthalf:hover .splash-pie-full, .splash-bothalf .splash-righthalf:hover .splash-pie-full{
    width:35vh;
    height:35vh;
    min-height: 250px;
}
.splash-tophalf .splash-lefthalf:hover h2, .splash-tophalf .splash-lefthalf:hover p,
.splash-tophalf .splash-righthalf:hover h2, .splash-tophalf .splash-righthalf:hover p,
.splash-bothalf .splash-lefthalf:hover h2, .splash-bothalf .splash-lefthalf:hover p,
.splash-bothalf .splash-righthalf:hover h2, .splash-bothalf .splash-righthalf:hover p{
    color:#fff;
    padding:1vh;
}
.splash-tophalf .splash-lefthalf:hover h2,
.splash-tophalf .splash-righthalf:hover h2,
.splash-bothalf .splash-lefthalf:hover h2,
.splash-bothalf .splash-righthalf:hover h2{
    font-size:calc(1rem + 0.3vw);
}
.splash-tophalf .splash-lefthalf:hover p,
.splash-tophalf .splash-righthalf:hover p,
.splash-bothalf .splash-lefthalf:hover p,
.splash-bothalf .splash-righthalf:hover p{
    font-size:14px;
    font-size: calc(9px + 0.6vh);
}
.splash-letter h1{
    display: inline-block;
    margin:0;
    text-align: left;
    margin-left: 10vh;
    font-size: 9vh;
    color: #fff;
}
/*Box specific*/
/*Top Left*/
.splash-tophalf .spl-helper{
	height: 76%;
}
.splash-tophalf .splash-lefthalf .splash-pie-full{
	right:0;
    bottom:0;
    background-color: rgb(255,70,70);
}
.splash-tophalf .splash-lefthalf .splash-letter{
    bottom: -20vh;
    right: -20vh;
    background-color: rgb(255,70,70);
}
.splash-tophalf .splash-lefthalf:hover .splash-letter{
    right:-50vh;
}
/*Top right*/
.splash-tophalf .splash-righthalf .splash-pie-full{
	bottom: 0;
	left:0;
	background-color: rgb(240,255,72);
}
.splash-tophalf .splash-righthalf .splash-letter{
    bottom: -20vh;
    left: -20vh;
    background-color: rgb(240,255,72);
}
.splash-tophalf .splash-righthalf:hover .splash-letter{
    left:-50vh;
}
.splash-tophalf .splash-righthalf .splash-letter h1{
	text-align:right;
	margin-left: 24vh;
	color:#333;
}
.splash-tophalf .splash-righthalf:hover p, .splash-tophalf .splash-righthalf:hover h2{
	color:#333;
}
/*bottom Left*/
.splash-bothalf .spl-helper{
	height: 156%;
}
.splash-bothalf .splash-lefthalf .splash-pie-full{
	right:0;
    top:0;
    background-color: rgb(0,153,255);
}
.splash-bothalf .splash-lefthalf .splash-letter{
    top: -20vh;
    right: -20vh;
    background-color: rgb(0,153,255);
}
.splash-bothalf .splash-lefthalf .splash-letter h1{
	text-align:left;
	margin-left: 10vh;
	margin-top:24vh;
}
.splash-bothalf .splash-lefthalf:hover .splash-letter{
    right:-50vh;
}
/*bottom right*/
.splash-bothalf .splash-righthalf .splash-pie-full{
	left:0;
    top:0;
    background-color: rgb(0,204,153);
}
.splash-bothalf .splash-righthalf .splash-letter{
    left: -20vh;
    top: -20vh;
    background-color: rgb(0,204,153);
}
.splash-bothalf .splash-righthalf:hover .splash-letter{
    left:-50vh;
}
.splash-bothalf .splash-righthalf .splash-letter h1{
	text-align:right;
	margin-left: 24vh;
	margin-top:24vh;
}


.splash {
    text-align: center;
}