/*
	Author: Zack Minor
	Author Website: zackography.com
	File Name: unsemantic.css
	
	BASED ON: Unsemantic GRID By Nathan Smith (http://unsemantic.com//)

*/

		
/* =================== THE GRID =================== */
.grid{
	max-width: 960px; /*sets largest width size*/
	min-width: 480px; /*sets the smallest screen size, before switching to mobile layout*/
	width:100%; /*otherwise it is always 100% of the screen*/
	margin-left:auto;
    margin-right: auto;/*centers the grid*/
	padding:0; /*no padding */
}

 .clear:before, .clear:after{
	content:'';
	display:table; /*The element is displayed as a table, makes for setting up grid easier */
}

/*forces the parent to clear it's children floats */
.clear:after {
	clear:both;
}

.col{
	/*creates a gutter of 10px (left & right) around containers */
	padding-left:10px;
	padding-right:10px; 
}

.col .col:first-of-type {
	padding-left:0;
    padding-right: 20px;
}

.col .col:last-of-type {
	padding-right:0;
    padding-left: 20px;
}


/*All columns have these settings */
.col-100, .col-95, .col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-65, .col-60, .col-55, .col-50, .col-45, .col-40, .col-35, .col-33,.col-30, .col-25, .col-20, .col-15, .col-10, .col-5{
	float:left;
	margin:0;
	}

	
/*Column Widths*/	
.col-100 {width: 100%;}
.col-95 {width: 95%;}
.col-90 {width: 90%;}
.col-85 {width: 85%;}
.col-80 {width: 80%;}
.col-75 {width: 75%;}
.col-70 {width: 70%;}
.col-66 {width: 66.666666666667%;}
.col-65 {width: 65%;}
.col-60 {width: 60%;}
.col-55 {width: 55%;}
.col-50 {width: 50%;}
.col-45 {width: 45%;}
.col-40 {width: 40%;}
.col-35 {width: 35%;}
.col-33 {width: 33.3333333333333%;}
.col-30 {width: 30%;}
.col-25 {width: 25%;}
.col-20 {width: 20%;}
.col-15 {width: 15%;}
.col-10 {width: 10%;}
.col-5 {width: 5%;}



/*Hide / show mobil/desktop view*/
.mobile{
	display:none;
}

.tablet{
    display:none;
}

.desktop{
		display:block;
	}


/* =================== THE MOBILE GRID =================== */

@media handheld, only screen and (max-width: 479px) {
/* If smaller than 480px then apply these overrides*/

	.grid {
		width: 100%;
		min-width: 0;
	}

	.col,.col-100, .col-95, .col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-65, .col-60, .col-55, .col-50, .col-45, .col-40, .col-35, .col-33,.col-30, .col-25, .col-20, .col-15, .col-10, .col-5{ 
		width: auto;
		float: none;
    }

	.col .col{
		padding:0;
	}
    
    .col .col:first-of-type {
	padding-left:0;
    padding-right: 0px;
    }

    .col .col:last-of-type {
	padding-right:0;
    padding-left: 0px;
    }
    
    .main-nav ul {
		font-size: .78em;
		display: none;
	}
	
	#masthead {
		padding-bottom: 0;
	}
	
	.logo {
  		bottom: 20px;
  		margin-top: 120px;
	}
	
	.main-slider img {
		width: 100%;
		float: none;
	}
	
	.slide-text {
		width: 100% !important;
		padding: 0 25px 25px !important;
	}
	
	footer .address {
		float: none;
		text-align: center;
	}
	
	footer img {
		float: none !important;
		margin: 20px auto;
		margin-right: 0 !important;
	}
	
	footer {
		text-align: center !important;
		padding-bottom: 25px !important;
    }

	
	/*Hide / show mobil/desktop view*/
	.mobile{
		display:block;
	}
    
    .tablet{
        display:none;
    }
    
	.desktop{
		display:none;
	}
    
    .post {
        margin: 0 0px 20px 0 !important;
    }
    
    .post .container {
        max-width: 100%;
    }
    
    .post .container img {
        width: 100%;
        max-width: 100%;
    }
    
    .slider-links {
        background-color: #FBF4AF;
    }
    
    #footer img {
        width: 25%;
        margin: 0 auto !important;
    }
    
    #footer .powerprint {
        margin-bottom: 40px !important;
    }
    
    #footernav {
        margin-top: 40px !important;
    }
    
    #footernav .main {
        font-weight: bold;
        border-bottom: solid 1px #a3a3a3;
        padding-bottom: 20px;
        font-size: 14px;
    }
    
    .address h4 {
        font-size: 16px !important;
    }

}/* end mobile */

@media (max-width: 768px) {
    .logo {
        display: none;
    }
    
    .main-nav {
        height: 70px;
    }
    
    .touch-button {
        top: 16px !important;
    }
}

/* =================== THE TABLET GRID =================== */

@media (max-width: 1170px) {
	.main-nav ul li a {
		font-size: .78em;
	}
	
	.slide-text {
		padding: 0px 25px 25px !important;
	}
	
	.slide-text p {
		font-size: 14px;
	}
	
	.slide-text h1 {
		font-size: 24px;
	}
}

@media handheld, only screen and (max-width: 900px) and (min-width:480px) {
/* If smaller than 480px then apply these overrides*/
    
    .grid {
		width: 100%;
		min-width: 0;
	}

	.col,.col-100, .col-95, .col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-65, .col-60, .col-55, .col-50, .col-45, .col-40, .col-35, .col-33,.col-30, .col-25, .col-20, .col-15, .col-10, .col-5{ 
		width: auto;
		float: none;
    }

	.col .col{
		padding:0;
	}
    
    .col .col:first-of-type {
	padding-left:0;
    padding-right: 0px;
    }

    .col .col:last-of-type {
	padding-right:0;
    padding-left: 0px;
    }
    
    .main-nav ul {
		font-size: .78em;
		display: none;
	}
	
	#masthead {
		padding-bottom: 0;
	}
	
	.logo {
  		bottom: 20px;
  		margin-top: 120px;
	}
	
	.main-slider img {
		width: 100%;
		float: none;
	}
	
	.slide-text {
		width: 100% !important;
		padding: 0 25px 25px !important;
	}
	
	footer .address {
		float: none;
		text-align: left;
	}
	
	footer img {
		float: right !important;
		width: 25%;
	}
	
	footer .col-50 {
		padding-left: 25px;
	}

	
	/*Hide / show mobil/desktop view*/
	.mobile{
        display:block;
    }
    
    .tablet{
		display:block;
	}
    
	.desktop{
		display:none;
	}
    
    .posts .container {
        height: 200px;
        overflow: hidden;
        max-width: 100%;
    }
    
    .posts .container img {
        width: 100%;
        max-width: 100%;
    }
    
    .posts .inner {
        max-width: 100%;
    }

}/* end tablet */