<!--HTML--> 


	<div class="bands"><div class="main1"><div class="tabal">

	<!------------------------------------ названия банд ------------------------------------>

	<div class="tablinks" onclick="openTab(event, 'sec1')" id="defaultOpen">банда 1</div>	
	<div class="tablinks" onclick="openTab(event, 'sec2')">банда 2</div>
	<div class="tablinks" onclick="openTab(event, 'sec3')">банда 3</div>
	<div class="tablinks" onclick="openTab(event, 'sec4')">банда 4</div>
	<div class="tablinks" onclick="openTab(event, 'sec5')">банда 5</div></div>



	<!------------------------------------ вкладка 1 ------------------------------------>

	<article class="tabcontent" id="sec1"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab1" type="radio" name="tabs"><label for="tab1"><img src="http://placehold.it/100"/></label>

<input id="tab2" type="radio" name="tabs"><label for="tab2"><img src="http://placehold.it/100"/></label>

<input id="tab3" type="radio" name="tabs"><label for="tab3"><img src="http://placehold.it/100"/></label>

 <input id="tab4" type="radio" name="tabs"><label for="tab4"><img src="http://placehold.it/100"/></label>

<input id="tab5" type="radio" name="tabs"><label for="tab5"><img src="http://placehold.it/100"/></label>

<input id="tab6" type="radio" name="tabs"><label for="tab6""><img src="http://placehold.it/100"/></label>

<input id="tab7" type="radio" name="tabs"><label for="tab7"><img src="http://placehold.it/100"/></label>

<input id="tab8" type="radio" name="tabs"><label for="tab8"><img src="http://placehold.it/100"/></label>

<input id="tab9" type="radio" name="tabs"><label for="tab9"><img src="http://placehold.it/100"/></label>

<input id="tab10" type="radio" name="tabs"><label for="tab10"><img src="http://placehold.it/100"/></label>

<input id="tab11" type="radio" name="tabs"><label for="tab11"><img src="http://placehold.it/100"/></label>

<input id="tab12" type="radio" name="tabs"><label for="tab12"><img src="http://placehold.it/100"/></label><br>



	<!------------------------------------ описание членов 1 банды ------------------------------------>


	<!-- 1 -->   <section id="content1"> <div class="char_text">  

<!-- банда -->
<char_band>название банды</char_band>
<!-- аватар -->
<char_pic><img src="http://placehold.it/180x130"/></char_pic>
<!-- имя -->
<char_name>name surname1 </char_name>
<!-- гифы -->
<char_gif1><img src="http://placehold.it/177x35"/> <span>способность коротко</span> </char_gif1>
<char_gif2><img src="http://placehold.it/169x35"/> <span>способность коротко</span></char_gif2>
<!-- описание отношений -->
<char_rel>за собой процесс внедрения и модернизации новых предложений. идейные соображения высшего порядка, а также сложившаяся структура организации влечет за собой процесс внедрения и модернизации модели развития. не следует, однако забывать, что реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям. за собой процесс внедрения и модернизации новых предложений. идейные соображения высшего порядка, а также сложившаяся структура организации влечет за собой процесс внедрения и модернизации модели развития. не следует, однако забывать, что реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям.</char_rel>


	<!-- 2 -->   </div></section><section id="content2"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section><section id="content3"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --> </div></section><section id="content4"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --> </div></section><section id="content5"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 -->  </div></section> <section id="content6"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 -->  </div></section><section id="content7"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 -->  </div></section> <section id="content8"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content9"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 -->  </div></section> <section id="content10"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --> </div></section> <section id="content11"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content12"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 1 -->




	<!------------------------------------ вкладка 2 ------------------------------------>

	<article class="tabcontent" id="sec2"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab13" type="radio" name="tabs"><label for="tab13"><img src="http://placehold.it/100"/></label>

<input id="tab14" type="radio" name="tabs"><label for="tab14"><img src="http://placehold.it/100"/></label>

<input id="tab15" type="radio" name="tabs"><label for="tab15"><img src="http://placehold.it/100"/></label>

 <input id="tab16" type="radio" name="tabs"><label for="tab16"><img src="http://placehold.it/100"/></label>

<input id="tab17" type="radio" name="tabs"><label for="tab17"><img src="http://placehold.it/100"/></label>

