@import url('https://fonts.googleapis.com/css?family=Cairo|Maven+Pro|Quicksand:300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Poppins:wght@300;400&display=swap');

:root {
	font-size :16px;
	font-family : 'Rubik',sans-serif;

	--text-primary : ##1d1160;
	--text-secondary: #ececec;
	--text-header:#292930;
	--text-info:#696b6e;

	--bg-primary:#fafbfc;
	--bg-primary-sidebar:#fafbfc;
	--bg-secondary-sidebar:#f7f7f7;
	--bg-cardhead:/*#23232e #f7f7f7 #6402ab *//*#0d046e*/;
	--bg-icon:#33006F;  /*rockles purpple*/
	--bg-secondary: #e3e3e3;
	--bg-navbutton:#33006F;
	--bg-linkbutton-hover:#FAB8C4;
	--bg-linkbutton:#F94465;;
	--bg-body:  #fafbfc /*#f8f9fa*/;
        /* palette*/
	--navy-blue: #03045eff;
	--dark-cornflower-blue: #023e8aff;
	--star-command-blue: #0077b6ff;
	--blue-green: #0096c7ff;
	--cerulean-crayola: #00b4d8ff;
	--sky-blue-crayola: #48cae4ff;
	--sky-blue-crayola-2: #90e0efff;
	--blizzard-blue: #ade8f4ff;
	--powder-blue: #caf0f8ff;

	--bg-cardhead:#452c63;
	--bg-white: #f8f9fa;}

	/* CSS HEX */





	
body {
	margin:0;
	box-sizing:border-box;
	font-size:16px;

}

a{
	text-decoration:none;
}


.home-main{
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
	                    "banner"
			    "serviceheader"
			    "services"
			    "productdescrip"
			    "products"
			    "whyus-title"
			    "whyus"
			    "cform"
			    "footer"
}






	
form {
	border:none;
}

.appbar{
	grid-area: appbar;
	margin-left:15vw;
	margin-right:15vw;
	margin-top :1.5rem;
	display:grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas:"logo  nav"
}





.logo-large {
	grid-area: logo;
	align-self:center;
	justify-self:start;
	width: 10rem;
	height: 4rem;
}
.gplay-badge {
	width: 13rem;
	height: 5rem;
}

.nav-list{
	grid-area: nav;
	list-style-type:none;
	display:flex;
	margin-right:7rem;
	align-self:center;
	justify-self:end;
	padding:0;


}

.nav-list>li {
	padding:10px;
}
.nav-list>li>a{
	color:#696b6e;
	font-family: 'poppins', sans-serif;
	font-weight:bold;
	font-size:1rem;
}

.nav-list>li :hover{
	color:#434445;
	border-bottom: 2px solid #00c26e;
}

	
.navbar-top{
	display:none;

}
.nav-list-top {
	list-style-type:none;
	box-sizing:border-box;
	margin-top:1rem;

}

.nav-list-item-top {
	padding:1rem;

}

.nav-list-item-top > a {
	text-decoration:none;
	color:#fff;
	font-family: 'poppins', sans-serif;
	font-weight:bold;
	font-size:1.2rem;
	position:relative;

}


.banner{
	margin-top: 2rem;
	margin-left: 15vw;
	margin-right: 15vw;
	height:70vh;
	grid-area:banner;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"banner-left banner-right"

}
.threerowgrid {
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:"top"
	                    "middle"
	                    "bottom"
}



.linkbutton{
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: 'poppins', sans-serif;
	font-weight:bold;
	font-size:24px;
	color:white;
	width:10rem;
	height:3rem;
	text-align:center;
	border-radius:2rem;
	background:var(--bg-linkbutton);
}

#findout-button:hover{
	background:var(--bg-linkbutton-hover);
}

.banner-header {
	grid-area: middle;
	font-family: 'cabin', sans-serif;
	font-size:56px;
	color: var(--text-header);
	padding:0;

}
.banner-info {
	grid-area: top;
	font-family: 'poppins', sans-serif;
	font-size:18px;
	color:var(--text-info);
	padding:0;

}


.banner-illustration{
	max-width:50vw;
	max-height:70vh;
	grid-area: illustration;
	justify-self:center;
	align-self:center;
}


.linkbutton {
	grid-area: bottom;
	justify-self:start;
	align-self:start;
}



.app-bar {
	display:none;
	padding:2rem;
}





