@charset "utf-8";
/* CSS Document */

.ad { margin-bottom: 20px;
	  padding-bottom: 20px; 	
	  border-bottom: 1px dotted #000000;
	  width: 300px; }

.nnpa { width: 728px;
		margin: 0px auto !important;
		text-align: center !important;
		margin-top: 10px !important;
		margin-bottom: 10px!important;}


header { padding-left: 0px;
	     padding-top: 0px !important;
	     padding-bottom: 20px;
	     margin-top: 10px !important;
		 display: block;
		 border-bottom: 1px solid #000000; }

button { margin-top: -40px !important;
		 margin-left: 1000px !important;
         white-space: nowrap;
		 width: 160px; }

/* Starts New Style*/

.body { width: 1200px !important; margin: 0 auto !important; padding-bottom: 800px !important; padding-left: 50px; }

.top {width: 800px; margin-top: 50px; clear: both !important; }

.left_border {border-right: 1px solid #A29A9A; margin-top: 50px;}

.left {width: 850px !important; margin-right: -25px !important; float: left; clear: right; }

.big_article {width: 550px; height: 300px !important; margin-right: 2px !important;  float: left; }

.caro {max-height: 300px !important;}

.top_bottom {width: 248px; float: left;  margin-bottom: 25px !important;}

.small_article_top {width: 248px !important;  float: left; padding-bottom: 2px;  }

.small_article_bottom {width: 248px !important; float: left; }

.right {width: 350px; margin: 0px auto !important; margin-left: 30px !important; margin-right: 0px !important; float: left; clear: right !important; margin-top: 50px !important;}

.middle_three { width: 800px; margin-bottom: 15px !important; clear: both !important; }

.little_border {width: 25px; border-top: 10px solid #000000; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 14px; margin-bottom: 15px; }

.middle_left, .middle_middle, .middle_right {float: left; width: 266px; clear: right !important; }

.middle_middle {margin-right: 1px !important; }

.middle_two {padding-top: 15px !important; width: 800px; margin-bottom: 15px !important; clear: both !important; }

.middle_two_left, .middle_two_right {float: left; width: 398px; clear: right !important; }
.middle_two_left {margin-right: 2px !important;}

.bullets {padding-top: 15px !important; margin-bottom: 10px;}
.bullets_li { padding-top: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
			  font-size: 18px; }
.bullets_li_first { margin-top: -10px !important; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 18px; }

/* Ends New Style*/

/* Image Text Begins*/

    .image 
    { 
    position: relative; /* To help the image + text element to get along with the rest of the page*/ 
    width: 100%; /* for IE 6 */ 
    } 

    h2 
    { 
    position: absolute; /* To place the text on the image*/
    top: 200px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 525px; 
		
    }
    /* Coloring time */
    
	h2 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 18px/25px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }

/* Ends Image Text*/

/*Image_sm begins*/
.image_sm 
    { 
    position: relative; /* To help the image + text element to get along with the rest of the page*/ 
    width: 100%; /* for IE 6 */ 
    } 

    h6 
    { 
    position: absolute; /* To place the text on the image*/
    top: 75px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 248px; 
		
    }
    /* Coloring time */
    
	h6 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 10px/14px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }


/*Image_sm Ends*/

.image_three
    { 
    position: relative; /* To help the image + text element to get along with the rest of the page*/ 
    width: 100%; /* for IE 6 */ 
    } 

    h4 
    { 
    position: absolute; /* To place the text on the image*/
    top: 144px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 264px; 
		
    }

	 .middle_three_up { position: absolute; top: -14px !important; left: 0px; width: 264px; }
    /* Coloring time */
    
	h4 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 10px/14px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }

h4 > .h4_div_up { /*For Longer Titles*/
    position: absolute; /* To place the text on the image*/
    top: -14px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 264px; 
		
    }

/*Ends image_three*/

.image_middle_two
    { 
    position: relative; /* To help the image + text element to get along with the rest of the page*/ 
    width: 100%; /* for IE 6 */ 
    } 

    h3 
    { 
    position: absolute; /* To place the text on the image*/
    top: 174px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 398px; 
		
    }

    /* Coloring time */
    
	h3 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 14px/18px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }

