/*index.html, instructors.html, step.html don't use php so make individual changes to these pages*/

/*WEBSITE COLORS
DARK RED #B33838, rgb(179, 56, 56)
LIGHT RED rgba(255,0,0,.7)
BLUE #2386be  rgb(36,119,168)
LIGHT BLUE rgba(36,119,168,.9)
BLUE HOVER #09c
GOLD #dbaf0a
DARK GOLD rgb(187,167,51)
GOLD rgb(219,175,10)
LIGHT FLESH #f2ddc8
FLESH #cfbaad
TRANSLUCENT WHITE BKGRD rgba(255,255,255,.5)
GRAY #c9c9c9
*/

* {     /*put below style in per W3schools*/
          box-sizing: border-box;
      }

/*Centers page otherwise messed up upon loading*/
      #page_wrapper{
          max-width: 1200px !important; /*must be max-width & not width otherwise mobile will be centered and not hug left side*/
          margin: auto !important;
      }

      body{
          padding: 0;
          margin: 0; /*code below from internet css-tricks.com lcs*/
          background: url("images/curve.jpg") no-repeat center center;
          background-size: cover;
      }

      .container{
     /* float:left;LCS Check if I need this*/
          width: 100%;
          margin: 0px auto;
      }

/*HOME PAGE*/
      #preloadScreen {
          width: 100%;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: white;
          position: absolute;
          z-index: 999;
          opacity: 1;
          transition: all .5s;
      }

      .thumbnails{
          border: 2px solid #dbaf0a;
          border-radius: 10px;
          padding-bottom: 20px;
      }

      .group{
          float:left;
      }

      .patch{
          width: 20%;
      }

      /*to clear sticky navbar*/
      .margin_left{
          margin-left: 7%;
      }

      .copyright{
          font-size: .8em;
          color: #2386be;
    			padding-top: 30px;
      }

      .copy_container{
          outline: 1px solid #B33838;
          margin-top: 30px;
          padding-bottom: 50px;
      }

      .copy{
          float: left;
          font-family: 18px "Raleway", sans-serif;
          padding: 20px;
          background-color: rgba(255,255,255,.5);
          margin-left: 30px;
          text-align: justify; /*justifies type*/
          text-justify: inter-word;
      }

    	.modal_type{
           font-size: 1.2rem;
           font-family: "Gill Sans", sans-serif;
           width: 80%; /*width of line in enlarged photo*/
           text-align: justify; /*justifies type*/
           text-justify: inter-word;
      }

      .register{
        color: #fff;
        padding: 10px;
        text-align: center;
      }

      .seminar{
        font-weight:600;
        font-family: 2.2rem "Raleway", sans-serif;
        weight: 400px;
        text-align: center;
        margin: 0px auto;
        padding-bottom: 10px;
      }

/*Button on Home Page*/
      .button a {
        color: rgba(255,255,255,.8);
      }

      .button {
        display: inline-block;
        border-radius: 4px;
        background-color: rgba(255,0,0,.8);
        border: 2px #fff solid;
        color: #FFFFFF;
        text-align: center;
        font-size: 22px;
        padding: 8px;
        width: 50%;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }

      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }

      .button span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }

      .button:hover span {
        padding-right: 25px;
      }

      .button:hover span:after {
        opacity: 1;
        right: 0;
      }

/*  SLIDE SHOW*/
      .mySlides {display: none;}
          img {vertical-align: middle;}

          /* Slideshow container */
          .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: 10px 0px;
          }

          /* The dots/bullets/indicators */
          .dot {
            height: 10px;
            width: 10px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 20%;
            display: inline-block;
            transition: background-color 0.6s ease;
          }

          /* Fading animation */
          .fade {
            animation-name: fade;
            animation-duration: .75s;
          }

          @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
          }

          /* On smaller screens, decrease text size */
          @media only screen and (max-width: 300px) {
            .text {font-size: 11px}
          }
/*END OF Slide Show*/

