/*Main Styles*/

    html {
        background-color: black;
        background-image: linear-gradient(to right, black, rgb(15, 15, 15), rgb(40, 40, 40));
        font-family: "Eras ITC", "Eras Light ITC",  sans-serif ;
        color: white;
        text-align: center;
        width: 100%;
        /* border: #8b0000 solid; */
    }

    header {
        margin-top: -10px;
        margin-left: -8px;
        height: 80px;
        width: 100%;
        background-color: #000000;
        /* border: solid, red; */
        position: fixed;
    }

    #headsec {
        background-color: #000000;
        width: 100%;
    }

    .center {
        /* margin-left: auto; */
        margin-right: auto;
        display: block;
    }

    #intro {
        height: 300px;
        background-image: url("https://s3.us-east-2.amazonaws.com/ronin-ma.com/Pictures/NewRonin.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        /* margin: auto; */
    }

    #about {
        position: relative;
        top: 150px;
        height: 1000px;
        margin: auto 100px;
        z-index: 0;
    }

    .reviews {
        z-index: 0;
    }

    main {
        position: relative;
        top: 150px;
        /* z-index: -1; */
        max-width: 100%;
        width: 1200px;
        margin: 0 auto;
        /* padding: 0 40px; */
        box-sizing: border-box;
    }   

    article {
        text-align: center;
    }

    article p {
        line-height: 2em;
    }

    /*End of Main Styles*/

   
    /*Contact Info*/

    #contact {
        height: 700px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        font-size: 12px;
        font-family: inherit;
        
        
    }
    
    #contactTitle {
        float: left;
        width: 45%;
        text-align: left;
        font-family: inherit;
        
        
      
    }
    
    #contactTitle h1 {
        font-size: 12px;
        text-align: left;
        text-shadow: none;
        margin: 0;
        color: white;
    }
    
    #contactTitle h2 {
        font-size: 12px;
    }
    
    #contactForm {
    
        float: right;
        width: 54%;
        text-align: left;
        font-family: inherit;
        font-size: 12px;
    }

    form {
        margin: auto 400px;
    }

    /*End Contact Info*/

    
    /*Footer*/

    footer {
        font-size: 8px;
        font-family: Arial;
        text-align: left;
        position: relative;
        top: 100px;
        height: 50px;
        width: 98%;
        /* border: #8b0000 solid; */
    }
      
    footer p {
        position: relative;
        top: 75%;
        left: 25px;
    }

    /*End Footer*/



/* Nav Bar */

nav {
    background-color: #ffffff;
    position: fixed;
    top: 0;
    width: 105%;
    margin-left: -32px;
    font-family: "Eras ITC", "Eras Light ITC",  sans-serif ;
    font-weight: bold;
    z-index: 1;
    
    /* border: solid, #000000; */
}

.dropdown {
    background-color: #ffffff;
    padding: 5px;
    position: fixed;
    top: 0;
    width: 105%;
    margin-left: -32px;
    font-family: "Eras ITC", "Eras Light ITC",  sans-serif ;
    font-weight: bold;
    
    /* border: solid, #000000; */
}

nav img {
    float: left;
    margin-left: 5%;
    height: 75px;
    width: 115px;
}

nav ul {
    white-space: nowrap;
    max-width: 30%;
    top: 25px;
}

nav li {

    width: 25%;
    display: inline-block;
    font-size: 14px;
    
}

nav li a {
    text-decoration: none;
    font-family: inherit;
    color: #000000;
    /* text-shadow: 2px 2px #323232; */
    
}

    /* Change the color of links on hover */
nav li a:hover {
    
    color: #8b0000;
    text-decoration: underline;
    
  }

nav li a.active {
    color: #8b0000;
    text-decoration: underline;
}

/* End Navbar */

/* Pseudo Classes */

p::selection {
    background-color: #8b0000;
    color: #FFFFFF;
}

h2::selection {
    background-color: #8b0000;
    color: #FFFFFF;
    
}

h3::selection {
    background-color: #8b0000;
    color: #FFFFFF;
}

.quote {
    font-family: "Eras ITC", "Eras Light ITC",  sans-serif ;
}

/*Gallery Styles*/

.pics {
    /* max-width: 100%; */
    margin-left: -50px;
    /* border: solid, red; */
}

.images {
    text-align: center;
    margin: 30px auto;
    white-space: nowrap;
    z-index: 1;
} 

