* { padding:0; margin:0; }

html { width:100%; height:100%; }

body { 
	font-family: "Baloo Da 2", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
	color:#3b3b3b;
	background:#f8f8f8; 
}

@media (min-width: 800px) {

	#container { width:90%; max-width:1360px; margin:0 auto; }
	#top { width:100%; height:150px; float:left; background:#fff; margin-top:10px; border-radius:5px; }
	.logo { width:25%; height:150px; float:left; background:#fff; }
	.logo img { width:90%; margin-top:40px; }
	.toplink { width:75%; height:50px; float:left; background:rgb(255, 255, 255); }
	.toplink p { padding-top:20px; float:right; padding-right:10px; }
	.toplink p span { padding-left:10px; vertical-align: middle; color:#613da7; }
	.toplink p a { color:#3b3b3b; text-decoration:none; }
	#mobile-menu { display:none; }
	.menu { width:75%; height:100px; float:left; background:rgb(255, 255, 255); }

		  ol {
			float:right;
			list-style-type:none;
			margin-top:30px;
			height:2em;
			line-height:2em;
			text-align:center;
			padding-top:10px;
			box-shadow: 10px 10px 8px #e7e7e7;
            font-size:18px;
		  }
	
		  ol a {
			display:block;
			text-decoration:none;
			color:#3b3b3b;
			padding:0 5px;
		  }
	
		  ol > li {
			float:left;
			width:auto;
			height:40px;
			padding-left:30px;
			padding-right:30px;
			background-color:#ffffff;
		  }
	
		  ol > li:first-child {
			margin-left:0;
		  }

		  ol > li:hover > a {
			color:#3c92f6;
		  }

		  ol > li:hover > ul {
			display:block;
		  }
	
		  ol > li > ul {
			display:none;
			list-style-type:none;
			padding:0;
			margin:0;
			box-shadow: 10px 10px 8px #f0efef;
		  }

		  ol > li > ul > li {
			position:relative;
			width:100%;
			padding-left:10px;
			padding-right:10px;
			backdrop-filter: blur(5px);
			background-color: rgba(255, 255, 255, 0.5); 
		  }
	
		  ol > li > ul > li:hover > a {
			color:#3c92f6;
		  }



	#separator1 { width:100%; height:1px; float:left; background:#e7e7e7; }

	#main-slider { width:100%; height:600px; float:left; background:transparent url("../images/bckd-main-slider.png");  }
	#main-slider h1 { font-size:72px; color:#fafafa; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); margin-top:20px; margin-bottom:0px; padding-bottom:0px; }
	.slider-txt { width:100%; height:130px; float:left; background:transparent; }
	.image-carousel { width:100%; height:380px; float:left; background:transparent; }
	.btn1 { margin-top:10px; width:24%; height:90px; float:right; background-image: linear-gradient(#4586f0b0, #3e2b83c2); border-radius:5px; backdrop-filter: blur(5px); }
	.btn1 p { line-height:28px; font-size:32px; color:#fff; text-align: center; padding-top:10px; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn1 p a { color:#fff; text-decoration:none; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn1 p span { font-size:18px; }
	.btn2 { margin-left:30px; margin-right:150px; margin-top:10px; width:24%; height:90px; float:right; background-image: linear-gradient(#af9aefc2, #603da7c7); border-radius:5px; backdrop-filter: blur(5px); }
	.btn2 p { line-height:28px; font-size:32px; color:#fff; text-align: center; padding-top:10px; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn2 p a { color:#fff; text-decoration:none; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn2 p span { font-size:18px; }

	#main { width:100%; height:auto; margin-top:2px; padding-top:20px; padding-bottom:100px; float:left; background:#f2f2f2; }
	.main-boxes { width:30%; height:550px; float:left; background:#fff; margin-left:1%; border-radius:5px; margin-top:20px; }
	.main-boxes2 { width:31%; height:550px; float:left; background:#fff; margin-left:3%; border-radius:5px; margin-top:20px; }
	.main-boxes3 { width:30%; height:550px; float:left; background:#fff; margin-left:3%; border-radius:5px; margin-top:20px; }
	.title { width:100%; height:80px; float:left; background:#fff; border-top-left-radius:5px; border-top-right-radius:5px; }
	.title p { color:#3b3b3b; font-size:28px; text-decoration:none; text-align: center; margin-top:20px; }
	.title-separator-bottom { width:90%; height:4px; float:left; background:#ea1386; margin-left:5%; }
	.title-separator-bottom2 { width:90%; height:4px; float:left; background:#3e2b83c2; margin-left:5%; }
	.title-separator-bottom3 { width:90%; height:4px; float:left; background:#603da7c7; margin-left:5%; }
	.box-text-main-boxes { color:#3b3b3b; font-size:20px; text-align: center; margin-top:100px; margin-left:10px; margin-right:10px; }
	.btn-strony-sklepy { margin-top:40px; margin-left:10%; width:80%; height:90px; float:left; background-image: linear-gradient(#ea1386, #ea13869d); border-radius:5px; backdrop-filter: blur(15px); }
	.btn-strony-sklepy p { font-size:26px; text-align:center; padding-top:22px; }
	.btn-strony-sklepy p a { color:#fff; text-decoration:none; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn-serwis-komputerowy { margin-top:40px; margin-left:10%; width:80%; height:90px; float:left; background-image: linear-gradient(#3e2b83c2, #4586f0b0); border-radius:5px; backdrop-filter: blur(15px); }
	.btn-serwis-komputerowy p { font-size:26px; text-align:center; padding-top:22px; }
	.btn-serwis-komputerowy p a { color:#fff; text-decoration:none; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
	.btn-hosting-poczta { margin-top:40px; margin-left:10%; width:80%; height:90px; float:left; background-image: linear-gradient(#603da7c7, #af9aefc2); border-radius:5px; backdrop-filter: blur(15px); }
	.btn-hosting-poczta p { font-size:26px; text-align:center; padding-top:22px; }
	.btn-hosting-poczta p a { color:#fff; text-decoration:none; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }

	.title01 { width:100%; height:80px; float:left; background:transparent; margin-bottom:90px; }
	.title02 { width:100%; height:80px; float:left; background:transparent; margin-bottom:10px; }
	.texttitle01 { font-size:38px; color:#ea1386; line-height: 25px; padding-top:20px; }
	.texttitle01 span { font-size:20px; color:#3b3b3b; }
	.form01 { width:100%; height:auto; float:left; background:#fff; border-radius:5px; padding-top:20px; padding-bottom:20px; }
	.form02 { width:100%; height:auto; float:left; background:#fff; border-radius:5px; padding-top:20px; padding-bottom:20px; }
	.text-form02 { padding-left:20px; padding-right:20px; }
	.text-form02 a { color:#613da7; text-decoration: none; }

    .table-form { width:100%; height:auto; }
	.table-form tr { width:100%; }
	.table-form-td1 { width:60%; background:rgb(255, 255, 255); height:60px; }
	.table-form-td2 { width:40%; background:rgb(255, 255, 255); height:60px; }
	.table-form-td3 { width:100%; background:rgb(255, 255, 255); height:60px; }
	.table-form-td4 { width:20%; background:rgb(255, 255, 255); height:60px; }
	.txt-form { font-size:20px; margin-right:40px; text-align:right; }
	.txt-form2 { font-size:20px; margin-left:20px; }
	.txt-form2 a { color:#613da7; text-decoration: none; }
	.input-01 { width:95%; height:50px; font-size:20px; color:#3b3b3b; font-family: "Baloo Da 2", sans-serif; padding-left:10px; border:1px solid #3e2b83c2; border-radius:5px; }
	.input-02 { width:97%; height:50px; font-size:20px; color:#3b3b3b; font-family: "Baloo Da 2", sans-serif; padding-left:10px; border:1px solid #3e2b83c2; border-radius:5px; }
	.input-03 { width:96%; height:350px; font-size:20px; color:#3b3b3b; font-family: "Baloo Da 2", sans-serif; margin-left:20px; padding-left:13px; padding-top:10px; border:1px solid #3e2b83c2; border-radius:5px; }
	.input-04 { width:97%; height:50px; font-size:20px; color:#ffffff; background-image: linear-gradient(#4586f0b0, #3e2b83c2); font-family: "Baloo Da 2", sans-serif; padding-left:10px; border:1px solid #3e2b83c2; border-radius:5px; }
	.check-01 { width:5%; height:30px; font-size:20px; color:#3b3b3b; border:1px solid #3e2b83c2; border-radius:5px; padding-top:20px; }
    
	#footer { width:100%; height:auto; float:left; background:#fff; }
	.f-box { width:65%; height:450px; float:left; background:#ffffff; margin-top:20px; margin-bottom:0px; }
	.f-box2 { width:35%; height:450px; float:left; background:#ffffff; margin-top:20px; margin-bottom:0px; text-align:right; font-size:24px; }
	.f-box p { color:#3b3b3b; font-size:38px; margin-top:60px; }
	.f-box2 p { color:#3b3b3b; font-size:38px; margin-top:60px; }
	.separator-footer { width:100%; height:1px; float:left; background:#ea1386; margin-bottom: 10px; }
	.copyright { color:#3b3b3b; font-size:14px; padding-bottom:60px; }
	.copyright a { color:#613da7; text-decoration:none; }

	  @keyframes display {
		0% {
		  transform: translateX(200px);
		  opacity: 0;
		}
		10% {
		  transform: translateX(0);
		  opacity: 1;
		}
		20% {
		  transform: translateX(0);
		  opacity: 1;
		}
		30% {
		  transform: translateX(-200px);
		  opacity: 0;
		}
		100% {
		  transform: translateX(-200px);
		  opacity: 0;
		}
	  }
	  
	  .pic-ctn {
		position: relative;
        width:10%;
		margin-top:20px;
	  }
	  
	  .pic-ctn > img {
		position: absolute;
		top: 0;
		left: calc(50% - 100px);
		opacity: 0;
		animation: display 10s infinite;
	  }
	  
	  img:nth-child(2) {
		animation-delay: 2s;
	  }
	  img:nth-child(3) {
		animation-delay: 4s;
	  }
	  img:nth-child(4) {
		animation-delay: 6s;
	  }
	  img:nth-child(5) {
		animation-delay: 8s;
	  }

}

@media (max-width: 800px) {

	#container { width:100%; max-width:800px; margin:0 auto; }
	.logo { width:100%; height:200px; float:left; background:rgb(255, 255, 255); text-align:center; }
	.logo img { width:90%; margin-top:40px; }
	.menu { display:none; }
	.toplink { display:none; }
	#main-slider { display:none;  }
	#main { display:none; }
	#mobile-menu { width:100%; height:100px; float:left; background:blue; }

}