.btn.disabled
{
    opacity:.45;
  
}
.btn.disabled:hover{
    cursor:default;
}
.fas.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}
.text-dark{
    color:black;
}
.text-gray {
    color: GrayText;
}
.text-primary {
    color: #321559 !important;
}

.text-secondary {
    color: #812ac1 !important;
}

.text-third {
    color: #fb3254 !important;
}

.bg-primary {
    background-color: #321559 !important;
}

.bg-secondary {
    background-color: #812ac1 !important;
}

.bg-third {
    background-color: #fb3254 !important;
}
.bg-beige {
    background-color: #c2b2b8;
}
@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }bod
}

.fa-left {
    margin-left: 13px;
    margin-top:7px;
}

.formforpage {
    background-color: white;
    border-radius: 1rem;
  margin-bottom:60px;
    box-shadow: 0 0 2px 3px #ddd;
    direction: rtl;
}




.backforpage {

    height: 100%;
    margin-top:120px;
    width: 100%;
    display:flex;
}



body {
    padding: 0;
    height: -webkit-fill-available;
    margin: 0;
    font-family: 'myfont'!important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
.notif{
    border-radius:5rem;height:25px;width:25px;padding-top:2px;float:left!important;margin-left:5px;font-size:14px!important;
}






.multi-item-carousel .carousel-inner > .item {
  transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
  left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
  left: 33%;
}
.multi-item-carousel .carousel-inner .next {
  left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
  left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
    transition: 500ms ease-in-out all;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    -webkit-transform: none !important;
            transform: none !important;
  }
}



figure {
  margin: 0;
}

.tile {
  width: 100%;
  min-width:200px;
  min-height: 320px;

  position: relative;
  float: left;
}
.tile .front,
.tile .back {
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 320px;

  overflow: hidden;
  text-align: center;
}

.tile p,
.tile a {
 font-size:smaller;
}
.tile img {
  max-height: 330px;
}
.tile .front {
  background: #fff;
  transition: all 0.5s ease-in-out;
  z-index: 2;
}
.tile .front h3 {

  color: black;
  

}
.tile .back {
  background: #e6b800;
  color: white;
  z-index: 1;
  padding-top: 50px;
  height: 300px;
}
.tile .back h3 {
  font-size: 1.5em;
  color: white;
  margin-top: 1em;
  margin-bottom: 1em;
}
.tile .back a {
  display: block;
  font-size: 1.2em;
  color: white;
  border-top: 1px solid #ffcc00;
  margin: 0 20px;
  padding: 0.5em 0;
}
.tile:hover .front {
  top: -300px;
  transform: rotate(2deg);
}



@media screen and (min-width: 992px){
.title{
  
}
}

.background-color  { 
  
  text-align: center;
  background: rgba(255, 253, 160, 1);
  background: -webkit-linear-gradient( left, #ffa7f9  0%, #ff2cc3  25%, #ffe3a7  50%, #00ffff 100%) repeat;
  -webkit-background-clip: text;
  -ms-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-animation-name: masked-animation;
  -webkit-animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -8000px -3000px;
    }
}
.sixth-section {
    background-image: url(../images/back/cool-background.png);
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    padding: 20% 0px 20% 0px;
}
.fifth-section {
    background-image: url(../images/back/alexandru-g-stavrica-J5Si8M5IIhU-unsplash.jpg);
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    padding: 20% 0px 20% 0px;
}
.fourth-section {
    background-image: url(../images/back/photo-1620121692029-d088224ddc74.jpg);
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    padding: 20% 0px 20% 0px;
}
.third-section {
    background-image: url(../images/back/black-wall-background-9.jpg);
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    padding: 20% 0px 20% 0px;
}


.secound-section {
    width: 100%;
    
}


.first-section {
   
    width: 100%;
 
}

.first-section .text-content .line-dec {
    width: 60px;
    height: 3px;
    background-color: #fff;
    margin: 25px 0px 25px auto;
}

.fitem{
        width:85px;
}

.fitem img{

    height:70px;
}
.fitem a{
    font-size:smaller;
}

.info-area .info-thumb {
    overflow: hidden;
    display: inline-block;
}

.info-content {
    box-shadow: 0 0 50px 0 rgba(157,157,157,.3);
    position: relative;
    background: #fff;
    padding: 30px 40px 30px 40px;
    margin-right:-30px;
    z-index:10;
}

