/*--------------------------------------------------------------
>>> FONTS
----------------------------------------------------------------*/

*, body {
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 900;
}
a:hover {
    text-decoration: none!important;
}
p {
    font-weight: 300;
}

/*--------------------------------------------------------------
>>> GLOBAL CLASSES
----------------------------------------------------------------*/

:root {
  --text-color: #3c3c3c;

  --college-blue-one: rgba(0, 42, 95, 1);
  --college-blue-shadow-one: rgba(0, 42, 95, 0.3);

  --college-blue-two: rgba(178, 191, 207, 1);
  --college-blue-shadow-two: rgba(178, 191, 207, .3);

  --college-orange-one: rgba(243, 197, 63, 1);
  --college-orange-shadow-one: rgba(243, 197, 63, 0.3);  

  --college-orange-two: rgba(247, 214, 120, 1);
  --college-orange-shadow-two: rgba(247, 214, 120, 0.3);

  --college-orange-three: rgba(245, 180, 115, 1);
  --college-orange-shadow-three: rgba(245, 180, 115, 0.3);

  --college-gray: #e6e6e6;
  --college-shadow-gray: rgba(230, 230, 230, 0.3);

}

a {
  color: var(--college-blue-one);
}

.img-fluid{
    width: 100%;
}

.no-pdn {
    padding: 0px;
}
.no-pdn-right {
    padding-right: 0px;
}
.no-pdn-left {
    padding-left: 0px;
}


/*--------------------------------------------------------------
>>> HEADER
----------------------------------------------------------------*/
.header{
    height: 30px;
    background-color: var(--college-orange-one);
}

#main-menu {
  box-shadow: var(--college-blue-one);
  border: 1px solid var(--college-blue-one);
  box-shadow: 0 5px 10px var(--college-shadow-blue-one);
  background: var(--college-blue-one);
  margin-top: 20px;
  margin-bottom: 20px;
}
#main-menu a {
  color: #FFF;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}
#main-menu i {
  color: #FFF;
}
#main-menu a:hover {
  color: #ececec;
}
#main-menu .dropdown-menu a {
  color: var(--college-blue-one);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}
#main-menu .dropdown-menu a:hover {
  color: var(--college-orange-one);
}
@media screen and (max-width: 960px) {
  .logo-container {
    width: 150px;
    height: 150px;
    background-size: cover;
    object-fit: cover;
  }
}

#main-menu .dropdown-menu a:active {
    color: #FFF;
}

header .menu-item {
    padding: .3rem 1rem;
}
header .nav-link {
    padding: .3rem 1rem;
}
#main-menu .dropdown-menu a[href^="#"] {
    opacity: .3;
}
#main-menu .dropdown-menu a[href^="#"].dropdown-toggle {
  opacity: 1;
}

/*--------------------------------------------------------------
>>> HOME
----------------------------------------------------------------*/
#hero{
    background-image: url(../img/plani/hero-bg.svg);
    background-position: center;
    background-size: cover;
}

#hero h2, #hero h1{
    color: var(--college-gray);
}

#hero h2{
    font-weight: 300;
}

.hero-img{
    margin-top:-50px;
}

.cuadro{
    margin-top: 30px;
    background-color: var(--college-orange-one);
    padding-left: 80px;
    padding-top: 10px;
    color: var(--college-blue-one);
    font-family: 'Roboto', sans-serif;
    font-weight:900;
}

.cuadro h4, #desafios h2, #acciones h2{
    font-family: 'Roboto', sans-serif;
    font-weight:900;
}

.titulo{
    padding-left: 80px;
    margin-top: 100px;
}

.logo-desafios{
    width: 50%;
    margin-top: 60px;;
}

#desafios{
    margin-top: 30px;
}

#acciones{
    margin-top:50px;
    padding-top: 30px;
    background-color: var(--college-shadow-gray);
    border-left: var(--college-orange-one) 20px solid;
}

#acciones article{
    margin: 50px auto;
    background-image: url(../img/plani/flecha.svg);
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

#acciones .centro{
    background-position: left 70%;
}

#acciones article p{
    text-align: right;
    width: 70%;
    padding: 15px;
}

.cohete{
    width: 80px;
}

.opina{
    width: 230px;
}

#form{
    margin: 50px 0;
}

.form-bg{
    background-color: var(--college-shadow-gray);
    padding: 30px;
    border-radius: 8px;
    margin: 30px auto;
}

.btn-container{
    text-align: center;
}

.formulario button{
    margin-top: 50px;
}


.col-form{
    padding: 20px;
}

.mail{
    margin-top: 30px;
}

.seleccion .form-check{
    padding: 10px 60px;
}

/* RESPONSIVE*/


@media (max-width: 991.98px) {

    .hero-img{
        margin-top:0;
    }

    #desafios{
        padding: 0 30px;
    }

    .logo-desafios{
        width: 30%;
        margin-top: 20px;;
    }

    #acciones article{
        margin: 30 0 40px 0;
        padding: 20px;
        background-image: url(../img/plani/flecha.svg);
        background-size: 60px;
        background-repeat: no-repeat;
        background-position: 10% 90%;
    }

    #acciones .centro{
        background-position: 10% 90%;
    }
    

 }

 @media (max-width: 768px) { 

    #acciones article{
        margin: 30 0 150px 0;
        padding: 20px;
        background-image: url(../img/plani/flecha.svg);
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: 10% 74%;
    }

    #acciones .centro{
        background-position: 10% 74%;
    }
  }



/*--------------------------------------------------------------
>>> FOOTER
----------------------------------------------------------------*/
footer {
    background: var(--college-blue-one);
    color: #FFF;
    padding: 30px;
    margin-top: 70px;
}

footer .logo-footer {
    width: 150px;
}

footer p {
    font-size: 14px;
    margin-bottom: 0px;
}

footer strong{
    font-weight: 900;
}