html, body { margin: 0px; padding: 0px; font-family: 'Playfair Display', serif; font-size: 14px; line-height: 18px; width: 100%; height: 100%; background: #FFF; } a { text-decoration: none; } form { padding: 0px; margin: 0px; } .homecontainer { width: 100%; position: relative; height: 100%; min-height: 380px; } .navcontainer { width: 100%; position: absolute; top: 0px; left: 0px; } .nav-home { width: 98%; max-width: 580px; padding-top: 110px; padding-bottom: 40px; border-bottom: 1px solid white; margin-left: 1%; margin-right: 1%; transform: scale(1); transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .nav-home ul { list-style-type: none; font-size: 16px; padding: 0px; margin: 0px; font-weight: 300; } .nav-home ul li { float: left; width: 30%; text-align: center; color: white; } .nav-home ul li:first-child { text-align: left; width: 20%; } .nav-home ul li:last-child { text-align: right; width: 20%; } .nav-home ul li a { color: white; } .logo-home { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .logo-home-inside { position: relative; top: 50%; transform: translateY(-50%); width: 100%; } .logo-animasi { position: relative; margin-top: -2%; } .logo-static { display: none; } .logo-home-button-frame { position: relative; margin-top: 0%; } .logo-home-button { margin-top: 0px; } /*.draw { transition: 0.5s all ease; opacity: 1; cursor: pointer; } .draw:hover { opacity: 0.7; }*/ .home-video-loading { width: 99.9%; height: 4px; position: absolute; bottom: 1px; left: 0px; text-align: left; } .home-video-loading hr { width: 0%; padding: 0px; margin: 0px; } .home-video { width: 100%; height: 100%; position:absolute; overflow: hidden; background: #161616; } .home-video video { position: absolute; left: 50%; top: 50%; width: auto; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter:brightness(0.8); min-height: 380px; } .home-mobile-video { width: 100%; height: 100%; position:absolute; overflow: hidden; background: #161616 url("../images/002mobile.jpg") center center no-repeat; background-size: cover; background-attachment: fixed; opacity: 0.7; display: none; } .container-block { color: #fff; display: inline-block; max-width: 235px; position: relative; } .container-block::before { background-color: rgba(0, 0, 0, 0); bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 100%; } .container-block:hover .inner-block:before, .container-block:hover .slider-top-right:after { height: 100%; } .container-block:hover .inner-block:after, .container-block:hover .slider-top-right:before { width: 100%; } .container-block img { display: block; max-width: 100%; } .block-content { position: absolute; bottom: 10%; left: 10%; padding: 0 1rem; } .slider-top-right:before, .inner-block:after { height: 2px; transition: width .75s ease; width: 0%; } .slider-top-right:after, .inner-block:before { height: 0%; transition: height .75s ease; width: 2px; } .inner-block:before, .inner-block:after, .slider-top-right:before, .slider-top-right:after { background-color: #fff; content: ''; display: block; position: absolute; } .inner-block { font-size: 2em; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .inner-block:before { bottom: 0; left: 0; } .inner-block:after { bottom: 0; right: 0; } .slider-top-right { position: relative; width: 100%; height: 100%; } .slider-top-right:before { top: 0; left: 0; } .slider-top-right:after { top: 0; right: 0; } .container { width: 100%; } .header-container { width: 100%; background: #161616; } .nav-all { width: 98%; max-width: 670px; padding-top: 50px; margin-left: 1%; margin-right: 1%; transform: scale(1); transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; height: 122px; } .nav-all ul { list-style-type: none; font-size: 16px; padding: 0px; margin: 0px; font-weight: 300; } .nav-all ul li { float: left; width: 23.33%; text-align: center; color: white; } .nav-all ul li:first-child { text-align: left; width: 15%; } .nav-all ul li:last-child { text-align: right; width: 15%; } .nav-all ul li a { color: white; } .nav-all ul li div { margin-top: 55px; transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .nav-all ul li .active span { border-bottom: 1px solid #be996c; padding-bottom:10px; } .nav-all ul li .active span a { color: #be996c; } .nav-all ul li img { transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .nav-about { width: 98%; max-width: 670px; padding-top: 0px; margin-left: 1%; margin-right: 1%; transform: scale(1); transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; padding-bottom: 70px; } .nav-col { font-size: 18px; float: left; width: 50%; text-align:center; } .nav-col a { color: white; } .nav-col a span { color: #be996c; } .header-img { width: 100%; background: url("../images/001-emilia-photo.jpg") center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 250px; height: auto; margin-bottom: 70px; } .header-imgc img { width: 100%; } .header-imgc { width: 100%; background: url("../images/001-team-photo.jpg") center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 250px; height: auto; margin-bottom: 70px; } .header-img img { width: 100%; } .body-container { width: 96%; max-width: 800px; text-align: left; padding-left: 2%; } .body-container-2 { width: 96%; max-width: 940px; text-align: left; padding-left: 2%; } .body-container-3 { width: 96%; max-width: 600px; text-align: left; padding-left: 2%; } .pheader-title-i { color: #000; font-size: 27px; font-style: italic; line-height: 32px; } .pheader-title-01 { color: #000; font-size: 21px; line-height: 28px; } .pheader-title-02 { color: #000; font-size: 35px; line-height: 45px; } .pheader-content { color: #000; font-size: 14px; line-height: 22px; } .pheader-content span { color: #be996c; } .aboutdownload-column { width: 31%; float: left; color: #be996c; font-size: 21px; line-height: 28px; padding-right: 2%; text-align: center; transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .aboutdownload-column a { color: #be996c; } .aboutdownload-column img { max-width: 100%; padding-bottom: 30px; width: 100%; } .space-5 { height: 5px; clear: both; } .space-30 { height: 30px; clear: both; } .space-40 { height: 40px; clear: both; } .space-70 { height: 70px; clear: both; } hr { width: 99%; color: #b1acaca; padding: 0px; margin: 0px; } .bold { font-weight: bolder; } .footer-container-1 { width: 100%; background: #262828; } .footer { width: 98%; padding-top: 40px; padding-bottom: 60px; font-size: 14px; color: #FFF; max-width: 940px; padding-left: 1%; } .footer #logo { width: 100%; max-width: 255px; } .footer #sosmed { margin-right: 30px; } .footer a { text-decoration: none; color: #babcbf; } .footer span { text-decoration: none; color: #babcbf; } .footercolumn-1 { width: 30%; float: left; text-align: left; } .footercolumn-2 { width: 65%; padding-left: 5%; float: left; } .footercolumn-2 #col { width: 31%; padding-left: 2%; text-align: left; line-height: 32px; float: left; } .footercolumn-2 #col:nth-child(2) { width: 29%; padding-left: 4%; padding-right: 0%; text-align: left; line-height: 32px; float: left; } .footer-container-2 { width: 100%; background: #161616; text-align: center; color: white; font-size: 14px; padding-top: 10px; padding-bottom: 10px; } .footer-container-2 a { color: white; } .contentfull-inside { width: 100%; position: relative; height: 0px; } .contentfull-inside-02 { width: 100%; position: relative; height: 0px; background: #161616; overflow: hidden; } .service-container-top { width: 100%; height: 100%; background: url("../images/services-bg.jpg") center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; } .service-container-top #layer { background: #282828; opacity: 0.85; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #service-inside { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #service-insidelayer { position: relative; top: 50%; transform: translateY(-50%); width: 100%; } .service-container-top #service-top-title { font-size: 50px; color: #fff; padding-bottom: 5px; line-height: 60px; } .service-container-top span { font-size: 19px; color: #fff; line-height: 28px; } .service-bar { width: 100%; position: relative; height: auto; min-height: 120px; overflow: hidden; /*border-bottom: 1px solid #9c9c9c;*/ } .service-bar-bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; display: none; } .service-bar #bg-1 { background: url("../images/full-package-list-image.jpg") center top no-repeat; } .service-bar #bg-2 { background: url("../images/interior-architectur-list-image.jpg") center top no-repeat; } .service-bar #bg-3 { background: url("../images/interior-styling-list-image.jpg") center top no-repeat; } .service-bar #bg-4 { background: url("../images/urban-planning-list-image.jpg") center top no-repeat; } .service-bar #bg-5 { background: url("../images/architect-supervision-list-image.jpg") center top no-repeat; } .service-bar-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #282828; opacity: 0.5; display: none; } .service-bar span { color: #1c1e1f; font-size: 35px; font-weight: bolder; } .service-bar-button { position: relative; top: 50%; transform: translateY(-50%); width: 100%; text-align: right; right: 5%; } .service-bar-button img { width: 64px; } .service-bar-rbut { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; } .service-content { margin-top: 50px; margin-bottom: 50px; width: 90%; display: none; } .service-detail-title { font-size: 21px; line-height: 28px; color: #000; font-style: italic; } .service-detail-content { font-size: 14px; line-height: 24px; color: #252426; } .service-detail-content a { color: #be996c; } .service-detail-title span { color: #be996c; } .service-detail-01 { float: left; width: 40%; font-size: 14px; line-height: 24px; color: #252426; } .service-detail-02 { float: left; width: 55%; padding-left: 5%; font-size: 14px; line-height: 24px; color: #252426; } .service-detail-01 span { color: #6d6e71; } .service-detail-small { font-size: 12px; color: #1c1e1f; } .service-detail-small span { letter-spacing:-2px; } .service-detail-title-2 { font-size: 40px; line-height: 50px; color: #1c1e1f; padding-top: 30px; padding-bottom:30px; } .service-button { border: 1px solid #be996c; color: #be996c; font-size: 14px; padding: 10px 30px 10px 30px; font-weight: bolder; background: transparent; font-family: 'Playfair Display', serif; cursor: pointer; } .calculate-box { float: left; width: 19%; margin-left: 0.5%; margin-right: 0.5%; position: relative; transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; cursor: pointer; } .calculate-box img { width: 100%; } .calculate-box-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.7; background: #262828; } .calculate-box-layeract { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.95; background: #262828; } .calculate-box-textbox { position: absolute; top: 3.5%; left: 3.5%; width: 90%; height: 90%; border: 1px solid #be996c; padding: 1%; } .calculate-box-text { position: relative; top: 50%; transform: translateY(-50%); width: 100%; color: white; font-size: 14px; line-height: 20px; } .calculate-form-01 { font-size: 14px; float: left; width: 30%; } .calculate-form-02 { font-size: 14px; float: left; padding-left: 1%; width: 69%; font-size: 14px; text-align: right; } .textarea-c { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #1c1e1f; width: 90%; color: #1c1e1f; font-family: 'Playfair Display', serif; font-size: 14px; text-align: center; margin-right: 5%; outline: none; } .calculate-form-03 { padding-top: 20px; clear: both; width: 100%; } .textarea-c2 { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #1c1e1f; width: 100%; color: #818494; font-family: 'Playfair Display', serif; font-size: 12px; text-align: left; outline: none; } .textarea-c3 { border: 1px solid #1c1e1f; width: 100%; color: #818494; font-family: 'Playfair Display', serif; font-size: 12px; text-align: left; outline: none; resize: none; } .selects { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #1c1e1f; width: 100%; color: #818494; font-family: 'Playfair Display', serif; font-size: 12px; text-align: center; outline: none; } .selects option { background: #262828; color: #fff; } .popup-layer { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #282828; z-index: 999; opacity: 0.85; } .popup-layer-2 { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999; } .popup-inside { position: relative; top: 50%; transform: translateY(-50%); width: 100%; } .popup-box { width: 95%; border: 10px solid #be996c; max-width: 700px; background: white; text-align:center; padding-top: 50px; padding-bottom: 50px; } .popup-title { color: #be996c; font-size: 28px; line-height: 33px; } .popup-content { font-size: 18px; line-height: 24px; } .popup-content-but { line-height: 50px; } .contact-column-01 { float: left; width: 49%; padding-right: 1%; } .contact-column-02 { float: left; width: 49%; padding-left: 1%; color: #1c1e1f; font-weight: bolder; font-size: 14px; } .contact-column-01S { float: left; width: 49%; padding-right: 1%; } .contact-column-02S { float: left; width: 49%; padding-left: 1%; color: #1c1e1f; font-size: 14px; } .contact-title { font-size: 40px; line-height: 50px; color: #1c1e1f; } .contact-content { font-size: 14px; line-height: 24px; color: #252426; } .contact-content img { float: left; margin-right: 10px; margin-top:2px; } .contact-content a { color: #252426; } .portfolio-container-01 { position: absolute; width: 49.8%; left: 0px; overflow: hidden; height: 100%; } .portfolio-container-02 { position: absolute; width: 49.8%; right: 0px; overflow: hidden; height: 100%; } .portfolio-inside { left: 0%; position: absolute; top: 0px; background: url("../images/collection-image-rev.jpg") center center no-repeat; background-size: cover; width: 100%; height: 100%; } .portfolio-inside-02 { right: 0%; position: absolute; top: 0px; background: url("../images/portfolio-4.jpg") center center no-repeat; background-size: cover; width: 100%; height: 100%; } .portfolio-boxinfo { padding: 0px 20px 5px 20px; border: 3px solid #1c1e1f; color: white; font-size: 30px; line-height: 40px; background-color: rgba(28,30,31,0.65); text-align:center; margin: 0px; } .collection-box { width: 25%; float: left; transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; position: relative; } .collection-box img { width: 100%; } .collection-box-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.85; background: #262828; display: none; } .collection-box-textbox { position: absolute; top: 3.5%; left: 3.5%; width: 90%; height: 90%; border: 1px solid #be996c; padding: 1%; display: none; } .collection-box-text { position: relative; top: 50%; transform: translateY(-50%); width: 100%; color: white; font-size: 18px; line-height: 28px; } .collection-box-toplayer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; } .collection-detail-bar { width: 100%; background: url("../images/linecol.jpg") center center repeat-x; height: 15px; } .collection-detail-bar span { background: white; } .collection-detail-bar-01 { float: left; text-align: left; width: 49%; padding-right: 1%; color: #161616; font-size: 14px; } .collection-detail-bar-02 { float: left; text-align: right; width: 50%; } .collection-detail-bar-02 img { margin-left: 30px; } .collection-detail-title { color: #b2996c; font-size: 35px; font-weight: bolder; line-height: 45px; padding-bottom: 20px; float: left; width: 58%; padding-right: 2% } .collection-detail-price { float: right; font-size: 35px; font-weight: bolder; line-height: 45px; padding-bottom: 20px; float: left; width: 40%; text-align: right; } .collection-detail-content { font-size: 16px; line-height: 28px; padding-top: 20px; padding-bottom: 10px; } .collection-detail-content-col { font-size: 16px; line-height: 28px; float: left; padding-right: 30px; } .collection-detail-content-col-0 { font-size: 16px; line-height: 28px; float: left; } .portfolio-container { background: #262828; } .portfolio-box { width: 24.5%; float: left; transition: 0.5s all ease; -moz-transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; position: relative; padding-left: 0.25%; padding-right: 0.25%; padding-bottom: 0.5%; } .portfolio-box img { width: 100%; } .projectdetail-container { width: 100%; height: auto; position: relative; } .projectdetailheader-container { width: 100%; background: #161616; } .projectdetailheader-container img { width: 100%; max-width: 659px; } .projectdetail-inside { width: 100%; position: relative; height: 0px; } .projectdetail-imageframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; display: none; background: url("../images/fancybox_loading.gif") center center no-repeat; } .projectdetail-image { position: absolute; top: 0px; left: 0px; } .projectdetail-but-01 { position: absolute; top: 50%; transform: translateY(-50%); left: 1%; z-index: 9999; } .projectdetail-but-01 img { width: 64px; cursor: pointer; } .projectdetail-but-02 { position: absolute; top: 50%; transform: translateY(-50%); right: 1%; z-index: 9999; } .projectdetail-but-02 img { width: 64px; cursor: pointer; } @media (max-height: 650px) { .nav-home { padding-top: 20px; padding-bottom: 30px; } .nav-all { padding-top: 20px; height: 97px; } .nav-about { padding-bottom: 50px; } .logo-animasi { position: relative; margin-top: -4%; } .logo-home-button-frame { position: relative; margin-top: 0%; } } @media (max-width: 1220px) { .service-bar span { font-size: 28px; } } @media (max-width: 1024px) { .service-container-top #service-top-title { font-size: 32px; color: #fff; padding-bottom: 5px; line-height: 42px; } .service-container-top span { font-size: 14px; line-height: 21px; } .service-bar span { font-size: 17px; line-height: 32px; } .service-bar-button img { width: 32px; } .pheader-title-02 { color: #000; font-size: 26px; line-height: 38px; } .calculate-box-text { font-size: 13px; line-height: 18px; } .contact-column-01 { float: left; width: 34%; padding-right: 1%; } .contact-column-02 { float: left; width: 63%; padding-left: 1%; color: #1c1e1f; font-size: 13px; } .contact-column-02S { color: #1c1e1f; font-size: 13px; } .contact-title { font-size: 32px; line-height: 42px; color: #1c1e1f; } .contact-content { font-size: 13px; line-height: 20px; color: #252426; } .portfolio-boxinfo { padding: 0px 20px 0px 20px; border: 3px solid #1c1e1f; font-size: 18px; line-height: 30px; } .collection-box { width: 33%; } .collection-box-text { font-size: 16px; line-height: 26px; } .collection-detail-title { font-size: 24px; line-height: 32px; width: 68%; padding-right: 2% } .collection-detail-price { font-size: 20px; line-height: 32px; width: 30%; } .collection-detail-content { font-size: 14px; line-height: 22px; } .collection-detail-content-col { font-size: 14px; line-height: 22px; } .collection-detail-content-col-0 { font-size: 14px; line-height: 22px; } .portfolio-box { width: 32.5%; float: left; padding-left: 0.25%; padding-right: 0.25%; padding-bottom: 0.5%; } .projectdetail-but-01 img { width: 32px; } .projectdetail-but-02 img { width: 32px; } } @media (max-width: 561px) { .nav-home { width: 96%; padding-top: 40px; padding-bottom: 30px; margin-left: 2%; margin-right: 2%; } .nav-home ul { font-size: 13px; } .nav-all { width: 96%; padding-top: 20px; height: 82px; margin-left: 2%; margin-right: 2%; } .nav-all ul { font-size: 13px; } .nav-all ul li div { margin-top: 40px; } .nav-all ul li img { max-width: 50px; } .nav-about { padding-bottom: 50px; } .nav-col { font-size: 13px; } .pheader-title-i { font-size: 21px; line-height: 28px; } .pheader-title-01 { font-size: 16px; line-height: 21px; } .pheader-content { font-size: 13px; line-height: 18px; } .aboutdownload-column { width: 48%; font-size: 14px; line-height: 22px; padding-right: 2%; } .aboutdownload-column img { padding-bottom: 20px; } .footercolumn-1 { width: 100%; text-align: center; clear: both; } .footercolumn-2 { width: 100%; text-align: left; clear: both; padding-left: 0%; padding-top: 40px; } .footercolumn-2 #col { width: 31%; padding-left: 2%; text-align: left; line-height: 32px; float: left; } .footercolumn-2 #col:nth-child(2) { width: 29%; padding-left: 4%; padding-right: 0%; text-align: left; line-height: 32px; float: left; } .service-bar span { font-size: 14px; } .service-bar-button img { display: none; } .service-content { margin-top: 30px; margin-bottom: 30px; } .service-detail-title { font-size: 16px; line-height: 24px; color: #000; font-style: italic; } .service-detail-content { font-size: 13px; line-height: 20px; } .service-detail-01 { width: 100%; font-size: 13px; line-height: 20px; } .service-detail-02 { width: 100%; padding-top: 20px; padding-left: 0%; font-size: 13px; line-height: 20px; } .service-detail-title-2 { font-size: 24px; line-height: 34px; padding-top: 20px; padding-bottom:20px; } .service-button { font-size: 13px; padding: 10px 20px 10px 20px; } .pheader-title-02 { color: #000; font-size: 21px; line-height: 32px; } .calculate-box { float: left; width: 32%; margin-left: 0.5%; margin-right: 0.5%; margin-bottom: 1%; } .calculate-box-text { font-size: 12px; line-height: 18px; } .calculate-form-01 { font-size: 14px; width: 40%; } .calculate-form-02 { font-size: 14px; padding-left: 1%; width: 59%; font-size: 14px; text-align: right; } .textarea-c { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #1c1e1f; width: 85%; color: #1c1e1f; font-family: 'Playfair Display', serif; font-size: 14px; text-align: center; margin-right: 3%; } .popup-title { font-size: 20px; line-height: 28px; } .popup-content { font-size: 16px; line-height: 20px; } .contact-column-01 { width: 97%; padding-right: 1%; padding-left: 1%; } .contact-column-02 { width: 97%; padding-right: 1%; padding-left: 1%; font-size: 12px; padding-top: 30px; } .contact-column-02S { color: #1c1e1f; font-size: 13px; } .contact-title { font-size: 24px; line-height: 32px; color: #1c1e1f; } .contact-content { font-size: 13px; line-height: 21px; color: #252426; } .portfolio-boxinfo { padding: 0px 20px 0px 20px; border: 3px solid #1c1e1f; font-size: 16px; line-height: 24px; } .collection-box { width: 50%; } .collection-box-text { font-size: 16px; line-height: 22px; } .collection-detail-title { font-size: 14px; line-height: 22px; width: 68%; padding-right: 2% } .collection-detail-price { font-size: 15px; line-height: 22px; width: 30%; } .portfolio-box { width: 49.5%; float: left; padding-left: 0.25%; padding-right: 0.25%; padding-bottom: 0.5%; } .body-container { width: 93%; } .body-container-2 { width: 93%; } .body-container-3 { width: 93%; } #service-inside { width: 93%; left: 2%; } .service-content { width: 100%; } /*.logo-static { display: block; } .logo-home-button-frame { position: relative; margin-top: 70px; }*/ } @media (max-width: 461px) { .nav-home { padding-top: 20px; padding-bottom: 30px; } .nav-home ul { font-size: 12px; } .nav-all { width: 95%; padding-top: 10px; height: 47px; margin-left: 2%; margin-right: 2%; } .nav-all ul { font-size: 11px; } .nav-all ul li div { margin-top: 25px; } .nav-all ul li img { max-width: 35px; } .nav-about { padding-bottom: 35px; } .nav-col { font-size: 12px; } .aboutdownload-column { width: 98%; font-size: 14px; line-height: 22px; padding-right: 2%; clear: both; padding-bottom: 30px; } .footercolumn-2 #col { width: 100%; padding-left: 0%; text-align: center; line-height: 32px; clear: both; padding-bottom: 30px; } .footercolumn-2 #col:nth-child(2) { width: 100%; padding-left: 0%; padding-right: 0%; text-align: center; line-height: 32px; clear: both; } .footercolumn-2 #col:nth-child(3) { padding-bottom: 0px; } .service-container-top #service-top-title { font-size: 30px; padding-bottom: 5px; line-height: 36px; } .service-container-top span { font-size: 13px; color: #fff; line-height: 20px; } .pheader-title-02 { color: #000; font-size: 15px; line-height: 26px; } .calculate-box { float: left; width: 49%; margin-left: 0.5%; margin-right: 0.5%; margin-bottom: 1%; } .calculate-form-01 { font-size: 13px; width: 50%; } .calculate-form-02 { font-size: 13px; padding-left: 1%; width: 49%; text-align: right; } .textarea-c { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #1c1e1f; width: 80%; color: #1c1e1f; font-family: 'Playfair Display', serif; font-size: 14px; text-align: center; margin-right: 3%; } .contact-column-01S { width: 97%; padding-right: 1%; padding-left: 1%; } .contact-column-02S { width: 97%; padding-right: 1%; padding-left: 1%; font-size: 12px; padding-top: 30px; } .collection-box { width: 100%; } .collection-box-text { font-size: 13px; line-height: 22px; } .portfolio-box { width: 100%; float: left; padding-left: 0%; padding-right: 0%; padding-bottom: 0.5%; } .collection-detail-title { font-size: 15px; line-height: 22px; width: 100%; padding-right: 0%; } .collection-detail-price { font-size: 18px; line-height: 22px; width: 100%; padding-right: 0%; text-align: left; } } @media (max-width: 321px) { } @media (min-width: 1600px) { .home-video video { width: 100%; height: auto; } } @media (min-width: 1921px) { .home-video video { width: auto; height: 100%; } } @media (min-aspect-ratio: 16/9) { .home-video video { height: auto; width: 100%; } } @media (max-aspect-ratio: 16/9) { .home-video video { height: 100vh; width: auto; } }