* {
  outline: none;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/* ================================================================== */
/* This file has a mobile-to-tablet, and tablet-to-desktop breakpoint */
/* ================================================================== */
@media (max-width: 400px) {
}
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.grid-container:before,
.grid-5:before,
.mobile-grid-5:before,
.tablet-grid-5:before,
.grid-10:before,
.mobile-grid-10:before,
.tablet-grid-10:before,
.grid-15:before,
.mobile-grid-15:before,
.tablet-grid-15:before,
.grid-20:before,
.mobile-grid-20:before,
.tablet-grid-20:before,
.grid-25:before,
.mobile-grid-25:before,
.tablet-grid-25:before,
.grid-30:before,
.mobile-grid-30:before,
.tablet-grid-30:before,
.grid-35:before,
.mobile-grid-35:before,
.tablet-grid-35:before,
.grid-40:before,
.mobile-grid-40:before,
.tablet-grid-40:before,
.grid-45:before,
.mobile-grid-45:before,
.tablet-grid-45:before,
.grid-50:before,
.mobile-grid-50:before,
.tablet-grid-50:before,
.grid-55:before,
.mobile-grid-55:before,
.tablet-grid-55:before,
.grid-60:before,
.mobile-grid-60:before,
.tablet-grid-60:before,
.grid-65:before,
.mobile-grid-65:before,
.tablet-grid-65:before,
.grid-70:before,
.mobile-grid-70:before,
.tablet-grid-70:before,
.grid-75:before,
.mobile-grid-75:before,
.tablet-grid-75:before,
.grid-80:before,
.mobile-grid-80:before,
.tablet-grid-80:before,
.grid-85:before,
.mobile-grid-85:before,
.tablet-grid-85:before,
.grid-90:before,
.mobile-grid-90:before,
.tablet-grid-90:before,
.grid-95:before,
.mobile-grid-95:before,
.tablet-grid-95:before,
.grid-100:before,
.mobile-grid-100:before,
.tablet-grid-100:before,
.grid-33:before,
.mobile-grid-33:before,
.tablet-grid-33:before,
.grid-66:before,
.mobile-grid-66:before,
.tablet-grid-66:before,
.clearfix:before,
.grid-container:after,
.grid-5:after,
.mobile-grid-5:after,
.tablet-grid-5:after,
.grid-10:after,
.mobile-grid-10:after,
.tablet-grid-10:after,
.grid-15:after,
.mobile-grid-15:after,
.tablet-grid-15:after,
.grid-20:after,
.mobile-grid-20:after,
.tablet-grid-20:after,
.grid-25:after,
.mobile-grid-25:after,
.tablet-grid-25:after,
.grid-30:after,
.mobile-grid-30:after,
.tablet-grid-30:after,
.grid-35:after,
.mobile-grid-35:after,
.tablet-grid-35:after,
.grid-40:after,
.mobile-grid-40:after,
.tablet-grid-40:after,
.grid-45:after,
.mobile-grid-45:after,
.tablet-grid-45:after,
.grid-50:after,
.mobile-grid-50:after,
.tablet-grid-50:after,
.grid-55:after,
.mobile-grid-55:after,
.tablet-grid-55:after,
.grid-60:after,
.mobile-grid-60:after,
.tablet-grid-60:after,
.grid-65:after,
.mobile-grid-65:after,
.tablet-grid-65:after,
.grid-70:after,
.mobile-grid-70:after,
.tablet-grid-70:after,
.grid-75:after,
.mobile-grid-75:after,
.tablet-grid-75:after,
.grid-80:after,
.mobile-grid-80:after,
.tablet-grid-80:after,
.grid-85:after,
.mobile-grid-85:after,
.tablet-grid-85:after,
.grid-90:after,
.mobile-grid-90:after,
.tablet-grid-90:after,
.grid-95:after,
.mobile-grid-95:after,
.tablet-grid-95:after,
.grid-100:after,
.mobile-grid-100:after,
.tablet-grid-100:after,
.grid-33:after,
.mobile-grid-33:after,
.tablet-grid-33:after,
.grid-66:after,
.mobile-grid-66:after,
.tablet-grid-66:after,
.clearfix:after,
.phone-grid-5:before,
.phone-grid-10:before,
.phone-grid-15:before,
.phone-grid-20:before,
.phone-grid-25:before,
.phone-grid-30:before,
.phone-grid-35:before,
.phone-grid-40:before,
.phone-grid-45:before,
.phone-grid-50:before,
.phone-grid-55:before,
.phone-grid-60:before,
.phone-grid-65:before,
.phone-grid-70:before,
.phone-grid-75:before,
.phone-grid-80:before,
.phone-grid-85:before,
.phone-grid-90:before,
.phone-grid-95:before,
.phone-grid-100:before,
.phone-grid-33:before,
.phone-grid-66:before,
.phone-grid-5:after,
.phone-grid-10:after,
.phone-grid-15:after,
.phone-grid-20:after,
.phone-grid-25:after,
.phone-grid-30:after,
.phone-grid-35:after,
.phone-grid-40:after,
.phone-grid-45:after,
.phone-grid-50:after,
.phone-grid-55:after,
.phone-grid-60:after,
.phone-grid-65:after,
.phone-grid-70:after,
.phone-grid-75:after,
.phone-grid-80:after,
.phone-grid-85:after,
.phone-grid-90:after,
.phone-grid-95:after,
.phone-grid-100:after,
.phone-grid-33:after,
.phone-grid-66:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
.grid-container:after,
.grid-5:after,
.mobile-grid-5:after,
.tablet-grid-5:after,
.grid-10:after,
.mobile-grid-10:after,
.tablet-grid-10:after,
.grid-15:after,
.mobile-grid-15:after,
.tablet-grid-15:after,
.grid-20:after,
.mobile-grid-20:after,
.tablet-grid-20:after,
.grid-25:after,
.mobile-grid-25:after,
.tablet-grid-25:after,
.grid-30:after,
.mobile-grid-30:after,
.tablet-grid-30:after,
.grid-35:after,
.mobile-grid-35:after,
.tablet-grid-35:after,
.grid-40:after,
.mobile-grid-40:after,
.tablet-grid-40:after,
.grid-45:after,
.mobile-grid-45:after,
.tablet-grid-45:after,
.grid-50:after,
.mobile-grid-50:after,
.tablet-grid-50:after,
.grid-55:after,
.mobile-grid-55:after,
.tablet-grid-55:after,
.grid-60:after,
.mobile-grid-60:after,
.tablet-grid-60:after,
.grid-65:after,
.mobile-grid-65:after,
.tablet-grid-65:after,
.grid-70:after,
.mobile-grid-70:after,
.tablet-grid-70:after,
.grid-75:after,
.mobile-grid-75:after,
.tablet-grid-75:after,
.grid-80:after,
.mobile-grid-80:after,
.tablet-grid-80:after,
.grid-85:after,
.mobile-grid-85:after,
.tablet-grid-85:after,
.grid-90:after,
.mobile-grid-90:after,
.tablet-grid-90:after,
.grid-95:after,
.mobile-grid-95:after,
.tablet-grid-95:after,
.grid-100:after,
.mobile-grid-100:after,
.tablet-grid-100:after,
.grid-33:after,
.mobile-grid-33:after,
.tablet-grid-33:after,
.grid-66:after,
.mobile-grid-66:after,
.tablet-grid-66:after,
.clearfix:after,
.phone-grid-5:after,
.phone-grid-10:after,
.phone-grid-15:after,
.phone-grid-20:after,
.phone-grid-25:after,
.phone-grid-30:after,
.phone-grid-35:after,
.phone-grid-40:after,
.phone-grid-45:after,
.phone-grid-50:after,
.phone-grid-55:after,
.phone-grid-60:after,
.phone-grid-65:after,
.phone-grid-70:after,
.phone-grid-75:after,
.phone-grid-80:after,
.phone-grid-85:after,
.phone-grid-90:after,
.phone-grid-95:after,
.phone-grid-100:after,
.phone-grid-33:after,
.phone-grid-66:after {
  clear: both;
}
.grid-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 10px;
  padding-right: 10px;
}
.grid-5,
.mobile-grid-5,
.tablet-grid-5,
.grid-10,
.mobile-grid-10,
.tablet-grid-10,
.grid-15,
.mobile-grid-15,
.tablet-grid-15,
.grid-20,
.mobile-grid-20,
.tablet-grid-20,
.grid-25,
.mobile-grid-25,
.tablet-grid-25,
.grid-30,
.mobile-grid-30,
.tablet-grid-30,
.grid-35,
.mobile-grid-35,
.tablet-grid-35,
.grid-40,
.mobile-grid-40,
.tablet-grid-40,
.grid-45,
.mobile-grid-45,
.tablet-grid-45,
.grid-50,
.mobile-grid-50,
.tablet-grid-50,
.grid-55,
.mobile-grid-55,
.tablet-grid-55,
.grid-60,
.mobile-grid-60,
.tablet-grid-60,
.grid-65,
.mobile-grid-65,
.tablet-grid-65,
.grid-70,
.mobile-grid-70,
.tablet-grid-70,
.grid-75,
.mobile-grid-75,
.tablet-grid-75,
.grid-80,
.mobile-grid-80,
.tablet-grid-80,
.grid-85,
.mobile-grid-85,
.tablet-grid-85,
.grid-90,
.mobile-grid-90,
.tablet-grid-90,
.grid-95,
.mobile-grid-95,
.tablet-grid-95,
.grid-100,
.mobile-grid-100,
.tablet-grid-100,
.grid-33,
.mobile-grid-33,
.tablet-grid-33,
.grid-66,
.mobile-grid-66,
.tablet-grid-66,
.phone-grid-5,
.phone-grid-10,
.phone-grid-15,
.phone-grid-20,
.phone-grid-25,
.phone-grid-30,
.phone-grid-35,
.phone-grid-40,
.phone-grid-45,
.phone-grid-50,
.phone-grid-55,
.phone-grid-60,
.phone-grid-65,
.phone-grid-70,
.phone-grid-75,
.phone-grid-80,
.phone-grid-85,
.phone-grid-90,
.phone-grid-95,
.phone-grid-100,
.phone-grid-33,
.phone-grid-66 {
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}
.grid-parent {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  .mobile-push-5,
  .mobile-pull-5,
  .mobile-push-10,
  .mobile-pull-10,
  .mobile-push-15,
  .mobile-pull-15,
  .mobile-push-20,
  .mobile-pull-20,
  .mobile-push-25,
  .mobile-pull-25,
  .mobile-push-30,
  .mobile-pull-30,
  .mobile-push-35,
  .mobile-pull-35,
  .mobile-push-40,
  .mobile-pull-40,
  .mobile-push-45,
  .mobile-pull-45,
  .mobile-push-50,
  .mobile-pull-50,
  .mobile-push-55,
  .mobile-pull-55,
  .mobile-push-60,
  .mobile-pull-60,
  .mobile-push-65,
  .mobile-pull-65,
  .mobile-push-70,
  .mobile-pull-70,
  .mobile-push-75,
  .mobile-pull-75,
  .mobile-push-80,
  .mobile-pull-80,
  .mobile-push-85,
  .mobile-pull-85,
  .mobile-push-90,
  .mobile-pull-90,
  .mobile-push-95,
  .mobile-pull-95,
  .mobile-push-33,
  .mobile-pull-33,
  .mobile-push-66,
  .mobile-pull-66 {
    position: relative;
  }
  .hide-on-mobile {
    display: none !important;
  }
  .mobile-grid-5 {
    float: left;
    width: 5%;
  }
  .mobile-prefix-5 {
    margin-left: 5%;
  }
  .mobile-suffix-5 {
    margin-right: 5%;
  }
  .mobile-push-5 {
    left: 5%;
  }
  .mobile-pull-5 {
    left: -5%;
  }
  .mobile-grid-10 {
    float: left;
    width: 10%;
  }
  .mobile-prefix-10 {
    margin-left: 10%;
  }
  .mobile-suffix-10 {
    margin-right: 10%;
  }
  .mobile-push-10 {
    left: 10%;
  }
  .mobile-pull-10 {
    left: -10%;
  }
  .mobile-grid-15 {
    float: left;
    width: 15%;
  }
  .mobile-prefix-15 {
    margin-left: 15%;
  }
  .mobile-suffix-15 {
    margin-right: 15%;
  }
  .mobile-push-15 {
    left: 15%;
  }
  .mobile-pull-15 {
    left: -15%;
  }
  .mobile-grid-20 {
    float: left;
    width: 20%;
  }
  .mobile-prefix-20 {
    margin-left: 20%;
  }
  .mobile-suffix-20 {
    margin-right: 20%;
  }
  .mobile-push-20 {
    left: 20%;
  }
  .mobile-pull-20 {
    left: -20%;
  }
  .mobile-grid-25 {
    float: left;
    width: 25%;
  }
  .mobile-prefix-25 {
    margin-left: 25%;
  }
  .mobile-suffix-25 {
    margin-right: 25%;
  }
  .mobile-push-25 {
    left: 25%;
  }
  .mobile-pull-25 {
    left: -25%;
  }
  .mobile-grid-30 {
    float: left;
    width: 30%;
  }
  .mobile-prefix-30 {
    margin-left: 30%;
  }
  .mobile-suffix-30 {
    margin-right: 30%;
  }
  .mobile-push-30 {
    left: 30%;
  }
  .mobile-pull-30 {
    left: -30%;
  }
  .mobile-grid-35 {
    float: left;
    width: 35%;
  }
  .mobile-prefix-35 {
    margin-left: 35%;
  }
  .mobile-suffix-35 {
    margin-right: 35%;
  }
  .mobile-push-35 {
    left: 35%;
  }
  .mobile-pull-35 {
    left: -35%;
  }
  .mobile-grid-40 {
    float: left;
    width: 40%;
  }
  .mobile-prefix-40 {
    margin-left: 40%;
  }
  .mobile-suffix-40 {
    margin-right: 40%;
  }
  .mobile-push-40 {
    left: 40%;
  }
  .mobile-pull-40 {
    left: -40%;
  }
  .mobile-grid-45 {
    float: left;
    width: 45%;
  }
  .mobile-prefix-45 {
    margin-left: 45%;
  }
  .mobile-suffix-45 {
    margin-right: 45%;
  }
  .mobile-push-45 {
    left: 45%;
  }
  .mobile-pull-45 {
    left: -45%;
  }
  .mobile-grid-50 {
    float: left;
    width: 50%;
  }
  .mobile-prefix-50 {
    margin-left: 50%;
  }
  .mobile-suffix-50 {
    margin-right: 50%;
  }
  .mobile-push-50 {
    left: 50%;
  }
  .mobile-pull-50 {
    left: -50%;
  }
  .mobile-grid-55 {
    float: left;
    width: 55%;
  }
  .mobile-prefix-55 {
    margin-left: 55%;
  }
  .mobile-suffix-55 {
    margin-right: 55%;
  }
  .mobile-push-55 {
    left: 55%;
  }
  .mobile-pull-55 {
    left: -55%;
  }
  .mobile-grid-60 {
    float: left;
    width: 60%;
  }
  .mobile-prefix-60 {
    margin-left: 60%;
  }
  .mobile-suffix-60 {
    margin-right: 60%;
  }
  .mobile-push-60 {
    left: 60%;
  }
  .mobile-pull-60 {
    left: -60%;
  }
  .mobile-grid-65 {
    float: left;
    width: 65%;
  }
  .mobile-prefix-65 {
    margin-left: 65%;
  }
  .mobile-suffix-65 {
    margin-right: 65%;
  }
  .mobile-push-65 {
    left: 65%;
  }
  .mobile-pull-65 {
    left: -65%;
  }
  .mobile-grid-70 {
    float: left;
    width: 70%;
  }
  .mobile-prefix-70 {
    margin-left: 70%;
  }
  .mobile-suffix-70 {
    margin-right: 70%;
  }
  .mobile-push-70 {
    left: 70%;
  }
  .mobile-pull-70 {
    left: -70%;
  }
  .mobile-grid-75 {
    float: left;
    width: 75%;
  }
  .mobile-prefix-75 {
    margin-left: 75%;
  }
  .mobile-suffix-75 {
    margin-right: 75%;
  }
  .mobile-push-75 {
    left: 75%;
  }
  .mobile-pull-75 {
    left: -75%;
  }
  .mobile-grid-80 {
    float: left;
    width: 80%;
  }
  .mobile-prefix-80 {
    margin-left: 80%;
  }
  .mobile-suffix-80 {
    margin-right: 80%;
  }
  .mobile-push-80 {
    left: 80%;
  }
  .mobile-pull-80 {
    left: -80%;
  }
  .mobile-grid-85 {
    float: left;
    width: 85%;
  }
  .mobile-prefix-85 {
    margin-left: 85%;
  }
  .mobile-suffix-85 {
    margin-right: 85%;
  }
  .mobile-push-85 {
    left: 85%;
  }
  .mobile-pull-85 {
    left: -85%;
  }
  .mobile-grid-90 {
    float: left;
    width: 90%;
  }
  .mobile-prefix-90 {
    margin-left: 90%;
  }
  .mobile-suffix-90 {
    margin-right: 90%;
  }
  .mobile-push-90 {
    left: 90%;
  }
  .mobile-pull-90 {
    left: -90%;
  }
  .mobile-grid-95 {
    float: left;
    width: 95%;
  }
  .mobile-prefix-95 {
    margin-left: 95%;
  }
  .mobile-suffix-95 {
    margin-right: 95%;
  }
  .mobile-push-95 {
    left: 95%;
  }
  .mobile-pull-95 {
    left: -95%;
  }
  .mobile-grid-33 {
    float: left;
    width: 33.33333%;
  }
  .mobile-prefix-33 {
    margin-left: 33.33333%;
  }
  .mobile-suffix-33 {
    margin-right: 33.33333%;
  }
  .mobile-push-33 {
    left: 33.33333%;
  }
  .mobile-pull-33 {
    left: -33.33333%;
  }
  .mobile-grid-66 {
    float: left;
    width: 66.66667%;
  }
  .mobile-prefix-66 {
    margin-left: 66.66667%;
  }
  .mobile-suffix-66 {
    margin-right: 66.66667%;
  }
  .mobile-push-66 {
    left: 66.66667%;
  }
  .mobile-pull-66 {
    left: -66.66667%;
  }
  .mobile-grid-100 {
    clear: both;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-push-5,
  .tablet-pull-5,
  .tablet-push-10,
  .tablet-pull-10,
  .tablet-push-15,
  .tablet-pull-15,
  .tablet-push-20,
  .tablet-pull-20,
  .tablet-push-25,
  .tablet-pull-25,
  .tablet-push-30,
  .tablet-pull-30,
  .tablet-push-35,
  .tablet-pull-35,
  .tablet-push-40,
  .tablet-pull-40,
  .tablet-push-45,
  .tablet-pull-45,
  .tablet-push-50,
  .tablet-pull-50,
  .tablet-push-55,
  .tablet-pull-55,
  .tablet-push-60,
  .tablet-pull-60,
  .tablet-push-65,
  .tablet-pull-65,
  .tablet-push-70,
  .tablet-pull-70,
  .tablet-push-75,
  .tablet-pull-75,
  .tablet-push-80,
  .tablet-pull-80,
  .tablet-push-85,
  .tablet-pull-85,
  .tablet-push-90,
  .tablet-pull-90,
  .tablet-push-95,
  .tablet-pull-95,
  .tablet-push-33,
  .tablet-pull-33,
  .tablet-push-66,
  .tablet-pull-66 {
    position: relative;
  }
  .hide-on-tablet {
    display: none !important;
  }
  .tablet-grid-5 {
    float: left;
    width: 5%;
  }
  .tablet-prefix-5 {
    margin-left: 5%;
  }
  .tablet-suffix-5 {
    margin-right: 5%;
  }
  .tablet-push-5 {
    left: 5%;
  }
  .tablet-pull-5 {
    left: -5%;
  }
  .tablet-grid-10 {
    float: left;
    width: 10%;
  }
  .tablet-prefix-10 {
    margin-left: 10%;
  }
  .tablet-suffix-10 {
    margin-right: 10%;
  }
  .tablet-push-10 {
    left: 10%;
  }
  .tablet-pull-10 {
    left: -10%;
  }
  .tablet-grid-15 {
    float: left;
    width: 15%;
  }
  .tablet-prefix-15 {
    margin-left: 15%;
  }
  .tablet-suffix-15 {
    margin-right: 15%;
  }
  .tablet-push-15 {
    left: 15%;
  }
  .tablet-pull-15 {
    left: -15%;
  }
  .tablet-grid-20 {
    float: left;
    width: 20%;
  }
  .tablet-prefix-20 {
    margin-left: 20%;
  }
  .tablet-suffix-20 {
    margin-right: 20%;
  }
  .tablet-push-20 {
    left: 20%;
  }
  .tablet-pull-20 {
    left: -20%;
  }
  .tablet-grid-25 {
    float: left;
    width: 25%;
  }
  .tablet-prefix-25 {
    margin-left: 25%;
  }
  .tablet-suffix-25 {
    margin-right: 25%;
  }
  .tablet-push-25 {
    left: 25%;
  }
  .tablet-pull-25 {
    left: -25%;
  }
  .tablet-grid-30 {
    float: left;
    width: 30%;
  }
  .tablet-prefix-30 {
    margin-left: 30%;
  }
  .tablet-suffix-30 {
    margin-right: 30%;
  }
  .tablet-push-30 {
    left: 30%;
  }
  .tablet-pull-30 {
    left: -30%;
  }
  .tablet-grid-35 {
    float: left;
    width: 35%;
  }
  .tablet-prefix-35 {
    margin-left: 35%;
  }
  .tablet-suffix-35 {
    margin-right: 35%;
  }
  .tablet-push-35 {
    left: 35%;
  }
  .tablet-pull-35 {
    left: -35%;
  }
  .tablet-grid-40 {
    float: left;
    width: 40%;
  }
  .tablet-prefix-40 {
    margin-left: 40%;
  }
  .tablet-suffix-40 {
    margin-right: 40%;
  }
  .tablet-push-40 {
    left: 40%;
  }
  .tablet-pull-40 {
    left: -40%;
  }
  .tablet-grid-45 {
    float: left;
    width: 45%;
  }
  .tablet-prefix-45 {
    margin-left: 45%;
  }
  .tablet-suffix-45 {
    margin-right: 45%;
  }
  .tablet-push-45 {
    left: 45%;
  }
  .tablet-pull-45 {
    left: -45%;
  }
  .tablet-grid-50 {
    float: left;
    width: 50%;
  }
  .tablet-prefix-50 {
    margin-left: 50%;
  }
  .tablet-suffix-50 {
    margin-right: 50%;
  }
  .tablet-push-50 {
    left: 50%;
  }
  .tablet-pull-50 {
    left: -50%;
  }
  .tablet-grid-55 {
    float: left;
    width: 55%;
  }
  .tablet-prefix-55 {
    margin-left: 55%;
  }
  .tablet-suffix-55 {
    margin-right: 55%;
  }
  .tablet-push-55 {
    left: 55%;
  }
  .tablet-pull-55 {
    left: -55%;
  }
  .tablet-grid-60 {
    float: left;
    width: 60%;
  }
  .tablet-prefix-60 {
    margin-left: 60%;
  }
  .tablet-suffix-60 {
    margin-right: 60%;
  }
  .tablet-push-60 {
    left: 60%;
  }
  .tablet-pull-60 {
    left: -60%;
  }
  .tablet-grid-65 {
    float: left;
    width: 65%;
  }
  .tablet-prefix-65 {
    margin-left: 65%;
  }
  .tablet-suffix-65 {
    margin-right: 65%;
  }
  .tablet-push-65 {
    left: 65%;
  }
  .tablet-pull-65 {
    left: -65%;
  }
  .tablet-grid-70 {
    float: left;
    width: 70%;
  }
  .tablet-prefix-70 {
    margin-left: 70%;
  }
  .tablet-suffix-70 {
    margin-right: 70%;
  }
  .tablet-push-70 {
    left: 70%;
  }
  .tablet-pull-70 {
    left: -70%;
  }
  .tablet-grid-75 {
    float: left;
    width: 75%;
  }
  .tablet-prefix-75 {
    margin-left: 75%;
  }
  .tablet-suffix-75 {
    margin-right: 75%;
  }
  .tablet-push-75 {
    left: 75%;
  }
  .tablet-pull-75 {
    left: -75%;
  }
  .tablet-grid-80 {
    float: left;
    width: 80%;
  }
  .tablet-prefix-80 {
    margin-left: 80%;
  }
  .tablet-suffix-80 {
    margin-right: 80%;
  }
  .tablet-push-80 {
    left: 80%;
  }
  .tablet-pull-80 {
    left: -80%;
  }
  .tablet-grid-85 {
    float: left;
    width: 85%;
  }
  .tablet-prefix-85 {
    margin-left: 85%;
  }
  .tablet-suffix-85 {
    margin-right: 85%;
  }
  .tablet-push-85 {
    left: 85%;
  }
  .tablet-pull-85 {
    left: -85%;
  }
  .tablet-grid-90 {
    float: left;
    width: 90%;
  }
  .tablet-prefix-90 {
    margin-left: 90%;
  }
  .tablet-suffix-90 {
    margin-right: 90%;
  }
  .tablet-push-90 {
    left: 90%;
  }
  .tablet-pull-90 {
    left: -90%;
  }
  .tablet-grid-95 {
    float: left;
    width: 95%;
  }
  .tablet-prefix-95 {
    margin-left: 95%;
  }
  .tablet-suffix-95 {
    margin-right: 95%;
  }
  .tablet-push-95 {
    left: 95%;
  }
  .tablet-pull-95 {
    left: -95%;
  }
  .tablet-grid-33 {
    float: left;
    width: 33.33333%;
  }
  .tablet-prefix-33 {
    margin-left: 33.33333%;
  }
  .tablet-suffix-33 {
    margin-right: 33.33333%;
  }
  .tablet-push-33 {
    left: 33.33333%;
  }
  .tablet-pull-33 {
    left: -33.33333%;
  }
  .tablet-grid-66 {
    float: left;
    width: 66.66667%;
  }
  .tablet-prefix-66 {
    margin-left: 66.66667%;
  }
  .tablet-suffix-66 {
    margin-right: 66.66667%;
  }
  .tablet-push-66 {
    left: 66.66667%;
  }
  .tablet-pull-66 {
    left: -66.66667%;
  }
  .tablet-grid-100 {
    clear: both;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .push-5,
  .pull-5,
  .push-10,
  .pull-10,
  .push-15,
  .pull-15,
  .push-20,
  .pull-20,
  .push-25,
  .pull-25,
  .push-30,
  .pull-30,
  .push-35,
  .pull-35,
  .push-40,
  .pull-40,
  .push-45,
  .pull-45,
  .push-50,
  .pull-50,
  .push-55,
  .pull-55,
  .push-60,
  .pull-60,
  .push-65,
  .pull-65,
  .push-70,
  .pull-70,
  .push-75,
  .pull-75,
  .push-80,
  .pull-80,
  .push-85,
  .pull-85,
  .push-90,
  .pull-90,
  .push-95,
  .pull-95,
  .push-33,
  .pull-33,
  .push-66,
  .pull-66 {
    position: relative;
  }
  .hide-on-desktop {
    display: none !important;
  }
  .grid-5 {
    float: left;
    width: 5%;
  }
  .prefix-5 {
    margin-left: 5%;
  }
  .suffix-5 {
    margin-right: 5%;
  }
  .push-5 {
    left: 5%;
  }
  .pull-5 {
    left: -5%;
  }
  .grid-10 {
    float: left;
    width: 10%;
  }
  .prefix-10 {
    margin-left: 10%;
  }
  .suffix-10 {
    margin-right: 10%;
  }
  .push-10 {
    left: 10%;
  }
  .pull-10 {
    left: -10%;
  }
  .grid-15 {
    float: left;
    width: 15%;
  }
  .prefix-15 {
    margin-left: 15%;
  }
  .suffix-15 {
    margin-right: 15%;
  }
  .push-15 {
    left: 15%;
  }
  .pull-15 {
    left: -15%;
  }
  .grid-20 {
    float: left;
    width: 20%;
  }
  .prefix-20 {
    margin-left: 20%;
  }
  .suffix-20 {
    margin-right: 20%;
  }
  .push-20 {
    left: 20%;
  }
  .pull-20 {
    left: -20%;
  }
  .grid-25 {
    float: left;
    width: 25%;
  }
  .prefix-25 {
    margin-left: 25%;
  }
  .suffix-25 {
    margin-right: 25%;
  }
  .push-25 {
    left: 25%;
  }
  .pull-25 {
    left: -25%;
  }
  .grid-30 {
    float: left;
    width: 30%;
  }
  .prefix-30 {
    margin-left: 30%;
  }
  .suffix-30 {
    margin-right: 30%;
  }
  .push-30 {
    left: 30%;
  }
  .pull-30 {
    left: -30%;
  }
  .grid-35 {
    float: left;
    width: 35%;
  }
  .prefix-35 {
    margin-left: 35%;
  }
  .suffix-35 {
    margin-right: 35%;
  }
  .push-35 {
    left: 35%;
  }
  .pull-35 {
    left: -35%;
  }
  .grid-40 {
    float: left;
    width: 40%;
  }
  .prefix-40 {
    margin-left: 40%;
  }
  .suffix-40 {
    margin-right: 40%;
  }
  .push-40 {
    left: 40%;
  }
  .pull-40 {
    left: -40%;
  }
  .grid-45 {
    float: left;
    width: 45%;
  }
  .prefix-45 {
    margin-left: 45%;
  }
  .suffix-45 {
    margin-right: 45%;
  }
  .push-45 {
    left: 45%;
  }
  .pull-45 {
    left: -45%;
  }
  .grid-50 {
    float: left;
    width: 50%;
  }
  .prefix-50 {
    margin-left: 50%;
  }
  .suffix-50 {
    margin-right: 50%;
  }
  .push-50 {
    left: 50%;
  }
  .pull-50 {
    left: -50%;
  }
  .grid-55 {
    float: left;
    width: 55%;
  }
  .prefix-55 {
    margin-left: 55%;
  }
  .suffix-55 {
    margin-right: 55%;
  }
  .push-55 {
    left: 55%;
  }
  .pull-55 {
    left: -55%;
  }
  .grid-60 {
    float: left;
    width: 60%;
  }
  .prefix-60 {
    margin-left: 60%;
  }
  .suffix-60 {
    margin-right: 60%;
  }
  .push-60 {
    left: 60%;
  }
  .pull-60 {
    left: -60%;
  }
  .grid-65 {
    float: left;
    width: 65%;
  }
  .prefix-65 {
    margin-left: 65%;
  }
  .suffix-65 {
    margin-right: 65%;
  }
  .push-65 {
    left: 65%;
  }
  .pull-65 {
    left: -65%;
  }
  .grid-70 {
    float: left;
    width: 70%;
  }
  .prefix-70 {
    margin-left: 70%;
  }
  .suffix-70 {
    margin-right: 70%;
  }
  .push-70 {
    left: 70%;
  }
  .pull-70 {
    left: -70%;
  }
  .grid-75 {
    float: left;
    width: 75%;
  }
  .prefix-75 {
    margin-left: 75%;
  }
  .suffix-75 {
    margin-right: 75%;
  }
  .push-75 {
    left: 75%;
  }
  .pull-75 {
    left: -75%;
  }
  .grid-80 {
    float: left;
    width: 80%;
  }
  .prefix-80 {
    margin-left: 80%;
  }
  .suffix-80 {
    margin-right: 80%;
  }
  .push-80 {
    left: 80%;
  }
  .pull-80 {
    left: -80%;
  }
  .grid-85 {
    float: left;
    width: 85%;
  }
  .prefix-85 {
    margin-left: 85%;
  }
  .suffix-85 {
    margin-right: 85%;
  }
  .push-85 {
    left: 85%;
  }
  .pull-85 {
    left: -85%;
  }
  .grid-90 {
    float: left;
    width: 90%;
  }
  .prefix-90 {
    margin-left: 90%;
  }
  .suffix-90 {
    margin-right: 90%;
  }
  .push-90 {
    left: 90%;
  }
  .pull-90 {
    left: -90%;
  }
  .grid-95 {
    float: left;
    width: 95%;
  }
  .prefix-95 {
    margin-left: 95%;
  }
  .suffix-95 {
    margin-right: 95%;
  }
  .push-95 {
    left: 95%;
  }
  .pull-95 {
    left: -95%;
  }
  .grid-33 {
    float: left;
    width: 33.33333%;
  }
  .prefix-33 {
    margin-left: 33.33333%;
  }
  .suffix-33 {
    margin-right: 33.33333%;
  }
  .push-33 {
    left: 33.33333%;
  }
  .pull-33 {
    left: -33.33333%;
  }
  .grid-66 {
    float: left;
    width: 66.66667%;
  }
  .prefix-66 {
    margin-left: 66.66667%;
  }
  .suffix-66 {
    margin-right: 66.66667%;
  }
  .push-66 {
    left: 66.66667%;
  }
  .pull-66 {
    left: -66.66667%;
  }
  .grid-100 {
    clear: both;
    width: 100%;
  }
}
/*########## Meine Erweiterungen für Unsemantic Grid ##########*/
/** Bilder auf volle Breite und Elemente innerhalb absolut positionieren **/
.grid-5,
.mobile-grid-5,
.tablet-grid-5,
.grid-10,
.mobile-grid-10,
.tablet-grid-10,
.grid-15,
.mobile-grid-15,
.tablet-grid-15,
.grid-20,
.mobile-grid-20,
.tablet-grid-20,
.grid-25,
.mobile-grid-25,
.tablet-grid-25,
.grid-30,
.mobile-grid-30,
.tablet-grid-30,
.grid-35,
.mobile-grid-35,
.tablet-grid-35,
.grid-40,
.mobile-grid-40,
.tablet-grid-40,
.grid-45,
.mobile-grid-45,
.tablet-grid-45,
.grid-50,
.mobile-grid-50,
.tablet-grid-50,
.grid-55,
.mobile-grid-55,
.tablet-grid-55,
.grid-60,
.mobile-grid-60,
.tablet-grid-60,
.grid-65,
.mobile-grid-65,
.tablet-grid-65,
.grid-70,
.mobile-grid-70,
.tablet-grid-70,
.grid-75,
.mobile-grid-75,
.tablet-grid-75,
.grid-80,
.mobile-grid-80,
.tablet-grid-80,
.grid-85,
.mobile-grid-85,
.tablet-grid-85,
.grid-90,
.mobile-grid-90,
.tablet-grid-90,
.grid-95,
.mobile-grid-95,
.tablet-grid-95,
.grid-100,
.mobile-grid-100,
.tablet-grid-100,
.grid-33,
.mobile-grid-33,
.tablet-grid-33,
.grid-66,
.mobile-grid-66,
.tablet-grid-66 {
  position: relative;
}
.grid-5 img,
.mobile-grid-5 img,
.tablet-grid-5 img,
.grid-10 img,
.mobile-grid-10 img,
.tablet-grid-10 img,
.grid-15 img,
.mobile-grid-15 img,
.tablet-grid-15 img,
.grid-20 img,
.mobile-grid-20 img,
.tablet-grid-20 img,
.grid-25 img,
.mobile-grid-25 img,
.tablet-grid-25 img,
.grid-30 img,
.mobile-grid-30 img,
.tablet-grid-30 img,
.grid-35 img,
.mobile-grid-35 img,
.tablet-grid-35 img,
.grid-40 img,
.mobile-grid-40 img,
.tablet-grid-40 img,
.grid-45 img,
.mobile-grid-45 img,
.tablet-grid-45 img,
.grid-50 img,
.mobile-grid-50 img,
.tablet-grid-50 img,
.grid-55 img,
.mobile-grid-55 img,
.tablet-grid-55 img,
.grid-60 img,
.mobile-grid-60 img,
.tablet-grid-60 img,
.grid-65 img,
.mobile-grid-65 img,
.tablet-grid-65 img,
.grid-70 img,
.mobile-grid-70 img,
.tablet-grid-70 img,
.grid-75 img,
.mobile-grid-75 img,
.tablet-grid-75 img,
.grid-80 img,
.mobile-grid-80 img,
.tablet-grid-80 img,
.grid-85 img,
.mobile-grid-85 img,
.tablet-grid-85 img,
.grid-90 img,
.mobile-grid-90 img,
.tablet-grid-90 img,
.grid-95 img,
.mobile-grid-95 img,
.tablet-grid-95 img,
.grid-100 img,
.mobile-grid-100 img,
.tablet-grid-100 img,
.grid-33 img,
.mobile-grid-33 img,
.tablet-grid-33 img,
.grid-66 img,
.mobile-grid-66 img,
.tablet-grid-66 img {
  width: 100%;
}
/** Neuer Breakpoint Phone 480px **/
@media (max-width: 479px) {
  .phone-push-5,
  .phone-pull-5,
  .phone-push-10,
  .phone-pull-10,
  .phone-push-15,
  .phone-pull-15,
  .phone-push-20,
  .phone-pull-20,
  .phone-push-25,
  .phone-pull-25,
  .phone-push-30,
  .phone-pull-30,
  .phone-push-35,
  .phone-pull-35,
  .phone-push-40,
  .phone-pull-40,
  .phone-push-45,
  .phone-pull-45,
  .phone-push-50,
  .phone-pull-50,
  .phone-push-55,
  .phone-pull-55,
  .phone-push-60,
  .phone-pull-60,
  .phone-push-65,
  .phone-pull-65,
  .phone-push-70,
  .phone-pull-70,
  .phone-push-75,
  .phone-pull-75,
  .phone-push-80,
  .phone-pull-80,
  .phone-push-85,
  .phone-pull-85,
  .phone-push-90,
  .phone-pull-90,
  .phone-push-95,
  .phone-pull-95,
  .phone-push-33,
  .phone-pull-33,
  .phone-push-66,
  .phone-pull-66 {
    position: relative;
  }
  .hide-on-phone {
    display: none !important;
  }
  .phone-grid-5 {
    float: left;
    width: 5%;
  }
  .phone-prefix-5 {
    margin-left: 5%;
  }
  .phone-suffix-5 {
    margin-right: 5%;
  }
  .phone-push-5 {
    left: 5%;
  }
  .phone-pull-5 {
    left: -5%;
  }
  .phone-grid-10 {
    float: left;
    width: 10%;
  }
  .phone-prefix-10 {
    margin-left: 10%;
  }
  .phone-suffix-10 {
    margin-right: 10%;
  }
  .phone-push-10 {
    left: 10%;
  }
  .phone-pull-10 {
    left: -10%;
  }
  .phone-grid-15 {
    float: left;
    width: 15%;
  }
  .phone-prefix-15 {
    margin-left: 15%;
  }
  .phone-suffix-15 {
    margin-right: 15%;
  }
  .phone-push-15 {
    left: 15%;
  }
  .phone-pull-15 {
    left: -15%;
  }
  .phone-grid-20 {
    float: left;
    width: 20%;
  }
  .phone-prefix-20 {
    margin-left: 20%;
  }
  .phone-suffix-20 {
    margin-right: 20%;
  }
  .phone-push-20 {
    left: 20%;
  }
  .phone-pull-20 {
    left: -20%;
  }
  .phone-grid-25 {
    float: left;
    width: 25%;
  }
  .phone-prefix-25 {
    margin-left: 25%;
  }
  .phone-suffix-25 {
    margin-right: 25%;
  }
  .phone-push-25 {
    left: 25%;
  }
  .phone-pull-25 {
    left: -25%;
  }
  .phone-grid-30 {
    float: left;
    width: 30%;
  }
  .phone-prefix-30 {
    margin-left: 30%;
  }
  .phone-suffix-30 {
    margin-right: 30%;
  }
  .phone-push-30 {
    left: 30%;
  }
  .phone-pull-30 {
    left: -30%;
  }
  .phone-grid-35 {
    float: left;
    width: 35%;
  }
  .phone-prefix-35 {
    margin-left: 35%;
  }
  .phone-suffix-35 {
    margin-right: 35%;
  }
  .phone-push-35 {
    left: 35%;
  }
  .phone-pull-35 {
    left: -35%;
  }
  .phone-grid-40 {
    float: left;
    width: 40%;
  }
  .phone-prefix-40 {
    margin-left: 40%;
  }
  .phone-suffix-40 {
    margin-right: 40%;
  }
  .phone-push-40 {
    left: 40%;
  }
  .phone-pull-40 {
    left: -40%;
  }
  .phone-grid-45 {
    float: left;
    width: 45%;
  }
  .phone-prefix-45 {
    margin-left: 45%;
  }
  .phone-suffix-45 {
    margin-right: 45%;
  }
  .phone-push-45 {
    left: 45%;
  }
  .phone-pull-45 {
    left: -45%;
  }
  .phone-grid-50 {
    float: left;
    width: 50%;
  }
  .phone-prefix-50 {
    margin-left: 50%;
  }
  .phone-suffix-50 {
    margin-right: 50%;
  }
  .phone-push-50 {
    left: 50%;
  }
  .phone-pull-50 {
    left: -50%;
  }
  .phone-grid-55 {
    float: left;
    width: 55%;
  }
  .phone-prefix-55 {
    margin-left: 55%;
  }
  .phone-suffix-55 {
    margin-right: 55%;
  }
  .phone-push-55 {
    left: 55%;
  }
  .phone-pull-55 {
    left: -55%;
  }
  .phone-grid-60 {
    float: left;
    width: 60%;
  }
  .phone-prefix-60 {
    margin-left: 60%;
  }
  .phone-suffix-60 {
    margin-right: 60%;
  }
  .phone-push-60 {
    left: 60%;
  }
  .phone-pull-60 {
    left: -60%;
  }
  .phone-grid-65 {
    float: left;
    width: 65%;
  }
  .phone-prefix-65 {
    margin-left: 65%;
  }
  .phone-suffix-65 {
    margin-right: 65%;
  }
  .phone-push-65 {
    left: 65%;
  }
  .phone-pull-65 {
    left: -65%;
  }
  .phone-grid-70 {
    float: left;
    width: 70%;
  }
  .phone-prefix-70 {
    margin-left: 70%;
  }
  .phone-suffix-70 {
    margin-right: 70%;
  }
  .phone-push-70 {
    left: 70%;
  }
  .phone-pull-70 {
    left: -70%;
  }
  .phone-grid-75 {
    float: left;
    width: 75%;
  }
  .phone-prefix-75 {
    margin-left: 75%;
  }
  .phone-suffix-75 {
    margin-right: 75%;
  }
  .phone-push-75 {
    left: 75%;
  }
  .phone-pull-75 {
    left: -75%;
  }
  .phone-grid-80 {
    float: left;
    width: 80%;
  }
  .phone-prefix-80 {
    margin-left: 80%;
  }
  .phone-suffix-80 {
    margin-right: 80%;
  }
  .phone-push-80 {
    left: 80%;
  }
  .phone-pull-80 {
    left: -80%;
  }
  .phone-grid-85 {
    float: left;
    width: 85%;
  }
  .phone-prefix-85 {
    margin-left: 85%;
  }
  .phone-suffix-85 {
    margin-right: 85%;
  }
  .phone-push-85 {
    left: 85%;
  }
  .phone-pull-85 {
    left: -85%;
  }
  .phone-grid-90 {
    float: left;
    width: 90%;
  }
  .phone-prefix-90 {
    margin-left: 90%;
  }
  .phone-suffix-90 {
    margin-right: 90%;
  }
  .phone-push-90 {
    left: 90%;
  }
  .phone-pull-90 {
    left: -90%;
  }
  .phone-grid-95 {
    float: left;
    width: 95%;
  }
  .phone-prefix-95 {
    margin-left: 95%;
  }
  .phone-suffix-95 {
    margin-right: 95%;
  }
  .phone-push-95 {
    left: 95%;
  }
  .phone-pull-95 {
    left: -95%;
  }
  .phone-grid-33 {
    float: left;
    width: 33.33333%;
  }
  .phone-prefix-33 {
    margin-left: 33.33333%;
  }
  .phone-suffix-33 {
    margin-right: 33.33333%;
  }
  .phone-push-33 {
    left: 33.33333%;
  }
  .phone-pull-33 {
    left: -33.33333%;
  }
  .phone-grid-66 {
    float: left;
    width: 66.66667%;
  }
  .phone-prefix-66 {
    margin-left: 66.66667%;
  }
  .phone-suffix-66 {
    margin-right: 66.66667%;
  }
  .phone-push-66 {
    left: 66.66667%;
  }
  .phone-pull-66 {
    left: -66.66667%;
  }
  .phone-grid-100 {
    clear: both;
    width: 100%;
  }
}
/** Grid erweitert für Mobile Landscape **/
.mobile-grid-landscape-5,
.mobile-grid-landscape-10,
.mobile-grid-landscape-15,
.mobile-grid-landscape-20,
.mobile-grid-landscape-25,
.mobile-grid-landscape-30,
.mobile-grid-landscape-35,
.mobile-grid-landscape-40,
.mobile-grid-landscape-45,
.mobile-grid-landscape-50,
.mobile-grid-landscape-55,
.mobile-grid-landscape-60,
.mobile-grid-landscape-65,
.mobile-grid-landscape-70,
.mobile-grid-landscape-75,
.mobile-grid-landscape-80,
.mobile-grid-landscape-85,
.mobile-grid-landscape-90,
.mobile-grid-landscape-95,
.mobile-grid-landscape-100,
.mobile-grid-landscape-33,
.mobile-grid-landscape-66 {
  /* Bilder auf volle Breite und Elemente innerhalb absolut positionieren */
  position: relative;
  /* Standard wie bei anderen Grid-Klassen */
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}
.mobile-grid-landscape-5 img,
.mobile-grid-landscape-10 img,
.mobile-grid-landscape-15 img,
.mobile-grid-landscape-20 img,
.mobile-grid-landscape-25 img,
.mobile-grid-landscape-30 img,
.mobile-grid-landscape-35 img,
.mobile-grid-landscape-40 img,
.mobile-grid-landscape-45 img,
.mobile-grid-landscape-50 img,
.mobile-grid-landscape-55 img,
.mobile-grid-landscape-60 img,
.mobile-grid-landscape-65 img,
.mobile-grid-landscape-70 img,
.mobile-grid-landscape-75 img,
.mobile-grid-landscape-80 img,
.mobile-grid-landscape-85 img,
.mobile-grid-landscape-90 img,
.mobile-grid-landscape-95 img,
.mobile-grid-landscape-100 img,
.mobile-grid-landscape-33 img,
.mobile-grid-landscape-66 img {
  width: 100%;
}
@media (max-width: 767px) and (orientation: landscape) and (min-device-aspect-ratio: 1.11111111) and (max-height: 480px) {
  .mobile-grid-100,
  .mobile-grid-100:after {
    clear: none;
  }
  .mobile-grid-landscape-100:after {
    clear: both;
  }
  .landscape-push-5,
  .landscape-pull-5,
  .landscape-push-10,
  .landscape-pull-10,
  .landscape-push-15,
  .landscape-pull-15,
  .landscape-push-20,
  .landscape-pull-20,
  .landscape-push-25,
  .landscape-pull-25,
  .landscape-push-30,
  .landscape-pull-30,
  .landscape-push-35,
  .landscape-pull-35,
  .landscape-push-40,
  .landscape-pull-40,
  .landscape-push-45,
  .landscape-pull-45,
  .landscape-push-50,
  .landscape-pull-50,
  .landscape-push-55,
  .landscape-pull-55,
  .landscape-push-60,
  .landscape-pull-60,
  .landscape-push-65,
  .landscape-pull-65,
  .landscape-push-70,
  .landscape-pull-70,
  .landscape-push-75,
  .landscape-pull-75,
  .landscape-push-80,
  .landscape-pull-80,
  .landscape-push-85,
  .landscape-pull-85,
  .landscape-push-90,
  .landscape-pull-90,
  .landscape-push-95,
  .landscape-pull-95,
  .landscape-push-33,
  .landscape-pull-33,
  .landscape-push-66,
  .landscape-pull-66 {
    position: relative;
  }
  .landscape-push-0 {
    left: 0%;
  }
  .mobile-grid-landscape-100 {
    clear: both !important;
    width: 100%;
  }
  .mobile-grid-landscape-95 {
    float: left;
    width: 95%;
  }
  .mobile-grid-landscape-90 {
    float: left;
    width: 90%;
  }
  .mobile-grid-landscape-85 {
    float: left;
    width: 85%;
  }
  .mobile-grid-landscape-80 {
    float: left;
    width: 80%;
  }
  .mobile-grid-landscape-75 {
    float: left;
    width: 75%;
  }
  .mobile-grid-landscape-70 {
    float: left;
    width: 70%;
  }
  .mobile-grid-landscape-65 {
    float: left;
    width: 65%;
  }
  .mobile-grid-landscape-60 {
    float: left;
    width: 60%;
  }
  .mobile-grid-landscape-55 {
    float: left;
    width: 55%;
  }
  .mobile-grid-landscape-50 {
    float: left;
    width: 50%;
  }
  .mobile-grid-landscape-45 {
    float: left;
    width: 45%;
  }
  .mobile-grid-landscape-40 {
    float: left;
    width: 40%;
  }
  .mobile-grid-landscape-35 {
    float: left;
    width: 35%;
  }
  .mobile-grid-landscape-30 {
    float: left;
    width: 30%;
  }
  .mobile-grid-landscape-25 {
    float: left;
    width: 25%;
  }
  .mobile-grid-landscape-20 {
    float: left;
    width: 20%;
  }
  .mobile-grid-landscape-15 {
    float: left;
    width: 15%;
  }
  .mobile-grid-landscape-10 {
    float: left;
    width: 10%;
  }
  .mobile-grid-landscape-5 {
    float: left;
    width: 5%;
  }
  .mobile-grid-landscape-33 {
    float: left;
    width: 33.33333%;
  }
  .mobile-grid-landscape-66 {
    float: left;
    width: 66.66667%;
  }
  .landscape-prefix-5 {
    margin-left: 5%;
  }
  .landscape-suffix-5 {
    margin-right: 5%;
  }
  .landscape-prefix-10 {
    margin-left: 10%;
  }
  .landscape-suffix-10 {
    margin-right: 10%;
  }
  .landscape-prefix-15 {
    margin-left: 15%;
  }
  .landscape-suffix-15 {
    margin-right: 15%;
  }
  .landscape-prefix-20 {
    margin-left: 20%;
  }
  .landscape-suffix-20 {
    margin-right: 20%;
  }
  .landscape-prefix-25 {
    margin-left: 25%;
  }
  .landscape-suffix-25 {
    margin-right: 25%;
  }
  .landscape-prefix-30 {
    margin-left: 30%;
  }
  .landscape-suffix-30 {
    margin-right: 30%;
  }
  .landscape-prefix-35 {
    margin-left: 35%;
  }
  .landscape-suffix-35 {
    margin-right: 35%;
  }
  .landscape-prefix-40 {
    margin-left: 40%;
  }
  .landscape-suffix-40 {
    margin-right: 40%;
  }
  .landscape-prefix-45 {
    margin-left: 45%;
  }
  .landscape-suffix-45 {
    margin-right: 45%;
  }
  .landscape-prefix-50 {
    margin-left: 50%;
  }
  .landscape-suffix-50 {
    margin-right: 50%;
  }
  .landscape-prefix-55 {
    margin-left: 55%;
  }
  .landscape-suffix-55 {
    margin-right: 55%;
  }
  .landscape-prefix-60 {
    margin-left: 60%;
  }
  .landscape-suffix-60 {
    margin-right: 60%;
  }
  .landscape-prefix-65 {
    margin-left: 65%;
  }
  .landscape-suffix-65 {
    margin-right: 65%;
  }
  .landscape-prefix-70 {
    margin-left: 70%;
  }
  .landscape-suffix-70 {
    margin-right: 70%;
  }
  .landscape-prefix-75 {
    margin-left: 75%;
  }
  .landscape-suffix-75 {
    margin-right: 75%;
  }
  .landscape-prefix-80 {
    margin-left: 80%;
  }
  .landscape-suffix-80 {
    margin-right: 80%;
  }
  .landscape-prefix-85 {
    margin-left: 85%;
  }
  .landscape-suffix-85 {
    margin-right: 85%;
  }
  .landscape-prefix-90 {
    margin-left: 90%;
  }
  .landscape-suffix-90 {
    margin-right: 90%;
  }
  .landscape-prefix-95 {
    margin-left: 95%;
  }
  .landscape-suffix-95 {
    margin-right: 95%;
  }
}
#imprintLinkContainer {
  box-sizing: border-box;
  background-color: rgba(150, 150, 150, 0.7);
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px;
}
#imprintLink,
#datenschutzLink {
  position: relative;
  z-index: 90;
  font-size: 8pt;
  color: #b2b2b2;
  text-decoration: none;
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;
}
#imprintLink:hover,
#datenschutzLink:hover {
  color: #DDDDDD;
}
#imprintOverlay {
  z-index: 90002;
  position: fixed;
  display: none;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(50, 50, 50, 0.8);
}
#imprintPicture {
  z-index: 90003;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  border: 5px solid white;
  width: 690px;
  height: 410px;
  margin-top: 5%;
  padding: 10px;
  line-height: 14pt;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.7);
}
#imprintPicture:before {
  font-size: 14px;
  color: #ffffff;
  font-family: arial, helvetica, sans-serif;
  white-space: pre;
  content: 'EDEV Media AG \A Sennweidstrasse 45 \A 6312 Steinhausen \A Switzerland \A \A Commercial register number: \A CH-020.3.036.609-2 \A \A Register court: \A Zürich, Switzerland \A \A Jugendschutzbeauftragter gemäß §7 Jugendmedienschutz-Staatsvertrag nach dem Recht \A der Bundesrepublik Deutschland \A \A Rechtsanwalt Marko Dörre \A Marienstraße 8 \A 10117 Berlin, Germany';
}
@media only screen and (max-width: 960px) {
  #imprintPicture {
    width: 300px;
    height: 465px;
  }
  #imprintPicture:before {
    content: 'EDEV Media AG \A Sennweidstrasse 45 \A 6312 Steinhausen \A Switzerland \A \A Commercial register number: \A CH-020.3.036.609-2 \A \A Register court: \A Zürich, Switzerland \A \A Jugendschutzbeauftragter gemäß \A §7 Jugendmedienschutz-Staatsvertrag \A nach dem Recht \A der Bundesrepublik Deutschland \A \A Rechtsanwalt Marko Dörre \A Marienstraße 8 \A 10117 Berlin, Germany';
  }
}
@media only screen and (orientation: landscape) and (max-height: 420px) {
  #imprintPicture {
    width: 570px;
    height: 320px;
  }
  #imprintPicture:before {
    content: 'EDEV Media AG \A Sennweidstrasse 45, 6312 Steinhausen, Switzerland \A \A Commercial register number: CH-020.3.036.609-2 \A \A Register court: Zürich, Switzerland \A \A Jugendschutzbeauftragter gemäß §7 Jugendmedienschutz-Staatsvertrag \A nach dem Recht der Bundesrepublik Deutschland \A \A Rechtsanwalt Marko Dörre \A Marienstraße 8, 10117 Berlin, Germany';
  }
}
#imprintClose {
  border-radius: 12px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #b2b2b2;
  width: 24px;
  height: 24px;
}
#imprintClose:after {
  color: #ffffff;
  font-family: arial, helvetica, sans-serif;
  font-size: 19px;
  content: 'X';
  top: 4px;
  left: 6px;
  position: absolute;
}
#imprintClose:hover {
  cursor: pointer;
}
#modalHolder {
  z-index: 1000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #333333;
  background-color: rgba(50, 50, 50, 0.8);
}
#modalHolder .close {
  box-sizing: border-box;
  background: white url('/VX/images/close.png');
  width: 24px;
  height: 24px;
  float: right;
  border-radius: 50%;
  transition: transform 0.8s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
}
#modalHolder iframe {
  border: none;
  width: 80%;
  height: 80%;
  margin: 5% 0 0 10%;
}
/* Variablen */
/*  **** functions ***** */
/* ***** styles ****** */
body {
  background-color: #000;
  font-family: "arial", "helvetica", sans-serif;
  color: #000;
}
.bgcolor0 {
  background-color: #000;
}
.bgcolor1 {
  background-color: #075e54;
}
.rounded-corners-8 {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.rounded-corners-5 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.rounded-corners-4 {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.rounded-corners-3 {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
h1 {
  font-size: 34px;
  color: #ff0000;
}
h2 {
  font-size: 22px;
  color: #000;
  line-height: 28px;
}
h3 {
  font-size: 18px;
  color: #fff;
  line-height: 21px;
}
.fliesstext {
  font-size: 14px;
  line-height: 19px;
}
.hidden {
  display: none;
}
.btn {
  color: #fff;
  background-color: #fed36c;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.btn:hover {
  background-color: #019639;
}
.imprint {
  color: #000;
  font-size: 8pt;
  text-decoration: none;
}
/*
@media @desktop {
  .grid-container {
    width: @desktop-container-width;
  }
}
@media @phone {
  h1 {
    font-size: (@font-size-h1 - 14) !important;
  }
  .hide-on-phone {
    display: none !important;
  }
  .push-bottom-20 {
    .push-bottom-10 !important;
  }
}
@media @phonesmall {
  h1 {
    font-size: (@font-size-h1 - 18) !important;
    line-height: (@font-size-h1 - 16) !important;
  }
}
@media @phone-landscape {
  h1 {
    font-size: (@font-size-h1 - 20) !important;
    line-height: (@font-size-h1 - 24) !important;
  }
  .push-bottom-20 {
    .push-bottom-10 !important;
  }
}
*/
/* Essentials */
.floatleft {
  float: left;
}
.floatright {
  float: right !important;
}
.floatnone {
  float: inherit !important;
}
.displayblock {
  display: block;
}
.displayinlineblock {
  display: inline-block;
}
.displaynone {
  display: none !important;
}
.grid-nopad {
  padding: 0 !important;
}
.grid-nomarg {
  margin: 0 !important;
}
.grid-percent-07 {
  padding: 0 0.7% 0 0.7%;
}
.push-0 {
  margin: 0px;
}
.push-5 {
  margin: 5px;
}
.push-10 {
  margin: 10px;
}
.push-20 {
  margin: 20px;
}
.push-30 {
  margin: 30px;
}
.push-top-5 {
  margin-top: 5px;
}
.push-top-10 {
  margin-top: 10px;
}
.push-top-15 {
  margin-top: 15px;
}
.push-top-20 {
  margin-top: 20px;
}
.push-top-30 {
  margin-top: 30px;
}
.push-top-40 {
  margin-top: 40px;
}
.push-bottom-5 {
  margin-bottom: 5px;
}
.push-bottom-10 {
  margin-bottom: 10px;
}
.push-bottom-15 {
  margin-bottom: 15px;
}
.push-bottom-20 {
  margin-bottom: 20px;
}
.push-bottom-30 {
  margin-bottom: 30px;
}
.push-bottom-40 {
  margin-bottom: 40px;
}
.push-right-5 {
  margin-right: 5px;
}
.push-right-10 {
  margin-right: 10px;
}
.push-right-20 {
  margin-right: 20px;
}
.push-right-30 {
  margin-right: 30px;
}
.push-right-40 {
  margin-right: 40px;
}
.push-left-5 {
  margin-left: 5px;
}
.push-left-10 {
  margin-left: 10px;
}
.push-left-20 {
  margin-left: 20px;
}
.push-left-30 {
  margin-left: 30px;
}
.push-left-40 {
  margin-left: 40px;
}
.pad-0 {
  padding: 0px;
}
.pad-5 {
  padding: 5px;
}
.pad-10 {
  padding: 10px;
}
.pad-20 {
  padding: 20px;
}
.pad-30 {
  padding: 30px;
}
.pad-left-right-5 {
  padding: 0 5px 0 5px;
}
.pad-right-0 {
  padding-right: 0px;
}
.pad-right-5 {
  padding-right: 5px;
}
.pad-right-10 {
  padding-right: 10px;
}
.pad-right-20 {
  padding-right: 20px;
}
.pad-right-30 {
  padding-right: 30px;
}
.pad-right-40 {
  padding-right: 40px;
}
.pad-left-0 {
  padding-left: 0px;
}
.pad-left-5 {
  padding-left: 5px;
}
.pad-left-10 {
  padding-left: 10px;
}
.pad-left-20 {
  padding-left: 20px;
}
.pad-left-30 {
  padding-left: 30px;
}
.pad-left-40 {
  padding-left: 40px;
}
.pad-top-0 {
  padding-top: 0px;
}
.pad-top-5 {
  padding-top: 5px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-top-15 {
  padding-top: 15px;
}
.pad-top-20 {
  padding-top: 20px;
}
.pad-top-30 {
  padding-top: 30px;
}
.pad-top-40 {
  padding-top: 40px;
}
.pad-bottom-0 {
  padding-bottom: 0px;
}
.pad-bottom-5 {
  padding-bottom: 5px;
}
.pad-bottom-10 {
  padding-bottom: 10px;
}
.pad-bottom-15 {
  padding-bottom: 15px;
}
.pad-bottom-20 {
  padding-bottom: 20px;
}
.pad-bottom-30 {
  padding-bottom: 30px;
}
.pad-bottom-40 {
  padding-bottom: 40px;
}
.center {
  margin: 0 auto;
  float: none;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-uppercase {
  text-transform: uppercase;
}
/* Variablen */
body {
  background: #000 url(/LA/Whatsdate/img/bgwall_f16.jpg) scroll top left;
  font-family: "arial", "helvetica", sans-serif;
  color: #000;
}
body.age18 {
  background-image: url(/LA/Whatsdate/img/bgwall_f18.jpg);
}
body.age12 {
  background-image: url(/LA/Whatsdate/img/bgwall_f12.jpg);
}
.grid-container {
  max-width: 960px;
}
.bgcolor1 {
  background-color: #075e54;
}
.bgcolor2 {
  background-color: #FFFFFF;
}
.logo {
  width: 324px;
  height: 67px;
  margin-top: 17px;
  margin-bottom: 16px;
}
.logo.safe {
  width: 171px;
}
h1 {
  margin-top: 30px;
  margin-bottom: 15px;
  font-family: "Times New Roman", Times, serif;
  font-size: 34px;
}
h2.headline {
  margin-top: 36px;
  font-size: 28px;
  font-weight: normal;
  color: #FFF;
  text-align: right;
}
h2.headlineMobile {
  font-size: 28px;
  margin-bottom: 12px;
  color: #FFF;
  text-align: center;
}
.grid-container {
  padding: 0;
}
/* ************  style question box *************** */
#questionbox-container,
#answerbox-container {
  font-size: 90%;
}
#questionbox-container .question-block,
#answerbox-container .question-block {
  position: relative;
}
#questionbox-container .question-block .question,
#answerbox-container .question-block .question {
  position: absolute;
  bottom: 4px;
  width: 100%;
  padding: 10px 0 14px 0;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  background-color: rgba(7, 94, 84, 0.7);
}
#questionbox-container .question-block h4.title,
#answerbox-container .question-block h4.title {
  color: #fff;
}
#questionbox-container #question_1 .titleContainer,
#answerbox-container #question_1 .titleContainer,
#questionbox-container #question_4 .titleContainer,
#answerbox-container #question_4 .titleContainer {
  position: absolute;
  display: none;
}
#questionbox-container #question_2 .titleContainer,
#answerbox-container #question_2 .titleContainer,
#questionbox-container #question_3 .titleContainer,
#answerbox-container #question_3 .titleContainer {
  position: absolute;
  left: 15px;
  top: 15px;
  height: 32px;
  border-radius: 15px;
  background: url(/LA/Whatsdate/img/online_dot.png) 8px 8px no-repeat, rgba(0, 0, 0, 0.6);
}
#questionbox-container #question_2 .titleContainer h4.title,
#answerbox-container #question_2 .titleContainer h4.title,
#questionbox-container #question_3 .titleContainer h4.title,
#answerbox-container #question_3 .titleContainer h4.title {
  padding: 0 12px 0 28px;
  font-size: 19px;
  font-weight: normal;
  line-height: 19px;
  margin-top: 4px;
}
#questionbox-container .question-block .answers,
#answerbox-container .question-block .answers {
  padding-left: 25px;
  padding-right: 25px;
}
#questionbox-container h1,
#answerbox-container h1,
#questionbox-container h3,
#answerbox-container h3,
#questionbox-container h4,
#answerbox-container h4 {
  color: #000;
  margin-top: 15px;
  margin-bottom: 15px;
}
#questionbox-container h4,
#answerbox-container h4 {
  font-size: 18px;
}
#questionbox-container ol,
#answerbox-container ol {
  list-style-position: outside;
  padding-left: 40px;
}
#questionbox-container ol li,
#answerbox-container ol li {
  padding-left: 10px;
}
#questionbox-container select.answer,
#answerbox-container select.answer {
  display: none;
}
#questionbox-container input.answer,
#answerbox-container input.answer {
  display: block;
  float: left;
  -webkit-appearance: none;
  margin: 50px 0 50px 0 !important;
  color: #fff;
  background-color: #fed36c;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: #019639;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  margin-top: 10px;
  width: 48%;
  font-size: 22px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
