/* ***************************  Colour Scheme CSS Skin Overrides  **************** */


/****** Position in the .D2SearchItemsWrapper Div box ******/
.toesHeaderLogo {
	height: 135px;
	width: 135px;
	position: absolute;
	z-index: 1000;
	top: 2em;
    left: 22em;
	background-image: url(/portals/toes/images/Logo-TOES.png);
	background-size: contain;
	background-repeat: no-repeat;
}

/**** Bannaer Items *****/
.toesHomepageBanner {
	position: relative;
	margin-top:1.8em;
}

.bannerHomePage, .bannerSubPage {
	max-height: none!important;
	margin-top:-25px;
}

.bannerSubPage {
	margin-top:0;
	margin-left:-15px;
}

.toesHomepageBannerTitles {
	position: absolute;
	width:99%;
	height:65%;
	max-width: 1250px;
	top:10%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.toesBannerTitleArea {
	display: flex;
	flex-direction: column;
	margin:0;
	padding:0;
	list-style: none;
}

.toesBannerTitleContent {
	position: absolute;
	background-color: rgba(255,255,255,0.75);
	border-radius: 15px;
	padding:1.2%;
	text-align: left;
/*	top:25%;
	left:15%; */
	transform: translateY(25%)
}


.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold{
	font-family: 'Oswald', sans-serif!important;
	font-size: 3.4em;
	color:#4D70B4;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.1em;
}

.toesBannerTitleContent .title-bannerBold{
	font-weight: 500;
}

h2, h2.c_title {
	font-weight: bold;
	margin-bottom: -0.28em !important;
}


.toesMainCol h2 {
	line-height: 1.4!important;
    margin-bottom: 0.74em!important;
}

/**** Search Items *****/

.D2navSearchContainer {
 	max-width: 100%!important;
  	margin: 0 auto;
	background-color:#082254!important;
	height: 55px;
	padding-top:2px;
	padding-bottom:5px;
}

.D2SearchItemsWrapper {
	margin:0 auto!important;
	width:100%;
	max-width:1300px!important;
	float:none;
	height:50px;
	position: relative;
}


#schoolSearchItemsBox {
	position:relative;
 	border-radius: 3px;
	margin-right:1.6em;
	width:54%;
	padding:3px 0 10px 0;
	float:right;
	overflow: hidden; 
}

#schoolSearchItemsBox .search {
	float: none!important;
	position:static!important;
}

.searchInputContainer {
display:block!important;
}

.searchInputContainer input {
width: 80%!important;
}

.search a.SearchButton:link, .SearchButton {
position: absolute!important;
right: 0!important;
top: -3px!important;
padding: 17px 0!important;
width: 1.875em !important;
text-indent: -9999px !important;
border-radius:0!important;
background-color: lightgray!important; 
}

#schoolSearchItemsBox #dnn_dnnSEARCH_ClassicSearch .NormalTextBox {
	width:80%!important;
	font-size: 1.2em!important;
	padding:0!important;
}

.searchInputContainer a.dnnSearchBoxClearText {
  bottom: -0.100em !important;
	margin-right: 1.8em !important;
}

.toesPageFrame {
	width:100%;
	margin:0;
}

/**** Content Rows and Containers ****/

.grid-4-cols {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap: 2%;
	grid-template-rows: auto;
  	justify-items: center;
	justify-content:end;
  	align-items: center;
	height: 200px;
}

.grid-2-cols {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap: 1%;
	grid-template-rows: auto;
  	justify-items: center;
  	align-items: center;
	width:80%;
	padding:1em;
	margin:0 auto;
}

.toesMainCol {
	width:100%;
	margin: 0 auto;	
}

.tdsbBlueStrip, .tdsbGreenStrip,
.tdsbGreenLightStrip {
	width:100%;
	padding:0;
	margin:0;
	background-color:#4D70B4;
	height:200px;
}

.tdsbGreenStrip  {
	background-color:#73C168;
}

.tdsbGreenLightStrip {
	background-color: #E2F8DF;
	height: auto;
	padding:1.6em 0 6em 0;
}


.tdsbBlueStrip img, .tdsbGreenStrip img,
.tdsbGreenLightStrip img, .tdsbMain-Sub-Col-1 img {
	max-width:100%;
	height: auto;
}

.tdsbBlueCardsRow,
.tdsbGreenCardsRow,
.tdsbMainRow, .toesFooter  {
	width:100%;
	margin:0 auto;
	max-width: 1300px;
	padding:0 1em;
}

