@media (min-width: 701px)
{
    #appPresentContainer
    {
        padding: 10px;
    }

    #appFrame
    {
        border-radius: 5px;
        border: none;
    }
}

@media (max-width: 700px)
{
    #appPresentContainer
    {
        padding: 0px;
    }

    #appFrame
    {
        border-radius: 0px;
        border: none;
    }
}

@media (min-width: 601px)
{

    .main
    {
        height: 100%;
    }

    .head-logo
    {
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 60px;
    }

    .head-odf
    {
        display: block;
        width: 100%;
        text-align: center;
    }

    .head-bv
    {
        display: block;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 140px;
    }

    .o-que-deseja-fazer
    {
        color: #565661;
        font-family: Roboto;
        font-size: 24px;
        font-weight: 700;
        line-height: 29px;
        width: 292px;
        text-align: center;
    }

    .bem-vindo-ao-connect
    {
        color: #818291;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        /*text-align: right;*/
    }

    .content
    {
        /* border: 1px solid blue; */
        /* width: auto; */
        margin-top: 66px;
        /* padding-left: 153px;      */
    }


    .rectangle-box:hover .acessar
    {
        background-color: var(--main-bg-color);
        border: 1px solid var(--main-bg-color);
        border-radius: 4px;
        width: 128px;
        height: 45px;
    }


    .rectangle-box:hover .acessar-text
    {
        color: #FFFFFF;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: center;
    }

    /*.rectangle-box:hover .box-acesso-ao-aplicativo {
  color: #EB232B;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
  width: 175px;
  text-align: center;
}*/


    .rectangle-box:hover .tilte-1
    {
        color: var(--main-bg-color);
    }

    .rectangle-box:hover .tilte-2
    {
        color: var(--main-bg-color);
    }

    .rectangle-box:hover
    {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 15px 0 rgba(163, 163, 170, 0.5899999737739563);
        transform: scale(1.1, 1.1);
    }

        .rectangle-box:hover #path-phone-1
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phone-3
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phone-5
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }


        .rectangle-box:hover #path-folha-1
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-folha-3
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }


        .rectangle-box:hover #path-casa-1
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }

        .rectangle-box:hover #path-casa-3
        {
            fill: var(--main-bg-color);
        }


        .rectangle-box:hover #path-phonec-1
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }

        .rectangle-box:hover #path-phonec-3
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phonec-5
        {
            fill: var(--main-bg-color);
        }



    .rectangle-box
    {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 12px 0 rgba(193, 193, 200, 0.3400000035762787);
        width: 255px;
        height: 337px;
        float: left;
        margin-right: 30px;
        margin-bottom: 30px;
    }

    /*############# BOX 1 ############*/

    .box-acesso-ao-aplicativo
    {
        /* border: 1px solid red; */
        margin-top: 120px;
        margin-left: 40px;
        position: absolute;
        margin-top: 18px;
    }

    .box-para-responsavel-al
    {
        /* border: 1px solid red; */
        margin-top: 187px;
        margin-left: 44px;
        margin-top: 85px;
    }

    .para-responsavel-al
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        width: 168px;
        text-align: center;
    }



    /*############# FECHA BOX 1 ############*/



    /*############# BOX 2 ############*/

    .box-tutoriais-e-document
    {
        /* border: 1px solid red; */
        margin-top: 120px;
        margin-left: 40px;
        position: absolute;
        margin-top: 18px;
    }

    .box-para-responsavel-al-box2
    {
        /* border: 1px solid red; */
        margin-top: 187px;
        margin-left: 44px;
        margin-top: 85px;
    }

    .para-responsavel-al-box2
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 500;
        line-height: 24px;
        width: 158px;
        text-align: center;
    }

    /*############# FECHA BOX 2 ############*/

    /*############# BOX 3 ############*/

    .box-acesso-escola
    {
        /* border: 1px solid red; */
        position: absolute;
        margin-top: 18px;
        margin-left: 13px;
    }

    .box-para-responsavel-al-box-3
    {
        /* border: 1px solid red; */
        margin-left: 44px;
        margin-top: 50px;
        margin-bottom: 60px;
    }

    .para-responsavel-al-box-3
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        width: 168px;
        text-align: center;
    }

    /*############# FECHA BOX 3 ############*/


    /*############# BOX 4 ############*/

    .box-instale-nosso-app
    {
        /* border: 1px solid red; */
        position: absolute;
        margin-top: 18px;
    }

    .box-disponiveis-em
    {
        /* border: 1px solid red; */
        margin-left: 63px;
        margin-top: 50px;
        margin-bottom: 27px;
    }

    /*############# FECHA BOX 4 ############*/


    .shape
    {
        position: relative;
        /* background-color: #818291; */
        width: 45.35px;
        height: 60px;
        margin-left: 105.32px;
        margin-top: 42px;
    }

    .acessar
    {
        border: 1px solid var(--main-bg-color);
        border-radius: 4px;
        width: 128px;
        height: 45px;
        margin-left: 64px;
        padding: 9px 33px 16px 33px;
        margin-top: 25px;
    }

    .acessar-text
    {
        color: var(--main-bg-color);
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: center;
    }

    .fill-907
    {
        color: #818291;
        font-family: Roboto;
        font-size: 13px;
        font-weight: 400;
        text-align: center;
        background-color: #FFFFFF;
        width: 100%;
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        position: fixed;
        bottom: 0px;
    }

    .tilte-1
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        width: 175px;
        text-align: center;
    }


    .tilte-2
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 29px;
        width: 237px;
        text-align: center;
    }
}

