@font-face {
  font-family:'socicon';
  src: url('../../beta/fonts/socicon.eot');
  src: url('../../beta/fonts/socicon.eot?#iefix') format('embedded-opentype'),
       url('../../beta/fonts/socicon.woff2') format('woff2'),
       url('../../beta/fonts/socicon.woff') format('woff'),
       url('../../beta/fonts/socicon.ttf') format('truetype'),
       url('../../beta/fonts/socicon.svg#socicon') format('svg');
  font-weight: normal;
  font-style: normal;
}





#wrapper
{
	height: 5000px;
}




#social_media
{
position:relative;
	list-style-type:none;
	z-index:5000;
	margin:0;
	width:38px;



}







#social_media .social_icon
{
	 font-family:socicon;
	 text-align:center;
	 border-bottom:1px solid white;
border-left:1px solid white;

font-size:2em; 
line-height:140%;
}



#social_media .social_icon a
{
      display:block;
	  color:white;
	  background-color: #1F3776;
	  width:100%

}




#social_media li a
{
	text-decoration:none;
}











#social_media li:first-child
{
border-top:1px solid white;

}



/* Feedback */
#social_media li:nth-child(1) :hover
{
	background-color:#4c463d;
	
}


/* Question */
#social_media li:nth-child(2) :hover
{
	background-color:#009933;
}


/*Notices */
#social_media li:nth-child(3) :hover
{
	background-color:#cc0000;
}

/*Twitter */
#social_media li:nth-child(4) :hover
{
	background-color:#00aced;
}

/*YouTube */
#social_media li:nth-child(5) :hover
{
padding:0;
margin:0;
background-color:#cd201f;
}




#click_icons a
{
    
   display:block;
   width:10px;
   height:10px;
    border-radius: 1.5em;
    background-color: rgba(31, 55, 118,0.3);
    color:white;
    font-weight:bold; 
   text-align:center;
    padding : .5em;
 line-height:10px;
    position:absolute;
    left:3px;
    top:100px;
 
}


#click_icons a:hover
{
	 background-color: rgba(31, 55, 118,1);
}


div#social_media_wrapper
{
	 position:fixed;	
   /*right:-42px;
     top:230px;
     padding:0;
     margin:0;
     width:auto;*/
   right:0;
     top:230px;
     padding:0;
     margin:0;
     width:auto;
    

}




#notification_count
{
	
position: absolute;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	
background: #cc0000;
display: inline-block;



top:118px;
left:40px;

-webkit-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);

	font-size: 11px;	
	z-index:6000;
	cursor:pointer;

font-weight: bold;

color: #ffffff;
width:20px;
height:20px;
text-align:center;
border-radius: 1.5em;	
line-height:20px;

padding:0;
margin:0;
overflow:hidden;

}




.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }   
 
.rotate:hover   
{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
} 







#notificationContainer {
	background-color: #fff;
	border: 1px solid #FEF8E5;
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
	overflow: visible;
	position: absolute;
	top: 30px;
	margin-left: -170px;
	width: 400px;
	/*z-index: -1;*/
	display: none;
}
#notificationContainer:before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	color: transparent;
	border: 10px solid black;
	border-color: transparent transparent white;
	margin-top: -20px;
	margin-left: 188px;
}
#notificationTitle {
	z-index: 1000;
	font-weight: bold;
	padding: 8px;
	font-size: 13px;
	background-color: #1f3776;
	width: 384px;
	border-bottom: 1px solid #dddddd;
	text-align:center;
}
#notificationsBody {
	padding: 33px 0px 0px 0px !important;
	min-height: 300px;
	color:black;
	text-align:left;
}
#notificationFooter {
	background-color: #1f3776;
	text-align: center;
	font-weight: bold;
	padding: 8px;
	font-size: 12px;
	border-top: 1px solid #dddddd;
}




/* Styles for Notices  */


#overlay
{
    position:fixed;
    top:0;
    left:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40); 
 
     z-index:1000;
     display:none;
}








#notice_wrapper
{
	position:absolute;
	top:0;
	left:0;
	display:none;

	z-index:11000;	
	
	
	
}




#Notice-Board
{
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:small;
position:relative;
	width:35%;
	margin:120px auto;
     padding:0;
    
border:5px solid #CFC0A7;

-webkit-box-shadow: 10px 10px 26px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 26px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 26px 0px rgba(0,0,0,0.75);


}




#Notice-Title
{
	padding:0;
	margin:0;
	width:100%;

 	text-align:left;
	background-color:#CFC0A7;
	cursor:move;
    text-align:center;
   
}





#cancel_min
{

	position:absolute;
	top:-15px;
	right:-10px;
	padding:.5em;
	width:10px;
	height:10px;
	
	text-align:center;

line-height:10px;

	
	text-decoration:none;
	 cursor:pointer;
	 border:1px solid white;
border-radius:50%;
 /*  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
   background-color:#383837; 
	color:white;	
}











#Notice-Title h3
{
display:inline;
 font-size:1.2em;
     color:#383837;  
}



#Notice-Body
{
padding:.5em;
background-color:#FEF8E5;
border:1px solid #383837;  
}






#notice_controls
{
	text-align:center;
}

#notice_controls button
{
	margin-left: .5em;
	
	border:1px solid #1F3776;
	border-radius : .5em;
	color:white;
     border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   background-color:#383837;         
      cursor:pointer;
}


.notice-message
{
	font-size:1em;
border-bottom: 1px solid gray;
padding : .2em;
}



@media screen and (max-width: 480px)/*(max-width: 480px)*/
{

#Notice-Board
{
	width:70%;
}









}

/*start of tablet min 581px/max 930px styles--------------------------------------------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 930px)/*(min-width: 581px)*/
{


#Notice-Board
{
	width:50%;
}





}
@media screen and (min-width: 931px) 
{




}