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


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

body{
  background: #f0eee6;
  border-radius: 8px;
  width:82%;
  margin:20px 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 {
	margin-right:80px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /*background-color: #333;*/
  display: flex;
}

nav li{
	position:relative;
}

nav a{
	display: block;
  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;
}

nav ul li{
	position: relative;
	float: left;
}

/*nav ul li:hover{
	background: orange;
}

nav ul li a:hover{
	color: #fff;
}*/

/* LEVEL TWO */
nav ul ul{
	display: none;
	position: absolute;
	top: 100%;
	background: #f0eee6;
	text-align: left;
	padding: 0;
	margin: 0;
}

nav ul ul li{
	float: none;
	width: 240px;
	border-left: #646a60 2px solid;*/
}

nav ul ul a{
	line-height: 32px;
	width: 100%;
	padding: 6px 0;
	color: #646a60;
	text-indent: -3px;
}

nav ul li:hover > ul{
	display: block;
}

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

.textbox{
	width:80%;
	text-align:center;
	/*margin-right:40px;*/
}

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

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

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

/* FEATURES */
.features{
	width:100%;
	display:flex;
	flex-direction:row;
	text-align:center;
	padding:0 20px;
	margin-bottom:30px;
}

.thumb img{
	width:80%;
}

figcaption{
	text-align: center !important;
	font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 14px;
  font-weight: 400;
}

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

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

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

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

.imagebox_list{
	width:64%;
}

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

.imagebox_list p{
	text-align: right;
	font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 14px;
  font-weight: 400;
}

.features_list{
	width:100%;
	margin:10px auto;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
}

/* PRIVACY POLICY */
.textbox_privacy{
	width:80%;
	text-align:center;
	margin:40px auto;
}

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

.textbox_privacy h3{
	font-family: "Raleway", sans-serif;
  color: #383529;
  font-size: 22px;
  font-weight: 400;
  margin-bottom:20px;
}

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

.policy_text{
	text-align:left; /* LEFT LEFT LEFT */
	font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom:20px;
}

.textbox_privacy a{
	color:#22989c;
}

.textbox_privacy a:hover{
	color:#db8e36;
}

/* GET THE APP */
.content_get{
	padding:40px;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
}

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

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

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

.imagebox_get{
	width:64%;
}

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

.imagebox_get p{
	text-align: right;
	font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 14px;
  font-weight: 400;
}

/*BUTTON */ /*BUTTON */ /*BUTTON */ /*BUTTON */ /*BUTTON */ /*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:18px 0 20px 0;
  border-radius:12px;
  text-decoration:none;
  text-align: center;
}

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

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

/* 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: 20px 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;
}

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

/* 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;
}

.addimg{
	display:flex;
	justify-content: center;
}

.addimg img{
	width:50%;
}

.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;
}

/* CONTACT */
.contact_text{
	text-align:center; /* CENTER */
	font-family: "Open Sans", sans-serif;
  color: #646a60;
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom:20px;
}

/* 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, .bottomnav2{
	display:none;
}

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

	body{
		width:100%;
	}

	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;
	}

	.button {
		width:170px;
	}

	.home-button {
		width:90px;
	}

	/* LIST - MySimpleTO-DO */
	.content_list{
		display: flex;
		flex-direction: column;
	}

	.imagebox_list{
		order:-1;
		margin-bottom:30px;
	}

	.textbox_list, .imagebox_list{
		width:100%;
	}

	.features_list{
		padding:40px;
	}


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

	/* GET */
	.content_get{
		display: flex;
		flex-direction: column;
	}

	.imagebox_get{
		order:-1;
		margin-bottom:30px;
	}

	.textbox_get, .imagebox_get{
		width:100%;
	}

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


	/* BOTTOMNAV */
	.bottomnav{
		display:flex;
		flex-direction:row;
		width:100%;
		/*justify-content:space-between;*/
		text-align:center;
		margin-top:18px;
		border-bottom:2px solid #f0eee6;
	}

	.bottomnav a, .bottomnav a:visited{
		/*width:20%;*/
		flex: 1;
		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;
	} 

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

	.bottomnav2 a, .bottomnav2 a:visited{
		/*width:20%;*/
		flex: 1;
		line-height:40px;
		color:#fff;
		text-decoration:none;
		background:#db8e36;
	    font-family: "Raleway", sans-serif;
  	    font-weight: 400;
	}

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


}