/*
Theme Name: oni_global
Author: Arnel Dayrit
Author URI: www.facebook.com/arnel.dayrit.1992
Description: custom.css
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face {
	font-family: 'fsalbert';
	src: url('fonts/ufonts.com_fsalbert-regular-opentype.eot');
	src: local('☺'), url('fonts/ufonts.com_fsalbert-regular-opentype.woff') format('woff'), url('fonts/ufonts.com_fsalbert-regular-opentype.ttf') format('truetype'), url('fonts/ufonts.com_fsalbert-regular-opentype.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html::-webkit-scrollbar {
    width: 12px;
}
 
html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 2px;
}
 
html::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background: #b3adb2;
}
body{
	font-family: 'fsalbert';
	cursor: default;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Oswald', sans-serif;
}
h1{
	font-size: 70px;
}
h2{
	font-size: 40px;
}
h3{
	font-size: 36px;
}
h4{
	font-size: 30px;
}
h5{
	font-size: 24px;
}
h6{
	font-size: 20px;
}
p{
	font-size: 18px;
}
a{
        cursor:pointer;
}
/*space*/
.space-10{
	height: 15px;
}
.space-20{
	height: 25px;
}
/*animate*/
/*fade left to right*/
.section h1,.section h2,.section h3,.section h4,.section h5,.section h6,
.slider-section h1,.slider-section h2,.slider-section h3,.slider-section h4,.slider-section h5,.slider-section h6,
.section a,
.slider-section a{
	opacity: 0;
	margin-left: -100px;
	transition-duration: 1s;
}
.section.animated h1,.section.animated h2,.section.animated h3,.section.animated h4,.section.animated h5,.section.animated h6,
.slider-section.animated h1,.slider-section.animated h2,.slider-section.animated h3,.slider-section.animated h4,.slider-section.animated h5,.slider-section.animated h6,
.section.animated a,
.slider-section.animated a{	
	opacity: 1;
	margin-left: 0px;
}

/*fadein*/
.section p,
.slider-section p,
.section form,
.section span,
.slider-section span{
	opacity: 0;
	transition-duration: 1s;
}
.section.animated p,
.slider-section.animated p,
.section.animated form,
.section.animated span,
.slider-section.animated span{
	opacity: 1;
}


{
	opacity: 0;
}
/*colors*/
.white{
	color: #fff;
}
.gray{
	color: #666666;
}
/*header*/
.header{
    position: absolute;
    width: 100%;
    transition-duration: 1s;
    z-index: 999;
}
.header.fixed{
	position: fixed;
	background: #fff;
	box-shadow: 0px 1px 5px 0px #666;
}
.home .header.fixed{
	background: #1a1a26;
}
.header .container{
	padding-top: 25px;
}
.header.fixed .container{
	padding-top:0px;
}
.header .logo img{
	max-width: 115px;
	transition-duration: 1s;
}

.header.fixed .logo img{
	max-width: 75px;
}
.header .menu{
	float: right;
}
.header .menu ul li a{
	text-decoration: none !important;
    padding: 15px;
    font-size: 16px;
    text-transform: uppercase;
    color: #939393;
}
.header .menu ul li .sub-menu{
    background: #fff;
    margin-top: 30px;
}
.home .header .menu ul li .sub-menu{
    background: #1a1a26;
}

