.cal_wrap{
    position:relative;
    display:flex;
    align-items: center;
    margin-top:5%;
    max-width:100vw;
    width:100%;
    height:80vh;
}

.cal_pic{
    height:90%;
    width:60%;
    background-image: url("/photo/kal.mp4");
    background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
    
}

.container_cal{
    background-color: #F1F1F1;
    max-width:100vw;
    padding: 50px 40px;
    width:40%;
    height:85%;
    max-height:100vh;
    border-radius:2rem;
    position: relative;
    margin-left:5%;
    box-shadow: 0 30px 50px rgba(0,0,0,0.1);
}

.container_cal p{
    text-align: center;
    font-size: 1.2rem;
    color:black;
    font-weight: bold;
}


.wrapper_cal{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5% 0;
    position:relative;
}

.wrapper_cal_final{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
}

.wrapper2_cal{
    text-align:left;
    margin-top:3%;
}

.lbl{
    font-size: 0.9rem;
    color: #000000;
    font-weight: bold;
    font-family: Helvetica;
}

.lbl3{
    align-content: center;
    font-size: 1rem;
    color: #000000;
    font-weight: normal;
    font-family: Helvetica;
}

.lbl2{
    display:none;
    font-size: 1.3rem;
    color: #474848;
    font-weight: 400;
    font-family: Helvetica;
    
}
.val{
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 1.2rem;
    font-family: Helvetica;
}

.val2{
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 1.2rem;
    font-family: Helvetica;
}


.input-box{
    display:none;
    background-color: #100f6a;
    color: rgb(0, 0, 0);
    padding: 5px;
}
#bill{
    background-color: transparent;
    border: none;
    outline: none;
    width: 100px;
    text-align: right;
    color: green;
}
hr{
    border: none;
    /*border-bottom: 1px solid #ffffff28;*/
}

.slider{
    -webkit-appearance:none;
    background: rgba(0, 128, 0, 0.565);
    height: 3px;
}


.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
}

input[type="range"]{
    width: 100%;
    cursor: pointer;
    background-color: green;
    
    
    
   
}
input[type="range"]:not(:last-child){
    background-color: green;
}
section:not(:last-child){
    margin-top:0%;
}
section:not(:first-child){
    margin-top:0%;
}
section:last-child{
    background-color: #F1F1F1;

}
section:last-child .val,
section:last-child .lbl{
    color: black;
}


.cards{
    position:relative;
    margin-top:10%;
    max-height:100vh;
    height:auto;
    max-width:100vw;
    width:80%;
    margin-left:10%;
	/*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.cards-1{
    position:relative;
    display:none;
    margin-top:10%;
    max-height:100vh;
    height:auto;
    max-width:100vw;
    width:80%;
    margin-left:10%;
	/*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.cards_text{
    position:relative;
    display:flex;
    justify-content: center;
    max-height:100vh;
    height:10%;
    max-width:100vw; 
    font-size:2.1rem;
    color:black;
    font-weight: bold;

}


.cards_wrap{
    position:relative;
    display:flex;
    margin-top:1%;
    justify-content: center;
    height:100%;
    width:100%;

}


.cards_wrap_text{
    position:relative;
    display:flex;
    margin-top:5%;
    height:100%;
    justify-content: center;
    max-height:100vh;
    width:100%;

}

.text1{
  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
  color:black;
  font-size:1rem;
  font-weight: bold;
  height:5vh;
  width:20%;
  margin-left:-10%;

}

.text2{
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:black;
    font-size:1rem;
    font-weight: bold;
    height:5vh;
    width:20%;
    margin-left:10%;

    
  }

  .microsite_text1{
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    color:black;
    font-size:1rem;
    font-weight: bold;
    height:5vh;
    width:20%;
    margin-left:15%;

  }
  
  .microsite_text2{
      position:relative;
      display:flex;
      align-items: center;
      justify-content: center;
      color:black;
      font-size:1rem;
      font-weight: bold;
      height:5vh;
      width:20%;
      margin-left:5%;

      
    }


.card1_wrap{
    position:relative;
    height:50vh;
    width:20%;
    border-radius:2rem;
    margin-left:-10%;
    box-shadow:inset 3px 3px 3px #F1F1F1, 3px 0 0 #f1F1F1;
}

.card2_wrap{
    position:relative;
    height:50vh;
    width:20%;
    margin-left:10%;
    box-shadow:inset 3px 3px 3px #F1F1F1, 3px 0 0 #f1F1F1;
    border-radius:2rem;
}

.microsite1_wrap{
    position:relative;
    height:50vh;
    width:20%;
    border-radius:2rem;
    margin-left:15%;
    box-shadow:inset 3px 3px 3px #F1F1F1, 3px 0 0 #f1F1F1;
}

.microsite2_wrap{
    position:relative;
    height:50vh;
    width:20%;
    margin-left:5%;
    box-shadow:inset 3px 3px 3px #F1F1F1, 3px 0 0 #f1F1F1;
    border-radius:2rem;
}

.card1_top{
    display:flex;
    position:relative;
    width:100%;
    height:10%;
    align-items: flex-end;
    justify-content: left;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.card1_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/calc/Produkty/karta1.svg");
	background-size: 85%;
	background-repeat: no-repeat;
	background-position:center;
}

.card2_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/calc/Produkty/karta2.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position:center;
}

.card3_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/calc/Produkty/karta3.svg");
	background-size: 85%;
	background-repeat: no-repeat;
	background-position:center;
}

.microsite1_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/Microsite/MICROSITEZAKLAD.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position:center;
}

.microsite2_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/Microsite/MICROSITEBUSINESS.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position:center;
}

.microsite3_mid{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
    justify-content: center;
    background-image: url("/photo/Microsite/MICROSITEPREMIUM.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position:center;
}

.card1_bot{
    display:flex;
    position:relative;
    width:100%;
    height:40%;
    justify-content: center;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    background-color: #F1F1F1;
}


.price_text{
   position:relative;
   display:block;
   width:100%;
   text-align: center;
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
   border-bottom-left-radius: 2rem;
   border-bottom-right-radius: 2rem;
   /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
   background-color: #F1F1F1;
}

.price{
    position:relative;
    display:flex;
    margin-top:10%;
    justify-content: center;
    font-size:1rem;
    font-weight: bold;
    color:black;
}

.price2{
    position:relative;
    display:flex;
    margin-top:10%;
    justify-content: center;
    font-size:1rem;
    font-weight: bold;
    color:black;
}

.once{
    display:flex;
    justify-content: center;
    position:relative; 
    margin-top:5%;
    font-size:0.8rem;
    color:black;
   /* background-color: #F1F1F1;*/
}

