@import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Ubuntu:300i,500');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300i');
@font-face {
    font-family: "Ubuntu - Light Italic";
    src: url(../fonts/Ubuntu-LightItalic.ttf); 
}
@font-face {
    font-family: "Ubuntu Medium";
    src: url(../fonts/Ubuntu-M.ttf); 
}
body {
	cursor: default;
}

body,h1,p {
	margin: 0;
}
.cleafix {
	clear: both;
	content: '';
	display: table;
}
.wrapper {
	max-width: 1259px;
	width: 100%;
	position: relative;
	margin: 0 auto;
}
/* head */
.head {
	height: 88px;
	line-height: 88px;
	overflow: hidden;
}
.head a {
	float: right;
	text-decoration: none;
	opacity: 0.84;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
}
.one {
	margin-left: 44px; 
}
.two {
	margin-left: 68px;
}
.three {
	margin-left: 33px;
}
.logo {
	margin-top: 26px;
}
/* head */
/* shops */

.shops {
	margin: 0 auto;
	background-color: #54a3da;
	background-image: linear-gradient(to top, rgba(147, 147, 147, 0.15) 0%, rgba(217, 239, 255, 0.15) 44%, rgba(193, 193, 193, 0.15) 100%);
}
.fuel {
	padding-top: 222px;
	max-width: 635px;
	width: 100%;
	height: 110px;
	line-height: 1;
}
.fuel .track {
	white-space: pre;
	margin: 0;
	color: #f7f6f2;
	font-family: Ubuntu;
	font-size: 52px;
	font-weight: 700;
	line-height: 72px;
	text-transform: uppercase;
}
.fuel .monitor {
	color: #ffffff;
	font-family: 'Ubuntu', sans-serif;
	font-size: 24px;
	line-height: 33px;
}
.fuel > .signup {
	padding-top: 40px;
	color: #f7f7f7;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	font-family: "Ubuntu Medium";
}
.fuel > .signup span {
	padding: 13px;
	font-family: "Ubuntu - Bold";
	font-weight: 700;
	background-color: #ffce54;
	border-radius: 5px;
}
.phone {
	position: absolute;
	right: 15px;
	bottom: 0;
	width: 542px;
	height: 751px;
	background: transparent url(../img/phone12.png) no-repeat center;
	margin-top: 92px;
}
.fuel form {
	margin-top: 33px;
}
.fuel form input[type="text"] {
	margin-top: 14px;
	padding: 20px 28px 20px 28px;
	max-width: 365px;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #ffffff;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	border-radius: 5px;	
}
.fuel form input[type="submit"] {
	margin-left: 32px;
	padding: 23px; 
    background-color: #77c344;
    border: 3px solid #77c344;;
    border-radius: 5px;
    margin-bottom: 225px;
    cursor: pointer;
}
/* shops */
/* company */
.company {
	background-color: #f8f8f8;
}
.company .wrapper {
	max-width: 1259px;
	width: 100%;
	margin: 0 auto;
}
.company .wrapper > div {
	display: inline-block;
}
.evernote {
	margin: 59px 122px 56px 45px;
	width: 169px;
	height: 43px;
	background: transparent url(../img/evernote.svg) no-repeat center; 
}
.microsoft {
	margin: 67px 119px 60px 0;
	width: 142px;
	height: 31px;
	background: transparent url(../img/microsoft.svg) no-repeat center; 
}
.google {
	margin: 65px 120px 47px 0;
	width: 131px;
	height: 46px;
	background: transparent url(../img/google.svg) no-repeat center; 
}
.sony {
	margin: 75px 119px 60px 0; 
	width: 132px;
	height: 23px;
	background: transparent url(../img/sony.svg) no-repeat center;
}
.firefox {
	margin: 68px 0 57px 0;
	width: 112px;
	height: 33px;
	background: transparent url(../img/firefox.svg) no-repeat center;
}
/* company */
/* WHY Tank App ? */
.log-why {
	margin-top: 65px;
	text-align: center;
	opacity: 0.85;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 40px;
	font-weight: 500;
	line-height: 133px;
	text-transform: uppercase;
}
.app {
	margin-top: 50px;
	float: left;
	max-width: 501px;
	width: 100%;
}
.app div div div {
	float: left;
}
.app div div h2 {
	float: left;
	color: #2d394c;
    font-family: Ubuntu;
    font-size: 22px;
    font-weight: 500;
}
.r-top {
	max-width: 387px;
	width: 100%;
}
.r-img {
	margin-left: 15px;
	width: 49px;
	height: 31px;
	background: transparent url(../img/check.svg) no-repeat center;
}
.platform {
	margin: 7px 0 4px 14px;
}
.app-text {
	padding-left: 18px; 
	color: #9499a2;
	font-family: "Open Sans";
	font-size: 14px;
	line-height: 22px;
	white-space: pre-wrap;
}
/* 2 */
.c-top {
	max-width: 422px;
	width: 100%;
}
.c-img {
	margin-top: 14px;
	width: 52px;
	height: 46px;
	background: transparent url(../img/clock.svg) no-repeat center;
}
.everything {
	margin: 28px 0 4px 26px;
}
/* 3 */
.s-img {
	margin-top: 14px;
	width: 53px;
	height: 36px;
	background: transparent url(../img/support.svg) no-repeat center;
}
.rapid {
	margin: 15px 0 4px 19px;
}
/* 4 */
.t-img {
	margin-top: 14px;
	margin-left: 11px;
	width: 38px;
	height: 52px;
	background: transparent url(../img/tons.svg) no-repeat center;
}
.features {
	margin: 29px 0 4px 24px;
}
.pc {
	padding-bottom: 123px;
	margin-top: -62px;
	float: right;
	max-width: 756px;
	width: 100%;
	height: 696px;
	background: transparent url(../img/pc2.png) no-repeat center;
}

