body {
    background: #fff;
    color: #666666;
    font-family: "RobotoCondensed-Light";
    font-size: 10px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
@font-face {
    font-family: "RobotoCondensed-Bold";
    font-weight: normal;
    src: url("../fonty/RobotoCondensed-Bold.ttf"), url("../fonty/RobotoCondensed-Bold.eot");
}
@font-face {
    font-family: "RobotoCondensed-Light";
    font-weight: normal;
    src: url("../fonty/RobotoCondensed-Light.ttf"), url("../fonty/RobotoCondensed-Light.eot");
}


a {color: inherit; text-decoration: none;}
img {border: 0 none;}
h1, h2, h3, h4, h5, p, span, a {margin: 0; padding: 0; position: relative;}
.clear {clear: both;}
.rama {margin: 0 auto; position: relative; width: 1200px;}
.rameczka{width: 100%; position: relative; margin: 0 auto;}
h1{font-size: 5em; font-family: "RobotoCondensed-Bold";}
h2{font-size: 3em; font-family: "RobotoCondensed-Bold";}
h3{font-size: 2em; font-family: "RobotoCondensed-Light";}
span{font-family: "RobotoCondensed-Light";}
p{font-size: 1.8em;}
.col-3 {float: left; width: 33.3333%;}
.col-4 {float: left; width: 25%;}
.col-2{width: 50%; float: left;}
.col-5{width: 40%; float: left;}

.logo{padding: 40px 0; float: left;}
	.logo h1{color: #eb3e35; text-transform: uppercase;}
.tel p{color: #222; font-size: 4.2em; padding: 40px 0 40px 80px; line-height: 0.8em; font-family: "RobotoCondensed-Bold"; display: inline-block;}
.tel span{color: #eb3e35; font-size: 0.8em;}
.tel p:last-child{ background: url(../img/tel.png) no-repeat center left; width: auto;}	
.tel{float: right; text-align: right; text-transform: uppercase; }
	.tel p:first-child{ margin-right: 10px; padding: 0 ; top: -18px;}
	.tel p img{width: 46px; margin-right: 15px;}
	
.baner{width: 100%; overflow: hidden; position: relative; z-index: 1;}
	.baner img{width: 100%; height: auto; position: relative; z-index: 1;}
	.cycle-pager {bottom: 20px; color: rgba(225, 225, 225, 0); cursor: pointer;
    overflow: hidden; position: absolute; text-align: center;
    width: 100%; z-index: 101;}
	.cycle-pager span {background: url("../img/kropka.png") no-repeat; cursor: pointer;
    display: inline-block; font-family: arial; font-size: 20px; height: 28px; width: 30px;margin-right: 5px;}
	.cycle-pager span.cycle-pager-active {background: url("../img/kropka_active.png") no-repeat; height: 30px; width: 28px;}
	
.trzy_kroki{background: #eb3e35; width: 100%; display: inline-block; text-transform: uppercase; text-align: center; padding: 30px 0; color: #fff; margin-top: -3px;}
.trzy_kroki .col-3{color: #fff;}
.trzy_kroki h3{text-transform: none; background: #eb3e35;}
.trzy_kroki h2{background: #eb3e35;}
.trzy_kroki .col-3:hover{color: #222222;}
	.border{padding-top: 70px; margin-top: 20px;}
	#przyczepa{background: url("../img/przyczepa.png") no-repeat top center;}
	#rezerwacja{background: url("../img/rezerwacja.png") no-repeat top center;}
	#urlop{background: url("../img/regulamin.png") no-repeat top center;}
	#rezerwacja{border-left: 1px dotted #fff; border-right: 1px dotted #fff;}
	.trzy_kroki .col-3:hover #przyczepa{background: url("../img/przyczepa.png") no-repeat center -101px;}
	.trzy_kroki .col-3:hover #rezerwacja{background: url("../img/rezerwacja.png") no-repeat center -101px;}
	.trzy_kroki .col-3:hover #urlop{background: url("../img/regulamin.png") no-repeat center -101px;}
	
.oferta{width: 100%; text-align: center; padding: 30px 0; color: #222;}
.oferta h2{text-transform: uppercase;}
.oferta li{font-size: 1.7em;}
	.przyczepa{margin: 20px 0; border: 1px solid #bfb5b5; padding: 20px; text-align: left; z-index: 1; display: inline-block;}
	.col-2 > ul {margin: 0; padding: 0; list-style: none;}
	.col-2 > ul li{float: left; width: 50%;}
	.col-2 ul li img{width: 100%; height: auto;}
	.przyczepa ul li .margin{margin-right: 20px; overflow: hidden;}

	ul.left{width: 45%; float: left; margin: 0; padding: 0 0 0 5%;}
	ul.right{width: 45%; float: left; margin: 0; padding: 0 0 0 5%;}
	
.tresc{width: 75%; float: left; height: 209px; overflow: hidden;}
		.tresc h2{margin-bottom: 10px; line-height: 27px;}
.cena {width: 25%; float: left; text-align: center; color: #eb3e35; padding: 26px 0;}
	.cena h2, .tresc h2{text-transform: none;}
	.cena h2{}
	.zarezerwuj{background: #eb3e35; border-radius: 30px; width: auto; position: relative; bottom: -67px; z-index: 2; padding: 0 5px;}
		.zarezerwuj a{color: #fff; text-transform: uppercase; font-family: "RobotoCondensed-Bold"; line-height: 2em; font-size: 1.7em;}
		.przyczepa:hover .zarezerwuj{background: #222;}
		.przyczepa:hover{background: #222; color: #fff; border: 1px solid #222;}
		.przyczepa:hover .cena{color: #fff;}
		
.info {background: #fff; margin-top: 1em; display: inline-block; width: 80%;}		
.border_info {display: inline-block; padding: 0 30px 30px 30px;}
	.info h2{color: #222;}
	.info p{color: #666666; text-transform: none;}
	.info img {clear: both; margin: -3em auto 0 auto; text-align: center;}
.footer_kolor{background: #eb3e35; width: 100%; text-align: center; padding: 50px 0 0 0;}	
.footer {background: #222; margin-top: -30.5em; overflow: hidden; padding: 33em 0 3em 0;    text-align: center;}	
	.footer a, .info a{color: #eb3e35;}

.kontakt_tel{width: 100%; }
	
@media only screen and (max-width: 1250px) {
	.rama {width: 98%;}
}

@media only screen and (max-width: 1024px) {
	.przyczepa ul li img{height: 190px;}
	.tresc{height: 186px;}
	.cena {padding: 18px 0;}
	.zarezerwuj {bottom: -59px;}
}

@media only screen and (max-width: 800px) {
	.przyczepa ul li {float: none; width: 100%;}
	.przyczepa > .col-2:first-child{width: 34%;}
	.przyczepa > .col-2{width: 64%;}
	.col-2 > ul li:last-child{margin-top: 20px;}		
	.przyczepa ul li img{height: 190px;}
	.tresc{width: 100%; height: 304px;}
	.cena {width: 100%; padding: 18px 0 0 0; margin: 0;}
	.cena h2{ padding-right: 10px; width: auto; float: left;}
	.zarezerwuj{clear: both; width: 45%; margin: 0 auto; text-align: center; bottom: -47px;}
	ul.left, ul.right {width: auto; padding: 0 0 0 30px; float: none;}
}

@media only screen and (max-width: 700px) {
	.logo h1{font-size: 3.7em;}
	.tel {font-size: 3em;}
	.baner img {height: 220px; width: auto;}
}	

@media only screen and (max-width: 670px) {
	.przyczepa > .col-2:first-child{width: 40%;}
	.przyczepa > .col-2{width: 60%;}
	.footer {margin-top: -13.5em; padding: 16em 0 3em;}
}

@media only screen and (max-width: 600px) {
	.przyczepa > .col-2:first-child{width: 46%;}
	.przyczepa > .col-2{width: 54%;}
	.baner img{margin-left: -70px;}
}

@media only screen and (max-width: 550px) {
	.przyczepa > .col-2:first-child{width: 100%;}
	.przyczepa > .col-2{width: 100%;}
	.przyczepa ul li .margin {margin-right: 0;}
	.przyczepa ul li img {height: auto; width: 100%;}
	.tresc {height: auto; margin-top: 20px;}
	.zarezerwuj {bottom: -37px;}
	.col-3 {width: 100%;}
	#rezerwacja {border-left: none; border-right: none;}
	.col-3{border-bottom: 1px dotted #fff; padding-bottom: 20px;}
	.footer {margin-top: -16.5em; padding: 19em 0 3em;}
	.logo{float: none; text-align: center; padding: 20px 0 0 0;}
	.tel{float: none; text-align: center; margin: 0 auto; width: 150px; padding: 20px 0 20px 80px;}
}

@media only screen and (max-width: 414px) {
	.baner img{margin-left: -110px;}
}

@media only screen and (max-width: 280px) {
	.tel{background: none; padding: 20px 0 20px 0;}
	.zarezerwuj {width: 75%;}
}