/* -------------------------------------------------- STYLE RESET -------------------------------------------------- */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  font-family: 'Poppins', sans-serif !important;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}
a:link {
  text-decoration: none;
	color: #9698A5;
}

a:visited {
  text-decoration: none;
	color: #9698A5;
}

a:hover {
  text-decoration: underline;
	color: #9698A5;
}

a:active {
  text-decoration: underline;
	color: #9698A5;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

html,
body {
  overflow-x: hidden;
	background: #E5E5E5;
}

.wrapper{
	width:1100px;
	height: auto;
	margin: 0 auto;
}

/* -------------------------------------------------- Header -------------------------------------------------- */

.header{
	width:100%;
	height: auto;
	background: #009FE5;
	padding: 75px 0;
}

.logo-top{
	display: block;
	width:410px;
	height: 60px;
	margin: 0 0 30px 0;
}

.logo-top img{
	width:100%;
}

h1{
	font-weight: 400;
	line-height: 35px;
	font-size: 24px;
	color: #FFFFFF;
	margin: 0;
	padding: 0;
	width:90%;
}

/* -------------------------------------------------- Content -------------------------------------------------- */

#content{
	width:100%;
	height: auto;
	padding: 0;
}

h2{
	font-weight: 400;
	line-height: 42px;
	font-size: 36px;
	color: #009FE5;
	margin: 70px 0 40px 10px;
	padding: 0;
}

.items{
	width:100%;
	height: auto;
	margin: 0 0 40px 0;
	display: flex;
	flex-wrap: wrap; 
	flex-direction: row;
	justify-content: space-between;
}

.item{
	width:23%;
	height: auto;
	display: inline-block;
	background: #FFFFFF;
	border-radius: 3px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.17);
	position: relative;
	margin: 1% 1% 5% 1%;
	vertical-align: top;
}

.invisible{
	visibility: hidden;
}

.item img{
	width:100%;
	margin: 0 0 20px;
}

.item h4{
	font-weight: 600;
	line-height: 28px;
	font-size: 19px;
	color: #304067;
	margin: 0 0 0 10px;
	padding: 0;
}

.item p{
	font-weight: normal;
	line-height: 25px;
	font-size: 16px;
	color: #000000;
	margin: 0 0 40px 10px;
	padding: 0;
}

.google-play-link{
	display: block;
	width:140px;
	height: auto;
	position: absolute;
	bottom: 0;
}

.google-play-link img{
	width:100%;
	margin: 0 0 -25px 10px;
}

/* -------------------------------------------------- Footer -------------------------------------------------- */

.footer{
	width:100%;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px -44px 150px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 70px 0;
}

.info-bottom{
	width:380px;
	height: auto;
	float:left;
}

.info-bottom img{
	width:240px;
	height: auto;
	margin: 0 0 0 0;
}

.info-bottom p{
	font-weight: 400;
	line-height: 25px;
	font-size: 14px;
	color: #A3A5B0;
}

.social{
	width:235px;
	height: auto;
	float: right;
}

.social h4{
	font-weight: 600;
	line-height: 27px;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: #6F797D;
	padding: 0;
	margin: 0;
}

.social .twitter{
	width:100%;
	margin: 10px 0;
}

.social .twitter a{
	width:100%;
	display: block;
}

.social .twitter a img{
	width:100%;
}

.social .facebook{
	width:100%;
}

.social .facebook .facebook-left{
	float:left;
}

.social .facebook .facebook-right{
	float:right;
}

.footer-middle-wrapper{
	width: 480px;
	float:left;
}

.footer-middle{
	width:280px;
	margin: 0 auto;
}

.footer-middle h4{
	font-weight: 600;
	line-height: 27px;
	font-size: 18px;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}

.footer-middle h4.blue{
	color: #009FE5;
}

.footer-middle h4.red{
	color: #F8291D;
}

.footer-middle p{
	font-weight: 400;
	line-height: 18px;
	font-size: 11px;
	color: #9698A5;
	margin: 0 0 30px;
}


/* -------------------------------------------------- Mobile -------------------------------------------------- */

@media (max-width:1150px){
	.wrapper{
		width:700px;
	}
	
	.items{
		width:700px;
		margin: 0 auto 150px;
	}
	
	.item{
		display: inline-block;
		vertical-align: top;
		margin: 0 0 75px;
		width:225px;
	}
	
	.info-bottom {
		width: 380px;
		float: none;
		margin: 0 auto 50px;
	}
	
	.footer-middle-wrapper {
		width: 380px;
		float: none;
		margin: 0 auto 50px;
	}
	
	.footer-middle {
		width: 380px;
		margin: 0 auto;
	}
	
	.social {
		width: 235px;
		float: none;
		margin: 0 auto;
	}
}

@media (max-width:750px){
	.wrapper{
		width:95%;
	}
	
	.logo-top {
		margin: 0 0 30px 0;
	}
	
	h1 {
		margin: 0;
		width: 90%;
	}
	
	.items{
		width:99%;
		margin: 0 auto 150px;
	}
	
	.item{
		display: inline-block;
		vertical-align: top;
		width:24%;
		margin: 0.5% 0.5% 50px 0.5%;
	}
	
	.item h4 {
		line-height: 22px;
		font-size: 14px;
		margin: 0;
	}
	
	.item p {
		line-height: 16px;
		font-size: 10px;
		margin: 0 0 30px 0;
	}
	
	.google-play-link {
		width: 68%;
	}
	
	.info-bottom {
		width: 30%;
		float: left;
		margin: 0 0 50px 2%;
	}
	
	.info-bottom img {
		width: 100%;
	}
	
	.info-bottom p {
		line-height: 15px;
		font-size: 12px;
	}
	
	.footer-middle-wrapper {
		width: 40%;
		float: left;
		margin: 0 auto 50px;
	}
	
	.footer-middle {
		width: 75%;
		margin: 0 auto;
	}
	
	.footer-middle h4 {
		line-height: 18px;
		font-size: 14px;
	}
	
	.footer-middle p {
		line-height: 18px;
		font-size: 12px;
	}
	
	.social {
		width: 28%;
		float: right;
		margin: 0 auto;
	}
	
	.social h4 {
		line-height: 18px;
		font-size: 14px;
	}
}

