/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local(''),
    url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local(''),
    url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local(''),
    url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



html {overflow-y: scroll;}
body { background-color: #fff; padding: 0px; margin: 0px; font-family: "Open Sans", verdana, arial, sans-serif; font-size: 16px; color: #222222; max-width: 100%; overflow: hidden;}

p { padding: 0px; margin: 0px; }
a { text-decoration: none; transition: color 1s, color 1s; color: #000000; border: none; }
a img { border: none; }
main { min-height: 800px; }
ul { list-style: none; }
ul li { margin-bottom: 20px; }
ul li:before { content: '✓'; color: #ebe312; font-size: 22px; position: absolute; margin-left: -30px; margin-top: -5px;}
hr { border: none; border-bottom: 1px solid #ccc; }

h2.large, .page-more h2.large { font-weight: 800; font-size: 80px; margin-bottom: -10px; }

/* General */
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.relative { position: relative; }
.box { display: inline-block; vertical-align: top; position: relative; text-align: left; }
.inline { display: inline-block; vertical-align: top; }
.logo { height: 110px; margin: 5px 0px 0px 30px; }
.header-spacer { height: 80px; }
.hidden { display: none; }

.top { background-color: #fafafa; width: 100%; box-shadow: 0 0 5px #ddd; position: fixed; top: 0px; z-index: 100; height: 100px; }
a.logo { position: absolute; margin-top: 15px; left: 15%; opacity: 0.04; }

.menu { text-align: center; margin-top: 30px; font-size: 15px; }
.menu a { text-decoration: none; font-weight: bold; display: inline-block; padding: 10px 20px; margin: 0 10px; border: 1px solid transparent; }
.menu a.active, .menu a:hover { border: 1px solid #ccc; border-radius: 25px; background: #fff; }
.sub-menu { display: none; }
.language { display: inline-block; position: absolute; background: #fafafa; font-weight: bold; }
.language:hover .sub-menu { display: block; margin-left: 10px; }

.menu a.round-border, .language.round-border { border: 1px solid #ccc; border-radius: 25px; padding: 10px 20px; }
.menu a.bg-yellow { background-color: #ebe312; border: 1px solid #ebe312; }
.menu a.bg-yellow.active, .menu a.bg-yellow:hover { border: 1px solid #ccc; }

.main-menu, .right-menu { display: inline-block; }
.right-menu { margin-left: 10px; }

.yellow { color: #ebe312; }
.button { background-color: #ebe312; border: 1px solid #ebe312; border-radius: 25px; padding: 10px 20px; cursor: pointer; box-shadow: 0 0 15px #aaa; }
.button.white { background-color: #fff; border: 1px solid #ccc; }
.button:hover { }

.image-preview { text-align: center; margin-top: 50px; }
.image-preview img { width: 200px; height: 200px; object-fit: cover; margin: 10px; }


#to-top-button { position: fixed; background: rgba(0, 0, 0, 0.75); bottom: 50px; right: 20px; padding: 10px 15px 15px 15px;
    cursor: pointer; font-weight: bold; color: #ffffff; opacity: 0.0; transition: opacity 1s, background 1s; z-index: 9999; }
#to-top-button:hover { background: rgba(0, 0, 0, 1.0); }


footer { position: relative; bottom: 0px; font-weight: 300; color: #000; width: 100%; box-shadow: 0 0 5px #ddd; text-align: center; background: #fafafa; margin-top: 100px; }
footer .box { margin: 40px 80px; }
footer .box b { margin-bottom: 5px; display: inline-block; color: #444; font-weight: bold; }

/* Home */
.home-text-center { max-width: 900px; margin: 0 auto 100px; background: white; position: relative; z-index: 90; }

.home-text-left { width: 50%; text-align: right; }
.home-text-left .box { margin-right: 50px; max-width: 500px; margin-bottom: 50px;}
.home-text-left h2 { font-size: 60px; font-weight: 800; margin-top: 10px; margin-bottom: 10px; }
.home-img-right { width: 50%; }
.home-img-right img { width: 100%; display: block; }
.home-img-left { width: 50%; }
.home-img-left img { width: 100%; display: block; }
.home-text-right { width: 50%; }
.home-text-right .box { margin-left: 80px; max-width: 550px; margin-bottom: 50px; }
.home-text-right h2 { font-size: 60px; font-weight: 800; margin-top: 50px; margin-bottom: 10px; }

.mobile-show { display: none; }
.mobile-hide { display: inline-block; }


/* Shop */
.shop.header {font-weight: 800; font-size: 48px; text-align: center; text-transform: uppercase; margin-top: 20px; margin-bottom: -5px; }
.shop.title { margin-bottom: 25px; display: inline-block; }
.shop.box { border: 1px solid #ccc; border-radius: 25px; text-align: center; transition: box-shadow 0.25s; margin: 20px; }
.shop.box:hover {cursor: pointer; box-shadow: 0 0 15px #aaa; }
.shop.box img { max-width: 400px; }

li:before { content: "\f00c"; }


/* product */
img.main { width: 600px; object-fit: contain; height: 600px; border: 1px solid #fff; }
img.preview { width: 100px; object-fit: contain; height: 100px; border: 1px solid #eee; cursor: pointer; }
img.preview.active, img.preview:hover { border: 1px solid #aaa; }
.page-product-details { text-align: center; margin-top: 20px;}
.page-product-details h1 { line-height: 36px;}
.full-width { width: 1240px; margin: auto; text-align: left; }
.page-product-details .shopping-new { margin-left: 120px; }
/* background: #fff; color: #000; border: 1px solid #fff; font-weight: normal; */
.model { display: inline-block; border: 1px solid #ccc; vertical-align: middle; margin-right: 5px; padding: 0px 25px; margin-top: 5px;
    font-weight: bold; border-radius: 25px; }
.model:hover { cursor: pointer; background: #fafafa; }
.model.active { border: 1px solid #777; background: #fafafa; }
.model span { display: inline-block; margin-top: 3px; vertical-align: middle; }
.model img { width: 50px; object-fit: contain; height: 50px; vertical-align: middle; margin-left: 10px; }
.product-details { position: relative; display: block; transition: font-weight 0.25s;}
.product-details:hover { font-weight: bold; }
.product-details i { position: absolute; right: 0px; top: 7px; color: #aaa; font-size: 14px; }
.bookmark { position: absolute; margin-top: -120px; }
.page-more .bookmark { margin-top: -200px; }
/* margin-left: -2px; margin-right: -2px; */
.page-product-details h1.large { font-size: 40px; line-height: 52px; margin-bottom: 10px; font-weight: 800; }
.page-product-details .product-price { font-size: 36px; font-weight: 800; }
.inline-block { display: inline-block; width: 600px; vertical-align: top; margin: 20px 20px; text-align: left;}
.online-available { margin-left: 50px; }


/* faq accordion */
.faq { max-width: 1080px; margin: 80px auto; }
.faq ul { list-style: initial; position: relative; }
.faq ul li { margin-bottom: 5px; }
.faq ul li:before { content: initial; position: initial; }

.accordion { background-color: #fafafa; color: #444; border: 1px solid #aaa; text-align: left; font-size: 15px; transition: 0.4s;
    border-radius: 25px; margin: 10px; position: relative; }
.accordion-trigger { background: transparent; font-size: 17px; padding: 10px 40px 10px 20px; font-weight: bold; cursor: pointer; }
.accordion-trigger:before { content: '\f0d7'; position: absolute; right: 20px; top: 13px; font-family: "FontAwesome"; }
.accordion.active .accordion-trigger:before { content: '\f0d9'; }
.accordion.active, .accordion:hover { background-color: transparent; }
.accordion .panel { margin: 0px 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.accordion .panel p { margin-bottom: 15px; }


/* contact */
.contact-message { font-size: 27px; font-weight: 800; margin-top: 70px; color: #444; text-transform: uppercase; }
.contact p { color: #aaa; }
.contact input[type="text"], .contact textarea, .contact input[type="submit"]  { border-radius: 25px; font-family: "Open Sans", Verdana; padding: 15px; min-width: 300px; border: 1px solid #ccc; margin: 10px; font-size: 20px;}
.contact textarea { width: 1013px; }
.contact .quick-contact { margin: 25px; }
.contact .quick-contact span { font-size: 20px; }
.contact .quick-contact span i{ color: #888; }



/* modal */
.modal .select2-container { position: absolute; right: 0px; top: -10px;}

.modal {position: absolute; left: 0; top: 0px; bottom: 0px; height: 2000px; width: 100%;  background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(0.9);
    transition: visibility 0s linear 0.25s, opacity .25s 0s, transform .25s; z-index: 9999998; }

.modal-container {position: absolute; top: 100px; left: 50%; transform: translate(-50%, 0%); background-color: #fff; padding: 20px; min-width: 440px; box-shadow: 0 0 50px #000; border-radius: 8px; }
.close-button { position: absolute; top: 0px; right: 10px; cursor: pointer; padding: 5px; }
.close-button:hover {color: #4a98bd}
.show-modal {opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity .25s 0s, transform .25s; }
.modal-container input[type=radio] { width: inherit; height: inherit; padding: inherit; }
.modal-container h2 { font-size: 20px; font-weight: bold; margin-top: 0;margin-bottom: 20px}

.modal-header { padding-top: 10px; }
.modal-content { text-align: left; padding: 10px 0; }
.modal-footer { padding-top: 10px; text-align: center; }
.modal input, .modal button, .modal select, .modal textarea { padding: 8px 16px; display: inline-block; width: 320px; font-family: Verdana, sans-serif; font-size: 16px;
    border-radius: 5px; border: 1px solid #ccc; margin: 6px 0; font-weight: 500; }
.modal select, .modal button { background: #fff; }
.modal input[type="checkbox"] {  width: initial; }
.modal input[type="radio"] {  width: initial; }
.modal button { border: 0; color: #000; background: transparent; width: initial; cursor: pointer; font-weight: bold; }
.modal button:hover { background: none; }

.video-tutorials { text-align: center; }
.video-tutorials h3 { font-size: 22px; font-weight: 300; text-align: center; margin-top: 0;}
.video-tutorials .inline { margin: 20px; width: 400px; transition: transform 0.25s; position: relative; }
.video-tutorials .inline:hover { transform: scale(1.1); cursor: pointer; }
.video-tutorials .play-button { height: 40px; width: 40px; position: absolute; top: 100px; left: 180px; background: #444; padding: 15px; border-radius: 40px; font-size: 40px;}
.video-tutorials .play-button i { position: absolute; margin-left: -10px; color: #fff;}
video.tutorial-video { margin: 3px 5px 0px 5px; }

.video-tutorials.application-areas .inline { width: 390px; }
.application-areas img { border-radius: 25px; }
.application-areas p { font-weight: 300; text-align: left; margin-top: 10px; }
.application-areas h3 { font-weight: 800; margin: 10px; color: #444;}

img.preview-video-img { width: 100%;}
.img-manual { width: 400px; }

.page-more h2 { font-size: 27px; font-weight: 800; margin-top: 60px; }

.references { max-width: 1400px; margin: auto; }
.references a { display: inline-block; }
.references a img { object-fit: cover; height: 200px; width: 200px; margin: 20px; }
/* login */
.input-round { border: 1px solid #aaaaaa; width: 200px; padding: 10px; border-radius: 25px; }


.shopping-cart { width: 100%; border-spacing: 0px; border-collapse: separate;}
.shopping-cart .article { font-size: 20px; }
.shopping-cart .stock { color: green; }
.shopping-cart .quantity { width: 40px; padding: 12px; border-radius: 25px; border: 1px solid #ccc; }
.shopping-cart tr td { border-top: 1px solid #ccc; padding: 10px 0px; vertical-align: top; }
.shopping-cart tr th { padding: 10px 0px; }
.shopping-cart img { max-height: 120px; float: left; margin-right: 20px;  margin-bottom: 20px; }
.shopping-cart .cart-01, .shopping-cart .cart-02 { text-align: left; }
.shopping-cart .cart-03, .shopping-cart .cart-04 { text-align: right; }
.shopping-cart .cart-04, .shopping-cart .total { padding: 18px 0px; }
.shopping-cart-icons { font-size: 30px; color: #eee; text-align: center; margin-bottom: 25px; margin-top: 0px; }
.shopping-cart-icons small { font-size: 14px; vertical-align: middle;}
.shopping-cart-icons .active { color: #444; }

.order-confirmation { max-width: 1240px; margin: auto; }
.order-confirmation input[type="text"], .order-confirmation select { padding: 10px; border-radius: 25px; border: 1px solid #ccc; width: 200px; background: #fff;}
.order-confirmation select { width: 220px; }
.order-confirmation .shopping-cart { float: right; width: 50%; margin-top: 60px; }

.checkout-button-prepaid { text-align: center; padding: 14px; background: #253b80; border-radius: 5px; margin-bottom: 12px;
    font-size: 18px; font-family: "Open Sans", Verdana; font-weight: 600; cursor: pointer; color: #fff; font-style: italic; transition: background-color 0.25s;}
.checkout-button-prepaid:hover { background: #222d65; }


/* iPhone 5  750, 720, 640, 540, 480, 320, 412 (Nexus 5x) */
@media only screen and (max-width: 1300px) {
    .page-product-details { width: 96%; margin: 0 2%; }
    .inline-block.block-details, .inline-block.block-package { display: block; margin: 0px; }
    .full-width { width: 100%; }
    .inline-block { display: inline-block; width: 500px; }
    .block-preview .main { max-width: 100%; }
    /*
    video.tutorial-video { margin: 3px 5px 0px 5px; width: 98%; }
     */
    #modal-video .modal-container { max-width: 100%;}
    video.tutorial-video { width: 98%; }
}

@media only screen and (max-width: 1135px) {
    .home-text-left .box, .home-text-right .box { padding: 10px; }
    .home-text-center { padding: 10px; }
    .order-confirmation, .contact { width: 96%; margin: 0 2%; }
    .inline-block { display: inline-block; width: 440px; margin: 0;}
    .contact textarea { width: 80%; }
}

@media only screen and (max-width: 1010px) {
    .home-img-right, .home-img-left, .home-text-left, .home-text-right { width: 100%; }
    .home-text-left .box, .home-text-right .box { max-width: initial; margin-left: 0px; }
    .mobile-show { display: block; }
    .mobile-hide { display: none; }
    a.logo { display: none; }
    .inline-block.block-main { display: block; width: 100%; }
    img.preview { width: 40px; height: 40px;  }
    .block-preview .main { width: 50%; height: auto;}
    .inline-block.block-preview { margin: 60px auto 0; width: initial; text-align: center;}
    .page-product-details h1.large { font-size: 26px; line-height: 34px; margin-bottom: 10px; font-weight: 800; }
    .page-product-details .product-price { font-size: 26px; font-weight: 800; }
    footer .box { text-align: center; margin: 20px 40px; }
}

@media only screen and (max-width: 735px) {
    .right-menu { display: block; }
    .right-menu { margin-left: -80px; margin-top: 5px; text-align: center; }
    .menu a { padding: 10px 5px; }
    .menu { margin-top: 5px; }
    
    .order-confirmation .shopping-cart { float: none; margin: 0; width: 100%; }
    
}

@media only screen and (max-width: 540px) {
    h2.large, .page-more h2.large { font-size: 40px; }
    .home-text-right h2, .home-text-left h2 { font-size: 40px; }
    .home-text-center { margin: 0 auto 20px; }
    .shop.box img { max-width: 100%; }
    .shop.header { font-size: 38px; }
    .video-tutorials.application-areas .inline { max-width: 90%; }
  
    .img-manual { width: 350px; }
    .video-tutorials .inline { width: 350px; }
    .shopping-cart img { max-height: 60px; margin-right: 10px; }
    .shopping-cart tr th, .shopping-cart tr td { word-wrap: break-word; }
    .shopping-cart .quantity { width: 30px; }
    
    .modal-container { left: 50%; transform: translate(-50%, 0%); min-width: 80%; }

    .checkout-button-prepaid {  padding: 7px; }
    .online-available { margin-left: 10px; display: block; margin-top: 20px; }
    
}