html,body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  width: 100%;
  min-height: 100%;
}


@font-face {
    font-family: 'Swarovski Futura';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/SWAROVSKIFUTURA-BOOK.OTF');
}

@font-face {
    font-family: 'Swarovski Futura';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/SwarovskiFutura-Book.eot');
}

.divisionLine{
  overflow:hidden;
  margin:0px;
}

.divisionLine p{
  border:1px solid black;
  border-left: none;
  border-right: none;
  border-top: none;
  height:1em;
  width:100vw;
  padding:0px;
  margin-top:0px;
  margin-bottom:0px;
}

.emailtext{
  font-family: 'Swarovski Futura';
  color: #262626;
  font-size: 18px;
  font-weight: 300;
}

.headertext{
  text-align: center;
  font-family: 'Swarovski Futura';
  font-size: 50px;
  font-weight: 300;
}

.smallheadertext{
  text-align: center;
  font-family: 'Swarovski Futura';
  font-weight: 300;
  font-size: 24px;
}


.bodytext{
  text-align: left;
  font-family: 'Swarovski Futura';
  color: #262626;
  font-size: 18px;
  font-weight: 300;
}

#instructiontext{
  width:90%;
  margin:0 auto;
  margin-top: 50px;
}

#shortTextPlaceholder{
  text-align: center;
  font-family: 'Swarovski Futura';
  /*font-size: 24pt;*/
  font-size: 24px;
}

#textPlaceholder,#textPlaceholder2,#stellenList{
  text-align: center;
  font-family: 'Swarovski Futura';
  color: #262626;
  font-size: 18px;
}

.elsetext{
  font-family: 'Swarovski Futura';
  color: #262626;
  line-height: 1.714;
  font-size: 18px;
}

.nametext{
  text-align: center;
  font-family: 'Swarovski Futura';
  color: #000000;
}



#mydiv{
  /*padding-right: 10px;*/
  padding-top:5px;
  /*margin: 0 auto;*/
  margin-top: 0px;
  position: absolute;
  margin-bottom: 24px;
  left:0;
  top:0;
  padding-bottom: 10px;
  width: 100vw;
  height: auto;
  align-content: center;
}

#page0{
  /*padding-left: 2%;
  padding-right: 10px;*/
  padding-bottom:10px;
  width:100%;
  height: auto;
  margin-bottom:10px;
  position: absolute;
  left: 0;
  top: 0;
}

.startimage{
   /*padding-left: 10px;
   padding-right: 10px;*/
   margin: 0 auto;
   /*width: 90vw;*/
   width:90%;
   max-width: 900px;
   /*max-height:800px;*/
   max-height:900px;
}

.starttext{
   margin: 0 auto;
   width:90%;
   max-width: 800px;
}

#page15{
   padding-left: 10px;
   padding-right: 10px;
   padding-top:10px;
   margin: 0 auto;
   padding-bottom: 5px;
   width: 90vw;
   max-width: 900px;
   height:90vh;
   align-content: center;
   position: relative;
}

#page10,#page11,#page12,#page13,#page14{
   padding-top:10px;
   /*border:1px solid lightblue;*/
   margin: 0 auto;
   padding-bottom: 5px;
   /*width: 90vw;*/
   width:100vw;
   /*max-width: 900px;*/
   height:90vh;
   align-content: center;
   position: relative;
}


#page1, #page2, #page3, #page4, #page5, #page6, #page7, #page8, #page9{
   padding-top:10px;
   margin: 0 auto;
   padding-bottom: 5px;
   width: 90vw;
   max-width: 900px;
   height:90vh;
   align-content: center;
   position: relative;
}
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
  display:none;
  overflow:hidden;
}
#page16{
  /*border: solid 2px lightblue;*/
   padding-left: 10px;
   padding-right: 10px;
   padding-top:10px;
   /*padding-left: 10px;
   padding-right: 10px;*/
   margin: 0 auto;
   padding-bottom: 5px;
   width: 90vw;
   max-width: 700px;
   height: auto;
   overflow:auto;
}

#swarovskiImage{
  max-width: 100%;
  height: auto;
  cursor: default;
}

#swarovskiImageFeedback{
  width: 100%;
  cursor: default;
}

