/*NAV BAR*/
*{
		  @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
		  
	    padding: 0;
	    margin: 0;
	    text-decoration: none;
	    list-style: none;
	    box-sizing: border-box;
	  }
	  body{
	    font-family: 'Poppins', sans-serif;
	  }
	  nav{
	    background: black;
	    height: 80px;
	    width: 100%;
	  }
	  label.logo{
	    color: white;
	    font-size: 35px;
	    line-height: 80px;
	    padding: 0 100px;
	    font-weight: bold;
	  }
	  nav ul{
	    float: right;
	    margin-right: 20px;
	  }
	  nav ul li{
	    display: inline-block;
	    line-height: 80px;
	    margin: 0 5px;
	  }
	  nav ul li a{
	    color: white;
	    font-size: 17px;
	    padding: 7px 13px;
	    border-radius: 3px;
	    text-transform: uppercase;
	  }
	  a.active,a:hover{
	    background: #1b9bff;
	    transition: .5s;
	  }
	  .checkbtn{
	    font-size: 30px;
	    color: white;
	    float: right;
	    line-height: 80px;
	    margin-right: 40px;
	    cursor: pointer;
	    display: none;
	  }
	  #check{
	    display: none;
	  }
	  @media (max-width: 952px){
	    label.logo{
	      font-size: 20px;
	      padding-left: 50px;
	    }
	    nav ul li a{
	      font-size: 16px;
	    }
	  }
	  
	  section{
	    background-size: cover;
	    height: calc(100vh - 80px);
	  }
      /* Attributes for the form itself*/
      formwrapper{
          height: auto;
          border: none;
          border-radius: 12px;
		  margin: 0 auto;
      }
      /* Attributes for the form itself*/
      form{
          padding-top: 1%;
          width: 50%;
          height: auto;
          background-color: transparent;
          border: thin;
          margin: 0 auto;
		  
		  
      }

      /* Attributes for the form itself*/
      fieldset {
          background-color: black;
          border: none;
          padding-bottom: 10px;
          text-align: center;
          border-radius: 12px;
		  margin: 0 auto;
      }

      /* Attributes for the header in the form.*/
      h1{
          font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
          font-size: 32px;
          color: white;
      }

      /* Attributes for the header on the top of the page.*/
      h2{
          color: white;
          text-align: center;
          font-family: 'Crimson Text', serif;
      }

      /*Attributes for the labels in the form*/
      label.form {
          width:75%;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          font-size:15px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          padding-top: 25px;
          color: white;
        
      }
      input{
          width: auto;
          font-size: 18px;
          border: thin solid #6CF;
          border-color: white;
          margin-bottom: 10px;
          margin-left:auto;
          margin-right: auto;
          width: 100%;
          border-radius: 4px;
          height: 35px;
          background-color: black;
          color: white;
      }

      textarea {
          width: 250px;
          border: thin solid;
          border-color: white;
          margin-bottom: 10px;
          display: block;
          margin-left:auto;
          margin-right: auto;
      }

      /* Attributes for the submit button. */
      .btn {
          width: 300px;
          height: 35px;
          color: #FFF;
          font-weight: bold;
          background-color:#1b9bff ;
          margin-left: auto;
          margin-right: auto;
          display: block;
          cursor: pointer;
          border-color: white;
      }
      /* Dimensions for the shape of the button.*/
      .buttonshape {
          border-radius: 4px;
      }
      .loginLabel {
          width:250px;
          display: block;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          font-size: 14px;
          color: white;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          padding-top: 10px;
      }
      /* Shown when the user clicks on the password field */
      #password_status
      {
          display:none;
          background: white;
          color: #000;
          font-family: Arial, sans-serif;
          width: 400px;
          length: 100px;
          margin-left: auto;
          margin-right: auto;
          border-color: black;
      }

      #password_status p {
            font-size: 12px;
          text-align: left;
          padding-left: 150px;
      }

      /* Green text */
      .met_requirement {
            color: green;
      }

      .met_requirement:before {
            left: -5px;
            content: "✓  ";
      }

      /* Red text */
      .did_not_meet_requirement {
            color: red;
      }

      .did_not_meet_requirement:before {
            left: -5px;
            content: "✘  ";
      }

      /* When the user inputs their password; and gets very weak. */
      .very_weak {
          color: darkred;
      }
      /* When the user inputs their password; and gets weak. */
      .weak {
          color: red;
      }
      /* When the user inputs their password; and gets moderate. */
      .moderate {
          color: gray;
      }
      /* When the user inputs their password; and gets secure. */
      .secure {
          color: lightgreen;
      }
      /* When the user inputs their password; and gets very secure. */
      .very_secure {
          color: darkgreen;
      }
	  a.log {
	      color: white;
	      text-decoration: none;
	  }

	  a.log:hover, a.log:focus {
	      color: white;
	      text-decoration: none;
		  background: transparent;
	  }
	  @media (max-width: 858px){
	    .checkbtn{
	      display: block;
	    }
	    ul{
	      position: fixed;
	      width: 100%;
	      height: 100vh;
	      background: black;
	      top: 80px;
	      left: -100%;
	      text-align: center;
	      transition: all .5s;
	    }
	    nav ul li{
	      display: block;
	      margin: 50px 0;
	      line-height: 30px;
	    }
	    nav ul li a{
	      font-size: 20px;
	    }
	    a:hover,a.active{
	      background: none;
	      color: #0082e6;
	    }
	    #check:checked ~ ul{
	      left: 0;
	    }
		form{
			width: 100%;
		}
	  }

/* Footer of the page */
	.footer {
	   left: 0;
	   bottom: 0;
	   width: 100%;
	   color: black;
	   text-align: center;
	   font-family: "Open Sans", sans-serif;
	}
	.fa {
	  padding: 15px;
	  font-size: 30px;
	  width: 40px;
	  text-align: center;
	  text-decoration: none;
	  margin: 5px 2px;
	  padding-left: 2px;
	  padding-right: 2px;
	  padding-top: 4px;
	  padding-bottom: 4px;
	}
	.fa:hover {
	    opacity: 0.7;
	}
	.fa-instagram {
	  background: #125688;
	  color: black;
	  border-radius: 4px;

	}
	.footer-list{
		text-align: center;
		color: white;	
 	   font-family: "Open Sans", sans-serif;
	}
	
	.footer-list ul { 
		text-align: center;
		color: white;	
 	   font-family: "Open Sans", sans-serif;
	   list-style-type:none 
			
	}
	.footer-list li a { 
		text-align: center;
		color: white;				
	}
	
    @media screen and (max-width: 858px) {
		.footer-list ul { 
			text-align: center;
			color: white;	
		   list-style-type:none;
			
		}
		.footer-list li a { 
			text-align: center;
			color: white;	
			
		}
		.footer-list{
			text-align: center;
			color: white;	
		}
      
    }