@charset "utf-8";

/* CSS Document */



.xydropdowns.xynav, .xydropdowns ul, .xydropdowns li, .xydropdowns a  {margin: 0; padding: 0;}

.xydropdowns a {text-decoration: none; text-transform: uppercase;}



.toggleMenu {

    display:  none;

}

.xynav {

    list-style: none;

     *zoom: 1;

}

.xynav:before,

.xynav:after {

    content: " "; 

    display: table; 

}

.xynav:after {

    clear: both;

}

.xynav ul {

    list-style: none;

}

.xynav a {

    padding: 20px 25px;

    font-size: 1.6rem;

}

.xynav li {

    position: relative;

}

.xynav > li {

    float: left;

}

.xynav > li > .parent {

    background-image: url("../images/downArrow.png");

    background-repeat: no-repeat;

    background-position: right;

}

.xynav > li > a {

    display: block;

    padding: 38px 36px 37px;

}

.xynav li  ul {

    position: absolute;

    left: -9999px;

}

.xynav > li.hover > ul {

    left: 0;

}

.xynav li li.hover ul {

    left: 100%;

    top: 0;

}

.xynav li li li.hover ul {

    left: 100%;

    top: 0;

}

.xynav li li a {

    display: block;

    position: relative;

    font-size: 1.3rem;

    padding: 10px 25px; 

    z-index:100;

}



.xynav li li li a {

    display: block;

    position: relative;

    font-size: 1.3rem;

    padding: 10px 25px; 

    z-index:200;

}



.xynav li li li li a {

    display: block;

    position: relative;

    font-size: 1.3rem;

    padding: 10px 25px; 

    z-index:300;

}



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

    .xyactive {

        display: block;

    }

    .xynav > li {

        float: none;

    }

    .xynav > li > .parent {

        background-position: 95% 50%;

    }

    .xynav li li .parent {

        background-image: url("../images/downArrow.png");

        background-repeat: no-repeat;

        background-position: 95% 50%;

    }

    .xynav li li a{padding-left: 35px!important;}

    .xynav li li a:before{content: "\f105"; padding-right: 7px;font-family: 'FontAwesome';}

    .xynav li li li a{padding-left: 42px!important;}

    .xynav li li li li a{padding-left: 54px!important;}

    .xynav li li li .parent {

        background-image: url("../images/downArrow.png");

        background-repeat: no-repeat;

        background-position: 95% 50%;

    }

    .xynav ul {

        display: block;

        width: 100%;

    }

   .xynav > li.hover > ul , .xynav > li > ul > li.hover > ul, .xynav > li > ul > li> ul > li.hover > ul {

        position: static;

    }

}



/* fonts */

.xydropdowns {}



/* colors */

/* ------ */

/* togle menu button for narrow screens */

.toggleMenu {

    background: #666;

    color: #fff;

    font-size: 1.8rem;

}

.toggleMenu:link, .toggleMenu:active, .toggleMenu:hover{ color:#fff;}



/* general navigation background colors */

.xynav {

    background-color: #ffffff;

    /* border: 1px solid #f0f0f0;*/

}



/* general navigation link font color */

.xynav a {

    color:#000;

}



/* first level items borders */

.xynav > li {

	

}



/* navigation hover colors */

.xynav a:hover {

	background-color: #fd5f00;

}



/* second level navigation colors */

.xynav li li a {

    color: #ffffff;

    background: #454545;

    background: #13334c;

    background-color: rgba(19,51,76,0.95);

    border-bottom: 1px solid #222222;

    font-family: Arial;

    text-transform: capitalize;

}



/* third level navigation colors */

.xynav li li li a {

    background:#757575;

    border-bottom: 1px solid #000000;

}



.xynav li li li li a {

    background:#b7b7b7;

    color:#333333;

    border-bottom: 1px solid #000000;

}

/* ---------------- */

/*      layout      */

/* -----------------*/



/* main div */

.xydropdowns {

	width:auto;

}



/* small screens menu button */

a.toggleMenu {

    float:right;

    position: absolute;

    top: -48px;

    right: 10px;

	width:100%;

	width:42px;

    padding: 5px 0;

    border-radius: 5px;

	text-align: center;

}



/* second and third level menus */

.xynav ul {

	width:22em;

}





/* general paddings and other stuff */

.xynav a {

	padding: 5px 10px;

}



/* parents that have submenus */

.xynav > li > .parent {

	background-position: 95% 50%;

}



/* small screen adjustments*/

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

    .xydropdowns {

        clear: both;

        width:100%;

        border-top:1px solid #fd5f00;

        float: left;

        position:absolute;

        top:60px;

        left:0px;

        z-index: 99999;

    }

    .xynav {

        border: none;

    }

    .xynav > li > a {

	padding: 10px 25px;

    border-bottom: 1px solid #000;

}

	.xynav ul {

		width: 100%;

	}

    .xynav ul ul{

        display: block;

        width: 100%;

    }

    .xynav ul ul ul{

        display: block;

        width: 100%;

    }

    .xynav ul ul ul ul{

        display: block;

        width: 100%;

    }

}



@media (min-width:768px) and (max-width:1023px)

{

    .xydropdowns {

        clear: both;

        width: 100%;

        /*border-top: 1px solid #000;

         float: left; */

        position: relative;

        top: 0px;

        z-index: 99999;

    }

    a.toggleMenu {

        float: left;

        padding: 10px 0;

        width: 100%;

        width: 46px;

        text-align: center;

        position: absolute;

        top: -75px;

        left: 50%;

    }

    .xyactive {

        display: block;

    }

    .xynav > li {

        float: none;

    }

    .xynav > li > .parent {

        background-position: 95% 50%;

    }

    .xynav li li .parent {

        background-image: url("../images/downArrow.png");

        background-repeat: no-repeat;

        background-position: 95% 50%;

    }

    .xynav li li a{padding-left: 35px!important;}

    .xynav li li a:before{content: "\f105"; padding-right: 7px; font-family: FontAwesome!important;}

    .xynav li li li a{padding-left: 42px!important;}

    .xynav li li li li a{padding-left: 54px!important;}

    .xynav li li li .parent {

        background-image: url("../images/downArrow.png");

        background-repeat: no-repeat;

        background-position: 95% 50%;

    }

    .xynav ul {

        display: block;

        width: 100%;

    }

   .xynav > li.hover > ul , .xynav > li > ul > li.hover > ul, .xynav > li > ul > li> ul > li.hover > ul {

        position: static;

    }

    

    .xynav {

        border: none;

    }

    .xynav > li > a {

	padding: 10px 25px;

    border-bottom: 1px solid #000;

}

	.xynav ul {

		width: 100%;

	}

    .xynav ul ul{

        display: block;

        width: 100%;

    }

    .xynav ul ul ul{

        display: block;

        width: 100%;

    }

    .xynav ul ul ul ul{

        display: block;

        width: 100%;

    }

}



@media only screen and (min-width:1024px) and (max-width:1920px)

{

     .xynav > li > a:hover{background-color: transparent;}

     .xynav > li > a::after{

         content: '';

         display:block;

         margin: 0 auto;

         width: 0px;

         height: 2px;

         background-color: #f60;

         transition: all 0.3s;

     }

     .xynav > li > a:hover::after{

         width:100%;

     }

}