#imageVideo{
  max-width: 100%;
  height: auto;
  cursor: default;
}


.page[index] {
  display: none;
}

.page[index="0"] {
  display: block;
}



#img1, #img2,#img3,#img4,
#img5,#img6,#img7,#img8,
#img9,#img10,#img11,#img12,
#img13,#img14,#img15,#img16{
  border: 3px solid transparent;
}

.images{
  cursor: pointer;
  padding: 1px;
}



#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,
#box10,#box11,#box12,#box13,#box14,#box15,#box16,#box17,#box18,
#box19,#box20,#box21,#box22,#box23,#box24,#box25,#box26,#box27,
#box28,#box29,#box30{
  cursor: pointer;
}


.button{
  color:white;
  background-color: black;
  font-family: 'Swarovski Futura';
  font-weight: 300;
  width:110px;
  height: 42px;
  letter-spacing: 0.525px;
  font-size: 15px;
  margin: 5px;



  cursor: pointer;
  border: none;
}

#sendButton{
  color:white;
  background-color: black;
  font-family: 'Swarovski Futura';
  font-weight: 300;
  margin-left: 10px;
  letter-spacing: 0.525px;
  width:110px;
  cursor: pointer;
  border: none;
}

.buttonKontaktImpress{
  color: #262626;
  font-family: 'Swarovski Futura';
  /*padding: 5px 5px;*/
  margin: 2px;
  text-align: left;
  border: none;
  cursor: pointer;
}


.selecter {
  /*background-color: var(--main-color);*/
  background-color: transparent;
  font-family: 'Swarovski Futura';
  width:100%;
  height:40px;
  border:none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 10px;
  font-size: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: #b8b7b6;
  outline: none;
  cursor: pointer;
}

select.selecter {
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, black, black);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}


select option li{
  color: #666;
  font-family: 'Swarovski Futura';
}

select::-ms-expand {
  display: none;
}

.select-wrapper {
  position: relative;
}
.select-wrapper::before {
  /*font-family: fontello;*/
  content: "\f107";
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 10px;
  color: #fff;
  pointer-events: none;
}

.links{
  color:black;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Swarovski Futura';
  padding-left:1px;
}

.stellenLink{
  color:black;
  /*text-decoration: none;*/
  font-size: 18px;
  font-family: 'Swarovski Futura';
  padding-left:1px;
}


#stellenList a{
  color:black;
  font-size: 18px;
  font-family: 'Swarovski Futura';
  padding-left:1px;
}

.ui-dialog > .ui-widget-header {
  /*background-color: var(--main-color);*/
  background-color: transparent;
  border: none;

}

.dialogheader{
  font-family: 'Swarovski Futura';
  font-weight: 300;
}


.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
  background-color: black;
}


/*
button:hover{
  background:#000;
  color:#EEE;
}*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	/*colorchange
	background: #007fff;*/
	background: #000000;
	font-weight: normal;
	color: #ffffff;
}


#dialog{
  bottom:5px;
}

#opener{
  /*background-color: var(--main-color);*/
  background-color: transparent;
  font-size: 15px;
  padding-left:0px;
}

#opener2{
  /*background-color: var(--main-color);*/
  font-size: 15px;
  background-color: transparent;
  padding-left:0px;
}


#zurückBildButton,#zurückBildButton2,#zurückBildButton3,#zurückBildButton4,
#zurückBildButton5,#zurückBildButton6,#zurückBildButton7,#zurückBildButton8{
  margin-top: 5px;
}

#zurückButton{
  margin-top: 5px;
}

#zurückAussagenButton,#zurückAussagenButton2,#zurückAussagenButton3{
  margin-top: 5px;
}

