/*!
Theme Name: tom
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tom
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

:root {
	--text-color: #0f0f0f;
	--color-blue: #0000ff;
	--color-dark-blue: #0909ec;
	--color-green: #0ff1ce;
	--color-white: #ffffff;
	--color-grey-50: #f7f7ff;
	--color-grey-100: #ececf6;
	--color-grey-300: #dfdfe7;
	--color-black-500: #262729;
	--color-black-700: #18191a;
	--color-black-900: #0f0f0f;
	--scale-ratio: 1.25;
	--scale-05: calc(var(--scale-0)/var(--scale-ratio));
	--scale-0: 1rem;
	--scale-1: calc(var(--scale-0)*var(--scale-ratio));
	--scale-2: calc(var(--scale-1)*var(--scale-ratio));
	--scale-3: calc(var(--scale-2)*var(--scale-ratio));
	--scale-4: calc(var(--scale-3)*var(--scale-ratio));
	--scale-5: calc(var(--scale-4)*var(--scale-ratio));
	--scale-6: calc(var(--scale-5)*var(--scale-ratio));
}

html {
	box-sizing: border-box;
}

body, html {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	color: var(--text-color);
	font-size: var(--scale-0);
}

*, *::before, *::after {
	box-sizing: inherit;
}

p {

}

a {
	color: inherit;
	font-family: inherit;
	text-decoration: none;
}

/* Header */

.header {
	position: fixed;
	display: flex;
	width: 100%;
	height: 110px;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 100;
	top: 0;
	transition: all 0.3s ease-out;
	/* background-color: var(--color-white); */
}

.header.fixed {
	height: 80px;
}

.header__fixed-header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 80px;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-grey-100);
	transform: translateY(-100%);
	transition: all 0.3s ease-out;
}

.header.fixed .header__fixed-header {
	transform: translateY(0%);
}

.header__logo-container {
	position: relative;
	display: block;
	height: 35px;
	width: auto;
}

.header__logo {
	position: relative;
	display: block;
	height: 100%;
}

.header__navigation-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
	left: 50%;
	transform: translateX(-50%);
}

.header__navigation {
	position: relative;
	display: block;
}

.header__navigation-menu {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.header__navigation-menu-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	margin: 0 15px;
	padding: 0;
	height: 40px;
}

.header__navigation-menu-item:hover > .header__navigation-sub-menu {
	opacity: 1;
	pointer-events: all;
	top: 40px;
	transition: all 0.2s ease-in-out;
}

.header__navigation-sub-menu {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 200px;
	top: 30px;
	margin: 0;
	padding: 10px 0;
	border-radius: 15px;
	background-color: var(--color-blue);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out, top 0.1s 0.3s linear;
}

.header__navigation-sub-menu-item {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	width: 100%;
	height: 40px;
}

.header__navigation-link {
	color: var(--color-blue);
	font-weight: 500;
}

.header__navigation-sub-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-weight: 500;
	width: 100%;
	height: 100%;
}

.header__navigation-sub-link:hover {
	background-color: var(--color-dark-blue);
}

.header__buttons-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__signup-button-container {
	position: relative;
	display: block;
}

.header__signup-button {
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-weight: 500;
	padding: 0 35px;
	border-radius: 18px;
}

.header__signup-button:hover {
	background-color: var(--color-dark-blue);
}

.header__login-button-container {
	position: relative;
	display: block;
	margin-right: 20px;
}

.header__login-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__login-button-copy {
	color: var(--color-blue);
	font-weight: 500;
}

#padlock {
	position: relative;
	display: block;
	width: 20px;
	height: 30px;
	margin: 0 5px 0 0;
}

#padlock_bolt {
	transition: all 0.3s;
}

.header__login-button-container:hover #padlock_bolt {
	transform: translateY(-5px);
}

/* Sections */

.section {
	position: relative;
	display: block;
	width: 100%;
	padding: 150px 0;
	color: var(--color-blue);
}

.section--grey {
	background-color: var(--color-grey-50);
	color: var(--color-blue);
}

.section--dark-grey {
	background-color: var(--color-grey-100);
	color: var(--color-blue);
}

.section--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.section__container {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1500px;
	padding: 0 20px;
	margin: 0 auto;
}

.section__container--centered {
	display: flex;
	justify-content: center;
}

.section__container--columns {
	display: flex;
	justify-content: space-between;
}

.section__title-container {
	text-align: center;
	width: 100%;
	margin-bottom: 30px;
}

.section__title {
	margin: 0;
}

.section__column {
	position: relative;
	display: block;
}

.section__column--40 {
	width: 40%;
}

.section__column--50 {
	width: 50%;
}

.section__column--60 {
	width: 60%;
}

.section__column--hero {
	height: 100%;
	width: 47%;
}

.section__column--centered {
	width: 50%;
	text-align: center;
}

.section__column--image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.section__header {
	margin: 0 0 20px 0;
	font-weight: 700;
	font-size: var(--scale-2);
	line-height: 1.7;

}

.section__paragraph {
	margin: 0 0 20px 0;
	font-weight: 300;
	font-size: var(--scale-1);
	line-height: 1.7;
}