.title {
	height: 10vh;
	margin-top: 6rem;
	margin-left:15vw;
	margin-right:15vw;
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows: 5vh auto;
	grid-template-areas:"title"
  	                    "subtitle";
	}


.title-head{
	grid-area:title;
	font-family: 'cabin', sans-serif;
	font-size:36px;
	justify-self:center;
	align-self:center;


}

.title-subtitle{
	grid-area: subtitle;
	font-family: 'poppins', sans-serif;
	margin-top:2rem;
	font-size:18px;
	color:var(--text-info);
	text-align:center;
	justify-self:center;
	align-self:start;
}



.twobytwogrid{
	height:90vh;
	width: 60vw;
	align-self:start;
	justify-self:center;
	margin-left:15vw;
	margin-right:15vw;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:"oneone  onetwo" 
	                    "twoone twotwo"

}

.card{

	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr 1fr 1fr;
	grid-template-areas: "card-icon"
			     "c-title"
			     "card-descrip";
	padding:2rem;
	width:12rem;
	height:12rem;

}
.logo-small {
	grid-area:card-icon;
	align-self:center;
	justify-self:center;
	width:6rem;
	height:6rem;
	}

.card-title {
	grid-area:c-title;
	align-self:center;
	justify-self:center;
	text-align:center;
	margin-top:10px;
	padding:0;
	font-family: 'cabin',sans-serif;
	font-size:18px;
	color:var(--text-header);
	
}
.card-info {
	grid-area:card-descrip;
	align-self:start;
	justify-self:center;
	font-family: 'poppins',sans-serif;
	font-size:14px;
	color:var(--text-info);
	text-align:center;
	margin-top:0;
	padding:5px;
	
}

.onebyautogrid{
	align-self:center;
	justify-self:center;
	margin-left:15vw;
	margin-right:15vw;
	margin-top:5rem;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:"one" 
	                    "two"
			    "three"
}
#index-banner {
	grid-area: banner;
}

#index-banner-illustration{
	grid-area: banner-right;
}

#index-top-banner-threerowgrid {
	grid-area: banner-left;
}
#index-banner-header {
	grid-area:middle;
	justify-self:start;
	align-self:center;

}
#index-banner-info {
	grid-area:top;
	justify-self:start;
	align-self:end;

}


#index-services-title {
	grid-area: serviceheader;
}
#index-services-grid {
	grid-area: services;
}


#webapps{
	grid-area: oneone;
	justify-self:center;
	align-self:center;

}
#mobapps{
	grid-area: onetwo;
	justify-self:center;
	align-self:center;
}
#iot{
	grid-area: twoone;
	justify-self:center;
	align-self:center;
}
#branding{
	grid-area: twotwo;
	justify-self:center;
	align-self:center;
}

/* product section */

#index-products-title {
	grid-area: productdescrip;
}
#index-products-grid {
	grid-area: products;
}

.product-card {
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"prodinfo prodimg" ;
/*	border: 2px solid black;
	border-radius: 2rem;*/
	margin-top: 5rem;
	margin-bottom: 5rem;
	width:50vw;

}

.product-info {
	grid-area: prodinfo;
	align-self:center;
	justify-self:center;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 2fr .5fr;
	grid-template-areas:"prodname" 
	                    "proddescrip"
	                    "knowmorebtn"
}
.product-name {
	grid-area: prodname;
	color:white;
	font-family: 'cabin', sans-serif;
	font-size:32px;
	align-self:center;
	justify-self:center;
}

.product-logo {
	/*grid-area: prodlogo;*/
	width:5rem;
	height:2rem;
	align-self:center;
	justify-self:center;

}

.product-description {
	grid-area: proddescrip;
	font-family: 'poppins', sans-serif;
	font-size:16px;
	color:white;
	padding-left:3.5rem;
	align-self:center;
	justify-self:center;

}
.knowmorebutton{
	grid-area: knowmorebtn;
	font-family:'cabin', sans-serif;
	font-size:18px;
	font-weight:bold;
	align-self:center;
	justify-self:center;
	text-align:center;
	text-decoration:none;
	color:white;


}
.product-view {
	grid-area: prodimg;
	width:100%;
	height:100%;
	
}

#crema {
	grid-area: one;
	background: #452C63;
	
}
#collecta {
	grid-area: two;
	background: #E80068;
	
}
#payslip {
	grid-area: three;
	background: #562260;
	
}


