@font-face {
    font-family: primaryFont;
    src: url("../fonts/al-bsher.ttf");
}

@font-face {
    font-family: acs_fayrouz;
    src: url("../fonts/ACS-FAYROUZ-BOLD.ttf");
}

@font-face {
    font-family: aga_abasan;
    src: url("../fonts/AGA-ABASAN-REGULAR.ttf");
}
@font-face {
    font-family: aga_kayrawan;
    src: url("../fonts/AGA-KAYRAWAN-REGULAR.ttf");
}

@font-face {
    font-family: Amiri;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Amiri-Regular.woff2') format('woff2'),
         url('../fonts/Amiri-Regular.woff') format('woff');
}

@font-face {
    font-family: Amiri;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Amiri-Bold.woff2') format('woff2'),
         url('../fonts/Amiri-Bold.woff') format('woff');
}

@font-face {
    font-family: Amiri;
    font-style: oblique;
    font-weight: 400;
    src: url('../fonts/Amiri-Slanted.woff2') format('woff2'),
         url('../fonts/Amiri-Slanted.woff') format('woff');
}

@font-face {
    font-family: Amiri;
    font-style: oblique;
    font-weight: 700;
    src: url('../fonts/Amiri-BoldSlanted.woff2') format('woff2'),
         url('../fonts/Amiri-BoldSlanted.woff') format('woff');
}

@font-face {
    font-family: 'Amiri Quran';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/AmiriQuran.woff2') format('woff2'),
         url('../fonts/AmiriQuran.woff') format('woff');
}

@font-face {
    font-family: 'Amiri Quran Colored';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/AmiriQuranColored.woff2') format('woff2'),
         url('../fonts/AmiriQuranColored.woff') format('woff');
}

@font-face {
  font-family: 'Naskh';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/DroidNaskh-Regular.eot);
  src: url(../fonts/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidNaskh-Regular.woff2) format('woff2'),
       url(../fonts/DroidNaskh-Regular.woff) format('woff'),
       url(../fonts/DroidNaskh-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Naskh';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/DroidNaskh-Bold.eot);
  src: url(../fonts/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidNaskh-Bold.woff2) format('woff2'),
       url(../fonts/DroidNaskh-Bold.woff) format('woff'),
       url(../fonts/DroidNaskh-Bold.ttf) format('truetype');
}

/*@font-face {
    font-family: 'TraditionalArabic';
    src: url("../fonts/TraditionalArabic-Bold-DTLS.otf");
}*/

body, html{
    min-height: 100%;
    font-family: primaryFont;
    overflow-x: hidden;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.table {
    border: 1px solid rgb(137,31,105);
    border-collapse: separate;
}
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr  > td,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid rgb(137,31,105);
}
.bordered{
    border: 1px solid rgb(137,31,105);
}


.market-box{
    border:solid 2px;
    padding: 0em;
    padding-top: 15px;
    min-height: 180px;
    font-size: 1em;
    margin-bottom: 1.5em;
    border-radius: 15px;
}
.login-title{
    margin-bottom: 1em;
}

.text-center{
    text-align: center;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
    height: 100%;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
        height: 100%;
    }
}

.navbar{
    margin-bottom: 0;
}
.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
    height: 100%;
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
    background-color: #eee;
}

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        height: 100%;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }

}


.margintop50 {
    margin-top: 50px;
}


.mini-heading {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1em;
}

.status-text {
    font-size: 16px;
}


body{
    background-image: url('../images/klmn_background.png');
}

.page-title{
    font-size: 2em;
    font-weight: bold;
    color: rgb(209,59,14);

}
.search-bar-input{
    background-color: rgb(149,149,149);
    color: white;
}
.search-bar-input-addon{
    background-color: rgb(149,149,149);
    color:white;
}
.search-bar-input::-webkit-input-placeholder { color:rgb(175,175,175); }


.game-title{
    color:rgb(130,46,46);
}
.game-description{
    font-size: 1.1em;
}

.text-gray{
    color: rgb(133,133,133);
}

