@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Oswald');

/****************************** BASE CONFIG *********************************/
body {
	background: #dddbce url(../images/bg.jpg);
	font-family: Helvetica, Arial, sans-serif;
}

@font-face { font-family: 'Oswald', sans-serif; }

.fix{ position: fixed !important; top: 0; left: 0; z-index: 9; }

.title{	font-family: 'Oswald', sans-serif !important; letter-spacing: 2px; }

.line-break{
	height: 1px !important;
	width: 100%;
	margin: 20px 0 !important;
	display: block;
	background-image: linear-gradient(to right, rgba(40,75,110,0), rgba(40,75,110,.5), rgba(40,75,110,0));
	background-image: -ms-linear-gradient(to right, rgba(40,75,110,0), rgba(40,75,110,.5), rgba(40,75,110,0));
}


/***************** HEADER, POSTER, FOOTER, NAVIER, SLIDER *******************/
#head{ max-width: 1000px; }

#post{
	max-width: 1000px;
	margin-top: 40px;
	margin-bottom: 40px;
	min-height: 50vh;
}

#foot{ width: 1000px; }

#navi{ width:   100%; }

#slid{ width:   100%;}
#slider {overflow: hidden !important; }

#footer{ background: #663910; }

.sticky {
  position: fixed;
  top: 0;
  width: 100%; z-index: 9;
}
#poster, #footer{
	border-top: 8px solid #000;
}
#poster{
	margin-bottom: 64px;
}
#footer{
	bottom: 0;
}
/* CONFIGURAÇOES DO CIFRADOR*/
#musica{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	border: 0;
	width: calc(100% - 20px);
	max-width: 1000px;
}

pre{
	position: relative;
	padding: 0;
	margin: 0 !important;
	border: 0;
	padding-bottom: 50px;
}

pre span{
	font-family: Courier New;
}

#musica > a.favoritos, #musica > a.partitura, #musica > a.coleciona, #musica > a.alteracao{
	position: absolute;
	background: #ff6800;
	width: 20px;
	height: 20px;
	padding: 2px;
	border-radius: 3px;
	cursor: pointer;
	background-position: center;
	background-size: 20px;
	background-repeat: no-repeat;
}


.picker-menu{
	position: absolute;
	background: none;
	height: 32px;
	top: 0;
	right: 0;
}

.picker-menu > a{
	position: relative;
	display: inline-block;
	background-color: #ff6800;
	width: 32px;
	height: 32px;
	padding: 2px;
	border-radius: 3px;
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	transition: .25s ease-in-out all;
}

.picker-menu > a:hover{
	-webkit-box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.6);
	transition: .25s ease-in-out all;
}

textarea{
	margin: 0;
	font: inherit;
	color: inherit;
}

textarea{
	overflow:auto;
}

textarea{
	resize: vertical;
	font-family: Courier New;
	width: 100% !important;
}

textarea.letra{
	min-height: 250px;
}
textarea.letra:focus{
	background-color: #FFF !important;	
}

/*********************** LARGURA DOS GRIDS E ITEMS **************************/
.grid-01 { width:  8.3333333333%; }
.grid-02 { width: 16.6666666666%; }
.grid-03 { width: 25%; }
.grid-04 { width: 33.3333333333%; }
.grid-06 { width: 50%; }
.grid-08 { width: 66.6666666666%; }
.grid-09 { width: 75%; }
.grid-12 { width: 100%; }

.itens-04{ width: 25%;}
.itens-03{ width: 33.3333333333%; }
.itens-02{ width: 50%; }
.itens-01{ width: 100% !important; }

/******************** CONFIGURAÇÕES DOS ITENS DA HEADER *********************/
.header-logo{
	background: none;
	position: relative;
	display: block;
	width: 400px;
	float: left;
}

.logo {
	width: 100%;
	position: relative;
	border-radius: 0px;
	display: block;
	margin: 0 auto;
	margin-top: 20px;
}

.logo img{
	max-width: 100%;
	min-width: 100%;
	border: none;
}

.header-content{
	background: none;
	position: relative;
	display: block;
	width: calc(100% - 400px);
	float: left;
}

.header-menu{
	background: none;
	position: relative;
	display: block;
	padding: 1em;
	width: calc(100% - 2em);
}

