/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	box-sizing: border-box;   /* brzydko, co? */
}

body {
	font-family: 'Open Sans', sans-serif;
}

/* CLEARFIX */

.row:before,
.row:after {
	content: "";
	display: table;
	clear: both;	
}

/* END OF CLEARFIX */

section {
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 4%;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

/* jumbotron */

.jumbotron {
	background: url("https://images.pexels.com/photos/130111/pexels-photo-130111.jpeg?w=1900&auto=compress&cs=tinysrgb") 0/cover;
	height: 100vh;
	min-height: 600px;
	width: 100%;
	position: relative;
	color: #fff;
}

.jumbotron .row {
  position: relative;
}

.brand-icon a {
	display: block;
	font-size: 35px;
	margin: 185px 0;
    color: white;
    font-family: 'Merriweather';
    font-weight: 700;
    font-style: italic;
    text-decoration: none;
}

.slogan h1 {
	font-weight: 300;
	font-size: 60px;
	margin-bottom: 30px;
}

.slogan p {
	line-height: 1.5;
	max-width: 50%;
}

.iphone-img img {
  position: absolute;
  top: 150px;
  right: 0;
}

/* text area 1 */

.text-area-1 {
	color: #3f3d3d;
	margin: 150px auto;
}
.text-area-1 [class*="col-"] {
	display: inline-block;
	float: left;
}

.text-area-1 h2 {
	font-weight: 300;
	font-size: 45px;
	padding-bottom: 25px;
}

.text-area-1 p {
	line-height: 1.5;
	margin: 40px 0;
}

.text-area-1 .first-par p {
	margin-bottom: 0px;
}

.text-area-1 [class*="col-"]:nth-child(2) {
	padding-left: 25px;
	position: relative;
}

/* GALLERY */

.gallery .row {
	color: #fff;
}

[class*="box-"] {
	height: 350px;
	float: left;
	padding: 40px;
  	position: relative;
}

.gallery h3 {
	font-size: 30px;
	font-weight: 300;
	margin-bottom: 20px;
}

.gallery p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	padding: 25px 0;
}

.gallery a {
	color: white;
	text-decoration: none;
}

p.more-info {
	font-weight: 700;
}

.find-more {
 	position: absolute;
  	bottom: 8%;
}

.find-more1 {
	position: absolute;
  	bottom: 8%;
  	width: 80%;
}

.find-more2 {
	position: absolute;
  	bottom: 8%;
	width: 85%;
}

.fa-long-arrow-right {
	margin-left: 10px;
}

.fa-heart-o {
	float: right;
}

.box-1 {
	background-color: #F5989D;
}

.box-2 {
	background-color: #615F7D;
}

