@media only screen and (max-width: 1100px){
	.generalContainer{
		width:100% !important;
		padding:10px;
		box-sizing:border-box;
	}	
	
	#breadCrumbs .generalContainer{
		padding:0;
	}
	
	#secondaryNav{
		right:10px;	
	}
	
	header #logo{
		left:10px;
		right:auto;	
	}
	
	header ul{
		right:10px;
		top:auto;
	}
	
	#newUser #content{
		margin-top:50px;	
	}
}

@media only screen and (max-width: 910px){
	header li{
		display:inline-block !important;
	}
	
	#newUser #content{
		margin-top:30px;	
	}
	
	html:not(.front) #contentContainer{
		width:calc(100% - 50px) !important;	
		padding:0;
	}
	
	#otherEvents #contentContainer
	,#event-detail #contentContainer{
		padding-top:10px;
	}
	
	#positionFields label:after{
		content:"\A"; 
		white-space:pre-wrap;
	}
	
}

@media only screen and (max-width: 768px){
	
	#contentContainer{
		width:calc(100% - 50px) !important;	
	}
	
	.front #content{
		width:100%;	
	}
	
	#loginContainer section{
		width:100% !important;	
	}
	
	header li{
		display:inline-block !important;
	}
	
	#myProfile .orangeHead:before
	,#newUser .orangeHead:before{
		font-size:70px;
	}
	
}

@media only screen and (max-width: 600px){
	header #logo{
		top:10px;
        max-width: 200px;
	}
	
	header ul{
		bottom:10px;
	}
	
	#myEvents #contentContainer
	,#otherEvents #contentContainer
	,#event-detail #contentContainer{
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
		-webkit-flex: 1 ;
		-ms-flex: 1 ;
		flex: 1 ;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		justify-content: space-between;
	}
	
	#toolNavWrap{
		-webkit-order:1;
		-moz-order:1;
		order:1;
		width:calc(100% - 250px);
	}
	
	#sidebar{
		-webkit-order:2;
		-moz-order:2;
		order:2;
		margin-right:10px;
        padding-top: 10px;
	}
	
	#otherEvents #sidebar
	,#event-detail #sidebar{
		-webkit-order:4;
		-moz-order:4;
		order:4;	
	}
	
	#content{
		-webkit-order:3;
		-moz-order:3;
		order:3;
		-webkit-flex: 0 0 100%;
		-moz-flex: 0 0 100%;
		flex: 0 0 100%;
		margin-bottom:20px;	
	}
	
	.pageLinks {
		float:none;	
	}
	.pageLinks a{
		display:block;	
	}
	
	.pageLinks a:not(:last-child)::after{
		content:"";
	}
	
	#myProfile #content{
		width:100%;	
	}
	
	label{
		font-size:14px;	
	}
}

@media only screen and (max-width: 414px){
	#toolNavWrap{
		-webkit-flex: 0 0 100%;
		-moz-flex: 0 0 100%;
		flex: 0 0 100%;
		box-sizing:border-box;
		margin-bottom:20px;
	}
	
	#sidebar{
		-webkit-order:3;
		-moz-order:3;
		order:3;
	}

    #content{
        -webkit-order:4;
		-moz-order:4;
		order:4;
    }
	
	.eventDetails{
		grid-template-columns: 1fr; 
		gap: 20px;
	}

    h1.purpleHead{
        font-size: 30px;
    }

    .eventDetails .event-date-wrapper .event-date{
        max-width: 85px;
    }

    .eventDetails .event-date-wrapper .event-date .month{
        font-size: 14px;
        padding: 5px 0;
    }

    .eventDetails .event-date-wrapper .event-date .day{
        font-size: 35px;
    }
}

@media only screen and (max-width: 375px){
	header ul, #secondaryNav{
		font-size: 12px;
	}
	
	header #logo{
		height:28px;
	}
	
	h1.orangeHead{
		font-size:16px;	
	}
	
	#toolNavWrap, #content{
		width:100%;	
	}

}