.toesMainRow {
	display: flex;
	gap: 5rem;
	padding:3em 3.6em 1.6em 3.6em;
}

.toesMainRow > .noShrink {
	flex-shrink: 0;
}

.grid-2-cols p, .grid-4-cols p,
.toesMainRow p, .toesMain-Sub-Col-1 p,
.toesMain-Sub-Col-1 ul {
	font-size: 1.32em;
}

.adminH1TitleArea h1, .toesMain-Sub-Col-1 h1 {
	font-size: 1.32em;
	font-family: 'Oswald', sans-serif!important;
	font-weight: 500;
}

.toesMain-Sub-Col-1 {
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
	padding:0.55em 2em 6em 2em;
}

 
.toesMain-Sub-Col-1 img {
	height: auto;
    max-width: 750px;
}

.col-sm-10 .adminH1TitleArea {
	margin-top:1em;
	margin-left:2em;
}

.BlueCard, .GreenCard  {
	width: 95%;
    height: 75%;
    border: 5px solid #FFF;
    border-radius: 20px;
    background-color: #21468C;
    text-align: center;
	display: flex;
  	justify-content: center;
  	align-content: center;
  	flex-direction: column;
} 

.GreenCard{
    background-color: #3E9332;
} 

.BlueCard a:link, .BlueCard a:visited,
.BlueCard a:hover, .BlueCard a:active,
.GreenCard a:link, .GreenCard a:visited,
.GreenCard a:hover, .GreenCard a:active,
.footerHead {
	color:#FFF;
    font-size:2.2em;
	font-weight: 500;
	text-decoration: none;
    text-align: center;
	font-family: 'Oswald', sans-serif!important;
}


.toesFooterBox {
	width:100%;
	padding:0;
	margin:0;
	margin-top:-70px;
	min-height: 345px;
	background-image: url('/portals/toes/images/footer-bkg.png');
	position:relative;
	background-repeat: repeat-x;
}

.toesFooter  {
	width:100%;
	margin:0 auto;
	max-width: 1300px;
	padding:0 1em;
	margin-top:-70px;
	min-height: 345px;
	height: 345px; /* keeps the footer at the bottom of page */
	background-image: url('/portals/toes/images/footer-roots-bkg.png');
	background-repeat: no-repeat;
}

.footerIconContent {
	width:auto;
	display: flex;
    align-self: center;
}

.footerIconContent ul {	
	display:flex;
	list-style: none;
	margin:0;
	padding:0;
	margin-left:15%;
} 

.footerIconContent li img    {	
	max-width:50px;
	max-height:50px;
	margin-right:0.48em;
}


.footerHead {
    font-size:2.3em!important;
	font-weight: 500;
	padding-top:4em!important;
}

 .footerSubHead {
	font-weight: 600;
	font-size:1.050em;
}

.footerInfoContent {
	width:auto;
	margin-left:-4em;
}

.footerInfoContent p {
	font-size:1em;
}

.footerTDSBbox {
	background-color: #082254;
    padding: 1em 0;
    margin-bottom: -0.25em;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	position:relative;
}

.footerTDSBbox a:link, .footerTDSBbox a:visited,
.footerTDSBbox a:active, .footerTDSBbox a:hover {
	color:white;
	text-decoration: none;
}

#schoolLogin {
	position:absolute;
	left:0;
}

#schoolLogin a {
    float: none;
    margin: 2.4em 0.48em 2em 1em; 
}


/****************************************/
/******* Responsive Screen Sizes ********/
/****************************************/

@media only screen and  (max-width: 1400px) {
.toesHeaderLogo {
    left: 2em;
}	
}

@media only screen and  (max-width: 1180px) {
.toesBannerTitleContent {
	margin-left: 1.6%;
}
}

@media only screen and  (max-width: 1140px) {
.toesHomepageBannerTitles {
	top:0;
}
}

@media only screen and  (max-width: 991px) {
.toesHeaderLogo {
    height: 55px;
    width: 55px;
    top: 0.28em;
}		
	
.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold {
	font-size: 2.4em;
}
	
.grid-2-cols {
	grid-template-columns:auto;	
}	
	
	
footer .grid-2-cols {
    column-gap: 3%;
	width:100%;
}
	
.toesNavWrapper {
 height: auto;
}	
	
.toesNavWrapper .navbar-collapse.collapse {
    display: none!important;
}

.toesNavWrapper .navbar-collapse.collapse.in {
    display: block!important;
}
	
.D2pageFrame {
	padding:0;
}

}


