*{
	margin:0;
	padding:0;
	border:0;
	font-size: 100%;
	outline: 0;
	vertical-align: baseline;
	}

:root{
	--white:#FFFFFF;

	--gray:#A2AAB2;
	--bkgnd:#f5f5f5;
	
	--bluehov:#4475DD;
	--blue:#678FEA;

	--rowhover:#EBF4FF;
	--orange:#ff8900;

	--green:#56b851;
	--black:#343e55;

	--line:#CECED0;
	--line2:#EDEDED;
	--rowhov:#f6f8fa;
	}

html{
	font-family: 'Roboto', sans-serif;
	}

	
body{
	display:flex;
	flex-direction: column;
	-webkit-text-size-adjust: 100%;
	height:100vh;
	color:var(--black);
	background-image: url('../img/blueback.png');
	background-repeat: repeat-x;
	background-color: var(--white);
	}

	
main{
	padding:0 16px;
	}

.content{
	}

webtimeclock{
	flex:1 1 auto;
	}

ul{
	list-style: none;
	margin:0;
	padding:0;
	}
a{
	text-decoration: none;
	color:var(--black);
	}
a:hover{
	text-decoration:none;
	}


/* table =================== */

table {
	width: 100%;
 	border-collapse: collapse;
 	border-spacing: 0;
	font-size: 14px;
	color:var(--black);
	}

td{
	padding:12px;
	}
	
tbody tr:nth-child(even) {
	background-color: #f7f7f7;
	}


@media only screen and (min-width: 768px){
table {
	font-size: 20px;
	}
}

	


/* header =================== */

header{
	flex:0 0 61px;
	display:flex;
	height:60px;
	padding:16px 16px;
	margin-bottom: 20px;
	}
.header_logo{
	display:block;
	flex:0 0 237px;
	height:61px;
	width:237px;
	background-image: url('../svg/webtimeclock_wwwlogo.svg');
	background-repeat: no-repeat;
	background-position: left center;
/* 	transition: 0.3s; */
	}
.header_links{
	flex:1 1 auto;
	text-align: right;
	}
.header_link{
	display:none;
	}
.header_btn{
	display:none;
	}

.header_menu{
	display:inline-block;
	line-height: 48px;
	width:48px;
	background-image: url('../svg/icon-hamburger.svg');
	background-repeat: no-repeat;
	background-position: center center;
	}


@media only screen and (min-width: 768px){
header{
	padding:16px 30px;
	margin-bottom: 60px;
	}
.header_link{
	display:inline-block;
	line-height: 44px;
	padding:0 10px;
	margin-left: 8px;
	}
.header_link:hover{
	text-decoration: underline;
	}
.header_btn{
	display:inline-block;
	background-color: var(--black);
	color:var(--white);
	padding:5px 20px 6px 20px;
	border-radius: 30px;
	margin-left: 10px;
	}
.header_btn:hover{
	background-color: var(--blue);
	}
.header_menu{
	display:none;
	}
}



/* footer =================== */

footer{
	flex:0 0 203px;
	background-color: #f9f9f9;
	padding:40px 20px;
	}

footer .copywrite{
	text-align: left;
	}
	

.footer_logo{
	display:block;
	flex:0 0 189px;
	height:50px;
	width:189px;
	background-image: url('../svg/webtimeclock_logo.svg');
	background-repeat: no-repeat;
	background-position: left center;
	margin-right: 50px;
	margin-bottom: 10px;
	}

section.footer{
	display:block;
	margin:0 auto;
	max-width: 1040px;
	background-color: #f9f9f9;
	font-size: 20px;
	line-height: 24px;
	}


section.footer .col{
	width:100%;
	margin-bottom: 24px;
	}
section.footer .col div{
	display:block;
	font-weight: 700;
	padding:8px 0;
	border-bottom: 1px solid var(--line);
	}
section.footer .col a{
	display:block;
	color:var(--blue);
	padding:8px 0;
	border-bottom: 1px solid var(--line);
	}
section.footer .col a:hover{
	text-decoration: underline;
	}



section.footer .col2{
	width:100%;
	margin-bottom: 24px;
	}
section.footer .col2 div{
	display:block;
	font-weight: 700;
	padding:8px 0;
	border-bottom: 1px solid var(--line);
	}
section.footer .col2 a{
	display:block;
	color:var(--blue);
	padding:8px 0;
	border-bottom: 1px solid var(--line);
	}
