@font-face {
  font-family: 'Montserrat-Bold';
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat-Bold.woff") format("woff");
  font-weight: normal; }
@font-face {
  font-family: 'Montserrat-Light';
  src: url("../fonts/Montserrat-Light.woff2") format("woff2"), url("../fonts/Montserrat-Light.woff") format("woff");
  font-weight: normal; }
@font-face {
  font-family: 'Montserrat-Regular';
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff");
  font-weight: normal; }
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/Montserrat-SemiBold.woff") format("woff");
  font-weight: normal; }
@font-face {
  font-family: 'Montserrat-Thin';
  src: url("../fonts/Montserrat-Thin.woff2") format("woff2"), url("../fonts/Montserrat-Thin.woff") format("woff");
  font-weight: normal; }
* {
  font-family: 'Montserrat-SemiBold'; }

html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF; }

a {
  cursor: pointer; }

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

.align-center, .container-header, .container-logo, #header, #about, #work-tools, #school, .card-school > div, #prize, .message, footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }

.btn, .box-about > button, .card-projects > div > a > button, #form-contact > button {
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

.row, .container-tools, .container-projects, .container-school, .container-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #26314e;
  transition: .4s; }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #6e82b8;
    transition: .4s; }
  input:checked + .slider {
    background-color: #fff; }
  :focus + .slider {
    box-shadow: 0 0 1px #3F5181; }
  input:checked + .slider:before {
    transform: translateX(26px); }
  .slider.round {
    border-radius: 34px; }
    .slider.round:before {
      border-radius: 50%; }

.container-swtich {
  position: absolute;
  top: 20px;
  right: 20px; }
.container-header {
  margin: auto auto auto auto; }
.container-logo {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2); }
  .container-logo > .logo {
    color: #3F5181;
    font-family: 'Montserrat-Bold';
    font-size: 4rem;
    text-shadow: 4px 6px 0 rgba(0, 0, 0, 0.3); }
.container-arrow-down > a {
  margin-top: auto;
  font-size: 2rem;
  transform: scale(1.2, 1);
  color: #FFFFFF;
  animation: updown 0.8s linear infinite;
  position: absolute;
  left: calc(50% - 1rem);
  bottom: 0; }

.box-about {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
  padding: 1rem 2rem;
  text-align: left;
  color: #3F5181; }
  .box-about > h2 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center; }
  .box-about > p {
    font-size: 1.4rem; }
  .box-about > button {
    background-color: #374670; }
    .box-about > button > a {
      font-size: 1.5rem;
      color: #FFFFFF;
      text-decoration: none; }
      .box-about > button > a > img {
        height: 1.5rem; }
    .box-about > button:hover {
      background-color: #3a4b77; }
.box-prize {
  width: 28rem;
  height: auto;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
  padding: 1rem 2rem;
  color: #3F5181; }
  .box-prize > h2 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center; }
  .box-prize > img {
    width: 20rem;
    margin: 0;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 50%; }
  .box-prize > p {
    margin-top: 0;
    margin-bottom: 0.3rem;
    font-size: 1.2rem; }
  .box-prize > p:nth-child(3) {
    margin-top: 0.9rem;
    font-family: 'Montserrat-Regular'; }
.box-contact {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 2rem; }
  .box-contact > h2 {
    margin-top: 0;
    font-size: 2rem;
    color: #FFFFFF;
    text-align: center; }

#header {
  min-height: calc(100% - 3rem);
  padding: 2rem;
  background-color: #3F5181;
  color: #FFFFFF !important; }

.social > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; }
  .social > ul > li {
    margin: 0 1rem 0 1rem;
    font-size: 2rem; }
    .social > ul > li a {
      color: #FFFFFF; }

#about {
  padding: 2rem; }

#work-tools {
  padding: 2rem;
  background-color: #3F5181;
  color: #FFFFFF; }
  #work-tools > h2 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center; }

.column-3, .card-tools, .card-projects, .card-school {
  flex: 0 0 25%;
  max-width: 25%;
  margin: 0.8rem 0; }

.column-6, #form-contact, .message {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0.8rem 0; }

.card-tools > div {
  padding: 0.8rem;
  width: 14rem;
  margin: auto;
  border-radius: 5px;
  background-color: #FFFFFF;
  color: #3F5181;
  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2); }
.card-tools > div > p {
  margin: 0.3rem;
  font-family: 'Montserrat-Bold'; }
  .card-tools > div > p:nth-child(1) {
    font-size: 9rem; }
  .card-tools > div > p > img {
    width: 8.75rem; }
  .card-tools > div > p:nth-child(2) {
    font-size: 2rem; }
.card-tools > div > hr {
  margin-right: 0;
  margin-left: 0; }

.card-projects {
  margin: 0 auto; }
  .card-projects:nth-child(1) div {
    background-color: #21C2F8; }
    .card-projects:nth-child(1) div > a > button {
      color: #21C2F8; }
  .card-projects:nth-child(2) div {
    background-color: #74C687; }
    .card-projects:nth-child(2) div > a > button {
      color: #74C687; }
  .card-projects:nth-child(3) div {
    background-color: #FFA500; }
    .card-projects:nth-child(3) div > a > button {
      color: #FFA500; }
  .card-projects:nth-child(4) div {
    background-color: #BE0810; }
    .card-projects:nth-child(4) div > a > button {
      color: #BE0810; }
  .card-projects > div {
    padding: 0.8rem 0;
    width: 14rem;
    margin: auto;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2); }
    .card-projects > div > img {
      width: 100%;
      height: auto; }
    .card-projects > div > p {
      color: #FFFFFF; }
    .card-projects > div > hr {
      color: #FFFFFF;
      border-color: #FFFFFF; }
    .card-projects > div > a {
      text-decoration: none; }
      .card-projects > div > a > button {
        background-color: #ebebeb;
        width: calc(100% - 0.4rem);
        margin: 0 0.2rem; }

#projects {
  background-color: #FFFFFF;
  color: #3F5181;
  padding: 2rem; }
  #projects > h2 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center; }

#school {
  background-color: #3F5181;
  color: #FFFFFF;
  padding: 2rem; }
  #school > h2 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center; }

.card-school > div {
  margin: 0 auto;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2); }
  .card-school > div > img {
    width: 9rem;
    height: auto; }
.card-school > p {
  font-family: 'Montserrat-Thin';
  margin-bottom: 0.2rem;
  margin-top: 0rem; }
  .card-school > p:nth-child(2) {
    margin-top: 0.8rem; }
  .card-school > p:nth-child(3) {
    font-family: 'Montserrat-SemiBold'; }

#prize {
  padding: 2rem; }

#contact {
  background-color: #3F5181;
  padding: 2rem; }

#form-contact > button {
  width: calc(100%);
  font-size: 1.5rem;
  color: #3F5181;
  background-color: #FFFFFF; }
#form-contact > sup {
  color: #FFFFFF;
  font-family: 'Montserrat-Regular'; }

.message > img {
  width: 50%;
  transform: rotate(-15deg); }

input[type=text], textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0.4rem 0;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #FFFFFF;
  font-size: 1.2rem;
  color: #FFFFFF; }
  input[type=text]::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.4); }
  input[type=text]:focus, input[type=text]:selected, input[type=text]:active, textarea:focus, textarea:selected, textarea:active {
    outline: none; }

footer {
  font-family: 'Montserrat-Regular';
  color: #3F5181; }
  footer > p {
    margin: 0.4rem 0; }
    footer > p > span {
      font-family: 'Montserrat-Bold'; }

@keyframes updown {
  0%, 100% {
    bottom: 0; }
  50% {
    bottom: 20px; } }
@media screen and (max-width: 1140px) {
  .column-4, .card-tools, .card-projects, .card-school {
    flex: 0 0 calc(100% /3);
    max-width: calc(100% /3);
    margin: 0.8rem 0; }

  .box-about > button {
    margin: 0 auto;
    align-self: center; } }
@media screen and (max-width: 960px) {
  .column-md-6, .card-tools, .card-projects, .card-school {
    flex: 0 0 calc(100% /2);
    max-width: calc(100% /2);
    margin: 0.8rem 0; }

  .message {
    display: none; }

  #form-contact {
    margin: 0.8rem auto; } }
@media screen and (max-width: 840px) {
  #form-contact {
    max-width: 80%;
    flex: 0 0 100%;
    width: 80%; } }
@media screen and (max-width: 720px) {
  .column-sm-12, .card-projects, .card-school {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0.8rem 0; }

  .column-sm-6, .card-tools {
    flex: 0 0 calc(100% /2);
    max-width: calc(100% /2);
    margin: 0.8rem 0; }

  .card-tools > div {
    width: 70%; }
  .card-tools > div > p:nth-child(1) {
    font-size: 16vw; }
  .card-tools > div > p > img {
    width: 15vw; }
  .card-tools > div > p:nth-child(2) {
    font-size: 1.5rem; } }
@media screen and (max-width: 600px) {
  .box-prize {
    width: 100%;
    padding: 1rem 0; }
    .box-prize > h2 {
      font-size: 2rem; }
    .box-prize > img {
      width: 90%; }
    .box-prize > p {
      font-size: 0.9rem; }

  .card-tools > div > p:nth-child(2) {
    font-size: 1rem; }

  .container-form {
    margin-left: 0;
    margin-right: 0; }

  #form-contact {
    max-width: 100%;
    flex: 0 0 100%;
    width: 100%; } }
