body, .sp-spot, .sp-mob-area a
{ background-color: #6E4369; color: #ffe4b5; }

.thumb a, .sp-area, .sp-link a, .sp-spots, .sp-mob-area
{ background-color: #ffffff; }

a
{ color: rgb(240,240,240); }

h1  { background-color: #ffffff; color: #000000; }
.sp-link a { background-color: #ffffff; color: #000000;  text-decoration:underline; }

.sp-link a:hover { text-decoration:none; }


body,html,div,a,main,figure,img,h1 { margin: 0; padding: 0; }

body { font-family: Arial, sans-serif; }

h1 { font-size: 22px; line-height: 28px; font-weight: bold; margin: 10px 10px 0 10px; text-align: center; border-radius: 4px; padding: 10px; }


img { display: block; }

a { text-decoration: none; }

.content { overflow: hidden; margin: 0 auto; max-width: 968px; padding-bottom: 40px; }

.gallery { overflow: hidden; padding: 6px 8px 0 8px; }

.thumb { overflow: hidden; width: 50%; float: left; }
.thumb a { padding: 3px; overflow: hidden; margin: 4px 2px 0 2px; display: block; border-radius: 4px; }
.thumb figure { position: relative; overflow: hidden; border-radius: 4px; padding-bottom: 135.9649%; }
.thumb figure img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.sp-mob-area { clear: both; margin: 10px 10px 0 10px; padding: 10px 3px; border-radius: 4px; }
.sp-mob-area a { display: block; width: 300px; height: 100px; margin: 0 auto; border-radius: 4px; position: relative; overflow: hidden; }
.sp-mob-area img { width: 300px; height: auto; border-radius: 4px; }

.sp-area { clear: both; margin: 10px 10px 0 10px; padding: 3px; border-radius: 4px; }
.sp-area img { width: 100%; height: auto; margin: 0 auto; max-width: 950px; border-radius: 4px; }

.sp-link { clear: both; }
.sp-link a { display: block; margin: 10px 10px 0 10px; padding: 15px; border-radius: 4px; font-size: 22px; text-transform: uppercase; line-height: 22px; text-align: center; font-weight: bold; }

.sp-spots { font-size: 0;  overflow: hidden; text-align: center; clear: both; border-radius: 4px; margin: 10px 10px 0 10px; padding-bottom: 10px; }
.sp-spot { width: 300px; height: 250px; overflow: hidden; margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; border-radius: 4px; }
.sp-spot iframe { border: 0 none !important; width: 300px; height: 250px; overflow: hidden; border-radius: 4px; }

@media all and (min-width:600px) {
    .thumb { width: 25%; }
}

@media all and (min-width:640px) {
    h1 { font-size: 26px; line-height: 32px; }
}

@media all and (min-width:1000px) {
    h1 { font-size: 30px; line-height: 38px; margin-top: 20px; }
    .content { width: 980px; max-width: 980px; }
    .gallery { padding: 12px 6px 0 6px; }
    .thumb { width: 242px; }
    .thumb a { margin: 8px 4px 0 4px; }
    .thumb figure { padding-bottom: 310px; }
    .thumb figure img { -moz-transition: 0.5s ease; -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; }
    .thumb a:hover figure img { transform: scale(1.05); }
    .sp-area { padding: 14px; margin-top: 20px; }
    .sp-link a { margin-top: 20px; padding: 20px; font-size: 32px; line-height: 28px; }
    .sp-spots { padding: 5px 0 15px 0; margin-top: 20px; }
    .sp-spot { margin: 10px 7px 0 7px; }
    .sp-mob-area { display: none; }

}

@media all and (max-width:1020px) {* { -webkit-tap-highlight-color: transparent; -webkit-focus-ring-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}}