section.footer .col2 a:hover{
	text-decoration: underline;
	}





@media only screen and (min-width: 1080px){
section.footer .col{
	width:180px;
	margin-bottom: 24px;
	}
section.footer .col div{
	display:block;
	font-weight: 700;
	padding:5px 0;
	border-bottom: none;
	}
section.footer .col a{
	display:block;
	color:var(--blue);
	padding:5px 0;
	border-bottom: none;
	}
section.footer .col a:hover{
	text-decoration: underline;
	}



section.footer .col2{
	width:280px;
	margin-bottom: 24px;
	}
section.footer .col2 div{
	display:block;
	font-weight: 700;
	padding:5px 0;
	border-bottom: none;
	}
section.footer .col2 a{
	display:block;
	color:var(--blue);
	padding:5px 0;
	border-bottom: none;
	}
section.footer .col2 a:hover{
	text-decoration: underline;
	}


section.footer{
	display:flex;
	}
footer .copywrite{
	text-align: center;
	}
}


/* menu =================== */

ul.menu{
	list-style: none;
	margin:0 auto 0 auto;
	max-width: 400px;
	padding:0 0 50px 0;
	}
ul.menu li{
	border-bottom:1px solid var(--line);
	margin:0;
	padding:0;
	}

ul.menu li a{
	display:block;
	font-size: 24px;
	line-height: 50px;
	padding-left: 10px;
	color:var(--blue);
	}
	
	

/* hero =================== */

section.hero{
	margin:0 auto 50px auto;
	max-width: 1040px;
	}
section.hero h1{
	font-size: 50px;
	line-height: 54px;
	text-align: center;
	font-weight: 900;
	letter-spacing: -2px;
	margin-bottom: 16px;
	}
	
section.hero h2{
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	font-weight: 400;
	}


section.hero .cta{
	display:block;
	margin:26px auto 20px auto;
	width:250px;
	}
