body {
	color: #303030 !important;
}

/*
    General setings
*/
.header {
 /* background:url('/images/okayfreedom/gradient.png') transparent center top repeat-x;*/
  background: white;
  /* box-shadow: 5px 7px 30px -28px black;*/
  margin:0 !important;
  padding:0 !important;
}

.footer {
  background: #006ee0;
  margin:0px 0 0 0 !important;
}

.prefooter {
  background: #006ee0;
  margin:0px !important;
  padding:25px 0 0 0 !important;
  color: #fff;
}

ul#prefooter a {
  color: #fff;
}

#partnerlinks a {
  color: #fff;
  text-decoration: none;
}

.footer .grid-child {
  padding:0px 0 25px 0 !important;

}
#mod-custom112.grid-child {
    width: 100% !important;
}

/*
    Logo
*/
a.brand-logo img {
  position:relative;
  top:-13px;
  /*left:-7px;*/
  left:0px;
}

/*
    Footer
*/
#partnerlinks {
  text-align: center;
}
#partnerlinks ul {
  list-style: none;
  display: flex;
  justify-content: center;
}


#mainmenu, #prefooter, #partnerlinks {
  width:100% !important;
  flex-direction: row;
  justify-content: center;
  margin:5px 0 0 0;
}

#mainmenu ul, #prefooter ul {
  list-style: none;
  display: block;
}

#mainmenu li:before, #prefooter li:before, #partnerlinks li:before {
  content: "|";
  padding: 0 .5em;
}

#mainmenu li:first-child:before, #prefooter li:first-child:before, #partnerlinks li:first-child:before {
  content: "";
}

/*
    BEGIN Hero Mobile
*/
@media (max-width: 750px) {

  /* rearrange price boxes */
  #plan1 {order:3;}
  #plan2 {order:1;}
  #plan3 {order:2;}

  #hero-de {
    height:826px;
    width:100%;
    background: #006ee0;
    /* background:url('/images/okayfreedom/background.webp') black center top no-repeat; */
  }

  #slogan {
    font-size:54px;
    line-height:66px !important;
    font-weight:bold;
    color: rgba(255, 255, 255, 1);
    text-shadow:0px 0px 5px #202020;
    text-align:center;
    line-height:75px;
    position:relative;
    top:20px;
    right:0px;
    margin:0px;
  }

  #features {
    display:none;
  }

  #features i {
      margin: 0 10px 0 0;
      font-size:22px;
  }

  #box1 > #button1 > a, #box2 > #button2 > a {
    color: #ffffff;
    text-decoration: none;
    height:50px !important;
    padding:5px;
  }

  #box1, #box2 {
    position:relative;
    text-align:center;
    min-width:340px;
    height:267px;
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.5s ease;
    border-radius:8px;
    border:1px solid #ffffff;
    padding:15px 15px 25px 15px;
  }

  #box1:hover, #box2:hover {
    background-color: rgba(255, 255, 255, 1) !important;
  }

  #box1 {
    top:100px;
    left:20px;
  }

  #box2 {
    top:388px;
    left:-320px;
    height:270px;
  }

  #title1, #title2 {
    text-transform:uppercase;
    font-size:29px;
    font-weight:bold;
    color:#000000;
    padding:10px 0 0px 0;
  }

  #desc1, #desc2 {
    font-size:26px;
    font-weight:normal;
    color:#000000;
    margin:0px 0 10px 0;
  }

  #button1, #button2 {
    text-transform:uppercase;
    font-size:26px;
    color:#000000;
    margin:30px 0 30px 0;
    border:0px solid #ffffff;
    border-radius:6px;
    color:#ffffff;
    background-image:url(/images/okayfreedom/bg_headerbutton.png);
    padding:10px 0 10px 0;
    text-decoration: none;
  }

  #button1 { background:#006ee0; }
  #button2 { background:#14a733; }

  /* Price Badge */
  #discount a {
    display:none;
    position: absolute;
    top:377px;
    left:535px;
    display: inline-block;
  }

  #discount img {
    display:none;
    width:150px;
    height:150px;
    position: sticky;
    top:20px;
    transition: transform .2s;
  }

  #discount img:hover { transform: scale(1.2); }

}
/*
  END Hero Mobile
*/

