body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; color:black;  /*  background-color: #383838; */ background-color: #202020; } 







/* LOADING CIRCLE */
#loading{       width: 100%;    height: 100%;   position: fixed;        display: block; opacity: 1;     background-color: white;        z-index: 99;


              display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                        display: -ms-flexbox;  /* TWEENER - IE 10 */
                        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                                -webkit-box-pack: center; /* justify-content */
                                 -webkit-box-orient: horizontal;

                      display: -webkit-flex; /* NEW - Chrome */
                                -webkit-justify-content: center;
                                -webkit-align-items: center; /* New Safari */

                      display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                                justify-content: center;
                                align-items: center;

}
#whiteCircle  {                     width:  50px;   height: 50px;   border-radius: 50%; background-color: white;     }
#loadingCircle{                                     width:  53px;   height: 53px;   border-radius: 50%; background-color: white;

                    display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox;  /* TWEENER - IE 10 */
                    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                            -webkit-box-pack: center; /* justify-content */
                             -webkit-box-orient: horizontal;

                  display: -webkit-flex; /* NEW - Chrome */
                            -webkit-justify-content: center;
                            -webkit-align-items: center; /* New Safari */

                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                            justify-content: center;
                            align-items: center;

        background: linear-gradient( to bottom left, black, silver );
        animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}


























#cover{
background-image: url("cover.jpg");
height: 100%;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
background-attachment: fixed; 
text-align: center; 
overflow-y: hidden; 
}
#titleWrapper{ height: auto; text-align: center;  width: 100%; height: auto; position: relative; top: 50%; 

                  display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                  display: -ms-flexbox;  /* TWEENER - IE 10 */
                  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    -webkit-box-pack: center; /* justify-content */
                
                  display: -webkit-flex; /* NEW - Chrome */
                    -webkit-justify-content: center;

                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                    justify-content: center; 

                  -ms-transform: translateY(-50%);
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                  transform: translateY(-50%); 

}

#title {line-height: 0.9em; font-weight: bold; letter-spacing: -0.02em;  
        padding-right: 40px;
        padding-left: 40px;
        padding-top: 40px;
        padding-bottom: 70px;

        width: auto; text-align: center; display: inline-block; color: white;  font-size: 35px;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
        background-color:rgba(1, 1, 1, 0.2);
}

.italicTitle{
  font-style: italic;
  font-weight: 100;
  font-size: 35px;
}
.bold{
  font-weight: bold;
}

/* The Top Menu */
h1{ font-size: 55px;  font-weight: 700; color: white; font-style: ;                             }
h2{ font-size: 50px;  font-weight: 700; color: black; font-style: ;  margin: 0 0; padding: 0 0; }
h3{ font-size: 40px;  font-weight: 700; color: white; font-style: ;  margin: 0 0;  }

nav  {  float: left; display: inline-block; vertical-align: middle; margin-left: 60px; }
nav a{  cursor: pointer; margin-left: 30px; margin-right: 30px; font-size: 16px; font-weight: lighter; text-align: center; text-decoration: none; color: black; }

#homeP{  }
#votingP{  }

#menu{ position: absolute; display: inline-block; margin: 0 0; width: 100%; height: 60px; line-height: 60px; margin-top: 20px;} /* line-height necessary for vertical align middle */

#langSwitch{ float: right; display: inline-block; margin-right: 60px;  color: black; display: inline-block; vertical-align: middle; }
#enP, #esP{ margin-left: 30px; margin-right: 30px; font-size: 16px; display: inline-block;}
#enRadio, #esRadio{ visibility: hidden; display: none; } 
#enRadio:checked + label { text-decoration: underline; }
#esRadio:checked + label { text-decoration: underline; }


.fullScreenWhite{
height: 100%; 
background-color: white;
background-attachment: fixed;
background-repeat: no-repeat; 

}

.fullScreenText{
    margin-right: 10%;
    margin-left: 10%;
    text-align:center; height: auto; position: relative; top: 50%; 

                  -ms-transform: translateY(-50%);
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                  transform: translateY(-50%); 
}
.fullScreenLine{
  margin-top: 20px;
  width: 50%;
  margin-bottom: 30px;
}
.fullScreenTable{
margin: 0 auto;
}
.fullScreenTable td{
padding-right: 40px;
padding-left: 40px;
font-size: 20px;
font-weight: 100;
line-height: 1.3em;
}
#lineBetweenPeopleTable {
padding-right: 10%;
padding-left: 10%;  
}

