/*********Fonts***************/

@font-face {
 font-family: 'avenir-black';
 src: url('/images/common/web-font/avenir-lt-black.eot'); /* IE9 Compat Modes */
 src: url('/images/common/web-font/avenir-lt-black.woff') format('woff'), /* Pretty Modern Browsers */
 url('/images/common/web-font/avenir-lt-black.ttf') format('truetype'), /* Safari, Android, iOS */
 url('/images/common/web-font/avenir-lt-black.svg') format('svg'); /* Legacy iOS */
}

@font-face {
 font-family: 'avenir-medium';
 src: url('/images/common/web-font/avenir-lt-medium.eot'); /* IE9 Compat Modes */
 src: url('/images/common/web-font/avenir-lt-medium.woff') format('woff'), /* Pretty Modern Browsers */
 url('/images/common/web-font/avenir-lt-medium.ttf') format('truetype'), /* Safari, Android, iOS */
 url('/images/common/web-font/avenir-lt-medium.svg') format('svg'); /* Legacy iOS */
}

@font-face {
 font-family: 'avenir-roman';
 src: url('/images/common/web-font/avenir-lt-roman.eot'); /* IE9 Compat Modes */
 src: url('/images/common/web-font/avenir-lt-roman.woff') format('woff'), /* Pretty Modern Browsers */
 url('/images/common/web-font/avenir-lt-roman.ttf') format('truetype'), /* Safari, Android, iOS */
 url('/images/common/web-font/avenir-lt-roman.svg') format('svg'); /* Legacy iOS */
}

@font-face {
 font-family: 'the-sans-light';
 src: url('/images/common/web-font/the-sans-lp-light.woff') format('woff'); /* Pretty Modern Browsers */
}


@font-face {
 font-family: 'the-sans-plain';
 src: url('/images/common/web-font/the-sans-lp-plain.woff') format('woff'), /* Pretty Modern Browsers */
}




/**************Basics**************/

h1.title.product {
	color: #051d33;
	font-size: 30px;
	margin-bottom: 15px;
	line-height: 1.35;
	font-family: avenir-roman, sans-serif;
}

li.mandatory { 
	text-align: left; color: black; 
}

hr {
	display: none;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

div.wrapper {
	width: 100%;
}



/**************nav********************/

div.wrapper.nav {
	background-color: rgba(5, 29, 51, 0.8);
    width: 100%;
    height: 48px;
    padding-top: 14px;
    padding-bottom: 5px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

div.wrapper.nav div.container {
	width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

div.wrapper.nav div.container div.lang {
	float: right;
	text-align: right;
	padding-top: 10px;
}

div.wrapper.nav div.container div a {
	color: #fff;
	font-family: the-sans-plain, sans-serif;
}

div.wrapper.nav div.container div a:hover {
	color: #00b3a3;
	text-decoration: none;
}

div.logo {
	display: inline-block;
	padding-top: 0;
	height: 40px;
	float: left;
	min-height: 30px;
}

.logo img {
	height: 100%;
}


/*********Top Image****************/

.carousal-container {
 height: 510px;
 position: relative;
 margin: 67px 0 65px;
 background: url(/images/ecommerce/promo/stickers/hardware.jpg) no-repeat top center;
 background-size: cover;
 text-align: center;
 color: #051d33;
}


.carousal-text {
 position: absolute;
 text-align:center;
 top:0;
 left:0;
 right: 0;
 bottom:0;
 line-height: 1.5em;
 width: 70%;
 height:50px;
 margin: auto;
 font-size: 3em;
 font-weight: 500;
 color:#051d33;
 text-shadow: 1px 1px 3px white, -1px -1px 3px white;
 font-family: 'avenir-roman', sans-serif;
}


/*********Upper Wrapper*************/

div.col.center.nosides {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	margin: 100px auto;
}


div.container div.product-details div.col.one {
	width: 60%;
}

div.container div.product-details div.col.two {
	width: 35%;
	margin-left: 5%;
}


#product_details {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    max-width: 1200px;
}

#upc {
	margin-bottom: 1em;
    font-size: 16px;
    line-height: 24px;
    color: #5f5f5f;
    font-family: 'the-sans-light', sans-serif;
}

#upc > label {
	width: auto;
}

