/* Theme Name: Arki Design Studio Theme URI: https://www.arkidesign.com.au/dev Author: FIVE - Raf Segat Author URI: https://www.arkidesign.com.au/dev Template: five Description: Child theme of FIVE Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: wordpress Text Domain: five */ /* * General */ body { background-color: white; color: #676767; background: #000000; font: 300 16px/22px 'Helvetica', Helvetica, Arial, sans-serif; letter-spacing: .5px; } body { display: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', Helvetica, Arial, sans-serif; font-weight: 300; } h1, h2 { margin: .5em 0 0.4em; font-weight: bold; } h3 { margin: 0 0 .8em 0; font-weight: bold; font-size: 15px; } h4, h5, h6 { margin: 1.2em 0 1em; } h5 { font-weight: normal; font-size: 13px; } h4 { font-weight: normal; } h6 { font-weight: normal; line-height: 1.25em; margin: .8em 0; text-transform: uppercase; } a, .primary { color: #FFFFFF;; transition: all 0.05s ease; } a.secondary { color: #676767; } a:hover, a:focus { color: #FFFFFF; text-decoration: underline !important; } a, a:hover, a:focus, a:active, a:focus:hover { text-decoration: none; } p, ul, ol { margin-bottom: 10px; } /* .content p { font-size: 16px; letter-spacing: 1px; line-height: 20px; } */ img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .mobile-only { display: none; } .inline { display: inline; } .left { float: left; } .right { float: right; } /* body{ display:none } */ .btn { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; -moz-transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; -ms-transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; -o-transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; } .btn:hover { transform: translate3d(0, -4px, 0); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .15); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, .15); -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, .15); -o-box-shadow: 0 3px 3px rgba(0, 0, 0, .15); box-shadow: 0 3px 3px rgba(0, 0, 0, .15); } .bg-cover { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .img-responsive { display: block; width: 100% \9; max-width: 100%; height: auto; } .img-center { display: block; margin-left: auto; margin-right: auto; } /*=== Image preload */ .preload-image{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); } .preload-image.loaded { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .preload-image span.image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } img.load-animation { display: block; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 20%, 0); -moz-transform: translate3d(0, 20%, 0); -ms-transform: translate3d(0, 20%, 0); -o-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); -webkit-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); } img.loaded { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*=== Body */ body > * { -webkit-transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); } body.menu-open > * { -webkit-transform: translate3d(260px, 0, 0); -moz-transform: translate3d(260px, 0, 0); -ms-transform: translate3d(260px, 0, 0); -o-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } /*==== Slick */ .slick-arrow { position: absolute; right: 0; cursor: pointer; top: 87px; width: 40px; height: 40px; background: #FFFFFF; color: #000000; z-index: 99999; text-align: center; line-height: 40px !important; } .slick-arrow.slick-prev { right: 40px; } .slick-arrow:hover { background: #333333; color: #FFFFFF; } /*==== Header */ .sidebar { width: 80px; background: #000000; height: 100vh; position: fixed; left: 0; top: 0; bottom: 0; } .sidebar .top-sidebar { background: #000000; padding: 20px 13px; height: 128px; } .main-menu { position: fixed; width: 340px; background: #FFFFFF; height: 100%; left: 0; top: 0; min-height: 800px; transform: initial !important; -webkit-transform: initial !important; -moz-transform: initial !important; -o-transform: initial !important; -ms-transform: initial !important; } body.menu-open .main-menu ul#menu-main-menu { top: 0; opacity: 1; visibility: visible; z-index: 99999; } body.menu-open .main-menu .close-menu { opacity: 1; visibility: visible; } .main-menu ul#menu-main-menu li a { color: #FFFFFF; } .main-menu ul#menu-main-menu li a:hover { text-decoration: underline; } .main-menu .close-menu { color: #FFFFFF; position: absolute; top: 20px; opacity: 0; visibility: hidden; right: 20px; cursor: pointer; z-index: 999999; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .main-menu ul#menu-main-menu { list-style: none; padding: 0; margin: 0; margin-top: 50px; } .main-menu ul#menu-main-menu li { padding-left: 30px; padding-bottom: 15px; } .main-menu ul#menu-main-menu li a { color: #000000; } .bottom-sidebar .back-arrow { text-align: center; width: 100%; color: #FFFFFF; background: #1a1a1a; cursor: pointer; } .bottom-sidebar .back-arrow a { color: #FFFFFF; display: block; padding: 30px 0; text-decoration: none; } .bottom-sidebar .back-arrow a:hover { text-decoration: none !important; } .bottom-sidebar .back-arrow:hover span { font-weight: bold; text-decoration: none !important; } .bottom-sidebar ul.social-icons { list-style: none; list-style: none; margin: 0; padding: 0 32px; position: absolute; bottom: 30px; font-size: 16px; } .bottom-sidebar ul.social-icons li { padding-bottom: 15px; } .bottom-sidebar ul.social-icons li a { color: #FFFFFF; } .bottom-sidebar ul.social-icons li a i { transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } .bottom-sidebar ul.social-icons li a i:hover { transform: scale(.8); } /*==== Copyright Bar */ .footer_copyright a { color: inherit; } /*====== Menu Mobile */ #mobile-menu-btn { float: left; width: 32px; height: 21px; cursor: pointer; position: relative; margin-bottom: 20px; } #mobile-menu-btn .bar { position: absolute; left: 12px; width: 24px; height: 2px; background-color: #ffffff; } #mobile-menu-btn .bar-1 { transform-origin: top right; top: 0; } #mobile-menu-btn .bar-2 { top: 10px; } #mobile-menu-btn .bar-3 { top: 20px; transform-origin: bottom right; } #mobile-menu-btn .bar { -webkit-transition: transform .3s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .3s linear, visibility .3s linear; -moz-transition: transform .3s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .3s linear, visibility .3s linear; -ms-transition: transform .3s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .3s linear, visibility .3s linear; -o-transition: transform .3s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .3s linear, visibility .3s linear; transition: transform .3s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .3s linear, visibility .3s linear; } #mobile-menu-btn .bar-1, #mobile-menu-btn .bar-3 { transition-delay: .10s } #mobile-menu-btn .bar-2 { transition-delay: .25s } body.menu-open #mobile-menu-btn .bar-1 { transition-delay: .35s; -webkit-transform: rotate(-45deg) translate3d(-6px, -1px, 0); -moz-transform: rotate(-45deg) translate3d(-6px, -1px, 0); -ms-transform: rotate(-45deg) translate3d(-6px, -1px, 0); -o-transform: rotate(-45deg) translate3d(-6px, -1px, 0); transform: rotate(-45deg) translate3d(-6px, -1px, 0); } body.menu-open #mobile-menu-btn .bar-2 { visibility: hidden; opacity: 0; transition-delay: .20s; -webkit-transform: translate3d(-15px, 0, 0); -moz-transform: translate3d(-15px, 0, 0); -ms-transform: translate3d(-15px, 0, 0); -o-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } body.menu-open #mobile-menu-btn .bar-3 { transition-delay: .35s; -webkit-transform: rotate(45deg) translate3d(-3px, 3px, 0); -moz-transform: rotate(45deg) translate3d(-3px, 3px, 0); -ms-transform: rotate(45deg) translate3d(-3px, 3px, 0); -o-transform: rotate(45deg) translate3d(-3px, 3px, 0); transform: rotate(45deg) translate3d(-3px, 3px, 0); } /*=== COntent */ #content { margin-left: 80px; position: relative; min-height: 100vh; background: #000000; } /*==== header */ .header { background: #000000; color: #FFFFFF; height: 128px; padding: 25px 0; position: absolute; left: 0; right: 0; width: 100%; z-index: 1; font-size: 13px; } .header .secondary-info h3.space { } .header .primary-info p { font-size: 13px; } .header .media a { font-size: 13px; position: relative; text-decoration: none; } .header .media a:hover {text-decoration: none !important; } .header .media a:after { content: ''; position: absolute; height: 1px; background: #FFFFFF; left: 0; bottom: -2px; width: 100%; } /*==== Homepage */ .slider { margin: 0; position: relative; } .slider .container-fluid .col-lg-12 { padding: 0 !important; } .slider ul.slider-list { width: 100%; height: 100vh; margin: 0 0 -1px 0; padding: 0; } .slider ul.slider-list li, .slider ul.slider-list .slick-list, .slider ul.slider-list .slick-track { width: 100%; height: 100% } .slider ul.slider-list li { background-repeat: no-repeat; background-size: cover; outline: 0; } .slider .slick-arrow { top: 0; } /*===== Form */ .wpcf7-form { width: 400px; } .wpcf7-form .wpcf7-form-control { background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; line-height: 35px; height: 35px; outline: 0; } .wpcf7-form .wpcf7-form-control.wpcf7-textarea { height: 100px; } .wpcf7-submit { outline: 0; width: 100%; padding: 0; line-height: 25px; text-transform: uppercase; letter-spacing: 1px; } .wpcf7-form input::-webkit-input-placeholder { color: #FFFFFF; } .wpcf7-form input::-moz-placeholder { color: #FFFFFF; } .wpcf7-form input:-ms-input-placeholder { color: #FFFFFF; } .wpcf7-form input:-moz-placeholder { color: #FFFFFF; } .wpcf7-form textarea::-webkit-input-placeholder { color: #FFFFFF; } .wpcf7-form textarea::-moz-placeholder { color: #FFFFFF; } .wpcf7-form textarea:-ms-input-placeholder { color: #FFFFFF; } .wpcf7-form textarea:-moz-placeholder { color: #FFFFFF; } .wpcf7-mail-sent-ok { display: block !important; border: none !important; margin: 0 !important; padding: 0 !important; margin-bottom: 50px !important; margin-top: -10px !important; } .form-group { position: relative; } div.wpcf7 .ajax-loader { position: absolute; top: 10px; left: 10px; } /*===== Portfolio */ ul.portfolio-list { margin: 0 -15px; padding: 0; font-size: 0; background: #000000; padding-bottom: 7px; } ul.portfolio-list li { width: 33.333333333%; overflow: hidden; display: inline-block; font-size: 14px; margin: 0; position: relative; float: left; } ul.portfolio-list li a { display:block; width: 100%; height: 100%; } ul.portfolio-list li a img { width: 100%; } ul.portfolio-list li .caption { width: 100%; z-index: 999; padding: 10px 15px; letter-spacing: 1px; position: absolute; bottom: 0; left: 0; right: 0; color: #FFFFFF; background: hsla(0, 0%, 0%, 0.60); font-weight: bold; opacity: 0; visibility: hidden; } ul.portfolio-list li a:hover .caption { opacity: 1; visibility: visible; } .portfolio-archive.category { padding-top: 128px; } .content-collapse { background: #000000; max-height: 98px; overflow: hidden; position: relative; cursor: pointer; } .content-collapse.open { max-height: 100%; padding-bottom: 15px; } .content-collapse .lnr { position: absolute; right: 2px; bottom: 2px; color: #FFFFFF; font-size: 11px; font-weight: bold; transition: all .5s ease; } .content-collapse:hover .lnr.lnr-chevron-down { bottom: -1px; } .content-collapse .lnr.lnr-chevron-up { display: none; } .content-collapse .lnr.lnr-chevron-down { display: block; } .content-collapse.open .lnr.lnr-chevron-up { display: block; } .content-collapse.open .lnr.lnr-chevron-down { display: none; } /*===== Gallery Single Portfolio */ .gallery { padding-top: 0; height: 100vh; position: relative; } .gallery ul.gallery-slider-list { background: #1a1a1a; margin: 0 -15px; padding: 0; list-style: none; height: 100%; } .gallery ul.gallery-slider-list li { outline: 0; } .gallery ul.gallery-slider-list li img { object-fit: contain; padding-top: 128px; display: block; margin: 0 auto; height: 100vh; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: transform .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); } .gallery ul.gallery-slider-list li img.loaded { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .gallery .container-fluid, .gallery .row, .gallery .col-lg-12, .gallery .slick-track, .gallery .slick-list { height: 100%; } #lazyload {padding-top: 40%; position: absolute; width: 100%; z-index: -1; left: 0; right: 0; top: 0; } /*===== ABout Us */ .about-us { min-height: 100vh; } .about-us .header { padding-left: 30px; } .about-us .row { background: #1a1a1a; } .about-us .content { padding: 140px 30px 30px 15px; background: #1a1a1a; color: #FFFFFF; } .about-us .images { margin: 0 -15px; } .about-us .images img { width: 100%; } .about-us .images h4 { margin: 7px 0 0 0; font-size: 14px; color: #FFFFFF; } .about-us .images p { color: #FFFFFF; font-size: 12px; } /*===== Single News */ .single-news { min-height: 100vh; background: #1a1a1a; } .single-news .header { padding-left: 30px; position: relative; height:auto; } .single-news .row { background: #1a1a1a; } .single-news .content { background: #1a1a1a; color: #FFFFFF; /*padding: 140px 30px 30px 15px;*/ padding: 30px 30px 30px 15px; } @media (max-width:767px) { .single-news .content { padding: 30px 0; } } .single-news .images { margin: 0 -15px; } .single-news .images img { width: 100%; } .single-news .content img { object-fit: contain; height: auto; } /*=== 404 Page */ .page404-content { padding: 0 15px; } .page404-content .content { padding-top: 150px; color: white; } /*=== Suburbs Template */ .page-template-template-suburbs .about-us .images img { object-fit: cover; } .archive-post-item-image-wrapper img { display: block; width: 100%; height: auto; } .archive-post-item-title { font-size: 28px; margin: 0; } .archive-post-item-title-wrapper { padding: 20px 0; } .archive-post-item-wrapper:not(:last-child) { margin-bottom: 50px; } @media (max-width: 500px) { .archive-post-item-title { font-size: 20px; } }