.extra-margin {
    margin-bottom: 25px;
    margin-top: 45px;
}

#search-form {
    max-width: 390px;
}

#search-button, #clear-search, #clear-search-query {
    background-color: transparent;
    border: none;
    outline: none;
}

.panel {
    border: none;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
}

.panel-default span#MenaLite {
    margin-right: 157px;
}

.panel-default span#MenaTracks {
    margin-right: 121px;
}

.panel-default span#Freemium {
    margin-right: 148px;
}

.panel-default span#MenaCRM,
.panel-default span#MenaDMS {
    margin-right: 149px;
}

/*.extra-margin div:nth-child(1) .panel-default span {
    margin-right: 120px;
}

.extra-margin div:nth-child(2) .panel-default span {
    margin-right: 86px;
}

.extra-margin div:nth-child(3) .panel-default span,
.extra-margin div:nth-child(4) .panel-default span {
    margin-right: 114px;
}
*/

.panel-default {
    max-width: 385px;
    min-height: 290px;
    margin-bottom: 60px;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #fff;
    border: none;
}

.panel-heading {
    font-family: 'SourceSansPro-Bold';
    font-size: 31px;
    color: #3B3E44;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0 24px;
    padding-top: 15px;
}

.panel-heading > span {
    float: left;
}

.panel-heading img {
    /*float: left;
    margin-top: 13px;*/
    display: inline-block;
    margin-bottom: 6px;
}

/*.panel-heading a:nth-child(1) img,*/
.panel-heading a:nth-child(2) img{
    padding-right: 14px;
}

.panel-body {
    padding: 0 24px;
}

.panel-body p {
    color: #505770;
    font-size: 15px;
    font-family: 'SourceSansPro-Regular';
    max-width: 220px !important;
    padding-left: 0 !important;
    float: left;
}

.panel-body .more-info-link {
    display: block;
    height: 31px;
    width: 32px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.panel-body img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.more-info {
    /*left: 352px !important;*/
}

#menatracks-panel, #menadms-panel {
    margin-left: 25px;
}

#page_logo {
    right: 180px !important;
}

.btn-toolbar {
    position: absolute;
    z-index: 1000;
    bottom: 18px;
    left: 25px;
}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
    margin-left: 18px;
}

.transparent-white-fill {
    padding: 10px 35px !important;
}

.btn.white-fill {
    padding: 10px 46px !important;
}

#clear-search {
    display: none;
    line-height: 30px;
    color: #3B76E5;
}

#clear-search-query {
    line-height: 30px;
    color: #3B76E5;
}

#clear-search img, #clear-search-query img {
    height: 33px;
}

/*MenaLite Tooltip*/

#MenaLite + #features > .tooltip {
    left: 283px !important;
}

#MenaLite ~ .favorite > .tooltip {
    left: 312px !important;
}

#MenaLite + #share > .tooltip {
    left: 326px !important;
}

/*MenaTracks Tooltip*/

#MenaTracks + #features > .tooltip {
    left: 249px !important;
}

#MenaTracks ~.favorite > .tooltip {
    left: 266.9px !important;
}

#MenaTracks ~ #share > .tooltip {
    left: 327px !important;
}

/*MenaCRM Tooltip*/

#MenaCRM + #features > .tooltip {
    left: 249px !important;
}

#MenaCRM ~ .favorite > .tooltip {
    left: 266.9px !important;
}

#MenaCRM ~ #share > .tooltip {
    left: 328px !important;
}

/*MenaDMS Tooltip*/

#MenaDMS + #features > .tooltip {
    left: 249px !important;
}

#MenaDMS ~ .favorite > .tooltip {
    left: 266.9px !important;
}

#MenaDMS ~ #share > .tooltip {
    left: 328px !important;
}

/*Freemium Tooltip*/

#FPayroll + #features > .tooltip {
    left: 249px !important;
}

#FPayroll ~ .favorite > .tooltip {
    left: 266.9px !important;
}

#FPayroll ~ #share > .tooltip {
    left: 328px !important;
}

@media (max-width: 320px) {
    .page-content .page-head #header-title {
        font-size: 30px !important;
    }
}

@media (max-width: 360px) {
    .panel-default {
        margin-bottom: 50px;
    }
}

@media (max-width: 389px) {
    .panel-default {
        margin-bottom: 50px;
    }

    .page-content .page-head #header-title {
        font-size: 30px !important;
    }
}

@media (max-width: 767x) {
    .panel {
        margin: 0 auto;
    }

    #search-form {
        margin: 20px auto;
    }

    .panel-default {
        margin-bottom: 50px;
    }
}

@media (max-width: 800px) {
    #search-form {
        margin-top: 20px;
    }

    .btn-group > .btn:first-child {
        margin-bottom: 5px;
    }
}

@media (max-width: 1024px) {
    .page-content .page-head #header-title {
        font-size: 32px !important;
    }
}

/*Animation*/
/*.bounce-top {
    -webkit-animation: bounce-top 0.9s both;
    animation: bounce-top 0.9s both;
}

@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}
*/