.fullWrapper{
  width: 100%;
  text-align: center;

        display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                  display: -ms-flexbox;  /* TWEENER - IE 10 */
                  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    -webkit-box-pack: center; /* justify-content */
                     -webkit-box-orient: horizontal;
                
                  display: -webkit-flex; /* NEW - Chrome */
                    -webkit-justify-content: center;
                    -webkit-align-items: center; /* New Safari */

                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                    justify-content: center; 
                    align-items: center;
        

}
.halfWrapper{
  width: 50%;
}
.halfWrapperText{
  color: white;
  width: 40%;
  height: inherit;
  margin-right: 5%;
  margin-left: 5%;
}
.halfWrapper img{
  width:100%;
  display: block;
}
#galleryXXX{
  background-image: url("../mel/spi/4_IMG_2363.jpg");
  background-size: 50% auto;
  background-attachment: fixed; 
  background-repeat: no-repeat; 
}
.halfWrapperText p{
font-size: 20px;
font-weight: lighter;  
}
.halfWrapperText a{
  color: white;
  text-decoration: underline;
}
.halfWrapperTextLine{
    margin-top: 20px;
    width: 50%;
    margin-bottom: 40px;
}



/* The Texts */
.infoText{
  padding-top:   100px;
  padding-bottom: 100px;
  padding-left:  10%;
  padding-right: 10%;
  height: auto;
  color: #cccccc;
  font-weight: 100;


   background-color: #202020; 

  font-size: 20px;
  text-align: justify;
  line-height: 1.6em;

}
.tdFirst{
  width: 50%;
  padding-right: 60px;
vertical-align: top;
}
.tdSecond{
  width: 50%;
  padding-left: 60px;
vertical-align: top;
}

.textLineTop{
  width: 100%;
  margin-bottom: 40px;
    color: #cccccc;
}
.textLineBottom{
  margin-top: 40px;
  width: 100%;
  color: #cccccc;
}

#desertBg, #desertBg2, #desertBg3,
#concBg, #concBg2, #concBg3,
#subBg, #subBg2, #subBg3,
#spiBg, #spiBg2, #spiBg3,
#harBg, #harBg2, #harBg3{
height: 100%;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
background-attachment: fixed; 
text-align: center; 
overflow-y: hidden; 
}
#desertBg{
  background-image: url("../mel/spe/11_IMG_2145.jpg");
}
#desertBg2{
  background-image: url("../mel/spe/14_IMG_3332.jpg");
}
#desertBg3{
  background-image: url("../mel/spe/13_IMG_2687.jpg");
}
#concBg{
  background-image: url("../mel/spe/21_IMG_2732.jpg");
}
#concBg2{
  background-image: url("../mel/spe/IMG_3154.jpg");
}
#concBg3{
  background-image: url("../mel/spe/25_IMG_3204.jpg");
}
#subBg{
  background-image: url("../mel/spe/51_IMG_2053.jpg");
}
#subBg2{
  background-image: url("../mel/spe/53_IMG_2880.jpg");
}
#subBg3{
  background-image: url("../mel/spe/54_IMG_3074.jpg");
}
#spiBg{
  background-image: url("../mel/spe/31_IMG_3181.jpg");
}
#spiBg2{
  background-image: url("../mel/spe/IMG_3085.jpg");
}
#spiBg3{
  background-image: url("../mel/spe/33_IMG_3387.jpg");
}
#harBg{
  background-image: url("../mel/spe/41_IMG_2539.jpg");
}
#harBg2{
  background-image: url("../mel/spe/44_IMG_2039.jpg");
}
#harBg3{
  background-image: url("../mel/spe/45_IMG_2599.jpg");
}


#impress{
    width: 100%;
    height: 200px;
   background-color: #202020; 
   color: grey;
   padding-top: 60px ;
}

#impressList{
    width: 30%;
    height: 140px; /* size of impress minus padding-top */
   color: grey;
   float: left;
