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

body { 
	padding: 0;
	margin: 0;
}

p , ul {padding: 0.2em; font-family: 'Work Sans';}
.menu {margin: 1vw; font-family: 'Work Sans';}
h1, h2, h3 {padding: 0.2em 2em; font-family: 'Work Sans';}

a {text-decoration: none; color: inherit; transition: all 0.5s ease;}
a:hover {color: red;}
b {font-weight: 500;}
p {line-height: 1.8em; font-size: 1em; font-weight: 300; text-align: center;}
h1 {line-height: 1.2em; font-size: 2.5em; font-weight: 500; text-align: center;}
h2 {line-height: 1.5em; font-size: 1.2em; font-weight: 500; text-align: center;}
h3 {line-height: 1.7em; font-size: 1.2em; font-weight: 300; text-align: center;}
ul {list-style: none; margin: 0; padding: 0;}
li {line-height: 2em; text-align: center;}
img {height: auto; width: 100%;}
button {background-color: #aaa; color: white; border: none; border-radius: 0.3em; margin: 1vw 0; padding: 0.7em; text-align: center; text-decoration: none; display: inline-block; font-size: 1em; font-weight: 500; font-family: 'Work Sans'; transition: all .5s ease;}
button:hover {background: #355faa; cursor: pointer;}

.section, .header, .navigation, .footer {display: block; justify-content: center; width: 100%;}
.navigation {background-image: linear-gradient(#ffffff, #dddddd); border-bottom: solid 1px #ccc;}
.container {display: flex; flex-flow: row wrap; justify-content: center; width: 80%; margin: auto; padding: 0; 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;}

.logo {margin: auto; width: 9em; text-align: center;}
.menu {display: flex; flex-flow: row wrap; justify-content: center; margin: auto; width: 100%; height: auto; font-size: 1.1em; font-weight: 400; text-transform: uppercase;}
.menu-item {float: left; width: auto; padding: 0 1em 0 1em; line-height: 2.5em; height: 2.5em; color: #444; transition: all .5s ease;}
.menu-item:hover {background-color: #355faa;}
.menu-item:hover a {color: white;}

.box-shadow {box-shadow: 5px 5px 5px rgba(0,0,0,0.2);}
.back-shadow {background-image: linear-gradient(to right, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 30%, rgba(255,255,255, 0.6) 70%, rgba(255,255,255, 0) 100%);}
.image {padding: 0; margin: auto; width: 100%; filter: grayscale(30%) brightness(110%) contrast(110%); }
.image2 {height: auto; width: 100%; overflow: hidden;}

.circle {
    background-color: #355faa;
    border-radius: 50%;
	width: 8vw;
    height: 8vw;
    margin: 1em auto;
    padding: 0;
    position: relative;
    text-align: center;
    transition: background .5s ease;
}
.circle img {width: auto; height: 4vw; margin: 1.8vw auto;}
.circle svg {
    fill: white;
}


.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 {border: 1px solid #ccc;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 #ccc; padding: 0.5em 0.75em; width: 10em; background: #eee; font-weight: 400;}
	
.client-logo {margin: 0.5em; max-width: 10em; height: auto;}

.desktop-only {display: initial;}

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

	p {line-height: 2em; font-size: 0.9em; font-weight: 300;}
	h1 {font-size: 1.5em; font-weight: 600; padding: 2vw 2vw 0.5em 2vw;}
	h2 {font-size: 1.1em; font-weight: 400; padding: 2vw 2vw 0.5em 2vw;}

	.box-1-2 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-4 {
    float: left;
    width: 50%;
	transition: all 1s ease;
  }
	.menu {font-size: 1em;}
	.menu-item {padding: 0 0.5em 0 0.5em;}
	.logo {width: 8em;}
	.image {padding: 0; margin: auto; width: 60%;}
	
	.desktop-only {display: none;}
}

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

	p {line-height: 1.8em; font-size: 0.9em; font-weight: 300; padding: 1vw 1vw 0.5em 1vw;}
	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 {line-height: 1.8em; font-size: 0.9em; font-weight: 300; padding: 2vw 2vw 0.5em 2vw;}
	button {padding: 0.6em;}
	
  .box-1-2 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-3 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .box-1-4 {
    float: left;
    width: 100%;
	transition: all 1s ease;
  }
  
  .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: #355faa;
	color: white;
  }
  .logo {width: 7em; margin-top: 1em;}
  .circle {display: none;}
  .image {padding: 0; margin: auto; width: 15em;}
  .desktop-only {display: none;}
}


/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}