
/*stylesheet for index.html NATURPUR CHORIN website
additional styles for index.html main page

/***************************************************
************  properties for main area  ************
****************************************************/
main {
    flex: 1;
    margin: 0cm;
    width: 100%;
    padding-left: 0rem;
    padding-right	: 0rem;
}
article{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
}
h2 {
    font-size: 1.5rem;
}
img.main {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}
article p {
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 160%;
  margin: 2rem;
}
article p.figurecapture {
  line-height: 100%;
  margin: 0.5rem;
  text-align: left;

}
div.picture_row_portrait p,div.picture_row p {
  color: midnightblue;
  font-size: 1rem;
  font-weight: bold;
  margin: 0rem;
  padding: 0rem;
}
div.picture_row_portrait.blue p,div.picture_row.blue p{
  color: #ffffcd;
}
div.text {
    display: flex;
    flex-direction: column;
    width: 100%;
}
div.columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
div.picture {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 2rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}
div.picture p {
  padding: 0rem;
  margin: 0rem;
}
div.picture_left {
    display: grid;
    grid-template-columns: 1fr 3fr ;
    padding: 2rem;
    padding-top: 0rem;
}
div.picture_left p {
  padding: 0rem;
  margin: 0rem;
}
div.picture img {
    padding-top: 2rem;
    width: 13vw;
}
div.picture_left img {
    padding-top: 2rem;
    width: 13vw;
}
div.main > div {
    padding-right: 5rem;
    font-size: 1.2rem;
    text-align: justify;
}
img.portrait {
    margin: 2rem;
    padding: 2rem;
    max-width: 50%;
}
div.picture_row{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    align-self: center;
    align-items: center;
}
div.picture_row_portrait{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-self: center;
    margin-top: 2rem;
}
div.picture_row img {
    width: 25vw;
}
div.picture_row_portrait img {
    width: 13vw;
}
iframe {                  /*Google Maps*/
  margin: 2rem;
}
.rund {
	border-radius: 300px;
	-moz-border-radius: 300px;
	-webkit-border-radius: 300px
}
div.buchung p {
  font-weight: bold;
}
/***************************************************
********************  price area  ******************
****************************************************/
div.spalten {
  display: flex;
  justify-content: space-around; 
  width: 100% ;
  margin-bottom: 4rem;"
}
div.spalten div {
  max-width: 50vw;
  padding: 8rem;
}
article li {
    list-style-type: none;
}
li.list, li.dot_list {             /*list*/
  list-style-type: none;
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 160%;
}
li.dot_list {             /*list*/
  list-style-type: disc;
}
/***************************************************
*****************  mobile only  ***************
****************************************************/
@media screen and (max-width:700px) {
  iframe {
    max-width: 70vw;
  }
  div.mobile_only.pictures {  /*Behavior of sky pictures in spalten area*/
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
  }
  div.picture {
    padding: 0.5rem;
  }
  div.spalten {
    margin-bottom: 1rem;
  }
  div.spalten div {
    max-width: 50vw;
    padding: 2rem;
}
} 