/*
Theme Name: Roboclean Kraków
Author: Kotula.co / Marek Kotula
Author URI: https://kotula.co / marek@kotula.co
Version: 1.0
*/


html,
body {
	height: 100%;
}
body {
	color: #000000;
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	padding-top: 115px;
}
	a {

	}
	a:hover {

	}
	*:focus {
		outline: 0 !important;
	}
	.main {
		height: 100%;
		margin-bottom: -100px;
	}
	.header,
	.header * {
		z-index: 999999 !important;
	}
	.header {
		width: 100%;
		height: 115px;
		background: #FFF;
		box-shadow: 0 0 50px -20px #888;
		position: fixed;
		top: 0;
	}
		.logo {
			padding-top: 30px;
		}
			.logo a {
				display: inline-block;
				float: left;
				border-right: 1px solid #d6d6d6;
				padding-right: 20px;
				margin-right: 20px;
			}
			.logo .miasto {
				font-size: 43px;
				color: #9bcd31;
				font-weight: 300;
				line-height: normal;
			}
			.menu {
				
			}
				.navbar-default {
					background-color: transparent;
					border-color: transparent;
					border-radius: 0;
					margin: 0;
					border: 0;
				}
					.nav-justified {
						height: 115px;
					}
						.nav-justified > li {
							height: 115px;
							display: table-cell;
							vertical-align: middle;
						}
							.nav-justified > li > a {
								color: #3a3a3a;
								font-size: 23px;
								font-weight: 300;
								padding: 0;
								white-space: nowrap;
							}
							.nav > li > a:focus, .nav > li > a:hover {
								color: #9bcd31;
								background: transparent;
							}
							.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
								color: #9bcd31;
								background: transparent;
							}






	.slider {
		height: 700px;
	}
		ul.nav.navbar-nav.navbar-right .animate {
			font-size: 11pt;
			color: black !important;
		}
		ul.nav.navbar-nav.navbar-right .animate {
			font-size: 11pt;
			color: black !important;
			text-align: center;
		}
		span.fa.fa-angle-left {
			position: absolute;
			top: 45%;
			font-size: 3em;
			left: 3%;
		}
		span.fa.fa-angle-right {
			position: absolute;
			top: 45%;
			font-size: 3em;
			left: 85%;
		}
		ul.carousel-indicators {
			top: 2%;
			bottom: 99% !important;
			text-align: right;
		}
		p.animated.slideInDown {
			
		}
		p.animated.slideInUp {
		   
		}
			/********************************/
			/*       Fade Bs-carousel       */
			/********************************/
			.fade-carousel {
				position: relative;
				padding-top: -50px;
			}
			.fade-carousel .carousel-inner .item {
			}
			.fade-carousel .carousel-indicators > li {
				margin: 0 2px;
				background-color: #fffffff;
				border-color: #ffffff;
				opacity: .7;
				border-radius: 0px;
			}
			.carousel-indicators {
				bottom: 3%;
				border-color: #fff;
			}
			.fade-carousel .carousel-indicators > li.active {
				width: 10px;
				height: 10px;
				opacity: 1;
				border: none;
			}

			/********************************/
			/*          Hero Headers        */
			/********************************/
			.hero {
				position: absolute;
				top: 70%;
				left: 31%;
				z-index: 3;
				color: #ffffff;
				text-align: center;
				text-transform: uppercase;
				text-shadow: 1px 1px 0 rgba(0,0,0,.75);
				  -webkit-transform: translate3d(-50%,-50%,0);
					 -moz-transform: translate3d(-50%,-50%,0);
					  -ms-transform: translate3d(-50%,-50%,0);
					   -o-transform: translate3d(-50%,-50%,0);
						  transform: translate3d(-50%,-50%,0);
			}
			.hero h1 {
				font-size: 6em;    
				font-weight: bold;
				margin: 0;
				padding: 0;
			}

			/********************************/
			/*            Overlay           */
			/********************************/
			.overlay {
				position: absolute;
				width: 100%;
				height: 700px;
				z-index: 2;
				background-color: #2b2b2b;
				opacity: .9;
			}
			/********************************/
			/*          Custom Buttons      */
			/********************************/
			.btn.btn-lg {padding: 10px 40px;}
			.btn.btn-hero,
			.btn.btn-hero:hover,
			.btn.btn-hero:focus {
				color: #ffffff;
				background-color: #da2929;
				border-color: #da2929;
				outline: none;
				margin: 20px auto;
			}
			/********************************/
			/*       Slides backgrounds     */
			/********************************/
			.fade-carousel .slides .slide-1, 
			.fade-carousel .slides .slide-2,
			.fade-carousel .slides .slide-3,
			.fade-carousel .slides .slide-4,
			.fade-carousel .slides .slide-5 {
			  height: 700px;
			  background-size: cover !important;
			  background-position: center center;
			  background-repeat: no-repeat;
			}.fade-carousel .slides .slide-1 {
			  background: url("http://www.roboclean-krakow.pl/wp-content/uploads/2016/09/slide1-1.jpg") center center no-repeat;
			}
			.fade-carousel .slides .slide-2 {
			  background: url("http://www.roboclean-krakow.pl/wp-content/uploads/2017/01/slider.jpg") center center repeat;
			}
			.fade-carousel .slides .slide-3 {
			  background: url("http://www.roboclean-krakow.pl/wp-content/uploads/2016/09/slide1-1.jpg") center center repeat;
			}
			/********************************/
			/*          Media Queries       */
			/********************************/
			@media screen and (min-width: 980px){
				.hero { width: 980px; }    
			}
			@media screen and (max-width: 640px){
				.hero h1 { font-size: 4em; }    
			}/********************************/
			/*       Fade Bs-carousel       */
			/********************************/
			.fade-carousel {
				position: relative;
				padding-top: -50px;
			}
			.fade-carousel .carousel-inner .item {
				height: 700px;
			}
			.fade-carousel .carousel-indicators > li {
				margin: 0 10px;
				background-color: #c7c7c7;
				border-color: #ccc;
				opacity: 1;
				border-radius: 50%;
			}
			.carousel-indicators {
				bottom: 3%;
				border-color: #fff;
			}
			.fade-carousel .carousel-indicators > li.active {
				width: 10px;
				height: 10px;
				opacity: 1;
				border: none;
				background-color: #91c725;
			}
			/********************************/
			/*          Hero Headers        */
			/********************************/
			.hero {
				position: absolute;
				top: 70%;
				left: 31%;
				z-index: 3;
				color: #ffffff;
				text-align: center;
				text-shadow: 1px 1px 0 rgba(0,0,0,.75);
				  -webkit-transform: translate3d(-50%,-50%,0);
					 -moz-transform: translate3d(-50%,-50%,0);
					  -ms-transform: translate3d(-50%,-50%,0);
					   -o-transform: translate3d(-50%,-50%,0);
						  transform: translate3d(-50%,-50%,0);
			}
			.hero h1 {
				font-size: 4em;    
				font-weight: bold;
				margin: 0;
				padding: 0;
			}
			/********************************/
			/*            Overlay           */
			/********************************/
			.overlay {
				position: absolute;
				width: 100%;
				height: 700px;
				z-index: 2;
				background-color: transparent;
				opacity: 0;
			}
			/********************************/
			/*          Custom Buttons      */
			/********************************/
			.btn.btn-lg {padding: 10px 40px;}
			.btn.btn-hero,
			.btn.btn-hero:hover,
			.btn.btn-hero:focus {
				color: #ffffff;
				background-color: #da2929;
				border-color: #da2929;
				outline: none;
				margin: 20px auto;
			}
			/********************************/
			/*          Media Queries       */
			/********************************/
			@media screen and (min-width: 980px){
				.hero { 
					width: 100%;
				}    
			}
			@media screen and (max-width: 640px){
				.hero h1 { font-size: 4em; }    
			}
			.animated { 
				-webkit-animation-duration: 1s; 
				animation-duration: 1s; 
				-webkit-animation-fill-mode: both; 
				animation-fill-mode: both; 
				-webkit-animation-timing-function: ease-in-out; 
				animation-timing-function: ease-in-out; 
			}
			@-webkit-keyframes bounceInDown { 
			   0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}

				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}

				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}

				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}

				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}

				100% {
					-webkit-transform: none;
					transform: none;
				}
			} 
			@keyframes bounceInDown { 
				 0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}

				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}

				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}

				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}

				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}

				100% {
					-webkit-transform: none;
					transform: none;
				}
			} 
			.bounceInDown { 
				-webkit-animation-name: bounceInDown; 
				animation-name: bounceInDown; 
			}
		.slogan {
			color: #333;
			font-size: 42px;
			font-weight: 300;
			text-shadow: 1px 1px 1px #FFF;
		}
		.hero2 {
			top: 25%;
			text-align: right;
		}
			.slogan2 {
				color: #333;
				font-size: 42px;
				font-weight: 300;
				text-shadow: 1px 1px 1px #FFF;
			}


	.content {
		background: #91c725;
		color: #fff;
		padding: 15px 0 10px 0;
	}
		.content h2 {
			margin-top: 50px;
			font-size: 35px;
			font-weight: 400;
		}
		.content p,
		.content2 p {
			font-size: 18px;
			line-height: 27px;
			font-weight: 300;
		}
		.content a {
			float: right;
			display: inline-block;
			font-size: 20px;
			font-weight: 400;
			text-transform: uppercase;
			color: #fff;
			padding: 15px 50px;
			border: 2px solid #FFF;
		}
		.content2 a.pobierz {
			float: right;
			display: inline-block;
			font-size: 18px;
			font-weight: 400;
			text-transform: uppercase;
			color: #9bcd31;
			padding: 15px 0 0;
			border: 0 solid #FFF;
		}

	.content2 {
		color: #333;
		font-size: 18px;
		line-height: 27px;
		font-weight: 300;
	}
		.content2 b,
		.content2 strong {
			font-weight: 400;
		}
	.page_title  {
		font-size: 28px;
		font-weight: 300;
		height: 50px;
	}
		.page_title h3 {
			margin: 15px 0 0 0;
			font-size: 28px;
			font-weight: 300;
		}
		.oferta {
			height: 188px;
			background: url('images/oferta.jpg');
			background-size: cover;
			background-position: 50% 50%;
			position: relative;
			display: table;
			width: 100%;
		}
			.oferta .container {
				height: 100%;
				display: table-cell;
				vertical-align: middle;
			}
				.oferta h1 {
					margin-left: 10%;
					font-weight: 300;
					font-size: 42px;
				}


			.formularz input[type=text],
			.formularz input[type=email],
			.formularz input[type=tel],
			.formularz textarea {
				max-width: 100%;
				width: 100%;
				border: 0;
				padding: 10px 15px;
				margin-bottom: 15px;
				font-size: 16px;
				font-weight: 300;
				color: #1e1e1e;
				border: 1px solid #efefef;
				box-shadow: 0 2px 10px -7px #d1d1d1;
			}
			.formularz input[type=text]:active,
			.formularz input[type=email]:active,
			.formularz input[type=tel]:active,
			.formularz input[type=text]:focus,
			.formularz input[type=email]:focus,
			.formularz input[type=tel]:focus,
			.formularz textarea:active,
			.formularz textarea:focus {
				box-shadow: 0 2px 10px -6px #91c725;
			}
			.formularz textarea {
				height: 170px;
			}
			.formularz input[type=submit] {
				float: right;
				border: 0;
				background: #91c725;
				width: 150px;
				height: 45px;
				font-size: 16px;
				color: #FFF;
			}

			.aplikuj input[type=text],
			.aplikuj input[type=email],
			.aplikuj input[type=tel],
			.aplikuj textarea {
				border: 1px solid #e8e8e8;
			}
		span.wpcf7-not-valid-tip {
			font-size: 13px;
		}
		div.wpcf7-validation-errors {
			float: left;
			width: 100%;
		}

	.space {
		height: 15px;
		width: 100%;
		float: left;
		clear: both;
	}

	.footer {
		border-top: 1px solid #e1e1e1;
		height: 100px;
		padding-top: 20px;
		clear: both;
	}
		.footer p {
			font-size: 18px;
			font-weight: 300;
			line-height: 27px;
			color: #757474;
			margin: 0;
		}
			.footer .copyright {
				text-align: right;
			}
			.footer p a {
				color: #757474;
			}

	.certyfikat {
		height: auto;
		width: 100%;
		float: left;
		border-bottom: 1px solid #dedede;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	.certyfikat:last-child {
		border-bottom: 0;
	}
		.certyfikat .cert_img {
			width: 14%;
			height: 180px;
			float: left;
			margin-right: 2%;
		}
			.certyfikat .cert_img div {
				width: 10%;
				height: 180px; 
				display: table-cell; 
				overflow: hidden; 
				vertical-align: middle;
			}
		.certyfikat .cert_tytul {
			width: 84%;
			height: auto;
			float: left;
		}
			.certyfikat .cert_tytul h2 a {
				color: #333;
				font-size: 26px;
			}
		.certyfikat .cert_tresc {
			width: 84%;
			height: auto;
			float: left;
		}

	.certyfikaty_page {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-content: center;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center;
	}
		.certyfikaty_page .cert {
			position: relative;
			height: 150px;
		}
			.certyfikaty_page .cert .row {
				height: 100%;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-webkit-flex-wrap: nowrap;
				-ms-flex-wrap: nowrap;
				flex-wrap: nowrap;
				-webkit-justify-content: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-align-content: center;
				-ms-flex-line-pack: center;
				align-content: center;
				-webkit-align-items: center;
				-ms-flex-align: center;
				align-items: center;
				text-align: center;
			}
				.certyfikaty_page .cert img {
					max-height: 140px;
				}

