/* ==========================
=========== PRESET ==========
============================= */
.center footer { justify-content: center;}
section {
    display: grid; grid-template-columns: var(--wh02) var(--wh02) var(--wh03) var(--wh02) var(--wh01) var(--wh02); gap: 0px var(--gap);  
    grid-template-areas:"SF SF SF SF SF SF" "SH SH SH SH SH SH"	"SM SM SM SM SM SM" "SI SI SI SI SI SI"  "SB SB SB SB SB SB" "SS SS SS SS SS SS" "SD SD SD SD SD SD" "ST ST ST ST ST ST" "SC SC SC SC SC SC" ; 
    justify-content: center;
}
.lefty { 
    grid-template-areas:"SAx SAx SAx SF SF SF" "SA SA SA SF SF SF" "SH SH SH SF SF SF"	"SM SM SM SF SF SF " "SB SB SB SF SF SF" "SI SI SI SF SF SF" "SS SS SS SS SS SS"; 
    text-align: right;
}
.righty{ 
    grid-template-areas:"SF SF SF SAz SAz SAz" "SF SF SF SA SA SA" "SF SF SF SH SH SH"	"SF SF SF SM SM SM" "SF SF SF SB SB SB" "SS SS SS SS SS SS";  
    text-align: left;
}
.centy { 
    display: grid; grid-template-columns: var(--wh03) var(--wh01) var(--wh02) var(--wh02) var(--wh01) var(--wh03);
    grid-template-areas:"SF SF SF SF SF SF" "SHx SH SH SH SH SHa"	"SM SM SM SM SM SM" "SIx SIy SI SI SIb SIa"  "SB SB SB SB SB SB" "SN SN SN SN SN SN" "SS SS SS SS SS SS" ; 
    text-align: center;
}
.centery { 
    display: grid; grid-template-columns: var(--wh03) var(--wh01) var(--wh02) var(--wh02) var(--wh01) var(--wh03);
    grid-template-areas:"SF SF SF SF SF SF" "SHx SH SH SH SH SHa"	"SMx SM SM SM SM SMa" "SIx SIy SI SI SIb SIa"  "SB SB SB SB SB SB" "SN SN SN SN SN SN" "SS SS SS SS SS SS" ; 
    text-align: center;
}
.formy1 form>main {  grid-template-areas: "IN1 IN1 IN1 IN2 IN2 IN2" "IN3 IN3 IN3 IN4 IN4 IN4" "IN5 IN5 IN5 IN5 IN5 IN5";
 }