.single-service {
    padding: 45px 39px;
    background: #fff;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button.disabled{
  
    
}
button.disabled:hover
{
      cursor:none;
      transform:none;
      box-shadow:none;
}

.labelranger{
    width: 40px;
    height: 30px;
    padding-top: 8px;
  
    border: 1px solid #ccc;
    font-size:x-small;
    margin-right:auto;
    margin-left:auto;

}
.titleranger
{
    font-size:x-small;
    margin-bottom:10px;

}
/* Set padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 15px;
    padding-right: 15px;*/
    margin-top:56px;
    width:100%;
}

.uploader {
    width: 48px;
    height: 48px;

    border-radius: 4rem;
    z-index: 2;

}
.uploader:hover{
    cursor:pointer;
}

.field-validation-error
{
      box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
    font-size:11px;
   color:white;
   background-color:orange;
   border-radius:4px;
    direction:rtl;
    padding:3px;
    padding-right:6px;
    padding-left:6px;
    margin-top:3px;
  margin-right:auto;
  position:absolute;

}

.accountlink{
        font-size: small;
    width: 100px;
    height: 30px;

    text-decoration: none;
   
    margin: 6px;
    color: deepskyblue;
}

.link{

    font-size:small;
   min-width:100px;
    height:30px;
    padding:5px;
    text-decoration:none;
    border:1px solid lightgray ;
    margin:3px;
    color:gray;

}
.linkactive{
     border:2px solid ;
    color:#2d3440;
}

.btnlink{
     font-size:small;
   min-width:250px!important;
    height:40px;
    padding:10px;
    padding-right:20px;
        padding-left:20px;
    border-radius:3px;

}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select
 {
    max-width: 280px;
}

.card {
  box-shadow: 0 0px 8px 2px rgba(0,0,0,0.15);
  transition: 0.3s;

  border-radius: 5px;
}
.card-image{
    width:40%;
}



button.sub {
    /*-webkit-box-shadow: 0px 6px 0px #C71C22, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);*/
/*-moz-box-shadow: 0px 6px 0px  #C71C22, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);*/
/*box-shadow: 0px 6px 0px  #C71C22, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);*/
  border-radius: 0.3rem;
  font-weight:400;
  font-size:medium;
  font-family:IRANSansWeb;
 min-width:280px;
 height:50px;
   display: inline-block;
    text-align: center;
  border:2px solid;
   outline:none;
  vertical-align:middle;
   transition: all 0.5s;

  
  

}

button.sub:hover,
button.sub:focus {
    cursor:pointer;
    -webkit-transform: translateY(-0.15em);
         box-shadow:0 30px 25px -20px grey;
         

  
}

.hov-crimson:hover,.hov-crimson:focus
{
    background-color:crimson;
    color:white;
    transform:none;
}

.hov-primary:hover,.hov-primary:focus
{
    background-color:#020926;
    color:white;
    transform:none;
}
.hov-gray:hover,.hov-gray:focus
{
    background-color:lightgray;

    transform:none;
}
.hov-sunshine:hover,.hov-sunshine:focus
{
    background-color:orange;

    transform:none;
}
button.bg-trans:hover
button.bg-trans:focus{
    background-color:rgba(96, 107, 109,0.9);
}

button.tabbtn{
    color:black;
    font-size:large;
    font-weight:500;
    opacity:.6;
    background-color:transparent;
    border:0;

    border-radius:0;
}

button.tabbtn:hover
{
    border-bottom:3px solid #ccc;
    /*background-color:#ddd;*/
    opacity:1;
    box-shadow:none;
    transform:none;
}
button.tabbtn:focus
{
     

        box-shadow:none;
    transform:none;
}

button.borderactive{
         border-bottom:3px solid #f21d47;
    color:white;
    opacity:1;
}

.labelforlginput{
    width:100%;
    max-width:360px;
    font-size:small;
}



.logoff{

  

}
.logoff:hover
{
      transform:none;
      background-color:crimson;
}
.navtopitem{
     color: white;

    cursor:pointer;
}

.navsubitem{
    width:100px;
    font-size:small;
}

.navsubitem:hover{

    background-color:#ddd;
    cursor:pointer;
  
}
.navsubitem:active{

    background-color:#f21d47;
    cursor:pointer;
    color:white;
}


