body{
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: scroll;    
}

.header{
    margin: 0px;
    padding: 0px;
    background-color: rgb(192, 192, 192);
    
}

h1{
    margin: 0px;
    padding: 0px;
}

/* Festa Foundation Title */
h1 {
    margin: 0px;
    padding-bottom: 54px;
    padding-left: 50px;
    padding-right: 46px;
    padding-top: 42px;
    width: auto;
    height: auto;
    -webkit-animation-name: zoomout; /* For Safari Browsers */
    -webkit-animation-duration: 3s; /* For Safari Browsers */
    animation-name: zoomout;
    animation-duration: 4s;
    position: relative;
    background-color: rgb(192, 192, 192);
}

h1 img{
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
}

.login{
    position: absolute;
    top 0px;
    right: 0px;
    z-index: 1;
    
    margin: 0px;
    padding: 0px;
}

.login a{
    margin: 0px;
    padding: 5px;
    
    color: black;
    text-decoration: none;
}

.login a:hover{
    color: #303030;
}

/* Animates the Header Excluding the NavBar */
@keyframes leftscroll{
    0%{
        left: 2000px;
    }
    100%{
        left: 0px;
    }
}

/* Animates the Header Excluding the NavBar for Safari Browsers */
@-webkit-keyframes leftscroll{
    0%{
        left: 2000px;
    }
    100%{
        left: 0px;
    }
}

/* Animates the Header Excluding the NavBar */
@keyframes zoomout{
    0%{
        transform: scale(0,0);
        -ms-transform: scale(0,0);
    }
    10%{
        transform: scale(0,0);
        -ms-transform: scale(0,0);
    }
    100%{
        transform: scale(1,1);
        -ms-transform: scale(1,1);
    }
}

/* Animates the Header Excluding the NavBar for Safari Browsers */
@-webkit-keyframes zoomout{
    0%{
        -webkit-transform: scale(0,0);
    }
    10%{
        -webkit-transform: scale(0,0);
    }
    100%{
        -webkit-transform: scale(1,1);
    }
}

/* Dropdown Nav Bar */
ul.topNav{
    overflow: hidden;
    background-color: #0f0f0f;
    padding-left: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 0px;
    width: 98.5%;
    height: auto;
    text-align: center;
    display: inline-block;
    position: static;
}

/* Home Button */
ul.topNav li.home{
    float: left;
    display: block;
}

ul.topNav li.home a{
    display: block;
    color: white;
    text-align: center;
    
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    
    margin: 0px;
        
    text-decoration: none;
    cursor: pointer;
}

ul.topNav li.home a:hover{
    background-color: #2d2d2d;
}

/* Nav Bar Buttons with Dropdowns Menus */
ul.topNav li.dropdown{
    float: left;
    display: block;
}

ul.topNav li.dropdown a, .db{
    display: inline-block;
    color: white; 
    text-align: center;
    font-size: 18px;
    
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 0px;
    
    text-decoration: none;
    cursor: pointer;
}

ul.topNav a:hover, li.dropdown:hover .db{
    background-color: #2d2d2d;
}

ul.topNav li.dropdown .dropcont{
    display: none;
    position: absolute;
    background-color: #0f0f0f;
    z-index: 1;
}

ul.topNav li.dropdown .dropcont a{
    display: block;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: left;
}

ul.topNav li.dropdown .dropcont a:hover{
    background-color: #2d2d2d;
}

ul.topNav li.dropdown:hover .dropcont{
    display: block;
}

/* Buttons */
ul.topNav li.button{
    float: left;
    display: block;
}

ul.topNav li.button a{
    display: block;
    
    padding-top: 10px;
    padding-bottom: 11px;
    padding-left: 12px;
    padding-right: 12px;
    
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    
    margin: 0px;
}

ul.topNav li.button a:hover{
    background-color: #2d2d2d;
}

/* Donation Dropdown Nav Tab */
ul.topNav li.donatedropdown{
    float: right;
    display: block;     
}

ul.topNav li.donatedropdown a, .donatedb{
    display: inline-block;
    color: white; 
    text-align: center;
    
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    margin-right: -19px;
    
    text-decoration: none;
    cursor: pointer; 
    font-size: 18px;
}

