body, html, h1,h2,h3,h4,h5,h6,h7,p {
    font: 400 "Open Sans", sans-serif;

    color: black;
    height: 100%;
    width: 100%;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;

}

* {
  box-sizing: border-box;
}

/*using flex*/

.flex-container {
  display: flex;
  flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

    /* Column container */

.row  {  
  display: flex;
  flex-wrap: wrap;
}


h1 {
    font-size:3.5em;
    font-family: 'Charmonman', cursive;
    color: black;

  }

h2 {
    font-size: 1.8em;
    font-weight: bold;
    color: black;
  }

h3 {
    font-size: 2.0em;
    font-weight: 600;
    text-align: center;
    color: darkblue;
    
  }

h4 {
    font: 400 "Open Sans", sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    color: black;

  }

h5 {
    font-size: 1.4em;
    font-weight: 700;
    color: green;
  } 

h6 {
    font-size: 1.1em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: darkblue;
     line-height: 2.0;
    font-weight: 400;
}

h7 {
    font-size: 1.4em;
  letter-spacing: 1px;
  color: #111;
   #text-align: left;
text-transform: uppercase;
    line-height: 3.0;
 
}

h8 {
    font-size: 1.0em;
  letter-spacing: 0.5px;
    text-align: center;
    line-height: 3.0;
    color: black;
    word-spacing: 2px;
    font-weight: 400;
}

h9 {
    font-size: 1.6em;
    font-weight: 400;
    color: black;

  }
 

p {
    font-size: 1.0em;
    #letter-spacing: -0.5px;
    font-weight: 400;
    #text-align: left;
    line-height: 1.4;
    color: #111;
}


hr {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 4px;
background-color:gold;
opacity: 0.5;
}



.section-1 {
   #flex: 50%;
   background-image: linear-gradient(180deg, rgba(253,235,126,1) 60%, rgba(239,159,63,0.8));
  padding: 0px;
    text-align: center;
    min-height:650px;
    align-items: center;
  justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
}

.section-2 {
  #flex: 50%;
    background-image: linear-gradient(180deg, rgba(239,159,63,0.8) 60%, rgba(253,235,126,1));
  padding: 20px;
    text-align: left;
    min-height:650px;
}

p.drop-cap:first-letter {
    font-size: 4.5em;
    float: left;
    margin-top: -.3em;
    margin-right: 0.1em;
}


.section-3 {
  #flex: 50%;
#background-image: linear-gradient(180deg, rgba(192,157,136,0.9) 70%, rgba(74,89,86,0.8));
    background-color: #e5d7cf;
    opacity: 0.8;
  padding-left: 5%;
    padding-right: 5%;
    text-align: left;
    min-height:300px;
}

.section-4 {
  #flex: 50%;
  #background-image: linear-gradient(180deg, rgba(253,235,126,1) 30%, rgba(239,159,63,0.8));
    background-color: #c9cbc9;
    opacity: 0.8;
    text-align: left;
    min-height:700px;
}

.section-5 {
  #flex: 50%;
  #background-image: linear-gradient(180deg, rgba(239,159,63,0.8) 40%, rgba(253,235,126,1));
  background-color: #c9cbc9;
    opacity: 0.8;
text-align: left;
min-height:700px;
}

.section-6 {
  #flex: 50%;
  background-color:#31708e;
    opacity: 0.8;
  padding: 0px;
text-align: left;
min-height:700px;
}

.section-7 {
  #flex: 50%;
  background-color: #31708e;
     opacity: 0.8;
  padding: 0px;
text-align: left;
min-height:700px;
}

.section-8 {
  #flex: 50%;
  background-color: #c9cbc9;
     opacity: 0.8;
  padding: 0px;
text-align: left;
min-height:700px;
}

.section-9 {
  #flex: 50%;
    #background-image: linear-gradient(180deg, rgba(192,157,136,0.9) 70%, rgba(74,89,86,0.8));
     background-color: #c6a693;
    opacity: 0.8;
  padding-left: 5%;
    padding-right: 5%;
    text-align: left;
    min-height:300px;
}

.section-10 {
  #flex: 50%;
   background-image: linear-gradient(#31708e,#c9cbc9);
    opacity: 0.8;
  padding-left: 5%;
    padding-right: 5%;
    text-align: left;

}

.section-15 {
  #flex: 50%;
  background-image: linear-gradient(180deg, rgba(239,159,63,0.8) 40%, rgba(253,235,126,1));
  #background-color: #c9cbc9;
    opacity: 0.8;
text-align: left;
min-height:700px;
}

.caption1 {
    font-size: 100%;
padding-top: 30px;
  width: 100%;
  text-align: center;
    height: 700px;
  line-height: 1.5; 

}

.rachinfo {
  padding: 20px;
padding-left: 40px;
    text-align: left;
}

.aboutus-1 {
  #flex: 50%;
  background-image: linear-gradient(180deg, rgba(253,235,126,1) 60%, rgba(239,159,63,0.8));
  text-align: center;
    min-height:550px;
    padding: 0px;
}

.aboutus-1 p {
  text-align: justify;
padding: 10px 80px 0px 80px;

}

@media only screen and (max-width: 600px) {
    .aboutus-1 p {
   padding: 10px 10px 0px 10px; 
    }
}

.vids1 {
  #flex: 50%;
  background-image: linear-gradient(180deg, rgba(253,235,126,1) 60%, rgba(239,159,63,0.8));
    min-height:550px;
    padding: 0px;
}

.section-men {
  #flex: 50%;
    background-color: #e5d7cf;
    opacity: 0.8;
    #background-color:#c2d3da;
  #padding: 0px 80px 0px 80px;
    text-align: left;
    min-height:800px;
    padding: 10px;
}

.section-men img {
   padding: 0px;
width: 200px; 
float: center;
margin-bottom: 20px;
}

@media only screen and (max-width: 600px) {
    .section-men p {
   padding: 0px;
    }
}


.collapsible {
  background-color: #31708e;
  color: #f7f9fb;
  cursor: pointer;
  padding: 3px;
  width: 100%;
  border: 0px;
  text-align: left;
  outline: none;
  font-size: 12px;
    padding-left: 10px;
}

.active, .collapsible:hover {
  background-color: darkgrey;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-image: linear-gradient(#31708e,#c9cbc9);
   background-image: -webkit-linear-gradient(#31708e,#c9cbc9);
}

/* multiple text colums*/

@media all and (min-width: 900px) {
#example p:first-of-type {
  -webkit-column-count: 2;
  -webkit-column-gap: 3%; /* Saf3, Chrome*/
  -moz-column-count: 2;   
  -moz-column-gap: 3%; /* FF3.5+ */
  column-count: 2;        
  column-gap: 3%; /* Opera 11+*/
  }
   #example p  {
  -webkit-column-count: 3;
  -webkit-column-gap: 2%; /* Saf3, Chrome*/
  -moz-column-count: 3;   
  -moz-column-gap: 2%; /* FF3.5+ */
  column-count: 3;        
  column-gap: 2%; /* Opera 11+*/
  }
}



.section-11 {
#flex: 50%;
min-height: 670px;
text-align: left;
background-color: #c9cbc9;
color: black;
}


.section-11 p {
  text-align: left;
    color: black;
  padding: 0px, 20px, 0px, 20px;  
}

.section-12 {
  #flex: 50%;
min-height: 680px;
text-align: left;
background-color: #e5d7cf;
color: black;
}


.section-12 p {
  text-align: left;
    color: black;
}

.footer {
 bottom: 0;
  left: 0;
  right: 0;
    #position:fixed;
  #flex: 50%;
    width: 100%;
  background-color: darkgreen;
text-align: left;
min-height:300px;
    color: lightgray;
  font-size: 16px;
  padding: 16px 32px;
    margin-top: 10px;
    
}

.footer p {
  text-align: center;
    color: lightgray;
}

@media screen and (min-width: 767px) {
 .navbar {   
    flex-direction: column;
      margin-top: 0;
  }
}

 div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
} 

.logo h4 {
    font: 400 "Open Sans", sans-serif;
font-size: 24px;
    margin-left: 160px;
    margin-top: -48px;
color: white;
text-align: left;
}