html, body{    
    height: 100%;
}



.lh18{
    line-height: 18px !important;
    height: 18px;
}

.lh20{
    line-height: 18px !important;
    height: 18px;
}


.lh28{
    line-height: 28px !important;
    height: 28px;
}

.lh30{
    line-height: 30px !important;
}

.lh38{
    line-height: 38px !important;
}

.lh42{
    line-height: 42px !important;
}

.lh60{
    line-height: 100px !important;
    height: 100px;
}

.bg-shape {
    background-color: #3a86fd;
    position: absolute;
    top: 100px;
    right: 0;
    height: 10%;
    width: 40%;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
}


.webrtc-live {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: none;
}

.dropdown {
  position: relative;
  display: inline-block;

}

.dropbtn{
  min-width: 200px;
  text-align: right;
  padding-right: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: -20px;
  background-color: #fff;
  min-width: 200px;
  padding: 20px 20px;
  z-index: 1;  
  border: 1px solid #ccc;
  border-radius: 6px;
}

.dropdown:hover .dropdown-content {
  display: block;
  float: right;
}

.webrtc-local-video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  margin: 16px;
  border: 2px solid #fff;
}

.webrtc-remote-video {
  position: absolute;
  max-width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.webrtc-end-call {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 40px;
  margin: 16px;
}

.webrtc-live-mob {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: none;
}
.webrtc-local-video-mob {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  margin: 16px;
  border: 2px solid #fff;
}
.webrtc-remote-video-mob {
  position: absolute;
  max-width: 100%;
  height: 100%;
  top: 0%;
  left: 0%; 
}
.webrtc-end-call-mob {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 40px;
  margin: 16px;
}



.title1{
    font-family: 'IBM Plex Sans', sans-serif;
    color: #000000;
    font-size: 24px;    
}

.subtitle1{
    font-family: 'IBM Plex Sans', sans-serif;;
    color: #526470;
    font-size: 20px;    
}

.text0{
    font-family: 'IBM Plex Sans', sans-serif;;
    color: #000000;
    font-size: 1.0em; 
}

.text1{
    font-family: 'IBM Plex Sans', sans-serif;;
    color: #526470;
    font-size: 1.0em; 
}

.text2{
    font-family: 'IBM Plex Sans', sans-serif;;
    color: #4e5255;
    font-size: 1.0em; 
}

.text3{
    font-family: 'IBM Plex Sans', sans-serif;;
    color: #aeb2b5;
    font-size: 1.0em; 
}

.link-pink{
    font-family: 'IBM Plex Sans', sans-serif;
    color: #fd005d;
    font-size: 16px; 
}

.boxpopup{
  background-color: #f9f9f9;
  color: #000;
  padding: 10px;
  padding-left: 20px;
  border-radius: 10px;
  font-size: 16px;
  position: relative;
  font-weight: 600;
  top: -5px;
}

.boxpayment{
  background-color: #f9f9f9;
  color: #000;
  padding: 10px;
  padding-left: 20px;
  border-radius: 10px;
  font-size: 16px;
  position: relative;
  font-weight: 600;
  top: -5px;
}


.boxnotifymobilecounter{
  background-color: #f00;
  color: #fff;
  border-radius: 15px;
  min-width: 30px;
  min-height: 30px;
  font-size: 14px;
  position: relative;
  top: -5px;
}

.boxnotifydesktopcounter{
  background-color: #f00;
  color: #fff;
  border-radius: 15px;
  min-width: 30px;
  min-height: 30px;
  font-size: 14px;
  position: relative;
  top: -5px;
  left: 50px;
}



.boxforminput{
   background-color: #f5f5f5;
   border:none;
   border-radius: 15px;
   width: 100%;
   height: 50px;
}

.boxforminputmessageonmapdesktop{
   background-color: #f5f5f5;
   border:none;
   border-radius: 15px;
   width: 500px;
   height: 35px;
}

.boxforminputmessageonmapmobile{
   background-color: #f5f5f5;
   border:none;
   border-radius: 15px;
   width: 90%;
   height: 50px;
}

.boxform{
   background-color: #f5f5f5;
   border:none;
   border-radius: 5px;
   max-width: 280px;
}

.boxforminvitation{
   background-color: #fff;
   border:none;
   border-radius: 25px;
   width: 75%;
}

.boxformsearch{
   background-color: #f5f5f5;
   border:none;
   border-radius: 15px;
   max-width: 80%;
}

.boxform:focus, .boxform:hover{
   border: none!important;
   border-color: #f5f5f5!important;
   outline: none;
}   

.boxformchat{
   background-color: #f5f5f5;
   border:none;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
   min-width: 80%;
   height: 50px;   
}

.boxformchatmobile{
   background-color: #f5f5f5;
   border:none;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
   width: 260px;
   height: 50px;   
}

.boxformchatmobile:focus, .boxformchatmobile:hover{
   border: none!important;
   border-color: #f5f5f5!important;
   outline: none;
} 

.chatmedia{
   min-width: 250px;
   max-width: 450px;
   border-radius: 10px;
}

.chatmediamobile{
     width: 100%;
     border-radius: 10px;
}


.boxformchat:focus, .boxformchat:hover{
   border: none!important;
   border-color: #f5f5f5!important;
   outline: none;
} 


.boxformicon{
   background-color: #f5f5f5;
   border:none;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
}

.boxformiconchat{
   background-color: #000;
   color: #fff;
   font-weight: bold;
   border:none;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

.boxphoto{
    min-width: 200px;
    border-radius: 25px;
    background-color: #f9f9f9;
    min-height: 400px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 150%;
    
}

.boxmessage{    
    border-radius: 10px;
    background-color: #f9f9f9;
    display: block;
}

.boxphotowrapper {    
    min-width: 200px;
    border-radius: 25px;
    background-color: #eeeeee;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}


.boxsaving{
    width: 100%;
    border-radius: 10px;
    background-color: white;
    display: inline-block;    
}

.boxphotomobile{
    width: 100%;
    border-radius: 25px;
    background-color: #eeeeee;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.boxphotoname{
    width: 180px;
    background-color: #000;
    color: #fff;
    min-height: 40px;
    padding: 5px;
    border-radius: 15px;
    position: absolute;
    top: 340px;
    left: 25px;
}

.boxchatmessageuser{
    min-width: 200px;
    background-color: #f8f8f8;    
    display: block;
    color: #333;
    padding: 10px;
    border-radius: 14px;
    border-top-right-radius: 0px;
    border-top-left-radius: 10px;
}

.boxchatmessage{
    min-width: 200px;
    background-color: #ff2772  ;    
    display: block;
    color: #fff;
    padding: 10px;
    border-radius: 14px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
}

.boxchatmessageman{
    min-width: 200px;
    background-color: #fff;    
    display: block;
    color: #000;
}


.boxyoumightlike{
    max-width: 100%;
    border-radius: 25px;
    background-color: #f9f9f9;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 20px 20px 20px;
}

.boxadvicesforyou{
    max-width: 100%;
    border-radius: 25px;
    background-color: #f9f9f9;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 20px 20px 20px;
}

.boxmightlike{
    max-width: 100%;
    background-color: #fff;    
    padding: 10px 20px 20px 20px;
}

.boxdescription{
    max-width: 100%;
    background-color: #f9f9f9; 
    border-radius: 10px;   
    padding: 10px 20px 20px 20px;
}

.boxyourfriendsmain{
    width: 100%;
    background-color: #fff;  
    padding: 10px 20px 20px 20px;
}

.boxisonline{
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background-color: #0aebe8; 
    display: inline-block;
    position: relative;
    top: 0px;
}

.adjustboxchats{
   width: 18px!important;
   height: 18px!important;
   position: relative;
   top: 3px;
}


.boxisoffline{
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background-color: #f9f9f9; 
    display: inline-block;
    border: 2px solid #0aebe8;
    position: relative;
    top: 0px;
}


.boxisonlinesearch{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #0aebe8; 
    display: inline-block;
}

.boxisofflinesearch{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #f9f9f9; 
    display: inline-block;
    border: 2px solid #0aebe8;
}

.adjustboxchatssearch{
   width: 12px!important;
   height: 12px!important;
   position: relative;
   top: 0px;
}

.boxnotifies{
    width: 100%;
    background-color: #fff;
    display: block;   
    padding: 10px 20px 20px 20px;
}

.boxchats{
    width: 100%;
    background-color: #fff;
    display: block;   
    padding: 10px 20px 20px 20px;
}


.boxyourfriends{
    max-width: 100%;
    border-radius: 25px;
    background-color: #f9f9f9;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 20px 20px 20px;
}

.boxphotopost{
    width: 100%;
    border-radius: 10px;
    background-color: #f9f9f9;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.boxphotogrid{  
    height: 100%;  
    border-radius: 10px;
    background-color: #f9f9f9;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
    left: 0%;
}

.boxcard{   
    border-radius: 15px;
    background-color: #fafafa;
    display: block;
    padding: 10px;
}

.boxphotogridwrapper{
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.boxselected{
    max-width: 80px;
    border-radius: 3px;
    background-color: #fd005d;
    min-height: 5px;
    display: block;
}

.roundphotobig{
    width: 80px;
    border-radius: 40px;
    background-color: #eeeeee;
    height: 80px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.roundphotoverybig{
    width: 100px;
    border-radius: 50px;
    background-color: #eeeeee;
    height: 100px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.roundphotoextrabig{
    width: 120px;
    border-radius: 60px;
    background-color: #f9f9f9;
    height: 120px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}


.roundphoto{
    width: 60px;
    border-radius: 30px;
    background-color: #eeeeee;
    height: 60px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.roundphotomap{
    width: 60px;
    border-radius: 30px;
    background-color: #eeeeee;
    height: 60px;
}

.roundphotomapmobile{
    width: 50px;
    border-radius: 25px;
    background-color: #eeeeee;
    height: 50px;
}

.roundphotosmall{
    width: 50px;
    border-radius: 25px;
    background-color: #eeeeee;
    height: 50px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.roundphotomessage{
    width: 60px;
    border-radius: 30px;
    background-color: #eeeeee;
    height: 60px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

.roundphotosmallmore{
    width: 40px;
    border-radius: 20px;
    height: 40px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;  
    position: relative;
    top: 10px; 
}

.mediumbutton{
   background-color: #000;
   border:none;
   border-radius: 15px;
   min-width: 80px;
   height: 36px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.smallbackbutton{
   background-color: #fff;
   border: 1px solid #ccc;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
   min-width: 80px;
   padding: 15px 20px 15px 30px;
   color: #000;
   font-weight: 600;
   font-size: 14px;
}

.smallforwardbutton{
   background-color: #fff;
   border: 1px solid #ccc;
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
   min-width: 80px;
   padding: 15px 30px 15px 20px;
   color: #000;
   font-weight: 600;
   font-size: 14px;
}

.toggleimage{
   width:36px;
   position:relative;
   top:-2px;
}

.boxsoacialwrapper{
   background-color: #f5f5f5;
   border:none;
   border-radius: 25px;
   min-width: 80px;
   height: 36px;
   color: #000;
   font-weight: 600;
   font-size: 14px;
   height: 50px;
   line-height: 50px;
}


.mediumbutton:hover{
   text-decoration:none;
   color: #fff;
}

.mediumbuttonmobile{
   background-color: #000;
   border:none;
   border-radius: 15px;
   min-width: 80px;
   height: 36px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.mediumbuttonmobile:hover{
   text-decoration:none;
   color: #fff;
}

.buttonyes{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   min-width: 80px;
   height: 36px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.buttonyes:hover{
   text-decoration:none;
   color: #fff;
}

.smallbutton{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   width: 50px;
   height: 36px;
   color: #fff;
   font-weight: bold;
   font-size: 14px;
   text-decoration:none;
}

.smallbutton:hover{
   text-decoration:none;
   color: #fff;
}

.gobutton{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   width: 36px;
   height: 36px;
   color: #fff;
   font-weight: bold;
   font-size: 12px;
   text-decoration:none;
   text-align: center;
   padding-top: 10px;
}

.gobutton:hover{
   text-decoration:none;
   color: #fff;
}


.bigbuttonsave{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   min-width: 120px;
   height: 56px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.button-yes{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   color: #fff;
}

.button-no{
   background-color: #000;
   border:none;
   border-radius: 15px;
   color: #fff;
}

.bigbuttonopencall{
   background-color: #009601;
   border:none;
   border-radius: 15px;
   min-width: 120px;
   height: 56px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}


.mediumbuttonsave{
   background-color: #fd005d;
   border:none;
   border-radius: 15px;
   min-width: 80px;
   height: 50px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.bigbutton{
   background-color: #000;
   border:none;
   border-radius: 15px;
   min-width: 120px;
   height: 56px;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
}

.numbercircledwrapper{
    position:relative;
    left: 62px;
    top:-3px;
    background: #fff;
}

.circle {    
    background: #fff;
    border-radius: 50%;
    border-top-left: 2px dotted #000;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #fd005d;
    display: inline-block;
    line-height: 26px;
    padding-left: 9px;
    padding-right: 5px;
    margin-right: 5px;
    text-align: left;
    width: 28px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'IBM Plex Sans', sans-serif;
}








bg-light {
    background-color: #e8e8e8;
}

.stdfont{
    font-family: 'IBM Plex Sans', sans-serif;
        
}

.leaguefont{
    font-family: 'IBM Plex Sans', sans-serif;
}

.regfont{
    font-family: 'IBM Plex Sans', sans-serif;
}

.bolder-black{
    text-shadow: 0px 0 black, 0 1px black, 1px 0 black, 0 0px black;
}

.bolder-white{
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.bolder-red{
    text-shadow: -1px 0 #ff0017, 0 1px #ff0017, 1px 0 #ff0017, 0 -1px #ff0017;
}

.bolder-green{
    text-shadow: -1px 0 #008e00, 0 1px #008e00, 1px 0 #008e00, 0 -1px #008e00;
}

.logofont{   
    font-family: 'IBM Plex Sans', sans-serif;
}

.text-content{  
    font-family: 'IBM Plex Sans', sans-serif;
}

.color-black-light{
    color: #5f5f5f !important;
}

.color-logo{
    color: #32c3f1 !important;
}

.underline-grey{    
    padding-top: 5px;
    border-bottom:6px solid #9eabbe;
    display: inline-block;
    line-height: 1.5;
}

.navigation-bar{
    border-left: 1px solid #1c4878;
    border-bottom: 1px solid #1c4878;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
    width: 285px;
    height: 100%;
    display: none;
}

.navbar.scrolled{
    background-color: #1c4878!important;
    color: #fff;
}

.menu{
    list-style-type: none;
    width: 100%;    
}

.fa-times-thin:before {
    content: '\00d7';
}

.menu-close{
    color: #000; 
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.menu-item{
    list-style-type: none;
    width: 100%;   
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;

}

.menu-item-link:hover{
    text-decoration: none; 
}

.red-cicle{
    background-color: #ff365f;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}

.green-cicle{
    background-color: #28a745;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}


.black-cicle{
    background-color: #333;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}

.blue-cicle{
    background-color: #00cfc3;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}

.dark-cicle{
    background-color: #333;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}


.gold-cicle{
    background-color: goldenrod;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 5px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: -10px;
    left: -10px;
}


.border-message-avatar{
    border: 3px solid #bfdeff;
    padding: 3px;

}


.welcome{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 40px;
    font-weight: 300;
    color: #333;
}

.red-point{
    color: #ff365f;    
}

.relative-1{
    position: relative;
    top: 1px; 
}

.relative-2{
    position: relative;
    top: 2px; 
}

.relative-3{
    position: relative;
    top: 3px; 
}

.relative-4{
    position: relative;
    top: 4px; 
}

.relative-5{
    position: relative;
    top: 5px; 
}

.relative-10{
    position: relative;
    top: 10px; 
}

.badge-counter{
    position: relative;
    top: -5px; 
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.relative-r5{
    position: relative;
    right: 10px; 
}

.relative5{
    position: relative;
    top: -5px; 
}

.relative10{
    position: relative;
    top: -10px; 
}

.hmin1000{
    min-height: 1000px;
}

.hmin500{
    min-height: 500px;
}

.hmin750{
    min-height: 750px;
}

.h100p{
    min-height: 100%;
}

.input-search{
    border:2px solid #bfdeff;
    border-radius: 50px;
    height: 50px;
    padding-left: 20px;
    width: 90%;
}

.input-gift {
    width: 100%;
    height: 40px;
    border-radius: 50px;
    padding: 0 20px;
    border: 0;
    background-color: #fff;
    border:2px solid #bfdeff;
    font-weight: 500;
}

.box-sustained{
    background-color: #f8f8fb;
    border-radius: 10px;
    padding: 20px;
}


.blue-point{
    color: #234cf7;    
}

.grey-point{
    color: #9eabbe;    
}

.pos-top-10{
    position: relative;
    top: -10px;    
}

.bg-violet{
    background-color: #211d42;
}

.bg-purple{
    background-color: #6f277f;
}

.bg-red{
    background-color: red;
}

.bg-orange{
    background-color: orangered;
}

.bg-violet-light{
    background-color: #2a2649;
}

.icon-grey{
    color: #9eabbe;
}

.icon-grey-light{
    color: #9eabbe;
    opacity: 0.3;
}

.icon-green{
    color: #28a745;
}

.icon-blue-light{
    color: #00cfc3;
}

.icon-blue{
    color: #00cfc3;
}

.icon-pink{
    color: deeppink;
}

.icon-red{
    color: #f00;
}

.icon-gold{
    color: goldenrod;
}

.icon-white{
    color: white;
}

.icon-yellow{
    color: gold;
}

.icon-black{
    color: black;
}

.icon-fullcover{
    color: white;
}

.greyscale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.6;
}

.greyscale:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    opacity: 1;
}

.color-white{
    color: #fff;
}

.color-grey{    
    color: #444;

}

.color-purple{
    color: purple;
}

.color-plum{
    color: plum;
}

.color-orange{
    color: #FF4500;
}

.color-blue{
    /*    color: #00cfc3;*/
    /*  color: #68a6cb; */
    /*  color: #0A56A7; */
    color: #111822;

}

.color-black{
    color: #000;
}

.color-gold{
    color: goldenrod;
}

.color-yellow{
    color: #f89e1c;
}

.color-green{
    color: #28a745;
}

.color-pink{
    color: deeppink;
}

.color-red{
    color: #f00;
}

.rot45{
    transform: rotate(45deg);
}

.rot-45{
    transform: rotate(-45deg);
}

.avatar-sm{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    padding: 0px;
}

.avatar-xs{
    border-radius: 50%;
    height: 30px;
    width: 30px;
    padding: 0px;
}

.avatar-sm-squared{
    border-radius: 10%;
    height: 40px;
    width: 40px;
    padding: 0px;
}

.avatar-md{
    border-radius: 50%;
    height: 50px;
    width: 50px;
    padding: 0px;
}

.avatar-lg{
    border-radius: 50%;
    height: 60px;
    width: 60px;
    padding: 0px;
}

.avatar-xl{
    border-radius: 50%;
    height: 80px;
    width: 80px;
    padding: 0px;
}

.avatar-xl-squared{
    border-radius: 0%;
    height: 130px;    
    padding: 0px;
}

.avatar-xxl{
    border-radius: 50%;
    height: 120px;
    width: 120px;
    padding: 0px;
}

.avatar-xxl-squared{
    border-radius: 0%;
    max-height: 180px;    
    padding: 0px;
}

.bgkgradient{
    height: 100%;
    background: rgb(37,79,32);
    background: linear-gradient(133deg, rgba(37,79,32,1) 0%, rgba(21,121,9,1) 31%, rgba(63,194,22,1) 100%);
}

.avatar-container{    
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    width:10%;

}
.avatar-container-text{ 
    width:90%; 
}

.no-border-top{
    border-top: none !important;
}


.bg-grey{
    background-color: #f8f8fb;
}

.bg-grey-medium{
    background-color: #e8e8eb;
}

.bg-grey-dark{
    background-color: #99a;
}

.bg-blue-light{
    background-color: #00cfc3;
}


.bg-blue{
    background-color: #00cfc3;
}

.fw100{
    font-weight: 100;
}

.fw200{
    font-weight: 200;
}

.fw300{
    font-weight: 300;
}

.fw400{
    font-weight: 400;
}

.fw600{
    font-weight: 600;
}

.fw700{
    font-weight: 700;
}

.fw800{
    font-weight: 600;
}

.fw900{
    font-weight: 900;
}

.fs6{
    font-size: 6px !important;
}

.fs8{
    font-size: 8px !important;
}

.fs10{
    font-size: 10px !important;
}

.fs12{
    font-size: 12px !important;
}

.fs14{
    font-size: 14px !important;
}

.fs16{
    font-size: 16px !important;
}
.fs18{
    font-size: 18px !important;
}

.fs20{
    font-size: 20px !important;
}

.fs22{
    font-size: 22px !important;
}

.fs24{
    font-size: 24px !important; 
}

.fs26{
    font-size: 26px !important;
}

.fs28{
    font-size: 28px !important;

}

.fs30{
    font-size: 30px !important; 
}

.fs32{
    font-size: 32px !important; 
}

.fs34{
    font-size: 34px !important; 
}

.fs36{
    font-size: 36px !important; 
}

.fs38{
    font-size: 38px !important; 
}

.fs40{
    font-size: 40px !important; 
}

.fs50{
    font-size: 50px !important; 
}

.fs60{
    font-size: 60px !important; 
}

.fs80{
    font-size: 80px !important; 
}

.wordspacing{
    word-spacing: 6px;
}


.fsmaintitle{
    font-size: 60px !important; 
}

@media (max-width: 992px) {
    .fsmaintitle{
        font-size: 40px !important; 
    }
}

.fstitle{
    font-size: 40px !important; 
}

@media (max-width: 992px) {
    .fstitle{
        font-size: 30px !important; 
    }
}


@media (max-width: 992px) {
    #imglanded1{
        width: 250px;
    }
    #imglanded2{
        width: 250px;
    }
}

.fshort{
    font-stretch: extra-condensed;
}

.box-rounded{
    border-radius: 15px !important;
}

.box-border{
    border: 1px solid #e8e8eb;
}

.box-error{
    border: 1px solid #f00;
    border-radius: 5px !important;
    background-color: #fff;
    padding: 20px;
    margin-top: 10px;
}

.box-success{
    border: 1px solid #28a745;
    border-radius: 5px !important;
    background-color: #fff;
    padding: 20px;
    margin-top: 10px;
}

.border-bottom-green{
    border-bottom: 3px solid #0c0;
    width:250px;
}

.border-bottom-search{
    border-bottom: 3px solid #bfdeff;
    width:250px;
}

.border-bottom-give{
    border-bottom: 3px solid #bfdeff;
    width:100%;
}

.border-bottom-light{
    border-bottom: 1px solid #fff;
}

.border-squared{
    border: 0px solid #f2f2f8;
}

.border-bottom-grey{
    border-bottom:1px solid #eee;
}

.btn-rounded{
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-rounded-lg{
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

#pageloader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 80px;
    height: 80px;
    margin: -60px 0 0 -40px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top: 2px solid #555;
    width: 90px;
    height: 90px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    /*    background-image: url('../img/logo5.png');
        height: 80px;
        background-position: center; 
        background-repeat: no-repeat; 
        background-size: cover; */
}


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 2s;
    animation-name: animatebottom;
    animation-duration: 2s
}

@-webkit-keyframes animatebottom {
    from { top:0px; opacity:0 } 
    to { top:0px; opacity:1 }
}

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

#pageloaderdiv {
    display: none;
}


ul, ol {
    list-style-type: none;
}

.footer-area {
    background-color: #fff;  
}

.footer-widget {
    padding-top: 90px;
    padding-bottom: 120px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-widget {
        padding-top: 70px;
        padding-bottom: 100px; } }
@media (max-width: 767px) {
    .footer-widget {
        padding-top: 50px;
        padding-bottom: 80px; } }


.footer-copyright {
    background-color: #f3f3f8; }

.copyright {
    padding: 23px 0; }
.copyright .text {
    color: #000; }

.back-to-top {
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    background-color: #fff;
    border: 1px solid #fff;
    bottom: 10px;
    right: 20px;
    z-index: 999;
    color: #fff;
    font-size: 20px;
    display: none; 
}

.back-to-top:hover {
    background-color: #fff;
    color: #fff; 
}



.list-heading p {
    font-size: 14px;
    line-height: 30px;
    color: #888;
    margin-bottom: 5px;
}

.lists li {
    list-style: none;
    line-height: 35px;
    font-weight: 500;
    color: #888;
    font-size: 15px;
}

.lists li i.fa {
    color: #3a86fd;
}

.list-heading h2 {
    font-size: 40px;
    font-weight: 900;
    margin: 10px 0px;
}

.heading-title .subtitle {
    font-size: 24px;
    color: #2c2c2c;
    line-height: 30px;
    font-style: italic;
}

.heading-title h2 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 900;
    color: #000;
    margin-bottom: 8%;
}

.heading-title h2::after {
    content: "";
    width: 70px;
    height: 4px;
    background: #2d40d0;
    position: absolute;
    left: 17px;
    top: 100px;
}


.head-section{
    padding-bottom: 40px;
    position: relative;
}
.head-section h2 {
    letter-spacing: .5px;
    color: #000;
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 40px;
}

.head-section h2::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: #4f93fd;
    margin-top: 16px;
    text-align: center;
    margin: 15px auto 0px;
}

.head-section p {
    font-size: 15px;
    line-height: 26px;
    max-width: 54%;
    font-weight: 400;
    color: #000;
    margin-bottom: 0;
}

.center {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}


.form-group {
    margin: 0; }

p.form-message.success,
p.form-message.error {
    font-size: 16px;
    color: #121212;
    background: #cbced1;
    padding: 10px 15px;
    margin-left: 15px;
    margin-top: 15px; }

p.form-message.error {
    color: #f00; }


.list-unstyled li {
    font-size: 13px;
    margin-left: 2px;
    margin-top: 5px;
    color: #f00; }

.contact-form .single-form .main-btn {
    border-radius: 50px;
    background-color: #0067f4;
    color: #fff;
}

.input {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 25px;
    background-color: #f8f8fb;
    border: 1px solid #eee;
    padding-left: 50px;
    padding-right: 25px;
}

.form-input {
    max-width: 350px;
    position: relative;
    margin: 24px auto 0;
}

.bg-danger{
    background-color: #f00 !important;
}

.bg-danger:hover .bg-danger:focus{
    background-color: #d00 !important;
}

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

.no-decoration:hover{
    text-decoration: none;
}

.color-ow:hover{
    color: white;
}

.form-input i {
    font-size: 24px;
    color: #ccc;
    position: absolute;
    left: 18px;
    top: 13px;
}

.form-content {
    max-width: 560px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 236px;
}

input i {
    font-size: 26px;
    color: #0067f4;
    position: absolute;
    left: 18px;
    top: 15px;
}

button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.link-black{
    color: #000;

}

.link-black:hover{
    color: #000;
    text-decoration: none;
}

.link-white{
    color: #fff;

}

.link-white:hover{
    color: #fff;
    text-decoration: none;
}

.invisible{
    display: none;
}

.checkbox-terms{
    padding: 10px;
    margin-right: 6px;
    position: relative;
    top: 3px;
}

.fullcover {    
    /*  background-image: linear-gradient(-225deg, #FF057C 0%, #7C64D5 60%, #4C4399 100%);*/
    /* background-image: linear-gradient(-225deg, #2193b0 0%, #3560db 60%, #2B32B2 100%); */
    background-image: linear-gradient(-225deg, #f8f8fb 0%, #fcfcfc 60%, #d0d0d0 100%); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
}

.fullcover-grey {    
    /*  background-image: linear-gradient(-225deg, #FF057C 0%, #7C64D5 60%, #4C4399 100%);*/
    background-image: linear-gradient(-225deg, #f8f8fb 0%, #fff 60%, #f0f0f0 100%); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
}

.color-fullcover{
    color: black;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    .fullcover2 {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}

.card{
    border: none;
}

.card-body{
    background-color: none;
}

.bg-logo{
    background-image: url('../img/logo2.png');
    height: 80px;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;
}

.border-rounded{
    border: none;
    border-radius: 20px;
}

.border-rounded-top{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.flag-lang{
    width:20px;
    position: relative;
    top:0px;
    border:1px solid #f0f0f0;
}

.flag-countries{
    width:30px;
    position: relative;
    top:-1px;
    /* border:1px solid #f0f0f0; */
    /* padding: 0px; */
}

.countryselect{
    background-color:#f8f8fb;
    font-weight:600;
    border:none;
}

.usercommentbox{
    background-color: #417af2;
    padding: 10px;
    padding-left: 20px;
    border-radius: 10px;
    font-weight: 600;
}

.box-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mtmain{
    margin-top: 60px;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 6px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 18px; /* Set a specific slider handle width */
    height: 18px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 16px; /* Set a specific slider handle width */
    height: 16px; /* Slider handle height */
    background: #00cfc3; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.mw250{
    max-width: 200px;
}

.saletable > tbody > tr > td {
    line-height:  42px;
}

.visibledevice {display: none;}
.visibledesktop {display:inline;}

@media (max-width : 460px) {
    .visibledevice {display:inline;}
    .visibledesktop {display:none;}
}

.vertical-align {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.filter-keyword-input {
    width: 100%;
    height: 44px;
    border-radius: 5px;
    padding: 0 24px;
    border: 0;
    background-color: #f8f8fb;
    font-weight: 500; 
}

.filter-select {
    width: 100%;
    height: 44px;
    border-radius: 5px;
    padding: 0 24px;
    border: 0;
    background-color: #f8f8fb;
    font-weight: 500; 
}


.alertbox{
    max-width: 500px;
    margin: 0 auto;
    background-color: #f8f8fb;
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    padding:18px;
    border-radius: 10px;
}

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: 
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 10px;
    width: 160px;
    background-color: #000;
    background-color: hsla(0, 0%, 90%, 0.8);
    color: #555;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;  
    border-radius: 5px;  
    font-family: 'IBM Plex Sans', sans-serif;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: hsla(0, 0%, 90%, 0.8);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 90%, 0.8);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 90%, 0.8);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 90%, 0.8);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}

.sidebar{
    width: 280px;
    height:800px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    background-color: #fff;
    opacity: 0.96;
    display: none;
}

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

.btn-custom.primary {
    background-color: #008e00;
    -webkit-box-shadow: 4px 3px 24px rgba(0, 142, 0, .5);
    box-shadow: 4px 3px 24px rgba(0, 142, 0, .5);
}



.numbercircledlogged {
    background: red;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    color: #ffffff;
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    line-height: 2em;
    margin-right: 15px;
    padding-left: 0px;
    text-align: center;
    width: 2em; 
}

.hrbar{
    width:200px;
    border:3px solid #008e00;
    margin-top:20px;
    margin-bottom:30px;
}

.card{
                                width: 320px;
                                height: 190px;
                                -webkit-perspective: 600px;
                                -moz-perspective: 600px;
                                perspective:600px;

                            }

                            .card__part{
                                box-shadow: 1px 1px #aaa3a3;
                                top: 0;
                                position: absolute;
                                z-index: 1000;
                                left: 0;
                                display: inline-block;
                                width: 320px;
                                height: 190px;
                                background: linear-gradient(156deg, #444 30%,#222 50%, #000 100%); 
                              

                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: cover;
                                border-radius: 8px;

                                -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                -webkit-transform-style: preserve-3d;
                                -moz-transform-style: preserve-3d;
                                -webkit-backface-visibility: hidden;
                                -moz-backface-visibility: hidden;
                            }

                            .card__front{
                                padding: 18px;
                                -webkit-transform: rotateY(0);
                                -moz-transform: rotateY(0);
                            }

                            .card__back {
                                padding: 18px 0;
                                -webkit-transform: rotateY(-180deg);
                                -moz-transform: rotateY(-180deg);
                            }

                            .card__black-line {
                                margin-top: 5px;
                                height: 38px;
                                background-color: #303030;
                            }

                            .card__logo {
                                height: 30px;
                                width: 30px;
                                border-radius:10px;
                            }

                            .card__front-logo{
                                position: absolute;
                                top: 18px;
                                right: 18px;
                            }
                            .card__square {
                                border-radius:10px;
                                width: 30px;
                                height: 30px;
                            }
                            .card__type {
                                word-spacing: 4px;
                                font-size: 18px;
                                font-weight: 700;
                                letter-spacing: 1px;
                                color: #fff;
                                text-align: left;
                                position: absolute;
                                top: 20px;
                                left: 60px;
                            }

                            .card_numer {
                                display: block;
                                width: 100%;
                                word-spacing: 4px;
                                font-size: 20px;
                                letter-spacing: 2px;
                                color: #fff;
                                text-align: center;
                                margin-bottom: 20px;
                                margin-top: 20px;
                            }

                            .card__space-75 {
                                width: 75%;
                                float: left;
                            }

                            .card__space-25 {
                                width: 25%;
                                float: left;
                            }

                            .card__label {
                                font-size: 10px;
                                text-transform: uppercase;
                                color: rgba(255,255,255,0.8);
                                letter-spacing: 1px;
                            }

                            .card__info {
                                margin-bottom: 0;
                                margin-top: 5px;
                                font-size: 15px;
                                line-height: 18px;
                                color: #fff;
                                letter-spacing: 1px;
                                text-transform: uppercase;
                            }

                            .card__back-content {
                                padding: 15px 15px 0;
                            }
                            .card__secret--last {
                                color: #303030;
                                text-align: right;
                                margin: 0;
                                font-size: 14px;
                            }

                            .card__merchant {
                                font-size: 16px;
                                color: #000;
                                text-align: left;
                                position: absolute;
                                top: 5px;
                                left: 10px;
                            }

                            .card__value {
                                font-size: 20px;
                                color: #fff;
                                font-weight: 500;
                                text-align: left;
                                position: absolute;
                                bottom: 15px;
                                right: 60px;
                            }

                            .card__secret {
                                padding: 5px 12px;
                                background-color: #fff;
                                position:relative;
                            }

                            .card__secret:before{
                                content:'';
                                position: absolute;
                                top: -3px;
                                left: -3px;
                                height: calc(100% + 6px);
                                width: calc(100% - 42px);
                                border-radius: 4px;
                                background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
                            }

                            .card__back-logo {
                                position: absolute;
                                bottom: 15px;
                                right: 15px;
                            }

                            .card__back-square {
                                position: absolute;
                                bottom: 15px;
                                left: 15px;
                            }

                            .card:hover .card__front {
                                -webkit-transform: rotateY(180deg);
                                -moz-transform: rotateY(180deg);

                            }

                            .card:hover .card__back {
                                -webkit-transform: rotateY(0deg);
                                -moz-transform: rotateY(0deg);
                            }