/* whyus section*/

.descriptionless-card{

	display:grid;
	grid-template-columns:1fr;
	grid-template-areas: "card-icon"
			     "c-title";
	padding:1rem;
	margin:1rem;
	width:8rem;
	height:8rem;

}

#index-whyus-title {
	grid-area:whyus-title;
	
}

.threebyfourgrid {
	grid-area:features;
	justify-self:center;
	align-self:center;
	margin-top:1rem;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	/*grid-template-areas:"oneone onetwo onethree"
			    "twoone twotwo twothree"
			    "threeone threetwo threethree"
			    "fourone fourtwo fourthree"*/
}
#index-whyus-grid {
	grid-area:whyus;
	
}


#tech{
	grid-column: 2/3;
	grid-row: 1/3;
	align-self:center;
	justify-self:center;
}

#ui{
	grid-column: 1/2;
	grid-row: 2/3;
	align-self:center;
	justify-self:start;
}

#custom{
	grid-column: 3/4;
	grid-row: 2/3;
	align-self:center;
	justify-self:end;


}

#cost{
	grid-column: 2/3;
	grid-row: 3/5;
	align-self:center;
	justify-self:center;


}

#cloud{
	grid-column: 1/2;
	grid-row: 3/4;
	align-self:center;
	justify-self:start;


}

#scale{
	grid-column: 3/4;
	grid-row: 3/4;
	align-self:center;
	justify-self:end;


}



.cform {
	grid-area: cform;
	height:90vh;
	border:none;
	border-radius:5% 30% / 5% 30%;
	box-shadow: 0px 1px 19px -5px #6877C1;
	margin-right:15vw;
	margin-left:15vw;
	margin-bottom: 3rem;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"contactdescrip contactform ";
/*	background: var(--navy-blue);*/

}


#connect-descrip{
	grid-area: contactdescrip;
	display:grid;
	grid-template-areas:
	"contacthead "
	"contactinfo "
	"contactdetails "
	"illustration ";
	/*background: var(--navy-blue);*/


}


#connect-head{
	grid-area: contacthead;
	font-family: 'cabin', sans-serif;
	font-size:56px;
	padding:0;
	color:var(--navy-blue);
	margin:2rem;

}

#connect-info{
	grid-area: contactinfo;
	font-family: 'poppins', sans-serif;
	font-size:18px;
	margin:0;
	padding:0;
	margin-left:2rem;
	color:var(--text-info);
	align-self:start;
	justify-self:start;
	height:5vh;

}
.infolist {

	list-style-type:none;
	grid-area: contactdetails;
	color:var(--text-info);
}
.infolist-item {
	display:flex;
	align-items:center;
	padding-top:.25rem;
	padding-bottom:.25rem;
	height:1rem;
	font-size:18px;
}

.infolist-item .cform-svg {
	padding-right:1rem;
	color:var(--text-info);
}

.infolist-item>a {
	text-decoration:none;
	color:var(--text-info);
}




.cform-illu {
	width:100%;
	
}

label {

	font-family: 'poppins', sans-serif;
	color:#FFFFFF;
	font-size:18px;
	margin-left:1rem;
	
}

.formcont {
	grid-area: contactform;
	background: var(--blue-green);
	align-self:center;
	justify-self:center;
	padding:2rem;
}


.contact-form {
	display:flex;
	margin-top:3rem;
	flex-direction:column;
	background: var(--blue-green);

	/*display:grid;
	grid-template-colums:1fr 1fr;
	grid-template-areas:
	"inputname inputname "
	"inputphone inputemail "
	"inputmsg inputmsg"
	"inputconnect inputconnect ";*/
}

.form-field {
	background: var(--blue-green);
	font-family: 'poppins', sans-serif;
	font-size:14px;
	margin:1rem;
	border:none;
	color:white;
	font-size:18px;
	color:white;
	border-bottom:2px solid #d5f6ff;
	
}
/*
#name {
	grid-area:inputname;
}
#phone {
	grid-area:inputphone;
	
}
#email {
	grid-area:inputemail;
}
#message {
	grid-area:inputmsg;
}
#inputconnect {
	grid-area:inputconnect;

}
*/

