* {
    box-sizing: border-box;
    /* font-family: Nunito, "Helvetica Neue",Helvetica,Arial,sans-serif; */
}

html {
	font-size: 20px;
}

@media (max-width: 1000px) {
	html { font-size: 18px; }
  }

@media (max-width: 900px) {
	html { font-size: 16px; }
  }


body {
    font-family: Nunito, "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
}


.leftBorderSide {
	background-color: rgb(0, 0, 0);
	flex: 1 1 0px;
}

.main {
	max-width: 1100px;
	flex: 0 1 1100px;
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	background-color: #000;
}

.rightBorderSide {
	background-color: rgb(0, 0, 0);
	flex: 1 1 0px;
}


p {
    margin: 0.2em 0 0 0;
}


.pageHeader {
	width: 100%;
	height: 20px;
	font-family: 'Amiri';
	font-size: 20px;
	color: #fff;
	background-color: #000;
	/* margin-left: 1em; */
}

.contentTop {
	width: 100%;
}

.blackSeparator {
	width: 100%;
	height: 1px;
	background-color: #000;
}

.content {
	background-color: #fff;
}

.bottom {
	background-color: #fff;
    color: #000;
	padding-bottom: 1em;
	/* height: 250px; */
}

.bottomEnd {
	background-color: #000;
	height: 50px;
}



.topBlockParent {
	/*
	display: grid;
	grid-template-columns: minmax(300px, 100%) 510px;
	*/ 
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	background-color: #e3e5e2;
    border-radius: 0px 0px 0px 0px;

}

.block_right {
	flex: 0 1 510px;	
	height: 340px;
	background-image: url(img/heart.png);
	background-size: initial;
	background-repeat: no-repeat;
	order: 2;
    border-radius: 0px 0px 0px 0px;
}

.block_left {
	flex: 1 1 300px;	
	padding: 1em 2vw 1em 2vw;
	font-size: 1.2rem;
	background-color: #e3e5e2;
	display: grid;
	place-items: center;
	text-align: center;
	order: 1;

    border-radius: 0px 0px 0px 0px;
}

.blockMargin {
	background-color: #f00;
}




.box_parent {
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.box {
	height: 10em;
	flex: 1 0 30%;
	min-width: 250px;
	max-width: 30%;

	padding: 1em 1em 1em 1em;
	margin: 0.4rem;

	font-size: 1.0rem;	
	display: grid;
	place-items: center;
	border-radius: 0px 24px 0px 24px;
	cursor: pointer;

	background-color: #e5ded4;
	color: #000;

	/* filter: drop-shadow(4px 6px 4px #eeeeee); */
	box-shadow: 3px 5px 5px 1px rgba(0,0,0,0.2);   /* h-offset v-offset blur spread color */

	/*
	background: radial-gradient(circle, #e1e6e2 50%, rgba(255,255,255,1) 100%);
	background: linear-gradient(circle, #e1e6e2 0%,  #e1e6e2 100%); 
	*/
	/* 
	clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); 
	clip-path: circle(50% at 50% 50%);
	clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%, 0 0);
	*/
}

@keyframes boxSelect {
	from { height: 10em; background-color: #e5ded4; }
	to { height: 11em; background-color: #f1ece4; }
}

/*
.box:hover {
	animation-name: boxSelect;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}
*/

.box:hover {
	height: 11em; 
	background-color: #f1ece4;
}





.alter_parent {
	width: 100%;	
    /* height: 500px; */
	margin: 0;
    padding-top: 2em;
    padding-bottom: 2em;
	display: flex;
	flex-wrap: wrap;
    align-items: center;
	justify-content: center;

	/* background-color: #e5ded4; */
    background-color: #f1ece4;
	font-size: 1.0rem;

    border-top: 0.4rem solid #fff;
    border-bottom: 0rem solid #000;
    border-left:  0rem solid #000;
    border-right: 0rem solid #000;
    border-radius: 0px 52px 0px 52px;
}

.alter_parent:last-of-type {
    border-bottom: 0.4rem solid #fff;
}


.sub_image {
	width: 50%;
	/* min-width: 300px; */
	/* height: 300px; */
	display: flex;
    justify-content: center;
	order: 1;
	margin: 0;
	padding: 0 0 0 0;
	/* background-color: #fff; */
    background-color: transparent;
	/* background-color: #f8b0ce; */
}

.sub_text {
   	width: 50%;
	min-width: 300px;
	order: 2;
    padding: 0em 2em 0em 2em;

	gap: 0px 0px;

	margin: 0.3em 0 0 0;
	/* background-color: #fff; */
    background-color: transparent;
	/* background-color: #deb0f8; */
}


@media only screen and (min-width: 648px) {
.alter_parent:nth-child(3n) .sub_image {
	order: 2;
}

.alter_parent:nth-child(3n) .sub_text {
	order: 1;
    padding: 0em 0em 0em 2em;
}
}




.logoText {
	font-family: 'Abhaya Libre', serif;
}

.textLarge {
	padding: 0em 1em 0em 1em;
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
}

.textHdr {
    padding-top: 3vh;
    padding-left: 4vw;
    padding-right: 4vw;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
}

.text {
    padding-left: 4vw;
    padding-right: 4vw;
    font-weight: 400;
    font-size: 1.2rem;
    text-align: center;
}

.textCenter {
	text-align: center;
}

.textWhite {
    color: #ffffff;
}



/* Sub texts for boxes */

.boxBlock {
	display: block;
	width: 95%;
	padding-left: 2em;
	padding-bottom: 2em;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
  
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
  
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
  
	/* Support for IE. */
	font-feature-settings: 'liga';

	vertical-align:-24%;
  }

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.acol { color: #5a797b; }