#shopHead {
height: 55px;
background-color: #21314d;
}
#shopLoginBurger {
float: right;
margin-right: 12px;
}
.nav-header-icons {
display: none;
}

.footer_icons {
float: left;
margin-right: 15px;
font-size: 20px;
}
.frn_topnavi {
background-color: #21314d;
width: 220px;
position: absolute;
height: 100vh;
z-index: 2;
display: block;
right: -220px;
top: 0;
-webkit-transition: right 1s; /* Safari */
transition: right 1s;
}
.nav-active .frn_topnavi {
right:0;
}
.shopHeadTop, .shopHeadContent {
height:100%;
}
#frnKopfLeiste {
list-style-type: none;
padding: 0;
}
#produkte_np {
color: #828a9a;
padding-left: 60px!important;
height: 55px!important;
font-weight: 600;
font-size: 16px;
position:relative;
}
#frnKopfLeiste #home_icon {
display: none;
}
#frnKopfLeiste {
margin-top: 0px;
}
#produkte_np a {
pointer-events: none;
}
#frnKopfLeiste li {
padding: 0px 40px 0px 20px;
height:40px;
display: inline-flex;
align-items:center;
width: 180px;
cursor: pointer;
}

#produkte_np:hover {
background-color: #21314d!important;
}
#frnKopfLeiste li:hover
{
background-color: #525e74;
}

#frnKopfLeiste li>a {
color: #ffffff;
text-decoration: none;
list-style-type: none;
font-weight: 600;
font-size: 18px;
}
#burgerIcon {
right:12px;
position: absolute;
top: 15px;
}
#productText {
position: absolute;
color: #ffffff;
right:70px;
display: none;
top: 15px;
}
#login_np{
font-size: 18px;
font-weight: 600;
pointer-events: none;
padding-top: 32px!important;
padding-bottom: 14px!important;
}
#frnKopfLeiste #login_np a {
color: #828a9a;
}
#mail_plus_np:after {
content: 'Plus';
font-size: 10px;
color: #ffffff;
position: relative;
margin-bottom: 5px;
margin-left: 3px;
}

#produkte_np:before {
content: '';
position: absolute;
left: 16px;
width: 27px;
height: 4.4px;
border-radius: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-sand-transform:rotate(45deg);
background-color: #85BB32;
top:50%;
}
#produkte_np:after {
content: '';
position: absolute;
left: 16px;
width: 27px;
height: 4.4px;
border-radius: 4px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-sand-transform:rotate(-45deg);
background-color: #85BB32;
top:50%;
}