/* WHY Tank App ? */
.diffrent {
	background: #f6f6f7 url(../img/bg.png) no-repeat right;
}
.log-defferent {
	padding-top: 157px;
	text-align: center;
	opacity: 0.9;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 40px;
	font-weight: 500;
	text-transform: uppercase;
}
.works {
	margin: 158px 0 0 0;
	max-width: 729px;
	width: 100%;
}
.works .img-wokrs {
	float: left;
	width: 63px;
	height: 42px;
	background: transparent url(../img/work.png) no-repeat center;
}
.device {
	display: inline;
	line-height: 1.5;
	opacity: 0.88;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 28px;
	margin-left: 14px;
}
.works-text {
	white-space: pre;
	margin-top: 28px;
	opacity: 0.89;
	color: #5a626e;
	font-family: "Open Sans";
	font-size: 16px;
	font-weight: 400;
	line-height: 32px;
}
.next {
	max-width: 210px;
	width: 100%;
	margin: 0 auto;
}
.next > a {
	padding: 17px;
	opacity: 0.27;
	color: #2d394c;
	font-family: Ubuntu;
	font-size: 15px;
	font-weight: 500;
	line-height: 127.46px;
	text-decoration: none;
}
.next > a:hover {
	border-radius: 50%;
	border: 2px solid #64a4d7;
	background-color: #64a4d7;
}
/* save */
.time {
	margin-top: 147px;
	text-align: center;
	color: #5a626e;
	font-family: Ubuntu;
	font-size: 40px;
	font-weight: 500;
	line-height: 32px;
	text-transform: uppercase;
}
.monitoring {
	margin-top: 40px;
	text-align: center;
	color: #5a626e;
	font-family: "Ubuntu - Light Italic";
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
}
.inp {
	position: relative;
	margin: 63px auto 104px auto;
	max-width: 857px;
	width: 100%;
	height: 70px;
}
.inp > .sms {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 30px;
	height: 23px;
	background: transparent url(../img/sms.svg) no-repeat center;
}
.save-inp {
	float: left;
	max-width: 551px;
	width: 100%;
	height: 68px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background-color: #ffffff;
	opacity: 0.28;
	color: #5a626e;
	font-family: "Open Sans";
	font-size: 21px;
	font-weight: 300;
	line-height: 34.1px;
	padding-left: 79px;
	outline: none;
}
button {
	float: right;
	border: none;
	color: #ffffff;
	font-family: Ubuntu;
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
	text-transform: uppercase;
	width: 190px;
	height: 68px;
	background-color: #77c344;
	outline: none;
	cursor: pointer;
}
/* save */
/* footer */
footer {
	background: #f9f9f9;
}
/* .icon {
	position: absolute;
	top: 5px;
	right: 0;
	height: 28px;
	
} */
.icon {
	float: right;
	width: 150px;
	display: block;
	
}
.icon > div {
	display: inline-block;
}
.icon > div:first-child {
	border-left: 1px solid #777;
}