.button-play{
    background-color: rgb(210,9,30);
    color: white;
}

.btn-play {
    width: 5em;
    height: 2.5em;
    background: url('../images/games/PlayButton.png') no-repeat;
    background-size: 100% 100%;
}

.box {
    min-width: 9.8em;
}
.box > .panel-body{
    border-left: 2px solid rgb(66, 22, 3);
    border-right: 2px solid rgb(66, 22, 3);
    border-bottom: 2px solid rgb(66, 22, 3);
    border-radius: 0px 0px 5px 5px;
    font-size:2em;
    font-weight: bolder;
}

.box > .panel-heading{
    font-size:1.2em;
    font-weight: bolder;
    border-radius: 5px 5px 0px 0px;
}

.box-yellow > .panel-body{
    color:rgb(66, 22, 3);
}

.box-yellow > .panel-heading{
    color:rgb(66, 22, 3);
}


.box-red > .panel-body{
    color:rgb(66, 22, 3);
}

.box-red > .panel-heading{
    color:rgb(66, 22, 3);
}

.box-green > .panel-body{
    color:rgb(66, 22, 3);
}

.box-green > .panel-heading{
    color:white;
}

.box-purple > .panel-heading{
    color:white;
}
.box-purple > .panel-body{
    color:rgb(66, 22, 3);
}


.box-blue > .panel-heading{
    color:white;
}
.box-blue > .panel-body{
    color:rgb(66, 22, 3);
}


.text-purple{
    color: rgb(62,0,42);
    font-size: 1.1em;
    font-weight: bolder;
}


