
.responsive-iframe1 {
width: 200%;
}

.responsive-iframe2 {
width: 200%;
}


@media (max-width: 1600px) {
     .responsive-iframe1 {
     width: 155%;
     }
     .responsive-iframe2 {
     width: 155%;
     }
}

@media (max-width: 1350px) {
     .responsive-iframe1 {
     width: 125%;
     }
     .responsive-iframe2 {
     width: 125%;
     }
}


@media (max-width: 1050px) {
     .responsive-iframe1 {
     width: 99%;
     }
     .responsive-iframe2 {
     width: 99%;
     }
}

@media (max-width: 950px) {
     .responsive-iframe1 {
     width: 95%;
     }
     .responsive-iframe2 {
     width: 95%;
     }
}
/*
@media (max-width: 850px) {
     .responsive-iframe2 {
     width: 142%;
     }
}
*/



@media screen and (max-width: 500px) { /* Example max-width for iPhones */
  body {
    font-size: .75em; /* 25% smaller than 16px */
  }
 
 
	.top-banner {
		font-size: 8px;
	}

   .top-banner-inner {
	  font-size: .50em;
    }

 
   .title-left {
	float: left;
	font-size: .80em;
	}
	
  .title-right {
	float: right;
	font-size: .80em;
	}
	
	.responsive-iframe1 {
     width: 97%;
	 }

	.responsive-iframe2 {
     width: 97%;
	 }
}



.title-left {
float: left;
}

.title-right {
float: right;
}



.align-left {
float: left;
}

.align-right {
float: right;
}

.lower-text {
font-size: 1.15em;
}

	

.top-banner {
height: 55px;
padding: 0px;
background: linear-gradient(to top, rgba(255,255,255,1)10%, rgba(0,0,0,1) 100%);
color: white;
font-size: 20px;
position: relative;
}


.top-banner-inner {
padding-top: 15Px;
padding-left: 15px;
padding-right: 30px;
position: relative;
color: white;
height: auto;
font-family: "Times New Roman", Times, serif;
font-size: 1.30em;
text-shadow: #000 2px 2px 1Px;
white-space: nowrap;
display: flex;
justify-content: space-between;
}


.bottom-banner {
width: 100%;
padding-top: 3px;
height: 475px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
overflow: hidden;
position: relative;
}


#myVideo {
  position: absolute; /* Position the video absolutely within its container */
  top: 50%; /* Position the top edge of the video at the vertical center */
  left: 50%; /* Position the left edge of the video at the horizontal center */
  transform: translate(-50%, -50%); /* Move the video back by half its width and height to truly center it */
  min-width: 100%; /* Ensure the video always fills at least the container's width */
  min-height: 100%; /* Ensure the video always fills at least the container's height */
  object-fit: cover; 	
}


.bottom-banner img {
  width: 100%;
  height: 100%;

  flex-shrink: 25%;
}

.bottom-banner-inner {
text-align: left;
padding-top: 20px;
padding-left: 20px;
position: relative;
color: white;
height: auto;
font-size: 1.9em;
text-shadow: #000 3px 2px 1Px;
white-space: nowrap;
}



.lower-body {
margin-top: 2px;
padding-top: 16px;
padding-bottom: 8px;
padding-left: 50px;
padding-right: 50px;
text-align: center;
font-size: 1.2em;
font-family: Helvetica, Sans-Serif;
/*background: linear-gradient(to bottom, rgba(116,116,118,1) 1%, rgba(255,255,255,1) 100%); */
background: linear-gradient(to top, rgba(255,255,255,1) 75%, rgba(116,116,118,1) 100%);
color: black;
display: flex;
text-align: justify;
text-justify: inter-word;
}


.school-info1 {
padding-top: 0px;
padding-bottom: 12px;
padding-left: 50px;
padding-right: 50px;
text-align: center;
font-size: 1.10em;
background: linear-gradient(to top, rgba(255,255,255,1) 92%, rgba(251,178,21,1) 94%);
color: black;
display: flex;
text-align: justify;
text-justify: inter-word;
}


.school-info2 {
padding-top: 0px;
padding-bottom: 12px;
padding-left: 50px;
padding-right: 50px;
text-align: center;
font-size: 1.10em;
background: linear-gradient(to top, rgba(255,255,255,1) 92%, rgba(29,92,157,1) 94%);
color: black;
display: flex;
text-align: justify;
text-justify: inter-word;
}


.school-title {
color: white;
font-size: 2.25em;
text-align: center;
fon-weight: bold;
}



table {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border: 0px solid black;
}

.bottom-links {
padding-top: 10px;
text-align: center;
font-size: .85em;
display: flex;
justify-content: center;
}


.register {
width: 125px;
height: 150px;
display: block;
background:transparent url('../../images/register.jpg') center top no-repeat;
border: 1px solid #CCCCCC;
}

.register:hover {
background-image: url('../../images/register-hover.jpg');
}


.attending {
width: 125px;
height: 150px;
display: block;
background:transparent url('../../images/attending.jpg') center top no-repeat;
border: 1px solid #CCCCCC;
}

.attending:hover {
background-image: url('../../images/attending-hover.jpg');
}


.login {
width: 125px;
height: 150px;
display: block;
background:transparent url('../../images/login.jpg') center top no-repeat;
border: 1px solid #CCCCCC;
}

.login:hover {
background-image: url('../../images/login-hover.jpg');
}