.header-menu > a{
	background: none;
	position: relative;
	padding: .5em;
}

.header-cart{
	background: none;
	position: relative;
	display: block;
	padding: .5em 1em;
	width: calc(100% - 2em);
}

.header-cart-botton{
	background: #7dc11f;
	position: relative;
	display: block;
	padding: 1em;
	height: 1em;
	border-radius: 12px;
	overflow: hidden;
}

.header-cart-botton > a{
	background: #ff6800;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 3em;
	border-radius: 12px;
}

.header-cart-botton > a:before{
	background: url(../images/1.png) center center no-repeat;
	background-size: 48px;
	position: relative;
	content: '';
	height: 3em;
	width: 3em;
	display: block;
}


.header-search input.search {
	background: #FFF;
	position: relative;
	width: 100%;
	display: block;
	float: left;
	margin: 0 !important;
	border: 0 !important;
	padding: 10px !important;
	height: 50px !important;
	border-radius: 10px !important;
}

.header-search a.header-search-botton{
	position: absolute;
	top: calc(50% - 25px);
	right: 16px;
	width: 50px;
	height: 50px;
	display: block;
	cursor: pointer;
	border-radius: 10px;
	background: #4a5f68 url(../images/4.png) center center no-repeat;
}

.header-search {
	background: rgba(199,109,111,0.00);
	background: none;
	position: relative;
	display: block;
	padding: 0 1em;
	width: calc(100% - 2em);
	height: 70px;
	margin: 0;
}

input[name="search"] {
	background: rgba(250,250,250,1.00);
	position: relative;
	width: 100%;
	height: 50px;
	display: block;
	margin: 0 !important;
	border: 0 !important;
	padding: 10px 15px !important;
	border-radius: 10px;
	box-sizing: border-box !important;
	outline: none;
}

input[name="search"] ~ a {
	position: absolute;
	top: calc(50% - 35px);
	right: 1em;
	width: 50px;
	height: 50px;
	display: block;
	cursor: pointer;
	border-radius: 10px;
	background: #ff6800 url(../images/4.png) center center no-repeat;
}

.header-midias{
	background: none;
	position: relative;
	width: 100%;
	display: block;
	padding: 0;
}

.header-midias a{
	background: none;
	position: relative;
	width: 64px;
	height: 64px;
	margin: 16px;
	display: inline-block !important;
}

.shadow{
	box-shadow:     0px 6px 8px -7px rgba(0,0,0,.4), 0px 6px 8px -7px rgba(0,0,0,.4), 0px 6px 8px -7px rgba(0,0,0,.4);
	-ms-box-shadow: 0px 6px 8px -7px rgba(0,0,0,.4), 0px 6px 8px -7px rgba(0,0,0,.4), 0px 6px 8px -7px rgba(0,0,0,.4);
}
.shadow-down{
	box-shadow:     -3px 0px 8px 0px rgba(0,0,0,.1), -3px 0px 8px 0px rgba(0,0,0,.1), -3px 0px 8px 0px rgba(0,0,0,.1);
	-ms-box-shadow: -3px 0px 8px 0px rgba(0,0,0,.1), -3px 0px 8px 0px rgba(0,0,0,.1), -3px 0px 8px 0px rgba(0,0,0,.1);
}

.lnk-back{
	margin: 8px;
	width: calc(100% - 16px);
}

/******************* CONFIGURAÇÕES DOS ITENS DA FOOTER **********************/
.foot-container{
	background: none;
	position: relative;
	margin: 10px;
}

.foot-title, .foot-lines{
	position: relative;
	display: block;
	margin-bottom: 1px;
	padding: .4em 0;
}

div.has-icons{
	/*padding-left: 72px;
	padding-top: 20px;
	padding-bottom: 20px;*/
	padding-left: 26px;
}

div.has-gliph{
	padding-left: 26px;
}

div.has-icons::before{
	position: absolute;
	left: 0;
	bottom: calc(50% - 8px);
	display: block;
	width: 20px;
	height: 20px;
	content: ' ';
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}

div.has-gliph::before{
	position: absolute;
	left: 0;
	bottom: calc(50% - 10px);
	display: block;
	width: 20px;
	height: 20px;
	content: ' ';
	background-size: 40px 200px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/look.png);
}


