@charset 'UTF-8';

/********************************************/
/* Tüm safyalarda yüklenecek

/********************************************/
* {
    outline: none;
}

/********************************************/
/* Basic Reset
/********************************************/
*, *:before, *:after {
    outline: none;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'proxima-nova', sans-serif;
    color: #3d3d3d;
    background: #fff;
}

.inner {
    display: block;
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.inner:after,
.cc:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

section {
    clear: both
}

.clear {
    clear: both
}

::-webkit-selection {
    background: rgba(0, 0, 0, .1);
}

::-moz-selection {
    background: rgba(0, 0, 0, .1);
}

::selection {
    background: rgba(0, 0, 0, .1);
}

.aleft {
    float: left
}

.aright {
    float: right
}

.display-none {
    display: none !important
}

a, a:before, a:after,
input, select,
button, .trans,
.button,
.footer-step,
.footer-step:before,
.footer-step:after,
.footer-step-text,
.footer-arrow,
.footer-arrow:before,
.footer-arrow:after,
.user-dropdown,
.user-dropdown:before,
.user-name,
.tag:before,
.tag:after,
.matbuu-modal-mask,
.matbuu-modal,
.owl-dot,
.owl-dot span,
.slide-title,
.slide-content,
.slide-button,
.tab-title,
.tab-content,
table tr,
.custom-open,
.sod_select,
.sod_select:after,
.sod_select .sod_list_wrapper,
.sod_select .sod_option {
    text-decoration: none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

/********************************************/
/* Header
/********************************************/
.main-header {
    position: relative;
    display: block;
    background: #fff;
    font-size: 0;
}

.main-header > .inner {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 30px;
}


.logo {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 110px;
    line-height: 110px;
    font-size: 0;
}

.logo img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 24px;
}

.logo img.logo-mini{
    display: none;
    width: 160px;
}
.logo img.logo-big{
    display: block;
}

.search {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    margin-left: 80px;
}

.search:before {
    z-index: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    font-size: 22px;
    line-height: 100%;
    color: #c4c4c4;
    pointer-events: none;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.search-input {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /*width: 480px;*/
    height: 50px;
    padding: 0 95px 0 52px;
    font-size: 17px;
    font-weight: 400;
    color: #3d3d3d;
    border: 3px solid #a5a8ab;
    border-radius: 9999px;
    background: #fff;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.search-submit {
    position: absolute;
    display: block;
    width: 75px;
    height: 48px;
    bottom: 0;
    right: 0;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 0 9999px 9999px 0;
    border: 3px solid #a5a8ab;
    background: #a5a8ab;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.search-submit:hover {
    background-color: transparent;
    color: #a5a8ab;
}

.user-area {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 110px;
}

.upload-work {
    margin-right: 15px;
    vertical-align: middle;
}

.upload-work:before {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 5px;
}

.shopping-beg {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    line-height: 50px;
    text-align: center;
}

.shopping-beg:hover {
    border-color: #3d3d3d;
}

.shopping-beg:before {
    position: relative;
    display: block;
    font-size: 23px;
    line-height: 48px !important;
    color: #a5a8ab;
}

.shopping-beg:hover:before {
    color: #3d3d3d;
}

[data-number]:after {
    position: absolute;
    display: block;
    content: attr(data-number);
    top: 0;
    left: 90%;
    width: auto;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    letter-spacing: -0.01em;
    border-radius: 9px;
    background: #f2772d;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    padding: 15px 22px;
    border: 1px solid #a5a8ab;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 400;
    color: #a5a8ab;
    letter-spacing: -0.025em;
    text-align: center;
}

.button:hover,
.button.hover {
    border-color: #3d3d3d;
    color: #3d3d3d;
}

.button.hover:hover {
    background: #3d3d3d;
    color: #fff;
}

.button:before {
    color: #a5a8ab;
}

.button.hover:before {
    color: #3d3d3d;
}

.button.hover:hover:before {
    color: #fff;
}

.sign-in {
    vertical-align: middle;
}

.user {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

.user-image {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 9999px;
    background-size: cover;
    background-position: center center;
    background-color: #52c4d8;
    cursor: pointer;
}

.user-dropdown {
    z-index: 999;
    position: absolute;
    display: block;
    top: 100%;
    left: 50%;
    min-width: 250px;
    border: 1px solid #dbdbdb;
    border-radius: 6px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
    background: #fff;
    line-height: 45px;
    white-space: nowrap;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.user:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    -webkit-transform: translate3d(-50%, 14px, 0);
    -ms-transform: translate3d(-50%, 14px, 0);
    -o-transform: translate3d(-50%, 14px, 0);
    transform: translate3d(-50%, 14px, 0);
}

.user-dropdown:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 20px;
    bottom: 100%;
    left: 0;
    right: 0;
}

.user-dropdown:after {
    position: absolute;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    bottom: 97%;
    left: 50%;
    background: #fff;
    border-left: 1px solid #dbdbdb;
    border-top: 1px solid #dbdbdb;
    opacity: 0;

    -webkit-transform: rotate(45deg) translate(-50%, 0);
    -ms-transform: rotate(45deg) translate(-50%, 0);
    -o-transform: rotate(45deg) translate(-50%, 0);
    transform: rotate(45deg) translate(-50%, 0);
}

.user:hover .user-dropdown:after {
    bottom: 98%;
    opacity: 1;
}

.user-dropdown a {
    position: relative;
    display: block;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #757575;
    border-bottom: 1px solid #dfdfdf;
}

.user-dropdown a:last-child {
    border-bottom: 0;
}

.user-dropdown a:hover {
    color: #ff6e42;
}

.user-name {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 400;
    color: #a5a8ab;
    line-height: 100%;
    letter-spacing: -0.025em;
    cursor: pointer;
}

.user:hover .user-name {
    color: #3d3d3d;
}

.main-nav {
    position: relative;
    display: block;
    clear: both;
    min-height: 55px;
    line-height: 55px;
    background: #3d3d3d;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.categories {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.categories-toggle {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 55px;
    cursor: pointer;
    background: transparent;
}

.categories.active .categories-toggle {
    background: #fff;
}

.categories-toggle:before {
    position: absolute;
    display: block;
    content: '';
    width: 23px;
    height: 2px;
    top: 50%;
    left: 50%;
    background: #fff;
    box-shadow: 0 -7px 0 0 #fff,
    0 7px 0 0 #fff;

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.categories.active .categories-toggle:before {
    background: #3d3d3d;
    box-shadow: 0 -7px 0 0 #3d3d3d,
    0 7px 0 0 #3d3d3d;
}

.categories > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 25px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 100%;
    letter-spacing: -0.01em;
}

.categories > a:hover {
    color: #1aa4dd;
}

.categories-dropdown {
    z-index: 998;
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    width: 250px;
    margin: 0 -1px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-top: 0;
    text-align: left;
}

.categories.active .categories-dropdown {
    display: block;
}

.categories-dropdown > * {
    display: block;
    height: 52px;
    font-size: 16px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -0.01em;
    line-height: 53px;
    cursor: pointer;
    border-bottom: 1px solid #d5d5d5;
}

.categories-dropdown > *:last-child {
    border-bottom: 0;
}

.categories-dropdown > *.active {
    background: #1aa4dd;
    color: #fff;
    border-color: #1aa4dd;
}

.categories-dropdown > .active a.menu_cat_link {
    color: #fff;
}

.categories-dropdown a.menu_cat_link {

    height: 52px;
    font-size: 16px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.categories-dropdown > a:hover {
    color: #1aa4dd;
}

.categories-dropdown > *:before {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 52px;
    margin-right: 6px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
}

.categories-dropdown > *:not(a):after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: right;
    content: '';
    width: 8px;
    height: 8px;
    top: 50%;
    right: 15px;
    border-top: 2px solid #a5a8ab;
    border-right: 2px solid #a5a8ab;

    -webkit-transform: rotate(45deg) translate(-50%);
    -ms-transform: rotate(45deg) translate(-50%);
    -o-transform: rotate(45deg) translate(-50%);
    transform: rotate(45deg) translate(-50%);
}

.categories-dropdown > div.active:after {
    border-color: #fff;
}

.category {
    position: absolute;
    display: none;
    left: 100%;
    top: 0;
    width: calc(1170px - 248px);
    max-width: calc(1170px - 248px);
    min-height: 474px;
    /*min-height: 527px;*/
    background: #fff;
    border: 6px solid #1aa4dd;
    box-shadow: 12px 14px 16px rgba(0, 0, 0, .17);
    cursor: default;
}

.categories-dropdown > div.active .category {
    display: block;
}

.sub-categories {
    position: relative;
    display: block;
    vertical-align: top;
    height: 100%;
    padding: 35px 50px;
    text-align: left;
}

.category-title {
    position: relative;
    display: block;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
    color: #3d3d3d;
    letter-spacing: -0.01em;
    line-height: 100%;
}

.category-title span {
    font-weight: 300;
    margin-left: 5px;
}

.category-columns {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 54px);
    -webkit-columns: 4;
    -moz-columns: 4;
    -o-columns: 4;
    columns: 4;
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    -o-column-gap: 100px;
    column-gap: 100px;
    -webkit-column-rule: 1px solid #c8c8c8;
    -moz-column-rule: 1px solid #c8c8c8;
    -o-column-rule: 1px solid #c8c8c8;
    column-rule: 1px solid #c8c8c8;
}

.sub-categories a {
    position: relative;
    display: block;
    float: left;
    clear: both;
    font-size: 15px;
    font-weight: 300;
    color: #3d3d3d;
    line-height: 31px;
    letter-spacing: -0.01em;

    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.sub-categories a:hover {
    color: #1aa4dd;
}

.sub-categories a:before {
    position: absolute;
    display: none;
    content: '';
    top: 50%;
    left: -20px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    background: #1aa4dd;
}

.sub-categories a:hover:before {
    display: block;
}

.sub-categories a[data-badge]:after {
    position: relative;
    display: inline-block;
    content: attr(data-badge);
    vertical-align: middle;
    top: -1px;
    padding: 3px 4px;
    margin-left: 8px;
    font-size: 7.5px;
    font-weight: 600;
    color: #fff;
    line-height: 100%;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    background: #60dc7a;
}

.sub-categories a[data-badge]:hover:after {
    background: #1aa4dd;
}

.links {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: right;
}

.links br {
    display: none;
}

.links a,
.links span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    /*line-height: 100%;*/
    letter-spacing: -0.01em;
}

.links a:hover {
    color: #1aa4dd;
}

.links .icon-headphone:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 8px 0 0;
    font-size: 16px;
    line-height: 100%;
}

