﻿.css300 {
    -moz-transition: all 300ms;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}
.css500 {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.css700 {
    -moz-transition: all 700ms;
    -webkit-transition: all 700ms;
    -o-transition: all 700ms;
    transition: all 700ms;
}
.row {
    position: relative;
    width: 95%;
    height: 100%;
    margin: auto;
    max-width: 72%;
}

.halfRow {
    width: 49%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.txtJustify {
    font-size: 0;
    text-align: justify;
    text-justify: distribute-all-lines;
}
.txtJustify .stretch {
    width: 100%;
    display: inline-block;
}

.table {
    width: 100%;
    height: 100%;
    display: table;
}
.table .table-row {
    display: table-row;
}
.table .table-cell {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#Master {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 320px;
    overflow: hidden;
}


#Master #Nav {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding:0;
    height: 80px;
    min-width: 300px;
}

/*#Master #navClear{height:80px}*/
#Master #Nav .bg {
    position: relative;
    z-index: 1;
    height: 100%;
    width:86%;
    margin:0 7%;
    
}
#Master #Nav #navUL {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: table;
    list-style-type: none;
    float:right;
    margin-right:-1%;
}

#Master #Nav #navUL.topnavi {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    display: table;
    list-style-type: none;
    float:right;
    padding-top:10px;
}
    #Master #Nav #navUL.topnavi li {
        /*position: relative;*/
        display: inline-block;
        white-space: nowrap;
        vertical-align: middle;
        color: #000;
        text-align: center;
        -webkit-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
        cursor: pointer;
        padding: 25px 0 0 8%;
        text-align: center;
        font-size: 16px;
        background: linear-gradient(to right, #ff3d60, #ff3d60 50%, rgb(0 0 0 / 1) 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        background-position: 100%;
        transition: background-position 275ms ease;
    }


        #Master #Nav #navUL.topnavi li:hover {
            background-position:0 100%;
        }
   

#Master #Nav #navUL.topnavi li > a{
	color:inherit;
	text-decoration:none !important;
	font-size:16px;
    font-family: 'WILLERB';
}


        #Master #Nav #navUL.topnavi li ul {
            position: absolute;
            list-style: none;
            text-align: center;
            width: 960px;
            left: 100%;
            transform: translateX(-50%);
            top: 80px;
            margin-left:-170px;
            max-height: 0px;
            overflow: hidden;
            -webkit-transition: max-height 0.4s linear;
            -moz-transition: max-height 0.4s linear;
            transition: max-height 0.4s linear;
            padding: 0;
            box-shadow:1px 3px 10px #ccc;
        }


#Master #Nav #navUL.topnavi li ul li{
	background:#fff;
    width:25%;
    border-right:1px solid #ffe2e7;
   -webkit-text-fill-color:black;
    padding:0;
}


    #Master #Nav #navUL.topnavi li ul li p {
        font-size: 12px;
        line-height: 24px;
        color: #000;
        font-family: 'OpenSans Regular';
        text-align: center;
        letter-spacing: -0.3px;
    }
        #Master #Nav #navUL.topnavi li ul li p.business_p {
            font-size: 13px;
            line-height: 24px;
            letter-spacing:-0.5px;
            color: #fd3e61;
            font-family: 'WILLERB';
            -webkit-text-fill-color:red;
        }
    #Master #Nav #navUL.topnavi li ul li img {
        height: 56px;
        padding-bottom: 10px;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }


#Master #Nav #navUL.topnavi li  ul li a{
    font-size:14px;
	color:#000 !important;
	text-decoration:none !important;
	display:block;
    
}

