content{
	float:left;
	width:100%;
	padding:0 15% 5% 15%;
	box-sizing:border-box;
	min-height:80vh;
	display:flex;
	flex-wrap:wrap;
}

content h1{
	font-size:24px;
	margin-top:5%;
	padding-bottom:2%;
	margin-bottom:2%;
	border-bottom: 2px solid #cccccc;
	color:#383838;
	width:100%;
	float:left;
}


content .file{
	width:30%;
	margin:1.6%;
	background-color:#f1f1f1;
	text-align:center;
	overflow:hidden;
	position:relative;
}
@media screen and (max-width: 1000px) {
	content .file{
	float:left;
	width:45%;
		margin:2.5%;
	}
}

content .title{
	float:left;
	width:100%;
	font-size:1em;
	overflow-wrap: break-word;
	color:#555555;
	line-height: 1.5;
	padding:10% 0 10% 0;
	display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;


}

content .title i{
	font-size:35px;
	margin-bottom:10px;
	padding-bottom:10px;
	float:left;
	width:100%;
	border-bottom:1px solid #cccccc;
	color:#43B02a;
	
}

content .links{
	float:left;
	width:100%;
	padding:2.5%;
	background-color:#f9f9f9;
	box-sizing:border-box;
	position:absolute;
	bottom:0;
}

content .links a{
	color:#999999;
	text-decoration:none;
	margin:0 2.5% 0 2.5%;
	font-size:25px;
}

content .module{
	float:left;
	width:30vw;
	height:30vw;
	margin:5vw 5vw 0vw 0vw;
	box-shadow: 5px 5px 25px rgba(0,0,0,0.10);
	padding:2vw;
	box-sizing:border-box;
	background-size:fit;
	background-repeat: no-repeat;
  background-position: center bottom;
	transition:0.3s ease-in-out;
	cursor:pointer;
}

content .module:nth-child(even){
	margin:5vw 0vw 0vw 0vw;
}

content .module:hover{
	box-shadow: 15px 15px 25px rgba(0,0,0,0.15);
	transform:translateX(-0.2vw) translateY(-0.2vw);
}

content .module a{
	float:left;
	padding:0.75vw;
	background-color:#f1f1f1;
	color:#cccccc;
}

content .module h3{
	float:left;
	color:#666666;
	width:100%;
	margin:1vw 0 0 0;
	padding:0;
}

.modal{
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%) scale(0);
	float:left;
	width:70vw;
	background-color:white;
	padding:2vw;
	box-sizing:border-box;
	transition:0.3s ease-in-out;
	z-index:10;
	overflow:auto;
	max-height:80%;
	pointer-events:none;
	overscroll-behavior: contain ;
}

.modal.active{
	transform:translateX(-50%) translateY(-50%) scale(1);
	pointer-events:all;
}

.modal-header{
	width:100%;
	padding:0 0 1vw 0;
	box-sizing:border-box;
	border-bottom:1px solid #cccccc;
	float:left;
	margin-bottom:1vw;
	
}
.modal-header button{
	float:right;
	background:none;
	border:none;
	cursor:pointer;
}
.modal-header h4{
	float:left;
	width:auto;
	margin:0;
	padding:0;
}

#overlay{
	opacity:0;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:3;
	pointer-events:none;
	transition:0.3s;
	overflow:auto;
}

#overlay.active{
	pointer-events:all;
	opacity:1;
}

body.active{
	overflow:hidden;
	height:100vh;
	padding-right:18px;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.modal ol, .modal ul{
	float:left;
	width:100%;
}

.modal li{
	color:#666666;
}

.modal h5{
	float:left;
	width:100%;
	font-size:100%;
	padding:0;
	margin:2vh 0 0.5vh 0;
	font-weight:400;
}

.modal h5 a{
	color:black;
	text-decoration:none;
	margin-bottom:4vh;
}

.modal img{
	floa:left;
	width:20%;
	margin-right:80%;
	margin-top:4vh;
}

@media screen and (max-width: 1000px) {
	content .module{
	float:left;
	width:80vw;
	height:70vw;
	margin:5vw 0 5vw 0;
	}
}