.header-box-purple{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#89164a+0,9b2e52+15,a54572+37,7f0737+69,77003b+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#891f69+0,aa558e+15,a54587+37,770e52+69,5b1253+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#891f69+0,aa558e+16,9e5384+32,892967+40,770e52+69,5b1253+100 */
    background: rgb(137,31,105); /* Old browsers */
    background: url('../images/patterns/pattern-purple.png'), -moz-linear-gradient(top,  rgba(137,31,105,1) 0%, rgba(170,85,142,1) 16%, rgba(158,83,132,1) 32%, rgba(137,41,103,1) 40%, rgba(119,14,82,1) 69%, rgba(91,18,83,1) 100%); /* FF3.6-15 */
    background: url('../images/patterns/pattern-purple.png'), -webkit-linear-gradient(top,  rgba(137,31,105,1) 0%,rgba(170,85,142,1) 16%,rgba(158,83,132,1) 32%,rgba(137,41,103,1) 40%,rgba(119,14,82,1) 69%,rgba(91,18,83,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('../images/patterns/pattern-purple.png'), linear-gradient(to bottom,  rgba(137,31,105,1) 0%,rgba(170,85,142,1) 16%,rgba(158,83,132,1) 32%,rgba(137,41,103,1) 40%,rgba(119,14,82,1) 69%,rgba(91,18,83,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#891f69', endColorstr='#5b1253',GradientType=0 ); /* IE6-9 */

    background-size: contain;
    color: white;
}

.header-box-purple:after{
    background-image: url('../images/pattern3.png');
    background-size: contain;
    color: white;
}

.header-box-blue{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6dd7ed+0,4ebadb+36,207cca+80,1e5799+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6dd7ed+0,4ebadb+36,006ec9+79,064a99+100 */
    background: rgb(109,215,237); /* Old browsers */
    background: url('../images/patterns/pattern-blue.png'), -moz-linear-gradient(top,  rgba(109,215,237,1) 0%, rgba(78,186,219,1) 36%, rgba(0,110,201,1) 79%, rgba(6,74,153,1) 100%); /* FF3.6-15 */
    background: url('../images/patterns/pattern-blue.png'), -webkit-linear-gradient(top,  rgba(109,215,237,1) 0%,rgba(78,186,219,1) 36%,rgba(0,110,201,1) 79%,rgba(6,74,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('../images/patterns/pattern-blue.png'), linear-gradient(to bottom,  rgba(109,215,237,1) 0%,rgba(78,186,219,1) 36%,rgba(0,110,201,1) 79%,rgba(6,74,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dd7ed', endColorstr='#064a99',GradientType=0 ); /* IE6-9 */

    background-size: contain;
    color: white;
}

.header-box-yellow{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ede031+0,edd157+29,ef8809+78,f77009+100 */

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f44a+0,f7bd4a+39,fc5c00+100 */
    background: rgb(249,244,74); /* Old browsers */
    background: url('../images/patterns/pattern-yellow.png'), -moz-linear-gradient(top,  rgba(249,244,74,1) 0%, rgba(247,189,74,1) 39%, rgba(252,92,0,1) 100%); /* FF3.6-15 */
    background: url('../images/patterns/pattern-yellow.png'), -webkit-linear-gradient(top,  rgba(249,244,74,1) 0%,rgba(247,189,74,1) 39%,rgba(252,92,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('../images/patterns/pattern-yellow.png'), linear-gradient(to bottom,  rgba(249,244,74,1) 0%,rgba(247,189,74,1) 39%,rgba(252,92,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f44a', endColorstr='#fc5c00',GradientType=0 ); /* IE6-9 */

    background-size: contain;
    color: white;
}
.header-box-green{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#afe569+0,82ce4c+36,00a505+79,058412+100,058412+100 */
    background: rgb(175,229,105); /* Old browsers */
    background: url('../images/patterns/pattern-green.png'), -moz-linear-gradient(top,  rgba(175,229,105,1) 0%, rgba(130,206,76,1) 36%, rgba(0,165,5,1) 79%, rgba(5,132,18,1) 100%, rgba(5,132,18,1) 100%); /* FF3.6-15 */
    background: url('../images/patterns/pattern-green.png'), -webkit-linear-gradient(top,  rgba(175,229,105,1) 0%,rgba(130,206,76,1) 36%,rgba(0,165,5,1) 79%,rgba(5,132,18,1) 100%,rgba(5,132,18,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('../images/patterns/pattern-green.png'), linear-gradient(to bottom,  rgba(175,229,105,1) 0%,rgba(130,206,76,1) 36%,rgba(0,165,5,1) 79%,rgba(5,132,18,1) 100%,rgba(5,132,18,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afe569', endColorstr='#058412',GradientType=0 ); /* IE6-9 */

    background-size: contain;
    color: white;
}

.header-box-red{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#89164a+0,9b2e52+15,a54572+37,7f0737+69,77003b+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#891f69+0,aa558e+15,a54587+37,770e52+69,5b1253+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#891f69+0,aa558e+16,9e5384+32,892967+40,770e52+69,5b1253+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f92020+0,ff0000+22,d10404+44,9b0000+100 */
    background: rgb(249,32,32); /* Old browsers */
    background: url('../images/patterns/pattern-red.png'), -moz-linear-gradient(top,  rgba(249,32,32,1) 0%, rgba(255,0,0,1) 22%, rgba(209,4,4,1) 44%, rgba(155,0,0,1) 100%); /* FF3.6-15 */
    background: url('../images/patterns/pattern-red.png'), -webkit-linear-gradient(top,  rgba(249,32,32,1) 0%,rgba(255,0,0,1) 22%,rgba(209,4,4,1) 44%,rgba(155,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: url('../images/patterns/pattern-red.png'), linear-gradient(to bottom,  rgba(249,32,32,1) 0%,rgba(255,0,0,1) 22%,rgba(209,4,4,1) 44%,rgba(155,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f92020', endColorstr='#9b0000',GradientType=0 ); /* IE6-9 */

    color: white;
    background-size: contain;
}


.header-box-level{
    background: url('../images/boxes/purple.png') no-repeat; /* Old browsers */
    background-size: 100% 100%;
}

.btn-disabled{
    pointer-events: none;
    cursor: not-allowed;
}

.btn-extra-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 23px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.panel{
    border: 0;
}

.text-big{
    font-size: 1.3em;
}


@media(min-width:769px) {

    .game-image-div{
        height:160px;
    }

    .box-image{
        margin-left: 0.5em;
    }
    .box-title{
        font-size: 1.6em;
    }
    .notification-btn{
        background: #eea236;
        padding: 0.6em;
        border-radius: 10px;
        text-decoration: none;
    }
    .notification-btn:hover{
        text-decoration: none;
    }
    .notification-btn:focus{
        text-decoration: none;
    }

    .navbar {
        color:white;
        background: url('../images/header/header_compositing.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: -8em !important;
        position: inherit;
    }

    .username-welcoming{
        color: #c77405;
    }
    .header-big{
        width: 50%;
        height: 70%;
        position:absolute;
    }
    .welcomeMessage{
        font-size: 2em;
        margin-left: 2%;
        margin-top: 2%;
    }
    #notificationButton{
        font-size: 1.5em;
        color: white;
        margin-left: 2em;
    }

    #commentsBallon{
        background:url('../images/balloon.png');
        background-size:100% 100%;
        padding:4%;
    }

    #navbarPagesWalk{
        margin-bottom: 2em;
    }
    #navbarPageTitle{
        font-size: 2em;
    }


    #games_list{
        margin-top: 0em;
    }

    #stats-page{
        margin-top: 0em;
    }
    #harness-row{
        margin-bottom: 3em;
    }

    #leaderboard {
        margin-top: 0em;
    }
}
@media(max-width:770px) {

    .game-image-div{
        height:130px;
    }

    .box-image{
        margin-left: 0.5em;
    }
    .box-title{
        font-size: 2em;
    }

    #navbarSeparator{
        margin-bottom: 0.3em;
    }
    .notification-btn{
        background: #eea236;
        padding: 0.3em;
        border-radius: 2px;
        text-decoration: none;
        /*font-size: 0.5em;*/
        margin-left: 3em;
    }
    .notification-btn:hover{
        text-decoration: none;
    }
    .notification-btn:focus{
        text-decoration: none;
    }

    .navbar {
        color:white;
        background: url('../images/header/header_compositing.png') no-repeat;
        background-size: 110% 110%;
    }

    .navbar a{
        color:white;
    }

    .header-big{
        height: 100%;
        width: 80%;
        position:absolute;
        padding-top: 0.5em;
        padding-left: 0.5em;
    }

    .username-welcoming{
        color: #c77405;
    }
    .welcomeMessage{
        font-size: 1em;
        height: 5%;
        bottom: 60%;
    }

    #commentsBallon{
        background:url('../images/balloon.png');
        background-size:100% 100%;
        padding:4%;
        padding-left: 13%;
        font-size: 0.8em;
    }


    #games_list{
        margin-top: 5em;
    }

    #stats-page{
        margin-top: 5em;
    }

    #harness-row{
        margin-top: 5em;
        margin-bottom: 1.5em;
    }

    #leaderboard {
        margin-top: 5em;
    }
}

@media(min-width:768px) {
    .owl-comments {
        min-height:400px;
    }
}



@media(max-width:768px) {
    .owl-comments {
        min-height:300px;
    }
}


@media(max-width:330px) {

    #box-title{
        font-size: 0.4em;
    }
    .game-image-div{
        height:130px;
    }

    .box-image{
        margin-left: 0.5em;
    }
    .box-title{
        font-size: 1em;
    }

    #navbarSeparator{
        margin-bottom: 0.3em;
    }
    .notification-btn{
        background: #eea236;
        padding: 0.3em;
        border-radius: 2px;
        text-decoration: none;
        /*font-size: 0.5em;*/
        margin-left: 3em;
    }
    .notification-btn:hover{
        text-decoration: none;
    }
    .notification-btn:focus{
        text-decoration: none;
    }

    .navbar {
        color:white;
        background: url('../images/header/header_compositing.png') no-repeat;
        background-size: 110% 110%;
    }

    .navbar a{
        color:white;
    }

    .header-big{
        height: 100%;
        width: 80%;
        position:absolute;
        padding-top: 0.5em;
        padding-left: 0.5em;
    }

    .username-welcoming{
        color: #c77405;
    }
    .welcomeMessage{
        font-size: 1em;
        height: 5%;
        bottom: 60%;
    }

    #commentsBallon{
        background:url('../images/balloon.png');
        background-size:100% 100%;
        padding:4%;
        padding-left: 13%;
        font-size: 0.8em;
    }


    #games_list{
        margin-top: 5em;
    }

    #stats-page{
        margin-top: 5em;
    }

    #harness-row{
        margin-top: 5em;
        margin-bottom: 1.5em;
    }

    #leaderboard {
        margin-top: 5em;
    }
}

