<style>

* {margin: 0; padding: 0;}

@font-face {
    font-family: "Majesti-Banner";
    src: url("fonts/Majesti-Banner-Bold.otf");
    src: url("fonts/Majesti-Banner-BoldItalic.otf");
    src: url("fonts/Majesti-Banner-Book.otf");
    src: url("fonts/Majesti-Banner-BookItalic.otf");
    src: url("fonts/Majesti-Banner-Heavy.otf");
    src: url("fonts/Majesti-Banner-HeavyItalic.otf");
    src: url("fonts/Majesti-Banner-Light.otf");
    src: url("fonts/Majesti-Banner-Medium.otf");
    src: url("fonts/Majesti-Banner-MediumItalic.otf");
}

#container {
    width: auto;
    /*border: 25px solid green;*/
    padding: 25px;
    margin: auto;
    overflow: hidden;
}

#logo {
    width: auto;
    /*border: 25px solid green;*/
    padding: 25px;
    margin: auto;
    text-align: center;
}

/*
#nav {
    width 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
}
*/

#nav ul {
    /*
    border: 1px solid#ccc;
    border-width: 1px 0;
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align:center;
    */
    
    display: table; /*make the ul behave like a table*/
    border-collapse: collapse; /*Collapse touching borders*/
    width: 100%; /*Make it full-width*/
    margin: 0 0 20px; /* Some bottom margin also resets browser default margin for ul in case there isn't already a reset for that*/
    padding: 0; /* Remove any browser default padding */
    list-style:none; /*No list bullets */
    
}

#nav ul li {
    /*display: inline;*/
    /*float: left;*/
    
    display:table-cell; /* Make the li elements behave like table cells */
    width:1%; /* By giving them a small width they will magically be stretched to fill the width of the table */
    border:1px solid #ddd;
    background:#d7e4c2;
    vertical-align:middle; /* Vertically center their content */
    text-align:center; /* Horizontally center their content */
}

#nav ul li a {
    /*display: inline-block;*/
    display block;
    padding: 10px;
    /*padding: 8px 15px;*/
    text-decoration: none;
    font-weight: bold;
    color: #be1e2d;
    /*border-right: 1px solid #ccc;*/
}

/*
#nav ul li:first-child a {
    border-left: 1px solid #ccc;
}
*/

#nav ul li a:hover {
    color: #c00;
    background-color: #8a8c8f;
}

/*Row*/
#MainHeading::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



#col-1 Symbol1 {
    border: 3px solid green;
    max-height: 100px;
    max-width: 100px;
}

#col-10 H1Center {
    /*margin: auto;*/
    /*align-items:center;*/
    height: auto;
    border: 3px solid green;
    margin-left: 1200px;
    margin-top:1200px;
}

#HighEnd {
    font-family: "Majesti-Banner";
}

#HighEnd {
    align-self: center;
}


#col-2 Symbol2 {
    border: 3px solid green;
    max-height: 100px;
    max-width: 100px;
}

.ScrollingBanner {
    height: 640px;
    width: 3550px;
    margin-bottom: 80px;
}

.first {
	-webkit-animation: bannermove 30s linear infinite;
	   -moz-animation: bannermove 30s linear infinite;
	    -ms-animation: bannermove 30s linear infinite;
	     -o-animation: bannermove 30s linear infinite;
	        animation: bannermove 30s linear infinite;
}
 
/*Keyframe animations*/
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}

.ScrollingBanner {
	height: 233px;
	width: 3550px;
	margin-bottom: 80px;
}
 
.ScrollingBanner img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
 
.ScrollingBanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
 
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}





</style>