﻿/*All setup css
https://www.w3schools.com/css/css_examples.asp
*/

/*-------Annual Function Gallery Begins ------------------------*/

.AF-Container {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	margin-top:10px;
	padding:auto;
	height:auto;
	margin:auto;
	width:90%;
	text-align: center;
	align-items: center;
	align-content: center;
	}

.AFText-Head {
	color: #1e4d72;
    		/*text-shadow: 1px 0px 1px #B8860B;*/
	text-shadow: 1px 0px 1px #000;
	text-align: center;
	word-spacing:2px;
	letter-spacing:2px;
	font-size:27px;
	font-weight:bold;
	width:45%;
	font-family: "Sofia", montserrat, sans-serif;
	padding:5px;
	margin:8px;
		
	border-style: solid;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-right-color:#FF8C00;
	border-bottom-color:#FF8C00;
	border-top-width: 0px;
	border-left-width: 0px;
	border-radius:10px;
	}

.AF-Container1 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	margin-top:2px;
	padding:auto;
	height:auto;
	margin:auto;
	width:90%;
	text-align: center;
	align-items: center;
	align-content: center;
	}

.AF-Text1 {
	color: #000000;
	text-align: justify;
	padding: 5px;
	margin:0px;
	/*word-spacing:1px;*/
	letter-spacing:1px;
	line-height:30px;
	font-size:25px;
	font-family: "Sofia", montserrat, sans-serif;    
	object-fit: cover;
	width:98%;
	}

.AF-Container2 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-evenly;
	margin-top:2px;
	padding:5px;
	height:auto;
	margin:auto;
	width:90%;
	text-align: center;
	align-items: center;
	align-content: center;
	}
	
.AF-Container2 img {
	width:320px;
	height:300px;
	border-radius:10px;
	box-shadow:  5px 5px 5px grey;
	}

.AF-Container2 a{ 
	color: #8B0000;
	letter-spacing:1px;
	font-weight:bold;
	font-size:22px;
	}
     
.AF-Container2 a:hover{ 
	color:#1e4d92;   
	background:#FFD700; 
     	}
/*-------Annual Function  Ends ------------------------*/


/*---Responsive code for mobiles---------*/
/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 800px)
{


.AF-Container {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	margin-top:15px;
	padding:auto;
	height:auto;
	margin:auto;
	width:100%;
	text-align: center;
	align-items: center;
	align-content: center;
	background:#FFFFFF;
	}

.AFText-Head {
	color: #1e4d72;
	text-shadow: 1px 0px 1px #000;
	text-align: center;
	word-spacing:1px;
	letter-spacing:1px;
	font-size:16px;
	font-weight:bold;
	width:98%;
	font-family: "Sofia", montserrat, sans-serif;
	padding:5px;
	margin:8px;
		
	border-style: solid;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-right-color:#FF8C00;
	border-bottom-color:#FF8C00;
	border-top-width: 0px;
	border-left-width: 0px;
	border-radius:10px;
	}

.AF-Container1 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	margin-top:2px;
	padding:auto;
	height:auto;
	margin:auto;
	width:100%;
	text-align: center;
	align-items: center;
	align-content: center;
	background:#FFFFFF;
	}

.AF-Text1 {
	color: #000000;
	text-align: justify;
	padding: 5px;
	margin:0px;
	word-spacing:1px;
	line-height:18px;
	font-size:12px;
	font-family: "Sofia", montserrat, sans-serif;    
	width:97%;
	}

.AF-Container2 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-around;
	margin-top:2px;
	padding:5px;
	height:auto;
	margin:auto;
	width:100%;
	text-align: center;
	align-items: center;
	align-content: center;
	background:#FFFFFF;
	}

.AF-Text2 {
	color: #000000;
	text-align: justify;
	padding: 5px;
	margin:0px;
	word-spacing:1px;
	line-height:18px;
	font-size:12px;
	font-family: "Sofia", montserrat, sans-serif;    
	width:97%;
	}
	
.AF-Text2 img {
	width:100%;
	height:170px;
	border-radius:10px;
	box-shadow:  5px 5px 5px grey;
	}

.AF-Text2 a{ 
	color: #8B0000;
	letter-spacing:1px;
	font-weight:bold;
	font-size:22px;
	}
     
.AF-Text2 a:hover{ 
	color:#1e4d92;   
	background:#FFD700; 
     	}
/*-------Annual Function  Ends ------------------------*/

}