/*CSS Stylesheet*/

body {margin: 0;
    overflow-x: hidden;
}

#wrapper {
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	justify-content: center;
	background: #F4F4F4;
}
section { 
flex: 0 1 390px; }

ul {
	list-style: none;
}
a{ text-decoration: none;}

#left{
	width: 320px;
}
header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
/* TITLE */
#headerrectangle {
	height: 80px;
  width: 320px;
  background-color: #C9E2DB;
    box-shadow: 2px 3px 3px grey;
}
header h1 {
	font-family:'Oswald', sans-serif;
	text-align: center;
	font-size: 2.4rem;
	color: #707070;
    transform: translateY(-13px);
	
}
/* SUBHEAD */
#subhead {
	align-self: flex-end;
	text-align: right;
	font-family: 'Open Sans', sans-serif;
	color: #707070;
transform: translateY(60px);
    font-size: 34px;
}
/* END SUBHEAD */
/* LINE 1 */
#line1 {
	height:300px;
	width: 6px;
	background-color: grey;
	margin-left: 105px;
	position: absolute;
	z-index: 1;
     box-shadow: 2px 3px 3px grey;
}
/* END LINE 1 */
main img {
 	display: flex; 
	width: 230px;
	height: 230px;

	position: absolute;
	z-index: 2;
/* 	background-color: white; */
}

#ellipse {
    width:216px;
    height:218px;
    display: flex;
    position:absolute;
    border: 4px solid #72958B;
    z-index:3;
    border-radius: 50%;
     box-shadow: 2px 3px 3px grey;
}

/* LINE 2 */
#line2 {
    display:flex;
	height:6px;
	width: 225px;
	background-color: grey;
	margin-top: 106px;
	margin-left:190px;
	position: absolute;
	z-index: 1;
     box-shadow: 2px 3px 3px grey;
}
main{

}
/* INTRODUCTION */
p {
/* 	display:flex; */
	font-family:  'Pragati Narrow', sans-serif;
	width: 320px;
	text-transform: uppercase;
	margin-top: 230px;
    transform: translateX(10px);
    color:#72958B;
    font-size: 1.2rem;
    
	
}
/* END INTRO */

/* CONTACT  */
#contact{
	text-align: right;
	font-family: 'Oswald', sans-serif;
    float: left;
    margin-left: 90px;

	}
a:link {
    color: #707070;
	
}
a:visited {
    color: #707070;
}
a:hover {
    color: #72958B;
}
/* END CONTACT */

/*LINE 3*/

#line3 {
	height:170px;
	width: 6px;
	background-color: grey;
	margin-left: 280px;
	position: absolute;
	z-index: 1;
	 box-shadow: 2px 3px 3px grey;
}

#line3b {
    display:flex;
	height:6px;
	width: 115px;
	background-color: grey;
	margin-top: 0px;
	margin-left:285px;
	position: absolute;
	z-index: 1;
     box-shadow: 2px 3px 3px grey;
}
/* EXPERIENCE RECTANGLE */
#exprect {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	justify-content: center;
	background-color: #FFFFFF;
	border: 5px solid;
	border-color: #72958B;
	margin: 25px;
	margin-top:210px;
    transform: translateY(-90px);
  box-shadow: 2px 3px 3px grey;
}
#exp{
	
	font-family:'Oswald', sans-serif;
	text-align: right;
color: #707070;
    font-size: 2rem;
    transform: translateX(45px);
}
#experience{
	
	font-family:  'Pragati Narrow', sans-serif;
	padding-top: 50px;
	text-align: left;

}
/* END EXPERIENCE */

/* SKILLS SECTION */
#skills {
	font-family:'Oswald', sans-serif;
	color: #707070;
transform: translateX(50px) translateY(60px);
/*    -webkit-transform: translateX(50px) translateY(60px);*/
}
#skillbox {
	display: flex;
	margin: 0 auto;
	justify-content: space-around;
    position:relative;
	background-color: #FFFFFF;
	border: 4px solid #72958B;
	font-family: 'Pragati Narrow', sans-serif;
