/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/



.menu-container {
    width: 100%;
    margin: 0 auto;
    background: transparent;
}

.menu-mobile {
    display: none;
    padding:0px 0px;
    margin-top: -1px;
}

.menu-mobile:after {
    content: url(../images/menu/hamburger.svg);
    padding: 0;
    float: right;
    position: relative;
    top: 10px;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
    color: #000;
}


.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    background: transparent;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    display: block;
}

.menu > ul > li:hover {
    background: transparent;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: auto;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 1079px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
        position: relative;
        top: 9px;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
       /* float: none;*/
        display: block;
    }
    .menu > ul > li a {
        padding: 0;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
        height: 100vh;
        overflow: scroll;
        padding: 20px 0px 100px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
		border-top: 1px solid #f5f5f5;
    }

    .m-menu > ul > li > ul.normal-sub.m-menu-submenu {
        border: 1px solid transparent !important;
    }
}

.m-menu, .m-menu a{ font-family: var(--font-main); color: #fff;}
/* .m-menu > ul > li > ul.normal-sub.m-menu-submenu{
	width: auto;
	left: auto;
	background: #fff;
    border: 1px solid #CACACA;
    padding: 0;
} */

.cnt-btn{ position: absolute; right:60px; display: inline-block; width: auto !important; z-index: 9; }
.cnt-btn .btn{ background: #F5F5F5; border-radius: 2px; color: #000; font-size: 12px; font-weight: 500; padding: 5px 10px; border: 0; }
.cnt-btn .btn:hover{ background: linear-gradient(90.61deg, #EA7D30 -0.92%, #845EF7 134.45%); color: #fff;}

@media (max-width: 1079px) {
    .cnt-btn{ top: 9px;}
    .mobile--menu{ position: absolute; right: 0px; top: 0px; display: inline-block; width: 100%;}
    .show-on-mobile{ background: #fff; animation: growDown 700ms ease-in-out forwards; transform-origin: top center; 
		max-width: 100%; top: 50px; right: 10px; left: 0; position: absolute !important;}
	
	@keyframes growDown {
		0% {opacity: 0;}
		100% {opacity: 1; }
		}
    .show-on-mobile .mlink{ 
        color: #000; 
        font-size: 16px;
       	font-weight: 500;
		text-align: left;
    }
	
    .m-menu .parent-link{ padding: 0px 20px 20px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 20px;}
    .m-menu .parent-link.hasSub4{ border-bottom: 0;}

    .m-menu > ul > li > ul.normal-sub.m-menu-submenu {border: 0px solid #CACACA;}
    .m-menu-item {margin-bottom: 10px !important;}
    .m-menu-item:nth-last-of-type(1){margin-bottom: 20px;}
}

@media (min-width: 1080px) {
    .cnt-btn{ position: absolute; right:0px; top: 9px;}
    .cnt-btn .btn{font-size: 16px; padding: 5px 20px;}
    .mobile--menu{ display: none;}
    .mlink{ padding: 15px 22px 25px; font-size: 16px; font-weight: 500;}
    .mlink.only-dropdown{ position: relative;}
    .mlink.only-dropdown::after {content: url(../images/menu/mmenu-darrow.svg); position: absolute; right: 8px; top: 12px;}
    .mlink:hover, .mlink.active{ color: #fff; position: relative;}
    .mlink:hover:before, .mlink.active:before{ content: ""; width: 40px; height: 4px; background: linear-gradient(90.61deg, #EA7D30 -0.92%, #845EF7 134.45%); border-radius: 30px; position: absolute; left: 24px; bottom: 15px;}
    .menu-container{ position: relative;}
    .menu.m-menu { float: right; margin-right: 150px;}
    .m-menu > ul > li > ul.m-menu-submenu {background: #FFFFFF; box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05); padding: 0px 0px 0px 20px;}
}

@media (min-width: 1200px) {
    .mlink{ padding: 15px 24px 25px;}
}

@media (min-width: 1366px) {
    .mlink{ padding: 15px 30px 25px; font-size: 18px;}
    .mlink.only-dropdown::after {right: 15px;}
    .mlink:hover:before, .mlink.active:before{width: 60px; left: 30px;}
}


/*Submenus*/
.submenu--box{border-radius: 5px; padding: 20px; margin-top: 20px; margin-bottom: 0px; width: 100%;}
.submenu--box h4{ position: relative; color: #000; font-size: 16px; font-weight: 500; line-height: 20px; margin-bottom: 20px; padding-left: 30px;}
.submenu--box h4:before{ content: ""; background: #ccc; width: 24px; height: 24px; position: absolute; left: 0; top: 0px; display: inline-block; border-radius: 6px;}
.submenu--box ul{ padding: 0px 0px 0px 0px; margin: 0;}
.submenu--box ul li{ list-style-type: none; margin-bottom: 5px;}
.submenu--box ul li a{ color: #000; font-size: 14px; transition: all 300ms linear;}
.submenu--box ul li a:hover{ color: rgba(0, 0, 0, 0.6);}
.dmbox1{ background: rgba(234, 125, 48, 0.1);}
.dmbox2{ background: rgba(132, 94, 247, 0.1)}
.dmbox3{ background: rgba(236, 105, 106, 0.1)}
.submenu--box.dmbox1 h4:before{ background: rgba(234, 125, 48, 1);}
.submenu--box.dmbox2 h4:before{ background: rgba(132, 94, 247, 1);}
.submenu--box.dmbox3 h4:before{ background: rgba(236, 105, 106, 1);}
.tcbox1{ background: rgba(49, 168, 254, 0.1);}
.tcbox2{ background: rgba(132, 94, 247, 0.1);}
.tcbox3{ background: rgba(236, 105, 106, 0.1);}
.submenu--box.tcbox1 h4:before{ background: rgba(49, 168, 254, 1);}
.submenu--box.tcbox2 h4:before{ background: rgba(132, 94, 247, 1);}
.submenu--box.tcbox3 h4:before{ background: rgba(236, 105, 106, 1);}
.debox1{ background: rgba(132, 94, 247, 0.1);}
.debox2{ background: rgba(49, 168, 254, 0.1);}
.debox3{ background: rgba(234, 125, 48, 0.1);}
.submenu--box.debox1 h4:before{ background: rgba(132, 94, 247, 1);}
.submenu--box.debox2 h4:before{ background: rgba(49, 168, 254, 1);}
.submenu--box.debox3 h4:before{ background: rgba(234, 125, 48, 1);}
.cobox1{ background: rgba(230, 179, 61, 0.1);}
.cobox2{ background: rgba(49, 168, 254, 0.1);}
.cobox3{ background: rgba(236, 105, 106, 0.1);}
.submenu--box.cobox1 h4:before{ background: rgba(230, 179, 61, 1);}
.submenu--box.cobox2 h4:before{ background: rgba(49, 168, 254, 1);}
.submenu--box.cobox3 h4:before{ background: rgba(236, 105, 106, 1);}

@media (max-width: 1079px) {
    .submenu-form-col, .submenu-form-col.d-flex{ display: none !important;}
    .submenu--box h4 br{ display: none;}
    .menu > ul > li > ul.m-menu-submenu{ padding: 0; background: #fff;}
    .dm-submenu.mshow, .tech-submenu.mshow, .des-submenu.mshow, .content-submenu.mshow, .others-submenu.mshow{ display: block;}
    .hasSub > a, .hasSub1 > a, .hasSub2 > a, .hasSub3 > a, .hasSub4 > a{ position: relative; display: block;}
    .hasSub > a:before, .hasSub1 > a:before, .hasSub2 > a:before, .hasSub3 > a:before, .hasSub4 > a:before {
    content: url(../images/menu/up.svg);
    position: absolute;
    right: 10px;
    top: 0;
    line-height: 15px;
    cursor: pointer;
    color: #333;
    }
    .hasSub.micon > a:before{content: url(../images/menu/down.svg);}
    .hasSub1.micon > a:before{content: url(../images/menu/down.svg);}
    .hasSub2.micon > a:before{content: url(../images/menu/down.svg);}
    .hasSub3.micon > a:before{content: url(../images/menu/down.svg);}
    .hasSub4.micon > a:before{content: url(../images/menu/down.svg);}

    .xs-mt-20{ margin-top: 20px;}

    /*others submenu mobile*/
    .others-row{ padding: 10px 0px;}
    .others--box{ color: #000; margin: 10px 0px;}
    .others--box p{ padding-right: 60px; font-size: 14px; font-weight: 500; line-height: 18px;}
    .others--box a.obbox{ padding: 20px; border-radius: 10px; color: #000 !important;}
    .obbox1{background: url(../images/menu/ell-green.svg) no-repeat right bottom #DFFCE4;}
    .obbox2{background: url(../images/menu/ell-yellow.svg) no-repeat right bottom rgba(230, 179, 61, 0.1);}
    .obbox3{background: url(../images/menu/ell-violet.svg) no-repeat right bottom rgba(132, 94, 247, 0.1);}
    .obbox4{background: url(../images/menu/ell-red.svg) no-repeat right bottom rgba(236, 105, 106, 0.1);}
    .obbox5{background: url(../images/menu/ell-blue.svg) no-repeat right bottom rgba(49, 168, 254, 0.1);}
    .obbox6{background: url(../images/menu/ell-orange.svg) no-repeat right bottom rgba(234, 125, 48, 0.1);}
    .others--box .obbox h4{ font-size: 16px; font-weight: bold; position: relative; display: inline-block;}
    .others--box .obbox h4:after{ position: absolute; right: -15px; top: 2px;}
    .others--box .obbox1 h4:after{ content: url(../images/menu/arr-green.svg);}
    .others--box .obbox2 h4:after{ content: url(../images/menu/arr-yellow.svg);}
    .others--box .obbox3 h4:after{ content: url(../images/menu/arr-violet.svg);}
    .others--box .obbox4 h4:after{ content: url(../images/menu/arr-red.svg);}
    .others--box .obbox5 h4:after{ content: url(../images/menu/arr-blue.svg);}
    .others--box .obbox6 h4:after{ content: url(../images/menu/arr-orange.svg);}
    /*others submenu mobile*/
}



@media (min-width: 1080px) {
    .submenu--box{margin-bottom: 20px;}
    .submenu--box h4{font-size: 20px; line-height: 24px; padding-left: 50px;}
    .submenu--box h4:before{width: 40px; height: 40px; top: 3px;}
    .des-submenu .submenu--box h4{ padding-top: 10px;}
    .content-submenu .submenu--box h4{ padding-top: 10px;}
    .m-menu > ul > li > ul.dm-submenu {max-width: 1440px; width: 1000px; right: -150px; left:auto;} 
    .m-menu > ul > li > ul.tech-submenu{max-width: 1440px; width: 1000px; right: -150px; left:auto;}
    .m-menu > ul > li > ul.des-submenu{max-width: 1440px; width: 1000px; right: -150px; left:auto;}
    .m-menu > ul > li > ul.content-submenu{max-width: 1440px; width: 1000px; right: -150px; left:auto;}
    .m-menu > ul > li > ul.others-submenu{max-width: 1440px; width: 1000px; right: -150px; left:auto ;}
    .others-row{ display: grid; grid-template-columns: auto auto; padding: 30px 20px;}
    .others--box{ color: #000; margin: 10px 10px;}
    .others--box p{ padding-right: 60px; font-size: 14px; font-weight: 500; line-height: 18px;}
    .others--box a.obbox{ padding: 20px; border-radius: 10px; color: #000 !important;}
    .obbox1:hover{background: url(../images/menu/ell-green.svg) no-repeat right bottom #DFFCE4;}
    .obbox2:hover{background: url(../images/menu/ell-yellow.svg) no-repeat right bottom rgba(230, 179, 61, 0.1);}
    .obbox3:hover{background: url(../images/menu/ell-violet.svg) no-repeat right bottom rgba(132, 94, 247, 0.1);}
    .obbox4:hover{background: url(../images/menu/ell-red.svg) no-repeat right bottom rgba(236, 105, 106, 0.1);}
    .obbox5:hover{background: url(../images/menu/ell-blue.svg) no-repeat right bottom rgba(49, 168, 254, 0.1);}
    .obbox6:hover{background: url(../images/menu/ell-orange.svg) no-repeat right bottom rgba(234, 125, 48, 0.1);}
    .others--box .obbox h4{ font-size: 16px; font-weight: bold; position: relative; display: inline-block;}
    .others--box .obbox:hover h4:after{ position: absolute; right: -15px; top: 2px;}
    .others--box .obbox1:hover h4:after{ content: url(../images/menu/arr-green.svg);}
    .others--box .obbox2:hover h4:after{ content: url(../images/menu/arr-yellow.svg);}
    .others--box .obbox3:hover h4:after{ content: url(../images/menu/arr-violet.svg);}
    .others--box .obbox4:hover h4:after{ content: url(../images/menu/arr-red.svg);}
    .others--box .obbox5:hover h4:after{ content: url(../images/menu/arr-blue.svg);}
    .others--box .obbox6:hover h4:after{ content: url(../images/menu/arr-orange.svg);}
}

@media (min-width: 1366px) {
    .m-menu > ul > li > ul.dm-submenu {max-width: 1440px; width: 1300px; right: -200px; left:auto;}
    .m-menu > ul > li > ul.tech-submenu {max-width: 1440px; width: 1300px; right: -200px; left:auto;}
    .m-menu > ul > li > ul.des-submenu {max-width: 1440px; width: 1300px; right: -200px; left:auto;}
    .m-menu > ul > li > ul.content-submenu {max-width: 1440px; width: 1300px; right: -200px; left:auto;}
    .m-menu > ul > li > ul.others-submenu {max-width: 1440px; width: 1300px; right: -200px; left:auto;}
    .submenu--box ul li a{ font-size: 16px; font-weight: normal;}
}

@media (min-width: 1440px) {
    .m-menu > ul > li > ul.dm-submenu {width: 1300px; right: -170px;}
    .m-menu > ul > li > ul.tech-submenu {width: 1300px; right: -170px;}
    .m-menu > ul > li > ul.des-submenu {width: 1300px; right: -170px;}
    .m-menu > ul > li > ul.content-submenu {width: 1300px; right: -170px;}
    .m-menu > ul > li > ul.others-submenu {width: 1300px; right: -170px;}
}

@media (min-width: 1600px) {
    .m-menu > ul > li > ul.dm-submenu {width: 1400px; right: -138px;}
    .m-menu > ul > li > ul.tech-submenu {width: 1400px; right: -138px;}
    .m-menu > ul > li > ul.des-submenu {width: 1400px; right: -138px;}
    .m-menu > ul > li > ul.content-submenu {width: 1400px; right: -138px;}
    .m-menu > ul > li > ul.others-submenu {width: 1400px; right: -138px;}
}


/*Menu Form*/
.submenu--formbox .getquote-form ::placeholder { color: #fff !important; opacity: 1 !important; }
.submenu--formbox .getquote-form :-ms-input-placeholder {color: #fff !important;}
.submenu--formbox .getquote-form ::-ms-input-placeholder {color: #fff !important;}
.submenu--formbox .form-control:focus, .submenu--formbox .form-select:focus{ box-shadow: unset; border-color: unset; background-color: rgba(255, 255, 255, 0.1); color: #fff;}
.submenu--formbox select {color: #fff !important;}
.submenu--formbox select option {color: #000 !important;}
.submenu--formbox{ background: #302357; padding: 20px 20px;}
.submenu--formbox .getquote-form{ position: relative;}
.submenu--formbox .btn{ background: #F5F5F5; color: #000; padding: 3px 20px; font-size: 16px; font-weight: 500;}
.submenu--formbox .btn:hover{ background: #F5F5F5; color: #000;}
.submenu--formbox .form-control{ background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; color: #000;  width: 100%; border: unset;}
.submenu--formbox .form-select{ background-image: url(../images/menu/mmenu-darrow.svg); background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; color: #000; background-size: auto; border: unset;}

@media (max-width: 1079px) {
  .mobile-menu-form .btn-blue{ padding: 10px 30px; border-radius: 0;}  
  .mobile-menu-form{ padding-top: 30px;}
  #menugetQuote .submenu--formbox h4{ color: #fff;}
  #menugetQuote .submenu--formbox{ padding: 0;}
  #menugetQuote .modal-header{padding: 15px 15px 0px 0px; border-bottom: none; }
  #menugetQuote.modal{ top: 47px;}
  #menugetQuote .modal-content{background: #302357; border-radius: 0;}
  #menugetQuote .modal-body{ padding-top: 0;}
  #menugetQuote .btn-close{ background: url(../images/menu/close.svg) no-repeat; opacity: 1;}
  #menugetQuote .modal-dialog{ margin-left: 0; margin-right: 0;}
}

@media (min-width: 1080px) {
    .mobile-menu-form{ display: none;}
}