#about>main { opacity: 0.7;}
 .cards3>main article { width: var(--whp04); padding: var(--space3); }
 /* figure { background-color: #eee; height: 600px;} */



 .xslide>div, .xslide>article         { width: 100%;  padding: 32px 10px; }
 .xslidenav button  { border:0px; padding: 5px 10px; text-align: center; background-color: transparent; color: #ccc;  font-size: 20px;  }
 /* .xslidenav button.next, .xslidenav button.prev { display: none; } */
 .xslidenav ul      {  list-style: none; padding: 0px; display: inline-block; cursor: pointer; }
 .xslidenav li     { display: inline-block; }
 .xslidenav li:hover     { background-color: transparent; color: #eee; }
 .xslidenavselected button { color: #333; }
 div.expandable { display: block; position: fixed; z-index: 700; top: 5vh; bottom: 5vh; width: auto; max-width: 90vw; height: 90vh; left: 0px; right: 0px; margin: auto; background-position: contain; background: #555; }
 .testimonial h1>span 	{ font-size: 80px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 10px; color: var(--secondary); }

 /* have preset height as needed */
.slideH1 .xslide>div, .slideH1 .xslide>article {  min-height: var(--wh01);}
.slideH2 .xslide>div, .slideH2 .xslide>article {  min-height: var(--wh02);}
.slideH3 .xslide>div, .slideH3 .xslide>article {  min-height: var(--wh03);}
.slideH4 .xslide>div, .slideH4 .xslide>article {  min-height: var(--wh04);}
.slideH5 .xslide>div, .slideH5 .xslide>article {  min-height: var(--wh05);}
.slideH6 .xslide>div, .slideH6 .xslide>article {  min-height: var(--wh06);}



th { background-color: var(--primary); color: #fff; padding: 0px var(--space2); }
td { padding: 0px var(--space2); }
tr:nth-of-type(odd) { opacity: 0.6; }
tr:nth-of-type(1) { opacity: 1; }


body { display: block; }
body>main>section { padding: var(--space6) 0px; }
body>main>section>section>main, body>main>section>main { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; gap:0px var(--gap); }
body>main>section>section>main.tabs, body>main>section>main.tabs { justify-content: flex-start;}
section .tab { text-align: left;}
section footer { display: flex; gap: var(--gap); }

form input[type=number] { width: 100%; line-height: var(--line3); }

#about aside { color: var(--secondary);}
footer button { background-color: var(--primary); color: #fff;}
article footer button { background-color: var(--secondary); color: #fff;}
form footer input { background-color: var(--primary); color: #fff; border: 0px;}
.centy footer { justify-content: center;}
/*=====COLOR PROFILE=====*/
.color1 		{ color: #333; }
.color1 aside 	{ color: var(--primary);}
.color1 p 		{ opacity: 0.8;}
.color1 footer button,.color1 article footer button { background-color: var(--primary); color: #fff;   }
.color1 footer  button:hover,.color1 footer a:nth-of-type(2):hover, .color1 article button:hover, .color1 article footer a:hover { background-color: var(--secondary); color: #333;  } 
.color1>main>section:nth-of-type(1) { background-color: var(--black); color: var(--white);}
.color1 form        { background-color: #fff;}
.color1 form>nav    { background-color: var(--primary); color: #fff;}
.color1>main>section:nth-of-type(1) .activeaccounts .icons          { color: var(--primary); opacity: 0.4;}
.color1>main>section:nth-of-type(1) .activeaccounts a.active .icons { opacity: 1;}
.color1>main>section:nth-of-type(1) .activeaccounts                 { color: var(--primary);}
.head { background-color: var(--primary); color: #fff;  }
.head a, body>header .logo { color: #fff; }

.color1 .tabs>input[type=radio]:checked + label { background-color: var(--primary); color: #fff; }
.color1 .tabs>main { background-color: var(--primary); color: #fff; }

.color2 		{ background-color: var(--primary); color: #fff;}
.color2 a  		{ color: #fff; }
.color2 aside 	{ color: var(--secondary);}
.color2 p 		{ opacity: 0.8;}
.color2 button,.color2 footer a:nth-of-type(2), .color2 article button, .color2 article footer a   { background-color: var(--secondary); color: #fff;   }
.color2 button:nth-of-type(2), .color2 footer a	{ background-color: transparent; color: var(--secondary); border-color: var(--secondary); }
header.color2 a { color: #fff;}

.color3 { color: var(--tietiary);}


/*=====TYPE PROFILE=====*/
.type1      					{ font-size: var(--font2); line-height: var(--line2);}
.type1 h1, section.type1 header { font-size: var(--font4);}
.type1 aside 					{ font-size: var(--font1);}
.type1 button, .type1 footer a	                { font-size: var(--font2); line-height: var(--line3); }
.type1 article h1,.type1 article header         { font-size: var(--font3);}
section.type1>header 					                { font-size: var(--font3); }

.type2                          { font-size: var(--font1);}
.type3                          { font-size: var(--font1);}

/*=====LAYOUT PROFILE=====*/

section.layout1 					    { grid-template-areas:"SF SF SF SA SA SA" "SF SF SF SH SH SH"	"SF SF SF SM SM SM" "SF SF SF SB SB SB" "SS SS SS SS SS SS"; }
section.layout1m                        { grid-template-areas:"SC SC SM SM SM SM" "SC SC SD SD SD SD" "SC SC SA SA SA SA"   "SF SF SF SH SH SH"	 "SF SF SF SB SB SB" "SS SS SS SS SS SS"; align-items: flex-start; }

.layout1>main>section:nth-of-type(1) 	{ grid-template-areas:"SX SA SA" "SX SH SH" "SX SM SM" "SX SB SB" "SX SS SS";}
.layout1>main>section:nth-of-type(even) { grid-template-areas:"SA SA SF SF " "SH SH SF SF " "SM SM SF SF " "SB SB SF SF " "SS SS SS SS";}
.layout2>main>section 					{ grid-template-areas:"SA SA SF SF " "SH SH SF SF " "SM SM SF SF " "SB SB SF SF " "SS SS SS SS";}
.layout2>main>section:nth-of-type(even) { grid-template-areas:"SF SF SA SA" "SF SF SH SH" "SF SF SM SM" "SF SF SB SB" "SS SS SS SS";}

.layout3 {	grid-template-areas:"Sx SI SI Sw " "Sx SI SI Sw " "Sx SI SI Sw " "Sx SI SI Sw " "Sx SI SI Sw";}

/* ================================
============ ALIGN PROFILE ========
==================================*/
section.align1 { text-align: left; }
section.align2 { text-align: center; }
section.align3 { text-align: right; }
.align1>main, .righty>main, .righty>footer, .align1>footer { justify-content: left;}
.align2>main, .centery>main, .centery>footer, .align2>footer { justify-content: center;}
.align3>main, .lefty>main, .lefty>footer, .align3>footer { justify-content: right;}
/* .align2>main, .centery { justify-content: center;} */



/*=====SIZE PROFILE=====*/
/* form>main, form>footer { padding: 10px 20px;} */
section.size1 {  grid-template-columns: var(--wh02) var(--wh02) var(--wh02) var(--wh02) var(--wh02) var(--wh02);  }
section.size2 {  grid-template-columns: var(--wh01) var(--wh01) var(--wh01) var(--wh01) var(--wh01) var(--wh01);  }
section.size3 {  grid-template-columns: var(--wh03) var(--wh03) var(--wh01) var(--wh01) var(--wh01) var(--wh01);  }
section.size4 {  grid-template-columns: var(--wh01) var(--wh01) var(--wh01) var(--wh01) var(--wh03) var(--wh03);  }
section.size5 {  grid-template-columns: var(--wh01) var(--wh01) var(--wh03) var(--wh03) var(--wh01) var(--wh01);  }


.cardbody { width: var(--wh12); margin: auto;}
.dashboard1>main:nth-of-type(2) { width: var(--wh12); margin: auto;}
.cards>div, .cards>article { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between;}
/* form nav { justify-content: center;} */

/* .size1>main>section {display: grid; grid-template-columns: var(--wh03) var(--wh03) var(--wh03) var(--wh03);  grid-template-rows: 1fr auto auto 1fr; justify-content: center; padding: var(--line5) var(--line3); align-items: center; }
.size1>main>section>aside { align-self: end;}
.size1>main>section:nth-of-type(1) { min-height: 80vh;}
.size1>main>section.cards3 section { display: flex; grid-template-columns: var(--wh04) var(--wh04) var(--wh04);  }
.size1>main>section article { width: var(--wh04);} */
.size1 form>nav h1 { font-size: 16px; padding: 0px 20px;}

.size2 {display: grid; grid-template-columns: var(--wh03); }
.size3 {display: grid; grid-template-columns: var(--wh05) var(--wh04) var(--wh04)  ; }
.size5 {line-height: 24px;}
/*=====SPACING PROFILE=====*/
.space1 			{ justify-content: center;}
section.space1 { padding: var(--space5) 0;}
.space1>header  nav	{  justify-content: space-between; width: 100vw;}
.space1>main>section 	{ justify-content: center;}
.space1>main>section section	{ gap: var(--space4);}
.space1 footer a 	{ display: inline-block; padding: 0px var(--space3);}
.space1 footer 		{ display: flex; gap: var(--space2); justify-content: center; }
.space2 			{ justify-content: center;}
/*=====FINISHES=====*/
.finish1 section article {
    box-shadow: 4px 6px 10px rgba(0,0,0,0.3); padding: var(--space4) var(--space4);
}

.form1 {
    width:10px;
}
article {
	display: grid;
    grid-template-areas:
        "F"
		"A"
        "H"
        "M"
        "B";
}
/*=====ANIMATION PROFILE=====*/

.dashboard1 form { width: 600px; }
/* .dashboard1 .form>form>main {
    grid-template-areas:
        "FH FH FH FH FH FH"
        "IN1 IN1 IN1 IN3 IN3 IN3"
        "IN2 IN2 IN2 IN2 IN2 IN2"
        "IN4 IN4 IN4 IN5 IN5 IN5"
        "IN6 IN6 IN6 IN7 IN7 IN7"
        "IN8 IN8 IN8 IN8 IN8 IN8"
        "IN9 IN9 IN9 IN10 IN10 IN10"
        "IN11 IN11 IN11 IN12 IN12 IN12";
} */
/* 4 layouts */