/* NORMALIZE CSS
  ========================================================================== */
html, body {
    height: 100%;
}
/* bu alan popup poup`larda devere disi birakilmali. */
/* LINKS */
a {
    color:           #db3c23;
    text-decoration: none;
    outline:         0;
}
a:focus, a:hover {
    color:           #000000;
    outline:         0;
    text-decoration: none;
}
/* Text-level semantics */
p:last-child {
    margin-bottom: 0px;
}
/* NAVBAR ICON
   ========================================================================== */
    .navbar-toggler {
        background-color: #db3c23 !important;
    }
        .navbar-toggler .navbar-toggler-icon {
            color : #fff; !important;
        }
            .navbar-toggler .navbar-toggler-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
            }

/* GRID [ROW] CSS
   ========================================================================== */
/* ROW-SM */
.row-sm {
    margin-right: -5px;
    margin-left:  -5px;
}
.row-sm > [class*='col-'] {
    padding-right: 5px;
    padding-left:  5px;
}
/* ROW-MD */
.row-md {
    margin-right: -10px;
    margin-left:  -10px;
}
.row-md > [class*='col-'] {
    padding-right: 10px;
    padding-left:  10px;
}
/* ROW-LG */
.row-lg {
    margin-right: -15px;
    margin-left:  -15px;
}
.row-lg > [class*='col-'] {
    padding-right: 15px;
    padding-left:  15px;
}
/* ROW-XL */
.row-xl {
    margin-right: -30px;
    margin-left:  -30px;
}
.row-xl > [class*='col-'] {
    padding-right: 30px;
    padding-left:  30px;
}
/* GRID [TABLE ROW] CSS
   ========================================================================== */
.div-table {
    display: table;
    width:   100%;
}
.div-table-header {
    font-weight: bold;
}
.div-table-row {
    display: table-row;
}
.div-table-col {
    display:        table-cell;
    vertical-align: top;
}
.div-table-row-border > div {
    border-bottom:  1px solid #c4c4c4;
    padding-bottom: 12px !important;
}
.div-table-row-border + .div-table-row > .div-table-col {
    padding-top: 12px !important;
}
.div-table-row-border:last-child > .div-table-col {
    border-bottom: none !important;
}
.vertical-middle {
    vertical-align: middle;
}
.vertical-top {
    vertical-align: top !important;
}
/* RESET GRID [COL] CSS
   ========================================================================== */
.no-gutter {
    margin-right: 0px;
    margin-left:  0px;
}
.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left:  0;
}
.no-gutter-l {
    padding-left: 0;
}
.no-gutter-r {
    padding-right: 0;
}
/* CONTAINER
 ========================================================================== */
    @media (min-width: 576px) {
        .container {
            /* width: 540px;*/
            max-width: 100%;
        }
    }
    @media (min-width: 768px) {
        .container {
            /*width: 720px;*/
            max-width: 100%;
        }
    }
    @media (min-width: 992px) {
        .container {
            /*width: 960px;*/
            max-width: 100%;
        }
    }
    @media (min-width: 1200px) {
        .container {
            width: 1140px;
        }
    }
    @media (min-width: 1359px) {
        .container {
            width: 1300px;
        }
    }
    @media (min-width:1433px) {
        .container {
            width: 1360px;
        }
    }
    @media (min-width:1513px) {
        .container {
            width: 1420px;
        }
    }
    @media (min-width:1600px) {
        .container {
            width: 1540px;
        }
    }
    .container-md{
        max-width: 1140px;
    }

/* GRID
 ========================================================================== */