.color{
    display:flex;
    position:relative;
    width:100%;
    height:50%;
}

.color ul{
    margin-left:10%;
    display:flex;
    align-items:center;
    font-size:0.7rem;
    color:black;
    font-weight: bold;
}

.button{
    display:flex;
    justify-content: center;
    margin-top:5%;
    height:30%;
}

.detail{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-weight: 600;
    border: none;
    background-color: #4AAD52;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	box-sizing: border-box;
	color: white;
	font-size: 1.5em;
	padding: 20px;
	width: 80%;
	max-width: 100vw;
	max-height:100%;
	height:35%;
	cursor: pointer;
	border:none;
	font-family: Arial, Helvetica, sans-serif;
}

.detail:hover{
    transform: scale(1.05);
    transition: ease-in-out 100ms;
    background-color: #F6F930;
    color: black;
}




.kosik{
    display:flex;
    width:30%;
    margin-left:-15%;
    margin-right:10%;
}

.stojan{
    position:relative;
    display:flex;
    max-width:100%;
    width:40%;
    margin-left:30%;
    height:30vh;
    margin-top:5%;
    border-radius: 2rem;
    box-shadow:inset 3px 3px 3px 4px #F1F1F1, 3px 5px 0 #f1F1F1;
}

.sales{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    width:50%;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.point{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    width:60%;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.point_pic{
    margin-top:-20%;
    width:100%;

}

.point_block{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    width:100%;
    margin-left:10%;
    border-radius:2rem;
    background-color:#F1F1F1;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.sales_block{
    position:relative;
    display:block;
    height:90%;
    width:90%;
    margin-left:5%;
    margin-top:5%;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.sales_block_text{
    position:relative;
    display:block;
    width:100%;
    height:75%;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.sales_text{
    margin-left:5%;
    font-size:1.3rem;
    color:black;
    font-weight: bold;
}

.sales_price{
    margin-top:5%;
    margin-left:5%;
    font-size:1.2rem;
    color:black;
    font-weight: bold;
}

.sales_indiv{
    margin-left:5%;
    margin-top:3%;
    font-size:1rem;
    color:black;
}

.sales_once{
    margin-left:5%;
    font-size:1rem;
    color:black;
}

.sales_btn{
    margin-left:5%;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
	background-color: #317B22;
	border-radius: 0.5em;
	box-sizing: border-box;
	color: white;
	font-size: 1.2em;
	padding: 20px;
	width: 80%;
	max-width: 100vw;
	max-height:100%;
	height:60%;
	z-index:7;
	cursor: pointer;
	border:none;
    font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.sales_btn:hover{
    background-color:rgb(17, 17, 98);
}

.sales_block_btn{
    position:relative;
    display:flex;
    justify-content: left;
    height:10%;
}



@media screen and (max-width: 820px){

.cards{
    display:none;
}

.cards-1{
    position:relative;
    display:block;
    margin-top:10%;
    max-height:100vh;
    height:auto;
    max-width:100vw;
    width:80%;
    margin-left:10%;
	/*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
}

.cards_text{
    position:relative;
    display:flex;
    justify-content: center;
    max-height:100vh;
    height:10%;
    max-width:100vw; 
    font-size:2.1rem;
    color:black;
    font-weight: bold;

}


.cards_wrap{
    position:relative;
    display:block;
    margin-top:1%;
    height:100%;
    width:100%;

}


.cards_wrap_text{
    position:relative;
    display:block;
    margin-top:5%;
    height:100%;
    max-width:100vw;
    max-height:100vh;
    width:100%;

}


.text1{
    font-size:4vw;
    height:5vh;
    width:100%;
    margin-left:0;
  
  }
  
  .text2{
      font-size:4vw;
      height:5vh;
      width:100%;
      margin-left:0;
    }
  
    .card1_wrap{
        height:60vh;
        width:100%;
        margin-left:0;
        box-shadow:inset 3px 3px 3px #F1F1F1, 3px 0 0 #f1F1F1;
    }
    
    .card2_wrap{
        position:relative;
        height:60vh;
        width:100%;
        margin-left:0;
    }
    
    .card1_mid{
        height:60%;
    }
    
    .card2_mid{
        height:60%;
    }
    
    .card3_mid{
        height:60%;
    }

    .card1_bot{
        height:30%;
    }
    
     
     .price{
         margin-top:5%;
         font-size:5vw;
     }
     
     .price2{
         margin-top:5%;
         font-size:5vw;
     }

     .once{
        margin-top:5%;
        font-size:4vw;

    }

    .detail{
        font-size: 4vw;
        width: 60%;
        height:50%;

    }
    
}