.button-submit{
	margin-top:30px;
	background-color: #d5f6ff;
	border:none;
	padding:5px;
	width:10rem;
	height:3rem;
	font-weight:bold;
	font-size:1em;
	border-radius:2rem;
	align-self:center;

}
.button-submit:hover{
	background-color:#002255;
	color:white;
	cursor:pointer;

}

/* footer section */
.footer {
	grid-area:footer;
	display:grid;
	margin-left:15vw;
	margin-right:15vw;
	margin-top:10rem;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 2fr .5fr;
	grid-template-areas:
	"footerlogo company support blank "
	"copyright copyright socials socials ";


	
}

#footer-logo {
	grid-area:footerlogo;
	height:4rem;
	width:9rem;
	align-self:start;
	padding:1rem;
	justify-self:center;
	
}
.footerlist{
	list-style-type:none;
	font-family: 'poppins','sans-serif';
	
}
.footerlist-head {
	font-weight:bold;
	padding-bottom:1rem;
	
}
.footerlist-item > a{
	color:var(--text-info);
	
}
#company {
	grid-area:company;
	align-self:start;
	
}
#support {
	grid-area:support;
	align-self:start;
	
}
#copyright {
	grid-area:copyright;
	font-family:'poppins','sans-serif';
	font-size:14px;
	color:var(--text-info);
	align-self:end;
	padding-left:2rem;



	
}
.social-icon-list {
	grid-area:socials;
	list-style-type:none;
	display: flex;
	justify-self:end;
	align-self:end;
	padding-right:2rem;
	
}

.social-icon-list-item {
	padding:.5rem;
	font-size:36px
	
}

.social-icon-list-item>a>svg>path{
	
	fill:var(--cerulean-crayola);	
}

.social-icon-list-item>a>svg:hover path{
	
	fill:var(--navy-blue);	
}


/* ------------------------------------------------------*/



.apprequirement-form{
	display:grid;
	place-items:center;
	grid-template-column:repeat(3,1fr)
}

.apprequirement-form input[type="radio"]{
	opacity:0;
	position:fixed;
	width:0;

}
.apprequirement-form input[type="checkbox"]{
	opacity:0;
	position:fixed;
	width:0;

}
.apprequirement-form>.select-box{
	display:grid;
        place-items:center;
	width:15vw;
	margin:20px;
	padding:10px;


}
.select-box>ul{
	text-align:left;

}
.select-box >ul>li{

	font-family: 'Maven Pro', sans-serif;
	font-size:1.1em;

}



.apprequirement-form>.select-box:hover{

	box-shadow:5px 10px 10px 5px #d5f6ff;
	cursor:pointer;
}
.apprequirement-form input[type="radio"]:focus + label{
	box-shadow:5px 10px 10px 5px #d5f6ff;

}
.apprequirement-form input[type="radio"]:checked + label{
	background-color:#f7fafa;
	box-shadow:5px 10px 10px 5px #d5f6ff;
}
.apprequirement-form input[type="checkbox"]:checked + label{
	background-color:#f7fafa;
	box-shadow:5px 10px 10px 5px #d5f6ff;
}
.select-box>textarea{
	border:2px solid gray;
	border-radius:25px;
	padding:10px;

}



/* about us page */
.about-main{
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
	                    "about-page"
			    "footer"
}
.aboutus-banner {
	grid-area:about-page;
	margin-top:5rem;
	margin-left:15vw;
	margin-right:15vw;
	margin-bottom:5rem;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .5fr 1.5fr;
	grid-template-areas:"abt-head abt-illu"
			    "abt-descrip abt-illu"
	
}

#about-header {
	grid-area:abt-head;
	
}

#about-info {
	grid-area:abt-descrip;
	font-family: 'cabin', sans-serif;
	color:var(--text-info);
	font-size:20px;
	align-self:start;
	justify-self:start;
	
}

#about-illu {
	grid-area:abt-illu;
	max-width:30rem;
	max-height:30rem;
	
}





/* about us page */



/* crema page */
.crema-main{
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	jutify-content:center;
	grid-template-areas:"appbar"
	                    "crema-banner"
	                    "crema-feature-descrip"
			    "crema-features"
			    "crema-contact-details"
			    "footer"
}
#crema-banner {
	grid-area:crema-banner;
	
}
#crema-top-banner-threerowgrid {
	grid-area:banner-right;
	
}
#crema-banner-header {
	grid-area:top;
	align-self:center;
	justify-self:start;

}
#crema-banner-info {
	grid-area:middle;
	align-self:start;
	justify-self:start;
	height:3rem;
}
#crema-banner-illustration {
	grid-area:banner-left;
}

