h3{
    background-color: #fff;
    padding-right: 30px;
    padding-bottom: 20px;
    margin-top: -4px;
    margin-bottom: -4px;
    text-align: right;
}


/*----------TEXTO LIGHT-------------------*/
#light p {
    font: 16px/20px "univers45l", sans-serif;
    background-color: #fff;
    padding: 20px;
}


/*------DESIGN------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo1 {
    float: left;
}

@media (min-width: 820px) {
#artigo1{
    margin: 0px 0 100px 0;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo1{
        margin: 0 10% 60px 10%;
        width: 80%;
    }
}

#artigo1 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo1 a:hover{
    background-color: #C00000;
    padding: 5px 12px 5px 10px;
}

#artigo1 p{
    background-color: #fff;
    padding: 20px;
}


/*-------PHOTO------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo2 {
    float: left;
}

@media (min-width: 820px) {
#artigo2{
    margin: 0 0 100px 0;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo2{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}

#artigo2 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo2 a:hover{
    background-color: #000066;
    padding: 5px 12px 5px 10px;
}

#artigo2 p{
    background-color: #fff;
    padding: 20px;
}

#artigo2 h2{
    background-color: #fff;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-left: 20px;
}



/*-------FILM------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo3 {
    float: left;
}

@media (min-width: 820px) {
#artigo3{
    margin: 0 0 100px 0;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo3{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}

#artigo3 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo3 a:hover{
    background-color: #339933;
    padding: 5px 12px 5px 10px;
}

#artigo3 p{
    background-color: #fff;
    padding: 20px;
}

#artigo3 h2{
    background-color: #fff;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-left: 20px;
}


/*-------FILM------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo3i {
    float: left;
}

@media (min-width: 820px) {
#artigo3i{
    margin: 0 0 100px 130px;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo3i{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}

#artigo3i a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo3i a:hover{
    background-color: #339933;
    padding: 5px 12px 5px 10px;
}

#artigo3i p{
    background-color: #fff;
    padding: 20px;
}

#artigo3i h2{
    background-color: #fff;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-left: 20px;
}


/*-------TV------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo4 {
    float: left;
}

@media (min-width: 820px) {
#artigo4{
    margin: 0 0 100px 0;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo4{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}

#artigo4 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo4 a:hover{
    background-color: #FF9900;
    padding: 5px 12px 5px 10px;
}

#artigo4 p{
    background-color: #fff;
    padding: 20px;
}

#artigo4 h2{
    background-color: #fff;
    margin-top: -5px;
    margin-bottom: -5px;
    padding: 20px;
}

/*-------TECH------------------
--------ILUSTRADO---------------
-------------------------------*/

#artigo5 {
    float: left;
}

@media (min-width: 820px) {
#artigo5{
    margin: 0 0 100px 0;
    width: 600px;
}
}

@media (max-width: 819px) {
    #artigo5{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}

#artigo5 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 5px 12px 5px 10px;
    transition: background-color 0.3s;
}

#artigo5 a:hover{
    background-color: #66CCFF;
    padding: 5px 12px 5px 10px;
}

#artigo5 p{
    background-color: #fff;
    padding: 20px;
}

#artigo5 h2{
    background-color: #fff;
    margin-top: -5px;
    margin-bottom: -5px;
    padding: 20px;
}











/*----------------------------------
---------------MORE-----------------
----------------------------------*/

a.articles:link {
    font: 14px/18px "univers55", sans-serif;    
}

/*-----------------------------DESIGN--------------*/

@media (min-width: 820px) {
    #moreD{
        margin: 50px 0 10px 130px;
        width: 500px;
    }
}

@media (max-width: 819px) {
    #moreD{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}


#moreD p{
    background-color: #C00000;
    color: #fff;
    padding: 5px;
}

#moreD a{
    background-color: #C00000;
    text-decoration: none;
    color: #fff;
    padding: 3px;
    transition: opacity 0.3s;
}

#moreD a:hover{
    opacity: 0.7;
}

/*-----------------------------PHOTO--------------*/

@media (min-width: 820px) {
    #moreP{
        margin: 50px 0 10px 130px;
        width: 500px;
    }
}

@media (max-width: 819px) {
    #moreP{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}


#moreP p{
    background-color: #000066;
    color: #fff;
    padding: 5px;
}

#moreP a{
    background-color: #000066;
    text-decoration: none;
    color: #fff;
    padding: 3px;
    transition: opacity 0.3s;
}

#moreP a:hover{
    opacity: 0.7;
}



/*-----------------------------FILM--------------*/

@media (min-width: 820px) {
    #moreF{
        margin: 50px 0 10px 130px;
        width: 500px;
    }
}

@media (max-width: 819px) {
    #moreF{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}


#moreF p{
    background-color: #339933;
    color: #fff;
    padding: 5px;
}

#moreF a{
    background-color: #339933;
    text-decoration: none;
    color: #fff;
    padding: 3px;
    transition: opacity 0.3s;
}

#moreF a:hover{
    opacity: 0.7;
}

/*-----------------------------TV--------------*/

@media (min-width: 820px) {
    #moreTV{
        margin: 50px 0 10px 130px;
        width: 500px;
    }
}

@media (max-width: 819px) {
    #moreTV{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}


#moreTV p{
    background-color: #FF9900;
    color: #fff;
    padding: 5px;
}

#moreTV a{
    background-color: #FF9900;
    text-decoration: none;
    color: #fff;
    padding: 3px;
    transition: opacity 0.3s;
}

#moreTV a:hover{
    opacity: 0.7;
}

/*-----------------------------TECH--------------*/

@media (min-width: 820px) {
    #moreT{
        margin: 50px 0 10px 130px;
        width: 500px;
    }
}

@media (max-width: 819px) {
    #moreT{
        margin: 50px 10% 10px 10%;
        width: 80%;
    }
}


#moreT p{
    background-color: #66CCFF;
    color: #fff;
    padding: 5px;
}

#moreT a{
    background-color: #66CCFF;
    text-decoration: none;
    color: #fff;
    padding: 3px;
    transition: opacity 0.3s;
}

#moreT a:hover{
    opacity: 0.7;
}


/*---------------------------------
------------PULBICIDADE------------
---------------------------------*/

#pub img{
    width: 300px;
}

@media (min-width: 820px) {
    #pub img{
        margin: 50px 0 10px 50px;
        width: 320px;
    }
}

@media (max-width: 819px) {
    #pub img{
        margin: 40px 0 10px 10%;
        width: 80%; 
    }
}


/*-----------------------------------
----------------LIVRO----------------
-----------------------------------*/


@media (min-width: 820px) {
    #liv img{
        margin-top: 30px;
        width: 120px;
        float: left;
    }
}

@media (max-width: 819px) {
    #liv img{
        margin: 50px 0 20px 30%;
        width: 40%; 
    }
}