.col-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xl-20 {
    position:      relative;
    width:         100%;
    min-height:    1px;
    padding-right: 15px;
    padding-left:  15px;
}
.col-20 {
    -ms-flex:  0 0 20%;
    flex:      0 0 20%;
    max-width: 20%;
}
@media (min-width: 576px) {
    .col-sm-20 {
        -ms-flex:  0 0 20%;
        flex:      0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 768px) {
    .col-md-20 {
        -ms-flex:  0 0 20%;
        flex:      0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 992px) {
    .col-lg-20 {
        -ms-flex:  0 0 20%;
        flex:      0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1200px) {
    .col-xl-20 {
        -ms-flex:  0 0 20%;
        flex:      0 0 20%;
        max-width: 20%;
    }
}
/* RESPONSIVE [*] CSS
   ========================================================================== */
.inline-responsive {
    display:   inline-block;
    max-width: 100%;
    height:    auto;
}
/* FULLSIZE [*] CSS
   ========================================================================== */
.full-width {
    width: 100%;
}
.half-width {
    width: 50%;
}
.full-width img, .half-width img {
    width:  100%;
    height: auto;
}
.with-auto {
    width: auto !important;
}
.max-width {
    max-width: 100%;
}
@media (max-width: 575px) {
    [class*='col-'] .full-img {
        width:  100%;
        height: auto;
    }
}
/* SELECT BOX
   ========================================================================== */
.selectbox-wrap {
    display:        block;
    position:       relative;
    vertical-align: middle;
}
.selectbox {
    width:            100%;
    display:          block;
    position:         relative;
    z-index:          1;
    height:           32px;
    line-height:      32px;
    background-color: #fff;
    color:            #504e4a;
    overflow:         hidden;
    white-space:      nowrap;
    text-overflow:    ellipsis;
    border:           1px solid #c4c0b6;
    padding:          0px 12px;
    margin-bottom:    1px;
    cursor:           pointer;
    text-align:       left;
    text-decoration:  none;
    background-color: #fff;
}
.selectbox:hover {
    border: 1px solid #a09c95;
    color:  #444;
}
.selectbox.disabled, .selectbox.readonly {
    background-color: #f4f4f4;
    border:           1px solid #c6c6c6;
    color:            #504e4a;
    cursor:           default;
}
.selectbox::after {
    content:  "\f107";
    font:     normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right:    8px;
    top:      8px;
}
.selectbox-content {
    display:       none;
    position:      absolute;
    z-index:       101;
    width:         240px;
    border:        1px solid #c0c0c0;
    border-radius: 2px;
    box-shadow:    none;
    top:           0px;
    margin:        0px;
    box-shadow:    0px 0px 7px rgba(0, 0, 0, 0.3);
}
.selectbox-content .selectbox-inner {
    display:          block;
    position:         relative;
    z-index:          103;
    background-color: #fff;
    padding:          10px;
}
.selectbox-content .selectbox-inner .selectbox-collapse {
    display:       block;
    position:      relative;
    text-align:    right;
    color:         #444;
    margin-bottom: 3px;
}
.selectbox-content .selectbox-inner .selectbox-collapse:hover {
    color: #db3c23;
}
.selectbox-content .selectbox-inner .selectbox-collapse i {
    font-size: 1.2em;
}
.selectbox-content .selectbox-inner .selectbox-scroll {
    display:          block;
    position:         relative;
    height:           90px;
    overflow-y:       scroll;
    background-color: #fff;
}
.selectbox-content .selectbox-inner .selectbox-scroll .selectbox-scroll-inner {
    display: block;
    margin:  0px 0px;
}
.selectbox-content ul, .selectbox-content ol {
    display:    block;
    margin:     0px;
    padding:    0px;
    list-style: none;
}
.selectbox-content li {
    display:       block;
    padding:       1px 1px;
    margin-bottom: 2px;
}
.selectbox-content li > span {
    padding-left: 3px;
}
.selectbox-content li > span > span {
    font-style: italic;
}
.selectbox-overlay {
    position:         fixed;
    width:            100%;
    height:           100%;
    left:             0;
    top:              0;
    z-index:          101;
    background-color: #000;
    opacity:          .3;
    display:          block;
}

/* SUGGESTION FORM
   ========================================================================== */
#suggestion-form h2 {
    font-size:      1.2em;
    padding-bottom: 12px;
}
#suggestion-form .suggestion-result {
    clear:            left;
    color:            #fff;
    font-style:       italic;
    background-color: #e66c76;
    padding:          6px;
    font-size:        0.9em;
    margin-bottom:    10px;
}
/* USER FORM
   ========================================================================== */
.user-form fieldset {
    border:  1px solid #e5e5e5;
    padding: 19px 19px 19px 19px;
}
.user-form legend {
    padding:          7px 14px;
    display:          block;
    margin-bottom:    .5em;
    font-size:        1.5em;
    color:            #333;
    background-color: #e5e5e5;
}
.user-form-result {
    font-size:     0.9em;
    margin-bottom: 2px;
}
.user-form-result:last-child {
    margin-bottom: 0px;
}
.user-form-senderror {
    font-size:     0.9em;
    margin-bottom: 2px;
}
.user-form-senderror:last-child {
    margin-bottom: 0px;
}

/* COMMENTS FORM
   ========================================================================== */
    .comments .user-form-result span {
        color:            #fff;
        background-color: #f0ad4e;
        border-color:     #f0ad4e;
        padding:          4px;
        display:          block;
        margin-bottom:    10px;
    }
    .comments .user-form-result em {
        color:            #fff;
        background-color: #5cb85c;
        border-color:     #5cb85c;
        padding:          4px;
        display:          block;
        margin-bottom:    10px;
    }
    .comments .comments-list {
        clear:       both;
        padding-top: 6px;
    }
    .comments .comments-list .comments-header {
        font-size: 1.2em;
        display:   none;
    }
    .comments .comments-list ul {
        padding:         0;
        margin:          0;
        list-style-type: none;
    }
        .comments .comments-list ul li {
            border:        1px solid #DADADA;
            padding:       10px;
            margin-bottom: 4px;
            display:       table;
            width:         100%;
        }
            .comments .comments-list .comment-author {
                display:        table-cell;
                padding:        4px;
                vertical-align: top;
                width:          66px;
            }
            .comments .comments-list .comment-author img {
                border-radius: 44px;
            }
            .comments .comments-list .comment-content {
                display:        table-cell;
                padding:        4px;
                vertical-align: top;
                padding-top:    4px;
            }
            .comments .comments-list .comment-content .commenter {
                color:       #db3c23;
                font-weight: normal;
                font-size:   1.1em;
                padding-right: 4px;
                font-style: normal;
            }
            .comments .comments-list .comment-content .timeago {
                font-size: 0.9em;
                color:     #838383;
            }
            .comments .comments-list .comment-content p {
                display:     block;
                text-align:  justify;
                padding-top: 6px;
            }

/* FORM VALIDATION CSS
   ========================================================================== */
/* ERROR MESSAGE
 ========================================================================== */
#errorMessage {
    display:   block;
    clear:     both;
    font-size: 0.9em;
}
/* NAVBAR CSS
   ========================================================================== */
/* PRODUCTS MOBILE HIDDEN
 ========================================================================== */
.mobile-sidebar-hidden {
    display: none !important;
}
@media (max-width: 991px) {
    .mobile-sidebar-hidden {
        display: block !important;
    }
}
.mobile-hidden {
    display: block;
}
@media (max-width: 991px) {
    .mobile-hidden {
        display: none !important;
    }
}
/* PRODUCTS ASIDE SIDEBAR TOOGLLER
    ========================================================================== */
    .mobile-sidebar-toggler {
        padding:          7px .5rem;
        font-size:        1.6rem;
        line-height:      1;
        background-color: #21a8b0;
        border:           0;
        position:         relative;
        color:            #fff;
        display:          block;
        width:            100%;
        text-align:       left;
        font-weight:      500;
        box-shadow:       3px 3px 7px rgba(0, 0, 0, 0.2);
        border-radius:    2px;
        cursor: pointer;
    }
    .mobile-sidebar-toggler:hover {
        background-color: #db3c23 ;
    }
    .mobile-sidebar-toggler span {
        font-size:   0.6em;
        display:     inline-block;
        line-height: 1;
        position:    absolute;
        left:        40px;
        top:         12px;
        font-weight: 500;
    }
    .mobile-sidebar-toggler:focus,
    .mobile-sidebar-toggler:hover {
        text-decoration: none;
    }

/* DROPDOWN CSS
 ========================================================================== */

/* TAB CSS
   ========================================================================== */
    .tabs .tab-navs {
        list-style:    none;
        margin:        0px;
        padding:       0px;
        overflow:      hidden;
    }
        .tabs .tab-navs li {
            float:            left;
        }
            .tabs .tab-navs li a {
                display: block;
                padding: 6px 10px;
                color:   #636363;
            }
            .tabs .tab-navs li a:hover, .tabs .tab-navs li a:active {
                color: #444;
            }
            .tabs .tab-navs li.active a {
                color:            #db3c23;
            }
    .tabs .tab-content {
        padding:    20px 12px;
        overflow:   hidden;
        text-align: justify;
    }
    .tabs .tab-content-no {
        padding: 20px 0px;
    }
        .tabs .tab-content .tab-pane {
            display:  none;
            overflow: hidden;
        }
        .tabs .tab-content .active {
            display: block;
        }
        .tabs .tab-pane:target {
            display: block;
        }
    @media (max-width: 575px) {
        .tabs .tab-navs li {
            float: none;
        }
    }

/* TAB CSS
   ========================================================================== */
    .tabs-grey .tab-navs {
        border-bottom: 1px solid #ccc;
    }
    .tabs-grey .tab-navs li {
        background-color: #f4f4f4;
    }
    .tabs-grey .tab-navs li a {
        color: #647484;
    }
    .tabs-grey .tab-navs li a:hover, .tabs-grey .tab-navs li a:active {
        background-color: #ddd;
    }
    .tabs-grey .tab-navs li.active a {
        background-color: #ccc;
        color:            #000;
    }