.regular-price {
	text-align: left;
	font-size: 18px;
    line-height: 18px;
    color: #00A1CB;
    font-weight: 700;
    display: inline-block;
    font-family: 'avenir-roman',sans-serif;
    margin: 0 0 1em;
}

.product.desc {
	text-align: left;
	font-size: 16px;
	font-family: 'the-sans-light', sans-serif;
	line-height: 24px;
	color: #5f5f5f;
	margin: 0 0 1em;
}

ol.form.buttons li.button {
	text-align: left;
}

ol.form.buttons li.button button {
	background-color: #1da897;
	border: none;
	cursor: pointer;
	width: auto;
	height: 42px;
	min-width: 125px;
	padding: 14px 25px;
	margin-top: 5px;
	color: #fff;
	border-radius: 4px;
	font-size: 14px;
	line-height: 14px;
	font-family: avenir-black, sans-serif;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.15em;
}

ol.form.buttons li.button button:hover {
	background-color: #00b3a3;
	color: #fff;
}


/*************Thumbnails Carousel***************/

.thumbnail-li > .product-thumb-wrapper {
 width: 100%;
}

.jcarousel.thumbnails li {
    margin-left: 30px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid white;
}

.jcarousel.thumbnails li:hover {
    border-radius: 4px;
    border: 2px solid #6dc7be;
}

.jcarousel.thumbnails li.selected {
    border-radius: 4px;
    border: 2px solid #1da897;
}

.jcarousel.thumbnail-li.selected:hover {
    border: 2px solid #1da897;
}

.jcarousel-control-prev.thumb-prev {
    background: #1da897;
    height: 100%;
    border-radius: 4px;
    color: #fff;
    font-size: 20px !important;
    line-height: 20px !important;
    top: 0%;
    margin-top: 0px;
}

.jcarousel-control-prev.thumb-prev:before {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
}


.jcarousel-control-next.thumb-next {
    right: 0px;
    background: #1da897;
    height: 100%;
    border-radius: 4px;
    color: #fff;
    font-size: 20px !important;
    line-height: 20px !important;
    top: 0%;
    margin-top: 0px;
}


.jcarousel-control-next.thumb-next:before {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
}


/********Description Panel***********/

div.std {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding: 50px 0 50px;
	width: 100%;
	margin: 40px auto 0;
	max-width: 1200px;
}

div.std p {
	font-size: 16px;
	line-height: 24px;
	margin: 1em 0 1em;
	color: #5f5f5f;
	font-family: the-sans-light,sans-serif;
}

div.std strong {
	font-size: 18px;
	line-height: 24px;
	color: #1da891;
	font-family: avenir-roman, sans-serif;
}

div.std ul {
	margin: 0 0 1em 17px;
}

div.std ul li {
 	font-size: 16px;
 	line-height: 24px;
 	color: #5f5f5f;
 	list-style: disc outside;
 	font-family: the-sans-light, sans-serif;
}



/****************Form*************/


form {
	max-width: 1000px;
	margin: 15px auto;
}

form label {
	font-size: 16px;
	line-height: 24px;
	font-family: avenir-roman,sans-serif;
	color: #636363;
}

form li {
	margin-bottom: 20px;
}

form input[type="text"] {
	width: 100%;
	height: 36px;
	padding: 3px 0 0 6px;
	border-radius: 4px;
	border: 1px solid #d4d2dd;
	font-family: avenir-roman, sans-serif;
	color: #636363;
}

form input[type="text"]:focus {
	border-color: #1da897;
}

form input[aria-describedby] {
	border: 1px solid #eb4141;
	background: #fff;
}

form input[title] {
	border: 1px solid #eb4141;
	background: #fff;
}

form input[title]:focus {
	border: 1px solid #eb4141;
	background: #fff;
}