#freenet-logo {
position: relative;
height: 50px;
top: 12px;
left: 12px;
}
#frnLogo {
display: none;
}
#frnKopfLogo {
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.nav-active #frnKopfLogo {
opacity: 0.5;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
#basic_np:before,
#mail_plus_np:before,
#start_np:before,
#classic_np:before {
font-weight: 600;
content: 'Mail';
font-size: 18px;
color: #ffffff;
position: relative;
margin-right: 5px;
}
#frnKopfLeiste li.active {
background-color: #535e74;
}
/*<------------------------------Footer ------------------------->*/
#footerContent {
background-color: #21314d;
}
#footerContentWrapper {
height: 132px;
padding-bottom: 17px;
}
.footerColumn {
padding: 17px 0px 0px 10px ;
}
.footerColumn2 .footer_icon_container {
margin-left: 12px;
}
.footerColumnText {
width:100%;
}
.footerColumnText div>a {
float: left;
padding-right: 18px;
padding-bottom: 11px;
text-decoration: none;
color: #ffffff;
}
.footerColumnText:after, .footerColumn2:after {
display: block;
margin: 0px 20px;
clear: both;
content:'';
}
#footerTexte {
display: block;
}
#onlinesicherheitFooter #footnotes{
background-color:#fff;
color:#828a9a;
font-size:16px;
padding:0 0 80px;
font-weight:300;
}
#onlinesicherheitFooter #footnotesContent{
margin:0 auto;
max-width: 698px;
padding-left: 20px;
padding-right: 20px;
}
#onlinesicherheitFooter .note{
height:21px;
overflow:hidden;
cursor:pointer;
margin-bottom:10px
}
#onlinesicherheitFooter .note a{
color:#929292
}
#onlinesicherheitFooter .footnoteopen {
float:right;
margin-left:6px;
font-size: 10px;
}
#onlinesicherheitFooter .footnoteclose{
float:right;
margin-left:6px;
display:none;
font-size:10px;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#onlinesicherheitFooter .footnotetext{
cursor:pointer
}
#onlinesicherheitFooter .footnotetext{
padding-right:50px
}
#shopHead .icon-emig-big,
#shopHead .icon-cloud-big {
display: none;
}
.loginButtonContainer {
margin-right: 20px;
z-index: 1;
display: none;
}
#home_icon a {
text-indent: -45px;
overflow: hidden;
width: 40px;

}
#home_icon:hover a {

}
.loginButton {
width:120px;
padding-left: 20px;
display: inline-flex;
align-items:center;
background-color: #84bc34;
color: #ffffff;
font-size: 18px;
line-height: 32px;
font-weight: 600;
/*padding-top: 5px;*/
/*padding-bottom: 5px;*/
cursor: pointer;
}
.loginButton .topicarrow:before,
.loginButton .topicarrow:after {
background-color: #ffffff;
}
.loginsWrapper ul {
padding: 0px 0px;
margin: 0px;
width:140px;
}
.loginsWrapper ul li {
list-style-type: none;
display: inline-flex;
align-items: center;
padding: 10px 0;
font-size: 18px;
color: #ffffff;
font-weight: 600;
width:120px;
padding-left: 20px;
cursor: pointer;
}

.loginsWrapper ul li a,
.loginsWrapper ul li a:visited {
color: #ffffff;
}
.loginsWrapper ul li:hover {
background-color: #84bc34;
}
.loginsWrapper {
background-color: #21314d;
position: absolute;
display: none;
z-index: 1;
}
.loginButtonContainer:hover .loginsWrapper {
display: block;
}
.loginButton .topicarrow {
left:30%;
bottom:5px;
}
.loginsWapper {
position: absolute;
}
#onlinesicherheitFooter #footnotes .topicarrow:before,
#onlinesicherheitFooter #footnotes .topicarrow:after {
height:3px;
}
#footerTexteContent {
margin: 20px 20px;
}
#mailSecurityWrapperText {
margin: 0 20px;
padding-bottom: 21px;
}
#mailSecurityWrapperText h4 {
font-size: 20px;
font-weight: 600;
color: #21314d;
padding-top: 24px;
padding-bottom:16px;
}
#mailSecurityWrapperText h2 {
font-size: 20px;
font-weight: 600;
color: #21314d;
text-align: center;
}
#mailSecurityWrapperText h5 {
font-size: 20px;
font-weight: 600;
color: #21314d;
padding-top: 24px;
padding-bottom: 16px;
}

#desktopfooter #footerGroup, #desktopFooterContentWrapper, .footerTexteContentWrapper {
display:none;
}

.footer_icon_container .footer_icons{
color: #ffffff;
}

.cloud #onlinesicherheitFooter,
.mailSoftware #onlinesicherheitFooter {
display: none;
}

#domainLoginBox, #freenetLoginBox {
width:342px;
position:absolute;
right:470px;
z-index:6;
top:61px;
border-right: 2px solid #378cce;
background-color: #202020;
color: #aaa;
padding: 30px 20px;
display:none;
}

#wunschdomain.placeholder,
#mailPowerLocalpart.placeholder,
#domainLoginBox .placeholder,
#freenetLoginBox .placeholder,
.placeholder {
color:#aaa;
}

#domainLoginBox .registrationElements {
line-height:44px;
height: 44px;
font-size:18px;
vertical-align:bottom;
padding-left:20px;
}

