/* ------ updated 10 Dec 2022 ------ */

.img-banner {
margin:auto;
width:50%;
}

.container-flip {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	}

.flip-card {
  background-color: transparent;
  width:350px;
  height:263px;
  display:inline-block;
  margin:4px;
  border:1px;
}

.school-nav a {
  color:black !important;
  font-weight:bold;
  font-size: 0.75vw;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width:100%;
  height: 100%;  
  text-align: center;
  transition: transform 0.6s;
  transform-style:preserve-3d; 
  
 }

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  border-radius:20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: transparent;
}

.front_txt h2{
	color:whitesmoke;
	text-shadow: -1px 1px 2px #000, 1px 2px 6px #000, 1px -1px 0 #000,-1px -1px 0 #000; /*text-shadow: 2px 2px 2px black;*/
 	bottom:-10px;
        position:absolute;
  	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
  	padding:10px;
	font-size:1.1rem;
  	font-weight:bold;	
}


.flip-card-front img {
  border-radius:20px;
}

/* Style the back side */
.flip-card-back {
  background-color: slategrey;
  width:100%;
  height:100%;
  color: white;
  border-style:hidden;
  display:block;
  transform: rotateY(180deg);
}

.flip-card-back p {
	font-size:0.9vw;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
        text-align:center;
	
}


.heading_top_es23 {
width:100%;
color: white;
 text-align:center;
	
}

.headingsch_es23 {
	width:100%;
	margin:auto;
	padding-top:40px;
  	padding-bottom:40px;
	/*background-color: slategray;
	border-radius:10px; */
	text-align: center;
	color:white;
        font-size:2vw;
        font-weight:bold;
  	text-shadow: 5px 5px 10px black;
  
}

.contact_es23 {
	width:30%;
	border:medium;
	border-radius:10px;
	border-style:double;
	border-color:white;
         color:white;
	text-align:center;
	margin:auto;
  	font-size:1vw;
 	 padding:10px;
  	}


.body_txt {
   color:white;
	text-align:center;
	margin:auto;
  	font-size:1vw;
 	 padding:10px;
}


.link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:1;
}



.button {
	width: 200px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
   	text-decoration:none;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}

.button:hover {
	background-color: #6DC7D0;
	color: #333333;
	cursor: pointer;
}


.edm_contain {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
  	
}

 .edm_contain img{
  width:320px;

  }

.proj-head-text {
  text-align: center;
  position: relative;
   color: white;
  font-size:1.5vw;
  text-shadow: 2px 2px 20px black;
}

.col-text p {
 color: white;
 font-size:1.15vw;  
}

.col-text a:hover {
  color:green;
}

.col-text a:link {
  color: cyan;
}

.col-text a:active {
  color: red;
}

.col-text h3{
 color: white;
 font-size:1.25vw;  
}



.gallery_es23 {
	display: inline-block;
	width:100%;
	/*background-color: #FFFFFF;*/
	/*min-width: 800px;*/
	}


.thumbnail_proj_es23 {
	width: 48%;
	min-height:200px;
	text-align: center;
	float: left;
	margin-top: 1px; /*default 35px */
	background-color: #8f8f90; /* F8F8F8 */
	padding-bottom: 5px;
	margin-left: 1%;
	margin-right: 1%;
	border-radius:20px;
  	padding-top: 1px;
	border: 1px solid #3d5b84;
	overflow:hidden;
	
}

.thumbnail_proj_es23 h4 {
     color:white;
	font-size:1vw;
  }

.thumbnail_proj_es23 img {
border-radius: inherit;
}


.back_button_es23 {
  display:block;
  float:right;
  padding-right:20px;
  width: 100px;
  height:100px;
}

.video_container_es23 {
    overflow: hidden;
    position: relative; 
     margin-left:0px;
    margin-right:0px;
  margin-bottom:20px;
  padding-bottom:56.25%;
  border-radius:20px;
      }


.video_container_es23 iframe, .video-container embed{
  position: absolute;
  padding-left:0%;		
  width: 100%; 
  height: 100%;
}


