* {
  font-family: "p22-underground", sans-serif; font-weight: 300;
  font-size: 18px; line-height: 1.4;
  box-sizing: border-box;
  margin: 0; padding: 0;
}
body {
  background-color: #f6f6f6; color: #555;
}

h1 {
  font-size: 32px; font-weight: 900; color: #EB2A3F; line-height: 1; margin-bottom: 10px;
}
h2 {
  font-size: 26px; font-weight: 900; color: #444; text-transform: uppercase; line-height: 1; margin-bottom: 10px;
}
h3 {
  font-size: 17px; font-weight: 300; color: #EB2A3F; line-height: 1; margin-bottom: 10px;
}
p {margin-bottom: 10px;}
strong {font-weight: 900; color: #444;}
section {margin-bottom: 40px;}
img {max-width: 100%; border: none; height: auto; -ms-interpolation-mode: bicubic;}

a {color: #DD8C2C; font-weight: 500; text-decoration: none; transition: all 300ms ease 0ms;}
a:hover {color: #D58629; text-decoration: underline;}

.content {max-width: 1200px; margin: 0 auto; padding: 20px 40px;}

.columns {width: 100%; overflow: hidden;}
.column {float: left;}
.columns .col2-1 {width: 50%; padding-right: 20px;}
.columns .col2-2 {width: 50%; padding-left: 20px;}

.columns .col31-1 {width: 100%; padding-right: 20px;}
.columns .col31-2 {min-width: 350px; width: 350px;}
.columns {
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.header {background-color: white;}
.header h1 {margin-bottom: 0;}

.menu-enable {background-color: #282828; display: none;}
.menu-enable .content {padding: 0;}
.menu-enable a {
  text-decoration: none; padding: 14px 20px 11px 60px; color: white;
  font-weight: 500; font-size: 17px;
  display: block; /*text-align: center;*/
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 30px 12px;
  
}

.navigation {
  color: white; background-color: #353535; padding-left: 10px;
}
.navigation .content {
  padding: 0;
  padding-left: 15px;
  display: block;
  position: relative;
  overflow: hidden;
}
.navigation a {
  float: left; 
}
.navigation a {
  text-decoration: none; padding: 14px 20px 12px; color: white;
  font-weight: 500; font-size: 17px;
}
.navigation a:hover {background-color: #282828;}


/*.main {background-color: #eee;}*/
.main .content {background-color: white; padding-bottom: 40px;}

.text-page {padding-top: 40px;}
.text-page h1 {margin-bottom: 20px;}
.text-page h3 {font-size: 22px; font-weight: 900; color: #555;}
.text-page td {padding: 5px 10px;}

/* home page */
.intro {padding-bottom: 20px; padding-top: 20px; margin-bottom: 20px;}
.intro h1 {font-size: 26px; margin-bottom: 20px; line-height: 1.2;}
.intro p {font-size: 21px; line-height: 1.3; margin-bottom: 15px;}
.intro .btn {
  display: block; margin-top: 40px; margin-bottom: 20px; 
  color: white; background-color: #DD8C2C;
  text-align: center; text-decoration: none; padding: 20px 0 18px;
  font-size: 24px; font-weight: 500; letter-spacing: 2px; line-height: 1;
}
.intro .btn:hover {
  background-color: #D58629;
}
.photo-credit {display: block; font-size: 15px; text-align: right; padding-top: 3px;}

.punchin-pandas-link {display: block; border: 2px solid #eee; min-height: 165px; margin-bottom: 25px;}
.punchin-pandas-link .inner-content {margin-left: 190px; padding: 20px;}
.punchin-pandas-link .image {float: left; width: 180px; padding: 20px;}
.punchin-pandas-link h2 {padding-top: 28px; font-size: 48px; color: #444; margin-bottom: 0; line-height: 0.9;}
.punchin-pandas-link h3 {font-size: 26px; color: #DD8C2C;}
a.punchin-pandas-link:hover {text-decoration: none; border-color: #DD8C2C;}
a.punchin-pandas-link:hover h2 {color: black;}

.news-preview {border: 2px solid #eee; min-height: 202px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 25px; clear: left;}
.news-preview h2 {margin-bottom: 3px; font-size: 20px; color: #EB2A3F;}
.news-preview h3 {color: #555; font-weight: 300; margin-bottom: 10px;}
.news-preview p {margin-bottom: 0;}
.news-preview .image {float: left; background-color: #f9f9f9; width: 200px; height: 200px;}
.news-preview .inner-content {margin-left: 220px; padding: 20px 10px;}

.footer {padding-bottom: 40px;}
.footer .content {padding: 40px 40px;}
.footer .copyright {padding-top: 30px; font-size: 16px;}
.footer .ekf {margin: 0 20px;}
.footer .jkawf img {margin: 0 20px; height: 110px;}
.footer .ekf img {height: 109px;}
.footer .facebook img {height: 60px; vertical-align: top; margin-top: 25px;}
.footer a img {-webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.6; transition: all 300ms ease 0ms;}
.footer a:hover img, .footer a:focus img {-webkit-filter: none; filter: none; opacity: 1.0;}

/* classes page */
.classes-intro {margin-bottom: 30px;}
.class-day {margin-bottom: 40px;}
.class-day h2 {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: top left;
  padding-left: 30px;
  margin-bottom: 8px;
}
.class-day h3 {color: #444; font-size: 20px; margin-bottom: 10px; font-weight: normal;}
.class-day .time {display: inline-block; min-width: 170px;}
.class-day p {margin-bottom: 10px;}
.class-day .location {margin-bottom: 20px; margin-left: 30px;}
.cancelled, .cancelled span {
  text-decoration: line-through; color: #bbb;
}
.notice {color: #111; background-color: #f7f273; padding: 15px}

/* events page */
.event {margin-bottom: 30px; padding-bottom: 20px; clear: both; border-bottom: 1px solid #eee;}
.event h2 {margin-bottom: 10px;}
.event h3 {color: #555; font-size: 20px; font-weight: 300; margin-bottom: 10px;}
.event p {color: #757575;}
.event .image {float: left; background-color: #f9f9f9; width: 200px; height: 200px;}
.event .inner-content {margin-left: 87px; padding: 0 10px;}
.event .date {text-align: center; width: 76px; border: 2px solid #ccc; padding: 15px 5px 7px; float: left; margin-right: 20px;  border-radius: 50%;}
.event .day {display: block; font-size: 32px; line-height: 0.9;}
.event .multi-day {display: block; font-size: 18px; line-height: 1.6;}
.event .month {display: block; font-size: 18px; line-height: 1; color: #888;}

.past-event {margin-bottom: 40px;}

.image-grid {list-style: none; margin-top: 20px;}
.image-grid li {float: left; width: 50%; box-sizing: border-box; padding-bottom: 10px;}
.image-grid li:nth-child(odd) {padding-right: 10px;}
.image-grid li:nth-child(even) {padding-left: 10px;}
.past-event {clear: both; padding-top: 20px;}
.past-event .date {color: #555; font-size: 20px; font-weight: 300; margin-bottom: 10px;}
.past-event ul {margin-left: 28px; margin-bottom: 20px;}
.past-event ul.image-grid {margin-left: 0;}

/* syllabus page */
.syllabus-links {list-style: none; margin-left: 0; margin-bottom: 30px;}
.syllabus-links a {display: block; border: 2px solid #ddd; margin-bottom: 10px; color: #555;}
.syllabus-links a:hover {text-decoration: none; color: black; border-color: #bbb;}
.syllabus-links span {display: inline-block; width: 70px; height: 45px; margin-right: 15px; vertical-align: middle;}
.syllabus-links .belt {background-repeat: repeat-x; background-position: top left;}
.syllabus-links .belt.kyu-9th {background-color: #FB7608;}
.syllabus-links .belt.kyu-8th {background-color: #CA1909;}
.syllabus-links .belt.kyu-7th {background-color: #F9E700;}
.syllabus-links .belt.kyu-6th {background-color: #006216;}
.syllabus-links .belt.kyu-5th {background-color: #3F236D;}
.syllabus-links .belt.kyu-4th {background-color: #3F236D; background-image: url(/images/4th_kyu.png);}
.syllabus-links .belt.kyu-3rd {background-color: #6D3824;}
.syllabus-links .belt.kyu-2nd {background-color: #6D3824; background-image: url(/images/2nd_kyu.png);}
.syllabus-links .belt.kyu-1st {background-color: #6D3824; background-image: url(/images/1st_kyu.png);}
.syllabus-links .belt.dan {background-color: black;}

.syllabus table {margin-bottom: 20px; border-collapse: collapse;}
.syllabus td, .syllabus th {text-align: left; padding: 10px; vertical-align: middle; border: 1px solid #444;}
.syllabus th {font-weight: bold; line-height: 1; padding-bottom: 4px; color: #444; background-color: #FFCC98;}
.syllabus p {margin-bottom: 15px;}
.syllabus .count {width: 120px;}
.syllabus .label {display: inline-block; font-weight: bold; min-width: 100px;}

/* tablets portrait */
@media only screen and (max-width: 900px) {
  .navigation {padding-left: 0;}
  .content {padding-left: 20px; padding-right: 20px;}

  .columns .col2-1 {width: 50%; padding-right: 10px;}
  .columns .col2-2 {width: 50%; padding-left: 10px;}

  .columns .col31-1 {padding-right: 10px;}
  .columns .col31-2 {padding-left: 10px;}

  /* home page */
  .intro h1 {font-size: 24px; margin-bottom: 10px;}
  .intro p {font-size: 18px;}
  .intro .btn { margin-top: 20px; font-size: 20px;}

  .news-preview {min-height: 152px;}
  .news-preview .image {width: 150px; height: 150px;}
  .news-preview .inner-content {margin-left: 160px; padding: 15px 5px;}
  .news-preview h2 {font-size: 18px;}
  .news-preview h3 {font-size: 16px;}
  .news-preview p {font-size: 16px; line-height: 1.1;}
  
  .punchin-pandas-link {min-height: 147px;}
  .punchin-pandas-link .image {width: 160px;}
  .punchin-pandas-link .inner-content {margin-left: 160px;}
  .punchin-pandas-link h2 {padding-top: 0; font-size: 36px;}
  .punchin-pandas-link h3 {font-size: 18px;}
}

/* mobiles portrait */
@media only screen and (max-width: 680px) and (orientation : portrait) {
  .menu-enable {display: block;}
  .navigation {display: none;}
  .navigation, .navigation .content {padding-left: 0;}
  .navigation a {float: none; display: block; padding-left: 30px;}
  
  .footer a {display: block; text-align: center;}
  .footer img {margin: 20px 0;}
  .footer a img {-webkit-filter: none; filter: none; opacity: 1.0;}
  
  .content {
    padding: 10px 20px;
  }
  .text-page {padding-top: 20px;}

  .columns {display: block;}
  .columns .column {float: none; width: 100%; padding-left: 0; padding-right: 0;}
  
  .image-grid li {float: none; width: 100%;}
  .image-grid li:nth-child(odd) {padding-right: 0;}
  .image-grid li:nth-child(even) {padding-left: 0;}
  
  /* home page */
  .news-preview .image {float: none; width: 100%; height: auto;}
  .news-preview .inner-content {margin-left: 0;}

  .punchin-pandas-link {text-align: center;}
  .punchin-pandas-link .inner-content {margin-left: 0; padding-top: 10px; padding-bottom: 10px;}
  .punchin-pandas-link .image {float: none; margin: 0 auto;}
  .punchin-pandas-link h2 {padding-top: 0; font-size: 44px;}

  .syllabus td {font-size: 15px;}
  .syllabus td, .syllabus th {padding-right: 10px;}
  .syllabus td:last-child, .syllabus th:last-child {padding-right: 0;}
  .syllabus .count {width: 90px;}
  .syllabus .label {display: block;}
  
  /* classes page */
  .class-day .time {display: block; margin-top: 12px;}
  .class-day .location {margin-left: 0;}

  .syllabus-links a {font-size: 15px;}
}

@media print {
  .navigation {display: none;}
}