.images li { 
    display: inline-block;
    width: 33%;
    /* float: left; */
    margin: 0px auto;
}

.images li img {
    max-width: 100%;
}

.images li:hover {
    position: relative;
    top: -4px;
    /* z-index: -1; */
    
}

 /* Affilliates */

 .affiliates h3 {
    text-align: center;
 }

.affiliates {
    /* max-width: 100%; */
    margin-left: -50px;
    /* border: solid, red; */
}

.mons {
    text-align: center;
    margin: 30px auto;
    white-space: nowrap;
    /* z-index: 1; */
} 

.mons li { 
    display: inline-block;
    width: 16.7%;
    /* float: left; */
    margin: 0px auto;
}

.mons li img {
    max-width: 100%;
}

.mons li:hover {
    position: relative;
    top: -4px;
    /* z-index: -1; */
    
}

 /* End Affiliates */

.lspic img.hover {
    position: relative;
    top: -4px;
    
}

/*End of Gallery*/

/* Dropdown Button */
.dropbtn {
    padding: 5px;
    position: fixed;
    top: 14px;
    margin-left: -40px;
    font-weight: bold;
    font-family: inherit;
    background-color: #ffffff00;
    opacity: 1;
    color: #000000;
    /* padding: 16px; */
    font-size: 14px;
    border: none;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    left: inherit;
    top: 5px;
    background-color: #FFFFFF;
    max-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  button.active {
    color: #8b0000;
    text-decoration: underline;
  }

  button.active svg {
    fill: #8b0000;
    text-decoration: underline;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #FFFFFF;  color: #8b0000;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
   .dropbtn:hover {background-color: #FFFFFF; color: #8b0000;}

   .dropbtn:hover svg {fill: #8b0000;}

   
.programs{
    display: inline-block;
    width: 30%;
    padding: 15px;
    margin-left: -50px;
    
    
}

.programs img{
    width: 500px;
    height: 370px;
    align-items: center;
}

#yudansha {
    float: left;
    width: 50%;
    height: 450px;
    font-family: inherit;
    text-align: center;
  
  
  }
  
  #yudansha h1 {
    font-size: 30px;
  /*  margin: 0 0 0 0;*/
    margin: 0 0 0 150px;
    
  }
  
  #yudansha h3 {
    font-size: 16px;
    margin: 0 0 0 0px;
    font-weight: lighter;
    
  }
  
  #yudansha h2 {
    font-size: 24px;
    margin: 0 0 0 0px;}
  
  #yudanpic {
    float: right;
    width: 50%;
    height: 250px;
  
  }

    .programpics li{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* border: solid, red; */
    height: 500px;
  }

  .programpics img {
    position: relative;
   text-align: center;
   margin-left: 300px;
  }

 

  .caption {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: lighter;
    font-size: 12px;
  }
  
  

@media screen and (max-width: 1200px) {
    
    nav {
       
        position: fixed;
        top: 0px;
    }

    nav ul {
      
      max-width: 50%;
    }

    nav li {
      font-size: 12px;
      width: 20%;
    }

    nav img{
        
        height: 65px;
        width: 100px;
        
    }

    #intro {
        height: 350px;
        background-size: 350px;
        }

    header {            
            height: 100px;
        }

    #about {
        position: relative;
        top: 150px;
        height: 500px;
        margin-right: 50px;
        width: 100%;

        }


    article p {
            line-height: 1em;
            font-size: 14px;
            
        }

    .images li { 
            display: block;
            width: 100%;
            margin: 10px auto;
        }

    /* Dropdown Button */
    .dropbtn {
        padding: 5px;
        position: fixed;
        top: 11px;
        margin-right: 1000px;
        font-size: 12px;
        width: 85px;
        
    }


    #contact {
        
        height: 300px;
        width: 102%;
        margin-left: -10px;
        position: relative;
        display: flex;
        /* border: #8b0000 solid; */
        top: 375px;
    }

    #contactForm {
        
        float: right;
       text-align: left;
        margin-right: auto;
        height: 50%;
        position: relative;
        
    }

    #contactForm iframe {
        y: 0;
        width: 100%;
        height: 100%;
        margin-right: 25px;
        top: 0;
        
    }

    #contactTitle h2 {
        margin-left: 25px;
    }

    footer {
        text-align: center;
        position: relative;
        top: 350px;
    }

    
    
}




