:root {
    --brandprimary: #0067AC;
	--brandprimarybghover: rgba(0, 103, 172, 0.1);
	--font-color: #444;	
	--brandprimarydark: #cce1ee;
	--brandprimaryhover: #004d81;
	--lightborder: #ccc;
	--gradient: var(--brandprimary);
	--padding: 16px;
	
	--burgTop1: 1px;
    --burgTop2: 9px;
    --burgTop3: 17px;
	--dashed-top-offset: 18px;
	--dash-width: 3px;
	--slidertextshadow: 1px 1px 1px rgba(0,0,0,0.2);
}


ul.cms-toolbar-item {
    width: auto;

    li {
        width: auto;

        &:before {
            display: none;
        }

        ul {
            width: auto
        }
    }
}
 
#page-wrapper {
	float: left;
	width: 100%;
}

*, div, label, span, p, pre, section, select, input, textarea, button, article, ul, ol, li, *:before, *:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}









.fill2, .fill {
	fill: var(--brandprimary);
}

body,
body * {
    font-family: "Work Sans";
}

body {
    font-size: 16px;
    color: var(--font-color);
    background: #fff;
	overflow-x: hidden;
	
	@media screen and (prefers-color-scheme: dark) {
		background: #303030;
		color: #eee;
	}
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aab2bd;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #aab2bd;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #aab2bd;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #aab2bd;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
	font-weight: 400;
	color: var(--brandprimary);
	margin-top: 21px;
	
	@media screen and (prefers-color-scheme: dark) {
		color: var(--brandprimarydark);
	}

    @media screen and (max-width: 767px) {
        line-height: 1.4;
    }
}

h2 {
	@media screen and (max-width: 767px) {
		font-size: 24px;
	}
}

h3 {
	@media screen and (max-width: 767px) {
		font-size: 22px;
	}
}

ul {
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;

	li {
		display: block;
		float: left;
		position: relative;
		padding-left: 40px;
		width: 100%;
		margin-bottom: 10px;	
		font-size: 20px;
		line-height: 32px;

		&:before {
			content: "\f00c";
			font-family: "FontAwesome";
			font-weight: bold;
			margin-right: 10px;
			color: var(--brandprimary);
			position: absolute;
			left: 0;
			top: 0;
		}
		
		@media screen and (max-width: 767px) {
			font-size: 16px;
			line-height: 1.4;
			padding-left: 34px;
		}
	}
}


select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
    border: 1px solid var(--lightborder);
    border-radius: 8px;
    padding: 8px 5px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    font-size: 16px;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    color: #444;

    &:hover {
        border-color: #aaa;
    }
    &:focus {
        border-color: #aaa;
        /* box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); */
        color: #222; 
        outline: none;
        background-color: #f6f6f6;
    }
}

a {
	color: var(--brandprimary);

	&:hover,
	&:focus,
	&:active {
		color: var(--brandprimaryhover);
	}
}

select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"] {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    line-height: 34px;
}

/* stylowanie selecta */
select {
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    padding-right: 30px;
    cursor: pointer;
}
select::-ms-expand {
    display: none;
}

.btn {
	border-radius: 0 16px 0 16px;
	border: 2px solid var(--brandprimary);
	padding: var(--padding) calc(var(--padding) * 2) calc(var(--padding) * 1.5);
	background: #fff;
	color: var(--brandprimary);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;

    -moz-transition: 0.15s;
    -webkit-transition: 0.15s;
    transition: 0.15s;
	position: relative;
	
	min-width: 180px;
	
	@media screen and (prefers-color-scheme: dark) {
		background: transparent;
	}

    &:hover,
    &:active,
    &:focus {
        background: var(--brandprimarybghover);
        color: var(--brandprimaryhover);
		border-color: var(--brandprimaryhover);
		
		&:before {
			left: var(--padding);
			right: var(--padding);
		}
    }
	
	&:before {
		content: " ";
		display: block;
		
		position: absolute;
		left: calc(var(--padding) * 3);
		right: calc(var(--padding) * 3);
		bottom: 12px;
		height: 1px;
		background:  linear-gradient(90deg, transparent, var(--brandprimary), transparent);	
		-moz-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	
	@media screen and (max-width: 767px) {
		font-size: 22px;
		padding: calc(var(--padding) / 2) var(--padding) calc(var(--padding) * 0.75);
		
		&:before {
			bottom: 6px;
		}
	}
}

h1.title {
    font-size: 28px;
    margin: var(--padding) 0;
    font-weight: 600;

    @media screen and (max-width: 767px) {
        font-size: 24px;
        margin: var(--padding) 0 0;
    }
}

img {
    vertical-align: middle;
    max-width: 100%;
}
/* end stylowanie selecta */


/* NAGŁÓWEK */
header {
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    float: left;
    width: 100%;
    z-index: 11;
    position: relative;
	background: #fff;
	
	@media screen and (prefers-color-scheme: dark) {
		background: #222;
	}
}

#wrapper {
    width: 100%;
    float: left;
}

