/* type: mikromedia-8th style created by: mikroe team date: april 2019 */ #mikromedia-8th .kit-box {margin-top: 30px;} #mikromedia-8th .kit-box button {margin-top: 30px; color: #fff; background: #1592e6; border-color: #1592e6; border-radius: 50px; width: 200px; font-size: 16px; font-weight: 500; padding: 10px 0; border: none;} #mikromedia-8th .kit-box .btn-row {width: 100%; display: flex; align-items: center; justify-content: center; } #mikromedia-8th .kit-box .btn-row i {margin-right: 5px;} /* GLOBAL STYLE */ /* reset bootstrap */ #mikromedia-8th, #mikromedia-8th .row { margin: 0 auto; } #mikromedia-8th .col-md-3 { padding: 0 20px 0 0; } #mikromedia-8th .col-md-4, #mikromedia-8th .col-md-5, #mikromedia-8th .col-md-7 { padding: 0; } #mikromedia-8th .col-sm-4 { padding: 0; } #mikromedia-8th .col-sm-12 { padding: 0; } #mikromedia-8th .videomm {display: grid!important; position: relative;} #mikromedia-8th .videomm p {text-align: center;} #mikromedia-8th .videomm p i {font-weight: 600;} #mikromedia-8th .videomm video {margin: 30px auto;} #mikromedia-8th .videomm {position: relative;} #mikromedia-8th .videomm p {position: absolute; bottom: 30px; width: 100%;} #mikromedia-8th .video-container-mm {width: 80%; max-width: 800px; margin: 0 auto;} #mikromedia-8th .sales-inquiries{padding: 0;} #mikromedia-8th .sales-inquiries:hover h5{color: #136dc7;} #mikromedia-8th .sales-inquiries:first-of-type{margin: 0 0 15px 0;} #mikromedia-8th .sales-inquiries a {display: flex;} #mikromedia-8th .sales-inquiries a i{font-size: 26px;margin: 5px 0 0 0;width: 50px;} #mikromedia-8th .sales-inquiries a h5{font-size: 14px;line-height: 22px;color: #231f20;font-weight: 400;margin: 0;} #mikromedia-8th .content-1-2-3 { display: flex; flex-direction: column; } #mikromedia-8th a { outline: 0; color: #1592e6; font-size: 16px; text-decoration: none; } #mikromedia-8th a:active, #mikromedia-8th a:hover { color: #136dc7; } #mikromedia-8th a:active i, #mikromedia-8th a:hover i { font-weight: 500; } #mikromedia-8th .info-wrapper .tab-pane {display: block!important;} #mikromedia-8th h1 { font-size: 22px; font-weight: 400; } #mikromedia-8th h2 { font-size: 24px; margin:0 auto; letter-spacing: 2px; text-align: center; padding: 60px 20px; font-weight: 300; line-height: 30px;} #mikromedia-8th h3 { font-size: 18px; font-weight: 600; margin: 0; padding: 30px 0;} #mikromedia-8th p { font-size: 16px; color: #231f20; line-height: 1.8; } /*colors*/ #mikromedia-8th .light-gray { background: #fbfbfb; margin: 0; } #mikromedia-8th .gray-wrap { background: #58595B; color: #fff;} #mikromedia-8th .standard-wrap:after { content: ''; clear: both; display: table; } #mikromedia-8th .content-1-2-3 .standard-wrap { padding: 0 20px 50px 20px; } #mikromedia-8th #mikromedia-back-front .content-1-2-3 .standard-wrap{padding: 0 20px 0px 20px;} #mikromedia-8th .flex-wrap { flex-direction: column; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* yellow square btn */ #mikromedia-8th a.square-cart-btn { padding: 28px; display: table; margin: 0 auto; color: #231f20; margin-right: -20px; background: #ffcb05; } #mikromedia-8th a.square-cart-btn:active, #mikromedia-8th a.square-cart-btn:hover { background: #ebb705; color: #231f20; } #mikromedia-8th .square-cart-btn i { margin-right: 10px; min-width: 18px; } #mikromedia-8th .mikromedia-back-front:last-of-type{padding-bottom: 60px;} @media only screen and (min-width: 767px) { #mikromedia-8th .sales-inquiries a i{margin: 0px 0 0 0;width: 46px;} #mikromedia-8th h1 { font-size: 33px; font-weight: 300; } #mikromedia-8th .flex-wrap { flex-direction: row; margin: 0 -20px; } #mikromedia-8th .flex-wrap > div { flex-grow: 1; padding: 0 20px; } #mikromedia-8th .content-1-2-3 .col-md-4 { width: 60%;margin: 0 auto;} #mikromedia-8th .content-1-2-3 .standard-wrap { padding: 0 0 50px 0; } #mikromedia-8th .mikromedia-back-front .content-1-2-3 .standard-wrap{ padding: 0 0 50px 0; } #mikromedia-8th #mikromedia-back-front .content-1-2-3 .standard-wrap{ padding: 0 0 0 0; } } @media only screen and (min-width: 992px) { #mikromedia-8th .sales-inquiries a i{font-size: 22px;width: 40px;} #mikromedia-8th .sales-inquiries:first-of-type{margin: 0 0 20px 0;} } @media only screen and (min-width: 1200px) { #mikromedia-8th { padding-top: 0; } #mikromedia-8th .gray-wrap{padding: 50px 0;} #mikromedia-8th h2 {font-size: 32px; font-weight: 200;padding: 80px 0;} #mikromedia-8th h3 {height: 90px;padding: 35px 0 0 0;} #mikromedia-8th .content-1-2-3 {flex-direction: row;padding: 0; margin: 0 auto; max-width: 1170px; } #mikromedia-8th .content-1-2-3 .col-md-4{width: 33.3333%;} #mikromedia-8th .content-1-2-3 .standard-wrap{padding: 0 0 70px 0; width: 100%;} #mikromedia-8th .mikromedia-back-front .content-1-2-3 .standard-wrap{ padding: 0 0 70px 0; } #mikromedia-8th #mikromedia-back-front .content-1-2-3 .col-md-4 div {padding: 0;} #mikromedia-8th #mikromedia-back-front .content-1-2-3 .col-md-4:first-of-type div:first-of-type {padding: 0;} #mikromedia-8th #mikromedia-back-front .content-1-2-3 .col-md-4:last-of-type div:first-of-type {padding: 0;} } @media only screen and (min-width: 1300px) { #mikromedia-8th .content-1-2-3 { max-width: 1280px; } } #mikromedia-8th #optional .gray-wrap p{ color: #fff;padding-top: 10px;font-size: 14px;letter-spacing: 1px;margin: 0;} #mikromedia-8th .row-mcus .attribute_list ul li::before{display: none;} #mikromedia-8th .row-mcus .attribute_list ul li{border-radius: 0;} #mikromedia-8th .row-mcus {position: relative;} #mikromedia-8th #board-tabs { position: fixed; z-index: 10; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); width: 100%; background: #fff; } #mikromedia-8th #board-tabs h1 { display: none; } #mikromedia-8th #board-tabs span { line-height: 50px; font-size: 14px; } #mikromedia-8th #board-tabs span:after { content: '\f078'; font-family: 'Font Awesome 6 Pro'; position: absolute; left: 0; right: 0; text-align: center; } #mikromedia-8th #board-tabs span.rotate-arrow:after { transform: rotate(180deg); } #mikromedia-8th #board-tabs ul { display: none; overflow: auto; } #mikromedia-8th #board-tabs ul:after { content: ""; clear: both; display: table; } #mikromedia-8th #board-tabs li { border-bottom: 1px solid #f3f3f3; } #mikromedia-8th #board-tabs li:last-child { border: none; } #mikromedia-8th #board-tabs li a { line-height: 50px; color: #888; font-size: 13px; padding: 0 0 0 10px; } #mikromedia-8th #board-tabs li.active a { color: #000; font-size: 13px; font-weight: 500; } #mikromedia-8th #board-tabs button { display: inline-block; float: right; margin: 0px -20px 0px 0px; padding: 0 14px; line-height: 50px; background: #1592e6; color: #fff; border: none; text-transform: uppercase; position: relative; z-index: 10; font-weight: 600; width: calc(30% + 12px); white-space: nowrap; } #mikromedia-8th #board-tabs button:active { background: #136dc7; } @media only screen and (min-width: 600px) { #mikromedia-8th #board-tabs .standard-wrap{padding: 0 20px;} } @media only screen and (min-width: 900px) { #mikromedia-8th #board-tabs { padding: 0; z-index: 5050; top: 85px; transition: 0.25s; transform: translateY(0px); -webkit-transform: translateY(0px); } #mikromedia-8th #board-tabs.unshackle { transition: 0.25s; transform: translateY(-85px); -webkit-transform: translateY(-85px); } #mikromedia-8th #board-tabs h1 { display: none; float: left; margin: 0; font-size: 14px; line-height: 50px; text-transform: uppercase; font-weight: 600; cursor: pointer; } #mikromedia-8th #board-tabs h1:hover { opacity: 0.5; } #mikromedia-8th #board-tabs span { display: none; } #mikromedia-8th #board-tabs ul { margin: 0; display: inline-block; float: right; } #mikromedia-8th #board-tabs li { display: inline-block; border: none; } #mikromedia-8th #board-tabs li:hover { opacity: 0.5; cursor: pointer; } #mikromedia-8th #board-tabs li a { padding: 16px 5px 16px 5px; color: #231f20; } #mikromedia-8th #board-tabs li.active:hover { opacity: 1; } #mikromedia-8th #board-tabs li.active a { border-bottom: 5px solid #ffcb05; padding: 16px 5px 12px 5px; font-weight: 400; } #mikromedia-8th #board-tabs button { width: auto; margin: 10px 0 10px 10px; border-radius: 3px; line-height: 30px; } #mikromedia-8th #board-tabs button:hover { background: #136dc7; } } @media only screen and (min-width: 992px) { #mikromedia-8th #board-tabs h1 {display: inline-block;} #mikromedia-8th .row-mcus h3 {text-align: left; padding-bottom: 15px!important;margin-top: 140px!important;} } @media only screen and (min-width: 1200px) { #mikromedia-8th #board-tabs .standard-wrap{padding: 0;} } #mikromedia-8th #board-body { border: none; padding: 0; } #mikromedia-8th #board-body section.active { padding: 50px 0 0 0; } #mikromedia-8th #board-body h1.standard-wrap { margin: 0; text-transform: uppercase; font-size: 12px; font-weight: 600; position: relative;background: #fff; padding: 0px 110px 0px 20px;z-index: 9;height: 50px; display: -webkit-flex;-webkit-align-items: center;display: flex;align-items: center;} @media only screen and (min-width: 900px) { #mikromedia-8th #board-body{top: 25px;} #mikromedia-8th #board-body h1.standard-wrap { display: none; } } @media only screen and (min-width: 1200px) { #mikromedia-8th #board-body{top: 0px;} } #mikromedia-8th #backdrop.share-active { display: none; top: -100px; left: 0; bottom: 0; right: 0; background: #0009; position: absolute; z-index: 9000; } #mikromedia-8th #license-link {color: #1592e6;cursor: pointer;} /*SOCIAL NETWORK*/ #mikromedia-8th #social-network { display: none; position: fixed; z-index: 9010; margin: 0 auto; left: 0; right: 0; top: 160px; max-width: 320px; background: #fffffff0; border-radius: 3px; text-align: center; box-shadow: 0 0px 5px #0009; } #mikromedia-8th #social-network .social-network-wrap { padding: 20px; } #mikromedia-8th #social-network .close-pupup { position: absolute; top: 10px; right: 10px; } #mikromedia-8th #social-network .close-pupup:hover { opacity: 0.7; } #mikromedia-8th #social-network .close-pupup:active { opacity: 0.7; } #mikromedia-8th #social-network h2 { padding: 0 0 20px 0; font-size: 26px; } #mikromedia-8th #social-network ul i { font-size: 30px; padding: 20px; } #mikromedia-8th #social-network ul i:hover { font-weight: 300; } @media only screen and (max-width: 910px) {#mikromedia-8th #social-network { top: 162px; }} @media only screen and (max-width: 400px) { #mikromedia-8th #social-network { top: 160px; max-width: initial; left: 20px; right: 20px; } #mikromedia-8th #social-network h2 { font-size: 22px; } } #mikromedia-8th #price-top { position: absolute; right: 0; top: 50px; z-index: 9;width: 100%;text-align: right;} #mikromedia-8th #price-top #our_price_display { background: transparent; color: #000; font-weight: 300; font-size: 22px; padding: 0; line-height: 53px; } #mikromedia-8th #price-top #original_price {margin: 0;} #mikromedia-8th #price-top #original_price span { color: #231f20; font-weight: 300; position: absolute;} #mikromedia-8th #price-top .our_price_display { margin:0; } #mikromedia-8th #price-top #old_price .price { font-size: 13px; } #mikromedia-8th #price-top #reduction_percent{right: 0;position: absolute;width: auto;padding: 0 0 0 10px;margin: 0;z-index: 99;top: 50px;color: #fff;} #mikromedia-8th #price-top #old_price {top: 36px;position: absolute;left: -40px;margin: 0 1px; right: 20px;line-height: 1;text-decoration-color: #343434;} @media only screen and (min-width: 600px) { #mikromedia-8th #price-top{padding: 0 20px;} #mikromedia-8th #price-top #old_price{left: -50px;} } @media only screen and (min-width: 900px) { #mikromedia-8th #price-top {top: 100px;z-index: 1;} #mikromedia-8th #price-top #original_price{position: absolute;right: 20px;top: -20px;} #mikromedia-8th #price-top #original_price span {position: relative; color: #bbb;} #mikromedia-8th #price-top #our_price_display {color: #bbb;} #mikromedia-8th #price-top #old_price { margin: 0;top: 40px;left: -60px;text-decoration-color: #888;} #mikromedia-8th #price-top #old_price .price { font-size: 14px;color:#bbb; } #mikromedia-8th #price-top #reduction_percent{top: -30px;right: 20px;} } @media only screen and (min-width: 1200px) { #mikromedia-8th #price-top { width: 370px;left: 800px;right: 0;text-align: right;margin: 0 auto; top: 110px;padding: 0;} #mikromedia-8th #price-top #reduction_percent{top: -40px;right: 0;} #mikromedia-8th #price-top #original_price {right: 0;} #mikromedia-8th #price-top #our_price_display{font-size: 32px;} #mikromedia-8th #price-top #old_price{top: 50px; right: 0;} #mikromedia-8th #price-top #old_price .price{font-size: 16px;} } @media only screen and (min-width: 1300px) { #mikromedia-8th #price-top { width: 480px; left: 800px; } #mikromedia-8th #price-top #old_price{left: 77px;} } #mikromedia-8th #mikromedia-cover { position: relative; height: auto;background-image: radial-gradient(#484848, #353535, #232323, #131313, #101010);} #mikromedia-8th #mikromedia-cover.capacitive-fpi-banner {background-image: radial-gradient(circle, #bbc2cb, #8c8d94, #5e5b5f, #312f30, #000000)!important;} #mikromedia-8th .videodesc .col-md-4 {padding: 0 20px;} #mikromedia-8th #mikromedia-cover picture img {width: auto; padding: 140px 0 60px 0;max-height: 100%; max-width: 90%;} #mikromedia-8th #mikromedia-cover .standard-wrap {position: absolute; text-align: center; bottom: 0px;width: 100%;} #mikromedia-8th #mikromedia-cover .mikromedia-logo { padding-left: 20px; position: absolute;top: 40px;} #mikromedia-8th #mikromedia-cover .mikromedia-logo img{ max-width: 120px; margin: 0; } #mikromedia-8th #mikromedia-cover .mikromedia-logo p{color: #fff;font-size: 14px;margin-top: 3px;} #mikromedia-8th #mikromedia-cover .standard-wrap.share {right: 0;top: 40px; z-index: 10;direction: rtl;bottom: inherit;bottom: initial;;} #mikromedia-8th #mikromedia-cover .standard-wrap.share i {float: right; font-size: 28px; color: #bbb; transition: all 0.3s ease-in-out; } #mikromedia-8th #mikromedia-cover .standard-wrap.share i:hover { color: #ffcb05; } #mikromedia-8th #mikromedia-cover .standard-wrap.share i.share-active { color: #ffcb05; } #mikromedia-8th #mikromedia-cover h3{ color: #fff; font-weight: 500; font-size: 11px; height: auto;padding: 20px 0 30px 0;line-height: 1.4;} @media only screen and (min-width: 360px) { #mikromedia-8th #mikromedia-cover h3 { font-size: 13px; } } @media only screen and (min-width: 600px) { #mikromedia-8th #mikromedia-cover h3{font-size:14px;} } @media only screen and (min-width: 767px) { #mikromedia-8th #mikromedia-cover picture img {padding: 120px 0 20px 0;} #mikromedia-8th #mikromedia-cover .standard-wrap.share{position: absolute;} #mikromedia-8th #mikromedia-cover .codegrip-logo {padding: 0;position: absolute;left: 20px;right: 0;} } @media only screen and (min-width: 900px) { #mikromedia-8th #mikromedia-cover picture img {padding: 70px 0 0px 0; max-width: 60%;} .product-mikromedia-7-capacitive-fpi-with-frame #mikromedia-8th #mikromedia-cover picture img, .product-mikromedia-7-capacitive-fpi-with-bezel #mikromedia-8th #mikromedia-cover picture img {padding: 50px 0 0px 0;} .product-mikromedia-5-for-stm32f4-capacitive-fpi-with-frame #mikromedia-8th #mikromedia-cover picture img, .product-mikromedia-5-for-stm32f4-capacitive-fpi-with-bezel #mikromedia-8th #mikromedia-cover picture img {padding: 50px 0 0px 0;} #mikromedia-8th #mikromedia-cover .standard-wrap.share {top: 120px;} #mikromedia-8th #mikromedia-cover .mikromedia-logo{top:50px;} } @media only screen and (min-width: 992px) { #mikromedia-8th #mikromedia-cover{ height: 60vh;} #mikromedia-8th #mikromedia-cover .standard-wrap {text-align: left;bottom: unset;bottom: inherit;top: 46%;} #mikromedia-8th #mikromedia-cover h3 {width: 230px;} #mikromedia-8th .mikromedia-screen .col-md-4{ padding: 0 18px;} #mikromedia-8th .mikromedia-screen .col-md-4:first-of-type{padding: 0 36px 0 0;} #mikromedia-8th .mikromedia-screen .col-md-4:last-of-type{padding: 0 0 0 36px;} #mikromedia-8th .content-1-2-3 .col-md-4 p {padding-right: 10px;} } @media only screen and (min-width: 1200px) { #mikromedia-8th #mikromedia-cover .standard-wrap.share{ width: 1170px; margin: 0 auto;left: 0;right: 0;top: 150px;} #mikromedia-8th #mikromedia-cover .mikromedia-logo { width: 1170px;margin: 0 auto;left: 0;right: 0;padding: 0;top: 60px;} #mikromedia-8th #mikromedia-cover .mikromedia-logo img {max-width: 200px;} #mikromedia-8th #mikromedia-cover .codegrip-logo {left: 0;width: 1170px;margin: 0 auto;right: 0;top: 45px;} #mikromedia-8th #mikromedia-cover .standard-wrap {width: 1170px;margin: 0 auto;left: 0;right: 0;} #mikromedia-8th #mikromedia-cover .standard-wrap p {width: 300px;font-size: 22px;} #mikromedia-8th #mikromedia-cover h3 {font-size: 18px;width: 260px;} #mikromedia-8th .content-1-2-3 .col-md-4 {padding: 0 5px;} #mikromedia-8th .content-1-2-3 .col-md-4:first-of-type {padding: 0 10px 0 0;} #mikromedia-8th .content-1-2-3 .col-md-4:last-of-type {padding: 0 0 0 10px;} #mikromedia-8th #mikromedia-cover .standard-wrap.share i{padding: 5px 2px 5px 10px;} } @media only screen and (min-width: 1300px) { #mikromedia-8th #mikromedia-cover .standard-wrap.share { width: 1280px; } #mikromedia-8th #mikromedia-cover .standard-wrap { width: 1280px; } #mikromedia-8th #mikromedia-cover .codegrip-logo { width: 1280px; margin: 0 auto; } #mikromedia-8th #mikromedia-cover p { width: 930px; } #mikromedia-8th #mikromedia-cover .mikromedia-logo { width: 1280px; } #mikromedia-8th #mikromedia-cover .mikromedia-logo img{ max-width: 220px;} #mikromedia-8th #mikromedia-cover h3 {width: 260px;} } @media only screen and (min-width: 1900px) { #mikromedia-8th #mikromedia-cover .standard-wrap{top: 40%;} #mikromedia-8th #mikromedia-cover picture img{padding: 90px 0 0px 0;} #mikromedia-8th #mikromedia-cover picture.npading img {padding: 0;} #mikromedia-8th #mikromedia-cover .mikromedia-logo{top: 90px;} #mikromedia-8th #price-top{top: 140px;} #mikromedia-8th #mikromedia-cover .standard-wrap.share{top: 180px;} } @media screen and (min-width: 900px) and (max-height: 700px){ #mikromedia-8th #mikromedia-cover{ height: 450px;} #mikromedia-8th #mikromedia-cover picture img {padding: 43px 0 0 0;} #mikromedia-8th #mikromedia-cover h3 {width: 280px;} } @media screen and (min-width: 900px) and (min-height: 1300px){ #mikromedia-8th #mikromedia-cover picture img {padding: 170px 0 0px 0;} #mikromedia-8th #mikromedia-cover .standard-wrap{bottom: 0;top: initial; top: inherit;width: 100%;} #mikromedia-8th #mikromedia-cover h3 {width: 100%;text-align: center;} } @media screen and (min-width: 1300px) and (min-height: 1200px){ #mikromedia-8th #mikromedia-cover picture img {min-width: 780px;padding-top: 5%;} } @media only screen and (min-width: 2000px) and (min-height: 1600px){ #mikromedia-8th #mikromedia-cover picture img {min-width: 1100px;padding-top: 12%;} } @media only screen and (min-width: 3000px) and (min-height: 2000px){ #mikromedia-8th #mikromedia-cover picture img {min-width: 1200px;padding-top: 8%;} } #mikromedia-8th .what-is-in-box{margin: 0 0 60px 0;} #mikromedia-8th .what-is-in-box .in-box{display: none!important;} #mikromedia-8th .what-is-in-box .in-box-mobile{display: block!important;} #mikromedia-8th .buttons_bottom_block{padding: 0;} #mikromedia-8th .buy-field .our_price_display span{background: initial; background:inherit; padding: 0;line-height: 1.1!important;} #mikromedia-8th #original_price .price{color: #343434} #mikromedia-8th #main-buy-field{margin: 0 0 60px 0;} /* standard buy section */ .buy-field .bf-add {display: flex;padding: 40px 0;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;position: relative;flex-direction: column;} .buy-field .bf-add p{font-size: 14px!important;color: #343434!important;line-height: 18px!important;} .buy-field .bf-add .bf-discount {display: none;} .buy-field .bf-add .bf-discount-percent{line-height: 18px;position: absolute;top: -20px;left: -20px;padding: 2px 10px;background: #FF4219;color: #fff!important;font-weight: 600; border-radius: 5px;margin: 0; text-align: center;} .buy-field .bf-add .prod-name{margin: 0 0 20px 0!important;font-size: 24px!important;font-weight: 800!important;padding: 0!important; height: initial!important;height: inherit!important;text-align: center;line-height: 32px;color: #343434;} .buy-field .bf-add .prod-info {margin-bottom: 5px!important; color: #B3B3B3!important;line-height: 17px!important;text-align: center;} .buy-field .bf-add .prod-info:last-of-type{margin-bottom: 30px!important;} .buy-field .bf-add .prod-license-wrap .prod-license-val{font-weight: 600;} .buy-field .bf-add .quantity-wrap {margin-bottom: 30px;} .buy-field .bf-add .quantity-wrap .quantity_select{text-align: center;} .buy-field .bf-add .quantity-wrap .quantity_select button{border: 0;outline: none;width: 32px;height: 32px;border-radius: 5px; background: #1592E6;color: #fff;position: relative;z-index: 01;top: -0.5px;} .buy-field .bf-add .quantity-wrap .quantity_select button.quantity-minus{left: 17px;} .buy-field .bf-add .quantity-wrap .quantity_select button.quantity-plus{right: 17px;} .buy-field .bf-add .quantity-wrap .quantity_select input{width: 90px;height: 32px;text-align: center;outline: none;position: relative; -webkit-appearance: textfield;-moz-appearance: textfield;appearance: textfield;} .buy-field .bf-add .quantity-wrap .quantity_select input::-webkit-inner-spin-button, .buy-field .bf-add .quantity-wrap .quantity_select input::-webkit-outer-spin-button{ -webkit-appearance: none;} .buy-field .bf-add .quantity-wrap .quantity_select input.clicked{border: 1px solid #136dc7!important;} .buy-field .bf-add .quantity-wrap .quantity_jump{text-align: center;margin: 0!important;line-height: 26px!important;} .buy-field .bf-add .quantity-wrap .quantity_jump span{display: inline-table;width: 26px; height: 26px;border: 1px solid #E6E6E6; border-radius: 5px;padding: 4px;margin: 0 7px;cursor: pointer;line-height: 17px;} .buy-field .bf-add .quantity-wrap .quantity_jump span:hover{background: #e6e6e6;} .buy-field .bf-add .quantity-wrap .quantity_jump span.clicked{border: 1px solid #136dc7;background: #fbfbfb;} .buy-field .bf-add .price-wrap{width: 200px;margin: 0 auto 30px auto;} .buy-field .bf-add .price-wrap #priceLabel-wrap{position: relative;top: -5px;left: 5px;color: #B3B3B3;} .buy-field .bf-add .price-wrap .price{color: #343434;font-size: 32px;font-weight: 800;margin: 0 auto 10px auto;display: block;text-align: center;} .buy-field .bf-add .price-wrap .bf-old-price{display:none; margin: 0 0 5px 0!important;line-height: 18px;text-align: center;} .buy-field .bf-add .price-wrap .bf-old-price span {text-decoration: line-through;margin-left: 3px;} .buy-field .bf-add .price-wrap .you-save, .buy-field .bf-add .price-wrap .total-save {display: none; background-color: #FF4219; padding: 5px; width: fit-content; color: #fff!important; font-weight: 600;margin: 5px 0!important;line-height: 18px;text-align: center;} .buy-field .bf-add .price-wrap .you-save span, .buy-field .bf-add .price-wrap .total-save span{margin-left: 3px;margin: 0;} .buy-field .bf-add .add-to-cart-wrap{text-align: center;} .buy-field .bf-add .add-to-cart-wrap button{color: #fff;background: #1592E6;border-color: #1592E6;border-radius: 50px;width: 200px; font-size: 16px;font-weight: 500;} .buy-field .bf-add .add-to-cart-wrap button:hover {background: #136dc7;} .buy-field .bf-add .add-to-cart-wrap button i{font-weight: 500;} .buy-field .bf-security {margin: 40px 0 0 0;flex-direction: column;display: flex;} .buy-field .bf-security .bf-s-col-5 {padding: 0 0 30px 0;} .buy-field .bf-security .bf-s-col-5 p{display: flex;} .buy-field .bf-security .bf-s-col-5 a:first-of-type p{margin: 0 0 15px 0;} .buy-field .bf-security .bf-s-col-5 p i{font-size: 26px;margin: 5px 10px 0 0;color: #1592e6;} .buy-field .bf-security .bf-s-col-5 p span{font-size: 14px;line-height: 22px;} .buy-field .bf-security .bf-s-col-5 p:hover i, .buy-field .bf-security .bf-s-col-5 p:hover span {color: #136dc7;} .buy-field .bf-security .checkoutLogo{width: 50px;float: left;} .buy-field .bf-security .checkoutTxt{width: calc(100% - 50px);float: left;padding-left: 20px;font-size: 13px!important;margin-bottom: 30px!important; line-height: 18px!important;} .buy-field .bf-security .checkoutTxt br{display: none;} .buy-field .bf-security .checkoutPay{width: 90%;} .buy-field .bf-add #buyLicense-graphicalPluginsWrapper{margin-top: 20px;display: none;} .buy-field .quantity-table-wrap{ position: relative;display: block;cursor: context-menu;text-align: center;margin: 20px 0 0 0;} .buy-field .quantity-table-wrap .quantity-table{display: inline-block;width: auto;position: relative;} .buy-field .quantity-table-wrap .quantity-table-content{background-color: #fff;min-width: auto; border: 1px solid #E6E6E6; border-radius: 5px;position: relative;z-index: 1;font-size: 14px;} .buy-field .quantity-table-wrap .quantity-table-content table{margin: 0 auto;} .buy-field .quantity-table-wrap .quantity-table-content table td, .buy-field .quantity-table-wrap .quantity-table-content table th{text-align: center;padding: 8px 15px; border: 0.5px solid #e6e6e6;} .buy-field .quantity-table-wrap .check{margin: 0;display: none;color: #1592e6!important;font-size: 13px!important;} #mikromedia-8th #buy-mcu .buy-field.disabled-builder-text .prod-name{color: #dedede;} #mikromedia-8th #buy-mcu .buy-field.disabled-builder-text .quantity-wrap .quantity_select input{border: 1px solid #e6e6e6;} @media only screen and (min-width:600px) { .buy-field .bf-security .checkoutPay{width: 60%;} } @media only screen and (min-width:992px){ #mikromedia-8th .what-is-in-box .in-box{display: block!important;} #mikromedia-8th .what-is-in-box .in-box-mobile{display: none!important;} #mikromedia-8th #buy-mcu .buy-field.disabled-builder-text .quantity-table-wrap{display: none;} #mikromedia-8th #buy-mcu .buy-field .quantity-table-wrap{display: none;} #mikromedia-8th #buy-mcu .buy-field .quantity-table-wrap.active{display: inline-block;} .buy-field .quantity-table-wrap{ position: relative;display: inline-block;text-align: left;margin: 12px 0 0 0;} .buy-field .quantity-table-wrap .check{display: block;} .buy-field .quantity-table-wrap .quantity-table{display: none;padding-top: 10px;width: 210px;position: absolute; left: -5px;} .buy-field .quantity-table-wrap:hover .quantity-table{display: inline-block;} .buy-field .quantity-table-wrap:hover .check {color: #136dc7;} .buy-field .quantity-table-wrap:hover .check i {color: #136dc7;} .buy-field .quantity-table-wrap .quantity-table-content{position: absolute;} .buy-field .bf-add .price-wrap .you-save, .buy-field .bf-add .price-wrap .total-save{text-align: left;} .buy-field .bf-add .price-wrap .bf-old-price{text-align: left;} .buy-field .bf-add .price-wrap .price{text-align: left;} .buy-field .bf-add .prod-name{text-align: left;} .buy-field .bf-add .prod-info:last-of-type{margin-bottom: 0px!important;} .n-license-usage-duration.inactive p{color: #343434;} .buy-field{display: block;} .buy-field .bf-add{padding: 20px 0 20px 0;border: 1px solid #e6e6e6;border-radius: 5px;flex-direction: row;} .buy-field .bf-add .bf-add-col-5{width: 40%;padding: 0 30px 0 20px;border-right: 0.5px solid #e6e6e6;} .buy-field .bf-add .prod-license-wrap .prod-license-l{display: inline-block;width: 110px;} .buy-field .bf-add .prod-license-wrap{margin-bottom: 5px;} .buy-field .bf-add .prod-license-usage{margin-bottom: 15px;} .buy-field .bf-add .price-wrap #priceLabel-wrap{left: 0;} .buy-field .bf-add .prod-info{margin-bottom: 5px!important;text-align: left;} .buy-field .bf-add .bf-add-col-7{width: 60%;padding: 0 20px 0 30px;} .buy-field .bf-add .bf-add-col-7 form {display: flex;width: 100%;} .buy-field .bf-add .bf-add-col-7 .bf-add-3{width: 33.3333%;margin: 0 auto;} .buy-field .bf-add .quantity-wrap .quantity_select{text-align: left;margin-bottom: 15px!important;} .buy-field .bf-add .quantity-wrap .quantity_select button{width: 28px;height: 28px;} .buy-field .bf-add .quantity-wrap .quantity_select button:hover{background: #136dc7;} .buy-field .bf-add .quantity-wrap .quantity_select button.quantity-minus{left: 0;} .buy-field .bf-add .quantity-wrap .quantity_select input{right: 17px;height: 28px;} .buy-field .bf-add .quantity-wrap .quantity_select button.quantity-plus{right: 34px;} .buy-field .bf-add .quantity-wrap .quantity_jump{text-align: left;} .buy-field .bf-add .quantity-wrap .quantity_jump span{text-align: center; margin: 0 8px;} .buy-field .bf-add .quantity-wrap .quantity_jump span:first-of-type{margin-left: 0;} .buy-field .bf-add .add-to-cart-wrap button{width: 100%} .buy-field .bf-add #buyLicense-graphicalPluginsWrapper .pid:last-of-type{margin-bottom: 0!important;} .buy-field .bf-security{flex-direction: row;padding: 20px 0 20px 0;border: 1px solid #e6e6e6;border-radius: 5px;} .buy-field .bf-security .bf-s-col-5{width: 40%;padding: 0 30px 0 20px;border-right: 0.5px solid #e6e6e6;} .buy-field .bf-security .bf-s-col-5 p span{line-height: 21px;} .buy-field .bf-security .bf-s-col-5 p i{font-size: 22px;} .buy-field .bf-security .bf-s-col-5 a:first-of-type p{margin: 0 0 20px 0;} .buy-field .bf-security .bf-s-col-5 a:last-of-type p{margin: 0;} .buy-field .bf-security .bf-s-col-7{width: 60%;display: flex;padding: 0 20px 0 30px;} .buy-field .bf-security .bf-s-col-7 div:first-of-type{width: 54%;} .buy-field .bf-security .bf-s-col-7 div:last-of-type{width: 46%;} .buy-field .bf-security .checkoutPay{width: 100%;padding: 0 0 0 20px;} .buy-field .bf-security .checkoutTxt{margin: 0!important;} } @media only screen and (min-width:1200px){ #mikromedia-8th .what-is-in-box{margin: 0 0 80px 0;} #mikromedia-8th #main-buy-field{margin: 0 0 80px 0;} .buy-field .bf-add .bf-add-col-5{width: 44%;} .buy-field .bf-add .bf-add-col-7{width: 56%;} .buy-field .bf-add .add-to-cart-wrap{text-align: right;} .buy-field .bf-add .add-to-cart-wrap button{width: 200px;} .buy-field .bf-security .bf-s-col-5{width: 44%;} .buy-field .bf-security .bf-s-col-7{width: 56%;} .buy-field .bf-security .bf-s-col-5 p i{margin: 0;width: 40px;} .buy-field .bf-security .checkoutLogo{width: 40px;} } @media only screen and (min-width:1220px){ .buy-field .bf-add .bf-discount-percent{left: -25px;}} @media only screen and (min-width:1300px){ .buy-field .bf-add .bf-discount-percent{left: -10px;} .buy-field .bf-add .price-wrap{position: relative;left: 10px;} .buy-field .bf-security .bf-s-col-7 div:first-of-type{width: 60%;} .buy-field .bf-security .bf-s-col-7 div:last-of-type{width: 40%;} } @media only screen and (min-width:1330px){ .buy-field .bf-add .bf-discount-percent{left: -25px;} } /* DOWNLOAD SECTION */ #mikromedia-8th #downloads .col-md-4{margin-bottom: 30px;} #mikromedia-8th #downloads .col-md-4:last-of-type{margin-bottom: 0px;} #mikromedia-8th #downloads .col-md-4 a.btn-download span{width: 100%;line-height: 24px; height: 42px;} #mikromedia-8th #downloads h4 { height: auto; padding: 40px 0 10px 0; margin: 0; } #mikromedia-8th #downloads .row:nth-child(2) h4 { padding: 0 0 10px 0; } #mikromedia-8th #downloads a { font-size: 14px; display: flex;} #mikromedia-8th #downloads a:hover span {color: #136dc7;} #mikromedia-8th #downloads a i.fa-cloud-download { margin: 0 10px 0px 0; position: relative; top: -4px; } #downloads h2 {text-transform: uppercase;} /* DOWNLOAD SECTION end */ /* section CHOOSE MCU AND DISPLAY *//* section CHOOSE MCU AND DISPLAY *//* section CHOOSE MCU AND DISPLAY */ #mikromedia-8th .choose-extend .left-desc{margin: 0 0 30px 0;} #mikromedia-8th .choose-extend img { max-width: 100%; } #mikromedia-8th .choose-extend h3 { max-width: 100%; } #mikromedia-8th .choose-extend .standard-wrap:after { content: ''; clear: both; display: table; } #mikromedia-8th .choose-extend .col-md-7, #mikromedia-8th .choose-extend .col-md-6 , #mikromedia-8th .choose-extend .col-md-5 { padding: 0; } #mikromedia-8th .choose-extend .row-file{margin: 0 0 30px 0;} #mikromedia-8th .choose-extend .row-feature{margin: 30px 0 0 0;} #mikromedia-8th .choose-extend .row-feature .feature-desc-wrap{width: 50%;float: left;margin: 0 0 30px 0;} /* builder row */ #mikromedia-8th .choose-extend .row-builder { margin-right: -10px; } #mikromedia-8th .choose-extend .row-builder select { font-size: 12px; width: calc(100% - 10px); height: 40px; border: 2px solid #5F5F5F; border-radius: 5px; outline-width: 0; margin: 0 0 10px 0; } /* pid and weight row */ #mikromedia-8th .choose-extend .row.pid > p { margin: 0; padding: 0; } #mikromedia-8th .choose-extend .row.pid > p label { font-weight: 500; font-size: 14px; margin: 0; } #mikromedia-8th .choose-extend .row.pid > p span { font-size: 14px; } #mikromedia-8th .row.row-file .btn-download{ display: flex;align-items: center;font-size: 14px;} #mikromedia-8th .row.row-file .btn-download i{ margin-top:0px; } #mikromedia-8th .row-price{ margin:30px 0px; } #mikromedia-8th .choose-extend .standard-wrap:last-of-type .buy-field {margin: 60px 0 60px 0;} #mikromedia-8th #buy-mcu .buy-field .bf-add-col-7 .quantity_select .custom-quantity-up{right: 17px;} #mikromedia-8th #buy-mcu .buy-field .bf-add-col-7 .quantity_select .custom-quantity-down{left: 17px;} #mikromedia-8th #buy-mcu .buy-field .bf-add .prod-name {font-size: 22px!important;} @media only screen and (min-width: 992px) { #mikromedia-8th #downloads .col-md-4:nth-child(3n+1){padding-left: 12px;} #mikromedia-8th #downloads .col-md-4:nth-child(3n+2){padding-right: 12px;} #mikromedia-8th #downloads .col-md-4:nth-child(3n+3){padding: 0 6px;} #mikromedia-8th #buy-mcu .buy-field .bf-add-col-7{display: flex;} #mikromedia-8th #buy-mcu .buy-field .bf-add-col-7 .quantity_select .custom-quantity-up{right: 34px;} #mikromedia-8th #buy-mcu .buy-field .bf-add-col-7 .quantity_select .custom-quantity-down{left: 0;} #mikromedia-8th .choose-extend img { max-width: 470px; } #mikromedia-8th .choose-extend .col-xs-12.col-sm-12.col-md-5 .codegrip-product-info .codegrip-buy { margin: 0; } #mikromedia-8th .choose-extend .col-md-5 > .row h3 { height: auto;padding: 0 0 30px 0; } #mikromedia-8th .choose-extend .col-md-5 .row.codegrip-product-info { position: absolute;width: 100%;bottom: 0; } #mikromedia-8th .choose-extend .col-md-5 .row.codegrip-product-info p { text-align: left; } #mikromedia-8th .choose-extend .col-md-5 .codegrip-product-info .codegrip-buy .row-price { margin:30px 0 0 0; } #mikromedia-8th .choose-extend .col-md-5 .codegrip-product-info .row.pid{ margin-top: 15px; font-size: 14px;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-7.left-desc{width: 50%;margin: 0;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5.right-desc{width: 50%; padding-left: 10px;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .row.row-desc-hardcoded {font-size: 16px;line-height: 1.8;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .buy.selected-mcu-card-buy.disabled-builder-text { padding-bottom: 5px;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .row.row-file {margin:20px 0 0 0; } #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .row.row-price {margin:30px 0 0 0; } #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .row-builder { min-height: 170px; } #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .buy { min-height: 165px; padding-right: 10px;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .buy .row-buy.no-gutters .col-md-5{padding: 0;} #mikromedia-8th .choose-extend .standard-wrap:last-of-type .buy-field {margin: 80px 0 80px 0;} } @media only screen and (min-width: 1200px) { #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5.right-desc{padding-left: 20px;} #mikromedia-8th #buy-mcu .col-xs-12.col-sm-12.col-md-5 .buy .row-buy.no-gutters .col-md-5{padding: 0;} } #mikromedia-8th #supported-mcus .standard-wrap {position: relative;} #mikromedia-8th #supported-mcus { position: relative; padding-bottom: 65px;} #mikromedia-8th .supported-8th { height: 400px; overflow-y: auto; overflow-x: hidden; display: block; margin: 54px 0 40px 0; border-bottom: 1px solid #ddd; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px solid #ddd; border-top: none; background: #fbfbfb; } #mikromedia-8th .supported-8th thead { position: absolute; width: 100%; max-width: 1280px; background: #fff; top: 181px; left: 0; right: 0; margin: 0 auto; } #mikromedia-8th .supported-8th thead th { text-align: center; font-weight: 500; font-size: 14px; white-space: nowrap; } #mikromedia-8th .supported-8th thead th:first-child input { border-top-left-radius: 5px; } #mikromedia-8th .supported-8th thead th:last-child input { border-top-right-radius: 5px; } #mikromedia-8th .supported-8th thead tr.fixed_top th { padding: 5px; } #mikromedia-8th .supported-8th thead tr.ft_search th { padding: 0; } #mikromedia-8th .supported-8th thead input { border: 1px solid #ddd; border-left-color: #f3f3f3; border-right: none; width: 100%; padding: 0 0 0 10px; font-weight: 600; height: 28px;} #mikromedia-8th .supported-8th thead input:focus { outline-width: 0; } #mikromedia-8th .supported-8th thead input::placeholder { color: #ddd; font-size: 12px; font-weight: 400;} #mikromedia-8th .supported-8th thead input:first-child { border-left-color: #ddd; } #mikromedia-8th .supported-8th thead th:last-child input { border-right: 1px solid #ddd; } #mikromedia-8th .supported-8th tbody { background: #fff; } #mikromedia-8th .supported-8th tbody tr { border-bottom: 1px solid #ddd; } #mikromedia-8th .supported-8th tbody tr:last-child { border-bottom: none; } #mikromedia-8th .supported-8th tbody td { text-align: center; font-size: 14px; white-space: nowrap; padding: 10px 5px; } #mikromedia-8th .supported-8th tbody td a { font-size: 14px; } #mikromedia-8th #supported-mcus-pagination {text-align: center;} #mikromedia-8th #supported-mcus-pagination .pagination{margin: 0 auto;} #mikromedia-8th #supported-mcus-pagination .pagination>li{display: inline-block;margin-bottom: 15px;} #mikromedia-8th #supported-mcus-pagination .pagination>li a{width: 32px;height: 32px;padding: 5px 5px;border-radius: 5px;color: #231f20;} #mikromedia-8th #supported-mcus-pagination .pagination .active a{font-weight: 500;} @media only screen and (max-width: 1200px) { #mikromedia-8th #supported-mcus {padding-bottom: 45px;} #mikromedia-8th .supported-8th thead input {height: 25px;} #mikromedia-8th .supported-8th thead {position: relative;} #mikromedia-8th .supported-8th { overflow-x: auto; border-top: 1px solid #ddd; border-radius: 5px; margin: 0px 0 40px 0;} #mikromedia-8th .supported-8th thead th { font-size: 12px; line-height: 1; } #mikromedia-8th .supported-8th thead tr.fixed_top th { padding: 5px; font-weight: 600; } #mikromedia-8th .supported-8th thead tr.ft_search th { padding: 0; line-height: 2; } #mikromedia-8th .supported-8th thead .ft_search th { padding: 10px 5px; } #mikromedia-8th .supported-8th thead th:first-child input { border-top-left-radius: 0; border-left: none; } #mikromedia-8th .supported-8th thead th:last-child input { border-top-right-radius: 0; border-right: none; } } @media only screen and (max-width: 767px) { .product-mikromedia-7-capacitive-fpi-with-frame #mikromedia-8th #mikromedia-cover picture img { padding: 125px 0 35px 0;} .product-mikromedia-7-capacitive-fpi-with-bezel #mikromedia-8th #mikromedia-cover picture img {padding: 140px 0 45px 0;} .product-mikromedia-5-for-stm32f4-capacitive-fpi-with-frame #mikromedia-8th #mikromedia-cover picture img {padding: 100px 0 45px 0;} .product-mikromedia-5-for-stm32f4-capacitive-fpi-with-bezel #mikromedia-8th #mikromedia-cover picture img {padding: 110px 0 40px 0;} } #mikromedia-8th #supported-displays .supported-8th { height: auto; } #mikromedia-8th .displays-8th thead { top: 805px; } #mikromedia-8th .builder-extend a.btn-download span{width: 100%;} /* MIKROE PRODUCT BUILDER MCU*/ #mikromedia-8th .builder-extend .mikroeproductbuilder-container .mikroeproductbuilder-select-container {display: flex;justify-content: center;align-items: center; flex-direction: column;margin-top: 20px;} #mikromedia-8th .builder-extend .mikroeproductbuilder-container .select2-container .select2-selection--single {height: 38px;} .row.no-gutters [class*='col-'] {padding-right: 0;padding-left: 0;} /* NOVI */ #mikromedia-8th .builder-extend .row h4 {font-size: 14px;text-align: center;margin: 0 0 20px 0;} #mikromedia-8th .builder-extend .row.row-short-desc, #mikromedia-8th .builder-extend .row.row-short-desc p {text-align: left;} #mikromedia-8th .builder-extend .mikroeproductbuilder-select-clear-all{margin: 0 0 30px 0;} #mikromedia-8th .builder-extend .mikroeproductbuilder-select-clear {text-align: left!important;} /* PRODUCT BUILDER MCU price */ #mikromedia-8th .builder-extend .row-price .custom-price {color: #000;margin: 0;font-family: 'Montserrat', Arial, Helvetica, sans-serif;font-weight: 600; font-size: 26px;text-align: center;} #mikromedia-8th .builder-extend .row-price .custom-original-price {text-decoration: line-through;text-decoration-color: #ffcb05;color: #231f20;font-weight: 300; font-size: 16px;text-align: center;display: none;} #mikromedia-8th .builder-extend .row-price .custom-quantity-price-table{display:none !important;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container{text-align: center;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container button {width: 170px;border-radius: 50px;color: black;font-weight: 500;font-size: 14px;padding: 7px 12px;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off { cursor: unset; outline: none;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off:hover{ background-color: #ffcb05;border-color: #ffcb05; } #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off.free { box-shadow: none;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off.free:active { box-shadow: none; background-color: #ffcb05; } #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off.free:focus { box-shadow: none; background-color: #ffcb05; border-color: #ffcb05; } #mikromedia-8th .builder-extend .row-price .add-to-cart-container button.add_to_card_off.free:hover { background-color: #ffcb05; } #mikromedia-8th .builder-extend .row-price .add-to-cart-container button i {margin-right: 10px;color: black;font-weight: 500;font-size: 14px;} #mikromedia-8th .builder-extend .buy .selected-mcu-card-name {margin-right: 0px !important;font-size: 14px;margin-top: 1px;} #mikromedia-8th .builder-extend .buy .row-buy p {font-size: 14px;} #mikromedia-8th .builder-container .mikroeproductbuilder-select-box {max-width: 200px;width: 80%;min-height: 120px;} #mikromedia-8th .builder-container .mikroeproductbuilder-select-box .select2-container{width: 100%;} #mikromedia-8th .builder-container .mikroeproductbuilder-select-clear-all a{font-size: 12.75px;} /* Hide HTML5 Up and Down arrows. */ input.custom-quantity-input [type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} input.custom-quantity-input[type="number"] {-moz-appearance: textfield;} #mikromedia-8th .builder-extend .row p.mikroeproductbuilder-select-label {font-size: 14px;text-align: left;margin-bottom:3px;} #mikromedia-8th .builder-extend .row p.mikroeproductbuilder-select-clear a{font-size:12px;} #mikromedia-8th .builder-extend .row p{text-align: center;} @media only screen and (min-width: 600px) { #mikromedia-8th .builder-extend .mikroeproductbuilder-container .mikroeproductbuilder-select-container {justify-content: space-evenly;flex-direction: row;} #mikromedia-8th .builder-extend .row h4 {font-size: 17px;} .select2-container {z-index: 4001;width: 170px !important;} } @media only screen and (min-width: 768px) { #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box {border-left: 1px solid #e6e6e6;padding-left: 10px;} #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box h4, #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box p {text-align: left;} #mikromedia-8th .builder-extend .buy .selected-mcu-card-name{margin-bottom:0px;} } @media only screen and (min-width: 992px) { #mikromedia-8th .builder-extend .standard-wrap .codegrip-desc p{ text-align: left; } #mikromedia-8th .builder-extend .row.feature-desc :first-child .feature-desc-box {border: none;} #mikromedia-8th .builder-extend .buy .row.row-buy .buy-box {display: flex;justify-content: left;align-items: baseline;} #mikromedia-8th .builder-extend .buy .row.row-buy h4, #mikromedia-8th .builder-extend .buy .row.row-buy p {text-align: left;margin-right: 10px;} #mikromedia-8th .builder-container .mikroeproductbuilder-select-box {width: 32%;min-height: 100px;} #mikromedia-8th .builder-extend .row-price .custom-price {line-height: 1.4;} #mikromedia-8th .builder-extend .row.row-price p.custom-price {text-align: left;} #mikromedia-8th .builder-extend .row-price .custom-original-price {position: absolute;left: 23px;top: -25px;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container {text-align: right;} #mikromedia-8th .builder-extend .row-price .add-to-cart-container button {width: 100%;} #mikromedia-8th .builder-extend .row h4 {font-size: 14px;font-size: 14px;} #mikromedia-8th .choose-extend .row-feature .feature-desc-wrap{width: 20%;} #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box {height: 70px;display: flex;justify-content: space-between;flex-direction: column;align-items: baseline;padding-bottom: 7px;} #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box h4, #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box p {margin: 0px;} #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box h4 {font-size: 13px;} #mikromedia-8th .builder-extend .row.feature-desc .feature-desc-box p {font-size: 13px;} #mikromedia-8th .builder-extend .row p.mikroeproductbuilder-select-clear {text-align: left;} } @media only screen and (min-width: 992px) and (max-width:1300px) { #mikromedia-8th .mikroeproductbuilder-container .select2-container--default .select2-selection--single .select2-selection__rendered {font-size: 10px;} #mikromedia-8th .builder-extend .row p.mikroeproductbuilder-select-label {font-size: 12px;} } @media only screen and (max-width: 991px){ #mikromedia-8th #beforeafter {border-radius: 20px;} #mikromedia-8th .videomm p {bottom: 10px;} } @media only screen and (min-width:991px) and (max-width:1299px){.select2-container {width: 100% !important;}} /* Hide HTML5 Up and Down arrows. */ input.custom-quantity-input [type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} #mikromedia-8th #uniform-group_24{ display:none !important;} /*Slider For mm-7*/ #slider-bar-mm7 .col-md-4 {padding: 0 20px;} #beforeafter { width: 800px; max-width: 100%; margin: 0 auto; border-radius: 50px; } /* Plugin CSS */ .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px; } .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -6px; } .twentytwenty-container { touch-action: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; } .twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; } .twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .twentytwenty-before-label { opacity: 0; } .twentytwenty-before-label:before { content: "With Bezel"; } .twentytwenty-after-label { opacity: 0; } .twentytwenty-after-label:before { content: "With Frame"; } .twentytwenty-horizontal .twentytwenty-before-label:before { left: 10px; } .twentytwenty-horizontal .twentytwenty-after-label:before { right: 10px; } .twentytwenty-vertical .twentytwenty-before-label:before { top: 10px; } .twentytwenty-vertical .twentytwenty-after-label:before { bottom: 10px; } .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); } .twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; } .twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; } .twentytwenty-before { z-index: 20; } .twentytwenty-after { z-index: 10; } .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow { border-right: 6px solid white; left: 50%; margin-left: -17px; } .twentytwenty-right-arrow { border-left: 6px solid white; right: 50%; margin-right: -17px; } .twentytwenty-up-arrow { border-bottom: 6px solid white; top: 50%; margin-top: -17px; } .twentytwenty-down-arrow { border-top: 6px solid white; bottom: 50%; margin-bottom: -17px; } #mikromedia-8th #specification .table-wrap { border: 1px solid #ddd; border-radius: 5px; overflow: hidden; } #mikromedia-8th #specification .table-data-sheet tr { border-bottom: 1px solid #ddd; font-size: 14px; } #mikromedia-8th #specification .table-data-sheet tr:last-child { border: none; } #mikromedia-8th #specification .table-data-sheet tr.even { background: #fff; } #mikromedia-8th #specification .table-data-sheet td { padding: 10px 30px; } @media only screen and (max-width: 767px) { #mikromedia-8th #specification .table-data-sheet td { padding: 10px; line-height: 1.3; } }