@media only screen and (max-width: 900px) {
.toesMainRow {
	flex-wrap: wrap;
}

.toesMainRow > .noShrink {
	flex-shrink: 1;
}

.toesMain-Sub-Col-1 .dnn-cl .col-xs-12 {
	width:99%!important;
}

}

@media only screen and  (max-width: 880px) {
.BlueCard a:link, .BlueCard a:visited,
.BlueCard a:hover, .BlueCard a:active,
.GreenCard a:link, .GreenCard a:visited,
.GreenCard a:hover, .GreenCard a:active,
.footerHead {
    font-size:1.72em;
}
	
footer .grid-2-cols {
    column-gap: 10%;
}
	
.footerIconContent ul {
		margin-left:0;
}
}

@media only screen and  (max-width: 768px) {
.bannerHomePage, .bannerSubPage {
	margin-top:-14px; 
}

.bannerSubPage {
	margin-top:-1px;
}
	
.toesHomepageBanner {
	margin-top:1em;
}
	
.toesPageFrameBlue {
		margin-top:-6px;
}
	
.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold {
	font-size: 1.8em;
}	
	
.grid-4-cols {
    grid-template-columns:repeat(2, 1fr);
	grid-row-gap: 10%;
	height: auto;
	padding-bottom:2%;
	align-items:normal;
}
	
.tdsbBlueStrip, .tdsbGreenStrip, .tdsbGreenLightStrip {
    padding: 3%;
	height:auto;
}
	
.BlueCard, .GreenCard{
		height:auto;
		padding: 2% 3%;
}

	
.BlueCard a:link, .BlueCard a:visited,
.BlueCard a:hover, .BlueCard a:active,
.GreenCard a:link, .GreenCard a:visited,
.GreenCard a:hover, .GreenCard a:active,
.footerHead {
    font-size:1.58em;
}
	
.termsText {
	font-size: 0.86em;
}

.toesMain-Sub-Col-1 img{
    max-width: 100%;
}
	
}

	
@media only screen and  (max-width: 640px) {
.footerHead {
  font-size: 1.6em !important;
  padding-top: 4.4em !important;
  margin-bottom:1em!important;
}
	
footer .grid-2-cols {
	grid-template-columns:repeat(1, 1fr);
	grid-row-gap: 10%;
	padding:0;
}
		
.footerInfoContent {
  margin-left: 0;
}
}
	

@media only screen and  (max-width: 540px) {
.imageRight {
  	margin:1em 0em 2em 0em!important;
	float:none!important;
	max-width:100%;
	height:auto;
}

.toesBannerTitleContent {
    margin-top: -0.98em;
}
}


	
@media only screen and  (max-width: 480px) {
#logoTarget {
	/*	display: none; */
}
	
.toesBannerTitleContent {
  	border-radius: 12px;
  	padding: 2%;
	top: 0;
	left: 3%;
	transform: translateY(17%);
}
.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold {
	font-size: 1.3em;
}
	
.toesBannerTitleContent {
    margin-top: -0.28em;
}
	
#schoolSearchItemsBox {
  width: 89%;
}
	
.searchInputContainer a.dnnSearchBoxClearText {
  margin-right: 0.1em !important;
}
	
#schoolSearchItemsBox #dnn_dnnSEARCH_ClassicSearch .NormalTextBox {
  width: 83% !important;
  font-size: 1em !important;
}	

.tdsbBlueStrip, .tdsbGreenStrip, .tdsbGreenLightStrip {
	padding-top: 5%;
	padding-bottom: 8%;		
}
	
#schoolSearchLogin a, #schoolLogin a {
  	padding: 0.10em 1em;
  	font-size: 0.60em;
}	
	
.toesMainRow {
	padding:3em 2em 1.6em 2em;
}
	
	
.toesFooter{
background: linear-gradient(360deg, rgb(0 0 0 / 40%), transparent);
}
	
	
.footerInfoContent p {
    font-size: 0.86em;
}
	
.footerIconContent li img {
    max-width: 40px;
    max-height: 40px;
}	

.termsText {
	font-size: 0.56em;
	margin-left: 6em;
}
}
	
@media only screen and  (max-width: 385px) {	
.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold {
	font-size: 1.058em;
}
}


@media only screen and  (max-width: 300px) {	
.toesBannerTitleContent .title-banner,
.toesBannerTitleContent .title-bannerBold {
	font-size: 0.92em;
}

.grid-4-cols {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 2%;
}
	
.footerInfoContent p {
    font-size: 0.78em;
}
	
}