/***********************************************************************/
/********MAIN GRID******************************************************/
/* Screens 900 and up*/ 
@media only screen and (min-width:900px) {
.container {
    border: thin solid;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto 33.33%; 
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: 
        "topbar topbar topbar topbar topbar topbar topbar topbar topbar topbar topbar topbar" 
        "banner banner banner banner banner banner banner banner banner banner banner banner"
        "serbar serbar serbar serbar serbar serbar serbar serbar serbar serbar serbar serbar" 
        "indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip indexstrip"
        "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar " 
        "breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb" 
		". . . . . . . . . . . search"
        "content content content content content content content content content content content sidebar" 
        "footer footer footer footer footer footer footer footer footer footer footer footer";
}

}

.object-fit {
    width:100%;
    max-width:100%;
    max-height:inherit;    

}

/* Extra small devices (phones, 399px and down) */
@media only screen and (min-width:300px) and (max-width:399px) {
    body  {
	margin-top: 0;
	margin-left: 2%;
	margin-right: 2%;
	font-size: 100%;
	font-family: Verdana;
	font-variant: normal;
	background-image: none;
	background-color:  #E5E5E5;
}
.container {
	width: 98%;
	border: thin solid;
	background-color:#FFFFFF;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-template-areas: 
	"banner" 
	"serbar" 
	"breadcrumb" 
	"search" 
	"content" 
	"sidebar" 
	"topbar"
	"navbar"
	"footer";
}
.sidebarmain { /***Sidebar content for main pages**/
    display: grid;
    grid-template-columns: 45% 2% 45%;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: .5em;
    grid-template-areas:
        "sidebarmenu sidebarmenu sidebarmenu" 
        "sidebarmenu02 sidebarmenu02 sidebarmenu02"
        "sidebarmenu03 sidebarmenu03 sidebarmenu03"
        "sidebartools sidebartools sidebartools" 
        "sidebarapps sidebarapps sidebarapps"
        "sidebarLmenu . sidebarRmenu";
}

.content {
	border-style: solid;
	border-width: .15em;
	border-color: inherit;
	margin-top: .5em;
	margin-left: 2%;
	margin-right: .5%;
	margin-bottom: .5em;
	padding: 0em 1em 0em 1em;
	max-height: 20em;
	overflow: scroll;
	grid-area: content;
}
.box48 {
    float:left;
	width:100%;
	min-height:12em;
    margin-bottom:1em;
    margin-right:2%;
    border-radius: 1em;
    border: thin solid #808080;
    padding: .5em;
}
.box48hover {
    float:left;
	width:100%;
	min-height:12em;
    margin-bottom:1em;
    margin-right:2%;
    border-radius: 1em;
    border: thin solid #808080;
    padding: .5em;
}
.barmenu a:visited {
	color: #FFFFFF;
}
.textboxright {
	display:none;
}
.csection33 {
	float:left;
	width:33.33%;
	min-width:300px;
	padding-right:1em;
}


}/*end of 399 and down*/

    
/* Small devices (portrait tablets and large phones, 400-499px)*/ 

@media only screen and (min-width:400px) and (max-width:499px) {
body  {
	margin-top: 0;
	margin-left: 2%;
	margin-right: 2%;
	font-size: 100%;
	font-family: Verdana;
	font-variant: normal;
	background-image: none;
	background-color: #E5E5E5;
}
.container {
    border: thin solid;
    background-color: white;
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    width: 98%;
    grid-template-areas:         
        "banner"
        "serbar" 
        "indexstrip"
        "breadcrumb " 
        "search" 
        "content"
        "sidebar"
		"topbar"
		"navbar"
		"footer";
}
.sidebarmain { /***Sidebar content for main pages**/
    display: grid;
    grid-template-columns: 45% 2% 45%;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: .5em;
    grid-template-areas:
        "sidebarmenu sidebarmenu sidebarmenu" 
        "sidebarmenu02 sidebarmenu02 sidebarmenu02"
        "sidebarmenu03 sidebarmenu03 sidebarmenu03"
        "sidebartools sidebartools sidebartools" 
        "sidebarapps sidebarapps sidebarapps"
        "sidebarLmenu . sidebarRmenu";
}

.content {
	margin-top:.5em;
    margin-left:2%;
    margin-right:.5%;
    margin-bottom:.5em;
    border:thin solid;
    padding: 0em 1em 0em 1em;
	max-height:20em;
	overflow:scroll;
    grid-area: content;
}
.box48 {
    float:left;
	width:100%;
	min-height:12em;
    margin-bottom:1em;
    margin-right:2%;
    border-radius: 1em;
    border: thin solid #808080;
    padding: .5em;
}

.box48hover {
    float:left;
	width:100%;
	min-height:12em;
    margin-bottom:1em;
    margin-right:2%;
    border-radius: 1em;
    border: thin solid #808080;
    padding: .5em;
}
.textboxright {
	display:none;
}


h1 {
    font-size: 4vw;
}

h2 {
    font-size: 3vw;
}

h3 {
    font-size: 2vw;
}

/*h4 {
    font-size: 1.55em;
}*/

h5 {
    font-size: 3.5vw;
}

h6 {
    font-size: 3vw;
}
.barmenu a:visited {
	color: #FFFFFF;
}
.csection33 {
	float:left;
	width:33.33%;
	min-width:375px;
	padding-right:1em;
}
.csection49 h6,
.csection33 h6,
.csection25 h6 {
	font-size:1.2em;
}


 } /*End 400-499*/