.container  {
	width: 1200px;
	max-width: 100%;
	padding-left: 16px;
    padding-right: 16px;
    margin: 0 auto;
}


.top-header {
	display: flex;
	width: 100%;
    float: left;
	position: relative;

    @media screen and (max-width: 767px) {
        flex-wrap: wrap;
        justify-content: right;
    }
    
    
    > div {
        vertical-align: middle;
        display: flex;
        padding: var(--padding) 0;
        order: 1;
    }

    > .logo {
        float: none;
        width: auto;
        flex-shrink: 0;

        @media screen and (max-width: 767px) {
            flex-grow: 1;
        }

        a {
            display: block;
            float: left;
            white-space: nowrap;
            align-self: center;
            padding: 0;

            > img {
                display: initial;
				
				&.dark-logo {
					display: none;
				}
				
				@media screen and (prefers-color-scheme: dark) {
					&.normal-logo {
						display: none;
					}
					
					&.dark-logo {
						display: initial;
					}
				}
				
				@media screen and (max-width: 767px) {
					width: 150px;
				}
            }
        }
        
    }

    > .searcher {
        margin-bottom: 0;
        padding: 0 var(--padding);
        align-items: center;

        .field-wrap {
            max-width: 360px;
        }

        @media screen and (max-width: 767px) {
            order: 2;
            width: 100%;
            padding: 0 0 var(--padding);

            .field-wrap {
                max-width: 100%;
            }
        }
    }
	> .cms-plugin > .navbar-login,
    > .navbar-login {
		display: block;
		color: var(--brandprimary);
        white-space: nowrap;
        position: absolute;
		right: 0;
		top: 0;
        text-align: right;
        font-size: 16px;
		font-weight: bold;
        line-height: 1.2;
        flex-direction: column;
        padding-right: 0;
        align-self: center;
		

        @media screen and (max-width: 767px) {
            display: none;
        }
        
		a {
			color: var(--brandprimary);

			&:hover, &:focus, &:active {
				color: var(--brandprimaryhover);
				text-decoration: none;
			}
		}
    }

	> .cms-plugin > .navbar-login {
		margin-top: 16px;
	}

    
    .mobile-icon {
        position: relative;
        width: calc(21px + var(--padding) * 2);
        margin-right: 0;
        padding: var(--padding);
        align-items: center;

        @media screen and (min-width: 768px) {
            display: none;
        }
    }
}
/* END navbar */

.messages {
    position: fixed;
    width: 100%;
    margin: 1em;
    top: 0;
    z-index: 1001;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;

    > li {
        display: flex;
        align-items: center;

        list-style: none;
    }
}

.main-menu {
	padding: 0 !important;
	position: absolute;
	right: 0;
	bottom: 0;

    @media screen and (max-width: 767px) {
        display: none !important;
    }
    ul {
        display: block;
        float: left;
        width: auto;
        border-radius: 4px;
		margin: 0;

        li {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
			width: auto;
			margin-left: 32px;
			
			&:before {
				display: none;
			}

            > a, > span {
                display: block;
                text-decoration: none;
                padding: 8px 0;
                cursor: pointer;
                font-size: 18px;
                font-weight: 400;
                color: var(--font-color);
				
				@media screen and (prefers-color-scheme: dark) {
					color: #ddd;
				}

                .fas {
                    color: var(--brandprimary);
                    margin-left: 10px;
                }
            }

            ul {
                display: none;
                position: absolute;
                top: 100%;
                padding: 10px;
                border-radius: 2px;
                box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
                max-width: 240px;
                z-index: 10;
                background:#f0f0f0;
                li {
                    width: 100%;
                    a {
                        display: block;
                        text-decoration: none;
                        padding: 5px 10px;
                        white-space: nowrap;
                        color: var(--font-color);
                    }
                }
            }

            &:hover, &.expand {
                ul {
                    display: block;
                }
            }
        }
    }
}



