body, html {
    height: 100%;
    margin: 0;
    font-family:sans-serif;
    width: 100%;
    overflow-x: hidden;
    padding: 0px;
  }
  @media screen and (max-width: 650px) {
    body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    }
  }

  .animate__animated.animate__zoomIn{
    animation-duration: 3s;
text-align: center;
display: block;

  }

  .animate__animated.animate__backInRight{
    text-align: left;
    animation-duration: 2s;
  }

  a{
    text-decoration: underline;
    color:white;
    
  }
  

    
footer{
  width: 100%;
  background-color:rgb(0, 116, 248);
  height: 7.5rem;
  padding-top: 0.938rem;
  margin-top: 1.25rem;
  display: block;
text-align: center;
  
    }

    
  .footertext{

    font-size: 0.938rem;
    margin-bottom: 0;
    padding-left: 0.313rem;
    color:white;
  
    
  }
  @media screen and (max-width: 650px) {
    .footertext {
    font-size: 0.75rem ;

    }
  }

    
/* Style all font awesome icons */
.fa {
  margin-top: 0.625rem;
  display: inline-block ;
  margin-left: 1.25rem;
  padding-top: 1.375rem;
  
  padding: 0.7rem;
  width: 1.875rem;
  height: 0.5em;
  text-align: center;
  text-decoration: none;
  margin: 0.313rem 0.313rem;
  }
  

  
  /* Add a hover effect */
  .fa:hover {
    transform: scale(1.1);
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    color: #ffffff ;
  }
  
  /* Twitter */
  .fa-twitter {
    color:  #ffffff;
  }
  .fa-instagram{
  color: rgb(255, 255, 255);
  }

  .fa-envelope{
    color: rgb(255, 255, 255);  
  }
 
  .fa-whatsapp{
    color: rgb(255, 255, 255);
  }
.fa-linkedin{
  color: #ffffff;
}
  
  

  .bg{
    
    /* The image used */
    background-image: url("images/nurse1.jpg"); 
   /* Full height */
    height: 100%;
   /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
   margin-top: 0;
   filter: brightness(100%);
  
        }

        @media screen and (max-width: 650px) {
          .bg{
          height: 100%;
          margin-top: 0;
  
          }
        }

        .bg h1{
            font-size: 5rem;
            color: white;
            text-align: center;
            padding-top: 12.125rem;
            text-shadow: 3px 3px 8px black;
        }

        @media screen and (max-width: 650px) {
            .bg h1{
            font-size: 3rem;
            text-align:center;
        
            }
          }

          

/* MOBILE NAVIGATION MENU */

.topnav {
  overflow: hidden;
  background-color:rgb(0, 116, 248);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2; 
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
}

.mobilelogo{
margin-left: 3px;
width: 100px;
}

.mobilelog{
height: 60px;
width: 100px;
}



/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
 
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration:none;
  font-size: 22px;
  display: block;
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
  
  
}



/* Style the hamburger menu */
.topnav a.icon {
  color: white;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 20px;
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
        
  
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
  color: aqua;
}

/* Dont display MOBILE navbar on BIG screens */
@media screen and (min-width: 970px) {
  .topnav {
  display: none;
  }
}

.logo {
  margin-top: 10px;
  margin-left: 20px;
  width: 5px;
  height: 5px;
}

/*Desktop Navigation bar*/
nav
{
	width: 100%;
	height: 5.5rem;
	background-color: rgb(0, 116, 248);
	text-align: right;
	top: 0;
	position: fixed;
	overflow:hidden;
  z-index: 2;
	
}
/* Dont display huge navbar on small screens */
@media screen and (max-width: 970px) {
  nav {
  display: none;
  }
}


.logo {
  margin-top: 0.625rem;
  margin-left: 1.25rem;
  width: 0.313rem;
  height: 0.313rem;
  -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
        
  
}
.logo:hover{
transform: scale(1.05);
}


ul li
{
display: inline-block;
line-height: 6.25rem;
padding:0.5rem;
font-size: 1.2rem;
text-decoration: none;
margin-top: -3.125rem;
padding-top: 20px;
}

ul li a
{
	text-decoration: none;
	color: rgb(255, 255, 255);
    padding: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
        
  
}

ul li a:hover
{
color: rgb(0, 116, 248);
background-color: white;
padding: 10px;



}
     
h2{
    color:  rgb(0, 116, 248) ;
    font-size: 2.65rem;
}

@media screen and (max-width: 650px) {
  h2{
 font-size: 18px;

  }
}

h3{
    color:  rgb(0, 116, 248) ;
    font-size: 1.25rem;
    text-align: center;
}

