/* FORM */


/* main */

main {
	max-width:70%;
	margin:40px 40px 0 200px;
	}
	
main h1 {
	color:darkblue;
	font-size:36px;
	}

main h2 {
		color:blue;
		font-size:24px;
		}
		
main h3 {
		color:blue;
		font-size:18px;
		margin-bottom:2px;
		}

main ul {
	list-style:none;
	margin:0;
	padding:0;}

main li {
	
	padding:5px 0;
	margin:0;
	
	}
	
main li p {
	
	padding:0;
	margin:0;
	
	}
	
main p {
	line-height:24px;
}


main .woa {
	color:white;
	
}

main .birzdaytable li {
	display:inline-block;
	margin-right:1em;
}

.bd_tens {
	color:lightblue;
}

.bd_quints {
	color:darkblue;
}


.fullnames{
	font-size:90%;
}


.tools i {
	margin:2em 0.3em 2em 1em !important;
}

.tools span i:first-child {
	margin:2em 0.3em 2em 0 !important;
}

.tools a {text-decoration:none;color:inherit;}



/* NAV */

nav {
	position:absolute;
	top:0;
	left:0;
	font-family:sans-serif;
	font-weight:light;
	}
	
nav .menu-text {
	display:none;
	margin-left:10px;
	}

nav ul {
	
	padding:15px 15px 15px 5px;
	margin:0;
	display:inline-block;
}

nav li {
	margin:0;
	padding:5px;
	list-style:none;
	font-size:24px;
}

nav li a {
	color:darkblue;
	text-decoration:none;

}

nav li a:hover {
	color:white;
}

nav i {
	width:40px;
	text-align:center;
	
}



.button
{
cursor:pointer;
}



/* Inspired by https://codepen.io/lukeandrewreid/pen/OVPGXN */
html {
	height:100%;
  }

body {
  margin:0;
  font: 18px Helvetica, Arial, sans-serif;
  height:100%;
  
  background: #35dc9b;
  background: linear-gradient(to right, #35dc9b, #3857af);
  	
  
}



form {
  label {
    position: relative;
    display: inline-block;
    margin-right:1em;
    
    input {
      font: 18px Helvetica, Arial, sans-serif;
      box-sizing: border-box;
      border: 2px solid white;
      color: white;
      background: transparent;
      display: block;
		padding:15px 15px 4px 18px;
      width: 300px;
      height: 60px;
      margin-bottom: 20px;
      font-size: 18px;
      outline: none;
      transition: all 0.2s ease-in-out;
      
      &::placeholder {
        transition: all 0.2s ease-in-out;
        color: rgba(255,255,255,0.6);
        font: 18px Helvetica, Arial, sans-serif;
      }
      
      &:focus, &:active {
        border: 2px solid #1e5973; 
        box-shadow: inset 0 0 10px rgba(255,255,255,0.4);
        color: rgba(255,255,255,1);
      }
      
      &:focus, &:active, &.populated {
       /* padding-top: 28px;
        padding-bottom: 12px;*/
        
        &::placeholder {
          color: transparent;
        }
        
        & + span {
          opacity: 1;
          top: 10px;
        }
      }
    }
    
    span {
      color: rgba(255,255,255,0.6);
      font: 13px Helvetica, Arial, sans-serif;
      position: absolute;
      top: 0px;
      left: 20px;
      opacity: 0;
      transition: all 0.2s ease-in-out;
    }
  }
  
  input[type="submit"] {
    transition: all 0.2s ease-in-out;
    font: 18px Helvetica, Arial, sans-serif;
    border: none;
    background: #1aaf75;
    color: #fff;
    padding:24px 20px 16px 20px;
    cursor: pointer;
    
    &:hover {
      background: #109f67;
    }
  }
}



/*   fin */

	
	#usr_3, #usr_4, #usr_5, #usr_6, #usr_7, #usr_8, #usr_9, #usr_10 {display:none;} 
	#minus_2 {opacity:0;}
	.fa-plus, .fa-minus, .fa-xmark {color:white;}