#zurückDiamantButton{
  margin-top: 5px;
}

 select, label {
     display:block;
 }

 #wrapperBildButtons1,#wrapperBildButtons2,#wrapperBildButtons3,#wrapperBildButtons4,
 #wrapperBildButtons5,#wrapperBildButtons6,#wrapperBildButtons7,#wrapperBildButtons8{
   margin: 0 auto;
   display: flex;
   justify-content: center;
 }


 #wrapperAussagenButtons1,#wrapperAussagenButtons2,#wrapperAussagenButtons3,
 #wrapperAussagenButtons4,#wrapperAussagenButtons5{
   margin: 0 auto;
   display: flex;
   justify-content: center;
 }

 #wrapperDiamantButtons{
   margin: 0 auto;
   display: flex;
   justify-content: center;
   margin-top:50px;
 }

 #wrapperButtons{
   margin: 0 auto;
   display: flex;
   justify-content: center;
   margin-top:120px;
 }

 #wrapperSendButton{
   margin: 0 auto;
   display: flex;
   justify-content: center;
 }

 #hinweis{
   margin: 0 auto;
   display: flex;
   justify-content: center;
 }

.imageContainer{
  text-align: center;
  background-color: #F8F8F8;
  max-width:200px;
  width: 100%;
  cursor: pointer;
}

.bottomText {
  bottom: 12px;
  max-width:200px;
  font-family: 'Swarovski Futura';
}

#diamant1, #diamant2, #diamant3, #diamant4{
  border:1px solid transparent;
  max-width:200px;
  width:100%
}

 * {
   box-sizing: border-box;
 }
 /* Three image containers (use 25% for four, and 50% for two, etc) */


 .columnDiam{
   width: 45%;
   max-width: 200px;
   padding: 5px;
   display: flex;
   justify-content: center;
 }

 .rowDiam{
   width:90%;
   margin:0 auto;
   display: flex;
   justify-content: center;
 }

 .rowDiam::after {
   content: "";
   clear: both;
   display: table;
 }

 .diamonds{
   width:90%;
   margin:0 auto;
 }

 .column{
     margin:0 auto;
     height:50%;
 }



.boxes{
  width:90%;
  margin:0 auto;
}

.row{
  max-width:90%;
  margin:0 auto;

}

.row::after {
  content: "";
  clear: both;
  display: table;
}


hr {
    display: block;
    margin-before: 0.1em;
    margin-after: 0.1em;
    margin-start: auto;
    margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
    color:#b8b7b6;
}

.arrow{
  position:absolute;
  top:50%;
  width:6%;
}

.column2 {
  float: left;
  padding: 3px;
  /*border:1px solid green;*/
  height:110px;
  width:47%;
  margin-top:5px;
  margin-bottom: 5px;
  font-family: 'Swarovski Futura';
  font-size: 17px;
  color: #262626;
  text-align: center;
  overflow:auto;
  background-color: #F8F8F8;

    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */


}

.column21 {
  float: right;
  padding: 3px;
  height:110px;
  width:47%;
  margin-top:5px;
  margin-bottom: 5px;
  font-family: 'Swarovski Futura';
  font-size: 17px;
  color: #262626;
  text-align: center;
  overflow:auto;
  background-color: #F8F8F8;

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}


.row2{
  width:100%;
  margin:0 auto;
  margin-bottom: 20px;
  position: relative;
}

.row2::after {
  content: "";
  clear: both;
  display: table;
}


 .container {
   align-content: center;
   overflow: hidden;
   /*border: solid 2px lightblue;*/
 }



