/*
    Ground Rules
*/
  @import url('https://fonts.googleapis.com/css?family=Petrona');
  @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Raleway');

  body{
    background: #ab1a72;
    text-align: center;
    overflow-x: none;
    padding: 0;
    /* background: url('img/ruimte.jpg') no-repeat center bottom fixed; */
    background-size: cover;
  }
  body,input,textarea {
    font-family: 'Raleway', sans-serif;
    text-align: left;
    font-size: 15px;
    margin: 0;
  }
  h2 {
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 0;
  }
  input,textarea {
    padding: 1ex 1ex .75ex;
    border: none;
    box-shadow: inset 0 .5ex 2ex rgba(0,0,0,.382);
  }
  div {
    display: inline-block;
    vertical-align: top;
  }
  form {
    text-align: center;
  }
  body>div:first-of-type {
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    user-select: none;
    background: #fff;
    position: fixed;
    color: #ab1a72;
  }
  body>div:first-of-type a {
    cursor: pointer;
    text-decoration: none;
    display: block;
    padding: 2.5ex;
    background: transparent;
    color: #ab1a72;
    transition: background .3s, color 3s;
  }
  body>div:first-of-type a:hover,body>div:first-of-type a:target {
    background: #ab1a72;
    color: #fff;
  }
  a.a {
    background: #ab1a72!important;
    color: #fff!important;
  }
  a {
    color: inherit;
    text-decoration: none;
    pointer-events: initial;
    cursor: pointer;
    font-weight: bold;
  }
  body>div:nth-of-type(2) {
    box-sizing: border-box;
    padding-left: 200px;
    text-align: center;
    width: 100%;
    position: relative;
    min-height: 100vh;
    pointer-events: none;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2) {
    margin-auto;
    text-align: left;
    margin-bottom: 5.6ex;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div {
    display: block;
    box-sizing: border-box;
    overflow-wrap: break-word;
    max-width: 61.8vw;
    width: 640px;
    pointer-events: initial;
    padding: 8ex 0 2ex;
  }
  #c {
    width: 100%;
    max-width: calc(61.8vw - 11ex);
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div>div {
    box-sizing: border-box;
    padding: 2.5ex;
    width: 100%;
    white-space: pre-wrap;

    color: #fff;
    background: rgba(0,0,0,.082);
    box-shadow: 0 1ex 2ex rgba(0,0,0,.328), inset 0 0.1ex 0.2ex rgba(255,255,255,.164);

    //background: rgba(255,255,255,.382);
    min-height: calc(88.7vh - 1.786ex);
  }
  body>div:nth-of-type(2)>div:first-of-type {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -161.8%);
    font-size: 1.786ex;
    opacity: .382;
    color: #ab1a72;
  }
  textarea {
    height: 15ex;
    width: 49.2ex;
    max-width: 78.6%;
  }
  input {
    margin: 0 1.25ex;
  }
  input[type="submit"] {
    box-shadow: 0 0.5ex 1ex rgba(0,0,0,.382);
    border-radius: 1ex;
  }
  #contact {
    min-height: 78.6vh;
    min-height: calc(100vh - 5ex);
  }
  h6 {
    font-weight: normal;
    font-size: 1.6ex;
    display: inline;
  }
  body>div:nth-of-type(3) {
    display: none;
  }
  #ol ul, #p ul {                /* #ol almost depricated */
    white-space: initial;
  }
  hr {
    margin: .4ex 0;
    color: rgba(115, 17, 76, .2);
    border: 1px solid;
    border-top: none;
  }
  li div {
    width: 100%;
  }


