/*ESTILOS DESIGN*/

.portfolio-content{background-color: #ececec!important;}

.title-black{color: #0b0b0b!important; text-transform: uppercase;}
h4{ font-size: 13px;
    font-weight: 300;}


.accordion {
    background-color: white;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 1px solid black;
    /*border-bottom:none;*/
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    display: inline-block;
    margin-bottom: 0px;

  }

    .accordion:hover{background-blend-mode: hue;
    	/*background: repeating-linear-gradient(-45deg, transparent, transparent 2px, black 4px);*/
    	
    }
 .black:hover > h2, .black:hover > small{
      color: black!important;
    }
  

        .sobre-projeto::before {
      /*background-color: black;*/
      color: black;
      content: "SOBRE O PROJETO +";
      font-weight: 300;
      font-size: 13px;
      padding: 5px;
      float: right;
      margin-left: 13px;
      z-index: 1000;
  /*    outline: 1px solid black;
      outline-offset-top: 15px;
      box-shadow: -4px 4px;*/
}

.panel {
            top: -300px;
            width: 100%;
            padding: 0 18px;
            margin-bottom: 45px;
            display: none;
            background-color: white;
            overflow: hidden;
            -webkit-transition: top 400ms ease;
            -moz-transition: top 400ms ease;
            -ms-transition: top 400ms ease;
            -o-transition: top 400ms ease;
            transition: top 400ms ease;

        }

        .frame-cor{
  margin-top:-16px;
  margin-bottom: 20px;
  border:1px solid black;
  /*border-top:20px solid #fbe34c;    
  border-bottom: 40px solid #fbe34c;*/
}
/* style TABS */
.TabControlvar(--red-dmstkfest){ width:100%; overflow:hidden; }
.TabControl #tabs{wvar(--red-hot)idth:100%; overflow:hidden; cursor:pointer;}
.TabControl #content{ overflow: hidden;background-color: white;top: -300px;}
.TabControl .abas{display:inline;}
.TabControl .abas li{float:left; }
.aba{width:auto; height:50px;text-align:center; padding:5px;text-transform: uppercase; }
.ativa{width:auto; height:30px;text-align:center; padding:5px; font-color:red;border-bottom: 1px solid black;
    transition: width linear .3s;}
.ativa span > h6, .selected span > h6{}
.TabControl .conteudo{width:auto;  background:white; display:none;  color:#000; padding-bottom: 20px;}

 .conteudo{
    margin-top: 20px;
  }

  small {
  font-size: 12px;
  left: 10px !important;
  position: inherit;
  font-weight: lighter !important;
  bottom: 0;
}

.topic-text{margin-bottom: 33px!important;}


/*PAGINTATION*/
  ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 30px 0px;
}

ul.pagination li {display: inline-block; padding-top: 0px!important;}
.prev{position:absolute; left:0px; margin-left:15px; margin-bottom: 20px;}
.next{position:absolute; right:0px; margin-right:15px; text-align:right;margin-bottom: 20px;}

ul.pagination li a {
    color: black;
 
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 18px;
}

ul.pagination li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}


/*RESPONSIVE*/

.mar-top-minus{margin-top: -30px !important;}

@media all and (max-width: 480px) {

  ul.pagination li {
    font-size: 10px;
}
  .mar-top-minus{
    margin-top: -30px !important;
    font-size: 41px;
  }
        }

        .accordion h6{padding-top: 15px;}
        .active, .accordion  a:hover {background-color: #fff;}
        .arrow {
            background-position: 100% center;
          background-repeat: no-repeat;
          background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgNTAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMjIuNiw4YzAtMC4xLDAtMC4yLDAuMS0wLjJsMC41LTAuNWMwLjEtMC4xLDAuMS0wLjEsMC4yLTAuMWMwLjEsMCwwLjIsMCwwLjIsMC4xbDMuNywzLjdsMy43LTMuN2MwLjEtMC4xLDAuMS0wLjEsMC4yLTAuMXMwLjIsMCwwLjIsMC4xTDMyLDcuOEMzMiw3LjksMzIuMSw4LDMyLjEsOGMwLDAuMSwwLDAuMi0wLjEsMC4ybC00LjQsNC40Yy0wLjEsMC4xLTAuMSwwLjEtMC4yLDAuMXMtMC4yLDAtMC4yLTAuMWwtNC40LTQuNEMyMi43LDguMiwyMi42LDguMSwyMi42LDh6Ii8+PC9zdmc+");
        }
       
       
        .latest {
            border-top: 1px solid black !important;
            padding: 18px;
            width: 100%;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            display: inline-block;
            margin-bottom: 0px;}
        .panel {
            top: -300px;
            width: 100%;
            padding: 0 18px;
            margin-bottom: 45px;
            display: none;
            background-color: white;
            overflow: hidden;
            -webkit-transition: top 400ms ease;
            -moz-transition: top 400ms ease;
            -ms-transition: top 400ms ease;
            -o-transition: top 400ms ease;
            transition: top 400ms ease;

        }

        .panel-topics {
            top: -300px;
            width: 100%;
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
            -webkit-transition: top 400ms ease;
            -moz-transition: top 400ms ease;
            -ms-transition: top 400ms ease;
            -o-transition: top 400ms ease;
            transition: top 400ms ease;
            border: 1px solid black;
           /* border-bottom: none;
            border-top:none;*/
        }

       
        .accordion:target + .panel{
          width: 100%;
            display: block;
            -webkit-transition:  top 400ms ease;
            -moz-transition: top 400ms ease;
            -ms-transition: top 400ms ease;
            -o-transition: top 400ms ease;
            transition: top 400ms ease;
            animation: highlight 1s ease;
            -webkit-animation: highlight 1s ease;
            -moz-animation: highlight 1s ease;
            -ms-animation: highlight 1s ease;
    }


    @keyframes highlight {
      0% {background-color: #eee;}
      100%{background-color: white;}
    }


.video-container {
  /*position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;*/

  position: relative;
padding-bottom: 109%;
padding-top: 70%;
height: 0;
margin-top: -7%;
margin-bottom: -21%;
overflow: hidden;
background-color: black;
}

.video-container video,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: -7%;
}