.box-3 {
	background: url(https://images.pexels.com/photos/91230/pexels-photo-91230.jpeg?h=350&auto=compress&cs=tinysrgb) 0/cover;
}

.box-4 {
	background-color: #BC8BBE;
}

.box-5 {
	background: url(https://images.pexels.com/photos/370142/pexels-photo-370142.jpeg?h=350&auto=compress&cs=tinysrgb) 0/cover;
}

.box-6 {
	background-color: #82CA9C;
}

.box-7 {
	background: url(https://images.pexels.com/photos/287229/pexels-photo-287229.jpeg?h=350&auto=compress&cs=tinysrgb) 0/cover;

}

/* text-area-2 */

.text-area-2 {
	margin: 150px auto;
}

.text-area-2 [class*="col-"]{
	float: left;
}

.text-area-2 h2 {
	margin: 35px 0;
	font-size: 45px;
	font-weight: 300;
}

.text-area-2 h6 {
	font-size: 15px;
	line-height: 1.5;
	margin: 25px 0;
}

.text-area-2 p {
	line-height: 1.5;
	font-weight: 300;
	padding-right: 15px;
}

/* OPTIONS */

.options {
	background: url(https://images.pexels.com/photos/422192/pexels-photo-422192.jpeg?w=1900&h=auto&auto=compress&cs=tinysrgb) 0/cover;
	height: 100vh;
	min-height: 600px;
	color: white;
}

.slogan-2 {
	padding-top: 30%;
}

.slogan-2 h1 {
	font-weight: 300;
	font-size: 60px;
	margin-bottom: 30px;
}

.slogan-2 p {
	line-height: 1.5;
	max-width: 50%;
}

.slogan-2 a {
	display: block;
	color: white;
	margin-top: 25px;
	text-decoration: none;
	font-weight: 700;  
}

/* text area 3 */

.text-area-3 {
	background-color: #82CA9C;
	height: 100%;
	max-width: 1900px;
	color: white;
	position: relative;
	padding-bottom: 100px;
}

.text-area-3 .row [class*="col-"] {
	float: left;
	padding: 30px 0;
}

.text-area-3 h2 {
	padding: 70px 0 30px;
	font-size: 45px;
	font-weight: 300;
}

.text-area-3 h6 {
	font-size: 15px;
	line-height: 1.5;
	margin: 25px 0;
}

.text-area-3 p {
	line-height: 1.5;
	font-weight: 300;
	padding-right: 15px;
}

/* plans section */

.plans .row {
	margin: 100px auto;
}

.plans [class*="col-"] {
	float: left;
}

.plan-solo, .plan-team {
	padding: 40px;
	transition: .4s ease;
    margin: 25px;
}

.plan-solo h2, .plan-team h2 {
	font-weight: 400;
	font-size: 30px;
	padding-bottom: 20px;
}

.plan-descr {
	font-weight: 400;
	line-height: 1.5;
	font-size: 13px;
	margin: 5px 0;
}
.plans a {
	font-size: 25px;
	padding: 5px;
	color: #d6d6d6;
	transition: .4s ease;
}

a.plan-button {
	display: inline-block;
	background-color: #82CA9C;
	color: white;
	margin: 20px 0;
	padding: 13px 35px;
	border-radius: 3px;
	font-size: 12px;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	border: none;
	transition: .4s ease;
	text-decoration: none;
}

.banner {
	border-radius: 4px;
	display: inline-block;
	background-color:#d6d6d6;
	padding: 5px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: white;
	margin-bottom: 15px;
	transition: .4s ease;
}

.plan-solo:hover, .plan-team:hover {
	box-shadow: 0 0 50px -5px #cecccc;
}

.plan-solo:hover .banner {
	background-color: #f5989d; 
}

.plan-team:hover .banner {
	background-color: #b55abb; 
}

.plan-solo:hover .plan-button, .plan-team:hover .plan-button {
	cursor: pointer;
	background-color: #5cce58;
}

.plan-solo:hover a.plan-button, .plan-team:hover a.plan-button {
	color: #fff;
}

/* CONTACT SECTION */

.contact {
	background-color: #2a2a3d;
	height: 100%;
	color: white;
}

.contact .row [class*="col-"] {
	float: left;
}

.contact h2 {
	padding: 70px 0 30px;
}

.contact p {
	line-height: 1.5;
	font-weight: 300;
	padding-right: 15px;
}

.contact a {
	text-decoration: none;
	color: white;
}

ul {
	padding: 70px 0;
	line-height: 1.7;
}

ul li:first-child {
	padding-top: 25px;
}

label {
	color: #425264;
	display: inline-block;
	max-width: 70%;
	font-size: 12px;
	line-height: 1.5;
	margin-top: 15px;
}

form {
	margin-bottom: 20px;
}

form input {
	width: 80%;
	height: 50px;
	border: none;
	font-size: 25px;
    padding: 0 15px;
}

form input {
	outline: 0;
}

form i {
	background-color: #82CA9C;
	height: 50px;
	width: 50px;
	position: absolute;
}

form .fa {
	font-size: 35px;
	display: inline;
	line-height: 50px;
	text-align: center;
}

@media (max-width: 767px) {

	/* PHONES */

	.col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.33%;}
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 83.33%;}
    .col-xs-11 {width: 91.66%;}
    .col-xs-12 {width: 100%;}

    .col-xs-offset-1 {margin-left: 8.33%;}
	.col-xs-offset-2 {margin-left: 16.66%;}
	.col-xs-offset-3 {margin-left: 25%;}
	.col-xs-offset-4 {margin-left: 33.33%;}
	.col-xs-offset-5 {margin-left: 41.66%;}
	.col-xs-offset-6 {margin-left: 50%;}
	.col-xs-offset-7 {margin-left: 58.33%;}
	.col-xs-offset-8 {margin-left: 66.66%;}
	.col-xs-offset-9 {margin-left: 75%;}
	.col-xs-offset-10 {margin-left: 83.33%;}
	.col-xs-offset-11 {margin-left: 91.66%;}
	.col-xs-offset-12 {margin-left: 100%;}

	/* jumbotron */

	.iphone-img {
	  display: none;
	}

	/* text area 1 */
	.text-area-1 [class*="col-"]:nth-child(2) {
		padding-left: 0;
	}

	.third-par p:first-child {
		margin-top: 0px;
	}
	
	/* plans */

	.plan-solo, .plan-team {
		margin: 25px auto;
		width: 100%;
		height: 100%;
	}

	/* contact */

	.contact {
		text-align: center;
	}

	form {
		text-align: center;
		transform: translateX(-25px);
	}

	ul {
		text-align: center;
		padding: 25px 0;
	}

	p {
		margin-bottom: 40px;
	}

}

@media(min-width: 768px) and (max-width: 991px) {

	/* TABLETS */

	.col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

    .col-s-offset-1 {margin-left: 8.33%;}
	.col-s-offset-2 {margin-left: 16.66%;}
	.col-s-offset-3 {margin-left: 25%;}
	.col-s-offset-4 {margin-left: 33.33%;}
	.col-s-offset-5 {margin-left: 41.66%;}
	.col-s-offset-6 {margin-left: 50%;}
	.col-s-offset-7 {margin-left: 58.33%;}
	.col-s-offset-8 {margin-left: 66.66%;}
	.col-s-offset-9 {margin-left: 75%;}
	.col-s-offset-10 {margin-left: 83.33%;}
	.col-s-offset-11 {margin-left: 91.66%;}
	.col-s-offset-12 {margin-left: 100%;}

	.container {
		margin: 0 8%;
	}

	/* jumbotron */

	.iphone-img {
	  display: none;
	}
	
	/* text area 1 */

	.text-area-1 [class*="col-"]:nth-child(2) {
		padding-left: 0;
	}

	.third-par p:first-child {
		margin-top: 0px;
	}

	/* plans */

	.plan-solo, .plan-team {
		margin: 25px auto;
		width: 90%;
		height: 100%;
	}

	/* contact */

	.contact h2 {
		text-align: center;
	}
    
    form div {
    	text-align: center;
    	left: -25px;
    	position: relative;
    }
}

@media(min-width: 992px) and (max-width: 1199px) {

	/* MEDIUM DISPLAYS */

	.col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}

    .col-m-offset-1 {margin-left: 8.33%;}
	.col-m-offset-2 {margin-left: 16.66%;}
	.col-m-offset-3 {margin-left: 25%;}
	.col-m-offset-4 {margin-left: 33.33%;}
	.col-m-offset-5 {margin-left: 41.66%;}
	.col-m-offset-6 {margin-left: 50%;}
	.col-m-offset-7 {margin-left: 58.33%;}
	.col-m-offset-8 {margin-left: 66.66%;}
	.col-m-offset-9 {margin-left: 75%;}
	.col-m-offset-10 {margin-left: 83.33%;}
	.col-m-offset-11 {margin-left: 91.66%;}
	.col-m-offset-12 {margin-left: 100%;}

	.container {
		margin: 0 15%;
	}

	.email_form {
		width: 100%;
	}

	.iphone-img img {
	  position: absolute;
	  right: -160px;
	}
}

@media(min-width: 1200px) {

	/* BIG DISPLAYS */
	
	.col-l-1 {width: 8.33%;}
    .col-l-2 {width: 16.66%;}
    .col-l-3 {width: 25%;}
    .col-l-4 {width: 33.33%;}
    .col-l-5 {width: 41.66%;}
    .col-l-6 {width: 50%;}
    .col-l-7 {width: 58.33%;}
    .col-l-8 {width: 66.66%;}
    .col-l-9 {width: 75%;}
    .col-l-10 {width: 83.33%;}
    .col-l-11 {width: 91.66%;}
    .col-l-12 {width: 100%;}

    .col-l-offset-1 {margin-left: 8.33%;}
	.col-l-offset-2 {margin-left: 16.66%;}
	.col-l-offset-3 {margin-left: 25%;}
	.col-l-offset-4 {margin-left: 33.33%;}
	.col-l-offset-5 {margin-left: 41.66%;}
	.col-l-offset-6 {margin-left: 50%;}
	.col-l-offset-7 {margin-left: 58.33%;}
	.col-l-offset-8 {margin-left: 66.66%;}
	.col-l-offset-9 {margin-left: 75%;}
	.col-l-offset-10 {margin-left: 83.33%;}
	.col-l-offset-11 {margin-left: 91.66%;}
	.col-l-offset-12 {margin-left: 100%;}

}