@media screen and (max-width: 733px) {
    #navbarPagesWalk ul.dropdown-menu {
        position: inherit !important;
    }
}

@media screen and (max-width: 529px) {
    #navbarPagesWalk ul.dropdown-menu li a {
        white-space: inherit;
    }
}

.white-hyper{
    color: white;
}
.white-hyper:hover{
    color:white;
    text-decoration: none;
}
.white-hyper:focus{
    color:white;
    text-decoration: none;
}

.msg.error {
    color: red;
}
.msg.success {
    color: green;
}
.border{
    border: 0px solid;
}
.green{
    color:#5CB85C;
}

/*
.md-trigger {
    margin-left: 50px;
}
*/










/*animation*/

.sp-slideshow {
    width: 100%;
    position: relative;
    height: 460px;

}

.sp-content {
    /*background: #7d7f72 url("http://i.imgur.com/wO5gzQp.png") repeat scroll 0 0;*/
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-parallax-bg {
    /*background: url('http://i.imgur.com/L6XmtEs.png') repeat-x scroll 0 0;*/
    /*background-size: cover;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 10px;
    height: 10px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}

.sp-slideshow input:checked + label {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}
.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}
.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    opacity: 0.8;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 4px 4px 10px #a2a2a2;
    background: transparent url('http://i.imgur.com/yeMfI0Q.png') no-repeat;
    transition: opacity linear 0.3s;
}

.sp-arrow:hover {
    opacity: 1;
}

.sp-arrow:active {
    margin-top: -18px;
}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
    display: block;
    background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
    display: block;
    background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
    /*transition: background-position linear 0.6s, background-color linear 0.8s;*/
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    /*transition: background-position linear 0.7s;*/
}

input.sp-selector-1:checked ~ .sp-content {
   /* background-position: 0 0;
    background-color: #727b7f;*/
}

input.sp-selector-2:checked ~ .sp-content {
    /*background-position: -100px 0;
    background-color: #7f7276;*/
}

input.sp-selector-3:checked ~ .sp-content {
   /* background-position: -200px 0;
    background-color: #737f72;*/
}

input.sp-selector-4:checked ~ .sp-content {
   /* background-position: -300px 0;
    background-color: #79727f;*/
}

input.sp-selector-5:checked ~ .sp-content {
   /* background-position: -400px 0;
    background-color: #7d7f72;*/
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
   /* background-position: 0 0;*/
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
   /* background-position: -200px 0;*/
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
   /* background-position: -400px 0;*/
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
   /* background-position: -600px 0;*/
}

input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    /*background-position: -800px 0;*/
}

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    height: 100%;
    padding: 0 60px;
    float: left;
    text-align: center;
    opacity: 0.4;
    transition: opactiy ease-in 0.4s 0.8s;
}

