/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
Styles
--------------------------------------------------------------*/


.box1 {
    background: rgba(255,255,255,0.8);
    border-top: solid 5px #bfa41e;
    padding-top: 20px;
}

.box2 {
    background:#2C4E77;
    color:white;
}

main {
    font-family: 'Questrial', sans-serif;
}

h2 {
    color:black;
}


/*--------------------------------------------------------------
Cards:
--------------------------------------------------------------*/
.main-area {
	padding: 1em;
	background-color: hsl(0, 0%, 90%);
}

.cards {
	margin: 0;
	padding: 0;
    list-style-type: none;
    grid-gap: 1em;
}

.card {
	display: flex;
}

.card a {
	width: 100%;
	text-align: center;
	text-decoration: none;
	background: white;
	border: 1px transparent;
	color: hsl(0, 0%, 5%);
	transition: all .2s;
}

.card a:focus,
.card a:hover {
	margin: -5px 5px 5px -5px;
	box-shadow: 5px 5px 0px 0px hsla(0, 0%, 70%, .8);
}

/* Grid Item */
.img-icon {
	grid-column: 1;
	grid-row: 1/3;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

/* Grid Item */
.cards h2 {
	grid-column: 2;
	grid-row: 1;
	padding-top: .5em;
	align-self: flex-end;
}

/* Grid Item */
.meta {
	grid-column: 2;
	grid-row: 2;
	padding-bottom: 1em;
}


/*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/

@supports (grid-area: auto) {

        /* =============================================
        Media Query for mobile devices
        ===============================================*/
	
	 @media screen and (max-width:440px) {
        .cards img {
            display:none;
        }
        .cards h2 {
            grid-column:1/3;
            grid-row: 1;
        }

        .meta {
            grid-column:1/3;
            grid-row: 2;
        }
		 
		
    }


    @media screen and (max-width:767px) {
        .card a {
            display: grid;
            grid-template-columns: 150px auto;
            grid-template-rows: 1fr 1fr;
        }

        .img-icon {
            padding-left: 5px;
        }
        
        .header-large-img {
            display:none;
        }
		
		 .title h2 {
			text-align: center;	 
			 font-size: 40px;
		 }
    }
   

     /* =============================================
        Media Query for small devices (tablets)
        ===============================================*/

    @media screen and (min-width:768px) {
        .header {
            max-width: none;
            display: grid;
            grid-template-columns: repeat(4, 1fr);  
        }
		
        .header-large-img {
            display: none;
        }
		
		.title h2 {
            font-size: 40px;
        }


        /* --------------------------------------------
        Grid Items for the header 
        ---------------------------------------------*/
        .header-img {
            grid-column: 1/4;
            grid-row: 1;
        }

        .title {
            grid-column: 1;
            grid-row:1;
			display: flex;
			align-items: center;
        }

        .caption {
            grid-column: 1/5;
            grid-row: 2;
        }
		
		/* Second Grid to allow Flexbox on the Title */
		.box1 {
			display: grid;
		}
		
		.title h2 {
			grid-column: 1;
			grid-row: 1;
		}
		
		

        /* --------------------------------------------
        Grid for the cards
        ---------------------------------------------*/

        .cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .card img {
            max-width:300px;
            padding: 10px 5px 5px 5px;
        }

        ul li {
            margin: 0;
        }

    }

       /* =============================================
        Media Query for large devices (Laptops/PC's)
        ===============================================*/

        

    @media screen and (min-width:1200px) {
        .cards {
            grid-template-columns: repeat(3, 1fr);
        }

        .header {
            max-width: none;
            display: grid;
            grid-template-columns: repeat(4, 1fr);  
            grid-template-rows: 250px auto;       
        }

        .header-small-img {
            display:none;
        }

        .header-large-img {
            display: block;
        }
		
		.title h2 {
            font-size: 50px;
        }

   

    } 


} /*Grid support*/