body {
    min-height: 100vh;
    margin: 0;
    font-size: 1rem;
    font-family: var(--coffee-font-sans-serif);
    font-weight: 400;
    color:#111111;
    text-align: left;
    background: #f7f7f7;
}

:root {
    --coffee-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --coffee-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
:root {
    scroll-behavior:smooth
}

*, 
*::before, 
*::after { 
    box-sizing: border-box; 
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Template Mini */
body { 
	display: grid;
	grid-template-areas: 
		"header"
		"nav"
		"main"
		"footer";
	grid-template-rows: 3.7rem auto 1fr auto;
}

header {
	grid-area: header;
	display: grid;
	grid-template-areas: ". ghc .";
	grid-template-columns: 1fr minmax(auto,80rem) 1fr;
	column-gap: 0.5rem;
	min-width: 100%;
	background: #ffffff;
	position: fixed;
	left: 0;
	right: 0;
    z-index: 999;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%), inset 0 -1px 0 0 #dadce0;
}
.header-content {
	grid-column: ghc;
	display: grid;
	grid-auto-flow: column;
	justify-content: space-between;
	position: relative;
}
.lrtop {
    display: grid;
    align-items: center;
}
.logo {
    width: 5.75rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.logo a {
    display: grid;
}



.icons-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: left;
    align-items: center;
}

/* Icon */
.icons-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: left;
    align-items: center;
    position: relative;
    color:#111111;
}

.icon-box {
    width: 44px;
    height: 44px;
    position: relative;
}
.icon-box a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: green;
    z-index: 7;
}
.icon-box a:hover {
    background:#eaeaea; border-radius: 50%;
    color: green;
}
.icon-box a:focus {
    background:#eaeaea; border-radius: 50%;
    color: green;
}


/*Icon Phone*/
.phone-number-container {
    position:relative;
    color:#111111;
    height: 2.75rem;
}

.phone-number-container a {
    padding: 0 3.5625rem 0 1rem;
    height: 2.75rem;
    margin-right: -2.75rem;
    position: relative;
    z-index: 10;
    font-size: 1rem;
    text-decoration: none;
    color:#111111;
    display: flex;
    align-items: center;
}
.phone-number-container a:hover {
    color:#1a73e8;
}
.phone-number-container:hover ~ .icon-box {
    background:#eaeaea;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .phone-number-container {
        display: none;
    }
}


.icon-whatsapp-box {
    width: 44px;
    height: 44px;
    position: relative;
}
.icon-whatsapp-box a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
    padding: 0.3125rem;
    color: green;
    z-index: 7;
}
.icon-whatsapp-box a:hover {
    background: #eaeaea;
    border-radius: 10%;
}


nav {
	grid-area: nav;
	display: grid;
    background: #f7f7f7;
    grid-template-areas: ". gnc .";
    grid-template-columns: 1fr minmax(auto,80rem) 1fr;
}
/*Header Container*/
ul.navbar {
    grid-column: gnc;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	justify-content: space-evenly;
}
.navbar li {
    list-style-type: none;
}
.navbar li a {
	display: inline-block;
	line-height: 0;
	padding: 24px 10px 24px 10px;
	font-size: 17px;
	color: #000000;
	text-decoration: none;
}
.navbar li a:hover {
	color:#333333;
}
.navbar li.active a {
    color:#1a73e8;
}
/* Active Mobile Display */
@media (max-width: 768px) {
    ul.navbar {
        display:none;
    }
}



main.blog {
	grid-area: main;
    display: grid;
	grid-template-areas: ". blogcont .";
	grid-template-columns: 1fr minmax(auto,40rem) 1fr;
	row-gap: 1.4rem;
	column-gap: 0.5rem;
    padding-bottom: 3rem;
    align-content: start;
}
main.blog > * {
	grid-column: blogcont;
}
main.blog .ignorgap {
    grid-column: 1/-1;
    justify-self: center;
    max-width: 40rem;
    margin: 0 auto;
}

main.blog .gap {
    grid-column: 1/-1;
    justify-self: center;
    max-width: 40rem;
}

main.blog .banner {
    max-height: 380px;
    object-fit: cover;
    grid-column: 1/-1;
    justify-self: center;
}
main.blog h1 {
	margin: 0;
	padding: 0;
	font-weight: 500;
	line-height: 1;
	font-size: calc(1.7rem + 0.7vw);
	position: relative;
}
main.blog h2, main.blog h3, main.blog h4, main.blog h5, main.blog h6 {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1;
	position: relative;
}
main.blog p  {
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1.4;
	font-size: 1rem;
}
main.blog a  {
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1.4;
	font-size: 1rem;
}
main.blog pre {
    margin: 0;
    width: 100%;
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.4em;
    display: block;
    padding: 0.7rem;
    background-color: #eaeaea;
}
main.blog code  {
    background: #eaeaea;
    font-family: var(--coffee-font-monospace);
    white-space: pre-wrap;
}
main.blog code p  {
    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
    margin: -0.7rem -0.7rem 0.3rem -0.7rem;
    background: lightgrey;
}