#domainLoginBox .registrationElements,
#freenetLoginBox .registrationElements {
line-height: 44px;
height: 44px;
font-size: 18px;
vertical-align: bottom;
padding-left: 20px;
}

#frn_DomainLoginName {
width: 218px;
}

#domainLoginBoxSubmit,
#freenetLoginBoxSubmit {
border: 0;
width: 100%;
height:44px;
line-height: 44px;
font-size: 18px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.mailDomainButtons, .mailCloudButton {
height: 54px;
line-height: 54px;
background-color: #378cce;
font-size:20px;
text-transform: uppercase;
color: #fff;
text-align: center;
font-weight: bold;
cursor: pointer;
}

.domainLoginBoxHelpLink {
margin:15px 0px 25px 0px;
}

.domainLoginBoxHelpLink a, .domainLoginBoxHelpLink a:visited{
font-size:14px;
color:#aaa;
font-weight: normal;
text-decoration: none;
}

.registrationElements {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border: 0;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
color: #333:
font-size: 20px;
height: 54px;
line-height:54px;
outline:0;
}

#frn_DomainLoginPassword, #passtextDomain, #password, #passtext {
width: 324px;
}

#domainLoginBoxDomainwahl {
margin-bottom: 10px
}

#domainTld {
width: 94px;
}

#username {
width: 324px;
margin-bottom:10px
}

#freenetEntry,
#domainEntry {
display:none;
}

.mailDomain #freenetEntry,
.mailDomain #domainEntry {
display:block;
}

.mailDomain #classicEntry,
.mailDomain #basicEntry {
display:none;
}

.avirapro1 #onlinesicherheitFooter #footnotes,
.avirapro2 #onlinesicherheitFooter #footnotes{
padding: 15px 0 35px 0;
}
/* <----------------- Test ---------------------->
/*Navigation Desktop */
@media screen and (min-width: 768px) {
    #basic_np:before,
#mail_plus_np:before,
#start_np:before,
#classic_np:before {
display: none;
}
    #freenet-logo {
top: 24px;
left: 24px;
}
    #mailSecurityWrapperText {
width:698px;
}
    #footerTexteContent {
width: 728px;
margin: 30px auto;
}
    #shopHead {
height: 86px;
}
    #burgerIcon {
right:20px;
position: absolute;
top: 32px;
}
    #productText {
top: 30px;
}

#freenet-logo {
height: 38px;
width: 190px;
}
    #produkte_np {
padding-left: 60px!important;
height: 86px!important;
}


#footerContentWrapper {
height: 82px;
padding-bottom: 17px;
}
    .footerColumn {
padding: 21px 0px 0px 20px;
}
    .footerColumnText {
float: left;
width: 46%;
}
    .footerColumnText div:nth-child(4) {
clear: both;
}
    .footerColumn2 {
float: right;
}
    #mailSecurityWrapperText {
margin: 0 auto;
padding-bottom: 80px;
}
}
@media screen and (min-width: 1280px) {


    .loginarrow:before {
font-family: "mail-icons";
content: '\e98d';
padding-left: 20px;
font-size: 8px;
top: -2px;
}
    #mail_plus_np:after {
text-transform: uppercase;
}
    #mailSecurityWrapperText {
width:1240px;
padding:80px 0 30px;
}
    #mailSecurityWrapperText h2 {
font-size:39px;
font-weight: 400;
}
    .frn_topnavi {
background-color: #ffffff;
position: static;
width: 100%;
height: 40px;
padding-bottom: 5px;
margin: 0 auto;
box-sizing: border-box;
border-bottom: 5px #e4e4e4 solid;
}
    #frnKopfLeiste {
margin: 0 auto;
width: 1240px;
position: relative;
}
    #frnKopfLeiste:after {
display: block;
clear: both;
content: '';
}
    #frnKopfLeiste li {
