/****************************************/
    /* main page styling */
    /****************************************/
    
    #body {
        background-color: #FCF3CF;
		float: left;
		height: auto;
		position: static;
		width: 95%;
    }
     #container {
        height: auto;
		min-height: 1000px;
        margin: auto;
        position: static;
        width: 1000px;
    }
    #content {
       background: transparent;
        float: left;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-top: 10px;
        margin-right: 10px;
        width: 1000px;
    }
    #header {
        opacity: 1;
        filter: alpha(opacity=100);
        width: 100%;
		height: 200px;
        display: block;
        margin-top: 0px;
		margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        position: static;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
		background: url(/img/velo-header-background.png);
        background-repeat: no-repeat, repeat;
        background-position: center;
		height: auto;
    }
    #header:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    #footer {
		clear: left;    
        font-size: 16px;
        width: 100%;
		height: 200px;
        display: block;
        margin-top: 0px;
		margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
		background: url(/img/velo-header-background.png);
        background-repeat: no-repeat, repeat;
    }
    /****************************************/
    /* desktop navigation */
    /****************************************/
    
    #navbar {
        width: 100%;
        float: left;
        margin: 0px;
        padding: 0px;
        list-style: none;
        line-height: 250%;
    }
    #navbar ul li {
        float: left;
        opacity: 1;
        filter: alpha(opacity=100);
        display: inline;
        margin: 0px 4%;
    }
    #navbar ul li:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    /****************************************/
    /* remove desktop navigation on screens below 1000px */
    /****************************************/
    
    @media (max-width: 1000px) {
        .desktop-menu {
            display: none !important;
        }
    }
    /****************************************/
    /* remove mobile navigation on screens above 1000px */
    /****************************************/
    
    @media (min-width: 901px) {
        .mobile-menu {
            display: none;
        }
    }
	
	
	
    /****************************************/
    /* Footer navigation */
    /****************************************/
    
    #footernavbar {
        width: 100%;
        float: left;
        margin: 0px;
        padding: 0px;
        list-style: none;
        line-height: 250%;
    }
    #footernavbar ul li {
        float: left;
        opacity: 1;
        filter: alpha(opacity=100);
        display: inline;
        margin: 0px 10%;
    }
    #footernavbar ul li:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }	
	
	
	
	
    /****************************************/
    /* typography */
    /****************************************/
    
	@font-face {
    font-family: "Bauhaus 93 V2";
    src: url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.eot");
    src: url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/89d11a443c316da80dcb8f5e1f63c86e.svg#Bauhaus 93 V2")format("svg");
}

	ul.a {
		padding: none
	}
    h1 {
        Font-family: 'Bauhaus 93 V2', sans-serif;
		font-size: 26px;
        letter-spacing: 2px;
        color: #001345;
        margin: 20px auto 10px auto;
	}
    h2 {
        Font-family: 'Bauhaus 93 V2', sans-serif;
		font-size: 24px;
        letter-spacing: 2px;
        color: #001345;
        margin: 20px auto 10px auto;
    }
    h3 {
        Font-family: 'Bauhaus 93 V2', sans-serif;
		font-size: 20px;
        letter-spacing: 2px;
        color: #001345;
        margin: 20px auto 10px auto;
    }
	h4 {
        Font-family: 'Bauhaus 93 V2', sans-serif;
		font-size: 26px;
        letter-spacing: 2px;
        color: #001345;
        margin: 20px auto 10px auto;
    }
    p {
        width: 94%;
    }
    hr {
        border: 0;
        height: 1px;
		background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }
    /****************************************/
    /* text div styling */
    /****************************************/
    
    #text {
        float: left;
        height: auto;
        margin-left: 40px;
        position: static;
        width: 95%;
    }
    /****************************************/
    /*  product list styling */
    /****************************************/
    
    .product-list {
        overflow: hidden;
        width: 100%;
        margin-bottom: 10px;
        display: flex;
    }
    .product-image {
        width: 15%;
        float: left;
        margin-top: 10px;
        margin-bottom: auto;
    }
    .product-image:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    .product-description {
        width: 75%;
        float: left;
        margin-top: auto;
        margin-bottom: auto;
        font-weight: bold;
    }
    .product-picture {
        border: 1px solid black;
        width: 80%;
        margin-bottom: 10px;
    }
    /****************************************/
    /*  two column div styling */
    /****************************************/
    
    .dual-column {
        overflow: hidden;
        width: 94%;
        margin: 15px;
    }
    .left-column {
        width: 48%;
        float: left;
    }
    .right-column {
        width: 48%;
        float: left;
        margin-left: 10px;
    }
    .right-column-wide {
        width: 64%;
        float: left;
        margin-left: 10px;
    }
    .left-column-wide {
        width: 64%;
        float: left;
    }
    .right-column-small {
        width: 30%;
        float: left;
        margin-left: 10px;
    }
    .left-column-small {
        width: 30%;
        float: left;
    }
    /****************************************/
    /*  youtube iframe styling */
    /****************************************/
    
 /*    .youtube-video {
        position: static;
        padding-bottom: 56.25%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
    }
    .youtube-video iframe {
        position: static;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

*/