#crema-features-title{
	grid-area:crema-feature-descrip;
}

.card-large {
	display:grid;
	align-self:center;
	justify-self:center;
	width:20rem;
	height:20rem;
	padding:2rem;
	margin:1rem 0rem;
	grid-template-columns 1fr;
	grid-template-rows: 1fr .5fr 1.5fr;
	grid-template-areas:"icon"
			     "head"
			     "list"

}

.large-card-icon {
	grid-area:icon;
	justify-self:center;
	align-self:center;
}

.large-card-title {
	grid-area:head;
	align-self:center;
	justify-self:center;
	margin:0 .5rem 0;
}

.card-sublist {
	grid-area:list;
	align-self:start;
	justify-self:center;
	
}
.card-sublist-item {
	font-family: 'poppins', sans-serif;
	color:var(--text-info);
	
}


.twobyautogrid{
	display:grid;
	margin-top: 10vh;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	}

#crema-features-grid{
	grid-area:crema-features;
	margin-left:15vw;
	margin-right:15vw;
	grid-template-areas:"dash auth"
			    "employee expense"
			    "transport reporting"


}

#crema-connect-descrip{
	grid-area:crema-contact-details;
	margin-left:15vw;
	margin-right:15vw;
	margin-top:10rem
	justify-self:center;



}
#inform-dash {
	grid-area:dash;
	
}
#auth {
	
	grid-area:auth;
}
#exp-man {
	grid-area:expense;
}
#emp-man {
	grid-area:employee;
}
#trans-man {
	grid-area:transport;
}
#reporting {
	grid-area:reporting;
}


.prod-call-to-action {
	display:grid;
	grid-template-colums: 1fr;
	grid-template-rows: 1fr .5fr .5fr;
	grid-template-areas: "head"
			     "sub-info"
			     "action";

	
}

.product-connect-head {
	align-self:center;
	justify-self:center;
	font-family: 'cabin', sans-serif;
	font-size:36px;

	
}
.service-description {
	grid-area:head;
	font-family: 'poppins', sans-serif;
	font-size:24px;
	color:var(--text-info);
}

#prod-connect-info {
	grid-area:sub-info;
	justify-self:center;
	
}
#prod-infolist {
	grid-area:action;
	justify-self:center;
	
}

/*--- crema-page-end ---*/


/* collecta page */
.collecta-main{
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
	                    "collecta-banner"
	                    "collecta-feature-descrip"
			    "collecta-features"
			    "collecta-contact-details"
			    "footer"
}
#collecta-banner {
	grid-area:collecta-banner;
	
}
#collecta-top-banner-threerowgrid {
	grid-area:banner-left;
	
}
#collecta-banner-header {
	grid-area:top;
	align-self:end;
	justify-self:start;

}
#collecta-banner-info {
	grid-area:middle;
	align-self:start;
	justify-self:start;
	height:3rem;
}
#collecta-banner-illustration {
	grid-area:banner-right;
}

#collecta-features-title{
	grid-area:collecta-feature-descrip;
}


#collecta-connect-descrip{
	grid-area:collecta-contact-details;
	margin-left:15vw;
	margin-right:15vw;
	margin-top:10rem
	justify-self:center;



}

#collecta-features-grid{
	grid-area:collecta-features;
	margin-left:15vw;
	margin-right:15vw;
	grid-template-areas:"c-dash c-milk"
			    "c-farmer c-rate"
			    "c-cfeed c-expenses"
			    "c-payments c-reporting"



}

#collecta-inform-dash {
	grid-area:c-dash;
	
}
#collecta-milk{
	
	grid-area:c-milk;
}
#collecta-farmers{
	grid-area:c-farmer;
}
#collecta-ratecards{
	grid-area:c-rate;
}
#collecta-cattlefeed{
	grid-area:c-cfeed;
}
#collecta-expenses{
	grid-area:c-expenses;
}
#collecta-payments{
	grid-area:c-payments;
}
#collecta-reporting{
	grid-area:c-reporting;
}



/* collecta page end*/


