html{margin: 0; padding: 0; height: 100%; -webkit-text-size-adjust: 100%;}
body{margin: 0; padding: 0; height: 100%; background-color: #000000; text-align: center; padding-top: 300px;}

.background-div{display: block; position: fixed; top: 0px; left: 0px; margin: 0px; padding: 0px; z-index: -1; height: 100%; width: 100%; background: url("../images/stripes.jpg");}

a:link{color: #353535; text-decoration: underline;}
a:visited{color: #353535; text-decoration: underline;}
a:hover{color: #CE0035; text-decoration: underline;}
a:active{color: #FFFFFF; text-decoration: underline;}

@font-face{font-family: junction; src: url(junction-regular.woff);}
@font-face{font-family: felipa; src: url(felipa.woff);}
@font-face{font-family: alexbrush; src: url(alexbrush.woff);}
@font-face{font-family: caviar; src: url(caviardreams.woff);}
@font-face{font-family: caviar; src: url(caviardreamsbold.woff); font-weight: bold;}
@font-face{font-family: elite; src: url(specialelite.woff);}

.header-container-on{display: block; position: fixed; top: 0px; width: 100%; padding: 0px; margin: 0px; background-color: #00FF00; transition: all 0.3s ease;}

.header-container-off{display: block; position: fixed; top: -185px; width: 100%; padding: 0px; margin: 0px; background-color: #00FF00; transition: all 0.3s ease;}

.header{display: block; margin-left: auto; margin-right: auto; text-align: center; height: 165px; border: 0px #FF0000 solid; width: 100%; background-image: linear-gradient(to bottom, #FFFFFF, #A0A0A0, #F0F0F0); padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px;}

.header-termination-bar{display: block; width: 100%; padding: 0px; height: 10px; background-image: linear-gradient(to bottom, #FFFFFF, #A0A0A0, #000000); margin: 0px;}

.left-header-div{display: inline-block; width: 200px;}
.middle-header-div{display: inline-block; vertical-align: top;}
.right-header-div{display: inline-block; width: 200px;}

.bb-code{background: url('../images/code.png') center no-repeat; background-size: 80px 80px;}
.bb-inet{background: url('../images/internet.png') center no-repeat; background-size: 80px 80px;}

.box-blank{display: inline-block; height: 80px; width: 80px; background-color: #F0F0F0; color: #F0F0F0; line-height: 80px; margin: 0;}

.orange-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #F09300; color: #FFFFFF; font-size: 28pt; transition: all 0.4s ease; margin: 0;}

.red-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #FF0000; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.blue-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #006BB5; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.green-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #00C017; color: #FFFFFF; font-size: 15pt; transition: all 0.4s ease; margin: 0;}


.brown-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #6C3A24; color: #FFFFFF; font-size: 22pt; transition: all 0.4s ease; margin: 0;}


.yellow-t{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #F6D000; color: #FFFFFF; font-size: 20pt; transition: all 0.4s ease; margin: 0;}




.orange{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #F09300; color: #FFFFFF; font-size: 28pt; transition: all 0.4s ease; margin: 0;}

.red{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #FF0000; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.blue{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #006BB5; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.green{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #00C017; color: #FFFFFF; font-size: 15pt; transition: all 0.4s ease; margin: 0;}


.brown{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #6C3A24; color: #FFFFFF; font-size: 22pt; transition: all 0.4s ease; margin: 0;}


.yellow{display: inline-block; height: 80px; width: 80px; line-height: 80px; background-color: #F6D000; color: #FFFFFF; font-size: 20pt; transition: all 0.4s ease; margin: 0;}

.circle{display: inline-block; margin-left: auto; margin-top: 5px; margin-right: auto; border: 5px #006BB5 solid; background-color: #FFFFFF; color: #FF0000; font-family: Verdana; font-size: 18pt; height: 140px; width: 140px; border-radius: 140px; text-align: center; line-height: 30px;}

.circle-inner{margin-top: 15px;}

.icon-div{display: block; margin-left: auto; margin-right: auto; text-align: center; opacity: 0; transition: all 1s linear;}

.large-orange-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #F09300; box-shadow: 0px 0px 5px 10px #F09300; text-align: center; opacity: 0; transition: all 1s linear;}

.large-red-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #FF0000; box-shadow: 0px 0px 5px 10px #FF0000; text-align: center; opacity: 0; transition: all 1s linear;}

.large-blue-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #006BB5; box-shadow: 0px 0px 5px 10px #006BB5; text-align: center; opacity: 0; transition: all 1s linear;}

.large-green-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #00C017; box-shadow: 0px 0px 5px 10px #00C017; text-align: center; opacity: 0; transition: all 1s linear;}

.large-brown-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #6C3A24; box-shadow: 0px 0px 5px 10px #6C3A24; text-align: center; opacity: 0; transition: all 1s linear;}

.large-yellow-div{display: inline-block; margin-top: 200px; margin-bottom: 200px; margin-left: auto; margin-right: auto; padding: 10px; width: 85%; min-height: 300px; background-color: #F6D000; box-shadow: 0px 0px 5px 10px #F6D000; text-align: center; opacity: 0; transition: all 1s linear;}

.top-text{display: block; margin-left: auto; margin-right: auto; color: #FFFFFF; font-family: Arial; font-size: 14pt; text-align: left; margin-top: 100px; margin-bottom: 300px; min-width: 40%; max-width: 80%; line-height: 40px; background-color: #1D1D1D; padding: 20px; border-radius: 20px;}

.white-text-box{display: inline-block; min-height: 200px; max-width: 60%; min-width: 50%; text-align: left; padding: 0px; line-height: 30px; font-size: 16pt; vertical-align: top; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-left: 20px; padding-right: 20px; margin-top: 50px; margin-bottom: 50px; background-image: linear-gradient(to bottom, #F0F0F0, #A0A0A0);}

.headline{font-family: elite;}

.large-box-div{display: block; margin-left: auto; margin-right: auto; padding: 0px; min-height: 300px; width: 100%;}

.inside-descriptive-text{display: block; width: 100%; padding: 10px; font-size: 12pt; color: #000000; font-family: Georgia; text-align: left; line-height: 24px; margin: 0px;}

.read-more-div{text-align: right; max-width: 90%; display: inline-block; font-weight: bold; font-family: elite; cursor: pointer; margin-top: 20px; margin-right: 20px; float: right; margin-bottom: 20px;}

.small-flexbox{display: inline-block; width: 80%; font-size: 10pt; font-family: Verdana; color: #000000; background-color: #FFFFFF; text-align: left; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 10px; border-radius: 10px; border: 1px #000000 solid;}

.port-img{max-width: 240px; width: 90%; border-radius: 5px; border: 0px; margin: 4px; display: inline-block;}

.mobile-menu-button{display: none; z-index: -1; opacity: 0; visibility: hidden;}

.mobile-menu-overlay-off,.mobile-menu-overlay-on,.mobile-menu-on,.mobile-menu-off{display: none;}

.desktop-menu{display: block; top: 185px; height: 40px; width: 90%; position: fixed; margin: 0px; padding: 0px; left: 50%; transform: translate(-50%,0); text-align: center; opacity: 0.7; z-index: 2; transition: all 0.3s ease;}

.desktop-menu-top{display: block; top: 0px; height: 40px; width: 90%; position: fixed; margin: 0px; padding: 0px; left: 50%; transform: translate(-50%,0); text-align: center; opacity: 0.7; z-index: 2; transition: all 0.3s ease;}

.desktop-menu-overlay{display: block; top: 185px; height: 40px; width: 90%; position: fixed; margin: 0px; padding: 0px; left: 50%; transform: translate(-50%,0); text-align: center; opacity: 1; z-index: 3; transition: all 0.3s ease;}

.desktop-menu-overlay-top{display: block; top: 0px; height: 40px; width: 90%; position: fixed; margin: 0px; padding: 0px; left: 50%; transform: translate(-50%,0); text-align: center; opacity: 1; z-index: 3; transition: all 0.3s ease;}

.desktop-menu-block{display: inline-block; height: 40px; min-width: 150px; width: 15%; text-align: center; margin: 0px; padding: 0px; margin-left: 4px; margin-right: 4px;}

.desktop-menu-link{display: inline-block; height: 40px; min-width: 150px; width: 15%; text-align: center; margin: 0px; padding: 0px; margin-left: 4px; margin-right: 4px; text-align: center; line-height: 40px;}

.desktop-menu-overlay a:link,.desktop-menu-overlay-top a:link{color: #FFFFFF; font-family: Arial; font-weight: bold; text-decoration: none; font-size: 14pt;}
.desktop-menu-overlay a:hover,.desktop-menu-overlay-top a:hover{text-decoration: underline;}

.top-button-on{display: block; position: fixed; right: 10px; bottom: 40px; height: 40px; width: 40px; margin: 0px; padding: 0px; text-align: center; background: url('../images/top_arrow.gif') center center no-repeat; z-index: 2; cursor: pointer; visibility: visible; transition: all 0.3s ease; border-radius: 40px; line-height: 40px;}

.top-button-on:hover{border-radius: 40px; transition: all 0.3s ease; transform: rotate(360deg);}

.top-button-off{display: block; position: fixed; right: -100px; bottom: 40px; height: 40px; width: 40px; margin: 0px; padding: 0px; text-align: center; background: url('../images/top_arrow.gif') center center no-repeat; z-index: 2; visibility: hidden; transition: all 0.3s ease;}

.numbers{display: inline-block; padding: 3px; height: 20px; width: 20px; margin: 0px; line-height: 20px; font-family: elite; font-size: 16pt; border: 1px #CE0035 solid; border-radius: 30px; text-align: center; margin-right: 5px;}

.back-bar{display: block; width: 200px; height: 50px; background-color: #FFFFFF; font-family: Arial; font-size: 20pt; font-weight: bold; text-align: center; margin-left: auto; margin-right: auto; padding: 5px; line-height: 50px; border-radius: 20px; box-shadow: 0px 0px 10px 2px #000000;}

@media screen and (max-width: 800px){

html{-webkit-text-size-adjust: 100%;}
body{padding-top: 100px;}

.header-container-on{display: block; position: fixed; top: 0px; width: 100%; padding: 0px; margin: 0px; background-color: #00FF00; transition: all 0.3s ease;}

.header-container-off{display: block; position: fixed; top: -105px; width: 100%; padding: 0px; margin: 0px; background-color: #00FF00; transition: all 0.3s ease;}

.header{display: block; margin-left: auto; margin-right: auto; text-align: center; height: 85px; border: 0px #000000 solid; width: 100%; background-image: linear-gradient(to bottom, #FFFFFF, #A0A0A0, #F0F0F0); padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px;}

.header-termination-bar{display: block; width: 100%; padding: 0px; height: 10px; background-image: linear-gradient(to bottom, #FFFFFF, #A0A0A0, #000000); margin: 0px;}


.left-header-div{display: inline-block; width: 90px;}
.middle-header-div{display: inline-block; vertical-align: top;}
.right-header-div{display: inline-block; width: 90px;}

.bb-code{background: url('../images/code.png') center no-repeat; background-size: 40px 40px;}
.bb-inet{background: url('../images/internet.png') center no-repeat; background-size: 40px 40px;}

.box-blank{display: inline-block; height: 40px; width: 40px; background-color: #F0F0F0; color: #F0F0F0; line-height: 20px; margin: 0;}

.orange-t{display: inline-block; height: 40px; width: 40px; line-height: 20px; background-color: #F09300; color: #FFFFFF; font-size: 28pt; transition: all 0.4s ease; margin: 0;}

.red-t{display: inline-block; height: 40px; width: 40px; line-height: 20px; background-color: #FF0000; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.blue-t{display: inline-block; height: 40px; width: 40px; line-height: 20px; background-color: #006BB5; color: #FFFFFF; font-size: 24pt; transition: all 0.4s ease; margin: 0;}


.green-t{display: inline-block; height: 40px; width: 40px; line-height: 20px; background-color: #00C017; color: #FFFFFF; font-size: 15pt; transition: all 0.4s ease; margin: 0;}


.brown-t{display: inline-block; height: 40px; width: 40px; line-height: 20px; background-color: #6C3A24; color: #FFFFFF; font-size: 22pt; transition: all 0.4s ease; margin: 0;}


.yellow-t{display: inline-block; height: 40px; width: 40px; line-height: 40px; background-color: #F6D000; color: #FFFFFF; font-size: 20pt; transition: all 0.4s ease; margin: 0;}

.circle{display: inline-block; margin-left: auto; margin-top: 0px; margin-right: auto; border: 3px #006BB5 solid; background-color: #FFFFFF; color: #FF0000; font-family: Verdana; font-size: 11pt; height: 80px; width: 80px; border-radius: 80px; text-align: center; line-height: 18px;}

.circle-inner{margin-top: 8px;}

.mobile-menu-button{display: block; background: url('../images/mobile-menu-button.gif') center no-repeat; width: 40px; height: 50px; position: fixed; top: 110px; left: 5px; padding: 0px; margin: 0px; opacity: 1; visibility: visible; z-index: 1; transition: all 0.3s ease;}

.mobile-menu-button-top{display: block; background: url('../images/mobile-menu-button.gif') center no-repeat; width: 40px; height: 50px; position: fixed; top: 5px; left: 5px; padding: 0px; margin: 0px; opacity: 1; visibility: visible; z-index: 1; transition: all 0.3s ease;}

.mobile-menu-off{display: block; position: fixed; width: 0px; height: 0px; z-index: -1; left: 0px; top: 0px; padding: 0px; margin: 0px; opacity: 0; transition: all 0.5s ease; visibility: hidden;}

.mobile-menu-on{display: block; position: fixed; width: 300px; height: 360px; z-index: 2; left: 0px; top: 0px; padding: 0px; margin: 0px; opacity: 0.9; transition: all 0.5s ease; visibility: visible;}

.mobile-menu-close-button{display: block; right: -50px; top: 0px; width: 50px; height: 50px; background-color: #A0A0A0; position: absolute;}

.mobile-menu-close-button-overlay{display: block; right: -50px; top: 0px; width: 50px; height: 50px; font-family: Arial; font-size: 30pt; line-height: 50px; color: #FFFFFF; font-weight: bold; text-align: center; position: absolute; cursor: pointer;}

.mobile-menu-block{display: block; height: 60px; width: 100%; padding: 0px; margin: 0px;}

.mobile-menu-link{display: block; height: 60px; width: 100%; padding: 0px; margin: 0px; font-family: Arial; font-size: 16pt; font-weight: bold; line-height: 60px;}

.mobile-menu-overlay-off{display: block; position: fixed; width: 0px; height: 0px; z-index: -1; left: 0px; top: 0px; padding: 0px; margin: 0px; opacity: 0; transition: all 0.5s ease; visibility: hidden;}

.mobile-menu-overlay-on{display: block; position: fixed; width: 300px; height: 360px; z-index: 3; left: 0px; top: 0px; padding: 0px; margin: 0px; opacity: 1; transition: all 0.5s ease; visibility: visible;}

.mobile-menu-overlay-on a:link,.mobile-menu-overlay-off a:link{color: #FFFFFF; text-decoration: none;}

.desktop-menu,.desktop-menu-overlay,.desktop-menu-top,.desktop-menu-overlay-top{display: none;}

.top-button-on{display: block; position: fixed; right: 10px; bottom: 40px; height: 40px; width: 40px; margin: 0px; padding: 0px; text-align: center; background: url('../images/top_arrow.gif') center center no-repeat; z-index: 2; cursor: pointer; visibility: visible; transition: all 0.3s ease;}

.top-button-off{display: block; position: fixed; right: -100px; bottom: 40px; height: 40px; width: 40px; margin: 0px; padding: 0px; text-align: center; background: url('../images/top_arrow.gif') center center no-repeat; z-index: 2; visibility: hidden; transition: all 0.3s ease;}

}