/*--------------------------------------------------------------*/
/* MAIN MENU ---------------------------------------------------*/
/*--------------------------------------------------------------*/

/* FIRST LEVEL */
.topbar ul.topbar-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 96px;
}
.topbar ul.topbar-menu > li {
	height: 96px;
	position: relative;
}
.topbar ul.topbar-menu > li + li:before {
	content: '';
	width: 1px;
	height: 25px;
	display: block;
	position: absolute;
	top: calc(50% - 12.5px);
	left: 0;
	background-color: #ccc;
    -webkit-transform: rotate(17deg);
	    -ms-transform: rotate(17deg);
            transform: rotate(17deg);
}
.topbar ul.topbar-menu > li > a {
	display: block;
	margin: 0 -15px;
	padding: 0 30px;
	position: relative;
}
.topbar ul.topbar-menu > li > a:before,
.topbar ul.topbar-menu > li > a:after {
	content: '';
	position: absolute;
	top: 0;
	opacity: 0;
}
.topbar ul.topbar-menu > li > a:hover:before,
.topbar ul.topbar-menu > li > a:hover:after,
.topbar ul.topbar-menu > li.topbar-open > a:before,
.topbar ul.topbar-menu > li.topbar-open > a:after {
	opacity: 1;
}
.topbar ul.topbar-menu > li > a:before {
	left: 0;
	border-bottom: 96px solid #283c7f;
	border-left: 30px solid transparent;
}
.topbar ul.topbar-menu > li > a:after {
	right: 0;
	border-top: 96px solid #283c7f;
	border-right: 30px solid transparent;
}
.topbar ul.topbar-menu > li span {
    font-weight: 700;
    font-size: 20px;
    height: 96px;
    padding: 0 15px;
    color: #283c7f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.topbar ul.topbar-menu > li span:after {
	content: attr(data-title);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 5px;
	letter-spacing: 1px;
	color: #aaa;
}
.topbar ul.topbar-menu > li > a:hover > span, 
.topbar ul.topbar-menu > li.topbar-open > a > span {
	color: #fff;
	background-color: #283c7f;
}
.topbar ul.topbar-menu > li span em {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 5px;
	color: #aaa;
}

/* SUB MENU*/
.topbar ul.topbar-menu > li .topbar-submenu {
    position: absolute;
    left: -15px;
    right: 15px;
    z-index: 5;
    background-color: #283c7f;
    visibility: hidden;
    opacity: 0;
}
@media screen and (min-width:1201px) {
	.topbar ul.topbar-menu > li.topbar-open .topbar-submenu {
		visibility: visible;
		opacity: 1;
	}
}
.topbar ul.topbar-menu > li .topbar-submenu ul {
	padding: 10px;
	text-align: center;
	font-size: 16px;
}
.topbar ul.topbar-menu > li .topbar-submenu ul li + li {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.topbar ul.topbar-menu > li .topbar-submenu ul li a {
	color: #fff;
}

/* TRANSITIONS */
.topbar ul.topbar-menu > li span,
.topbar ul.topbar-menu > li span:hover,
.topbar ul.topbar-menu > li.topbar-open span,
.topbar ul.topbar-menu > li .topbar-submenu,
.topbar ul.topbar-menu > li.topbar-open .topbar-submenu,
.topbar ul.topbar-menu > li > a:before,
.topbar ul.topbar-menu > li > a:after,
.topbar ul.topbar-menu > li > a:hover:before,
.topbar ul.topbar-menu > li > a:hover:after,
.topbar ul.topbar-menu > li.topbar-open > a:before,
.topbar ul.topbar-menu > li.topbar-open > a:after   {
	-webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}




.topbar ul.topbar-menu>li>.line-btn {
    margin: 20px 15px;
    padding: 16px 40px;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
    display: block;
    border-radius: 99px;
    background: #283c7f;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #283c7f 73%, #00b3e0 86%, #283c7f 100%);
    background-size: 1600%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}

.topbar ul.topbar-menu>li>.line-btn:hover {
    background: linear-gradient(135deg, #FF7A1C 73%, #fcd92a 86%, #FF7A1C 100%);
    background-size: 1200%;

    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 74%
    }

    50% {
        background-position: 100% 27%
    }

    100% {
        background-position: 0% 74%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 74%
    }

    50% {
        background-position: 100% 27%
    }

    100% {
        background-position: 0% 74%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 74%
    }

    50% {
        background-position: 100% 27%
    }

    100% {
        background-position: 0% 74%
    }
}

.topbar ul.topbar-menu>li:nth-last-child(2)>a:after {
    opacity: 0;
}

.topbar ul.topbar-menu>li:nth-last-child(2):hover>a:after {
    opacity: 1;
}

.topbar ul.topbar-menu>li>.line-btn:hover:before,
.topbar ul.topbar-menu>li>.line-btn:hover:after,
.topbar ul.topbar-menu>li:last-of-type:before {
    opacity: 0;
}

@media screen and (max-width: 1300px) {
    .topbar ul.topbar-menu>li>.line-btn {
        display: none;
    }
}