*{ margin:0; padding:0; font-family: sans-serif; max-width:100%; /*To avoid when scroll bar added 100vw will require horizontal scrollbar*/ } *, *::after, *::before { user-select: none; } /* Light mode */ /*@media (prefers-color-scheme: light) { html { background: white !important; color: black !important; } }*/ /* Dark mode */ @media (prefers-color-scheme: dark) { body { background: white !important; } #welcome-statement{color: rgba(37, 67, 119,1) !important;} } small{ font-size: 15px; } .cny2021{ font-size:30px; /*default 100px*/ font-family: 'Brush Script MT', cursive; } body{background: white;} .flex-container-header { width:100vw; /*we must define the dimension of flex box container so that item inside will expand and shrink relatiely to the container size*/ /*height:100px;*/ /*DONT SET HEIGHT!!!!! IF NOT FLEXBOX WONT EXPAND*/ display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; justify-content: space-between; /* outline:5px solid rgba(37, 67, 119,1); DONT PUT OUTLINE IT WILL BLINK IN FADE IN ANIMATION*/ background-color:rgba(37, 67, 119,1); background:url(Images/headerBG.jpg); background-size:cover; border-top: 6px solid rgb(194, 9, 9); /*padding-left:30px;*/ /*may be container of flexbox only can accept one side*/ /*position:fixed;*/ } .logocontainer{ min-width: 600px; display:flex; /*child element need to set display:flex???*/ flex-direction: column; /*is important to set flex-direction:column*/ align-items: center; margin-left:auto; margin-right:auto; margin-top:15px; } #logo{ width: 500px; border-radius:10px; cursor:pointer; /* width:600; height:75; */ } #marquee{ display:flex; width:500px; color:white; font-size: 17px; text-align: center; } /*START - NAVIGATION BAR*/ .nav-button{ width:700px; height:100px; margin-left:auto; margin-right:auto; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-around; z-index:2; /*background-color:rgba(37, 67, 119,1);*/ /*background-color:red;*/ } #parts-button:hover {border:4px solid rgb(194, 9, 9)} #filters-button:hover {border:4px solid rgb(194, 9, 9)} #featured-button:hover {border:4px solid rgb(194, 9, 9)} #contact-button:hover {border:4px solid rgb(194, 9, 9)} #parts-button, #filters-button, #featured-button, #contact-button{ border:1px solid white; border-radius: 10px; width:120px; height:60px; cursor:pointer; color: white; transition:0.3s; opacity:0; animation-name: animation5; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } #parts-button{animation-delay:0s} #filters-button{animation-delay:0.3s} #featured-button{animation-delay:0.6s} #contact-button{animation-delay:0.9s} #more-product-btn{animation-delay:0.9s} .navtext{ margin-top: 12px; text-align: center; font-size: 16px; font-family: sans-serif; font-weight: 300; } .navtext-filter{ margin-top: 20px; text-align: center; font-size: 16px; font-family: sans-serif; font-weight: 300; } /*END - NAVIGATION BAR*/ #main-content { width:100vw; /*cannot use % because dont have width x height*/ min-height: calc(100vh - 129px); position: static; /*must set static so that flex box can work*/ background: url(Images/KammingHQ.jpg); /* background: url(Images/Kamming-cny.jpg);*/ animation-name: animation8; animation-duration: 15s; animation-delay: 3s; animation-iteration-count: infinite; background-size: contain; /*if background picture need scrolling to show all it is due to navigation bar had added boundary to caused height calculation above not accurate anymore.*/ background-repeat: no-repeat; display:flex; flex-wrap: wrap; /*must set wrap so that element inside will not shrink but jumo to next line*/ justify-content: space-around; /*border-bottom: 3px solid rgba(37, 67, 119,1);*/ z-index:1; } #welcome-statement{ margin-top:40px; width:600px; height:auto; background-color: transparent; border:0px solid black; color:rgba(37, 67, 119,1); padding-left:20px; cursor:pointer; } .business-hour{ font-size: 17px; font-weight:600; animation-name: animation1; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; } #bh-title{ height:26px; width:150px; font-size: 20px; color:white; background-color:rgba(37, 67, 119,1); display:block; border-radius:10px; text-align:center; /* animation-name: animation1; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: ease-in;*/ } .ws1{ font-size:100px; font-family: 'Brush Script MT', cursive; } .ws2{font-size:30px; font-family: 'Arial Narrow', sans-serif; font-style: italic; font-weight: normal; /*

header tag is by default bold, need this code to unbold*/ } .ws3{font-size:20px; font-family: 'Arial Narrow', sans-serif; font-style: italic; font-weight: normal; font-weight: normal; /*

header tag is by default bold, need this code to unbold*/ } .ws4{font-size:15px} .cny-icon{ animation-name: animation1; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: ease-in; } #slideshow-div{ width:600px; height:400px; margin-top:100px; margin-bottom:30px; /* margin-left:auto; margin-right:auto; */ /*dont set margin otherwise flex justify content will be overwritten*/ background-color: white; border-radius: 0px; border:1px solid rgb(153, 153, 153); box-shadow: 10px 10px 10px grey; z-index:2; filter:brightness(115%); cursor:pointer; border-radius:20px; } #parts, #filters, #contact{ width:100vw; height:auto; min-height: calc(100vh - 129px); position:static; /*must set static so that flex box can work*/ z-index:0; display: none; flex-direction: row; flex-wrap: wrap; justify-content:space-around; animation-name: animation1; animation-duration: 1s; align-items:flex-start; /*border:10px solid yellow;*/ } #filterdealership{ width:100vw; height:auto; min-height: calc(100vh - 129px); position:static; /*must set static so that flex box can work*/ z-index:0; display: none; /* justify-content:center;*/ /*this is for flex container, if we want to align center in block, use margin left right auto in child element*/ animation-name: animation1; animation-duration: 1s; } #cert-box{ width:85vw; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin-left:auto; margin-right:auto; } #parts{background:url(Images/partsBG.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } #filters, #filterdealership{background:url(Images/filtersBG.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } #contact{background:white; background-size: 100vw auto } .parts-banner, .filter-banner{ width:645px; display:flex; padding-top:20px; padding-bottom:20px; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .fglogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.1s; animation-fill-mode: forwards; } .dslogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.2s; animation-fill-mode: forwards; } .wixlogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.3s; animation-fill-mode: forwards; } .bwlogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.4s; animation-fill-mode: forwards; } .rclogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.5s; animation-fill-mode: forwards; } .mflogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.6s; animation-fill-mode: forwards; } .hglogo{ width:60px; height:60px; display:inline-block; opacity:0; animation-name: animation1; animation-duration: 3s; animation-delay:0.7s; animation-fill-mode: forwards; } .pbp1{ width:507px; height:250px; opacity:0; animation-name: animation1; animation-duration: 2s; animation-delay:0.1s; animation-fill-mode: forwards; border-radius:7px; } .parts-box, .filters-box{ align-items:flex-start; } #fgcert, #dscert, #wixcert, #hengstcert, #manncert{ /* width:275px; height:385px; */ width:214px; height:300px; display: static; text-align: center; padding-top:30px; padding-bottom:30px; opacity:0; animation-name: animation1; animation-duration: 3s; animation-fill-mode: forwards; } /*#hengstcert{ padding:40px; need to overwrite padding to 40px because this cert without link }*/ #nextbox{ width:214px; height:300px; margin-top:10px; padding-top:30px; padding-bottom:30px; opacity:0; animation-name: animation1; animation-duration: 3s; animation-fill-mode: forwards; } .spacer1{ width:100%; height:50px; /* outline:10px solid yellow;*/ } #spacer-dealer{ width:100%; height:0px; /*height 0px is to create a dummy line to prevent Title being arrange side by side with cert-box in flx container*/ } .spacer1a{ width:550px; height:35px; } .spacer2{ width:550px; height:5px; } .spacer-bottom1{ width:100%; height:30px; /*64px is the limit*/ /* outline:10px solid green;*/ } .spacer-bottom2{ width:100%; height:45px; /* outline:10px solid green;*/ } .title1, #dealer-tag, #title2, #title3{ width:605px; height:auto; font-size:28px; color:black; background-color:rgba(120,120,120,0.6); padding-left:15px; padding-right:15px; padding-top:10px; padding-bottom:10px; border-left:10px solid rgb(194, 9, 9); border-top:0px solid rgb(194, 9, 9); border-bottom:0px solid rgb(194, 9, 9); border-right:0px solid rgb(194, 9, 9); border-radius:7px; font-style: italic; box-shadow: 10px 10px 10px grey; /* text-align: justify;*/ } #dealer-tag{width:700px; margin-left:auto; margin-right:auto;} #title2, #title3{ font-size:25px; cursor:pointer; } .sub-content{ width:605px; color:black; background-color:rgba(120,120,120,0.6); padding-left:15px; padding-right:15px; font-size:20px; padding-top:10px; padding-bottom: 10px; border-left:10px solid rgba(37, 67, 119,1); border-radius:7px; } #em-btn, #ch-btn, #eb-btn, #frop-btn, #a-btn, #ec-btn, #clrc-btn, #fs-btn, #af-btn, #ah-btn, #as-btn, #cvf-btn, #ff-btn, #fws-btn, #hf-btn, #lf-btn, #tf-btn, #wf-btn{ width:auto; height:20px; padding-top:1px; padding-left:8px; padding-right:8px; background-color:rgba(37, 67, 119,1); display:inline; border:1px solid white; border-radius:10px; font-size:15px; color:white; display:inline-block; cursor:pointer; transition:0.3s; animation-name: animation6; animation-duration: 2s; animation-iteration-count: infinite; } #em-btnx, #ch-btnx, #eb-btnx, #frop-btnx, #a-btnx, #ec-btnx, #clrc-btnx, #fs-btnx, #af-btnx, #ah-btnx, #as-btnx, #cvf-btnx, #ff-btnx, #fws-btnx, #hf-btnx, #lf-btnx, #tf-btnx, #wf-btnx{ width:auto; height:20px; padding-top:1px; padding-left:8px; padding-right:8px; background-color:white; display:inline; border:1px solid rgba(37, 67, 119,1); border-radius:10px; font-size:15px; color:rgba(37, 67, 119,1); display:none; cursor:pointer; transition:0.3s; } #em-box, #ch-box, #eb-box, #frop-box, #a-box, #ec-box, #clrc-box, #fs-box, #af-box, #ah-box, #as-box, #cvf-box, #ff-box, #fws-box, #hf-box, #lf-box, #tf-box, #wf-box{ display:none; color:rgba(95, 95, 95,1); animation-name: animation7; animation-duration: 0.7s; animation-fill-mode: forwards; } #af-box, #ah-box, #as-box, #cvf-box, #ff-box, #fws-box, #hf-box, #lf-box, #tf-box, #wf-box{ font-size:10px;} h3{font-size: 20px; font-weight:400; color:black} #em-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ch-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #eb-btn:hover{box-shadow: 7px 7px 5px rgb(80, 80, 80);} #frop-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #a-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ec-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #em-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ch-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #eb-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #frop-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #a-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ec-btnx:hover{box-shadow: 7px 7px 5px rgb(80, 80, 80);} #af-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ah-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #cvf-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ff-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #fws-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #hf-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #lf-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #wf-btn:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #af-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #cvf-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #ff-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #fws-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #hf-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #lf-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} #wf-btnx:hover {box-shadow: 7px 7px 5px rgb(80, 80, 80);} .em-pic1{ width:110px; height:110px; display:inline-block; margin-left:12px; margin-right:auto; } .em-pic2{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic3{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic4{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic5{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic6{ width:110px; height:110px; display:inline-block; /*margin-top:4px;*/ margin-left:12px; margin-right:auto; } .em-pic7{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic8{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .em-pic9{ width:110px; height:110px; display:inline-block; /* margin-left:4px;*/ margin-right:auto; } .em-pic10{ width:110px; height:110px; display:inline-block; /*margin-left:4px;*/ margin-right:auto; } .ch-pic1{width:580px; height:363px; display:block; margin-left:auto; margin-right:auto; /*must set individually*/ } .ch-pic2{width:580px; height:396px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .ch-pic3{width:580px; height:404px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .ch-pic4{width:287.5px; height:287.5px; margin-top:5px; display:inline-block; margin-left:auto; margin-right:auto; margin-left:12px; } .ch-pic5{width:287.5px; height:287.5px; margin-top:5px; margin-right:5px; display:inline-block; margin-left:auto; margin-right:auto; } .ch-pic6{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ch-pic7{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .eb-pic1{width:580px; height:358px; display:block; margin-left:auto; margin-right:auto; } .eb-pic2{width:580px; height:198px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .eb-pic3{width:580px; height:221px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .eb-pic4{width:580px; height:323px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .eb-pic5{width:287.5px; height:287.5px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .eb-pic6{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .frop-pic1{width:580px; height:350px; display:block; margin-left:auto; margin-right:auto; } .frop-pic2{width:287.5px; height:287.5px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .frop-pic3{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .frop-pic4{width:580px; height:363px; display:block; margin-left:auto; margin-right:auto; } .frop-pic5{width:287.5px; height:287.5px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .frop-pic6{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .frop-pic7{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .frop-pic8{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .frop-pic9{width:580px; height:264px; display:block; margin-left:auto; margin-right:auto; } .ag-pic1{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ag-pic2{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ag-pic3{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ag-pic4{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ag-pic5{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ag-pic6{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ag-pic7{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ag-pic8{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ag-pic9{width:580px; height:386px; display:block; margin-left:auto; margin-right:auto; } .ag-pic10{width:580px; height:404px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .ag-pic11{width:580px; height:363px; margin-top:5px; display:block; margin-left:auto; margin-right:auto; } .ag-pic12{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ag-pic13{width:287.5px; height:287.5px; margin-top:5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic1{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic2{width:287.5px; height:287.5px; margin-top:5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic3{width:580px; height:363px; display:block; margin-left:auto; margin-right:auto; } .ec-pic4{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic5{width:287.5px; height:287.5px; margin-top:5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic6{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic7{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic8{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic9{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic10{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic11{width:287.5px; height:287.5px; display:inline-block; margin-left:auto; margin-right:auto; } .ec-pic12{width:580px; height:414px; display:block; margin-left:auto; margin-right:auto; } .ec-pic13{width:287.5px; height:287.5px; display:inline-block; margin-left:12px; margin-right:auto; } .ec-pic14{width:287.5px; height:287.5px; margin-top:5px; display:inline-block; margin-left:auto; margin-right:auto; } .clrc-pic1{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .clrc-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .clrc-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .clrc-pic4{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:5px; margin-right:auto; } .clrc-pic5{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .clrc-pic6{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic1{width:190px; height:253px; display:inline-block; margin-left:12px; margin-right:auto; } .af-pic2{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic3{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic4{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .af-pic5{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic6{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic7{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .af-pic8{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic9{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic10{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .af-pic11{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .af-pic12{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ah-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ah-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .ah-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .ah-pic4{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ah-pic5{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .ah-pic6{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .aos-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .aos-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .aos-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .aos-pic4{width:585px; height:377px; display:block; margin-top:5px; margin-left:12px; margin-right:auto; } .ccv-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ccv-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .ccv-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic1{width:190px; height:253px; display:inline-block; margin-left:12px; margin-right:auto; } .ff-pic2{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic3{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic4{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ff-pic5{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic6{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic7{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ff-pic8{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic9{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic10{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .ff-pic11{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic12{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .ff-pic13{width:585px; height:195px; display:block; margin-top:5px; margin-left:12px; margin-right:auto; } .fs-pic1{width:190px; height:190px; display:inline-block; margin-left:12px; margin-right:auto; } .fs-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .fs-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .fs-pic4{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .fs-pic5{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .fs-pic6{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic1{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .hf-pic2{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic3{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic4{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .hf-pic5{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic6{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic7{width:190px; height:253px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .hf-pic8{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .hf-pic9{width:190px; height:253px; display:inline-block; margin-left:5px; margin-right:auto; } .lf-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .lf-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .lf-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .lf-pic4{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .lf-pic5{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .lf-pic6{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .lf-pic7{width:585px; height:264px; display:block; margin-top:5px; margin-left:12px; margin-right:auto; } .tf-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .tf-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .tf-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .tf-pic4{width:585px; height:325px; display:block; margin-top:5px; margin-left:12px; margin-right:auto; } .wf-pic1{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .wf-pic2{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .wf-pic3{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .wf-pic4{width:190px; height:190px; display:inline-block; margin-top:5px; margin-left:12px; margin-right:auto; } .wf-pic5{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } .wf-pic6{width:190px; height:190px; display:inline-block; margin-left:5px; margin-right:auto; } #featured { width:100vw; height:auto; /*must set to auto if background-attachment is fixed*/ background:url(Images/featuredBG.jpg); background-size: cover; filter: brightness(100%); background-attachment: fixed; /*baground fixed attribute must put after background image source to make it work*/ display:none; /*DON'T SET display flex here, Javascript will set it after button clicked*/ flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-around; animation-name: animation1; animation-duration: 1s; } .product-photo{ max-width:auto; max-height:300px; margin-left:25px; margin-right:25px; margin-top:50px; border-radius:10px; } #hotsearch{ height:300px; width:450px; color:white; display:inline-block; /*must set in-line block*/ vertical-align:top; margin-top:50px; margin-left:25px; } #more-product-btn{ position:fixed; height:18px; right:0px; /*required in "position:fixed" to make this button float to right*/ margin-top:0px; opacity:0; background-color:rgba(37, 67, 119,1); border: 3px solid white; border-radius: 5px; animation-name: animation1; animation-duration: 2s; animation-iteration-count: infinite; } #more-product-link{ font:10px; text-decoration: none; color: white; padding:10px; } #fg-link-btn, #ds-link-btn, #wix-link-btn{ height:18px; width: 150px; margin-left:auto; margin-right:auto; margin-top:13px; padding-top: 1px; border-radius: 5px; animation-name: animation1; animation-duration: 2s; animation-iteration-count: infinite; } #hengst-link-btn , #mann-link-btn{ height:18px; width: 150px; margin-left:auto; margin-right:auto; margin-top:13px; padding-top: 1px; border-radius: 5px; } #next-btn{ height:38px; width:150px; position:relative; /*so that can use top:190px to adjust position in div*/ top:0px; padding-top: 19px; background-color:transparent; text-align: center; border: 3px solid rgba(37, 67, 119,1); border-radius: 5px; color: rgba(37, 67, 119,1); margin:auto; cursor:pointer; opacity:0; display:static; animation-name: animation1; animation-duration: 2s; animation-iteration-count: infinite; } #fgcert{animation-delay:0.2s;} #dscert{animation-delay:0.4s;} #wixcert{animation-delay:0.6s;} #hengstcert{animation-delay:0.8s;} #manncert{animation-delay:1.0s;} #nextbox{animation-delay:1.2s;} #fg-link-btn{ background-color: white; border: 3px solid rgba(221,40,23,255); } #ds-link-btn{ background-color:white; border: 3px solid rgba(0,141,205,255); } #wix-link-btn{ background-color:black; border: 3px solid rgba(255,182,15,255); } #hengst-link-btn{ background-color:rgba(246,196,1,255); border: 3px solid rgba(16,29,82,255); } #mann-link-btn{ background-color:rgba(0,124,80,255); border: 3px solid rgba(255,240,0,255); } #fg-link, #ds-link, #wix-link, #hengst-link, #mann-link{ font:10px; text-decoration: none; padding:10px; } #fg-link{color: black;} #ds-link{color: rgba(0,141,205,255);} #wix-link{color: white;} #hengst-link{color: rgba(16,29,82,255);} #mann-link{color: rgba(255,240,0,255);} #close-btn, #contact-close-btn{ height:18px; width:80px; background-color:rgba(37, 67, 119,1); right:10px; text-align: center; border: 3px solid white; border-radius: 5px; color: white; margin:5px; cursor:pointer; position:fixed; z-index:2} #contact-close-btn{ animation-name: animation3a; animation-duration: 1s; animation-iteration-count: infinite; position:fixed; display:none; } #close-btn{ display:none; animation-name: animation3; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes animation1 { 0% {opacity: 0;} 100% {opacity: 1;}} @keyframes animation2 { 0% {background-color:rgb(194, 9, 9);} 100% {background-color:rgba(37, 67, 119,1);}} @keyframes animation3 { 0% {opacity: 0;} 0% {background-color:rgba(37, 67, 119,1);} 25% {opacity: 1;} 25% {background-color:rgba(37, 67, 119,1);} 75% {opacity: 1;} 75% {background-color:rgba(37, 67, 119,1);} 100% {opacity: 0;} 100% {background-color:rgba(37, 67, 119,1);}} @keyframes animation3a { 0% {background-color:rgba(37, 67, 119,1);} 25% {background-color:rgba(37, 67, 119,1);} 75% {background-color:rgba(37, 67, 119,1);} 100% {background-color:rgba(37, 67, 119,1);}} @keyframes animation4 { 0% {opacity: 0;} 25% {opacity: 1;} 75% {opacity: 1;} 100% {opacity: 0;} } @keyframes animation5 { 0% {opacity:0} 100% {opacity:1} } @keyframes animation6 { 0% {opacity: 0.5;} 25% {opacity: 1;} 75% {opacity: 1;} 100% {opacity: 0.5;} } @keyframes animation7 { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes animation8 { 0% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} 15% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} 35% {background: url(Images/kammingSA.jpg); background-size: contain; background-repeat: no-repeat;} 65% {background: url(Images/kammingSA.jpg); background-size: contain; background-repeat: no-repeat;} 85% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} 100% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} } @keyframes animation9 { SEASON GREETING 0% {background: url(Images/Kamming-cny.jpg); background-size: contain; background-repeat: no-repeat;} 20% {background: url(Images/Kamming-cny.jpg); background-size: contain; background-repeat: no-repeat;} 35% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} 50% {background: url(Images/KammingHQ.jpg); background-size: contain; background-repeat: no-repeat;} 65% {background: url(Images/KammingSA.jpg); background-size: contain; background-repeat: no-repeat;} 80% {background: url(Images/KammingSA.jpg); background-size: contain; background-repeat: no-repeat;} 95% {background: url(Images/Kamming-cny.jpg); background-size: contain; background-repeat: no-repeat;} 100% {background: url(Images/Kamming-cny.jpg); background-size: contain; background-repeat: no-repeat;} } #segambut, #shah-alam{ width:100vw; /*MUST SET WITH TO MAKE FLEX BOX WORK*/ display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } #photo-contact-hq, #photo-contact-sa{ margin-top:20px; margin-bottom:20px; width:360px; height:240px; border-radius:10px} iframe{ margin-top:20px; margin-bottom:20px; width:300px; height:240px; border-radius:10px} .address{ border: 0px solid black; width:700px; height:auto; text-align: start; vertical-align: top; /*this line important*/ margin-top:20px; margin-bottom:20px; } .address h2{ color:rgba(37, 67, 119,1); margin-bottom:5px; } .address h4{ color:rgba(37, 67, 119,1); font-size:12px; } #horizontal-line{ width:100vw; } .slideshow{ max-width:100%; max-height:100%; margin-left:auto; margin-right:auto; border-radius:20px; } li{ margin-left:50px; margin-top:2px; margin-right:auto; margin-bottom:2px; list-style: none; } hr{ background-color:rgba(37, 67, 119,1); border:1px solid rgba(37, 67, 119,1); } .icon-box{ display:flex; margin-left:50px; } .contact-person{ margin-left:20px; font-size:20px; } .whatappsicon{ margin-top:10px; width:172px; height:60px; vertical-align: middle; animation-name: animation4; animation-duration: 1.5s; animation-iteration-count: infinite; } #footer{ width:100vw; height:20px; background:url(Images/headerBG.jpg); color:white; text-align: center; margin-bottom:0px; font-size: 10px; border-top: 3px solid rgb(194, 9, 9); }