/*
MB Ranch King - Dealers Styles - Poral
Author: Internet Imagineering, LLC
Version: 1.0
*/

:root {
	/* CUSTOM SITE COLORS */
	--mb-red: #ed2124;
	--mb-brown: #5c5040;
    
    /* STANDARD COLORS */
    --beige: #FF9900;
    --red: #459939;
    --dkred: #990000;
    --black: #000000;
    --ltblack: #333333;
    --ltgray: #f6f6f6;
    --midgray: #CCCCCC;
    --gray: #999999;
    --dkgray: #666666;
    --white: #ffffff;

}

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'PT Sans', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

html {scroll-behavior: smooth;}

#scrollLink {scroll-behavior: smooth;}

* { box-sizing: border-box; }
#wpadminbar { top:auto !important; bottom:0 !important; }
.clear { clear: both;}

.imgFull {width: 100%;}
img.imgFull {width: 100%;}

.lightbox {display: none;}
.holderMatterport {width: 960px;}

/* TEXT */
.textWhite {color: var(--white);}
.textGray {color: var(--midgray);}
.textLtBlack {color: var(--ltblack);}
.textBrown {color: var(--mb-brown);}

.textCenter {width: 100%; text-align: center;}

/* BUTTONS */
button.buttonCapsule-1-White {background-color: var(--white); color: var(--black); font-size: 16px; font-weight: 600; letter-spacing: 1px; padding: 10px 30px; border-radius: 30px; border: 1px solid white; text-transform: uppercase;}
button.buttonCapsule-1-White:hover {background-color: var(--black); color: var(--white); cursor: pointer;}

button.buttonCapsule-2-White {background-color: var(--white); color: var(--black); font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 10px 30px; border-radius: 30px; border: 1px solid white; text-transform: uppercase;}
button.buttonCapsule-2-White:hover {background-color: var(--black); color: var(--white); cursor: pointer;}

button.buttonCapsule-Content {background-color: var(--white); color: var(--mb-brown); font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 10px 30px; border-radius: 30px; border: 1px solid var(--mb-brown); text-transform: uppercase; margin: 10px 0;}
button.buttonCapsule-Content:hover {background-color: var(--mb-brown); color: var(--white); cursor: pointer;}

/* LINKS */
a { color: var(--mb-brown); text-decoration: none; &:hover { text-decoration: underline; } &:visited { color: var(--mb-brown); }}
a.envira-gallery-links {color: var(--mb-brown); text-decoration: none;}
a:visited.envira-gallery-links {color: var(--mb-brown); text-decoration: none;}
a:hover.envira-gallery-links {color: var(--white); text-decoration: none;}

a.linkLtGray {color: var(--ltgray); text-decoration: none;}
a:visited.linkLtGray {color: var(--ltgray); text-decoration: none;}
a:hover.linkLtGray {color: var(--dkgray); text-decoration: none;}