<input id="tab18" type="radio" name="tabs"><label for="tab18""><img src="http://placehold.it/100"/></label>

<input id="tab19" type="radio" name="tabs"><label for="tab19"><img src="http://placehold.it/100"/></label>

<input id="tab20" type="radio" name="tabs"><label for="tab20"><img src="http://placehold.it/100"/></label>

<input id="tab21" type="radio" name="tabs"><label for="tab21"><img src="http://placehold.it/100"/></label>

<input id="tab22" type="radio" name="tabs"><label for="tab22"><img src="http://placehold.it/100"/></label>

<input id="tab23" type="radio" name="tabs"><label for="tab23"><img src="http://placehold.it/100"/></label>

<input id="tab24" type="radio" name="tabs"><label for="tab24"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 1 банды ------------------------------------>

	<!-- 1 --> <section id="content13"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content14"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content15"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content16"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content17"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content18"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content19"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content20"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content21"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content22"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content23"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content24"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 2 -->

	



	<!------------------------------------ вкладка 3 ------------------------------------>
	<article class="tabcontent" id="sec3"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab25" type="radio" name="tabs"><label for="tab25"><img src="http://placehold.it/100"/></label>

<input id="tab26" type="radio" name="tabs"><label for="tab26"><img src="http://placehold.it/100"/></label>

<input id="tab27" type="radio" name="tabs"><label for="tab27"><img src="http://placehold.it/100"/></label>

 <input id="tab28" type="radio" name="tabs"><label for="tab28"><img src="http://placehold.it/100"/></label>

<input id="tab29" type="radio" name="tabs"><label for="tab29"><img src="http://placehold.it/100"/></label>

<input id="tab30" type="radio" name="tabs"><label for="tab30""><img src="http://placehold.it/100"/></label>

<input id="tab31" type="radio" name="tabs"><label for="tab31"><img src="http://placehold.it/100"/></label>

<input id="tab32" type="radio" name="tabs"><label for="tab32"><img src="http://placehold.it/100"/></label>

<input id="tab33" type="radio" name="tabs"><label for="tab33"><img src="http://placehold.it/100"/></label>

<input id="tab34" type="radio" name="tabs"><label for="tab34"><img src="http://placehold.it/100"/></label>

<input id="tab35" type="radio" name="tabs"><label for="tab35"><img src="http://placehold.it/100"/></label>

<input id="tab36" type="radio" name="tabs"><label for="tab36"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 3 банды ------------------------------------>

	<!-- 1 --> <section id="content25"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content26"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content27"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content28"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content29"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content30"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content31"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content32"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content33"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content34"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content35"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content36"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 3 -->




	<!------------------------------------ вкладка 4 ------------------------------------>
	<article class="tabcontent" id="sec4"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab37" type="radio" name="tabs"><label for="tab37"><img src="http://placehold.it/100"/></label>

<input id="tab38" type="radio" name="tabs"><label for="tab38"><img src="http://placehold.it/100"/></label>

<input id="tab39" type="radio" name="tabs"><label for="tab39"><img src="http://placehold.it/100"/></label>

 <input id="tab40" type="radio" name="tabs"><label for="tab40"><img src="http://placehold.it/100"/></label>

<input id="tab41" type="radio" name="tabs"><label for="tab41"><img src="http://placehold.it/100"/></label>

<input id="tab42" type="radio" name="tabs"><label for="tab42""><img src="http://placehold.it/100"/></label>

<input id="tab43" type="radio" name="tabs"><label for="tab43"><img src="http://placehold.it/100"/></label>

<input id="tab44" type="radio" name="tabs"><label for="tab44"><img src="http://placehold.it/100"/></label>

<input id="tab45" type="radio" name="tabs"><label for="tab45"><img src="http://placehold.it/100"/></label>

<input id="tab46" type="radio" name="tabs"><label for="tab46"><img src="http://placehold.it/100"/></label>

<input id="tab47" type="radio" name="tabs"><label for="tab47"><img src="http://placehold.it/100"/></label>

<input id="tab48" type="radio" name="tabs"><label for="tab48"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 4 банды ------------------------------------>

	<!-- 1 --> <section id="content37"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content38"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content39"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content40"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content41"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content42"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content43"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content44"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content45"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content46"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content47"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content48"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 4 -->

	<!------------------------------------ вкладка 5 ------------------------------------>

	<article class="tabcontent" id="sec5"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab49" type="radio" name="tabs"><label for="tab49"><img src="http://placehold.it/100"/></label>

