@import "bootstrap.css";
@import "bootstrap-flipped.css";

/*@import "bootstrap-responsive.min.css";*/
@import "camera.css";
@import "custom.css";
@import "sss.css";
@import "yoxview.css";
@import "jquery-ui.css";
@import "dropzone.css";
/*@import "bootstrap.min_1.css";*/







@font-face {
    font-family: droid;
    src: url('../fonts/DroidSansArabic.ttf');
}

@font-face {
    font-family: MohammedBold;
    src: url('../fonts/mohammad-bold-art.ttf');
}

@font-face {
    font-family: cocon;
    src: url('../fonts/Cocon Next Arabic-Light.otf');
}

*{
    padding: 0;
    margin: 0;
}

.navbar{
    width: 100%;
    background: rgba(17, 17, 65,1);
    border-radius: 0;
    box-shadow: 0 2px 5px #777;
    border-bottom: 1px solid white;
    position: relative;
    z-index: 10000;
}

.coca-full-container{
    width: 85%;
    margin: 0 auto;
}

.full-navbar-menu{
    text-align: right;
    padding-top: 25px;

}

.navbar-menu-item{
    margin-right: 30px;
    color: white;
}

.nav-conatainer{
    margin: 0 auto;
    width: 100%;
}

.nav-btn{
    display: none;;
}

.nav-side-btn{
    display: none;;
}



.nav-img{
    float: right;
    width: 100px;
    margin-right: 100px;
}
.nav-menu{
    list-style: none;
    width: 80%;
    padding: 0;
    margin: 0 auto;
    padding-top: 30px;
    padding-right: 100px;

}
.item-search{
    float: left !important ;
    margin: 0;
    padding: 0;
}

.menu-item{
    float: right;
    position: relative;
    text-decoration: none;
    margin-right: 30px;
}

.item-search input{
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: center;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
    color: white;

}

.item-search button{
    display: none;
}

.item-search input:focus{
    box-shadow: none;

}

.menu-item >a {
    color: #fff;
    font-family: "droid";
    font-size: 16px;
    transition: all 500ms ease-in-out;
    text-decoration: none;
}

.menu-item >.caret {
    color: #fff;
}

.menu-item >a:hover {
    color:grey;
    text-decoration: none;
}

/*.menu-item >a.active {
    color: lightskyblue;
}*/

.search-con{
    width: 300px;
    background: #e2e2fc;
    position: absolute;
    right: -50px;
    top: 50px;
    border-radius:5px; 
    padding: 8px;
    border: 1px solid #111141;
    display: none;
}



.search-field{
    width: 75%;
    float: right;
    border: none;
    color: #111141;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #777;
    padding-right: 5px;
    font-family: droid;
}

.sub-menu{
    padding: 0;
    list-style: none;
    position: absolute;
    right: -30px;
    top: 52px;

}


.sub-menu-item{
    width:150px;
    background-color: #BEBEBE;
    margin-bottom: 3px;
    border-radius: 3px;
    display: none;
    border: 1px solid #111141;

}

.sub-menu-item a{
    line-height: 25px;
    display: block;
    width: 100%;
    text-align: center;
    color: #111141;
    font-family: droid;
    padding: 10px 20px;
}

.sub-menu-item a:hover{
    background-color: white;
    color: #111141;
    border: 1px solid #111141;
    text-decoration: none;
    border-radius: 3px;
}


.footer{

}

.all-footer-contents{
    background: #111141;
    border-top: 1px solid White;
    box-shadow: 0 -2px 5px #777;
}

.footer-container{
    width: 90%;
    margin: 0 auto;
}


.footer-img{
    width: 100%;
    position: relative;
    bottom: 79px;
}


.footer-img > img{
    display: block;
    margin: 0 auto;
}

.hideOverFlow{
    overflow: hidden;
    margin-top: -50px;

}

.hideOverFlow  .col-md-4{
    border-left: 1px dashed white;
    height: 280px;
}
.footer-txt{
    color: white;
    font-family: droid;
    text-align: center;
    margin-bottom: 20px;

}
.footer-txt-middle{
    color: white;
    font-family: droid;
    text-align: center;
    margin-bottom: 20px;
    margin-bottom: 5px;

}

.footer-title{
    color: white;
    text-align: center;
    font-size: 18px;
    margin: 20px 0;
    font-family: droid;
}

.footer-txt-middle > a{
    color: #ffff99;
    text-decoration: none;

}

