/**
	Rainbow - Course Layout
	sadia sharmin

	Responsive styling for mobile/tablet viewing
**/

/* === Small Mobile Screen === */

@media (max-width: 362px) {

	/* header area */
	header {
		height: auto;
	}
	header h1 {
		font-size: 7em;
		margin-bottom: 0;
		margin-top: 10%;
	}
	header .pre-heading {
		font-size: 1em;
	}
	header .vertical-heading {
		font-size: 1em;
		margin-left: 0;
	}
	header h2 {
		font-size: 1.1em;
		width: 80%;
		margin: auto;
	}
	header h3 {
		font-size: 0.8em;
		width: 90%;
		margin: 20px auto;
		font-size: 0.9em;
	}
	.course-links {
		display: none;
	}
  #scroll-note {
		display: none;
	}

	/* menu */

	.menu-overlay {
		max-width: 100%;
	}

	.menu-overlay h3 {
		display: none;
	}

	/* main content area */

	.panel-date {
		margin: 0px;
		padding-right: 20px;
		color: #552F2F;
		color: #ccc;
		background: rgba(0, 0, 0, 0.6);
		font-size: 1.3em;
		font-weight: 700;
		text-align: right;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		transform: none;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}

	#accordion .ui-accordion-header {
		background-color: #ccc;
		margin: 0px;
		padding: 2%;
		color: #fff;
		display: block;
		max-width: 96%;
		text-indent: 10px;
		font-weight: 600;
		font-size: 1.2em;
		letter-spacing: 0px;
		height: 35px;
		cursor: pointer;
		background-image: url("../images/tissue.png");
		background-size: 100%;
	}
	#accordion .ui-accordion-header:before {
		content: '\203A';
		font-size: 1.3em;
		color: #fff;
		float: left;
		margin-top: -5px;
	}
	#accordion .ui-state-active:before {
		transform: rotate(90deg);
		margin-top: -7px;
		margin-left: 5px;
	}

	.content-box label {
		margin: 20px;
	}
	.content-box {
		padding: 20px;
	}

	/* footer area */
	footer {
		text-align: left;
		padding: 20px;
		max-width: 100%;
	}
	footer .mini-grid {
		width: 500px;
		margin-left: 35%;
	}

	.item3, .item4 {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}
	.item3 .mini-grid, .item4 .mini-grid {
		display: none;
	}
	.mini-grid-alt {
		display: block;
		text-transform: uppercase;
		font-weight: 900;
		font-size: 15px;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}

	.instructor-card .label {
		display: none;
	}
	.instructor1 {
		margin-top: 80px;
	}
	.info-cards {
		display: flex;
		width: 100%;
		flex-flow: column;
		margin-top: 15px;
	}
	.instructor-card {
		max-width: 98%;
		margin-bottom: 50px;
	}
	.flex-row {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 20px;
		margin-top: 60px;
		min-width: 300px;
		max-width: 300px;
	}

	.footnote {
		font-size: 0.8em;
	}
	footer .footnote {
		border-top: dotted 1px #d1d1d1;
		padding-top: 5px;
	}

}

/* === Medium Mobile Screen === */

@media (min-width: 363px) and (max-width: 549px) {

	/* header */
	header {
		height: auto;
	}
	h1 {
		margin-top: 10%;
	}
	header h2 {
		width: 80%;
		margin: auto;
	}
	header h3 {
		width: 90%;
		margin: 20px auto;
		font-size: 1em;
	}
	#scroll-note {
		display: none;
	}
	.course-links {
		display: none;
	}
	header .footnote {
		margin-top: 180px;
	}

	/* menu */
	.menu-overlay h3 {
		display: none;
	}

	/* main content area */
	.panel-date {
		margin: 0px;
		padding-right: 20px;
		color: #552F2F;
		color: #ccc;
		background: rgba(0, 0, 0, 0.6);
		font-size: 1.3em;
		font-weight: 700;
		text-align: right;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		transform: none;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}

	#accordion .ui-accordion-header {
		background-color: #ccc;
		margin: 0px;
		padding: 10px 20px;
		color: #fff;
		display: block;
		max-width: 100%;
		text-indent: 10px;
		font-weight: 600;
		font-size: 1.3em;
		letter-spacing: 0px;
		height: 35px;
		cursor: pointer;
		background-image: url("../images/tissue.png");
		background-size: 100%;
	}
	#accordion .ui-accordion-header:before {
		content: '\203A';
		font-size: 1.3em;
		color: #fff;
		float: left;
		margin-top: -5px;
	}
	#accordion .ui-state-active:before {
		transform: rotate(90deg);
		margin-top: -7px;
		margin-left: 5px;
	}

	.content-box label {
		margin: 20px;
	}
	.content-box {
		padding: 20px;
	}

	/* footer */
	footer {
		text-align: left;
		padding: 20px;
	}
	footer .mini-grid {
		width: 500px;
		margin-left: 35%;
	}
	.item3, .item4 {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}
	.item3 .mini-grid, .item4 .mini-grid {
		display: none;
	}
	.mini-grid-alt {
		display: block;
		text-transform: uppercase;
		font-weight: 900;
		font-size: 15px;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	.info-cards {
		display: flex;
		width: 100%;
		flex-flow: column;
		margin-top: 15px;
	}
	.instructor-card {
		max-width: 98%;
		margin-bottom: 50px;
	}
	.flex-row {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 20px;
		margin-top: 60px;
		min-width: 300px;
		max-width: 300px;
	}
	.footnote {
		font-size: 0.8em;
	}
	footer .footnote {
		border-top: dotted 1px #d1d1d1;
		padding-top: 5px;
	}
}