#Master #Nav #navUL.topnavi li  ul li:nth-child(odd){ /* zebra stripes */
	
}
    #Master #Nav #navUL.topnavi li ul li div {
        padding: 30px 10px;
        min-height: 180px;
    }
        #Master #Nav #navUL.topnavi li ul li div.bussiness_img1 {
            background: url(../images/business_icon_img4.png) no-repeat;
            background-size: 85%;
            width: 3.584vw;
            margin: 0 auto;
            height: 3.389vw;
            padding: 0;
            min-height: 0;
        }

        #Master #Nav #navUL.topnavi li ul li div.bussiness_img4 {
            background: url(../images/business_icon_img2.png) no-repeat top;
            background-size: 90%;
            width: 3.658vw;
            margin: 0 auto;
            height: 3.389vw;
            padding: 0;
            min-height: 0;
        }

        #Master #Nav #navUL.topnavi li ul li div.bussiness_img2 {
            background: url(../images/business_icon_img1.png) no-repeat;
            background-size: 100%;
            width: 4.813vw;
            margin: 0 auto;
            height: 3.389vw;
            padding: 0;
            min-height: 0;
        }

        #Master #Nav #navUL.topnavi li ul li div.bussiness_img3 {
            background: url(../images/business_icon_img3.png) no-repeat top;
            background-size: 100%;
            width: 3.813vw;
            height: 3.389vw;
            margin: 0 auto;
            padding: 0;
            min-height: 0;
        }

    #Master #Nav #navUL.topnavi li ul li:hover div.bussiness_img1 {
        background: url(../images/business_icon_img4_h.png) no-repeat;
        background-size: 85%;
    }
        #Master #Nav #navUL.topnavi li ul li:hover div.bussiness_img4 {
            background: url(../images/business_icon_img2_h.png) no-repeat top ;
            background-size: 90%;
        }
        #Master #Nav #navUL.topnavi li ul li:hover div.bussiness_img2 {
            background: url(../images/business_icon_img1_h.png) no-repeat;
            background-size: 100%;
        }
        #Master #Nav #navUL.topnavi li ul li:hover div.bussiness_img3 {
            background: url(../images/business_icon_img3_h.png) no-repeat top;
            background-size: 100%;
        }
            #Master #Nav #navUL.topnavi li ul li:hover {
        border-bottom: 2px solid #000;
        /*width:100%;*/
        height:100%;
    }

        #Master #Nav #navUL.topnavi li ul li:hover img {
            /*-webkit-filter: drop-shadow(1px 0 0 #000);
            filter: drop-shadow(1px 0 0 #000);
            z-index:1;*/
        }

    #Master #Nav #navUL.topnavi li ul li:last-child {
        border-right:0;
    }


#Master #Nav #navUL.topnavi li.Prod ul{
	position:absolute;
	list-style:none;
	text-align:center;
	width:608px;
	left:74%;
	margin-left:-305px;
	top:80px;
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
    padding:0;
    background:url(../images/navidropdownbg.png) no-repeat;
    height:300px;
    background-size:100%;
    font-family: 'OpenSans Regular';
    /*box-shadow:0px 5px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow:0px 5px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0px 5px 15px rgba(0, 0, 0, 0.1);*/
}

#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem{
	width:33.3333%;
    float:left;
    text-align:center;
    border-top:0;
    /*height:180px;*/
}
#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem .table{
	padding-left:40px;margin-bottom:0;
}
#Master #Nav #navUL.topnavi li.Prod ul li:last-child .table{
	padding-left:20px;
}
#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem .table .table-cell{
	text-align:left;
}

#Master #Nav #navUL.topnavi li.Prod ul li{
	margin-top:20px;
	position:relative;
    padding:0;
    background:transparent;

}
#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem img{width:70px; margin:0; margin-right:5px;}
#Master #Nav #navUL.topnavi li.Prod ul li:first-child{
	border:0; 
	margin-top:0px;
	position:relative;
    width:100%;
    padding:20px 0 0px 0;
}

#Master #Nav #navUL.topnavi li.Prod ul li:first-child:before{
	border:0;
}

    #Master #Nav #navUL.topnavi li.Prod ul li:nth-child(2):before { /* the pointer tip */
        border: 0;
    }


#Master #Nav #navUL.topnavi li.Prod ul li:nth-child(3){
	margin-top:20px;
	position:relative;
}
#Master #Nav #navUL.topnavi li.Prod ul li a{
	padding:12px 0 0 0;
}

#Master #Nav #navUL.topnavi li.Prod  ul li .ddltitle{
    padding:8px 0;
    font-size:16px;
    font-family:'WILLERB';
}

#Master #Nav #navUL.topnavi li.Prod  ul li .ddltoptitle{
    padding:0;
    font-size:18px;
}


#Master #Nav #navUL.topnavi li.Prod  ul li:hover{cursor:initial;}
#Master #Nav #navUL.topnavi li.Prod  ul li a:hover{color:#008a3e !important}
/* This will trigger the CSS */
/* transition animation on hover */

#Master #Nav #navUL.topnavi li:hover ul{
	max-height:300px; /* Increase when adding more dropdown items */
}

    #Master #Nav #navUL li .navDropdown .ddlNav img {
        width: 3.813vw;
        margin: 0 auto;
        margin-bottom: -20px;
    }


#Master #Nav #navUL li a .logo {
    width: 100%;
    max-width: 180px;
}
#Master #Nav #navUL li a .logo:hover {
    
}
#Master #Nav #navUL li .trigger {
    cursor: pointer;
    background-color: #1b1a19;
}
#Master #Nav #navUL li .trigger:hover {
    background-color: #767676;
}