.footer-txt-middle > a:hover{
    color: #ffcc33;
    text-decoration: none;
}

#map {
    height: 200px; 
    width: 95%; 
    margin: 0 auto;
    border-radius: 5px;
}

.copyright{
    width: 100%;
    text-align: center;
    color: white;
    font-family: droid;
    margin-top: 25px;
    font-size: 16px;
}

.footer-imgs{
    width:190px;
    margin: 0 auto;
}

.footer-imgs  img{
    margin: 5px;
    width: 50px;
}



body {

    background: url(background.png);
    background-repeat:repeat;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    background-size:auto;
    -o-background-size:contain;
    background-attachment:scroll;
}

.coca-container{
    width: 85%;
    margin: 0 auto;
    padding:20px 20px 60px 20px;
    background-color: white;
}

.main{

    width: 80%;
    color:#111141;
    /*    display: block;
        position: relative;*/
    float: right;
    padding: 0 50px;

}

.side{
    width: 20%;
    float:right;
    height: 400px; 
    border-left: 5px solid #c2c2dc;
    margin-top: 60px;
    padding-top: 10px;
    

}

.open-side{
    /*display: none;*/
}

.side-menu{
    list-style: none;
    padding: 0;
    margin: 0;
    
    
}

.side-menu-item{
    text-align: left;
    padding: 5px;
    padding-left: 30px;
    margin: 10px 0;


}

.side-menu-item a{
    color: #777;
}

.side-menu-item a:hover{
    color: #006699;
}

.side-menu .active{
    border-right: 3px solid #c03434;
}

.side-menu .active a{
    color: black;
}

.open-side{
    display: none;
}

.h3 {
    color: white;
}



.side > .search-side{

    width:  95%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 5px  5px 0 5px;
    border-bottom: 1px dotted #c2c2dc;
}

.search-side  .glyphicon-search{
    color:#e2e2fc;
    margin-top: 2px;
}


table {
    margin: auto;
    font-family: 'times new roman';
    font-size: 14px;
}


table td {
    transition: all .5s;
}

/* Table */
.data-table {
    border-collapse: collapse;
    font-size: 14px;
    min-width: 510px;
}

.data-table th, 
.data-table td {
    border: 2px solid #18184b;
    padding: 7px 17px;
}
.data-table caption {
    margin: 7px;
}

/* Table Header */
.data-table thead tr th {
    background-color: #18184b;
    color: #FFFFFF;
    border-color: #BEBEBE !important;
    text-transform: uppercase;
    text-align:center;
    font-size:15px;

}

/* Table Body */
.data-table tbody td {
    color: #353535;
}
.data-table tbody td:first-child,
.data-table tbody td:nth-child(4),
.data-table tbody td:last-child {
    text-align: right;
}

.data-table tbody tr:nth-child(odd) td {
    background-color: #f4fbff;
}
.data-table tbody tr:hover td {
    background-color: #D3D3D3	;
    border-color: #BEBEBE;
}

/* Table Footer */
.data-table tfoot th {
    background-color: #e5f5ff;
    text-align: right;
}
.data-table tfoot th:first-child {
    text-align: left;
}
.data-table tbody td:empty
{

}

.coca-caresoul{
    width: 100%;
    background-color: #111141;
    height: 500px;
    /*overflow: hidden;*/

}

.coca-caresoul-titles{
    width: 35%;
    float: right;
    padding: 0;
    height: 500px;
    overflow-y: scroll;

}

.titles-menu{
    list-style: none;
    padding: 0;
    margin: 0;
}

.titles-item{
    /*border-bottom: 1px solid black;*/
    height: 130px;
    width:100%;
    text-overflow: ellipsis;
    overflow: hidden;



}

.titles-item-link{
    display: block;
    width: 100%;
    height: 130px;
    padding: 10px ;
}



.titles-item-link:hover{
    background-color: #222252;
}

.titles-item-link > h3{
    color: #ffff99;
    font-family: droid;
    font-size: 18px;
}


.titles-item-link > p{
    color: white;
    font-family: cocoa;

}

.titles-item-link.active{
    display: block;
    width: 100%;
    height: 130px;
    padding: 10px;
    background-color: #BEBEBE;
    box-shadow: 0 0 7px #000 inset;
    /*border: 1px solid white;*/
}

.titles-item-link.active > p{
    color: white;
    font-family: cocoa;

}


