@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@400;600;800&display=swap');


:root {
    
    --primary-color: #146e51;
    --secondary-color: #ffaf00;
    --white-color: #fff;
    --bg-body:#28272a;
    --bg-nav: #146e51;
    --color-nav: #fff;
    --color-btn-account: #ffaf00;
    --color-text-account: #fff;
    --color-svg-account: #ffaf00;
    --svg-nav: #fff;
    --primary-font: 'Saira Extra Condensed', sans-serif;
    --secondary-font: 'Lato', sans-serif;
    --bg-chat:#f8f8f8;
    --btn-chat:#ffaf00;
}

body {
    margin: 0;
    font-family: var(--secondary-font);
    background:  var(--bg-body);
}


/* Header*/

.top-navbar {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px !important;
    z-index: 10;
    background: #4b4b4b !important;
}

.bottom-navbar {
    z-index: 0;
    padding: 0px !important;
}

.navbar {
    background: var(--bg-nav);
    box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.08);
    padding: 5px 0 5px;
}

.hamburger-menu{
    display: none;
}

.navbar-brand {
    /* line-height: 1em; */
    display: flex;
    align-items: center;
}

.navbar-brand img {
    width: 200px;
}

.navbar-brand a {
    line-height: 10px;
}

.nav_site {
    display: flex;
    align-items: center;
    position: relative;
    width: calc(100% + 1.5rem);
    margin: 0px -0.75rem;
}

.nav_site ul {
    width: 100%;
}

.nav_account {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 38px;
}

.nav_account li {
    display: flex;
    align-items: center;
}

.nav_site li.nav-item {
    padding: 10px 5px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-left: 1px solid #00000024;
    border-right: 1px solid #ffffff1c;
}

