* {
    margin: 0;
    padding:0;
}

html,body {
    background-color:#ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 300;
}

/* ----- HEADER ----- */
header {
    background-image: url(images/IMG_0064.jpg);
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*overflow: hidden; */
}

/*header {
    background-image: url(photos/IMG_9940.jpg);
    height: 80vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    /*                overflow: hidden;*/
/*}*/
        /*                      for mobile image resize _ takes away parrallax effect  :(          */
        
      

#logo {
    margin:8px;
    width:55px;
    float:left;
}

h1 {
    padding:10px 0px;
    color: #000000;
    font-weight: 300;
    word-spacing: 3px;
    letter-spacing: 1px;
    font-size: 170%;
    float: left;
}

#top-bar {
    width: 100%;
    margin:0;
    height:70px;
    backface-visibility: .7;
    background-color:#ffffff;
    border-bottom: 3px #800cb1 solid;
    overflow: hidden;
}

/* ----- NAVIGATION ----- */
nav {
    float: right;
    margin: 17px 5% 10px 10px ;
}

nav ul {
    display: block;
    list-style-type: none;
}

nav ul li {
    font-size: 105%;
    display: inline-block;
    float: left;
    padding: 0px 15px;
}

nav ul li a:hover {
    color:#000000;
    border-bottom: 2px #800cb1 solid ;
    text-transform:none;
}
a , a:link, a:visited {
    text-decoration: none;
    color: black;
}

/* ----- SECTION TWO ----- */

#section-two {
    background-color:#ffffff;
    height:500px;
    width:100%;
    background-attachment: fixed;
   
    
}

h2 {
    margin: 10px 50%;
    font-family: 'Lato', sans-serif;
    font-size: 260%;
    font-weight: 300;
    width: 150px;
    border-bottom: 2px solid #800cb1; 
}

h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 150%;
    margin-bottom: 5px;
    color: #800cb1;
    
    
}


.square {
    height: 350px;
    width:29%;
    float: left;
    margin:80px 2%;
    overflow: hidden;
    
}

#square-one {
 
    
}

#square-two {

    
    
}

#square-three {
   
    
    
}
/* ----- MAGIC BOXES IN EVENT & CONTACT SECTION ----- */
.hideme
{
    opacity:0;
}

/* ----- GALLERY SECTION ----- */

#gallery-section {
   
    background-attachment: fixed;
    height: auto;
}

.picture-sections {
    list-style: none;
    width:100%;
}

.picture-sections li {
    display: block;
    width:25%;
    float:left;
}

.picture {
    width:100%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
}

.picture img {
    width:100%;
    height: auto;
    opacity: 0.7;
    transform: scale(1.15);
    transition: transform .5s, opacity .5s;
}

.picture img:hover {

    transform: scale(1.04);
    opacity: 1;
}

/* ----- VIDEO SECTION ----- */

#video-section {
     background-color:#ffffff;
    height:500px;
    width:100%;
    background-attachment: fixed;
}




/* ----- CONTACT SECTION ----- */

#contact-section {
    width:100%;
    height:70px;
}

#contact-section h2 {
    width: 182px;
    margin-top:10px;
}
.contact-box {
    height: 200px;
    width:29%;
    float: left;
    margin:70px 2%;
    overflow: hidden;
}

.contact-box  li {
    text-align: center;
}
#contact-one {
    
}

#contact-two {
   
}

#contact-three {
    
}

/* ----- FOOTER SECTION ----- */

footer {
    clear: both;
    background-color: #000;
    width:100%;
    height:50px;
    overflow: hidden;
}

h4 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 98%;
    color: #acabab;
    text-align: center;
    padding-top: 10px;
}

@media only screen and (max-width:825px) {
    header {
        background-image: none;
        height: 73px;
    }
    #main_image {
        background-image: url(images/IMG_0064.jpg);
        height: 30vh;
        background-size: 100%;
        background-repeat: no-repeat;
        background-attachment: local;
    }
}