.titles-item-link.active > h3{
    color: #111141;
    font-family: droid;
    font-size: 18px;
}

.coca-caresoule-contents{
    width: 65%;
    float: right; 
    height: 500px;
    overflow: hidden;
}

.caresoule-content{
    height: 500px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    position: relative;
}


.caresoule-content > p{
    position: absolute;
    bottom: 0;
    text-align: right;
    padding:30px;
    /*background: rgba(0,0,0,0.7);*/
    background-color: rgba(17,17,65,0.7);
    color: white;
    font-family: droid;
    font-size: 18px;
    text-overflow: ellipsis;
}

.caresoule-content > p > a{
    color: #ffff99;
    text-decoration: underline;
}


.caresoule-content > p > a:hover{
    color: #ffcc33;
}

.main-content-section{
    padding: 30px 40px 0 20px;
}

.main-content-section-title{
    border-bottom: 3px solid #BEBEBE;
    line-height: 30px;
    font-family: droid;
    color: #111141;
    font-size: 19px;
}

.news-new{
    border-bottom: 1px solid #BEBEBE;

}
.news-new >a{
    display: block;
    width: 100%;
    padding: 15px ;
}
.news-new >a:hover{
    background-color: #e9e9e9;
}
.img-fluid{
    border-radius: 5px;
    height: 240px;
    width: 240px;
    border: 1px solid #777;
    float: right;
    margin: 30px;

}

.news_content{
    margin-bottom: 70px;
    font-weight: bold;
    color: black;
    font-size: 16px;

}




.new-img{
    border-radius: 5px;
    height: 80px;
    width: 80px;
    border: 1px solid #777;
    float: right;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    margin-left: 10px;
}

