#logo {
    margin-top: 50px;
    padding: 23px 0 25px 63px;
}

    #logo > img {
        cursor: pointer;
    }

    #logo > p {
        text-align: center;
        margin-right: 30px;
        margin-bottom: 10px;
    }

.main {
    padding: 20px 30px 30px 30px;
}

.main2 {
    margin-top: 0;
}

h2 {
    text-align: center;
}

p {
    text-align: justify;
}

    p a {
        text-decoration: none;
        color: #00aad4;
    }

.main > p i {
    word-break: break-all;
}

#top,
#bottom {
    height: 372px;
    padding: 30px 150px 30px 170px;
}

#top2 {
    height: 380px;
}


    #top2 .left {
        width: 40%;
        margin: 0 5%;
        background-image: url('../images/tecno.jpg');
        background-repeat: no-repeat;
        background-size: contain;
    }

    #top2 .right {
        width: 45%;
        margin-top: -80px;
    }

#bottom2 {
   /* height: 460px;*/
    padding-top: 30px;
    background-color: cornflowerblue;
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
}
    #bottom2 > div {
        padding: 30px 20%;
    }

        #bottom2 > div p {
            text-align: center;
        }

        #bottom2 > div span {
            color: yellow;
            font-family: cursive;
            font-size: 20px;            
        }

            #bottom2 > div span:hover {
                cursor: pointer;
            }

            #bottom2 > div > div {
                max-width: 85%;
                margin: 0 auto;
                line-height: 22px;
                font-size: 16px;
            }

        #bottom2 > div > div p {
            text-align: left;
        }

        #bottom2 > div > div > div {
            max-width: 20%;
            margin: 0 auto;
            padding-top: 35px;
        }

            #bottom2 > div > div > div button {
                background-color: mediumvioletred;
                width: 100%;
                height: 50px;
                border-radius: 4px;
                border: none;
                color: white;
                font-weight: bold;
            }
    
.left,
.central,
.right {
    float: left;
    width: calc(33.3% - 2px);
    height: 100%;
}

#susc1,
#susc2,
#susc3 {
    border: 1px solid black;
    width: 250px;
    height: 370px;
    margin: 0 auto;
}

    #susc1 p,
    #susc2 p,
    #susc3 p {
        font-size: 13px;
        margin: 20px 0;
    }

        #susc1 p:first-of-type,
        #susc2 p:first-of-type,
        #susc3 p:first-of-type {
            font-size: 14px;
            text-align: center;
        }

    #susc1 img,
    #susc2 img,
    #susc3 img {
        width: 150px;
    }

    #susc1 > div,
    #susc2 > div,
    #susc3 > div {
        width: 200px;
        margin: 0 auto;
    }

        #susc1 > div > div,
        #susc2 > div > div,
        #susc3 > div > div {
            width: 150px;
            margin: 0 auto;
        }

            #susc1 > div > div button,
            #susc2 > div > div button,
            #susc3 > div > div button {
                height: 25px;
                width: 150px;
                border: 1px solid darkgreen;
                border-radius: 4px;
                background-color: green;
                color: white;
                padding: 5px 5px 5px 5px;
                font-family: Raleway, Verdana;
            }

#formRegDiv {
    --cen: 450px;
    display: none;
    position: fixed;
    top: 50px;
    left: calc(50% - var(--cen) / 2);
    width: var(--cen);
    background-color: white;
    border: 3px solid darkgrey;
    border-radius: 6px;
    box-shadow: 1px 1px 3px lightslategrey;
}