.width_body { width: 1200px;
			  margin: 0 auto;}

.mainone {width: 830px;
			margin-right: 15px !important;
			float: left;
			padding-right: 15px;
			}

.maintwo {width: 260px;
			margin: 0px auto !important;
			margin-left: 0px !important;
			margin-right: 0px !important;
			padding-left: 12px;
		    float: left; }

.top_article_photo_lft {width: 200px; 
						float: left;
						margin-right: 10px; }

.top_article_photo_lft > figcaption { float: left; 
									  width: 200px; }

.bullets {padding-top: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
			font-size: 18px; width: 800px;
			
			 }




.storyby {text-align: left;
		  color: #505050;	}

.subtitle { text-align: center; 
			font-size: 18px;
			color: red;
			font-weight: 500; 
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; }

.ib { font-style: italic; 
	  font-size: 12px;
	  font-weight: bold; 
	text-align: center; }

.articlephoto {float: right;
			   overflow: hidden;
				padding-left: 10px; }

figcaption {width: 700px; 
			text-align: center;}

.main { float: left; 
		width: 70%;
	    margin-bottom: 30px;
		border-right: 1px solid #A29A9A;
		overflow: hidden; }

.right { width: 25%;
		 float: left;
		 padding-left: 20px;
		 padding-top: 0px;
		 margin-bottom: 200px;	
		 clear: right !important;
		 padding-bottom: 150px !important;}

.advertise { 
	         width: 300px;
			 margin: 0px auto;
			 margin-top: 20px !important;
			 text-align: center; 
			 background-color: red; 
			 font-size: 36px; 
	padding: 150px 50px 150px 50px; 
	overflow: hidden; 
	clear: both !important;}

.advertise > a { text-decoration: none; 
			    color: #000000 !important; }

.advertise:hover { opacity: 0.7; }

.left {padding-bottom: 150px !important; }

.photo {padding-bottom: 20px;}

.advertise { width: 350px;
			 margin: 0px auto;
			 text-align: center; 
			 background-color: red; 
			 font-size: 36px; 
	padding: 150px 50px 150px 50px; 
	overflow: hidden; 
	clear: both !important;}

.advertise > a { text-decoration: none; 
			    color: #000000 !important; }

.advertise:hover { opacity: 0.7; }



.dropdown-menu { margin-left: 1000px !important;
			     white-space: nowrap; }


body { margin-left: 40px !important;
	margin-right: 40px !important;  
	padding: 0 !important; }


h1 { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; 
     font-weight: 500px; 
	 font-size: 46px;
	 color: red;
	padding-top: -5px; }

.bullets_a { border: 1px solid #333232; 
			box-shadow: 5px, 5px, 5px, #333333; 
			margin-bottom: 20px;}

.viewtitlebullets {text-align: center; 
			 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
			 font-size: 18px; 
			 font-weight: 500px;}

.subtitlebullets { text-align: center; 
			font-size: 14px;
			color: red;
			font-weight: 500; 
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; }

.storybybullets {text-align: left;
		  color: #505050;
			font-size: 12px;
			padding-left: 10px;}

.topstorytitle > a { text-decoration: none; }

.topstorytitle a:hover { color: red; }


.view1top { border-bottom: 1px solid #A29D9E;}

.sections { margin-top: 20px;
			clear: both; 
			overflow: auto; 
			border-bottom: 1px solid #A29D9E; }


/*Overflow auto to get bottom border on bottom*/

.three_articles { border-bottom: 1px solid #A29D9E; 
				  margin-top: 25px; }

.article_title { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
				 font-size: 20px;
				 padding-bottom: 15px; }

.article_photo_rgh { float: right; 
					 margin-left: 10px; 
					 width: 250px; }

.article_photo_rgh > figcaption { width: 250px; }

.article_lft , .article_rgh { margin-bottom: 20px; 
							  border-bottom: 1px dotted #A29D9E; 	}

.article_rgh_last { margin-bottom: 20px; }


.view1 { border-bottom: 1px solid #A29D9E;
		 padding-top: 20px;}

.viewtitle { text-align: center; 
			 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
			 font-size: 26px; 
			 font-weight: 500px; }

.bottom { width: 1000px; 
	      margin: 0px auto;
		  white-space: nowrap;
          padding-top: 20px;
		  border-bottom: 1px solid #CBC7C7;}

.btm { width: 32%; 
	   height: 400px;
	   float: left;
	   margin: 0px auto;	}


.btmmid { border-left: 1px solid #CBC7C7;
		  border-right: 1px solid #CBC7C7;
		  padding-left: 20px;
		  padding-right: 20px;	}


.title { color: 000000; 
		 font-family: "eb-garamond", Times, "Times New Roman", "serif";
         font-size: 28px;
		 text-align: center;
	     font-weight: bolder; }

.more { width: 500px !important; 
		margin: 0px auto !important;
	    overflow: hidden; 
		     }

footer { clear: both !important;
	     border-top: 2px solid #4B4949;
		 padding-top: 50px;
		 margin: 0px auto;
		 padding-bottom: 500px;
	     width: 1200px; }

#copyright { text-align: center; 
			 font-size: 24px;
			 width: 1250px; }

#copyright a{ text-decoration: none;
			  color: #000000;	}

#copyright a:hover { color: #EF1115; }

.footerinfo { width: 33%; 
			  float: left;
			  margin: 0px auto;
			  text-align: center;
			  padding-top: 20px;	}

.contactus { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
			 font-size: 18px !important; 
			 padding-bottom: 20px !important; 
			 padding-top: 20px !important; }

#social { font-weight: 300 !important; 
		  font-size: 20px !important;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px !important;	}

#advertise { font-weight: 300 !important; 
		  font-size: 20px !important;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px !important;	}

#contact { font-weight: 300 !important; 
		  font-size: 20px !important;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px !important;}

/* make font of social media icons larger*/
#bigger {font-size: 25px !important; }

#bigger2 {font-size: 25px !important; }

#bigger3 {font-size: 25px !important; }

.fa-facebook {
    background: #3B5998;
	color: white;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
    white-space: nowrap; }

.fa-twitter {
    background: #55ACEE;
    color: white;
	padding: 10px;
}

.fa-instagram { 
    background: #F00F13;
	color: #000000;
    padding: 10px;}


.fa .fabars {
    padding: 20px;
	margin-left: 10px;
    font-size: 30px;	
    width: 80px;
    text-align: center;
    text-decoration: none;	
}

.fa:hover {
	opacity: 0.7; }


.main_left { width: 48%;
			 padding-top: 10px;
			 float: left !important;
			 margin-left: 30px;
	
}

.main_right { width: 48%;
			  float: right; 
			  padding-top: 10px;
	          clear: right; 

}

.section { width: 365px !important;
		   height: 120px !important;
	       background: #E3DCDC;
	       border-bottom: #676565;
	       border-bottom-width: thick;
		   padding-top: 10px;
		   padding-bottom: 20px;
		   padding-left: 10px;	
		   margin-bottom: 25px;	
	
}

.sec_title { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
			 font-size: 13px;}


.left_mid_three, .middle_mid_three {  
														width: 225px;
														display: inline-table;
														padding-top: 20px;
														margin-right: 65px;
														margin-top: 15px !important;
														clear: both !important; }

.left_mid_three { float: left; }


.middle_mid_three { clear: right; }

.right_mid_three { 
					width: 225px;
					display: inline-table;
					padding-top: 20px;
					margin-top: 15px;
					clear: both !important; }


.mid_three { display: table;
			  }

.mid_three:after { content: "";
				  width: 100%;
			display: block;
			margin: 0px auto; 
			float: left; 
			clear: right !important;
	        border-bottom: 1px solid #B3AFAF;
			padding-top: 15px;}


.mid_three:after {
    content: "";
    display: table;
    clear: both !important; }



.mid_three_title { padding-top: 10px;
				   padding-right: 15px;
				   padding-left: 15px; 
				   text-align: left; }

.by_author { width: 250px;
		
		 display: inline-block;
		 background-color: #D5CCCC; 
		 padding-top: 20px;
		 padding-bottom: 20px;
			height: 400px;
				overflow-y: scroll;
			margin-top: 40px;
            margin-right: 25px}

.by_author_last { width: 250px;
		
		 display: inline-block;
		 background-color: #D5CCCC; 
		 padding-top: 20px;
		 padding-bottom: 20px;
			height: 400px;
				overflow-y: scroll;
			margin-top: 40px;
            }

.author_title { font-size: 15px;
				text-align: center;
				color: #000000;
				font-weight: bold;}

.authors_photo { text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;}

.author_story, .author_story_last { font-size: 15px;
			font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
			padding-top: 5px;
			text-align: left;
			padding-left: 20px;	 }

.author_story_last {padding-bottom: 15px; }

.author_story:after { content: "";
				  display: inline-block; 
				    width: 95%;
				    margin: 0px auto;
					border-bottom: 3px solid #FFFFFF;	
				  }

.authors_header {margin-top: 10px; 
		   font-weight: bold; }

.authors {display: inline-block; }





/* Mobile */
@media only screen and (max-width: 426px){
	
	.desktop {display: none !important; }
	
	.mobile { display: block;
				margin: 0 auto;}
	
	.nnpa {max-width: 100% !important; margin: 0px auto !important; }
	
	main, body {width: 100%; overflow-x: hidden; padding: 0px; margin: 0px auto !important; }
	

	
	body { margin-left: 1px;
			margin-right: 1px;
			padding-left: 0px !important; }
	
	header { width: 100%; }
	
	figure, img { max-width: 100% !important; height: auto; }
	
	.body {width: 100% !important; padding-left: 5px !important; padding-right: 5px !important; padding: 25px !important; }
	.big_article {max-width: 100% !important; max-height: auto !important; margin-right: 2px !important;  float: none; display: block !important; margin-bottom: 10px !important; }
	.top {width: 100% !important; margin-top: -50px !important; clear: both !important; }
	.top_bottom {margin: 0px auto !important; max-width: 100% !important; height: auto; display: block !important; float: none !important;  margin-bottom: 25px !important; margin-top: -90px !important; text-align: center !important;}
	.image_sm {margin: 0px auto !important; max-width: 100% !important; height: auto !important; }
	.small_article_top {margin: 0px auto !important; max-width: 100% !important; height: auto !important;  float: none !important; padding-bottom: 2px;  }
  	.small_article_bottom {margin: 0px auto !important; width: 100% !important; height: auto !important;  float: none !important; }
	.caro {max-height: auto !important;}
	
	
	

	
	
	h2 { 
    position: absolute; /* To place the text on the image*/
    top: 95px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    max-width: 100% !important; height: auto !important; }
	
	h2 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 14px/16px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }
	
	.carousel-indicators {top: 155px !important; }
	
	
	
	
	.middle_three {max-width: 100% !important; height: auto !important; margin: 0px auto !important; text-align: center !important; margin-bottom: 15px !important; clear: both !important; }
	.middle_left, .middle_middle, .middle_right {display: block !important; max-width: 100% !important; height: auto !important; clear: right !important; margin: 0px auto !important; text-align: center !important; float: none !important; }
	.middle_left, .middle_middle, .middle_right {text-align: center; margin-bottom: 15px !important; }
	
	.middle_two {padding-top: 15px !important; width: 100% !important; margin-bottom: 15px !important; clear: both !important; }

	.middle_two_left, .middle_two_right {display: block; width: 100% !important; clear: right !important; }
	.middle_two_left {margin-right: 2px !important; margin-bottom: 15px !important;}
	
	.right {width: 100% !important; margin: 0px auto !important; text-align: center !important; margin-left: 5px !important; margin-right: 5px !important; float: none !important; clear: right !important; margin-top: 50px !important; padding-bottom: 5px !important; }
	
	h3 
    { 
    position: absolute; /* To place the text on the image*/
    top: 127px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 100% !important; 
		
    }

    /* Coloring time */
    
	h3 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 14px/18px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 
    }
	
	.image_three
    { 
    position: relative; /* To help the image + text element to get along with the rest of the page*/ 
    /*max-width: 100% !important;*/ /* for IE 6 */ 
	height: auto !important;
	margin: 0px auto !important; text-align: center !important;	
    } 
	
	.middle_three_up { position: absolute; top: -14px !important; left: 0px; width: 100% !important; }

    h4 
    { 
    /*position: absolute; /* To place the text on the image*/
    top: 144px; /* The exact location of the text from the top of the image*/
   	left: 1px; /* Other beautification stuff */
	widows: 100% !important; 	
	
		}
	
	h4 div /* decorating the text within the span tag */
    { 
    color: white; 
    font: bold 10px/14px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); padding: 10px; 	
    }

h4 > .h4_div_up { /*For Longer Titles*/
    position: absolute; /* To place the text on the image*/
    top: -14px; /* The exact location of the text from the top of the image*/
    left: 0; /* Other beautification stuff */
    width: 100% !important; 
		
    }
	
	
	.tcnlogo { padding-left: 0px;
				width: 80%;  }
	
	.logo {width: 80%; 
			 display: inline-block;}
	
	.btn-group {display: block; 
				width: 10%;
				float: right;
				margin-top: -10px !important;
				position: relative !important;  }
	
	.btn { display: block; }
	

.dropdown-menu { white-space: nowrap;
				 width: 100px !important;
				 margin-top: -10px !important;
				 font-size: 12px;
				 display: block;
	position: absolute !important; }
	
	
	
	.main { width: 100% !important;
			border-right: none;
			text-align: justify !important;
			float: none !important;
						margin-bottom: 10px !important; }
	
	.width_body { width: 100%; 
					display: block; }
	
	.mainone {width: 100%;
			  display: block;
			  margin: 0px auto;
			  float: none !important;
		       margin-left: 5px; 
				margin-right: 5px; }
	
	.maintwo {width: 100%;
				display: block;
			 border-top: 1px solid #000000;
			 border-bottom: 1px solid #000000;
			 padding: 5px 5px 5px 5px !important; }
	
	.right { width: 100%;
			 padding-left: 0px;
			 clear: right;
			 margin: 0px auto !important;
			 margin-bottom: 15px;
			 padding-bottom: 0px !important; }
	
	.left_border {border-right: none; margin-top: none;}
	
	.left {padding-bottom: 20px !important; width: 100% !important; }
	
	.bullets {width: 100% !important; }
	
	h1 {font-size: 20px;
		width: 100% !important;
		margin: 0px auto;
		text-align: left;
		padding-left: 5px;	
		float: none !important;}
	
	p { width: 100% !important;	
		text-align: justify;	
		margin: 0px auto !important; }
	
	.viewtitle {font-size: 20px; }
	
	.subtitle {font-size: 16px; }
	
	.advertise {width: 100%; }
	
	figcaption {font-size: 10px; }
	
	.articlephotolg { width: 100% !important;
					  margin: 0px auto;
						text-align: center;}
	
	footer { width: 100%; }
	
	.almaphoto, figure { width: 100% !important; 
			     float: none !important;
				 padding-left: 0px !important;
				 padding-bottom: 0px !important;}
	
	#copyright { text-align: center; 
			     font-size: 16px;
				 width: 100%; }
	
	#social { font-weight: 300; 
		  font-size: 14px;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px;	}

#advertise { font-weight: 300; 
		  font-size: 14px;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px;	}

#contact { font-weight: 300; 
		  font-size: 14px;
		  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
		  letter-spacing: 1px;}
	
.contactus { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
			 font-size: 10px; 
			 padding-bottom: 20px; 
			 padding-top: 20px; }	
	

.fa:hover {
	opacity: 0.7; }	

	
	
	.middlemobile { width: 350px;
					float: left; }
	
	.dropdown-menu { width: 100px; }
	
	
	.btn { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
			 font-size: 20px;
			 text-align: center; }
	
	 /* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 999; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 24px;
  width: 50px !important;		
  cursor: pointer;
  padding: 15px 15px;
  color: black;
  border: none;	
}

.openbtn:hover {
  background-color: #444; padding-bottom: 12px !important;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 0px;
}

}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
	}



@media only screen and (min-width: 427px ){
	
	     .mobile {display: none !important; }
}