/* payslip page */
.payslip-main{
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
	                    "payslip-banner"
	                    "payslip-feature-descrip"
			    "payslip-features"
			    "footer"
}
#payslip-banner {
	grid-area:payslip-banner;
	
}
#payslip-top-banner-threerowgrid {
	grid-area:banner-left;
	
}
#payslip-banner-header {
	grid-area:top;
	align-self:center;
	justify-self:start;

}
#payslip-banner-info {
	grid-area:middle;
	align-self:start;
	justify-self:start;
	height:3rem;
}

#payslip-get-android {
	grid-area:bottom;
	align-self:center;
	justify-self:start;

	
}
#payslip-banner-illustration {
	grid-area:banner-right;
	align-self:center;
	justify-self:start;

}

#payslip-features-title{
	grid-area:payslip-feature-descrip;
}


#payslip-features-grid{
	grid-area:payslip-features;
	margin-left:15vw;
	margin-right:15vw;
	grid-template-areas:"pslip pas"
			    "pform pgr"

}

#payslip-payslips {
	grid-area:pslip;
	align-self:center;
	justify-self:center;

	
}
#payslip-as{
	grid-area:pas;
	align-self:center;
	justify-self:center;

}
#payslip-formonesix{
	grid-area:pform;
	align-self:center;
	justify-self:center;

}
#payslip-gr{
	grid-area:pgr;
	align-self:center;
	justify-self:center;

}

/* Thank you page */
.thankyou-main {
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
			    "thanks"
			    "footer"

}
#thankyou-threerowgrid{
	grid-area:thanks;
}
#thankyou-illustration{
	grid-area:top;
	max-width:80vw;
	height: 60vh;
	align-self:center;
	justify-self:center;

}
#thankyou-banner-header{
	grid-area:middle;
	align-self:center;
	justify-self:center;
}
#thankyou-banner-info{
	grid-area:bottom;
	align-self:center;
	justify-self:center;
	padding: 1rem 2rem;
}

/* not found page */
.notfound-main {
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
			    "notfound"
			    "footer"

}
#notfound-threerowgrid{
	grid-area:notfound;
}
#notfound-illustration{
	grid-area:top;
	max-width:80vw;
	height: 60vh;
	align-self:center;
	justify-self:center;

}
#notfound-banner-header{
	grid-area:middle;
	align-self:center;
	justify-self:center;
	text-align:center;
}
#notfound-banner-info{
	grid-area:bottom;
	align-self:center;
	justify-self:center;
	padding: 1rem 2rem;
}


/* not found page */
.aboutus-main {
	display:grid;
	grid-template-columns: 1fr;
	width:100vw;
	grid-template-areas:"appbar"
			    "notfound"
			    "footer"

}
#aboutus-threerowgrid{
	grid-area:notfound;
}
#aboutus-illustration{
	grid-area:top;
	max-width:80vw;
	height: 60vh;
	align-self:center;
	justify-self:center;

}
#aboutus-banner-header{
	grid-area:middle;
	align-self:center;
	justify-self:center;
	text-align:center;
}
#aboutus-banner-info{
	grid-area:bottom;
	align-self:center;
	justify-self:center;
	padding: 1rem 2rem;
}

/* payslip page end*/

/*animations*/

[data-scroll] {
  transition: opacity 1s;
}

#connect-head[data-scroll="in"] {
	animation:backInUp;
	animation-duration:3s;
 
}

#service-descrip[data-scroll="in"] {
	animation:fadeInUp;
	animation-duration:2s;
 
}

.banner-header {
	animation:fadeInUp;
	animation-duration:1.5s;
	
}

.card[data-scroll="in"]{
	animation:fadeInUp;
	animation-duration:2s;
 
}

.descriptionless-card[data-scroll="in"]{
	animation:fadeInUp;
	animation-duration:3s;
 
}

/*
#crema[data-scroll="in"]{
	animation:fadeInRight;
	animation-duration:3s;
 
}
*/
.product-card:hover{
	animation:pulse;
	animation-duration:2s;
 
}
/*
#collecta[data-scroll="in"]{
	animation:fadeInLeft;
	animation-duration:5s;
 
}
*/
/*
#payslip[data-scroll="in"]{
	animation:fadeInRight;
	animation-duration:5s;
 
}
*/

.title-head[data-scroll="in"] {
	animation:bounceInLeft;
	animation-duration:3s;
 
}

[data-scroll="out"] {
}




/*------------animations-end-------------*/

