@import url("tutorials/week-8/side-nav.css");
body{margin:0;
margin-top: 2%;}

.divider{
	height: 6px;
	margin-right:auto;
	margin-left:auto;
	margin-top:-1.1%;
	display:block;
	}


#sidebar form {
	float: right;}

#social img{
	float:right;
	margin-top:-1%;
}
.article-divider{
	width:94%;
	height: 4px;
    margin-top: 2%;
    margin-bottom: 2.5%;
    margin-right: auto;
    margin-left: auto;
    float: left;

}
.header-right{
	float: right;
	display: inline-block;
	padding-right: 15px;

}

#header-left{
	display:inline-block;
	padding-left: 15px;

}

.clearfix{
	clear:both;
}

.article1 {
	width: 100%;
    height: auto;
    display: inline-block;
	padding-left: 45px;  
}

.article2 {
    width: 100%;
    height: auto; 
	padding-left: 45px;
}

.article-right {
    display: inline-block;
    float: right;
	width: 50%;}
	
.articlefeed{padding-top: 2%; display: inline-block;}

.article img{
	display: inline-block;
	float: left;
}

.article-right {
    display: inline-block;
    float: right;
}



.topnav{
	word-spacing: 40px;
    margin-top: 22.5%;
}

.topnav a{
	display: inline-block;
	text-decoration: none;
	font-family: Josefin Sans;
	font-weight: 400;
	font-size: 1.4em;
   	color: #654A4F;
}

.topnav a:hover{
	text-decoration:underline;}

.value-prop{
	font-family: Abril Fatface, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 1.2em;
	padding: 1px;
	width: 35%;
	text-align: center;
}

#value{
	height: 570px;
	background-image: url("images/images/banner-image.jpg");
	background-repeat:no-repeat;
	background-position-x:center;
	background-size: cover;
	margin-top: 1%;

}

.value-prop h1{
	margin-top: 45px;
    background-color: #e6ddde;
    padding: 30px 0px 30px;
	    font-size: 35px;

}

.article-ad img{
	width: 100%;
	height:auto;
}

.articlefeed h5{line-height: 10px;}

.article-right p {line-height:20px; width:90%; }

.article-feed h3{font-size: 13px; line-height: 0px;}

.article-feed h4{font-size: 20px; line-height: 0px;}

.article-feed button{font-size: 12px; padding: 7px 10px; border: 2px solid #654A4F; border-radius: 0;}

#footer h5{
	font-family: Josefin Sans;
	font-weight: 400;
	font-style: italic;	
}

.socialmedia{
	letter-spacing: -5px;
}

.sidebar{
		text-align: center;
}

#sidebar form{
		background-color: #654A4F;
		margin-bottom: 3%;
		padding: 0px 1px 14px;
	width: 100%;

}
.sidebar h2{
	color: #e6ddde;
	font-family: Abril Fatface, serif;
	font-weight: 100;
}

.sidebar p{
	color: #e6ddde;
	margin-top: 0px;
	font-family: 'Josefin Sans', sans-serif;
  	font-weight: 300;
}

input[type=submit] {
	text-align: center;
  padding: 9px 8px;
  margin: 8px 0px;
  display: inline-block;
		font-family: 'Josefin Sans', sans-serif;
border-radius: 0
}

.sidebar input{
	font-size: 12px; padding: 7px 10px; border: 2px solid #654A4F; 
	
}

.solid
{ display: block;
}

.reply-form h3{
	font-size: 18px;
	    float: right;
    width: 100%;
}
.reply-form{
	display: inline-block;
	padding-left: 45px;
    padding-top: 4%;
	text-align: center;
	font-size: 16px;
	width: 70%;
}
.comments textarea{
	border-radius: 0;
	font-family: 'Josefin Sans', sans-serif;
	margin-bottom: 10px;
	width: 99%;


}
.reply input{
	font-family: 'Josefin Sans', sans-serif;
	width: 300px;
	height: 30px;
	border-radius: 0;
	margin-bottom: 10px;
}
.reply {
font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	
}

.reply-form button{
	font-size: 14px;
	padding: 5px 19px;
	border-raidus: 0;
}





#footer{
	background-color: #e6ddde;
	text-align: center;
	margin-top:100px;
	padding: 1px;
	line-height: 0;
	display: block;
}

.right-sidebar {
	padding-right: 45px;
    width: 30%;    
    float: right;
	margin-top: 2%;
	display: inline-block;
    vertical-align: top;
}

.header-right form{float:right}
.article-ad{
	align-content: center;
	text-align: center;
	background-color: #e6ddde;
	margin-top: 195px;
	padding-bottom: 5px;
}

.article-ad button{font-size: 11px; padding: 5px 10px; border: 2px solid #654A4F; border-radius: 0;}

.info h4{
	font-family: Abril Fatface, serif;
	font-weight: 100;
	font-size: 15.5px;
	line-height: normal;
}
.info h3 {
    font-size: 14px;
	
}

.info{
	font-size: 12px;
	width: 83%;
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
	line-height: 0px;
}



.shop{
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	background-color: #F5F5F5;
	border: 3px solid #654A4F;
	padding-bottom: 5%;
	margin-top: 3%;
}

@media screen and (max-width: 1300px) 
{
	.right-sidebar{
		float:left;
		padding-left: 45px;
		width: 60%;
		height: auto;
	}
	
}
@media screen and (max-width: 684px) 
{
	.header-right{
    font-size: 11.5px;
	padding-right: 1%;}
	.topnav{    margin-top: 28.7%;
}
	



@media screen and (max-width: 600px) 
{
	.reply-form h3{width: 100%;
    height: auto;}
	
	.reply-form{width:50%;display: block;
	padding-left: 0px;
    padding-top: 4%;}
	
	.article-right{width:95%; }
	
	.article-divider{
		width:100%;
	}
	.article1 img{
		width:100%;
		height:auto;
	}
	.article1{padding-left:0;}
	.article2{padding-left:0;}
	.article2 img{
		width:100%;
		height:auto;
		

	}
	.right-sidebar{width: 100%; height:auto; padding-left:0;}
	
	.topnav{
		display: none;
	}
	.right-sidebar{width: 100%; text-align: center; display: block; margin-left: auto;
		margin-right: auto; 	padding-right: 0px;;height:auto;}
	#articles img{
		width: 100%; height: auto;
	}
	#articles{width: 100%; padding-left: 0px;;height:auto;}
	
	.reply-form{width:85%; height: auto; margin-left: auto;
		margin-right: auto; text-align: center;}
	
	.comments textarea{width:100%;}
	
	.value-prop{
		display: block; width: 100%;
	}
	
	#header-left img{
		width:124px;
		height:auto;
		display: inline-block;
	}
	
	.value-prop h1 {
    margin-top: 0px;
    padding: 20px 0px 20px;
		font-size: 25px;}
}
}