.header .menu ul li.current-menu-item a{
	color: #fff;
}
.header .menu ul li a:hover{
	color: #333;
}
.home .header .menu ul li a:hover{
	color: #fff;
}
.header .mobile-icon{
	display: block;
    width: 50px;
    height: 18px;
    padding: 11px;
    position: absolute;
    right: 0;
    top: 6px;
}
.header .mobile-icon span{
	background: #333;
    display: block;
    height: 2px;
    margin: 6px 0;
}
.header .mobile-icon:before,
.header .mobile-icon:after{
	content: '';
    display: block;
    background: #333;
    height: 2px;
}
.home .header .mobile-icon span,
.home .header .mobile-icon:before,
.home .header .mobile-icon:after{
	background: #fff;
}
/*body*/
.section {
	overflow: hidden;
    background-position: 50% 0px;
    min-height: 700px;
    background-size: cover;
    background-attachment: fixed;
    background-color: transparent;
    padding-top: 100px;
}
.body > div:last-child{
	padding-bottom: 200px;
}
.banner h1{
    color: #fff;
    text-align: center;
    padding-top: 150px;
}
/*contact*/
.contact h2{
	text-align: center;
	color: #fff;
	padding-bottom: 30px;
}
.contact form .whole-input,
.contact form .half-input{
	padding:8px;
	float: left;
	width: 100%;
}
.contact form input,
.contact form textarea{
	opacity: 0.8;
    padding: 10px;
    color: #000;
}
.contact form input[type="submit"]{
	color: #fff;
    font-size: 16px;
    text-shadow: none;
    background: #333;
    border-color: #333;
    box-shadow: none;
}
.contact form input:hover,
.contact form textarea:hover{
	opacity: 1;
}
.contact form .wpcf7-not-valid{
	border: 1px solid #ea6060;
}
.contact form .wpcf7-not-valid-tip{
	display: none;
}
.contact div.wpcf7-response-output {
    color: #fff;
    text-align: center;
    float: left;
    width: 100%;
    margin: 0;
}

/*slider*/
.slider-section .carousel-indicators .active{
    background-color:#333;
}
.slider-section .carousel-indicators li{
    border:1px solid #333;
    width: 40px;
    height: 20px;
}
.slider-section img{
	width: 100%;
}
.slider-section .item{
	background-size: cover;
    background-attachment: fixed;
    background-color: transparent;
background-position:right;
}
.slider-section .slider-caption .mobile-image{
    display:none;
    width: 200px;
    margin: auto;
    margin-top: 30px;
    border-radius: 100%;
    overflow: hidden;
}
.slider-section .slider-caption{
    width: 100%;
    padding: 130px 15px;
    min-height: 700px;
}
.slider-section .slider-caption .col-sm-5 p{
	// font-size: 32px;
}
.slider-section .slider-caption .col-sm-5 h6{
	font-size: 20px;
	font-family: 'fsalbert';
}
.slider-section .slider-caption .panel-group h1{
	font-size: 70px;
}
.slider-section .slider-caption .panel-group h1 a{
	text-decoration: none;
}
.slider-section .slider-caption .panel-group h1 a.collapsed{
	opacity: 0.5;
}
.slider-section .slider-caption .panel-group p{
	font-size: 26px;
}
.slider-section .slider-caption .panel-group .panel{
	background: transparent;
	box-shadow: none;
}
.slider-section .slider-caption .panel-group .panel-body{
	border:none;
}
.slider-section .carousel-control{
	background: none;
}
.slider-section .carousel-control .glyphicon{
	position: absolute;
    top: 50%;
    margin-top: -15px;
    font-size: 30px;
    color: #000;
}
.slider-section .carousel-control .glyphicon.glyphicon-menu-left{
	left: 5px;
}
.slider-section .carousel-control .glyphicon.glyphicon-menu-right{
	right: 5px;
}
/*stores*/
.stores .store img{
	width: 140px;
	height: 93.33px;
    float: left;
    margin-right: 20px;
    transition-duration: 1s;
}
.stores .store{
    margin-bottom: 30px;
}
.stores .store span{
        font-family: 'Oswald', sans-serif;
	font-size: 60px;
    color: #fff;
    margin-top: -10px;
    margin-bottom: -11px;
    display: inline-block;
}
.stores .row{
	margin-top: 120px;
}