div.has-icons.locat::before {background-image: url(../images/Localizacao.png); }
div.has-icons.email::before {background-image: url(../images/email.png); }
div.has-icons.telef::before {background-image: url(../images/Telefone.png); }
div.has-icons.whats::before {background-image: url(../images/Whats.png); }


div.has-gliph.limpo::before {background-position: -20px   20px; }
div.has-gliph.email::before {background-position: -20px    0px; }
div.has-gliph.telef::before {background-position: -20px  -20px; }
div.has-gliph.locat::before {background-position: -20px  -40px; }
div.has-gliph.whats::before {background-position: -20px -160px; }

.utube::after,.insta::after,.fbook::after,.whats::after {
	position: absolute;
	left: calc(50% - 32px);
	top: calc(50% - 32px);
	display: block;
	width: 64px;
	height: 64px;
	content: '';
	background-size: 64px;
}
.utube::after { background-image: url(../images/youtube.png); }
.insta::after { background-image: url(../images/instagram.png); }
.fbook::after { background-image: url(../images/facebook.png); }
.whats::after { background-image: url(../images/whatsapp.png); }

/***************************** CAMERA SLIDER ********************************/
.camera_prev, .camera_next {
	cursor: pointer;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	z-index: 50;
	outline: 0;
}

.camera_prev, .camera_next{
	background: #000;
	height: 32px;
	width: 32px;

	border: 3px solid #FFF;

	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;

	opacity: 0.5;
	filter: alpha(opacity=50);

	transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
}

.camera_prev {
	top: 50% !important;
	left: 20px !important;
}

.camera_next {
	top: 50% !important;
	right: 20px !important;
}

.camera_prev::after, .camera_next::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	top: 6px;
}

.camera_prev::after {
	left: 0;
	border-right-color: #ffffff;
}

.camera_next::after {
	right: 0;
	border-left-color: #ffffff;
}

/******************************* PAGINADOR **********************************/

#paginador a{
	background: #f97700;
}
#paginador a:hover{
	background: #b95d08;
}


/********************************* MENUS ************************************/
 #mainmenu {
 	width: 100%;
 }

 #mainmenu > ul{
 	width: 1000px;
 }

 #mainmenu {
 	background: #f97700;
 	background: linear-gradient(#f97700, #663910);
 	background: -o-linear-gradient(#f97700, #663910);
 	background: -ms-linear-gradient(#f97700, #663910);
 	background: -moz-linear-gradient(#f97700, #663910);
 	background: -webkit-linear-gradient(#f97700, #663910);
 }

 #mainmenu #menu-button {
 	background: #f97700;
 	background: linear-gradient(#f97700, #663910);
 	background: -o-linear-gradient(#f97700, #663910);
 	background: -ms-linear-gradient(#f97700, #663910);
 	background: -moz-linear-gradient(#f97700, #663910);
 	background: -webkit-linear-gradient(#f97700, #663910);
 }

 #mainmenu > ul > li {
 	width: 16.6666666666%;
 	text-align: center;
 }

 #mainmenu > ul > li > a {
 	border-right: 1px solid rgba(80, 80, 80, 0.00);
 	color: #DDDDDD;
 }

 #mainmenu > ul > li:hover > a, #mainmenu > ul > li > a:hover, #mainmenu > ul > li.active > a {
 	font-weight: 500;
 	background: rgba(0, 0, 0, 0.0);
 }
 /**/
 #mainmenu > ul > li:hover {
 	box-shadow: inset 0 -3px 0 #85B030;
 }


@media all and (max-width: 1024px),
only screen and (max-width: 1024px){

	#head{ width: 100%; }

	#post{ width: calc(100% - 2em); }

	#foot{ width: 100%; }

	.header-logo{ width: 45%; }

	.header-content{ width: 55%; }

	.grid-01, .grid-02 { width: 50%; }

}

@media all and (max-width: 640px),
only screen and (max-width: 640px){

	.header-logo{ width: 100%; }

	.header-content{ width: 100%; }

	.grid-01, .grid-02 { width: 100%; }
	.grid-03, .grid-04 { width: 100%; }
	.grid-06, .grid-08, .grid-09, .grid-12 { width: 100%; }


	#poster{
		margin-bottom: 0;
	}
	#footer{
	   position: relative;
		bottom: 0;
	}

}