body {
  margin:0;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

#msg {
	width:80%;
	font-size:16px;
	color:#ff0000;
	padding:8px;
}

.header {
  position:relative;
  text-align:center;
  //background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  background: linear-gradient(60deg, rgba(1,105,235,1) 0%, rgba(150,150,150,1) 100%);
  color:white;
}

.center {
	text-align:center;
}

#imgfrase {
	height:240px;
	width:auto;
	max-width:100%;
	z-index:50;
}

.frase-div {
	position:absolute;
	bottom:10%;
	left:5%;
	width:30%;
	text-align:center;
	display:none;
}

.frase {
	font-size:20px;
	padding:0 20px;
	font-style:italic;
}

.autor {
	text-align:right;
	padding:5px 20px;
}

.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.text-logo {
  margin:-10px;
  padding:0;
  text-align:center;
  font-family:Roboto;
  font-size:24px;
  color:#fff;
  font-style:italic;
  font-weight:bold;
}

.text-welcome {
	color:#fff;
	font-size:18px;
	font-weight:normal;
	margin:20px 0 0 100px;
	padding:0;
	text-align:center;
	font-family:Roboto;
}

.form-div {
	text-align:center;
	margin:20px 0;
}

#CollegeList {
	//background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) #cecece no-repeat right 2px center;background-size:20px 40px;
	//background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
  	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='currentColor'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
	background-color:#fff;
  	background-size: 1em;
	background-position: 95% 60%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	padding: 10px;
	//box-shadow:0 0 5px #aaa;
	font-family: Roboto, sans serif;
}

.select {
	padding:8px;
	color: #777;
	font-size:16px;
	width:290px;
	outline:none;
	//box-shadow:0 0 5px #aaa;
	background:#fff;
	border:1px solid #eee;
}

.input {
	padding:8px;
	color: #000;
	font-size:16px;
	width:272px;
	outline:none;
	//box-shadow:0 0 5px #aaa;
	background-color:#fff;
	border:1px solid #eee;
}

.input:focus {
	padding:8px;
	color: #000;
	background:#efefef;
	box-shadow:none;
	outline:none;
	//box-shadow:0 0 5px #aaa;
	border:1px solid #eee;
}

.button {
	font-family:Roboto;
	padding:10px;
	color: #fff;
	font-size:18px;
	width:290px;
	border:none;
	outline:none;
	background:#0168ef;
	border-radius:5px;
}

.panel {
  position:absolute;
  right:20%;
  top:50px;
  z-index:10;
  width:340px;
  min-height:460px;
  box-shadow:0 0 10px #0168ef;
  margin:0 auto;
  background-color:rgba(255,255,255,0.4);
  border-radius:10px 10px 0 0;
}

.back-panel {
  position:absolute;
  right:20%;
  top:50px;
  z-index:5;
  width:340px;
  height:420px;
  background:#fff;
  opacity:0.2;
  margin:0 auto;
display:none;
}

.nota {
	font-family: Roboto;
	font-size:14px;
	color:#555;
	width:80%;
	margin:20px auto;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position:absolute;
  bottom:0;
  width:100%;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}



/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:80px;
    min-height:80px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }

  .frase-div {
    display:none;
  }

.panel {
  position:absolute;
  right:0;
  left:0;
  top:20px;
  z-index:10;
  width:95%;
  min-height:460px;
  box-shadow:0 0 10px #0168ef;
  margin-left:auto;
  margin-right:auto;
  background-color:rgba(255,255,255,0.4);
  border-radius:10px 10px 0 0;
}
}