@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
	margin:0;
	padding:0;
	background-color:#B7B7B7;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#slideshow {
	float:right;
	width: 300px;
	height: 360px;
    margin:  10px;
}

#myslides {
	width: 300px;
	height: 310px;
    margin:  0px;
}

#myslides img {
    padding: 0px;
    height: 300px;
	height: 300px;
	top:0;
	right:0;
    margin:auto;
}

h1{
color:#003399;
}

input{
	width:500px;
}

textarea{
	width:500px;
}
#wrapper{
	height:auto !important;
	height:100%;
}

.logo{
	width:316px;
	margin-top:10px;
	margin-left:350px;
}

#headerbkg {
	background:url(images/header-background.png) repeat-x;
	width: 100%;
	height:165px;
}

#headercontent{
	width:1000px;
	margin:auto;
	position:relative;
}

#header-contact{
	width:200px;
	text-align:right;
	color:#ffcc00;
	position:absolute;
	right:0;
	top:60px;
	font-size:20px;
}
#header-contact a{color:#ffcc00;}

#menubkg{
	background:url(images/menu-background.png) no-repeat;
	width:1010px;
	height:49px;
	margin:auto;
	margin-top:10px;
}

#menubkg .menu-item{
	float:left;
	padding-right:10px;
	padding-left:10px;
	height:28px;
	_height:35px;
	padding-top:20px;
}

#header {
	background-image: url(images/background-top.png);
	width: 1000px;
	height:175px;
	padding-top:14px;
	padding-left:15px;
	padding-right:15px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
}

#menu {
	background-color: #F00000;
	height: 35px;
	width: 1001px;
	text-align:center;
}

#item{
	margin:auto;
	width:820px;
}

.menu-item{
	float:left;
	padding-right:10px;
	padding-left:10px;
	height:28px;
	_height:35px;
	padding-top:5px;
	border: 0px ridge #BF0000;
}

.menu-item a{
	text-decoration:none;
	font-weight:bold;
	color:#ffcc00;
}

#middle {
	background-image: url(images/background-middle.png);
	background-repeat: repeat-y;
	background-size: 100%;
	width: 1030px;
	margin-left:auto;
	margin-right:auto;
	padding: 20px 50px;
}

#footer {
	background: url(images/background-bottom.png) no-repeat;
	background-size: 100%;
	height: 32px;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	text-align:right;
	font-size:10px;
	padding-top:30px;
	padding-right:30px;
}



#container {
	min-height: 100%;
	height:100%;
	width:400px;
	background-color:#CCCCCC;
}

.clear{
	clear:both;
}

.left{
	float:left;
}
.leftsmall{
	float:left;
	width:40%;
}
.leftbig{
	float:left;
	width:60%;
}
.right{
	float:right;
}	
.rightsmall{
	float:right;
	width:40%;
}
.rightbig{
	float:right;
	width:60%;
}
.densvendfeatures{
	list-style:url(images/bullet_tick.gif);
}

#features{
	width:350px;
	margin:auto;
	text-align:left;
}

a img {
	border:none;
}

#scrollingText {
    border: 0px solid #CCCCCC;
    height: 50px;
    position: relative;
    width: 100%;
}

#scrollingText div.scrollableArea *{
		display: block;
		float: left;
		margin: 0;
		padding:20px;
		font-family: Times, 'Times New Roman', Georgia, Serif; 
		font-size:18px; 
		font-weight: bold;
		font-style:italic; 
		background-color: #fff; 
		color: #BF0000; 
		white-space: nowrap;
}

.highlight{font-size:larger; text-align:center; font-weight:bold;}

.icon-container{position:relative; width:60%;}
.icon-container .icons:nth-child(odd){width:45%; display:inline-block; float:left; margin-right:5%; text-align:center; font-weight:bold;}
.icon-container .icons:nth-child(even){width:45%; display:inline-block; float:left; margin-left:5%; text-align:center; font-weight:bold;}


/* =========================================================
   Responsive / Mobile styles
   Keeps the existing desktop design intact.
   ========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Main page width becomes fluid on smaller screens */
#middle {
    box-sizing: border-box;
}