/*	max-height: 240px;*/
	max-width: 400px;
    z-index: 3;
transform: translateY(30px) translateX(10px);
	padding-right: 7px;
     box-shadow: 2px 3px 3px grey;
	
}

#icons {
    display: flex;
    flex-direction: column;
transform: scaleX(1.3) scaleY(1.3) translateX(-30px) translateY(13px);

   
}

#skillbox ul li {
    height: 40px;
}
#tick {
    transform: translateX(-40px);
}
/* END SKILLS SECTION */

/* EDUCATION SECTION */

#education{
	
	font-family:'Oswald', sans-serif;
	color: #707070;

}

#skillbox img {
 	display: flex; 
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: absolute;
	z-index: 2;
}
#edtitle {
    transform:rotate(-44deg) translateX(110px) translateY(113px);
    font-size: 2rem;
    
}


#line4a {
    display:flex;
	height:20px;
	width: 6px;
	background-color: grey;
/*    margin-top: 77px;*/
/*    margin-left:29px;*/
	z-index: 1;
    transform: translateX(394px) translateY(-77px);
     box-shadow: 2px 3px 3px grey;
   
}
#line4 {
    display:flex;
	height:6px;
	width: 243px;
	background-color: grey;
/* transform:rotate(-70deg);*/
	z-index: 1;
   transform: translateX(189px) translateY(29px) rotate(-44deg);
    box-shadow: 2px 2px 3px grey;
}
#line4b {
    display:flex;
	height:25px;
	width: 6px;
	background-color: grey;
	z-index: 1; 
    transform: translateX(221px) translateY(89px);
     box-shadow: 2px 3px 3px grey;
}
#edlist {
	display: flex;
	flex-direction: column;
	width: 370px;
	height: 370px;
	border: 4px solid;
	border-radius: 50%;
	border-color: #72958B;
	font-family: 'Oswald', sans-serif; 
	text-transform: uppercase;
	line-height: 30px;
    text-align: center;
    transform: translateX(20px) translateY(89px);
    padding-right: 30px;
     box-shadow: 2px 3px 3px grey;

}

#edlist img {
    
    width: 110px;
    height: 110px;
    transform: translateX(147px) translateY(20px);
}

/* END EDUCATION SECTION */
@media (max-width: 600px) {
	
	#wrapper {
		flex-direction: column;
	}
    #line1 {
        height: 650px;
        transform: translateX(40px);
    }
    #contact{
transform: translateY(-750px) translateX(-120px);
text-align: left
    

	}
    #subhead {
	transform: translateY(210px) translateX(40px);
}
    
    main img { 
transform: translateY(220px) translateX(35px);

}
    #ellipse {
  transform: translateY(220px)translateX(35px);
}
    p {
transform: translateY(215px)translateX(34px);
        text-align: right;  
	
}
    #line2 {
    transform: translateY(130PX);
        
  }
    #line3 {
    transform: translateY(1040px)translateX(70px);
    
  }
    #line3b {
    transform: translateY(1589px)translateX(-240px)rotate(90deg)
  }
	#line4 {
    display: none;
  }
    #line4a {
    display: none;
  }
    #line4b {
    display: none;
     
        
  }
    #edtitle {
	transform:rotate(0deg) translateX(140px) translateY(5px);   
}
     #edtitle i  {
        transform: rotate(-90deg)
    }
    #skills {
transform: translateX(-235px)translateY(1150px);
transform: translateX(-235px)translateY(1150px);        
font-size: 1.5rem        
}
    #skills i  {
        transform: rotate(90deg)
    }
    #skillbox {
        transform: translateX(-1px);
            width:360px;
    }
    #edlist {
        transform: translateX(28px)translateY(-20px);
        width:320;
        height:350px
    }
  
#edlist img {
    transform: translateX(127px) translateY(20px);
}
}