/*PATTERNS PAGE*/
      		.box_100{
      			width: 100%;
      			float: left;
      		}

      		.box_70{
      			width:70%;
      		/*	float: left;*/
      			margin-left: 20px;
      			margin-bottom: 20px;
      		}

      		.box_30 {
      			width: 30%;
      			float: left;
      		}

          .name {
            font-size: 22px;
            font-weight: bolder;
          }

      		.belt{
      			font: 22px "Amaranth", sans-serif;
      			color: rgb(219,175,10);
      			text-align: left;
      		}

          /*Button on Patterns Page*/
            .button_p a {
              color: #cc0000;
            }

            .button_p {
              display: inline-block;
              border-radius: 4px;
              background-color: #cc0000;
              color: #FFFFFF;
              text-align: center;
              font-size: 16px;
              padding: 4px 4px 4px 10px;
              width: 100%;
              transition: all 0.5s;
              cursor: pointer;
              margin: 5px;
            }

            .button_p span {
              cursor: pointer;
              display: inline-block;
              position: relative;
              transition: 0.5s;
            }

            .button_p span:after {
              content: '\00bb';
              position: absolute;
              opacity: 0;
              top: 0;
              right: -20px;
              transition: 0.5s;
            }

            .button_p:hover span {
              padding-right: 25px;
            }

            .button_p:hover span:after {
              opacity: 1;
              right: 0;
            }

      		/*LOCATIONS PAGE*/
      		.left{
      			float: left;
      			padding: 20px 20px 0px 20px;
      		}

      		.thirty{
      			margin: 30px 20px;
      		}

      		.mapouter{
      			position:relative;
      			text-align:left;
      			height:288px;
      			width:288px;
      		}

      		.gmap_canvas {
      			overflow:hidden;
      			background:none!important;
      			height:288px;
      			width:288px;
      		}

          .tri_panel{
              float: right;
          }

      		.margin_left_medium{
      			margin-left: 25%;
      		}

      		.paragraph{
      			padding: 15px;
      			background-color:rgba(255,255,255,.3);
      			margin: 0 auto;
      			float:inherit;
      			}

      		div.swirl {
      			position: relative;
      			background: (0,0,0,.2%);
      			margin-top: 30px;
      			text-align: center;
      		}

/*INSTRUCTORS PAGE*/
          .black_belts{
              float: left;
              margin: 0px auto;
              padding: 10px 10px 10px 30px;
              line-height: 2.0em;
              background-color: rgba(255,255,255,.5);
              font-size: 1.2rem;
              width: 100%;
              height: 700px;
          }

          .modal_container p{
              padding: 40px;
          }

          .modal_container{
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding-top: 50px;
              padding-bottom: 50px;
          }

/*PHOTOS PAGE & INSTRUCTORS*/
            .picture {
                max-width:288px; /*max so no overlap when responsive resizing*/
                height:288px;
                margin: 10px auto;
                outline: 1px solid #B33838;
                padding: 5px;
            }

/*EVENTS PAGE & LANDING*/
        		#download{
              display: inline-block; /*centers it in rt. side of column*/
        			font: 18px "Roboto Condensed", sans-serif;
              background-color: #cfbaad;
              color: #9494b8;
              border: 2px solid #dbae0a;
              border-radius: 8px;
              width: 50%;
              margin:10px auto 5px auto;
              padding: 5px;
              /*text-align: center;*/
              text-decoration:none;
        		}
          			/*	div {
          		  background-color: yellow;
          		  padding: 20px;
          		  display: none;
          		}

          		span:hover + div {
          		  display: block;
          		}*/

        		.center{
        			text-align: center;
        		}

        		.red_box{
        			width: 100%;
        			padding: 10px;
        			background-color: #B33838;
        			margin-bottom: 10px;
        			color: #fff;
        		}

        		.gray_box{
        			width: 100%;
        			padding: 10px;
        			background-color: #a9a9a9;
        			margin: 10px 0px;
        			text-align: center;
        			color: #fff;
        		}

        		.blue_box{
        			width: 100%;
        			padding: 10px;
        			background-color: rgba(36,119,168,.9);
        			margin: 10px 0px;
        		/*	text-align: center;*/
        			color: #fff;
        		}

        		.box_type{
        			font-size: 1.0rem;
        			padding-top: 10px;
              text-align: center;
              font-weight: 500;
        		}

        		.type{
        			font-size: 1.3rem;
              text-align: center;
              padding: 10px 0px 10px 0px;
        		}

            h1{
              font: 28px "Amaranth", sans-serif;
              padding-top: 20px;
              color: rgb(219,175,10);
        			text-align: left;
            }

         		h2{
              font-size: 1.2rem;
        			font-family: 'Gill Sans Regular', sans-serif;
        			font-weight: 600;
            }

            h3{
              font-family: "Amaranth", sans-serif;
              font-size: 3.5em;
              font-weight: 700;
        			letter-spacing: -1px;
              color: #2386be;
              position: relative;
              top: 50px;
              left: 20px;
              margin-bottom: 100px;
            }

            h4 {
              font-size: 1.7rem;
        			color:#2386be;
        			font-weight: 700;
            }

        		h5{ /* was text-align only*/
        			color:rgb(219,175,10);
        			font-weight: 700;
        			font-size: 1.2rem;
        		}

        		h6{
        			font-size: 1.2rem;
        			font-family: 'Gill Sans Regular', sans-serif;
        		}

        		center {
              text-align: center;
            }

            p{
              text-align: justify; /*justifies type*/
              text-justify: inter-word;
              line-height: 1.5;
              background-color: rgba(255,255,255,.5);
              font-size: .5rem;
            }

            .right{
              float:right;
            }

            .right_border{
              float:right;
              border: 2px solid rgba(36,119,168,.9);
              margin: 7px;
            }