.sp-slider > li img {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
    opacity: 1;
}

.margin_top_50px{
    margin-top:50px;
}

.margin_top_40px{
    margin-top:40px;
}


.margin_top_20px{
    margin-top:20px;
}


.arrow {
    z-index: 2000;
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    right: 5%;
    margin-left:-20px;
    width: 40px;
    height: 40px;
}
.arrow i {

    font-size: 55px;
    color: #777777;
    font-weight: bold;
    position: relative !important;
    bottom: 0px;
    margin-left:-40px;
    -webkit-animation: down 5s infinite; /* Safari 4.0 - 8.0 */
    animation: down 5s infinite;
}


.social-link-div a:not(.btn) {
    vertical-align: bottom;
    width: 80px;
    display: inline-block;
}

.social-link-div a.btn {
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 992px) {
    .logo {
        width:500px;
        height: 450px;
        margin: 0px auto;
    }
    .educate_login {
        float: right;
    }
    .sp-slideshow {
        height: 100%;
    }
    .arrow {
        bottom: 100px;
    }
}
@media screen and (max-width: 596px) {
    .logo {
        width:350px;
        height: 300px;
        margin: 0px auto;
    }
    .md-trigger img {
        width: 40px;
        height: 37px;
    }
    .btn-lg {
        font-size: 10px;
    }
    .arrow {
        bottom: 40px;
    }
    .arrow i {
        font-size: 30px;
    }
}
#buttonToTop {
    /*margin-bottom: 25px;*/
    display: none;
}

