/* ===========================================================
                MOBILE MENU
=========================================================== */
/**
* Special Note
*
* When the menu is open, a class of .mobile-open is applied to the body. You can
* use this for custom styling on any element when the menu is in the open position.
*/

@media (min-width: 768px){

    a.mobile-trigger, a.child-trigger{
        display: none !important; /* Hide button on Desktop */
    }

}


/* Variables
========================================================================== */

   /* Set Mobile Menu Background Color */
      /* Set Link Color */
 /* Set Link Hover Color */

a.mobile-trigger { display: none; }

@media (max-width: 767px) {
    .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
        visibility: visible!important;
        opacity: 1 !important;
        padding-left: 40px;
        margin-bottom: 10px;
        display: block !important;
        -webkit-transition: 0s all !important;
    }
}

@media (max-width: 767px) {
    /* Menu Reset - Remove styling from desktop version of custom-menu-primary */
    /* Place any additional CSS you want removed from the mobile menu in this reset */
    .main-menu {
        min-height: 48px !important;
    }
	.main-menu, .main-menu * {
		display: block;
		float: none;
		position: static;
		top: auto;
		right: auto;
		left: auto;
		bottom: auto;
		padding: 0px;
		margin: 0px;
		border: 0px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
		max-width: none;
		width: 100%;
		height: auto;
		line-height: 1;
		font-weight: normal;
		text-decoration: none;
		text-indent: 0px;
		text-align: left;
		color:#ffffff;
	}


	/* Toggle Button  */
    
	a.mobile-trigger{
		display: inline-block !important; /* Hide button on Desktop */
		cursor: pointer; /* Mouse pointer type on hover */
		float: right;        /*******************************************/
		width: 95px;
		height: 48px;
		line-height: 48px;
		text-align: center;
		z-index: 99999999999; /* Z-index to keep button on top of other layers */
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		background:#333333; /* Background color */
		-webkit-transition: background-color 0.2s linear; /* Button color transition effect */
		-webkit-transition:color .2s ease-in;
		-moz-transition:color .2s ease-in;
		transition:color .2s ease-in;
	}

	a.mobile-trigger:hover{
		text-decoration: none; /* Removes link text underline on button */
		color:#ffffff;
	}

	a.mobile-trigger span{
		display: none;
	}

	a.mobile-trigger span:before{
		position: absolute;
		content: 'Menu'; /* Change the text on the closed toggle button */
	}

	a.mobile-trigger span:after{
		position: relative;
		right: 2px;
		content: 'Close'; /* Change the text on the open toggle button */
		background-color:#333333;
		opacity: 0;
		transition: opacity .4s ease-in-out;
		-moz-transition: opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
	}

	/* Change button when menu is open */
	.mobile-open a.mobile-trigger{
		-webkit-transition:background-color 0.2s linear; /* Button color transition effect */
		-moz-transition:background-color 0.2s linear; /* Button color transition effect */
		transition:background-color 0.2s linear; /* Button color transition effect */
		background: transparent; /* Changes button background to be slightly darker than open menu color */
	}

	.mobile-open a.mobile-trigger span:after{
		opacity: 1;
	}


	/* Toggle Button Icon & Animations */

	a.mobile-trigger i{
        margin-left: 6px;
        margin-right: 0;
		display: inline;
		position: relative;
		top: -7px;
		-webkit-transition-duration: 0s;
		-webkit-transition-delay: .2s;
		-moz-transition-duration: 0s;
		-moz-transition-delay: .2s;
		transition-duration: 0s;
		transition-delay: .2s;
	}
	a.mobile-trigger i:before, a.mobile-trigger i:after{
		position: absolute;
		content: '';
	}
	a.mobile-trigger i, a.mobile-trigger i:before, a.mobile-trigger i:after{
		width: 16px; /* Icon line width */
		height: 1.5px; /* Icon line height */
		background-color:#ffffff; /* Icon color */
		display: inline-block;
	}
	a.mobile-trigger i:before{
		margin-top: -5px; /* Position top line */
		-webkit-transition-property: margin, -webkit-transform;
		-webkit-transition-duration: .2s;
		-webkit-transition-delay: .2s, 0;
	}
	a.mobile-trigger i:after{
		margin-top: 5px; /* Position bottom line */
		-webkit-transition-property: margin, -webkit-transform;
		-webkit-transition-duration: .2s;
		-webkit-transition-delay: .2s, 0;
	}
	.mobile-open a.mobile-trigger i{
		background-color: rgba(0,0,0,0.0);
		-webkit-transition-delay: .2s;
		-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
		-moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
		box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
	}
	.mobile-open a.mobile-trigger i:before{
		margin-top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition-delay: 0, .2s;
		-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
		-moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
		box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
	}
	.mobile-open a.mobile-trigger i:after{
		margin-top: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition-delay: 0, .2s;
		-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
		-moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
		box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
	}

	/* Child Toggle Button */

	a.child-trigger{
		display: block !important; /* Hide button on Desktop */
		cursor: pointer; /* Mouse pointer type on hover */
		position: absolute;
		top: 0px;
		right: 0px;
		width: 55px !important; /* Button width */
		min-width: 55px !important;
		height: 45px !important; /* Button height */
		padding: 0 !important;
		border-left: 1px dotted rgba(255, 255, 255, .20);
	}
	a.child-trigger:hover{
		text-decoration: none;
	}


	/* Child Toggle Button Icon & Animations */

	a.child-trigger span{
		position: relative;
		top: 50%; /* Centers icon inside button */
		margin: 0 auto !important;
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		transition-duration: .2s;
	}
	a.child-trigger span:after{
		position: absolute;
		content: '';
	}
	a.child-trigger span, a.child-trigger span:after{
		width: 10px; /* Icon line width */
		height: 1px; /* Icon line height */
		background-color:#ffffff; /* Icon color */
		display: block;
	}
	a.child-trigger span:after{
		-webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		transition-duration: .2s;
	}
	a.child-trigger.child-open span:after{
		-webkit-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		transition-duration: .2s;
	}
	a.child-trigger.child-open span{
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		transition-duration: .2s;
	}


	/* Menu Styles on Mobile Devices */


	/* Hide menu on mobile */
	.main-menu.js-enabled .hs-menu-wrapper {
		display: none;
	}

	/* Make child lists appear below parent items */
	.main-menu ul.hs-menu-children-wrapper{
		position: static !important;
	}

	/* Mobile Menu Styles */
	.main-menu.js-enabled .hs-menu-wrapper{
		float: left;
		width: 100%;
	}
	.main-menu .hs-menu-wrapper{
		padding: 25px 30px 30px 30px;
		width: 100%; /* Full screen width */
		z-index: 8888;
		background-color:#333333; /* Menu background color set off global mobile-menuColor variable */
	}

	/* Level 1 Menu List Styles */
	.main-menu .hs-menu-wrapper > ul > li{
		position: relative;
	}
	.main-menu .hs-menu-wrapper > ul > li a{
		overflow: visible;
	}

	/* Level 1 and Higher Menu List Styles */
	.main-menu .hs-menu-wrapper > ul li a{
		color:#ffffff; /* link color set by global mobile-aColor variable */
	}
	.main-menu .hs-menu-wrapper > ul li a:hover{
		color:#ffffff; /* link hover color set by global mobile-aColorHover variable */
	}
}