/* Responsive Styles  */

/* Step one */
/* targeting all screen sizes wider than 1240px (HD Screen) */
@media (min-width: 1240px){
	
.container{
    width: 1170px;
}

/* contentSpan Styles - Start*/

.col1 {
	width: 505px;
}

.col2 {
	width: 505px;
}

.col3 {
	width: 1090px;
}

/* contentSpan Styles - End */

/* btmSpan Styles - Start */

.footerLinks {
	width: 376px;
}

.footer {
	width: 378px;
}

.footerSocial {
	width: 378px;
}

.copyright {
	width: 378px;
}

.footerLogo {
	width: 376px;
}

/* btmSpan Styles - End */

}

/* Step three */
/* targeting all screen sizes within 801px and 1023px (tablet) */
@media (min-width: 801px) and (max-width: 1023px){

.container{
    width: 760px;
} 

/* contentSpan Styles - Start*/

.col1 {
	width: 300px;
}

.col2 {
	width: 300px;
}

.col3 {
	width: 680px;
}

/* btmSpan Styles - Start */

.btmSpan {
	background-color: #000000;
}

.footerLinks {
	width: 240px;
}

.footer {
	width: 240px;
}

.footerSocial {
	width: 240px;
}

.copyright {
	width: 240px;
}

.footerLogo {
	width: 240px;
}

/* btmSpan Styles - End */

}

/* Step four */
/* targeting all screen sizes smaller than 800px (Mobiles) */
@media (max-width: 800px){
	
body {
	font-size: 12px;
}
	
.container{
    width: 100%;
    margin: 0 auto;
}

/* topSpan Styles - Start */

/* topSpan Styles - End */

/* contentSpan Styles - Start*/

.col1 {
	width: 34%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.col2 {
	width: 34%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.col3 {
	width: 84%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.contentImg img {
	width: 100%;
	max-width: 270px;
	height: auto;
}

/* contentSpan Styles - End */


/* btmSpan Styles - Start */

.btmSpan {
	background-color: #000000;
}

.indent {
	width: auto;
	height: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.footerLinks {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.footer {
	width: 100%;
	text-align: center;
}

.footerSocial {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.copyright {
	width: 100%;
	padding-bottom: 20px;
}

.footerLogo{
	width: 100%;
	height: auto;
	line-height: auto;
	text-align: center;
	padding-top: 0;
	padding-bottom: 20px;
}

/* btmSpan Styles - End */

}

/* Step four */
/* targeting all screen sizes smaller than 800px (Mobiles) */
@media (max-width: 500px){
	
body {
	font-size: 12px;
}
	
.container{
    width: 100%;
    margin: 0 auto;
}

/* topSpan Styles - Start */

/* topSpan Styles - End */

/* contentSpan Styles - Start*/

.col1 {
	width: 84%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.col2 {
	width: 84%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.col3 {
	width: 84%;
	margin: 4%;
	padding: 4%;
	background-color: #000000;
	background-color: rgba(255,255,255,0.1);
}

.contentImg img {
	width: 200px;
	height: auto;
}

/* contentSpan Styles - End */


/* btmSpan Styles - Start */

.btmSpan {
	background-color: #000000;
}

.indent {
	width: auto;
	height: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.footerLinks {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.footer {
	width: 100%;
	text-align: center;
}

.footerSocial {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.copyright {
	width: 100%;
	padding-bottom: 20px;
}

.footerLogo{
	width: 100%;
	height: auto;
	line-height: auto;
	text-align: center;
	padding-top: 0;
	padding-bottom: 20px;
}

/* btmSpan Styles - End */

}