form select {
	width: 101%;
	height: 44px;
	font-family: avenir-roman, sans-serif;
	padding: 3px 6px;
	border: 1px solid #d4d2dd;
	border-radius: 4px;
	color: #636363;
	box-sizing: border-box;
}

form select:focus {
	border-color: #1da897;
}

form select option {
	padding-right: 10px;
	background: #fff;
	color: #636363;
}

form select[aria-describedby] {
	background-color: #fff;
	border: 1px solid #eb4141;
	color: #636363;
}

ol + ol.form.buttons li.button {
	text-align: center;
    margin-top: 3em;
}


form button {
	background-color: #1da897;
	border: none;
	cursor: pointer;
	width: auto;
	height: 42px;
	min-width: 125px;
	padding: 14px 25px;
	margin-top: 5px;
	color: #fff;
	border-radius: 4px;
	font-size: 14px;
	line-height: 14px;
	font-family: avenir-black, sans-serif;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.15em;
}

form button:hover {
	background-color: #00b3a3;
	color: #fff;
}

div.ui-tooltip {
	font-size: 11px;
	line-height: 12px;
	color: #eb4141;
	background-color: #fff;
	border:none;
	font-family: the-sans-light,sans-serif;
}


/************Confirmation*****************/

div.check {
	width: 80%;
	margin: 10px auto 40px;
	max-width: 100px;
}

div.check img {
	width: 100%;
	display: block;
}

div.confirmation {
	margin-top: 100px;
	text-align: center;
	min-height: 150px
}

div.confirmation div.confirmation_title {
	font-size: 24px;
    line-height: 30px;
    color: #1da897;
    font-family: avenir-roman, sans-serif;
    margin: 50px 0 50px;
}

div.confirmation div {
	color: #5f5f5f;
	font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
    font-family: the-sans-light, sans-serif;
}

div.confirmation strong {
	color: #1da897;
	font-size: 18px;
	line-height: 24px;
	font-family: avenir-roman, sans-serif;
}

div.confirmation a.help_email {
	color: #051d33;
}



/************Footer*****************/

div.wrapper.footer {
	width: 100%;
	background-color: #445666;
	color: #fff;
	margin-top: 100px;
	padding: 50px 0;
}

div.wrapper.footer {
	color: white;
}

div.wrapper.footer div.container {
	max-width: 1000px;
	width: 85%;
	margin: 0 auto;
}

div.wrapper.footer div.container:after {
  content: "";
  display: table;
  clear: both;
}

div.footer-left {
	float: left;
	width: 50%;
}

div.moneris img {
	width: 138px;
}

div.footer-social-icons-en {
	float: left;
	margin-top: 25px;
	clear: left;
}

.social-second {
	margin-left: 12px;
}


div.footer-right {
	float: right;
	width: 50%;
}

div.footer-contact-en {
	float: right;
	text-align: left;
}

.footer-contact-title {
	margin-bottom: 10px;
	padding-bottom: 6px;
	font-size: 1.3em;
	line-height: 1.3em;
	text-align: left;
	font-family: avenir-roman, sans-serif;
}

.footer-contact-reg {
    font-size: 14px;
    font-family: avenir-medium, sans-serif;
    margin-bottom: 5px;
}

.footer-contact-reg a {
	color: white;
}

.copyright-footer {
	float: left;
	clear: left;
	margin: 5px 0 12px;
	font-size: 12px;
}

.copyright-footer a {
	color: white;
}




/**********Media Query*************/


@media (max-width: 990px) {
/*nav*/
div.wrapper.nav {
	height: 28px;
	padding: 11px 0 11px;
}

div.wrapper.nav div.container div.lang {
	padding-top: 5px
}

div.logo {
	height: 28px;
}

.carousal-container {
    margin-top: 50px; 
}
}