main.blog img, main.blog svg, main.blog video, main.blog audio, main.blog source, main.blog blockquote, main.blog figure, main.blog div, main.blog iframe  {
	
	margin: 0;
	padding: 0;
	position: relative;
}
figcaption {
	text-align: center;
	background:#0000003d;
	padding: 0.1rem 0.7rem;
}
main.blog .wide  {
	grid-column: 1/-1;
	justify-self: center;
}

main.blog ul {
    margin: 0;
    padding: 0 0 0 1.2rem;
    display: block;
    line-height: 1.4;
    font-size: 1rem;
}
main.blog ol {
    margin: 0;
    padding: 0 0 0 1.2rem;
    display: block;
    line-height: 1.4;
    font-size: 1rem;
}

main.blog blockquote {
    margin: 0;
    padding: 0.5rem 0.7rem 0.5rem 0.7rem;
    background: #eaeaea;
    border-left: 2px solid #acacac;
}
main.blog blockquote p {
    margin-bottom: 0.7rem;
}
main.blog blockquote p.author {
    text-align: right;
    padding-right: 1rem;
}
main.blog blockquote p:last-child {
    margin-bottom: 0;
}


footer {
    grid-area: footer;
    background: #111111;
    display: grid;
    grid-template-areas: ". gfc .";
    grid-template-columns: 1fr minmax(auto,80rem) 1fr;
    column-gap: 0.5rem;
}


.minmax-footer {
    grid-column: gfc;
	padding: 1rem 0rem;
	min-height: 3rem;
	display: grid;
    grid-template-columns: 1fr;
	grid-template-areas:
		"left-footer"
		"right-footer";
    gap: 1rem;
}
@media (min-width: 375px) {
    .minmax-footer {
        grid-template-columns: 1fr 0.4fr;
        grid-template-areas:"left-footer right-footer";
    }
}
.left-footer {
    grid-area: left-footer;
    display: grid;
    row-gap: 0.7rem;
}
.right-footer {
    grid-area: right-footer;
    display: flex;
    width: 100%;
    padding: 0.3rem 0;
    justify-content: center;
    color: #eeeeee;
}
.right-footer div {
    color: #eeeeee;
}
@media (min-width: 375px) {
    .right-footer {
        justify-content: flex-end;
        padding: 0;
    }
}



/*Footer Container*/
ul.footbar {
    display: grid;
    margin: 0;
    padding: 0;
    row-gap: 0.4375rem;
}
.footbar li {
    list-style-type: none;
    margin: 0;
    display: block;
}
.footbar li a {
    line-height: 1.3;
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
}
.footbar li a:hover {
	color: #ddffff;
}
.footbar li.active a {
	color: #ccffff;
}

@media (min-width: 768px) {
    ul.footbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        column-gap: 0.9375rem;
    }
}

.copyright {
    margin: 0;
    font-size: 0.93rem;
    color: #cccccc;
}


/* Mobile Menu */
/* Icon Line */
.button-mobimenu-container {
    position: relative;
    width: 3.7rem;
    height: 3.7rem;
    cursor: pointer;
    z-index: 999;
}
/* Active Mobile Display */

.menu-icon {
    width: 30px;
    height: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:7;
    transform: translate(-50%, -50%);
}

.menu-icon span {
    display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	transform: rotate(0);
	transition: transform 0.1s ease;
	background: #282828;
}
.menu-icon span {
    background:#0800ff;
}
.menu-icon span.line-1 {
	top: 0;
}
.menu-icon span.line-2 {
	bottom: 0;
}

.menu-open .menu-icon span.line-1 {
    top: 5px;
    transform: rotate(45deg);

}
.menu-open .menu-icon span.line-2 {
    top: 5px;
    transform: rotate(-45deg);
}

/*Mobile Menu Container*/
.mobile-menu-content {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 270px;
    min-height: 100%;
    max-height: 100%;
    background:#ffffff;
    z-index: 777;
    transform: translate3d(-270px, 0, 0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.openpanel.mobile-menu-content {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-menu-box {
    height: 100%;
    padding: 3.7rem 0 0 0;
}
.mobile-menu-lrtb {
    min-height: 100%;
    position:relative;
}
.mobile-menu-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0; 
    left: 0;
    width: 270px;
    min-height: 100%;
    max-height: 100%;
    z-index: 7;
}




.mobile-menu-open {
    overflow-y: hidden;
}


ul.mobimenu {
	margin:0; padding:0;
}
.mobimenu li {
    list-style-type: none;
    position: relative;
}
.mobimenu li a {
	width: 100%;
	display: block;
	padding: 13px 17px;
	font-size: 1rem;
	color:#111111;
	text-decoration: none;
}
.mobimenu li a:hover {
	color:#1a73e8;
	background:#f7f7f7;
}
.mobimenu li.active a {
	color:#1a73e8;
	background:#f7f7f7;
}

ul.sub-menu {
    margin: 0;
    padding: 0;
}

/*Mobile Menu Reset*/
.bg-reset {
    display: none;
    width: 100%;
    height: 100%;
    visibility: visible;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 700;
    opacity: 0.7;
    background:#eeeeee;
}
.bg-reset.openpanel {
    display: block;
}

/*404*/
main.blog .posttop {
    background: #dadada;
    padding: 20px 10px 20px 10px;
    display: block;
    color: #111111;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    grid-column: 1/-1;
}