.navsideitem{
    display:block;
    color: #fff;
    opacity:0.8;
    padding: 8px;
    background-color: transparent;
    width: 85%;
    border:none;
    border-radius:5px;
    margin:2px;
    margin-left:auto;
    margin-right:auto;
    padding-right:0;
    padding-left:0;
}

.navsideitem img{
    float:right;
     height:20px;
     width:20px;
     margin-left:25px;
     margin-right:20px;
}

.navsideitem span
{
    font-size:14px;
    font-weight:400;
    float:right;
}

.navtopitem:hover{
       background-color:#f9527a;
      color:white;
  
      box-shadow:none;
}
.navsideitem:hover{
   background-color:rgba(255, 255, 255, 0.13) ;

    /*background-color:rgba(199, 28, 34,0.4);*/
   
}
.navsideitemactive{
       background-color:rgba(255, 255, 255, 0.19) ;
      opacity:1;   
}
.navtopitem:focus,.navtopitem:active{
     background-color:rgba(255, 255, 255, 0.19) ;
      opacity:1;    
     box-shadow:none;

}


.useritem{
     justify-content:center;
    display:flex;

    border-bottom:1px solid rgba(0, 0, 0, 0.2);

    border-radius:2px;
    background-color:white;
}


.useritem:hover
{
    cursor:pointer;
    background-color:powderblue;
 /*transform:scale(1.01);*/
 transition:ease 0.1s;
 
 
}

.Reqitem
{
      
    direction:rtl;
    min-width :160px;
    width:95%;
   box-shadow:0 0 1px 1px rgba(0,0,0,0.1);
    border-left:6px solid ;
    margin:3px;

      /*margin-bottom:10px;*/
    transition: all .1s linear;
  
}
.Reqitem:hover
{
    cursor:pointer;
    
 transform:scale(1.01);
 transition:ease 0.1s;
 
 
}

.ReqitemActive
{
    background-color:#020926;
    color:white
}


.Prozitem{
    width:130px
}
.Prozitem hr{
    margin-top:30px;
    border:none;
    height:3px;
    background-color:lightgray

}
.Prozitem p{
    font-size:x-small;
    font-weight:800;
    margin-top:10px;
}
.Prozitem .pic{
    height:40px;
    width:40px;
    border-radius:3rem;
 
    margin-top:-45px;
}





.iconbtn{
    width:35px;
    height:35px;
    padding:9px;
    background:none;
    border:none;
    opacity:0.4;

}
.iconbtn:hover,.iconbtn:focus
{

    transform:none;
    box-shadow:none;
    opacity:1;
}
.softwareitem{

      box-shadow: 0 2px 3px 3px #ddd;
        direction:rtl;
        min-width:265px;
   max-width:330px;
   border-radius:5px;

}
.Labelforinput{

width:26px;
height:26px;
border-right:1px solid;
padding-right:8px;
padding-left:3px;

margin-top:12px;
 margin-right:-31px;
 z-index:3;

}


#mos  a {
	text-align: center;
	position: relative;
	text-decoration: none;


}
#mos a::after{
  	content: "";  
    border-left:5px solid transparent;
    border-right:5px solid transparent;
	border-bottom: 5px solid orange;
	position: absolute;
     right: 58px; 
     top: -23px;
}



#crumbsleft  a {
	
	background: #020926;
	text-align: center;
	height:19px;
	position: relative;
	font-size: 15px;
	text-decoration: none;
	color:#020926;
    float:left;
}


#crumbsleft  a:after {
	content: "";  
    border-left:20px solid;
	border-top: 20px solid transparent;
	position: absolute;
     left: 0; 
     top: 0;
}

#divcuterr a
{

    background: #282e3a;
	text-align: center;	
	position: relative;
	font-size: 15px;
	text-decoration: none;
	color:white;
}

#divcuterr  a:after {
	content: "";  
    border-left:200px solid;
	border-top: 443px solid transparent;
    float:left;
	position: absolute;
       
     left: 0; 
     top: 0;
}
#crumbsright  a {
	
	background: #020926;
	text-align: center;
	height:19px;
	position: relative;
	font-size: 15px;
	text-decoration: none;
	color:#020926;
    float:right;

}


#crumbsright  a:after {
	content: "";  
    border-right:20px solid;
	border-top: 20px solid transparent;
    float:right;
	position: absolute;
     margin-right: -1px;
     right: 0; 
     top: 0;
}




#polleft  a {
	
	background: #020926;
	text-align: center;
	height:19px;
	position: relative;
	font-size: 15px;
	text-decoration: none;
	color:#020926;
    float:left;
    margin-left: -10px;
}