/* media queries */
@media screen and (max-width:650px) and (max-height:850px){
header{
	display:none;
}

.home-main{
	width:100vw;
	justify-content:center;
	overflow:hidden;
}

.appbar{
	grid-area: appbar;
	margin-top :1.5rem;
	width:100vw;
	justify-self:center;
	margin-left:0;
	margin-right:0;
	display:grid;
	place-items:center;
	grid-template-columns: 1fr;
	grid-template-areas:"logo"
			    "nav";
}

.appbar-logo {
	align-self:center;
	justify-self:center;
}



.nav-list{
	grid-area: nav;
	flex-wrap:wrap;
	margin-left:0;
	margin-right:0;
	padding:0;
	justify-self:center;

}

.nav-list>li>a{
	font-family: 'poppins', sans-serif;
	font-size:0.9rem;
}

.banner{
	grid-area:banner;
	margin-left:0;
	margin-right:0;
	justify-self:center;
	height:100%;
	width:100vw;
	display:grid;
	place-items:center;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:"banner-right "
			     "banner-left";

}
.banner-header {
	font-size:48px;
	justify-self:center;

	
}
.banner-info {
	grid-area: top;
	font-family: 'poppins', sans-serif;
	font-size:16px;
	color:var(--text-info);
	padding:0;

}
#index-banner-info,#index-banner-head{
	justify-self:center;
}
.linkbutton-link{
	justify-self:center;
	grid-area:bottom;
}


.title {
	height: 10vh;
	width:100vw;
	justify-self:center;
	margin-top:8rem;
	margin-left:0;
	margin-right:0;
	padding:0;
	}

.title-head{
	font-size:24px;



}

.title-subtitle{
	margin-top:2rem;
	font-size:14px;
	display:flex;
	flex-wrap:wrap;
	height:100%;
	padding-left: 1rem;
	padding-right: 1rem;
}



.twobytwogrid{
	width: 100vw;
	margin-left:0;
	margin-right:0;
	margin-top : 3rem;
	padding:0;

}
.card{
	padding:.5rem;
	width:8rem;
	height:8rem;

}
.logo-small {
	width:4rem;
	height:4rem;
	}
.card-title {
	font-size:16px;
	
}
.card-info {
	font-size:12px;
	
}
.onebyautogrid{
	margin-left:0;
	margin-right:0;
	padding:0;
	place-items:center;
}

.product-card {
	display:grid;
	place-items:center;
	grid-template-columns: 1fr;
	grid-template-areas:"prodimg"
			    "prodinfo" ;
	margin-top: 5rem;
	margin-bottom: 5rem;
	margin-left:0;
	margin-right:0;
	padding:0;
	width:100vw;

}

.product-card:hover{
	animation:none;
	animation-duration:none;

}
.product-logo {
	display:none;

}

.product-view >img {
	align-self:center;
	justify-self:center;
	width:100%;
	height:100%;
	
}


.descriptionless-card{

	display:grid;
	grid-template-columns:1fr;
	grid-template-areas: "card-icon"
			     "c-title";
	padding:1rem;
	margin:1rem;
	width:100%;
	height:100%;

}

.threebyfourgrid {
	grid-area:features;
	justify-self:center;
	align-self:center;
	margin-top:3rem;
	display:grid;
	place-items:center;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	width:100vw;
	padding:0;
	margin-left:0;
	margin-right:0;
	grid-template-areas:"oneone onetwo"
			    "twoone twotwo"
			    "threeone threetwo";
}

#tech{
	grid-area:oneone;
	align-self:center;
	justify-self:center;

}

#ui{
	grid-area:onetwo;
	align-self:center;
	justify-self:center;

}

#custom{
	grid-area:twoone;
	align-self:center;
	justify-self:center;


}

#cost{
	grid-area:twotwo;
	align-self:center;
	justify-self:center;

}

#cloud{
	grid-area:threeone;
	align-self:center;
	justify-self:center;

}

#scale{
	grid-area:threetwo;
	align-self:center;
	justify-self:center;

}


.cform {
	grid-area: cform;
	border:none;
	border-radius:0;
	box-shadow: none;
	margin-bottom: 3rem;
	margin-left:0;
	margin-right:0;
	display:grid;
	height:100%;
	padding:0;
 	place-items:center;
	grid-template-columns: 1fr;
	grid-template-areas:"contactdescrip "
		            "contactform ";

}
.cform-illu {
	width:50%;
	align-self:center;
	justify-self:center;
	padding-top:1rem;
	padding-bottom:1rem;
	
}

