@font-face {
    font-family: openSans;
    src: url(fonts/OpenSans-Regular.ttf)
}

.red {
    color: #ed1c24
}

body {
    background-color: #414042;
    width: 100%;
    margin: 0;
    font-family: openSans
}

body .wrap {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    margin-top: -41px;
    background-color: #fff
}

body .photo-view {
    opacity: 0;
    position: absolute;
    background-color: rgba(82, 82, 83, .8);
    width: 100%;
    max-width: 1550px;
    padding-bottom: 30px;
    text-align: center;
    z-index: -1000
}

body .photo-view img {
    width: 100%;
    max-width: 1200px;
    margin-top: 60px;
    margin-bottom: 30px
}

body .photo-view .close {
    width: 100px;
    margin: 0 auto;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #e8e8e8
}

body .photo-view .close:hover {
    color: #ed1c24;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

body .photo-view.visible {
    z-index: 1000;
    opacity: 1;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
    transition: opacity .5s ease
}

body a {
    text-decoration: none;
    color: #414042;
    font-weight: 700
}

body a:hover {
    color: #ed1c24;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

body .header {
    background-color: #fff;
    width: 100%;
    text-align: center;
    margin-top: 41px;
    padding-top: 10px
}

body .header .page-logo {
    width: 80%;
    max-width: 1000px;
    margin-top: 41px;
    margin-bottom: 40px
}

body .header .social {
    width: 40px;
    margin-top: -200px;
    text-align: right;
    opacity: 0;
    -webkit-transition: .6 linear all;
    -moz-transition: .6 linear all;
    -o-transition: .6 linear all;
    transition: .6 linear all;
    transition-delay: .6s
}

body .header .social img {
    width: 31px;
    padding: 5px;
    opacity: .8
}

body .header .social img:hover {
    opacity: 1
}

body .header:hover .social {
    opacity: 1
}

body .navbar {
    width: 100%;
    max-width: 1550px;
    color: #414042;
    position: fixed;
    background-color: rgba(255, 255, 255, .95);
    padding-top: 10px;
    z-index: 1
}

body .navbar .navigation {
    list-style-type: none;
    width: 80%;
    height: 36px;
    margin: 0 auto;
    padding-left: 0;
    text-align: center
}

body .navbar .navigation .nav-item {
    display: inline;
    position: relative;
    padding: 10px;
    margin-right: 5px;
    cursor: pointer
}

body .navbar .navigation .nav-item:hover {
    color: #ed1c24;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

body .navbar .navigation .nav-item .submenu {
    display: none;
    position: absolute;
    left: -30px;
    top: 42px;
    width: 350px;
    text-align: left
}

body .navbar .navigation .nav-item .submenu ul {
    padding: 5px 40px;
    background-color: rgba(255, 255, 255, .9);
    list-style-type: none;
    color: #414042
}

body .navbar .navigation .nav-item .submenu ul li {
    padding: 10px 0
}

body .navbar .navigation .nav-item .submenu ul li:hover {
    color: #ed1c24
}

body .navbar .navigation .navbar-logo {
    display: none;
    margin-left: -85px;
    padding: 10px 40px;
    background-image: url(images/logo_antastic_small.png);
    background-size: 80px 45px;
    background-repeat: no-repeat;
    background-position: center center
}

body .navbar .navigation .nav-item-with-sub {
    margin-left: -4px
}

body .content {
    width: 100%;
    color: #414042
}

body .content .block {
    padding: 50px 0
}

body .content .block .inner {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto
}

body .content .block .inner .left {
    float: left;
    width: 40%
}

body .content .block .inner .pic {
    margin-top: 15px;
    margin-right: 10px;
    border: 5px solid #f5f5f5;
    float: left;
    width: 45%;
    min-width: 280px;
    max-height: 192px;
    overflow: hidden
}

body .content .block .inner img {
    width: 100%
}

body .content .block .inner img.magenda-graph {
    margin-top: 15px
}

body .content .block .inner img.magenda-screen {
    cursor: pointer
}

body .content .block .inner img.business-logo,
body .content .block .inner img.cloud-logo {
    max-width: 280px
}

body .content .block .inner .grow img {
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease
}

body .content .block .inner .grow img:hover {
    width: 250%;
    margin-top: -10px;
    margin-left: -10px
}

body .content .block .inner .right {
    float: right;
    width: 59%
}

body .content .block .inner .right .text {
    padding-left: 15px
}

body .content .block .inner .right ul {
    margin-left: 15px;
    padding-left: 15px
}

body .content .block .inner .right ul li {
    margin-top: 20px
}

body .content .block .container {
    background-color: #fff;
    padding: 20px
}

body .content .block .container h3 {
    margin-top: 0
}

body .content .block .container .right {
    text-align: center
}

body .content .block .container .right .get-now {
    width: 70%
}

body .content .block.about-us {
    background-color: #3498db
}

body .content .block.about-us .inner {
    text-align: center;
    color: #fff
}

body .content .block.magenda {
    background-color: #ededed;
    position: relative;
    overflow: hidden
}

body .content .block.magenda h1 {
    margin-top: 0
}

body .content .block.magenda .inner ul {
    float: left;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 30px 0;
    text-align: center;
    cursor: pointer;
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    -o-transition: width .5s ease;
    -ms-transition: width .5s ease;
    transition: width .5s ease
}

body .content .block.magenda .inner ul li {
    display: inline-block;
    width: 28%;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: center 80px;
    padding: 125px 10px 10px 10px;
    margin: 5px
}

body .content .block.magenda .inner ul li.project {
    background-image: url(images/project_icon_bigger.png)
}

body .content .block.magenda .inner ul li.document {
    background-image: url(images/document_icon_bigger.png)
}

body .content .block.magenda .inner ul li.versions {
    background-image: url(images/versions_icon_bigger.png)
}

body .content .block.magenda .inner ul li.task {
    background-image: url(images/task_icon_bigger.png)
}

body .content .block.magenda .inner ul li.company {
    background-image: url(images/company_icon_bigger.png)
}

body .content .block.magenda .inner ul li.intranet {
    background-image: url(images/intranet_icon_bigger.png)
}

body .content .block.magenda .inner ul li.departments {
    background-image: url(images/departments_icon_bigger.png)
}

body .content .block.magenda .inner ul li.people {
    background-image: url(images/people_icon_bigger.png)
}

body .content .block.magenda .inner ul li.search {
    background-image: url(images/search_icon_bigger.png)
}

body .content .block.magenda .inner ul li:hover {
    background-color: #e8e8e8
}

body .content .block.magenda .inner .block-detail {
    position: absolute;
    margin-top: 30px;
    right: -50%;
    opacity: 0;
    float: right;
    overflow: hidden;
    width: 28%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

body .content .block.magenda .inner .block-detail .info-text {
    display: none;
    padding: 10px;
    overflow: hidden
}

body .content .block.magenda .inner .block-detail .info-text .icon {
    width: 40px;
    margin: 0
}

body .content .block.magenda .inner .block-detail .info-text .close {
    background-image: url(images/close.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    float: right;
    cursor: pointer
}

body .content .block.magenda .inner .full-wide-text {
    width: 100%;
    padding-top: 15px
}

body .content .block.business-intelligence .container {
    background-color: #f5f5f5
}

body .content .block.cloud-solutions {
    background-color: #ededed
}

body .content .block.cloud-solutions .full-wide-text h4 {
    margin: 10px 0
}

body .content .block.cloud-solutions .full-wide-text span {
    display: inline-block
}

body .content .block.cloud-solutions .full-wide-text .toggle-arrow {
    display: inline-block;
    width: 20px;
    margin: 3px 0 -3px 10px;
    cursor: pointer
}

body .content .block.cloud-solutions .full-wide-text div {
    max-height: 0;
    opacity: 0;
    overflow: hidden
}

body .content .block.cloud-solutions .full-wide-text div.visible {
    max-height: 1000px;
    opacity: 1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

body .content .block.team {
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 30px
}

body .content .block.team .inner .employee {
    margin-bottom: 15px
}

body .content .block.team .inner .employee.middle {
    margin-top: 30px;
    margin-bottom: 30px
}

body .content .block.team .inner .employee img {
    display: inline-block;
    width: 25%;
    max-width: 161px;
    margin: auto 0;
    border: 10px solid #f5f5f5;
    background-color: #cce5f6
}

body .content .block.team .inner .employee .text {
    display: inline-block;
    width: 66%;
    float: right;
    margin-top: 0
}

body .content .block.contact {
    background-color: #3498db
}

body .content .block.contact .inner {
    color: #fff
}

body .content .block.contact .inner .left,
body .content .block.contact .inner .right {
    width: 50%
}

body .content .block.contact .inner a {
    font-weight: 300;
    color: #fff
}

body .content .block.contact .inner a:hover {
    color: #e8e8e8
}

body .content .block.contact .inner .left,
body .content .block.contact .inner .middle,
body .content .block.contact .inner .right {
    float: left;
    display: inline-block;
    width: 33%
}

body .content .block.contact .inner .left h2,
body .content .block.contact .inner .middle h2,
body .content .block.contact .inner .right h2 {
    margin-top: 0
}

body .content .block.contact .inner .middle,
body .content .block.contact .inner .right {
    float: right
}

body .content .block.contact .inner .right div {
    padding-right: 10px
}

body .footer {
    background-color: #414042;
    text-align: center;
    color: #9a999c;
    font-size: 15px;
    padding: 30px
}

body .footer .text {
    display: inline-block;
    height: 100%
}

body .footer .footer-logo img {
    width: 150px
}

body .bg-light {
    background-color: #fff
}

body .bg-dark {
    background-color: #ededed
}

body .text-par {
    margin-top: 25px;
    margin-bottom: 25px;
}

@media all and (min-width:960px) {
    body {
        font-size: 18px
    }
    .team .text {
        margin-top: 30px
    }
}

@media all and (max-width:959px) and (min-width:600px) {
    body {
        font-size: 16px
    }
    .team .text {
        margin-top: 20px
    }
    .submenu {
        width: 250px !important
    }
    .magenda li {
        width: 40% !important;
        min-width: 120px !important;
        height: 90px !important;
        background-position: center 55px !important;
        padding: 100px 10px 10px 10px !important
    }
}

@media all and (max-width:599px) and (min-width:200px) {
    body {
        font-size: 12px
    }
    .team .text {
        margin-top: 10px
    }
    .navigation {
        height: 30px !important;
        width: 100% !important
    }
    .submenu {
        width: 200px !important
    }
    .block .inner {
        width: 90% !important
    }
    .magenda li {
        width: 37% !important;
        min-width: 80px !important;
        height: 60px !important;
        background-position: center 45px !important;
        padding: 90px 10px 10px 10px !important
    }
    .magenda .close {
        width: 30px !important;
        height: 30px !important
    }
    .navbar-logo {
        margin-left: 0 !important;
        padding: 10px 30px !important;
        background-size: 60px 30px !important
    }
    .container .get-now {
        margin-top: 15px !important
    }
    .container .left,
    .container .right {
        float: none !important;
        width: 100% !important
    }
    .toggle-arrow {
        width: 12px !important
    }
    .contact .middle,
    .contact .right {
        width: 66% !important
    }
}