@font-face{
    font-family: univers55;
    src: url('fonte/Univers55.otf');
}

@font-face{
    font-family: univers45;
    src: url('fonte/Univers45b.otf');
}

@font-face{
    font-family: univers59;
    src: url('fonte/Univers59.otf');
}

@font-face{
    font-family: univers45l;
    src: url('fonte/Univers45l.otf');
}

a {
    font: 33px/40px "univers59", sans-serif;
}

h1 {
    font: 33px/40px "univers59", sans-serif;
}

p {
    font: 16px/20px "univers55", sans-serif;
}

h2 {
    font: 16px/20px "univers45", sans-serif;
}

h3 {
    font: 16px/20px "univers59", sans-serif;
}


* {
	margin: 0.5%;
	padding: 0;
}



/*------------------------------
---------MOTOR DE BUSCA---------
------------------------------*/


#___gcse_0{
    margin-top: 10px;
    z-index: 9999;
}





/*------------------------------
---------BACKGROUND-------------
------------------------------*/


body.mhome {
    background-image: url("imagens/fundo.png");
    background-repeat: repeat-y;
    background-size:cover;
   
}

body.mdesign {
    background-image: url("imagens/fundod.png");
    background-repeat: repeat-y;
    background-size:cover;
}



body.mdesign1 {
    background-image: url("imagens/fundod2.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mphoto {
    background-image: url("imagens/fundop.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mphoto1 {
    background-image: url("imagens/fundop1.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mfilm {
    background-image: url("imagens/fundof.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mfilm1 {
    background-image: url("imagens/fundof1.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mtv {
    background-image: url("imagens/fundotv.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mtv1 {
    background-image: url("imagens/fundotv1.png");
    background-repeat: repeat-y;
    background-size:cover;
}


body.mtech {
    background-image: url("imagens/fundot.png");
    background-repeat: repeat-y;
    background-size:cover;
}

body.mtech1 {
    background-image: url("imagens/fundot1.png");
    background-repeat: repeat-y;
    background-size:cover;
}





/*-----------------------------
----------MENU-DE-TOPO---------
-----------------------------*/

/*----resize-----*/

@media (min-width: 820px) {
    span.tsmall {display:none}
}

@media (max-width: 819px) {
    span.tbig {display:none}
}


#menu{
    margin: -0.5%;
    padding: 0.5%;
    margin-left: 0.6%;
    position: fixed;
    z-index: 999;
	left: 0;
	top: 0px;
	width: 100%;
	background: #fff;
}



#menu ul {

    list-style: none;
}

#menu ul li {
    float: left;
    white-space: nowrap;
}

#menu ul li a {
    text-decoration: none;
    color: #C0C0C0;
    transition: color 0.3s;
}

#menu .red a:hover{
    color: #C00000;
}

#menu .blue a:hover{
    color: #000066;
}

#menu .green a:hover{
    color: #339933;
}

#menu .orange a:hover{
    color: #FF9900;
}

#menu .lblue a:hover{
    color: #66CCFF;
}

#menu img{
    transition: -webkit-filter 0.3s;
    -webkit-filter: opacity(40%);
}

#menu img:hover {
    color: #000;
    -webkit-filter: opacity(100%);
}

/*---------menu selecionado--------------*/

#menu .sred a {
    color: #C00000;
}

#menu .sblue a {
    color: #000066;
}

#menu .sgreen a {
    color: #339933;
}

#menu .sorange a {
    color: #FF9900;
}

#menu .slblue a {
    color: #66CCFF;
}



/*------------------------------
-------------BODY---------------
------------------------------*/

#content{
    margin-top: 83px;
    animation: fadein 1s;
}


/*------------------------------
----------BUTONS----------------
------------------------------*/

@media (min-width: 820px) {


    
#butons img{
    float: left;
    margin-bottom: 0%;
    width: 14%;
    margin: 0 5% 0 0;
    transition: margin 0.3s, -webkit-filter 0.3s, -moz-filter 0.3s, -o-filter 0.3s, -ms-filter 0.3s, width 0.3s, opacity 0.3s;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    opacity: 0.8;
}

#butons img:hover {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    opacity: 1;
    width: 19%;
    margin: 0 0% 0 0;
}    
    
    
#butons{
    margin-left: 130px;
}
    
#high1{
    margin: 50px 0 50px 130px;
    width: 80%;
    float:left;
}
#contentd{
    margin-top: 130px;
    animation: fadein 1s;
}
}



@media (max-width: 819px) {
    
    
    #butons img{
    float: left;
    margin-bottom: 0%;
    width: 50%;
    margin: 0 5% 0 25%;
    transition: margin 0.3s, -webkit-filter 0.3s, -moz-filter 0.3s, -o-filter 0.3s, -ms-filter 0.3s, width 0.3s, opacity 0.3s;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    opacity: 0.8;
}

#butons img:hover {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    opacity: 1;
    width: 70%;
    margin: 0 0% 0 15%;
} 
    
    #high1{
        margin: 50px 10% 100px 10%;
        width: 80%;
    }
    #contentd{
        margin-top: 0;
        animation: fadein 1s;
    }
}





@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



#high1 p{
    background-color: #fff;
    padding: 10px;
    margin-bottom: -3px;
}

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


#high1 a:hover{
    background-color: #000;
    padding: 5px 12px 5px 10px;
}


/*-------------------------------------
---------------BUTONS------------------
-------------CAREGADONS----------------
-------------------------------------*/






/*------------------------------
---------PAGINAS TEMAS---------
------------------------------*/

/*----DESIGNNNNNN-----------------------------*/

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

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


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

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

#topic1 p{
    background-color: #fff;
    padding: 10px;
}



/*----PHOTOOOOOOOO-----------------------------*/

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

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

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

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

#topic2 p{
    background-color: #fff;
    padding: 10px;
}


/*----FILMMMMMMMMMMMMM-----------------------------*/

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

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

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

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

#topic3 p{
    background-color: #fff;
    padding: 10px;
}

/*----TVVVVVVVVVVVVVVVVVVVV-----------------------------*/

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

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

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

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

#topic4 p{
    background-color: #fff;
    padding: 10px;
}



/*----TECHHHHHHHHHHHHHHH-----------------------------*/

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

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

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

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

#topic5 p{
    background-color: #fff;
    padding: 10px;
}