@media screen and (max-width: 650px) {
  h3{
 font-size: 16px;

  }
}

  
.container1{

    width: 90%;
    display:flex;
    margin-left: auto;
    margin-right: auto;

}



@media screen and (max-width: 650px) {
  .container1{
  width: 100%;
  display: block;

  }
}
.container1text{
    width: 50%;
    padding-right: 40px;
   font-size: 18px;
   line-height: 35px;
}

@media screen and (max-width: 650px) {
  .container1text{
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  font-weight: 300;

  }
}

.nurse2{
    width: 55%;
    height: 380px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
}

@media screen and (max-width: 650px) {
  .nurse2{
  width: 100%;
  height:330px;

  }
}



  @media (min-width: 1920px) and (max-width: 2560px)  {
    .nurse2{
      height: 480px; 
  }
}

.nurse2:hover{
    transform:scale(1.05);
}

@media screen and (max-width: 650px) {
  .nurse2{
  width: 100%;
  height:330px;

  }
}


.bg2{
     /* The image used */
    background-image: url("images/nurse1.jpg"); 
   /* Full height */
    height: 90%;
   /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
   margin-top: -4%;
   filter: brightness(100%);
   padding-top: 2rem;
   margin-top: 5rem;
  
        }

        .bg2 h1{
            font-size: 5rem;
            color: white;
            text-align: center;
            padding-top: 2rem;
            text-shadow: 3px 3px 8px black;
            
        }

        @media screen and (max-width: 650px) {
            .bg2 h1{
            font-size: 3rem;
            text-align:center;
        
            }
          }


 /*//////////////////////////////////////SLIDESHOW CONTAINER STYLING///////////////////////////////////////////////*/
 * {box-sizing: border-box}
  .mySlides {display: none}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    width: 70%;
    height: 80%;
    position: relative;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 100px;
    border: 1px solid rgb(0, 116, 248) ;
 
  }

  .slideimg{
width: 100%;
height:100%
  }

  @media screen and (max-width: 650px) {
.slideshow-container {
  width: 100%;
  height:50%;

}
}
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    background-color: rgba(0, 0, 0, 0.336);
    font-weight: bold;
    font-size: 16px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 17px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.493);
  }

  @media screen and (max-width: 650px) {
    .text {
     font-size: 14px; 
    
    }
    }
  

  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name:fade;
    animation-duration: 3s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
          
/*HOMEPAGE CARDS STYLING*/

/* Three columns side by side */
.column {
    float: left;
    width: 27%;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
    margin-left: 4.375rem;
  }

  /* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
    margin-left:8px;
  }
}

  @media (min-width: 1920px) and (max-width: 2560px)  {
    .column{
      margin-left: 7.375rem;
  }
}
  

  .card {
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2);
    width: 19.25rem;
    border: 1px solid rgb(0, 116, 248) ;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 5px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
           
  
  }
  @media screen and (max-width: 650px) {
    .card {
    width: 90%;
    margin-left:3%;
    font-size: 1rem;
    font-weight: 300;
  
   
    }
    }
    
     @media (min-width: 1920px) and (max-width: 2560px)  {
    .card1{
      width: 22rem; 
  }
}

 @media (min-width: 1920px) and (max-width: 2560px)  {
    .card{
      width: 22rem; 
  }
}
    

  .card:hover{
    border: 1px solid  rgb(86, 160, 245) ;
    box-shadow: 0 5px 8px 0 rgb(86, 160, 245) ;
    transform: scale(1.05);
  }

  .card1 {
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2);
    width: 20rem;
    border: 1px solid rgb(0, 116, 248) ;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: left;
    border-radius: 5px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
           border-radius: 5px;
  
  }
  
    @media (min-width: 1920px) and (max-width: 2560px)  {
    .card1{
      width: 22rem; 
  }
}

  @media screen and (max-width: 650px) {
    .card1 {
    width: 90%;
    margin-left:3%;
    font-size: 1rem;
    font-weight: 300;
    }
    }
    

  .card1:hover{
    border: 1px solid  rgb(86, 160, 245) ;
    box-shadow: 0 5px 8px 0 rgb(86, 160, 245) ;
    transform: scale(1.05);
  }

  @media screen and (max-width: 650px) {
    .card1:hover{
      transform: scale(1.05); 
    }
  }

  
  /* Some left and right padding inside the container */
  .container {
    padding: 0 1rem;
  }
  
  /* Clear floats */
  .container::after, .row::after {
    content: "";
    clear: both;
    display: table;
  }

  .button {
    border: 2px solid black;
    border-radius: 4px;
    outline: 0;
    display:inline-block;
    padding: 0.625rem;
    color: white;
    background-color:rgb(0, 116, 248);
    text-align: center;
    font-weight: 400;
    font-size: 1.25rem;
    cursor: pointer;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    -webkit-transition: all 0.6s linear;
    -khtml-transition: all 0.6s linear;
      -moz-transition: all 0.6s linear;
        -o-transition: all 0.6s linear;
           transition: all 0.6s linear;
  
  }

  .button:hover {
    border: 2px solid rgb(0, 116, 248) ;
    color: rgb(0, 116, 248);
    background-color: white;
    width: 32%;
    font-size: 1.28rem;
    -webkit-box-shadow:rgb(86, 160, 245);
 -khtml-box-shadow:rgb(86, 160, 245);
   -moz-box-shadow:rgb(86, 160, 245);
     -o-box-shadow:rgb(86, 160, 245);
        box-shadow:rgb(86, 160, 245);
  }


  .button2 {
    border: 1px solid black;
    border-radius: 4px;
    outline: 0;
    display:inline-block;
    padding: 0.625rem;
    margin-top: 5px;
    color: white;
    background-color: rgb(0, 116, 248);
    text-align: center;
    font-weight:400;
    font-size: 1.1rem;
    cursor: pointer;
    width: 230px;
    margin-left: auto;
    margin-right: auto;
    
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
  
  }


  .button2:hover {
    color: rgb(0, 116, 248);
    background-color: white;
    -webkit-box-shadow:rgb(86, 160, 245);
    -khtml-box-shadow:rgb(86, 160, 245);
      -moz-box-shadow:rgb(86, 160, 245);
        -o-box-shadow:rgb(86, 160, 245);
           box-shadow:rgb(86, 160, 245);
           transform:scale(1.03);
           
   
   }
   

  .hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 3s;
  }

  @media screen and (max-width: 650px) {
    .hidden{
      transition: all 1s;  
    }
  }


  .show{
    opacity: 1;
    filter: blur(0px);
    transition: all 3s;
    transform: translateX(0);
  }

  @media screen and (max-width: 650px) {
    .show{
      transition: all 1s;  
    }
  }


  .row:nth-child(2) {

 transition-delay: 200ms;

  }
  
  .row:nth-child(3) {

transition-delay: 400ms;
    
  }

  .row:nth-child(4){

transition-delay: 600ms;
    
  }

