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

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, .67),rgba(0, 0, 0, 0.80)), url("../images/SurveyGuidancePics/ESJLTC_Students_09262018_0245 (1).jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
	text-align: center;

  /* Sizing */
      width: 100%;
      height: 700px;

  /* Flexbox stuff */
      display: block;
      align-items: center;
 	 padding-left: 10%;
      padding-right: 10%;
      padding-top: 5%;
      padding-bottom: 5%; 

  /* Text styles */
      text-align:left;
		color:#FFFFFF;
}


		.hero h1{
			font-size: 4em;
			font-family: 'interstate', sans-serif;
			font-weight: 800;	
			text-align: center;
		}

.hero h2{
	text-align: center;
}

	/*yellow callout box. I can't get this to be un-italicized*/		
		.hero-callout-box{
			background-color:#ffd200;
			margin: 5px; 
			padding: 5px; 
			width: 170px; 
			height: 33px; 
			color:#000000;
			transform:skewX(-15deg);
			text-align: center;
			justify-content: center; /*this isn't centering*/
			margin:5px;
			padding:5px;
			font-family:'Interstate', sans-serif;
			font-size:0.9em;
			font-weight:400;
		}


		
		
		
		
		
		.yellow-header{
			text-align: center; 
			background-color: #ffd200; 
			margin: 5px; 
			padding: 5px; 
			width: 100%; 
			height: auto;
			font-family: 'interstate' sans-serif;
			/*font-size:1.2em; */
			justify-content: center;
		}
		
		
		.headline{
			text-align: center;
			font-size:1.3em;
			font-weight: 800; /* this isn't doing anything */
			/*color: #e21833;*/
			font-family: "interstate", sans-serif;
		}

		.sub-headline{
			text-align: center;
			font-family: "interstate", sans-serif;
			margin-left: 3%;
			margin-right: 3%;
		}
		
		
		.pfeil {
    		-webkit-backface-visibility: hidden;
   		 	-webkit-transform: translateZ(0);
   		 	position:relative;
    		left: 50%;
    		bottom: -18px;
    		margin: 0 0 0 -19px;
    		width: 0;
   			height: 0;
    		border-style: solid;
    		border-width: 19px 19px 0 19px;
    		border-color: rgb(255,213,32) transparent transparent transparent;
    		transition: 400ms;
    		-webkit-transition: 400ms;
		}
		
		.home-page-body-text{
			left:20%;
			position:relative;
			list-style-position:inside;
			width:500px;
			
		}
		
		.video{
			left:15%;
			position: relative;
		}	
		
		.video-headline{
			text-align: center;
			font-family: 'interstate', sans-serif;
			padding: 5px;	
		}
		
		
		.video-caption{
			font-family: 'interstate', sans-serif;
			text-align: center;
			font-size:0.8em;
		}
		
		.card{
			border: none;
			max-width: 100%;
			/*margin-bottom: 20px; */
			background-color: #000000;
		}

		/*.card .grow{
			transition: all .2s ease-in-out;
		}
		
		.card:hover{
			transform: scale(1.05);
		}
*/
		
		.card-img-top{
			border-radius: 5px;
			/*outline: auto;*/
		}
		
		.card .card-title{
			position:absolute;
			left: 5%;
			margin-right: 25%;
			color: #ffd200;
			font-family: 'Source Sans Pro', Arial, Helvetica, Verdana, sans-serif;
			font-size: 2em;
			border: none;
			line-height: 1.5;
			font-weight: 600;
		/*text-transform: uppercase;*/
		}
		
		@media (max-width: 600px) {
		.card .card-title {
			font-size: 1.8em;  
			}
		}
		
		.card .btn-card {
			position:absolute;
			left: 6%;
			top: 83%;
			background-color: #e21833;
			color: white;
			font-family: 'Source Sans Pro', Arial, Helvetica, Verdana, sans-serif;
			font-size: 1.0em;
			padding: 8px 12px;
			border: none;
			cursor: pointer;
		}
		
		.card .btn-card .grow{
			transition: all .2s ease-in-out;
		}
		
		.card .btn-card:hover {
			background-color: #47040E;
			/*transform: scale(1.05);*/
		}
		
		.button-link{
			color: white;
			text-decoration: none !important;
		}
		
		.button-link:hover{
			color: white;
			text-decoration: none !important;
		}
		
		.block ul{
			padding-left:5px;
		}
		
		.block ul li{  
			list-style:none;
			margin-top:10px;
			margin-bottom:15px;
			padding: 0px;
			padding-bottom:0px;
			color: #111;
			background-color:#F0F0F0;
			border: 1px solid #e6e6e6;
			border-radius: 4px;
		}


		.block li ul li{
			list-style:disc;
			margin-left: 1rem;
			border: none;
		}

		.block li ul li ul li{
			list-style:circle;
			margin-left: 2.5rem;
			border: none;
		}

		.block li ol li{
			list-style:decimal;
			border: none;
		}

		
		.block h3{
			font-size: 1.75em;
		}
		
		.block p{
			padding:5px 10px;
		}
		
		.block p.title{
			font-size: 1.5em;
			font-weight: bold;
			margin:0px;
			padding:6px;
			background-color:#e6e6e6;
			color:#000000;
			text-align:center
		}


		.block p.date {
			color: #000000;		
			background-color: #ffffff;
			border-radius: 0px 15px 15px 0px;
			border: 1px solid #e6e6e6;
			border-left: 0px;
			display: inline-block;
			/*min-width: 100px;
			max-width: 200px;*/
			text-align: left;
			margin: 5px 0px;
			padding-left: 5px;
			font-weight: 900;
		}
		
		.block p.keyword {
			display: inline-block;
			background-color: #e6e6e6;
			color: #000;
			padding: 5px 10px;
			border-radius: 15px;
			margin-left: 2px;  /*Adds buffer to start and adds space between pills */
			margin-right: 2px; /* Adds space between pills */
			margin-top: 5px; /* Space above the pill */
			font-size: 0.9em;
		}


		.block p.keyword {
			background-color: #e21833; /* UMD Red for keyword */
			color: white;
		}

		.block .keyword-div {
			margin-right: auto;
		}
		
		.btn-primary{
			background-color: #e21833;
			border: #B31328;
			padding: 9px 10px; /* buffer between text and button edges*/
			margin-left: 5px;  /*Adds buffer to start and adds space between pills */
			margin-right: 2px; /* Adds space between pills */
			margin-top: 5px; /* Space above the pill */
			margin-bottom: 5px;
			height: 44px;
			text-align:center;
		}
		.btn-primary:hover{
			background-color: #47040E;
		}

		.alphanav a {
			list-sytle-type: none;
			padding-left:5px;
			display: inline; /*makes all the alphaetical letters into one line*/
			padding-left: 5px;
			color: #e21833;
			text-decoration-line: none;
			font-size: 24px;
			background-color: white;
		}


		.alphanav a:hover{
			text-decoration-line:underline;
			color: #47040E;
		}



		.google-form{
			text-align:center;
		}