body {font-family:sans-serif;margin:0px;height:100%;width:100%;}
body {background:
 url('../../template/img/bg/marginl.png') left top repeat-y,
 url('../../template/img/bg/marginr.png') right top repeat-y;
 background-size:256px auto, 256px auto;} 

#no-homers-club {display:none;}
@media only screen and (max-width: 1279px) { iframe {display:none !important; }
	#no-homers-club {display:block;padding:20px;font-weight:bold;font-size:16pt;text-transform:lowercase;text-align:center;margin:20px auto;width:600px;}	}

.header {background-position:right;background-size:contain;height:300px;display:flex;flex-direction:row;justify-content:space-between;}
.logo {height:300px;width:300px;background-position:bottom left;}
.title {display:flex;flex-direction:column;margin-top:-60px;font-size:42pt;font-variant:small-caps;max-width:700px;text-align:center;margin-right:50px;}
.title a {text-decoration:none;}


.tabs {margin:0 auto;display:flex;flex-wrap:wrap;}
.tabs label {order: 1; // Put the labels first
	display: inline-flex;cursor: pointer;transition: background ease 0.5s;width:33%;padding:20px 0;margin:4px auto;text-align:center;font-size:24pt;font-variant:small-caps;font-weight:bold;}
.tabs .tab {order: 99; // Put the tabs last
  flex-grow: 1;width: 100%;display: none;padding: 0;margin:0;}
.tabs input[type="radio"] {display:none;}
.tabs input[type="radio"]:checked + label + .tab {display: flex;}

@media (max-width: 45em) {  .tabs .tab, .tabs label {order: initial;}
  .tabs label {width: 100%;}	}


.feature-l, .feature-r {display:flex;margin:0 auto;width:100%;font-size:32px;font-weight:bold;text-align:center;}
.feature-l {flex-direction:row;}
.feature-r {flex-direction:row-reverse;}

.feature-l .info, .feature-r .info {min-height:350px;width:60%;padding-top:15px;}

.feature-l .info h2 {text-align:right;}
.feature-r .info h2 {text-align:left;}


.feature-l .play, .feature-r .play {width:25%;font-size:16pt;}


.info h2 {display:flex;flex-direction:column;margin:4px 0 10px 0;font:20pt;font-weight:normal;font-style:italic;font-variant:small-caps;}

.info .point {display:flex;margin:10px;font-size:14pt;text-transform:lowercase;text-align:justify;padding:4px 25px;font-weight:bold;}
.info .point:before {content: " ";display:block;width:24px;height:24px;margin:0 10px;}

.info b {text-transform:uppercase;padding:0 4px;margin-top:-4px;font-size:14pt;letter-spacing:2px;}



.play a {display:flex;flex:column;font-size:14pt;justify-content:center;margin:15px auto;padding:15px;min-width:50%;max-width:60%;text-indent:50px;font-variant:small-caps;text-transform:lowercase;text-decoration:none;}

#webplay {font-size:20pt;margin:20px auto;padding:20px;text-indent:0;}

.play p, #no-homers-club p {font-size:10pt;text-transform:lowercase;font-variant:small-caps;font-style:italic;width:60%;padding:5px 0;margin:0 auto;}

#no-homers-club p {padding-top:20px;}

.play h4 {text-align:center;text-transform:lowercase;font-variant:small-caps;}

#pt-gallery {display:flex;justify-content:space-evenly;padding:10px 0;width:50%;margin:0 auto;}

.pt-item {display:flex;flex-flow:column wrap;text-transform:lowercase;font-variant:small-caps;font-size:12pt;}
.pt-item a {height:150px;width:150px;text-decoration:none;}
.pt-item img {height:100px;width:auto;padding:5px;display:flex;margin:0 auto;padding:10px;}
.pt-title {padding:6px 0;text-align:center;font-weight:bold;}

.content {display:flex;flex-direction:column;max-width:1800px;min-height:850px;margin:0 auto;}

.content h1, .content h2, .content h3, .content h4 {text-align:center;padding:10px 0;text-transform:camelcase;font-variant:small-caps;}
.content h3 {font-style:italic;text-transform:lowercase;}

.content h1 {font-size:32pt;}
.content h2 {font-size:24pt;}
.content h3 {font-size:18pt;}

.content #details p {width:60%;margin:0 auto;text-align:justify;padding:8px 0;font-size:16pt;text-transform:lowercase;}


.content #details img.r {float:right;}
.content #details img.l {float:left;}
.content #details img {min-width:100px;max-width:33%;height:auto;margin:10px 20px;}
.content #details hr {width:50%;margin-top:20px;border:0;}

#main {display: flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:start;align-content:stretch;padding:40px 0;width:80%;margin:0 auto;}
#main p, .play p {text-align:center;}

#sizzle {width:900px;height:400px;margin:0 auto;}



#game {flex: 0 0 auto;margin: 10px auto;border:0px;padding:0;}

canvas {image-rendering:optimizeSpeed;-webkit-interpolation-mode:nearest-neighbor;-ms-touch-action:none;border: 0px;}
:-webkit-full-screen #canvas {width:100%;height:100%;}


.content #controls {display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:stretch;align-content:center;width:100%;text-align:center;font-variant:small-caps;}

.content #controls .item {flex: 0 0 auto;padding-bottom:10px;margin:10px;font-size:16pt;}
.content #controls .item b {display:block;padding: 10px 50px;margin 10px 5px;}
.content #controls .item i {display:block;padding:10px 20px;}


.footer {
display:flex;padding:0;margin:0 auto;font-size:18pt;text-align:center;text-transform:lowercase;font-variant:small-caps;font-style:oblique;padding:40px 0 30px 0;justify-content:space-between;align-items:center;width:80%;}

.footer-copy {font-weight:bold;margin:20px 0;padding:15px 0;}

.footer a {font-weight:bold;text-decoration:none;}

.footspacer {width:33%;}

.footer-contact {min-width:500px;max-width:800px;padding: 0 0 20px 0;text-decoration:none;margin:0 auto;border-radius:15px;}
.footer-contact img {margin:10px 25px;height:50px;width:auto;}

#slogan {font-size:32pt;font-style:italic;text-align:center;text-transform:lowercase;font-variant:small-caps;padding:40px 0;}

#tsunderdog {font-size:14pt;width:80%;margin:0;padding:0 0 20px 0;text-align:right;font-weight:bold;text-transform:lowercase;font-variant:small-caps;}
#tsunderdog a {text-decoration:none;}