#questionbox-container input.answer:first-of-type,
#answerbox-container input.answer:first-of-type {
  margin: 50px 4% 50px 0 !important;
  /*
			clear: both;
			float: left;
			*/
}
#questionbox-container input.btn-next,
#answerbox-container input.btn-next {
  display: none;
  color: #fff;
  background-color: #fed36c;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: #019639;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  margin-top: 10px;
  width: 100%;
}
.lt-480 #questionbox-container #question_2 .titleContainer,
.lt-480 #answerbox-container #question_2 .titleContainer,
.lt-480 #questionbox-container #question_3 .titleContainer,
.lt-480 #answerbox-container #question_3 .titleContainer {
  left: 10px;
  top: 10px;
  height: 25px;
  border-radius: 10px;
  background: url(/LA/Whatsdate/img/online_dot.png) 8px 5px no-repeat, rgba(0, 0, 0, 0.6);
}
.lt-480 #questionbox-container #question_2 .titleContainer h4.title,
.lt-480 #answerbox-container #question_2 .titleContainer h4.title,
.lt-480 #questionbox-container #question_3 .titleContainer h4.title,
.lt-480 #answerbox-container #question_3 .titleContainer h4.title {
  padding: 0 12px 0 28px;
  font-size: 16px;
  font-weight: normal;
  line-height: 16px;
  margin-top: 4px;
}
.lt-480 #questionbox-container .answers,
.lt-480 #answerbox-container .answers {
  margin: 20px 0 20px 0;
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
}
.lt-480 #questionbox-container input.answer,
.lt-480 #answerbox-container input.answer {
  display: block;
  /* margin: 20px 0 20px 0 !important; */
  margin: 0 0 20px 0 !important;
  width: 100%;
  color: #fff;
  background-color: #fed36c;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: #019639;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  margin-top: 10px;
  /*clear: both;*/
  font-size: 22px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  /*
			&:first-of-type {
				clear: both;
				float: left;
			}
			*/
}
.lt-480 #questionbox-container .question-block .question {
  font-size: 20px;
  padding: 6px 0 9px 0;
}
.lt-480 h1 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-size: 31px;
  line-height: 31px;
}
.lt-480 .push-top-20 {
  margin-top: 0;
}
#datenschutzLink {
  color: #b2b2b2;
  cursor: pointer;
  margin-left: 10px;
  font-size: 8pt;
}
#datenschutzLink:hover {
  color: #DDDDDD;
}
/*
.lt-800 {
	h1 {
		margin-top: 15px;
		margin-bottom: 20px;
	}
	#questionbox-container,  #answerbox-container {
		h3 {
			font-size: (@font-size-h3 - 2px);
		}
		h4 {
			font-size: @font-size;
			float: left;
			.push-0;
			.push-right-5;
		}
	}
	&.landscape {
		h1 {
			font-size: 31px;
			line-height: 31px;
			margin-top: 10px;
		}
		h2 {
			font-size: 20px;
			line-height: 23px;
		}
		#questionbox-container h3 {
			font-size: 14px;
			line-height: 16px;
			font-weight: normal;
		}
	}
}
*/
#answerbox-container {
  padding: 20px;
}
#answerbox-container ol.results li,
#answerbox-container ol.rules li {
  margin-bottom: 5px;
}
#answerbox-container ol.rules li#result_1 {
  display: none !important;
}
#searchbox-container {
  height: 60px;
}
#searchbox-container .search-title {
  color: #000;
  text-align: center;
}
#searchbox-container .searchbox-loader-container {
  margin: 0 auto;
  float: none;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 19px;
  width: 220px;
}
#searchbox-container .searchbox-loader {
  height: 19px;
  width: 0;
  background: url(/LA/Whatsdate/img/loadbar.gif) no-repeat scroll top left;
}
/* ****************************************** */
.inlineSignupBox {
  font-size: 90%;
  /* .pad-20; */
  padding: 0 20px 20px 20px;
}
.inlineSignupBox h3 {
  color: #000;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.inlineSignupBox input {
  border: 1px solid;
  display: block;
  margin-top: 10px;
  height: 32px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  font-size: 18px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.inlineSignupBox #usernameBlock,
.inlineSignupBox #emailBlock {
  height: 88px;
}
.inlineSignupBox .help-block {
  color: #ff0000;
  display: block;
  font-size: 12px;
  height: 0;
  font-style: italic;
  font-weight: 700;
  margin-top: 3px;
  margin-bottom: 5px;
}
.inlineSignupBox #signup {
  display: block;
  color: #fff;
  background-color: #fed36c;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: #019639;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  margin-top: 10px;
  width: 100%;
}
.inlineSignupBox #nameSuggestionBlock {
  position: absolute;
  z-index: 10;
  color: #000;
  border: 1px solid #CCCCCC;
  background: #f4f4f4;
  padding: 5px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  width: 60%;
}
.inlineSignupBox #nameSuggestionBlock .nameSuggestionHeader {
  font-style: italic;
  color: #ff0000;
  margin: 5px;
}
.inlineSignupBox #nameSuggestionBlock .nameSuggestion {
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}
.inlineSignupBox #nameSuggestionBlock .nameSuggestion:hover {
  background-color: #e2e2e2;
}
#usernameBlock {
  position: relative;
}
.suggestions_wrapper {
  width: 100%;
}
.suggestions_wrapper h6 {
  text-align: start;
  font-size: 1.2rem;
  border-bottom: 1px solid #ced4da;
  border-top: 1px solid #ced4da;
  padding: 10px;
}
#signup:disabled {
  background: #ced4da;
  color: white;
  cursor: not-allowed;
}
.popover_container {
  position: absolute;
  width: 100%;
  z-index: 99;
}
.error-msg {
  color: #47a447;
  font-weight: 700;
  font-size: small;
  width: 100%;
  text-align: start;
  display: none;
}
[popover] {
  position: relative;
  width: 100%;
  border: 1px solid #ced4da;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  padding: 0;
  inset: unset;
  overflow: hidden;
}
[popover] ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: start;
  display: flex;
  flex-direction: column;
}
[popover] li {
  padding: 10px 0 10px 10px;
  width: 100%;
}
[popover] li:hover {
  background-color: #47a447;
  color: white;
  cursor: pointer;
}