padding-left:10%;
}
#impressAction{
    width: 60%;
    height: 190px;
   color: grey;
float: left;
color: white;
}

#impressImpressum{
display: none;
}
#impressContact{
display: none;
}
#impressUseFotos{
display: none;
}

#impressP, #contactP, #useP{
cursor: pointer;
}


.normalTitle{
  padding-top: 100px;
  padding-bottom: 80px;
  text-align: center;
}



.containerGallery{
    padding-left:  2%;
    padding-right:  2%;
    padding-top: 70px;
    height: auto;
    display: inline-block;
    background-color: #282828;
}


.imgGallery{
display: grid;
box-shadow: 0px 0px 0px 2px #202020;
}

div.imgGallery img {
    width: 100%;
    height: auto;
/*  pointer-events: none; disables all clicks on the image, but I want left click to be allowed */
    cursor: pointer;
}


.responsiveGalleryNormal {

  /*padding-bottom: calc( ( (100% - 6 * 2%) / 3  )  * 1/6   ); */
  padding-bottom:  4.888888%;

  padding-left: 2%;
  padding-right: 2%;

    /*width:   calc( (100% - 6 * 2%) / 3   ); */  /* 3*x + 6*pad = 100 there for x = (100 - 6pad)/3 */   
    width:    29.333333%  ;  /* 3*x + 6*pad = 100 there for x = (100 - 6pad)/3 */   
    text-align: center;
    float: left;

}
.responsiveGalleryHigh {
  padding-left: 2%;
  padding-right: 2%;

  /*padding-bottom: calc( (100% - 6 * 2%) / 3 * 1/6) ; */
  padding-bottom: 4.888888% ;

    /*width:   calc( (100% - 6 * 2%) / 3  );*/  /* 3*x + 6*pad = 100 there for x = (100 - 6pad)/3 */   
    width:   29.333333%;  /* 3*x + 6*pad = 100 there for x = (100 - 6pad)/3 */   
    text-align: center;
    float: right;
}

















#secretSubmit{
  display: none;
}

.normal{
 font-size: 20px;
 margin: 0 0;
  color: gray;
  text-align: justify;
-webkit-text-size-adjust: none;
}
.special{
 font-size: 20px;
 margin: 0 0;
  color: gray;
  text-align: justify;
  color: white;
-webkit-text-size-adjust: none;
}



/* The Voting */

#voting{
  padding-bottom:60px;
    width: 100%;
    height: auto;
    background-color: #282828;
}
.votingWrapperUnchecked{
  margin-right: 15%;
  margin-left: 15%; 
}
/* The question and Grafic */
.questionDivBig{
  width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;

        display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                  display: -ms-flexbox;  /* TWEENER - IE 10 */
                  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    -webkit-box-pack: center; /* justify-content */
                     -webkit-box-orient: horizontal;
                
                  display: -webkit-flex; /* NEW - Chrome */
                    -webkit-justify-content: center;
                    -webkit-align-items: center; /* New Safari */

                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                    justify-content: center; 
                    align-items: center;
        

}
.question{
  width:55%;
  padding-right: 5%;
}
.questionGrafic{
width: 40%; 
}
.votingCharts{
 font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: none;
padding-left: 1%;
 width:40%;
height:auto;
-webkit-text-size-adjust: none;
}
.chartWrapper{
width:100%;
text-align: center;
}
.questionTitle{
margin-top: 0;
margin-bottom: 15px; 
  font-size: 20px;
    color: white;
      text-align: justify;
-webkit-text-size-adjust: none;
}
/* Vote Nav Menu */
#voteNavWrapper{
width:100%;
}
#voteNav{
	
margin: 0 auto;
   padding-top: 60px;
   padding-bottom: 60px;
  font-size: 22px;
  text-align:center;
}
.voteNavChecked{
    color: white;
    cursor: pointer;
-webkit-text-size-adjust: none;
}
.voteNavNotChecked{
    color: grey;
        cursor: pointer;
-webkit-text-size-adjust: none;
text-align: center;
}

#takePartVote{
text-align: center;
padding-right: 40px;
}
#showResultVote{
text-align: center;
padding-left: 40px;
}