#polleft  a:after {
	content: "";  
   border-top: 22.5px solid transparent;
	border-bottom: 22.5px solid transparent;
	border-right: 10px solid #ffa500;
    left:-11px;
	position: absolute;
     left: 0; 
     top: 0;
}




#polright  a {
	
	background: #020926;
	text-align: center;
	height:19px;
	position: relative;
	font-size: 15px;
	text-decoration: none;
	color:#020926;
    float:right;
     margin-right: -10px;

}


#polright  a:after {
	content: "";  
   border-top: 22.5px solid transparent;
	border-bottom: 22.5px solid transparent;
	border-left: 10px solid #ffa500;
    float:right;
	position: absolute;

     right: 0; 
     top: 0;
}

#crumbs ul li div {
	height: 40px;
    width:90px;
	text-align: center;
	position: relative;
	border-radius:0;
	font-size:medium;
	text-decoration: none;
    border:1px solid gray;
    background-color:white;
    color:black;
    padding-top:8px;

}


#crumbs ul li div:after {
	content: "";  
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 10px solid #020926;
	position: absolute;
     left: -11px; 
     top: -1px;
}

#crumbs div{
    height: 35px;
    width:90px;
	text-align: center;
	position: relative;
	border-radius:0;
	font-size:small;
	text-decoration: none;
    border:1px solid gray;
    background-color:orange;
    color:black;
    padding-top:8px;
}

#crumbs  div:after {
	content: "";  
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 10px solid #020926;
	position: absolute;
     left: -11px; 
     top: -1px;
}


.photo{
     position:absolute;
     height:100px;
     width:100px; 
     border-radius:50%;
     border:3px solid darkgray;
   

}


.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0.5;
	overflow: hidden;
	position: absolute;
	z-index: -1;
    background-color:transparent;

}

.inputpic {
	width: 0.1px;
	height: 0.1px;
	opacity: 0.5;
	overflow: hidden;
	position: absolute;
	z-index: -1;
    background-color:transparent;

}

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: blue;
    background-color: black;
    opacity:0;
    display: inline-block;
     width:100px;
    height:100px;
}


.inputpiclabel {

    z-index:3;
    margin-top: 125px;
     margin-left: -23px;
 

}

 .inputpiclabel,   .inputfile:focus + label,
  .inputpiclabel,   .inputfile + label:hover {
        cursor: pointer;
    }

     .closebtn{

 
      position:absolute!important;
      margin:10px;
      left:0;
    }
 
    .menubtn{
        right:0;
        bottom: 0;
        margin: 20px;
       width: 60px;
       height:60px;
       position: fixed;
       border-radius:50%;
       opacity:0.9;
       display:none;
    }
.menubtn:hover{

    opacity:1;
}



 .day
{
  border:1px solid #ddd;
  padding:10px!important;
  text-align:left!important;
  line-height:initial!important;
  height:10px!important;
  vertical-align:top;
  border-radius:0px!important;
}
.day:hover
{
  background-color:#1aa8a8 !important;
  color:#fff!important;
}
.bootstrap-datetimepicker-widget table th.picker-switch
{
  text-align:center!important;
}
.bootstrap-datetimepicker-widget table th
{
  text-align:left!important;
}
.bootstrap-datetimepicker-widget table th.next
{
  text-align:right!important;
}
.table-condensed thead tr th
{
  height:50px;
}

.personitem{
      width:130px;
  height:130px;
  margin:4px;
  border:none;
  box-shadow:0 0 4px 1px rgba(0,0,0,.2);
  background-color:white;
}
.personitem:hover{
    background-color:#ddd;
    transform:none;
    box-shadow:none;
}
.personitem:focus
{
        transform:none;
         box-shadow:0 0 4px 1px rgba(0,0,0,.2);
}
#vers td
{
    background-color:#e9ecef;
    border:0;
    text-align:center;
    text-anchor:middle; 
}
.featureitem > p{
    font-size:large;
    padding-top:6px;
    color:#222;
    text-align:center;
}
.featureitem {
   
    height:100%;
    margin:auto;
    
}