.nav_site li.nav-item > a {
    color: var(--color-nav);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.nav_site li.nav-item > a > svg {
    width: 15px;
    margin: 5px;
    fill: var(--svg-nav);
}

.nav_site li.nav-item.active > a {
    color: var(--primary-color);
}
.nav_site li.nav-item.active {
    background: var(--secondary-color);
}

.nav_account li > a {
    color: var(--color-text-account);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    padding: 8px 12px;
    text-decoration: none;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav_account li > a > svg {
        width:15px;
        margin: 0px 5px 0px 0px;
        fill:var(--color-svg-account);
}

.nav_account li > a.login {
    background: var(--secondary-color);
    border-radius: 3px;
    font-size: 10px;
    line-height: 24px;
    font-weight: 800;
    color: var(--primary-color);
    padding: 5px 8px;
}


.nav_account li > a.login > svg {
        width: 15px;
        margin: 3.5px 0px 3.5px 0px;
        fill:var(--white-color);
}

.logged > p {
    margin: 0px;
    color: var(--secondary-color);
    text-align: right;
    line-height: 13px;
    font-size: 13px;
    font-weight: 700;
    margin-right: -5px;
    padding: 0px 15px 0px 10px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
}

.logged > p > small {
        color: var(--color-nav);
}

.logged {
    display: flex;
    flex-direction: row;
    align-items: center;
}



.account-dropdown {
        width: 260px;
        padding: 5px;
        border: 0px;
        background: #f3f3f3;
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.header-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.header-account > h3 {
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0px 0px;
    line-height: 1.1em;
}

.header-account > h3 > small {
    font-weight: 400;
}

.header-account > a {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 3px;
    background: var(--secondary-color);
    color: var(--white-color);
}

.balance {
    padding: 0px 5px;
    margin: 10px 5px;
    border-radius: 3px;
    background: var(--white-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px;
}

.balance > p {
    margin: 0px 0px !important;
    padding: 9px 0px !important;
    line-height: 1em;
    display: flex;
    font-size: 13px;
    color: var(--primary-color);
    border-bottom: 1px solid #ccc;
    align-items: center;
    justify-content: space-between;
}

.balance > p:first-child {
    font-size: 13px;
}

.balance > p:last-child {
    border-bottom: 0px solid #ccc;
}

.account-btn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-btn-footer > a {
    width: 50%;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    margin: 2px;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 6px;
    font-weight: bold;
    border-radius: 3px;
}

a.log-out {
    text-align: center;
    width: 100%;
    display: flex;
    margin: 10px 0px;
    text-transform: uppercase;
    text-decoration: none;
    color: #f00;
    font-weight: 700;
    line-height: 1em;
    align-items: center;
    border: 1px solid;
    justify-content: center;
    border-radius: 3px;
}

a.log-out > svg {
    width: 15px;
    margin: 5px;
    fill: #f00;
}

/* Custom dropdown lingue */

.custom-sel a {
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 4px;
  font-weight: 700;
  line-height: 0px;
  display: block;
}

.custom-sel a > img {
    width: 27px;
    height: 24px;
    border-radius: 2px;
}

.custom-sel a:hover {
  text-decoration: none;
  background-color: #dbdbdb;
  color: var(--bg-nav);
}

.custom-sel a.selected {
  background-color: #efefef;
}

.custom-sel a.selected:hover {
  background-color: transparent;
  color: #546e7a;
}

.hidden {
  display: none;
}

.lightblue {
  color: #03a9f4;
  margin-left: -4px;
}

.show-sel {
  background-color: var(--white-color);
  box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}

.custom-sel {
  margin: 0px;
  display: inline-block;
  background: var(--white-color);
  border-radius: 4px;
  border: 1px solid #c2c2c2;
  position: absolute;
  right: -6px;
  top: 1px;
  overflow: hidden;
}
/* fine Custom dropdown lingue */


/*chat box*/

.chatbox-holder {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  height: 0;
  font-family: var(--secondary-font);
    font-size: 14px;
    color: #999999;
    word-wrap: break-word;    
}

.chatbox-holder ul {
	list-style: none;
}

.chatbox {
  width: 300px;
  height: 400px;
  margin: 0 20px 0 0;
  position: relative;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  display: flex;
  flex-flow: column;
  border-radius: 10px 10px 0 0;
  background:var(--bg-chat) ;
  bottom: 0;
  transition: .1s ease-out;
}

.chatbox-top {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-radius: 10px 10px 0 0;
  background: var(--bg-nav);
}

.chatbox-icons {
  padding: 0 10px 0 0;
  display: flex;
  position: relative;
}

.chatbox-icons .svg-inline--fa {
  background: var(--btn-chat);
  padding: 0px;
  margin: 0 0 0 3px;
  color: white;
  border-radius: 5px;
  transition: 0.3s;
  opacity: .5;
  width: 13px;
  height: 13px;
  padding: 5px;
}

.chatbox-icons .svg-inline--fa:hover {
  border-radius: 5px;
  background:  var(--btn-chat);
  opacity: 1;
}

.chatbox-icons a, .chatbox-icons a:link, .chatbox-icons a:visited {
  color: white;
}

.chat-partner-name {
  flex: 1;
  display: flex;
  align-items: center;
     padding: 0 5px 0 95px;
}

.chat-partner-name > p {
  line-height: 1em;
  align-items: center;
 
  font-size: 15px;
  font-weight: bold;
  color: var(--white-color);
  transition: .1s ease-out;
    margin: 0px;
}

.chat-partner-name > p >small {
  font-weight:400;

}

.status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #cacaca;
  margin: 0 8px 0 0;
}

.online {
  background: #b7fb00;
}

.away {
  background: #ffae00;
}

.donot-disturb {
  background: #ff4343;
}

.chatbox-avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  background: white;
  padding: 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  position: absolute;
  transition: .1s ease-out;
  bottom: 0;
  left: 6px;
}

.chatbox-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.chat-messages {
  border-top: 1px solid rgba(0, 0, 0, .05);
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  flex: 1;
}

.message-box-holder {
  width: 100%;
  margin: 0 0 15px;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}

.message-sender {
  font-size: 12px;
  margin: 0 0 15px;
  color: #30649c;
  align-self: flex-end;
}

.message-sender p {
  color: #6a963a;
  text-decoration: none;
  margin-bottom: 0px;
}



.message-support {
  font-size: 12px;
  margin: 0 0 15px;
  color: #30649c;
  align-self: flex-start;
}

.message-support p {
  color: #30649c;
  text-decoration: none;
  margin-bottom: 0px;
}

.message-box {
  padding: 6px 10px;
  border-radius: 5px;
  position: relative;
  background: rgba(100, 170, 0, .1);
  border: 2px solid rgba(100, 170, 0, .1);
  color: #6c6c6c;
  font-size: 12px;
}

.message-box:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
  border-bottom: 10px solid rgba(100, 170, 0, .2);
  border-right: none;
  top: -22px;
  right: 8px;
  bottom: auto;
}

.message-partner {
  background: rgba(0, 114, 135, .1);
  border: 2px solid rgba(0, 114, 135, .1);
  align-self: flex-start;
}

.message-partner:after {
  right: auto;
  bottom: auto;
  top: -22px;
  left: 9px;
  border: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 114, 135, .2);
  border-left: none;
}

