body, h1,h2,h3,h4,h5,h6 {
   font-family: "Montserrat", "sans-serif"
}

body.w3-black , .w3-black{
    background-color: #fff !important;
}

body p {
    color: #000 !important;
}

body.nater-container .w3-text-light-grey {
    color: #616161 !important;
}

body.nater-container.w3-black .w3-black{
    background-color: #fff !important;
    color: #616161!important;
}

body.nater-container .w3-text-white {
    color: #616161 !important;
}

body.nater-container.w3-black .w3-hover-black:hover {
    background-color: #e1e1e1 !important;
}

.foot1, .foot2, .foot3, .foot4 {
    display: none;
}

p.cursive-text {
    font-size: 30px;
}

.w3-black p {
    color: #000 !important;
}

.w3-bar-block .w3-bar-item {
   height: 95px;
}

.w3-row-padding img {
   margin-bottom: 12px
}

.w3-circle {
   border-radius: 50%;
   margin-bottom: 10px !important;
}

.w3-text-grey, .w3-hover-text-grey:hover, .w3-text-gray, .w3-hover-text-gray:hover {
   color: white !important;
}

.w3-opacity, .w3-hover-opacity:hover {
   opacity: inherit;   
}

.video-holder {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 64px;
    height: 0;
}

.video-holder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.event-header {
   color: #fff;
   display: inline-block;
   font-size: 20px;
   margin-bottom: 15px;
   text-align: center;
   width: 100%;
}

.landmark-holder {
   margin: auto;
   text-align: center;
   width: 100%;
   margin-bottom: 30px;
}

.landmark {
   max-width: 100%;
   width: 500px;
}

.event-date {
   font-size: 20px;
   margin-bottom: 10px;
}

.event {
   border: 1px solid #fff;
   display: inline-block;
   margin-right: 20px;
   margin-bottom: 20px;
   padding: 20px;
}

.event-location {
   margin-bottom: 10px;
}

/* Set the width of the sidebar to 120px */
.w3-sidebar {
   width: 120px !important;
   background: #222;
}

/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {
   margin-left: 120px
}

/* Remove margins from "page content" on small screens */
.logo{
   height: 100% !important;
   height: 100% !important;
   width: 500px;
   max-width: 100%;
}
.rotateimg180 {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
}

@media only screen and (max-width: 600px) {
   #main {
      margin-left: 0;
   }

   .logo{
      
   }

   .w3-padding-64 {
    padding-top: 64px!important;
    padding-bottom: 64px!important;
   }

   #footer{
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /* margin-bottom: 0px; */
    float: left;
    text-align: center;
   }

   .soundcloud-foot,.twitter-foot,.facebook-foot,.instagram-foot{
   height: 20px;
   margin-top: 5px;
   margin-bottom: 5px;
}
   .foot1, .foot2,.foot3, .foot4 {
   display: block;
   width: 25%;
   float: left;
   margin-top: 0px; 
   text-align: center; 
}
   .foot1{
   background-color: #ff4300;
}
   .foot2{
   background-color: #00aaec;
}
   .foot3{
   background-color: #4460a0
}
   .foot4{
   background-color: #e1306c;
}


}