/* === Large Mobile Screen === */

@media (min-width: 550px) and (max-width: 768px) {

	/* header */
	h1 {
		margin-top: 10%;
	}
	header h3 {
		margin-bottom: 50px;
	}
	#scroll-note {
		display: none;
	}
	.course-links {
		display: none;
	}

	/* menu */
	.menu-overlay h3 {
		display: none;
	}

	/* main content */

	#accordion .ui-accordion-header {
		background-color: #ccc;
		margin: 0px;
		padding: 10px 20px;
		color: #fff;
		display: block;
		max-width: 100%;
		text-indent: 10px;
		font-weight: 600;
		font-size: 1em;
		letter-spacing: 0px;
		height: 35px;
		cursor: pointer;
		background-image: url("../images/tissue.png");
		background-size: 100%;
	}

	/* footer area */

	footer {
			text-align: left;
			padding: 20px;
			text-align: center;
	}
	footer .mini-grid {
		width: 500px;
		margin-left: 35%;
		font-size: 1em;
	}
	.info-cards {
		display: flex;
		width: 100%;
		flex-flow: column;
		margin-top: 15px;
	}
	.instructor-card {
		max-width: 98%;
		margin-bottom: 50px;
	}
	.flex-row {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 20px;
		margin-top: 60px;
		min-width: 300px;
		max-width: 300px;
	}
	footer .footnote {
		border-top: dotted 1px #d1d1d1;
		padding-top: 5px;
	}
	.grid-container {
		display: flex;
		flex-flow: column;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.item1 {
		background: #000;
		color: #eee;
		width: 96%;
		height: 60px;
		padding: 2%;
		margin-bottom: 20px;
	}
	h6 {
		text-align: center;
	}
	.item3 {
		background: #eee;
		padding: 2%;
	}
	.item3>div {
		width: 250px;
		margin: auto;
	}
	.item4>div {
		width: 300px;
		margin: auto;
	}
	.item3 p, .item4 p {
		width: 85%;
		margin: auto;
		text-align: center;
	}
	.item4 {
		background: #e1e1e1;
		padding: 2%;
		margin-bottom: 50px;
	}
}

/** === Tablets and Small Computer Screens === **/

@media (min-width: 769px) and (max-width: 1240px) {

	/* footer */

	footer {
		padding: 0;
	}
	.label {
		font-size: 0.7em;
	}
	.grid-container {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-rows: 80px 2fr 200px 10px 250px;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.grid-container>div {
		padding: 10px;
	}
	.item1 {
		grid-area: header;
		background: #000;
		color: #eee;
		grid-column: 1 / span 4;
		grid-row: 1 / span 1;
		padding: 2%
	}
	.item2 {
		grid-area: instructors;
		grid-row: 2 / span 1;
		grid-column: 1 / span 4;
	}
	h6 {
		text-align: center;
	}
	.item3 {
		grid-column: 2 / span 2;
		grid-row: 3 / span 1;
		background: #eee;
	}
	.item3>div {
		width: 250px;
		margin: auto;
	}
	.item4>div {
		width: 300px;
		margin: auto;
	}
	.item3 p, .item4 p {
		width: 85%;
		margin: auto;
		text-align: center;
	}
	.item4 {
		grid-column: 2 / span 2;
		grid-row: 5 / span 1;
		background: #e1e1e1;
		margin-bottom: 20px;
	}
	.info-cards {
		display: flex;
		width: 100%;
		flex-flow: row;
		justify-content: space-around;
		margin-top: -20px;
	}
}

/** == Large Screens == **/

@media (min-width: 1240px) {

	/* footer */

	footer {
		padding: 0;
		background: white;
	}
	.grid-container {
		display: grid;
		grid-template-columns: 1fr 33% 33% 27% 1fr;
		grid-template-rows: 18% 40% 40% 1fr;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.grid-container>div {
		padding: 20px;
	}
	.item1 {
		background: #000;
		color: #eee;
		grid-column: 1 / span 5;
		grid-row: 1 / span 1;
	}
	.item2 {
		grid-row: 2 / span 3;
		grid-column: 2 / span 2;
	}
	.item3 {
		grid-column: 4 / span 1;
		grid-row: 2 / span 1;
		background: white;
		text-align: left;
	}
	.item4 {
		grid-column: 4 / span 1;
		grid-row: 3 / span 1;
		background: white;
		text-align: left;
	}
	.info-cards {
		display: flex;
		width: 100%;
		flex-flow: row;
		justify-content: space-around;
		margin-top: 15px;
	}
}