/*
    Desktop @media 	 screen and (orientation: landscape) {
*/
@media screen and (min-device-aspect-ratio: 1/1) {
  body>img {
    display: none;
  }
  body>div:first-of-type {
    height: 100vh;
    box-shadow: inset -.5ex 4ex 2ex rgba(0,0,0,.382);
    box-shadow: inset -2.5ex 0 2ex -2ex rgba(0,0,0,.382);
    //box-shadow: inset -3px 12px 12px rgba(0,0,0,.382);
  }
  body>div:first-of-type img {
    border: 1ex solid transparent;
    border-bottom-width: 2.5ex;
    box-sizing: border-box;
    width: 100%;
  }
  body>div:nth-of-type(2)>div:first-of-type {
    left: calc(50% + 100px);
  }
  #d {
    display: none;
  }
  /* For highlighting current tab in Landscape */
  a.b,a.a,body>div:first-of-type a:hover,body>div:first-of-type a:target {
    background: #ab1a72!important;
    color: #fff!important;
    box-shadow: -0.8ex 0.5ex 1ex rgba(0,0,0,.246);
  }

  /* New design */
  body {
    background: linear-gradient(137.5deg, white 61.8%, #f2dae8) fixed;
    /* background: url('img/ruimte.jpg') no-repeat center bottom fixed; */
    background-size: cover;
  }
  body>div:first-of-type {
    // border-right: solid 2ex #ab1a72;
  }
  h2 {
    color: #ab1a72;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div>div {
    padding: 5.5ex;
    color: #73114c;
  }
  body>div:first-of-type {
    background: linear-gradient(137.5deg, white 61.8%, #f2dae8);
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div>div {
    color: #73114c;
    background: linear-gradient(137.5deg, #f2dae8, white 61.8%);
  }
  input[type="submit"] {
    background: #ab1a72;
    color: #fff;
    font-weight: bold;
  }
  input, textarea {
    box-shadow: inset 0 0.5ex 2ex -0.5ex rgba(0,0,0,.382);
  }
  body>div:nth-of-type(2)>div:first-of-type {
    //color: #73114c;
    opacity: .764;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div img {
    margin: 0 -5.5ex;
    width: calc(100% + 11ex);
  }
}



/*
    Mobile Devices 	 @media screen and (orientation: portrait) {
*/

@media screen and (max-device-aspect-ratio: 1/1) {
  @media only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) { 
    body,input,textarea {
      font-size: 50px;
    }
  }
  body>div:first-of-type {
    font-size: 40px;
    display: block;
    width: 100vw;
    overflow: hidden;
    z-index: 9999;
  }
  #m {
    //box-shadow: inset -12px -3px 12px rgba(0,0,0,.382);
    box-shadow: inset -2ex -.5ex 2ex rgba(0,0,0,.382);
    white-space: nowrap;
    padding-right: 8.75ex;
    padding-left: 1.25ex;
    position: relative;
    min-width: 100vw;
  }
  body>div:first-of-type a {
    display: inline-block;
  }
  body>div:first-of-type img {
    display: none;
  }
  body>div:nth-of-type(2) {
    padding-left: 0;
    padding-top: 7ex;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div {
    width: 78.6vw;
    max-width: 78.6vw;
  }
  #c {
    max-width: calc(78.6vw - 5ex);
  }
  #d {
    text-align: center;
    min-height: 100vh;
    min-height: calc(100vh - 15ex);
    background: url('dahlion-hdpi.png') no-repeat 50% 50%;
    background-size: 100%;
  }
  #ol div{
    top: 61.8%!important;
    max-height: 66.7vh!important;
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div img {
    margin: 0 -2.5ex;
    width: calc(100% + 5ex);
  }
  body>div:nth-of-type(2)>div:nth-of-type(2)>div>div {
    color: #73114c;
    background: linear-gradient(137.5deg, #f2dae8, white 61.8%);
  }
}


/*
    Privacy Statement
*/

#ol {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
    display: none;    /* Set to "block;" to show */
}

#ol div{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    cursor: initial;
    background: #fff;
    padding: 1ex 2.5ex 5ex;
    white-space: pre-wrap;
    box-shadow: 0 1ex 2ex rgba(0,0,0,.328), inset 0 0.1ex 0.2ex rgba(255,255,255,.164);
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 88.7vh;
    max-width: 88.7vw;
}