/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    /*  padding-top: 30px;*/ /* Location of the box */
    left: 0;
    top: 0;
    height: 100%; /* Full height */
    width: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    text-align: center;
}

/* Modal Content (image) */
.modal-content {
  height: 90%;
  position:relative; /*these two lines make it in vertical center */
  top: 5%; 
}


/* The Close Button */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

#nextright {
    position: absolute;
    top: 40%;
    right: 10%;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    transform: scale(.5, 1);
    cursor: pointer;
}

#nextleft {
    position: absolute;
    top: 40%;
    right: 88%;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    transform: scale(.5, 1);
    cursor: pointer;

}


.switchthree{

  background: rgba(255,255,255,.1);
  margin: 0 auto;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 50px;
  position: relative;
  height: 50px;
  width: 200px;

}
.switchthree > * {
  float: left;
 display: inline;
}

.switchthree input[type=radio]{
  display: none;
}

.switchthree label{

  font-size: 20px;
  color: grey;
  width: 50%;
  height: 50px;
  border-radius: 50px;
  cursor: pointer;


        display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                  display: -ms-flexbox;  /* TWEENER - IE 10 */
                  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    -webkit-box-pack: center; /* justify-content */
                     -webkit-box-orient: horizontal;
                
                  display: -webkit-flex; /* NEW - Chrome */
                    -webkit-justify-content: center;
                    -webkit-align-items: center; /* New Safari */

                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
                    justify-content: center; 
                    align-items: center;
        

}
.switchthree label p{
 padding: 0 0;
margin: 0 0;
text-align: left;
}

.slider{
  width: 100px;
  height: 50px;
  position: absolute;
  border-radius: 50px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;

}
#submitVoting{
  background: rgba(255,255,255,.3);
 border-color:  red;
 border-style: solid;
 border: 2px;
  margin: 0 auto;
  border-radius: 50px;
  position: relative;
  height: 50px;
  width: 200px;

  font-size: 20px;
  color: white;
  cursor: pointer;

  justify-content: center;
  align-items: center;
}
.hiddenSubmit{
  display: none;
}
.visibleSubmit{

        display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
                  display: -ms-flexbox;  /* TWEENER - IE 10 */
                  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                
                  display: -webkit-flex; /* NEW - Chrome */
        
                  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
        
}

#yes:checked ~ #sliderOne{
  background: rgba(255,255,255,.3);
  left: 0px;
}
#neutral:checked ~ #sliderOne{
  background: rgba(255,255,255,.3);
  left: 50px;
}
#no:checked ~ #sliderOne{
  background: rgba(255,255,255,.3);
  left: 100px;
}

#yes:checked ~ #labelYes p{
color:white;
}
#no:checked ~ #labelNo p{
color:white;
}

#yesPush:checked ~ #sliderOneTwo{
  background: rgba(255,255,255,.3);
  left: 0px;
}
#neutralPush:checked ~ #sliderOneTwo{
  background: rgba(255,255,255,.3);
  left: 50px;
}
#noPush:checked ~ #sliderOneTwo{
  background: rgba(255,255,255,.3);
  left: 100px;
}

#yesPush:checked ~ #labelYesPush p{
color:white;
}
#noPush:checked ~ #labelNoPush p{
color:white;
}

#yesWant:checked ~ #sliderTwo{
  background: rgba(255,255,255,.3);
  left: 0px;
}
#neutralWant:checked ~ #sliderTwo{
  background: rgba(255,255,255,.3);
  left: 50px;
}
#noWant:checked ~ #sliderTwo{
  background: rgba(255,255,255,.3);
  left: 100px;
}

#yesWant:checked ~ #labelYesWant p{
color:white;
}
#noWant:checked ~ #labelNoWant p{
color:white;
}


#yesNece:checked ~ #sliderThree{
  background: rgba(255,255,255,.3);
  left: 0px;
}
#neutralNece:checked ~ #sliderThree{
  background: rgba(255,255,255,.3);
  left: 50px;
}
#noNece:checked ~ #sliderThree{
  background: rgba(255,255,255,.3);
  left: 100px;
}

#yesNece:checked ~ #labelYesNece p{
color:white;
}
#noNece:checked ~ #labelNoNece p{
color:white;
}