/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;600;700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');

body
{
	background: url(../images/background.jpg) no-repeat center fixed;
    	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
	color: #201d41;
}

#wrapper {
	max-width: 900px;
	margin: auto;
	background: white;
	min-height:100vh;
}
@media (max-width: 685px) {
	
	div#content-text{padding: 1em;}

}

section#wrapper-grid{
  margin-top: 50px;
  width: 100%; margin: auto; text-align: center;
}
  div.wrapper-grid-content{
    width:80%;
  }

div#content-text{color:#9C9B9A;}
div#content-text h1{font-size: 1.2em; font-weight: bold; line-height: 1.5em;}
div#content-text p{line-height: 1.7em; text-align: justify; margin-bottom: 2em;}

form {
	max-width: 450px;
  display: block;
	margin: auto;
	margin-top: 1em;
}
/*
label {
	display: block;
	font-weight: bold;
	font-size: 14px;
}
*/
input, select, textarea{
	width: 100%;
}

.error {
	color: red;
}

p.valid{
	color: #00609f;
	font-weight: bold;
	font-family: Helvetica, sans-serif;
	text-align: center;
	font-size: 21px;
}



/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:25px; 
}
input.material 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
  background: rgba(255,255,255,0.4) !important;
  color: #201d41 !important;
}
input.material:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#201d41; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:0;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input.material:focus ~ label, input.material:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#201d41;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:1px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input.material:focus ~ .bar:before, input.material:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input.material:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}










p.valid { color: #201d41; }
body {color: #201d41}
input.material{width: 100%;}
.mention-txt{font-size: 15px;}
/*
input,  select
{
	padding: 0px;
	height: 27px;
}
label {
	color: black;
}*/


div.session_choices{
  width: 100%;
  display: table;
  margin-bottom: 12px;
}
div.session_input{
  width: 10%;
  float: left;
}
div.session_text{
  float: left;
  width: 90%;
}


select.select-field{
  padding: 17px 4px;
  border:none;
  border-bottom: 1px solid #201d41;
}






@media (max-width: 991.98px) {

  section#wrapper-grid{
    width: 80%;    
  }
    div.wrapper-grid-content{
      width:90%;
    }


}