/*
    BEGIN Hero Desktop
*/
@media (min-width: 750px) {

  #hero-de {
    height:940px;
    width:100%;
    background:url('/images/okayfreedom/background.webp') black center top no-repeat;
  }

  .slide-right, .slide-left { width:100%; }
  .slide-right { animation: 1s slide-right; }
  @keyframes slide-right { from { margin-left: -100%; } to { margin-left: 0%; } }
  .slide-left { animation: 2s slide-left; padding: 0 100px 0 0; }
  @keyframes slide-left { from { margin-left: 100%; } to { margin-left: 0%; } }

  #slogan {
    width:100%;
    font-size:60px;
    font-weight:bold;
    color: rgba(255, 255, 255, 1);
    text-shadow:0px 0px 5px #202020;
    text-align:right;
    line-height:75px;
    position:relative;
    top:40px;
    right:0px;
    margin-right:25px;
  }

  #features {
    width:100%;
    display:block;
    font-size:26px;
    font-weight:normal;
    color: rgba(255, 255, 255, 1);
    text-shadow:0px 0px 5px #202020;
    text-align:left;
    line-height:32px;
    position:relative;
    top:80px;
    left:0px;
    margin-left:25px;
  }

  #features i {
      margin: 0 10px 0 0;
      font-size:22px;
  }

  #box1 > #button1 > a, #box2 > #button2 > a {
    color: #ffffff;
    text-decoration: none;
    height:50px;
    padding:5px;
  }

  #box1, #box2 {
    position:relative;
    text-align:center;
    width:250px;
    height:300px;
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.5s ease;
    border-radius:8px;
    border:1px solid #ffffff;
    padding:15px 15px 25px 15px;
  }

  #box1:hover, #box2:hover {
    background-color: rgba(255, 255, 255, 1) !important;
  }

  #box1 {
    top:220px;
    left:20px;
    width:280px;
  }

  #box2 {
    top:220px;
    left:60px;
    width:330px;
  }

  #title1, #title2 {
    text-transform:uppercase;
    font-size:29px;
    font-weight:bold;
    color:#000000;
    padding:10px 0 10px 0;
  }

  #desc1, #desc2 {
    font-size:26px;
    font-weight:normal;
    color:#000000;
    margin:10px 0 10px 0;
  }

  #button1, #button2 {
    text-transform:uppercase;
    font-size:26px;
    color:#000000;
    margin:30px 0 30px 0;
    border:0px solid #ffffff;
    border-radius:6px;
    color:#ffffff;
    background-image:url(/images/okayfreedom/bg_headerbutton.png);
    padding:10px 0 10px 0;
    text-decoration: none;
  }

  #button1 { background:#006ee0 }
  #button2 { background:#14a733; padding-right:25px; }

  /* Price Badge */
  #discount a {
    position: absolute;
    top:377px;
    left:595px;
    display: inline-block;
  }

  #discount img {
      width:150px;
      height:150px;
      position: sticky;
      top:20px;
      transition: transform .2s;
  }

  #discount img:hover { transform: scale(1.2); }

}
/*
  END Hero Desktop
*/



/*
    No border around content
*/
.card { border: none; }

/*
    Main Features
*/
.features_main, .vpnlocations_main {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin:0 0 25px 0;
}

.features_main > div, .vpnlocations_main > div {
  flex:300px;
  text-align: center;
  padding: 10px;
}

div.vpnlocations_main > div > div > p > img {
    box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.25);
    padding:0 !important;
    width:120px !important;
    height:75px !important;
}



/*
    Recommendations
*/
.recommendations {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin:0 0 25px 0;
}

.recommendations > div {
  flex:100px;
  text-align: center;
  padding: 10px;
}

img.recommendations {
  height:50px !important;
}

.container-header {
    height:90px;
}



/*
    Language Switcher
*/

div.container-search {
    position:relative;
    top:-90px;
}

div.mod-languages .dropdown-menu {
    padding:0;
}

div.mod-languages button.dropdown-toggle:focus {
    color:#353b41 !important;
    background: #f9fafb !important;
}

div.mod-languages button.dropdown-toggle:not(:focus) {
    color:#353b41 !important;
    background: transparent !important;
}

div.mod-languages button.dropdown-toggle {
    transition: 0.5s ease;
}

div.mod-languages button.dropdown-toggle:hover {
    color:#353b41 !important;
    background: #f9fafb !important;
}

div.mod-languages button {
    width:200px !important;
    padding: 10px 25px 10px 50px;
    text-align: left;
}

