/********************** PROYECTOS PAGE *****************/

.heroarea-licencia {
  background: linear-gradient(0deg, rgba(36, 37, 41, 0.60) 0%, rgba(36, 37, 41, 0.60) 100%),url("apt1.jpg");
   background-repeat: no-repeat;
  background-size: 100% 100%;
    overflow: hidden;
   height: 85vh;
   display: flex;
   flex-direction: column;
}



@media (min-width: 360px) {
.heroarea-licencia {
 height: 450px;
}

@media (min-width: 900px) {
.heroarea-licencia {
 height: 650px;
}
}


@media (min-width: 1920px) {
.heroarea-licencia{
 height: 600px;
}
}

@media (min-width: 2400px) {
.heroarea-licencia{
 height: 60vh;
}
}


.hero-content-wrappper {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex: 1 0 0;
align-self: stretch;
height: 90%;

}

.hero-text-wrapper
{

display: grid;
flex-direction: column;
align-items: baseline;
gap: 5px;
height: 50%;
}



.h14 {
  display: flex;
align-items: center;
gap: 10px;
background: #04AFBA4D;
}


.h24 {
  color: #04AFBA;
}




/**********************  GRID WRAPPER *****************/

.box {
    display: grid;
 background: rgb(84,127,165);
background: linear-gradient(96deg, rgba(84,127,165,1) 0%, rgba(93,132,165,1) 47%, rgba(75,123,166,1) 100%); 
border-color: white;
border-style: solid;
border-width: .1PX;
    margin: 10px;
    min-width: 290px;
    max-width: 500px;
    height: 450px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
}

@media (min-width: 1px) {
.box {
 width: 290px;
 height: 440px;
}
}

@media (min-width: 410px) {
.box {
 max-width: 290px;
 height: 450px;
}
}

@media (min-width: 600px) {
.box {

 min-width: 290px;
}
}


@media (min-width: 900px) {
.box {
    min-width: 290px;
 max-width: 390px;
}
}


.box > img {
    justify-items: center;
    width: 105%;
    overflow: hidden;
    }

.title-projects{
  font-size: 16px;
  padding: 3px 15px;
  font-weight: 700;
text-transform: none;
background-color: transparent;
color: white;

}

/************************** WRAPPER  **********************/

.content-wrapper {
  display: grid;
  width: 100%;
  padding: 30px 0px;
  justify-content: center;
  justify-items: center;
  background: #242529;;

}

@media (min-width: 100px) {
.content-wrapper{
  display: grid;
  width: 100%;
  padding: 30px 0px;
  justify-content: center;
  justify-items: center;
  background: #242529;;
}
}

.content-wrapper-superior
{
display: grid;
justify-self: center;
grid-template-columns: .5fr 2fr;
width: 90%;
padding: 15px;

justify-self: center;
}

@media (min-width: 100px) {
.content-wrapper-superior{
  display: grid;
  width: 100%;
  padding: 15px 0px 0px 0px;
  background: #242529;;
  grid-template-columns: 1fr;
  grid-template-rows: .25fr 1fr;
}
}

@media (min-width: 900px) {
.content-wrapper-superior{ 
grid-template-columns: .5fr 1fr;
 grid-template-rows:1fr;
 grid-gap: 20px;
}
}

.boxes-wrapper {
  display: grid;
  width: 100%;
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 2;
}

@media (min-width: 100px) {
.boxes-wrapper{
  display: grid;
  width: 100%;
  justify-content: center;
  justify-items: center;
  background: #242529;;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
}
}

@media (min-width: 900px) {
.boxes-wrapper{ 
grid-template-columns: repeat(2, 1fr);
 grid-template-rows:1fr;
}
}


.boxes-wrapper-inferior{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 2;
  justify-items: center;
  width: 90%;
}


@media (min-width: 100px) {
.boxes-wrapper-inferior{
  display: grid;
  width: 100%;
  padding: 20px 0px;
  justify-content: center;
  justify-items: center;
  background: #242529;;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}
}

@media (min-width: 900px) {
.boxes-wrapper-inferior{ 
grid-template-columns: repeat(3, .5fr);
 grid-template-rows:1fr;
}
}

.box-blue {
   margin: 5px;
  display: grid;
  width: 15vw;
  background: #04AFBA;;
  border-radius: 5px;
  margin-left: 0;
  margin-right: 0;
  margin: 0;
  height: 100%;
}

@media (min-width: 200px) {
.box-blue{ 
    min-width: 300px;
  max-height: 400px;
    min-height: 300px
  }
}
@media (min-width: 600px) {
.box-blue{ 
  height: 100%;
  max-height: 400px;
  min-height: 300px;
  min-width: 400px;
  }
}

@media (min-width: 900px) {
.box-blue{ 
  height: 100%;
  max-height: 100%;
  min-width: 280px;
  max-width: 281px;
  }
}

.box-capacitacion {
  margin: 5px;
  display: grid;
  width: 50vw;
  max-width: 270px;
  background: #04AFBA;;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1px) {
  .box-capacitacion {
   min-width: 200px;
   min-height: 400px;
  }
}
@media (min-width: 300px) {
  .box-capacitacion {
   min-width: 300px;
   min-height: 400px;
  }
}

@media (min-width: 600px) {
  .box-capacitacion {
   min-width: 400px;
   min-height: 400px;
  }
}

@media (min-width: 900px) {
  .box-capacitacion {
   min-width: 280px;
   max-width: 281px;
   min-height: 400px;
  }
}

.image-capacitacion {
  display: grid;
  align-items: center;
  text-align: center;
  text-justify: center;
  font-weight: 600;
  float: left;
  padding: 10 px 60px;
  min-height: 60px;
  height: 100%;
  align-self: center;
  color: #fff;
  text-transform: capitalize;

}

@media (min-width: 300px) {
  .image-capacitacion {
    text-align: center;
    font-size: calc(16px + .2vw );
  }
}

.text-content{
 color: #fff;
  padding: 5px;

}

.title-vobo {
  color: #FFF;
font-family: Bebas Neue;
font-size: calc(18px + .1vw);
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}

.title-fundamento {
  font-size: calc(25px + .5vw);
}

.text-vobo {
 color: #FFF;
font-family: Raleway;
font-size: calc(10px + .1vw);
font-style: normal;
font-weight: 700;
}