@media (max-width:700px){
	.item{
		display: inline-block;
		vertical-align: top;
		width:24%;
		margin: 0.5% 0.5% 50px 0.5%;
		padding: 10px;
	}
	
	.info-bottom {
		width: 30%;
		float: left;
		margin: 0 0 50px 2%;
	}
	
	.info-bottom img {
		width: 100%;
	}
	
	.info-bottom p {
		line-height: 15px;
		font-size: 12px;
	}
	
	.footer-middle-wrapper {
		width: 35%;
		float: left;
		margin: 0 auto 50px;
	}
	
	.footer-middle {
		width: 75%;
		margin: 0 auto;
	}
	
	.footer-middle h4 {
		line-height: 18px;
		font-size: 14px;
	}
	
	.footer-middle p {
		line-height: 18px;
		font-size: 12px;
	}
	
	.social {
		width: 33%;
		float: right;
		margin: 0 auto;
	}
	
	.social h4 {
		line-height: 18px;
		font-size: 14px;
	}
}

@media (max-width:650px){
	.item{
		display: inline-block;
		vertical-align: top;
		width:24%;
		margin: 0.5% 0.5% 50px 0.5%;
		padding: 5px;
	}
	
	.google-play-link {
		width: 79%;
	}
	
	.info-bottom {
		width: 25%;
		float: left;
		margin: 0 0 50px 2%;
	}
	
	.info-bottom img {
		width: 100%;
	}
	
	.info-bottom p {
		line-height: 15px;
		font-size: 10px;
	}
	
	.footer-middle-wrapper {
		width: 35%;
		float: left;
		margin: 0 auto 50px;
	}
	
	.footer-middle {
		width: 75%;
		margin: 0 auto;
	}
	
	.footer-middle h4 {
		line-height: 18px;
		font-size: 14px;
	}
	
	.footer-middle p {
		line-height: 18px;
		font-size: 10px;
	}
	
	.social {
		width: 38%;
		float: right;
		margin: 0 auto;
	}
	
	.social h4 {
		line-height: 18px;
		font-size: 14px;
	}
}

@media (max-width:550px){
	.wrapper{
		width:95%;
	}
	
	.logo-top {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 0 30px 0;
	}
	
	h1 {
		font-weight: 400;
		line-height: 26px;
		font-size: 18px;
		width: 90%;
	}
	
	.items{
		width:99%;
		margin: 0 auto 150px;
	}
	
	.item{
		display: inline-block;
		vertical-align: top;
		width:32%;
		margin: 0.5% 0.5% 50px 0.5%;
	}
	
	.item h4 {
		line-height: 22px;
		font-size: 14px;
		margin: 0;
	}
	
	.item p {
		line-height: 16px;
		font-size: 10px;
		margin: 0 0 30px 0;
	}
	
	.google-play-link {
		width: 75%;
	}
	
	.google-play-link img {
		width: 100%;
		margin: 0 0 -20px 10px;
	}
	
	.info-bottom {
		width: 25%;
		float: left;
		margin: 0 0 50px;
	}
	
	.info-bottom img {
		width: 100%;
	}
	
	.info-bottom p {
		line-height: 15px;
		font-size: 9px;
	}
	
	.footer-middle-wrapper {
		width: 25%;
		float: left;
		margin: 0 0 50px 20px;
	}
	
	.footer-middle {
		width: 100%;
		margin: 0 auto;
	}
	
	.footer-middle h4 {
		line-height: 18px;
		font-size: 14px;
	}
	
	.footer-middle p {
		line-height: 18px;
		font-size: 9px;
	}
	
	.social {
		width: 40%;
		float: right;
		margin: 0 auto;
	}
	
	.social h4 {
		line-height: 18px;
		font-size: 14px;
	}
}

@media (max-width:450px){
	.wrapper{
		width:95%;
	}
	
	.logo-top {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 0 30px 0;
	}
	
	h1 {
		font-weight: 400;
		line-height: 26px;
		font-size: 18px;
		width: 90%;
	}
	
	.items{
		width:99%;
		margin: 0 auto 150px;
	}
	
	.item{
		display: inline-block;
		vertical-align: top;
		width:48%;
		margin: 1% 1% 50px 1%;
	}
	
	.item h4 {
		line-height: 22px;
		font-size: 14px;
		margin: 0;
	}
	
	.item p {
		line-height: 16px;
		font-size: 10px;
		margin: 0 0 30px 0;
	}
	
	.google-play-link {
		width: 75%;
	}
	
	.google-play-link img {
		width: 100%;
		margin: 0 0 -20px 10px;
	}
	
	.info-bottom {
		width: 300px;
		float: none;
		margin: 0 auto 50px;
	}
	
	.footer-middle-wrapper {
		width: 300px;
		float: none;
		margin: 0 auto 50px;
	}
	
	.footer-middle {
		width: 300px;
		margin: 0 auto;
	}
	
	.social {
		width: 235px;
		float: none;
		margin: 0 auto;
	}
	
	.info-bottom p {
		line-height: 18px;
		font-size: 12px;
	}
	
	.footer-middle p {
		line-height: 18px;
		font-size: 12px;
	}
}