/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 16 2021 | 17:55:53 */
.accordion {
  position:relative;
  width: 62%;
  margin: 0 auto;
  padding: 0px;
  color: #888888;
  overflow: visible;
  height: auto;
  margin-left: 17.6%;
  z-index:2;
}

.accordion input {
    position: absolute;
    left: -10000px;
  }
  .accordion input[type='radio']:checked + section {
    width: 83%;  
    background-image: url(/wp-content/uploads/2019/11/dec-line-about-us.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 66px center !important;
  }
  
  .accordion input[type='radio']:checked + section:after {
    display: none;
  }
  
  .accordion input[type='radio']:checked + section article {
        padding: 0px 20px;
    display: block;
    /* min-width: 700px; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }
  /*.accordion input[type='radio']:checked + section label {
    background: none;
    top: 20px;
    left: 20px;
    font-size: 22px;
    display: block;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); 
  }*/

  .accordion input[type='radio']:checked + section label:hover {
    cursor: default;
  }


  .accordion section {    
    color: #333;
    width: 8.3%; 
    width: 66px; 
    /*height: 500px;*/
    background: #333; 
    float: right; 
    position: relative;    
    -moz-transition: width 0.2s ease-out; 
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out; 
    overflow: hidden;    
    height: 230px;
  }

  .accordion section:after {      
    position: relative;
    font-size: 18px;
    color: white;
    font-weight: 400;
    z-index: 2;
    top: 425px;
    left: 14px
  }
  
  /*.accordion section:nth-child(2):after { content: '1'; }*/
  .accordion section:nth-child(4):after { content: '2'; }
  .accordion section:nth-child(6):after { content: '3'; }
  .accordion section:nth-child(8):after { content: '4'; }


  .accordion section label {        
    box-sizing: border-box;
    color: white;
    background: #474747;
    display: block;
    left: -230px;
    top: 230px;
    position: relative;
    padding: 19px 16px;
    
  
	font-style: normal;
	font-weight: bold;
	font-size: var(--accordionTitleText);
	line-height: var(--accordionTitleLineHeight);
	display: flex;
	align-items: center;
	letter-spacing: 0.15em;
	text-transform: uppercase;
    /* width: 505px; */
    -webkit-transform: translate(100%,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
    transform: translate(100%,0) rotate(-90deg);
    transform-origin: 0 0;
    z-index: 2;
    height: auto;
    max-height: 230px;
    width: 230px;
    text-align: center;
    justify-content: center;
  }

  .accordion section label:hover {        
    background: #404040;
    cursor: pointer;        
  }

  .accordion section article {
    color: white;
    display: none;
    overflow: hidden;
  }

  .accordion section article > div {
    width: 80%;
    justify-content: center;
    margin: 0 70px;
  }


.accordion section article > div p{
    font-family: 'Titillium Web', sans-serif !important;
	font-style: normal;
	font-weight: normal;
	font-size: var(--accordionText);
	line-height: var(--accordionLineHeight);
	display: flex;
	align-items: center;
    margin:0 !important;
  }

  .accordion section article > div .accorden-text:nth-child(1){
    padding-bottom: 20px;
  }

  .accordion section article p {
    margin-top: 0;
  }

.tab1
{
	background: #094074 !important;
}

.tab1.inactive:hover
{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), #094074 !important;
}

.tab1 label

{
	background-color: #094074 !important;
}

.tab2
{
	background: #111D4A !important;
}

.tab2 label
{
	background: #111D4A !important;
}

.tab2.inactive:hover
{
	background: #1D2853 !important;
}



.accorden-text
{
  	font-family: 'Titillium Web', sans-serif !important;
	font-style: normal;
	font-weight: normal;
	font-size: var(--accordionText);
	line-height: var(--accordionLineHeight);
	display: flex;
	align-items: center;
	color: #F5F5F5;
}


.accordion .inactive:hover{/*Experience*/
  overflow:visible !important;
}

.tab2.inactive:hover label:before {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    bottom: -19px;
    left: 45%;
    border: 10px solid transparent;
    border-top-color: #1D2853;
    z-index: 99999;
}

.tab1.inactive:hover label:before {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    top: -19px;
    right: 45%;
    border: 10px solid transparent;
    border-bottom-color: #295680;
    z-index: 99999;
}

.tab1.inactive:hover label{/*Experience*/
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), #094074 !important;
}

.tab2.inactive:hover label{/*About us*/
  background-color:rgba(9, 66, 119, 0.05) !important;
}


@-moz-document url-prefix() { 
  .accordion section {         
    width: 5.13%;
  }
  .accordion input[type='radio']:checked + section {
    width: 94.5%;  
  }
}