/***

	KLEN - Creative Portfolio Theme
	Author : Soon Labs
	Copyright © 2019
	
***/

/***

    CSS INFO :
    
    0.0 - IMPORT
    1.0 - GENERAL
    2.0 - PRELOADER 
    3.0 - HEADER
    4.0 - SLIDER
    5.0 - PAGE HEAD 
    6.0 - MASONRY
    7.0 - ABOUT
    8.0 - CONTACT
    9.0 - WORK DETAIL
    10.0 - FOOTER
    
***/

/** 0.0 IMPORT **/

@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900");

/** 1.0 GENERAL **/

html, body {  margin:0; padding:0;  width:100%; height:100%; font-family: 'Poppins', sans-serif !important; box-sizing: border-box; background-color:#222222; }
html { overflow-x: hidden; overflow-y: scroll; }

.owl-stage-outer { width:100%; height:100%; }
.owl-item { width:100%; height:100%; }
.owl-stage { width:100%; height:100%; }

.no-padding { padding:0px 0px !important; }
.no-padding-top { margin-top:60px; }

.small-carousel { padding:150px 200px; }

.owl-stage { -webkit-transition: all 500ms cubic-bezier(1.000, 0.005, 0.355, 1.000); -moz-transition: all 500ms cubic-bezier(1.000, 0.005, 0.355, 1.000); -o-transition: all 500ms cubic-bezier(1.000, 0.005, 0.355, 1.000); transition: all 500ms cubic-bezier(1.000, 0.005, 0.355, 1.000); }

main { position:relative; width:100%; height:100%; display:block; top:200px; opacity:0; }
a:hover { text-decoration: none !important; }

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
  }

.animeasing { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }

