/*
Theme Name: Retail Concept
Theme URI: https://www.retailconcept.com.hk/
Author: Philip
Author URI: https://wordpress.org/
Description: Built base on Twenty Twenty-Two.
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: retailconcept
Tags: rc

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

html,body{
    position:relative;
    overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none;
  }
  
/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

/*
 * Font style
 */

@import url("https://p.typekit.net/p.css?s=1&k=fpz0zbb&ht=tk&f=10875.32265&a=10270601&app=typekit&e=css");

@font-face {
font-family:"din-condensed";
src:url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

@font-face {
font-family:"din-condensed";
src:url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;
}

body {
    font-family:"din-condensed";
    font-size: 13px;
    line-height: 1.7em;
    font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
    -webkit-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

i{
    -webkit-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

/*
 * Logo
 */

header{
    position: fixed;
    width: 100%;
    padding: 0;
    white-space: nowrap;
    z-index: 999;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
 }

#logobar{
    display: inline-block;
    width: 50%;
}

#logobar a{
    margin-left: 1.5vw;
}

#label{
    width: 80px;
    vertical-align: middle;
}

#rcltd{
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.3em;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/*
 * locat
 */

 #locatto{
    display: inline-block;
    width: 50%;
    text-align: right;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.1865em;
    vertical-align: middle;
    }

#locatto a{
    margin-left: 2%;
}

#locatto span{
    margin-right: 2.8vw;
}

#locatto_mobile{display: none;}

.desktopto, .mobileto{
    width: 100%;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}
.mobileto{
    display: none;
    background-color: #fff;
}

@media only screen and (max-width: 728px) {
    .desktopto{display: none;}
    .mobileto{display: block;}
    #locatto{display: none;}
    #mobile_close{display: none;}
    #locatto_mobile{
        display: inline-block;
        width: 50%;
        text-align: right;
        font-weight: 300;
        vertical-align: middle;
    }
    #locatto_mobile i{
        margin-right: 4vw;
        font-size: 2em;
        line-height: 1em;
    }
    #mobile_list{
        display: none;
        position: absolute;
        right: 0;
        width: 30vw;
        text-align: right;
        background-color: rgba(255,255,255,1);
    }
    #mobile_list a{
        margin-right: 3vw;
        line-height: 4em;
        letter-spacing: 0.25em;
    }
    #mobile_list .line{
        margin: 0 1em;
        height: 1px;
        border-bottom: 1px solid #000;
    }
}

/*
 * video
 */

main{
    padding: 0;
    margin: 0;
}

.swiper{
    line-height: 0em;
    height: auto;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    display: none;
}

.vid-container{
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-height: 100vh;
}

.videos{
    width: 100%;
    height: 100%;
}

.vid-control{
    position: absolute;
    bottom: 3%;
    right: 2%;
}

.vid-control i{
    margin: 5px 0 0;
    border: 0;
    color: #fff;
    cursor: pointer;
    width: 26px;
    text-align: center;
    line-height: 22px;
    filter: drop-shadow(0 0 0.3em rgba(25,25,25, 0.75));
}

.vid-control i.pp{
    font-size: 0.8em;
}

.vid-control i.vm{
    font-size: 1em;
}

.seemore{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: calc(100% - 5.5em);
    width: 7em;
    height: 2em;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.05em;
    color: #000;
    background-color: #f3f31f;
    text-decoration: underline;
    text-align: center;
    z-index: 5;
    cursor: pointer;
}

.desktop .scroll-down{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 2%;
    width: 5em;
    font-size: 3em;
    color: rgba(255,255,255,1);
    text-align: center;
    z-index: 200;
    animation-name: godown;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 0 0.3em rgba(25,25,25, 0.75));
}

.ourteam{
    display: block;
    width: 100%;
}

.swiper.mobile{display: none;}

@media only screen and (max-width: 728px) {
    .swiper.desktop{display: none;}
    .swiper.mobile{
        display: block;
    }
}

.mobile_cover{
    display: block;
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-position: center;
    background-size: cover;
}

.mobile_cover.sc{
    background-image: url('https://www.retailconcept.com.hk/credential/showcase2021/Showcase2021-cover.jpg');
}

.mobile_cover.vi{
    background-image: url('https://www.retailconcept.com.hk/vi/cover-image.jpg');
}