.links .icon-help:before {
    position: relative;
    display: inline-block;
    content: '?';
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin: -2px 8px 0 0;
    background: #fff;
    font-family: 'proxima-nova' !important;
    font-size: 13px;
    font-weight: 700 !important;
    color: #3d3d3d;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}

/********************************************/
/* Footer
/********************************************/
.main-footer {
    position: relative;
    display: block;
    clear: both;
}

.tags {
    position: relative;
    display: block;
    min-height: 105px;
    background: #fff;
    text-align: center;
    font-size: 0;
    line-height: 105px;
}

.tags:after {
    position: relative;
    display: block;
    content: '';
    width: 100%;
    height: 3px;

    background: #fac26a;
    background: -webkit-linear-gradient(left, #fac26a 0%, #f66f54 20%, #7bd793 44%, #b89eee 100%);
    background: -o-linear-gradient(left, #fac26a 0%, #f66f54 20%, #7bd793 44%, #b89eee 100%);
    background: linear-gradient(to right, #fac26a 0%, #f66f54 20%, #7bd793 44%, #b89eee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fac26a', endColorstr='#b89eee', GradientType=1);
}

.tag {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 45px;
    font-size: 18px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -0.02em;
    cursor: default;
}

.tag-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: -2px;
    margin: 0 15px;
    width: 36px;
    height: 36px;

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.tag-safe {
    background-image: url(//www.matbuu.com/img/icons/safe.svg);
}

.tag-return {
    background-image: url(//www.matbuu.com/img/icons/return.svg);
}

.tag-experience {
    background-image: url(//www.matbuu.com/img/icons/experience.svg);
}

.tag-box {
    background-image: url(//www.matbuu.com/img/icons/box.svg);
}

.main-footer .inner {
    font-size: 0;
    padding: 60px 0;
    text-align: justify;
}

.footer-steps {
    position: relative;
    display: block;
    font-size: 0;
    text-align: center;
    margin-bottom: 50px;
}

.footer-step {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 132px;
    height: auto;
    margin: 20px 40px 0;
    padding-bottom: 38px;
    white-space: nowrap;
}

.footer-step:before {
    position: relative;
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    font-size: 66px;
    color: #a5a8ab;
    line-height: 132px;
    border: 1px solid #a5a8ab;
    border-radius: 50%;
}

.footer-step:after {
    position: absolute;
    display: block;
    top: 8px;
    right: 8px;
    content: attr(data-step);
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 300;
    color: #a5a8ab;
    line-height: 26px;
    border: 1px solid #a5a8ab;
    border-radius: 50%;
    background: #fff;
}

.footer-step:hover:before,
.footer-step:hover:after {
    color: #f8735d;
    border-color: #f8735d;
}

.footer-step-text {
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    font-size: 18px;
    font-weight: 300;
    color: #a5a8ab;
    letter-spacing: -0.02em;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.footer-step:hover .footer-step-text {
    color: #f8735d;
}

.footer-arrow {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 15px;
    margin-top: 80px;
}

.footer-arrow:before {
    position: absolute;
    display: block;
    content: '';
    width: 0%;
    height: 0px;
    top: 50%;
    left: 0;
    border-bottom: 1px dashed #a5a8ab;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.footer-arrow.in:before {
    left: 0;
    width: 100%;
}

.footer-arrow.out:before {
    left: 100%;
    width: 0%;
}

.footer-arrow:after {
    position: absolute;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    top: 50%;
    right: -3px;
    border-top: 1px solid #a5a8ab;
    border-right: 1px solid #a5a8ab;
    opacity: 0;

    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.footer-arrow.in:after {
    opacity: 1;

    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

.footer-arrow.out:after {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.footer-col {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 35px;
    line-height: 29px;
    letter-spacing: -0.02em;
    text-align: left;
}

.col-title {
    position: relative;
    display: block;
    float: left;
    clear: both;
    font-size: 18px;
    font-weight: 600;
    color: #3d3d3d;
}

.col-title ~ .col-title {
    margin-top: 29px;
}

.col-title:empty {
    height: 29px;
}

.footer-col a {
    position: relative;
    display: block;
    float: left;
    clear: both;
    font-size: 14px;
    font-weight: 300;
    color: #3d3d3d;
}

.footer-col a:after {
    position: absolute;
    display: block;
    content: '';
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 1px;
    background: #3d3d3d;
    opacity: 0;
}

.footer-col a:hover:after {
    opacity: 1;
}

.social {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 56px 42px;
    text-align: center;
    font-size: 0;
}

.social a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 51px;
    height: 51px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    text-align: center;
    line-height: 51px;
    background: transparent;
}

.social .icon-facebook {
    border-color: #3b5998;
}

.social .icon-twitter {
    border-color: #55acee;
}

.social .icon-instagram {
    border-color: #3f729b;
}

.social .icon-gplus {
    border-color: #dc4e41;
}

.social .icon-facebook:hover {
    background: #3b5998;
}

.social .icon-twitter:hover {
    background: #55acee;
}

.social .icon-instagram:hover {
    background: #3f729b;
}

.social .icon-gplus:hover {
    background: #dc4e41;
}

.social a:before {
    position: relative;
    display: block;
    font-size: 20px;
    line-height: 51px;
}

.social .icon-facebook:before {
    color: #3b5998;
}

.social .icon-twitter:before {
    color: #55acee;
}

.social .icon-instagram:before {
    color: #3f729b;
}

.social .icon-gplus:before {
    color: #dc4e41;
}

.social a:hover:before {
    color: #fff;
}

.social .google-play {
    display: block;
    width: auto;
    height: auto;
    margin: 11px;
    border-width: 0;
    border-radius: 0;
}

.google-play img {
    display: block;
    width: auto;
    height: 50px;
}

.copyright {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 300;
    color: #656565;
    text-align: center;
    line-height: 100%;
}

.copyright:before {
    position: relative;
    display: inline-block;
    top: 8px;
    font-size: 45px;
    color: #1aa4dd;
    line-height: 100%;
}

/********************************************/
/* Modal
/********************************************/
.matbuu-modal-mask {
    z-index: 9998;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.matbuu-modal-mask.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.matbuu-modal {
    z-index: 9999;
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    max-width: 560px;
    width: 100%;
    height: auto;
    padding: 70px 60px;
    text-align: center;
    border-radius: 8px;
    background: #fff;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    -webkit-transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
    -o-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
}

.matbuu-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;

    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.matbuu-modal-close {
    position: absolute;
    display: block;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.matbuu-modal-close:before,
.matbuu-modal-close:after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #a7a7a7;
    margin-top: -2px;
}

.matbuu-modal-close:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.matbuu-modal-close:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.matbuu-modal-title {
    position: relative;
    display: block;
    font-size: 24px;
    font-weight: 300;
    color: #1aa4dd;
    letter-spacing: -0.025em;
}

.matbuu-modal-small {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -0.025em;
}

.matbuu-model-content {
    position: relative;
    display: block;
    margin: 40px 0;
    font-size: 17px;
    font-weight: 300;
    color: #3d3d3d;
    letter-spacing: -0.025em;
}

.matbuu-modal a {
    display: inline-block;
    float: none;
}

.categories-dropdown .new {

    margin-right: 10px;
    font-weight: bold;
    background: #F00;
    color: #fff;
    height: 20px;
    line-height: 20px;
    padding: 0px 5px;
    margin-top: 17px;
    font-size: 13px;
    margin-left: 20px;
}

.mt-loader {
    background: url('/img/sys/loader.gif') center center no-repeat;
    clear: both;
    display: none;
}

/**
Megamenu
*/
.dropdown-icons li {
    float: left;
}

li.dropdown-item h3 {
    font-size: 14px;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 400;
}

.dropdown-item a {
    width: 135px;
    height: 165px;
    color: #6a6a6a;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    display: block;

}

.dropdown-item a:before {
    content: "";
    width: 0;
    height: 0;
}

.dropdown-item a img {
    width: 110px;
}

/**
end megamenu
*/

@media all and (max-width: 1330px) {
    .main-header {
        z-index: 2;
    }
}

@media all and (max-width: 1170px) {
    .user-dropdown {
        left: auto;
        right: 0;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .user:hover .user-dropdown {
        -webkit-transform: translate3d(0, 14px, 0);
        -ms-transform: translate3d(0, 14px, 0);
        -o-transform: translate3d(0, 14px, 0);
        transform: translate3d(0, 14px, 0);
    }

    .user-dropdown:after {
        left: 90%;
    }

    .social {
        width: 100%;
        margin: 0;
    }

    .google-play img {
        margin: 0 auto;
    }

    .category {
        width: calc(100vw - 248px);
    }
}

@media all and (max-width: 1090px) {
    .footer-arrow {
        display: none;
    }
}

@media all and (max-width: 1060px) {
    .search {
        margin-left: 35px;
    }

    .search-input {
        width: 400px;
    }
}

@media all and (max-width: 920px) {
    .search {
        display: block;
        margin: 0 -30px;
        clear: both;
    }

    .search-input {
        width: 100% !important;
        border-radius: 0;
    }

    .search-submit {
        border-radius: 0;
    }

    .logo img {
        width: 230px;
    }
}

@media all and (max-width: 880px) {
    .categories-dropdown {
        width: calc(100vw + -15px);
    }

    .categories-dropdown > * {
        position: relative;
        height: auto;
        line-height: 51px;
    }

    .categories-dropdown > *:not(a):after {
        position: absolute;
        display: block;
        top: 23px;
        right: 20px;
        -webkit-transform: rotate(135deg) translate(-50%);
        -ms-transform: rotate(135deg) translate(-50%);
        -o-transform: rotate(135deg) translate(-50%);
        transform: rotate(135deg) translate(-50%);
    }

    .category {
        position: relative;
        top: -1px;
        left: 0;
        width: 100%;
        max-width: 100%;
    }

    .dropdown-item a {
        height: 50px;
        text-align: left;
    }

    .dropdown-item a img {
        width: 25px;
        height: 25px;
        float: left;
        margin-right: 10px;

    }
}

@media all and (max-width: 800px) {
    .main-footer .inner {
        text-align: center;
    }

    .footer-col {
        width: calc(50% - 84px);
    }

    .user-area .user-name {
        display: none;
    }
}

@media all and (max-width: 640px) {
    .footer-step {
        display: block;
        margin: 20px auto;
    }

    .user-area .upload-work span {
        display: none;
    }

    .user-area .upload-work {
        padding: 15px;
        display: inline-block;
        width: 50px;
    }

    .user-area .upload-work:before {
        margin: 0;
    }
}

@media all and (max-width: 520px) {
    /* .links {
         display: inline-block;
         float: right;
         text-align: right;
     }
     .links [class^="icon-"] {
         display: none;
     }*/
    .logo img.logo-mini{
        display: block;
    }
    .logo img.logo-big{
        display: none;
    }
}

/**SEARCH Autocomlete**/
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 10px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
}

.autocomplete-selected {
    background: #d7eaf7;
    cursor: pointer;
}

.autocomplete-suggestions strong {
    font-weight: bold;

}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group {
    border-bottom: 1px solid #f7f7f7;
    color: gray;
    opacity: .7;
    filter: alpha(opacity=70);
    display: block;
    font-size: 11px;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

/**SEARCH Autocomlete**/