@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Muli:300,400,700|Oswald:400,700|Playfair+Display:400,900|Roboto:300,400,500');

/** html and body **/
 
html {
	font-size: 1rem;
}

body {
	background-color: rgba(21,12,60,1.00);
}


/** header **/

header h1.display-3 {
	
	font-size: 2.5rem; margin-bottom: 0%!important; letter-spacing: 0.12em;
}


header h2 {
	letter-spacing: 0.21em!important; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1.1rem; margin-bottom: 2.5rem;
}

hr {
	background-color: rgba(234,234,234,0.81);
}


/* main */

main.row {
	margin-bottom: 7%; box-shadow: -3px 0px 5px 5px #000;
}


/* section and card */

main.row section#zengarden, main.row section#gridsystem {
	margin-bottom: 1.4rem
}

section#zengarden {
	
	background-color: rgba(0,151,255,0.65) !important;
}

section#gridsystem {
	background-color:rgba(164,137,164,0.65);
}

section#bootstrap {
	background-color:rgba(140,194,78,0.65) !important;
	
}

/* card content */


#zengarden div.row {
	background-color: none !important;
}

/* title and text*/

h4.card-title {
	font-size: 1.8rem;
	
}

#zengarden h4.card-title {
	font-family: 'Playfair Display', serif; font-weight: 900!important;
}

#gridsystem h4.card-title {
	font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.03em;
}

#bootstrap h4.card-title {
	
	font-family: 'Muli', sans-serif; font-weight: 700;
}


 p.card-text {
	font-family: 'Lato', sans-serif; font-weight: 400; letter-spacing: 0.03em; margin-bottom: 10%;
}


/* card footer */


#zengarden div.card-footer {
	border: none!important; background-color: rgba(0,151,255,0.7)!important;

}

#gridsystem div.card-footer {
	border: none!important; background-color:rgba(164,137,164,0.70)!important;
}

#bootstrap div.card-footer {
	border: none!important; background-color:rgba(140,194,78,0.7)!important;
}


/* card footer button */


#zengarden a.btn:hover{
	background-color: #bc2929; color: white !important;
}


#gridsystem a.btn:hover {
	background-color: black; color: #C2E9EC!important;
}

#bootstrap a.btn:hover {
	background-color: rgba(255,165,53,1.00) !important; color: white !important;
}

 div.card-footer a.btn {
	font-family: 'Lato', sans-serif; text-transform:uppercase; width: 100%; padding: 6%; font-size: 1.15rem!important; letter-spacing: 0.15rem; font-weight: 700;
}


 /* page footer */


footer div {
	
	font-family: 'Lato', sans-serif; letter-spacing: 0.1rem; font-weight: 300; 
	font-size: 0.73rem; margin-bottom: 1.4rem;
}

footer a:hover {
	color:rgba(255,114,92,1.00); text-decoration: none;
}

footer a {
	color:rgba(29,194,184,1.00);  font-weight: 400;
}

footer a:active {
	color:rgba(121,121,121,1.00);
}

footer img {
	width: 100%; padding: 0;
}


/* MEDIA QUERIES */


/* small */

@media (min-width:576px) {
	html {
		font-size: 1rem;
	}
	div.container-fluid {
		padding:1rem 1rem;
	}
	header h2 {
		font-size: 1.2rem;
	}
	
	
	
	header h1.display-3 {
		font-size: 2rem;
	}
	
	section {
		padding: 0!important;
	}
	
	div.card-header {
		font-size: 0.8rem!important; padding: 0!important; margin: 0!important;
	}
	p.card-text {
		font-size: 0.7rem;
	}

}


/* medium */

@media (min-width:768px){
	
	html {
		font-size:0.74rem;
	}
	footer hr{
		margin: 0!important; padding: 0!important;
	}
	
	div.container-fluid {
		position: fixed; top: 6%; padding: 0rem 2.5rem!important; height: 100%; max-height: 100%; width: 100%; max-width: 100%;
	}
	
	main.row {
		margin-bottom: 2rem;
	}
	section.card {
		 padding: 7% 4% !important; border: none; 
	}
	main.row section { 
	margin: 0%!important;}
	
	p.card-text {font-size: 1rem!important;
		
		margin-bottom: 11%;
	}
	footer div {
		height: 0.8rem!important; line-height: 1rem!important; vertical-align: center!important; font-size: 1rem!important; padding:0rem!important;
	}
	
	header h1.display-3 {
		font-size: 2.5rem!important;
	}
	header h2 {
		font-size: 1.6rem;
	}
	
	footer.row {
	background-image:url(../coralcat.svg); background-repeat: no-repeat; background-position: center; padding:0.4rem 0rem 0rem 0rem!important; margin-bottom: 0.9rem!important;
}

	
}


/* large */

@media (min-width:992px){
	html {
		font-size: 0.9rem!important;
	}
	
	div.container-fluid {
		
		padding: 0rem 5rem!important;
	}

}



/* extra large */

@media (min-width:1200px){
	
	html {
		font-size: 0.9rem!important;
	}
	div.container-fluid {
		
		padding: 0rem 6rem!important;
	}
	
}