/*history*/
.history .history-timeline{
	position: relative;
    display: block;
    margin: 290px 0px;
    z-index: 9;
}
.history .history-timeline ul{
    margin: 0;
    padding: 0;
    height: 2px;
    background: #1f212d;
    color: #1f212d;
    position: relative;
}
.history .history-timeline ul:before,
.history .history-timeline ul:after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: -3px;
    background: #1f212d;
    border-radius: 50%;
}
.history .history-timeline ul:before{
    left: -8px;
}
.history .history-timeline ul:after{
    right: -8px;
}
.history .history-timeline ul *{
    transition-duration: 1s;
}
.history .history-timeline ul li{
	position: relative;
    height: 2px;
    float: left;
    list-style: none;
}
.history .history-timeline ul li.active{
	background: #808F99;
}
.history .history-timeline ul li .have-date{
	color: #fff;
    background: #1f212d;
    position: absolute;
    border-radius: 25px;
    padding: 5px 15px;
    height: 35px;
    width: 35px;
    overflow: hidden;
    top: -17px;
    left: 50%;
    margin-left: -17px;
    cursor: pointer;
}
.history .history-timeline ul li.active .have-date{
	width: 69.61px;
}
.history .history-timeline ul li .have-date p{
	opacity: 0;
}
.history .history-timeline ul li.active .have-date p{
	opacity: 1;
}
.history .history-timeline ul li .no-date{
	background: #1f212d;
    position: absolute;
    border-radius: 25px;
    height: 14px;
    width: 14px;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    cursor: pointer;
}
.history .history-timeline ul li .history-line{
	height: 0px;
    border-right: 2px dashed #808F99;
    position: absolute;
    left: 50%;
}
.history .history-timeline ul li:nth-child(even) .history-line{
	bottom: 0;
}
.history .history-timeline ul li .content{
	position: absolute;
    left: 50%;
    width: 80%;
    opacity: 0;
}
.history .history-timeline ul li.active .content{
	opacity: 1;
    margin: 50px 15px;

}
.history .history-timeline ul li:nth-child(even) .content{
	bottom: 0;
}

/*brands*/
.brands .accordion-wrapper{
	max-height: 715px;
    overflow-y: scroll;
}
.brands .accordion-wrapper::-webkit-scrollbar {
    width: 0px;
}

.brands .panel-group .panel-title a{
	text-decoration: none;
}
.brands .panel-group .panel-title a.collapsed{
	opacity: 0.5;
}
.brands .panel-group p{
	color: #666666;
}
.brands .panel-group .panel{
	background: transparent;
	box-shadow: none;
}
.brands .panel-group .panel .panel-body{
	border:none;
}
.brands .panel-group .panel .panel-body a{
	font-size: 18px;
}
.brands .panel-group .panel .panel-title{
	font-size: 30px;
	padding-top: 5px;
}


/*single page*/
.body .brand-banner{
    background-position: 50% 0px;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 150px;
    padding-bottom: 150px; 
    text-align: center;
}
.body .brand-banner img{
	max-width: 250px;
	padding: 50px 0;
}
.body .brand-banner h1{
	padding: 50px 0;
}
.body .brand-banner p{
	font-size: 32px;
}
.body .brand-description .details span.counter{
	font-size: 80px;
	color: #FA405A;
	font-family: 'Oswald', sans-serif;
}
.body .brand-description .details p{
	font-size: 20px;
	color: #999999;
}
.body .brand-description .links{
	padding-bottom: 70px;
}
.body .brand-description .links a{
	font-size: 28px;
    text-decoration: none;
    background: #FA405A;
    color: #fff;
    padding: 7px 12px 4px;
    border: 1px solid #FA405A;
    border-radius: 50px;
    display: inline-block;
    margin: 15px;
}
.body .brand-description .links a.website{
	padding: 7px 25px 4px;
}
.body .brand-description .links  a .visit{
	font-size: 18px;
    vertical-align: middle;
    height: 30px;
    display: inline-block;
}
.body .brand-description .links a:hover{
	color: #FA405A;
	background: #fff;
}
.body .instagram .instagram-picture{
	display: table;
    width: 100%;
    padding: 60px 0;
}
.body .instagram .instagram-picture .image{
    width: 50%;
    float: left;
    border: 2px solid #fff;
    background-size: cover;
    transition-duration: 1s;
}
.body .instagram .instagram-picture .image:hover{
    border-radius: 25px;
}
.body .instagram .instagram-picture .image img{
	width: 100%;
}

