@charset "UTF-8";
/* CSS Document */

/* -----------------------------------
Site:  aikidosouthflorida.com     
CSS author: Alex Duarte
Created: 10/10/11
Updated: Date here
----------------------------------- */

/* -----------------------------------
Site Colors:

background-color: #6a2225;
dark brown: #583b1c
Font color: #604027
----------------------------------- */

body {
   margin: 0;
   padding: 0;
}

* {
   box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5 {
   font-family: 'Raleway', sans-serif;
   font-weight: 700;
}

h1 {
   font-size: 200%;
   font-weight: bold;
   text-align: center;
   color: #6a2225;
}

h2 {
   font-size: 180%;
   font-weight: bold;
   color: #6a2225;
   text-align: center;
}

h3 {
   font-size: 160%;
   font-weight: bold;
   color: #6a2225;
}

h4 {
   font-size: 140%;
   text-align: center;
}

h5 {
   font-size: 120%;
}

p,
ul {
   line-height: 1.5em;
}

table td {
   padding: 5px;
}

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* -----------------------------------
	Calendar Styles
----------------------------------- */

#cal_conntainer {
   margin-top: 10px;
   margin-left: 10px;
   width: 503px;
   height: 500px;
}

/* -----------------------------------
	Photo Gallery Page
----------------------------------- */
.gallery {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #6a2225;
   list-style-type: square;
   padding: 0;
   font-weight: bold;
   font-size: 14px;
}

.gallery li {
   margin-left: 20px;
   padding: 0.5em;
}

.gallery a {
   text-decoration: none;
}

.gallery a:link {
   color: #6a2225;
}

.gallery a:visited {
   color: #999999;
}

.gallery a:hover {
   color: #d8a74a;
}

/* -----------------------------------
Contact Us Form Styles
----------------------------------- */

.inputWrapper {
   margin: 0 0 4px;
   padding: 4px 0;
}

.inputWrapper:hover {
   background: #d5ccb5;
}

.input-wide {
   width: 250px;
   height: 24px;
   margin: 0;
   padding: 3px 3px 3px 3px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   border: 1px solid #b4b4b4;
}

.input-textarea {
   height: 150px;
}

label {
   float: left;
   width: 120px;
   margin: 0 15px 0 0;
   padding: 5px 0 0;
   text-align: right;
}

legend span {
   display: block;
   width: 120px;
   padding: 15px 0 10px 15px;
   font-size: 125%;
   font-weight: bold;
}

.captchaWrapper {
   padding-left: 140px;
}

.submit_btn {
   margin-left: 140px;
}

/* -----------------------------------
Links Page
----------------------------------- */
.alt0 {
   background-color: #fcf1d1;
}
.alt1 {
   background-color: #e6e0cc;
}
.alt2 {
   background-color: #c8bfa3;
}
.alt5 {
   background-color: #6a2225;
   color: #fff;
}

/* -----------------------------------
 Navigation General Styles
----------------------------------- */

:root {
   --clr-light: rgb(145, 143, 143);
   --clr-dark: #303030;
   --clr-accent: #6a2225;

   --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25), 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.15);
}

/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
   display: block;
   text-decoration: none;
   padding: 10px;
   color: #fff;
}

/* add hover behaviour */
.mainmenu a:hover {
   background-color: #333;
}

/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
   display: block;
   max-height: 360px;
}

/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu li {
   background-color: #3b3b3b;
   border-bottom: 1px solid #999999;
}

.submenu a,
.submenu__submenu {
   margin-left: 10px;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
   background-color: #666;
}

/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
   overflow: hidden;
   max-height: 0;
   transition: all 0.5s ease-out;
}

.nav-toggle {
   padding: 0.5em;
   background: transparent;
   border: 0;
   cursor: pointer;
   position: absolute;
   left: 1em;
   top: 1em;
   z-index: 1000;
}

.nav-open .navigation {
   transform: translateX(0);
}

.nav-open .nav-toggle {
   position: fixed;
}