@media (min-width: 1001px)
{

    .main
    {
    }

    .head-logo
    {
        width: 100%;
        text-align: left;
        padding-left: 70px;
        margin-bottom: 0px;
    }

    .head-odf
    {
        position: absolute;
        margin-top: 40px;
    }

    .head-bv
    {
        position: absolute;
        top: 54px;
        right: 70px;
    }

    .o-que-deseja-fazer
    {
        color: #565661;
        font-family: Roboto;
        font-size: 28px;
        font-weight: 700;
        line-height: 34px;
        width: 292px;
    }

    .bem-vindo-ao-connect
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
        text-align: right;
    }

    .content
    {
        /* border: 1px solid blue; */
        /* width: auto; */
        margin-top: 66px;
        /* padding-left: 153px;      */
    }


    .rectangle-box:hover .acessar
    {
        background-color: var(--main-bg-color);
        border: 1px solid var(--main-bg-color);
        border-radius: 4px;
        width: 128px;
        height: 45px;
    }


    .rectangle-box:hover .acessar-text
    {
        color: #FFFFFF;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: center;
    }

    /*.rectangle-box:hover .box-acesso-ao-aplicativo {
  color: #EB232B;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
  width: 175px;
  text-align: center;
}*/


    .rectangle-box:hover .tilte-1
    {
        color: var(--main-bg-color);
    }

    .rectangle-box:hover .tilte-2
    {
        color: var(--main-bg-color);
    }

    .rectangle-box:hover
    {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 15px 0 rgba(163, 163, 170, 0.5899999737739563);
        transform: scale(1.1, 1.1);
    }

        .rectangle-box:hover #path-phone-1
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phone-3
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phone-5
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }


        .rectangle-box:hover #path-folha-1
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-folha-3
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }


        .rectangle-box:hover #path-casa-1
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }

        .rectangle-box:hover #path-casa-3
        {
            fill: var(--main-bg-color);
        }


        .rectangle-box:hover #path-phonec-1
        {
            fill: var(--main-bg-color);
            opacity: 0.300000011920929;
        }

        .rectangle-box:hover #path-phonec-3
        {
            fill: var(--main-bg-color);
        }

        .rectangle-box:hover #path-phonec-5
        {
            fill: var(--main-bg-color);
        }



    .rectangle-box
    {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 12px 0 rgba(193, 193, 200, 0.3400000035762787);
        width: 255px;
        height: 337px;
        float: left;
        margin-right: 30px;
        margin-bottom: 30px;
    }

    /*############# BOX 1 ############*/

    .box-acesso-ao-aplicativo
    {
        /* border: 1px solid red; */
        margin-top: 120px;
        margin-left: 40px;
        position: absolute;
        margin-top: 18px;
    }

    .box-para-responsavel-al
    {
        /* border: 1px solid red; */
        margin-top: 187px;
        margin-left: 44px;
        margin-top: 85px;
    }

    .para-responsavel-al
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        width: 168px;
        text-align: center;
    }



    /*############# FECHA BOX 1 ############*/



    /*############# BOX 2 ############*/

    .box-tutoriais-e-document
    {
        /* border: 1px solid red; */
        margin-top: 120px;
        margin-left: 40px;
        position: absolute;
        margin-top: 18px;
    }

    .box-para-responsavel-al-box2
    {
        /* border: 1px solid red; */
        margin-top: 187px;
        margin-left: 44px;
        margin-top: 85px;
    }

    .para-responsavel-al-box2
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 500;
        line-height: 24px;
        width: 158px;
        text-align: center;
    }

    /*############# FECHA BOX 2 ############*/

    /*############# BOX 3 ############*/

    .box-acesso-escola
    {
        /* border: 1px solid red; */
        position: absolute;
        margin-top: 18px;
        margin-left: 13px;
    }

    .box-para-responsavel-al-box-3
    {
        /* border: 1px solid red; */
        margin-left: 44px;
        margin-top: 50px;
        margin-bottom: 60px;
    }

    .para-responsavel-al-box-3
    {
        color: #818291;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        width: 168px;
        text-align: center;
    }

    /*############# FECHA BOX 3 ############*/


    /*############# BOX 4 ############*/

    .box-instale-nosso-app
    {
        /* border: 1px solid red; */
        position: absolute;
        margin-top: 18px;
    }

    .box-disponiveis-em
    {
        /* border: 1px solid red; */
        margin-left: 63px;
        margin-top: 50px;
        margin-bottom: 27px;
    }

    /*############# FECHA BOX 4 ############*/


    .shape
    {
        position: relative;
        /* background-color: #818291; */
        width: 45.35px;
        height: 60px;
        margin-left: 105.32px;
        margin-top: 42px;
    }

    .acessar
    {
        border: 1px solid var(--main-bg-color);
        border-radius: 4px;
        width: 128px;
        height: 45px;
        margin-left: 64px;
        padding: 9px 33px 16px 33px;
        margin-top: 25px;
    }

    .acessar-text
    {
        color: var(--main-bg-color);
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: center;
    }

    .fill-907
    {
        color: #818291;
        font-family: Roboto;
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        background-color: #FFFFFF;
        width: 100%;
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        position: fixed;
        bottom: 0px;
    }

    .tilte-1
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        width: 175px;
        text-align: center;
    }


    .tilte-2
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 29px;
        width: 237px;
        text-align: center;
    }
}

