.clearfix:after, .clearfix:before {
  content:"";
  clear: both;
  display: block;
}

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

#principal{
margin:auto;
width:60%;
height:470px;	
 box-shadow: 5px 5px 15px 3px #333;
}

#calculator {
	float:left;
  width:350px;
  margin-left:30px;
  background:#ddd;
  box-sizing:border-box;
  margin-top:20px;
  margin-bottom:20px;
  box-shadow: 5px 5px 15px 3px #333;
 }
  
#calculator input {
    width:100%;
    box-sizing:border-box;
    outline:none;
    text-align:right;
    padding:25px 10px;
    border:none;
    background:#fff;
    color:#5f5;
    font-size:28px;
  }
  
  & button{
    outline:none;
    font-size:18px;
  }
  
  & h2 {
    font-family: 'Lobster';
    font-size:20px;
    margin-top:25px 0;
  }
  
.btn {
  width: 24.75%;
  float: left;
  height: 55px;
  margin: 0.05%;
  
  &:hover, &:active, &:focus {
    opacity: .8;
  }
}

.operation, .clearAll, .clearEntry {
  background:red;
  color:#fff;
}

.num, #equal, #dot {
  background:#000;
  color:#fff;
}

#add{
  height:110px;
  margin-right:.5%;
  float:right;
}

div#formulario{
	float:left;
	margin-top:20px;
margin-left:50px;
width:50%;
 box-shadow: 5px 5px 15px 3px #333;
 padding:5px;
}

div#formulario h2{
font-family: MedievalSharp;
color:#fff;
text-align:center;
text-shadow: #000 2px 2px 2px, #000 -1px -1px 1px;
}

p.valores{
font-family: MedievalSharp;
font-size:18px;
font-weight: bold;
margin-left:5px;
color:#000;
text-align:center;
}

#divResultado{
margin:0 auto;
width:90%;
font-size:20px;	
}



@media screen and (max-width: 1700px){
#principal{
width:70%;	
}
}

@media screen and (max-width: 1500px){
#principal{
width:75%;	
}
}

@media screen and (max-width: 1400px){
#principal{
width:80%;	
}
}

@media screen and (max-width: 1300px){
#principal{
width:85%;	
}
}

@media screen and (max-width: 1200px){
#principal{
width:90%;	
}
#calculator{
	margin-left:20px;
}
#formulario{
	margin-left:30px;
}
}

@media screen and (max-width: 1100px){
#principal{
width:95%;	
}
#calculator{
	margin-left:5px;
}
#formulario{
	margin-left:5px;
}
}

@media screen and (max-width: 1000px){
	
div#principal{
height:900px;		
}
#calculator{
	margin-left:30%;
}
div#formulario{
	width:70%;
	margin-left:15%;
}
}

@media screen and (max-width: 900px){
	
#calculator{
	margin-left:25%;
}
}

@media screen and (max-width: 750px){
	
#calculator{
	margin-left:22%;
}
}

@media screen and (max-width: 700px){
	
#calculator{
	margin-left:20%;
}
}

@media screen and (max-width: 650px){
	
#calculator{
	margin-left:17%;
}
div#principal{
height:1000px;	
}
div#formulario{
	width:80%;
	margin-left:10%;
}
}

@media screen and (max-width: 600px){
	
#calculator{
	margin-left:15%;
}
}

@media screen and (max-width: 550px){
	
#calculator{
	margin-left:10%;
}
}

@media screen and (max-width: 500px){
	
#calculator{
	margin-left:5%;
}
}