html, body {margin: 0; padding: 0;}
body {font-family: "Open Sans", Verdana, Geneva, sans-serif; font-variant-ligatures: none !important; color: #333;}

#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, a:visited, a:hover {outline: none; color: #00F;} a {text-decoration: none; cursor: pointer;} a, *:hover {-webkit-tap-highlight-color: transparent;}
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;}

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

/*HEADER*/

/*#headerback {border: 1px solid blue} #header {border: 1px solid green} #header table {border: 1px solid magenta} #header td {border: 1px solid red} #headertext {border: 1px solid orange} #headertext h1 {border: 1px solid #666;} #logo, #logo img {border: 1px solid #000;}*/

#headerback, #header {margin: 0 auto;} #header {max-width: 1650px;}
#header table {position: relative; margin: auto; padding: 6px 0; width: 100%;} #header td {vertical-align: middle;}

@media (min-width: 1500px) {#header {width: 92%;}} @media (max-width: 1499px) and (min-width: 541px) {#header {width: 97%;}}

#headertext h1 {text-align: center; margin: 0 auto; font-style: italic; font-weight: 400 !important; font-size: 22px; line-height: 1.35; padding: 0 20px 4px 20px;}

#logo img {display: block;}
#phone {font-size: 22px; font-weight: 600; text-align: right; white-space: nowrap; vertical-align: top !important;} #phone a {text-decoration: none;}

#social {position: absolute; display: table; height: 30px; bottom: 6px; right: 8px;}
#social a, #social img {height: 30px; width: 30px;} #social a {display: inline-block; margin: 0 3px -4px 3px;} #social img {display: block;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
#social img:hover {-webkit-animation: shake .16s 5;}

@media (min-width: 1001px) {#logo, #logo img, #phone {width: 280px;}} @media (max-width: 1000px) {#logo, #logo img, #phone {width: 240px;}}
@media (min-width: 871px) {#headertext h1 {font-size: 20px;} #headertext h1 span {display: block;}}
@media (max-width: 870px) and (min-width: 771px) {#headertext h1 {font-size: 2.2vw;}}
@media (max-width: 770px) {#logo, #phone {width: 50%;} #headertext, #headertext h1 {visibility: hidden; width: 0; padding: 0; font-size: 0;}}
@media (min-width: 461px) {#logo {padding: 10px 0 10px 10px;} #phone {padding: 0 12px 3px 10px;} }
@media (max-width: 460px) {
#header td {display: block;} #logo img {margin: 5px auto 0 auto; padding: 0 15px;}
#logo, #phone {width: auto; text-align: center;} #phone {padding: 12px 0 5px 0; font-size: 24px;}
}
/*if 5 social links
@media (max-width: 390px) {#phone {text-align: center;} #social {position: relative; left: 0; right: 0; bottom: 0; margin: 20px auto 0 auto;}
}*/

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

/*Big Pic*/

#toppic {position: relative; height: calc(80px + 35vw); max-height: 450px; overflow: hidden; background-color: #444; /*back clr sdf;*/}
#toppic img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height: 300px; width: 100%; height: auto; display: block;}

.caption {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 48%; -webkit-transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; margin: 0 auto; font-size: 80px; color: #FFF;}
.cap1 {font-family: 'Oswald', Impact, Calibri, Arial, Franklin Gothic; padding-bottom: 10px; font-size: 1.1em; line-height: 1.15; text-transform: uppercase; font-weight: 500 !important; text-shadow: 1px 1px 2px #000;}
.cap2 {font-size: .45em; line-height: 1.3; padding-top: 15px; font-weight: 600 !important;}

@media (max-width: 1500px) {.cap1 span {display: block;} .cap2 span {display: block;}}
@media (max-width: 950px) {.cap1 {font-size: 8.3vw;} .cap2 {font-size: 4vw;}}
@media (max-width: 720px) {.cap1 {font-size: 9.1vw;} .cap2 {font-size: 4.5vw;}}
@media (max-width: 400px) {.cap2 {font-size: 5.5vw; padding: 0 20px;} .cap2 span {display: inline;}}

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

/*BODY AREA*/

.bodyarea {position: relative; padding: 30px 0 35px 0; margin: auto; width: 88%; max-width: 1500px;} /* 92%, 1600px*/
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;} /*22px, 1.6*/
.bodyhead {padding: 10px 0 5px 0; font-weight: 600 !important; font-size: 1.7em; line-height: 1.2; text-align: center;} h1, h2, h3 {margin: 0 !important;}
.heading {font-weight: 600; font-size: 1.3em; line-height: 1.35; color: #000;}
@media (max-width: 480px) {.bodyhead {padding: 0; font-size: 1.5em;}}

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

/*Page Pic*/
.pagepic {float: right; margin: 10px 0 20px 30px;} .pagepic img {width: 100%; display: block; border-radius: 3px;}
.picwide {max-width: 500px;} .pictall {max-width: 350px;}
@media (max-width: 900px) and (min-width: 781px) {.picwide {max-width: 430px;}}
@media (max-width: 780px) {.pagepic {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 400px;}}

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

/*Photo Album*/

#albumarea {margin: 0 auto; padding: 70px 30px 65px 30px;} #album {margin: 0 auto !important; max-width: 1200px;} #album div {border-radius: 5px;}
@media (max-width: 645px) {#albumarea {padding: 50px 25px 45px 25px;}}
@media (max-width: 480px) {#albumarea {padding: 30px 15px 25px 15px;}}

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

/*Reviews*/

#rvws {width: 100%; margin: 30px auto;}
#rvws > div {vertical-align: top; text-align: center; padding: 25px; background-color: #FFF; border-radius: 8px;}
.rvwimg {display: inline-block; width: 100%; max-width: 265px; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 220px; background-position: center center; margin-bottom: 15px;}
.rvwimg div {padding-top: 48px;} #rvws > div div:nth-child(2) {font-size: .9em; line-height: 1.7; margin-bottom: 20px;}
#rvws span {display: block; line-height: 1.5; color: #888; font-size: .75em; margin-top: -7px;}
/*#rvws div:nth-child(1) {font-size: 1.1em;} #rvws div:nth-child(3) {font-size: 1.05em;} #rvws div:nth-child(5) {font-size: .95em;}*/

@media (max-width: 1350px) {#rvws {margin: 25px auto;}}
@media (min-width: 981px) {#rvws {display: table;} #rvws > div {display: table-cell; width: 31%;}}
@media (max-width: 980px) {#rvws {margin: 15px auto;}} @media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}

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

/*Contact Form*/

#formarea {position: relative; padding: 40px 30px 55px 30px; margin: auto; color: #FFF;}
#formarea table {position: relative; width: 100%; max-width: 800px;}

input[type=text] {height: 24px;}
input[type=text], textarea
{padding: 10px 8px; margin-bottom: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color: #FFF; border: 1px solid #DDD; border-radius: 3px; width: calc(100% - 20px); resize: none;}
textarea {height: 108px;} #formarea .spacer td {width: 5px; padding: 0;}
::placeholder {color: #AAA; opacity: 1;}
:-ms-input-placeholder {color: #AAA; opacity: 1;} ::-ms-input-placeholder {color: #AAA; opacity: 1;}

input[type=submit] {font-size: 20px; margin-top: 20px; padding: 10px 12px 8px 12px; width: 100%; border-radius: 5px; transition: 0.3s; cursor: pointer; border: inherit;}

.title {text-align: left; font-size: 18px; line-height: 1.4; padding: 7px 0 1px 0;}
form label {position: absolute; font-size: 13px; text-align: right; right: 5px; margin-top: -18px;}
input.error, textarea.error {border: 2px solid #FC0;} 
#success, #error {display: none; position: absolute; width: 100%; text-align: center; margin: -120px auto 0 auto; left: 0; right: 0; width: auto; padding: 0 15px; white-space: normal; font-size: 24px; line-height: 1.25; font-weight: 600;}

@media (max-width: 720px) {#formarea {padding: 18px 13px 35px 15px;}}
@media (max-width: 550px) {
#formarea {padding: 18px 10px 35px 13px;} #formarea td {display: block;}
.text, textarea {padding: 12px 8px;} textarea {height: 70px; resize: auto;} #formarea .spacer {display: none;}
}

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

/*BOTTOM AREA*/

#bottomarea {font-size: 14px; line-height: 1.8; padding: 15px 0 18px 0; text-align: center; clear: both;}
.web a {font-style: italic; text-decoration: none;} .web a:hover {text-decoration: underline;}
@media (max-width: 400px) {.web a {display: block;}} @media (max-width: 320px) {.btmco span {display: block;}}
#bottomarea {background-color: #111;} #bottomarea, #bottomarea a {color: #FFF;}

#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: .3s;}}

/*====================================================*/

/*COLORS*/

#headerback {border-top: 14px solid #C00;} .bodyhead {color: #C00;}
input[type=submit] {background-color: #FC0;} input[type=submit]:hover {background-color: #FE0;}
#formarea .bodyhead, #formarea td span, form label, #error {color: #FC0;}

/*tan*/
body {background-color: #FFF;} #albumarea {background-color: #c6b79e;} #rvwback {background-color: #A3957C;} #formarea {background-color: #72654C;}

/*grey
body {background-color: #EEE;} #albumarea {background-color: #C5C5C5;} #rvwback {background-color: #999;} #formarea {background-color: #666;}*/