/* additional styles *
*
* Customizations for the SFU Community Engagement Initiative (CEI) website
* Hosted in AEM
* Author: Chris Yakimov
* Editors: Janet Yan.
*
* Last updated: 2018-10-26 by Chris Yakimov
*
*/


/*** TO DO 
*
* Confirm responsive breakpoints (what's the phone size)
*
*
*
**/

/*------ LAYOUT ADJUSTMENTS -------*/
/* fixes the flush-side text on screens narrower than 1400px*/
.sfu-column>div, .sfu-columns>div {
	padding-left: 25px;
	padding-right: 25px;
}


/*------- HEADING ---------*/

.big-heading,
#main-content h2.big-heading,
#main-content h3.big-heading,
#main-content h4.big-heading{
	font-family: DINWebBlack; 
	text-transform: uppercase;
	font-size: 8rem; 
	line-height: 7rem;
}

/*------- HEADING HELPER STYLES ---------*/
/* use these on <p> tags to mimic visual style of headings without tripping up screen readers */

#main-content .like-h2{
    line-height: 33px;
    font-size: 2.8rem;
    padding-bottom: 0;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 0;
	font-family: "DINWEb",sans-serif;
	font-weight: normal;
}
#main-content .like-h3{
	font-size: 2rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
	font-family: "DINWebBold",sans-serif;
	font-weight: 100;
}
#main-content .like-h4{
	
}

/*------- BUTTONS ---------*/
.button.cei-button{
	width: 100%;
	max-width:320px;
	margin-left: 0px !important;
	margin-right: 0px !important;
	font-size:2rem;
}


/*------- LATEST NEWS CUSTOM LIST STYLE ---------
* use with "custom-latest-news.txt" custom template
*/
.latest-updates{
	margin-top:2rem;
}

.latest-updates li{
    background: 0;
    list-style-type: none;
	padding-top: 0.3rem;
    padding-left: 3.7rem;
    margin-left: -0.8rem;
    font-size: 1.6rem;
	line-height:2.8rem;
	margin-bottom: 1.4rem;
}
.latest-updates li:before{
	font-family: "fontawesome";
	content: '\f111';
	color: #a6192e;
	padding-right: .7rem;
	margin-left: -2.5rem;
	font-size: 8px;
	float: left;
	margin-top: 0px;
	box-sizing: border-box;
}

.update-date{
	font-family: "DINWeb", sans-serif;
	font-size: 2rem;
}



/**/
/* MEDIA QUERIES */
/**/

/*screens smaller than 527px wide */
@media(max-width:527px){
	.big-heading,
	#main-content h2.big-heading,
	#main-content h3.big-heading,
	#main-content h4.big-heading{
		font-size: 3rem; 
		line-height: 2rem;
	}
	
}

/* screens between 528px and 979px wide */
@media(min-width:528px) and (max-width:979px){
	.big-heading,
	#main-content h2.big-heading,
	#main-content h3.big-heading,
	#main-content h4.big-heading{
		font-size:6rem;
		line-height: 5rem;
	}
	
}

/* screens wider than 980px */
@media(min-width:980px){
	.big-heading,
	#main-content h2.big-heading,
	#main-content h3.big-heading,
	#main-content h4.big-heading{
		font-size: 8rem; 
		line-height: 7rem;
	}
}

/* Extra large screens 1800px and larger */
@media(min-width:1800px){
	
}