/*
	
Theme Name: Napo3D
Author: Chirag
Description: The perfect theme for your Blog. Crispy, beautiful and awesome in every resolution. Ready for responsive, with multiple custom options in the Administration Panel to make this Theme your definitive ally for your daily blog.
Version: 1.0.0
Tags: blog, sidebar, responsive, clean, minimal, icon font, sunset, custom admin options.
Text Domain:Napo3D
*/
/**
 * ==================================================================================================================
 * 													Generic Styles
 * ==================================================================================================================
 */

html {
    font-size: 100%;
}

body { 
	background: #FFF; 
	color: #161616;
	font-family: 'Assistant', sans-serif;
	font-size: 1.125rem;
    -webkit-font-smoothing: antialiased;
}
img{
	max-width: 100%;
}

a { 
	text-decoration: none;
}
iframe {
    max-width: 100%;
}
section, header, footer{
	width: 100%;
	float: left;
	position:relative;
}
.accessibility {
	backface-visibility: hidden;
	left: -999999999px;
	position: absolute;
}

/**
 * ===============================================================================================================================
 *															Mobile Menu
 * ===============================================================================================================================
 */
header .mobile-menu {
	display: none;
}

/**
 * ===============================================================================================================================
 *															 MQ MAX-WIDTH 991
 * ===============================================================================================================================
 */

@media only screen and (max-width: 991px) {

	/***=========================Header=====================================***/
	
	header .mobile-menu, 
	header.active .mobile-menu .fa-times
	{
		display: block;
	}
	.site-header.active nav{
		transform: translateX(0%);
	}
	
	.site-header nav{
		padding: 20px;
		z-index: 99;
		position: fixed;
	    height: 100vh;
	    top: 0;
	    left: 0;
	    right: 0;
	    transition: all 500ms ease-in-out;
	    transform: translateX(100%);  
	    background-color: #fff;  
	}
	
	header ul {
		flex-wrap: wrap;
		text-align: center;
	}
	
	header li {
		display: block;
		width: 100%;
	}
	
	header li a {
		display: block;
		border: none;
		height: auto;
		margin: 0;
		padding: 15px 20px;
	}
	
/*=========================================Dropdowns=====================================*/
	
	header li.menu-item-has-children {
		position: relative;
		padding-right: 60px;
	}
	
	header li.menu-item-has-children .open-children {
		border-left: 1px solid #ddd;
		position: absolute !important;
		right: 0;
		text-align: center;
		text-rendering: auto;
		top: 0;
	    -webkit-font-smoothing: antialiased;
	    width: 60px;
	}
	
	header li.menu-item-has-children.active > .open-children i {
		transform: rotate(-180deg);
	}
	
	.header-main-men .sub-menu {
		background: none;
		box-shadow: none;
		display: none;
		padding: 0;
		position: static;
		width: 100%;
	}
	
	.header-main-men li:hover .sub-menu {
		display: none;
	}
	
	.header-main-men li.menu-item-has-children.active:hover > .sub-menu,
	.header-main-men li.menu-item-has-children.active > .sub-menu {
		display: block;
		border: 1px solid #fff;
	}
	.site-header .sub-menu{
		padding-left: 0px;
	    background: #b20a0a;
	    border-radius: 0 0 6px 6px;
	    left: 0;
	    position: absolute;
	    top: 100%;
	    z-index: 3;
		min-width: 200px;
	    display: none;
	}
	header .mobile-menu {
	    font-size: 2rem;
	    color: #696969;
	    text-align: right;
	}
	header nav .mobile-menu {
	    font-size: 2rem;
	    color: #22a5db;
	    text-align: right;
	    margin-bottom: 1rem;
	}
	header.active .mobile-menu .svg-inline--fa {
	    display: inline-block;
	}
	.header-main-men li a {
	    border-bottom: 1px solid #f1f1f1;
	}
	.header-main-men li {
	    text-align: left;
	}
}

/**
 * ===============================================================================================================================
 *															 MQ MIN-WIDTH 768
 * ===============================================================================================================================
 */
@media only screen and (min-width: 992px) {
	/***=========================Desktop Menu=====================================***/
	header .menu .sub-menu{
	    visibility: hidden;
	    opacity: 0;
	    transition: all 0.5s ease;
	    transform: translateY(-20px);
	}
	header .menu li:hover .sub-menu {
	    visibility: visible;
	    opacity: 1;
	    transform: translateY(0px);
	}
	.header-main-men li.menu-item-has-children {
	    padding-right: 5px;
	}
	.header-main-men li.menu-item-has-children:after {
	    content: '';
	    position: absolute;
	    top: 20px;
	    right: 0;
	    display: block;
	    width: 0;
	    height: 0;
	    border-left: 5px solid transparent;
	    border-right: 5px solid transparent;
	    border-top: 6px solid #696969;
	}
	.site-header .sub-menu {
	    padding-left: 0px;
	    background: #fff;
	    border-radius: 4px;
	    left: 0;
	    position: absolute;
	    top: 100%;
	    z-index: 3;
	    min-width: 210px;
	    visibility: hidden;
	    opacity: 0;
	    box-shadow: 0 3px 30px rgba(0,0,0,0.41);
	    transition: opacity .5s ease-in-out;
	}
	.site-header li:hover > .sub-menu {
	    visibility: visible;
	    opacity: 1;
	}
}

/**
 * ===============================================================================================================================
 *															 Header Styles
 * ===============================================================================================================================
 */


.header-main-men{
	padding-left: 0;
    list-style: none;
    margin-bottom: 0px;
}
.header-main-men li{
	display: inline-block;
	position: relative;
	margin: 0 10px;
}
.header-main-men li a{
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #161616;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}
.header-main-men li.current-menu-item a{
	font-weight: 700;
}
.header-main-men .sub-menu li{
	display: block;
}