/* ACCORDION CSS
   ========================================================================== */
    .accordion .accordion-list {
        background-color: #fff;
        border-top:       1px solid #e0e0e0;
        overflow:         visible;
    }
    .accordion .accordion-list:last-child {
        border-bottom: 1px solid #e0e0e0;
    }
    .accordion .accordion-list .accordion-heading {
        /* border-bottom    : 1px solid #e0e0e0; */
        background-color: #fff;
        transition:       all .3s ease-in-out;
    }
    .accordion .accordion-list .accordion-heading .accordion-title:after {
        content:       '+';
        font-size:     16px;
        line-height:   1;
        text-align:    right;
        display:       block;
        position:      absolute;
        right:         0px;
        top:           50%;
        transform:     translateY(-50%);
        padding-right: 10px;
    }
    .accordion .accordion-list .accordion-heading .accordion-title {
        color:    #242526;
        display:  block;
        padding:  10px 15px;
        position: relative;
    }
    .accordion .accordion-list .accordion-heading:hover, .accordion .accordion-list.active .accordion-heading {
        *background-color: #f4f4f4;
    }
    .accordion .accordion-list .accordion-heading:hover .accordion-title, .accordion .accordion-list.active .accordion-heading .accordion-title {
        /*color : #333;*/
    }
    .accordion .accordion-list .accordion-content {
        display: none;
    }
    .accordion .accordion-list .accordion-content .accordion-content-wrapper {
        padding:    15px;
        border-top: 1px solid #e0e0e0;
    }
    .accordion .accordion-list:target .accordion-heading {
        color: #fff;
    }
    .accordion .accordion-list:target .accordion-heading .accordion-title:after {
        content: '-';
    }
    .accordion .accordion-list.active .accordion-title:after {
        content: '-';
    }
    .accordion .accordion-list:target .accordion-heading .accordion-title {
        color: #333;
    }
    .accordion .accordion-list:target .accordion-content {
        display: block;
    }
    .accordion .accordion-list.active .accordion-heading {
        /*background-color: #db3c23;*/
        color: #333;
    }
    .accordion .accordion-list.active .accordion-heading .accordion-title {
        color: #333;
    }
    .accordion .accordion-list.active .accordion-content {
        display: block;
    }

/* POLL CSS
   ========================================================================== */
    .poll .poll-list .input-group {
        position: relative;
        display:  block;
    }
    .poll .poll-list .input-group label {
        display: block;
        padding: 0px;
    }
    .poll .poll-list .input-group label input[type="radio"] {
        display:       inline-block;
        padding:       4px !important;
        min-height:    auto;
        margin-top:    0px;
        margin-bottom: 0px;
    }
    .poll .poll-list .input-group label span {
        display: inline-block;
        padding: 4px;
    }
    .poll .poll-list .input-group label input[type="submit"] {
        display:       block;
        padding:       .375rem 1rem;
        line-height:   1.2em;
        border:        .0625rem solid transparent;
        border-radius: .10rem;
    }
    .poll .poll-result .poll-publish-list {
        display:       block;
        overflow:      hidden;
        clear:         both;
        margin-bottom: 8px;
        padding:       5px 0 1px 0;
        border-bottom: 1px dashed #7b7b7b;
    }
    .poll .poll-result .poll-publish-list strong {
        display:       block;
        overflow:      hidden;
        clear:         both;
        margin-bottom: 2px;
        font-size:     12px;
    }
    .poll .poll-result .poll-publish-list .grf {
        width:    92%;
        height:   16px;
        display:  block;
        overflow: hidden;
        float:    left;
        position: relative;
    }
    .poll .poll-result .poll-publish-list .grf span {
        background-color: #0390b8;
        height:           16px;
        display:          block;
        overflow:         hidden;
        clear:            both;
        position:         absolute;
        left:             0;
        top:              0;
    }
    .poll .poll-result .poll-publish-list .grfYuzde {
        width:      32px;
        height:     20px;
        display:    block;
        overflow:   hidden;
        float:      right;
        font-size:  12px;
        text-align: right;
    }
    .poll .poll-result .toplamOy {
        display:    block;
        overflow:   hidden;
        clear:      both;
        text-align: center;
    }