@media (min-width: 769px) {
   
    .featureitem > p {
        font-size: x-large;
    }
}
@media (min-width: 1200px) {

    .featureitem > p {
        font-size: xx-large;
    }
}



    #star {
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .filled {
        color: orange;
    }

    .tablinks {
        width: 48%;
        height: 50px;
        border-radius: 3rem;
    }



    .tab {
        border: 1px solid lightgray;
        border-radius: 0;
    }

        .tab:hover {
            transform: none;
            background-color: lightgray;
        }

        .tab:focus {
            transform: none;
            background-color: crimson;
            color: white;
        }

    .Thead {
        justify-content: center;
        display: flex;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        background-color: white;
    }


    .TheadEvent {
        justify-content: center;
        display: flex;
        border-radius: 2px;
        margin-bottom: auto;
        margin-top: auto;
    }


    .radio {
        position: relative;
        cursor: pointer;
        line-height: 20px;
        font-size: 15px;
    }

        .radio .label {
            position: relative;
            display: block;
            float: left;
            margin-right: 10px;
            width: 26px;
            height: 26px;
            border: 2px solid #c8ccd4;
            border-radius: 100%;
            -webkit-tap-highlight-color: transparent;
        }

            .radio .label:after {
                content: '';
                position: absolute;
                top: 5px;
                left: 5px;
                width: 12px;
                height: 12px;
                border-radius: 100%;
                background: crimson;
                transform: scale(0);
                transition: all 0.2s ease;
                opacity: 0.08;
                pointer-events: none;
            }

        .radio:hover .label:after {
            transform: scale(3.6);
        }

    input[type="radio"]:checked + .label {
        border-color: crimson;
    }

        input[type="radio"]:checked + .label:after {
            transform: scale(1);
            transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);
            opacity: 1;
        }

    .cntr {
        position: absolute;
        top: calc(50% - 10px);
        left: 0;
        width: 100%;
        text-align: center;
    }

    .hidden {
        display: none;
    }

    .credit {
        position: fixed;
        right: 20px;
        bottom: 20px;
        transition: all 0.2s ease;
        -webkit-user-select: none;
        user-select: none;
        opacity: 0.6;
    }

        .credit img {
            width: 72px;
        }

        .credit:hover {
            transform: scale(0.95);
        }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }

    input[type=number] {
        -moz-appearance: textfield; /* Firefox */
    }

    .slidecontainer {
        width: 45px;
        height: 68px;
        margin-right: 12px;
    }

    /* The slider itself */
    .ranger-vertical {
        -webkit-appearance: none; /* Override default CSS styles */
        -moz-appearance: none;
        appearance: none;
        width: 14px; /* Full-width */
        height: 3px; /* Specified height */
        background: #ccc; /* Grey background */
        outline: none; /* Remove outline */
        opacity: 0.9; /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: opacity .2s;
        transform: translateY(30px) rotate(90deg);
        transform-origin: bottom;
    }


    .ranger {
        -webkit-appearance: none; /* Override default CSS styles */
        -moz-appearance: none;
        appearance: none;
        direction: ltr;
        width: 280px;
        height: 5px; /* Specified height */
        background: #ccc; /* Grey background */
        outline: none; /* Remove outline */
        opacity: 0.9; /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: opacity .2s;
    }

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

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

        .ranger::-moz-range-thumb {
            -webkit-appearance: none; /* Override default look */
            -moz-appearance: none;
            appearance: none;
            width: 8px; /* Set a specific slider handle width */
            height: 22px; /* Slider handle height */
            background: #f21d47; /* Green background */
            cursor: pointer; /* Cursor on hover */
            border-radius: .15rem
        }

    .polygon-each {
        border-radius: 1rem;
        border-top-left-radius: 1rem;
        width: 300px;
        height: 100%;
    }

        .polygon-each hr {
            margin-top: 0;
        }


    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 400px;
        margin: auto;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        border-radius: 1rem;
    }

    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
        color: black;
    }

    /* Style the back side */
    .flip-card-back {
        background-color: #f2f2f2;
        color: black;
        transform: rotateY(180deg);
    }
.customheadline {
    font-size: 5vw;
    font-weight: 900;
    color: #999;
    line-height: initial;
}
.customheadlinebig {
    font-size: 7vw;
    font-weight: 900;
    line-height: initial;
}


@media (min-width: 1023.98px) {
    .customheadline {
        font-size: 1.7vw;
    }
    .customheadlinebig {
        font-size: 2.5vw;
    }
}
@media (min-width: 767.98px) {
    .customheadline {
        font-size: 2.7vw;
    }

    .customheadlinebig {
        font-size: 4vw;
    }
}
}