/* 

- Name: megamenu.js - style.css

- Version: 1.0

- Latest update: 29.01.2016.

- Author: Mario Loncarek

- Author web site: http://marioloncarek.com

*/





/* ––––––––––––––––––––––––––––––––––––––––––––––––––

Body - not related to megamenu

–––––––––––––––––––––––––––––––––––––––––––––––––– */



body {

    font-family: 'Source Sans Pro', sans-serif;

}



/** {

    box-sizing: border-box;

}*/



a {

    

}







/* ––––––––––––––––––––––––––––––––––––––––––––––––––

megamenu.js STYLE STARTS HERE

–––––––––––––––––––––––––––––––––––––––––––––––––– */





/* ––––––––––––––––––––––––––––––––––––––––––––––––––

Screen style's

–––––––––––––––––––––––––––––––––––––––––––––––––– */







.menu-container {

    width: 80%;

    margin: 0 auto;

   background:#000;

}





.menu-mobile {

    display: none;

    padding: 14px;

	text-decoration:none; font-size:19px

}



.menu-mobile:after {

    content: "\f394";

    font-family: "Ionicons";

    font-size: 2.5rem;

    padding: 0;

    float: right;

    position: relative;

    top: 50%;

    -webkit-transform: translateY(-25%);

    -ms-transform: translateY(-25%);

    transform: translateY(-25%);

}



.menu-dropdown-icon:before {

    content: "\f489";

    font-family: "Ionicons";

    display: none;

    cursor: pointer;

    float: right;

    padding: 1.5em 2em;

    background: #fff;

    color: #333;  position:absolute;right:0; 

}



.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: #e9e9e9;*/

    padding: 0;

    margin: 0;

}

.menu > ul > li a img{margin-bottom:10px}

.menu ul li:hover  a >span >img{transform: rotateY(360deg) translate(0%);

            -moz-transform: rotateY(360deg) translate(0%);

            -webkit-transform: rotateY(360deg) translate(0%);

            -o-transform: rotateY(360deg) translate(0%);

            -ms-transform: rotateY(360deg) translate(0%);

            -khtml-transform: rotateY(360deg) translate(0%);

            transition: all 1s ease;

            -moz-transition: all 1s ease;

            -webkit-transition: all 1s ease;

            -o-transition: all 1s ease;

            -ms-transition: all 1s ease;

            -khtml-transition: all 1s ease;  }

.menu > ul > li a {

    text-decoration: none;

    padding: 0 12px 17px 7px;

    display: block; text-align:center; /*border-right:1px solid #ddd;*/ font-size:13px; text-transform:uppercase; color:#e7bc00

}



.menu > ul > li:hover {

    background: #B72027;

}



.menu > ul > li > ul {

    display: none;

    width: 100%;

    background: #B72027;

    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: 24%;

    background: none;

    float: left; 

}



.menu > ul > li > ul > li a {

    color: #fff;

    padding: 2px 0px;

    width: 95%;

    display: block;

    border-bottom: 1px solid #ccc; text-align:left;border-right:none; font-size:13px; 

}



.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: 4px 0;

    margin: 0;

    font-size: .8em;

}



.menu > ul > li > ul > li > ul > li a {

    border: 0; text-transform:capitalize;

}



.menu > ul > li > ul.normal-sub {

    width: 300px;

    left: 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 screen and (max-width: 959px) {

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

    .menu-container {

        width: 100%; background:#000

    }

    .menu-mobile {

        display: block;

    }

    .menu-dropdown-icon:before {

        display: block; border:1px solid  #F0F0F0

    }

    .menu > ul {

        display: none;

    }

    .menu > ul > li {

        width: 100%;

        float: none;

        display: block;

    }

    .menu > ul > li a {

        padding: 1.5em;

        width: 100%;

        display: block; text-align:left; 

    }

	

	.menu > ul > li a span{display:none}

    .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 > ul > li > ul > li > ul > li a{

        float: none;/* color:#f00*/

    }

    .menu .show-on-mobile {

        display: block;

    }

}