/* body {
    margin-top: 40px;} /* This margin just makes the text easier to read. You can remove it if you want since it can mess with your other styles. */

  
  /* body::before {
    content: "XS";
    color: red;
    font-size: 2rem;
    font-weight: bold;
    position: fixed;
    top: 0;
    right: 0;
  } */
  
  /* This box class is purely used for explaining how the bootstrap grid system works. */
  .box {
    background-color: lightblue;
    border: 1px solid blue;
    min-height: 50px;
    font-size: 2rem;
  }
  
  /* @media (min-width: 576px) {
    body::before {
      content: "SM";
    }
  }
  
  @media (min-width: 768px) {
    body::before {
      content: "MD";
    }
  }
  
  @media (min-width: 992px) {
    body::before {
      content: "LG";
    }
  }
  
  @media (min-width: 1200px) {
    body::before {
      content: "XL";
    }
  }
  
  @media (min-width: 1400px) {
    body::before {
      content: "XXL";
    }
  } */

#secondnav .navbar a
{
    font-size: 50px;
    color:white;
}

#secondnav .navbar ul li:hover
{
    background-color:brown;
}

#secondnav .navbar
{
  background-color:#495E88;
  height: 50px;
}

#secondnav .navbar-brand
{
   border-right: 2px solid whitesmoke;
   padding-right: 20px;
}

img{
  padding-top: 40px;
  padding-bottom: 20px;
}
footer {
	background:#495E88;
	padding: 86px 0;
}
.single-content {
	text-align: center;
	padding: 115px 0;
}
.single-box p {
	color: #fff;
	line-height: 1.9;
  text-align: justify;
}
.single-box h3 {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.single-box .card-area i {
	color: #ffffff;
	font-size: 20px;
	margin-right: 10px;
}
.single-box ul {
	list-style: none;
	padding: 0;
}



.single-box ul li a:hover
{
  background-color: brown;
}
.single-box ul li a {
	text-decoration: underline;
	color: #fff;
	line-height: 2.5;
	font-weight: bold;
  border-bottom-style: none;
  border-bottom-width: 1px;
  border-bottom-color:#fff;
}
.single-box h2 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
#basic-addon2 {
	background: #fe1e4f;
	color: #fff;
}
.socials i {
	font-size: 18px;
	margin-right: 15px;
}
@media (max-width: 767px) {
	.single-box {
		margin-bottom: 50px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.single-box {
		margin-bottom: 50px;
	}
}

#copyright
{
  font-size: 16px;
	font-weight: 700;
	color: #fff;
}

footer
{
  padding:50px;
}

#secondnav
{
  background-color: #495E88;
  font-size: 18px;
  font-weight: 600;
}

#secondnav a:hover
{
  background-color:cadetblue;
}

.effect1
{
  position: absolute;
  top:150px;
  left:50px;
  color: #495E88;
  font-family:'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: bolder;
  opacity: 0;
  animation-name: glide;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.effect2
{
  position: absolute;
  top:250px;
  left:150px;
  color: #495E88;
  font-family:'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: bolder;
  opacity: 0;
  animation-name: glide1;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

.effect3
{
  position: absolute;
  top:350px;
  left:350px;
  color: #495E88;
  font-family:'Times New Roman', Times, serif;
  font-style: italic;
  font-weight:bolder;
  opacity: 0;
  animation-name: glide2;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-delay: 6s;
  animation-fill-mode: forwards;
}

.effect4
{
  position: absolute;
  top:130px;
  left:600px;
  width: 400;
  height:700;
  border-bottom: 100px solid  #495E88;;
  border-left: 100px solid transparent;
  color: black;
  font-family:'Times New Roman', Times, serif;
  font-style: italic;
  font-weight:bolder;
  opacity: 0;
  animation-name: glide3;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-delay: 7s;
  animation-fill-mode: forwards;
}

@keyframes glide 
{
  0%{font-size: medium;opacity: 0;}
  100%{font-size:xx-large;opacity: 1;}
}

@keyframes glide1 
{
  0%{font-size: medium;opacity: 0;}
  100%{font-size:xx-large;opacity: 1;}  
}

@keyframes glide2 
{
  0%{font-size: medium;opacity: 0;}
  100%{font-size:xx-large;opacity: 1;}
}

@keyframes glide3
{
  0%{font-size: medium;opacity: 0;}
  100%{font-size:xx-large;opacity: 1;}
}

.mission
{
    height: 200px;
    width: 800px;
    background-color:aliceblue;
    font-size: large;
    text-align: justify;
    overflow-wrap:break-word;
    padding: 50px 50px 50px 50px;
    position:absolute;
    right: 50px;
    top:200px;
}

.head
{
  text-decoration: underline;
}

.homepage
{
  height: 50px;
  width: 800px;
  background-color: #495E88;
  position: absolute;
  top:100px;
  left:30px;
  text-align: left;
  padding-top: 20px;
  padding-left: 30px;
  font-size: x-large;
  color: whitesmoke;
}

a:link
{
  color: #fff;
}

#Register
{
  position:absolute;
  right:100px;
}

.useremail
{
  position: absolute;
  top:250px;
  left:500px;
  width: 600px;
  height: 200px;
  border: 2px solid #495E88;
  padding: 50px;
  background-color: whitesmoke;
  color: black;
  font-weight: bold;
  font-size: larger;
}

.regform
{
  background-color: #495E88;
}

#maincontent
{
  margin-left: 0px;
  padding-left: 0px;
}


 #navbarfirst a
 {
    color:#495E88;
    font-size: 25px;
    font-weight:800;
    text-decoration: underline;
    padding-top: 2px;
    font-style:normal;
 }

 #navbarfirst
 {
    height:40px;
 }

 #mainnav
 {
   background-color:white;
   z-index: 100;
   height: 45px;
   padding-top: 2px;
   padding-bottom: 2px;
 }

 #navbarCollapse a
 {
  color:#495E88;
  background-color:white;
  font-weight: bold;
 }

 #navbarCollapse a:hover
 {
  background-color:aliceblue;
 }

 .description
 {
  text-align: justify;
	background: #f5f2f0;
  border-radius: 5%;
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  padding:40px;
  
 }

 .description h4
 {
  font-weight: bold;
 }

 .description h5
 {
  font-weight: bold;
  text-decoration: underline;
 }
 .description table tr td
 {
  border: 2px solid black;
  padding: 10px;
 }