@media (max-width: 600px)
{

    .main
    {
        height: 100%;
    }

    .head-logo
    {
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 60px;
    }

    .head-odf
    {
        display: block;
        width: 100%;
        text-align: center;
    }

    .head-bv
    {
        display: block;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 140px;
    }


    .box-rectangle
    {
        border: 1px solid royalblue;
    }

    .bitmap
    {
        width: 88px;
        height: 90px;
    }

    .o-que-deseja-fazer
    {
        color: #565661;
        font-family: Roboto;
        font-size: 24px;
        font-weight: 700;
        line-height: 29px;
        width: 292px;
        text-align: center;
    }

    .bem-vindo-ao-connect
    {
        color: #818291;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        /*text-align: right;*/
    }

    .content
    {
        /* border: 1px solid blue; */
        /* width: auto; */
        margin-top: 24px;
        /* padding-left: 153px;      */
    }


    #path-phone-1
    {
        fill: var(--main-bg-color);
    }

    #path-phone-3
    {
        fill: var(--main-bg-color);
    }

    #path-phone-5
    {
        fill: var(--main-bg-color);
        opacity: 0.300000011920929;
    }


    #path-folha-1
    {
        fill: var(--main-bg-color);
    }

    #path-folha-3
    {
        fill: var(--main-bg-color);
        opacity: 0.300000011920929;
    }


    #path-casa-1
    {
        fill: var(--main-bg-color);
        opacity: 0.300000011920929;
    }

    #path-casa-3
    {
        fill: var(--main-bg-color);
    }

    #path-phonec-1
    {
        fill: var(--main-bg-color);
        opacity: 0.300000011920929;
    }

    .rectangle-box-mobile
    {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 12px 0 rgba(193, 193, 200, 0.3400000035762787);
        width: 331px;
        height: 118px;
        float: left;
        margin-bottom: 10px;
    }

    .rectangle-box-4-mobile
    {
        margin-right: 30px;
    }


    .shape
    {
        position: relative;
        /* background-color: #818291; */
        width: 36.48px;
        height: 48.39px;
        margin-left: 20px;
        margin-top: 26.11px;
        display: inline-block;
    }

    .none
    {
        display: none;
    }

    /*############# BOX 1 ############*/
    .box-text-1
    {
        /* border: 1px solid red; */
        margin-top: 23px;
        margin-left: 26px;
        display: inline-block;
        position: absolute;
    }

    .box-text-2
    {
        /* border: 1px solid red; */
        margin-left: 83px;
        margin-top: -25px;
    }

    .style-text-1
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        width: 189px;
        text-align: left;
    }

    .style-text-2
    {
        color: #818291;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        width: 149px;
        text-align: left;
    }

    /*############# FECHA BOX 1 ############*/

    /*############# BOX 4 ############*/

    .box-instale-nosso-app
    {
        /* border: 1px solid red; */
        position: absolute;
        margin-top: 18px;
    }

    .box-disponiveis-em
    {
        /* border: 1px solid red; */
        margin-left: 63px;
        margin-top: 50px;
        margin-bottom: 27px;
    }


    /*############# FECHA BOX 4 ############*/

    .tilte-mobile-1
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 500;
        line-height: 30px;
        width: 175px;
        text-align: center;
    }


    .tilte-mobile-2
    {
        color: #4A4A4A;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 29px;
        width: 237px;
        text-align: center;
    }

    .acessar
    {
        display: none;
        border: 1px solid #EB232B;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 128px;
        height: 45px;
        margin-left: 64px;
        padding: 9px 33px 16px 33px;
        margin-top: 25px;
    }

    .acessar-text
    {
        color: #EB232B;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: center;
    }


    .fill-907
    {
        color: #818291;
        font-family: Roboto;
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        margin-top: 30px;
        margin-left: 8px;
        height: 60px;
    }

    /*.link-mobile a span {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 5px 12px 0 rgba(193, 193, 200, 0.3400000035762787);
        width: 331px;
        height: 118px;
        float: left;
        margin-bottom: 10px;
        
    }*/

}


:root
{
    --main-bg-color: #EB232B;
    position: relative;
}

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

span
{
    color: var(--main-bg-color);
}

html, body, form
{
    height: 100%;
}

body, form
{
    min-height: 100%;
}


.disponiveis-em
{
    color: #818291;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    width: 108px;
    text-align: center;
}

.box-google
{
    background-color: #565661;
    border-radius: 4px;
    width: 173px;
    height: 45px;
    margin-left: 41px;
    margin-bottom: 13px;
}

.box-apple
{
    background-color: #565661;
    border-radius: 4px;
    width: 173px;
    height: 45px;
    margin-left: 41px;
}

.rectangle-top
{
    background-color: var(--main-bg-color);
    width: auto;
    height: 4px;
}

.appshadow
{
    box-shadow: 0 5px 12px 0 rgba(27, 27, 32, 0.7);
}