@keyframes down {
    0%   {bottom: 15px;}
    25%  {bottom: 0px;}
    50%  {bottom: 15px;}
    75%  {bottom: 0px;}
    100% {bottom: 15px;}
}

@-webkit-keyframes down {
    0%   {bottom: 15px;}
    25%  {bottom: 0px;}
    50%  {bottom: 15px;}
    75%  {bottom: 0px;}
    100% {bottom: 15px;}
}





/* Modal styles */
.md-perspective,
.md-perspective body {
    height: 100%;
    overflow: hidden;
}

.md-perspective body  {
    background: #222;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

.md-button{
    border: none;
    padding: 0.6em 1.2em;
    background:#5F5F5F;
    color: #fff;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    margin: 3px 2px;
    border-radius: 2px;
     display: block;
     margin: 0 auto;
     font-size: 0.8em;
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 1000px) {
    .md-modal{
        width: 60%;
    }
}
@media screen and (max-width: 900px) {
    .md-modal{
        width: 70%;
    }
}
@media screen and (max-width: 800px) {
    .md-modal{
        width: 80%;
    }
}
@media screen and (max-width: 700px) {
    .md-modal{
        width: 90%;
    }
}
@media screen and (max-width: 600px) {
    .md-modal{
        width: 100%;
    }
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}


.md-content {
    color: #fff;
    background: #555;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
}

.md-content h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    font-size: 2.4em;
    font-weight: 300;
    opacity: 0.8;
    background: rgba(0,0,0,0.1);
    border-radius: 3px 3px 0 0;
}

.md-content > div {
    padding: 15px 40px 30px;
    margin: 0;
    font-weight: 300;
    font-size: 1.15em;
}

.md-content > div p {
    margin: 0;
    padding: 10px 0;
}

.md-content > div ul {
    margin: 0;
    padding: 0 0 30px 20px;
}

.md-content > div ul li {
    padding: 5px 0;
}

.md-content button {
    display: block;
    margin: 0 auto;
    font-size: 0.8em;
}

.md-effect-11 .md-content {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-11 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 13: 3D slit */
.md-effect-13.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.md-effect-13 .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-3000px) rotateY(90deg);
    -moz-transform: translateZ(-3000px) rotateY(90deg);
    -ms-transform: translateZ(-3000px) rotateY(90deg);
    transform: translateZ(-3000px) rotateY(90deg);
    opacity: 0;
}

.md-show.md-effect-13 .md-content {
    -webkit-animation: slit .7s forwards ease-out;
    -moz-animation: slit .7s forwards ease-out;
    animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
    50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
    50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
    100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
    50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
    100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}



@-webkit-keyframes rotateRightSideFirst {
    50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
    50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
    50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
    100% { transform: translateZ(-200px); }
}



@-webkit-keyframes OpenTop {
    50% {
        -webkit-transform: rotateX(10deg);
        -webkit-animation-timing-function: ease-out;
    }
}

@-moz-keyframes OpenTop {
    50% {
        -moz-transform: rotateX(10deg);
        -moz-animation-timing-function: ease-out;
    }
}

