/******************** PRODUCT *********************/ #product {background-color: #F0F0F0;} #product > .row > .col-6 {margin:0 !important;} #product > .row > .col-6:first-child {width: 49.3%; position:relative; } #product > .row > .col-6:first-child > div{ width:565px; float:right; height:100%; position:relative;} #product > .row > .col-6:first-child > div img{ width: 100%; height:auto; position:absolute; top:7%;} #product > .row > .col-6:last-child {width: 50.7%; background-color:#fff; } #product > .row > .col-6:last-child > div{ width:480px; float:left; padding: 65px 50px 50px; } .go_to_products a{color: #0087DC; text-decoration: none; font-weight: 600; font-size: 18px;} .go_to_products a:hover{text-decoration:underline;} #product .go_to_products {margin-bottom:60px;} #product h2{margin-bottom:30px;} #product h1{ font-family:'DeltaSans', sans-serif; color: #414141;font-weight:normal; margin:0; padding:0; font-size:36px; line-height:39px;margin-bottom:30px;} #product .ingres{min-height: 250px; padding-bottom: 50px;} #product .buttons a{ margin-left:20px; padding: 10px 15px !important;} #product .buttons a:first-child{margin:0 !important;} #product .big_img{ display: inline-block; background: url(../images/general/plus_icon.svg) top left no-repeat; width: 24px; height: 24px; text-indent: -9999px; position: absolute; bottom: 20px; right: 20px;} #product .product_img {display: flex; align-items: center;} #product_for_mobile .product_img{position:relative;} #product_for_mobile{display:none;} #product_for_mobile .go_to_products{margin:0 0 5% !important;} #product_for_mobile img{margin: 0 auto 7%; display: block; width: 90%; height: auto;} #product_for_mobile .ingres { padding-bottom: 5% !important;} #product_for_mobile .buttons a {width: 94%; padding: 3% !important; display: block; margin:0;} #product_for_mobile .buttons a:first-child{margin-bottom:3.5% !important;} #product_for_mobile h2, #product_for_mobile h1 { margin-bottom:0% !important;} #tabs {background-color: #f0f0f0; margin-bottom:72px; padding:50px 0;} #tabs div[class^="col-"] > a { display: block; padding: 13px 10px 15px 39px; text-decoration: none; color: #717D84; font-weight: 600; background: #fff url(../images/plus_icon.svg) no-repeat; background-size: 18px; background-position: 10px 13px; font-size: 18px;} #tabs div[class^="col-"] > div {display:none;} #tabs .row{margin-top:2.1%;} #tabs .row:first-child{margin-top:0 !important;} #tabs .row > div[class^="col-"] > a.clsbtn {position: absolute; text-indent: -9999px; background: url(../images/general/x.png) center left no-repeat; left: 17px; background-size: 14px;} #tabs .row > div[class^="col-"] { position: relative;} #tabs #tabContent { background-color: #fff; display: none; padding: 3% 2% 2%; position: relative; width: 96%;} #tabs #overview > div { float: left; width: 45%; margin-left: 8%;} #tabs #overview > div:first-child{ margin:0;} #tabs #overview h2{ margin-bottom:7%;} #tabs #overview ul{ padding: 0 20px; } #tabs #overview ul li{margin-bottom:10px;} #tabs #overview a {color:inherit;} #tabs #overview a:hover{color:#0087DC;} #tabs #technical_data > div {margin-top:20px; position:relative;} #tabs #technical_data > div:first-child{margin-top:0;} #tabs #technical_data > div > a{background: #EFF2F2 url(../images/plus_icon.svg) 15px 16px no-repeat; display: block; padding: 13px 10px 13px 40px; text-decoration: none; color: #717D84;font-weight: 600; font-size: 18px;} #tabs #technical_data > div > a.clsbtn {position: absolute; text-indent: -9999px; background: url(../images/general/x.png) center center no-repeat; right: 0; background-size: 10px;} #tabs #technical_data > div > div {display:none;} #tabs #technical_data > div > div > div {display:table; width:100%; border-bottom:2px solid #EFF2F2; color: #717D84; font-size: 16px;} #tabs #technical_data > div > div > div:last-child{ border-bottom:0;} #tabs #technical_data > div > div > div > div{display: table-cell; width: 50%; padding: 15px 0 15px 15px; vertical-align: middle;} #tabs #technical_data > div > div > div > div:first-child{font-weight:bold; padding-left:31px;} #tabs #downloads {color:#717D84; margin-top:-20px;} #tabs #downloads a{color: #0087DC;text-decoration: none;font-weight: bold;margin-top: 5px;display: inline-block;} #tabs #downloads a:hover{text-decoration:underline;} #tabs #downloads ul{margin:0; padding:0;} #tabs #downloads > ul > li {list-style: none; padding: 20px 0 20px 52px; min-height: 50px; background-position: left 20px !important; background-repeat: no-repeat !important; border-top: 2px solid #CCCCCC; background-size:40px !important;} #tabs #downloads > ul > li:first-child{border-top:0; } #tabs #downloads .pdf{background:url(../images/general/pdf.svg); } #tabs #downloads .excel{background:url(../images/general/excel.svg); } #tabs #downloads .ppt{background: url(../images/general/ppt.svg);} #tabs #downloads .zip{background: url(../images/general/zip.svg);} #tabs #downloads li ul{margin:5px 0 0; padding:0;} #tabs #downloads li li {float: left; border-left: 1px solid #657077; list-style: none; padding: 0px 20px;} #tabs #downloads li li:first-child{border-left:0; padding-left:0;} #file_count {font-weight:bold;} #tabs #related_products .product { float: left; width: 30%; margin-left: 5%; margin-bottom:20px; } #tabs #related_products .product a{padding:5%; display:block; text-decoration:none;} #tabs #related_products .product a:hover{background-color:#0087DC ;} #tabs #related_products .product a:hover .product_title h3, #tabs #related_products .product a:hover .textcopy{color:#fff !important;} #tabs #related_products .product .product_title {margin-bottom:5%;} #tabs #related_products .product .product_image { margin: 0 auto 10%; text-align: center;} #tabs #related_products .product .product_image img{display:inline-block; width: 100%; height: auto; } #tabs #related_products .product:nth-child(3n+1){margin-left:0; clear:left;} /************************************************/ /**************** GO TO ****************/ #goto_products_link{padding:35px 0; display:none;} /*****************************************/ /******************** VIDEO *********************/ #video{ margin-bottom:72px;} #video .row{position:relative;} #video img {width:100%; height:auto; display:block;} #video h2{margin-bottom:4px;} /************************************************/ /**************** QUESTION ****************/ #question{text-align: center; background-color:#E1E6E6; margin-bottom:60px; padding: 40px 0 45px; } #question .text{ width: 90%; text-align: center; margin: 0 auto; font-size: 22px;} #question a{color: inherit; text-decoration: inherit; padding: 13px 35px; display: inline-block; margin-left: 25px; background-color: #fff; margin-top: 20px; font-weight: bold; font-size: 18px; } #question a:first-child{margin-left:0 !important;} #question a:hover{background-color:#0087DC; color:#fff;} /*****************************************/ /***************** OTHER NEWS *******************/ #other_news {margin-bottom:72px;} #other_news .img {margin-bottom:8px;} #other_news .img img{width:100%; height:auto; display:block;} #other_news h2{margin-bottom:5px;} #other_news .minitagGrn {margin-bottom:2px;} #other_news .minitagGrn a{color:inherit; text-decoration:none; font-weight:inherit;} #other_news .minitagGrn a:hover{text-decoration:underline;} #other_news .previewgrey a{color:inherit; text-decoration:none;} #other_news .previewgrey a:hover{color:#0087DC;} #other_news .row{margin-bottom:35px;} #other_news .alllink{text-align:center;} #other_news .alllink a{margin:0; text-decoration:none; font-size:18px;} #other_news .alllink a:hover{text-decoration:underline;} /************************************************/ /***************** QUOTE FORM *******************/ #request_quote_form {padding:15px; width:80%;} #request_quote_form form > div{display:block; margin-top:20px;} #request_quote_form form > div > label{display:block; margin-bottom:5px;} #request_quote_form form input[type=text]{width:60%; padding:1.5%; color:#717D84;} #request_quote_form form input[type=tel]{width:60%; padding:1.5%; color:#717D84;} #request_quote_form form input[type=submit]{float:right;} #request_quote_form form textarea{width:97%; resize:none; height:100px; padding:1.5%; margin-bottom:-5px; color:#717D84; } #request_quote_form form .text{font-size: 12px; font-style: italic; display:block; margin-top:5px;} #request_quote_form form select{width:60%;} #request_quote_form .SumoSelect { margin-bottom: 0; width: 63%;} #request_quote_form .SumoSelect>.CaptionCont { padding: 1.5%;} #request_quote_form .SumoSelect> .optWrapper { background-color: #8F979C;} #request_quote_form .SumoSelect.open .search-txt {width: 100%; background-color: transparent;} #request_quote_form .SumoSelect>.optWrapper>.options li.opt { border-bottom: 1px solid #5E6A71;} #request_quote_form select.error + p.CaptionCont,#request_quote_form .error { border:2px solid #B94A48;} #request_quote_form .SumoSelect>.optWrapper>.options li label{overflow:hidden; padding: 10px;} #request_quote_form .SumoSelect>.CaptionCont>span {font-weight: normal !important; width: 90%; overflow: hidden; display: inline-block; font-size: 16px; line-height:20px;margin-top: 3px;} #request_quote_form .SumoSelect>.CaptionCont { padding: 1.5%;} #request_quote_form .SumoSelect.open .search-txt{margin-top:5px;} #request_quote_form .SumoSelect>.optWrapper>.options{max-height:250px;} #request_quote_form .SumoSelect { width: 63%;} .green_header{color:#0087DC;font-family:'DeltaSans', sans-serif;font-size:22px;font-weight:bold;margin-top: 5px;} /***************** QUOTE FORM *******************/ @media screen and (max-width: 1160px) { /**************** PRODUCT ****************/ #product > .row > .col-6:first-child > div{width:100% !important;} #product > .row > .col-6:last-child > div{ padding: 10% 9%; width:82%;} /*****************************************/ } @media screen and (max-width: 980px) { h2, h1 {font-size: 26px !important; line-height: 32px !important; } h3 { font-size: 24px; line-height: 28px;} .textcopy {font-size: 14px; line-height: 21px;} /**************** PRODUCT ****************/ #product .ingres{ font-size: 16px; line-height: 22px; min-height:inherit;} #product .buttons a{font-size:15px;} #product .go_to_products { margin-bottom: 10%;} #product h2, #product h1 { margin-bottom: 5%;} .go_to_products a { font-size: 16px;} #tabs div[class^="col-"] > a{font-size:15px; background-position: 20px 14px;} #tabs { padding: 5% 0;} #tabs #technical_data > div > a { font-size: 15px; background-position: 15px 14px;} #tabs #technical_data > div > div > div {font-size:14px;} #tabs #downloads {font-size:14px;} .green_header { font-size: 18px;} /*****************************************/ /**************** QUESTION ****************/ #question .text{ font-size: 16px;} #question a {font-size: 16px;} /*****************************************/ #tabs .row > div[class^="col-"] > a.clsbtn { left: 19px; background-size: 13px; top: -1px; } } @media screen and (max-width: 850px) { #tabs #downloads li li{float:none; padding:0; border:0; margin-bottom: 5px;} #tabs #downloads a {margin:0;} #tabs #downloads > ul > li {background-size:10% !important; padding-left:20%; background-position:5% 20px !important;} } @media screen and (max-width: 750px) { #tabs #overview > div{width:100%; margin:0 !important; margin-top:5% !important;} #tabs #overview h2 { margin-bottom: 3%;} #video, #other_news{display:none;} #question, #tabs{margin-bottom:0 !important;} #goto_products_link{display:block;} } @media screen and (max-width: 700px) { #product_for_mobile{display:block;} #product .row{display:none;} #product{ background-color:#fff; padding:3.5% 0;} #product_for_mobile .product_img a{right:5px !important; bottom:0 !important;} } @media screen and (max-width: 650px) { #request_quote_form .SumoSelect {width:100%; margin:0;} #request_quote_form .SumoSelect>.CaptionCont { padding: 1.5%;} #request_quote_form form input[type=text]{width:96%; padding: 2%;} #request_quote_form form input[type=tel]{width:96%; padding: 2%;} #request_quote_form .SumoSelect.open .search-txt { margin-top: 5px;} #request_quote_form form > div > label { font-size: 15px;} #request_quote_form .SumoSelect>.CaptionCont>span { font-size: 14px;} #request_quote_form .SumoSelect> .optWrapper { font-size: 13px;} } @media screen and (max-width: 640px) { /******************** PRODUCT *********************/ #tabs #tabContent { padding: 5% 3% 4%; width: 94%; } #tabs #related_products .product{ float: none; width: 100%; margin: 0 !important; padding: 30px 0; border-top: 1px solid #E1E6E6;} #tabs #related_products .product:first-child{padding-top:0 !important; border-top:0 !important;} #tabs #related_products .product .product_image { margin: 0 auto 5%;} #tabs #related_products .product_title, #tabs #related_products .product_image, #tabs #related_products .textcopy{ height:auto !important;} /************************************************/ /******************** VIDEO *********************/ #video .col-6{width:100% !important; float:none; margin:0 !important;} #video .verticalAlign { position: relative; top: 0; transform:none; -webkit-transform:none; -ms-transform: none; text-align:center; margin-top:11px;} /************************************************/ /************* OTHER NEWS ****************/ #other_news .row{margin:0 !important;} #other_news .row .col-3 {width: 48%; margin-left: 4%; margin-bottom: 8%;} #other_news .row .col-3:nth-child(2n+1){clear:both; margin-left:0 !important;} #other_news .minitagGrn { margin-bottom: 1px;} /****************************************/ }