body {
  background-color: #ff56fd;
}

/* Split the screen in half */
.colorBG{
	background-color: #35c5f3;
}
.h1, h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;	
  font-size: 24px;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 10px;
  margin-top: 1px;
  margin-bottom: 10px;    
}

@media (min-width: 768px) {
  .h1, h1 {
    font-size: 32px;
  }
}

@media (min-width: 992px) {
  .h1, h1 {
    font-size: 42px;
  }
}

.storyMode {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  color: #FFF;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1.2px;
  word-spacing: 1.5px;
  margin: 20px;
}

@media (min-width: 414px){
	.storyMode{
	font-size: 14px;
	font-weight: 600;	
}
}

@media (min-width: 576px){
	.storyMode{
	font-size: 14px;
}
}

@media (min-width: 992px){
.storyMode {
  font-size: 20px;
}
}

@media (min-width: 1920px) {
  .storyMode {
    font-size: 24px;
  }
}

#splt2{
	align-content: center
}

.leftSide, .rightSide{
	height: 50vh;
	width: 100%;
}


@media screen and (min-width:568px) and (min-height:320px){
	.leftSide, .rightSide{
	height: 70vh;
}
}

@media screen and (min-width:600px) and (min-height:1024px){
	.leftSide, .rightSide{
	height: 25vh;
}
}

@media screen and (min-width:600px) and (min-height:1024px){
	.leftSide, .rightSide{
	height: 25vh;
}
}
@media screen and (min-width:640px) and (min-height:360px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:667px) and (min-height:375px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:736px) and (min-height:414px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:768px) and (min-height:1024px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:800px) and (min-height:480px){
	.leftSide, .rightSide{
	height: 85vh;
}
}
@media screen and (min-width:800px) and (min-height:1280px){
	.leftSide, .rightSide{
	height: 40vh;
}
}
@media screen and (min-width:960px) and (min-height:600px){
	.leftSide, .rightSide{
	height: 80vh;
}
}

@media screen and (min-width:1024px) and (min-height:600px){
	.leftSide, .rightSide{
	height: 80vh;
}
}
@media screen and (min-width:1024px) and (min-height:768px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:1024px) and (min-height:1366px){
	.leftSide, .rightSide{
	height: 40vh;
}
}
@media screen and (min-width:1024px) and (min-height:1440px){
	.leftSide, .rightSide{
	height: 40vh;
}
}
@media screen and (min-width:1280px) and (min-height:800px){
	.leftSide, .rightSide{
	height: 70vh;
}
}
@media screen and (min-width:1366px) and (min-height:1024px){
	.leftSide, .rightSide{
	height: 70vh;
}
}

@media screen and (min-width:1440px) and (min-height:1024px){
	.leftSide, .rightSide{
	height: 70vh;
}
}

/* Control the left side */
.leftSide {
 background: #ff56fd;
}

/* Control the right side */
.rightSide {
  background: #8e24aa;
}


/*---SPLIT BANNER---*/
.miniBanner{
	align-content: center;
	position: relative;
	height: 0px;
}

@media screen and (min-width:800px) and (min-height:480px){
	.miniBanner{
	align-content: center;
	height: 120px;
}
}

@media screen and (min-width:960px) and (min-height:600px){
	.miniBanner{
	align-content: center;
	height: 180px;
}
}

@media screen and (min-width:1024px) and (min-height:600px){
	.miniBanner{
	align-content: center;
	height: 180px;
}
}

@media screen and (min-width:1024px) and (min-height:768px){
	.miniBanner{
	align-content: center;
	height: 200px;
}
}

@media screen and (min-width:1280px){
	.miniBanner{
	align-content: center;
	height: 250px;
}
}

.bannerLeft{
	background-image: url("../img/split/splitLefty.jpg");
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;   
}

/*.bannerLeft:hover{
	background-image: url("../img/split/splitLeftyHover.jpg");
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;

}*/

.bannerRight{
	background-image: url("../img/split/splitRighty.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}
/*.bannerRight:hover{
	background-image: url("../img/split/splitRightyHover.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}*/

.cepiaBox{
	align-content: center;
	height: 100px;
	margin-top: 25px;
}

.cepiaLogo{
	background-image: url("../img/logos/cepia_logo.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.copyRight {
  font-family: "Raleway", sans-serif;
  text-align: center;
  color: #ffffff;
  font-weight: 600;	
  font-size: 18px;
  margin: 25px 0 10px 0;
}