/* Small devices (portrait tablets and large phones, 500-599px)*/ 

@media only screen and (min-width:500px) and (max-width:599px) {
body  {
	margin-top: 0;
	margin-left: 2%;
	margin-right: 2%;
	font-size: 100%;
	font-family: Verdana;
	font-variant: normal;
	background-image: none;
	background-color: #E5E5E5;
}
.container {
    border: thin solid;
    background-color: white;
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
	width: 98%;
    grid-template-areas: 
        "topbar" 
        "banner"
        "serbar" 
        "indexstrip"
        "breadcrumb " 
        "search" 
        "content"
        "sidebar"
        "navbar"
        "footer";
}
.sidebarmain { /***Sidebar content for main pages**/
    display: grid;
    grid-template-columns: 45% 2% 45%;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: .5em;
    grid-template-areas:
        "sidebarmenu sidebarmenu sidebarmenu" 
        "sidebarmenu02 sidebarmenu02 sidebarmenu02"
        "sidebarmenu03 sidebarmenu03 sidebarmenu03"
        "sidebartools sidebartools sidebartools" 
        "sidebarapps sidebarapps sidebarapps"
        "sidebarLmenu . sidebarRmenu";
}

.content {
	margin-top:.5em;
    margin-left:2%;
    margin-right:.5%;
    margin-bottom:.5em;
    border:thin solid;
    padding: 0em 1em 0em 1em;
	max-height:20em;
	overflow:scroll;
    grid-area: content;
}
.textboxright {
	display:none;
}


h1 {
    font-size: 4vw;
}

h2 {
    font-size: 3vw;
}

h3 {
    font-size: 2vw;
}

/*h4 {
    font-size: 1.55em;
}*/

h5 {
    font-size: 3.5vw;
}

h6 {
    font-size: 3vw;
}
.barmenu a:visited {
	color: #FFFFFF;
}


 } /*End

/* Medium devices (landscape tablets, 600-899px)*/
@media only screen and (min-width:600px) and (max-width:899px) { 
body  {
	margin-top: 0;
	margin-left: 2%;
	margin-right: 2%;
	font-size: 100%;
	font-family: Verdana;
	font-variant: normal;
	background-image: none;
	background-color:  #E5E5E5;
}
.container {
    border: thin solid;
    background-color: white;
    display: grid;
    grid-template-columns: auto 33.33%; 
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
	width: 98%;
    grid-template-areas: 
        "topbar topbar" 
        "banner banner"
        "serbar serbar" 
        "indexstrip indexstrip"
        "breadcrumb breadcrumb" 
        "search search" 
        "content content"
        "sidebar sidebar"
        "navbar navbar"
        "footer footer";
}
.sidebarmain { /***Sidebar content for main pages**/
    display: grid;
    grid-template-columns: 45% 2% 45%;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: .5em;
    grid-template-areas:
        "sidebarmenu sidebarmenu sidebarmenu" 
        "sidebarmenu02 sidebarmenu02 sidebarmenu02"
        "sidebarmenu03 sidebarmenu03 sidebarmenu03"
        "sidebartools sidebartools sidebartools" 
        "sidebarapps sidebarapps sidebarapps"
        "sidebarLmenu . sidebarRmenu";
}

.content {
	margin-top:.5em;
    margin-left:2%;
    margin-right:.5%;
    margin-bottom:.5em;
    border:thin solid;
    padding: 0em 1em 0em 1em;
	max-height:20em;
	overflow:scroll;
    grid-area: content;
}

h1 {
    font-size: 3.5vw;
}

h2 {
    font-size: 2.7vw;
}

h3 {
    font-size: 1.7vw;
}

/*h4 {
    font-size: 1.55em;
}*/

h5 {
    font-size: 2.5vw;
}

h6 {
    font-size: 1.5vw;
}
.csection49 h6,
.csection33 h6,
.csection25 h6 {
	font-size:1em;
}

   
  
}/*End 600-899*/