ul.topNav a:hover, li.donatedropdown:hover .donatedb{
    background-color: #2d2d2d;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    margin-right: -19px;
}

ul.topNav li.donatedropdown .donatedropcont{
    display: none;
    position: absolute;
    background-color: #0f0f0f;
    z-index: 1;
    right: 0;
    margin: 0px;
}

ul.topNav li.donatedropdown .donatedropcont a{
    display: block;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 5px;
    
    margin: 0px;
    
    text-align: center;
}

ul.topNav li.donatedropdown .donatedropcont a:hover{
    background-color: #2d2d2d;
}

ul.topNav li.donatedropdown:hover .donatedropcont{
    display: block;
} 

/* Mobile Dropdown Nav Tab */
ul.topNav li.mobiledropdown{
    display: none;     
}

/* Facebook/Twitter/Other Buttons */
ul.topNav li.icon{
    float: right;
    display: block;
}

ul.topNav li.icon a{
    display: block;
    text-align: center;
    
    padding-top: 9px;
    padding-bottom: 7px;
    padding-left: 6px;
    padding-right: 6px;
    
    margin: 0px;
    
    text-decoration: none;
    cursor: pointer;
    
    position: relative;
}

ul.topNav li.icon a:hover{
    background-color: #2d2d2d;
}

ul.topNav li.icon .iconbackground{
    background-color: white;
    width: 25px;
    height: 26px;
    position: relative;
}

/* Keeps Icon and White Background Together */
ul.topNav li.icon i{
    margin-top: -2px;
    margin-left: -1.5px;
    margin-right: -0.5px;
    margin-bottom: 0px;
        
    padding-bottom: 1px;
    
    position: relative;
}

/* Bottom of the Logo Under the Nav Bar 
 * Animation data stored after h1 img */
h2{
    width: 95%;
    height: auto;
    padding: 0px;
    margin-bottom: 0px;
    margin-left: 40px;
    margin-right: 56px;
    margin-top: 5px;
    -webkit-animation-name: zoomout; /* For Safari Browsers */
    -webkit-animation-duration: 3s; /* For Safari Browsers */
    animation-name: zoomout;
    animation-duration: 3s;
    position: relative;
}

h2 img{
    width: 100%;
    height: auto;
    
    padding: 0px;  
    
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: -8px;
    margin-right: 0px;
}

/* Background Image */
.background{
    background-image: url(nologobackground.png);
    overflow-y: hidden;
    overflow-x: hidden;
    background-size: cover;
    background-repeat: repeat-y;
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-right: 0px; 
    padding-right: 0px;
}

.background p{
    margin-left: 15px;
    font-size: 20px;
    font-weight: bold;
}

/* First Column */  
.row .c1{
    float: left;
    width: 7%;
    padding-top: 1px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
}

/* Second Column Holding Video */
.row .c2{
    float: left;
    width: 83%;
    
    padding: 0px;   
}

/* 2016 Video */
.vidcont{
    display: block;
    position: static;
    
    width: auto;
    height: auto;
    
    overflow: hidden;
    
    padding-top: 0px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
    
    /*background-color: black;*/
}

.vidcont video{
    width: auto;
    height: auto;
    
    max-width: 100%;
    max-height: 100%;
    
    position: static;
    vertical-align: middle;  
    
    overflow: hidden;
    
    background-color: black;
}

/* Third Column */
.row .c3{
    float: right;
    width: 5%;
    
    padding-top: 1px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
        
    font-size: 18px;
}

/* Ends the Columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Background for About */
.about{
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
}

/* Part to Put About Info */
.about h3{
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: -10px;
    font-size: 50px;
}

/* 501 Thing  */
.about h4{
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 35px;
}

/* About Text */
.about p{
    text-align: left;
    font-weight: bold;
    font-size: 30px;
    margin: 10px;
    padding: 10px;
}

.about .centeredtext p{
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin: 10px;
    padding: 10px;
}

/* Space for Testimonials */
.testimonials{
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
}

h5{
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    font-size: 40px;
}

