/*
  variable declarations
*/
:root {
  --car_color: #c9e617;
  --my_blue: #007bff;
  --darkgray: #212529;
}
/* Reset - general stuff */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*
* {
  border: 1px solid red;
}
*/
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;  
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--darkgray, dimgray); 
  text-align: left;
  background-color: whitesmoke; 
  max-width: 1200px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
h1, .h1 {
  font-size: 190%; 
}
h2, .h2 {
  font-size: 170%; 
}
h3, .h3 {
  font-size: 145%; 
}
h4, .h4 {
  font-size: 120%; 
}
p {
  margin-top: 0;
  margin-bottom: 0; 
}
ol, ul {
  /* background-color: yellow; */
  list-style-position: inside; 
  padding-left: 1em !important;
}

/* ------------------------------------------------ */
.text-dark { color: #343a40 !important; }
a.text-dark:hover, a.text-dark:focus { color: #1d2124 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ------------------------------------------------ */
.container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-left: auto; 
  margin-right: auto;
  max-width: 96%;
}


.main {
    width: 100%;
    background-color: rgb(197, 196, 196);
}

a {
    color: var(--my_blue, blue);
    text-decoration: none;
}
a:hover {
    color: black;
    text-decoration: none;
}
a.bloglink, a.bloglink:focus, a.bloglink:hover
{ 
  color: black !important; 
}
a.tradelink, a.tradelink:focus, a.tradelink:hover
{ 
  color: var(--my_blue, blue) !important; 
}


.description h2 {
  padding-bottom: 0.5em;
}

.blogdate {
  text-align:left;
  color: grey;
  font-size: 80%; 
  white-space: nowrap !important;
}
/* FLEXBOX STYLES */

.header {
    display: flex;
    align-items: center;
    justify-content: center;
} 


.city-image,
.description {
    width: 90%;
    margin: 0 auto;
}

.city-image {
    xpadding: 0.7em 0.4em;
    padding: 0.4em 0;
} 

.description {
    xpadding: 1em 1em;
    padding: 0 0;
}

.city-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.jumbotron {
  background-image: url("imgs/sky.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  ## height: 100%;
  
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}
/* 
  CSS-Regeln DEFAULT für kleine Bildschirme 
  
  
*/
.blogposting {
  margin-bottom: 4rem;
  text-align: justify;
  text-justify: inter-word;
}
.blogposting p {
  /* background-color: yellow; */
  text-align: justify;
  text-justify: inter-word;
}
/* -------------------- */
div.afiliate {
  /* background-color: yellow; */
  background-color: #eee;
  margin:0;
  padding: 10px;
}  
div.affiliatecontainer {
  display: flex;
  flex-direction: row;
}
div.affiliatecolumn1 {
  margin:0;
  padding: 10px;
  width: 12%;
}
div.affiliatecolumn2 {
  margin:0;
  padding: 10px;
  width: 88%;
}
img.affiliate {
  height: 3em;
  width: auto;
  max-width: 100%;
  padding: 10px;
  float: left;
}
img.support-icon {
  height: 3em;
  width: 3.7em;
}
img.paypal-button {
  width: 7em;
}  
img.whatsapp-button {
  width: 5em;
}  
img.nocomment-icon {
  width:2rem;
  padding-right:10px;
}  
/* -------------------- */
div.fake-rating-box{
  margin:0;
  padding:0;
  width: 100%;
  display: flex;
  flex-flow: wrap;
  flex-grow: 1;
}
div.fake-evaluate-card{
  box-sizing: border-box;
  margin-top: 32px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
div.fake-stars-box{
  display:flex;
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: 0;
}
div.fake-itemdesc{
  color:grey;  
  margin:0;
  padding:0;
  outline: 0;
}
img.fake-stars{
  width:18px; 
  height:18px;  
}
fake-thumbs-box{
  text-align: right;
  margin-left: auto; 
  margin-right: 0;  
}
img.fake-thumb{
  width:24px; 
  height:24px;  
  box-sizing: border-box;
}
hr.fake-linebreak{
  width: 100%;
  height: 0;
}
div.fake-item {
  flex-grow:1;
}
div.fake-break {
  flex-basis: 100%;
  height: 0;
}
/* -------------------- */
div.FotoLink1-right {
  margin:0;
  padding-top: 0.25%;
  padding-left: 0.5%;
  padding-bottom: 0%;
  padding-right: 0%;
}  
div.FotoLink1-left {
  margin:0;
  padding-top: 0.25%;
  padding-left: 0%;
  padding-bottom: 0%;
  padding-right: 0.5%;
}  
.FotoLink1 p {
  vertical-align: text-top;
  display:inline-block;
  text-decoration:none;
  color:silver;  
  font-size: 50%;
  text-align: end;
  float: right;
  height: auto;
  padding: 5px 0px;
  box-sizing: border-box;
} 
/* -------------------- */
div.FotoMultiWide1 {
  width: 100%;
  display: flex;
}
img.FotoMultiWide1 {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
div.FotoWide1 {
  float:center;
  width:100%;
  padding: 1px;
  xpadding:0.5em;
}
.FotoWide1 p {
  vertical-align: text-top;
  display:inline-block;
  text-decoration:none;
  color:silver;  
  font-size: 50%;
  text-align: end;
  float: right;
  padding: 0;
  height: auto;
} 
/* -------------------- */
.lead {
  font-size: 90%;
}
.card-container {
  display: flex;
  flex-flow: wrap;
}
.card-container {
    width: 98%;
    xmargin: 20px auto;
    xpadding: 0.5em 0;
    padding: 10px;
    xxbackground-color: rgb(0, 0, 0);
}
.card-img-right {
  height: 12em !important;
  border-radius: 0.3em;
  border: 1px solid var(--car_color, chartreuse);
}
.city {
    width: 90%;
    margin: 0.5em auto;
    background-color: white;
    border: 1px solid var(--car_color, green);
    border-radius: 0.25rem;

    flex: 0 0 20%;
    xmax-width: 50%;
}
.cityrow {
  display: flex;
  flex-direction: column;
}
.jumboheader {
  font-size: 160%;
  font-weight: lighter;
  line-height: 0.9; 
  font-style:italic;
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  -o-transform: scaleY(1.5);
  transform: scaleY(1.5);
  padding-top: 0.5rem !important;
  padding-bottom: 0.8rem !important;
}
.blogheader {
  font-weight: lighter;
  line-height: 0.9; 
  font-style:italic;
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  -o-transform: scaleY(1.5);
  transform: scaleY(1.5);
}
.shortcardheader {
  font-size: 150%;
  font-weight: lighter;
  line-height: 0.9; 
  font-style:italic;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  -o-transform: scaleY(1.5);
  transform: scaleY(1.5);
}
.aboutheader {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-weight: lighter;
  line-height: 0.9; 
  font-style:normal;
  text-align: center;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  -o-transform: scaleY(1.5);
  transform: scaleY(1.5);
  color: black;
}

/* Create four equal columns  was flex: 25% */
.citycolumn {
  flex: 50%;
  padding: 4px;
}
/* -----LOGIN FORM --------------- */
ximg.loginform {
  left: 50%;
  margin-left: -214px;   /* 50% */
  /* Set up proportionate scaling */
  height: 100%;
}
img.loginform {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  height: auto;
  overflow: auto;
}
div.loginform {
  position:relative;
  xpadding: 30px;
  background:transparent;
}
div.loginformover {
  display: block;
  width: 75%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 75%; 
}
form.loginform {
  position:absolute;
  background:transparent;
  margin: 0 auto;
  left: 200px;
  right: 0;
  top: 40%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 60%;
}
/* ------ SCROLLER NAV NEW -------------- */
.flex-x-scroller{
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  overflow-y: hidden; 
  background-color: #eee; 
}
li.scroller::before {
  content: "\2022";
}
li.scroller {
  padding: 12px;
  color: var(--car_color, green);
}

/* ------ NAV-SCROLLER AND OTHER STUFF -------------- */
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
nav{
  display: block; 
  font-size: 50%;
}
.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  xfont-size: .875rem;
}
.py-1 {
  padding-top: 0.25rem !important; 
}
.py-1 {
  padding-bottom: 0.25rem !important; 
}
.mb-2 {
  margin-bottom: 0.5rem !important; 
}
.p-2 {
  padding: 0.5rem !important; 
}
.text-muted {
  color: #6c757d !important; 
}
.d-flex {
  display: flex !important; 
}
.justify-content-between {
  justify-content: space-between !important; 
}

/* ------ IMPRINT -------------- */
div.imprint {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-left: auto; 
  margin-right: auto;
  max-width: 96%;
}  
p.imprintleft {
  float: left;
}
p.imprintright {
  float: right;
}
/* ------ ACE Editor -------------- */
#aceeditor{
  position: absolute;
  width: 95%;
  xheight: 600px;
  height: 85%;
  border:1px solid blue;
  clear: both;
  white-space: pre;
}
#aceeditsubmit{
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  top: 120%;
}
/* ------ BUTTONS -------------- */
.mybutton{
  font-size: 1em;
  margin: 0.1em 0.1em 0.1em 0em;
}
button.btn{
 padding: 4px 8px;
 margin: 8px;
 border-radius: 8px;
 color: white; 
 background-color: #008CBA;
}
button.btn-primary{
  color: white; 
  background-color: #008CBA;
}  
button.btn-secondary{
  color: white; 
  background-color: grey;
}  
button.btn-sucess{
  color: white; 
  background-color: #4CAF50;
}  
/* ------ FOOTER -------------- */
footer {
  text-align: center;
}
a:target{
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}
div.rightalign {
  float: right;
  margin-left: auto; 
  margin-right: 0;
}
/* 
  -------------------- 
    different media
  -------------------- 
*/
p.mediastatus{
  font-size: 70%;
  color: lightgrey; 
}  
p.mediastatus::after {
  content: " default";
}
/*
  576px on screens that are 576 or more, 
  two columns in two rows 
*/
@media only screen and (min-width:576px){
  body {
    font-size: 2.0rem;
  }  
  .city {
    xflex: 1 0 30%;
    Qflex: 1 1 0;
    width: 0;
    margin: 1%;
    
  }
  .cityrow {
    display: flex;
    flex-wrap: wrap;
  }
  .citycolumn {
    flex: 50%;
    padding: 8px;
  }
  .shortcardheader {
    padding-bottom: 2rem !important;
  }
  .aboutheader {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    font-weight: lighter;
    line-height: 0.9;
    font-style: italic;
    transform: scaleY(1.5);
    
  }
  .blogheader {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  img.FotoMultiWide1{
    /* inverse y factor as font-size in rem */
    xtransform: scale(1,2);
  }
  p.mediastatus::after {
    content: " width: 576px";
  }
}
/* 
  992px=lg on screens that are 992 or more, 
  go from two columns to four columns in one row 
*/
@media only screen and (min-width: 992px){
  body {
    font-size: 1rem;
  }  
  .city {
    xwidth: 20%;
    flex-wrap: wrap;
    margin: 0.5em auto;
    background-color: white;
    border: 1px solid var(--car_color, red);
    border-radius: 0.25rem;
    flex: 1 0 20%;
    xmax-width: 25%;
  }
  .citycolumn {
    flex: 20%;
    padding: 8px;
  }
  .cityx {
    Qflex: 1 1 20%;
    xflex: 1 1 0;
    width: 0;
    margin: 1em;
 
  }
  .city:last-of-type {
    flex-grow: 0;
  }
  img.FotoMultiWide1{
    /* inverse y factor as font-size in rem */
    xtransform: scale(1,1);
  }
  p.mediastatus::after {
    content: " width: 992px";
  }
}