/*
Theme Name: TopPic Child
Theme URI: http://themes.easysite.by/toppic-overview/
Author: kotofey
Author URI: http://www.themeforest.net/user/kotofey
Description: A child theme of TopPic Theme
Template: toppic
Version: 1.5
*/

/*-----------------------------------------------------------------------------------*/
/* WRITE YOUR OWN STYLES BELOW
/*-----------------------------------------------------------------------------------*/
@font-face {
    font-family: 'MElleHK';
    src: url('fonts/MElleHK-Medium-Roman.woff2') format('woff2'),
    url('fonts/MElleHK-Medium-Roman.woff') format('woff'),
    url('fonts/MElleHK-Medium-Roman.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Tamil MN';
    src: url('fonts/TamilMN.woff2') format('woff2'),
    url('fonts/TamilMN.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

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

@font-face {
    font-family: 'Helvetica Now Micro';
    src: local('fonts/Helvetica Now Micro Regular'), local('fonts/Helvetica-Now-Micro-Regular'),
    url('fonts/HelveticaNowMicro-Regular.woff2') format('woff2'),
    url('fonts/HelveticaNowMicro-Regular.woff') format('woff'),
    url('fonts/HelveticaNowMicro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PingFang';
    src: url('fonts/PingFang-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

body.gallery-template-default .rsVisibleNearbyWrap {
    background: url("images/gallery-background.jpg") no-repeat #010101;
    background-size: contain;
}
body.gallery-template-default .rsVisibleNearbyWrap .rsContainer .rsSlide {
    background: transparent !important;
}

.main-nav li {letter-spacing: 0.2em;}
.main-nav li a {
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: 100;
    font-style: normal;
}
.main-nav li a:hover {
    font-weight: 800;
}

/*Project Main Page EN*/
.page-id-24 figure.wp-block-image {
    margin: 0px !important;
}

.page-id-24 .divider {
    border-bottom: 0px !important;
}

.page-id-24 .wp-block-column h4 {
    margin-top: 5px !important;
    color: #FFF;
}

.page-id-24 .wp-block-column h4 a{
    color: #FFF;
}

.page-id-24 .wp-block-column h4 a:hover{
    color: #5d5d5d;
}

body.page-id-24 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-24 .post-title h1:before{
    content: "";
    display: block;
    background: url(images/tri.png) no-repeat center;
    width: 0.8em;
    height: 0.8em;
    float: left;
    margin: 3px 6px 0 0;
}

body.page-id-24 .page-content {
    background-color: hsla(195, 0%, 25%, 0.6);
}


/*Project Main Page ZH*/
.page-id-72 figure.wp-block-image {
    margin: 0px !important;
}

.page-id-72 .divider {
    border-bottom: 0px !important;
}

.page-id-72 .wp-block-column h4 {
    margin-top: 5px !important;
    color: #FFF;
}

.page-id-72 .wp-block-column h4 a{
    color: #FFF;
}

.page-id-72 .wp-block-column h4 a:hover{
    color: #5d5d5d;
}

body.page-id-72 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-72 .post-title h1:before{
    content: "";
    display: block;
    background: url(images/tri.png) no-repeat center;
    width: 0.8em;
    height: 0.8em;
    float: left;
    margin: 3px 6px 0 0;
}

body.page-id-72 .page-content {
    background-color: hsla(195, 0%, 25%, 0.6);
}

/*Project Category Page*/
.page-template-template-gallery .divider {
    border-bottom: 0px !important;
}

.page-template-template-gallery .wp-block-column h4 {
    margin-top: 5px !important;
    color: #FFF;
}

body.page-template-template-gallery .content {
    background-color: hsla(195, 0%, 25%, 0.6);
}

body.page-template-template-gallery .page-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-template-template-gallery .page-title h1:before{
    content: "";
    display: block;
    background: url(images/tri.png) no-repeat center;
    width: 0.8em;
    height: 0.8em;
    float: left;
    margin: 3px 6px 0 0;
}

body.page-template-template-gallery .portfolio-title {
    width: 100%;
}


body.page-template-template-gallery .portfolio-title h2 {
    color: #FFF;
    text-transform: none;
}

.desktop-menu-wrapper {
    padding-top: 10px;
    display: none;
    position: relative;
}

.hidden-menu {
    width: 250px;
    height: 800px;
    position: absolute;
    z-index: 9999;
}

.menu-subject {
    margin-left: 10px;
    width: 30px;
    padding: 4px;
    height: 20px;
    text-align: left;
}
.menu-subject h2 {
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: 200;
    font-style: normal;
    font-size: 14pt;
    color: #FFF;
    text-transform: uppercase;
}

.customized-logo{
    position: relative;
    width: 250px !important;
    height: 200px;
    display: block;
    z-index: 99999;
}

.customized-logo .logo-light {
    display: block;
}

/* Contact us page*/
body.page-id-48 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-48 .content-inner-wrapper {
    color: #FFF;
}

body.page-id-48 .content-inner-wrapper .inner-content iframe {
    margin-bottom: 20px;
}

body.page-id-48 .page-content {
    background-color: hsla(41, 25%, 41%, 1);
}

body.page-id-48 .page-content .divider{
    border-bottom: 2px solid #FFF;
}

body.page-id-48 .inner-content p label{
    color: #FFF;
}

body.page-id-48 .inner-content form input[type=submit]{
    background: #FFF;
    border: #FFF;
    color: #81714e;
    font-size: 1em
}

/* Contact us page Chinese*/
body.page-id-68 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-68 .content-inner-wrapper {
    color: #FFF;
}

body.page-id-68 .content-inner-wrapper .inner-content iframe {
    margin-bottom: 20px;
}

body.page-id-68 .page-content {
    background-color: hsla(41, 25%, 41%, 1);
}

body.page-id-68 .page-content .divider{
    border-bottom: 2px solid #FFF;
}

body.page-id-68 .inner-content p label{
    color: #FFF;
}

body.page-id-68 .inner-content form input[type=submit]{
    background: #FFF;
    border: #FFF;
    color: #81714e;
    font-size: 1em
}

/* About us page*/
body.page-id-50 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-50 .page-content h2 {
    color: #FFF;
    margin-bottom: 10px;
    font-weight: bold;
}

body.page-id-50 .page-content h4 {
    color: #FFF;
    padding: 0 0 20px 0;
    margin: 0;
    line-height: 100%;
}

body.page-id-50 .page-content .wp-block-columns {
    margin-top: 40px;
}

body.page-id-50 .page-content .wp-block-column figure {
    margin: 0;
}

body.page-id-50 .page-content {
    background-color: hsla(41, 25%, 41%, 1);
    color: #FFF;
}

body.page-id-50 .page-content .divider{
    border-bottom: 2px solid #FFF;
}

body.page-id-50 .inner-content p label{
    color: #FFF;
}

body.page-id-50 .professional-container {
    padding: 0 50px;
}

/* About us page - Chinese*/
body.page-id-70 .post-title h1{
    color: #FFF;
    font-family: 'Helvetica Now Micro', 'PingFang';
    font-weight: bold;
    font-style: normal;
}

body.page-id-70 .page-content h2 {
    color: #FFF;
    margin-bottom: 10px;
    font-weight: bold;
}

body.page-id-70 .page-content h4 {
    color: #FFF;
    padding: 0 0 20px 0;
    margin: 0;
    line-height: 100%;
}

body.page-id-70 .page-content .wp-block-columns {
    margin-top: 40px;
}

body.page-id-70 .page-content .wp-block-column figure {
    margin: 0;
}

body.page-id-70 .page-content {
    background-color: hsla(41, 25%, 41%, 1);
    color: #FFF;
}

body.page-id-70 .page-content .divider{
    border-bottom: 2px solid #FFF;
}

body.page-id-70 .inner-content p {
    line-height: 250%;
}

body.page-id-70 .inner-content p label{
    color: #FFF;
}

body.page-id-70 .professional-container {
    padding: 0 50px;
}

.back-button {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    z-index: 99999;
    top: 50px;
    right: 5%;
}

.rsSlideCount {
    display: none !important;
}

.rsContentImgWrapper {
    background: #010101;
}

.designermark {
    position: absolute;
    display: block;
    z-index: 99999999999999;
    text-align: right;
    width: 100%;
    color: #FFF;
    font-size: 10px;
}

.desktop-menu-wrapper .lang-item {display: block; float: left; margin-top: 50px; z-index: 99999}
.desktop-menu-wrapper .lang-item-2 {width: 30%}
.desktop-menu-wrapper .lang-item-5 {width: 70%}

body.page-template-template-gallery .portfolio-title {width: 100%; max-width: 100%;}

.post-title h1 {font-size: 33px !important;}
.page-title h1 {font-size: 33px !important;}

body.page-id-48 .page-content .inner-content p {font-size: 14px;}
.wpcf7 p {font-size: 14px;}
body.page-id-50 .page-content .inner-content p {font-size: 14px;}
body.page-id-70 .page-content .inner-content p {font-size: 15px;}
body.page-id-68 .page-content .inner-content p {font-size: 14px;}
.wpcf7 p {font-size: 14px;}

.previous-image {
    z-index: 99999999;
    position: absolute;
    left: 16%;
    top: 50%;
    cursor: pointer;
}
.next-image {
    z-index: 99999999;
    position: absolute;
    width: 50px;
    right: 16%;
    top: 50%;
    cursor: pointer;
}

.device-reminder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #80724f;
    color: #fff;
    text-align: center;
    z-index: 999999;
}

.device-reminder .wrap {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    left: 0;
    right: 0;
}

.rotate-img {
    width: 120px;
    margin-bottom: 5px;
    animation: rotate 1.5s infinite;
    -webkit-animation: rotate 1.5s infinite;
}
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg) }
    to { -webkit-transform: rotate(90deg) }
}

.device-reminder h6 {
    font-size: 1.4rem;
    padding: 0 10px;
    color: #FFF;
}

@media screen and (orientation:portrait) {
    .device-reminder {display: block}
}
@media screen and (orientation:landscape) {
    .device-reminder {display: none}
}

@media only screen and (min-width: 0px) {
    body.page-id-70 .professional-container .mobile {display: flex;}
    body.page-id-70 .professional-container .desktop {display: none;}

    body.page-id-50 .professional-container .mobile {display: flex;}
    body.page-id-50 .professional-container .desktop {display: none;}

    .back-button {top:90px;}
}
@media only screen and (min-width: 766) {
    body.page-id-70 .professional-container .mobile {display: flex;}
    body.page-id-70 .professional-container .desktop {display: none;}

    body.page-id-50 .professional-container .mobile {display: flex;}
    body.page-id-50 .professional-container .desktop {display: none;}

    .back-button {top:90px;}
}
@media only screen and (min-width: 768px) {
    body.page-id-70 .professional-container .mobile {display: flex;}
    body.page-id-70 .professional-container .desktop {display: none;}

    body.page-id-50 .professional-container .mobile {display: flex;}
    body.page-id-50 .professional-container .desktop {display: none;}

    .back-button {top:90px;}
}
@media only screen and (min-width: 1024px) {
    body.page-id-70 .professional-container .mobile {display: none;}
    body.page-id-70 .professional-container .desktop {display: flex;}

    body.page-id-50 .professional-container .mobile {display: none;}
    body.page-id-50 .professional-container .desktop {display: flex;}
}
@media only screen and (min-width: 1280px) {
    body.page-id-70 .professional-container .mobile {display: none;}
    body.page-id-70 .professional-container .desktop {display: flex;}

    body.page-id-50 .professional-container .mobile {display: none;}
    body.page-id-50 .professional-container .desktop {display: flex;}
}
@media only screen and (min-width: 1366px) {
    body.page-id-70 .professional-container .mobile {display: none;}
    body.page-id-70 .professional-container .desktop {display: flex;}

    body.page-id-50 .professional-container .mobile {display: none;}
    body.page-id-50 .professional-container .desktop {display: flex;}
}
@media only screen and (min-width: 1440px) {
    body.page-id-70 .professional-container .mobile {display: none;}
    body.page-id-70 .professional-container .desktop {display: flex;}

    body.page-id-50 .professional-container .mobile {display: none;}
    body.page-id-50 .professional-container .desktop {display: flex;}
}