/*
	RESPONSIVE STYLES
*/

   

@media
      only screen and (-webkit-min-device-pixel-ratio : 1.5),
	  only screen and (min-device-pixel-ratio : 1.5),
	  only screen and (max-width : 960px)
{
    h2.orphan{
	     margin:0 5% 20px;
		 width:90%
    }

     .container{
	     width:100%;
	 }
	 
	 header{
	     background:none;
		 padding-top:0;
	 }
	 
	 #logo{
	     background:url(../images/light-pattern.png) transparent;
		 border-bottom:1px solid #ccc;
	     margin:0 0 20px;
		 padding:10px 5%;
		 width:90%;
		 float:none;
		 font-size:22px;
	 }
	 
	 .social-icons{
	     display:block;
		 float:none;
		 position:absolute;
		 right:5%;
		 top:12px;
	 }
	 
	 nav{
	     float:none;
		 margin:20px 0;
	 }
	 
	 ul[role=navigation]{
	     li{
		     float:none;
		     display:block;
			 margin:0 5% 5px;
			 width:90%;
			 
			 a{
			     padding:12px 20px;
				 font-size:14px;
				 .radius(5px);
				 position:relative;
				 
				&:after{
					content: '';
					display:block;
					width:100%;
					height:100%;
					position:absolute;
					left:0;
					top:0;
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.4)), color-stop(50%, rgba(255,255,255,0.15)), color-stop(50%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));
					background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
				}
				
				.icon{ font-size:22px; vertical-align:text-bottom; }
				 
			 }

		 } //li

	 } //ul[role=navigation]


	section[role=banner]{
		
		hgroup{
			
			h1, h2{
				.container;
				font:bold 24px @arials;
				padding:0 5%;
				width:90%;
			}
			h2{
				font-size:16px;
				margin-top:15px;
			}
		}
		
		article[role=main]{
			.container;
			padding:0 0 30px;
			
			h2{
			    line-height:1.2em;
			}
			
			.post, aside{
				float:none;
				width:90%;
				margin:0 5%;
			}
			aside{  display: none; }

		  .price-table{
			  li{
				  display:block;

				  ul, h4, .button{
				      display:none;
				  }
				  .dark{
				      margin:0;
					  padding:15px 0 5px;
					  .radius(5px);
				  }

				  &.box{
					  margin:0 5% 10px;
					  width:90%;
					  padding:0;
					  
					  .button{ margin:10px 5% 0; width:90%; }
					  
					  &:first-child{
					      padding:0 0 20px;
					      ul, h4, .button{
						      display:block;
						  }
						  .dark{
						      margin:0 0 10px;
							  padding-bottom:0;
							  .radius(5px 5px 0 0);
						  }
						  
					  }
				  }
				  &.gap{
				      display:none;
				  }
				  
			  }
		  
		  } //.price-table

		} //article[role=main]

	} //section[role=banner]
	
	.button{
	    width:100%;
		padding:15px 0;
		margin:0 0 15px;
	}
	.left{
	    float:none;
	}

	
	.columns{

		article{
		    border:0 !important;
			display:block;
			width:90%;
			padding:0;
			margin:0 5%;
			font-size:13px;

			figure{
				display:none;
				
				p{
				    margin:0;
				}
					
				img{
					width:100%;
				}
			}
			
			&:first-child{
			    padding:20px 0 10px;
			    figure{
				    display:block;
				}
			}
			&:last-child{
			    h3{
				    border:0;
				}
			}
		} //article{
		
	} //.columns

  .thumb-rotator{
	  padding:0 5% 20px;
	  
	  li{
		  float:none;
		  margin:0 0 5px;
		  width:100%;
		  display:none;
		  
		  &:first-child{ display:block; }
	  }
  } //.thumb-rotator
	
	.foo-slogan{
		overflow:hidden;
		padding:10px 5% 20px;
		width:90%;
	
		h2{
			float:none;
			width:100%;
			font:bold 22px/1em @arials;
			margin:0 0 15px;
		}
		.button{
			float:none;
		}
	} //.foo-slogan

	.c-form{
		input{
			&[type=text],
			&[type=email],
			&[type=tel]
			{
				padding:10px 3%;
				width:93%;
			}
		}
		textarea{
			padding:10px 3%;
			width:93%;
		}
		
	} //.c-form
	
	.sort-bar{
	  margin:0 5% 20px;
	  
	  a{
	      line-height:24px;
	  }
	  
	} //.sort-bar
	
	.thumb-list{
	    margin:0 5%;
		
		li{
		    height:auto !important;
			margin:0 0 20px !important;
			width:100%;
			
			img{
			    padding:2%;
				width:96%;
			}
		}
		
	}
	aside[role=complementary],
	.content {
		display:block;
		padding:10px 5%;
		width:90%;

		img {
			max-width:90%;
		}

		table {
			width:95%;
		}
		th, td {
			padding:2px 4px;
		}
	}

	
	footer[role=contentinfo]{
		padding:10px 5%;
		width:90%;
		
		p{
		    .container;
		}
	} //footer[role=contentinfo]
}
