/* WORK SURVIVAL GUIDE | BODYLANG . CSS */

/* GOOGLE FONT CLASSES
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.whisper-regular {
  font-family: "Whisper", cursive;
  font-weight: 400;
  font-style: normal;
}*/

*{margin:0;padding:0;}
body{
	background-image:url("images/bodylang.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	color: #e9e9e9;}
#body{background-color:rgba(0,0,0,0.65);margin:0;padding-top:10px;text-align:center;}
#home{text-decoration:none;font-family:"Bebas Neue",sans-serif;color:#e9e9e9;opacity:0.7;transition:500ms;}
#home-icon{width:3%;}
#home:hover{opacity:1;}
#page-title{padding-top:25px;font-family:"Bebas Neue",sans-serif;font-weight:400;font-style:normal;font-size:6em;}
#title-icon{width:10%;}
.hook{padding:10px 15% 15px 15%;font-family:"Silkscreen",sans-serif;font-weight:400;font-style:normal;font-size:1.6em;}
a{text-decoration:none;color:#e9e9e9;}
.trib-link{text-decoration:underline;}
#mag{border:2px solid #e9e9e9;margin:20px 20% 0 20%;padding:20px;}
article{padding-bottom:30px;}
.article-header{font-family:"Bebas Neue",sans-serif;font-weight:400;font-style:normal;font-size:2.2em;}
.subhead{font-size:1.2em;padding:15px;}
.art-icon{opacity:.7;transition:500ms;}
.art-icon:hover{opacity:1;}
p{font-family:"Roboto",sans-serif;}
#p-cntr{text-align:center;}
.para{text-align:left;text-indent:30px;}
.list-title{padding-top:15px;font-family:"Bebas Neue",sans-serif;font-weight:400;font-style:normal;font-size:1em;}
ul{padding:5px 0 10px 0;list-style-type:none;font-family:"Roboto",sans-serif;font-size:1em;}
li{width:80%;margin:auto;}
footer{/*background-color:rgba(0,0,0,0.65);*/margin:0;padding:30px 0 30px 0;font-size:1em;}
audio{padding-top:20px;}

/* TOGGLING: PICTURE <> ARTICLE */
	#pic0{display:block;margin:auto;width:80%;height:450px;background-image:url("images/fbi.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;}
	#pic1{display:block;margin:auto;width:80%;height:450px;background-image:url("images/mirror.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;}
	#pic2{display:block;margin:auto;width:80%;height:450px;background-image:url("images/balance.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;}
	.cover-pic:hover{cursor:pointer;}
	.pic-shade{width:100%;height:100%;background-color:black;opacity:.6;transition:500ms;}
	.pic-shade:hover{opacity:.4;}
	.cover-icon{padding-top:15px;}
	#art0{display:none;}
	#art1{display:none;}
	#art2{display:none;}
	.article{margin:auto;padding:12px;width:80%;height:450px;overflow-y:scroll;border:1px solid #c4c4c4;background-color:rgba(0,0,0,0.6);}
	.article>p{text-align:justify;}
	#art0>.list-title{text-align:center;font-size:1.8em;}




/* RESPONSIVE PARAMETERS */
/* PORTRAIT MODE */
@media only screen and (max-width: 600px) and (orientation: portrait) {
	#home-icon{width:8%;}
	#page-title{padding-top:15px;}
	#title-icon{width:20%;}
	.hook{padding:10px 15px 10px 15px;}
	#mag{margin-left:1%;margin-right:1%;padding:6px;}
	p{font-size:1.4em;}
	#pic0{width:95%;height:450px;}
/* TOGGLING: PICTURE <> ARTICLE */
	#art0{width:95%;height:450px;overflow-y:scroll;border:1px solid #c4c4c4;padding:9px;}
	#art0>.list-title{text-align:center;font-size:1.8em;}
	ul{text-align:center;font-size:1.4em;}
	#pic1{width:95%;height:450px;}
	#art1{width:95%;height:450px;overflow-y:scroll;border:1px solid #c4c4c4;padding:9px;}
	#pic2{width:95%;height:450px;}
	#art2{width:95%;height:450px;overflow-y:scroll;border:1px solid #c4c4c4;padding:9px;}
	footer{padding:30px 20px 30px 20px;}
}
@media only screen and (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
}