.primary-navigation-wrapper{
position: fixed;
left: 100px;
top: 0px;
width: calc(100% - 330px);
display: flex;
flex-wrap: wrap;
justify-content: center;
left: 90px;
}
#headnavigation{
height: 100px;
}
header#masthead #primary-navigation>div>ul>li>a{
font-family: Poppins;
}
header#masthead #primary-navigation .sub-menu a{
font-family: Poppins;
font-weight: 400;
}
header#masthead #primary-navigation .sub-menu{
max-width: 300px;
}
header#masthead {
padding: 0px;
z-index: 2000;
width: 100%;
top: 0px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 ); height: 70px;
}
header#masthead{
padding: 0px;
}
header#masthead .masthead-scroll-background{
width: 100%;
height: 100%;
bottom: 100%;
position: absolute;
transition: all 0.3s;
top: 0px;
}
header#masthead.sticky .masthead-scroll-background{
bottom: 0;
}
header#masthead.fixed {
position: fixed;
background: none;
}
header#masthead.sticky{
min-height: 80px;
}
header#masthead #primary-navigation>div>ul>li>a {
color: #fff;
line-height: 100%;
letter-spacing: 1px;
color: #fff;
display: block;
line-height: 80%;
color: rgba(0,0,0,0);
font-size: 15px;
letter-spacing: 2px;
color: #fff;
}
#primary-navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.cta-button{
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
padding: 11px 25px 14px 25px;
width: 100%;
width: 200px;
line-height: 100%;
color: #fff;
border-radius: 9999px;
color: #fff;
display: block;
text-align: left;
font-size: 14px;
letter-spacing: 1px;
position: absolute;
right: 30px;
top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
font-family: Poppins; font-weight: 400;
}
.cta-button .button-arrow-right-icon{
display: block;
width: 20px;
height: 20px;
mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-images/right-arrow.svg);
-webkit-mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-images/right-arrow.svg);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-position: center center;
mask-size: contain;
-webkit-mask-size: contain;
background-color: #fff;
display: flex;
flex-wrap: wrap;
position: absolute;
right: 25px;	
}
#menu-mainmenu{
display: flex;
flex-wrap: wrap;
}
header#masthead #primary-navigation>div>ul>li .sub-menu li a{
color: #ccc;
font-size: 14px;
line-height: 130%;
}
header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a{
display: flex;
}
@media (min-width: 1201px){
header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a .menu-title:after {
content: "";
background: #fff;
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-images/next.svg);
mask-size: contain;
mask-position: center center;
transform: rotate(90deg);
top: 2px;
position: relative;
}
header#masthead #primary-navigation>div>ul>li:hover .sub-menu{
display: block;
position: absolute;
}
header#masthead #primary-navigation>div>ul>li:hover .sub-menu .sub-menu{
display: none !important;
}
#primary-navigation ul li a:hover{
color:  #FF6700;
text-shadow: none;
animation-duration: 0.5s;
animation-name: hoverLetter;
-webkit-text-stroke: 0px;
color: #FF6700;
}
#primary-navigation ul li a:hover {
color: #D82A64;
text-shadow: none;
color: rgba(0,0,0,0);
}
#primary-navigation ul li li a:hover {
color: #fff;
}
.cta-button,
.cta-button .button-arrow-right-icon,
.cta-button .text{
transition: all 0.5s;
}
.cta-button:hover .text{
order: 2;
position: relative;
margin-left: 0px;
}
.cta-button:hover .button-arrow-right-icon{
right: 170px;
}
.cta-button:hover .text{
margin-left: 30px;
}
header#masthead #primary-navigation>div>ul>li .sub-menu{
background: #111;
}
header#masthead #primary-navigation>div>ul>li>a:after{
content: "";
width: 0%;
height: 2px;
display: block;
position: absolute;
bottom: 15px;
left: 30px;
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
transition: all 0.3s;
}
header#masthead #primary-navigation>div>ul>li>a:hover:after{
width: calc( 100% - 60px);
}
header#masthead #primary-navigation>div>ul>li.current-menu-item>a:after{
width: calc( 100% - 60px);
}
}
@media (max-width: 1200px){
header#masthead #primary-navigation>div>ul>li{
padding-top: 40px;
padding-bottom: 40px;
}
header#masthead #primary-navigation>div>ul>li.menu-item-has-children{
padding-top: 33px;
padding-bottom: 33px;
}
#primary-navigation .toggle-subemenu{
top: 0px !important;
}
#primary-navigation ul li{
align-items: center;
}
header#masthead #primary-navigation .sub-menu li a{
padding-top: 10px;
padding-bottom: 10px;
}
header#masthead #primary-navigation li a{
padding-top: 0px;
padding-bottom: 0px;
}
header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a{
width: calc(100% - 30px);
}
#primary-navigation > div > ul > li.current-menu-item > .toggle-subemenu{
top: 0px;
}
header#masthead #primary-navigation>div>ul>li>a{
width: 100%;
text-align: left;
}
#primary-navigation .toggle-subemenu{
top: 30px;
}
header#masthead #primary-navigation>div>ul>li>a{
font-size: 20px !important;
}
#logo{
width: 70px;
}
#primary-navigation,
#menu-mainmenu{
display: block;
}
.cta-button{
right: 100px;
font-size: 14px;
padding: 11px 25px 12px 25px;
} #additional-top-menu{
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 100%;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
padding-top: 20px;
justify-content: center;
}
#additional-top-menu ul li a{
font-weight: normal;
display: block;
line-height: 100%;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: #fff;
letter-spacing: 0px;
text-transform: uppercase;
letter-spacing: 4px;
}
#additional-top-menu ul li:last-child a{
border-right: none;
}
#additional-top-menu ul li a{
border-right: 1px solid #fff;
}
.toggle-menu {
right: 30px;
top: 26px;
width: 40px;
height: 25px;
position: absolute;
cursor: pointer;
transition: 0.5s;
}
.toggle-menu .stroke-1,
.toggle-menu .stroke-2,
.toggle-menu .stroke-3 {
height: 3px;
width: 100%;
background-color: #fff;
position: absolute;
transition: 0.5s;
border-radius: 9999px;
}
.toggle-menu .stroke-1 {	
top: 0px;
}
.toggle-menu .stroke-2 {	
top: 50%;
transform: translateY(-50%);
width: 80%;
}
.toggle-menu:hover .stroke-2{
width: 100%;
}
.toggle-menu .stroke-3 {
bottom: 0px;
}
.close{
color: #fff;
border-radius: 9999px;
line-height: 100%;
width: 40px;
height: 40px;
text-align: center;
text-shadow: 3px 3px rgba(0,0,0,1);
margin: auto auto;
cursor: pointer;
position: fixed;
margin-bottom: 20px;
right: 30px;
top: 25px;
display: none;
z-index: 1;
}
.close:after{
content: "";
display: block;
height: 90%;
width: 90%;
position: absolute;
background-color: #fff;
-webkit-mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-images/close-nav.svg);
mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-images/close-nav.svg);
-webkit-mask-size: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); 
}
@keyframes rotateClose{
from {  transform: rotate(0deg);}
to   {  transform: rotate(270deg);}
}
.close.rotate{
animation-name: rotateClose;
animation-duration: 1s;
}
.close .close-content{
position: absolute;
left: 50%; 
top: 50%;
transform: translate(-50%, -50%);
text-indent: -9999px;
}
.primary-navigation-wrapper{
position: fixed;
width: 100%;
height: 100vh;
left: 0px;
top: 0px;	
padding: 40px 20px;
overflow: scroll;
-ms-overflow-style: none; scrollbar-width: none; display: flex;
flex-wrap: wrap;
justify-content: center;
background-size: cover;
display: none; background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); }
.primary-navigation-wrapper::-webkit-scrollbar{
display: none;
}
@keyframes sliderUpPrimary{
from {  top: 80px; }
to   {  top: 0px; }
}
@keyframes slideLeft{
from {  right: -50px; }
to   {  right: 0px; }
}
.primary-navigation-wrapper .primary-navigation-content{	
align-self: center;	
z-index: 1;
}
.primary-navigation-wrapper .slideUp{
position: relative;
animation-name: sliderUpPrimary;
animation-duration: 1s;
}
#primary-navigation{
width: 680px;
}
#primary-navigation ul li{
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
position: relative;
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #fff;
}
#primary-navigation ul li li{
border-bottom: none;
}
#primary-navigation ul li a {
color: #fff;
line-height: 100%;
font-size: 20px;
letter-spacing: 1px;
color: #fff;
display: block;
color: rgba(0,0,0,0);
letter-spacing: 2px;
color: #fff;
text-shadow: none;
color: rgba(0,0,0,0);
padding-left: 0px !important;
}
#primary-navigation ul li li{
margin-bottom: 10px;
margin-top: 10px;
}
#primary-navigation ul li.current-menu-item a{
}
#primary-navigation  li.menu-item-has-children a{
flex-grow: 2;
text-align: left;
}
#phone-head{
position: absolute;
right: 100px;
top: 0px;
height: 80px;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 100%;
font-size: 20px;
letter-spacing: 1px;
padding-top: 5px;
}
#phone-head a{
color: #fff;
display: flex;
font-size: 16px;
line-height: 100%;
align-items: center;
}
#phone-head a:after{
content: "";
width: 40px;
height: 40px;
display: block;
background: #fff;
-webkit-mask-image:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-css/images/phone-3.svg);
mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fa-layout/fa-css/images/phone-3.svg);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: contain;
mask-size: contain;
margin-left: 10px;
}
#primary-navigation ul li .sub-menu{
width: 100%;
display: none;
padding-top: 20px;
padding-bottom: 10px;
}
.toggle-subemenu.active + .sub-menu{
display: flex !important;
flex-wrap: wrap !important;
}
#primary-navigation ul li{
width: 100%;
}
#primary-navigation>div>ul>li>ul>li>a{
font-size: 16px !important;
color: #fff !important;
}
#primary-navigation ul li .sub-menu li:last-child a:after{
content: "";
}
@keyframes hoverLettersub{
0%  { letter-spacing: 5px; }
50% { letter-spacing: 3px; }
100% {  letter-spacing: 4px; }
}
#primary-navigation ul li .sub-menu li:last-child{
margin-bottom: 0px;
}
#primary-navigation .toggle-subemenu{
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
@keyframes togglelinerotate{
from{height: 100%;}
to{height: 0;}
}
@keyframes fillline1{
from{height: 0%;}
to{height: 100%;}
}
@keyframes fillline2{
from{width: 0%;}
to{width: 100%;}
}
#primary-navigation .toggle-subemenu .line1{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
width: 2px;
height: 90%;
transform: translate(-50%, -50%);
position: relative;
}
#primary-navigation .toggle-subemenu.active .line1{
animation: togglelinerotate 0.3s;
animation-fill-mode: forwards;
}
#primary-navigation .toggle-subemenu .line2{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
height: 2px;
width: 90%;
transform: translate(-50%, -50%);
}
#primary-navigation .toggle-subemenu.active{
transform: rotate(-180deg);
}
.primary-navigation-call{
color: #fff;
text-align: center;
margin-top: 40px;
letter-spacing: 5px;
text-transform: uppercase;
}
.primary-navigation-call a{
color: #fff;
}
.primary-navigation-call a:hover{
color: #FF6700;
}
#top{
background: #222;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#top li{
display: inline-block;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid #fff;
line-height: 100%;
}
#top li:last-child{
border-right: none;
}
#top a{
color: #fff;
display: inline-block;
line-height: 100%;
letter-spacing: 2px;
text-transform: uppercase;
}
}
@media(max-width: 768px){
.primary-navigation-wrapper .primary-navigation-content{
width: calc(100% - 40px);	
}
#primary-navigation{
width: 100%;	
}
#primary-navigation>div>ul>li>a{
font-size: 50px;
}
.toggle-subemenu.active + .sub-menu{
display: block !important;
}
#primary-navigation ul li .sub-menu a:after{
content: "";
}
}
@media(max-width: 480px){
#primary-navigation .toggle-subemenu{
margin-left: 0px;
}
.nav-logo,
#logo{
padding-left: 5px;
width: 60px;
}
#primary-navigation ul li li a{
letter-spacing: 1px !important;
}
.primary-navigation-call{
font-size: 14px;
letter-spacing: 1px;
}
.primary-navigation-wrapper{
padding-top: 55px;
}
}
@media(max-width: 420px){
.primary-navigation-wrapper{
padding-left: 10px;
padding-right: 10px;
}
#primary-navigation .toggle-subemenu{
width: 20px;
height: 20px;
}
}
@media(max-width: 350px){
#primary-navigation ul li a{
padding-top: 18px;
padding-bottom: 18px;
}
}