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

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    content.header.halfpage {
        padding: 50vh 0px 50px 0px;
    }

    content.purple {
        padding: 30px 0 60px 0;
    }

    content .content {
        padding: 0;
    }

        content .content.padding {
            padding-left: 30px;
            padding-right: 30px;
        }

        content .content.toppadding {
            padding-top: 30px;
            padding-bottom: 30px;
        }

    content.mobiletop .content {
        padding: 0 20px;
    }

    /*****************************************************************************************************/

    h1 {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    h2 {
        display: block;
        width: calc(100% - 60px);
        margin: 0 auto;
        padding-bottom: 0;
    }

        h2.verticalcenter {
            display: block;
            position: relative;
            top: initial;
            transform: none;
        }

    /*****************************************************************************************************/

    .columns .column {
        margin: 30px 30px 0px 30px;
    }

    .columns.nomobilepadding .column {
        margin: 0;
    }

    .columns .column.toppadding {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .columns .column.rightpadding {
        padding-right: 0px;
    }

    .columns .column.leftpadding {
        padding-left: 0px;
    }

    .columns .column.half {
        width: 100%;
        max-width: 612px;
    }

    .columns .column.third {
        width: 100%;
        max-width: 755px;
    }

    .columns .column.twothird {
        width: 100%;
        max-width: 755px;
    }

    .columns .column.fourth {
        width: 50%;
        padding-right: 0px;
    }

    .columns .column.fifth {
        width: 33%;
        padding-right: 0px;
    }

    .columns .column.half.animate {
        margin-right: 30px;
        transition: none;
    }

        .columns .column.half.animate.animatestopped {
            margin-right: 30px;
        }

            .columns .column.half.animate.animatestopped.reverseshadow {
                margin-right: 30px;
                margin-left: 30px;
            }

    /*****************************************************************************************************/

    .caseimage {
        display: none;
    }

    /*****************************************************************************************************/
    
    img.ebook {
        display: none;
    }
}

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

    content.mobiletop {
        top: 0 !important;
        display: block !important;
    }

    .mainmenu {
        display: none;
    }

    content.mobiletop .mainmenu.open {
        display: block;
        height: auto;
    }

    content.top {
        opacity: 0;
    }

    content.header {
        padding: 65px 0px 100px 0px;
    }

    /*****************************************************************************************************/

    .columns .column {
        margin: 30px 30px 0px 30px;
    }

        .columns .column.fourth {
            width: 100%;
        }

        .columns .column.fifth {
            width: 100%;
        }

        .columns .column.fourth.box.margin {
            width: 100%;
            margin: 0 15px 15px 0;
        }

    /*****************************************************************************************************/

    h1 {
        font-size: 40px;
        line-height: 50px;
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    /*****************************************************************************************************/

    .boxes .box {
        width: calc(50%);
        margin: 0 0 30px 0;
    }

    /*****************************************************************************************************/

    /*#circle svg {
        height: 500px;
    }*/

    .circlegraphic.planorama {
        padding: 30px;
        width: 100px;
        height: 100px;
        margin: 0 0 0 0px;
    }

    /* #circle {
        width: 250px;
        height: 250px;
    }*/

    /*.circlegraphic {
        width: 100px;
        height: 100px;
        padding: 10px;
        font-size: 11px;
        line-height: 15px;
        margin: -50px 0 0 -50px;
        background-position: top 25px center;
        background-size: 32px auto;
    }

        .circlegraphic span {
            bottom: 25px;
            font-size: 10px
        }

        .circlegraphic.web {
            top: 5%;
            left: 50%;
        }

        .circlegraphic.erp {
            top: 30%;
            left: 90%;
        }

        .circlegraphic.crm {
            top: 75%;
            left: 90%;
        }

        .circlegraphic.mail {
            top: 95%;
            left: 50%;
        }

        .circlegraphic.exchange {
            top: 75%;
            left: 10%;
        }

        .circlegraphic.bi {
            top: 30%;
            left: 10%;
        }*/

    /*****************************************************************************************************/

    /*.caseimage {
        height: calc(100vh / 3) !important;
        width: calc(100% + 0px) !important;
    }*/

    /*****************************************************************************************************/

    .card::before {
        content: url("data:image/svg+xml,<svg height='14' width='30' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='2' r='2' fill='%23aaaaaa' /><circle cx='20' cy='2' r='2' fill='%23bbbbbb' /><circle cx='32' cy='2' r='2' fill='%23dddddd' /></svg>");
        background-color: #ccc;
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + 2px);
        height: 12px;
        box-sizing: border-box;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .card::after {
        font-size: 2px;
        top: 2px;
        left: 30px;
        width: calc(100% - 33px);
        height: 6px;
        line-height: 7px;
        border-radius: 2px;
    }

    .card img {
        margin-top: 11px;
    }

    /*****************************************************************************************************/

    #featuresearch {
        box-sizing: border-box;
        margin-bottom: 30px;
        position: relative;
        right: auto;
        top: auto;
    }

        #featuresearch input {
            width: 100%;
        }
        
    img.ebook {
        max-height: 190px;
        margin: -75px 0 0 0;
        float: right;
        z-index: 3;
        position: relative;
    }
}