#fototop {
    height: 120px;
    width: 100%;
    background-image: url(../images/woman.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.centrarReg {
    width: 300px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .centrarReg select,
    .centrarReg input {
        border: 1.5px solid #00aad4;
        border-radius: 4px;
        font-family: Raleway, Verdana;
        margin: 5px 0;
    }

    .centrarReg select {
        width: 300px;
        height: 33px;
        margin-bottom: 15px;
    }

    .centrarReg input {
        width: 293.5px;
        height: 30px;
    }

#btnSubmit,
#btnReset {
    height: 32px;
    width: 90px;
    border: 1px solid darkolivegreen;
    border-radius: 4px;
    background-color: cadetblue;
    color: white;
    padding: 5px 5px 5px 5px;
    margin-top: 10px;
    margin-left: 40px;
    font-family: Raleway, Verdana;
    box-shadow: 1px 1px 2px lightslategrey;
}

.centrarReg label {
    color: rgba(72,61,139, 0.9);
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
}

@media only screen and (max-width: 374.9px) {
    #logo {
        padding: 5px 0 5px 0;
    }

        #logo > img {
            transform: scale(0.7);
        }

        #logo > p {
            display: none;
        }

    #top {
        height: 340px;
        padding: 0;
    }

    #bottom {
        height: 700px;
        padding: 0;
    }

    .left, .central, .right {
        float: none;
        margin: 5px auto 0;
        width: 252px;
    }

    #susc1,
    #susc2,
    #susc3 {
        height: 100%;
    }

        #susc1 p, #susc2 p, #susc3 p {
            margin: 15px 0;
        }

    #top2 {
        height: 850px;
    }

        #top2 .left {
            --a: 300px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 100px;
        }

        #top2 .right {
            --a: 300px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div {
        padding: 30px 10%;
    }

        #bottom2 > div > div {
            max-width: 100%;
        }

            #bottom2 > div > div > div {
                max-width: 50%;
            }

    #formRegDiv {
        --cen: 300px;
    }

    .centrarReg {
        width: 220px;
    }

        .centrarReg select {
            width: 220px;
        }

        .centrarReg input {
            width: 217px;
        }

    #btnSubmit,
    #btnReset {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 375px) and (max-width: 459.9px) {
    #logo {
        padding: 15px 0 15px 10px;
    }

        #logo > img {
            transform: scale(0.8);
        }

        #logo > p {
            display: none;
        }

    #top {
        height: 340px;
        padding: 0;
    }

    #bottom {
        height: 700px;
        padding: 0;
    }

    .left, .central, .right {
        float: none;
        margin: 5px auto 0;
        width: 252px;
    }

    #susc1,
    #susc2,
    #susc3 {
        height: 100%;
    }

        #susc1 p, #susc2 p, #susc3 p {
            margin: 15px 0;
        }

    #top2 {
        height: 850px;
    }

        #top2 .left {
            --a: 350px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 210px;
        }

        #top2 .right {
            --a: 350px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div {
        padding: 30px 10%;
    }

        #bottom2 > div > div {
            max-width: 100%;
        }

            #bottom2 > div > div > div {
                max-width: 50%;
            }

    #formRegDiv {
        --cen: 300px;
    }

    .centrarReg {
        width: 250px;
    }

        .centrarReg select {
            width: 250px;
        }

        .centrarReg input {
            width: 247px;
        }

    #btnSubmit,
    #btnReset {
        margin-left: 20px;
    }
}

@media only screen and (min-width: 460px) and (max-width: 569.9px) {
    #logo {
        padding: 23px 0 15px 40px;
    }

        #logo > img {
            transform: scale(0.9);
        }

        #logo > p {
            margin-top: 30px;
            width: 40%;
            line-height: 22px;
        }

    #top, #bottom {
        padding: 0;
        margin: -150px 0 0 45%;
    }

    #bottom {
        height: 600px;
    }

    .left, .central, .right {
        float: none;
        margin: 5px auto 0;
        width: 160px;
    }

    .central {
        float: left;
        margin-left: -86%;
        margin-top: -150px;
    }

    .right {
        margin-top: 60px;
    }

    #susc1,
    #susc2,
    #susc3 {
        width: 200px;
    }

        #susc1 > div,
        #susc2 > div,
        #susc3 > div {
            width: 170px;
        }

    #top2 {
        height: 850px;
    }

        #top2 .left {
            --a: 420px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 280px;
        }

        #top2 .right {
            --a: 420px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div {
        padding: 30px 10%;
    }

        #bottom2 > div > div {
            max-width: 100%;
        }

            #bottom2 > div > div > div {
                max-width: 50%;
            }

    #formRegDiv {
        --cen: 400px;
    }

    .centrarReg {
        width: 280px;
    }

        .centrarReg select {
            width: 280px;
        }

        .centrarReg input {
            width: 277px;
        }
}

