/*Fonts*/
@font-face
{font-family: Arial_server;
src: url(/Pages/Styles/Fonts/Arial_normal.woff) format(woff)}

@font-face
{font-family: Helvetica_server;
src: url(/Pages/Styles/Fonts/Helvetica.woff) format(woff)}

@font-face
{font-family: Sans_serif_server;
src: url(/Pages/Styles/Fonts/sans_serif.woff) format(woff)}

@font-face{
    font-family: Impact_server;
    src: url(../Styles/Fonts/impact.woff) format(woff);
}
@font-face{
    font-family: Haettenschweiler_server;
    src: url(../Styles/Fonts/Haettenschweiler.woff) format(woff);
}
@font-face{
    font-family: Arial_black_server;
    src: url(../Styles/Fonts/Arial_Black.woff) format(woff);
}
@font-face{
    font-family: Franklin_gothic_medium_server;
    src: url(../Styles/Fonts/Franklin_Gothic_Cond.woff) format(woff);
}
@font-face{
    font-family: Arial_narrow_server;
    src: url(../Styles/Fonts/Arial_narrow.woff) format(woff);
}
/*General rules for the page*/
body {
    background-image: url(../Images/Background.png);
    background-repeat: no-repeat;
    background-size: cover; 
    background-color: rgb(35, 34, 34);
    font-family: 'Arial_server', 'Helvetica_server', 'Sans_serif_server';
  
}
/*Rules for header - logo*/
.logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    Width: 30%;
    max-width: 200px;
    cursor: pointer;
}
/*Rules for header - Slogan*/
.logo p {
    color: black;
    font-weight: 600; 
    letter-spacing: 9px;
    word-spacing: 10px;
    text-align: center;
    font-size: 90%;
    padding: 0.8%;
    background-color: rgb(247, 222, 16);
    }
/*Rules for positioning top nav*/
.topnav{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
/*Styling of Navigation menu*/
.topnav a{
    display:inline-block;
    padding:1%;
    line-height: 30px;
    width: 11cap;
    margin: 8px;
    text-align: center;
    background-color: rgb(164,164,164);
    /*background-color: rgb(168,3, 3);*/
    font-size: 100%;
    font-weight: bolder;
    font-family: 'Franklin_gothic_medium_server', 'Arial_narrow_server', 'Arial_server', 'Sans_serif_server';
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
    /*color:white;*/
    text-decoration: none;
    border-radius: 0.2em;
    
}
/*Styling of Navigation menu on hover*/
.topnav a:hover{
    background-color: rgb(168,3, 3);
    /*background-color: rgb(247, 222, 16);*/
   color:  white;
   /* color: black;*/
    cursor: pointer;
}

/*Styling of Navigation menu when active*/
.topnav a:active{    
background-color: transparent;
    color:  white;}

/*Rules for positioning footer*/
footer {     
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        } 
/*Styling of links at footer - Back to top*/
footer a{
        text-decoration: none;
        color: white;
        text-align: center;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: 80%;
         }
/*Styling of footer - All rights reserved*/
.footer {  
    background-color: rgb(164,164,164
    );
    font-size: 80%;
    text-align: left;
    font-weight: bolder;
    letter-spacing: 3px;
    line-height: 250%;
    margin: 0;
    padding-left:20px;
    }
/*Styling of icon - social media icons*/
.footer img{
        display: inline-block;
        float:right;
        width:1.5%;
        padding-right:20px;
        padding-top: 5px;
        padding-bottom: 5px;
        cursor: pointer;
}

/*____________________________________________
______________________________________________
______________________________________________
Settings for smaller device e.g. mobile phones*/
@media only screen and (max-width: 480px) 
{.topnav a{
    width: 12cap;
    margin: 2px;
    font-size: 65%;
    letter-spacing: 2px;
}
/*Rules for header - Slogan*/
.logo p {
    letter-spacing: 1px;
    word-spacing: 1px;
    font-size: 70%;
}
/*Styling footer*/
 .footer {  
    font-size: 50%;
    letter-spacing: 2px;
}
/*Styling of icon - social media icons*/
.footer img{
    width:3%;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
 }
}