.white { color:#FFFFFF; }
.black { color:#000000; }

.whiteBack { background-color:#FFFFFF; }
.blackBack { background-color:#000000; }

.shadow { -webkit-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); -moz-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); }

.head-sticky { position:fixed !important; top:60px !important; transform: none !important; padding:20px 0px; z-index:990; background-color:#000000; margin:auto; -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.04); -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.04); box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.04); }
.head-sticky h1 { font-size:25px !important; }
.head-sticky p { font-size:12px !important; }

.button--winona { overflow: hidden; padding: 0;-webkit-transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--winona::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; color: #ffffff; -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); }
.button--winona > span { display: block; color:#FFFFFF; }
.button--winona::after,
.button--winona > span { padding: 1em 2em; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--winona:hover { cursor:pointer; }
.button--winona:hover::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.button--winona:hover > span { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); }

.plus { position:absolute; color:#FF0000; z-index:999; top:0px; left:0px; z-index:999; pointer-events: none; background-color:#000000; padding:20px; border-radius: 50%; opacity:0; }
.aplus { opacity:1; }

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(60px);
    }
}

svg #wheel {
    animation: scroll ease 2s infinite;
}

/** 2.0 PRELOADER **/

.loading { position:fixed; width:100%; height:100%; background-color:#000000; z-index:999; }
.loading-wrapper { text-align: center; top:50%; position:relative; transform:translateY(-50%); }
.loading-wrapper object { width:60px; height:60px; }

.sub-loading { position:fixed; width:100%; height:100%; z-index:999; display:none; opacity:0; background:rgba(0,0,0,.2)}
.sub-loading-wrapper { position:relative; text-align: center; top:50%; position:relative; transform:translateY(-50%); }
.sub-loading-wrapper object { width:60px; height:60px; }

/** 3.0 HEADER **/

header { position:fixed; width:100%; z-index:999; display:table; }

.header-sticky { background-color:#000000; }

.header-main { position: relative; height:60px; display:table-cell; vertical-align: middle; z-index:900; }
.header-main:after { content: ''; clear: both; display: block; }

.header-logo { padding:0px 90px; float:left; }

.header-menu { position:relative; float:right; display:table-cell; vertical-align: middle; padding:0px 100px; }

.header-menu-icon { width:24px; height:24px; }
.header-menu-icon:hover { cursor:pointer; }
.header-menu-icon:hover span:nth-child(2) { width:24px; }

.header-menu-view { position:fixed; width:100%; height:100%; background-color:#222222; top:100px; left:0px; right:0px; bottom:0px; z-index:999; opacity:0; display:none; }
.header-menu-view > ul { position:absolute; list-style: none; top:50%; left:50%; transform: translate(-50%, -50%); padding:0px; margin:0px; }
.header-menu-view > ul > li { position:relative; text-align: center; font-size:30px; padding:5px 0px; color:#FFFFFF; font-weight: 600; opacity:0; top:100px; }
.header-menu-view > ul > li:hover { font-size:36px; cursor:pointer; }
.header-menu-view > ul > li > a { color:#FFFFFF; }

.header-menu-view ul li ul { padding:15px 0px; margin:0px; position:relative; display:none; }
.header-menu-view ul li ul li { font-size:16px; padding:4px 0px; font-weight: 400; }
.header-menu-view ul li ul li a { color:#FFFFFF; }
.header-menu-view ul li ul li a:hover { opacity:.7; }

.header-menu-close { position:absolute; width:24px; height:24px; right:100px; top:50px; }
.header-menu-close:hover { cursor: pointer; }

#open-icon,
#close-icon { width:20px; height:20px; }

#open-icon path,
#close-icon path { fill:#FFFFFF; }

/** 4.0 SLIDER **/

.slider { position:relative; width:100%; height:calc(100% - 1px); overflow: hidden;  }

.slider-wrapper { width:100%; height:100%; top:0px; transition-delay:550ms; overflow:hidden; }
.slider-wrapper a { position:relative; width:100%; height:100%; }
.slider-item { position:relative; width:100%; height:100%; display:block; box-sizing: border-box; }

.slider-item-wrapper { position:relative; display:block; width:100%; height:100%; background-color:#000000;  }

.slider-item-image { width:100%; height:100%; -webkit-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.5); -moz-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.5); box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.5); }
.slider-item-image { background-color:#000000; background-size:cover; background-position: center center; background-repeat: no-repeat; opacity:.7; }

.slider-item-content { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding:0px 50px; width:100%; overflow: hidden; pointer-events: none; text-align: center; }

.slider-item-content-category { position:relative;  overflow: hidden; width:100%; top:1px; pointer-events: none; pointer-events: none; }
.slider-item-content-category p { position:relative; font-size:14px; font-weight: 300; margin:0px; top:200px; opacity:.7; pointer-events: none; word-wrap: break-word; }

.slider-item-content-category-opened { top:0px !important; transition-delay: 400ms; }

.slider-item-content-title { position:relative;  overflow: hidden; width:100%; margin-right:-20px; pointer-events: none; pointer-events: none; }
.slider-item-content-title h1 { position:relative;  margin:0px; font-size:80px; letter-spacing:-1px; font-weight:500;  top:200px; pointer-events: none; word-wrap: break-word; }

.slider-item-content-title-opened { top:0px !important;; transition-delay: 450ms; }

.slider-item-content button { pointer-events: none; font-size:14px; background-color:#000000; color:#FFFFFF; padding:15px 40px; border-radius: 50px; border:0px; margin-top:30px; }

.slide-anime { transform: scale(0.8); }
.slider-item-title-anime { padding: 0px 10px; }
.slider-item-title-spacing { letter-spacing: 0px !important; }

.slider-number { position:fixed; bottom:0px; left:0px; padding-left:90px; color:#FFFFFF; z-index:900; }
.slider-number ul { list-style: none; padding:0px; margin:0px; display: flex; align-items: center; }
.slider-number ul li { display: inline-block; line-height: 70px; }

.slider-number ul li:nth-child(1) { font-size:18px; font-weight: 700; width:40px; }
.slider-number ul li:nth-child(2) span { position:relative; display:block; width:30px; height:1px; background-color: #FFFFFF; border:0px; padding:0px; margin:0px;  }
.slider-number ul li:nth-child(3) { font-size:12px; font-weight: 500; width:50px; text-align: center; } 

.slider-social { position:fixed; display:block; line-height: 70px; bottom:0px; right:0px; padding-right:90px; z-index:900; }
.slider-social ul { list-style: none; padding:0px; margin:0px; }
.slider-social ul li { display: inline-block; font-size:14px; font-weight: 300; padding:0px 10px; line-height: 70px; }

.slider-social ul li a { color:#FFFFFF; }
.slider-social ul li a:hover { color:#FFFFFF; cursor:pointer; }

.owl-dots { position:fixed; bottom:0px; width:100%; text-align: center; z-index:950; line-height: 70px; }
.owl-dots .active span { height:2px; background-color:#FFFFFF; }

.owl-dots button {  width:40px; height:16px; margin:0px 2px; outline: none; }
.owl-dots button span { position:relative; display:block; width:100%; background-color: #555555; height: 1px; }

/** 5.0 PAGE HEAD **/

.page-head { text-align: center; }
.page-head-wrapper { padding:100px 60px 0px 60px; }
.page-head-wrapper { color:#FFFFFF; }

.page-head-wrapper h1 { font-size:60px; word-wrap: break-word; }

.page-head-info { margin:50px 0px; }
.page-head-info p { font-size:14px; font-weight: 300; opacity:.6; }

.page-head-social { margin-top:30px; }
.page-head-social ul { padding:0px; margin:0px; }
.page-head-social ul li { font-size:12px; display:inline-block; text-align: center; padding:0px 15px; line-height: 50px;  }
.page-head-social ul li:hover { }

.page-head-social ul li a { color:#FFFFFF; }

.page-head-wrapper hr { width:50px; height:2px; background-color:#FFFFFF; margin-top:60px; }


/** 6.0 MASONRY **/

.masonry { position:relative; display:block; }

.masonry-item { padding:60px 60px; z-index:750; }

.masonry-item-image { -webkit-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); -moz-box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); box-shadow: 0px 19px 36px -15px rgba(0,0,0,0.7); }
.masonry-item-image img { width:100% }
.masonry-item a { cursor: none; }

.masonry-item-wrapper { position:relative; display:block; overflow: hidden;}

.masonry-item-content { position:absolute; bottom:-100%; left:0px; padding:50px 50px; pointer-events: none; }
.masonry-item-content p { padding:0px; margin:0px; font-size:13px; opacity:.8; }
.masonry-item-content h2 { padding:0px; margin:0px; font-size:40px; word-break: break-word; }

.masonry-item-wrapper:hover .masonry-item-content { bottom:0%; }
.masonry-item-wrapper:hover .masonry-item-image { opacity:.5; }

.page-transition { width:100%; height:100%; background-color:#222222; position:fixed; top:0px; left:0px; z-index:998; height:0px; opacity:0; }


/** 7.0 ABOUT **/

.business { margin-top:60px; text-align: center; }
.business-head { color:#FFFFFF; padding:60px 60px; }

.business-wrapper { padding:0px 60px; }
.business-item-wrapper { border:solid 1px #333333; padding:20px 0px; width:100%; }
.business-item-icon { text-align: center;  padding:30px 0px; }
.business-item-icon i { color:#FFFFFF; font-size:40px; }

.business-item-content { color:#FFFFFF; text-align: center; padding:0px 15px; margin-bottom:35px; }
.business-item-content { }
.business-item-content p { font-size:14px; color:#888888; }

.business-item:hover .business-item-wrapper { border:solid 1px #555555; }

.clients { margin-top:60px; text-align: center; }
.clients-head { color:#FFFFFF; padding:60px 60px; }

.clients-wrapper { padding:0px 60px; }
.clients-item { margin-bottom:30px; }

.clients-item-wrapper { border:solid 1px #333333; }
.clients-item-wrapper img { width:100%; opacity:.5; }

.clients-item-wrapper:hover { border:solid 1px #555555; }
.clients-item-wrapper:hover img { opacity:1; }


/** 8.0 CONTACT **/

.contact { margin-top:60px; text-align: center; }
.contact-head { color:#FFFFFF; padding:60px 60px; }

.contact-item { margin-bottom:30px; }
.contact-item input,
.contact-item textarea { width:100%; border:solid 1px #444444; background: transparent; outline:none; padding:15px 15px; color:#888888; resize:none; }

.contact-item button { position:relative; width:100%;  display:block; font-size:30px;font-weight: 700; vertical-align: middle; background:none; outline:none; border:0px;-webkit-backface-visibility: hidden; }

.contact-map { margin-top:60px; }
.contact-map iframe { width:100%; height:400px; border:none; }

.contact-detail { margin-top:100px; color:#FFFFFF; }
.contact-detail-head { margin-bottom:60px; }

.contact-detail-item-wrapper { width:100%; padding:20px 0px; border:solid 1px #333333; }
.contact-detail-item-icon { text-align: center; padding:30px 0px; }
.contact-detail-item-icon i { font-size:25px; }

/** 9.0 WORK DETAIL **/

.top-item { background-color:#000000; }

.top-item,
.top-item-wrapper,
.top-item-image { position:relative; width:100%; height:100%; overflow: hidden; }

.top-item-image { background-size:cover; background-position: center center; background-repeat: no-repeat;  }

.top-item-overlay { width:100%; height:100%; position:Absolute; background-color:#000000; opacity:.3; z-index:900; }

.top-item-content { position:absolute; width:100%; top:50%; transform: translateY(-50%); text-align: center; pointer-events: none; z-index:920; }
.top-item-category { position:relative; overflow: hidden; width: 100%; margin:auto; top:1px; text-align: center; }
.top-item-category p { position:relative; font-size:14px; font-weight: 300; margin:0px; top:0px; opacity:.7; }

.top-item-title { position:relative;  overflow: hidden; width:100%; margin-right:-20px; }
.top-item-title h1 { position:relative;  margin:0px; font-size:80px; font-weight:500; letter-spacing:-1px; top:0px; }

.top-scroll { position:absolute; bottom:50px; text-align: center; width:100%; pointer-events: none; }
.top-scroll svg { width:40px; height:40px; }

.work-content { position:relative; background-color:#000000; width:100%; text-align: center; color:#FFFFFF; padding:100px 0px; z-index:910; }

.work-image { padding:50px 50px; }
.work-image img { width:100%; }

.work-next { position:relative; margin-top:50px; }
.work-next hr { background-color: #333333; }

.work-next button { position:relative; width:100%;  display:block; font-size:30px;font-weight: 700; vertical-align: middle; background:none; outline:none; border:0px;-webkit-backface-visibility: hidden; }

/** 10.0 FOOTER **/

footer { position:relative; width:100%; margin:25px 0px; z-index:900; }
.footer-main { position:relative; text-align:center; }

.footer-social-media { position:relative; display:block; line-height: 70px; }
.footer-social-media ul { list-style: none; padding:0px; margin:0px; }
.footer-social-media ul li { display: inline-block; font-size:14px; font-weight: 300; padding:0px 10px;  }

.footer-social-media ul li a { color:#999999; }
.footer-social-media ul li a:hover { color:#FFFFFF; cursor:pointer; }

.footer-copyright { font-size:12px; border-top:solid 1px #444444; width:fit-content; margin:auto; padding:15px 50px;  }
.footer-copyright p { padding:0px; margin:0px; color:#555555; }