/* #####################################################################################
###################### S T Y L E   R O Z D Z I E L C Z O Ś C I #########################
##################################################################################### */

@media (max-width: 544px) {
	.header {
		height: auto;
	}
	.logo {
		padding-top: 30px;
		padding-left: 15%;
	}
	.logo a {
		padding-right: 10px;
		margin-right: 10px;
		width: 50%;
	}
	.logo .miasto {
		font-size: 26px;
		margin-top: 3px;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border-color: transparent;
	}
	.navbar-collapse {
		box-shadow: none;
	}
	.nav-justified > li {
		height: auto;
		width: 100%;
		float: left;
	}
	.nav-justified > li > a {
		font-size: 16px;
		height: auto;
		padding: 5px 0;
	}
	.fade-carousel .slides .slide-1,
	.fade-carousel .slides .slide-2,
	.fade-carousel .slides .slide-3,
	.fade-carousel .slides .slide-4,
	.fade-carousel .slides .slide-5,
	.fade-carousel .carousel-inner .item,
	.overlay,
	.slider {
		height: 170px;
	}
	.slogan,
	.oferta h1 {
		font-size: 13px;
	}
	.hero {
		left: 26%;
	}
	.content h2 {
		margin-top: 10px;
		font-size: 13px;
	}
	.content img {
		width: 35%;
	}
	.content a {
		padding: 7px 30px;
		font-size: 11px;
		border: 1px solid #FFF;
	}
	.content p {
		line-height: 20px;
	}
	.content p,
	.footer p {
		font-size: 11px;
	}
	.footer p {
		font-size: 12px;
		letter-spacing: -1px;
		line-height: 23px;
	}
	.oferta {
		height: 80px;
	}
	.footer {
		height: auto;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.footer .copyright,
	.footer .adres {
		text-align: center;
	}
	.formularz {
		margin-bottom: 15px;
	}
}

@media (min-width: 545px) and (max-width: 768px) {
	.container {
		width: 514px;
	}
	.header {
		height: auto;
	}
	.logo {
		padding-top: 30px;
		padding-left: 17%;
	}
	.logo a {
		padding-right: 10px;
		margin-right: 10px;
	}
	.logo .miasto {
		font-size: 36px;
		margin-top: 3px;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border-color: transparent;
	}
	.navbar-collapse {
		box-shadow: none;
	}
	.nav-justified > li {
		height: auto;
		width: 100%;
		float: left;
	}
	.nav-justified > li > a {
		font-size: 17px;
		height: auto;
		padding: 8px 0;
	}
	.fade-carousel .slides .slide-1,
	.fade-carousel .slides .slide-2,
	.fade-carousel .slides .slide-3,
	.fade-carousel .slides .slide-4,
	.fade-carousel .slides .slide-5,
	.fade-carousel .carousel-inner .item,
	.overlay,
	.slider {
		height: 270px;
	}
	.slogan,
	.oferta h1 {
		font-size: 20px;
	}
	.hero {
		left: 26%;
	}
	.content h2 {
		margin-top: 10px;
		font-size: 18px;
	}
	.content img {
		width: 35%;
	}
	.content a {
		padding: 7px 30px;
		font-size: 13px;
	}
	.content p {
		line-height: 22px;
	}
	.content p,
	.footer p {
		font-size: 13px;
	}
	.footer p {
		font-size: 12px;
		letter-spacing: -1px;
	}
	.oferta {
		height: 80px;
	}
	.footer {
		height: auto;
		padding-top: 10px;
	}
	.footer .copyright,
	.footer .adres {
		text-align: center;
	}
	.formularz {
		margin-bottom: 15px;
	}
}

@media (min-width: 769px) and (max-width: 995px) {
	.container {
		width: 738px;
	}
	.logo {
		padding-top: 38px;
	}
	.logo a {
		padding-right: 10px;
		margin-right: 10px;
		width: 65%;
	}
	.logo .miasto {
		font-size: 22px;
		margin-top: 4px;
	}
	.nav-justified > li > a {
		font-size: 17px;
	}
	.fade-carousel .slides .slide-1,
	.fade-carousel .slides .slide-2,
	.fade-carousel .slides .slide-3,
	.fade-carousel .slides .slide-4,
	.fade-carousel .slides .slide-5,
	.fade-carousel .carousel-inner .item,
	.overlay,
	.slider {
		height: 360px;
	}
	.slogan,
	.oferta h1 {
		font-size: 24px;
	}
	.hero {
		left: 26%;
	}
	.content h2 {
		margin-top: 10px;
		font-size: 24px;
	}
	.content a {
		padding: 10px 40px;
		font-size: 15px;
	}
	.content p {
		line-height: 25px;
	}
	.content p,
	.footer p {
		font-size: 15px;
	}
	.footer p {
		font-size: 12px;
		letter-spacing: -1px;
	}
	.oferta {
		height: 105px;
	}
}

@media (min-width: 993px) and (max-width: 1200px) {
	.container {
		width: 962px;
	}
	.logo {
		padding-top: 32px;
	}
	.logo a {
		padding-right: 10px;
		margin-right: 10px;
		width: 65%;
	}
	.logo .miasto {
		font-size: 28px;
		margin-top: 6px;
	}
	.nav-justified > li > a {
		font-size: 19px;
	}
	.fade-carousel .slides .slide-1,
	.fade-carousel .slides .slide-2,
	.fade-carousel .slides .slide-3,
	.fade-carousel .slides .slide-4,
	.fade-carousel .slides .slide-5,
	.fade-carousel .carousel-inner .item,
	.overlay,
	.slider {
		height: 430px;
	}
	.slogan,
	.oferta h1 {
		font-size: 28px;
	}
	.hero {
		left: 27%;
	}
	.content h2 {
		margin-top: 30px;
		font-size: 26px;
	}
	.content a {
		padding: 10px 40px;
		font-size: 16px;
	}
	.content p,
	.footer p {
		font-size: 16px;
	}
	.footer p {
		font-size: 15px;
		letter-spacing: -1px;
	}
	.oferta {
		height: 135px;
	}
}

@media (min-width: 1201px) and (max-width: 1366px) {
	.container {
		width: 1170px;
	}
	.logo .miasto {
		font-size: 38px;
	}
	.nav-justified > li > a {
		font-size: 21px;
	}
	.fade-carousel .slides .slide-1,
	.fade-carousel .slides .slide-2,
	.fade-carousel .slides .slide-3,
	.fade-carousel .slides .slide-4,
	.fade-carousel .slides .slide-5,
	.fade-carousel .carousel-inner .item,
	.overlay,
	.slider {
		height: 550px;
	}
	.slogan,
	.oferta h1 {
		font-size: 36px;
	}
	.hero {
		left: 27%;
	}
	.content h2 {
		margin-top: 20px;
		font-size: 32px;
	}
	.content a {
		font-size: 18px;
	}
	.content p,
	.footer p {
		font-size: 17px;
	}
	.oferta {
		height: 155px;
	}
}

@media (min-width: 1367px) and (max-width: 1920px) {
	.container {
		width: 1336px;
	}

}