.modal1,
.modal2,
.modal3,
.modal4,
.modal5,
.modal6,
.modal7,
.modal8,
.modal9,
.modal10,
.modal11,
.modal12,
.modal13,
.modal14,
.modal15,
.modal16,
.modal17,
.modal18,
.modal19 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    transition: opacity 500ms ease-in;
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    pointer-events: none;
}
.modal1:target,
.modal2:target,
.modal3:target,
.modal4:target,
.modal5:target,
.modal6:target,
.modal7:target,
.modal8:target,
.modal9:target,
.modal10:target,
.modal11:target,
.modal12:target,
.modal13:target,
.modal14:target,
.modal15:target,
.modal16:target,
.modal17:target,
.modal18:target,
.modal19:target {
    opacity:1;
    pointer-events: auto;
}
.modal1 > div,
.modal2 > div,
.modal3 > div,
.modal4 > div,
.modal5 > div,
.modal6 > div,
.modal7 > div,
.modal8 > div,
.modal9 > div,
.modal10 > div,
.modal11 > div,
.modal12 > div,
.modal13 > div,
.modal14 > div,
.modal15 > div,
.modal16 > div,
.modal17 > div,
.modal18 > div,
.modal19 > div {
	max-width: 900px;
	width: 85%;
	position: relative;
	margin: 10% auto;
	Xpadding: 5px 10px 13px 10px;
	border: 4px solid #cc0202;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	background: #000;
/*
	background: -webkit-linear-gradient(#000, #999);
	background: -moz-linear-gradient(#000, #999);
	background: -o-linear-gradient(#000, #999);
*/
}
.modal1 > div img,
.modal2 > div img,
.modal3 > div img,
.modal4 > div img,
.modal5 > div img,
.modal6 > div img,
.modal7 > div img,
.modal8 > div img,
.modal9 > div img,
.modal10 > div img,
.modal11 > div img,
.modal12 > div img,
.modal13 > div img,
.modal14 > div img,
.modal15 > div img,
.modal16 > div img,
.modal17 > div img,
.modal18 > div img,
.modal19 > div img {
	width: 100%;
	border-radius: 25px 25px 25px 25px;
	-webkit-border-radius: 25px 25px 25px 25px;
	-moz-border-radius: 25px 25px 25px 25px;
}
.modal17 > div img,
.modal6 > div img,
.modal9 > div img {
	width: 50%;
	height: 50%;
	Xborder-radius: 0px;
	X-webkit-border-radius: 0px;
	X-moz-border-radius: 0px;
}

/*** shrink these down to fit ***/

#kona {
	height: 220px;
	width: 172px;
}
#cal {
	height: 149px;
	width: 200px;
}

.modal1 > div span,
.modal2 > div span,
.modal3 > div span,
.modal4 > div span,
.modal5 > div span,
.modal6 > div span,
.modal7 > div span,
.modal8 > div span,
.modal9 > div span,
.modal10 > div span,
.modal11 > div span,
.modal12 > div span,
.modal13 > div span,
.modal14 > div span,
.modal15 > div span,
.modal16 > div span,
.modal17 > div span,
.modal18 > div span,
.modal19 > div span {
	padding: 5px 20px 5px 20px;
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 96%;
	Xbackground: #000;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	text-align: left;
	border-radius: 0px 0px 25px 25px;
	-webkit-border-radius: 0px 0px 25px 25px;
	-moz-border-radius: 0px 0px 25px 25px;
}
.close {
    background: #cc0202;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    -moz-box-shadow: 1px 1px 3px #000;
}
.close:hover {
	color: #000;
}

@media screen and (max-width: 600px) {
img {
	width: 100%;
}
.modal17 > div img,
.modal6 > div img,
.modal9 > div img {
	width: 85%;
	height: 85%;
}
.modal1 > div span,
.modal2 > div span,
.modal3 > div span,
.modal4 > div span,
.modal5 > div span,
.modal6 > div span,
.modal7 > div span,
.modal8 > div span,
.modal9 > div span,
.modal10 > div span,
.modal11 > div span,
.modal12 > div span,
.modal13 > div span,
.modal14 > div span,
.modal15 > div span,
.modal16 > div span,
.modal17 > div span,
.modal18 > div span,
.modal19 > div span {
	font-size: 10px;
}
#kona,
#cal {
	height: auto;
	width: 100%;
}

}