/* --------------------------
    General
   -------------------------- */
*{
    padding: 0;
    margin: 0;
}

/* Body and html overall property*/
html, body{
    background-color: #FFF;
    color: #555;
    font-family:Poppins, sans-serif, Arial, Verdana;
    font-weight: 300;
	font-size:16px;
/*    text-rendering: optimizeLegibility; */
    overflow-x: hidden;

}


/* Header properties are defined by the following element*/
header{
	height: 4cm;
	background-image: url("../img/background.jpg");
	background-size: cover;
	background-attachment: fixed;
	opacity: 1;
}

.headertext{
	padding-top:30px;
	font-family:Poppins, sans-serif, Arial, Verdana;
	color:white;
	font-size:40px;
	font-weight:bold;
}

@media only screen and (max-width: 740px){.headertext

{
	padding-bottom:10px;
	font-size:20pt; 
	color:white;}
}

/* The following ID is the part of header element */
#overlay{
	height:100%;
	width: 100%;
	background-color:rgba(0, 0, 0, 0.6);
}


/* The following class defines the Header text div size and alignment*/
.heading {
	width:80%;
	float: left;
}

/* This element define the heading text properties at h2 level*/
h2{
	padding-bottom:10px;
	font-size:28pt; 
	color:black;
	font-weight:bold;
}

/* This element define the heading text properties at h3 level*/
h3{
	padding-bottom:10px;
	font-weight:bold;
}
h4{
	font-weight:bold;
	text-align: justify;
	text-justify: inter-word;
}

/* Media quearies at 740px*/
@media only screen and (max-width: 740px){h2

{
	padding-bottom:10px;
	font-size:20pt; 
	color:black;
	font-weight:bold;}
}

/* Media quearies at 600px*/
@media only screen and (max-width: 600px){h2

{
	padding-bottom:10px;
	font-size:18pt; 
	color:black; font-weight:bold;}
}

.list_format {
	padding-left:25px
}

/* The following ID defines the navingation division properies*/
#navigagtion-2-of-2{
	width:96.8%;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}

/* The following ID with link element(a) defines the navingation division and link properies*/
#navigagtion-2-of-2 a{
	width:auto;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}

/* This class define the properties of Login Button in the navigation*/
.topnav-right{
	margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
	float: right;
}

/* Media quearies at 740px responsive design*/
@media only screen and (max-width: 740px){
#navigagtion-2-of-2 a{
	width:100%;
	float: left;
	text-align: center;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px
}
}

/* Media quearies at 740px responsive design*/
@media only screen and (max-width: 740px){
.topnav-right{
	float: none;
}
}

/* Psoudo selector for all link*/
a:link {
  color: green;
  text-decoration: none;
}


 a:visited{
  color: green;
  text-decoration: none;
}

 a:hover {
  color: #A0A0A0;
  border-bottom: 1px solid #A0A0A0;
}

#navigagtion-2-of-2 a:active{
  color:blue;
  text-decoration: none;}
  
/*--------------------------------------------------*/

/*This tag clear any content at the end of the div*/
.clearfix::after{
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* The following class defines the div properties as a row section */
.row{
    max-width: 1140px;
    margin: 0 auto;
}

/* The following classes which are within line 161 and 233 to define the column properties with different width*/
.span-1-of-4{
	width:23.4%;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;

}

@media only screen and (max-width: 740px) {
	.span-1-of-4{
	width:31.7%;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
}
}

.span-1-of-3{
	width:31.7%;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: gray;
}

@media only screen and (max-width: 740px) {
	
	.span-1-of-3{
	width:96%;
	float: none;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}
}
.span-1-of-2{
	width:46.4%;
	float: left;
    margin: 1% 1.5% 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}

.span-1-of-1{
	width:96.8%;
	float: left;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}

@media only screen and (max-width: 740px) {
.span-1-of-2{
	width:96%;
	float: none;
    margin: 1% 0 1% 1.2%;
	border-style: none;
	border-width: 1px;
	border-radius: 5px;
}

}
/*-------------------------------------------------------------------*/

/*Section element property*/
section{
    padding: 10px 0;
}

/*Section with bacground property*/

.section_bgc{
	background-color:#F8F8F8; 
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

/*paragraph tag property*/
p{
	padding-left:2px;
}

/*the following img tag define the Images*/
img{
	
	opacity: 0.3;
	transition: 0.5s;
}

/* The unordered list of image*/
#images ul{
	list-style: none;
	width: 100%;
}

/*The following tag define the width of image on the screen*/
#images ul li figure{
	width: 23.4%;
	overflow: hidden;
	
}

@media only screen and (max-width: 740px) {
#images ul li figure{
	width: 46.8%;
	overflow: hidden;}
}

/*----------------------------------------------------------*/

/* The following properties display the portion of the Image*/
#images ul li figure img{
	width: 100%;
	height: auto;
	opacity: 0.6;
	transform: scale(1.5);	
	transition:transform 0.5s;
}

#images ul li figure img:hover{
	opacity: 1;
	transform: scale(1.15);
}
/*-----------------------------------------------------------*/

/*Form input element properties*/
input[type=text], select{
	width:75%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	height:30px;
}

/*Form text input element properties*/
textarea{
	
	width:75%;
	height:60px;
}

/*Resposive design at the screen lower than 740px*/
@media only screen and (max-width: 740px){
	
	input{width:98%;}
	textarea{width:98%}
	}

/*Footer Section element properties*/
#copyright{
	border-top:0px solid gray;}

.footer_para{
	font-size:8pt; 
	padding-left:20px;
}

/*-----------------------------------------------------------*/