﻿

/*http://webdesignerwall.com/tutorials/responsive-column-layouts*/



#pagewrap2intro {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
 
}

.wrapper2intro {
	overflow: visible;
    height:100%;
}



.rewidth{
    width:45%!important;
    margin-left: 20px!important;
}
.rewidthd{
    width:45%!important;
    margin-right: 20px!important;
}

.rewidthd2{
        width:45%!important;
    margin-left: 20px!important;
     margin-right: 20px!important;
}


/* 
COLUMN
    1024x48.4% : 446px
*/
.col2i {
/*	background: #b6ff00;*/
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;

}

.col2d {
/*	background: #b6ff00;*/
	float: right;
	/*margin-left: 3.2%;*/
	margin-bottom: 30px;

}






.fullwidth .col2i {
	float: none;
	margin-left: 0;
}

.fullwidth .col2d {
	float: none;
	margin-left: 0;
}




.grid2i .col2i {
	width: 48.4%;
    border:1px solid #ccc;
}

.grid2i .col2d {
	width: 48.4%;
    border:1px solid #ccc;
}






.grid2i .col2i:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

.grid2i .col2d:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}





/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */
@media screen and (max-width: 740px) {

}

/* reset cols to 2-column */
@media screen and (max-width: 600px) {


}

/* reset cols to fullwidth 800*/
@media screen and (max-width: 800px) {

    .col2i {
        margin: 0 auto;
      /*  width: 90% !important;*/
        width: 100% !important;
        clear: none !important;
        margin-bottom: 20px;
    }


    	.col2d { margin:0 auto;
		width: 100% !important;
		clear: none !important;
        margin-bottom:20px;
        float:left;
	}



}


/*  ***************************************         */
.col2itit{

}
.col2iobj{

}