/* Website responsive stylesheet CSS3 */
/* Copyright (c) 2016 by Quantis Sp. z o. o.  */

body { 
	padding: 0;
	margin: 0;
}

p , ul, h4 {padding: 0.2em 0; font-family: 'Open Sans';}
h1, h2, h3 {padding: 0.2em 0;}

a {text-decoration: none; color: inherit; transition: all 0.5s ease;}
a:hover {color: red;}

b { font-weight: bold;}

p {line-height: 1.9em; font-size: 0.9em; font-weight: 400; color: #888;}
h1 {line-height: 1.6em; font-size: 2.3em; font-weight: normal; text-transform: uppercase; font-family: 'montserratsemibold';}
h2 {line-height: 1.4em; font-size: 1.5em; font-weight: normal; text-transform: uppercase; font-family: 'montserratregular';}
h3 {line-height: 1.7em; font-size: 1.3em; font-weight: normal; font-family: 'montserratsemibold';}
h4 {line-height: 1.7em; font-size: 1.2em; font-weight: 300;}
ul {list-style: none; margin: 0; padding: 0;}
li {line-height: 2em; text-align: centpadding: 0.5em; font-family: 'Work Sans';}

img {height: auto; width: 100%;}

button {margin: 1em 0; border: 2px solid black; border-radius: 0.2em; background: black; color: white; padding: 0.7em; text-align: center; text-decoration: none; display: inline-block; font-size: 1em; font-weight: normal; font-family: 'montserratsemibold'; text-transform: uppercase; transition: all .3s ease;}
button:hover {background-color: transparent; color: black; cursor: pointer;}

.section, .header, .navigation, .footer {display: block; justify-content: center; width: 100%; }
.header {display: flex; flex-flow: row wrap;}

.container {display: flex; flex-flow: row wrap; align-items: top; justify-content: center; width: 80%; margin: auto; overflow: hidden; }
.footer {background-color: black; color: white; text-align: center;}
.box-1-1 {float: left; width: 100%; transition: all 0.5s ease;}
.box-1-2 {float: left; width: 50%; transition: all 0.5s ease;}
.box-1-3 {float: left; width: 33.33%; transition: all 0.5s ease;}
.box-2-3 {float: left; width: 66.66%; transition: all 0.5s ease;}
.box-1-4 {float: left; width: 25%; transition: all 0.5s ease;}
.box-3-4 {float: left; width: 75%; transition: all 0.5s ease;}
.box-1-6 {float: left; width: 16.66%; transition: all 0.5s ease;}
.box-5-6 {float: left; width: 83.33%; transition: all 0.5s ease;}
.flex { flex-flow: column; }


.logo {width: 11em; padding: 0.5em; margin: auto;}
.grayscale {filter: grayscale(100%) opacity(70%);}

.menu {display: flex; flex-flow: row wrap; justify-content: center; margin: auto; width: 100%; height: auto; font-size: 0.9em; font-weight: normal; text-transform: uppercase;}
.menu-item {float: left; width: auto; padding: 0 2em 0 2em; line-height: 4em; height: 4em; color: white; transition: all .3s ease; font-family: 'montserratsemibold'; }
.menu-item:hover a {color: red;}

.slide:last-child {position: relative;}
.slide {position: absolute; opacity: 1; transition: opacity 1s ease-in-out; height: 35em; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: bottom center;}
.slide-text {opacity: 1; transition: opacity 1s ease-in-out;}

.box-shadow1{background-color: rgba(0,0,0,0.15);}
.box-shadow {background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.3) 80%, rgba(0, 0, 0, 0) 100%);}
.image {padding: 0; margin: auto; width: 80%;}
.image2 {height: auto; width: 100%; overflow: hidden;}
.circle {
    background-color: #364e8d;
	color: white;
    border-radius: 50%;
	width: 5.5em;
    height: 5.5em;
    margin: auto;
    padding: 0;
    position: relative;
    text-align: center;
    transition: background .5s ease;
	line-height: 7em;
}

.round {
  background: #364e8d;
  border-radius: 0.7em;
  color: white;
  display: inline-block;
  font-weight: 500;
  line-height: 1.4em;
  margin-right: 5px;
  text-align: center;
  width: 1.4em; 
}

.input {display: flex; padding: 0.5em; font-family: 'Work Sans'; line-height: 1.7em; font-size: 1em; font-weight: 300; text-align: left;}
.input-field {margin: 0.5em 0; padding: 0.5em 0.75em; width: 85%; font-family: 'Open Sans'; font-size: 0.9em; line-height: 1.9em; font-weight: 300;}
.input-item {border: 1px solid hsla(31, 15%, 50%, 0.25); padding: 0.5em 0.75em; width: 10em; background: #eee; font-weight: 400;}
	


@media only screen and ( min-width: 960px ) and ( max-width: 1280px ) {

	p {line-height: 2em; font-size: 1em; font-weight: 300;}
	h1 {font-size: 1.8em; font-weight: 400; padding: 0.5em;}
	h2 {font-size: 1.2em; font-weight: 400; padding: 0.5em;}
	h3 {font-size: 1.1em; font-weight: 300; padding: 0.1em;}
	
  .box-1-2 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-4 {
    float: left;
    width: 50%;
	transition: all 1s ease;
  }
  .box-3-4 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
	.menu-item {padding: 0 1em 0 1em;}
	.image {padding: 0; margin: auto; width: 60%;}
	.slide {height: 30em;}
}

@media only screen and ( max-width: 960px ) {

	p {line-height: 1.8em; font-size: 0.9em; font-weight: 300; padding: 0.5em;}
	h1 {font-size: 1.5em; font-weight: 600; padding: 2vw 2vw 0.5em 2vw;}
	h2 {font-size: 1.1em; font-weight: 600; padding: 2vw 2vw 0.5em 2vw;}
	h3 {font-size: 1em; font-weight: 300; padding: 0.1em;}
	button {padding: 0.5em;}
	
  .box-1-2 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-3 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
 
  .box-2-3 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-4 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  .box-3-4 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  .container {display: flex; flex-flow: row wrap; justify-content: center; width: 100%; margin: auto; overflow: hidden;}
  
  .menu {flex-flow: column;}
  .menu-item {
	float: left;
	width: 100%;
	height: 2em;
	line-height: 2em;
	font-size: 1.2em;
	border-top: 1px dotted #aaa;
	transition: all 1s ease;
  }
  .menu-item:hover {
	background-color: #B40079;
	color: white;
  }
  .circle {display: none;}
  .image {padding: 0; margin: auto; width: 15em;}
  .flex {flex-flow: row;}
  .slide {height: 20em;}
}

@media only screen and ( max-width: 600px ) {
	.flex {flex-flow: column;}
    .slide {height: 15em;}
}
/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}