#mask {
  position:fixed;
  left:0;
  top:0;
  z-index:99999999;
  background-color:#26262c;
  display:none;
}  
#boxes .window {
  position: fixed;
    left: 0;
    top: 0;
    width: 440px;
    height: 850px;
    display: none;
    z-index: 99999999999;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}
#boxes #dialog {
  width: 450px;
  height: auto;
  padding: 10px 10px 3px 10px;
  background-color: #ffffff;
  font-size: 15pt;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) ;
-ms-transform:translate(-50%, -50%)  ;
-o-transform:translate(-50%, -50%)   ;
transform: translate(-50%, -50%);
}

.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	color: red;
}

.childrensday{width: 100%;}


@media screen and (max-width: 868px){
#boxes #dialog{width: 35%;}

}



@media screen and (max-width: 768px){
#boxes #dialog{width: 40%;}

}

@media screen and (max-width: 680px){
#boxes #dialog{width: 40%;}

}


/* Smartphones (portrait and landscape) ———– */
/*@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

#boxes #dialog{width: 85%;}

}*/


@media screen and (max-width: 568px){
#boxes #dialog{width: 40%;}

}

@media screen and (max-width: 480px){
#boxes #dialog{width: 85%;}

}