/* ADVANCEMENT PAGE */
            .container_address {
              display: flex;
              margin: 40px;
            }

            .address {
              width:50%;
            }

           .address_item {
              width: 400px;
            }

/* Youstra PAGE */
            .marg{
                margin-left: 1.2rem;
            }

/* LINKS ON PAGES */
            a{
                text-decoration: none;
                color: #cc0000;
            }

            /* mouse over link */
                a:hover {
                /*a.nav:hover*/
                color: rgb(219,175,10);
            }

            /* selected link */
                .nav li:active a {
                color:rgb(187,167,51);
            }


/*GO DADDY CONTACT FORM from Knuckles*/
            p {
              font-size: 1.3em;
              margin-bottom: 15px;
            }

            /*I added for orange bkgrd*/
            #background_box{
              background-image: url("images/graph_home.jpg");
              background-repeat: no-repeat;
              width: 100%;
              padding-top: 20px;
            }

            #page-wrap {
                width: 660px;
                min-height: 1000px;
                height: auto !important;
                margin: 0px auto;
            }

            /*Height of white box*/
            #contact-area {
                background: white;
                width: 600px;
                margin-top: 120px;
                border: 3px solid #dbaf0a;
                border-radius: 20px;
                padding:20px;
                background-color:rgba(35,134,190);
            }

            #contact-area input, #contact-area textarea {
                padding: 5px;
                width: 471px;
                font-family: Helvetica, sans-serif;
                font-size: 1.0em;
                margin: 0px 0px 10px 0px;
                border: 2px solid #cfbaad;
            }

            /*Height of Message area*/
            #contact-area textarea {
                height: 60px;
            }

            #contact-area textarea:focus, #contact-area input:focus {
                border: 2px solid #7ea4ce;
            }

            /*Contact Me box*/
            #contact-area input.submit-button {
                width: 190px; /*made wider than Knuckles cuz words went outside of Contact Me box*/
                float: right;
                background-color: #fff;
            }

            /*Label Names*/
            label {
                float: left;
                text-align: right;
                margin-right: 15px;
                width: 100px;
                padding-top: 5px;
                font-family: 'Roboto Condensed', sans-serif;
                font-size: 1.0em;
                background-color: rgb(35,134,190);
        				color: #fff;
            }

            small{
                font-size: 6pt;
            }

/*NAV BAR STICKY FLYOUT NAV*/
        /*to make it vertical & sticky*/
        #menu{
            height: 100%;
            width: 12%;
            position: fixed;
            top: 0;
            left: 0;
            /*overflow-x: hidden;flyouts dont' work*/
            }

		/*menu-button showed up in Inspector & added "menu" to top for no reason*/
    		#menu-button{
    			display:none;
    		}

        #menu ul {
            margin: 0;
            padding: 0;
        }

        #menu .main-menu {
            display: none;
        }

        #tm:checked + .main-menu {
            display: block;
        }

        #menu input[type="checkbox"],
        #menu ul span.drop-icon {
            display: none;
        }

        #menu li,
        #toggle-menu,
        #menu .sub-menu {
            border-style: solid;
            border-color: rgba(0, 0, 0, .05);
        }

        #menu li,
        #toggle-menu {
            border-width: 0 0 1px;
        }

        #menu .sub-menu {
            background-color: #09c;
            border-width: 1px 1px 0;
            margin: 0 1em;
        }

        #menu .sub-menu li:last-child {
            border-width: 0;
        }

        #menu li,
        #toggle-menu,
        #menu a {
            position: relative;
            display: block;
            color: #cfbaad;
            font-family: 'Amaranth', sans-serif;
            font-size: 1.2rem;
            line-height: 1.3rem;
      			width: 100%; /*so bar behind Navigation goes full width*/
        }

        #menu,
        #toggle-menu {
            background-color: #2386be;
        }

        #toggle-menu,
        #menu a {
            padding: 1em 1.5em;
        }

        #menu a {
            transition: all .125s ease-in-out;
            -webkit-transition: all .125s ease-in-out;
        }

        #menu a:hover {
          background-color: #cfbaad;
          color: #09c;
        }

        #menu .sub-menu {
          display: none;
        }

        #menu input[type="checkbox"]:checked + .sub-menu {
            display: block;
        }

        #menu .sub-menu a:hover {
          color: #444;
        }

        #toggle-menu .drop-icon,
        #menu li label.drop-icon {
          position: absolute;
          right: 1.5em;
          top: 1.25em;
        }

        #menu label.drop-icon, #toggle-menu span.drop-icon {
          width: 1em;
          height: 1em;
          text-align: center;
          color: rgba(255, 255, 255, .75);
        }

        #menu .drop-icon {
          line-height: 2;/*positions arrow*/
        }

        /*all pages except Home Page*/
        .main-menu > :nth-child(2) {
            background: rgb(219,175,10);

        }

        /*all pages except home "Sign..."*/
        #menu a:hover :first-child {
            background-color: rgba(255,0,0,.7);
            border: 3px solid #f2ddc8;
            padding: 4px;
            border-radius: 10px;
            color: #2386be;
        }

 /* NAV BAR STICKY NAV Flyouts Right*/
        /* to make it verical & sticky */
        #cssmenu {
            height: 100%;
            width: 12%;
            position: fixed;
         /*  z-index: 1;*/
            top: 0;
            left: 0;
            background-color: rgb(35,134,190);
            /*overflow-x: hidden;flyouts dont' work*/
        }

        /* Hide link open/close nav_page on mobile */
        #cssmenu .icon {
            display: none;
        }

       .clear_float{
            clear:both;
        }

         .nav > :first-child {
                background: rgb(219,175,10);
        }