.section__paragraph:last-of-type {
	margin: 0;
}

.section__feature-icon-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 20px;
	box-shadow: 0px 1px 15px 0px rgba(223, 223, 231, 0.8);
	top: -80px;
}

.section__feature-icon {
	position: relative;
	display: block;
	width: 30px;
}

.section__content-container ul li, .section__content-container ol li {
	margin-bottom: 4px;
}

/* Hero */

.section--hero {
	position: relative;
	height: auto;
	padding: 110px 0;
	overflow: hidden;
}

.section__container--hero {
	align-items: center;
}

.hero__title {
	margin: 0 0 20px 0;
	font-size: var(--scale-6);
	font-weight: 900;
	color: var(--color-blue);
}

.hero__caption {
	margin: 0 0 20px 0;
	font-weight: 300;
	font-size: var(--scale-1);
	line-height: 1.7;
	color: var(--color-blue);
}

.hero__ipad-illustration {
	position: relative;
	left: 0;
	width: 53vw;
}

.section__hero-background {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.section__hero-background-squares {
	display: block;
	height: 100%;
}

@keyframes floaty-down {
	0% {transform: translateY(0px);}
	50% {transform: translateY(50px);}
	100% {transform: translateY(0px);}
}

@keyframes floaty-up {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-50px);}
	100% {transform: translateY(0px);}
}

.animate-square-up {
	animation-name: floaty-up;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: ease-in-out;
}

.animate-square-down {
	animation-name: floaty-down;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: ease-in-out;
}

@keyframes check-in-out {
	0% {opacity: 1;}
	7% {opacity: 1;}
	10% {opacity: 0.3;}
	57% {opacity: 0.3;}
	60% {opacity: 1;}
}

@keyframes check-in-out-alt {
	0% {opacity: 0.3;}
	7% {opacity: 0.3;}
	10% {opacity: 1;}
	57% {opacity: 1;}
	60% {opacity: 0.3;}
}

#user1 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#user2 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 6s;
	opacity: 0.3;
}

#user3 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 18s;
	opacity: 0.3;
}

#user4 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 27s;
}

#user5 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 15s;
	opacity: 0.3;
}

#user6 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 24s;
}

#user7 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 3s;
}

#user8 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 12s;
	opacity: 0.3;
}

#user9 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 21s;
	opacity: 0.3;
}

#user10 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 30s;
}

#user11 {
	animation-name: check-in-out;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 9s;
}

#user12 {
	animation-name: check-in-out-alt;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 33s;
	opacity: 0.3;
}

.hero__download-container {

}

.hero__download-list {
	position: relative;
	display: flex;
}

.hero__download-button {
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-weight: 500;
	padding: 0 25px;
	border-radius: 18px;
	margin: 0 10px 0 0;
}

.hero__download-button:hover {
	background-color: var(--color-dark-blue);
}

.hero_download-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
}

/* Prices */

.section--prices {

}

.section__prices-column {
	position: relative;
	display: inline-block;
	width: 30%;
}

.section__prices-image-container {

}

.section__prices-image {

}

.section__prices-title-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 0 5px 0;
}

.section__prices-title {
	position: relative;
	display: block;
	margin: 0 0 15px 0;
}

.section__prices-price-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 0 25px 0;
}

.section__prices-price {
	font-size: var(--scale-6);
	margin: 0;
}

.section__prices-list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
}

.section__prices-list-item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 20px;
}

.section__prices-list-item-icon {
	position: relative;
	display: flex;
	width: 18px;
	height: 18px;
	border-radius: 18px;
}

.section__prices-list-item-icon.list-item-tick {
	background-color: var(--color-grey-50);
	background-image: url('http://tomapp.wpengine.com/wp-content/uploads/2020/02/tick_blue.svg');
	background-position: center;
	background-size: 10px 10px;
	background-repeat: no-repeat;
}

.section__prices-list-item-icon.list-item-cross {
	background-color: var(--color-blue);
	background-image: url('http://tomapp.wpengine.com/wp-content/uploads/2020/02/cross.svg');
	background-position: center;
	background-size: 10px 10px;
	background-repeat: no-repeat;
}

.section__prices-list-item-copy {
	position: relative;
	width: calc(100% - 30px);
	margin: 0;
}

/* How It Works */

.section__hiw-column {
	position: relative;
	display: inline-block;
	width: 30%;
}

.section__hiw-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 40px 50px;
	border-radius: 20px;
	text-align: center;
	background-color: var(--color-white);
}

.section__hiw-copy-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section__hiw-title {
	margin: 0 0 20px 0;
}

.section__hiw-copy {
	margin: 0;
	line-height: 1.5;
}

.section__hiw-link {
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-weight: 500;
	padding: 0 35px;
	border-radius: 18px;
	margin: 20px 0 0;
}

.section__hiw-link:hover {
	background-color: var(--color-dark-blue);
}

.section__hiw-image-container {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0 0 20px;
}

.section__hiw-image {
	position: relative;
	display: block;
	width: 100%;
}