@media only screen and (min-width: 600px){

  #page10,#page11,#page12,#page13,#page14{
     padding-top:10px;
     /*border:1px solid lightblue;*/
     margin: 0 auto;
     padding-bottom: 5px;
     /*width: 90vw;*/
     width:100vw;
     max-width: 900px;
     height:90vh;
     align-content: center;
     position: relative;
  }



  .arrow{
    position:absolute;
    top:50%;
    width:4%;
  }

  .row{
    width:90%;
    /*position: absolute;
    top: 40%;
    left: 0;
    right:0;
    transform: translateY(-40%);*/
    margin:0 auto;
  }


  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  .column {
    float: left;
    width: 50%;
  }
  .column2 {
    float: left;
    height:110px;
    width:45%;
    line-height: 28px;
    padding: 10px;
    /*width: 45%;
    height:20vh;
    padding-top: 10%;
    padding-left: 5px;
    padding-right: 5px;*/
    margin-top:5px;
    margin-bottom: 5px;
    margin-left: 3%;
    font-family: 'Swarovski Futura';
    font-size: 17px;
    color: #262626;
    text-align: center;
    overflow:auto;
    background-color: #F8F8F8;
  }

  .column21 {
    float: right;
    height:110px;
    width:45%;
    line-height: 28px;
    padding: 10px;
    /*width: 45%;
    height: 20vh;
    padding-top: 10%;
    padding-left: 5px;
    padding-right: 5px;*/
    margin-top:5px;
    margin-bottom: 5px;
    margin-right: 3%;
    font-family: 'Swarovski Futura';
    font-size: 17px;
    color: #262626;
    text-align: center;
    overflow:auto;
    background-color: #F8F8F8;
  }
  #wrapperBildButtons1,#wrapperBildButtons2,#wrapperBildButtons3,#wrapperBildButtons4,
  #wrapperBildButtons5,#wrapperBildButtons6,#wrapperBildButtons7,#wrapperBildButtons8{
    margin: 0 auto;
    /*left: 0;
    right:0;
    top:80%;
    position: absolute;*/
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }


  #wrapperAussagenButtons1,#wrapperAussagenButtons2,#wrapperAussagenButtons3,
  #wrapperAussagenButtons4,#wrapperAussagenButtons5{
    margin: 0 auto;
    /*left: 0;
    right:0;
    top:80%;
    position: absolute;*/
    display: flex;
    justify-content: center;
  }

  #wrapperDiamantButtons{
    margin: 0 auto;
    /*left: 0;
    right:0;
    top:80%;
    position: absolute;*/
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  #wrapperButtons{
    margin: 0 auto;
    /*left: 0;
    right:0;
    top:80%;
    position: absolute;*/
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .boxes{
    width:100%;
    /*position: absolute;
    top: 40%;
    left: 0;
    right:0;
    transform: translateY(-40%);*/
    margin:0 auto;
  }
  #instructiontext{
    width:90%;
    /*position: absolute;
    top: 40%;
    left: 0;
    right:0;
    transform: translateY(-40%);*/
    margin-top: 50px;
    margin:0 auto;
  }
  .diamonds{
    width:90%;
    /*position: absolute;
    top: 45%;
    left: 0;
    right:0;
    transform: translateY(-45%);*/
    margin:0 auto;
  }
}

@media only screen and (orientation:landscape){
  #page10,#page11,#page12,#page13,#page14{
     padding-top:10px;
     /*border:1px solid lightblue;*/
     margin: 0 auto;
     padding-bottom: 5px;
     /*width: 90vw;*/
     width:100vw;
     max-width: 900px;
     height:90vh;
     align-content: center;
     position: relative;
  }


  .arrow{
    position:absolute;
    top:50%;
    width:4%;
  }


  .row{
    width:90%;
    margin:0 auto;
  }

  .row::after {
    content: "";
    clear: both;
    display: table;
  }

  .column {
    float: left;
    width: 50%;
  }
  .column2 {
    float: left;
    height:110px;
    width:45%;
    line-height: 28px;
    padding: 10px;
    margin-top:5px;
    margin-bottom: 5px;
    margin-left: 3%;
    font-family: 'Swarovski Futura';
    font-size: 17px;
    color: #262626;
    text-align: center;
    overflow:auto;
    background-color: #F8F8F8;
  }

  .column21 {
    float: right;
    height:110px;
    width:45%;
    line-height: 28px;
    padding: 10px;
    margin-top:5px;
    margin-bottom: 5px;
    margin-right: 3%;
    font-family: 'Swarovski Futura';
    font-size: 17px;
    color: #262626;
    text-align: center;
    overflow:auto;
    background-color: #F8F8F8;
  }

  #wrapperBildButtons1,#wrapperBildButtons2,#wrapperBildButtons3,#wrapperBildButtons4,
  #wrapperBildButtons5,#wrapperBildButtons6,#wrapperBildButtons7,#wrapperBildButtons8{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }


  #wrapperAussagenButtons1,#wrapperAussagenButtons2,#wrapperAussagenButtons3,
  #wrapperAussagenButtons4,#wrapperAussagenButtons5{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  #wrapperDiamantButtons{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  #wrapperButtons{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  .boxes{
    width:90%;
    margin:0 auto;
  }
  #instructiontext{
    width:90%;
    margin:0 auto;
    margin-top: 50px;
  }
  .diamonds{
    width:90%;
    margin:0 auto;
  }
}