/*  COMON  */
*{
	box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
	background-color: #dbdbdb;
	font-family: 'Oxygen', sans-serif;
}
#social{
	background-color: black;
	color: white;
	height: 55px;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 18px;
	text-align: right;
	padding: 15px;
}
#Rumi{
	font-size: 15px;
	float:right;
	padding-right:25px;
}
a{
	text-decoration:none;
	color:white;
}
font{
	float: left;
	letter-spacing: 2px;
	}
#logo_text{
	text-decoration:none;
	color:white;
}
span{
	font-size: 12px;
	letter-spacing: 1px;
}
#social>i{
	margin-right: 15px;	
}
#social>i:hover{
	opacity: 0.8;
}
#container{
	width: 80%;
	margin: auto;
	height: auto;
	}
header{
	width: 100%;
    height: 250px;	
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	position: relative;
	color: white;
	font-family: 'Teko', sans-serif;
	font-size: 35px;
	background-color: black;
	margin-bottom: 5px;
	}

#headerImage{
	width: 100%;
	height: 250px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	float: left;
	opacity: 0.8;
}
#centered{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align:center;
}
section{
	width: 100%;
	height: auto;
	background-color: #f1f1f1;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	margin-top: 15px;
	overflow: auto;
}
nav{
	width: 15%;
	float: left;
	margin-top: 10px;
	height: auto;
}
ul{
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
}
ul li ul li{
	display: none;
	margin-left: 18px;
}
ul li:hover ul li{
	display: block;
}
nav li{
	list-style-type: none;
}

nav li a{
	height: 50px;
	line-height: 50px;
	text-decoration: none;
	color: black;
	border-bottom: 1px solid #b4b4b4;
	padding-left: 20px;
	display: block;
}
nav li a:hover{
	color: white;
	background-color: #adadad;
}
i{
	margin-right:10px;
}
main{
	float: left;
	height: auto;
	width: 85%;
	padding: 10px;
	text-align: justify;
	
}
footer{
	width:100%;
	height: 75px;
	background-color: black;
	color:white;
	line-height: 75px;
	text-align: center;
}

#home_index{
	width:100%;
height:100%;	
}
#home_index img{
	width:100%;
	height:100%;
}

/*    TRAVEL ---     */


.content{
	width: 97%;
	height: auto;
	display: inline-block;
	margin: 1.5%;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	padding: 5px;
	position:relative;
}
.rsm{
	width: 100%;
	border-top-left-radius:10px;
	border-top-right-radius:10px;	
	transition: opacity 0.8s;
}
.rsm:hover{
	opacity:0.8;
}
h5{
	margin: 10px;
	color: dimgrey;
}
.content-text{
	margin: 10px;
	color: dimgrey;
}


.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
  
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
	margin:10px;
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}


.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
  text-align: center;
  background-color: #0071ce;	
  color: white;
}

.read-more-trigger:hover {
	opacity: 0.8;
		color: white;
}
.read-more-wrap{
	padding: 1%;
}



	/* WORK  */
	
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
	background-color: #009879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
.row_title{
	background-color: #009879;
}
#resume_paragraph{
	padding-right:2%;
	
}
#ms_logo{
	width: 20%;
	height: auto;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	float: left;
	opacity: 0.8;
}
.work_content{
	padding: 5%;;
}

.work_content h4{
	
}

/* LEARNING  */
#learning_Content{
	width: 97%;
	height: 24vw;
	border-radius: 5px;
	margin: 1.5%;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	padding: 5px;
		background-color:#b9d5df;
		
}
#learning_head{
	padding-top:2%;
	padding-left:3%;
	display:inline-block;
	
}
#learning_paragraph{
	padding:5%;
	display:inline-block;
	font-size: 1vw;
}
	.learning_text{
	display:inline-block;
	float:left;
	width: 60%;
	height:22vw;
	
	
	}
	.learning_img{
		display:inline-block;
	margin-left:1%;
	float:left;
	width: 39%;
	height:22vw;	
	
	display: flex;
     justify-content: center;
     align-items: center;
	
	}
	
	.learning_img img{
		display:inline-block;
		
	}
	#learning_audio{
	 
	}
	
	
/* READING */
	#reading_Content{
	width: 97%;
	height: 25vw;
	border-radius: 5px;
	margin: 1.5%;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	padding: 5px;
	background-color:#b9d5df;
		
		
}
	.reading_text{
		display:inline-block;
	float:left;
	width: 74%;
	height:22vw;
	
	}
	.reading_img{
		margin-top:1.5%;
	display:inline-block;
	float:left;
	width: 25%;
	height:22vw;	
	
	}
	
	#reading_image{
		width:100%;
		height:100%;
	}
	
	
/*  WATCHING  */

#watching_Content{
	width: 97%;
	height: 23vw;
	border-radius: 5px;
	margin: 1.5%;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	padding: 5px;
	background-color:#BFBFBF;
		
		
}

.watching_text{
	float:left;
	width: 40%;
	height:100%;
	
	
	
}
.watching_video{
	margin-left:1%;
	float:left;
	width: 59%;
	height:22vw;	
}
#movie_list{
	margin-left:7%;
	margin-top:3%;
	margin-right:3%;
	list-style:none;
	font-size: 1vw;
	
}
#movie_list_item{
	decoration:none;
	font-size: 1vw;
}
#movie_text{
	font-size: 1vw;
}

/* CONTACT */


form { display: flex; 
         flex-flow: column nowrap; }    
  input, textarea { margin-bottom: .5em; }
  form {
    display: block;
    margin-top: 0em;
}
label {
    float: left;
    display: block;
    text-align: left;
    width: 120px;
    padding-right: 10px;
}
input {
    display: block;
    margin-bottom: 20px;
}
#mySubmit{
	
	margin-top:5%;
	margin-left:14%;
	width:9em;
	grid-column:2;
	background-color: #0071ce;
}
#mySubmit:hover{
	opacity:0.8;
}








@media (max-width: 600px) {
	.content{
		width: 100%;
		
	}
	header{		
		display:none;
	}
	#menu_text{
		display:none;
	}
	nav li a{
	font-size:-99999px;
	overflow:hidden;
	
	}
			
	}
	@media (max-width: 900px) {
		#menu_text{
		display:none;
	}
	}
	
	
	
@media (max-width: 1024px) {
	.content{
		width: 100%;
		
	}
	#menu_alt_text{
		display:none;
	}
	nav li a{
	font-size:14px;
	overflow:hidden;
	}	
	
#watching_Content{
	width: 97%;
	height: 58vw;;
	border-radius: 5px;
	margin: 1.5%;
	box-shadow: 0 2px 8px rgba(20, 23, 28, .15);
	padding: 5px;
	
	
		
}

.watching_text{
	display: inline-block;
	float:left;
	width: 100%;
	height:22vw;
	
	
	
}
.watching_video{
	display:inline-block;
	float:left;
	width: 100%;
	height:35vw;	
	margin-left:0;
}
	#movie_list{
	margin-left:3%;
	margin-top:3%;
	margin-right:3%;
	list-style:none;
	font-size: 1vw;
	
}
}