.chat-input-holder {
  display: flex;
  border-top: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0px -5px 8px 0px rgba(0,0,0,0.1);
}

.chat-input {
  resize: none;
  padding: 5px 10px;
  height: 40px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: #4f4e4e;
  line-height: 1.2em;
  flex: 1;
  border: none;
  background: var(--white-color);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.chat-input:focus, .message-send:focus {
  outline: none;
}

.message-send::-moz-focus-inner {
	border:0;
	padding:0;
}

.message-send {
  -webkit-appearance: none;
  background: var(--secondary-color);
  color: #464646;
  font-size: 12px;
  padding: 0 15px;
  border: none;
}

.date_chat {
    text-align: center;
    width: 100%;
    margin-bottom: 18px;
    font-size: 14px;
}

.attachment-panel {
  padding: 3px 10px;
  text-align: right;
}

.attachment-panel a, .attachment-panel a:link, .attachment-panel a:visited {
  margin: 0 0 0 7px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
}

.chatbox-min {
  margin-bottom: -349px;
/*   height: 46px; */
}

.chatbox-min .chatbox-avatar {
  width: 60px;
  height: 60px;
}

.chatbox-min .chat-partner-name {
  padding: 0 0 0 75px;
}



/*Fine chat box*/

/*modal login*/

.modal-login {
    background: var(--primary-color);
}

.header-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    top: 0px;
    background: var(--primary-color);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.header-modal > h3 {
    margin: 0px;
    font-size: 20px;
    display: flex;
    text-transform: uppercase;
    align-items: center;
    letter-spacing: 2px;
    color: var(--white-color);
    gap: 6px;
    line-height: 1.1em;
}

.header-modal > button.close {
    background: transparent;
    border: 0px;
    font-size: 40px;
    margin-top: -5px;
    line-height: 20px;
    color: var(--secondary-color);
}

.modal-login > form {
    padding: 10px;
}


.form-control {
    display: block;
    width: 100%;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1em;
    color: var(--white-color);
    background-color: #00000054;
    background-clip: padding-box;
    border: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: var(--white-color);
    background-color: #0000005c;
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 2px 3px rgb(255 255 255 / 25%);
}


.form-control::placeholder {
    font-weight: bold;
    opacity: 0.5;
    color: var(--white-color);
}

button.login_access {
    text-transform: uppercase;
    padding: 7px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.5;
    width: 100%;
    color: var(--primary-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--secondary-color);
    border: 0px solid #ced4da;
    border-radius: 3px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--secondary-color);
    border: 0px solid #ced4da;
    border-radius: 3px;
}


.recovery_pass {
    text-align: center;
    margin: 10px;
    font-size: 14px;
}

.recovery_pass > a {
    color: var(--white-color);
    text-decoration: none;
}


.registration {
    text-align: center;
}

.nav_account li > a.registration {
    background: #fff;
    border-radius: 3px;
    font-size: 10px;
    line-height: 24px;
    font-weight: 800;
    color: var(--primary-color);
    padding: 5px 8px;
    margin-left: 10px;
}
.registration a {
    display: block;
    padding: 10px;
    background: #00000040;
    color: var(--white-color);
    text-decoration: none;
    margin: 10px;
    width: calc(100% - 20px);
}
.registration > p {
    text-align: center;
    color: #ddd;
    font-size: 14px;
    margin: 10px 0px;
}
.registration img {
    width: 200px;
    margin: 10px auto 0px;
}

.recovery-text {
    font-family: var(--secondary-font);
    font-size: 16px;
    padding: 20px 20px 20px 20px;
    color: var(--white-color);
    text-align: center;
}