.sign_up_with_google_btn{
	display:block;
	height:44px;
	width:250px;
	background-image: url('../svg/sign_up_with_google.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-color: var(--blue);
	margin-right: 0;
	border-radius: 5px;
/* 	transition: 0.3s; */
	cursor:pointer;
	margin-bottom: 15px;
	}
.sign_up_with_google_btn:hover{
	background-color: var(--bluehov);
	}
	
.sign_up_with_email_btn{
	display:block;
	text-align: center;
	line-height: 44px;
	font-weight: 400;
	font-size: 18px;
	height:44px;
	width:250px;
	background-color: var(--blue);
	color:#ffffff;
	text-decoration: none;
	margin-left: 0;
	border-radius: 5px;
/* 	transition: 0.3s; */
	cursor:pointer;
	}
.sign_up_with_email_btn:hover{
	background-color: var(--bluehov);
	}


section.hero .signup_text{
	font-size: 14px;
	text-align: center;
	}
	

@media only screen and (min-width: 768px){
section.hero{
	margin:0 auto 60px auto;
	}
section.hero h1{
	font-size: 77px;
	line-height: 75px;
	margin-bottom: 16px;
	}
section.hero h2{
	font-size: 28px;
	line-height: 36px;
	}

section.hero .cta{
	display:flex;
	margin:60px auto 20px auto;
	width:512px;
	}
.sign_up_with_google_btn{
	margin-right: 6px;
	margin-bottom: 0;
	}
.sign_up_with_email_btn{
	margin-left: 6px;
	}
}



/* text =================== */

section.text{
	margin:0 auto;
	max-width: 1040px;
	}
section.text h3{
	text-align: center;
	font-size: 30px;
	line-height: 30px;
	font-weight: 900;
	margin-bottom: 16px;
	letter-spacing: -1px;
	}
	
section.text ul{
	list-style:disc;
	margin:0;
	padding:0;
	padding-left: 36px;
	}
	
section.text ol{
	list-style:decimal;
	margin:0;
	padding:0;
	padding-left: 36px;
	}

section.text li{
	font-size:20px;
	line-height: 28px;
	margin-bottom: 28px;
	}

section.text p{
	font-size:20px;
	line-height: 28px;
	margin-bottom: 30px;
	}

section.text p a{
	color:var(--bluehov);
	}

section.text p a:hover{
	text-decoration: underline;
	}



section.divider{
	margin:50px auto 40px auto;
	border-top:1px solid var(--blue);
	max-width: 360px;
	}

@media only screen and (min-width: 768px){
section.text h3{
	font-size: 50px;
	line-height: 52px;
	margin-bottom: 16px;
	}
section.text li{
	font-size:26px;
	line-height: 34px;
	margin-bottom: 30px;
	}
section.text p{
	font-size:26px;
	line-height: 34px;
	margin-bottom: 34px;
	}
section.divider{
	margin:50px auto 40px auto;
	border-top:1px solid var(--blue);
	max-width: 680px;
	}
}







/* overview =================== */

section.overview{
	margin:0 auto 40px auto;
	max-width: 340px;
	text-align: center;
	}
section.overview h3{
	text-align: center;
	font-size: 50px;
	font-weight: 900;
	margin-bottom: 16px;
	letter-spacing: -1px;
	}
section.overview div{
	width:340px;
	height: 179px;
	}

@media only screen and (min-width: 768px){
section.overview{
	max-width: 768px;
	}
section.overview div{
	width:768px;
	height: 405px;
	}
}


@media only screen and (min-width: 1100px){
section.overview{
	max-width: 1040px;
	}
section.overview div{
	width:1040px;
	height: 549px;
	}
}

@media only screen and (min-width: 1366px){
section.overview{
	max-width: 1277px;
	}
section.overview div{
	width:1277px;
	height: 674px;
	}
}
	


/* screenshot =================== */

.screenshot{
	margin:0 auto;
	display:block;
	max-width:1277px;
	padding:8px;
	border:1px solid var(--blue);
	border-radius:10px;
	box-shadow: 1px 6px 20px rgba(0, 0, 0, 0.2)  ;
	}
section.screen{
	margin:0 auto 80px auto;
	max-width: 1277px;
	}
section.screen h3{
	text-align: center;
	font-size: 30px;
	line-height: 30px;
	font-weight: 900;
	margin-bottom: 12px;
	letter-spacing: -1px;
	}
	
.screenshot2{
	margin:0 auto;
	display:block;
	max-width:1277px;
	padding:8px;
	border:1px solid var(--blue);
	background-color: #d9d9d9;
	border-radius:10px;
	box-shadow: 1px 6px 20px rgba(0, 0, 0, 0.2)  ;
	}

@media only screen and (min-width: 768px){
section.screen h3{
	font-size: 50px;
	line-height: 52px;
	margin-bottom: 16px;
	}
}
	



/* grid boxes =================== */

.grid_boxes {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    max-width: 1100px;
    margin-bottom: 12px;
	}
	
.grid_box{
	display:flex;
	width:415px;
	height:130px;
	background-color: #E6EEFF;
	border-radius:10px;
	}
	
.grid_box .left{
	flex:0 0 50px;
	padding:34px 20px;
	}

.grid_box .left .icon{
	width:50px;
	height:50px;
	background-color: var(--white);
	border-radius: 25px;
	}

.grid_box .right{
	flex:0 0 295px;
	padding:20px 10px;
	}
.grid_box .right p{
	font-size: 24px;
	}


	
.check{
	display:block;
	background-image: url('../svg/check.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:48px;
	height:48px;
	}










section.grid{
	margin:0 auto 70px auto;
	max-width: 300px;
	}
	
section.grid h3{
	text-align: center;
	font-size: 30px;
	line-height: 30px;
	font-weight: 900;
	margin-bottom: 16px;
	letter-spacing: -1px;
	}
	
@media only screen and (min-width: 768px){
section.grid h3{
	font-size: 50px;
	line-height: 52px;
	margin-bottom: 16px;
	}
}

.ind_boxes {
    display: grid;
    grid-template-columns:1fr;
    grid-column-gap: 0;
    grid-row-gap: 20px;
    max-width: 400px;
    margin-bottom: 20px;
	}
	
.ind_box{
	display:flex;
	width:300px;
	height:90px;
	border:1px solid #E6EEFF;
	background-color: #E6EEFF;
	border-radius:10px;
	}

a.ind_box:hover{
	border:1px solid var(--blue);
	}
	
.ind_box .left{
	flex:0 0 70px;
	padding:11px 20px;
	}

.ind_box .left .icon{
	width:70px;
	height:70px;
	}

.ind_box .right{
	flex:0 0 auto;
	padding:32px 10px;
	}
.ind_box .right p{
	font-size: 16px;
	}



@media only screen and (min-width: 450px){
section.grid{
	margin:0 auto 70px auto;
	max-width: 415px;
	}
.ind_box{
	width:415px;
	height:90px;
	}
.ind_box .right p{
	font-size: 24px;
	}
}


@media only screen and (min-width: 900px){
section.grid{
	margin:0 auto 70px auto;
	max-width: 850px;
	}
.ind_boxes {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 1100px;
    margin-bottom: 20px;
	}
}

@media only screen and (min-width: 1366px){
section.grid{
	margin:0 auto 70px auto;
	max-width: 1277px;
	}
.ind_boxes {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 1100px;
    margin-bottom: 20px;
	}
}




.medical{
	display:block;
	background-image: url('../svg/icon-medical.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.dental{
	display:block;
	background-image: url('../svg/icon-dental.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.truck{
	display:block;
	background-image: url('../svg/icon-truck.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.hotel{
	display:block;
	background-image: url('../svg/icon-hotel.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.store{
	display:block;
	background-image: url('../svg/icon-store.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}

.restaurant{
	display:block;
	background-image: url('../svg/icon-restaurant.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}


.factory{
	display:block;
	background-image: url('../svg/icon-factory.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}

.construction{
	display:block;
	background-image: url('../svg/icon-construction.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.school{
	display:block;
	background-image: url('../svg/icon-school.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	

.church{
	display:block;
	background-image: url('../svg/icon-church.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.agent{
	display:block;
	background-image: url('../svg/icon-agent.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.bank{
	display:block;
	background-image: url('../svg/icon-bank.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}
	
.done{
	display:block;
	background-image: url('../svg/icon-done.svg');
	background-repeat: no-repeat;
	background-position: left center;
	width:70px;
	height:70px;
	}




/* pricing =================== */

section.pricing{
	margin:0 auto;
    display: grid;
    grid-template-columns:1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
	max-width: 100%;
	margin-bottom: 80px;
	}
	
.price_box{
	width:100%;
	border:1px solid var(--blue);
	border-radius:20px;
	text-align: center;
	padding:16px 0;
	box-shadow: 1px 6px 20px rgba(0, 0, 0, 0.2)  ;
	}

.price_box h4{
	font-size: 24px;
	font-weight: 700;
	}
.price_box p{
	font-size: 24px;
	margin-bottom: 4px;
	}
.price_box div{
	font-size: 120px;
	line-height: 120px;
	color:var(--blue);
	margin:0;
	padding:0;
	}
.price_box div span{
	display:inline-block;
	font-size: 50px;
	line-height: 110px;
	vertical-align: top;
	}
	
@media only screen and (min-width: 560px){
section.pricing{
	margin:0 auto;
    display: grid;
    grid-template-columns:1fr;
    grid-column-gap: 20px;
	max-width: 510px;
	margin-bottom: 80px;
	}
.price_box{
	width:510px;
	}
}

@media only screen and (min-width: 1080px){
section.pricing{
	margin:0 auto;
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap: 20px;
	max-width: 1040px;
	margin-bottom: 80px;
	}
}



/* article =================== */

section.article{
	margin:0 auto 30px auto;
	max-width: 1040px;
	}
section.article h1{
	font-size: 50px;
	line-height: 54px;
	text-align: center;
	font-weight: 900;
	letter-spacing: -2px;
	margin-bottom: 6px;
	}
	
section.article h2{
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	font-weight: 400;
	}


ul.breadcrumb{
	display:block;
	list-style: none;
	margin:0;
	padding:0;
	font-size:20px;
	line-height: 30px;
	text-align: center;
	}

ul.breadcrumb li{
	display:inline-block;
	}

ul.breadcrumb li+li:before {
	padding: 8px;
	color: var(--black);
	content: "/\00a0";
	}

ul.breadcrumb li a{
	display:inline-block;
	color:var(--blue);
	}
ul.breadcrumb li a:hover{
	text-decoration: underline;
	}

@media only screen and (min-width: 768px){
section.article h1{
	font-size: 77px;
	line-height: 75px;
	margin-bottom: 6px;
	}

}


article{
	margin:0 auto;
	max-width: 740px;
	font-size: 20px;
	line-height: 32px;
	margin-bottom: 100px;
	}
article h2{
	font-size: 26px;
	line-height: 38px;
	font-weight: 700;
	margin-top: 64px;
	}
/*
article h3{
	font-size: 26px;
	line-height: 38px;
	font-weight: 700;
	}
*/
article h3{
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
	}
article h3 a{
	color:var(--black);
	text-decoration: underline;
	}
	
/*
article p{
	font-size: 20px;
	line-height: 32px;
	margin-bottom: 21px;
	}
*/
article p{
	font-size: 20px;
	line-height: 32px;
	margin-bottom: 32px;
	}
article a{
	color:var(--blue);
	}
article a:hover{
	text-decoration: underline;
	}


article ol{
	list-style:decimal;
	padding-left:20px;	
	}
article ul{
	list-style:disc;
	padding-left:20px;	
	}
article li{
	font-size:20px;
	line-height: 32px;
	margin-bottom: 21px;
	}

article pre code {
	background-color: #eee;
	border: 1px solid var(--blue);
	display: block;
	padding: 0;
	margin:0;
	border-radius:10px;
	}
	
article blockquote {
	background: var(--white);
	border-left: 3px solid var(--blue);
	margin-bottom: 21px;
	padding: 10px 10px 1px 15px;
	font-style: italic;
	}

article hr{
	margin:26px auto 30px auto;
	max-width: 480px;
	border-bottom: 1px solid var(--blue);
	}


/* postgrid =================== */


.postgrid {
	margin:0 auto;
    display: grid;
	grid-template-columns:1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: 360px;
    padding-bottom: 50px;
	}

.postgrid a{
	border:1px solid #E6EEFF;
	background-color: #E6EEFF;
	border-radius:10px;
	padding:14px 20px 18px 20px;
	font-size: 22px;
	line-height: 28px;
	margin:0;
	}

.postgrid a:hover{
	border:1px solid var(--blue);
	}

.postgrid a span{
	display:block;
	font-size: 15px;
	line-height: 24px;
	color:var(--gray);
	padding:0;
	margin:0;
	}



@media only screen and (min-width: 700px){
.postgrid {
    grid-template-columns:1fr 1fr;
    max-width: 668px;
	}
.postgrid a{
	width:284px;
	}
}

@media only screen and (min-width: 1040px){
.postgrid {
    grid-template-columns:1fr 1fr 1fr;
    max-width: 1040px;
	}
}




/* store =================== */

.tcstore{
	margin:0 auto;
	display:block;
	max-width: 470px;
	margin-bottom: 60px;
	}

.tcstoreleft{
	max-width: 470px;
	margin-right: 0;
	margin-bottom: 60px
	}
	
.tcstoreright{
	max-width: 470px;
	margin-left: 0;
	margin-bottom: 60px
	}
	
.tcstore h3{
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 14px;
	}

.tcstore p{
	margin-top: 10px;
	font-size: 18px;
	line-height: 24px;
	}
	
.storeprice{
	font-size: 30px;
	font-weight: 900;
	margin:8px 0;
	}


.learnmorebtn{
	display:inline-block;
	width:150px;
	height:44px;
	line-height: 44px;
	font-size: 18px;
	font-weight: 500;
	color:var(--bluehov);
	background-color: var(--white);
	text-align: center;
	border-radius:5px;
	}
.learnmorebtn:hover{
	text-decoration: underline;
	}
	

.buynowbtn2{
	display:inline-block;
	width:150px;
	height:44px;
	line-height: 44px;
	font-size: 18px;
	font-weight: 500;
	color:var(--white);
	background-color: #CE5151;
	text-align: center;
	border-radius:5px;
	cursor:pointer;
	}


@media only screen and (min-width: 1040px){
.tcstore{
	margin:0 auto;
	display:flex;
	max-width: 1040px;
	margin-bottom: 100px
	}
.tcstoreleft{
	max-width: 470px;
	margin-right: 50px;
	margin-bottom: 0;
	}
	
.tcstoreright{
	max-width: 470px;
	margin-left: 50px;
	margin-bottom: 0;
	}
}




.product{
	margin:0 auto;
	max-width: 1040px;
	margin-bottom: 60px;
	}

.prodprice{
	font-size: 50px;
	font-weight: 900;
	line-height: 80px;
	text-align: center;
	}

.buynowbtn{
	display:block;
	margin:0 auto;
	width:250px;
	height:44px;
	background-color: #CE5151;
	text-align: center;
	color:var(--white);
	font-weight: 500;
	border-radius:5px;
	margin-bottom: 30px;
	cursor:pointer;
	}




/* video ========================== */


.video {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 32px;
	}

.video::after {
	display: block;
	content: "";
	padding-top: 56.25%;
	}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}