/* REGISTRATION PAGE /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

  .bg3{
    /* The image used */
   background-image: url("images/registration.jpg"); 
  /* Full height */
   height: 55%;
  /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
  margin-top: -4%;
  filter: brightness(100%);
  padding-top: 2rem;
  margin-top: 5rem;
 
       }

       @media screen and (max-width: 650px) {
        .bg3 {
          height:40%;
        
        }
      }

       .bg3 h1{
           font-size: 5rem;
           color: white;
           text-align: center;
           padding-top: 1.5rem;
           text-shadow: 3px 3px 8px black;
         }

       @media screen and (max-width: 650px) {
        .bg3 h1{
          font-size: 2rem;
        }
      }
      

       .container2{
        width: 85%;
        margin-left: auto;
        margin-right: auto;
       }

       
@media screen and (max-width: 650px) {
  .container2{
    width: 100%;
  }
}

  .container2text{
    font-size: 17px;

  }
  @media screen and (max-width: 650px) {
    .container2text{
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    font-weight: 300;
  
    }
  }

  
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; 
    border: 2px solid rgb(0, 116, 248); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }

  input[type=number], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; 
    border: 2px solid rgb(0, 116, 248); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }

  input[type=date], select[id=willing], textarea {
    width: 100%; /* Full width */
    padding: 12px; 
    border: 2px solid rgb(0, 116, 248); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  
  
  label{
    font-weight: 600;
    color: black;
  }

  .NOTE{
    color: red;
  }
  
  
  
  
  /* Style the submit button */
  input[type=submit ] {
    background-color: rgb(0, 116, 248);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
           width: 100px;
  }

  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: rgb(88, 166, 255);
    -webkit-box-shadow: rgb(86, 160, 245);
    -khtml-box-shadow: rgb(86, 160, 245);
      -moz-box-shadow: rgb(86, 160, 245);
        -o-box-shadow: rgb(86, 160, 245);
           box-shadow: rgb(86, 160, 245);
           width: 110px;
  }
  
  /* Add a background color and some padding around the form */
  .container3 {
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    box-sizing : border-box;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  
@media screen and (max-width: 650px) {
  .container3{
    width: 100%;
  }
}
  
    /* CONTACT US PAGE//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  
  .bg4{
    /* The image used */
   background-image: url("images/nurse2.jpg"); 
  /* Full height */
   height: 60%;
  /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
  margin-top: -4%;
  filter: brightness(100%);
  padding-top: 2rem;
  margin-top: 5rem;
 
       }

       @media screen and (max-width: 650px) {
        .bg4{
          height: 40%;
        }
      }

       .bg4 h1{
           font-size: 5rem;
           color: white;
           text-align: center;
           padding-top: 1.5rem;
           text-shadow: 3px 3px 8px black;
           
       }  

       @media screen and (max-width: 650px) {
        .bg4 h1{
          font-size: 4rem;
        }
      }

      
  .contactuscard {
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
    width: 18.75rem;
    border: 2px solid rgb(0, 116, 248) ;
    border-radius: 5px;
    padding-top: 1.25rem;
    font-weight: 500;
    padding-bottom: 1.25rem ;
    margin-bottom: 40px;
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
  
  }
  
   @media (min-width: 1920px) and (max-width: 2560px)  {
    .contactuscard{
      width: 22rem; 
  }
}


