html {
    scroll-behavior: smooth;
 }

 :root{
    --color_ay: #CC3366;
    --large_font: 2vw;
    --light_gray: #EDEDED;
    --ay_blue: #336699; /* #93C2FF; */
    --ay_logo_red: rgba(204, 51, 102, 0.7);

} /* variables*/

* {
    box-sizing: border-box;
}

body{
    background-color: var(--light_gray);
/*    font-family: "Poppins", sans-serif;*/
}

/*li {
    margin-top: 20px;
}
*/
.container {
    display: grid;
    grid-gap: 5px;
    width: 100%;
    height: 100%;
    grid-template-rows: 23vh 1fr 15%;
    grid-template-columns: 10% 80% 10%;
}

.container > div {
    background: #EDEDED;
    font-family:"Helvetica Neue", Arial, sans-serif;
}

.header_AY {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px;
}

.title_AY{
    font-size: 2.7vmax;
    margin-top: 0px;
    margin-bottom: 3px;
    text-align: right;
    margin-right: 10px;
}

.title_simulator{
    color: var(--color_ay); font-size: 1rem; margin-bottom: 3px; text-align: right; margin-right: 10px;
}

.content {
    grid-row: 2;
    grid-column: 2;
    background-color: #FFFFFF !important;

}

.footer {
    grid-row: 3;
    grid-column: 2;
}

.responsive_logo {
/*    max-height: 3rem; */
    max-height: 10vmax;
}

.item_gap {
    width: 20px;
}

.main_text{
    height: 300px;
    width: 300px;
    background-color: #93C2FF;

}

.top_strip {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color_ay);
    height: auto;
    top: 10px;
    padding-left: 20px;
    transition: 2000ms;
    color: #FFFFFF;
}

.top_strip:hover {
    background-color: var(--ay_blue);
/*    color: #FFFFFF;*/
/*    color: black;*/
    color: white;
}

.large_text {
    word-break: break-word;
    align-self: center;
    max-width: 14vw;
    min-width: 60px;
    margin: 0 0;
    font-size: 2.5vmax; /*var(--large_font);*/
/*    font-size: clamp(0.9rem, 2vw, 2rem);*/
/*    font-weight:700;*/
    color: black;
/*    border: 1px solid black;*/
}

.demo_strip {
    height: auto; width: 444px; background-color: var(--ay_blue); margin-left: auto; margin-right: auto;
    transition: 2000ms;
}

.demo_strip:hover {
    background-color: var(--color_ay);
}

.demo_btn_strip {
    margin-top: 60px; margin-bottom: 60px; display: flex; align-items: center; justify-content: center;
    background-color: var(--ay_blue); height: 140px; width: 100%;
    transition: 1000ms;
}

.demo_btn_strip:hover {
    background-color: var(--color_ay);
}

.info-text {
    margin-top: 0px; margin-bottom: 3px; color: blue;
}

.MZ-text {
    margin-left: 20px;
    color: blue;
    font-size:  1.5rem;
    text-align: right;

}


/*.main_menu {
    float: right;
    font-size: 1rem;
    justify-self: flex-end;
}

.main_menu a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 1rem;
    line-height: 25px;
    border-radius: 4px;
    }

.main_menu a:hover {
    background-color: #99FFFF;
    line-height: 25px;
    border-radius: 14px;
}

.main_menu a.active {
    background-color: dodgerblue;
}*/

.ay-line {
    background: var(--color_ay);
    display: block;
    height: 2px;
    flex-grow: 1;
/*    position: relative;*/
}

.ay-header {
    display:flex;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 50px;
    border: solid;
    border-width: thin;
    border-color: black;
    justify-content: center;
    justify-self: center;
    text-align: center;
    align-items: center;
    font-size: 1.5rem; /*24px; */
    color: var(--color_ay);
}

.ay-border {
    border: solid;
    border-width: thin;
/*    border-color: black;*/
    border-color: var(--color_ay);
    padding: 10px
}

.ay-mail {
    text-decoration: none; font-size: 1.5rem; color: var(--color_ay); margin-left: 14px;
}

.ay-bottom-line {
    display: block; width: 100%; height: 2px; background-color: black; margin-bottom: 14px;
}

.title-1{
    font-size: 24px;
    color: var(--color_ay);
    margin-right: 20px;
    margin-bottom: 5px;
}

.title-2{
    font-size: 18px;
    color: var(--color_ay);
    margin-right: 20px;
    margin-bottom: 5px;
}

@media screen and (max-width: 650px) {

    .ay-mail {
        font-size: 0.9rem;
        margin-left: 3px;
    }
    .MZ-text {
        font-size:  0.9rem;
        margin-left: 5px;
    }

    .ay-header {
        font-size: 1.0rem; /*24px; */
    }
}