.slider-wrapper {
	background: #f2f2f2;
	float: left;
	width: 100%;
	margin-bottom: calc(var(--padding) * 2);
	color: #fff;
	
	@media screen and (prefers-color-scheme: dark) {
		background: #222;
		color: #fff;
	}

	.slide-container {
		position: relative;
		height: 580px;
		width: 100%;

		@media screen and (max-width: 991px) {
			height: 440px;
		}

		@media screen and (max-width: 767px) {
			min-height: 640px;
			height: 80vh;
		}

		.slide-elem {
			float: left;
			width: 100%;
			position: absolute;
			display: block;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			z-index: 1;
			opacity: 0;
			transition: 0.5s;

			&.active {
				z-index: 2;
				opacity: 1;
				
				.desc-wrapper {
					transform: translateY(-50%) scale(1);
					filter: blur(0);
				}
				
				.img-wrapp {
					right: 0;
					filter: blur(0px);
					opacity: 1;
				}
			}

			.desc-wrapper {
				width: 66.666%;
				position: absolute;
				left: 0;
				top: 50%;
				padding-right: calc(var(--padding) * 2);
				transform: translateY(-50%)  scale(0.5);
				transition: 0.5s;
				filter: blur(0);

				@media screen and (max-width: 991px) {
					position: static;
					padding-top: var(--padding);
					width: 60%;
				}

				@media screen and (max-width: 767px) {
					position: static;
					width: 100%;
				}


				h2 {
					display: block;
					width: 100%;
					float: left;
					margin: 0;
					font-size: 36px;
					font-weight: 300;
					text-shadow: var(--slidertextshadow);
					margin-bottom: var(--padding);
					
					color: var(--brandprimary);
					text-shadow: none;
					
					@media screen and (prefers-color-scheme: dark) {
						color: var(--brandprimarydark);
					}

					@media screen and (max-width: 767px) {
						font-size: 20px;
					}
				}
		
				.desc {
					float: left;
					width: 100%;
					font-size: 20px;
					line-height: 32px;
					color: #fff;
					font-weight: 300;					
					text-shadow: var(--slidertextshadow);

					@media screen and (max-width: 991px) {
						/* display: none; */
						font-size: 16px;
						line-height: 1.4;
						font-weight: 400;
						margin-bottom: var(--padding);
					}
					@media screen and (max-width: 767px) {
						/* display: none; */
						font-size: 16px;
						margin-bottom: var(--padding);
					}
				}
				.is-client {
					display: block;
					float: left;
					margin-top: var(--padding);
					font-size: 20px;
					color: var(--brandprimary);
					
					@media screen and (prefers-color-scheme: dark) {
						color: var(--brandprimarydark);
					}

					@media screen and (max-width: 991px) {
						font-size: 16px;
					}
					.btn {
						margin-left: calc(var(--padding) * 2);
						border-color: #fff;
						background: transparent;
						color: var(--brandprimary);
						font-size: 20px;
						text-shadow: var(--slidertextshadow);
						border-color: var(--brandprimary);
						text-shadow: none;

						&:hover,
						&:active,
						&:focus {
							/*
							border-color: #fff;
							background: transparent;
							color: #fff;
							*/
						}
						
						&:before {
							left: 30px;
							right: 30px;
							background: linear-gradient(90deg, rgba(255,255,255,0), #fff,  rgba(255,255,255,0));
							background: linear-gradient(90deg, #fff, var(--brandprimary), #fff);
						} 

						@media screen and (max-width: 991px) {
							margin-top: 0;
						}
					}					
				}
			}
			
			.desc-wrapper .desc,
			.desc-wrapper{
				color: #444;
				text-shadow: none;
				
				@media screen and (prefers-color-scheme: dark) {
					color: #eee;
				}
			}

			.img-wrapp {
				width: 33.333%;
				position: absolute;
				right: -100px;
				filter: blur(20px);
				transition: 1s;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
				opacity: 0;

				svg, img {
					max-width: 100%;
				}

				@media screen and (max-width: 991px) {
					width: 35%;
				}

				@media screen and (max-width: 767px) {
					width: 100%;
					position: static;
					transform: none;
					text-align: center;

					img, svg {
						max-height: 180px;
						margin: var(--padding) 0;
					}
				}
			}
			

			@media screen and (max-width: 767px) {
				.desc-wrapper,
				.img-wrapp {
					width: 100%;
					padding-left: 0;
					padding-right: 0;
				}
			}
		}

		.pagination {
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 4;
			box-shadow: none;

			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
				float: left;
				margin: 21px 0;

				li {
					display: block;
					float: left;
					width: 22px;
					height: 22px;
					border-radius: 50%;
					padding: 0;
					margin: calc(var(--padding) / 2);
					cursor: pointer;
					border: 1px solid var(--brandprimary);
					position: relative;
					
					@media screen and (prefers-color-scheme: dark) {
						border-color: var(--brandprimarydark);
					}
					
					&:before {
						content: " ";
					}

					&.active {
						&:before {
							left: 3px;
							right: 3px;
							top: 3px;
							bottom: 3px;
							background: var(--brandprimary);
							border-radius: 50%;
							display: block;
							position: absolute;
							margin: 0;
							
							@media screen and (prefers-color-scheme: dark) {
								background: var(--brandprimarydark);
							}
						}

					}
				}
			}

			@media screen and (max-width: 767px) {
				display: none;
			}
		}

		.arrows {
			position: absolute;
			top: 20%;
			transform: translateY(-50%);
			z-index: 8;
			width: 100%;
			@media screen and (max-width: 767px) {
				display: block;
			}

			@media screen and (min-width: 768px) {
				display: none;
			}

			.arrow {
				width: 40px;
				height: 40px;
				line-height: 1;
				cursor: pointer;
				position: relative;

				&:before {
					font-weight: 900;
					font-family: "FontAwesome";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 24px;
					color: #fff;
					text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
				}

				&.left {
					float: left;

					&:before {
						content: "\f053";

					}
				}

				&.right {
					float: right;

					&:before {
						content: "\f054";
					}
				}
			}
		}
	}
}




/* MENU MOBILNE */
.navbar-toggle {
    position: relative;
    margin: 0;
    padding: 0;
    
    width: 21px;
    height: 21px;
    border-width: 0;
    border-radius: 4px;
    background: transparent;
    z-index: 2;
    outline: 0;
    outline-color: transparent;
    outline-style: none;
    box-shadow: none!important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
    
    &:focus {
      outline: 0;
      outline-color: transparent;
      outline-style: none;
      box-shadow: none!important;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-tap-highlight-color: transparent; /* For some Androids */
    }
    
    
  
    position: absolute; 
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  
    
    @media screen and (min-width: 768px) {
        display: none;
    }
    
    span {
      display: block;
      position: absolute;
      height: 2px;
      width: 21px;
      background: var(--brandprimary);
      border-radius: 6px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }
    

    
    span:nth-child(1) {
      top: var(--burgTop1);
    }
    
    span:nth-child(2), span:nth-child(3) {
      top: var(--burgTop2);
    }
    
    span:nth-child(4) {
      top: var(--burgTop3);
    }
  
    &.open {
      span:nth-child(1) {
        top: var(--burgTop2);
        width: 0%;
        left: 50%;
      }
      
      span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      
      span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      
      span:nth-child(4) {
        top: var(--burgTop2);
        width: 0%;
        left: 50%;
      }
    }
    
}

.navigation-mobile {
	display: none;

	@media screen and (max-width: 1024px) {
	  background: #fff;
	  display: block;
	  position: fixed;
	  z-index: 10;
	  width: 300px;
	  top: 0;
	  bottom: -100px;
	  right: -300px;
	  margin: 0;
	  box-shadow: 0 0 5px rgba(0,0,0,0.25);
	  
	  @media screen and (prefers-color-scheme: dark) {
		background: #222;
	  }
		
	  -moz-transition: 0.3s;
	  -webkit-transition: 0.3s;
	  transition: 0.3s;

	  padding: 66px 0 100px; /* FIX NA ZNIKAJĄCE NA KOMÓRKACH PASKI ADRESU PRZY PRZEWIJANIU W DÓŁ */
	  overflow-y: auto;
	  overflow-x: hidden;
	  display: block;

	  
	  &.visible {
		right: 0;
	  }

	  .navigation {
		  float: left;
		  display: block;
		  width: 100%;
		  padding: 0 var(--padding);
		  
		  .nav.menu {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
			float: left;
		   
			li {
			  width: 100%;
			  padding: 0;
			  
			  &:before {
				display: none;
			  }
			  
			  &.current, &.active {
				  a, .nav-header {
					  color: var(--brandprimary);
					  font-weight: 600;
				  }
			  }
			  
			  .nav-child,            
			  &:hover .nav-child {
				  display: none;
			  }
			  
			  a, .nav-header {
				float: left;
				width: 100%;
				border-radius: 0;
				padding: calc(var(--padding) / 1.5) 5px;
				line-height: 1.3;
				text-decoration: none;
				color: var(--brandprimary);
				
				@media screen and (prefers-color-scheme: dark) {
					color: var(--brandprimarydark);
				}
			  }
			 
			  
			  &.expanded {              
				> .nav-header {
				  &:before {
					 transform: translateY(-50%) rotate(45deg);
				  }
				}
			  }
			}
			
			
			  .nav-child {
				width: 100%;
				list-style: none;
				padding: 0;
				border: 1px solid var(--brandprimary);
				box-shadow: none;
				display:none;
				position: relative;
				padding: 5px 0;
				margin: 10px 0;
				border-radius: 2px;

					
				li {
				  margin: 0;
				  padding: 0;
				  clear: both;
				  width: 100%;
				  
				  
				  &.current, &.active {    
					  a {
						  font-weight: bold;
					  }
				  }
				  a {
					width: 100%;
					font-size: 14px;
					line-height: 32px;
					font-weight: normal;
					color: #888;
					padding: 5px 15px;
					text-decoration: none;
					white-space: nowrap;
					width: 100%;
					border-radius: 0; 

					&:hover {
					  background: #eee;
					  color: var(--brandprimary);
					  text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
					}
				  }
				}
				
			  }
		  
		  }
	  }
	}
}

.share-easily {
	float: left;
	width: 100%;
    position: relative;
}

.powerfull-features {
	ul {
		li {
			@media screen and (max-width: 767px) {
				opacity: 0.5;
				transition: 0.5s;
				transition-delay: 0.1s;
				left: 30px;
			}
			
			&.on-screen {
				@media screen and (max-width: 767px) {
					&.mobile {
						opacity: 1;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
}

.background {
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
    left: 0;
}

.share-easily-table {
	display: table;
	float: left;
	width: 100%;
	margin: calc(var(--padding) * 2 0);
    margin: 80px 0;

	
	
	.img, .desc {
		display: table-cell;
		vertical-align: middle;
	}

	.img {
		
		width: 40%;
		text-align: center;
		padding: var(--padding);
	}
	
	.desc {
		font-size: 20px;
		line-height: 32px;

		h2, h3 {
			font-size: 26px;
			line-height: 1.2;
		}
	}
	
	@media screen and (max-width: 1024px) {
		.img{
			width: 30%;
			vertical-align: top;
			
			svg {
				width: 100%;
			}
		}
		
		.desc {
			width: 70%;
			font-size: 16px;
			line-height: 26px;

			h2, h3 {
				font-size: 22px;
				line-height: 1.3;
			}
		}
	
	}

	@media screen and (max-width: 767px) {
		display: block;
		margin-top: -60px;

		.desc, 
		.img {
			width: 100%;
			display: block;
			float: left;
		}
		
		.img {
			svg {
				max-width: 100%;
				width: 200px;
			}
		}
	}
}

.share-easily {
	.share-easily-table {
		svg, img {
			transform: scale(0.3);
			filter: blur(12px);
			transition: 0.5s;
		}
		
		.desc {
			position: relative;
			left: 140px;
			opacity: 0.7;
			transition: 0.6s;
		}
	}
	&.on-screen .share-easily-table {
		svg, img {
			transform: scale(1);
			filter: blur(0px);
		}		
		.desc {
			left: 0;
			opacity: 1;
		}
	}
}

.light-gray-box {
	background: #f2f2f2;
	padding: calc(var(--padding) * 2) 0;
	float: left;
	width: 100%;
	
	@media screen and (prefers-color-scheme: dark) {
		background: #222;
	}

	.features {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: -16px;

		.features-item {
			width: 33.333%;
			float: left;
			text-align: center;
			padding: var(--padding);
			transition: 0.5s;
			transition-delay: 0.2s;
			
			.img {
				display: block;
				float: left;
				width: 100%;
				text-align: center;
				margin-bottom: calc(var(--padding) * 1.5);
				
				opacity: 0.3;
				transition: 0.3s;
				transition-delay: 0.1s;
				transform: scale(1.7);
			}
			
			&.on-screen {				
				.img {
					transform: scale(1);
					opacity: 1;
				}
				
				.desc {
					opacity: 1;
					filter: blur(0px);
				}
			}
			
			.desc {
				filter: blur(20px);
				opacity: 0;
				transition: 0.5s;
				
				h3 {
				
				}
			}
			
			@media screen and (max-width: 992px) {
				width: 50%;
			}
			
			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}
}


.price-container {
	text-align: center;
	float: left;
	width: 100%;
	
	h2 {
		font-size: 50px;
		line-height: 1;
		margin-bottom: var(--padding);
		font-weight: 300;
		color: var(--brandprimary);
		
		@media screen and (max-width: 767px) {
			font-size: 30px;
			line-height: 1.4;
		}
	}
	
	.container > small {
		font-size: 16px;
		color: #666;
		float: left;
		width: 100%;
	}

	.prices {
		display: flex;
		float: left;
		width: 100%;

		flex: 1 1 auto;
		flex-direction: row;
		text-align: center;
		justify-content: center;
		
		@media screen and (max-width: 767px) {
			flex-direction: column;
		}
		
		.price-spacing {
			width: 50%;
			max-width: 480px;
			padding: var(--padding);
			display: flex;
			flex-grow: 1;
			position: relative;
			
			@media screen and (max-width: 767px) {
				width: 100%;
				margin: 0 auto;
			}
				
			.price-item {
				border: 2px solid var(--brandprimary);
				flex-grow: 1;
				float: left;
				width: 100%;

				.title {
					background: var(--gradient);
					color: #fff;
					font-size: 32px;
					display: block;
					float: left;
					width: 100%;
					padding: calc(var(--padding) / 2) var(--padding);

					> small {
						display: block;
						float: left;
						width: 100%;
						font-size: 16px;
						line-height: 24px;
					}
				}
				
				.expanging-content {
					display: block;
					float: left;
					width: 100%;
					padding: var(--padding);

					.price {
						display: inline-block;
						color: var(--brandprimary);
						margin: var(--padding) 0;

						.currency {
							display: inline-block;
							font-size: 30px;
							position: relative;
							top: -26px;
							right: -6px;
						}
						
						.value {
							display: inline-block;
							font-size: 60px;
							line-height: 1;
							font-weight: 500;

							sup {
								font-size: 24px;
								top: -30px;
								left: -19px;
								font-weight: 600;
							}
						}
						
							@media screen and (max-width: 767px) {
								.currency {
									font-size: 24px;
									top: -16px;
								}
							
								.value {
									font-size: 40px;
									
									sup {
										font-size: 20px;
										top: -20px;
										left: -14px;
									}
								}
							}
					}
					
					small {
						display: block;
						float: left;
						width: 100%;

						color: #666;
						font-size: 16px;
						line-height: 24px;
						font-weight: 400;
						height: 80px;
						
						@media screen and (prefers-color-scheme: dark) {
							color: #ddd;
						}
						
						@media screen and (max-width: 767px) {
							height: auto;
						}
					}
					
					.btn-container {
						display: block;
						width: 100%;
						float: left;
						margin: calc(var(--padding) * 2) 0;

						.btn {

						}
					}
					
					ul {
						text-align: left;
					}
				}
			}
		}
	}
}

.price-container .prices .price-spacing {
	transition: 0.5s;
	filter: blur(20px);
	opacity: 0.3;
	
	@media screen and (min-width: 768px) {
		top: 150px;
		&:nth-child(2n+1) {
			left: -150px;
		}
		
		&:nth-child(2n) {
			right: -150px;
		}
	}	
	@media screen and (max-width: 767px) {
		top: 100px;
	}
	
	&.on-screen.desktop {
		filter: blur(0px);
		opacity: 1;
		top: 0;

		&:nth-child(2n+1) {
			left: 0;
		}
		
		&:nth-child(2n) {
			right: 0;
		}
	}
	
	&.on-screen.mobile {
		top: 0;
		filter: blur(0px);
		opacity: 1;
	}
}



.top-benefits {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	
	h2 {
		display: inline-block;
		background: var(--gradient);
		color: #fff;
		padding: 16px 32px;
		border-radius: 16px 0 16px 0;
		font-size: 50px;
		line-height: 1;
		font-weight: 300;
		letter-spacing: -1.5px;
		margin: calc(var(--padding) * 4) 0 calc(var(--padding) * 2);
		
		@media screen and (max-width: 767px) {
			font-size: 40px;
			padding: 8px 16px;
		}
	}
	.top-benefits-items {
		display: block;
		float: left;
		width: 100%;
		
		@media screen and (max-width: 767px) {
			display: flex;
			max-width: 340px;
			flex-direction: column;
			float: none;
			margin: 0 auto;
		}
			
		.benefits-row {
			display: flex;
			width: 100%;
			float: left;
			position: relative;
					
			&:before{
				content: " ";
				position: absolute;
				right: 50%;
				transform: translateX(2px);
				top: calc(var(--dashed-top-offset) + var(--dash-width) * 2);
				bottom: calc(0px - var(--dashed-top-offset) + var(--dash-width) * 2);
				border-right: var(--dash-width) dashed var(--brandprimary);
			}
			
			&.on-screen {
				&.desktop {
					.benefit-item {
						.img, .desc {
							filter: blur(0);
							position: relative;
						}
					}
				}
			}
			
			.benefit-item {
				display: flex;
				flex-direction: row;
				flex: 1 1 auto;
				width: 100%;
				text-align: left;			
				position: relative;			
				padding-bottom: calc(var(--padding) * 2);
				transition: 0.6s;
				
				@media screen and (min-width: 768px) {
					.img, .desc {
						filter: blur(20px);
					}
				}

				@media screen and (max-width: 767px) {
					opacity: 0.3;
					position: relative;
					top: 50px;
				}
				
				&.on-screen {
					&.mobile {
						top: 0;
						opacity: 1;
					}
				}
				
				&:before{
					content: " ";
					position: absolute;
					right: calc(0px - var(--dash-width));
					top: var(--dashed-top-offset);
					width: 30px;
					border-top: var(--dash-width) dashed var(--brandprimary);
				}
				
				.img {
					width: 120px;
					max-width: 120px;
					float: left;
					flex-grow: 1;
					padding-left: 40px;
					transition: 0.6s;
				}
				
				.desc {
					transition: 0.6s;
					flex-grow: 1;
					padding-right: 30px;
					
					h3 {
						font-size: 28px;
						line-height: 1.4;
						margin: 0;
						font-weight: 400;
					}
				}
				
				&:nth-child(2n) {
					
					&:before {
						right: auto;
						left: calc(0px - var(--dash-width));
					}
				}
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				
				&:before {
					display: none;
				}
				
				.benefit-item {
					padding-top: 50px;
					padding-bottom: 0;

					&:before,
					&:nth-child(2n):before {
						height: 40px;
						border-left: 3px dashed var(--brandprimary);
						border-top-width: 0;
						width: 1px;
						left: 50%;
						top: 0;
						transform: translateX(-50%) !important;
						right: auto !important;
					}
					
					.img {
						padding-left: 0;
						width: 40px;
						max-width: 40px;
						
						svg, img {
							width: 100%;
							height: auto !important;
						}
					}
					
					.desc {
						padding-left: var(--padding);
						
						h3 {
							font-size: 22px;
						}
					}
				}
			}

			&:last-child:before {
				display: none;
			}
		}
	}
}
  
/* Shara sekcja */
.gray-zone {
	display: block;
	float: left;
	width: 100%;
	background: #676767;
	color: #fff;
	padding: calc(var(--padding) * 3) 0;
	
	@media screen and (prefers-color-scheme: dark) {
		background: #444;
	}
	
	h1, h2, h3, h4, h5, h6 {
		color: #fff;
	}
	
	h2 {
		text-align: center;
		margin: 0 0 calc(var(--padding) * 3);
	}

	.columns {
		display: flex;
		flex: 1 1 auto;
		flex-direction: row;
		
		.column-spacing {
			display:flex;
			flex-grow: 1;
			width: 33.333%;
			padding: 0 var(--padding);
			position: relative;
			top: -50px;
			transition: 0.3s;
			filter: blur(20px);
			opacity: 0.3;
			transform: scale(1.4);
				
			.column {
				float: left;
				flex-grow: 1;
				border: 2px solid #ccc;
				color: #ccc;
				border-radius: 16px 0 16px 0;
				padding: var(--padding);
				text-align: center;
				max-width: 400px;
				margin-left: auto;
				margin-right: auto;
				
				.fill, .fill2 {
					fill: #ccc;
				}
			}
			
			&.on-screen {
				&.mobile {
					@media screen and (max-width: 767px) {
						top: 0;
						filter: blur(0px);
						opacity: 1;
						transform: scale(1);
					}
				}
				
				&.desktop {
					@media screen and (min-width: 768px) {
						top: 0;
						filter: blur(0px);
						opacity: 1;
						transform: scale(1);
					}
				}
			}
		}
		
		@media screen and (max-width: 992px) {
			flex-direction: column;
			max-width: 300px;
			margin: 0 auto;

			.column-spacing {
				padding: 0 0 var(--padding);
				width: 100%;
			}
		}
	}
}

footer {
	width: 100%;
	float: left;
	padding: var(--padding) 0;
	text-align: center;
}

.cookies-box {
	position: fixed;
	left: 0;
	bottom: 0;
	display: none;
	box-sizing: border-box;
	padding: 10px 26px 10px 10px;
	background: #fff;
	font-size: 14px;
	z-index: 10000;
	width: 100%;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	
	.cookies-content {
		font-size: 14px !important;
		line-height: 20px !important;
		color: #222 !important;
		
		.btn-primary {
			float: left;
			font-size: 20px;
			margin-top: 16px;
			padding: 6px 20px 18px;
			
			&:hover {
				background: transparent;
			}
		}
	}

	.btn-close {
		position: absolute;
		right: 5px;
		top: 5px;
		background: transparent;
		border-width: 0;
		padding: 5px;
		font-size: 20px;
		color: var(--brandprimary);
	}
}












.powerfull-features-blocks {
	padding: 16px 0;
	float: left;
	width: 100%;
	
	h2 {
		text-align: center;
	}
}


.features-title {
	float: left;
	text-align: center;
	width: 100%;
}

/* TEN JEST UŻYWANY */
.powerfull-features-items-3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	counter-reset: featurescounter;
	margin: 0 -16px;
	
	> div {
		display: flex;
		flex: 1 1 auto;
		max-width: 33%;
		width: 33%;
		min-width: 33%;
		padding: 32px 16px;
		display: flex;
		flex-direction: column;
		
		@media screen and (max-width: 1024px) {
			max-width: 50%;
			width: 50%;
			min-width: 50%;
		}
		
		@media screen and (max-width: 768px) {
			max-width: 100%;
			width: 100%;
			min-width: 100%;
		}
		
		> div {
			flex: 1 1 auto;
			flex-grow: 1;
			flex-shrink: 0;
			max-width: 100%;
			width: 100%;
			min-width: 100%;
			display: flex;
			flex-direction: row;
			border-radius: 16px;
			position: relative;
			
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
			
			> div.icon {
				width: 70px;
				height: 70px;
				position: absolute;
				border-radius: 50%;
				border: 1px solid var(--brandprimary);
				
				@media screen and (prefers-color-scheme: dark) {
					border-color: var(--brandprimarydark);
				}
				
				@media screen and (max-width: 768px) {
					position: relative;
					left: 50%;
					top: 0;
					transform: translateX(-50%);
				}
				
				svg {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			> div.desc {
				padding: 0 0 0 102px;
				
				@media screen and (max-width: 768px) {
					padding: 16px 0;
				}
			}
			
			@media screen and (max-width: 768px) {
				> div.icon,
				> div.desc {
					text-align: center;
				}
			}
		}
	}
}




.screenshots {
	width: 100%;
	padding-top: 70%;
	position: relative;
	float: left;
	overflow: hidden;

	.screenshot {
		display: block;
		opacity: 0;
		margin-top: 20px;
		transition: 0.3s;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
			box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
		
			
		.desc {
			color: #888;
			font-style: italic;
			font-size: 80%;
			text-align: center;
			float: left;
			width: 100%;
			margin-top: 12px;
		}
		
		&.active {
			opacity: 1;
		}
		
		.img-wrapp {
			float: left;
			width: 100%;
			border: 1px solid #fff;
		}
	}
}



.powerfull-features {
	float: left;
	width: 100%;
	padding: 60px 0;
}