.g {
	padding-left: 37px;
	width: 20px;
	height: 22px;
	background: transparent url(../img/g.png) no-repeat center;
}
.f {
	padding-left: 28px;
	width: 12px;
	height: 22px;
	background: transparent url(../img/f.png) no-repeat center;
}
.t {
	padding-left: 21px;
	width: 20px;
	height: 18px;
	background: transparent url(../img/t.png) no-repeat center;
}

.foot {
	position: relative;
	max-width: 1187px;
	width: 100%;
	margin:0 auto;
	line-height: 140px;
}
.a-foot {
	float: right;
	margin-right: 15px;
	margin-top: -2px;
}
.a-foot > a {
	padding-left: 37px;
	text-decoration: none;
	opacity: 0.9;
	color: #4d5664;
	font-family: Ubuntu;
	font-size: 14px;
	font-weight: 300;
	line-height: 28.97px;
	text-transform: uppercase;
}
.tank {
	float: left;
	padding-top: 56px;
	padding-bottom: 56px;
}
.icon > div > a {
	float: right;
	display: block;
	height: 100%;
	width: 100%;
}
.adapt {
	width: 100px;
	height: 100%;
	position: fixed;
	right: -100px;
	display: block;
	background-color: lightgray;
	z-index: 3;
	transition: 1s;
}
.adapt > a {
	width: 100%;
	display: inline-block;
	text-align: center;
}
.adapt > a:last-child {
	font-size: 14px;
}
.adapt:before {
	display: none;
	content: '';
	position: absolute;
	font-size: 20px;
	top: 30%;
	left: -50px;
	width: 50px;
	height: 50px;
	background: transparent url('../img/left.svg') no-repeat center;
}
.adapt:hover {
	right: 0;
}
@media screen and (max-width: 1292px) {
	.icon {
		margin-right: 2%;
	}
}
@media screen and (max-width: 1291px) {
	.head a:first-child,
	.icon > div:last-child,
	.firefox {
		margin-right: 2%;
	}
	.logo,
	.fuel,
	.tank {
		margin-left: 2%;
	}
	
	.phone {
		right: 2%;
	}
	.why {
		padding-bottom: 25px;
	}
	.pc,
	.app {
		float: none;
		margin: 10px auto;
	}
	.works {
		margin: 158px auto 20px auto;
	}
	.works .img-wokrs {
		float: none;
		margin: 0 auto;
	}
	.device {
		text-align: center;
		margin: 0;
		display: block;
	}
}
@media screen and (max-width: 1253px) {
	.company > .wrapper {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 1140px) {
	.phone {
		opacity: 0.1;
	}
}
@media screen and (max-width: 915px) {
	.fuel {
		margin: 0 auto;
		text-align: center;
	}
}
@media screen and (max-width: 903px) {
	.a-foot {
		display: none;
	}
	.adapt:before {
		display: block;
	}
	.foot {
		line-height: 15px;
	}
	.tank {
		float: none;
	}
	.icon {
		float: none;
	}
	.icon > div:first-child {
		border: 0;
	}
	.a-foot {
		float: right;
    	margin-right: 15px;
    	margin-top: -60px;
	}
	.works-text {
		white-space: normal;
		padding: 0 2%; 
	}
	.icon {
		float: right;
		padding-top: 56px;
	}
}
@media screen and (max-width: 822px) {
	.save-inp {
		float: none;
		max-width: 86%;
		width: 100%;
		padding-left: 14%;
	}
	button {
		max-width: 822px;
		width: 100%;
	}
}
@media screen and (max-width: 727px) {

	.head > a {
		display: none;
	}
}
@media screen and (max-width: 626px) {
	.company .wrapper > div {
		width: 100%;
		margin: 25px auto;
	}
}

@media screen and (max-width: 471px) {
	.fuel .track {
		font-size: 30px;
	}
	.fuel form input[type="text"] {
		max-width: 250px;
	}
}

@media screen and (max-width: 360px) {
	.fuel .track {
		font-size: 30px;
		line-height: 30px;
	}
        .app div div h2 {
                font-size: 18px;
        }
        .time {
                margin-top: 90px;
        }
        .fuel form input[type="submit"] {
                 margin-top: 25px;
        }
        button  {
                margin-top: 25px;
       }
	.fuel form input[type="text"] {
		max-width: 250px;
	}
	.company .wrapper > div {
		width: 100%;
		margin: 25px auto;
	}
}
@media screen and (max-width: 342px) {
	.tank {
		padding-bottom: 0;
	}
	.icon {
		float: left;
	}
}
@media screen and (max-width: 320px) {
	.icon {
		float: left;
	}
}