/****************************************/
/*  youtube iframe styling */
/****************************************/

.youtube-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 35px;
	height: 0;
	overflow: hidden;
}

.youtube-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




    /****************************************/
    /*  slideshow styling */
    /****************************************/
    
    #slideshow {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow1 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow1 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow2 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow2 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow3 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow3 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow4 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow4 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow5 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow5 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow6 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow6 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow7 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow7 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow8 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow8 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow9 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow9 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow10 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow10 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow11 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow11 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #slideshow12 {
        margin: auto;
        position: static;
        width: 600px;
        height: 460px;
    }
    #slideshow12 > div {
        position: static;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    /****************************************/
    /*  special class styling */
    /****************************************/
    
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
	.left {
		float: left;
	}
	.right {
		float: right;
	}
	.small {
        width: 35%;
        height: 35%;
    }    
	.medium {
        width: 55%;
        height: 55%;
    }
	.large {
        width: 75%;
        height: 75%;
    }
    .extra-large {
        width: 95%;
        height: 95%;
    }
    /****************************************/
    /*  link styling */
    /****************************************/
    
    #link {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    #link:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    a img {
        border: none;
    }
    a {
        text-decoration: none;
        color: #001345;
        background: transparent;
        font-weight: bold;
    }
    a:visited {
        text-decoration: none;
        color: #001345;
        background: transparent;
        font-weight normal;
    }
    a:hover {
        color: #001345;
        background: transparent;
        text-weight: bold;
        text-decoration: underline;
    }
    active {
        background: transparent;
        color: #cdcdcd;
        text-decoration: underline;
    }
    /****************************************/
    /*  buy now button styling */
    /****************************************/
    
    .buy-now {
        width: 20%;
    }
    .sale-buy-now {
        width: 30%;
        margin-left: -90px;
    }
    /****************************************/
    /*  demo code page styling */
    /****************************************/
    
    .demo {
        background-color: silver;
        border: 1px #000;
    }
    /****************************************/
    /* contact form styling */
    /****************************************/
    
    .bootstrap-frm {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        padding: 10px;
        font: 16px bauhaus93, Helvetica, Arial, sans-serif;
        color: #888;
    }
    .bootstrap-frm label {
        display: block;
        margin: 0px 0px 5px;
    }
    .bootstrap-frm label>span {
        float: left;
        width: 20%;
        text-align: right;
        padding-right: 10px;
        margin-top: 10px;
        font: 20px bauhaus93, Verdana, sans-serif;
        letter-spacing: 2px;
        color: #001345;
    }
    .bootstrap-frm input[type="text"],
    .bootstrap-frm input[type="email"],
    .bootstrap-frm textarea,
    .bootstrap-frm select {
        border: 1px solid #CCC;
        color: #888;
        height: 20px;
        line-height: 15px;
        margin-bottom: 16px;
        margin-right: 6px;
        margin-top: 2px;
        outline: 0 none;
        padding: 5px 0px 5px 5px;
        width: 70%;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }
    .bootstrap-frm select {
        background: #FFF url('down-arrow.png') no-repeat right;
        background: #FFF url('down-arrow.png') no-repeat right;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
        width: 70%;
        height: 35px;
        line-height: 15px;
    }
    .bootstrap-frm textarea {
        height: 100px;
        padding: 5px 0px 0px 5px;
        width: 70%;
    }
    .bootstrap-frm .button {
        background: #FFF;
        border: 1px solid #CCC;
        padding: 10px 25px 10px 25px;
        color: #333;
        border-radius: 4px;
    }
    .bootstrap-frm .button:hover {
        color: #333;
        background-color: #EBEBEB;
        border-color: #ADADAD;
    }