/* to include all padding & borders within width measurements*/
* {
    box-sizing: border-box;
}

html   {
    background-color: dimgray;
    height: 100%;
    margin: 0;
    
} 

.wrapper {
    background-color: dimgray;
    min-height: 100%;
    
}

.footer {
        position: fixed;
        background-color: dimgrey;
       left: 0;
       bottom: 0;
       width: 100%;
       color: black;
       text-align: center;
}

.logo {
       width: 200px;
	   height: 200px;
       margin: 0px 5px;
       float: left;
    }

.section1  {
    background-color: white;
    border-top: 10px solid black;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
    width: 50%;
    font-size: 1.2rem;
    display: inline-block;
    padding: 1.5rem 0rem;
      }
        .section1 h4 {
          text-align: center;
      }
      
.imgSec2   {
    width: 60.85%;
     box-shadow: 25px 25px 40px #222,
                -25px -25px 40px #222;
    border: 3px solid black;
    }
    
figcaption {
    color: white;
    text-decoration: italic;
}

.section2 {
  width: 50.5%;
  padding: 2.67rem 0rem;
  display: inline-block;
  background: 
      radial-gradient(circle, #fff, #222, transparent),
      url(../img/img_1.jpg) 
      no-repeat center/cover;
  border-top: 10px solid black;
  border-left: 10px solid black;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}

.black-background   {background-color: black;}
            
.paragraph  {text-indent: 20px;}

.contactLink {
    
    font-size: 16px;
    color: blue;
    font-family: Helvetica, sans-serif;
}

.paddingBot {padding: 10px 0px 0px 10px;}

/* collopsing div fix */
.clearfix::after    {
    content:"";
    display: table;
    clear: both;
}

/*      ----------------------------
        Black footer border for mobile view
*/
@media screen and (max-width: 767px) {
    .section2 {
        margin-bottom: 10px;
    }
}

/*      ----------------------------
        Center logo for Samsung 
*/
@media screen and (min-width: 350px) and (max-width: 369px) {
    .logo   {
        margin-left: 15%;
    }
}

/*      ----------------------------
        Center logo for iphone 6/7/8 6/7/8+ 
*/

@media screen and (min-width: 370px) and (max-width: 400px) {
    .logo {
        margin-left: 17.5%;
    }
}

@media screen and (min-width: 400px) and (max-width: 420px) {
    .logo {
        margin-left: 20.3%;
    }
    
    .section1 h4:nth-child(2) {
          /* chrome 26& */
          padding-left: 10%;
      }
}

 /*     -----------------------
        mobile rule
 */
 
 @media screen and (max-width: 767px) {
     
     
      .section1 h4:nth-child(2) {
          /* chrome 26& */
          padding-left: 10px;
      }
      
     .section1 p {
         display: inline-block;
     }
     
     .imgSec2   { 
        width: 50%;
        box-shadow: 20px 20px 40px #222,
        -20px -20px 40px #222;
    }

    .section1  {
          border-top: 10px solid black;
          border-left: 10px solid black;
          border-right: 10px solid black;
          border-bottom: 5px solid black;
          font-size: 12px;
          font-family: sans-serif;
                  }

    .section2 {
                      
                      padding: 2rem;
                       background:  url(../img/img_1.jpg) 
                      no-repeat center/cover;
                      border-top: 5px solid black;
                      border-left: 10px solid black;
                      border-right: 10px solid black;
                      border-bottom: 10px solid black;
    }
} /* closing media query for mobile */


    
@media screen and (min-width: 767px) and (max-width: 991px) {
    
     .section1  {
                  border-top: 10px solid black;
                  border-left: 10px solid black;
                  border-right: 10px solid black;
                  border-bottom: 5px solid black;
                  font-size: 1.3rem;
                  }

    .section2 {
                      border-top: 5px solid black;
                      border-left: 10px solid black;
                      border-right: 10px solid black;
                      border-bottom: 10px solid black;
    }
    
      .section1 h4 {
          text-align: left;
      }
} /* End media */

    /* Media tag for smooth design */
 @media screen and (min-width: 992px) and (max-width:1199px) {
        .section1 {
            font-size: .8em;
        }
        
        .imgSec2 {
             width: 82%; 
        } 
         
        .section2 {
            padding: 1.58em;
        }
        
          .section1 h4 {
          text-align: left;
      }
        
        /* Browser hack for selecting Chrome */
        @media screen and (-webkit-min-device-pixel-ratio:0)
        {
            .section1 {
            font-size: 1.3rem;
            }
            
            .imgSec2   {
                width: 90.25%;
            }
        } /* Closing browser hack */
 } /* Closing media 

and ending media quereies for index/layout 



    ***************
        Ending skeleton/index style

        Starting Menus style
    ***************
*/


.levels {
    background: white;
    color: black;
    border-top: 10px solid black;
    border-left: 10px solid black;
    border-right: 10px solid black;
    border-bottom: 10px solid black;
    }

.section-3img {
    width: 80%;
               box-shadow: 25px 25px 60px #222,
                -25px -25px 60px #222;
               border-radius: 40px 15px 40px 15px;
                border: 3px solid black;

}
.section3-events {
                  width: 100%;
                  padding: 4rem;
                  display: inline-block;
                  background-image: radial-gradient(#fff, #222, transparent),
                                    url(../img/img_4.jpg);
                  background-size: cover;
                  border-top: 10px solid black;
                  border-left: 10px solid black;
                  border-right: 10px solid black;
                           
    }
 

.levels-col {
        list-style-position: inside;     
}                


        
.levels-col ul {
            padding: 0px 0px 0px 0px;
}

/* ----------------------------
        Media queries for Menus
*/
 @media screen and (max-width: 767px) {

         .levels-col    {
             border-bottom: 1px solid black;
             padding-bottom: 15px;
         }

        .levels {
            border-top: 10px solid black;
        }
         /* Large Section image wont be displayed on mobile screens*/
         .section-3img {
             width: 100%;
             box-shadow: none;
             border: none;
         } 
         
         .section3-events {
             padding: .1rem;
         }
         
         .menu-item {
             font-size: 10px;
         }
         
         
}

@media screen and (min-width: 768px) and (max-width: 838px) {
    .contact {
        font-size: .9em;
        margin-left: -23px;
    }
}
         /*optional mobile picture psedo here*/ 
 /* closing media query for mobile */
 /* Closing media 

and ending media quereies for index/layout 


          

    ***************
        Ending menus style
        
        
        
        
        

        Starting Gallery style
    ***************
*/

.keyline-vert   {
    
    width: 100%;
    border: 3px solid black;

}

.gallery-farright   {
    width: 85%;
    border: 3px solid black;
}

.keyline-mid    {
    width: 100%;
    margin-bottom: 20px;
        border: 3px solid black;

    
}
    
    .section3-gallery-image {
                  width: 49%;
                  padding: 2.85rem 0em;
                  display: inline-block;
                  background: radial-gradient(circle, #fff, #222, transparent), 
                      url('../img/img_2.jpg')
                      no-repeat center/cover;
                  border-top: 0px solid black;
                  border-left: 10px solid black;
                  border-right: 5px solid black;
                  border-bottom: 10px solid black;
                
}

    .section4-image {
          width: 50%;
          padding: 2.95rem 0;
          display: inline-block;
          background: radial-gradient(circle,  #fff, #222, transparent),
              url(../img/img_3.jpg)
              no-repeat center/cover;
          border-top: 0px solid black;
          border-left: 5px solid black;
          border-right: 10px solid black;
          border-bottom: 10px solid black;                
}

.imgSec3 {
    width: 75.8%;
    box-shadow: 15px 25px 30px #222,
                -15px -25px 30px #222;
    border: 3px solid black;
}

.imgSec4 {
    width: 75%;
    margin: 0 auto;
    box-shadow: 25px 25px 30px #222,
                -25px -25px 30px #222;
    border: 3px solid black;
}

 .gallery-col {
           padding: 10px 10px 10px 40px;
 }


/* Browser hack for selecting Chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
        
    }
/* ----------------------------
        Media queries for gallery
*/
 @media screen and (max-width: 767px) {
     
     .keyline-vert  {
         width: 60%;
         
     }
     
     .keyline-mid   {
         width: 100%;
     }
        
} /* closing media max-width 767px */

@media screen and (max-width: 992px) {
    
    .section3-gallery-image  {
        border-right: 10px solid black;
    }
    
    .section4-image {
        border-left: 10px solid black;
    }
} /* closing max-width 992 */

@media screen and (min-width: 992px) and (max-width: 1200px) {
    
    .imgSec3    {
        width: 76%;
    }
} /* closing max-width 992 */
    
 /* Closing media 

and ending media quereies for gallery
      

    ***************
        Ending gallery style

        Starting contact style
    ***************
*/



.contact-col    {
                  width: 50%;
                  padding: 1rem;
                  display: inline;
                  background: white;
                  border-top: 10px solid black;
                  border-left: 10px solid black;
                  border-right: 10px solid black;
                  border-bottom: 10px solid black;
}

.contact-form   {
    list-style-type: none;
    padding-left: 0px;
}


 @media screen and (max-width: 767px) {
     
     .contact-col    {
               
                  border-top: 10px solid black;
                  border-left: 10px solid black;
                  border-right: 10px solid black;
                  border-bottom: 5px solid black;
}

.schedule-col    {
                
                  border-top: 5px solid black;
                  border-left: 10px solid black;
                  border-right: 10px solid black;
                  border-bottom: 10px solid black;
}
     
    .contact-col td, .schedule-col td, input  {
         margin-bottom: 1em;
     } 
        
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    
        .contact-col    {

                      border-top: 10px solid black;
                      border-left: 10px solid black;
                      border-right: 10px solid black;
                      border-bottom: 5px solid black;
    }

        .schedule-col    {

                      border-top: 5px solid black;
                      border-left: 10px solid black;
                      border-right: 10px solid black;
                      border-bottom: 10px solid black;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    
        .contact-col    {   
                      padding: 2.9em 0;
                      border-top: 10px solid black;
                      border-left: 10px solid black;
                      border-right: 10px solid black;
                      border-bottom: 10px solid black;
    }

        .schedule-col    {

                      border-top: 10px solid black;
                      border-left: 5px solid black;
                      border-right: 10px solid black;
                      border-bottom: 10px solid black;
    }
}

/*
*****************************************
end of style for content and layout for page
starting variuos styles for javascript(s)
****************************************
*/