@charset "UTF-8";
/* CSS Document */

input{
  display:none;
}

.lower label:hover{
  cursor:pointer;
}

.overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(56, 212, 48, 1);
    /* background: linear-gradient(0deg, rgba(255, 64, 180, 0.9), rgba(56, 212, 48, 0.9)); */
    background: linear-gradient(0deg, #ffc5e8, #c3f2c0); /* non-transparent light colors - 30% */
    z-index: 1000;

}
.overlay label{
	width: 58px;
	height:58px;
	position: fixed;
	right: 20px;
	top: 20px;
	background: url(../images/whiteCross.svg);
	z-index: 1000;
    cursor:pointer;
}

.lower~.overlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#op32:checked~.overlay-hugeinc, #op33:checked~.overlay-hugeinc, #op34:checked~.overlay-hugeinc, #op35:checked~.overlay-hugeinc, #op1:checked~.overlay-hugeinc, #op2:checked~.overlay-hugeinc, #op3:checked~.overlay-hugeinc, #op4:checked~.overlay-hugeinc, #op5:checked~.overlay-hugeinc, #op6:checked~.overlay-hugeinc, #op7:checked~.overlay-hugeinc, #op8:checked~.overlay-hugeinc, #op9:checked~.overlay-hugeinc, #op10:checked~.overlay-hugeinc, #op11:checked~.overlay-hugeinc, #op12:checked~.overlay-hugeinc, #op13:checked~.overlay-hugeinc, #op14:checked~.overlay-hugeinc, #op15:checked~.overlay-hugeinc, #op16:checked~.overlay-hugeinc, #op17:checked~.overlay-hugeinc, #op18:checked~.overlay-hugeinc, #op19:checked~.overlay-hugeinc, #op20:checked~.overlay-hugeinc, #op21:checked~.overlay-hugeinc, #op22:checked~.overlay-hugeinc, #op23:checked~.overlay-hugeinc, #op24:checked~.overlay-hugeinc, #op25:checked~.overlay-hugeinc, #op26:checked~.overlay-hugeinc, #op27:checked~.overlay-hugeinc, #op28:checked~.overlay-hugeinc, #op29:checked~.overlay-hugeinc, #op30:checked~.overlay-hugeinc, #op31:checked~.overlay-hugeinc {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

.overlay label {
	background: url(../images/greenCross.svg);
}  
}