@charset "utf-8";
/* CSS Document */
main {
    padding-left: var(--rellenohorizontal);
    padding-right: var(--rellenohorizontal);
    background-color: var(--g100);
    border-radius: var(--radio-m);
}
#contenedornecesitas {
    padding-top: var(--separacionsecciones);
}

#contenedornecesitas h1 {
    color: var(--a200);
}
#contenedornecesitas p {
    padding-right: 20%;
}
#formulariocontacto {
    padding-top: var(--rellenoverticalgrande);
    padding-bottom: var(--rellenoverticalgrande);
}

#formulariocontacto > * {
    margin-left: var(--rellenoverticalgrande);
    margin-right: var(--rellenoverticalgrande);
}
#formulariocontacto h2 {
    text-align: left;
}
#contenedordirecciones {
    display: grid;
    grid-gap: var(--separacionsubsecciones);
    grid-template-columns: 1.25fr 2fr;
    margin-top: var(--separacionsecciones);
}

#contenedordirecciones > div > p:first-of-type {
    color: var(--g300);
}
#contenedordirecciones > div > p:not(:first-of-type) {
    color: var(--a600);
}
#mapa1, #mapa2 {
    border-radius: var(--radio-p);
    position: relative;
}
#mapa1 iframe, #mapa2 iframe {
    width: 100%;
    height: 100%;
    border: none;
    border: solid 1px var(--a100);
    border-radius: var(--radio-p);
}
#mapa1::after, #mapa2::after {
    background-color: var(--g000);
    position: absolute;
    top: 10px;
    left: 10px;
    min-width: 250px;
    padding: 1.5rem;
    height: auto;
    z-index: 40;
    border-radius: var(--radio-m);
}
#mapa1::after {
    content: "DIESSA — HEADQUARTERS";
}
#mapa2::after {
    content: "DIESSA — MAERSK";
}

#contenedortelefonos {
    width: auto;
    white-space: nowrap;
}
#contenedortelefonos p, #contenedortelefonos hr {
    margin: 0px;
    margin-top: .75rem;
}
#contenedortelefonos p:first-of-type {    
    color: var(--g300);
    margin-top: 0px;
    margin-bottom: 1em;
}

#contenedortelefonosydocumentos {
    margin-top: var(--separacionsecciones);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--separacionsubsecciones);
}
#contenedordocumentos {
    color: var(--a600)
}
#contenedordocumentos > p {
    margin-bottom: 1.5rem;
    color: var(--g300)
}

#contenedordocumentos > div {
    display: flex;
    justify-content: flex-start
}
#contenedordocumentos > div > div {
    display: flex;
    flex-direction: column;
}
#contenedordocumentos > div > div:first-of-type {
    margin-right: var(--rellenohorizontalgrande);
}
#contenedordocumentos a {
    text-decoration: underline;
    color: var(--a600);
    margin-bottom: .75rem;
}
#contenedordocumentos a:last-of-type {
    margin-bottom: 0px;
}
@media (max-width: 1200px) {
   
}
@media (max-width: 1150px) {
    #formulariocontacto > * {
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media (max-width: 900px) {
    #contenedortelefonosydocumentos, #contenedordirecciones {
       grid-template-columns: 1fr;
    }
    #contenedordirecciones > div:nth-of-type(3) {
        margin-top: calc(var(--separacionsubsecciones) * 2);
    }
    #mapa1, #mapa2 {
        height: 250px;
    }
}
@media (max-width: 800px) {
   #contenedordirecciones {
       flex-direction: column;
    }
   #contenedordirecciones > div {
       width: 100%;
   }       
   #contenedordirecciones > div:last-of-type {
       margin-top: var(--separacionsubsecciones);
   }
    
}
@media (max-width: 650px) { 
     #contenedordocumentos > div {
        flex-direction: column;
    }
    #contenedordocumentos > div > div:first-of-type {
        margin-right: 0px;
    }
    #contenedordocumentos div:first-of-type a:last-of-type {
        margin-bottom: .75rem;
    }
 
}