/* Use a media query to add a break point at 1200px: */
@media screen and (max-width:1200px) {

  
  .flip-card {
  background-color: transparent;
  width:320px;
  height:240px;
  display:inline-block;
  margin:4px;
  border:1px;
}
 

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {

.img-banner {
width:60%;
margin:auto;
padding:auto;
}

  .flip-card {
  background-color: transparent;
  width:220px;
  height:165px;
 display:inline-block;
  margin:4px;
  border:1px;
}

 .col-text {
 color: white;
 font-size:2vw;  
}

.col-text h3{
 color: white;
 font-size:2.05vw;  
}


.flip-card-back p {
	font-size:1.05vw;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
        text-align:center;
	
}

.front_txt h2{
	color:whitesmoke;
	text-shadow: -1px 1px 2px #000, 1px 2px 6px #000, 1px -1px 0 #000,-1px -1px 0 #000; /*text-shadow: 2px 2px 2px black;*/
 	bottom:-5px;
        position:absolute;
  	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
  	padding:3px;
	font-size:12px;
  	font-weight:bold;	
}

.thumbnail_proj_es23 h4 {
font-size:1.4vw;
color:white;
  }

heading_top_es23 {
width:100%;
color: white;
 text-align:center;

}


}

/* =========================================================================================*/
/* Use a media query to add a break point at 650px: */
@media screen and (max-width:671px) {
	
.edm_contain img{
		width:250px;
}
	

}



/* ====================================================================================================== */
/* Use a media query to add a break point at 450px: */
@media screen and (max-width:450px) {

.img-banner {
width:60%;
margin:auto;
padding:auto;
}

.container-flip {
	width:100%;
	margin:auto;
 	display: flex;
  	flex-wrap: wrap;
	
}

.flip-card {
  background-color: transparent;
  width:300px;
  min-height:225px;
  display:inline-block;
  margin:auto;
padding:5px;
  border:1px;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  border-radius:20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.front_txt h2{
	color:whitesmoke;
	text-shadow: -1px 1px 2px #000, 1px 2px 6px #000, 1px -1px 0 #000,-1px -1px 0 #000; /*text-shadow: 2px 2px 2px black;*/
 	bottom:-5px;
        position:absolute;
  	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
  	padding:3px;
	font-size:12px;
  	font-weight:bold;	
}

 .flip-card-front img {
  border-radius:20px;
}


/* Style the back side */
.flip-card-back {
  background-color: slategrey;
  width:100%;
  height:100%;
  color: white;
  border-style:hidden;
  display:block;
  transform: rotateY(180deg);
}

.flip-card-back p {
	font-size:10px;
	padding-top:3px;
	padding-left:3px;
	padding-right:3px;
        text-align:center;
	
}


.heading_top_es23 {
width:100%;
color: white;
 text-align:center;
	
}

.headingsch_es23 {
	width:100%;
	margin:auto;
	padding-top:20px;
  	padding-bottom:20px;
	/*background-color: slategray;
	border-radius:10px; */
	text-align: center;
	color:white;
        font-size:20px;
        font-weight:bold;
  	text-shadow: 5px 5px 10px black;
  
}

.contact_es23 {
	width:60%;
	border:medium;
	border-radius:10px;
	border-style:double;
	border-color:white;
         color:white;
	text-align:center;
	margin:auto;
  	font-size:12px;
 	 padding:5px;
  	}


.body_txt {
   color:white;
	text-align:center;
	margin:auto;
  	font-size:12px;
 	 padding:5px;
}

.link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:1;
}

.edm_contain {
  width:100%;
display:inline-block;
margin:auto;
}


 .edm_contain img{
  width:100%;
  padding-bottom:5px;

  }

.proj-head-text {
  text-align: center;
  position: relative;
   color: white;
  font-size:10px;
  text-shadow: 2px 2px 10px black;
}

.col-text p {
 color: white;
 font-size:12px;  
}


.col-text h3{
 color: white;
 font-size:12px;  
}


.thumbnail_proj_es23 {
	width: 100%;
	min-height:100px;
	text-align: center;
	float: left;
	margin-top: 1px; /*default 35px */
	background-color: #8f8f90; /* F8F8F8 */
	padding-bottom: 5px;
	margin-left: 1%;
	margin-right: 1%;
	border-radius:20px;
  	padding-top: 1px;
	border: 1px solid #3d5b84;
	overflow:hidden;
	
}

.thumbnail_proj_es23 h4 {
     color:white;
	font-size:12px;
  }


.thumbnail_proj_es23 img {
border-radius: inherit;
}


.back_button_es23 {
  display:block;
  float:right;
  padding-right:20px;
  width: 100px;
  height:100px;
}

}