a.linkWhite {color: #e1e1e1; text-decoration: none;}
a:visited.linkWhite {color: #e1e1e1; text-decoration: none;}
a:hover.linkWhite {color: var(--white); text-decoration: underline;}

a.linkBrown {color: var(--mb-brown); text-decoration: none;}
a:visited.linkBrown {color: var(--mb-brown); text-decoration: none;}
a:hover.linkBrown {color: var(--mb-red); text-decoration: none;}

/* INPUT */

.inputText {padding: 5px 10px; font-size: 1rem;}
input[type=text], input[type=password] { display:block; width: 100%; padding: 0.5em; border: 1px solid var(--mb-brown); margin-bottom: 0.5em;  }
input.formSubmit {background-color: var(--white); color: var(--mb-brown); font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 10px 30px; border: 1px solid var(--mb-brown); text-transform: uppercase; margin: 10px 0;}
input.formSubmit:hover {background-color: var(--mb-brown); color: var(--white); cursor: pointer;}

/* DASHBOARD NAV */

ul.dashboard-nav { 
    list-style-type: none; padding:0; margin:0; background: var(--mb-brown); display:flex; align-items: center; gap: 1em; 
    li { 
        list-style-type:none;padding:0;margin:0; 
        a { 
            display:block;background: var(--mb-brown); color: white; padding: 1em; border: 2px solid var(--mb-brown);
            &:hover { background: white; color: var(--mb-brown); }
        }
    }
}


/* HEADINGS */
h1.mainheading {font-size: 60px; font-weight: 400; margin: 0; padding: 0; letter-spacing: 1px;}
h3.subheading {font-family: 'PT Serif', times, times new roman, sans serif; font-size: 28px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; padding: 0;}

h1.mainheading2 {font-size: 38px; font-weight: 400; margin: 0; padding: 0; letter-spacing: 1px;}
h3.subheading2 {font-family: 'PT Serif', times, times new roman, sans serif; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; padding: 0;}
h1.mainheading3 {font-size: 28px; font-weight: 600; margin: 0; padding: 0; letter-spacing: 1px;}

h4.minorheading {font-size: 20px; font-weight: 400; margin: 0; padding: 0; letter-spacing: 1px;}

/* LOGIN */
.loginWrapper {width: 100%; height: 2000px; background-image: url('/access/images/portal-login-bg.jpg'); background-repeat: no-repeat; background-position: top right; background-size: cover; position: relative;}
.loginContainer {width: 80%; max-width: 1000px; background-color: #ffffffCC; border: 1px solid var(--t-blue); position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%);}
.loginHeader {width: 100%; background-color: #000; display: grid; grid-template-columns: 180px auto; align-items: center;}
.portalLogo {width: 100%;}
.portalLogo img {width: 100%;}
.portalTitle {font-size: 1.2rem; text-transform: uppercase; color: #fff; text-align: right; padding: 0 20px 0 0;}
.portalheaderTitle {font-size: 1.2rem; text-transform: uppercase; color: #fff; text-align: left; padding: 0 0 0 30px;}
.portalheaderRight {text-align: right; font-size: 1.2rem; padding: 0 30px 0 0;}
.portalheaderRight a {color: #fff; text-decoration: none; margin: 0 0 0 20px;}
.portalheaderRight a:visited {color: #fff; text-decoration: none;}
.portalheaderRight a:hover {color: #fff; text-decoration: underline;}

.loginContent {width: 90%; margin: 60px auto; }
.formHolder {display: grid; grid-template-columns: 2fr 1fr; margin: 30px auto;}
.formLeft {border-right: 1px solid var(--mb-brown); padding: 0 40px 0 0;}
.formRight {padding: 0 0 0 40px;}

.loginIntroText {font-size: 1rem; font-weight: 600;}
.formContainer {margin: 20px 0;}

/* LANDING PAGE */
.landingHeader-Wrapper {width: 100%; background-color: #000; display: grid; grid-template-columns: 180px auto auto; align-items: center;}
.landingHeader-Logo {width: 100%;}
.landingHeader-Logo img {width: 100%;}
.landingHeader-Title {font-size: 1.2rem; text-transform: uppercase; color: #fff; padding: 0 0 0 20px;}
.landingHeader-Links {text-align: right; padding: 0 20px 0 0;}

.landingGrid-Container {width: 90%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; margin: 0 auto; padding: 100px 0;}
.landingContent-Holder {width: 100%; background-color: #ffffffCC; padding: 30px;}


/* WEB REQUEST PAGE */

.webGrid-Container {width: 90%; display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 50px; margin: 0 auto; padding: 100px 0;}

/* HEADER */
.portalHeader {width: 100%; background-color: #000; display: grid; grid-template-columns: 180px auto; align-items: center;}
.portalHeaderWrapper {width: 100%; background-color: #000; display: grid; grid-template-columns: 180px auto auto; align-items: center;}

.sectionpicWrapper {width: 100%; background: #e1e1e1 url('/access/images/portal-sectionpic-1.jpg') no-repeat top right; height: 300px; min-height: 300px; position: relative;}
.sectionTitle {font-family: 'PT Serif', times, times new roman, sans serif; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; padding: 0; color: #fff; position: absolute; top: 50%; left: 10%; transform: translate(0, -50%);}

.navContainer {width: 100%; display: grid; grid-template-columns: auto auto; background-color: var(--mb-brown); align-items: center;}
.navContainer2 {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; align-items: center;}

.headerProfileInfo {text-align: right; font-size: 1rem; color: #fff; padding: 0 30px 0 0;}

/* LAYOUT */
.pageWrapper {width: 90%; margin: 80px auto; min-height: 500px;}

.dashboardLayout {display: grid; grid-template-columns: 2fr 1fr 1fr; grid-column-gap: 40px;}
.dashboardLeft {border-right: 1px solid var(--mb-brown);}
.dashboardRight {border-left: 0px solid var(--mb-brown); padding: 0px;text-align: center;}
.dashboardMiddle {border-right: 1px solid var(--mb-brown);padding: 0px 40px 0px 0px;text-align: center;}

.welcomeContainer  {width: 100%; padding: 0px 50px 0px 0px;}


/* GALLERY */
div.gallery {
  margin: 15px;
  border: 1px solid #ccc;
  float: left;
  width: 250px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}


/* LIGHTBOX */

.lightbox {display: none; padding: 30px;}
.lb-strengths {margin: 20px 0;}
.lb-fullBio {margin: 20px 0;}
.lb-solutionsContainer {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; font-size: .9rem;}
.lb-title {font-size: 1.2rem; font-weight: 600; color: var(--r-dkblue);}
.lb-solutionHolder {border: 1px solid var(--r-teal); font-size: 1rem; padding: 10px 20px; text-align: left; font-weight: 300; margin: 10px 0;}

.profileHead {width: 100%; display: grid; grid-template-columns: 100px auto; grid-column-gap: 30px; align-items: center;}
.profilePic {width: 100%;}
.profilePic img {width: 100%;}
.profileBio {margin: 20px 0;}

h3.subhead1 { font-size: 1.4rem; margin: 0; padding: 0; line-height: 2rem; font-weight: 600;}

.sect3Container {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; grid-row-gap: 60px; margin: 50px 0px 50px 0px; border: 0px solid blue;}
.sect3-Person {width: 100%; margin: 00px;  border: opx solid red;}





/* FOOTER */
.footerWrapper {width: 100%; padding: 40px 0; text-align: center; background-color: var(--ltblack); color: #fff; font-size: .8rem; text-transform: uppercase;}


/* SIDENAV */
#sidenav {
	 position: fixed; 
	 /* switch "right" to "left" to switch sides: */
	 right: calc(-100vw - 10px); transition: right 0.5s;
	 top:0; bottom: 0;
	 width: 100vw; max-width: 500px; /* full screen on small screens */
	 z-index: 999999999; box-shadow: 0 0 10px #0008;
	 background: var(--mb-brown); color: var(--white);
	 font-size:1.5em;
 }
 #sidenav.active { right: 0; } /* switch "right" to "left" */
 #sidenav-header { width: 100%; display:grid; grid-template-columns: 120px auto; align-items:center; column-gap: 10px; margin: 0;}
 #sidenav-header img { display: block; width:100%; margin: 20px 0 0 20px;}
 #sidenav-title {font-family: 'PT Serif', times, times new roman, sans serif; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; padding: 0; margin: 30px auto; text-align: center;}
 #sidenav ul { 
	 height: 100vh;
	 padding: 0; 
	 /* add some bottom padding to allow scrolling lower */ 
	 padding-bottom: 350px;  
	 margin: 0; 
	 overflow: auto; 
	 border-top: 1px solid #999; 
 }
 #sidenav li { list-style-type: none; border-bottom: 1px solid #999; margin: 0; padding: 8px 2rem; font-size: 1.2rem;}
 #sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--sidenav-fg,white); text-decoration: none; }
 #sidenav-close { 
	 /* reposition within the sidenav as needed */
	 position: absolute; 
	 top: 20px; right: 20px; 
	 cursor: pointer; 
	 font-size:1.5em;
	 transition: all 0.2s; 
 }
 #sidenav-close:hover, #sidenav-close:active { color: white; text-shadow: 2px 2px 8px #0008; transform: translate(-2px, -2px); }
 #sidenav-footer { position:absolute; bottom:0; left:0; right:0; height: 100px; display: flex; justify-content: center; align-items: center; background: #333; font-size: 12px; text-transform: uppercase;}


@media only screen and (max-width: 1440px) {
.navContainer2 {
 grid-template-columns: 1fr 1fr 1fr 1fr

}


}


}
@media only screen and (max-width: 1199px) {

.navContainer2 {
 grid-template-columns: 1fr 1fr 1fr;}

  
  
}

@media only screen and (max-width: 1023px) {

.landingGrid-Container {width: 90%; display: grid; grid-template-columns: auto; grid-column-gap: 0px; grid-row-gap: 50px; margin: 0 auto; padding: 100px 0;}
	
	
	@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	.navContainer2 {grid-template-columns: 1fr 1fr;}
  	.dashboardLayout {display: grid; grid-template-columns: 1fr; grid-column-gap: 40px;}
	.dashboardLeft  {text-align: center;}

}

@media only screen and (max-width: 767px) {

.navContainer2 {
 grid-template-columns: 1fr;

  }
 .sect3Container {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap:	
	
}

@media only screen and (max-width: 480px) {
	
	
}