@keyframes OpenTop {
    50% {
        transform: rotateX(10deg);
        animation-timing-function: ease-out;
    }
}


/*@media screen and (max-width: 32em) {
    body { font-size: 75%; }
}*/








div#main{
    width: 830px;
    height: 650px;
    margin: 0px auto;
    font-family: 'Ubuntu', sans-serif;
}

div#form_sample{
    text-align:center;
    border: 1px solid #ccc;
    width: 300px;
    padding: 0px 50px 15px;
    margin-top:20px;
    box-shadow: 0 0 15px;
    border-radius: 6px;
    float:left;
}

#main h1{
    margin-top:40px;
}

/*hr{
    margin-top:-5px;
}*/

label{
    float: left;
    font-size: 16px;
}

#modal-13 input[type="text"]{
    width:100%;
    margin-top:10px;
    height: 40px;
    margin-bottom: 25px;
    padding:10px;
    border:3px solid#CC7049;
}

#message{
    width:100%;
    border:3px solid#CC7049;
    padding:10px;
    margin-bottom: 25px;
    margin-top: 10px;
    height: 100px;
    resize:none;
}

input[type="submit"]{
    width:100%;
    padding: 10px 45px;
    background-color: #CC7049;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
}


#modal-13 input[type="text"]:-moz-placeholder {
    text-align: right;
}
#modal-13 input[type="text"]:-ms-input-placeholder {
    text-align: right;
}
#modal-13 input[type="text"]::-webkit-input-placeholder {
    text-align: right;
}
#modal-13 textarea:-moz-placeholder {
    text-align: right;
}
#modal-13 textarea:-ms-input-placeholder {
    text-align: right;
}
#modal-13 textarea::-webkit-input-placeholder {
    text-align: right;
}
#modal-13 input.captcha::-webkit-input-placeholder {
   text-align: center;
}
#modal-13 input.captcha:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}
#modal-13 input.captcha::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}
#modal-13 input.captcha:-ms-input-placeholder {  
   text-align: center; 
}
#modal-13 input.captcha {  
   text-align: center; 
   font-size: 20px;
   height: 45px;
}


#login_email :-moz-placeholder {
    text-align: right;
}
#login_email ::-webkit-input-placeholder {
    text-align: right;
}


#login_password :-moz-placeholder {
    text-align: right;
}
#login_password ::-webkit-input-placeholder {
    text-align: right;
}

#table-achievement {
    font-size: 1.2em; 
    background-color: #fff; 
    border: 2px solid rgb(66, 22, 3);
    border-radius: 5px;
}

#table-achievement tr > td:nth-child(1), 
#table-achievement tr > td:nth-child(2){
    text-align: center;
}

#table-achievement tr > td:nth-child(3){
    font-weight: 500;
    font-size: 1.22em;
}

#table-achievement {

}

img.under
{
    position:absolute;
    left:20px;
    top:0px;
    z-index:1;
}
img.over
{
    position:absolute;
    left:20px;
    top:0px;
    z-index:2;
}
/*fix recommended workout issue*/
@media screen and (max-width: 768px) {
    img.under{
       position: relative !important;
    }
    #div-recommended_workout .panel-body{
        height: inherit !important;
    }
}

#div-recommended_workout .panel-body{
    height: 200px;
}

#challenger a.editable-click{
    font-size: 15px;
    font-weight: 700;
    color: #d43f3a;
    border-bottom: dashed 1px #d9534f;
}
#challenger i.fa-sun-o{
    color: #d43f3a;
}
.popover-title, .popover-content {
    direction: rtl;
}

.sweet-alert {
    direction: rtl;
}
.text-strike {
  color: #999;
  text-decoration: line-through;
}

.popover.right>.arrow {
    left: 9px;
}

.cursor-pointer:hover {
    cursor: pointer;
}

.pulse {
  animation: pulse 2s infinite;
  margin: 0 auto;
  display: table;
  margin-top: 50px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}