@media only screen and (min-width: 570px) and (max-width: 679.9px) {
    #logo {
        padding: 23px 0 15px 40px;
    }

        #logo > img {
            transform: scale(0.9);
        }

        #logo > p {
            margin-top: 30px;
            width: 40%;
            line-height: 22px;
        }

    #top, #bottom {
        padding: 0;
        margin: -150px 0 0 45%;
    }

    #bottom {
        height: 600px;
    }

    .left, .central, .right {
        float: none;
        margin: 5px auto 0;
        width: 180px;
    }

    .central {
        float: left;
        margin-left: -70%;
        margin-top: -150px;
    }

    .right {
        margin-top: 60px;
    }

    #susc1,
    #susc2,
    #susc3 {
        width: 200px;
    }

        #susc1 > div,
        #susc2 > div,
        #susc3 > div {
            width: 170px;
        }

    #top2 {
        height: 850px;
    }

        #top2 .left {
            --a: 450px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 280px;
        }

        #top2 .right {
            --a: 450px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div {
        padding: 30px 10%;
    }

    #bottom2 > div > div {
        max-width: 100%;
    }

        #bottom2 > div > div > div {
            max-width: 50%;
        }

    .centrarReg {
        width: 280px;
    }

        .centrarReg select {
            width: 280px;
        }

        .centrarReg input {
            width: 277px;
        }
}

@media only screen and (min-width: 680px) and (max-width: 729.9px) {
    #logo {
        padding: 0 0 15px 40px;
    }

        #logo > img {
            transform: scale(0.9);
        }

        #logo > p {
            margin-top: 30px;
            width: 40%;
            line-height: 22px;
        }

    .main {
        padding: 20px 0 30px 0;
    }

    #top, #bottom {
        padding: 0;
        margin: -150px 0 0 230px;
    }

    #bottom {
        height: 600px;
    }

    .left, .central, .right {
        float: none;
        margin: 5px auto 0;
        width: 180px;
    }

    .central {
        float: left;
        margin-left: -180px;
        margin-top: -150px;
    }

    .right {
        margin-top: 60px;
    }

    #top2 {
        height: 800px;
    }

        #top2 .left {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 340px;
        }

        #top2 .right {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div > div {
        max-width: 90%;
    }

    #bottom2 > div > div > div {
        max-width: 40%;
    }

    .centrarReg {
        width: 280px;
    }

        .centrarReg select {
            width: 280px;
        }

        .centrarReg input {
            width: 277px;
        }
}

@media only screen and (min-width: 730px) and (max-width: 899.9px) {
    #logo {
        padding-left: 0;
    }

    #logo > p {
        margin-top: 30px;
    }

    #top,
    #bottom {
        padding: 30px 0;
    }

    #susc1,
    #susc2,
    #susc3 {
        width: 200px;
    }

        #susc1 > div,
        #susc2 > div,
        #susc3 > div {
            width: 170px;
        }

    #top2 {
        height: 800px;
    }

        #top2 .left {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 340px;
        }

        #top2 .right {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div > div > div {
        max-width: 40%;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1049.9px) {
    #logo {
        padding-left: 0;
    }

    #top,
    #bottom {
        padding: 30px 20px 30px 40px;
    }

    #top2 {
        height: 800px;
    }

        #top2 .left {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: 0;
            height: 340px;
        }

        #top2 .right {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }

    #bottom2 > div > div > div {
        max-width: 40%;
    }
}

@media only screen and (min-width: 1050px) and (max-width: 1229.9px) {
    #logo {
        padding-left: 0;
    }

    #top,
    #bottom {
        padding: 30px 80px 30px 100px;
    }

    #top2 {
        height: 750px;
    }

    #top2 .left {
        --a: 600px;
        width: var(--a);
        margin: 0 calc((100% - var(--a)) / 2);
        margin-top: -80px;
        height: 340px;
    }

        #top2 .right {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }
}

@media only screen and (min-width: 1230px) and (max-width: 1629.9px) {
    @media only screen and (max-width: 1500px) {
        #top2 {
            height: 750px;
        }

        #top2 .left {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            margin-top: -80px;
            height: 340px;
        }

        #top2 .right {
            --a: 600px;
            width: var(--a);
            margin: 0 calc((100% - var(--a)) / 2);
            height: auto;
        }
    }
}

@media only screen and (max-height: 615px) {
    #formRegDiv {
        top: 55px;
        height: 350px;
        overflow-y: scroll;
    }
}