.header-modal > h3 > img {
    width: 200px;
}

.modal-promo {
    margin-bottom: 30px;
    margin-left: 12.5px;
}

.modal-promo .promoHome_title > h2 {
        font-size: 12vw;
}

.modal-promo .promoHome_title > h2 > span {
        color:var(--white-color)
}

.modal-promo .row {
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-bottom: 20px;
}

.modal-promo .row > div {
    min-width: 370px;
    padding-left: 0px;
}

.modal-promo .row > div > a > .promoBox {
    margin: 10px 20px 10px 0px;
}

.modal-promo .row > div:last-child > a > .promoBox {
    margin: 10px 0px 10px 0px;
}



.modal-promo .row::-webkit-scrollbar {
  height: 5px;
    margin-left: 10px
        margin-right:10px
}

/* Track */
.modal-promo .row::-webkit-scrollbar-track {
  background: #ffffff80;
    border-radius: 2px;
}

/* Handle */
.modal-promo .row::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
}

/* Handle on hover */
.modal-promo .row::-webkit-scrollbar-thumb:hover {
  opacity: .6;
}



/*fine modal login*/


    .hide-mobile {
        display: block;
}
    
        .hide-desktop {
        display: none;
}

        .logo-mobile {
    display:none;
}
        .logo-desktop {
    display:block;
}

.text-decoration-n {
    text-decoration: none;
}


/*modal nav*/


.mobile_navigation {
    display: none;
}

@media only screen and (max-width: 992px) {
    
    
    .hide-mobile {
        display: none !important;
}
    
        .hide-desktop {
        display: block;
}   
        
    .navbar-brand img {
    width: auto;
    height: 25px;
}
   
    
            .logo-mobile {
    display:block;
}
            .logo-desktop {
    display:none;
}
    
.mobile_navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--bg-nav);
    box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.08);
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 0px;
    z-index: 10;
} 
    
    
    
    .mobile_navigation .icon-nav {
    width: 15px;
    display: block;
    height: 15px;
    background: var(--color-nav);
    margin: 0px;
} 
    
    a.mobile_nav_button {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
    flex: 1;
    font-size: 12px;
        line-height: 1em;
        text-align: center;
        padding: 0px 2px;
    text-decoration: none;
    color: var(--white-color);
    border-right: 1px solid #ffffff4a;
}
    
    .mobile_navigation a.active {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
    flex: 1;
    font-size: 12px;
    text-decoration: none;
    color: var(--primary-color);    
    background: var(--secondary-color);
    box-shadow: none;
}
    
.mobile_navigation a.active > i {

    background-color: var(--primary-color);    


}
    
    a.casino_nav_button {
    width: 59px;
    text-align: center;
    display: flex;
    align-items: center;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    justify-content: center;
    background: #00000080;
    height: 100%;
}
    
    a.casino_nav_button > i.icon-nav {
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
}
    
        a.sport_nav_button {
    width: 59px;
    text-align: center;
    display: flex;
    align-items: center;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    justify-content: center;
    background: #00000080;
    height: 100%;
}
    
    a.sport_nav_button > i.icon-nav {
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
}
    
.hamburger-menu {border-right: 0px !important;}
    
a.hamburger-menu > svg {
    width: 20px;
    height: 20px;
    fill: var(--secondary-color);
}
    
.nav_menu_modal {
    margin: 0px;
    height: 100%;
}
    
.nav_menu_modal .modal-content {
    background: var(--primary-color);
}

        .prymary_navigation {
            display: none;
        }
    
.mobile-navigation a {
    color: var(--white-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}
    
    .mobile-navigation svg {
    width: 25px;
    margin: 5px;
    fill: var(--white-color);
}
    
    .mobile-navigation li {
    border-bottom: 1px solid #0000002b;
    padding: 10px;
}
    

    
    }

@media only screen and (max-width: 830px) {
    
.nav_account li > a {
        font-size:0px;
}
  .custom-sel {
    top: 1px;
}  

    
    }