/*FLY OUT MENU http://cssmenumaker.com/blog/css-flyout-menu-starter-kit/ and toggle menu for faint border*/
        #cssmenu,
        #cssmenu ul,
        #cssmenu ul li,
        #cssmenu ul ul {
              list-style: none;
              margin: 0;
              padding: 0;
              border: 0;
        }

        #cssmenu
        #cssmenu ul {
              position: relative;
              z-index: 397;
        }

        #cssmenu ul li {
            min-height: 1px;
            line-height: 2.0rem;
            vertical-align: middle;
            font-family: 'Gill Sans', sans-serif;
            text-decoration:none;
            font-size: 1.1rem;
            text-align: center;
            padding: 7px 10px;
            color: #fff;
        }

        #cssmenu ul li:hover {
            position: relative;
            z-index: 399;
            cursor: default;
        }

        #cssmenu ul ul {
            visibility: hidden;
            /* hide sub menus by default */
            position: absolute;
            z-index: 398;
            top: 0px;
            left: 99%;
            width: 200px;
            background: rgba(179, 56, 56,.9);
        }

        #cssmenu ul ul ul {
            top: 0px;
            left: 99%;
        }

        #cssmenu ul li:hover > ul {
            visibility: visible;
            /* show sub menu */
        }

        #cssmenu ul li.hover,
        #cssmenu ul li:hover {
            background: #fff;
        }

        #cssmenu ul a:link,
        #cssmenu ul a:visited {
            color: #cfbaad;
            text-decoration: none;
        }

        #cssmenu ul a:hover {
            color: #000;
        }

        #cssmenu ul a:active {
            color: rgb(219,175,10);
        }

        /*faint border around each nav block*/
        #cssmenu ul li,
        #toggle-menu,
        #menu .sub-menu {
            border-style: solid;
            border-color: rgba(0, 0, 0, .06);
            border-width: 0 0 1px;
        }

 /*iPAD*/
        @media screen and (min-width: 769px) and (max-width: 1399px){

        /*to clear sticky navbar*/
        .margin_left{
            margin-left: 14%;
       }

        .box_60{
      			width:90%;
      		/*	float: left;*/
      			margin-left: 20px;
      			margin-bottom: 20px;
    		}

        .box_30{
            width: 40%;
        }
    }

/* MOBILE*/
        @media screen and (max-width: 768px){
        /*expands-full width, relative-unstickies it*/

         .flyout_nav{
                display:none;
            }

        .copy{
            margin: 0px auto;
            }

         #menu{
            height: 100%;
            width: 100%;
            position: relative;
            top: 0;
            left: 0;
            background-color: rgb(35,134,190);
            /*overflow-x: hidden;flyouts don't work*/
            }

        .margin_left{
            margin-left: 0px;
            }

        .tri_panel{
            text-align: center;
            }

        .copy{
            margin: 0px;
            }

        h3{
            top:0px;
            left: 0px;
            text-align: center;
            }

  			.paragraph{
  				float: none;
      			}

        .w3-third img{margin-bottom: -6px; opacity: 0.8; cursor: pointer}
        .w3-third img:hover{opacity: 1}

        /*for mobile nav*/
        .main-menu > :first-child {
            background: rgb(219,175,10);
            color: #fff;
          }

        /*for mobile nav*/
       .main-menu > :nth-child(2) {
            background: #2386be;
          }

        }

/* DESKTOP*/
        @media screen and (min-width: 1020px){
        /*displays all line items*/

            .dropdown_nav{
                display: none;
            }

            #menu .main-menu {
              display: contents;
            }

            /*hides toggle arrow next to navigation*/
           #menu #toggle-menu > :first-child {
               display: none;
            }

            /*hides navigation line*/
           #menu > :first-child {
               display: none;
            }

            .img {
                height: 100px;
                width:100px;
                opacity: 20%;
            }

     }