/** RESET */
*{margin:0;padding:0;box-sizing:border-box;}


html {
  background: #383529;
  margin-top: 30px;
}

body{
  background: #f0eee6;
  border-radius: 8px;
  width:82%;
  margin:auto;
}

header{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding:30px;
}

.logo{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.logo img {
  width: 60px;
  margin-right:10px;
}

.logo p{
  font-family: "Raleway", sans-serif;
  font-size:30px;
  font-weight: 400;
  color: #383529;
}

hr{
	width:80%;
	margin:auto;
	border-top:1px solid #db8e36;
}

/* NAV */
nav {
}

nav a{
  font-family: "Raleway", sans-serif;
  font-size:18px;
  font-weight: 400;
  color: #646a60;
  text-decoration:none;
  margin-left:16px;
}

nav a:hover {
  color: #db8e36;
}

nav a.current {
  color: #db8e36;
}

/* CONTENT */
.content{
	padding:40px;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
}

.textbox{
	width:34%;
	margin-right:40px;
}

.textbox h4 {
  font-family: "Raleway", sans-serif;
  color: #383529;
  font-size: 24px;
  font-weight: 400;
}

.textbox p {
  font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
}

.imagebox{
	width:64%;
}

.imagebox img{
	width:100%;
	border: 1px solid #646a60;
}

/*BUTTON */
.button {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  color: #f0eee6;
  font-size: 16px;
  font-weight: 400;
  background: #db8e36;
  /*width:116px;
  height:40px;*/
  padding:10px 16px;
  margin-top:18px;
  border-radius:12px;
  text-decoration:none;
}

.button:hover {
  color: #000;
  background: #f5eecf;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

/* ABOUT */

/* BACK TO MYLIST ARROW */
.backto{ 
	padding:20px 0 20px 100px;
}

.backto a{
	text-decoration:none;
	color:#555;
	font-family: "Raleway", sans-serif;
  	font-size:16px;
  	font-weight: 400;
}

/* HOW TO */
.howto{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:auto;
}

.howto h1{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
}

.howto p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:4%;
  	color:#777;
}

/* TAP */
.tap{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-hand-pointer-o{
	color:#db8e36;
	font-size:22px !important;
	-webkit-text-stroke: .5px #db8e36;
	margin:0 7px 0 0;
}

.tap h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.tap p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* DRAG */
.drag{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-ellipsis-v{
	color:#db8e36;
	font-size:22px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 4px 0 0;
}

/* 2 ICONS TOGETHER */
.second{
	color:#db8e36;
	font-size:22px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 8px 0 0;
}

.drag h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.drag p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* EDIT */
.edit{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-pencil{
	color:#db8e36;
	font-size:22px !important;
	-webkit-text-stroke: .5px #db8e36;
	margin:0 7px 0 0;
}

.edit h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.edit p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* ADD */
.add{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-plus{
	color:#db8e36;
	font-size:24px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 7px 0 0;
}

.add h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.add p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* LISTS */
.lists{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-list-ul{
	color:#db8e36;
	font-size:22px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 7px 0 0;
}

.lists h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.lists p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* FONTS */
.fonts{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-font{
	color:#db8e36;
	font-size:22px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 7px 0 0;
}

.fonts h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.fonts p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* WORKS */
.works{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-mobile{
	color:#db8e36;
	font-size:26px !important;
	-webkit-text-stroke: .5px #db8e36;
	margin:0 9px 0 0;
}

.works h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.works p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* DATA */
.data{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
}

.fa-table{
	color:#db8e36;
	font-size:22px !important;
	/*-webkit-text-stroke: .5px #db8e36;*/
	margin:0 9px 0 0;
}

.data h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	margin-left:4%;
  	color:#111;
}

.data p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	margin-left:10%;
  	color:#777;
}

/* FEEDBACK */
.feedback{
	background:#f5eecf;
	width:60%;
	padding:20px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	/*[inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];*/
	margin:30px auto;
	display:flex;
	flex-direction: column;
	justify-content: center; 
  	align-items: center;
  }    

.feedback h2{
	font-family: "Raleway", sans-serif;
  	font-weight: 400;
  	text-align:center;
  	color:#db8e36;
}

.feedback p{
	font-family: "Open Sans", sans-serif;
	font-size:18px;
  	font-weight: 400;
  	text-align:center;
  	color:#777;
}

.feedback a{
	font-family: "Open Sans", sans-serif;
	font-size:14px;
  	font-weight: 400;
  	text-align:center !important;
  	text-decoration:none;
  	color:#777;
  	margin:0 auto;
}

/* FOOTER */
footer{
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	padding:20px;
}

.footertext {
  font-size: 14px;
  color: #646a60;
  font-family: "Raleway", sans-serif;
  padding-left: 20px;
  padding-top: 10px;
}

.social {
}

.kevicon {
  float: right;
  padding: 2px 0px 0 0;
  color: #646a60;
  font-size: 16px !important;
}

.kevicon2 {
  padding: 2px 12px 0 0;
  color: #646a60;
  font-size: 16px !important;
}

.kevicon:hover, .kevicon2:hover {
  color: #db8e36;
}

.bottomnav{
	display:none;
}

/* MEDIA QUERY */
@media all and (max-width:620px) {
	header{
		justify-content:center;
		flex-wrap:wrap;
	}

	nav{
		display:none;
	}

	/* CONTENT */
	.content{
		padding:40px;
		display:flex;
		flex-direction: column;
		/*justify-content: space-around;*/
	}

	.textbox, .imagebox{
		width:100%;
	}

	.imagebox{
		order: -1;
		margin-bottom:20px;
	}

	/* ABOUT */
	.howto, .tap, .drag, .edit, .add, .lists, .fonts, .works, .data, .feedback{
		width:96%;
		margin:20px auto;
	}

	/* FOOTER */
	footer{
	display:flex;
	flex-direction: column;
	}


	/* BOTTOMNAV */
	.bottomnav{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		text-align:center;
		margin-top:18px;
	}

	.bottomnav a, .bottomnav a:visited{
		width:33%;
		line-height:40px;
		color:#fff;
		text-decoration:none;
		background:#db8e36;
	    font-family: "Raleway", sans-serif;
  	    font-weight: 400;
	}

	.bottomnav a.current {
  	background: #f5eecf;
  	color:#555;
  	border-top:1px solid #db8e36;
	} 


}