@media screen and (max-width: 650px) {
    .contactuscard {
      width: 90%;
      margin-left:3%;
    }
  }

  .contactuscard:hover{
    border: 2px solid  rgb(88, 166, 255);
    box-shadow: 0 5px 8px 0 rgb(88, 166, 255);
    transform: scale(1.05);
  }

/* ///ABOUT US PAGE//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.bg5{
    /* The image used */
   background-image: url("images/nurse2.jpg"); 
  /* Full height */
   height: 55%;
  /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
  margin-top: -4%;
  filter: brightness(100%);
  padding-top: 2rem;
  margin-top: 5rem;
 
       }

       @media screen and (max-width: 650px) {
        .bg5{
          height: 40%;
        }
      }

       .bg5 h1{
           font-size: 5rem;
           color: white;
           text-align: center;
           padding-top: 1.5rem;
           text-shadow: 3px 3px 8px black;
           
       }  

       @media screen and (max-width: 650px) {
        .bg5 h1{
          font-size: 3rem;
        }
      }

       
/* ///LOG IN PAGE//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.bg6{
  /* The image used */
 background-image: url("images/nurse1.jpg"); 
/* Full height */
 height: 100%;
/* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 width: 100%;
margin-top: -3%;
filter: brightness(100%);
padding-top: 2rem;
margin-top: 5rem;

     }
     @media screen and (max-width: 650px) {
      .bg6{
      height: 100%;
      margin-top: 0;
    
      }
    }






.loginpg{
margin-top: 100px;
font-size: 20px;
text-align: center;
color: white;
text-shadow: 3px 3px 8px black;
           

}

label[for=username] {
color: white;
text-shadow: 3px 3px 8px black;

}
label[for=password] {
  color: white;
  text-shadow: 3px 3px 8px black;
  
  }
  


input[type=password], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; 
  border: 2px solid white; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=username], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; 
  border: 2px solid white; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


.logincontainer {
  border-radius: 5px;
  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2);
  border: 2px solid white; 
  padding: 30px;
  box-sizing : border-box;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  backdrop-filter: blur(5px);
}

@media screen and (max-width: 650px) {
  .logincontainer{
  width: 98%;
  padding: 10px;
  

  }
}

.cancel {
  background-color: red;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  -webkit-transition: all 0.3s linear;
  -khtml-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
         transition: all 0.3s linear;
         width: 100px;

}

.cancel:hover {
  background-color: orangered;
  width: 110px;
}


iframe {
  width:50%;
  height: 360px;
}


@media screen and (max-width: 650px) {
  iframe{
    width: 100%;
      height:330px;

  }
}

 
  /* GALLERY/////////////////////////////////////////////////////////////////////////////////////////// */

  .gallery {
    line-height:0;
    -webkit-column-count:3; /* split it into 5 columns */
    -webkit-column-gap:5px; /* give it a 5px gap between columns */
    -moz-column-count:3;
    -moz-column-gap:5px;
    column-count:3;
    column-gap:5px;
 }

 .gallery img {
    width: 100% !important;
    height: auto !important;
    margin-bottom:5px; /* to match column gap */
    -webkit-transition: all 0.3s linear;
    -khtml-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
           transition: all 0.3s linear;
 }

 .gallery img:hover {
    transform:scale(1.03);
 }

 @media (max-width: 1200px) {
    .gallery {
     -moz-column-count:    4;
     -webkit-column-count: 4;
     column-count:         4;
    }
 }

 @media (max-width: 1000px) {
    .gallery {
     -moz-column-count:    3;
     -webkit-column-count: 3;
     column-count:         3;
    }
 }

 @media (max-width: 800px) {
    .gallery {
     -moz-column-count:    1;
     -webkit-column-count: 1;
     column-count:         1;
    }
 }

 @media (max-width: 400px) {
    .gallery {
     -moz-column-count:    1;
     -webkit-column-count: 1;
     column-count:         1;
    }
 }



 *, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }