@charset "UTF-8";


* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

nav {
	background-color: #075770;
	padding: 5px 20px;
}

ul {
	list-style-type: none;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	text-decoration: ;
}

li {
	font-size: 16px;
	padding: 15px 5px;
}
li a {
	display: block;
}


.logo a {
	font-size: 20px;
	text-decoration: none;
}



/* Mobile CSS */
@media screen and (min-width: 320px){


	body {
		background-color: #f8f8f8;
	}


	h1, h2, h3 {
		font-family: Cinzel;
	}
	p {
		font-family: Source Sans Pro;
	}
	a {
		font-family: Source Sans Pro;
	}
	header {
		border-left: 2px solid turquoise;
	}



	#navbar {

	}
	#navbar ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	#navbar .toggle {
		order: 1;
	}
	#navbar .item {
		width: 100%;
		text-align: center;
		display: none;
		order: 3;
	}
	#navbar .item.active {
		display: block;
	}
	#navbar .item a {
		font-family: Source Sans Pro;
		font-size: 25px;
		padding: 10px;
	}
	#navbar .item a:hover {
		border-bottom: 0.5px solid white;
	}

	#navbar .logo a {
		font-family: Cinzel;
		font-size: 24px;
	}


	#navbar .toggle {
		cursor: pointer;
	}


	#navbar .bars {
		background-color: whitesmoke;
		display: inline-block;
		height: 3px;
		position: relative;
		width: 20px;
	}

	#navbar .bars::before, .bars::after {
		background-color: whitesmoke;
		content: "";
		display: inline-block;
		height: 3px;
		position: absolute;
		width: 20px;
	}
	#navbar .bars::before {
		top: 5px;
	}
	#navbar .bars::after {
		top: -5px;
	}




	.page-title-area {
		border: ;
		padding: 100px 0 100px 0;
	}
	.page-title-area h1 {
		font-size: 45px;
		text-align: center;
		color: #4682b4;
	}

	.symbol-paragraph {
		border: ;
		margin: 0;
		padding: 0;
	}
	.symbol-paragraph p {
		font-size: 24px;
		margin: 0;
		padding: 0 0 0 5px;
	}



	.symbols-title {
		border: ;
		margin: 0;
		padding: 50px 0 50px 0;
	}
	.symbols-title p {
		font-size: 30px;
		text-align: center;
		margin: 0;
		padding: 0;
	}


	.symbols-area {
		border: ;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}
	.symbols-area ul {
		border: ;
		list-style-type: none;
		margin: 0 auto;
		padding: 0;
	}
	.symbols-area li {
		border: ;
		list-style-type: none;
		width: 100%;
	}
	.symbols-area img {
		border: ;
		margin: 0 auto;
		display: block;
		width: 200px;
		height: 150px;
	}


	.symbol-search-title {
		border: ;
		margin: 0;
		padding: 70px 0 0 0;
	}
	.symbol-search-title p {
		font-size: 30px;
		text-align: center;
	}

	.symbol-search-results {
		border: ;
		margin: 0 0 0 0;
		padding: 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.symbol-search-results li {
		border: ;
		width: 100%;
		list-style: none;
		margin: 4px;
		padding: 0;
	}
	.symbol-search-results a {
		border: ;
		border-radius: 6px;
		background-color: #075770;
		display: block;
		margin: auto;
		text-align: center;
		font-size: 26px;
		color: white;
		padding: 20px;
	}


	.video-title {
		border: ;
		margin: 0;
		padding: 50px 0 0px 0;
	}
	.video-title p {
		border: ;
		font-size: 30px;
		text-align: center;
		margin: 0;
		padding: 0;
	}

	.videos {
		border: ;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}
	.videos div {
		border: 1px solid black;
		border-radius: 6px;
	}
	.videos li {
		width: 100%;
		list-style: none;
		margin: 10px;
		padding: 0;
	}
	.videos iframe {
		width: 100%;
		height: 340px;
	}
	.videos h1 {
		border: ;
		font-size: 25px;
		text-align: center;
		margin: 0;
		padding: 10px 0 10px 0;
	}
	.videos p {
		font-size: 19px;
		padding: 0 0 0 4px;
		margin: 0;
	}



	.qa {
		margin: 0;
		padding: 0;
	}
	.qa div {
		width: 100%;
	}
	.qa a {
		margin: 0 auto;
		display: block;
		font-size: 21px;
		text-align: center;
		background-color: #075770;
		color: white;
		padding: 10px 0;
	}



	#to-top {
		border: 1px solid turquoise;
	  	display: none;
	  	position: fixed;
	  	bottom: 15px;
	  	right: 25px;
	  	z-index: 99;
	  	outline: none;
	  	background-color: whitesmoke;
	  	color: black; 
	  	cursor: pointer; 
	  	padding: 15px; 
	  	border-radius: 5px; 
	  	font-size: 18px;
	}

}



