@charset "utf-8";
/* CSS Document */

body {
	background-color: #000000;
	font-family: 'Saira', sans-serif;
	font-size: 18px;
	font-weight: 100;
	color: #aaaaaa;
	padding: 0px;
	}


h1 {
	font-size: 45pt;
	font-family: 'Saira', sans-serif;
	color: #FFBE00;
	line-height: 60px;
	padding: 0px;
	font-weight: 200;
	margin-bottom: .1em;
	} 

.logo_size {
	width: 309px;
	height: 45px;
	padding-top: 17px; 
	padding-left: 20px;
	}

.icon_size {
	width: 70px;
	height: 64px;
	padding-top: 10px; 
	padding-right: 10px;	
	}

.main_header {
	position: fixed; 
	width: 100%;
	background-color:  #00000099;
	padding: 0px;
	left: 0px;
	top: 0px;
	z-index: 100;
	}

.nav_top {
	width: 100%;
	padding: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* background-color:crimson; */
	}

.nav_bottom {
	display: flex;
	width: 100%;
	}

.nav_text {
	color: #808080;
	font-size: 24px;
	padding-left: 20px;
	}

.nav_text a {
	text-decoration: none;
	color: #808080;
	font-weight: 500;
	}

.nav_text a:hover  {
	text-decoration: none;
	color: #bbbbbb;
	font-weight: 500;
	}

.more_link {
	width: 200px;
	padding: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/*align-self: flex-end; */
	}

.yellow_link {
	text-decoration: none;
	color: #ffbe00;
	font-weight: 500;
	padding: 0px;
	display: flex;
	}

.yellow_link a {
	text-decoration: none;
	color: #ffbe00;
	font-weight: 500;
	padding: 0px;
	display: flex;
	}

.down_arrow {
	font-size: 8pt;
	display: flex;
	align-self: center;
	
	}

.hrule {
	height: 1px;
	background-color: #dddddd; 
	padding: 0px;
	}

.section_top_spacer {
	height: 180px;
	width: 120px;
	}

.section_one {
	height: 1080px;
	width: 100%;
	left: 0px;
	top: 0px;
	padding-left: 0px; 
	background-image:url("images/CAT_HD_BG.jpg");
	background-position: center;
	background-size: 1920px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
	}

.section_listen {
	height: 1080px;
	width: 100%;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	background-image:url("images/bg_listen.png");
	background-position: center;
	background-size: 1920px;	
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
	}

.section_learn {
	height: 1080px;
	width: 100%;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	background-image:url("images/bg_learn.png");
	background-position: center;
	background-size: 1920px;	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	}

.section_signup {
	height: 1080px;
	width: 100%;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	background-image:url("images/CAT_HD_BG.jpg");
	background-position: center;
	background-size: 1920px;
	flex-direction: column;
	justify-content: space-between;
	}

.section_signup_form {
	height: 1080px;
	width: 600px;
	left: 0px;
	top: 0px;
	align-self: auto;
	}

.section_learn_reason {
	height: 1080px;
	width: 100%;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	background-image:url("images/bg_learn.png");
	background-position: center;
	background-size: 1920px;
	flex-direction: column;
	justify-content: space-between;
	}

.listen_display {
	width: 1500px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}

.listen_cover {
	width:350px;
	height:350px;
	display: flex;
	flex-wrap: wrap;
	}

.listen_icons {
	width: 400px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}	

.learn_display {
	width: 1500px;
	display: flex;
	flex-direction: row;
	align-self: center;
	}

.learn_picture {
	width: 800px;
	}

.learn_picture02 {
	width: 0px;
	}

.learn_content {
	width: 700px;
	display: flex;
	padding-left: 20px;
	align-items: flex-start;
	flex-direction: column;
	}

.learn_reason_display {
	width: 1500px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	flex-wrap: wrap;
	border: 1px white solid;
	}

@media all and (max-width: 1499px){

.listen_display {
	width: 900px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}

.listen_cover {
	width:300px;
	height:300px;
	display: flex;
	flex-wrap: wrap;
	}

.learn_display {
	width: 900px;
	}
		
.learn_picture {
	width: 400px;
	}
.learn_picture02 {
	width: 400px;
	}	
	
.learn_content {
	width: 900px;
	}	
}


@media all and (max-width: 875px){

body {
	font-size: 14px;
	}	

h1 {
	font-size: 30pt;
	} 

.logo_size {
	width: 240px;
	height: 35px;
	padding-top: 13px; 
	padding-left: 10px;
	}

.icon_size {
	height: 47px;
	width: 52px;
	padding-top: 7px; 
	padding-right: 10px;	
	}	

.section_top_spacer {
	height: 100px;
	width: 80px;
	}
	
.section_one {
	height: 1020px;
	background-size: 1813px;
	}

.nav_text {
	font-size: 16px;
	}

.listen_display {
	width: 700px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}

.listen_cover {
	width:275px;
	height:275px;
	display: flex;
	flex-wrap: wrap;
	}	

.learn_display {
	width: 700px;
	}
		
.learn_picture {
	width: 400px;
	}
.learn_picture02 {
	width: 400px;
	}	
	
.learn_content {
	width: 500px;
	}	
}

@media all and (max-width: 600px){
	
body {
	font-size: 12px;
	}	

h1 {
	font-size: 20pt;
	} 	
	
.logo_size {
	width: 175px;
	height: 26px;
	padding-top: 5px; 
	}
	
.icon_size {
	display: none;
	}	
	
.nav_bottom {
	display: none;
	}

.section_top_spacer {
	height: 40px;
	width: 40px;
	}
		
	
.section_one {
	height: 853px;
	background-size: 1516px;
	}	

.listen_display {
	width: 500px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}

.listen_cover {
	width:200px;
	height:200px;
	display: flex;
	flex-wrap: wrap;
	}		
	
.learn_display {
	width: 500px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;	
	align-self: center;
	flex-wrap: wrap;
	}	
	
.learn_picture {
	width: 500px;
	}
.learn_picture02 {
	width: 0px;
	}	
	
.learn_content {
	width: 500px;
	}		
			
}