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

@font-face {font-family: 'Andes'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('fonts/andes-neue-alt3-400.woff2') format('woff2'), url('fonts/andes-neue-alt3-400.woff') format('woff');
}
@font-face {font-family: 'Andes'; font-style: normal; font-weight: 500; font-display: block;
  src: local(''), url('fonts/andes-neue-alt3-500.woff2') format('woff2'), url('fonts/andes-neue-alt3-500.woff') format('woff');
}

@font-face {font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('fonts/oswald-400.woff2') format('woff2'), url('fonts/oswald-400.woff') format('woff');
}

body {font-family: 'Andes', Arial, Helvetica, sans-serif; font-variant-ligatures: none !important; word-spacing: .5px;}

#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: #A9D0F5;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .1em; cursor: pointer;}
img {border: 0; image-rendering: -webkit-optimize-contrast;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}
a, *:hover {-webkit-tap-highlight-color: transparent;}

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

/*HEADER*/

/*header {border: 1px solid green} .headtext {border: 1px solid orange} .headtext h1 {border: 1px solid #666;} #phone {border: 2px solid green;} #social {border: 1px solid red} #logo {border: 2px solid blue} #logo img {border: 1px solid orange} #logo a {border: 1px solid cyan}
.navheader {border: 1px solid orange} nav {border: 2px solid brown}*/

header {display: table; height: 100%; position: relative; margin: 0 auto; text-align: center; width: 95%; max-width: 1500px;}
header div {display: table-cell; vertical-align: middle;}

.headtext h1 {text-align: center; margin: 0 auto; font-style: italic; font-weight: 400; line-height: 1.4;} .headtext h1 span {display: block;}
.headtext table {margin: auto;}
.headtext:nth-of-type(1), .headtext td {font-size: 14px; line-height: 1.2; white-space: nowrap;}
.headtext td:first-child {text-align: left;} .headtext td:last-child {text-align: right;}

/*.navheader, nav {width: 380px; border: 3px solid blue !important}*/
@media (min-width: 1201px) {.headtext:nth-of-type(2) {width: 25%;} .headtext:nth-of-type(3) {width: 13%;}}
@media (max-width: 1200px) and (min-width: 1156px) {.headtext:nth-of-type(2) {width: 23%;} .headtext:nth-of-type(3) {width: 13%;}}
@media (max-width: 1155px) {.headtext:nth-of-type(2) {width: 28%;} .headtext:nth-of-type(3) {wisdth: 33%;}
.headtext:nth-of-type(3) {width: 300px;}}
@media (max-width: 835px) {.headtext:nth-of-type(2) {width: 45%;}}