div.mod-languages img {
    width:26px;
    height:18px;
    position:relative;
    top:-1px;
    border:1px solid #f0f0f0;
    border-radius: 2px;
}

div.mod-languages > div > ul {
}

div.mod-languages > div > ul > li {
    margin:0 !important;
    padding:0 !important;
}

div.mod-languages > div > ul > li > a {
    color:#353b41;
    width:198px;
    display: block;
    padding: 10px 25px 10px 50px;
    text-align:left;
}

/*
    Download / Offers Button
*/

a#preise, a#pricing {
    position: relative;
    top:-45px;
    left:-255px;
}
a#download {
    position: relative;
    top:-90px;
    left:-425px;
}


a#preise, a#pricing, a#download {
    float:right;
    cursor: pointer;
    height:45px !important;
    border:1px solid #ced4da;
    padding:10px 25px 10px 25px;
    color:#353b41;
    border-radius: 5px;
    transition: 0.5s ease;
    text-decoration: none;
    text-align: center;
}

a#preise, a#pricing {
    width:160px;
}
a#download {
    width:245px;
    text-align: center;
}

a#preise:hover, a#pricing:hover, a#download:hover {
    border:1px solid #585e64 !important;
    background: #f9fafb;
}


hr#divider {
    margin: 50px 0 50px 0;
}




/*
    Price Boxes
*/

.pricing {
  margin: 0 0 50px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .plan {
    background-color: #fff;
    padding: 30px;
    margin: 40px 20px 20px 20px;
    border-radius: 5px;
    text-align: center;
    transition: 0.3s;
    width:350px;

    h2 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    .price {
      margin-bottom: 1rem;
      font-size: 30px;
    }

    ul.features {
      list-style-type: none;
      text-align: left;

      li {
        margin: 5px 5px 5px -25px;

        .fa {
           margin-right: 5px;
        }

        .fa-check-circle {
          color: #14a733;
        }

        .fa-times-circle {
          color: #eb4d4b;
        }
      }
    }

    button.blue {
      border: none;
      width: 100%;
      padding: 12px 35px;
      margin-top: 1rem;
      margin-bottom:5px;
      background-color: #1920eb;
      background-color: #006ee0;

      color: #fff;
      border-radius: 5px;
      font-size: 26px;
      white-space:nowrap;
    }

    button.green {
      border: none;
      width: 100%;
      padding: 12px 35px;
      margin-top: 1rem;
      margin-bottom:5px;
      background-color: #14a733;
      color: #fff;
      border-radius: 5px;
      font-size: 26px;
      white-space:nowrap;
    }


    &.popular {
      border: 2px solid #6ab04c;
      position: relative;
      transform: scale(1.08);

      span {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #6ab04c;
        color: #fff;
        padding: 4px 20px;
        font-size: 18px;
        border-radius: 5px;
        white-space: nowrap;
      }
    }

    & {
      box-shadow: 5px 7px 67px -28px rgba(0, 0, 0, 0.37);
    }

    &:hover {
      box-shadow: 5px 7px 67px -28px black;
    }
  }
}



.com-content-article {
    margin:50px 0 50px 0;
}

.prefooter .grid-child {
  display: block;
}


.fa {
    margin-right:10px;
}

#back-top {
    border:0;
    color:#fff;
    background: #14a733;
}


#redim-cookiehint {
    background: rgba(0, 0, 0, 0.8);
    padding:10px 10px 5px 10px !important;
}

a#cookiehintsubmit.btn, a#cookiehintsubmitno.btn {
    border-radius: 5px !important;
    width: 100px;
    padding: 0 !important;
    margin: 0 !important;
}

#cookiehintsubmit.btn {
    background: red;
}

#cookiehintsubmitno.btn {
}

#redim-cookiehint .cookiebuttons .btn {
    border-radius: 5px !important;

    padding: 0 !important;
    margin: 0 5px !important;

    background: #14a733;
}

/* fix: button in hero not clickable*/
body > header > div.grid-child.container-nav {
}

#box1, #box2 {
}	

p.textdownload {
    text-align:center;
}

p.textdownload a {
    text-decoration: none;
    color:#006ee0 !important;
}

.downloadcounter {
    padding:5px 0 0 0;
    /*font-weight:bold;*/
    color:rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    font-size: 18px;
}