body {
  margin-top: 60px;
  background-color: #000;
  background-image: url("../img/mapa.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
    background-position-x: center;	
  background-position-y: 50px;	
  background-size: cover;
}

body.oudg {
    background-image: url("../img/mapa2.png");
	background-position-y: inherit;
}
body.lendas {
    background-image: url("../img/mapa3.png");
	background-position-y: center;
}

body.livro-1 {
    background-image: url("../img/livro1-fundo.jpg");
}

body.livro-2 {
    background-image: url("../img/livro2-fundo.jpg");
}

body.livro-3 {
    background-image: url("../img/livro3-fundo.jpg");
	background-position-x: inherit;
}

body.livro-P {
    background-image: url("../img/livroP-fundo.jpg");
}

body.monstros {
    background-image: url("../img/livroOMNB-fundo.jpg");
}

body.livro-OMNB {
    background-image: url("../img/livroOMNB-fundo.jpg");
}

body.book-1 {
    background-image: url("../img/book1-fundo.jpg");
}

body.book-2 {
    background-image: url("../img/book2-fundo.jpg");
}

body.app {
    background-image: url("../img/mapa.png");
	background-position-y: center;
}

body.jogodado {
    background-image: url("../img/mapa.png");
	background-position-y: inherit;
}

.hidden {
    display:
}

.box {
    background-color: rgba(0, 0, 0, 0.77);
    border: 4px solid #000;
    color: #ccb781;
    display: inline-block;
    padding: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: justify;
    width: 100%;
}

.box2 {
    background-color: rgba(0, 0, 0, 0.6);
    border: 4px solid #000;
    color: #fff;
    display: inline-block;
    padding: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: justify;
    width: 100%;
}

.box h2 {
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 20px;
    text-transform: uppercase;
}

.box .obs {
    text-align: left;
}

.social {
    background-color: rgba(0, 0, 0, 0.77);
    border: 4px solid #000;
    margin: 20px 0 20px 0;
    padding: 20px;
    text-align: center;
}

.social iframe {
    margin-right: 20px;
}

.button {
    background-color: rgba(210, 14, 32, 0.53);
    border: 4px solid #000;
    color: black;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin: 20px 0 20px 0;
}

.button:hover {
    background-color: rgba(210, 14, 32, 0.53);
    color: #ccb781;
    text-decoration: none;
}

.livro-capa {
    border: 4px solid #000;
    width: 100%;
    margin-bottom: 4px;
}

.app-capa {
    border: 4px solid #000;
    margin-bottom: 4px;
}

.autor img, .sinopse img {
    border: 4px solid #000;
    margin-right: 10px;
    float: left;
    width: 150px;
}

.novidades iframe {
    margin-top: 0px;
    width: 4210px;
    height: 500px;
}

.resenhas img {
    margin-bottom: 10px;
}

.trailer iframe {
    width: 332px;
    height: 184px;
}

.loja img {
    border: 4px solid #000;
    float: left;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 50%;
}

.loja .preco {
    margin: 10px 0 10px 0;
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.loja .qtd {
    display: block;
	margin: 0 0 0 0;
    font-size: 14px;
}
.loja .selecione {
    display: none;
    background-color: #dd0000;
    padding: 10px;
    text-align: center;
}

.loja .selecione2 {
    display: none;
    background-color: #dd0000;
    padding: 10px;
    text-align: center;
}

.loja .pagamento1 {
    display: none;
    background-color: #339933;
    padding: 10px;
    text-align: center;
}

.loja .pagamento2 {
    display: block;
    background-color: #990000;
	color: black;
    padding: 10px;
    text-align: center;
}
.loja .pagamento2:hover {
    color: #ccb781;
    text-decoration: none;
}
.loja .outro {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}

.loja h3 {
    margin-top: 0;
    text-transform: uppercase;
}

.loja .produto {
    margin-top: 10;
    text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;
}

.loja .quants { 
    width: 30px;
    color: black;
	background-color: #FFFF99;
}

.loja .themail {
    width: 100%;
    color: black;
	background-color: white;
	margin-top: 20px;
}


.loja button {
    color: black;
    width: 20px;
    height: 25px;
}

.loja em {
    display: block;
    margin-top: 20px;
	font-size: 14px;
    text-align: left;
	font-style: italic;
}

.loja p {
    text-align: left;
}


@media (min-width: 768px) {
    body, html {
      margin-top: 60px;
    }

    .autor img, .sinopse img {
        width: 150px;
    }
	
	.col-md-4 {
		width: 60%;
		min-height: 270px;
	}

    .resenhas img {
        max-width: 218px;
        min-height: 104px;
        margin-bottom: 20px;
    }
	
    .trailer iframe {
        width: 672px;
        height: 384px;
    }

    .novidades iframe {
        margin-top: 0px;
        width: 500px;
        height: 500px;
    }
}

@media (min-width: 992px) {
    body, html {
      margin-top: 60px;
    }

    .box {
        font-size: 18px;
    }

 	.col-md-4 {
		width: 33.33%;
		min-height: 1px;
	}
	   .autor img, .sinopse img {
        width: 250px;
    }

    .pitaco img {
        width: 100%!important;
    }

    .pitaco2 img {
        width: 320px!important;
		height: 210px!important;
    }

    .trailer iframe {
        width: 1092px;
        height: 624px;
    }
.dropdown-menu1 {
    margin-top: -28px!important;
   }
}

.outro {
     position: relative;
    }
.dropdown-menu1 {
    top: 0;
    left: 100%!important;
    margin-top: 0!important;
   }

   
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
    outline: 0;
	}   
	
@media (min-width: 440px) {
	.col-md-4 {
		width: 60%;
		min-height: 270px;
	}
	
@media (min-width: 1000px) {
	.col-md-4 {
		width: 33.33%;
		min-height: 220px;
	}