.signup{
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 200px;
    margin-right: 200px;
}

.signup h4{
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 35px;
}

/* Example Golf Signup Formatting */
.golfform input{
    margin-left: 10px;
}

.golfform label{
    padding-left: 270px;
}

.golfform button.btn1{
    margin-left: 370px;
}

/* Extends Webpage to See Background*/
.placeholder{
    height: 458px;
}

/* Extends Webpage to See Background*/
.vidplaceholder{
    height: 139px;
}

.ads{
    margin: auto;   
    width: 85%;
    padding: 50px;
}

.ads .row{
    padding-left: 70px;
}
    
.ads .row .col{
    float: left;
    width: 46%;
}

.slides{
    display: none;
}

.slides2{
    display: none;
}

.prev, .next {
    cursor: pointer;
}

.cbtn{
    text-align: center;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 33%;
    padding: 5px;
    margin-top: 10px;
}


/* Mobile Section */
@media screen and (max-width: 920px){
    /* Makes Background Fit Screen */
    .background{
        width: auto;
    }
    
    /* Sets Size of Nav Bar to Avoid Unwanted White Space on the Right Side */
    ul.topNav{
        width: 98.9%;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        padding-left: 0px;
        margin: 0px;
    }
    
    /* Hides Nav Bar Options until Menu Button is Clicked */    
    ul.topNav li.home, ul.topNav li.dropdown, ul.topNav li.button, ul.topNav li.donatedropdown {display: none;}
    
    /* Menu Button Formatting */
    ul.topNav li.mobiledropdown{
        float: right; display: inline-block; margin: 0px; position: static;
    }
    
    /* Positions Nav Bar Options after Menu is Clicked */
    ul.topNav.mobile li.home, ul.topNav.mobile li.dropdown, ul.topNav.mobile li.button, ul.topNav.mobile li.donatedropdown, ul.topNav.mobile li.icon, ul.topNav.mobile li.mobiledropdown {float: none; display: block; margin: 0px; position: static;}
    
    /* Home Button Mobile */
    ul.topNav.mobile li.home a{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Button Mobile */
    ul.topNav.mobile li.button a{
        width: 100%;
    }
    
    /* Dropdown Lists Mobile */
    ul.topNav.mobile li.dropdown .dropcont, ul.topNav.mobile li.donatedropdown .donatedropcont{
        position: relative;
        text-align: center;
        margin: 0px;
    }
    
    ul.topNav.mobile li.dropdown .db, ul.topNav.mobile li.donatedropdown .donatedb{
        display: block;
        width: 100%;
        text-align: center;
        margin: 0px;
    }
    
    ul.topNav.mobile li.dropdown .dropcont a, ul.topNav.mobile li.donatedropdown .donatedropcont a{
        text-align: center;
        width: 100%;
        margin: 0px;
        padding-right: 12px;
    }
    
    ul.topNav.mobile a:hover, li.donatedropdown:hover .donatedb{
        margin: 0px;
    }
    
    /* Social Media Mobile */
    ul.topNav.mobile li.icon {
        float: none;
        display: inline-block;
        margin-top: 8px;
        padding-bottom: 10px;
        margin-right: 0px;
        position: relative;
        left: 20px;
        
    }
    
    ul.topNav.mobile li.icon .iconbackground{
        position: relative;
        
    }
    
    ul.topNav.mobile li.icon a {
        padding-bottom: 10px;
        margin-top: -8px;
        margin-right: 10px;
        margin-left: -10px;
        left: 4px;
        position: relative;
        
    }
    
    .fa-twitter-square{
        padding-left: 1px;
        position: relative;
    }
    
    .fa-facebook{
        padding-left: 0px;
        position: relative;
    }
    
    .fa-linkedin{
        padding-left: 0px;
    }
    
    /* Menu Button Before Click */
    ul.topNav li.mobiledropdown{
        float: left;
        display: block;     
    }

    ul.topNav li.mobiledropdown a, .mobiledb{
        display: block;
        color: white; 
        text-align: center;
        font-size: 18px;
    
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    
        margin: 0px;
    
        text-decoration: none;
        cursor: pointer;
    }

    ul.topNav li.mobiledropdown a:hover{
        background-color: #2d2d2d;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    
        margin: 0px;
    }
    
    ul.topNav li.mobiledropdown a p{
        margin: 0px;
    }
    
    /* Menu Button After Click */
    
    ul.topNav.mobile li.mobiledropdown a, .mobiledb{
        display: block;
        color: white; 
        text-align: center;
        font-size: 20px;
    
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    
        margin: 0px;
        
        width: 100%;
    
        text-decoration: none;
        cursor: pointer;
    }

    ul.topNav.mobile li.mobiledropdown a:hover{
        background-color: #2d2d2d;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    
        margin: 0px;
    }
    
    ul.topNav.mobile li.mobiledropdown a p{
        margin: 0px;
    }
    
    h2{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
    }
 
    /* Video Mobile */
    .row .c1{
        width: 3%;
    }
    
    .row .c2{
        float: none;
        width: 95%;
    }
    
    .row .c3{
        width: 3%;
    }
    
    /* Text Boxes Mobile */
    .about, .testimonials{
        border: 2.5px;
        border-style: solid;
        border-color: black;
    }
    
    .about h3, .testimonials h5{
        font-size: 30px;
    }
    
    .about h4{
        font-size: 20px;
        margin-bottom: 0px;
    }
    
    .about p, .about .centeredtext p{
        font-size: 15px;
        
    }
    
    /* Golf Signup Mobile*/
    .signup{   
        background-color: white;
        border: 5px;
        border-style: solid;
        border-color: black;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .signup h4{
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 35px;
    }

    /* Example Golf Signup Formatting */
    .golfform input{
        margin-left: 10px;
    }   

    .golfform label{
        padding-left: 20px;
    }   

    .golfform button.btn1{
        margin-left: 30px;
    }
}

@media screen and (max-width: 870px){
    ul.topNav{
        width: 98.8%;
    }
}

@media screen and (max-width: 790px){
    ul.topNav{
        width: 98.7%;
    }
}

@media screen and (max-width: 730px){
    ul.topNav{
        width: 98.6%;
    }
}

@media screen and (max-width: 680px){
    ul.topNav{
        width: 98.5%;
    }
}

@media screen and (max-width: 640px){
    ul.topNav{
        width: 98.4%;
    }
}

@media screen and (max-width: 600px){
    ul.topNav{
        width: 98.3%;
    }
}

@media screen and (max-width: 560px){
    ul.topNav{
        width: 98.2%;
    }
}

@media screen and (max-width: 530px){
    ul.topNav{
        width: 98.1%;
    }
}

@media screen and (max-width: 500px){
    ul.topNav{
        width: 98%;
    }
}

@media screen and (max-width: 475px){
    ul.topNav{
        width: 97.9%;
    }
}

@media screen and (max-width: 450px){
    ul.topNav{
        width: 97.8%;
    }
}

@media screen and (max-width: 430px){
    ul.topNav{
        width: 97.7%;
    }
}

@media screen and (max-width: 415px){
    ul.topNav{
        width: 97.6%;
    }
    
    .row .c2{
        width: 92%;
    }
    
    ul.topNav li.icon i{
        margin-top: -2.782px;
        margin-left: -1px;
        margin-right: -0.5px;
        margin-bottom: 0px;
        
        padding-top: 1px;
        
    }   
    
}

@media screen and (max-width: 400px){
    ul.topNav{
        width: 97.5%;
    }
}

@media screen and (max-width: 380px){
    ul.topNav{
        width: 97.4%;
    }
}

@media screen and (max-width: 360px){
    ul.topNav{
        width: 97.3%;
    }
}

@media screen and (max-width: 350px){
    ul.topNav{
        width: 97.2%;
    }
}

@media screen and (max-width: 340px){
    ul.topNav{
        width: 97.1%;
    }
}

@media screen and (max-width: 330px){
    ul.topNav{
        width: 97%;
    }
}

@media screen and (max-width: 315px){
    ul.topNav{
        width: 96.9%;
    }
}

@media screen and (max-width: 300px){
    ul.topNav{
        width: 96.8%;
    }
}