<input id="tab50" type="radio" name="tabs"><label for="tab50"><img src="http://placehold.it/100"/></label>

<input id="tab51" type="radio" name="tabs"><label for="tab51"><img src="http://placehold.it/100"/></label>

 <input id="tab52" type="radio" name="tabs"><label for="tab52"><img src="http://placehold.it/100"/></label>

<input id="tab53" type="radio" name="tabs"><label for="tab53"><img src="http://placehold.it/100"/></label>

<input id="tab54" type="radio" name="tabs"><label for="tab54""><img src="http://placehold.it/100"/></label>

<input id="tab55" type="radio" name="tabs"><label for="tab55"><img src="http://placehold.it/100"/></label>

<input id="tab56" type="radio" name="tabs"><label for="tab56"><img src="http://placehold.it/100"/></label>

<input id="tab57" type="radio" name="tabs"><label for="tab57"><img src="http://placehold.it/100"/></label>

<input id="tab58" type="radio" name="tabs"><label for="tab58"><img src="http://placehold.it/100"/></label>

<input id="tab59" type="radio" name="tabs"><label for="tab59"><img src="http://placehold.it/100"/></label>

<input id="tab60" type="radio" name="tabs"><label for="tab60"><img src="http://placehold.it/100"/></label><br>



	<!------------------------------------ описание членов 5 банды ------------------------------------>


	<!-- 1 -->   <section id="content49"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 -->   </div></section><section id="content50"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section><section id="content51"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --> </div></section><section id="content52"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --> </div></section><section id="content53"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 -->  </div></section> <section id="content54"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 -->  </div></section><section id="content55"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 -->  </div></section> <section id="content56"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content57"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 -->  </div></section> <section id="content58"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --> </div></section> <section id="content59"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content60"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 5 -->

	<!------------------------------------ не трогать ------------------------------------>

</div></div>

<script>
document.getElementById("defaultOpen").click();

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";}
</script>
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap" rel="stylesheet">
<style>
.bands  {cursor: crosshair}
/* первая банда */
.char {    width: 550px;
    height: 219px;
    overflow: auto;
    margin: 29px 77px;
    line-height: 46px;
text-align:left
}
.char input {  display: none; } 
.char label{       width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    margin: 0px 15px !important;
}
.char label img{width:100px;height:100px;}
.char label:before{       content: attr(name);    position: absolute;    width: 100px;    height: 100px;    top: 5px;    left: 5px;    background: rgb(32 70 99 / 72%);    font: 10px calibri;    line-height: 100px;    text-transform: uppercase;    font-weight: bold;    opacity: 0;    transition: 0.3s ease;    margin: -5px -5px;}
.char label:hover:before{    opacity:1;}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7, #tab8:checked ~ #content8, #tab9:checked ~ #content9, #tab10:checked ~ #content10, #tab11:checked ~ #content11, #tab12:checked ~ #content12, #tab13:checked ~ #content13, #tab14:checked ~ #content14, #tab15:checked ~ #content15, #tab16:checked ~ #content16, #tab17:checked ~ #content17, #tab18:checked ~ #content18, #tab19:checked ~ #content19, #tab20:checked ~ #content20, #tab21:checked ~ #content21, #tab22:checked ~ #content22, #tab23:checked ~ #content23, #tab24:checked ~ #content24, #tab25:checked ~ #content25, #tab26:checked ~ #content26, #tab27:checked ~ #content27, #tab28:checked ~ #content28, #tab29:checked ~ #content29, #tab30:checked ~ #content30, #tab31:checked ~ #content31, #tab32:checked ~ #content32, #tab33:checked ~ #content33, #tab34:checked ~ #content34, #tab35:checked ~ #content35, #tab36:checked ~ #content36, #tab37:checked ~ #content37, #tab38:checked ~ #content38, #tab39:checked ~ #content39, #tab40:checked ~ #content40, #tab41:checked ~ #content41, #tab42:checked ~ #content42, #tab43:checked ~ #content43, #tab44:checked ~ #content44, #tab45:checked ~ #content45, #tab46:checked ~ #content46, #tab47:checked ~ #content47, #tab48:checked ~ #content48, #tab49:checked ~ #content49, #tab50:checked ~ #content50, #tab51:checked ~ #content51, #tab52:checked ~ #content52, #tab53:checked ~ #content53, #tab54:checked ~ #content54, #tab55:checked ~ #content55, #tab56:checked ~ #content56, #tab57:checked ~ #content57, #tab58:checked ~ #content58, #tab59:checked ~ #content59, #tab60:checked ~ #content60, #tab61:checked ~ #content61, #tab62:checked ~ #content62, #tab63:checked ~ #content63, #tab64:checked ~ #content64, #tab65:checked ~ #content65, #tab66:checked ~ #content66, #tab67:checked ~ #content67, #tab68:checked ~ #content68, #tab69:checked ~ #content69, #tab70:checked ~ #content70, #tab71:checked ~ #content71, #tab72:checked ~ #content72, #tab73:checked ~ #content73, #tab74:checked ~ #content74, #tab75:checked ~ #content75, #tab76:checked ~ #content76, #tab77:checked ~ #content77, #tab78:checked ~ #content78, #tab79:checked ~ #content79, #tab80:checked ~ #content80 { display: block; }
.char section{    display:none;    width:fit-content;    margin:20px auto 0;}
.char_text {
    display: inline-block;
    vertical-align: top;
    width: 645px;
    height: 140px;
    position: absolute;
    margin: -588px -325px !important;
}