margin: 0px 2px;
height: 35px;
padding: 0px 20px;
float: left;
width: fit-content;
width: -moz-fit-content;
border-bottom: 5px solid #85BB32;
    }
    #frnKopfLeiste li:hover {
background-color: #84bc34;
}
    #frnKopfLeiste li:hover > a,
#frnKopfLeiste li:hover:after {
color: #ffffff;
}
    #frnKopfLeiste #home_icon {
padding: 0 0px;
display: inline-flex;
}
    #frnKopfLeiste li > a {
color: #21314d;
font-size: 14px;
text-transform: uppercase;
}
    #frnKopfLeiste #produkte_np,
#frnKopfLeiste #login_np,
#frnKopfLeiste #login_mail_basic,
#frnKopfLeiste #login_mail_start_classic {
display: none;
}
    #burgerIcon {
display: none;
}
    #mail_plus_np:after {
margin-bottom: 0px;
color: #21314d;
}
    #shopHead {
display: inline-flex;
align-items: center;
width: 100%;
height: 76px;
}
    #navbarIconContainer {
position: relative;
min-width: 220px;
margin-right: 60px;
float: right;
}
    #shopHead .icon-emig-big {
float: right;
display: block;
height: 42px;
width: 105px;
}
    #shopHead .icon-cloud-big {
margin-right: 40px;
float: right;
display: block;
height: 42px;
width: 74px;
}
    #freenet-logo {
margin: 0 auto;
position: relative;
height: 36px;
top: initial;
left: 0;
float: left;
background-size: contain;
width: 212px;
}
    .loginButtonContainer {
display: block;
float: right;
margin-right:0;
}
    #footerTexteContent {
width: 1240px;
margin: 0 auto;
}
    #desktopfooter {
display: block;
background-color: #21314d;
padding-top: 40px;
padding-bottom: 30px;
}
    #desktopFooterContentWrapper {
display:block;
width: 1240px;
margin: 0 auto;
}

.footerTexteContentWrapper {
display:block;
}
    .footerTexteContentWrapper {
padding-top: 50px;
background-color: #f7f7f7;
}
    #desktopfooter #footerGroup {
display:block;
clear: both;
width: 1240px;
margin:0 auto;
color: #84bc34;
padding-top: 50px;
padding-bottom: 12px;
}
    #desktopFooterContentWrapper .footerColumn,
#desktopFooterContentWrapper .footerColumn2 {
padding:0;
}
    #desktopFooterContentWrapper .footerColumnText {
width: 12%;
}
    #footerTexte {
display: none;
}

#onlinesicherheitFooter #footnotes {
font-size: 16px;
padding: 0 0 76px 0;
}
    .mail-icons-arrow-lawnotes {
color: #21314d;
}
    #onlinesicherheitFooter .note {
height:21px;
margin-bottom: 10px;
}
    #onlinesicherheitFooter .note.headline {
font-size: 20px;
padding-bottom: 15px;
}
    #onlinesicherheitFooter #footnotes #footnotesContent {
max-width: 1240px;
}
    .footerColumn2 {
padding-right: 85px;
}
    .footerColumn2 .footer_icon_container {
margin-left:0;
padding-bottom: 15px;
}
    .nav-header-icons {
display: block;
}
    #frnKopfLeiste li.active {
background-color: #84bc34;
}
    #frnKopfLeiste li.active > a,
#frnKopfLeiste li.active:after{
color: #ffffff;
}
    .contentZone {
width: 1240px;
margin: 0 auto;
}
    .footer_icons {
float: right;
    }
    .mail-icons-paypal {
margin-right: 0;
}
    #footerTexteContent p:last-child {
margin-bottom:0;
padding-bottom: 15px;
}
    #navbarIconContainer {
position: relative;
min-width: 220px;
margin-right: -240px;
}

.avirapro1 #onlinesicherheitFooter #footnotes,
.avirapro2 #onlinesicherheitFooter #footnotes{
padding: 15px 0 35px 0;
}
}