#connect-descrip{
	grid-area: contactdescrip;
	display:grid;
	justify-content:center;
	grid-template-areas:
	"contacthead "
	"contactinfo "
	"contactdetails "
	"illustration ";
	/*background: var(--navy-blue);*/
}


.contact-form {
	display:flex;
	margin-top:3rem;
	flex-direction:column;
	background: var(--blue-green);
	padding:0;
	margin-top:1rem;
	align-self:center;
	justify-self:center;


	/*display:grid;
	grid-template-colums:1fr 1fr;
	grid-template-areas:
	"inputname inputname "
	"inputphone inputemail "
	"inputmsg inputmsg"
	"inputconnect inputconnect ";*/
}

.infolist{
	align-self:center;
	justify-self:center;
}

#connect-head{
	font-size:36px;
	margin:1rem;
	align-self:center;
	justify-self:center;
}

#connect-info{
	grid-area: contactinfo;
	font-family: 'poppins', sans-serif;
	text-align:center;
	margin-left:0;
	color:var(--text-info);
	align-self:center;
	justify-self:center;
	display:flex;
	font-size:15px;
	padding: 1rem;
	flex-wrap:wrap;
	height:100%;
}

.formcont {
	padding-left:1rem;
	padding-right:1rem;
	margin-top:3rem;
	padding-bottom:0;
	width:100%;
	height:100%;
}

.form-field {
	background: var(--blue-green);
	font-family: 'poppins', sans-serif;
	font-size:14px;
	margin-left:1rem;
	margin-right:1rem;
	padding-left:1rem;
	padding-right:1rem;
}

.footer {
	grid-area:footer;
	margin-left:0;
	margin-right:0;
	margin-top:5rem;
	display:grid;
	width:100vw;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"footerlogo"
	"company"
	"support "
	"blank"
	"socials"
	"copyright";
}
#company{
	justify-self:center;
	padding:0;
	margin:0;
}

#support{
	justify-self:center;
	padding:0;
	margin-top: 2rem;
	margin-left:0;
	margin-right:0;


}



.social-icon-list{
	grid-area:socials;
	list-style-type:none;
	justify-self:center;
	display: flex;
	padding:0;
	
}


#copyright{
	grid-area:copyright;
	font-family:'poppins','sans-serif';
	font-size:14px;
	color:var(--text-info);
	align-self:center;
	justify-self:center;
	padding-left:0;
}

/* crema specific content */

.card-large {
	display:grid;
	align-self:center;
	justify-self:center;
	width:100vw;
	height:100%;
	padding:3rem 0;
	margin:0;
	grid-template-columns 1fr;
	grid-template-rows: 1fr .5fr 1.5fr;
	grid-template-areas:"icon"
			     "head"
			     "list"

}



.twobyautogrid{
	display:grid;
	margin-top: 10vh;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	}

#crema-features-grid{
	grid-area:crema-features;
	margin-left:0;
	margin-right:0;
	justify-content:center;
	grid-template-areas:"dash"
			    "auth"
			    "employee"
			    "expense"
			    "transport"
			    "reporting"


}
#crema-banner-header {
	grid-area:top;
	align-self:center;
	justify-self:center;

}

#crema-banner-info {
	grid-area:middle;
	align-self:center;
	justify-self:center;
	padding: 1rem 2rem;
	height:100%;
	text-align:center;
}

.collecta-main{
	justify-content:center;
}

#collecta-banner-header{
	padding:0 1rem;
}
#collecta-banner-info{
	padding:2rem 1rem;
}

#collecta-features-grid{
	grid-area:collecta-features;
	margin-left:0;
	margin-right:0;
	grid-template-areas:"c-dash"
			    "c-milk"
			    "c-farmer"
			    "c-rate"
			    "c-cfeed"
			    "c-expenses"
			    "c-payments"
			    "c-reporting"

}

#payslip-banner-header {
	align-self:center;
	justify-self:center;

}

#payslip-banner-info {
	grid-area:middle;
	align-self:center;
	justify-self:center;
	padding: 1rem 2rem;
	height:100%;
	text-align:center;
}
#payslip-get-android,#payslip-banner-illustration{
	justify-self:center;
}
#payslip-features-grid{
	padding:3rem 2rem;
	margin:0;
}

	

}



/* media queries end */