@media (max-width: 768px) {
/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Global styles */
body {
    font-size: 16px;
    font-family: "lato", sans-serif;
    font-weight: 400;
    line-height: 2rem;
    color: #ffff;
    background-color: #183539;
}
.picture-ao7 {
    width: 50%;
    border-radius: 75%;
}
.picture-ao7-img {
    width: 100%;
    max-width: 200px;
    height: auto;
}
.row {
    text-align: center;
}
.button-design {
    margin: 25px;
    font-size: 1rem;
    color: #ffff;
}
.button-design-row {
    padding: 10px 8px 10px 8px;
    width: 70%;
    background-color: #416f75;
    border-radius: 8px;
}
.title-text-Design {
    font-size: 1rem;
    color: aliceblue;
}
.separation-design {
    margin: 10px;
}
.ao-logo{
    width: 10%;
}
a {
    text-decoration: none;
    color: #ffff;
    cursor: pointer;
}
a:hover, a:focus, a:active {
    text-decoration: none;
    color: #183539;
    cursor: pointer;
}
.marca-design {
    font-size: 1.1rem;
    color: #416f75;
    padding: 0 10px 0 10px;
}
.errorNumber404 {
    font-size: 5rem;
    color: #f8f9fa ;
}
.errorText404 {
    font-size: 2rem;
    color: #f8f9fa ;
}
.errorGoBack404 {
    font-size: 1rem;
    color: #f8f9fa ;
}
.errorButton404 {
    text-decoration: none;
    color: #f8f9fa;
    cursor: pointer;
}
.errorButton404, a {
    text-decoration: none;
    color: #f8f9fa;
    cursor: pointer;
}
.errorButton404, a:hover, a:focus, a:active {
    text-decoration: none;
    color: #1F8BFF;
    cursor: pointer;
}
.guionStyle{
    color: #416f75;
}
}
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
@media (min-width: 768px) {
/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-size: 18px;
    font-family: "lato", sans-serif;
    font-weight: 400;
    line-height: 3rem;
    color: #ffff;
    background-color: #183539;
}
.picture-ao7 {
    width: 25%;
    border-radius: 75%;
}
.picture-ao7-img {
    width: 100%;
    max-width: 200px;
    height: auto;
}
.row {
    text-align: center;
}
.button-design {
    padding: 20px;
    margin: 25px;
    font-size: 1.5rem;
    color: #ffff;
}
.button-design-row {
    padding: 20px 10px 20px 10px;
    width: 70%;
    background-color: #416f75;
    border-radius: 8px;
}
.title-text-Design {
    font-size: 2rem;
    color: aliceblue;
}
.separation-design {
    margin: 10px;
}
.ao-logo{
    width: 3%;
}
a {
    text-decoration: none;
    color: #ffff;
    cursor: pointer;
}
a:hover, a:focus, a:active {
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.marca-design {
    font-size: 1.5rem;
    color: #355E64;
    padding: 0 10px 0 10px;
}

.errorText404 {
    font-size: 2rem;
    color: #f8f9fa ;
}
.errorGoBack404 {
    font-size: 1rem;
    color: #f8f9fa ;
}
.errorButton404 {
    text-decoration: none;
    color: #f8f9fa;
    cursor: pointer;
}
.errorButton404, a:hover, a:focus, a:active {
    text-decoration: none;
    color: #1F8BFF;
    cursor: pointer;
}
.guionStyle{
    color: #9ee1ea;
}
.Title-Design {
    font-size: 2rem;
    color: #1F8BFF;
}
.aoLogoImg {
    width: 15%;
    text-align: center;
    padding: 0% 1% 3% 1%;   
}
.button404 {
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248, 249, 250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
}
.btn-404 {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow 
}



}