    /* #################################################################################### */
    /* ##### + + + pages css imported ##################################################### */
    /* #################################################################################### */

    @import url('bootstrap.css?v=1.0.0');
    @import url('bootstrap-theme.css');
    @import url('animate.css');
    @import url('multiple.css');
    @import url('hover.css');
    @import url('owl.css');
    @import url('selectbox.css?version=1.0.7');
    @import url('pageload.css');
    @import url('pagetransitions.css');
    @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    @import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&subset=latin-ext');
    @import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&amp;subset=latin-ext');


    /* #################################################################################### */
    /* ##################################################### / / / pages css imported ##### */
    /* #################################################################################### */

    /* ##### general css  */

    ul, li, div, a, img, table,
    tr, td, input, textarea, select { box-sizing: border-box; }
    a, a:link, a:hover              { cursor:pointer; }
    ::-webkit-input-placeholder     { color:#333; }
    ::-moz-placeholder              { color:#333; }
    :-ms-input-placeholder          { color:#333; }
    :-moz-placeholder               { color:#333; }
    input, textarea   { outline:none; }

    body            {
         background:#ebf0f3;
         color:#333; font:400 14px 'Quicksand', sans-serif;
         line-height:20px;
         margin:0; overflow-x:hidden;
    }
    .transeffect    {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .img-responsive { width:auto; }  .DNone { display:block; }
    .col-lg-1_5     { width:20%; padding:0 15px; }
    hr              { border:none; border-top:#dfdfdf 1px solid; }
    a               { color:#666; font:500 13px 'Quicksand', sans-serif; cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:hover         { color:#333; text-decoration:underline; cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:active { text-decoration:none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:before { cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    .ta-left        { text-align:left; }
    .ta-right       { text-align:right; }
    .ta-center      { text-align:center; }

    .activeLinkStyle    { background:#27ae60; color:#fff; width:30px; height:30px; float:left; text-decoration:none; margin:10px 0 0 5px; text-align:center; font-size:15px; padding-top:5px; border-radius:50px; }
    .activeLinkStyle:focus    { background:#27ae60; color:#fff; text-decoration:none; }
    .passiveLinkStyle   { background:#bdc3c7; color:#000; width:30px; height:30px; float:left; margin:10px 0 0 5px; text-align:center; font-size:15px; padding-top:5px; border-radius:50px; }
    .passiveLinkStyle:hover   { background:#2c3e50; color:#fff; cursor:pointer; text-decoration: none; }

    .duzenleLinki   { background-color:#2980b9; color:#fff; margin:0 0 0 5px; padding:5px 7px; border-radius:50px; font:600 11px 'Quicksand', sans-serif; text-decoration:none; }
    .duzenleLinki:hover   { background-color:#3498db; color:#fff; text-decoration:none; }

    .login_bg       { width:100%; height:100%; position:fixed; z-index:1; }
    .spacex         { width:100%; height:100%; position:fixed; z-index:2; }
    #LoginLoading, #LoginSuccess, #LoginError, #loginAuth, #LoginBanned    { display:none; }
    #LoginLoading h4, #LoginSuccess h4, #LoginError h4, #loginAuth h4, #LoginBanned h4    { margin-top:0; }
    .login_bg a     { width:100%; height:100%; display:block; cursor:auto; }
    .loginArea      { width:280px; min-height:100px; position:absolute; z-index:3; }
    .loginArea img.logo    {  }
    .loginArea input[type=text], .loginArea input[type=password]{
        width:80%; border:none; display:block; outline:none; margin:15px 0 0 0; background:#f0f1f5; color:#333; padding:15px; border-radius:5px;
    }
    .loginArea input[type=submit]   { margin:15px 0 8px 0; padding:10px 15px; border:none; outline:none; border-radius:5px; background:#000; color:#fff; font:500 14px 'Quicksand', sans-serif; }
    .loginArea input[type=submit]:hover   { background:#515151; color:#fff; }
    .loginArea hr   { width:50%; clear:both; display:inline-block; margin:10px 0; }
    .loginArea a        { color:#000; font:300 13px 'Quicksand', sans-serif; }
    .loginArea a:hover      { color:#f01e28; }

    .headerTop  { padding:0; margin:0; background:#fff; width:100%; height:100px; position: fixed; z-index:999; -webkit-box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); -moz-box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); }
    .headerTop .logo    { width:100px; height:100px; float:left; background:#000; }
    .headerTop .logo a          { width:100%; height:100%; display:block; padding:24px 0 0 24px; box-sizing: border-box; }
    .headerTop .logo a img      { width:50px; height:50px; }
    .headerTop .headerTitle     { width:calc(100% - 100px); float:left; }
    .headerTop .headerTitle .pageTitle      { height:100px; display:flex; justify-content: center; flex-direction: column; padding:0 30px 7px 30px; border-right:#dfdfdf 1px solid; float:left; }
    .headerTop .headerTitle .pageTitle h2       { padding:0; margin:0; color:#000; font:600 20px 'Quicksand', sans-serif; }
    .headerTop .headerTitle .pageTitle span       { padding:0; margin:0; color:#757575; font:400 12px 'Quicksand', sans-serif; }
    .headerTop .headerSearch    { width:500px; height:100px; float:left; padding:0; border-right:#dfdfdf 1px solid; background:url(../images/search.png) no-repeat 20px 30px; }
    .headerTop .headerSearch input          { width:100%; padding:40px 0 40px 70px; border:none; background:none; outline:none; }
    .headerTop .headerTitle .headerMember      { height:100px; border-left:#dfdfdf 1px solid; display:flex; align-items: center; }
    .headerTop .headerTitle .headerMember div  { margin:0 30px; float:left; }
    .headerTop .headerTitle .headerMember h4       { padding:0; margin:0; color:#000; font:500 16px 'Quicksand', sans-serif; }
    .headerTop .headerTitle .headerMember span       { padding:0; margin:0; color:#757575; font:400 12px 'Quicksand', sans-serif; }
    .headerTop .headerTitle .headerMember .openPersonel     { color:#000; font-size:18px; height:100px; }
    .headerTop .headerTitle .headerMember .openPersonel:hover   { color:#000; }
    .headerTop .headerTitle .headerMember .openPersonel .sepetmetni     { width: 17px; height: 17px; position: absolute; margin: -32px 0 0 10px; color: #fff; font: 200 10px 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; text-align: center; background: #555; border-radius: 100px; }

    .pageSection    { padding:0; }
    .pageSection .leftMenu  { width:100px; height:100%; position: fixed; min-height: 300px; margin-top:100px; background:#fff; -webkit-box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); -moz-box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); box-shadow: 0 0 11px -2px rgba(0,0,0,0.75); }
    .pageSection .leftMenu ul, .pageSection .leftMenu ul li  { padding:0; margin:0; list-style: none; }
    .pageSection .leftMenu ul li    { width:100%; display: flex; cursor:pointer; align-items: center; flex-direction: column; padding:15px 0 15px 2px; box-sizing: border-box;  border-right:#fff 2px solid; border-bottom:#f5f9ff 2px solid; }
    .pageSection .leftMenu ul li:hover, .pageSection .leftMenu ul li.active    { background:#f5f9ff; border-right:#000 2px solid; }
    .pageSection .leftMenu ul li i  { color:#000; font-size:30px; margin-bottom:7px; display:block; }
    .pageSection .leftMenu ul li span   { color:#757575; font:700 11px 'Quicksand', sans-serif; display:block;}
    .pageSection .leftMenu ul li:hover > span   { display:block; }
    .pageSection .leftMenu ul li.active > span   { display:block; }
    .pageSection .leftMenu ul li:hover > i      { color:#308f1a; }
    .pageSection .leftMenu ul li.active > i      { color:#308f1a; }

    .pageSection .rightContent  { width:calc(100% - 100); height:100%; margin-top:100px; margin-left:100px; min-height:300px; }
    .pageMainTitle      { width:calc(100% - 100); height:100px; margin-top:100px; background:#308f1a; color:#fff; padding:15px 30px; }
    .pageMainTitle a        { color:#333; background:#fff; padding:9px 15px; margin:17px 10px 0 0; display:inline-block; box-sizing: border-box; outline:none; font:500 14px 'Montserrat', sans-serif; border:none; border-radius:100px; }
    .pageMainTitle a:hover        { color:#fff; background:#333; text-decoration:none; }
    .pageHolderMargin   { padding:50px 0; }

    .styleBox   { padding:30px 15px; }
    .boxer      { width:100%; min-height:350px; margin-bottom:30px; height:auto; float:left; background:#fff; border:#dfdfdf 1px solid; border-radius:4px; box-sizing: border-box; padding:15px; }
    .boxer h3       { padding:0; margin:15px 0 0 0; }

    .inputClass     { width:100%; padding:10px !important; border-radius:3px; background:#fff; border:#dfdfdf 1px solid; outline:none; }
    .submitClass    { padding:10px 15px 12px 15px; background:#308f1a; color:#fff; font:500 13px 'Quicksand', sans-serif; border:none; border-radius:4px; }
    .submitClass:hover  { background:#2b8117; }
    .inputText      { width:100%; height:100px; padding:10px; border-radius:3px; background:#fff; border:#dfdfdf 1px solid; outline:none; }

    .yellow     { width:10px; height:10px; border-radius:10px; display:inline-block; margin-right:10px; background:grey; }
    .green      { width:10px; height:10px; border-radius:10px; display:inline-block; margin-right:10px; background:#308f1a; }

    .butonsA    { padding-left:45px; }
    .butonsA a  { padding:15px; outline:none; display:inline-block; border-radius:5px; background:#fff; border:#dfdfdf 1px solid; border-bottom:0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
    .butonsA a:hover  { background:#000; color:#fff; border:#000 1px solid; text-decoration:none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
    .butonsA a.active { background:#000; color:#fff; border:#000 1px solid; text-decoration:none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
    .butonsA a:focus  { text-decoration:none; outline:none; }
    .butonsA a.active:hover { background:#000; color:#fff; border:#000 1px solid; text-decoration:none; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
    .ogrencix   { display:none; }

    .yoklamaKutu    { padding:3px 5px; border:#dfdfdf 1px solid; float:left; }

    .grey       { padding:20px 0 0 30px; background:#f2f2f2; display: flex; justify-content: flex-start; align-items: flex-end; }
    .grey div   { padding:15px; background:#e9e9e9; border:#dfdfdf 1px solid; border-bottom:0; color:#000; margin:0 3px; cursor:pointer; border-top-left-radius: 4px; border-top-right-radius: 4px; }
    .grey div:hover     { background:#ebf0f3; color:#000; border:#dfdfdf 1px solid; border-bottom:0; }
    .grey div.active    { background:#ebf0f3; color:#000; border:#dfdfdf 1px solid; border-bottom:0; }

    .roof       { width:100%; display:none; }
    .roofActive     { display:block; }

    .ogrenciButonXX     { color:#fff; background:#27ae60; border-radius:5px; padding:10px; font:500 14px 'Quicksand', sans-serif; text-decoration:none; }
    .ogrenciButonXX:hover   { background:#2ecc71; text-decoration:none; }

    @media only screen and (min-width : 0px) and (max-width : 699px) {

        .pageSection .rightContent  { width:100%; margin-left:0; }
        .styleBox   { padding:15px 0; }
        .headerTop .headerSearch    { width:50%; height:100px; float:left; padding:0; background:none; border-right:#dfdfdf 1px solid; }
        .headerTop .headerSearch input          { width:100%; padding:40px 0 40px 0; border:none; background:none; outline:none; }

    }

    @media only screen and (min-width : 700px) and (max-width : 991px) {

    }

    @media only screen and (min-width : 992px) and (max-width : 1023px) {

    }

    @media only screen and (min-width : 1024px) and (max-width : 1180px) {

    }

    @media only screen and (min-width : 1181px) and (max-width : 1200px) {

    }

    @media only screen and (min-width : 1201px) and (max-width : 1366px) {

    }

    @media only screen and (min-width : 1367px) and (max-width : 1550px) {

    }

    @media only screen and (min-width : 1551px) and (max-width : 1750px) {

    }