@media screen and (max-width: 480px) {
  .column-12, .card-projects, .card-school, #form-contact {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0.8rem 0; }

  .container-logo {
    width: 16rem;
    height: 16rem; }
    .container-logo > .logo {
      font-size: 3rem; }
  .container-projects {
    margin-left: 0;
    margin-right: 0; }
  .container-form {
    padding: 0rem; }

  .header-info > h1 {
    font-size: 1.4rem; }
  .header-info > h2 {
    font-size: 1.2rem; }

  .box-about > button > a {
    font-size: 1rem; }
    .box-about > button > a > img {
      height: 1rem; }
  .box-about > h2 {
    font-size: 1.5rem; }
  .box-about > p {
    font-size: 1rem; }
  .box-prize {
    width: 100%;
    padding: 1rem 0; }
    .box-prize > h2 {
      font-size: 1.5rem; }
    .box-prize > img {
      width: 90%; }
    .box-prize > p {
      font-size: 0.9rem; }
  .box-contact {
    padding: 1rem 0.1rem 0 0.1rem; }
    .box-contact > h2 {
      font-size: 1.5rem; }

  #work-tools > h2 {
    font-size: 1.5rem; }

  #projects > h2 {
    font-size: 1.5rem; }

  #school > h2 {
    font-size: 1.5rem; }

  #form-contact > button {
    margin-top: 1rem;
    font-size: 1.2rem; }

  .message {
    display: none; } }
@media screen and (max-width: 380px) {
  .header-info > h2 {
    font-size: 1rem; } }

/*# sourceMappingURL=styles.css.map */