@media (max-width: 768px) {
 
 
 /*Product Page*/
 
 
 div.container div.product-details div.col.one {
 display: block;
 width: 95%;
 margin: 10px auto 50px;
 }
 
 .product-details .product-media-main {
 width: 100%;
 margin: 0 auto 20px;
 }
 
 div.container div.product-details div.col.two {
 display: block;
 width: 95%;
 margin: 40px auto;
 }
 
 .title {
 margin-bottom: 0;
 }
 
 #product_details_tabview > div.content {
 width: 100%;
 margin: 50px auto 0;
 }
 
 .container > div.related-products > h2 {
 padding: 100px 0;
 text-align: center;
 font-size: 28px;
 line-height: 36px;
 }

li.button {
	text-align: center;
	margin-top: 15px;
 }


/*Footer*/
 
 div.footer-left {
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 float:none;
 }
 
 div.footer-left::before,
 div.footer-left::after {
 content:'';
 display: table;
 }

 divdiv.footer-left::after {
 clear: both;
 }
 
 div.footer-left .footer-logo {
 float: none;
 margin: 0 auto;
 }
 
 div.footer-left .footer-social-icons-en {
 float: none;
 margin: 25px 0;
 }
 
 div.footer-right {
 width: 70%;
 margin: 30px auto 0;
 text-align: center;
 float:none;
 }
 
 div.footer-contact-en {
 float: none;
 text-align: center;
 margin-right: 0;
 }
 
 h6.footer-contact-title {
 text-align: center;
 }

 h6.copyright-footer {
 	float:none;
 	text-align: center;
 }
}




@media (max-width: 500px) {
 
 
 /*Product Page*/

 div.col.center.nosides {
 	margin-top: 30px;
 }



 #product_details {
 	width: 100%;
 }
 
 .form.buttons .btn.add-to-cart {
 width: 100%;
 }

.form.buttons li.button {
	width: 100%;
} 

ol.form.buttons li.button button {
	width: 100%;
}

 form button {
 	margin-top: 25px;
 	width: 100%;
 }


 
}



@media (max-width: 480px) {

.carousal-container {
	height: 250px;
    color: #051d33;
    margin-bottom: 15px;
}



.carousal-text {
 line-height: 1.5em;
 font-size: 2em;
 font-weight: 300;
 height: 80px;
}
 
}


@media (max-width: 375px) {

}


@media (max-width: 320px) {
 

}






/*******************************************JCarousel***************************************************/

body.home #main_content div.col.center.nosides .widget.products .container .content.grid ul.odd {
 display: none;
}

.jcarousel-wrapper {
 margin: 20px auto;
 position: relative;
 border: 10px solid #fff;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 0 2px #999;
 -moz-box-shadow: 0 0 2px #999;
 box-shadow: 0 0 2px #999;
}

/** Carousel **/

.jcarousel {
 position: relative;
 overflow: hidden;
 width: 100%;
}

.jcarousel ul {
 width: 20000em;
 position: relative;
 list-style: none;
 margin: 0;
 padding-left: 40px;
 padding-right: 40px;
}

.jcarousel li {
 width: 200px;
 float: left;
 border: 1px solid #fff;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding-left: 20px;
 padding-right: 20px;
}

.jcarousel img {
 display: block;
 max-width: 100%;
 height: auto !important;
}

/** Carousel Controls **/

.jcarousel-control-prev {
 position: absolute;
 top: 35%;
 left: 0px;
 margin-top: -13px;
 display: inline-block;
 width: 25px;
 height: 25px;
 cursor: pointer;
 text-align: center;
 line-height: 25px;
 text-decoration: none;
}

.jcarousel-control-prev:before {
 content: "\f104";
 font-family: fontawesome;
 font-size: 28px;
 color: #fff;
}

.jcarousel-control-next {
 position: absolute;
 top: 35%;
 right: -5px;
 margin-top: -13px;
 display: inline-block;
 width: 25px;
 height: 25px;
 cursor: pointer;
 text-align: center;
 line-height: 25px;
 text-decoration: none;
}

.jcarousel-control-next:before {
 content: "\f105";
 font-family: fontawesome;
 font-size: 28px;
 color: #fff;
}