.body .key-products .item .product{
	padding: 50px;
}
.body .key-products .item .product .image{
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.body .key-products .item .product h5{
	min-height: 60px;
	color: #FA405A;
}
.body .key-products .item .product p{
	font-size: 16px;
	margin-bottom: 20px;
	min-height: 130px;
}

.body .key-products .item .product a{
	color: #fff;
    background: #FA405A;
    padding: 9px 24px;
    border-radius: 50px;
    text-decoration: none;
    border: 1px solid #fa405a;
    display: inline-block;
}
.body .key-products .item .product a:hover{
	color: #fa405a;
    background: #ffffff;
    border: 1px solid #fa405a;
}
.body .key-products .owl-controls .owl-nav > div{
	position: absolute;
    top: 50%;
    border: 1px solid #ccc;
    border-radius: 100%;
    padding: 9px 11px 7px;
}
.body .key-products .owl-controls .owl-nav > div:hover{
	border-color: #333;
}
.body .key-products .owl-controls .owl-nav .owl-next{
	right: 0;
}

/*footer*/
.footer{
	margin-top: -160px;
	text-align: center;
}
.footer p{
	color: #333;
	margin-bottom: 0;
	padding: 0px 20px;
}
.home .footer p{
	color: #fff;
	font-size: 14px;
}
.footer span.white{
	color: #939393;
}
.home .footer span.white{
	color: #fff;
}
.footer .opacity-line{
	border: 1px solid #eee;
    opacity: 0.4;
    margin-bottom: 40px;
    margin-top: -18px;
}
.footer .top{
	background: #fff;
    padding: 6px 15px;
    border-radius: 5px;
    display: inline-block;
    z-index: 999;
    cursor: pointer;
    border: 1px solid #ddd;
    position: absolute;
    width: 73px;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -58px;
}
/*loading scree*/
.loading-screen{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #262626;
	z-index: 99999;
	top:0;
}
.loading-screen img{
	position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*media*/
@media (max-width: 767px) {
.banner.section{
min-height:500px;
}
        .section{
               padding-top:30px;
               padding-bottom:30px;
               min-height:auto;
         }
	.brands h2{
   		text-align: center;
	}
	.history{
		padding-bottom: 0px;
        }
	.history .history-timeline{
		min-width: 1150px;
	}
	.history .history-wraper{
	    overflow: scroll;
		padding:0 20px;
	}
	.history .history-wraper::-webkit-scrollbar {
		width: 0px;
	}
	.body .key-products .item .product p{
		min-height: auto;
	}
        .brands .accordion-wrapper{
            max-height: none;
            overflow-y: auto;
        }
        .slider-section .slider-caption{
           min-height: 850px;
        }
        .slider-section .carousel-control{
           display:none;
        }
	.section {	   
    webkit-background-size:250%; 
    -moz-background-size:250%; 
    -o-background-size:250%; 
    background-size:250%; 
	}
	.stores .row {
    		margin-top: 60px;
	}
}
@media (min-width: 768px){
        .slider-section .carousel-indicators{
           display:none;
        }
	.contact form .half-input{
		width: 50%;
	}
	.body .instagram .instagram-picture .image{
    	width: 25%;
	}
}
@media (max-width: 992px) {
   .desktop{
	display:none;
   }
   #for-mobile-menu {
      display: none !important;
   }
}
@media (min-width: 993px) {
   .mobile{
	display:none;
   }
   .header .mobile-icon{
      display: none !important;
   }
}
@media (min-width: 617px) {	
   .body .key-products .item .product h5{
	height: 55px;
	overflow: hidden;
	min-height: auto;
   }
}

@media (max-width: 650px) {	
   .slider-section .slider-caption .mobile-image{
	display:block;
   }
}