* {
margin:0;
padding:0;
}

aside, footer, address, section, nav, header {
display:block;
}

img, iframe, video, embed {
max-width:100%!important;
}

/*   Tipo  */

h1 {
color:#444;
font-size:2rem;
padding:0 0 0.5em 0;
}

p {
color:#333;
font-size:1.15rem;
padding:0 0 0.5em 0;
}

.chelbot {
display:none;
}

.form li {
list-style:none;
padding:0 0 0.5em 0;
}

.butt {
display:inline-block;
padding:0.4em 20px;
background:#555;
color:#fff;
border:none;
cursor:pointer;
font-size:1.2em;
}

.butt:hover {
background:#fc5b03;
}

textarea {
font-size:1.2rem;
}

input[type="text"]{padding:5px;}

.red {
color:red;
font-weight:bold;
}

/*  Layout */

#page {
font:100% 'PT Sans Narrow', sans-serif;
background: linear-gradient(to right, #edeeee, #fff)
}

.layout {
width:1170px;
margin:0 auto;
overflow:hidden;
}

#header {
background:#3d4049;
}

.logo {
width:30%;
margin:1em 0 0.8em 0;
}

.logo img {
display:block;
padding:0 0 0.3em 0;
}

.logo span {
color:#fcfafa;
font-size:1.2rem;
}

#content {
}

#content .layout {
background: url('coner.png') #fff center top no-repeat;
}

#left {
background:#edeeee;
width:24%;
padding:1rem 0;
float:left;
height:100vh;
}

#left ul  {
padding:0;
margin:0;
}

#left ul li {
list-style:none;
padding:0 0 0.5em 0;
}

#left ul li.active a {
color:#fc5b03;
}

#left ul li a {
font-size:1.25rem;
color:#146294;
text-decoration:none;
}

#left ul li a:hover {
text-decoration:underline;
}

/*
#right {
padding:2.3em 0 2em 1%;
border-left:1px solid #ccc;
float:right;
width:22%;
}
*/

#main {
padding:2em 0 1em 2%;
width:74%;
float:right;
}

.result {
border:1px sold #ccc;
padding:0.5em 20px;
background:#e3fdd6;
margin:0 0 0.5em 0;
}

.yabutt {
margin:1em 0;
overflow:hidden;
}

.comments {
margin:1em 0;
}

#footer {
background:#373738;
padding:1em 0;
}

#footer p {
color:#eee;
text-align:center;
}

#footer p span {
color:#fc5b03;
}


/*   Responsive  */


/*   1024px  */

@media screen and (max-width: 1024px), only screen and (max-device-width:1024px) {
    
.layout {
width:940px;
}
}


/*   960px  */

@media screen and (max-width: 960px), only screen and (max-device-width:960px) {
    
.layout {
width:920px;
}
}


/*   854px  */

@media screen and (max-width: 854px), only screen and (max-device-width:854px) {
    
.layout {
width:800px;
}

.logo {
width:35%;	
}

#left {
width:32%;
}

#main {
width:65%;
}
}


/*   800px  */

@media screen and (max-width: 800px), only screen and (max-device-width:800px) {
    
.layout {
width:740px;
}

.logo {
width:39%;	
}
}

/*   768px  */

@media screen and (max-width: 768px), only screen and (max-device-width:768px) {
    
.layout {
width:700px;
}

#left, #right, #main {
width:100%;
margin:0 auto;
float:none;
height:auto;
}
}


/*   640px  */

@media screen and (max-width: 640px), only screen and (max-device-width:640px) {
    
.layout {
width:580px;
}

.logo {
width:100%;	
}
}


/*   600px  */

@media screen and (max-width: 600px), only screen and (max-device-width:600px) {
    
.layout {
width:540px;
}
}

/*   480px  */

@media screen and (max-width: 480px), only screen and (max-device-width:480px) {
    
.layout {
width:90%;
}
}


/*   320px  */

@media screen and (max-width: 320px), only screen and (max-device-width:320px) {
    
.layout {
width:90%;
}

.logo span {
font-size:1.1rem;
}
}