@media only screen and (max-width: 690px) {
    
    
    
.nav_account li > a {
    font-size: 0px;
    border: 1px solid var(--secondary-color);
    padding: 8px 8px;
    border-radius: 3px;
    margin: 0px 2px;
}
    
.nav_account li > a > svg {
    width: 15px;
    margin: 0px;
    fill: var(--color-svg-account);
}
    
    .nav_account li.hide-mobile {
        display: none;
}
    

   .nav_site, .nav_account {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 32px;
} 
    
    .navbar-brand img {
    width: 60px;
    height: auto;
}
    

    
    .mobile_account {
    padding: 5px 0px;
    border-top: 1px solid #ffffff45;
    border-bottom: 1px solid #ffffff45;
}
    
    .custom-sel {
    right: -7px;
    top: 0px;
    padding: 4px;
}
    
    .custom-sel a {
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 1px;
  font-weight: 700;
  line-height: 0px;
  display: block;
}
    
    .custom-sel a > img {
    width: 25px;
    height: 22px;
    border-radius: 2px;
}
    
    }







/*select currency*/



#app-cover {
  position: relative;
  top: .5px;
  right: 0;
  left: 0;
  width: 140px;
  height: 36px;
  margin: 0;
  z-index: 1;
}

#select-button {
  position: relative;
  height: auto;
  padding: 10.5px 10px;
  background-color: var(--bg-body);
  border-radius: 4px;
  cursor: pointer;
}

#options-view-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

#selected-value {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0px;
  margin-right: 10px;
  color: var(--secondary-color);
}

.option i {
  width: 36px;
}

.option,
.label {
  color: var(--secondary-color);
  font-size: 13px;
}

#chevrons {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding: 9px 10px;
}

#chevrons svg {
  display: block;
  height: 50%;
  color: #d1dede;
  width: 12px;
}

#options-view-button:checked + #select-button #chevrons svg {
  color: var(--white-color);
}

.options {
  position: absolute;
  left: 0;
  width: 250px;
}

#options {
  position: absolute;
  top: 42px;
  right: 0;
  left: 0;
  width: 217px;
  margin: 0 auto;
  background-color: var(--bg-body);
  border-radius: 4px;
}

#options-view-button:checked ~ #options {
  border: 1px solid var(--secondary-color);
}

.option {
  position: relative;
  line-height: 1;
  transition: 0.3s ease all;
  z-index: 2;
}

.option i {
  position: absolute;
  left: 14px;
  top: 7px;
  padding: 0;
  display: none;
}

#options-view-button:checked ~ #options .option i {
  display: block;
  padding: 12px 0;
}

.label {
  display: none;
  padding: 0;
  margin-left: 45px;
}

#options-view-button:checked ~ #options .label {
  display: block;
  padding: 12px 14px;
}

.s-c {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
}

.s-c.top {
  top: 0;
}

.s-c.bottom {
  bottom: 0;
}

