body {    
    margin: 0;
    padding: 0;
    font-size: 16px;
    background-color: #8B3324;    
}

#background {
    background-color: #8B3324;

}

@font-face {
    font-family: 'cambria';
    src:url('fonts/Cambria.ttf')
        local('Cambria.ttf')
        format('truetype');
        
}

@font-face {
    font-family: 'cambria';
    src:url('fonts/Cambria Bold.ttf')
        local('Cambria Bold.ttf')
        format('truetype');
    font-weight: bold;
}

h1 {
    text-align: center;
    font-family: 'cambria';
    font-weight: bold;
    color: #8B3324;
}

h2 {
    
    font-family: 'cambria';
    font-weight: bold;
    padding:20px;
    color: #8B3324;

}

h3 {
    
    font-family: 'cambria';
    font-weight: bold;
    font-size: 1.5em;
    color: #8B3324;
    
}

p {
    
    font-family: 'cambria';
    padding:20px;
    
}

a {
    
    font-family: 'cambria';
    font-size: 1em;
}

.btn {
    
    background-color: #8B3324;
    color: #E5E7E6;
}

.btn:hover {
    background-color: rgba(79, 184, 72, 1);
    color: #E5E7E6;
}

#footer{
    
    text-align: center;
    background: transparent;
    color: #E5E7E6;
    bottom:0;
    width: 100%;
    padding-top: 50px;
    
    
}
.img-responsive{
    background: transparent;
    border-color: transparent;
    width: auto;
    height: 300px;
    max-width: 400px;
    display: inline-block;

}
.thumbnail:hover,
.thumbnail:focus{
    position:relative;
    top:-25px;
    left:-35px;
    width:400px;
    height:auto;
    display:block;
    z-index:99;
}

#content{
    background-color: #E5E7E6;
    color: #8B3324;
    width: 80%;
    margin: 0 auto;
}

   #custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: #8B3324;
    background: transparent;
   
    
}

/*start of media queries*/
@media all and (min-width: 960px) {
    body{
        font-size: 20px;
        
    }
  
    
    #custom-bootstrap-menu{
        max-height: 100px;
       
    }
    
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
   
    body{
        font-size: 16px;



    }
 
#custom-bootstrap-menu{
    max-height: 320px;
    
    
   
    }

}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    body{
        font-size: 14px; 

    }
    

 #custom-bootstrap-menu{
        max-height: 450px;
       
    }
    
    
}
/*end of media queries*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #8B3324;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add the green color */
input[type=submit]:hover {
    background-color: rgba(79, 184, 72, 1);
}

/* Add a background color and some padding around the form */
.container {
    background-color: #E5E7E6;
    padding: 20px;
    border-radius: 20px;
}

/* This code is for the navbar*/

#custom-bootstrap-menu{
    display: inline-block; 
    background: transparent;
   
    }

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: #8B3324;
    
}
#custom-bootstrap-menu.navbar-default {
    font-size: 1em;
    border-color: transparent;
    position: fixed;
    width: 100%;
    z-index: 999;
    
}

 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(79, 184, 72, 1);
    background-color: #E5E7E6;
   
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(62, 156, 58, 1);
    background-color: rgba(231, 231, 231, 0.73);
    background: -webkit-linear-gradient(top, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 0.73) 100%);
    background: linear-gradient(to bottom, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 0.73) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: transparent;

}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #E5E7E6;
    
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #8B3324;
    min-width: 28px;
    
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #8B3324;
    
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-width: 0px;
}