main{
max-width: 1400px;
width: 100%;
margin: auto;
}
div.course{
background: #b73c7a;
padding: 8px;
margin: 4px 0px;
box-shadow: 0 0 4px #ccc;
border-radius: 4px;
float: left;
color: #fff;
border: 2px solid transparent;
height: 200px !important;
}

#random-url {text-align:center;margin:auto}
.reloader {width:100%;max-width:100%;text-align:center;font-size:2rem;padding:10px;margin-top:25px}
.reloader button:hover {background-color:#00C1CF;color:#fff}


@media only screen and (max-width:950px) { /*////////////////////////////  950    */
div.course{height: 290px!important;}
}

@media only screen and (max-width:700px) { /*////////////////////////////  950    */
div.day{width: calc(32% - 4px)!important;float: left;padding: 0 2px}

}

@media only screen and (max-width:700px) { /*////////////////////////////  950    */
h3.name{font-size: 16px!important;}
h5.time{font-size: 16px!important;}
span.age{font-size: 16px!important;}
span.instructor{font-size: 80%!important;}
a.reglink{font-size: 16px!important;}
.reg-container {margin-left: -20%!important;}
}

@media only screen and (max-width:450px) { /*////////////////////////////  950    */
h3.name{font-size: 14px!important;}
h5.time{font-size: 14px!important;}
span.age{font-size: 14px!important;}
span.instructor{font-size: 80%!important;}
a.reglink{font-size: 14px!important;}
.reg-container {margin-left: -20%!important;}
}


div.course.open{
background: #fff;
color: #666;
}
/* special style to color 'session 2 blocks'  */
.session-2-bgcolor {
	background-color: #b2e4f7 !important;
	color: #666 !important;
}
/* END special style to color 'session 2 blocks'  */
div.course.reg{
border: 2px solid #94D3F6;
cursor: pointer;
}
div#classtypes{
float: left;
max-width: 150px;
}
div.day{
width: calc(16% - 4px);
float: left;
padding: 0 2px;
}
div.day >h2{
color: #fff;
padding: 0 4%;
width: 92%;
text-align: center;
display: block;
background: #333;
line-height: 25px;
text-align: center;
font-size: .8em;
font-family: "Lato", sans-serif;
border-radius: 4px;
box-shadow: 0 0 4px #ddd;
}

p {
	font-family: "Montserrat", sans-serif;
}
div.course span{
clear: both;
float: left;
width: 100%;
}
#filter{
width: 100%;
float: left;
margin: 20px 0;
}
.open h3.name{
	color: #b73c7a;
}
h3.name{
font-family: "Lato", sans-serif;
font-weight: normal;
color: inherit;
font-size: 14px;
margin: 0 0 10px;
}
h4.location{
font-family: "Lato", sans-serif;
color: inherit;
float: left;
font-size: 14px;
margin: 0 0 10px;
}
h5.time{
font-family: "Lato", sans-serif;
color: inherit;
float: left;
font-size: 14px;
margin: 0;
}
span.age{
font-weight: normal;
font-size: 14px;
color: inherit;
}
span.instructor{
font-weight: normal;
font-size: 14px;
color: inherit;
}
#filter select, #filter input{
max-width: 150px;
float: left;
margin: 0 5px;
}
#filter label{
font-eweight: bold;
float: left;
margin-right: 10px;
}
div.sessions{
margin: 20px 0;
width: 100%;
clear: left;
float: left;
}
div.sessions div{
float: left;
margin: 0 20px;
}

div.sessions-summer{
margin: 20px 0;
width: 100%;
clear: left;
float: left;
}
div.sessions-summer div{
float: left;
margin: 0 20px;
}

div#legend{
margin: 20px 0;
width: 60%;
float: left;
clear: right;
}

div#grid{
float: left;
width: 100%;
clear: both;
}
#list{
float: left;
width: 100%;
}
#list h2{
width: 100%;
background: #000;
color: #fff;
font-size: 16px;
text-align: center;
border-radius: 6px;
float: left;
font-family: "Lato", sans-serif;
}
#list .course{
width: 100%;
height: 78px !important;
float: left;
box-sizing: border-box;
}
#list .course h3,
#list .course h4,
#list .course h5,
#list .course span{
width: 24%;
float: left;
text-align: left;
margin: 0;
line-height: 20px;
clear: none;
}
#list .course span.instructor{
clear:left;
}
p.message{
font-size: 18px;
color: #b73c7a;
text-transform: uppercase;
padding: 0;
margin: 30px 0 0;
width: 100%;
text-align: center;
float: left;
}
button#reset{
    font-family: "Lato", sans-serif;
    font-size: 12px;
    border-radius: 6px;
    padding: 7px 10px 5px 10px;
    color: #2e7291;
    background: #94d3f6;
    text-shadow: 0.1em 0.1em 0.2em #cdffff;
    text-transform: uppercase;
    position: relative;
    top: -2px;
    left: 10px;
}
a.reglink{
font-size: 14px;
float: right;
width: 87%;
color: #24a9fd;
padding-right: 12px;
text-align: center;
padding-top: 0px;
}

.reg-container {
background-color: #2222;
    width: 118%;
    margin-left: -10%;
    vertical-align: middle;
    position: relative;
    margin-top: 10px;
    border-radius: 10px;
}

.reg-container:hover{background-color: green;}

#summer-2018-table {
	width: 350px!important;
	margin-left: 25px;
}