@media screen and (max-width: 600px) {

    body {
        position: relative;
        width: 100%;
        height: 1800px;
    }

    
    main {
        width: 100%;
        height: 1750px;
    }
    
    .indexMain {
        width: 100%;
        height: 2500px;
    }
    
    nav {
        display: flexbox;
        justify-content: center;
        left: 35px;
        position: fixed;
        /* top: -20px; */
        y: 0;
        width: 100%;
        height: 150px;
        margin-left: -35px;
    } 

    

    nav img{
        display: flex;
        text-align: center;
        margin-left: 40%;
        height: 49px;
        width: 75px;
        top: 0;
        left: 85px;
        justify-content: center;
        align-items: center;
    }

    nav ul {
        padding: 0 0;
        margin-top: 40px;
        white-space: inherit;
        margin-left: 31%;
        
    }

    nav li {
      font-size: 12px;
      display: block;
      width: 40%;
      margin: 5px 35px;
      
            }

    #intro {
        height: 200px;
        background-size: 250px;
        margin: auto;
    }

    #about {
        height: 850px;
        position: relative;
        top: 150px;
    }

    header {      
        background-color: #000000;  
        height: 100px;
        position: relative;
    }
    

    article p {
        line-height: 1em;
        font-size: 12px;
    }

    .summary  {
        font-size: 12px;
        line-height: 1em;
        margin: 50px auto;
        /* border: #8b0000 solid; */
        width: 90%;
    }
    
    .classTitle img {
        width: 218px;
        height: 300px;
    }

    .classPage {
        top: 150px;
        height: 2750px;
    }

    .images {
        padding: 0 0;
    }

    .images img {
        width: 70%;
        height: 70%;
    }

    .lspic img {
        width: 70%;
        height: 70%;
    }

    .calPage {
        top: 150px;
        height: 900px;
    }

    .calPage h1 {
        font-size: 1em;
    }

    .contactPage {
        top: 150px;
        height: 1600px;
    }

    .calendar {
        height: 250px;
    }

    .calendar iframe {
        width: 75%;
        height: 100%;
    }

    form {
        margin: 0 25px;
    }

    .mons {
    height: 250px;
} 

/* Dropdown Button */
    .dropbtn {
        
        position: fixed;
        top: 80px;
        /* left: 217px; */
        margin-left: -35px;
        font-size: 12px;
        width: 115px;
        height: 13px;
        
    }

    .images li {
        height: 70%;
        width: 75%;
    }

    .quote h2 {
        font-size: 16px;
    }

    .affiliates {
        height: 400px;
        
    }

    .affiliates h3 {
        text-align: center;
        
    }

    .mons li {
        width: 30%;
        float: left;
        align-items: center;
        padding: 15px;
        margin-left: 20px;
    }

    #contact {
        top: 50px;
        position: relative;
        display: flexbox;
        flex-direction: column;
        height: 400px;
    }

    #contactTitle {
        height: 200px;
        width: 90%;
        text-align: center;
        margin-left: 10px;
        /* border: #8b0000 solid; */
    }

    #contactForm {
        
        
        text-align: left;
        margin-left: 10px;
        width: 90%;
        height: 250px;
        /* border: #8b0000 solid; */
        
    }

    #contactForm iframe {
        y: 0;
        /* width: 90%; */
        height: 150px;
        /* margin-right: 25px; */
        top: 0;
        
    }

    footer {
        width: 100%;
        height: 50px;
        position: relative;
        text-align: center;
        top: 100px;
        float: right;
    }

    footer p {
        position: relative;
        top: 75%;
        left: 0px;
    }

    .sensei {
        width: 90%;
        height: 750px;
        /* border: #8b0000 solid; */
        margin: 0 0;
        position: relative;
        font-size: 12px;
    }

    #yudansha {
        position: relative;
        text-align: center;
        width: 100%;
        /* border: #8b0000 solid; */
    }

    #yudansha h3 {
    font-size: 12px;
    
    
  }
  
  #yudansha h2 {
    font-size: 14px;
    }

    #yudanpic {
        width: 100%;
        
        /* float: right; */
        /* margin-left: -50px; */
    }

    #yudanpic img {
        margin-top: 15%;
        height: 200px;
        width: 150px;
    }
     
     
    
}