/*===================================
  larger than 1400
=====================================*/
@media (min-width: 1400px) {
 #page {
    width: 60%;
  } 

  article{
	max-width:65%;
  }
  aside {
	width:20%;
	float:left;
  }
  #logo {
    position: absolute;
    left:1%;
    top: 2%;
 display: inline;
}
li.inlinelist{
	display:inline;
}
}
/*===================================
  bigger than 1024 smaller than 1400
=====================================*/
@media screen and (min-width : 980px) and (max-width: 1400px){
	#page {
		width: 80%;
	}
	#logo{
		display: none;
	}
}
/*===================================
  smaller than 1024
=====================================*/

@media screen and (max-width: 980px) {
#page {
	width: 95%;
}
main {
	clear: both;
	background: #F2F2F2;
	width:100%;
}
article {
	clear: both;
	background: #F2F2F2;
	width:100%;
}
#logo{
	display: none;
}
}


/*===========================
smaller than 650
==============================*/
@media screen and (max-width: 650px) {
.tagline {
display:none;}

#page {
	clear: both;
	background: #F2F2F2;
	width:100%;
}

#contentWrapper {
	clear: both;
	float:left;
	width:100%;
}
header{
	clear: both;
	float:left;
	width:100%;
display:block;
}

article {
	width: 100%;
	float: none;
	padding:1%;
}

figure{
width:100%;
}
img{
    width: 100%;
    height: auto;
}
aside {
	max-width: 100%;
	float: none;
	margin: 0;
}

input[type=text], select, textarea {
	width: 100%;
}

}
/*===============================

  smaller than 480
=================================*/
@media screen and (max-width: 480px) {
html {
	-webkit-text-size-adjust: none;
}
#page {
	width: 100%;
	clear: both;
}
header {
	height: Auto;
}

#sidebar {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
}

input[type=text], select, textarea {
	width: 100%;
}
}