/* Footer */

.section--footer {
	background-color: var(--color-blue);
}

.section__container--footer {
	margin-bottom: 50px;
}

.footer__column {
	position: relative;
	display: block;
	width: auto;
}

.footer__logo-container {
	position: relative;
	display: block;
	height: 35px;
	width: auto;
}

.footer__logo {
	position: relative;
	display: block;
	height: 100%;
}

.footer__column-list {
	text-align: right;
}

.footer__column-list-item {
	font-weight: 500;
	color: var(--color-white);
}

.footer__sub-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1500px;
	padding: 0 20px;
	margin: 0 auto;
	height: 20px;
}

.footer__sub-column {
	position: relative;
	display: flex;
}

.footer__copyright-text {
	color: var(--color-white);
	margin: 0 20px 0 0;
	font-size: var(--scale-05);
	opacity: 0.7;
}

.footer__social-list {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer__social-icon-container {
	position: relative;
	display: flex;
	margin-left: 20px;
}

.footer__social-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.footer__social-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

/* Prices Table */

.prices-table {
	position: relative;
	width: 80%;
	margin: 0 auto;
	border-collapse: collapse;
}

.prices-table__row {
	height: 50px;
}

.prices-table__data {
	text-align: center;
	border: var(--color-grey-100) 1px solid;
}

.prices-table__feature {
	border: var(--color-grey-100) 1px solid;
	background-color: var(--color-grey-50);
	padding: 0 15px;
}

/* Sign Up */

.signup-form__container {
	position: relative;
	display: block;
	min-width: 300px;
	margin: 30px auto 0;
}

.form {
	text-align: left;
}

.form__row {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.form__input-wrapper {
	position: relative;
	display: block;
	width: 48.5%;
}

.form__label {
	display: block;
	width: 100%;
	font-size: var(--scale-05);
}

.form__label--checkbox {
	width: calc(100% - 30px)
}

.form__label--link {
	text-decoration: underline;
}

.form__input {
	display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--color-grey-100);
  margin: 15px 0 25px;
}

.form__input--checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
  appearance: none;
  -webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 5px;
  border: 1px solid var(--color-grey-100);
	background-color: var(--color-white);
	cursor: pointer;
}

.form__input--checkbox:checked {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	background-image: url('http://tomapp.wpengine.com/wp-content/uploads/2020/02/tick.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.form__input[type="submit"] {
	background-color: var(--color-blue);
	color: var(--color-white);
	padding: 20px;
  border-radius: 20px;
	max-width: 300px;
	margin: 20px auto 0;
}

.section__container-signup-flow {
	background-color: #f0f;
}

/* Legal Template*/

.section__container--legal {
	width: 50%;
	display: block;
}

/* FAQs */

.faqs__container {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-right: var(--color-grey-100) 1px solid;
	border-left: var(--color-grey-100) 1px solid;
	border-bottom: var(--color-grey-100) 1px solid;
}

.faqs__block {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.faqs__question-container {
	position: relative;
	display: block;
	width: 100%;
	border-top: var(--color-grey-100) 1px solid;
	background-color: var(--color-grey-50);
	padding: 20px;
}

.faqs__question {
	margin: 0;
}

.faqs__answer-container {
	position: relative;
	display: none;
	width: 100%;
	border-top: var(--color-grey-100) 1px solid;
	padding: 20px;
}

.faqs__answer-container:last-of-type {
	border-bottom: none;
}

.faqs__answer {
	margin: 0;
}

@media only screen and (max-width:1500px) and (min-width:1000px) {
	.section__container {
		position: relative;
		display: flex;
		width: 100%;
		max-width: 1500px;
		padding: 0 50px;
		margin: 0 auto;
		justify-content: space-between;
	}

	.section__container--footer {
		margin-bottom: 50px;
	}

	.section__container--centered {
		justify-content: center;
	}

	.section__container--legal {
		width: 80%;
		display: block;
	}

	.footer__sub-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 1500px;
		padding: 0 50px;
		margin: 0 auto;
		height: 20px;
	}
}

@media only screen and (max-width:999px) {
	.hero__title {
		margin: 0 0 20px 0;
		font-size: var(--scale-4);
		font-weight: 900;
		color: var(--color-blue);
	}

	.hero__caption {
		margin: 0 0 20px 0;
		font-weight: 300;
		font-size: var(--scale-1);
		line-height: 1.7;
		color: var(--color-blue);
	}

	.section__column--hero-container {
		display: none;
	}

	.section__container {
		position: relative;
		display: flex;
		width: 100%;
		max-width: 1500px;
		padding: 0 50px;
		margin: 0 auto;
		justify-content: space-between;
	}

	.section__container--footer {
		margin-bottom: 50px;
	}

	.section__container--legal {
		display: block;
	}

	.section__column--hero {
		width: 100%;
	}

	.section__column--centered {
		width: 100%;
		text-align: center;
	}

	.section__hero-background {
		width: auto;
		height: 100%;
	}

	.footer__sub-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 1500px;
		padding: 0 50px;
		margin: 0 auto;
		height: 20px;
	}
}