/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.topPresentation
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;

}

.context 
{
    height: 31.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 5rem;
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    position: absolute;
}
.text-content
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
}
.slogan-text
{
    color: var(--color-font-secondary);
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
}
.sub-text
{
    color: var(--color-font-secondary);
    font-size: 1.875rem;
    font-weight: 500;
}
.contact-btn
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: var(--color-background-header);
    width: 9.375rem;
    border-radius: 0.3125rem;
    padding: 0.75rem;
    text-decoration: none;
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    border: 0.125rem solid white;
}
.contact-btn:hover
{
    background: var(--color-primary);
    color: white;
}
.contact-btn-text
{
    color: var(--color-primary);
    font-size: 1.325rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
}
.contact-btn:hover .contact-btn-text
{
    color: white;
}

@media screen and (max-width: 1200px)
{
    .context 
    {
        height: 28.125rem;
    }
    .slogan-text
    {
        font-size: 4.375rem;
    }
    .sub-text
    {
        font-size: 1.75rem;
    }
    .contact-btn
    {
        width: 7.5rem;
        padding: 0.625rem;
        text-decoration: none;
        border: 0.125rem solid white;
    }
    .contact-btn-text
    {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 1000px)
{
    .topPresentation
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-bottom: 1rem;
    }
    .context 
    {
        height: 25rem;
    }
    
    .slogan-text
    {
        font-size: 4.0625rem;
    }
    .sub-text
    {
        font-size: 1.625rem;
    }
    .contact-btn
    {
        width: 7.5rem;
        padding: 0.625rem;
        text-decoration: none;
        border: 0.125rem solid white;
    }
    .contact-btn-text
    {
        font-size: 1rem;
    }
}

@media screen and (max-width: 900px)
{
    .context
    {
        left: auto;
        right: auto;
    }
    .topPresentation
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .topPresentationImage
    {
        width: 28.125rem;
        height: 28.125rem;
    }
    .topPresentationText
    {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .context 
    {
        height: 21.25rem;
    }
    .slogan-text
    {
        font-size: 3.125rem;
    }
    .sub-text
    {
        font-size: 1.375rem;
    }
    .contact-btn
    {
        width: 6.25rem;
        padding: 0.625rem;
        text-decoration: none;
        border: 0.09375rem solid white;
    }
    .contact-btn-text
    {
        font-size: 0.875rem;
    }

}
@media screen and (max-width: 700px)
{
    .slogan-text
    {
        font-size: 2.8125rem;
    }
    .sub-text
    {
        font-size: 1.25rem;
    }
    .contact-btn
    {
        width: 6.25rem;
        padding: 0.625rem;
        text-decoration: none;
        border: 0.09375rem solid white;
    }
    .contact-btn-text
    {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 500px)
{
    .topPresentationImage
    {
        width: 21.875rem;
        height: 21.875rem;
    }
    .context 
    {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .slogan-text
    {
        font-size: 2.5rem;
        text-align: center;
    }
    .sub-text
    {
        font-size: 1rem;
        text-align: center;
        margin-bottom: 1rem;
    }
    .contact-btn
    {
        width: 6.25rem;
        padding: 0.625rem;
        text-decoration: none;
        border: 0.09375rem solid white;
    }
    .contact-btn-text
    {
        font-size: 0.875rem;
    }
}