.nav-open .hamburger {
   transform: rotate(0.625turn);
}

.nav-open .hamburger::before {
   transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
   opacity: 0;
}

.hamburger {
   display: block;
   position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
   background: var(--clr-light);
   width: 2em;
   height: 3px;
   border-radius: 1em;
   transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
}

.hamburger::before {
   top: 6px;
}
.hamburger::after {
   bottom: 6px;
}

/* -----------------------------------
WEEKLY SCHEDULE TABLE - CALENDAR
----------------------------------- */
.cal-wrapper {
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.cal-day {
   text-align: center;
   border: 1px solid #604027;
   border-radius: 1px;
}

.cal-day + .cal-day {
   margin-left: 5px;
}

.cal-day__day--day-of-week {
   font-weight: 700;
   text-transform: uppercase;
   background-color: #604027;
   color: #fff;
   margin: 0 0 5px 0;
}

.cal-day__class + .cal-day__class {
   margin-top: 10px;
   border-top: 1px solid #604027;
}
.cal-day__class {
   padding: 5px;
   font-size: 0.75rem;
}

.cal-day__class p {
   margin: 0;
}

.cal-day__class--class-name {
   font-weight: 700;
}



/* -----------------------------------
MEDIA QUERIES
----------------------------------- */

/* Smartphones (portrait and landscape) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
   /* -----------------------------------
 Layout
----------------------------------- */

   body {
      color: #604027;
      font: 1em 'Raleway', sans-serif;
      background: #000;
   }
   /* give all images a max width*/
   img {
      max-width: 100%;
      height: auto;
   }

   #outerWrapper {
      margin: 0;
      padding: 0;
   }

   #mainNavContainer {
      text-align: left;
      margin: 0;
      padding: 0;
      background-color: #fff;
   }

   #bodyContainer {
      background: url(images/center.gif) 0 0 repeat-y;
      background-size: 100%;
      width: 100%;
      min-height: 1200px;
      padding: 10px;
   }

   #headerWrapper {
      width: 100%;
      height: auto;
      margin: 0;
      text-align: center;
   }

   #headerWrapper2 {
      width: 100%;
      height: auto;
      margin: 0;
   }

   #headerWrapper3 {
      width: 100%;
      height: 100px;
      margin: 0;
   }

   #headerWrapper img,
   #headerWrapper2 img,
   #headerWrapper3 img {
      max-width: 100%;
      height: auto;
   }

   #rightLogoWrapper {
      display: none;
   }

   #bonsai {
      width: 100%;
      height: auto;
      margin: 20px auto;
   }

   #bonsai img {
      max-width: 100%;
      height: auto;
   }

   #footer {
      background-color: #000;
      color: #fff;
      text-align: center;
      height: auto;
      padding-top: 5px;
      clear: both;
   }

   .clearFloat {
      clear: both;
   }

   /* -----------------------------------
 Navigation
----------------------------------- */
   .nav-logo {
      display: none;
   }

   .navigation {
      position: absolute;
      background: var(--clr-dark);
      color: var(--clr-light);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;

      transform: translatex(100%);
      transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
      height: 1500px;
   }

   .mainmenu {
      list-style: none;
      display: flex;
      height: 100%;
      flex-direction: column;
      margin: 30px;
      padding: 0;
   }

   .submenu {
      display: block;
      max-height: 360px;
   }

   /* ----------------------------
Header Images Styles 
-------------------------------*/

   #mainPic {
      display: none;
      /*max-width: 100%;
	height: auto;
	-webkit-box-shadow:2px 2px 7px #333333;
	-moz-box-shadow:2px 2px 7px #333333;
	box-shadow:2px 2px 7px #333333;*/
   }

   .subPic {
      display: none;
   }

   /* -----------------------------------
 Classes
----------------------------------- */
   .brush-stroke {
      max-width: 95%;
      height: auto;
   }

   #slides {
      display: none;
   }

   .container {
      margin: 0;
      width: 100%;
   }

   .deshiStay {
      display: none;
   }

   .storyWrapper {
      width: 530px;
      margin: 20px 0px 10px 0px;
      padding: 5px;
      clear: both;
   }

   .videoRotation {
      margin: 15px 0px 15px 0px;
      padding: 1px;
      text-align: center;
   }

   .footer-type {
      color: #ffffff;
      font-size: 0.7em;
   }

   .textCenter {
      text-align: center;
   }

   .textRight {
      text-align: right;
   }

   .sidbarItem {
      width: 190px;
      height: auto;
      margin-top: 15px;
      color: #fff;
      font-size: 90%;
      text-align: center;
      font-family: 'Kaushan Script', cursive;
      font-size: 1.5em;
   }

   .sidbarItem a:link {
      text-decoration: none;
      color: #fff;
   }

   .sidbarItem a:visited {
      color: #999999;
   }

   .sidbarItem a:hover {
      color: #d8a74a;
   }

   /*TESTIMONIAL*/
   .sig {
      font-weight: bold;
      font-style: italic;
   }

   .photoA {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoB {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoInset {
      float: right;
      margin: 10px;
   }

   .list {
      margin-left: 5px;
   }

   .list li {
      list-style: disc;
      margin: 0px 0px 10px 10px;
   }

   ol li {
      margin-bottom: 10px;
   }

   .footnote {
      font-size: 80%;
   }

   .campBannerContainer {
      text-align: center;
      margin: 0;
      width: 100%;
   }

   .imgFloatRight {
      float: right;
      margin: 5px;
   }

   .imgFloatLeft {
      float: left;
      margin: 5px;
   }

   .imgFloatRight img,
   .imgFloatLeft img {
      border: 1px solid #000;
   }

   .campDates {
      font-family: 'Peralta', cursive;
      color: #0071bb;
   }

   .fb-like-box {
      background-color: #fff;
   }

   /* -----------------------------------
WEEKLY SCHEDULE TABLE - CALENDAR
----------------------------------- */
   .cal-wrapper {
      flex-direction: column;
   }

   .cal-day + .cal-day {
      margin-left: 0px;
      margin-top: 5px;
   }

   .cal-day__class {
      font-size: 1rem;
   }
}

/* Regular Tablets from 480 to 800px including Galaxy tablets - 768px is only good for iPad */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
   /* -----------------------------------
 Layout
----------------------------------- */

   body {
      color: #604027;
      font: 0.85em 'Raleway', sans-serif;
      background: #000 url(images/patternBG.png);
   }
   /* give all images a max width*/
   img {
      max-width: 100%;
      height: auto;
   }

   #outerWrapper {
      margin: 0;
      padding: 0;
   }

   #mainNavContainer {
      text-align: left;
      margin: 0 auto;
      padding: 0;
      width: 100%;
   }

   #mainBodyContainer {
      width: 650px;
      position: relative;
      background: url(images/mainContainer_bg.png) 0 0 repeat-y;
      margin: 0 auto;
   }

   #bodyContainer {
      background: url(images/center.gif) 0 0 repeat-y;
      width: 550px;
      min-height: 1200px;
      margin-left: 50px;
      padding: 10px;
      float: left;
   }

   #headerWrapper {
      width: 100%;
      height: auto;
      margin: 0;
   }

   #headerWrapper2 {
      width: 100%;
      height: auto;
      margin: 0;
   }

   #headerWrapper3 {
      width: 100%;
      height: 100px;
      margin: 0;
   }

   #headerWrapper img,
   #headerWrapper2 img,
   #headerWrapper3 img {
      max-width: 100%;
      height: auto;
   }

   #rightLogoWrapper {
      display: none;
   }

   #bonsai {
      width: 100%;
      height: auto;
      margin: 20px auto;
   }

   #bonsai img {
      max-width: 100%;
      height: auto;
   }

   #footer {
      background-color: #000;
      color: #fff;
      text-align: center;
      height: auto;
      padding-top: 5px;
      clear: both;
   }

   .clearFloat {
      clear: both;
   }

   /* -----------------------------------
 Navigation
----------------------------------- */
   .nav-logo {
      display: none;
   }

   .navigation {
      position: fixed;
      background: var(--clr-dark);
      color: var(--clr-light);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;

      transform: translatex(100%);
      transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
   }

   .mainmenu {
      list-style: none;
      display: flex;
      height: 100%;
      flex-direction: column;
      margin: 30px;
      padding: 0;
   }

   /* ----------------------------
Header Images Styles 
-------------------------------*/

   #mainPic {
      display: none;
      /*max-width: 100%;
	height: auto;
	-webkit-box-shadow:2px 2px 7px #333333;
	-moz-box-shadow:2px 2px 7px #333333;
	box-shadow:2px 2px 7px #333333;*/
   }

   .subPic {
      display: none;
   }

   /* -----------------------------------
 Classes
----------------------------------- */
   .brush-stroke {
      max-width: 95%;
      height: auto;
   }

   #slides {
      display: none;
   }

   .container {
      margin: 0;
      width: 100%;
   }

   .deshiStay {
      display: none;
   }

   .storyWrapper {
      width: 530px;
      margin: 20px 0px 10px 0px;
      padding: 5px;
      clear: both;
   }

   .videoRotation {
      margin: 15px 0px 15px 0px;
      padding: 1px;
      text-align: center;
   }

   .footer-type {
      color: #ffffff;
      font-size: 0.7em;
   }

   .textCenter {
      text-align: center;
   }

   .textRight {
      text-align: right;
   }

   .sidbarItem {
      width: 190px;
      height: auto;
      margin-top: 15px;
      color: #fff;
      font-size: 90%;
      text-align: center;
      font-family: 'Kaushan Script', cursive;
      font-size: 1.5em;
   }

   .sidbarItem a:link {
      text-decoration: none;
      color: #fff;
   }

   .sidbarItem a:visited {
      color: #999999;
   }

   .sidbarItem a:hover {
      color: #d8a74a;
   }

   /*TESTIMONIAL*/
   .sig {
      font-weight: bold;
      font-style: italic;
   }

   .photoA {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoB {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoInset {
      float: right;
      margin: 10px;
   }

   .list {
      margin-left: 5px;
   }

   .list li {
      list-style: disc;
      margin: 0px 0px 10px 10px;
   }

   ol li {
      margin-bottom: 10px;
   }

   .footnote {
      font-size: 80%;
   }

   .campBannerContainer {
      text-align: center;
      margin: 0;
      width: 100%;
   }

   .imgFloatRight {
      float: right;
      margin: 5px;
   }

   .imgFloatLeft {
      float: left;
      margin: 5px;
   }

   .imgFloatRight img,
   .imgFloatLeft img {
      border: 1px solid #000;
   }

   .campDates {
      font-family: 'Peralta', cursive;
      color: #0071bb;
   }

   .fb-like-box {
      background-color: #fff;
   }
}

/* Desktops and Laptops */
@media only screen and (min-width: 1024px) {
   /* -----------------------------------
 Layout
----------------------------------- */

   body {
      color: #604027;
      font: 1em 'Raleway', sans-serif;
      background: #000 url(images/patternBG.png);
   }

   #outerWrapper {
      width: 1050px;
      margin: 0 auto;
      padding: 0;
   }

   #mainNavContainer {
      width: 190px;
      min-height: 600px;
      text-align: left;
      float: left;
   }

   #mainBodyContainer {
      width: 650px;
      float: left;
      position: relative;
      background: url(images/mainContainer_bg.png) 0 0 repeat-y;
   }

   #bodyContainer {
      background: url(images/center.gif) 0 0 repeat-y;
      width: 550px;
      min-height: 1200px;
      margin-left: 50px;
      padding: 10px;
      float: left;
   }

   #headerWrapper {
      width: 540px;
      height: 315px;
      margin: 0px auto;
   }

   #headerWrapper2 {
      width: 540px;
      height: 360px;
      margin: 0px auto;
   }

   #headerWrapper3 {
      width: 540px;
      height: 250px;
      margin: 0px auto;
   }

   #rightLogoWrapper {
      width: 190px;
      height: 670px;
      float: left;
   }

   #bonsai {
      width: 420px;
      height: 248px;
      margin: 20px auto;
   }

   #footer {
      background-color: #000;
      color: #fff;
      text-align: center;
      height: 100px;
      padding-top: 5px;
      clear: both;
      -webkit-box-shadow: 2px 2px 7px #333333;
      -moz-box-shadow: 2px 2px 7px #333333;
      box-shadow: 2px 2px 7px #333333;
   }

   .clearFloat {
      clear: both;
   }

   /* -----------------------------------
 Navigation
----------------------------------- */

   .nav-logo {
      margin-top: 50px;
   }
   .nav-toggle {
      display: none;
   }

   /* define a fixed width for the entire menu */
   .navigation {
      width: 100%;
      /* background-color: var(--dark-blue); */
      border-radius: 0.2rem;
      margin-top: 2em;
      padding-left: 10px;
   }

   /* ----------------------------
Header Images Styles 
-------------------------------*/

   #mainPic {
      width: 503px;
      height: 137px;
      margin-left: 13px;
      -webkit-box-shadow: 2px 2px 7px #333333;
      -moz-box-shadow: 2px 2px 7px #333333;
      box-shadow: 2px 2px 7px #333333;
   }

   .subPic {
      width: 104px;
      height: 104px;
      display: block;
      float: left;
      margin: 20px 14px;
      -webkit-box-shadow: 2px 2px 7px #333333;
      -moz-box-shadow: 2px 2px 7px #333333;
      box-shadow: 2px 2px 7px #333333;
   }

   /* -----------------------------------
 Classes
----------------------------------- */

   .deshiStay {
      font-size: 13px;
      padding: 5px;
      color: #fff;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;
   }

   .deshiStay li {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      line-height: 2em;
   }

   .deshiHeader {
      font-size: 130%;
      font-weight: bold;
      color: #fc0;
   }

   .storyWrapper {
      width: 530px;
      margin: 20px 0px 10px 0px;
      padding: 5px;
      clear: both;
   }

   .videoRotation {
      margin: 15px 0px 15px 0px;
      padding: 1px;
      text-align: center;
   }

   .footer-type {
      color: #ffffff;
      font-size: 0.7em;
   }

   .textCenter {
      text-align: center;
   }

   .textRight {
      text-align: right;
   }

   .sidbarItem {
      width: 190px;
      height: auto;
      margin-top: 15px;
      color: #fff;
      font-size: 90%;
      text-align: center;
      font-family: 'Kaushan Script', cursive;
      font-size: 1.5em;
   }

   .sidbarItem a:link {
      text-decoration: none;
      color: #fff;
   }

   .sidbarItem a:visited {
      color: #999999;
   }

   .sidbarItem a:hover {
      color: #d8a74a;
   }

   /*TESTIMONIAL*/
   .sig {
      font-weight: bold;
      font-style: italic;
   }

   .photoA {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoB {
      width: 500px;
      margin: 0px auto;
      text-align: center;
   }

   .photoInset {
      float: right;
      margin: 10px;
   }

   .list {
      margin-left: 5px;
   }

   .list li {
      list-style: disc;
      margin: 0px 0px 10px 10px;
   }

   ol li {
      margin-bottom: 10px;
   }

   .footnote {
      font-size: 80%;
   }

   .campBannerContainer {
      text-align: center;
      margin: 0;
      width: 100%;
   }

   .imgFloatRight {
      float: right;
      margin: 5px;
   }

   .imgFloatLeft {
      float: left;
      margin: 5px;
   }

   .imgFloatRight img,
   .imgFloatLeft img {
      border: 1px solid #000;
   }

   .campDates {
      font-family: 'Peralta', cursive;
      color: #0071bb;
   }

   .fb-like-box {
      background-color: #fff;
   }
}