h1{
            text-align:center;
            font-family: Helvetica, sans-serif;
            font-size:35px;
            font-weight:bolder;
            color:#621708;
            }
            
    h2{  text-align:center;
            font-family: Helvetica, sans-serif;
            font-size:30px;
            font-weight:bolder;
            color:#bc3908;    
            }
            
    h3{   text-align:center;
            font-family: Helvetica, sans-serif;
            font-size:25px;
            font-weight:bolder;
            color:#f6aa1c; }
   
   /* contact details on contact page */
    .contactinfo {
            text-align:center;
            font-family: Helvetica, sans-serif;
            font-size:15px;
            }
            
   /*logo in navigation bar*/
    .logo {
       padding-left: 20px;
       float:left;
    
    /*navigation bar*/    
    }
    .navigation-bar {
        width: 100%;  
        height: 125px; 
        background-color: #941b0c;
        
    }
    
    .navigation-bar ul {
        text-align: right;
        padding:0;
        margin:0;
        font-size:100%;
        list-style-type: none;
    }
    
    .navigation-bar li {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
    height: 80px;        /* if you want it to take the full height of the bar */
    line-height: 100px;
    font-family:helvetica, sans-serif;
    font-weight:bold;
    }
    
     .navigation-bar a:link {
    color:white;
    text-decoration: none; }
    
    /*end of navigation bar*/
                
    /* When the link is hovered on, its color will change */
    .navigation-bar li a:hover {
    color: #f6aa1c; /*mustard yellow*/
    }
            
    /* When the link is clicked, its color will temporaily change to indicate it has been actively clicked*/
    .navigation-bar li a:active {
    background-color:#f6aa1c; /*mustard yellow*/
    color: white;
    }
            
    /* After the link has been visited, its color will not change */
    .navigation-bar a:visited {
    color:white;
    text-decoration: none;
    }
    
    /* Container holding the header image and the text on home page */
    .container {
    position: relative;
    text-align: center;
    color: white;
    }
    
        /* Centered text */
    .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:auto;
    font-size: 60px;
    font-family: helvetica, sans-serif;
    font-weight: bold; 
    }
    
    /*styling of all paragraphs*/
    .paragraph {
    font-family: helvetica, sans-serif;
    line-height:150%;
    margin-left:50px;
    margin-right:50px;
    margin-bottom:50px;
    }
    
    /*profile pictures on contact page*/
    .profilepicture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
     }
     
     /*slideshow image gallery*/ 
        * {box-sizing:border-box}
       
       /* Slideshow container */
       .slideshow-container {
         max-width: 1000px;
         position: relative;
         padding-top: 50px;
         margin: auto;
       }
       
       /* Hide the images by default */
       .mySlides {
         display: none;
       }
       
       /* Next & previous buttons */
       .prev, .next {
         cursor: pointer;
         position: absolute;
         top: 50%;
         width: auto;
         margin-top: -22px;
         padding: 16px;
         color: white;
         font-weight: bold;
         font-size: 18px;
         transition: 0.6s ease;
         border-radius: 0 3px 3px 0;
         user-select: none;
       }
       
       /* Position the "next button" to the right */
       .next {
         right: 0;
         border-radius: 3px 0 0 3px;
       }
       
       /* On hover, add a black background color with a little bit see-through */
       .prev:hover, .next:hover {
         background-color: rgba(0,0,0,0.8);
       }
       
        /* Caption text 
       .text {
         color: #f2f2f2;
         font-size: 15px;
         padding: 8px 12px;
         position: absolute;
         bottom: 8px;
         width: 100%;
         text-align: center;
       } */
       
       /* Number text (1/10 etc) */
       .numbertext {
         color: #f2f2f2;
         font-size: 12px;
         padding: 8px 12px;
         position: absolute;
         top: 0;
       }
       
       /* The dots/bullets/indicators */
       .dot {
         cursor: pointer;
         height: 15px;
         width: 15px;
         margin: 0 2px;
         background-color: #bbb;
         border-radius: 50%;
         display: inline-block;
         transition: background-color 0.6s ease;
       }
       
       .active, .dot:hover {
         background-color: #717171;
       }
       
       /* Fading animation */
       .fade {
         -webkit-animation-name: fade;
         -webkit-animation-duration: 1.5s;
         animation-name: fade;
         animation-duration: 1.5s;
       }
       
       @-webkit-keyframes fade {
         from {opacity: .4}
         to {opacity: 1}
       }
       
       @keyframes fade {
         from {opacity: .4}
         to {opacity: 1}
       }
       
       /*plain footer to indicate end of page*/ 
       footer {
        width: 100%;  
        height: 50px; 
        background-color: #941b0c;
        clear:both; 
       }