body
    background: #fff
    font-family: "Open Sans", sans-serif
    font-size: 16px

.contenedor
    width: 90%
    max-width: 1000px
    margin: auto
    overflow: hidden

a
    &.link
        text-decoration: none
        color: #3895ea

/* ---- ---- HEADER ---- ---- */

header
    background: url("./../images/BG.jpg") #68bdea
    background-repeat: no-repeat
    background-position: center
    max-height: 600px
    .menu
        margin: 40px 0px
        text-align: right
        a
            margin: 0px 20px
            color: #fff
            padding-bottom: 9px
            display: inline-block
            text-decoration: none
            border-bottom: 2px solid transparent
            font-size: 1rem
            &:hover
                border-bottom: 2px solid #fff
    .contenedor-texto
        display: flex
        justify-content: center
        align-content: center
        margin: 190px 0px
        .texto
            border: 2px solid rgba(255, 255, 255, 0.5)
            border-radius: 3px
            display: inline-block
            text-align: center
            padding: 20px 60px
            h1, h2
                color: #fff
                font-weight: 300
                margin: 0px
            .nombre
                margin-bottom: 10px
                font-size: 3.125rem
                line-height: 50px
            .profesion
                font-size: 1.5rem
                line-height: 25px

/* ---- ---- MAIN ---- ---- */

main
    .contenedor
        overflow: visible
    .acerca-de
        text-align: center
        .foto
            margin-top: -60px
            img
                vertical-align: top
                border-radius: 50%
                border: 5px solid rgba(255, 255, 255, 0.2)
        .texto
            color: #5a5a5a
            font-weight: 600
            font-size: 1rem
            line-height: 30px
            width: 80%
            margin: 40px auto 60px auto
            .titulo
                font-size: 2.125rem
                margin-bottom: 40px
                font-weight: 300
                color: #dd820d
                text-align: center
            .bold
                color: #3895ea
                text-decoration: underline
    .trabajos
        background: #f2f2f2
        padding: 60px 0
        .contenedor
            overflow: hidden
        .titulo
            font-size: 2.125rem
            line-height: 34px
            margin-bottom: 40px
            font-weight: 300
            color: #323068
            text-align: center
        .contenedor-trabajos
            display: flex
            flex-direction: row
            flex-wrap: wrap
            justify-content: space-between
            .trabajo
                width: 23%
                margin-bottom: 40px
                .thumb
                    width: 100%
                    margin-bottom: 10px
                    img
                        width: 100%
                        vertical-align: top
                        border-radius: 3px
                .descripcion
                    text-align: center
                    .nombre
                        font-weight: 700
                        color: #3895ea
                        margin-bottom: 10px
                    .categoria
                        font-size: 0.8rem
                        color: #636363

/* ---- ---- FOOTER ---- ---- */

footer
    .contacto
        padding: 60px 0
        .titulo
            font-size: 2.125rem
            line-height: 34px
            margin-bottom: 40px
            font-weight: 300
            color: #3895ea
            text-align: center
        .formulario
            display: flex
            flex-wrap: wrap
            justify-content: space-between
            input
                &[type="text"], &[type="email"]
                    background: #f3f4f7
                    border: 2px solid #cecece
                    border-radius: 5px
                    padding: 15px 20px
                    font-size: 1.125rem
                    color: #a4a4a4
            textarea
                background: #f3f4f7
                border: 2px solid #cecece
                border-radius: 5px
                padding: 15px 20px
                font-size: 1.25rem
                color: #a4a4a4
            input
                &[type="text"]:focus, &[type="email"]:focus
                    border: 2px solid #3895ea
            textarea:focus
                border: 2px solid #3895ea
            input
                &[type="text"], &[type="email"]
                    width: 45%
                    margin-bottom: 15px
            textarea
                width: 100%
                height: 100px
                max-width: 100%
                min-height: 100px
                max-height: 300px
                margin-bottom: 15px
            .error
                display: none
                margin-top: 20px
                border-radius: 3px
                background: #fc636b
                color: #fff
                padding: 15px 10px
                padding-left: 40px
                width: 100%
            .boton
                margin: auto
                background: #3895ea
                color: #fff
                border: none
                border-radius: 3px
                padding: 15px 40px
                cursor: pointer
                &:hover
                    background: #387bea
    .redes-sociales-libres
        background: #1e2b38
        padding: 60px 0
        .contenedor
            display: flex
            justify-content: center
        a
            color: #fff
            text-align: center
            width: 100px
            display: block
            padding: 15px 0
            border-radius: 3px
            font-size: 1.8rem
            margin: 0 20px
        .diaspora:hover
            background: #010101
        .gnusocial:hover
            background: #a42833
        .gitlab:hover
            background: #e24329
        .libregit:hover
            background: #333333
        .mediagoblin:hover
            background: #775fa3
        .notabug:hover
            background: #244664
        .peertube:hover
            background: #f1680d
    .copyleft
        background: #192633
        padding: 5px 0
        p
            color: #fff
            text-align: center
            font-size: 0.75rem
            a
                color: #3895ea
                text-decoration: none