/* The Modal (background) */
.modal_01, .modal_02, .modal_03, .modal_04, .modal_05, .modal_06, .modal_07, .modal_08, .modal_09, .modal_10,
.modal_11, .modal_12, .modal_13, .modal_14, .modal_15, .modal_16, .modal_17, .modal_18, .modal_19, .modal_20
         {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(100,100,100); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    animation:fadein 0.5s;
         -moz-animation:fadein 0.5s;
         -webkit-animation:fadein 0.5s;
         scroll-behavior: smooth;
}



@media all and (max-width: 1000px) {
.modal_01, .modal_02, .modal_03, .modal_04, .modal_05, .modal_06, .modal_07, .modal_08, .modal_09, .modal_10,
.modal_11, .modal_12, .modal_13, .modal_14, .modal_15, .modal_16, .modal_17, .modal_18, .modal_19, .modal_20
         {
    padding-top: 80px; /* Location of the box */
}
}



@media all and (max-width: 560px) {
.modal_01, .modal_02, .modal_03, .modal_04, .modal_05, .modal_06, .modal_07, .modal_08, .modal_09, .modal_10,
.modal_11, .modal_12, .modal_13, .modal_14, .modal_15, .modal_16, .modal_17, .modal_18, .modal_19, .modal_20
         {
    padding-top: 20px; /* Location of the box */
}
}

/* Modal Content */
.modal_01-content, .modal_02-content, .modal_03-content, .modal_04-content, .modal_05-content, .modal_06-content, .modal_07-content, .modal_08-content, .modal_09-content, .modal_10-content,
.modal_11-content, .modal_12-content, .modal_13-content, .modal_14-content, .modal_15-content, .modal_16-content, .modal_17-content, .modal_18-content, .modal_19-content, .modal_20-content
         {

    background-color: rgba(100,100,100,0.9); /* Black w/ opacity */
    margin: auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    border-left: 0px solid #d4b729;
    border-right: 0px solid #d4b729;
    max-width: 800px;
   /* box-shadow: 5px 10px 40px 0px #DFDFDF;    */
}

/* Modal text */
.modaltext
         {
         padding-left: 80px;
         padding-right: 80px;
         }


@media all and (max-width: 1450px) {
.modal_01-content, .modal_02-content, .modal_03-content, .modal_04-content, .modal_05-content, .modal_06-content, .modal_07-content, .modal_08-content, .modal_09-content, .modal_10-content,
.modal_11-content, .modal_12-content, .modal_13-content, .modal_14-content, .modal_15-content, .modal_16-content, .modal_17-content, .modal_18-content, .modal_19-content, .modal_20-content
        {
        padding: 20px 40px 20px 40px;
        width:80%;
        }
        .modaltext {
        padding-left: 20px;
        padding-right: 20px;
        }
}


@media all and (max-width: 560px) {
.modal_01-content, .modal_02-content, .modal_03-content, .modal_04-content, .modal_05-content, .modal_06-content, .modal_07-content, .modal_08-content, .modal_09-content, .modal_10-content,
.modal_11-content, .modal_12-content, .modal_13-content, .modal_14-content, .modal_15-content, .modal_16-content, .modal_17-content, .modal_18-content, .modal_19-content, .modal_20-content
        {
        padding: 20px 10px 20px 10px;
        width:96%;
        background-color: #686868;
        }
        .modaltext {
        padding-left: 5px;
        padding-right: 5px;
        }
}






/* The Close Button */
.close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10,
.close11, .close12, .close13, .close14, .close15, .close16, .close17, .close18, .close19, .close20
         {
    color: #FFDF00;

    position: fixed; right: 500px; top: 190px;
    font-size: 90px;
    font-weight: normal;
}


@media all and (max-width: 1600px) {
.close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10,
.close11, .close12, .close13, .close14, .close15, .close16, .close17, .close18, .close19, .close20

         {
        position: fixed; right: 200px; ; top: 190px;
         }
}


@media all and (max-width: 1200px) {
.close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10,
.close11, .close12, .close13, .close14, .close15, .close16, .close17, .close18, .close19, .close20

         {
        position: fixed; right: 100px; ; top: 0px;
         }
}

@media all and (max-width: 960px) {
.close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10,
.close11, .close12, .close13, .close14, .close15, .close16, .close17, .close18, .close19, .close20

         {
        position: fixed; right: 20px; ; top: 0px;
         }
}

