@font-face {
    font-family: 'BKoodakBold';
    src: url('../fonts/BKoodakBold.eot?#') format('eot'), /* IE6–8 */
    url('../fonts/BKoodakBold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/BKoodakBold.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
    font-family: 'sans';
    src: url('../fonts/sans.eot?#') format('eot'), /* IE6–8 */
    url('../fonts/sans.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/sans.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

#lang {
    text-align: right;
    position: absolute;
    left: -4px;
    top: 5px;
}

.circle {
    position: relative;
    width: 70%;
    padding-bottom: 70%;
    background: rgba(81, 195, 232, 0.92);
    border-radius: 50% !important;
    border: none;
    color: white;
    margin: 40px auto;
}

.circletext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 30px;
    font-size: 33px;
    font-weight: 100;
    font-family: sans-serif;
}

#footer {
    background-color: #040404;
    color: white;
    min-height: 215px;
}

    #footer > div > ul > li > h4 {
        border-bottom: 2px solid white;
        line-height: 30px;
    }
    #footer > div > ul {
        direction:rtl;
    }
    #footer > div > ul > li {
        margin-bottom: 5px;
        transition: all 0.3s linear;
          
        padding-right:3px;
      
 
    }

        #footer > div > ul > li > span {
            position: relative;
            text-align: right;
            padding-right: 5px;
           
            vertical-align: 3px;
            word-break:break-all;
            white-space: pre-wrap;
 
        }

        #footer > div > ul > li:not(:first-child):before {
              
            content: '\f192';
            font-family: 'Font Awesome 5 Free';
            
        }



        #footer > div > ul > li:hover {
            padding-right: 5px;
            color: rgba(81, 195, 232, 0.92);
            cursor: pointer;
        }

/*Start-vertical circle*/
.ctext {
position:absolute;
transform:translate(36%,-58%);
width:150px;
height:100px;
direction:rtl;
color:white;
font-size:18px;
}
.info-timeline {
 display:none;
 margin-left: 45%;
  margin-top: 150px;
   position: relative;
}

 .info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
 
}

.info-timeline ul li span.timeline-circle {
  position: relative;
  border: 2px solid rgba(81, 195, 232, 0.92);
  border-radius: 100% !important;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: white;
  z-index: 2;
  display: inline-block;
}

.info-timeline ul li:not(:first-of-type) span.timeline-circle::before {
  position: absolute;
  border: 1px solid white;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.info-timeline ul li a {
  color: white;
  padding-left:5px;
  direction:rtl
}




/* End-vertical circle

/*Start-HOrizontal circle*/
.horcicle {
   
padding:20px;
  margin-top: 45px 40%;
}

.horcicle div {
  background-color: #ffffff;
  font-weight: bold;
  border: 2px solid white;
  margin-top: -70px;
  line-height: 20px;
  height: 100px;
  vertical-align:middle;
  text-align: center;
  border-radius: 50%;
  padding:50px;
}
/*End-HOrizontal circle*/










#ss:before {
    font-weight: 900;
}

@media (min-width: 1024px) {
    #lang {
        transform: translateY(30%);
    }
}


@media (max-width: 1023px) {
    #lang {
        transform: translateY(30%);
    }

    #circlecontainer {
        margin-right: auto;
    }
}

@media (max-width: 528px) {
    .circle {
        width: 90%;
        padding-bottom: 90%;
    }
}

@media (max-width: 438px) {
    .circle {
        width: 120%;
        padding-bottom: 120%;
    }
}