.headtext span:first-child {display: inline-block;}
.headtext span, .headtext table {padding: 10px; background-color: #167BC1; border-radius: 4px; white-space: nowrap; margin: 15px auto;}

#logo {padding: 20px 0;} #logo img {display: block;} #phone {margin-top: 5px; font-size: 18px; font-weight: 500; white-space: nowrap;}

@media (min-width: 1601px) {.headtext h1 {font-size: 20px;}} @media (max-width: 1600px) {.headtext h1 {font-size: 18px;}}
@media (max-width: 1400px) {.headtext h1 {visibility: hidden; width: 0; padding: 0; font-size: 0;}}
@media (min-width: 1281px) {#logo, #logo img {width: 310px;} #logo img {height: 99px;}}
@media (max-width: 1280px) {#logo, #logo img {width: 260px;} #logo img {height: 83px;}}
@media (max-width: 1155px) {.headtext:nth-of-type(1), #logo {width: 160px;}}
@media (max-width: 835px) {.headtext:nth-of-type(3) {display: none;}}
@media (max-width: 605px) {.headtext:nth-of-type(2) {display: none;}}
@media (max-width: 100px) {header {width: 93%;}}
@media (max-width: 100px) {.headtext {visibility: hidden; width: 0; padding: 0; font-size: 0;}}
@media (min-width: 501px) {/*header {padding: 0; overflow: hidden;} #logo {padding: 18px 0;}*/ #logo a {display: table-cell;}}
@media (max-width: 500px) {
header {-webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-order: 2; order: 2;}
header div {display: block;} #logo img {margin: 13px auto 0 auto; padding: 0 15px; width: 310px; height: 99px;}
#logo a {display: inline-block;} #phone {margin: 15px auto; font-size: 24px;}
}
@media (max-width: 430px) {#logo img {width: 260px; height: 83px;}}
@media (max-width: 380px) {
#logo {margin: 50px auto 0 auto; width: auto;} #logo img {padding: 0; margin: auto; width: 310px; height: 99px;} #logo a {display: block;}
}
@media (max-width: 360px) {#logo img {width: 260px; height: 83px;}}

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

/*MENU*/

/*.navheader {border: 1px solid blue} nav {border: 1px solid green} nav div {border: 1px solid cyan} nav a {border: 1px solid red}*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;}
nav a.selected {cursor: text; pointer-events: none; -webkit-user-select: none; -webkit-touch-callout: none;}

nav a {display: block; position: relative; text-decoration:none !important; cursor: pointer; line-height: 1.25; font-weight: 400; vertical-align: middle; -webkit-transition: background .2s; font-family: 'Oswald', Arial, Helvetica, sans-serif;}


.navheader {text-align: right;}

@media (min-width: 1156px) {
.ham {display: none;}
nav {display:inline-block; width: 380px;} nav div {display: inline-block; vertical-align: middle; white-space: nowrap;}
nav a {display: table-cell; text-align: center; height: 48px; font-size: 18px; line-height: 1; padding: 3px 11px; border-radius: 10px;}
}
@media (max-width: 1155px) {
/*.navheader {position: absolute !important;}*/

.navheader, nav {width: 200px;}
nav {position: absolute; text-align: center; transition: .2s; height: 0; font-size: 0; box-sizing: border-box; z-index: -1; top: 70px; right: 0;}
nav div {display: block; text-align: center; left: 0; right: 0; margin: 0 -2px; font-size: 0; height: 0; opacity: 0; transition: .2s; border: 1px solid transparent;}
nav a {text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 1px 8px; border: 1px solid var(--menuline); pointer-events: none;}

#navcheck:checked ~ nav {height: 100%; z-index: 2; box-shadow: 0 8px 10px -2px #000; }
#navcheck:checked ~ nav div {opacity: 1; height: 65px;}
#navcheck:checked ~ nav a {font-size: 20px; opacity: 1; pointer-events: auto; height: 65px; vertical-align: middle;}

.ham {position: absolute; z-index: 600; top: 15px; right: 0; height: 35px; width: 45px; /*margin: auto; text-align: center;*/ padding: 0 10px 10px 10px;}
.ham:hover {cursor: pointer;} .ham > div {top: 18px; left: 10px;}
.ham > div, .ham > div::before, .ham > div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; opacity: 1; background: #FFF; -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; -webkit-transition: transform 0.2s ease-out; -webkit-transition: -webkit-transform 0.2s ease-out; border-radius: 2px;}
.ham > div::before {top: -11px;} .ham > div::after {top: 11px;}
#navcheck:checked ~ .ham > div {width: 0; background: rgba(18, 18, 18, 0);}
#navcheck:checked ~ .ham > div::before {-webkit-transform: rotateZ(38deg); transform: rotateZ(38deg); top: 0;}
#navcheck:checked ~ .ham > div::after {-webkit-transform: rotateZ(-38deg); transform: rotateZ(-38deg); top: 0;}
}
@media (max-width: 1155px) and (min-width: 101px) {
/*nav div {width: 33.3%;}*/ #navcheck:checked ~ nav a {display: table-cell; width: 1%;}
}
@media (max-width: 380px) {.ham {left: 0; margin: auto;} nav {left: 0; margin: auto;}}

:root {--menusline: #E30000; --menuhover: #9BC618; --menuselect: #4D8000;}
nav a {background-color: var(--menuback); color: #167BC1 !important;}
nav a {background-color: #FFF; border: 2px solid #222;}
nav .selected {background-color: var(--menuselect); color: #FFF !important;}
nav a:hover:not(.selected) {background-color: var(--menuhover); color: #FFF !important;}
@media (max-width: 1155px) {nav {background-color: var(--menuback);}}

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

/*BODY AREA*/

#bread {font-size: 14px; line-height: 1.4; margin-bottom: 20px;}
.bodyarea {padding: 20px 0 40px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 22px; line-height: 1.45; font-weight: 400 !important;}
.bodyhead {padding-bottom: 10px; font-weight: 500 !important; font-size: 1.8em; line-height: 1.25; text-align: center; word-spacing: 2px;}
section .bodyhead {padding-top: 0;}
.heading {font-weight: 500; font-size: 1.4em; line-height: 1.3; word-spacing: 1.5px;}
.heading2 {font-weight: 500; font-size: 1.15em; line-height: 1.35;}
@media (max-width: 800px) {.bodyhead {font-size: 1.7em; line-height: 1.15;}}
@media (max-width: 480px) {.bodyhead {font-size: 1.6em;}} @media (max-width: 360px) {.bodyarea {width: 88%;}}
h1, h2, h3, h4, h5 {margin: 0 !important;}

/*ul {margin-left: -15px;} ul li:not(ul li:last-child) {padding-bottom: 15px;} ul span {font-weight: 500;}*/

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

/*Home page - HomePics*/

#homepic {margin-top: 20px; padding: 0 20px;}
#homepic img {width: 500px; height: 300px; width: 100%; height: auto; max-height: 500px; object-fit: scale-down; display: block;}

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

/*Home page - Why Us*/

/*#whyus section {border: 1px solid blue} #whyus .bodyarea {border: 1px solid red}
#whyus .phead, #whyus .pmain, #whyus .p1, #whyus .p2 {border: 1px solid magenta}*/

#whyus {margin: auto; background-color: #015FA2;}
#whyus .bodyarea {-webkit-display: grid; display: grid; padding: 0;} #whyus div {font-size: 20px;} #whyus p {margin-bottom: 0;}
#whyus .heading {color: #BCEA01; font-size: 1.8em; font-weight: 500; line-height: 1.2;}
#whyus span {display: block; font-size: 1.4em; font-weight: 500; color: #BCEA01;}
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; /*object-position: 50% 50%;*/}

#whyus .pmain {margin-bottom: 15px;}
#whyus ul {margin-left: -15px;} #whyus ul li:not(#whyus ul li:last-child) {padding-bottom: 13px;}

@media (min-width: 1441px) {
#whyus section:first-child {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 40px; column-gap: 40px; grid-template-areas: "a a a" "b b b" "c d e" "f g h";}
#whyus .phead {grid-area: a;} #whyus .pmain {grid-area: b;} #whyus .p1 {grid-area: c;} #whyus .p2 {grid-area: d;} #whyus .p3 {grid-area: e;}
}
@media (max-width: 1440px) {#whyus .p1, #whyus .p2 {margin-bottom: 25px;}}
@media (min-width: 1201px) {
#whyus .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}
#whyus section:first-child {margin-right: 20px; padding: 50px 0;} #whyus section:last-child {margin-left: 20px;}
}
@media (max-width: 1200px) {
#whyus section:first-child {padding: 50px 0 0 0;} #whyus img {border-radius: 8px;}
#whyus section:last-child {margin-top: 50px; padding-bottom: 60px; height: calc(80px + 45vw); max-height: 450px;}
}

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

/*Home Page - Coupon*/

#coupon {padding: 35px 0 15px 0; background-color: var(--menuselect);}
#coupon div {margin: auto; text-align: center;}
#coupon div div:nth-child(1) img {width: 761px; height: 449px; max-width: 761px; width: 100%; height: auto; box-sizing: border-box; border: 2px solid #000; border-radius: 10px;}

#coupon div div:nth-child(3) {display: table; margin: auto; vertical-align: middle; text-align: center;}
#coupon div span {display: table-cell; vertical-align: middle;}
#coupon div div:nth-child(3) img {display: block; width: 120px; height: 63px; }
#coupon div div:nth-child(3) span:last-child {padding-left: 15px; font-size: .9em; text-align: left; line-height: 1.4;}
@media (max-width: 500px) {#coupon div div:nth-child(1) img {width: 421px; height: 248px; max-width: 421px; height: auto; width: 100%;}}
@media (max-width: 400px) {
#coupon div span, #coupon div span img {display: block; padding: 0 !important; text-align: center; margin: auto;}
#coupon div span img {margin-bottom: 13px;}
}

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

/*BOTTOM AREA*/

.btmareaback {background-color: #444; padding: 50px 20px;} .btmarea, .btmarea a {color: #FFF;}
.btmarea {display: grid; justify-content: center; margin: auto; max-width: 1500px; font-size: 17px;}
.btmarea .btmhead {display: block; letter-spacing: 1px; font-size: 1.5em; font-weight: 500; color: var(--menuhover);}

.btmarea .btmlogo img {display: block; width: 310px; height: 102px; margin: auto;}
.btmarea .btmlogo ul {text-align: left;} .btmarea .btmlogo a {text-decoration: none;}
.btmarea .btmlogo a:hover {text-decoration: underline;}
.btmarea .btmlogo li:not(.btmlogo li:last-child) {padding-bottom: 12px;}

.btmarea .btmhrs td {white-space: nowrap; padding: 3px 5px;}

.btmarea .btmcont {line-height: 1.45;}
.btmarea .btmcont span {display: block; font-size: 1.3em; font-weight: 500; margin-bottom: 5px;}
.btmarea .btmicons {margin: 20px 0 15px 0; font-size: 1.1em;} .btmarea .btmicons img {margin: 2px 8px 15px 0; vertical-align: top;}
.btmarea .btmsoc {margin-top: 15px;} .btmarea .btmsoc img {width: 36px; height: 36px; margin: 0 3px;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.btmarea .btmsoc img:hover {-webkit-animation: shake .16s 5;}

@media (min-width: 1016px) {
.btmarea {grid-template-columns: 31% 31% 33%;}
.btmarea .btmlogo {grid-column: 1 / 1;} .btmarea .btmhrs {grid-column: 2 / 2;} .btmarea .btmcont {grid-column: 3 / 3;}
}
@media (max-width: 1015px) and (min-width: 701px) {
.btmarea section {margin: 0 40px;}
.btmarea .btmlogo {grid-column: 1 / 3; grid-row: 1 / 1; margin-bottom: 35px;}
.btmarea .btmhrs {grid-column: 1 / 1; grid-row: 2 / 2;}
.btmarea .btmcont {grid-column: 2 / 2; grid-row: 2 / 2;}
}
@media (min-width: 701px) {
.btmarea {justify-items: center;} .btmarea .btmlogo div {display: grid; justify-content: center;} .btmarea .btmlogo ul {margin: 15px 0 0 -40px;}
}
@media (max-width: 700px) {
.btmareaback {padding: 30px;} .btmarea section {grid-column: 2 / 2; margin: 20px 0;}
.btmarea {display: block; max-width: 300px;} .btmarea .btmhrs {margin: 40px 0;}
.btmarea .btmlogo img {width: 100%; height: auto; max-width: 310px;}
.btmarea .btmlogo ul {margin: 25px 0 0 5%;} .btmarea .btmhrs, .btmarea .btmcont {margin-left: 10%;}
}

#llms {font-size: 12px; color: #BBB !important; text-decoration: none; cursor: text;}

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

/*Bottom*/

#serving {font-size: 11px; line-height: 1.4; color: #BBB; font-family: Arial, Helvetica, sans-serif;}
#serving a, .nolink {color: inherit !important; text-decoration: none !important; pointer-events: none !important;}

footer {font-size: 14px; line-height: 1.6; padding: 25px 25px 22px 25px; text-align: center;}
.web, .web a {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #BBB !important;}
.web a {font-style: italic; text-decoration: none; white-space: nowrap;} .web a:hover {text-decoration: underline;}

#totop {position: fixed; height: 18px; width: 18px; right: 14px; bottom: 12px; z-index: 100; padding: 8px 9px 8px 10px; border: 2px solid rgba(155, 155, 155, .4); background-color: rgba(80, 80, 80, 0.45); border-radius: 4px;}
#totop div {font-family: Arial, Helvetica, sans-serif; display: inline-block; -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 32px; line-height: 18px; color: #FFF;}
#totop:hover {-webkit-transform: scale(1.05);}
@media (min-width: 481px) {#totop {-webkit-transition: .15s;}}

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

/*COLORS*/

body {background-color: #167BC1;} .bodyarea, .heading2, #headerback, header, footer, footer a, #btm_menu a, .copy, .web a:hover {color: #FFF;}
#headerback, header {background-color: #015FA2;} #phone, .bodyhead {color: #BCEA01;}
.heading {color: var(--menuback);}
#headtop, footer {background-color: #000;}