/* TABLET CSS */
@media screen and (min-width: 768px){


	body {
		
	}


	header {
		border-left: 2px solid royalblue;
	}



	#navbar {

	}
	#navbar ul {
		justify-content: center;
	}
	#navbar .logo {
		flex: 1;
	}



	.page-title-area {
		border: ;
		margin: 0;
		padding: 140px 0 140px 0;
	}
	.page-title-area h1 {
		font-size: 60px;
	}


	.symbol-paragraph {
		margin: 0;
		padding: 0;
	}
	.symbol-paragraph p {
		font-size: 24px;
		padding: 0 0 0 5px;
	}



	.symbols-title {
		border: ;
		margin: 0;
		padding: 70px 0 70px 0;
	}
	.symbols-title p {
		font-size: 32px;
	}



	.symbols-area {
		border: ;
		display: flex;
		flex-wrap: wrap;
	}
	.symbols-area ul {
		margin: 0 auto;
	}
	.symbols-area li {
		width: 20%;
	}
	.symbols-area img {
		border: ;
		height: 120px;
		width: 120px;
	}



	.symbol-search-title {
		border: ;
		margin: 0;
		padding: 120px 0 20px 0;
	}
	.symbol-search-title p {
		font-size: 40px;
	}



	.symbol-search-results {
		border: ;
		margin: 0;
		padding: 0;
	}
	.symbol-search-results li {
		width: 48%;
		height: 100%;
		list-style: none;
		margin: 5px auto;
	}
	.symbol-search-results a {
		font-size: 27px;
		padding: 30px 0 30px 0;
	}



	.video-title {
		border: ;
		margin: 0;
		padding: 120px 0 20px 0;
	}
	.video-title p {
		font-size: 40px;
		text-align: center;
	}


	.videos {
		border: ;
		margin: 0;
		padding: 0;
	}
	.videos li {
		border: ;
		margin: 10px;
	}
	.videos iframe {
		border-radius: 6px;
		margin: 0;
		height: 400px;
		width: 100%;
	}
	.videos h1 {
		text-align: ;
		margin: 0;
		padding: 20px 0 20px 0;
		font-size: 38px;
	}
	.videos p {
		font-size: 25px;
		margin: 0;
		padding: 0 0 10px 10px;
	}



	.qa {
		margin: 0;
		padding: 0;
	}
	.qa div {

	}
	.qa a {
		font-size: 23px;
	}

	
}



/* DESKTOP */
@media screen and (min-width: 1024px){


	body {
		
	}
	
	header {
		border-left: 2px solid turquoise;
	}


	#navbar .item {
		display: block;
		width: auto;
	}
	#navbar .toggle {
		display: none;
	}
	#navbar .logo {
		padding: 0;
		order: 0;
	}
	#navbar .item {
		order: 1;
	}
	#navbar .item a {
		font-size: 20px;
	}
	#navbar li {
		padding: 10px 5px;
	}
	#navbar .active {
		border: 1px solid white;
		padding: 0;
	}




	.page-title-area {
		margin: 0;
		padding: 330px 0 385px 0;
	}
	.page-title-area h1 {
		font-size: 130px;
	}



	.symbol-paragraph {
		margin: 0;
		padding: 0 0 0 0;
	}
	.symbol-paragraph p {
		margin: 0 auto;
		width: 50%;
		font-size: 30px;
	}



	.symbols-title {
		border: ;
		margin: 0;
		padding: 100px 0 20px 0;
	}
	.symbols-title p {
		font-size: 30px;
		text-align: center;
	}


	.symbols-area {
		border: ;
		padding: 0px 0 0px 0;
	}
	.symbols-area ul {

	}
	.symbols-area li {
		border: ;
		width: 15%;
		float: left;
	}
	.symbols-area img {
		height: 130px;
		width: 130px;
	}


	.symbol-search-title {
		border: ;
		margin: 0;
		padding: 130px 0 20px 0;
	}
	.symbol-search-title p {
		font-size: 30px;
		text-align: ;
		margin: 0;
		padding: 0;
	}


	.symbol-search-results {
		border: ;
		margin: 0;
		padding: 0;
	}
	.symbol-search-results li {
		margin: 0 auto;
		width: 25%;
	}
	.symbol-search-results a {
		border: 2px solid #075570;
		background-color: #f8f8f8;
		color: #075770;
		margin: 5px;
		padding: 20px 0 20px 0;
		font-size: 30px;
	}
	.symbol-search-results a:hover {
		background-color: #075770;
		color: floralwhite;
	}



	.video-title {
		border: ;
		margin: 0;
		padding: 200px 0 20px 0;
	}
	.video-title p {
		font-size: 30px;
		text-align: ;
		margin: 0;
		padding: 0;
	}

	.videos {
		border: ;
		margin: 0 0 50px 0;
		padding: 0;
	}
	.videos li {
/*		border: solid 2px rgba(88, 183, 205, .2);*/
		border-radius: 8px;
		margin: 10px auto;
		margin: ;
		width: 45%;
		padding: 0;
	}
	.videos div {
		border: none;
	}
	.videos iframe {
		border-radius: 5px 5px 0 0;
		margin: 0;
		padding: 0;
		height: 590px;
		width: 100%;
	}
	.videos h1 {
		font-size: 50px;
		margin: 0;
		padding: 20px 0 20px 0;
	}
	.videos p {
		font-size: 30px;
		margin: 0;
		padding: 0 0 10px 10px;
	}
	.videos a {
		border: 2px solid #075770;
		background-color: floralwhite;
		color: #075770;
		font-size: 35px;
	}
	.videos a:hover {
		border: 1px solid #075770;
		background-color: #075770;
		color: floralwhite;
	}




	.qa {
		
	}
	.qa div {
		margin: 0 auto;
		display: block;
		width: 20%;
	}
	.qa a {
		border: 1px solid #075770;
		border-radius: 6px 6px 0 0;
		background-color: #f8f8f8;
		color: #075770;
	}
	.qa a:hover {
		background-color: #075770;
		color: white;
	}


}