/*big tablets to 1200px: from 481 to 767px*/
@media only screen and (max-width: 1200px) {
    .container { width: 100%;}
    #footer {text-align: center; margin: 10%;}
}

/*small tablet to big tablets: from 768 to 1023px*/
@media only screen and (max-width: 1023px) {
    #footer {text-align: center; margin: 10%;}
}

/*small phones to small tablets: from 481 to 767px*/
@media only screen and (max-width: 767px) {
    #footer {text-align: center; margin: 10%;}
    .header {width: 100%;}
	.header p {font-size: 14px;}
    .principal {width: 80%; height: auto;}
}

/*small phones: 0 to 480px*/
@media only screen and (max-width: 480px) {
    h1 {font-size: 25px;}
	.header p {font-size: 14px;}
    #footer {font-size: 12px; margin: 10%;}
}