/*I belive there is a css and js compress site to use before deploying*/html, body{margin: 0%; box-sizing: border-box; overflow-x: hidden;}:root{/* Theme colors */ --text-gray: #3f4954; --text-light : #686666da; --bg-color: #0f0f0f; --white: #ffffff; --green: #207567; --noir: black; /* gradient color */ --forest: linear-gradient(to right top, #DFEAE2, #207567); /* theme font-family */ --Abel: 'Abel', cursive; --Lexend: 'Lexend', cursive; --Livvic : 'Livvic', cursive;}/* ---------------- Global Classes ---------------*/a{text-decoration: none; color: var(--noir);}.flex-row{display: flex; flex-direction: row; flex-wrap: wrap;}ul{list-style-type: none;}h1{font-family: var(--Lexend); font-size: 2.5rem; font-display: optional; color: var(--white);}h2{font-family: var(--Lexend); text-align: center; font-display: optional; padding-top: 1rem;}h3{font-family: var(--Abel); font-display: optional; font-size: 1.3rem;}button.btn{border: none; border-radius: 2rem; padding: 1rem 3rem; font-size: 1rem; font-family: var(--Livvic); cursor: pointer;}button.btn:hover{color:white;}span{font-family: var(--Abel);}.container{margin: 0 5vw;}.text-gray{color: var(--text-gray); font-display: optional;}p{font-family: var(--Lexend); font-display: optional; color: var(--text-light); line-height: 1.5;}.ContainerCTABTN{text-align: center;}.HeroTextMobile,.HeroH1Mobile{display: none;}#wpforms-159-field_0{margin-left: 1rem;}#wpforms-159-field_1{margin-left: .2rem; margin-bottom: 1rem;}/* ------x------- Global Classes -------x-------*//* --------------- navbar ----------------- */.sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}a{text-decoration: none;}ul{list-style: none;}header{width: 100%; position: fixed; z-index: 10; top: 0; left: 0; background-color: black;}.container{width: 100%; max-width: 117rem; margin: 0 auto; padding: 0 1.5rem;}.menu-icons{color: #eee; font-size: 4rem; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); cursor: pointer; z-index: 10; display: none;}nav{display: flex; /* position:fixed;*/ align-items: center; place-items: center; width: 100%; height: 80px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}nav a{color: white;}.logo{position: relative; left: .1rem; display: flex;}.nav-list{display: flex; margin-left: 25rem; width: 100%; align-items: center;}.nav-list li{line-height: 8rem; position: relative;}.sub-menu li{line-height: 3rem;}.social{margin-left: 2rem;}.social i{padding: .5rem .5rem .5rem .5rem; margin-inline-end: -5%;}.social i:hover{color: var(--green)}.nav-list a{display: block; color: #eee; padding: 0 1.5rem; font-size: 1.4rem; /*text-transform: uppercase;*/ transition: color 650ms;}.nav-list a:hover,.nav-list a:focus{color:var(--green);}.btn,.CTAMainBTN{padding: 1rem; display: inline-block; background-color:#75202E; border: 2px solid var(--noir); border-radius: 5rem; transition: background-color 650ms;}.btn:hover{color: var(--green); background-color: rgba(0, 0, 0, 0.2);}.sub-menu{width: 20rem; display: block; position: absolute; border-top: 3px solid var(--green); background-color: black; z-index: 10; top: 16rem; transition: all 650ms ease; opacity: 0; visibility: hidden;}.sub-menu::before{content: ""; position: absolute; top: -2.5rem; left: 3rem; border: 1.2rem solid transparent; border-bottom-color: var(--green);}.sub-menu .sub-menu::before{top: 0.9rem; left: -2.5rem; border: 1.2rem solid transparent; border-right-color: var(--green);}.sub-menu .sub-menu{border-top: none; border-left: 3px solid var(--green); top: 0; left: 160%;}.nav-list li:hover > .sub-menu,.nav-list li:focus-within > .sub-menu{top: 8rem; opacity: 1; visibility: visible;}.sub-menu li:hover > .sub-menu{top: 0; left: 100%;}li.move-right{margin: auto 0 auto auto; line-height: initial;}/*guessing it is more efficeint if I combine my media queries? Right now I have ones in each section for easier reading*/@media screen and (max-width: 1480px){.nav-list{margin-left: auto;}h1{font-size: 1.5rem;}}/* -------x------- navbar ---------x------- *//* ----------------- Main Content----------- *//* --------------- Site title/Hero Section ---------------- */.hero{height: 80vh; position: relative;}.hero h1{position: absolute; text-align: left; top: 40vh; left: 5%; color: black; font-size: 1.8vw !important; z-index: 2;}.hero p{position: absolute; text-align: left; top:30vh; left: 70%; color: black; font-size: 1.20vw !important; z-index: 2;}#HeroImg{position: absolute; height: 100%; width: 100%; z-index: 1; mix-blend-mode: lighten;}#HeroImg2{height: 100%; width: 150%; animation: animatedBackground 20s alternate infinite;}.hero,#HeroImg,#HeroImg2{min-height: 200px;}#HeroImg,#HeroImg2{margin-top: 4rem;}@keyframes animatedBackground{0%{transform: translate(0%,0%);}100%{transform: translate(10%,-2%);}}@-webkit-keyframes animatedBackground{0%{transform: translate(0%,0%);}100%{transform: translate(10%,-2%);}}/* --------x------ Site title/Hero Section --------x------- *//* ---------------- Site Content ----------------*/main .site-content{display: grid; grid-template-columns: 70% 30%;}main .post-content{width: 100%;}main .site-content .post-content > .post-image, .post-title{padding: 1rem 2rem; position: relative;}main .site-content .post-content > .post-image .post-info{background: var(--forest); padding: 1rem; position: absolute; bottom: 0%; left: 35%; border-radius: 3rem;}.CTAMainBTN{margin-top: 4vh; color: #eee; background-color: var(--green); font-size: 1.4rem;}.CTAMainBTN:hover{cursor: pointer;}main .site-content .post-content > .post-image > div{overflow: hidden;}main .site-content .post-content > .post-image .img,#portfolio-posts-image,#portfolio-posts-image2,#portfolio-posts-image3{width: 100%; max-height: 80vh; text-align: center; transform: scale(.9); transition: all 1s ease;}main .site-content .post-content > .post-image .img:hover,#portfolio-posts-image:hover,#portfolio-posts-image2:hover,#portfolio-posts-image3:hover{transform: scale(1); overflow: hidden;}main .site-content .post-content > .post-image .post-info span{margin: -.5rem .5rem; text-align: center;}main .post-content .post-title a{font-family: var(--Livvic) !important; font-size: 1rem !important;}.site-content .post-content .post-title .post-btn{border-radius: 0; padding: .5rem 1.5rem; background: var(--forest);}.site-content .pagination{justify-content: center; color: var(--text-gray); margin: 4rem 0;}.read-more{display: none;}.site-content .pagination a{padding: .6rem .9rem; border-radius: 2rem; margin: 0 .3rem; font-family: var(--Lexend);}.site-content .pagination .pages{background: var(--text-gray); color: var(--white);}/* -------x-------- Site Content --------x-------*//* --------------- Sidebar ----------------------- */.site-content > .sidebar .category-list{font-family: var(--Livvic);}.site-content > .sidebar .category-list .list-items{background: var(--forest); padding: .4rem 1rem; margin: .8rem 0; border-radius: 3rem; width: 70%; display: flex; justify-content: space-between;}.site-content > .sidebar .category-list .list-items a{color: black;}.site-content .sidebar .popular-post .post-content{padding: 1rem 0;}.site-content .sidebar .popular-post h2{padding-top: 8rem;}main .site-content .sidebar .popular-post .post-info{padding: .4rem .1rem !important; bottom: 0rem !important; left: 1.5rem !important; border-radius: 0rem !important; background: white !important;}.site-content .sidebar .popular-post .post-title a{font-size: 1rem;}.post-title a:hover{color: blue;}/* -------x------- Sidebar -----------x----------- *//* ---------x------- Main Content -----x----- *//* ----------------- Footer --------------------- */footer{/* position: fixed; bottom: 0px; width: 100%; */ position: relative; height: 100%; /* background: linear-gradient(to right bottom, rgb(0, 0, 0.8), rgba(255,255,255,0.5));*/ background: black;}.main-content{display: flex; color: white;}.main-content .box{/*flex-basis: 50%;*/ /*50% to allow for Email form. Email form fails to track so removed for now*/ padding: 10px 10px;}.box h2{font-size: 1.125rem; font-weight: 600; text-transform: uppercase; text-align: left;}.text{color: white;}.left .content p{text-align: justify; color: white; margin-left: 1.5rem;}.left .content .social{margin: 1rem 0 0 1.5rem;}.left .content .social a{padding: 0 2px;}.left .content .social a span{height: 40px; width: 40px; line-height: 40px; margin-top: .5rem; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.1s; background: var(--forest);}.left .content .social a span:hover{background: white;}footer.footer .move-up{position: absolute; right: 6%; top: 60%; color: white;}footer.footer .move-up span{color: var(--forest);}footer.footer .move-up:hover{color: var(--white); cursor: pointer;}/* ---------x------- Footer ----------x---------- *//* Viewport less then or equal to 1130px *//*post info spans do not stay centered have not been able to fix*/@media only screen and (max-width: 1080px){.site-content .post-content > .post-image .post-info{left: 20% !important; bottom: 1.2rem !important; border-radius: 0% !important;}.site-content .sidebar .popular-post .post-info{display: none !important;}footer.footer .container{grid-template-columns: repeat(2, 1fr);}main .site-content .post-content > .post-image .img,#portfolio-posts-image,#portfolio-posts-image2,#portfolio-posts-image3{text-align: left; padding-left: 0;}.Hero,#HeroImg2,#HeroImg{height: 70vh;}}@media only screen and (max-width: 1020px){.nav-list{position: fixed; top: 0; left: 0; height: 100vh; display: none; flex-direction: column; align-items: initial; background-color: #191919; z-index: 1; overflow-y: scroll;}.social i{transform: scale(1.5); margin: .5rem; text-align: center;}.nav-list > li{line-height: 6rem;}.sub-menu{position: initial; border: 3px solid transparent; border-left-color: var(--green); margin-left: 1rem; max-height: 0;}.sub-menu::before{display: none;}.nav-list li:hover > .sub-menu{opacity: 1; visibility: visible; max-height: initial;}li.move-right{margin: 0 auto 0 0; line-height: initial;}.menu-icons{display: block;}.ion-md-close{display: none;}nav.active .ion-md-close{display: block;}nav.active .ion-md-menu{display: none;}nav.active .nav-list{display: flex;}}/*------------End Viewport less then or equal to 1130px-------------*//*------------Viewport less then or equal to 750px-------------*/@media only screen and (max-width: 770px){.nav .nav-menu, .nav .nav-items{flex-direction: column;}.nav .toggle-collapse{display: initial;}.site-content .post-content > .post-image .post-info{left: 10%;}main .site-content{grid-template-columns: 100%;}footer.footer .container{grid-template-columns: repeat(1, 1fr);}.hero, #HeroImg2, #HeroImg{height: 40vh;}.hero h1{top:70%;}.hero p{top:55%;}.ContainerCTABTN{margin-top: 5vh;}}/* x Viewport less then or equal to 750px x *//* Viewport less then or equal to 520px */@media only screen and (max-width: 520px){main .blog{height: 125vh;}.site-content .post-content > .post-image .post-info{display: none;}footer.footer .container > div{padding: 1rem .9rem !important;}footer .rights{padding: 0 1.4rem; text-align: center;}nav .toggle-collapse{width: 80% !important;}.social i{transform: scale(1); margin: auto;}.hero, #HeroImg, #HeroImg2{height: 20vh;}.hero h1, .hero p{display: none !important;}.HeroTextMobile{margin-top: 3rem; display:flex !important;}.ContainerCTABTN{margin-top: -10vh; margin-bottom: 2VH; /*text-align: justify;*/}main .site-content .post-content > .post-image .img, #portfolio-posts-image, #portfolio-posts-image2, #portfolio-posts-image3{transform: scale(1);}h2{margin-top: -1rem; margin-right: 2rem;}p{margin-left: 1rem; margin-right: 2rem;}}/* x Viewport less then or equal to 520px x */