/* FCALENDAR CSS
   ========================================================================== */
    .calendar-pop .call-controls {
        display: table;
        width:   100%;
    }
    .calendar-pop .call-controls span {
        display: table-cell;
        padding: 4px 6px;
    }
    .calendar-pop .call-controls span.prew {
        width:  20px;
        cursor: pointer;
    }
    .calendar-pop .call-controls span.next {
        width:  20px;
        cursor: pointer;
    }
    .calendar-pop .call-controls span.current {
        text-align:  center;
        font-weight: bold;
    }
    .calendar-pop .call-body {
        display:         table;
        width:           100%;
        border-collapse: separate;
        border-spacing:  4px;
    }
    .calendar-pop .call-body th {
        text-align:  center;
        z-index:     0;
        font-weight: bold;
        line-height: 34px;
    }
    .calendar-pop .call-body td {
        text-align: center;
        position:   relative;
        z-index:    0;
        color:      #858585;
        border:     1px solid #dbdbdb;
    }
    .calendar-pop .call-body td.activeTd {
        z-index: 1;
    }
    .calendar-pop .call-body td.day-empty {
        background-color: #f7f7f7;
        border:           1px solid #f7f7f7;
    }
    .calendar-pop .call-body td a {
        color:       #858585;
        display:     block;
        line-height: 24px;
        z-index:     0;
    }
    .calendar-pop .call-body td a.active {
        background-color: #dbdbdb;
        font-weight:      bold;
    }
    .calendar-pop .call-body td a.active:hover {
        background: #298ff6;
        color:      #fff;
    }
    .calendar-pop .call-body .calendar-content {
        background-color: white;
        width:            400px;
        display:          none;
        overflow:         hidden;
        clear:            both;
        padding:          10px;
        text-align:       left;
        border:           1px solid #dbdbdb;
        position:         absolute;
        z-index:          99;
    }
    .calendar-pop .call-body .calendar-content .calendar-table {
        display: table;
        width:   100%;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-date {
        width:          60px;
        display:        table-cell;
        overflow:       hidden;
        vertical-align: top;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-date span {
        display:    block;
        overflow:   hidden;
        clear:      both;
        text-align: center;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-date span.day {
        color:     #1D4798;
        font-size: 50px;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-date span.month {
        color:     #C10000;
        font-size: 14px;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-text {
        display:        table-cell;
        vertical-align: top;
        overflow:       hidden;
        padding:        10px 0 10px 10px;
        font-size:      12px;
        line-height:    16px;
        border-left:    1px solid #dbdbdb;
        border-bottom:  1px dashed #dbdbdb;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-text .calendar-text-list {
        margin-bottom: 10px;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-text .calendar-text-list strong.cal-list-title {
        display:       block;
        overflow:      hidden;
        clear:         both;
        margin-bottom: 6px;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-text .calendar-text-list span.cal-list-location {
        display:       block;
        overflow:      hidden;
        clear:         both;
        margin-bottom: 4px;
    }
    .calendar-pop .call-body .calendar-content .calendar-table .calendar-text .calendar-text-list p {
        display:  block;
        overflow: hidden;
        clear:    both;
    }
    .calendar-pop .call-body td.activeTd:hover {
        z-index: 3;
    }
    .calendar-pop .call-body td.activeTd:hover > .calendar-content {
        display: block;
        left:    0%;
        top:     99%;
        z-index: 3;
    }
    .calendar-list .cal-select {
        background-color: #eaeaea;
        display:          block;
        overflow:         hidden;
        clear:            both;
        margin:           10px 0 16px 0;
        padding:          8px 20px;
        border-bottom:    1px solid #eaeaea;
        border-radius:    8px;
    }
    .calendar-list .cal-select p {
        display:     block;
        overflow:    hidden;
        float:       left;
        padding-top: 8px;
    }
    .calendar-list .cal-select label {
        display:     block;
        overflow:    hidden;
        float:       right;
        margin-left: 30px;
    }
    .calendar-list .cal-select label span {
        padding-right: 10px;
    }
    .calendar-list .cal-select label select {
        width:         100px;
        padding:       2px 6px;
        background:    none;
        border:        none;
        border:        1px solid #CCC;
        border-radius: 4px;
    }
    .calendar-list .cal-item {
        display:          table;
        overflow:         hidden;
        clear:            both;
        margin-bottom:    20px;
        padding:          10px;
        text-align:       left;
        background-color: #f4f4f4;
        border:           1px solid #e8e8e8;
        width:            100%;
    }
    .calendar-list .cal-item .cal-images {
        display:        table-cell;
        width:          280px;
        text-align:     center;
        vertical-align: middle;
        padding:        10px;
    }
    .calendar-list .cal-item .cal-images i {
        font-size: 7em;
        color:     #e2e2e2;
    }
    .calendar-list .cal-item .cal-details {
        display: table-cell;
        padding: 10px;
    }
    .calendar-list .cal-item .cal-details .cal-title {
        display:       block;
        overflow:      hidden;
        margin-bottom: 10px;
        color:         #00519E;
        line-height:   16px;
    }
    .calendar-list .cal-item .cal-details .cal-cell {
        display:       block;
        overflow:      hidden;
        float:         left;
        margin-right:  12px;
        margin-bottom: 4px;
    }
    .calendar-detay .cal-item {
        display:          table;
        overflow:         hidden;
        clear:            both;
        margin-bottom:    20px;
        padding:          10px;
        text-align:       left;
        background-color: #f4f4f4;
        border:           1px solid #e8e8e8;
        width:            100%;
    }
    .calendar-detay .cal-item .gallery-page {
        display:        table-cell;
        width:          30%;
        padding:        10px 0px;
        vertical-align: top;
    }
    .calendar-detay .cal-item .cal-details {
        display:        table-cell;
        padding:        10px;
        vertical-align: top;
    }
    .calendar-detay .cal-item .cal-details .cal-title {
        display:       block;
        overflow:      hidden;
        margin-bottom: 10px;
        color:         #00519E;
        line-height:   16px;
    }
    .calendar-detay .cal-item .cal-details .cal-cell {
        display:       block;
        overflow:      hidden;
        float:         left;
        margin-right:  12px;
        margin-bottom: 4px;
    }

/* MODAL STYLE CSS
   ========================================================================== */
    .inline-model-box {
        min-width: 320px;
        display:   block;
        overflow:  hidden;
    }
    .inline-model-box .inline-model-box-header {
        display:        block;
        overflow:       hidden;
        padding-bottom: 7px;
    }
    .inline-model-box .inline-model-box-header strong {
        display:     block;
        overflow:    hidden;
        width:       90%;
        float:       left;
        font-weight: 400;
    }
    .inline-model-box .inline-model-box-header .close {
        width:      16px;
        height:     16px;
        background: url("/public/images/close.png") top no-repeat;
        display:    block;
        float:      right;
        display:    none;
    }
    .inline-model-box .inline-model-box-body {
        display:  block;
        clear:    both;
        overflow: hidden;
    }
    .inline-model-box .inline-model-box-body .close {
        display:          inline-block;
        background-color: #000;
        padding:          7px 15px;
        color:            #fff;
        opacity:          1;
        font-weight:      300;
        font-size:        1em;
        float:            none;
    }
    /* ADD MODEL*/
    .inline-model-box .add-to-model {
        text-align: center;
    }
    .inline-model-box .inline-model-box-body .add-to-message {
        background:     url("/public/images/modal-cross.png") top center no-repeat;
        padding-top:    40px;
        padding-bottom: 10px;
        color:          #444;
        font-size:      14px;
    }
    .inline-model-box .inline-model-box-body .add-to-message-ok {
        background:     url("/public/images/modal-ok.png") top center no-repeat;
        padding-top:    40px;
        padding-bottom: 10px;
        color:          #444;
        font-size:      14px;
    }
    .inline-model-box .inline-model-box-body .add-to-message-empty {
        background:     none;
        padding-top:    10px;
        padding-bottom: 10px;
        color:          #444;
        font-size:      14px;
    }
    /* ERROR MODEL*/
    .error-model {
        max-width: 450px !important;
    }
    /* DIALOG SIZES */
    .white-popup {
        position:   relative;
        background: #FFF;
        padding:    23px 43px 23px 27px;
        width:      auto;
        margin:     0 auto;
        text-align: left;
    }
    .small-dialog {
        max-width: 360px;
    }
    .medium-dialog {
        max-width: 540px;
    }
    .large-dialog {
        max-width: 640px;
    }
    .extra-large-dialog {
        max-width: 768px;
    }
    .hight-dialog {
        max-width: 960px;
    }
    .extra-hight-dialog {
        max-width: 1024px;
    }
    /* POPUP PAGE */
    #popup {
        position:   relative;
        background: #FFF;
        padding:    15px;
        width:      auto;
        max-width:  772px;
        margin:     0 auto;
    }
    #popup .mfp-close {
        right: -10px;
        top:   -37px;
        color: #fff;
    }

/* MINI BOX
   ========================================================================== */
    .add-to-card-model {
        text-align: center;
    }
    .add-to-card-message {
        background:     url("/public/images/modal-cross.png") top center no-repeat;
        padding-top:    40px;
        padding-bottom: 15px;
        color:          red;
    }
    .add-message-ok {
        background:     url("/public/images/modal-ok.png") top center no-repeat;
        padding-top:    40px;
        padding-bottom: 10px;
        color:          #444;
    }

/* EFFECTS
   ========================================================================== */
    .iframe-popup {
        width:      100%;
        margin:     auto;
        overflow-x: hidden;
        display:    block;
    }
    .white-popup {
        margin:  0 auto;
        display: block;
    }
    .popup-scroll {
        overflow-x:    hidden;
        /*overflow-y: scroll;*/
        /*max-height: 319px;*/
        display:       block;
        padding-right: 15px;
    }
    .mfp-hide {
        display:    none;
        overflow-x: hidden;
    }
    @media (max-width: 576px) {
        .mfp-hide {
            width: 100%;
        }
    }

/* SCROLL BAR
========================================================================== */
    .scrollbar {
        height:     auto;
        max-height: 377px;
        overflow-y: scroll !important;
    }
    .scrollbar::-webkit-scrollbar {
        width: 8px;
    }
    .scrollbar::-webkit-scrollbar-button {
        width:  8px;
        height: 5px;
    }
    .scrollbar::-webkit-scrollbar-track {
        background:    #eee;
        border:        thin solid lightgray;
        box-shadow:    0px 0px 3px #dfdfdf inset;
        border-radius: 10px;
    }
    .scrollbar::-webkit-scrollbar-thumb {
        background:    #999;
        border:        thin solid gray;
        border-radius: 10px;
    }
    .scrollbar::-webkit-scrollbar-thumb:hover {
        background: #7d7d7d;
    }
/* DISPLAY CSS
   ========================================================================== */
    .center-block {
        display:      block;
        margin-right: auto;
        margin-left:  auto;
    }
    .float-left, .pull-left {
        float: left !important;
    }
    .float-right, .pull-right {
        float: right !important;
    }
    .block {
        display: block;
    }
    .inline-block {
        display: inline-block;
    }
    .hide {
        display: none !important;
    }
    .show {
        display: block !important;
    }
    .hidden {
        display:    none !important;
        visibility: hidden !important;
    }
    .clear {
        clear: both;
    }
    .clear-left {
        clear: left;
    }
    .clear-right {
        clear: right;
    }
    .overflow {
        overflow: hidden;
    }
    .overflow-scroll {
        overflow: scroll;
    }
    .overflow-v {
        overflow: visible !important;
    }
    .relative {
        position: relative;
    }
    .absolute {
        position: absolute;
    }
    .fixed {
        position: fixed;
    }
    .table-fixed {
        table-layout: fixed;
    }
    .noscroll {
        overflow: hidden;
    }
    .nowrap {
        white-space: pre;
    }
    .img-responsive {
        max-width: 100%;
        height:    auto;
    }

/* TEXT DISPLAY
   ========================================================================== */
    .normal {
        font-weight: 400;
    }
    .italic {
        font-style: oblique;
    }
    .medium {
        font-weight: 500;
    }
    .semibold {
        font-weight: 600;
    }
    .strong {
        font-weight: 700;
    }
    .shadow {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }
    .shadow-inset {
        box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.4);
    }
    .shadow-light {
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
    .del {
        display:         block;
        color:           #c1c1c1;
        padding-top:     2px;
        text-decoration: line-through;
    }
    .ins {
        display:     block;
        color:       #910028;
        font-size:   1.1em;
        font-weight: bold;
    }
    .rounded {
        border-radius: 4px;
    }
    .circle {
        border-radius: 50%;
    }
    .requires {
        font-size: 0.9em;
        color:     red;
    }
        .radius-reset{
            border-radius: 0px;
        }
/* CUSTOM VALIDATION
   ========================================================================== */
    .requires {
        font-size: 0.9em;
        color:     red;
    }
/* BG COLOR
   ========================================================================== */
    .bg-lightgrey {
        background-color: #dddddd !important;
    }
    a.bg-lightgrey:focus, a.bg-lightgrey:hover {
        background-color: #ccc !important;
    }
    .bg-grey {
        background-color: #ccc !important;
    }
    a.bg-grey:focus, a.bg-grey:hover {
        background-color: #979797 !important;
    }
    .bg-warm {
        background-color: #EF9A9A !important;
    }
    a.bg-warm:focus, a.bg-warm:hover {
        background-color: red !important;
    }
    .bg-hot {
        background-color: red !important;
    }
    a.bg-hot:focus, a.bg-hot:hover {
        background-color: #b50000 !important;
    }
    .bg-purple {
        background-color: purple !important;
    }
    a.bg-purple:focus, a.bg-purple:hover {
        background-color: #630063 !important;
    }
/* BG COLOR
   ========================================================================== */
    .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark, .bg-purple, .bg-hot, .bg-warm {
        color: #fff;
    }
/* LEFT BORDER EXTRA
   ========================================================================== */
    .left-white {
        border-left: 2px solid #fff !important;
    }
    .left-light {
        border-left: 2px solid #f8f9fa !important;
    }
    .left-lightgrey {
        border-left: 2px solid #ccc !important;
    }
    .left-grey {
        border-left: 2px solid #979797 !important;
    }
    .left-secondary {
        border-left: 2px solid #868e96 !important;
    }
    .left-dark {
        border-left: 2px solid #343a40 !important;
    }
    .left-primary {
        border-left: 2px solid #007bff !important;
    }
    .left-success {
        border-left: 2px solid #28a745 !important;
    }
    .left-info {
        border-left: 2px solid #17a2b8 !important;
    }
    .left-warning {
        border-left: 2px solid #ffc107 !important;
    }
    .left-danger {
        border-left: 2px solid #dc3545 !important;
    }
    .left-transparent {
        border-left: 2px solid transparent !important;
    }
    .left-warm {
        border-left: 2px solid #EF9A9A !important;
    }
    .left-hot {
        border-left: 2px solid red !important;
    }
    .left-purple {
        border-left: 2px solid purple !important;
    }
/* BORDER EXTRA
   ========================================================================== */
    .border-white {
        border: 1px solid #fff !important;
    }
    .border-light {
        border: 1px solid #f8f9fa !important;
    }
    .border-lightgrey {
        border: 1px solid #ccc !important;
    }
    .border-grey {
        border: 1px solid #979797 !important;
    }
    .border-secondary {
        border: 1px solid #868e96 !important;
    }
    .border-dark {
        border: 1px solid #343a40 !important;
    }
    .border-primary {
        border: 1px solid #007bff !important;
    }
    .border-success {
        border: 1px solid #28a745 !important;
    }
    .border-info {
        border: 1px solid #17a2b8 !important;
    }
    .border-warning {
        border: 1px solid #ffc107 !important;
    }
    .border-danger {
        border: 1px solid #dc3545 !important;
    }
    .border-transparent {
        border: 1px solid transparent !important;
    }
    .border-warm {
        border: 1px solid #EF9A9A !important;
    }
    .border-hot {
        border: 1px solid red !important;
    }
    .border-purple {
        border: 1px solid purple !important;
    }

/* FORM LABEL CSS
   ========================================================================== */
    .badge-white {
        color:            #111;
        background-color: #fff;
    }
    .badge-lightgrey {
        color:            #111;
        background-color: #ccc;
    }
    .badge-grey {
        color:            #111;
        background-color: #979797;
    }
    .badge-warm {
        color:            #fff;
        background-color: #EF9A9A;
    }
    .badge-hot {
        color:            #fff;
        background-color: red;
    }
    .badge-purple {
        color:            #fff;
        background-color: purple;
    }

/* BUTTONS EXTRA
   ========================================================================== */
    .btn-white {
        color:            #444;
        background-color: #f8f9fa;
        border-color:     #f8f9fa;
    }
    .btn-white:hover {
        color:            #444;
        background-color: #ccc;
        border-color:     #ccc;
    }
    .btn-white:focus, .btn-white.focus {
        box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.51);
    }
    .btn-light {
        color:            #444;
        background-color: #f8f9fa;
        border-color:     #f8f9fa;
    }
    .btn-light:hover {
        color:            #444;
        background-color: #ccc;
        border-color:     #ccc;
    }
    .btn-light:focus, .btn-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.51);
    }
    .btn-lightgrey {
        color:            #444;
        background-color: #ccc;
        border-color:     #ccc;
    }
    .btn-lightgrey:hover {
        color:            #444;
        background-color: #979797;
        border-color:     #979797;
    }
    .btn-lightgrey:focus, .btn-lightgrey.focus {
        box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.51);
    }
    .btn-grey {
        color:            #fff !important;
        background-color: #979797;
        border-color:     #979797;
    }
    .btn-grey:hover {
        color:            #fff;
        background-color: #848484;
        border-color:     #848484;
    }
    .btn-grey:focus, .btn-grey.focus {
        box-shadow: 0 0 0 0.2rem rgba(151, 151, 151, 0.5);
    }
    .btn-hot {
        color: #fff;
        background-color: #d71920;
        border-color: #d71920;
    }

    .btn-hot:hover {
        color:            #fff;
        background-color: #97161c;
        border-color:     #97161c;
    }

/* TEXT COLOR EXTRA
   ========================================================================== */
.text-white {
    color: #fff;
}
.text-light {
    color: #f8f9fa;
}
.text-lightgrey {
    color: #ccc;
}
.text-grey {
    color: #979797;
}
.text-secondary {
    color: #868e96;
}
.text-dark {
    color: #343a40;
}
.text-warm {
    color: #d9534f;
}
a.text-warm:focus, a.text-warm:hover {
    color: #c64c48;
}
.text-hot {
    color: red;
}
a.text-hot:focus, a.text-hot:hover {
    color: #b50000;
}
.text-purple {
    color: purple;
}
a.text-purple:focus, a.text-purple:hover {
    color: #630063;
}
/* TEXT GRID ALIGN
   ========================================================================== */
.text-xs-left {
    text-align: left;
}
.text-xs-right {
    text-align: right;
}
.text-xs-center {
    text-align: center;
}
@media (min-width: 576px) {
    .text-sm-left {
        text-align: left;
    }
    .text-sm-right {
        text-align: right;
    }
    .text-sm-center {
        text-align: center;
    }
}
@media (min-width: 768px) {
    .text-md-left {
        text-align: left;
    }
    .text-md-right {
        text-align: right;
    }
    .text-md-center {
        text-align: center;
    }
}
@media (min-width: 992px) {
    .text-lg-left {
        text-align: left;
    }
    .text-lg-right {
        text-align: right;
    }
    .text-lg-center {
        text-align: center;
    }
}
@media (min-width: 1200px) {
    .text-xl-left {
        text-align: left;
    }
    .text-xl-right {
        text-align: right;
    }
    .text-xl-center {
        text-align: center;
    }
}
.vertical-middle {
    vertical-align: middle;
}
.vertical-top {
    vertical-align: top !important;
}
.vertical-bottom {
    vertical-align: baseline !important;
}
/* CURSOR
   ========================================================================== */
.cursor {
    cursor: pointer;
}
/* ARROW
   ========================================================================== */
i.arrow {
    border:       solid black;
    border-width: 0 3px 3px 0;
    display:      inline-block;
    padding:      3px;
}
i.arrow.right {
    transform:         rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
i.arrow.left {
    transform:         rotate(135deg);
    -webkit-transform: rotate(135deg);
}
i.arrow.up {
    transform:         rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
i.arrow.down {
    transform:         rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/* [ NAVIGATION ] CSS
   ========================================================================== */
nav ul {
    list-style: none;
    margin:     0px;
    padding:    0px;
}
/* TRANSITION CSS
   ========================================================================== */
.transition {
    transition: all 0.3s ease-in-out;
}
.transition > li > a {
    transition: all 0.3s ease-in-out;
}
.transition > a {
    transition: all 0.3s ease-in-out;
}
/* FADE CSS
   ========================================================================== */
.fade {
    opacity:            0;
    -webkit-transition: opacity .15s linear;
    -o-transition:      opacity .15s linear;
    transition:         opacity .15s linear;
}
.fade.in {
    opacity: 1;
}
.collapse {
    display: none;
}
.collapse.in {
    display: block;
}
.collapsing {
    position:                           relative;
    height:                             0;
    overflow:                           hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function:      ease;
    transition-timing-function:         ease;
    -webkit-transition-duration:        .35s;
    -o-transition-duration:             .35s;
    transition-duration:                .35s;
    -webkit-transition-property:        height;
    -o-transition-property:             height;
    transition-property:                height;
}
/* ANIMATE OBJECT
   ========================================================================== */
.animate {
    overflow: hidden;
}
.animate img {
    transition: all 0.3s ease-in-out;
}
.animate:hover img {
    transform: scale(1.05);
    opacity:   .7;
}
/* TOOLTIP
   ========================================================================== */
.tooltip {
    display:  inline;
    position: relative;
}
.tooltip:hover:after {
    background:    #333;
    background:    rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    bottom:        26px;
    color:         #fff;
    content:       attr(title);
    left:          20%;
    padding:       5px 15px;
    position:      absolute;
    z-index:       101;
    width:         220px;
}
.tooltip:hover:before {
    border:       solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom:       20px;
    content:      "";
    left:         50%;
    position:     absolute;
    z-index:      101;
}
/* ARTICLE RESOURCES
   ========================================================================== */
.resources {
    overflow:      hidden;
    padding:       4px 0px;
    font-size:     0.9em;
    font-style:    italic;
    border-top:    1px solid #cccccc;
    margin-top:    10px;
    counter-reset: my-badass-counter;
}
.resources:before {
    content:        'Kaynaklar';
    border-bottom:  1px solid #cccccc;
    display:        block;
    padding-bottom: 5px;
    font-weight:    bold;
    margin-bottom:  5px;
}
.resources p, .resources ul, .resources li {
    display:       block;
    margin-bottom: 5px;
    padding:       0px;
}
.resources p:before, .resources li:before {
    padding-right:     4px;
    counter-increment: my-badass-counter;
    content:           "(" counter(my-badass-counter) ")";
}
/* ARTICLE NOTES
   ========================================================================== */
.footnotes {
    overflow:      hidden;
    padding:       4px 0px;
    font-size:     0.9em;
    font-style:    italic;
    border-top:    1px solid #cccccc;
    margin-top:    10px;
    counter-reset: my-badass-counter;
}
.footnotes:before {
    content:        'Dipnotlar';
    border-bottom:  1px solid #cccccc;
    display:        block;
    padding-bottom: 5px;
    font-weight:    bold;
    margin-bottom:  5px;
}
.footnotes p, .footnotes ul, .footnotes li {
    display:       block;
    margin-bottom: 5px;
    padding:       0px;
}
.footnotes p:before, .footnotes li:before {
    padding-right:     4px;
    counter-increment: my-badass-counter;
    content:           "(" counter(my-badass-counter) ")";
}
/* EXTRAS
   ========================================================================== */
.data-extra-fields .div-table {
    border-collapse: collapse;
}
.data-extra-fields .div-table-row:last-child {
    border-bottom: none;
}
.data-extra-fields .div-table-col {
    padding:        4px 0px;
    vertical-align: middle;
    line-height:    1;
    color:          #7f7f7f;
}
.data-extra-fields .div-table-col:first-child {
    color:         #3b4251;
    font-weight:   500;
    padding-right: 15px;
}
/* OPTIONS
   ========================================================================== */
.data-extra-options .div-table {
    border-collapse: collapse;
}
.data-extra-options .div-table-row:last-child {
    border-bottom: none;
}
.data-extra-options .div-table-col {
    padding:        4px 0px;
    vertical-align: middle;
    line-height:    1;
    color:          #7f7f7f;
}
.data-extra-options .div-table-col:first-child {
    color:         #3b4251;
    font-weight:   500;
    padding-right: 15px;
}
/* VARYANTS
   ========================================================================== */
.data-extra-varyants .div-table {
    border-collapse: collapse;
}
.data-extra-varyants .div-table-row:last-child {
    border-bottom: none;
}
.data-extra-varyants .div-table-col {
    padding:        4px 0px;
    vertical-align: middle;
    line-height:    1;
    color:          #7f7f7f;
}
.data-extra-varyants .div-table-col:first-child {
    color:         #3b4251;
    font-weight:   500;
    padding-right: 15px;
}
/* LIST CHECK STYLE
   ========================================================================== */
.list-check {
    list-style:   none;
    margin-left:  0px !important;
    padding-left: 0px !important;
}
.list-check li:before {
    font-family:   'FontAwesome';
    content:       "\f00c";
    padding-right: 6px;
}
/* PAGE FEATURES STYLE
   ========================================================================== */
.page-features {
    background-color: #e7e7e7;
    padding:          15px;
    clear:            both;
}
/* DATA ARTICLE AREA
   ========================================================================== */
    .data-article {
        overflow:       hidden;
        padding-bottom: 7px;
    }
    .data-article i {
        font-size:   18px;
        line-height: 32px;
    }
    .data-article .show_social {
        float:       left;
        margin-left: 4px;
        padding:     2px 4px;
    }
    .data-article .show_print {
        float:       left;
        margin-left: 0px;
        padding:     2px 0px;
    }
    .data-article .show_email {
        float:       left;
        margin-left: 0px;
        padding:     2px 0px;
    }
    .data-article .show_rating {
        float:       left;
        margin-left: 4px;
        padding:     2px 6px;
    }
    .data-article .show_rating .star-rating {
        width:      80px;
        height:     16px;
        float:      left;
        background: url(/public/images/ratings.png);
        cursor:     pointer;
    }
    .data-article .show_rating .star {
        width:  16px;
        height: 16px;
        float:  left;
    }
    .data-article .show_rating .result {
        float:       left;
        height:      16px;
        color:       #454545;
        margin-left: 5px;
        line-height: 110%;
    }
    .data-article .show_social a,
    .data-article .show_print a,
    .data-article .show_email a {
        float:            left;
        display:          block;
        transition:       all 0.5s ease-in-out;
        background-color: #c1c1c1;
        margin-left:      2px;
        color:            #fff;
        text-align:       center;
        width:            32px;
        line-height:      32px;
    }
    .data-article .show_social a:hover,
    .data-article .show_print a:hover,
    .data-article .show_email a:hover {
        background-color: #000 !important;
        transition:       all 0.5s ease-in-out;
    }
    .data-article .show_social a.facebook {
        background-color: #3b5998;
    }
    .data-article .show_social a.google-plus {
        background-color: #dc4a38;
    }
    .data-article .show_social a.instagram {
        background-color: #655dca;
    }
    .data-article .show_social a.twitter {
        background-color: #1da0f2;
    }
    .data-article .show_social a.youtube {
        background-color: #ee1c1b;
    }
    .data-article .show_print a {
        background-color: #738a8d;
    }
    .data-article .show_email a {
        background-color: #848484;
    }

        /* PRODUCTS LIST RATING*/
        .product-rating-area{
            padding-top: 4px;
            clear: both;
        }
            .product-rating-area .product-rating {
                width:      60px;
                height:     10px;
                background: url(/public/images/rating.png);
                /* cursor:     pointer; */
            }
                .product-rating-area .product-rating .star {
                    width:  12px;
                    height: 10px;
                    float:  left;
                }

/* GALLERY CSS [FIGURE]
   ========================================================================== */
.content-page figure {
    text-align:  center;
    font-style:  italic;
    font-size:   smaller;
    text-indent: 0;
    border:      thin silver solid;
    margin:      0.5em;
    padding:     0.5em;
}
.content-page figure figcaption {
    display:     block;
    width:       100%;
    padding-top: 5px;
}
/* CONTENT PAGE GALLERY CSS
   ========================================================================== */
.page-gallery-row .col {
    margin-bottom: 10px;
}
.page-gallery-row .thumbnails {
    position: relative;
    width:    100%;
}
.page-gallery-row .thumbnails img {
    vertical-align: middle;
    width:          100%;
}
.page-gallery-row .thumbnails .thumbnails-link {
    color:      #fff;
    width:      100%;
    height:     100%;
    bottom:     0%;
    position:   absolute;
    z-index:    90;
    background: rgba(0, 0, 0, 0.8);
    opacity:    0;
    transform:  scale(0);
    transition: all 0.6s ease;
    left:       0px;
}
.page-gallery-row .thumbnails:hover .thumbnails-link {
    bottom:     0;
    opacity:    1;
    transform:  scale(1);
    transition: all 0.5s ease;
}
.page-gallery-row .thumbnails .thumbnails-link .details {
    display:        table;
    vertical-align: middle;
    color:          #fff;
    text-align:     center;
    position:       absolute;
    padding:        10px;
    width:          100%;
    height:         100%;
}
.page-gallery-row .thumbnails .thumbnails-link .details div {
    display:        table-cell;
    vertical-align: middle;
}
.page-gallery-row .thumbnails .thumbnails-link strong {
    color:       #fff;
    font-weight: normal;
}
.page-gallery-row .thumbnails .thumbnails-link p {
    color: #c3c3c3;
}
.page-gallery-row .thumbnails .thumbnails-link i {
    color:     #fff;
    font-size: 14px;
}
/* GALLERY CSS [IMAGES]
   ========================================================================== */
.gallery-page .col {
    margin-bottom: 10px;
}
.gallery-page .thumbnails {
    position: relative;
    width:    100%;
}
.gallery-page .thumbnails img {
    vertical-align: middle;
    width:          100%;
}
.gallery-page .thumbnails .thumbnails-link {
    color:      #fff;
    width:      100%;
    height:     100%;
    bottom:     0%;
    position:   absolute;
    z-index:    90;
    background: rgba(0, 0, 0, 0.8);
    opacity:    0;
    transform:  scale(0);
    transition: all 0.6s ease;
    left:       0px;
}
.gallery-page .thumbnails:hover .thumbnails-link {
    bottom:     0;
    opacity:    1;
    transform:  scale(1);
    transition: all 0.5s ease;
}
.gallery-page .thumbnails .thumbnails-link .details {
    display:        table;
    vertical-align: middle;
    color:          #fff;
    text-align:     center;
    position:       absolute;
    padding:        10px;
    width:          100%;
    height:         100%;
}
.gallery-page .thumbnails .thumbnails-link .details div {
    display:        table-cell;
    vertical-align: middle;
}
.gallery-page .thumbnails .thumbnails-link strong {
    color:       #fff;
    font-weight: normal;
}
.gallery-page .thumbnails .thumbnails-link p {
    color: #c3c3c3;
}
.gallery-page .thumbnails .thumbnails-link i {
    color:     #fff;
    font-size: 14px;
}
/* GALLERY CSS [CATALOGUE || ARCHIVE]
   ========================================================================== */
.gallery-page .col-doc {
    margin-bottom: 4px;
    padding-left:  7px;
    padding-right: 7px;
}
.gallery-page .documents {
    position: relative;
    width:    100%;
    display:  table;
    border:   1px solid #dddddd;
}
.gallery-page .documents .icon {
    display:          table-cell;
    padding:          10px;
    font-size:        24px;
    background-color: #0e9c57;
    text-align:       center;
    color:            #fff;
    vertical-align:   middle;
}
.gallery-page .documents .thumbnails-link {
    color:            #3e3e3e;
    display:          table-cell;
    background-color: #fff;
    width:            100%;
    vertical-align:   top;
    transition:       all 0.5s ease;
    position:         relative;
}
.gallery-page .documents .thumbnails-link .details {
    position: relative;
    z-index:  2;
    padding:  14px 8px;
}
.gallery-page .documents .thumbnails-link .bg-color {
    position:         absolute;
    z-index:          1;
    background-color: #0e9c57;
    width:            0%;
    height:           100%;
    left:             0px;
    transition:       all 0.5s ease;
}
.gallery-page .documents .thumbnails-link strong {
    font-weight: normal;
    transition:  all 0.5s ease;
}
.gallery-page .documents .thumbnails-link p {
    color: #8a8a8a;
}
.gallery-page .documents .thumbnails-link:hover {
    background-color: #5fc995;
    transition:       all 0.5s ease;
    color:            #fff;
}
.gallery-page .documents .thumbnails-link:hover .bg-color {
    background-color: #0e9c57;
    width:            100%;
    transition:       all 0.5s ease;
}
.gallery-page .documents .thumbnails-link:hover p {
    color: #95d4b5;
}
/* GALLERY CSS [MEDIA]
   ========================================================================== */
.gallery-page .gallery-media {
    margin-top: 10px;
}
.gallery-page .medias {
    position: relative;
    width:    100%;
}
.gallery-page .medias .thumbnails-link {
    color:            #fff;
    display:          block;
    position:         relative;
    transition:       all 0.6s ease;
    background-color: #db3c23;
}
.gallery-page .medias .thumbnails-link .icon {
    color:          #fff;
    display:        block;
    position:       relative;
    z-index:        1;
    padding:        40px 20px;
    font-size:      70px;
    text-align:     center;
    vertical-align: middle;
}
.gallery-page .medias .thumbnails-link .details {
    display:          table;
    width:            100%;
    height:           100%;
    height:           150px;
    position:         absolute;
    vertical-align:   middle;
    color:            #fff;
    text-align:       center;
    padding:          10px;
    z-index:          3;
    background-color: rgba(230, 64, 12, 0.9);
    opacity:          0;
    transition:       all 0.6s ease;
    bottom:           -100%;
}
.gallery-page .medias .thumbnails-link .details div {
    display:        table-cell;
    vertical-align: middle;
}
.gallery-page .medias .thumbnails-link strong {
    color:       #fff;
    font-weight: normal;
}
.gallery-page .medias .thumbnails-link p {
    color: #c3c3c3;
}
.gallery-page .medias .thumbnails-link i {
    color:     #fff;
    font-size: 14px;
}
.gallery-page .medias .thumbnails-link:hover .details {
    bottom:           0%;
    background-color: rgba(0, 0, 0, 0.84);
    opacity:          1;
    transition:       all 0.6s ease;
}
/* GALLERY CSS [ONLINE MEDIA]
   ========================================================================== */
.gallery-page .o-medias {
    position: relative;
    width:    100%;
}
.gallery-page .o-medias .thumbnails-link {
    color:      #fff;
    display:    block;
    position:   relative;
    transition: all 0.6s ease;
}
.gallery-page .o-medias .thumbnails-link img {
    display:        block;
    position:       absolute;
    z-index:        0;
    text-align:     center;
    vertical-align: middle;
    top:            0px;
}
.gallery-page .o-medias .thumbnails-link .icon {
    color:          #fff;
    display:        block;
    position:       relative;
    z-index:        1;
    padding:        40px 20px;
    font-size:      70px;
    text-align:     center;
    vertical-align: middle;
}
.gallery-page .o-medias .thumbnails-link .color {
    background-color: #db3c23;
}
.gallery-page .o-medias .thumbnails-link .details {
    display:          table;
    width:            100%;
    height:           100%;
    height:           150px;
    position:         absolute;
    vertical-align:   middle;
    color:            #fff;
    text-align:       center;
    padding:          10px;
    z-index:          3;
    background-color: rgba(230, 64, 12, 0.9);
    opacity:          0;
    transition:       all 0.6s ease;
    bottom:           -100%;
}
.gallery-page .o-medias .thumbnails-link .details div {
    display:        table-cell;
    vertical-align: middle;
}
.gallery-page .o-medias .thumbnails-link strong {
    color:       #fff;
    font-weight: normal;
}
.gallery-page .o-medias .thumbnails-link p {
    color: #c3c3c3;
}
.gallery-page .o-medias .thumbnails-link i {
    color:     #fff;
    font-size: 14px;
}
.gallery-page .o-medias .thumbnails-link:hover .details {
    bottom:           0%;
    background-color: rgba(0, 0, 0, 0.84);
    opacity:          1;
    transition:       all 0.6s ease;
}
@media (max-width: 575px) {
    .gallery-row > [class*='col-'] {
        float:         none;
        clear:         both;
        width:         100%;
        margin-bottom: 15px;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .gallery-row > [class*='col-'] {
        float:         left;
        clear:         none;
        width:         50%;
        margin-bottom: 15px;
    }
}