body { color: #000000; line-height: 1.6; background: #009fd5 }

@-webkit-keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }

a { color: #696b6a }

img.responsive { width: 100%; height: auto }
img.responsiveh { width: auto; height: 100% }

.message { font-weight: bold; font-size: 1em; padding: 15px 10px; border: 1px solid #c8ced3 }
.message .fa { margin-right: 5px; font-size: 1.5em }
.message.info { border-color: #84a7db; color: #0b55c4; background-color: #c3d2e5 }
.message.note { border-color: #f0dc7e; color: #c00c00; background-color: #efe7b8 }
.message.alert { border-color: #de7a7b; color: #c00c00; background-color: #e6c0c0 }

#m2ain a:hover img,
#b2ox_bottom a:hover img { opacity: 0.6 }

#box_container { text-align: center }
.wrapper { text-align: left; margin: 0 auto; max-width: 996px }

#menu_nav { display: none }

#box_top { color: #e0e0e0; font-size: 0.9em; padding-top: 5px; background: #002d71 }
#box_top .wrapper { text-align: right; height: 40px }
#box_top a { line-height: 40px; display: inline-block; color: #ffffff; text-decoration: none; outline: none }
#box_top a:hover { color: #ffff00 }
#box_top #cart { background: url("../images/ico_cart.png") no-repeat left center; padding-left: 30px; height: 40px; line-height: 20px }
#box_top #cart span { background: #ffffff; border-radius: 50%; display: block; padding: 2px 8px; color: #000000; font-weight: bold; font-size: 0.9em; text-transform: uppercase }
#box_top #cart:hover span { background-color: #ffff00 }
#box_top #cart:hover { background-image: url("../images/ico_cart_hover.png") }

#box_menu { height: 100px; background: #ffffff }
#box_menu ul { list-style: none }  
#box_menu ul li { position: relative; float: left; padding: 0 }
#box_menu ul li a { text-decoration: none }
#box_menu ul li.page > a { width: auto; display: inline-block; font-size: 1.2em; text-transform: uppercase; text-align: center; height: 100px; line-height: 100px; color: #002d71; padding: 0 12px }
#box_menu ul li.page.active > a, #box_menu ul li.page:hover > a { background-color: #009fd5; color: #ffffff }
#box_menu ul li ul { display: none; position: absolute; z-index: 99; top: 100px; left: 0; width: 200px; background: #009fd5 }
#box_menu ul li:hover > ul { display: block }
#box_menu ul li ul li { float: none }
#box_menu ul li ul li a { display: block; font-size: 1.1em; padding: 10px; border-top: 1px solid #ededed; color: #ffffff }
#box_menu ul li ul li a:hover { background-color: #002d71; color: #ffffff }
#box_menu ul li.page.page_47 { display: none }

#box_boxes, #box_main { background-color: #eeeeee }

#box_bottom { background: #f5f5f5; color: #333333 }

#box_bottom2 { background-color: #333333; color: #979797 }

#box_footer { font-size: 0.9em; color: #eeeeee }
#box_footer a { font-weight: bold; text-transform: uppercase; color: #ffffff }        

.page_title, .box_title { padding-bottom: 20px }
.page_title h1, .box_title .title { background: url("../images/bg_title.png") no-repeat left bottom; font-size: 1.5em; color: #333333 }
.page_title h1 { font-size: 2.2em; color: #999999 }

.b2oxes { text-align: center; color: #ffffff; display: block; text-decoration: none; border-radius: 5px }
.b2oxes.color_red { background: #dd3333 }
.b2oxes.color_orange { background: #f2823c }
.b2oxes.color_green { background: #79b24a }
.bo2xes.color_blue { background: #0f5b8f }
.boxes a:hover { text-decoration: none; opacity: 0.9 }

#main ul { padding-left: 20px }

#box_bottom .box_title .title { font-weight: bold; font-size: 1em; padding: 10px; background: #006699; color: #ffffff }
#box_bottom fieldset { border: 0; padding: 0 }
#box_bottom fieldset .form { padding: 10px }
#box_bottom fieldset legend { background: #006699; color: #ffffff; width: 100%; padding: 10px 0; text-indent: 10px }

#box_bottom2 .box_title .title { text-transform: uppercase; color: #ffffff }
#box_bottom2 .b1b_dotted { border-color: #444444 }

.button, a.button { font-size: 1em; text-transform: uppercase; display: inline-block; text-decoration: none; height: 35px; padding: 0 20px; background: #006699; color: #ffffff; margin: 0 5px 0 0; border: 0; cursor: pointer }
span.button, a.button { line-height: 34px }
.button.gray, a.button.gray { background-color: #333333 }
input.button:focus { background: #006699 }
.button:hover, a.button:hover { opacity: 0.8 }

form input.quantity { text-align: center; height: 35px; line-height: 35px; padding: 0 3px; max-width: 100% }
form .button { padding: 0 15px; font-size: 0.9em }

label { color: #666666; line-height: 35px }
form select { outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none }
form select { min-width: 90%; font-size: 0.9em; height: 35px; padding: 0 20px 0 0.5em; background: #ffffff url("../images/forms/select.png") no-repeat 98% center; background-size: auto 40% }
form select:focus, form select:hover { cursor: pointer }
form input.dt_text, form input.dt_password, form input.dt_email, form .dt_readonly { font-size: 0.9em; height: 35px; line-height: 35px; padding: 0; text-indent: 0.5em; max-width: 90% }

span.button.pagination { background: #cecece }

table { width: 100%; border: 0; margin: 5px; padding: 0; font-size: 1em; border-top: 1px dotted #cccccc; border-right: 1px dotted #cccccc }
table table { padding: 0; margin: 0 }
tr { padding: 0; margin: 0; border: 0 }
td { text-align: center; padding: 2px 0; margin: 0; border: 0; border-bottom: 1px dotted #cccccc; border-left: 1px dotted #cccccc; vertical-align: middle; color: #000000 }
td td { padding: 0; border: 0 }

.row { background-color: #f7f7f7 }
.row2 { background-color: #ffffff }

a.product { display: block; padding: 5px 5px 0 5px; border: 1px solid #cccccc; background: #ffffff; text-decoration: none }
a.product:hover { border-color: #009fd5; opacity: 0.8 }


@media screen and (min-width: 768px) and (max-width: 995px){
	.wrapper { width: 100% }
	#box_top .wrapper, #box_main .wrapper { width: 98% }
}

@media only screen and (max-width: 767px) {	
    body { overflow-y: scroll }
	#box_container { overflow-x: hidden }
	.wrapper { width: 100% }
	#box_top .wrapper, #box_main .wrapper { width: 95% }

    #menu_nav { display: block; z-index: 99; cursor: pointer; left: 0; top: 45px; position: absolute; width: 60px; height: 60px; background: #1f1f1f url("../images/menu_nav.png") no-repeat center center }	

    #menu { z-index: 99; position: absolute; display: none; left: 0; top: 105px; width: 100%; float: none; background: #1f1f1f; padding: 0 }
	#menu.show { display: block; -webkit-animation: fade-in 0.5s ease-in; animation: fade-in 0.5s ease-in }

	#box_top { font-size: 0.8em }

	#box_menu { height: 60px }
	#box_menu .wrapper { width: 100% }
	#box_menu ul li { float: none }
	#box_menu ul li.page > a { display: block; font-size: 1.2em; padding: 12px; color: #ffffff; text-align: left; height: 30px; line-height: 30px }
	#box_menu ul li ul { display: block; position: static; width: 100%; background: #1f1f1f }
	#box_menu ul li ul li { text-indent: 20px }

	#box_menu #logo { width: 100%; text-align: center; float: none }
	#box_menu #logo a { line-height: 60px }
	#box_menu #logo img { height: 40px }

	form input.dt_text, form input.dt_password, form input.dt_email, form .dt_readonly { width: 100%; max-width: 100% }

	.button, a.button { width: 100%; margin: 0 0 10px 0; padding: 0; text-align: center }
	.button.pagination, a.button.pagination { width: auto; margin-right: 5px; padding: 0 20px }

}