@import url("../../fonts/roboto/font-roboto.css");
/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-family: "Roboto", sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  line-height: 1.6rem;
  box-sizing: border-box; }

a, a:hover {
  text-decoration: none; }

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

.grid {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto; }

.grid__full-width {
  width: 100%; }

.grid__row {
  display: flex;
  flex-wrap: wrap; }

.mt-30 {
  margin-top: 30px; }

.mt-50 {
  margin-top: 50px; }

#header {
  position: absolute;
  width: 100%;
  margin: 10px 0; }

.btn-login {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 9px;
  border: 2px solid #148dbf;
  border-radius: 50px;
  float: right;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  .btn-login i {
    color: #148dbf;
    font-size: 14px;
    line-height: 14px; }
  .btn-login:hover {
    background: #148dbf; }
    .btn-login:hover i {
      color: #fff; }

#pHome {
  /*
    display: grid;
    grid-row: start;*/
  background: url(/assets/images/master/master-bg.jpg);
  background-size: cover; }

#hero {
  width: 100%;
  height: 400px;
  position: relative;
  top: 30px;
  margin-bottom: 20px; }
  #hero h1, #hero h2 {
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 3.2rem;
    font-weight: 500;
    color: #ff7800;
    text-shadow: 1px 1px #ff7800; }
  #hero h1 {
    font-size: 4rem; }
  #hero ul {
    margin-top: 15px; }
    #hero ul li {
      color: #fff;
      font-size: 1.5rem;
      padding: 3px 0; }
      #hero ul li span, #hero ul li i {
        font-weight: 500;
        color: #4efbff; }
  #hero #covidmap {
    margin-top: 20px; }
    #hero #covidmap .btn-module {
      background: #f44336;
      color: #fff;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 20px;
      display: inline-block;
      text-align: center;
      font-size: 1.5rem;
      transition: all 0.3s ease-in-out; }
      #hero #covidmap .btn-module:hover {
        box-shadow: 0 0 0 2px #ddd; }
    #hero #covidmap i {
      margin-right: 10px;
      font-size: 2rem; }
  #hero .master-img {
    width: 100%;
    height: auto; }

#functions {
  padding-top: 20px;
  margin-bottom: 50px; }
  #functions .functions-item {
    position: relative;
    padding: 0.25rem;
    background: linear-gradient(180deg, rgba(19, 62, 104, 0.75), rgba(19, 62, 104, 0.15));
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    height: 270px;
    display: grid;
    grid-auto-rows: 25% 20% 35% 20%; }
    #functions .functions-item .btn-module {
      background: rgba(82, 102, 148, 0.5);
      color: #fff;
      padding: 10px;
      border-radius: 20px;
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 1.5rem;
      transition: all 0.3s ease-in-out; }
      #functions .functions-item .btn-module:hover {
        box-shadow: 0 0 0 2px #27e8f6;
        color: #29f1fc; }
    #functions .functions-item .functions-img {
      position: relative;
      z-index: 1;
      margin-top: -35px;
      transform: translateX(15%);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
      /*&::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba($black-color, 0.3);
                @include transition(all 0.3s ease-in-out);
                z-index: 3;
                opacity: 1;
            }*/ }
      #functions .functions-item .functions-img img {
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s; }
      #functions .functions-item .functions-img .img-fluid {
        max-width: 100px;
        height: auto;
        transform: none; }
    #functions .functions-item h4 {
      font-family: "Roboto Condensed", sans-serif;
      color: #fff;
      font-size: 1.5rem;
      font-weight: 100;
      padding: 5px 10px;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
    #functions .functions-item h3 {
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 600;
      color: #fff;
      padding: 10px;
      margin-bottom: 0;
      text-align: center;
      height: 60px;
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -o-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s; }
    #functions .functions-item:hover .functions-img::before {
      opacity: 0; }
    #functions .functions-item:hover .functions-img img {
      transform: scale(1.1); }
    #functions .functions-item:hover h3 {
      color: #25ddf0; }
  #functions .one-fifth {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px; }
  @media (min-width: 992px) {
    #functions .one-fifth {
      flex: 0 0 20%;
      max-width: 20%; } }

#footer {
  background: #064273;
  color: #fff;
  display: flex; }
  #footer p {
    font-size: 1.3rem; }
  #footer .footer-wrapper {
    margin-top: 30px !important; }
  #footer .footer-socials a {
    font-size: 2.2rem;
    display: inline-block;
    background: #ff6a00;
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s; }
    #footer .footer-socials a:hover {
      background-color: orangered;
      color: #fff;
      text-decoration: none; }