html, body {margin: 0; padding: 0;}

@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('inter-400.woff2') format('woff2'), url('inter-400.woff') format('woff');
}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('inter-600.woff2') format('woff2'), url('inter-600.woff') format('woff');
}

body {font-family: 'Inter', Arial, Helvetica, sans-serif; font-variant-ligatures: none;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
* {-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
img {border: 0; image-rendering: -webkit-optimize-contrast;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

/*-----------------------------------------------*/

/*MENU*/

#nav, #nav a {-webkit-tap-highlight-color:transparent;} #nav a:hover {background: none;}

#nav {width: 100%; text-align: center; text-transform: none; position: fixed; top: 0; z-index: 25; -webkit-box-shadow: 0px 2px 7px -1px #000;}
#nav, #nav a {height: 50px;}
#nav ul {padding: 0; display: table; table-layout: fixed; margin: auto;}
#nav li {display: table-cell; list-style:none; vertical-align: middle;}
#nav a {display: table-cell; padding: 0 20px; text-align: center; vertical-align: middle; font-size: 20px; line-height: 25px; text-decoration: none;}

@media (max-width: 630px) {#nav span {display: block;} #nav {height: 64px;} #nav a {height: 52px; padding: 6px 18px;}}
@media (max-width: 425px) {#nav {height: 60px;} #nav a {font-size: 18px; line-height: 22px; height: 48px; padding: 6px 16px;}}
@media (max-width: 380px) {#nav {height: 54px;} #nav a {font-size: 16px; line-height: 21px; height: 45px; padding: 4px 15px;}}
@media (max-width: 350px) {#nav a {padding: 4px 12px;}}

/*-----------------------------------------------*/

/*HEADER*/
#header {text-align: center; padding-top: 55px;}
#logo {margin-top: 25px;} #logo img {width: 150px; margin-bottom: 5px;}
#logotext {font-size: 28px; line-height: 30px; font-weight: 600; text-transform: uppercase; padding: 0 10px;}
#logotext span {display: block;}
#phone {font-size: 30px; line-height: 34px; font-weight: 600; padding-top: 5px; padding-bottom: 16px;}
#phone a {text-decoration: none;}

@media (max-width: 410px) {#logotext span {display: inline;}}

@media (max-width: 370px) {#logotext {font-size: 26px; line-height: 29px;} #phone {font-size: 28px; line-height: 32px;}}
@media (max-width: 315px) {#logotext {font-size: 24px; line-height: 27px;}}

/*-----------------------------------------------*/

/*TOP PIC*/

#toppic {margin: 0 auto; padding: 0;} #toppic img {width: 100%; margin-bottom: -4px; z-index: -1;}
@media (min-width: 955px) {#toppic, #toppic img {height: 350px; width: 930px;}}

/*-----------------------------------------------*/

/*BODY AREA*/

@media (max-width: 725px) and (min-width: 430px) {#bodyhead span {display: block;}}

@media (min-width: 949px) {#bodyarea {max-width: 930px; margin: auto;}}
@media (min-width: 980px) {#bodyarea {margin: 20px auto 35px auto; padding: 0;}}
@media (max-width: 980px) {#bodyarea {margin: 20px 20px 30px 20px;}}
@media (max-width: 400px) {#bodyarea {margin: 20px 15px 30px 15px;}}

#bodyhead {font-size: 26px; line-height: 1.3; font-weight: 600; text-align: center;}
#bodyarea, h1 {font-size: 19px; line-height: 1.55; font-weight: 400;}
.heading {font-weight: 600; font-size: 24px; line-height: 1.3;}

/*-----------------------------------------------*/

/*Service List*/

#svclist {padding: 10px 5px 0 5px; margin: 0 auto 15px auto; font-size: 17px;}
#svclist li {margin: 0 0 6px -15px; line-height: 23px; text-align: left;}
#svclist td {padding-right: 10px; width: 50%;}
.svclisthead {text-align: center; font-size: 20px; line-height: 24px; font-weight: 600;}
.svclisthead div {padding: auto 30px; width: 95%; margin: auto;}

@media (min-width: 731px) {#svclist {width: 80%;}}
@media (max-width: 500px) {#svclist td {display: block; width: 100%;} #svclist ul.ul2 {margin-top: -8px;}}

/*-----------------------------------------------*/

/*PHOTO GALLERY*/

#pics {text-align: center; margin-bottom: 20px;} #pics td {vertical-align: middle;} #pics th {width: 3%;}
#pics img {margin-top: 10px;} #pics p {margin: 0 0 20px 0; font-size: 16px; line-height: 22px;} #pics img.tall {width: 73%;}
@media (min-width: 891px) {#pics img {width: 390px;}}
@media (max-width: 890px) and (min-width: 603px) {#pics img {width: 100%;}}
@media (max-width: 602px) {#pics img {width: 100%;} #pics td, #pics th {display: block;}}

/*-----------------------------------------------*/

/*Review*/

.review {padding: 5px 20px 10px 20px; font-style: italic; font-size: 18px; line-height: 24px;}
.quotation {quotes: "\201C""\201D""\2018""\2019";}
.quotation:before, .quotation::after {display: inline; height: 0; line-height: 0; position: relative;color: #999; font-size: 55px;}
.quotation:before {content: open-quote; left: -7px; top: 20px;}
.quotation::after {content: close-quote; left: 5px; top: 25px;}
.testfooter {margin:0; text-align: right; font-style: italic; font-size: 15px; line-height: 21px; color: #777;}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {font-size: 13px; line-height: 1.6; padding: 15px 25px 18px 25px; text-align: center; clear: both;}
.web a {font-style: italic; text-decoration: none;} .web a:hover {text-decoration: underline;} .btmph {font-size: 20px;}
@media (max-width: 460px) {.btmph {margin: 10px auto;} .btmco span, .web a {display: block;}}
@media (max-width: 410px) {#lic span {display: block;}}

#totop {position: fixed; right: 16px; bottom: 13px; font-size: 16px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.35); padding: 8px; font-family: Arial, Helvetica, sans-serif; border: 2px solid #888;}
#totop img {width: 20px; height: 12px;} #totop:hover {-webkit-transform: scale(1.1);}
@media (min-width: 481px) {#totop {-webkit-transition: .15s;}}

/*-----------------------------------------------*/

/*COLORS*/

#mainback {background: #555 url('back.png') repeat;}
#header {background-color: #FFF;} #logotext {color: #000;}

#nav, #nav ul {background-color: #8B1626;} #nav a, #nav a:hover {color: #FFF} #nav a:hover {background-color: #B33336;}
@media (min-width: 955px) {#toppic {border-left: 3px solid #333; border-right: 3px solid #333;}}

#phone, #phone a {color: #C80020;}
body {background-color: #FFF; color: #111;} a, a:visited, a:hover {color: #0052D0;}
#bodyhead, .heading {color: #C80020;}

#svclist, .review {background-color: #FFFCCC; border: 1px solid #FDEFA1;}
#bottomarea {background-color: #222;} #bottomarea, #bottomarea a {color: #FFF;}