/* Prevent fixed-width form fields from overflowing */
input,
textarea {
    box-sizing: border-box;
    max-width: 100%;
}

/* Tablet and mobile */
@media screen and (max-width: 1199px) {

    #headercontent {
        width: 100%;
        box-sizing: border-box;
        padding: 0 calc(10% + 7.5px);
		text-align:center;
    }

    .logo {
        margin-left: 0;
        width: 284px;
        max-width: 70%;
        height: auto;
    }

    #header-contact {
        right: calc(10% + 7.5px);
    }

    #menubkg {
        width: calc(80% - 15px);
        height: auto;
        min-height: 49px;
        background-repeat: repeat-x;
		background-size: 100% 49px;
        box-sizing: border-box;
    }

    #item {
        width: 100%;
        text-align: center;
    }

    #menubkg .menu-item {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    #middle {
        width: 80%;
        max-width: 80%;
        padding: 20px 30px;
    }

    #footer {
        width: 80%;
        height: auto;
        min-height: 32px;
        box-sizing: border-box;
        padding: 20px 20px 20px 70px;
    }
}

/* Phones */
@media screen and (max-width: 700px) {

    body {
        font-size: 16px;
        line-height: 1.5;
    }

    #headerbkg {
        height: auto;
        min-height: 150px;
        padding-bottom: 0px;
    }

    #headercontent {
        padding: 10px 15px 0;
        text-align: center;
    }

    .logo {
        display: block;
        width: 284px;
        max-width: 50%;
        margin: 0 auto 10px;
    }

    #header-contact {
        position: static;
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin: 5px 0 5px;
    }

    #menubkg {
		width:100%;
        margin-top: 5px;
        min-height: 0;
        background-image: none;
        background-color: #BF0000;
    }

    #item {
        width: 100%;
        padding: 5px 0;
    }

    #menubkg .menu-item {
        display: block;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 9px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    #menubkg .menu-item:last-child {
        border-bottom: 0;
    }

    #menubkg .menu-item a {
        display: block;
        padding: 2px 0;
        font-size: 16px;
    }

    #middle {
        width: 100%;
		max-width:100%;
        padding: 15px 5vw;
        box-sizing: border-box;
        background-image: none;
        background-color: #fff;
    }

    #slideshow {
        float: none;
        width: 100%;
        height: auto;
        margin: 0 auto 15px;
        text-align: center;
    }

    #myslides {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 0;
        margin: 0 auto;
    }

    #myslides img {
        display: block;
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        margin: 0 auto;
    }

    #slideshow > a {
        display: block;
        margin-top: 10px;
    }

    #slideshow > a img {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.4em;
        line-height: 1.25;
    }

    p {
        margin-top: 0.8em;
        margin-bottom: 0.8em;
    }

    input,
    textarea {
        width: 100%;
        max-width: 100%;
    }

    .leftsmall,
    .leftbig,
    .rightsmall,
    .rightbig {
        float: none;
        width: 100%;
    }

    .icon-container {
        width: 100%;
    }

    .icon-container .icons:nth-child(odd),
    .icon-container .icons:nth-child(even) {
        width: 100%;
        float: none;
        display: block;
        margin: 0 0 20px;
        text-align: center;
    }

    .icon-container .icons img {
        display: block;
        margin: 0 auto;
    }

    #scrollingText {
        height: 50px;
        width: 100%;
        overflow: hidden;
    }

    #scrollingText div.scrollableArea * {
        padding: 15px;
        font-size: 16px;
    }

    .highlight {
        font-size: 1.05em;
    }

    .densvendfeatures {
        padding-left: 25px;
    }

    #footer {
        width: 100%;
        min-height: 80px;
        margin-bottom: 0;
        padding: 15px 15px 15px 65px;
        background-image: none;
        background-color: #333;
        box-sizing: border-box;
        text-align: right;
        position: relative;
        font-size: 11px;
        line-height: 1.5;
    }
	#footer a{color:#FFFFFF;}
	#footer a:hover{color:#ffcc00;}
	

    #footer img {
        position: absolute;
        left: 15px;
        top: 15px;
        margin-left: 0 !important;
    }
}