.mobile_cover img{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 22%;
    width: 30%;
    z-index: 300;
}

.mobile_cover .gosc{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mobile_cover .seemore_m{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 15%;
    width: 30%;
    height: 2em;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.05em;
    color: #000;
    background-color: #f3f31f;
    text-decoration: underline;
}

.mobile .scroll-down{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 2%;
    width: 100%;
    font-size: 3em;
    color: rgba(255,255,255,1);
    text-align: center;
    z-index: 200;
    animation-name: godown;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 0 0.3em rgba(25,25,25, 0.75));
}

@keyframes godown {
    0%   {bottom: 2%;color: rgba(255,255,255,1);}
    100%   {bottom: 0%;color: rgba(255,255,255,0.0);}
  }

#controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 300;
}
#controls button {
    margin: 5px 0 0;
    border: 0;
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
    font: .8em FontAwesome;
    cursor: pointer;
    text-align: center;
    line-height: 22px;
}
.play::before {
    content: "\f04b";
    font-size: .8em;
}
.pause::before {
    content: "\f04c";
    font-size: .8em;
}
.volumeOn::before {
    content: "\f028";
}
.volumeOff::before {
    content: "\f026";
}

/*
 * credential
 */

.credential{
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2.5vw;
    margin-left: 2.5vw;
    line-height: 0px;
}

.grid-item{
    width: 30%;
    margin-bottom: 2.5vw;
    margin-right: 2.5vw;
}
@media only screen and (max-width: 728px) {
    .credential{
        margin-top: 3vw;
        margin-left: 3vw;
    }
    .grid-item{
        width: 45.5%;
        margin-bottom: 3vw;
        margin-right: 3vw;
    }
}

.grid-item img{
    width: 100%;
    height: 100%;
}

.grid-item .client-name{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.6);
    opacity: 0;
    transition: all .3s cubic-bezier(0,0,.58,1);
}

.grid-item a:hover .client-name{
    opacity: 1;
}

.client-name table{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1vw;
    text-align: center;
    font-size: 1.8vw;
    font-weight: 300;
    letter-spacing: 0;
    color: #fff;
}

.client-name table td{
    line-height: 1.2em;
}
@media only screen and (max-width: 728px) {
    .client-name table{
        font-size: 3vw;
    }
}
@media only screen and (max-width: 448px) {
    .client-name table{
        font-size: 4vw;
    }
}
  
/*
 * contact
 */
.contact{
    display: block;
    margin: 0 auto;
    padding-bottom: 1.17em;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: #e6942f;
}

.contact a{
    color: #fff;
}

.contact a .contact_link:hover{
    opacity: 0.5;
}

.contact_body{
    padding: 15px;
    margin: 0 auto;
}

.contact_body i{
    padding: 10px 15px;
    font-size: 1.3em;
    border-bottom: 1.5px solid #fff ;
}

.contact_body .mail{
    width: 180px;
    margin: 0 auto;
}

.contact_body .phone{
    width: 130px;
    margin: 0 auto;
}

.contact_body .location{
    width: 380px;
    margin: 0 auto;
}

.contact_link div{
    padding: 10px 15px;
    line-height: 1.3em;
    letter-spacing: 0.05em;
}

.contact_link div.how{
    padding-bottom: 0;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 400;
}

.contact_link div.methods{
    padding-top: 0;
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: 300;
}

@media only screen and (max-width: 650px) {
    .contact_link div.how{
        font-size: 1.1em;
    }
    .contact_link div.methods{
        font-size: 1.3em;
    }
    .contact_body .mail, .contact_body .phone, .contact_body .location{
        width: 95%;
    }
}

/*
 * gototop
 */

 .gototop a{
    display: none;
    position: fixed;
    right: 3%;
    bottom: 3%;
    padding: 9px 11.5px;
    font-size: 1.5em;
    line-height: 0;
    color: #404040;
    z-index: 999;
    border: 1px solid rgba(64,64,64,.7);
}

/*
 * footer
 */

footer{
    padding-top: 2em;
    padding-bottom: 2em;
}

#footer{
    color: #404040;
    margin: 20px;
    text-align: left;  
}

.copyright{
    font-size: 1.8em;
    font-weight: 300;
}

@media only screen and (max-width: 650px) {
    .copyright{
        font-size: 1em;
        font-weight: 300;
    };
}