email template

Readme.MD

This is for now on test level basis

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic);

.headerContent {
		width: 60%;float: left;border-right: 1px solid #b2b2b2;padding-bottom: 5px;
	} 
	.headerLogo {
		position: relative;float: right;
	}
	.footerLogo {
		width: 11%;position: relative;float: left;top: 30px;margin: 0px 10px 26px 25px;
	}
	.footerContent {
		width: 100%;align-content: center;background-color: #ececec;position: relative;float: left;
	}
	.footerText {
		position: relative;float: left;font-family: 'Roboto', sans-serif;font-weight: 300;font-size: 11px;color: #707070;margin-left:40px;width:59%;
	}
	.arrow {
		display: inline-block;font-family: 'Roboto', sans-serif;font-weight: 300;font-size: 14px;color: #000000;padding-right: 5px;vertical-align: middle;text-align: right;
	}
	.textContent {
		width:95%;
	}	
	.contentFirst {
		display: inline-block;font-family: 'Roboto', sans-serif;font-weight: 900;font-size: 24px;color: #000000;padding-right: 20px;vertical-align: middle;text-align: right;min-width: 145px;
	}
	.contentSecond {
		display: inline-block;font-family: 'Roboto', sans-serif;font-weight: 300;font-size: 24px;color: #adadad;padding-right: 20px;vertical-align: middle;text-align: right;min-width: 145px;
	}
	@media only screen and (max-width: 502px) {
		.headerContent {
			border-right: none !important;			
			width: 100% !important;
		}
		.headerLogo {
			text-align: left !important;
			width: 100% !important;
		}
	}
	@media only screen and (max-width: 406px) {
		.imgLogo {
			width:49% !important;
		}
		.footerLogo {
			top : 50px !important;
		}
	}
	@media only screen and (max-width: 305px) {
		.arrow {
			display: none !important;
		}		
		.footerLogo {
			top : 70px !important;
		}
		
	}
	@media only screen and (max-width: 265px) {
		.footerLogo {
			right: -32px !important;
			top: 15px !important;
		}		
	}