#Master #Nav.opacity{
    opacity: 0.3;
}
#Master #Nav.opacity:hover{
    opacity: 1;
}

/************************************/

@media only screen and (min-width: 1401px){
    #Master #Nav {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding:0;
    height: 5.714vw;
    min-width: 21.43vw;
}

/*#Master #navClear{height:9vw}*/
   
    #Master #Nav #navUL.topnavi {
    width: 100%;
    height: 4.286vw;
    padding-top:0.714vw;
}

    #Master #Nav #navUL.topnavi li {
        padding:1.786vw 0 0 8%;
        text-align:center;font-size:1.143vw;color:#000;
    }

#Master #Nav #navUL.topnavi li > a{
	font-size:1.143vw;
}

        #Master #Nav #navUL.topnavi li ul {
            width: 70.227vw;
            margin-left: -12.143vw;
            max-height: 0px;
            top:5.052vw;
        }

#Master #Nav #navUL.topnavi li ul li{
    font-size:1.143vw;
    /*padding:0.714vw;*/
}
            #Master #Nav #navUL.topnavi li ul li {
                background-color: #fff;
                width: 25%;
                padding: 0;
                border-right: 1px solid #ffe2e7;
                /*min-height: 13.168vw;*/
            }
            #Master #Nav #navUL.topnavi li ul li {
                min-height: 13.168vw;
            }
            #Master #Nav #navUL.topnavi li ul li img{
                height: 4.097vw;
            }
                #Master #Nav #navUL.topnavi li ul li p {
                    font-size: 0.778vw;
                    line-height: 1.317vw;
                    color: #000;
                }
                #Master #Nav #navUL.topnavi li ul li p.business_p {
                    font-size: 0.924vw;
                    line-height: 1.256vw;
                    color: #fd3e61;
                }

#Master #Nav #navUL.topnavi li  ul li a{
	color:#000 !important;
	text-decoration:none !important;
	display:block;
    font-size:1vw;
}


/* This will trigger the CSS */
/* transition animation on hover */

        #Master #Nav #navUL.topnavi li:hover ul {
            max-height: 21.429vw; /* Increase when adding more dropdown items */
            min-height: 13.168vw;
        }

#Master #Nav #navUL.topnavi li.Prod ul{
	width:43.429vw;
	left:74%;
	margin-left:-21.786vw;
	top:5.714vw;
    height:21.429vw;
}

#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem .table{
	padding-left:2.857vw;margin-bottom:0;
}
#Master #Nav #navUL.topnavi li.Prod ul li:last-child .table{
	padding-left:1.429vw;
}

#Master #Nav #navUL.topnavi li.Prod ul li{
	margin-top:1.429vw;
}
#Master #Nav #navUL.topnavi li.Prod ul li.prodddlitem img{width:5vw; margin:0; margin-right:0.357vw;}
#Master #Nav #navUL.topnavi li.Prod ul li:first-child{
    padding:1.429vw 0 0px 0;
}
#Master #Nav #navUL.topnavi li.Prod ul li:nth-child(3){
	margin-top:1.429vw;
	position:relative;
}
#Master #Nav #navUL.topnavi li.Prod ul li a{
	padding:0.914vw 0 0 0;
}

#Master #Nav #navUL.topnavi li.Prod  ul li .ddltitle{
    padding:0.6vw 0;
    font-size:1.143vw;
}

#Master #Nav #navUL.topnavi li.Prod  ul li .ddltoptitle{
    padding:0;
    font-size:1.286vw;
}
        #Master #Nav #navUL.topnavi li ul li div {
            padding: 1.595vw 1.063vw;
        }


}


@media only screen and (max-width: 1329px) {
    #Master #Nav #navUL.topnavi li {
        padding-left: 7%;
    }
}
@media only screen and (max-width: 1279px) {
  
    #Master #Nav .bg {
        width: 92%;
        margin: 0 4%;
    }
}
@media only screen and (max-width: 1080px) {
  
#Master #Nav #navUL.topnavi li{padding:25px 0 0 5%}

}


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

    #Master #Nav {
        height:56px;
        padding:0;
        top:10px;
    }

/*#Master #navClear {
    clear: both;
    height: 56px;
}*/

}

@media screen and (max-width: 767px) {
    #Master #Nav {
        top: 0px;
        opacity: 1;
    }
    #Master.onScroll #Nav {
        opacity: 1;
    }
}