/*
Theme Name: Drik Barbosa
Author: PH Gomes
Version: 1.1
*/

*{margin:0;padding:0;}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
* { box-sizing: border-box; }
*{margin:0;padding:0;font-family: 'Roboto', sans-serif;}
body{padding:0; overflow-x: hidden; background-color:#ffffff;color:#2c2c2c;}
a{text-decoration:none;}
li{list-style:none;}
ul{padding:0;}
h2{font-size:3.2em;margin:0 0 0.21em 0; font-family: 'Charvet'; font-weight: 900;font-style: normal;}
h3{font-size:2em;margin:0 0 0.21em 0; font-family: 'Charvet'; font-weight: 900;font-style: normal;}
h4{font-size:1.2em;margin:0 0 1em 0;}
h5{font-size:0.84em;margin:0 0 0.21em 0;}
h6{font-size:0.72em;margin:0 0 0.21em 0;}
p{margin:0 0 1.2em 0;font-size:0.88em; text-align:left;}


@font-face {
    font-family: 'Charvet';
    src: url('fonts/charvet.woff2') format('woff2'),
        url('fonts/charvet.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

.content_page img {max-width: 100%; height: auto;}


.left {float: left;}
.right {float: right;}

a.btn_link {display:block; padding:0.66em 1.66em; text-align:center; z-index: 2; color:#2c2c2c; font-size: 1em; border: 1px solid #2c2c2c; margin: 1em 0; float:right; text-transform:uppercase;}
a.btn_link:hover {background-color:#2c2c2c; color: #edece3; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}


.overlaytop {background-color:#000;}

.overlay {background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, #000));
background-image: -o-linear-gradient(bottom, transparent 0%, #000 90%);
background-image: -moz-linear-gradient(bottom, transparent 0%, #000 90%);
background-image: -webkit-linear-gradient(bottom, transparent 0%, #000 90%);
background-image: -ms-linear-gradient(bottom, transparent 0%, #000 90%);
background-image: linear-gradient(to bottom, transparent 0%, #000 90%);
-webkit-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;}

.container{display:block; margin:0 auto; max-width:990px; padding:0; clear:both; overflow:hidden;}

.header{display:block; padding: 0.64em 0; width:100%; float: left; position: fixed; top:0; left: 0; z-index: 999; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}
.updown{ background: #ea581b; border-bottom: 1px solid #ca4914; padding: 0.64em 0; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
.downup{ background: url(imgs/bg_menu.png) repeat-x; border-bottom: none; padding: 0.64em 0;}


.logomarca{display:block; max-width:30%; float:left; padding: 0.44em 0;}
.logomarca img {width:100%;height:auto;}

#menu-toggle {display:none;}
.label-toggle {display:none;}

.menu {margin:0 auto; padding:0.88em 0; display:block; }
.menu ul {padding:0; list-style:none; width:40%; margin:0 auto;}
.menu ul li {float:left; position: relative; display:inline; text-align:center; list-style:none; padding: 0; text-transform:uppercase;}
.menu ul li a {display:block; overflow:hidden; color:#dddddd; padding: 0.24em 1.44em;}
.menu ul li a:hover {color:#fff;-webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}


#home{padding:0; margin: 0 auto; width: 100%; display:block; min-height:720px; overflow:hidden; position:relative; background-size:cover; background-position: center; background-repeat: no-repeat; }
.dotpattern {position:absolute; top: 0; left: 0; z-index: 1; width:100%; min-height: 720px; height: 100%; border-color: #000000; background: transparent url("imgs/dots.png") repeat left top;}
a.btn_clipe {display:block; padding:1em 1.66em; text-align:center; z-index: 2; color:#edece3; font-size: 1.66em; border: 1px solid #edece3; position:absolute; margin: 0 auto; left:0; right:0; bottom:35%; text-transform:uppercase; max-width:30%;}
a.btn_clipe:hover {background-color:#edece3; border-color: #fff; color: #2c2c2c; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}

#bio{padding:6em 0; margin: 0 auto; width: 100%; display:block; min-height:720px; overflow:hidden; position:relative; background-color:#efeae2; }
#bio h3, #bio h1{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}

#novidades{padding:6em 0; margin: 0 auto; width: 100%; display:block; min-height:720px; overflow:hidden; position:relative; background-color:#edece3; }
#novidades h3, #novidades h1{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#novidades h3.dline, #novidades h1.dline{color:#edece3; text-shadow:0 0 2px #999888; margin:-120px 0 0 40px; z-index:1;}
#novidades ul {padding:0; margin:0 auto;}
#novidades ul li {float:left;display:block;width:33.3333%;overflow:hidden;position:relative;margin:0;border-right:2px solid #edece3;background-color:#fff; padding: 1em;}
#novidades ul li a.item_link {opacity:0.8; display:block; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position: center; min-height:330px;  -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}
#novidades ul li a.item_link:hover {opacity: 1;} 
#novidades ul li:last-child{border:none;}
#novidades ul li span {display:block;padding:0.44em;background-color:#fff;color:#2c2c2c; font-size: 0.88em; float:left; margin:0 0 0.66em;}
#novidades ul li h4{font-size:1em;font-weight:700;text-align:left;text-transform:uppercase;color:#fff;margin:0 auto;width:100%;float:left;}
#novidades ul li h4 a{color:#edece3;}
#novidades ul li h4 a:hover {color:#fff; font-weight: 700;}
#novidades .txt_novidade {z-index: 2; position: absolute; bottom: 0; left:0; right:0; margin:1em; padding:1em;}
#novidades a.btn_more {display:block; padding:0.66em 1.66em; text-align:center; z-index: 2; color:#2c2c2c; font-size: 1em; border: 1px solid #2c2c2c; margin: 1em 0; float:right; text-transform:uppercase;}
#novidades a.btn_more:hover {background-color:#2c2c2c; color: #edece3; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}


#novidades_rel{padding:6em 0; margin: 0 auto; width: 100%; display:block; overflow:hidden; position:relative;}
#novidades_rel h3, #novidades_rel h1{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#novidades_rel h3.dline, #novidades_rel h1.dline{color:#fff; text-shadow:0 0 2px #999888; margin:-120px 0 0 40px; z-index:1;}
#novidades_rel ul {padding:0; margin:0 auto;}
#novidades_rel ul li {float:left;display:block;width:33.3333%;overflow:hidden;position:relative;margin:0;border-right:2px solid #edece3;background-color:#fff; padding: 1em;}
#novidades_rel ul li a.item_link {opacity:0.8; display:block; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position: center; min-height:330px;  -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}
#novidades_rel ul li a.item_link:hover {opacity: 1;} 
#novidades_rel ul li:last-child{border:none;}
#novidades_rel ul li span {display:block;padding:0.44em;background-color:#fff;color:#2c2c2c; font-size: 0.88em; float:left; margin:0 0 0.66em;}
#novidades_rel ul li h4{font-size:1em;font-weight:700;text-align:left;text-transform:uppercase;color:#fff;margin:0 auto;width:100%;float:left;}
#novidades_rel ul li h4 a{color:#edece3;}
#novidades_rel ul li h4 a:hover {color:#fff; font-weight: 700;}
#novidades_rel .txt_novidade {z-index: 2; position: absolute; bottom: 0; left:0; right:0; margin:1em; padding:1em;}

.wp-pagenavi {margin:2em auto;display:block;}
.wp-pagenavi .pages {padding: 1em 3em;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenave .nextpostslink {padding:1em;}
.wp-pagenavi .current {background-color: #edece3; color:#2c2c2c}


#agenda { background:#e0b25c; padding:6em 0 0; position: relative; min-height:720px; overflow: hidden;}
#agenda h3{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:12;position:relative;color:#fff;text-align:right;}
#agenda h3.dline{color:#282828; text-shadow:0 0 2px #000000; margin:-120px 0 0 40px; z-index:11;}
#agenda .bg_agenda {display:block; overflow: hidden; width:50%; height:100%; background:url(imgs/bg_agenda_mob.png) no-repeat center right; padding:0; float:left; position:absolute; top:0; left:0; z-index:10;}
#agenda .relative {position:relative; z-index: 20;}
#agenda .agenda_content {display:block;float:right; width:50%; padding: 2em 1em 0em 2em;}
.texto {display:block; width:100%; float:left; padding: 0em 2em 0em 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; max-height: 420px; margin: 0 0 2em 0;}
.texto::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);background-color: #333;}
.texto::-webkit-scrollbar{width: 8px;background-color: #333;}
.texto::-webkit-scrollbar-thumb{background-color: #cdccb3;}
.item_agenda {display:block;width:100%;overflow:hidden;margin:1em auto;}
.item_agenda h4 {color:#fff;font-size:3em;margin:0;}
.item_agenda h5 {color:#333;font-size:1.66em;font-weight: 300;}
.item_agenda h6 {color:#333;font-size:1em;font-weight: 300;}


#ouca { background:#fff; padding:6em 0 0; position: relative; min-height:720px;}
#ouca h3{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#ouca h3.dline{color:#fff; text-shadow:0 0 2px #999; margin:-120px 0 0 40px; z-index:1;}
#ouca .album {display:block; overflow: hidden; width:100%; min-height:440px; padding:0; margin: 0 auto 5em;}
#ouca .cd {float:left; display:block; max-width:50%;}
#ouca .cd img {max-width:100%;}
#ouca .streaming { display: block; overflow: hidden; width: 50%; float: right; margin: 60px 0; background-color:#edece3;}
#ouca .streaming ul li {float:left;display:block;float:left;padding: 20px 20px;}


#insta { background:#da756d; padding:6em 0; margin:0 auto; position:relative;}
#insta h2 {font-size:2em; color:#edece3; text-align:center;}

#contato { background:#fff; padding:6em 0; position: relative;}
#contato h3{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#contato h3.dline{color:#fff; text-shadow:0 0 2px #999888; margin:-120px 0 0 40px; z-index:1;}

#contato .left_content, #contato .right_content { display:block;overflow:hidden;position:relative;max-width:50%;margin: 2em 0; }
#contato .right_content p { font-size:1.44em;}

#page { padding: 6em 0; margin:0 auto; position:relative; min-height:720px;}
#page h1{font-size:6em;margin:0 0 0.21em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#page h1.dline{color:#fff; text-shadow:0 0 2px #999888; margin:-120px 0 0 40px; z-index:1;}
#page .content_page {display:block; margin:2em auto;}

#post { padding: 6em 0; margin:0 auto; position:relative; min-height:720px;}
#post h1{font-size:2em;margin:0 0 1em 0;text-transform:uppercase;font-weight:700;z-index:2;position:relative;color:#2c2c2c;}
#post .content_post {display:block; margin:2em auto;}


.social {display:block; max-width:80%; float:right;}
  .social ul li {display:inline-block; float:left; padding: 0; overflow:hidden; width: 25%;}
  .social ul li img {max-width: 50%; margin: 0 auto; display:block;}



.foot {font-size:0.88em;color:#58595b;padding:2em 0;background:#ededed;}
.foot h2 {display: block; width:100%; font-size: 1.44em; margin:0 auto; text-align:left; text-transform: uppercase; font-weight:normal; }

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline
}

.button, button, input[type=button], input[type=reset],
input[type=submit] {
    margin:1em auto;
    font-size: 1.44em;
    border: 1px solid #edece3;
    background: #fff;
    color: #2c2c2c;
    cursor: pointer;
    padding: .618em 1.387em;
    text-decoration: none;
    font-weight: normal;
    text-transform:uppercase;
    text-shadow: none;
    display: inline-block;
    outline: 0;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3)
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

.input-text, input[type=text], input[type=email], input[type=url],
input[type=password], input[type=search], textarea {
    padding: .88em;
    background-color: #fff;
    color: #2c2c2c;
    outline: 0;
    border: 1px solid #edece3;
    box-sizing: border-box;
}

.input-text:focus, input[type=text]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=password]:focus, input[type=search]:focus,
textarea:focus {
    background-color: #edece3;
    color: #2c2c2c;
}

.button:hover, input[type="submit"]:hover{
    background-color: #edece3;
    color: #2c2c2c;
}

textarea {
    padding-left: .857em;
    vertical-align: top;
    width: 100%
}

label {
    font-weight:bold;
    text-transform:uppercase;
    font-size: 0.88em;
    width:100%;
    margin:5px 0;
    display: block;
}

label.inline input {
    width: auto
}

fieldset {
    padding: 0;
    border: 0
}

fieldset legend {
    font-weight: 700
}

[placeholder]:focus::-webkit-input-placeholder {
    -webkit-transition: opacity .5s .5s ease;
    -moz-transition: opacity .5s .5s ease;
    transition: opacity .5s .5s ease;
    opacity: 0
}

    .video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 989px) {

  .container {max-width: 90%;}

  .header {
    padding: 0.44em 0;
  }

  .header .container {max-width: 100%;}

  .logomarca{max-width:70%; padding: 0.44em 1em;}
  .menu {padding:0.44em; position:absolute; right:0; top:0;background: rgba(0, 0, 0, 0.5)}
  .menu ul {width:100%; height:0; list-style-type: none; opacity: 0; transition: all 1s ease; visibility: hidden; display:none;}
  .menu ul li.menu-item {padding:0.44em 0; width:100%; border-bottom: 1px solid #333333; background-color: rgba(0, 0, 0, 0.8);}
  .menu ul li.menu-item a {background:none; padding: 0.44em 0; font-size: 1em;}
  .menu ul li.menu-item a:hover {background:none;}
  
  #menu-toggle:checked ~ ul { opacity:1; visibility:visible; display:block; }

  .label-toggle { background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%); cursor: pointer; display: block; height: 35px; margin: 0em auto; width: 35px;}

  .foot h2, .foot p {text-align:center;}

  .left, .right {float:inherit;}

  #home {min-height:320px;}
  a.btn_clipe {max-width: 80%;}

  #novidades h3, #novidades h1, #agenda h3, #agenda h1, #ouca h3, #ouca h1, #contato h1, #contato h3, #page h1, #novidades_rel h1 {font-size:2.88em;}
  #novidades h3.dline, #novidades h1.dline, #agenda h3.dline, #agenda h1.dline, #ouca h1.dline, #ouca h3.dline, #contato h1.dline, #contato h3.dline,#page h1.dline, #novidades_rel h1.dline {margin: -55px 0 0 10px;}
  #novidades ul li {width:100%;border-right:none;border-left:none;border-bottom:2px solid #edece3;}
  #novidades a.btn_more {width:100%;}

  .bg_agenda {display:none;}
  #agenda .agenda_content {width:100%;}
  #agenda .bg_agenda {position:relative;width:100%;min-height:400px;background:url(imgs/bg_agenda_mob.png) no-repeat bottom center;}

  #ouca {padding: 6em 0 4em;overflow:hidden;}
  #ouca .album {height: inherit;}
  #ouca .cd {max-width:100%;}
  #ouca .streaming ul li {width:48%;padding:0;margin:1%;}
  #ouca .streaming ul li img {max-width:100%; height:auto;}
  #ouca .streaming {width: 100%; margin:0 0;}


  #contato .left_content, #contato .right_content {max-width:100%;}

  #novidades_rel ul li {width:100%;border-right:none;border-left:none;border-bottom:2px solid #edece3;}
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

@media (min-width:420px) and (max-width: 780px) { 
  #home {}
  .wp-block-image .alignright {float:inherit !important; margin: 1em auto;}
  .social {max-width:100%;}
 }

@media (max-width: 420px) {
  #home {}
  .wp-block-image .alignright {float:inherit !important; margin: 1em auto;}
  .social {max-width:100%;}
}