*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (min-width: 720px){

    html {
        height: 100%;
        width: 100%;
    }
    
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-image: url("../img/bg_1.jpg");
        background-attachment: fixed;
        background-size: cover;
        font-family: 'Tahoma','Tahoma','Calibri';
        font-size: 12pt;
    }

    header {
        width: 400px;
        overflow: auto;
        height: 100%;
        float: right;
        padding: 20px;
    }
    
    nav a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 5px 0 5px 0;
        font-size: 80%;
        background-color: #FF3200;
        opacity: 0.9;
        margin-top: 1px;
        padding: 10px;
        border-radius: 10px 2px 10px 2px;
    }
    
    header ul li {
        margin: 0 0 5 -40;
        color: #FF3200;
        list-style: none;
    }
    
    header ul li p {
        color: #333;
        margin: 0 0 10 20px;
        padding: 5 0 10px 0;
        border-bottom: #CCC 1px solid;
    }
    
    header ul li a {
        background-color: transparent;
        color: #FF3200;
        font-size: 100%;
        padding: 0px;
    }
    
    header ul li a:visited {
        color: #FF3200;
    }
    
    nav a:visited{
        color: white;
    }
    
    .info {
        font-size: 80%;
        padding: 10px;
    }
    
    .topo {
        width: 100%;
    }
    
    .logo {
        float: left;
        width: 150px;
        height: 200px;
        position: absolute;
        top: 300;
        left: 100;
        z-index: 10;
        background-image: url(../img/logo_big.png);
        background-repeat: no-repeat;
    }
    
    .title {
        font-family: 'Calibri';
        font-size: 150%;
        line-height: 35pt;
        float: left;
        display: inline-block;
        position: absolute;
        z-index: 50;
        width: 300px;
        color: white;
        top: 100px;
        left: 100;
    }
    
    h2 {
        background-color: white;
        color: #FF3200;
        position: absolute;
        font-size: 100%;
        font-weight: normal;
        width: auto;
        padding: 10px;
        top: 200;
        left: 100;
    }
    
    .contagem {
        font-family: 'Calibri';
        font-weight: normal;
        text-align: center;
        font-size: 150%;
        color: white;
        position: absolute;
        z-index: 100;
        top: 200;
        left: 100;
        background-color: white;
        color: #FF3200;
        padding: 10px;
    }
    
    .relogio-desc {
        font-weight: normal;
    }
    
    .title h1 {
        margin: 0;
        letter-spacing: -1pt;
        font-size: 200%;
        font-weight: bold;
        color: white;
    }
    
    .copyright {
        width: 100%px;
        padding: 20px 0 20px 0;
        font-size: 60%;
        color: #666;
        text-align: center;
    }
    
    .mapa {
        margin: 10px 0 0 0;
        display: none;
    }

	
}

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

    html {
        height: 100%;
        width: 100%;
    }

    body {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: 'Calibri', 'Arial', 'Trebuchet MS';
        font-size: 14pt;
        background-image: url(../img/bg_small.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }

    header {
        width: 100%;
        height: 100%;
        padding: 20px;
    }

    nav a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 5px 0 5px 0;
        font-size: 80%;
        background-color: #FF3200;
        opacity: 0.9;
        margin-top: 1px;
        padding: 10px;
    }
    
    nav a:visited{
        color: white;
    }

    .info {
        background-color: white;
        font-size: 80%;
        padding: 10px;
    }
    
    .topo {
        width: 100%;
        height: 100px;
    }
    
    .logo {
        float: left;
        width: 70px;
        height: 100px;
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
    }
    
    .title {
        float: left;
        width: 150px;
        display: inline-block;
        height: 100px;
    }
    
    .contagem {
        width: 100%;
        text-align: center;
        font-size: 100%;
        padding: 10px;
        background-color: white;
        margin: 0 0 20px 0;
        color: #FF3200;
    }
    
    .title h1 {
        margin: 0;
        float: left;
        letter-spacing: -1pt;
        font-size: 150%;
        font-weight: normal;
        color: white;
    }
    
    .copyright {
        width: 100%px;
        padding: 20px 0 20px 0;
        font-size: 60%;
        color: white;
        text-align: center;
    }
    
    header ul li {
        margin: 0 0 5 -30;
        color: #FF3200;
        list-style: square;
    }
    
    header ul li p {
        color: #333;
        margin: 0 0 10 0px;
        padding: 5 0 10px 0;
        border-bottom: #CCC 1px solid;
    }
    
    header ul li a {
        background-color: white;
        color: #FF3200;
        font-size: 100%;
        padding: 0px;
    }
    
    header ul li a:visited {
        color: #FF3200;
    }
    
    .mapa {
        margin: 10px 0 0 0;
        display: none;
    }
	
	
}