.close1:hover, .close2:hover, .close3:hover, .close4:hover, .close5:hover, .close6:hover, .close7:hover, .close8:hover, .close9:hover, .close10:hover,
.close11:hover, .close12:hover, .close13:hover, .close14:hover, .close15:hover, .close16:hover, .close17:hover, .close18:hover, .close19:hover, .close20:hover,
.close1:focus, .close2:focus, .close3:focus, .close4:focus, .close5:focus, .close6:focus, .close7:focus, .close8:focus, .close9:focus, .close10:focus,
.close11:focus, .close12:focus, .close13:focus, .close14:focus, .close15:focus, .close16:focus, .close17:focus, .close18:focus, .close19:focus, .close20:focus
         {
    color: #FF0000;
    text-decoration: none;
    cursor: pointer;
}



/* Triggerfeld */
#info_01, #info_02, #info_03, #info_04, #info_05, #info_06, #info_07, #info_08, #info_09, #info_10,
#info_11, #info_12, #info_13, #info_14, #info_15, #info_16, #info_17, #info_18, #info_19, #info_20
             {
                 font-family: 'Roboto', sans-serif;
                 font-weight: 700;
                 font-size:50%;

                 color: #d4b729;
                 background-color:#6F6F6F;
                 border:0px solid #FF7F00; border-radius:20px;
                 padding:1px 12px 1px 12px;
                 margin-right:0px;
                 position:relative;
                 top:-5px;
                 -webkit-align-items: center;
                 align-items: center;
                 -webkit-justify-content: center;
                 justify-content: center;}

#info_01:hover, #info_02:hover, #info_03:hover, #info_04:hover, #info_05:hover, #info_06:hover, #info_07:hover, #info_08:hover, #info_09:hover, #info_10:hover,
#info_11:hover, #info_12:hover, #info_13:hover, #info_14:hover, #info_15:hover, #info_16:hover, #info_17:hover, #info_18:hover, #info_19:hover, #info_20:hover
     { color: #FFFFFF; background-color:#CABA18;}



@media all and (max-width: 560px) {
#info_01, #info_02, #info_03, #info_04, #info_05, #info_06, #info_07, #info_08, #info_09, #info_10,
#info_11, #info_12, #info_13, #info_14, #info_15, #info_16, #info_17, #info_18, #info_19, #info_20
             {
                 font-size:80%;

                 border:0px solid #FF7F00; border-radius:20px;
                 padding:1px 20px 1px 20px;
                 margin-right:0px;
                 top:0px;}
}




#link_02         { color: #1940CA; background-color:none; font-weight: 700; border-bottom:0px solid #FF7F00;/*#C0FF00;*/}
#link_02:hover   { color: #FFFFFF; background-color:#9BEA5E; font-weight: 700; border-bottom:0px solid #FF7F00;/*#C0FF00;*/}








/* ==== fixedsizedbuttons für Modals ==== */
.fixedsizedbutton_room {
  border: 0px dotted ;
  border-color:#133645;
  height: auto;
  width:100%;
  margin:0 auto;
  padding:10px 0 10px 0;
}


.fixedsizedbutton_box {
  height: 120px;
  border: 0px solid ;
  border-color:#FF007F;
  width:50%;
  margin-bottom:10px;
  float:left;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}


.fixedsizedbutton {
  height: 120px;
  width: 120px;
  border: 1px solid;
  border-radius: 60px;
  border-color:#BFBFBF;
  background-color:#FFFFFF;
  margin:0 auto;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}


.fixedsizedbutton:hover {
  background-color: #a7f400;
  border: 1px solid;
  border-color: #a7f400;
  transform: scale(1.1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

@media all and (min-width: 560px) {
        .fixedsizedbutton_room {width:100%;}
        .fixedsizedbutton_box {width:33.33%; height: 125px; margin-bottom:30px; float:left;}
        .fixedsizedbutton     {width:125px; height: 125px; border-radius:62px;}

}

@media all and (min-width: 800px) {
        .fixedsizedbutton_room {width:95%;}
        .fixedsizedbutton_box {width:33.33%; height: 155px; margin-bottom:10px; float:left;}
        .fixedsizedbutton     {width:150px; height: 150px; border-radius:75px; }
        .menuebutton_tx  {font-size: 80%; letter-spacing: 0.2em;}}

@media all and (min-width: 1200px) {
        .fixedsizedbutton_room {width:95%;}
        .fixedsizedbutton_box {width:33%; height: 155px; margin-bottom:10px; float:left;}
        .fixedsizedbutton     {width:150px; height: 150px; border-radius:75px; }
}

@media all and (min-width: 1450px) {
        .fixedsizedbutton_room {width:80%;}
        .fixedsizedbutton_box {width:33%; height: 155px; margin-bottom:10px; float:left;}
        .fixedsizedbutton     {width:150px; height: 150px; border-radius:75px; }
}