.new-title{
    color:#006699;
    font-size: 18px;
    overflow: hidden;
    font-family: droid;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.new-txt{
    margin-bottom: 0;
    overflow: hidden;
    font-weight: bold;
    color: black;
    font-size: 16px;
    line-height: 25px;
    height: 50px;
}

.main-content-two-sections{
    padding: 15px;
}

.content-section{
    width: 50%;
    float: right;
    height: 300px;
    padding: 10px;

}

.section-container{
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    margin: 10px;
    position: relative;
    padding: 0px;
}

.section-img{
    width: 100%;
    height: 200px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    border-top-right-radius: 5px;
    border-top-left-radius:5px;
}

.section-container > h3{
    text-align: center;
    color: #006699;
    font-family: droid;
    margin: 15px 0;
}

.section-container >p{
    text-align: right;;
    color:black;
    font-weight: bold;
    padding: 10px;
}
.section-container >a{
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 10px;
}

.section-title{
    line-height: 35px;
    font-family: droid;
    color: #111141;
    font-size: 19px;
    text-align: center;
}

.cases-list{
    list-style: none;
    padding: 0;
}

.case-title{
    background-color: #111141;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 20px;
}

.case-title > a{
    display: block;
    width: 100%;
    padding: 15px 10px;
    color: #ffffcc;

}

.case-detials{
    background-color: #e9e9e9;
    border: 1px solid  #BEBEBE;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    margin-top: 5px;
    padding: 20px;
    display: none;
}

.case-detials > .row{
    padding: 10px 0;
    margin: 0 5px;
}

.case-detials > .row p{
    padding-top: 10px;
}

.details-title{
    font-weight: bold;
    color: #111141;
    text-align: left;
    font-family: droid
}

.details-title-aligned-to-center{
    font-weight: bold;
    color: #111141;
    text-align: center;
    font-family: droid;
    font-size: 18px;
}

.details-txt{
    text-align: right;
    color: black;
}

.odd{
    background-color:#f5f5f5;
    padding-top: 10px;
}
.even{
    padding-top: 10px;
}



.contentContainer{
    width: 95%;
    margin: 0 auto;
    padding: 40px 0px 20px 0px;

}
.dashed-container{
    width: 98%;
    margin: 0 auto;
    padding: 40px;
    border: 1px dashed #aaa;
    border-radius: 10px;
}

.align-toform{
    margin-top: 25px;
}

.top-margin{
    margin-top: 20px;
}

.floated-img{
    float: left;
    margin-bottom: 30px;
    margin-right: 30px;
    border-radius: 10px;
    border: 3px solid white;
    box-shadow: 0 0 3px #777;
    width: 200px;
}

.centered-txt{
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 17px;
}

.president-speech{
    text-indent: 30px;
    text-align: justify;
    font-size: 16px;
}

.president-speech + ul li{
    margin-bottom: 10px;
}

.president-name{
    height: 100px
}

.president-name > div{
    width: 200px;
    float: left;
    margin-left: 20px;
    margin-top: 40px;
}

.president-name > div li{
    list-style: none;
    text-align: center;
    margin-bottom: 10px;
}

.president-name > div li:last-of-type{
    color: #006699;
    font-size: 18px;
}

.links-list{
    padding: 0;
    color: white;
    text-align: center;
    width: 100%;
    margin: 30px 0;
}

.links-list > a{
    margin-left:40px; 
    color: white;
}

.coca-caresoul-titles::-webkit-scrollbar {
    width: 12px;
}

.coca-caresoul-titles::-webkit-scrollbar-track {
    background-color:#222252;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.coca-caresoul-titles::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.control-rows{
    padding: 30px;
    /*border: 1px dashed #aaa;*/
}

.control-rows > .row{
    padding: 40px 0;

}

.control-rows > .row > div > a{
    display: block;
    width: 100%;
}

.control-rows > .row > div > a > img{
    width: 200px;
    margin: 0 auto !important; 
    display: block;
}

.news-title{
    font-size: 20px;
    color: #222252;
}

.new-info{
    font-size: 13px;
    color: #777;
}

.news-txt{
    font-family: MohammedBold;
    text-align: justify;
    text-indent: 20px;
    padding: 15px 10px; 

}

.news-img{
    display: block;
    margin: 0 auto;

}

.dotted-hor-line{
    border-bottom: 1px dotted #888;
    margin: 30px 0;
}

.news-rounded-container{
    overflow: hidden;
    border-radius: 8px;
    width: 98%;
    margin: 0 auto;
    border: 1px solid #ccc;
    height: 270px;
    margin-bottom: 30px;
}

.news-new-img{
    height: 150px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: 0.7s ease-in-out all;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;

}

.news-rounded-container:hover .news-new-img {
    transform: scale(1.05,1.05);
}
.news-rounded-container:hover a {
    color: #cc3300;
}

.news-new-title{
    text-align: center;
    padding: 10px;
    padding-bottom: 0px;
    font-weight: bold;
    margin-bottom: 0;
}

.news-new-descr{
    font-size: 14px;
    text-align: justify;
    padding: 10px;
    padding-top: 5px;
    line-height: 18px;
    font-family: sans-serif;
}

.non > .btn{
    display: block;
    margin: 0 auto;
}

.application-btns{
    width: 90%;
    margin: 0 auto;
    margin-top: 25px;

}

.required-txt{
    color: #cc3300;
    font-weight: bold;
}

.hass-small-cols-mergin  [class*="col-"]{
    padding-left: 5px;
    padding-right: 5px;
}

.dashed-line{
    border-bottom: 1px dashed #888;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}

.small-font{
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

.add-margin{
    margin: 40px 0;
}

.prgressbar{
    width: 100%;
    border: 1px solid #66c6de ;
    padding: 5px;
    border-radius: 5px;
    display: none;
}

.prgressbar > .bar{
    background-color: #66c6de;
    width: 0;
}

#progressbartxt{
    color: white;
    text-align: center;
    margin: 0;
}

.danger-txt{
    color:#cc3300;
    margin-bottom: 20px;
}

.application-div-container{

}

.application-div{
    display: none;
}

.application-div .active{
    display: inherit;
}

.wecomeback-title{
    text-align: center;
    color: #006699;
}

.wecomeback-txt{

    text-align: center;
}

.application-section-header{
    width: 97%;
    margin: 0 auto;
    border-bottom: 1px solid #aaa;
    height: 45px;
    margin-bottom: 30px;
    margin-top: -10px;
}

.application-section-header > h5{
    float: right;
}

.application-section-header > button{
    float: left;
    margin-top: 5px;
}

label{
    font-size: 14px;
    color: black;
}

.modal-footer{
    border-top: 1px solid #ddd;
    padding: 10px 15px;
}

.modal-container{
    width: 90%;
    margin: 0 auto;
}

.alert-title{
    color:  #cc6600;
}

.coca-table td,.coca-table th{
    text-align: right;
}

.aligned-text-to-left{
    text-align: left;
}

.red-color{
    color:#c03434;
}

.form-title{
    margin-bottom: 20px;
    color: #0099ff;
}

.form-caution{
    color: #c03434;
    text-align: center;
    font-weight: bold;
}

.course-condition > h3{
    color: #006699;
    margin: 20px 0;
}

.course-condition > ol{
    padding-right:20px; 
}

.course-condition > ol li{
    line-height: 25px;
}

.complete-msg{
    width: 95%;
    margin:  20px auto;
    border: 2px #ddd dashed;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
}

.return-msg{
    width: 95%;
    margin:  20px auto;
    margin-bottom: 50px;
    border: 2px #ddd dashed;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
}

.complete-msg span{    
    color: #66cc00;
    font-size: 70px;
    margin: 20px 0;
}

.complete-msg h4{
    color: #006699;
    font-family: MohammedBold;
    font-size: 25px;
}

.complete-msg p{
    color: #555;
}

.return-msg span{    
    color: #cc0000;
    font-size: 70px;
    margin: 20px 0;
}

.return-msg h4{
    color: #cc0000;
    font-family: MohammedBold;
    font-size: 25px;
}

.return-msg p{
    color: #555;
}



/************************************For  Mobile *********************************************/

@media only screen and (max-width : 600px){
    .nav-img{
        width: 80px;
        margin: 10px;
    }

    .nav-img > img{
        display: block;
        width: 100%;
        margin: 4px 0;
    }

    .nav-menu{
        display: none;
        padding: 0;

    }

    .item-search{
        clear: both;
        margin: 0;
        padding-right: 40px;
    }

    .item-search button{
        display: inline;
        color: #BEBEBE;
    }

    .menu-item{
        clear: both;
        width: 100%;
        margin: 0px;
        line-height: 30px;
    }

    .menu-item > a{
        text-align: center;
        width: 100%;
        display: block;
        line-height: 30px;
        padding : 15px 0;

    }

    .nav-side-btn{
        display: inherit;
        width: 55px;
        height:40px;
        position: absolute;
        right: 25px;
        top: 20px;
        cursor: pointer;
        color: white;
    }

    .nav-side-btn > span{
        font-size: 25px;
        padding: 12px 5px;
    }


    .nav-btn{
        display: inherit;
        width: 55px;
        height:40px;
        position: absolute;
        left: 25px;
        top: 20px;
        background: none;
        border: 2px solid White;
        border-radius: 8px;
        cursor: pointer; 
        padding: 8px 9px 5px 9px ;
    }

    .nav-btn > .menu-btn-bar{
        width: 100%;
        display: block;
        border-bottom: 2px solid white;
        margin-bottom: 5px;
        height: 3px;
    }

    .sub-menu{
        padding: 0;
        list-style: none;
        width:100%;
        position: static;

    }


    .sub-menu-item{
        clear: both;
        width: 100%;
        margin: 0px;
        line-height:30px;
        background: #111141;;
        border: none;


    }

    .sub-menu-item a{
        text-align: center;
        width: 100%;
        display: block;
        line-height: 30px;
        padding : 15px 0;
        color: white;
    }

    .hideOverFlow .col-md-4{
        border-left: none;
        border-bottom: 1px dashed white;

        height: 280px;
    }

    .coca-container{
        width: 100%;
    }

    .main{
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-content-section{
        width: 90%;
        margin:0 auto;
        padding: 0;
        padding-top:20px;

    }
    .side{
        width: 100%;
        clear: both;
        margin: 0 auto;
        display: block;
        float: none;
        position: fixed;
        /*left: -95%;*/
        top: 0;
        right: -100%;
        height: 100%;
        transition: all 0.5s ease-in-out;
        border: none;
        border-radius: 0;
        background-color: rgba(0,0,0,0.8);
        z-index: 10000000000;
        padding-top: 100px;

    }
    
    .side-menu{
        height: 85vh;
        
        overflow-y: scroll;
    }

    .side-menu-item{
        border-bottom: 1px solid #aaa;
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .side-menu .active>a{
        color: #55bbee;
    }

    .side a{
        color: #FFFFFF;
    }

    .side.opened{
        right: -30%;
    }

    .open-side{
        display: inherit;
        position: absolute;
        top: 150px;
        left: -50px;
        width: 50px;
        height: 50px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        background-color: rgba(0,0,0,0.5);
        padding: 6px;

    }

    .open-side > span{
        color: rgba(255,255,255,0.9);
        display: block;
        text-align: center;
        font-size: 23px;
        padding-top: 5px;

    }

    .open-side.opened > span{
        transition: transform ease-in-out 500ms;
        transform: rotate(180deg);
    }

    .move-side{
        right: 0;
    }

    .side-btn{
        width: 200px;
        height: 200px;
        background: #111141;
        opacity: 0.5;
        border-radius: 100px;
        position: fixed;
        right: -100px;
    }

    body{
        padding: 0 !important;
        margin:0;
    }

    .coca-caresoul-titles{
        display: none;
    }

    .coca-caresoule-contents{
        width:100%;
        clear: both;
    }

    .new-img{
        height: 70px;
        width: 70px;
        margin-top: 10px;
    }

    .new-title{
        color:#006699;
        font-size: 16px;
        text-overflow: ellipsis;
    }

    .new-txt{
        font-size: 15px;
        line-height: 20px;
        height: 60px;
        text-overflow: ellipsis;
    }

    .content-section{
        width: 100%;
        clear: both;
        height: auto;;
        padding: 10px;

    }

    .dashed-container{
        padding-left: 20px; 
        padding-right: 20px; 
    }

    .floated-img{
        float: none;
        display: block;
        margin-bottom: 30px;
        margin-right: 30px;
        border-radius: 100px;
        border: 6px solid white;
        box-shadow: 0 0 3px #777;
        width: 200px;
        margin: 0 auto;
    }
    .president-name{
        height: 50px
    }

    .president-name > div{
        width: 100%;
        float: none;
        display: block;
    }

    .president-name > div li{
        list-style: none;
        text-align: center;
        margin-bottom: 10px;

    }

    .president-name > div li:last-of-type{
        color: #006699;
        font-size: 18px;
    }

    .control-rows > .row > div > h4{
        text-align: center;
        padding-top: 30px; 
    }

    .control-rows > .row > div > p{
        text-align: center;
        padding-top: 10px; 
    }

    .ton-holder{
        width: 100%;
        float: none;
    }    
    .ton-holder a{
        display: block;
        width: 100%;
    }

    .ton-holder a>img{
        display: block;
        width: 60%;
        border-radius: 5px;
        margin: 0 auto;
    }

    .non-holder{
        width: 100%;
        padding: 20px;
    }

    .non{
        width: 200px;
        margin: 0 auto;
    }

    .non > .btn{
        display: block;
        margin: 0 auto;
    }
    .inner-container{
        width: 90%;
        margin: 0 auto;
    }
    .hiderOverFlow{
        overflow: scroll;
    }

}





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

@-webkit-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@-moz-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@-moz-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
.dropzone, .dropzone * {
    box-sizing: border-box; }

.dropzone {
    min-height: 150px;
    border: 2px dashed rgba(0, 0, 0, 0.3);
    background: white;
    padding: 20px 20px;
    width: 90%;
    margin: 0 auto;
    border-radius: 20px;

}

.dropzone.dz-clickable {
    cursor: pointer; }
.dropzone.dz-clickable * {
    cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer; }
.dropzone.dz-started .dz-message {
    display: none; }
.dropzone.dz-drag-hover {
    border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5; }
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
}
.dropzone .dz-message span{
    font-size: 60px;
    color: #aaa;
    position: relative;
    width: 100%;
    margin-top: 100px;
    padding-bottom: 80px;
}
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
.dropzone .dz-preview:hover {
    z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 20px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-image-preview {
    background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none; }
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 13px;
    min-width: 100%;
    max-width: 100%;
    padding: 2em 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
    font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid rgba(200, 200, 200, 0.8);
    background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 0.4em;
    border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: blur(8px);
    filter: blur(8px); }
.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10; }
.dropzone .dz-preview .dz-image img {
    display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: pulse 6s ease infinite;
    -moz-animation: pulse 6s ease infinite;
    -ms-animation: pulse 6s ease infinite;
    -o-animation: pulse 6s ease infinite;
    animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transform: scale(1);
    border-radius: 8px;
    overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
    display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white; }
.dropzone .dz-preview .dz-error-message:after {
    content: '';
    position: absolute;
    top: -6px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #be2626; }

.test-file-title-1{
    color: #777;
    font-family: cocon;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}
.test-file-title-2{
    color: #777;
    font-family: cocon;
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}

.test-prevoent-out{
    width: 100%;
    clear: both;
}