.char_text char_band {position: absolute;
    margin: -30px 209px;
    font-size: 10px;
    letter-spacing: .03rem;
    font-family: jura;
    color: #729ab5 !important;
    text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(7 154 251) !important;
    text-align: left;
}
.char_text char_pic {  margin: 13px 4px;    position: absolute;}
.char_text char_pic img {width: 180px;    height: 130px;}
.char_text char_name {position: absolute;
    margin: -36px 341px;
    font-size: 14px;
    letter-spacing: .03rem;
    font-family: jura;
    color: #729ab5 !important;
    text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(7 154 251) !important;
    width: 180px;
    text-align-last: right;
    text-transform: lowercase;
}
.char_text char_gif1 {position: absolute;
    margin: 10px 195px;}
.char_text char_gif2 {position: absolute;
    margin: 10px 382px;}

.char_text char_gif1 span {opacity: 0;
    background-color: #000000bf;
    width: 177px;
    height: 22px;
    position: absolute;
    margin: 0px -177px!important;
    text-align: center;
    text-align-last: center;
    color: #cccccc;
    font-size: 10px;
    padding-bottom: 13px;
    font-family: jura;
}
.char_text char_gif1:hover span {opacity:1}
.char_text char_gif2 span {    opacity: 0;
    background-color: #000000bf;
    width: 169px;
    height: 22px;
    position: absolute;
    margin: 0px -169px!important;
    text-align: center;
    text-align-last: center;
    color: #cccccc;
    font-size: 10px;
    padding-bottom: 13px;
    font-family: jura;
}
.char_text char_gif2:hover span {opacity:1}
.char_text char_rel {position: absolute; text-align: justify;
    margin: 60px 203px;
    line-height: 13px;
    font-size: 11px;
    font-family: jura;
    color: #cccccc;
    width: 428px;
    height: 79px;
    overflow: auto;
    padding-left: 8px;
    direction: rtl;
}


/* основа слайдера  */
.bands {    background: url(https://forumstatic.ru/files/0019/be/2f/76336.png) no-repeat;
    width: 694px;
    height: 547px;
    margin: auto;
}

.main1 {
    margin: 183px 0px !important;
    position: absolute;
}

.main1 h1 {font-size:1.8rem;margin-bottom: 2rem}

/* кнопки вкладок */

.tabal {
    width: 480px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 107px;
}
.tablinks {
    width: calc(100% / 5);
    text-align: center;
    cursor: pointer;
    padding: 1rem 0;
    border: 0;
    font-size: 13px;
    letter-spacing: .03rem;
    font-family: jura;
    color: #729ab5 !important;
    text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(7 154 251) !important;
}
.tablinks:hover {color: #d6e2ea !important;}
.tablinks:focus {outline:0;}
.tab div.active {    color: #7f7f7f !important;}

.tabcontent {
    display: none;
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

</style>