/*
Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/

.simple-responsive {
    width: 98%;
    margin: 0 auto;
}

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
.simple-responsive *{
    box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/* RESPONSIVE IMAGES */
.simple-responsive img{ max-width:100%; height:auto;}

.table_row{
	display: block;
}

.table_grid{
	display: block;
}

.no-padding{
	padding: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.nopaddingleft{
	padding-left: 0 !important;
}

.nopaddingright{
	padding-right: 0 !important;
}

.nopaddingsides{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.nopaddingtopbottom{

}

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_fifth {	
	position: relative;
    min-height: 1px;
    padding: 5px;
}

/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}

/***** SITE STYLING MOBILE *****/


/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {
    /*GRID*/
    /* & Columns : 12 */

     .desktop{ display: block; }
     .mobile{ display: none; }
 
    .grid_1 { width: 8.33333333%; }
    .grid_2 { width: 16.66666667%; }
    .grid_3 { width: 25%; }
    .grid_4 { width: 33.33333333%; }
    .grid_5 { width: 41.66666667%; }
    .grid_6 { width: 50%; }
    .grid_7 { width: 58.33333333%; }
    .grid_8 { width: 66.66666667%; }
    .grid_9 { width: 75%; }
    .grid_10 { width: 83.33333333%; }
    .grid_11 { width: 91.66666667%; }
    .grid_12 { width: 100%; }
	.grid_fifth{ width: 20%; }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12,
	.grid_fifth{
	    float: left;
        padding: 6px;
    }
	
	.table_row{
		display: table;
		width: 100%;
	}

	.table_grid{
		display: table-cell;
		float: none !important;
		vertical-align: top;
	}
	
	

    .rightfloat{float:right !important;}
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12,
	.grid_fifth{
        padding: 7px;
    }
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12,
	.grid_fifth{
        padding: 8px;
    }
} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
}