/* Первые табы ПОРТФОЛИО  *//////////////////////


.tabs {
  font-size: 0;
  margin: 0;

}

.tabs:after {
  clear: both;
  content: '';
  display: table;
}

.tabs .tab {
  display: inline;
}

.tabs .tab-label {
cursor:pointer;
  background: var(--color1); 
  border: 0px solid #ccc; 
  border-bottom: 2px dashed var(--color2); 
 
  display: inline-block;
  font: 24px Roboto;
  font-weight:600;
  color:var(--color3);
  left: 1px;
  margin-left: -1px;
  padding: 10px; 
  position: relative;
  vertical-align: bottom;
}
@media screen and (max-width: 600px) {
 .tabs .tab-label { font: 14px Roboto;}
}

.tabs .tab > [type="radio"] {
  clip: rect(0 0 0 0);
  height: 1px;
  opacity: 0;
  position: fixed;
  width: px;
  z-index: -1;
}

.tabs .tab-panel {
  display: inline;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 0;
  width: 0;
}

.tabs .tab-content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding: 0 ;
  border:0;
  float: left;
  font-size: 16px;
  font-size: 1rem;
  margin-top: -1px;
  width: 100%;
 
}





.tabs .tab [type="radio"]:checked + .tab-label {

  background: var(--color3);
  color:var(--color1);
   border-bottom: 0px solid var(--color1);
  padding-bottom: 11px;
  z-index: 1;
}

.tabs .tab [type="radio"]:checked ~ .tab-panel {
  display: inline;
}



/*---------------------Табы АЛЬБОМ --------------------------*/


.tab-frame{display:block; width:100%; max-width:1200px; margin:0 auto; text-align:center} 
.tabl{width:50%}
.tabr{width:50%}
 
.tab-frame input{ display:none;}
.tab-frame label{ display:block; display:inline-block;padding:5px 10px; cursor:pointer; border:1px solid #ddd; border-bottom:3px solid var(--color1);}
.tab-frame input:checked + label{ background:var(--color1); color:white; cursor:default}
.tab-frame .tab{ margin:0 auto; max-width:1200px; display:none; padding:5px 10px;clear:left; text-align:center;}

.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
.tab-frame input:nth-of-type(4):checked ~ .tab:nth-of-type(4),
.tab-frame input:nth-of-type(5):checked ~ .tab:nth-of-type(5),
.tab-frame input:nth-of-type(6):checked ~ .tab:nth-of-type(6),
.tab-frame input:nth-of-type(7):checked ~ .tab:nth-of-type(7),
.tab-frame input:nth-of-type(8):checked ~ .tab:nth-of-type(8),
.tab-frame input:nth-of-type(9):checked ~ .tab:nth-of-type(9),
.tab-frame input:nth-of-type(10):checked ~ .tab:nth-of-type(10),
.tab-frame input:nth-of-type(11):checked ~ .tab:nth-of-type(11),
.tab-frame input:nth-of-type(12):checked ~ .tab:nth-of-type(12),
.tab-frame input:nth-of-type(13):checked ~ .tab:nth-of-type(13),
.tab-frame input:nth-of-type(14):checked ~ .tab:nth-of-type(14),
.tab-frame input:nth-of-type(15):checked ~ .tab:nth-of-type(15),
.tab-frame input:nth-of-type(16):checked ~ .tab:nth-of-type(16),
.tab-frame input:nth-of-type(17):checked ~ .tab:nth-of-type(17),
.tab-frame input:nth-of-type(18):checked ~ .tab:nth-of-type(18),
.tab-frame input:nth-of-type(19):checked ~ .tab:nth-of-type(19){ display:block;}


/*----------------------ТАБЫ ПРЕИМУЩЕСТВА--------------------------------*/



.c-tabs-nav {

  list-style: none;
  padding: 0;
  position: relative;
  margin:0px;
  display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; align-content:center;
}



.c-tabs-nav__link {
  text-decoration: none;
  color: #000;
  background:transparent;
  margin:20px;
  /*line-height:217px;*/
overflow:hidden;
  padding: 0px;
  width:250px;
  height:270px;
  border-radius:0px;
  border:0px solid var(--color1);
 display:flex; flex-flow:column wrap;  justify-content:flex-end; align-items:center; align-content:center;
}


.c-tabs-nav__link h2 {
font:bold 18px 'Roboto Condensed';
text-transform:uppercase;
color:#333;
text-align:center;
letter-spacing:0;
padding:20px;
margin:0;
display:block;
border:2px dashed transparent;
border-radius:20px;
width:150px;
}


.c-tabs-nav__link img {
width:auto;
max-height:170px;
}


.c-tabs-nav__link h2 span {
font:bold 48px 'Roboto Condensed';
}

.c-tabs-nav__link.is-active {


}

.c-tabs-nav__link.is-active h2, .c-tabs-nav__link.is-active h2 span {
 background:#fff;
 border:2px dashed var(--color1);
}


/**
 * Tab
 */
.c-tab {
  display: none;
  border-top: 0px solid rgba(0,0,0,0.5);
}

.c-tab.is-active {
  display: block;
}

.c-tab__content {
border-radius:20px;
 border:2px dashed var(--color1);
 background:#fff;
color:var(--color2);
margin:20px auto;
  padding: 40px;
  position: relative;
  animation: showTab 300ms ease-in-out both;
  
   max-width:1000px;
}

.c-tab__content h2 {
font:bold 32px 'Roboto Condensed';
text-transform:uppercase;
color:var(--color1);
text-align:center;
padding:0px;
margin:0;
}

.c-tab__content ul {
 width:100%; list-style:none; padding:20px 0px; margin:0 auto;
}
.c-tab__content ul li {
font:18px 'Roboto';
color:var(--color3);
background: url(../images/bu.png) no-repeat left center;
text-align:left;
padding:5px 5px 5px 25px;
margin:0;
 
}



@keyframes showTab{
  from {opacity: 0; top: 5px}
  to {opacity: 1; top: 0;}
}

.c-tab-nav-marker {
max-width:100px;
  height: 40px;
  background:url(../ndata/images/bab.png) bottom right no-repeat;
  position: absolute;

  bottom: -20px;
  padding:0; 
  margin:0;
max-width:auto !important;
  transition: all 0.3s ease-out;
}

@media screen and (max-width: 1024px) {
.c-tabs-nav { display:flex; flex-flow:row wrap;
}
.c-tabs-nav__link {
  width:150px;
  height:150px;
}

.c-tabs-nav__link img{

}
}


@media screen and (max-width: 660px) {
.c-tabs-nav {
display:flex; flex-flow:row wrap; justify-content:center; align-items:center; align-content:center;
}
.c-tabs-nav__link {
margin:10px;
padding:20px;
  width:100px !important;
  height:100px !important;
}
.c-tabs-nav__link img{
 display:none;
}

.c-tabs-nav__link h2 {font:bold 14px 'Roboto Condensed'; margin:0; width:100%; letter-spacing:0}


.c-tab__content{ padding:20px 20px; width:auto;}
}