/*HOME PAGE*/

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

/*Top image*/

#homepic {position: relative; height: calc(10vw + 300px); max-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #E0BD91;}

#homepic img {width: 500px; height: 300px; width: 100vw; height: auto; margin-top: -7%; overflow: hidden;}
@media (max-width: 1105px) and (min-width: 501px) {#homepic img {width: calc(60vw + 600px); min-width: 100vw;}}
@media (max-width: 650px) {#homepic {height: calc(10vw + 250px);}}

.cap {position: absolute; font-size: 35px; text-align: center; left: 0; right: 0; top: 50%; webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background:rgba(255,255,255,0.8); padding: 25px 10px; margin: auto; width: 600px; z-index: 1;}
.cap1 {font-size: 1.35em; line-height: 1.25; font-weight: 300 !important; color: #D50000;} .cap1 span {display: block;}
.cap2 {padding-top: 20px; font-size: .44em; font-weight: 500 !important; line-height: 1.35; color: #613B16;}

@media (max-width: 960px) {.cap {width: 63%;} .cap1 {font-size: 4.8vw;} .cap2 {font-size: calc(1.5vw + 8px);} .cap2 span {display: block;}}
@media (max-width: 600px) {
#homepic {height: calc(24vw + 200px);} .cap {width: 90%;} .cap1 {font-size: 6.3vw; font-weight: 400 !important;} .cap2 {font-size: calc(3vw + 5px);}
}
@media (max-width: 500px) {
#homepic {height: calc(25vw + 200px);} #homepic img {width: calc(40vw + 400px);}
.cap {width: 85%;} .cap1 {font-size: 7.3vw; font-weight: 400 !important;} .cap2 {font-size: calc(4vw + 5px);} .cap2 span {display: inline;}
}
@media (max-width: 360px) {
#homepic:before {content:''; background:rgba(255,255,255,0.65); width:100%; height:100%; position:absolute;}
#homepic {height: 81vw;} #homepic img {width: calc(38vw + 400px);}
.cap {background: none;} .cap1 {font-size: 8vw; font-weight: 500 !important;} .cap1 span, .cap2 span {display: inline;} .cap2 {font-size: calc(4.5vw + 5px);}
}

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

/*Home Body Table*/

/*.bodytable {border: 1px solid green} .bodytable .bttext {border: 1px solid red} .btpic {border: 1px solid yellow} .btpic img {border: 1px solid cyan}
.button {border: 1px solid blue} .button a {border: 1px solid brown}*/

.ba1 .bodyhead {overflow: hidden;} .sp1 {position: relative; display: inline-block;}
.sp1:before, .sp1:after {content: ''; position: absolute; top: 50%; border-bottom: 1px solid #D50000; width: 100vw; margin: 0 20px;}
.sp1:before {right: 100%;} .sp1:after {left: 100%;}
@media (max-width: 930px) {.ba1 {padding-top: 45px;} .ba1 .bodyhead {padding-bottom: 10px;}}
@media (max-width: 1280px) and (min-width: 715px) {.sp2 {display: block;}}

.ba2 {background-color: #BA0901; margin: auto; text-align: center;} .ba2, .ba2 .heading {color: #FFF;}
.ba2 .bodyarea {padding-top: 45px; line-height: 1.6 !important;}

.bodytable {text-align: center;} .bodytable .heading {padding-bottom: 10px;}
@media (min-width: 1300px) {.bt1 .heading span {display: block;}}
@media (min-width: 1000px) {.bt2 .heading span, .bt3 .heading span {display: block;}}
.bodytable div {margin-top: 20px;} .bt1 {margin-top: 40px;} .bt3 {margin-bottom: 40px;}

.logopic {max-width: 329px !important; text-align: center !important; display: inline-block !important}
.logopic img {width: 329px; height: 411px;}

@media (min-width: 1401px) {.btpic img {width: 550px;}} @media (max-width: 1400px) {.btpic img {width: 500px;}}
@media (max-width: 1280px) {.btpic img {width: 450px;}}
@media (min-width: 1101px) {.bttext {width: 55%;} .btpic {width: 45%;}}
@media (max-width: 1100px) {.btpic img {width: 100%;} .bttext, .btpic {width: 50%;}}
@media (min-width: 951px) {
.bodytable td {text-align: center; vertical-align: middle;} .btpic img {display: block;}
.picl {text-align: left;} .picr {text-align: right;}
.textl {padding: 0 30px 0 0;} .textr {padding: 0 0 0 30px;} .bt2 {margin: 50px auto;} .noshowdsk {display: none;}
}
@media (max-width: 950px) {
.bodytable td {display: block;}	.bttext, .btpic {width: auto;} .bttext {text-align: left;}
.btpic {display: table-cell; text-align: center; margin-bottom: 10px;} .btpic img {width: 100%; max-width: 500px; margin-bottom: 15px;}
.bt2 {margin: 70px auto;} .noshowph {display: none !important;} .bodytable div {text-align: center;}
}

/*Buttons*/

.button {display: inline-block; vertical-align: middle; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative;}
.button a {position: relative; display: inline-block; text-align: center; margin: auto; font-size: 18px; line-height: 1; font-weight: 500; padding: 13px 17px; border-radius: 4px; background-color: #BA0901; color: #FFF !important; text-decoration: none !important;}
.button a:after {content: "\00BB"; position: absolute; opacity: 0; top: 14px; right: -20px; overflow: hidden;}
.button a:hover {cursor: pointer; padding-right: 33px; padding-left: 15px; background-color: #E00;} .button a:hover:after {opacity: 1; right: 14px;}

.button:before {content: ""; position: absolute; border: 6px solid #E00; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none; border-radius: 4px;}
.button:hover:before, .button:focus:before, .button:active:before {-webkit-animation-name: button; animation-name: button;}
@-webkit-keyframes button {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
@keyframes button {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}

@media (max-width: 1000px) and (min-width: 751px) {.btl .button {float: right;}}
@media (min-width: 481px) {.button a, .button a:after {-webkit-transition: .4s; transition: .4s;}}

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

/*New Area*/

.newareaback, .newarea {background-color: #613B16;}
.newarea {position: relative; font-size: 18px; line-height: 1.4; margin: auto; text-align: center;}
.newareatext {text-align: left; font-size: 1.15em; line-height: 1.5; color: #FFF;}
.newareahead {font-size: 2.15em; line-height: 1.2; font-weight: 500; margin: 0 0 20px 0; color: #FFF;}
.newareaimg {position: relative; background-repeat: no-repeat; background-size: cover; height: 100%; border-radius: 5px;}

.newarea {max-width: 1200px;}
@media (max-width: 1400px) {.newarea {max-width: 1100px;}} @media (max-width: 1280px) {.newarea {max-width: 950px;}}

@media (min-width: 901px) {.newareaimg {width: 40%;}}
@media (max-width: 900px) {.newareahead {font-size: 2em;}}
@media (max-width: 900px) and (min-width: 661px) {.newareaimg {width: 30%;}}
@media (max-width: 800px) and (min-width: 661px) {.newareatext {padding: 0 0 0 25px;}}
@media (min-width: 661px) {
.newarea {display: table; height: 100vw; max-height: 300px; padding: 30px 30px 45px 30px; box sizing: border-box}
.newareatext {padding: 30px 45px;} .newareaimg {display: table-cell;}
}
@media (max-width: 660px) {.newarea {padding-top: 30px;} .newareaimg {height: 60vw; width: 82vw; margin: auto;} .newareatext {padding: 30px 45px;}}
@media (max-width: 500px) {.newareahead {text-transform: none; font-size: 1.8em;}}
@media (max-width: 400px) {.newareahead {font-size: 1.6em;} .newareatext {padding: 30px;}}

@media (min-width: 501px) {.newareaimg {background-image: url("../images/pic1.jpg"); background-position: 50% 70%;}}
@media (max-width: 500px) {.newareaimg {background-image: url("../images/pic2.jpg");}}

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

/*Service List*/

#svclist {width: 100%; max-width: 750px; margin: auto; text-align: center;}
#svclist a {color: #6CC8FF !important; text-decoration: none;} #svclist a:hover {text-decoration: underline;}
#svclist td {width: 50%; vertical-align: top;}
#svclist ul {margin: 0 auto;} #svclist li {margin: 0 0 13px -18px; line-height: 1.4; text-align: left; color: #FFF;}
#svclist li:last-child {margin-bottom: 0;}
@media (min-width: 431px) {#svclist td:nth-child(1) ul {padding-right: 20px;}}
@media (max-width: 430px) {#svclist td {display: block; width: auto !important;} #svclist td:nth-child(2) {padding-top: 15px;}}

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

/*Values*/

.valsection .bodyhead {color: #C70000;}
#valueswrap {width: 100%; max-width: 1600px; margin: 30px auto 20px auto;}
.value {vertical-align: top; font-size: 20px; padding: 15px;}
.value img {display: block; vertical-align: middle; margin: auto; width: 113px; height: 83px; height: auto;}
.valhead {margin: 15px auto 10px auto; font-weight: 700; text-transform: uppercase; font-size: 1.2rem; line-height: 1.4;}
.valtxt {font-size: .95rem; line-height: 1.5;}

@media (max-width: 1080px) and (min-width: 906px) {.valhead {font-size: 1.1em; letter-spacing: -.4px;}}
@media (max-width: 965px) and (min-width: 906px) {.valhead {font-size: 1.05em; letter-spacing: -.5px;} .value {padding: 10px;}}
@media (min-width: 906px) {
#valueswrap {display: table; table-layout: fixed;}
.value {display: table-cell; width: 20%; text-align: center;} .valueimg {vertical-align: middle; display: table-cell; width: 1%;}
}
@media (max-width: 905px) {
.value {display: block; width: auto; text-align: left; margin: 0; padding: 15px; min-height: 110px;}	
.valueimg {float: left; vertical-align: top; text-align: left; margin-right: 15px;}
.valhead {margin: 0 auto 10px auto;} .valtxt {display: table-cell; font-size: .85em;}
}
@media (max-width: 530px) {.value {padding: 15px 0;}}
@media (max-width: 410px) {
.value {text-align: center; padding: 5px 0;}
.valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 20px;}	
}