@charset "utf-8";
/* CSS Document */
html, body {
  padding:0;
  margin:0;
  font-family: 'Montserrat', 'Arial Narrow', Arial, sans-serif;
	font-weight: 400;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

h1 {
  font-size: 3rem;
  color: #fff;
	font-weight: 400;
	text-align: left;
	letter-spacing:normal;
}
	p.disp {
		line-height: 1.5;
		font-family: 'Open Sans', sans-serif;
		color: #fff;
	text-align: left;
		font-size: 1.5rem;
		width: 718px;
		text-shadow: 3px 3px 2px rgba(0,0,0,.7);
	}
		a {
			text-decoration:none;
		}

		h3 {
			letter-spacing:normal; 
			font-family: Roboto; 
			font-weight: 100; 
			color: #fff; 
			opacity: .3;
			font-size: 24px;
		}
:focus { outline:auto 1px #04b9f6;}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #444;
  
    
}
.container .screen {
      position: absolute;
      width: 50%;
      height: 100%;
      overflow: hidden;
    }
.screen.left {
  left:0;
  background: url('../images/seap.jpg') center center no-repeat;
  background-size: cover;
}
		.screen.left a h4 {
			color: #fff;
			text-decoration: none;
			font-weight: 400;
			font-size: 20px;
			padding-top: 19px;
		}
		.screen.left a:hover h4 {
			color: #ddd;
		}
		
		.rightside a h4 {
			color: #fff;
			text-decoration: none;

		}
		.rightside a:hover h4 {
			color: #ddd;
		}
		

.screen.right {
  right:0;
  background: url('../images/nreip.jpg') center center no-repeat;
  background-size: cover; 
}
		.screen.right a h4 {
			color: #fff;
			font-weight: 400;
			font-size: 20px;
			padding-top: 19px;
		}
		.screen.right a:hover h4 {
			color: #ddd;
		}

.screen.left, .screen.right {
  transition: 1000ms all ease-in-out;
}

.hover-left .left {
  width: 75%;
}

.hover-left .right {
  width: 25%;
}


/*Hover right screen*/

.hover-right .right {
  width: 75%;
}

.hover-right .left {
  width: 25%;
}
		.linkbxlt {
		margin-left: -30%; 
			margin-top: 20px; 
			width: 100%; 
			background-color: #a26a02; 
			height: 60px; 
			text-align: right; 
			padding: 0px 20px 0 0;
		}
		.linkbxrt {
			margin-left: -33.5%; 
			margin-top: 20px; 
			width: 100%; 
			background-color: #003b4f; 
			height: 60px; 
			text-align: right; 
			padding: 0px 20px 0 0;
		}

/*		@media (min-width: 1025px) {
		h1 {
		  font-size: 3rem;
		}
			p.disp {
				font-size: 1rem;
				width: 200px;
			}
		}*/
@media (min-width: 769px) {
		p.disp {
					font-size: 1rem;
						width: 350px;
				}
		}
		@media (max-width: 768px) {
		  h1 {
				font-size: 2rem;
			  }

					p.disp {
					font-size: 1.1rem;
						width: 175px;
				}
			.hover-left .left {
			  width: 50%;
			}

			.hover-left .right {
			  width: 50%;
			}


			/*Hover right screen*/

			.hover-right .right {
			  width: 50%;
			}

			.hover-right .left {
			  width: 50%;
			}

		}
		@media (max-width: 414px) {
			h3 {
				font-size: 14px;
			}
			p.disp {
				font-size: .8rem;
					width: 175px;
			}
			.linkbxlt {
				margin-left:-21px;
			padding: 3px 20px 0 0;
			}
			.linkbxrt {
				margin-left: -21px;
			padding: 3px 20px 0 0;
			}
			.screen.right a h4 {
			margin-top: 0;
			}
			.screen.left a h4 {
			margin-top: 0;
			}
		}
		@media (max-width: 320px) {
			h1 {
			font-size: 2rem;
		  }
		 p.disp {
				font-size: .8rem;
					width: 140px;
			}
			.hover-left .left {
			  width: 50%;
			}

			.hover-left .right {
			  width: 50%;
			}
			.screen.right a h4 {
			font-size: 16px;
			padding-top: 0;
			margin-top: 19px;
			}
			.screen.left a h4 {
			font-size: 16px;
			padding-top: 0;
			margin-top: 19px;
			}

			/*Hover right screen*/

			.hover-right .right {
			  width: 50%;
			}

			.hover-right .left {
			  width: 50%;
			}
			.linkbxlt {
				margin-left:-16px;
			padding: 3px 20px 0 0;
		}
			.linkbxrt {
				margin-left: -16px;
			padding: 3px 20px 0 0;
			}

		}

@media (min-width: 1024px) {
		p.disp {
					font-size: 1rem;
						width: 350px;
				}
		}
@media (min-width: 1700px) {
		p.disp {
					font-size: 1.5rem;
						width: 600px;
				}
		}
.mdlhead {
	color: #fff; 
	font-size: 30px; 
	font-family: 'Montserrat', sans-serif; 
	height: 200px; 
	padding-top: 50px; 
	text-align:center;
	line-height: 2.5rem;
}
@media (max-width: 320px) {
	.mdlhead { 
	font-size: 18px; 
	height: 150px;
		padding-top: 22px;
		line-height: 1.5rem;
	}
}
@media (max-width: 568px) {
	.mdlhead { 
	font-size: 22px; 
	height: 150px;
		padding-top: 22px;
		line-height: 2.05rem;
	}
}