input[type="radio"] {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  height: 50%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.s-c:hover ~ i {
  color: #fff;
  opacity: 0;
}

.s-c:hover {
  height: 100%;
  z-index: 1;
}

.s-c.bottom:hover + i {
  bottom: -25px;
  animation: moveup 0.3s ease 0.1s forwards;
}

.s-c.top:hover ~ i {
  top: -25px;
  animation: movedown 0.3s ease 0.1s forwards;
}

@keyframes moveup {
  0% {
    bottom: -25px;
    opacity: 0;
  }
  100% {
    bottom: 5px;
    opacity: 1;
  }
}

@keyframes movedown {
  0% {
    top: -25px;
    opacity: 0;
  }
  100% {
    top: 6px;
    opacity: 1;
  }
}

.label {
  transition: 0.3s ease all;
}

.opt-val {
  position: absolute;
  left: 10px;
  width: 110px;
  height: 21px;
  line-height: 21px;
  font-size: 12px;
  opacity: 0;
  background-color: var(--bg-body);
  transform: scale(0);
}

.option input[type="radio"]:checked ~ .opt-val {
  opacity: 1;
  transform: scale(1);
}

.option input[type="radio"]:checked ~ svg {
  top: 0;
  bottom: auto;
  opacity: 1;
  animation: unset;
}

.option input[type="radio"]:checked ~ svg,
.option input[type="radio"]:checked ~ .label {
  color: #fff;
}

.option input[type="radio"]:checked ~ .label:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

#options-view-button:not(:checked)
  ~ #options
  .option
  input[type="radio"]:checked
  ~ .opt-val {
  top: -36px;
}

.option:nth-child(1) input[type="radio"]:checked ~ .label:before {
  background-color: var(--primary-color);
  border-radius: 4px 4px 0 0;
}

.option:nth-child(1) input[type="radio"]:checked ~ .opt-val {
  top: -37px;
}

.option:nth-child(2) input[type="radio"]:checked ~ .label:before {
  background-color:  var(--primary-color);
}

.option:nth-child(2) input[type="radio"]:checked ~ .opt-val {
  top: -74px;
}

.option:nth-child(3) input[type="radio"]:checked ~ .label:before {
  background-color:  var(--primary-color);
}

.option:nth-child(3) input[type="radio"]:checked ~ .opt-val {
  top: -111px;
}

.option:nth-child(4) input[type="radio"]:checked ~ .label:before {
  background-color:  var(--primary-color);
}

.option:nth-child(4) input[type="radio"]:checked ~ .opt-val {
  top: -147px;
}

.option:nth-child(5) input[type="radio"]:checked ~ .label:before {
  background-color:  var(--primary-color);
}

.option:nth-child(5) input[type="radio"]:checked ~ .opt-val {
  top: -184px;
}

.option:nth-child(6) input[type="radio"]:checked ~ .label:before {
  background-color:  var(--primary-color);
  border-radius: 0 0 4px 4px;
}

.option:nth-child(6) input[type="radio"]:checked ~ .opt-val {
  top: -222px;
}

.option .fa-codepen {
  color: #000;
}

.option .fa-dribbble {
  color: #ea4c89;
}

.option .fa-behance {
  color: #0057ff;
}

.option .fa-hackerrank {
  color: #32c766;
}

.option .fa-stack-overflow {
  color: #f48024;
}

.option .fa-free-code-camp {
  color: #006400;
}

#option-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 37px;
  transition: 0.3s ease all;
  z-index: 1;
  display: none;
}

#options-view-button:checked ~ #options #option-bg {
  display: block;
}

.option:hover .label {
  color: #fff;
}

.option:nth-child(1):hover ~ #option-bg {
  top: 0;
  background-color: #000;
  border-radius: 4px 4px 0 0;
}

.option:nth-child(2):hover ~ #option-bg {
  top: 37px;
 background-color: #000;
}

.option:nth-child(3):hover ~ #option-bg {
  top: 74px;
  background-color: #000;
}

.option:nth-child(4):hover ~ #option-bg {
  top: 111px;
  background-color: #000;
}

.option:nth-child(5):hover ~ #option-bg {
  top: 148px;
  background-color: #000;
}

.option:nth-child(6):hover ~ #option-bg {
  top: 185px;
  background-color: #000;
  border-radius: 0 0 4px 4px;
}

/*preloader*/
.preloader_top {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    align-items: center;
    justify-content: center;
}

.preloader_top img {
    width: 250px;
}


.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/*pagina paesi*/

.page_nations {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    align-items: center;
    justify-content: center;
}

.page_nations img {
    width: 250px;
}

.page_nations p {
    font-size: 25px;
    font-weight: 600;
    margin-top: 20px;
    color: #fff;
}

 .countries{
    list-style:none;
    margin:0;
    padding:0;
    margin-bottom:30px;
}
 .country{
    margin-bottom:15px;
}
 .country a{
    display:block;
    background-color: var(--secondary-color);
    -webkit-box-shadow:0 4px 5px #000000;
    -webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.39);
    -ms-box-shadow:0 4px 5px rgba(0, 0, 0, 0.39);
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.39);
    padding:15px;
    position:relative;
    text-decoration:none;
    border-radius: 3px;
}
 .country img{
    width:32px;
    height:32px;
    vertical-align:middle;
    margin-right:8px;
}
 .country a span{
    color: #343434;
    font-size:16px;
    font-weight:700;
    position:relative;
    top:4px;
}
 .country:last-child{
    margin-bottom:0;
}
 @media (min-width: 768px){
     .countries{
        padding:0 23%;
    }
     .country{
        margin-bottom:22px;
    }
     .country a span{
        font-size: 17px;
    }
}