body{
width:90%;
margin:0 auto;
}

div#principal{
margin:0 auto;
width:60%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:10px;
}

div#principal #h1{
text-align:center;
margin: 10px auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width:40%;
}

section.secao01{
margin:10px auto;
width:100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

section.secao01 h3{
text-align:center;
margin: 10px auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width:50%;
}

iframe.aula{
width:90%;
height:600px; 
margin: 5%;
}


@media only screen and (max-width: 1500px) {

div#principal{
width:70%;
}
}

@media only screen and (max-width: 1300px) {

div#principal{
width:75%;
}
}

@media only screen and (max-width: 1200px) {

div#principal{
width:80%;
}
}

@media only screen and (max-width: 1100px) {

div#principal{
width:85%;
}
}

@media only screen and (max-width: 1000px) {

div#principal{
width:90%;
}
iframe.aula{
width:90%;
height:500px; 
margin: 5%;
}
}

@media only screen and (max-width: 900px) {

div#principal{
width:95%;
}
iframe.aula{
height:450px; 
}
}

@media only screen and (max-width: 800px) {

div#principal{
width:100%;
}
section.secao01 h3{
width:60%;
}
iframe.aula{
height:400px; 
}
}

@media only screen and (max-width: 700px) {

div#principal #h1{
width:60%;
}
section.secao01 h3{
width:70%;
}
iframe.aula{
height:350px; 
}
}

@media only screen and (max-width: 600px) {

div#principal #h1{
width:70%;
}
section.secao01 h3{
width:80%;
}
iframe.aula{
height:300px; 
}
}