@import url('https://fonts.googleapis.com/css?family=Lobster+Two|Macondo');
@import url('https://fonts.googleapis.com/css?family=Passion+One');
@import url('https://fonts.googleapis.com/css?family=Bevan');
@import url('https://fonts.googleapis.com/css?family=Chewy');
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=ABeeZee');
@import url('https://fonts.googleapis.com/css?family=Bungee');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');
@import url('https://fonts.googleapis.com/css?family=Rammetto+One');
@import url('https://fonts.googleapis.com/css?family=Lilita+One');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/**********************************************GLOBAL*******************************************************/

*{
	padding:0;
	margin:0;
	border:0;
}

html{
	width:100%;
	height:100%;
}

body{
	position:relative;
	width:100%;
	height:100%;
	font-family: 'Comfortaa' , cursive;
	position:relative;
	
}

ul li{
	list-style:none;
}

a,
a:hover,
a:focus,
a:active,
a:visited{
	text-decoration:none;
}

/***********BACKGROUND************/
#bg{
	position:fixed;
	height:100vH;
	width:100%;
	background:linear-gradient(rgba(65,65,65,0.5),rgba(65,65,65,0.5)), url('../images/bg.jpg') no-repeat;
	background-size:cover;
	z-index:-1;
}


/*************CARD************/

#card{
	width:400px;
	margin:20px auto 10px auto;
	display:block;
	min-height:600px;
	background:#FFF;
	border:2px ridge #FFF;
	border-radius:10px;
}

#card img#photo{
	width:130px;
	height:150px;
	margin:20px auto 15px auto;
	display:block;
	border-radius:50%;
	border:5px ridge #F7F7F7;
}

#card h3{
	margin-top:2px;
	margin-bottom:2px;
}

#card .name{
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;	
	
}

#card .designation{
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;	
	font-size:0.9em;
	margin-top:7px;
}

#card  #social{
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

#card  #social li{
	display:inline-block;	
	margin-left:2px;
	margin-right:2px;
}

#card  #social li a .fa{
	font-size:1.1em;
	color:#FFF;
	border-radius:50%;
	width:25px;
	padding:5px 6px;
}

#card  #social li a .facebook{ background:#3b5999;}
#card  #social li a .google{ background:#dd4b39;}
#card  #social li a .pinterest{ background:#bd081c;}
#card  #social li a .twitter{ background:#55acee;}
#card  #social li a .googlemap{ background:#32Ab51 ;}

#card .info{
	margin-top:24px;
	text-align:center;font-size:0.9em;
}


#card .info h3{
	font-size:1.1em;
	font-weight:bold;
	width:29%;
	display:inline-block;
	text-align:left;
}

#card .info .fa{
	font-size:1.1em;
	color:#FFF;
	background:#CCC;
	border-radius:50%;
	padding:6px 8px;
	margin-top:4px;
	margin-right:4px;
}

/******FOOTER************/
footer{
	text-align:center;
}

footer a{
	font-weight:bold;
	color:#FFF;
	font-size:1em;
	margin-top:4px;
}


/****************RESPONSIVE***********/
@media(max-width:400px){
	#card
	{
		width:100%;	
	}
}

@media(max-width:390px){
	#card .info h3{
		width:33%;
	}
}


@media(max-width:350px){
	#card .info h3{
		width:37%;
	}
}


@media(max-width:320px){
	#card .info h3{
		width:40%;
	}
}

@media(max-width:300px){
	
	#card{
		font-size:0.9em;
	}
	
	#card .info h3{
		width:45%;
	}
}