/*
Theme Name: Ninja
Author: Locus-T
Author URI: http://www.locus-t.com.my/
Description: Ninja theme is awesome. That's all you need to know.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: grid-layout, footer-widgets, education, entertainment, food-and-drink, news, photography, portfolio, e-commerce
*/

/* Table of content
-----------------------------------------------
1. Global
2. Content
*/

/* =Global
----------------------------------------------- */

body { font-family: Roboto, 'Open Sans', sans-serif; line-height:1.6; font-size:15px; max-width:1600px; margin:0 auto; color:#191919; }

a { color:#333; text-decoration: none; cursor:pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.bg-dark-grey a, .bg-black a { color:#fff; }
a:hover, a:focus { color: #DADADA; text-decoration: none; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top:0; }
h1 { font-size: 2.4em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 12px; }

img {
  height: auto; /* Make sure images are scaled correctly. */
  max-width: 100%; /* Adhere to container width. */
}

button, input, select, textarea {
  font-size: 100%; /* Corrects font size not being inherited in all browsers */
  margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline; /* Improves appearance and consistency in all browsers */
  *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}

input[type="checkbox"], input[type="radio"] { padding: 0; } /* Addresses excess padding in IE8/9 */
 /* Addresses appearance set to searchfield in S5, Chrome */
 /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea, select {
  color: #666; border: 1px solid #E8E8E8; border-radius: 3px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
	color: #111;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"],textarea, select { 
	padding: 5px; 
}
iframe { max-width:100%; }
textarea { overflow: auto; vertical-align: top; width: 100%; }
.wpcf7-form input:not([type="submit"]):not([type="reset"]), .wpcf7-form textarea, .wpcf7-form select { width:100%; margin-bottom:10px; padding:5px; }

/* Alignment */
.alignleft { display: inline; float: left; }
.alignright { display: inline; float: right; }
.aligncenter { clear: both; display: block; margin: 0 auto; }
li, ul { margin-bottom:10px; }
ul ul, ol ol , ul ol, ol ul { padding-left:20px; }
/* Layout */

/* header */
.header-top { background:#191919; color:#fff; padding-top:10px; }
.header-top p { color:#fff; font-size:12px; }
.header-middle { background:#e7e7e7; }
.header-bottom { background:#949494; }

ul#menu-primary li { display:block; position:relative; margin-bottom:0; }
#menu-primary ul.sub-menu { display: none; z-index:999; text-align:left; }
ul#menu-primary li:last-child { margin-right:0; }
ul#menu-primary li a { padding:10px 20px; display:block; }
ul#menu-primary li a:hover { color:#000; }
ul.sub-menu { position:absolute; top:40px; left:0; padding:0 5px; background:#000; }
ul#menu-primary ul.sub-menu li a{ padding:5px; }
ul#menu-primary ul.sub-menu li a:hover{ color:#fff; }

/* menu version 2 */
.header-v1 .header-middle > .container { padding:15px; }
.menu-header { width:100%; text-align:right; }
.header-v1 ul#menu-primary li a { color:#000; }
.header-v1 ul#menu-primary ul.sub-menu li a { color:#fff; }
.header-v1 ul#menu-primary li:last-child { margin-right:0; }
/* searchbar */
.search-form { border:none; background:#fff; padding-left:10px; margin-bottom:15px; width:275px; float:right; }
.search-submit { background:#fff url('images/search.jpg') center no-repeat; color:transparent; border:none; padding:5px 16px; margin:5px; }
.header-middle .search-field { background:none; border:none; }

/* footer */
#footer{ background:#191919; padding-top:15px; color:#fff; }
#footer .footer-inner{ padding-top: 25px; padding-bottom: 25px; padding-left:30px; padding-right:30px; }
#footer h3.widgettitle { font-size:14px; }
#footer .widgettitle:after{ content:""; background-color:#fff; width:20px; height:3px; display:block; margin-top:15px; }
#footer ul{ padding-left:0; }
#colophon { background: #fff; color: initial; }
#copyright { text-align:center;padding:10px; }

/* THANK YOU */
.ninja-thank-you i.ninja-tq-icon {
	font-size: 40px; color: #fff; margin-bottom: 30px; background-color: #ee1b24; padding: 30px; border-radius:50%; border:5px solid #fff; 
	-webkit-box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41);
	-moz-box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41); 
	box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41);
}
/* COMING SOON */
.ninja-coming-soon i.ninja-comingsoon-icon {
	font-size: 40px; color: #fff; margin-bottom:30px; background-color:#ee1b24; padding:30px; border-radius:50%; border:5px solid #fff; 
	-webkit-box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41);
	-moz-box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41);
	box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41);
}
.ninja-thank-you > .row { height: 100vh; 
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
    -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;
}
.countdown { position: relative; margin: auto; height: 40px; width: 40px; text-align: center; }
.countdown-number { color: #000; display: inline-block; line-height: 38px; }
.ninja-thank-you svg { position: absolute; top: 0; right: 0; width: 40px; height: 40px; transform: rotateY(-180deg) rotateZ(-90deg); 
	-webkit-transform: rotateY(-180deg) rotateZ(-90deg);
}
.ninja-thank-you svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 2px; stroke: black;
  fill: none; animation: countdown 5s linear forwards; -webkit-animation: countdown 5s linear forwards;
}

@-webkit-keyframes countdown {
  from { stroke-dashoffset: 0px; }
  to { stroke-dashoffset: 113px; }
}
@-moz-keyframes countdown {
  from { stroke-dashoffset: 0px; }
  to { stroke-dashoffset: 113px; }
}
@-o-keyframes countdown {
  from { stroke-dashoffset: 0px; }
  to { stroke-dashoffset: 113px; }
}
@keyframes countdown {
  from { stroke-dashoffset: 0px; }
  to { stroke-dashoffset: 113px; }
}

/* SCROll TO TOP */
.scroll-to-top { background: rgba(100, 100, 100, 0.4); color: #fff; bottom: 4%; cursor: pointer; display: none; position: fixed; right: 20px;
  z-index: 999; font-size: 16px; text-align: center; line-height: 40px; width: 40px; border-radius: 4px;
  -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; transition: background-color 0.3s linear;
}
.scroll-to-top:hover { background: #222; opacity: .8; }

/* SOCIAL MENU */
.social-icons ul, .social-icons li { border: 0!important; list-style: none; padding-left: 0; }
.social-icons li { border: none; display: inline-block; margin: 0; }
.social-icons li a { font-size: 18px; line-height: 37px; list-style: none; display: inline-block; text-align: center; height: 35px; width: 35px; 
	margin-right: 5px; margin-bottom: 5px; border-radius: 50%; background-color: #fff; color: #000;
  -webkit-transition: background-color  0.5s; -moz-transition: background-color  0.5s; -o-transition: background-color  0.5s; transition: background-color  0.5s;
}
.social-icons li a[href*="twitter.com"] .fa:before{ content:"\f099"; }
.social-icons li a[href*="xing.com"] .fa:before{ content:"\f168"; }
.social-icons li a[href*="facebook.com"] .fa:before{ content:"\f09a"; }
.social-icons li a[href*="github.com"] .fa:before{ content:"\f09b"; }
.social-icons li a[href*="/feed"] .fa:before{ content:"\f09e"; }
.social-icons li a[href*="dribbble.com"] .fa:before{ content: "\f17d"; }
.social-icons li a[href*="skype"] .fa:before{ content: "\f17e"; }
.social-icons li a[href*="foursquare.com"] .fa:before{ content: "\f180"; }
.social-icons li a[href*="spotify.com"] .fa:before{ content: "\f1bc"; }
.social-icons li a[href*="soundcloud.com"] .fa:before{ content: "\f1be"; }
.social-icons li a[href*="vimeo.com"] .fa:before{ content: "\f194"; }
.social-icons li a[href*="youtube.com"] .fa:before{ content: "\f167"; }
.social-icons li a[href*="instagram.com"] .fa:before{ content: "\f16d"; }
.social-icons li a[href*="flickr.com"] .fa:before{ content: "\f16e"; }
.social-icons li a[href*="tumblr.com"] .fa:before{ content: "\f173"; }
.social-icons li a[href*="pinterest.com"] .fa:before{ content: "\f0d2"; }
.social-icons li a[href*="plus.google.com"] .fa:before{ content: "\f0d5"; }
.social-icons li a[href*="linkedin.com"] .fa:before{ content: "\f0e1"; }
.social-icons li a[href*="mailto"] .fa:before{ content: "\f003"; }
.social-icons li a span{ display: none; }
.social-icons li a:hover { color: #fff!important; }
.social-icons li a[href*="facebook.com"]:hover { background-color: #4265b9; }
.social-icons li a[href*="twitter.com"]:hover { background-color: #55ACEE; }
.social-icons li a[href*="dribbble.com"]:hover { background-color: #ea4c89; }
.social-icons li a[href*="flickr.com"]:hover { background-color: #ff0084; }
.social-icons li a[href*="plus.google.com"]:hover { background-color: #d62408; }
.social-icons li a[href*="skype"]:hover { background-color: #0bbff2; }
.social-icons li a[href*="pinterest.com"]:hover { background-color: #c31e26; }
.social-icons li a[href*="linkedin.com"]:hover { background-color: #005987; }
.social-icons li a[href*="vimeo.com"]:hover { background-color: #1bb6ec; }
.social-icons li a[href*="tumblr.com"]:hover { background-color: #35506b; }
.social-icons li a[href*="youtube.com"]:hover { background-color: #df3333; }
.social-icons li a[href*="instagram.com"]:hover { background-color: #F95B60; }
.social-icons li a[href*="/feed"]:hover { background-color: #f39c12; }
.social-icons li a[href*="foursquare.com"]:hover { background-color: #2398C9; }
.social-icons li a[href*="soundcloud.com"]:hover { background-color: #F50; }
.social-icons li a[href*="github.com"]:hover { background-color: #4183C4; }
.social-icons li a[href*="xing.com"]:hover { background-color: #006567; }
.social-icons li a[href*="spotify.com"]:hover { background-color: #81b71a; }
.social-icons li a[href*="mailto"]:hover { background-color: #DA4453; }

/* =Content
----------------------------------------------- */

.container-fluid.main-content-area, .container-fluid.main-content-area > .row > .main-content-inner { padding: 0!important; }
.container-fluid.main-content-area > .row { margin: auto; }
.container-fluid, .container-fluid > .row > [class*='col-'] { padding: 0!important; }
.container-fluid > .row { margin: 0; }
.widget_archive select{ width:90%; margin:auto 5%; }
.sidebar{ margin-bottom:15px; }
.sidebar aside { background-color:#f3f3f3; padding-bottom:15px;}
label.screen-reader-text { display: none; }
.featured-img{ float: left; margin-right: 10px; }
.btn.btn-default, .wpcf7-submit{ border: 1px solid #0c4ea0; color: #fff; border-radius: 5px; background-color: #0c4ea0; font-size: 14px;
	padding: 5px 20px; margin-top:15px; transition: all 0.3s ease 0s;
}
.btn.btn-default:hover, .wpcf7-submit:hover{ border: 1px solid #0c4ea0; color: #0c4ea0; background-color: transparent; }
.post-listing{ padding: 0; list-style-type: none; }
.post-listing li{ overflow: hidden; margin: 0 0 20px; border:5px solid #f3f3f3; padding:15px; }
.page-featured-banner h1{ text-align:center; }
.fullpage-header{ position:absolute; z-index:1; color:#fff; }
#wc_category_accordion-2 .widgettitle { margin-bottom: 0; }

/*====== layout ======*/

.nmla{margin-left:auto;} .nmra{margin-right:auto;} /*float items when flex it*/
.nflex{display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: flex;} /*flex objects*/
.nflex-center{display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;} /*center objects*/
.nflex-bottom{display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end;}/*top 0 objects*/
.nflex-top{display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start;}/*bottom 0 objects*/
.nbtnfr{-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position:fixed; transform-origin: right bottom; top:20%; } /*fixed button float right*/
.ninline-col-4{-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;} /*inline 4 column on parent*/
.ninline-col-3{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;} /*inline 3 column on parent*/
.ninline-col-2{-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;} /*inline 2 column on parent*/
.ninline-col-1{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;} /*inline 1 column on parent*/
.nboxes .ncaption{margin-bottom:15px;}
.nboxes img{width:100%;}
.widget_archive h3{background-color: #000;color: #fff;padding: 5px 15px;text-transform: uppercase;font-size:24px;}
.navbar-collapse {clear: both;float: right;padding-right:0;}
ul.nav li.dropdown:hover > ul.dropdown-menu {display: block;}
ul.nav li.dropdown:hover > ul.dropdown-menu  ul.dropdown-menu {margin-left:160px; margin-top:-40px;}
.dropdown-menu{padding:0 !important; border:0 !important; border-radius:0;}
.search-results-list article{ -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.31); -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.31); box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.31);
	padding:15px; margin-bottom:15px;
}
.search-results-list article .page-header { border-bottom: 0; margin: 0; padding-bottom: 0; }

/*====== End Layout ======*/


/*====== content bg-color ======*/

.bg-light-grey{background-color:#E1E1E1;}
.bg-dark-grey{background-color:#191919; color:#fff;}
.bg-black{background-color:#000; color:#fff;}
.bg-white{background-color:#fff;}

/*====== end content bg-color ======*/

/*====== content half columns ======*/

.nfluid-wrapper{position:relative;}
.nxposition{position:initial;}

@media (min-width: 1200px){
	.lg-center {text-align:center}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.md-center {text-align:center}
}
@media (min-width: 768px) and (max-width: 991px) {
	.sm-center {text-align:center}
}
@media (max-width: 767px){
	.xs-center {text-align:center}
}

@media (min-width: 992px) {
  .nimg-wrapper { position: initial; }
  .nimg-container-right, .nimg-container-left { position: absolute; bottom: 0; top: 0; }
  .nimg-container-right { left: 50%; right: 0; }
  .nimg-container-left { left: 0; right: 50%; }
  .nimg-container-right img, .nimg-container-left img { object-fit:cover; width:100%; height:100%; }
  .nfluid-wrapper .row.nflex > [class*='col-'] {-webkit-flex-basis: 50%;-ms-flex-preferred-size: 50%;-webkit-flex-basis: 50%;flex-basis: 50%;max-width: 50%;}
  .nfluid-wrapper .nflex-reverse {display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse!important; flex-direction:row-reverse!important; }
}

/*====== end content half columns ======*/

/*====== Spacing ======*/
.np15{padding:15px;} .np30{padding:30px;} .np45{padding:45px;}/*padding*/
.nm15{margin:15px;} .nm30{margin:30px;} .nm45{margin:45px;} /*margin*/
.nxp{padding:0;} .nxm{margin:0;}/*remove all padding*/
.nxvp{padding-top:0; padding-bottom:0;}/*remove vertial padding*/
.nxhp{padding-left:0; padding-right:0;}/*remove horizontal padding*/
.nxvm{margin-top:0; margin-bottom:0;}/*remove vertial padding*/
.nxhm{margin-left:0; margin-right:0;}/*remove horizontal padding*/
.nvp15{padding-top:15px; padding-bottom:15px;} .nvp30{padding-top:30px; padding-bottom:30px;} .nvp45{padding-top:45px; padding-bottom:45px;}/*vertical padding*/
.nvm15{margin-top:15px; margin-bottom:15px;} .nvm30{margin-top:30px; margin-bottom:30px } .nvm45{margin-top:45px; margin-bottom:45px} /*vertical margin*/
.nhp15{padding-left:15px;padding-right:15px;} .nhp30{padding-left:30px;padding-right:30px;} .nhp45{padding-left:45px;padding-right:45px;}/*horizontal padding*/
.nhm15{margin-left:15px; margin-right:15px;} .nhm30{margin-left:30px; margin-right:30px;} .nhm45{margin-left:45px; margin-right:45px;} /*horizontal margin*/
p:empty{display:none;}

/*====== End Spacing ======*/

@media (max-width: 991px) {
	.navbar-collapse.collapse { display: none !important; }
	.sidebar,.content-with-sidebar  {float: none;width: 100%;}
	.menu-header{display:none;}	
	.search-form {display: none;}	
	.header-top .text-right{text-align: initial;}
	.nflex{  display:block} /*flex objects*/
	#logo img{width:auto;height:auto;}
	#logo img{max-width:100%;}
}
@media (max-width: 768px) {
	.nimg-wrapper img{ margin-bottom:15px; }
	.np45 { padding: 30px; }
	.np30 { padding: 30px; }
}