/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */


@media (min-width: 485px) { 

	.event-card-image {
	    width:100%;
	    height: 350px;
	}
	

}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	.event-card-image {
	    width:100%;
	    height: 400px;
	}
	

 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

	h1 {
		font-size: 4rem;
	}

	#events {
	    padding-bottom: 160px;
	}

	.event-card { 
		margin-bottom: 40px;
	}

	.event-card-image, .event-card-image div {
	    width:210px;
	    height: 174px;
	    background-size: contain;
	}

	 #countdown-table table td {
        width: 60px;
    }

    .numbers-row {
        font-size: 2rem;
    }

    .text-row {
        font-size: 1.2rem;
    }
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 899px) { 


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	h1 {
		font-size: 4.3rem;
		line-height: 78px;
	} 

	#events {
	    padding-bottom: 180px;
	}

	.event-card-image, .event-card-image div {
	    width:290px;
	    height: 240px;

	}

	
    #countdown-table table td {
        width: 80px;
    }

    .numbers-row {
        font-size: 2.6rem;
    }

    .text-row {
        font-size: 1.6rem;
    }


	.nav-item {
	    padding: .3rem .6rem;
	}

 }




/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 



	.nav-item {
	    padding: .3rem 1rem;
	}

	#events {
	    padding-bottom: 200px;
	}

	.event-card-image, .event-card-image div {
	    width:350px;
	    height: 290px;

	}
 }


@media (min-width: 1400px) { 


}

@media (min-width: 1800px) { 


}

@media (min-width: 2400px) { 

	

}