:root {
  --verde1: #00C1C2;
  --verde2: #4DA99E;
  --verde3: #008375;
  --blu1: #00b7ff;
  --blu2: #4D87AE;
  --blu3: #00548B;
}
html{
    scroll-behavior: smooth;
}
body{
  font-family: 'Lato', sans-serif;
  scroll-behavior: smooth;
}
img{
  max-width: 100%;
}
a{
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 10px;
}
li{
  list-style: none;
}

.box{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  align-items: center;
  grid-gap: 5px;
}
.navbar{
  position: fixed;
  right:  12px;
}
.navbar li{
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 10px;
  margin: 1px;
  color: var(--blu1);
  /* border: 1px solid var(--blu1); */
  background: white;
  opacity: 0.8;
}
.section{
  border: 2px solid white;
  background: var(--blu1);
  margin-bottom: 15px;
  margin-top: 15px;
}
.bordo{
  border: 2px solid var(--blu1);
  border-radius: 5px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  box-shadow: 10px 10px 5px #cccccc;
  margin: 10px;
  padding: 10px;
}
.shadow{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 10px;
  margin: 5px;
}
.footer{
  background: var(--verde1);
  margin-top: 20px;
  display: grid;
  align-items: start;
}
.footer a{
  padding: 0px;
  margin: 2px;
}
.footer p{
  padding: 0px;
  margin: 2px;
}
.footer_space{
  height: 20px;
  border-bottom: 1px solid white;
  margin-bottom: 20px;
}


.t_v1{
  color: var(--verde1);
}
.t_v2{
  color: var(--verde2);
}
.t_v3{
  color: var(--verde3);
}
.t_b1{
  color: var(--blu1);
}
.t_b2{
  color: var(--blu2);
}
.t_b3{
  color: var(--blu3);
}
.t_red{
  color: red;
  font-weight: bold;
}

.t_bg_b1{
  background: var(--blu1);
  padding: 5px 5px;
  color: white;
}
.t_bg_b2{
  background: var(--blu2);
  padding: 5px 5px;
  color: white;
}
.t_bg_b3{
  background: var(--blu3);
  padding: 5px 5px;
  color: white;
}
.t_bg_v1{
  background: var(--verde1);
  padding: 5px 5px;
  color: white;
}
.t_bg_v2{
  background: var(--verde2);
  padding: 5px 5px;
  color: white;
}
.t_bg_v3{
  background: var(--verde3);
  padding: 5px 5px;
  color: white;
}
.t_bg_orange{
  background: orange;
  padding: 5px 5px;
  color: white;
}
.t_bg_violet{
  background: #6C3483;
  padding: 5px 5px;
  color: white;
}
.t_bg_green{
  background: green;
  padding: 10px 5px;
  color: white;
  margin: 0px;
}
.t_bg_gray{
  background: #bfbfbf;
  padding: 5px 5px;
  color: white;
}

.t_white{
  color: white;
}
.t_center{
  text-align: center;
}
.t_left{
  text-align: left;
}
.t_right{
  text-align: right;
}
.t_justify{
  text-align: justify;
}

.c1{
  grid-column: span 1;
}

.c2{
  grid-column: span 2;
}
.c3{
  grid-column: span 3;
}
.c4{
  grid-column: span 4;
}
.c5{
  grid-column: span 5;
}
.c6{
  grid-column: span 6;
}
.c7{
  grid-column: span 7;
}
.c8{
  grid-column: span 8;
}
.c9{
  grid-column: span 9;
}
.c10{
  grid-column: span 10;
}
.c11{
  grid-column: span 11;
}
.c12{
  grid-column: span 12;
  display: grid;
  justify-content: center;
}

.r2{
  grid-row: span 2;
}
.r3{
  grid-row: span 3;
}
.r4{
  grid-row: span 4;
}
.r5{
  grid-row: span 5;
}

.mobile_icon{
  display: none;
}

.tablet{
  height: 300px;
  border-radius: 30px;
  border-top: 25px solid #404040;
  border-bottom: 25px solid #404040;
  border-left: 10px solid #404040;
  border-right: 10px solid #404040;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.smartphone{
  height: 250px;
  border-radius: 30px;
  border-top: 40px solid #404040;
  border-bottom: 60px solid #404040;
  border-left: 10px solid #404040;
  border-right: 10px solid #404040;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.wip{
  pointer-events: none;
  cursor: default;
}


@media (max-width:1281px) {
  .box{
    grid-template-columns: repeat(6,1fr);
  }
  .mc1{
    grid-column: span 1;
  }
  .mc2{
    grid-column: span 2;
  }
  .mc3{
    grid-column: span 3;
  }
  .mc4{
    grid-column: span 4;
  }
  .mc5{
    grid-column: span 5;
  }
  .mc6{
    grid-column: span 6;
  }

  .mhide{
    display: none;
  }

  .navbar{
    height: 0px;
    overflow: hidden;
  }
  .open{
    height: 50px;
    overflow: visible;
    margin-top: 45px;
  }
  .navbar li{
    display: block;
    width: 120px;
  }
  .mobile_icon{
    display: block;
    position: fixed;
    border: 1px solid var(--blu1);
    color: var(--blu1);
    top: 12px;
    right: 12px;
    padding: 5px;.
    z-index: 99;
    background-color: white;
    opacity: 0.8;
    width: 120px;
    text-align: center;
  }
}


@media (max-width: 415px) {
  .box{
    grid-template-columns: repeat(4,1fr);
  }
  .mmc1{
    grid-column: span 1;
  }
  .mmc2{
    grid-column: span 2;
  }
  .mmc3{
    grid-column: span 3;
  }
  .mmc4{
    grid-column: span 4;
  }
  .mmhide{
    display: none;
  }
}