.card-boxing{
	padding: 2px;
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	/*background: #e0ede0;*/
	border:1px solid grey;
	display: flex;
    flex-wrap: wrap;
    padding-top: 19px;
}
.heading{
	margin-top: 30px;
	text-align: center;
	background: #275262;
    padding: 6px 2px;
	color: #fff;
}


/*card section*/
 section.bubble {
	 display: grid;
	 grid-template-columns: minmax(100px, 1fr) 4fr;
	 grid-template-rows: minmax(100px, 1fr);
	 grid-gap: 0.5rem;
	 max-width: 600px;
	 margin: 1rem auto 4rem;
	 padding: 1rem;
	 position: relative;
	 background: #fff;
	 -webkit-filter: drop-shadow(15px 8px 0px #999);
	 filter: drop-shadow(0px -2px 4px #999);
}
section.bubble:hover{outline: 2px solid green;}

 @media only screen and (max-width: 800px) {
	 section.bubble {
		 grid-template-columns: 1fr;
		 grid-template-rows: minmax(100px, 1fr), 1fr;
	}
	.inline-size {
    line-height: 21px!important;
    margin-left: 0px!important;
    margin-top: 10px!important;
}
}
 section.bubble:nth-of-type(odd)::after {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 right: 20px;
	 border: 40px solid transparent;
	 border-top-color: #fff;
	 border-bottom: 0;
	 border-right: 0;
	 margin-left: -20px;
	 margin-bottom: -40px;
}
 section.bubble:nth-of-type(even)::after {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 left: 20px;
	 border: 40px solid transparent;
	 border-top-color: #fff;
	 border-bottom: 0;
	 border-left: 0;
	 margin-right: -20px;
	 margin-bottom: -40px;
}
.icon {
	 display: grid;
	 justify-items: center;
	 position: relative;
	 width: 100px;
	 height: 100px;
}
}
 .icon i {
	 margin-top: 20%;
}
 .info h3 {
	 margin: 0 0 0.5em 0;
	 font-family: "Ubuntu", sans-serif;
	 font-size: 1.5em;
}
 ul.bursts {
	 list-style-type: none;
	 width: 65px;
	 height: 65px;
	 margin: 0;
	 padding: 0;
	 position: absolute;
	 left: calc(50% - (0.5 * 2px));
	 top: 0px;
}
 ul.bursts li {
	 width: 3px;
	 height: 100%;
	 background: transparent;
	 position: absolute;
}
 ul.bursts li::after {
	 content: "";
	 width: 3px;
	 height: 50%;
	 background: #222;
	 position: absolute;
	 bottom: 50%;
	 animation: lightBursts 1.5s ease-in-out 0s infinite;
}
 ul.bursts li.deg0 {
	 -moz-transform: rotate(0deg);
	 -o-transform: rotate(0deg);
	 -ms-transform: rotate(0deg);
	 -webkit-transform: rotate(0deg);
	 transform: rotate(0deg);
}
 ul.bursts li.deg36 {
	 -moz-transform: rotate(36deg);
	 -o-transform: rotate(36deg);
	 -ms-transform: rotate(36deg);
	 -webkit-transform: rotate(36deg);
	 transform: rotate(36deg);
}
 ul.bursts li.deg72 {
	 -moz-transform: rotate(72deg);
	 -o-transform: rotate(72deg);
	 -ms-transform: rotate(72deg);
	 -webkit-transform: rotate(72deg);
	 transform: rotate(72deg);
}
 ul.bursts li.deg108 {
	 -moz-transform: rotate(108deg);
	 -o-transform: rotate(108deg);
	 -ms-transform: rotate(108deg);
	 -webkit-transform: rotate(108deg);
	 transform: rotate(108deg);
}
 ul.bursts li.deg144 {
	 -moz-transform: rotate(144deg);
	 -o-transform: rotate(144deg);
	 -ms-transform: rotate(144deg);
	 -webkit-transform: rotate(144deg);
	 transform: rotate(144deg);
}
 ul.bursts li.deg180 {
	 -moz-transform: rotate(180deg);
	 -o-transform: rotate(180deg);
	 -ms-transform: rotate(180deg);
	 -webkit-transform: rotate(180deg);
	 transform: rotate(180deg);
}
 ul.bursts li.deg216 {
	 -moz-transform: rotate(216deg);
	 -o-transform: rotate(216deg);
	 -ms-transform: rotate(216deg);
	 -webkit-transform: rotate(216deg);
	 transform: rotate(216deg);
}
 ul.bursts li.deg252 {
	 -moz-transform: rotate(252deg);
	 -o-transform: rotate(252deg);
	 -ms-transform: rotate(252deg);
	 -webkit-transform: rotate(252deg);
	 transform: rotate(252deg);
}
 ul.bursts li.deg288 {
	 -moz-transform: rotate(288deg);
	 -o-transform: rotate(288deg);
	 -ms-transform: rotate(288deg);
	 -webkit-transform: rotate(288deg);
	 transform: rotate(288deg);
}
 ul.bursts li.deg324 {
	 -moz-transform: rotate(324deg);
	 -o-transform: rotate(324deg);
	 -ms-transform: rotate(324deg);
	 -webkit-transform: rotate(324deg);
	 transform: rotate(324deg);
}
 @keyframes lightBursts {
	 10% {
		 height: 0%;
		 bottom: 80%;
	}
	 35% {
		 height: 20%;
		 bottom: 80%;
	}
	 0%, 90%, 100% {
		 height: 0%;
		 bottom: 100%;
	}
}

 .bubble i {
	 font-size: 2.5em;
	 position: absolute;
	 color: #222;
}
 section#lightbulb .bursts li::after {
	 background: #efb73e;
}
 section#lightbulb i:nth-of-type(n) {
	 color: #efb73e;
}
 section#lightbulb i:nth-of-type(n).lightglow {
	 animation: lightGlow 1.5s ease-in-out 0s infinite;
}
 @keyframes lightGlow {
	 0%, 15%, 90%, 100% {
		 opacity: 0.2;
	}
	 35%, 45% {
		 opacity: 1;
	}
}
 section#cursor .bursts {
	 left: 45%;
}
 section#cursor .bursts li::after {
	 background: #d3d3d3;
}
 section#cursor i:nth-of-type(n) {
	 color: #d3d3d3;
	 -moz-transform: rotate(-10deg);
	 -o-transform: rotate(-10deg);
	 -ms-transform: rotate(-10deg);
	 -webkit-transform: rotate(-10deg);
	 transform: rotate(-10deg);
	 text-shadow: 4px 1px #545454;
}
 section#cursor i:nth-of-type(n).cursorclick {
	 animation: cursorClick 1.5s ease-in-out 0s infinite;
}
 @keyframes cursorClick {
	 0%, 30%, 100% {
		 text-shadow: 4px 1px #545454;
		 margin-top: 20%;
		 margin-left: 5%;
	}
	 15% {
		 text-shadow: 1px 0px #545454;
		 margin-top: 17%;
		 margin-left: 0%;
	}
}
 section#memo .bursts {
	 left: 43%;
	 z-index: 0;
}
 section#memo .bursts li::after {
	 background: #df382c;
}
 section#memo i:nth-of-type(1) {
	 color: BurlyWood;
	 z-index: -1;
}
 section#memo i:nth-of-type(1)::after {
	 content: "";
	 width: 8px;
	 position: absolute;
	 top: 25%;
	 left: 21%;
	 border-top: 3px solid #df382c;
}
 section#memo i:nth-of-type(2) {
	 font-size: 90%;
	 left: 35%;
	 top: 1%;
	 color: #df382c;
}
 section#memo i:nth-of-type(2)::after {
	 font-family: "Font Awesome 5 Free";
	 font-weight: 900;
	 content: "\f077";
	 font-size: 130%;
	 position: absolute;
	 top: 4px;
	 left: 1px;
}
 section#memo i:nth-of-type(2).tiebow {
	 animation: tieBow 1.5s ease-in-out 0s infinite;
}
 @keyframes tieBow {
	 0%, 100% {
		 -moz-transform: scale(0);
		 -o-transform: scale(0);
		 -ms-transform: scale(0);
		 -webkit-transform: scale(0);
		 transform: scale(0);
	}
	 15%, 90% {
		 -moz-transform: scale(1.2);
		 -o-transform: scale(1.2);
		 -ms-transform: scale(1.2);
		 -webkit-transform: scale(1.2);
		 transform: scale(1.2);
	}
	 25%, 80% {
		 -moz-transform: scale(1);
		 -o-transform: scale(1);
		 -ms-transform: scale(1);
		 -webkit-transform: scale(1);
		 transform: scale(1);
	}
}
 section#launch .bursts {
	 left: 46%;
	 top: 15%;
}
 section#launch .bursts li::after {
	 background: #ffa500;
}
 section#launch i:nth-of-type(n) {
	 color: #20b5e9;
	 -moz-transform: rotate(-10deg);
	 -o-transform: rotate(-10deg);
	 -ms-transform: rotate(-10deg);
	 -webkit-transform: rotate(-10deg);
	 transform: rotate(-10deg);
	 text-shadow: 4px 1px #545454;
}
 section#launch i:nth-of-type(n).takeoff {
	 animation: takeOff 1.5s ease-in-out 0s infinite;
}
 @keyframes takeOff {
	 0%, 100% {
		 margin-top: 25%;
		 margin-left: 0%;
	}
	 30% {
		 margin-top: 15%;
		 margin-left: 15%;
	}
}
 section#media .bursts {
	 left: 50%;
	 top: 8%;
}
 section#media .bursts li::after {
	 background: #222;
}
 section#media i:nth-of-type(n) {
	 color: #222;
}
 section#media audio {
	 width: 100%;
}
 section#error .bursts {
	 top: 9%;
}
 section#error .bursts li::after {
	 background: #df382c;
}
 section#error i:nth-of-type(1) {
	 z-index: 0;
	 color: #222;
}
 section#error i:nth-of-type(1)::after {
	 content: "";
	 background: lightblue;
	 width: 100%;
	 height: 75%;
	 position: absolute;
	 left: 0;
	 z-index: -1;
}
 section#error i:nth-of-type(2) {
	 font-size: 125%;
	 color: #df382c;
	 top: 6.5%;
	 z-index: 0;
}
 section#error i:nth-of-type(2)::after {
	 content: "";
	 width: 0;
	 height: 0;
	 border-left: 0.5em solid transparent;
	 border-right: 0.5em solid transparent;
	 border-bottom: 0.9em solid white;
	 position: absolute;
	 left: 5%;
	 top: 5%;
	 z-index: -1;
}
 section#error i:nth-of-type(2).errorpop {
	 animation: errorPop 1.5s ease-in-out 0s infinite;
}
 @keyframes errorPop {
	 0%, 15%, 90%, 100% {
		 -moz-transform: scale(0.7);
		 -o-transform: scale(0.7);
		 -ms-transform: scale(0.7);
		 -webkit-transform: scale(0.7);
		 transform: scale(0.7);
	}
	 35%, 45% {
		 -moz-transform: scale(0.9);
		 -o-transform: scale(0.9);
		 -ms-transform: scale(0.9);
		 -webkit-transform: scale(0.9);
		 transform: scale(0.9);
	}
}
 section#rate .bursts li::after {
	 background: #772953;
}
 section#rate i:nth-of-type(1), section#rate i:nth-of-type(2) {
	 color: #772953;
	 font-size: 1.5em;
	 margin-right: 2.5em;
	 -webkit-animation-delay: 0s;
	 -moz-animation-delay: 0s;
	 animation-delay: 0s;
}
 section#rate i:nth-of-type(3), section#rate i:nth-of-type(4) {
	 color: #772953;
	 font-size: 1.5em;
	 -webkit-animation-delay: 0.1s;
	 -moz-animation-delay: 0.1s;
	 animation-delay: 0.1s;
}
 section#rate i:nth-of-type(5), section#rate i:nth-of-type(6) {
	 color: #772953;
	 font-size: 1.5em;
	 margin-left: 2.5em;
	 -webkit-animation-delay: 0.2s;
	 -moz-animation-delay: 0.2s;
	 animation-delay: 0.2s;
}
 section#rate .starglow {
	 animation: starGlow 1.5s ease-in-out 0s infinite;
}
 @keyframes starGlow {
	 0%, 10%, 70%, 100% {
		 opacity: 0;
	}
	 15%, 65% {
		 opacity: 1;
	}
}
 section#status-question .bursts {
	 top: 3%;
}
 section#status-question .bursts li::after {
	 background: #20b5e9;
}
 section#status-question i:nth-of-type(n) {
	 color: #20b5e9;
	 font-size: 2em;
}
 section#status-question .info p:first-letter {
	 color: #20b5e9;
	 font-weight: bolder;
}
 section#status-warning .bursts {
	 top: 3%;
}
 section#status-warning .bursts li::after {
	 background: #efb73e;
}
 section#status-warning i:nth-of-type(n) {
	 color: #efb73e;
	 font-size: 2em;
}
 section#status-warning .info p > span {
	 background: #efb73e;
	 padding: 0px 2px;
}
 section#status-danger .bursts {
	 top: 3%;
}
 section#status-danger .bursts li::after {
	 background: #df382c;
}
 section#status-danger i:nth-of-type(n) {
	 color: #df382c;
	 font-size: 2em;
}
 section#status-danger .info ul {
	 list-style-type: none;
}
 section#status-danger .info ul li::before {
	 font-family: "Font Awesome 5 Free";
	 font-weight: 900;
	 content: "\f00d";
	 color: #df382c;
	 margin-right: 0.5em;
}
 section#status-info .bursts {
	 top: 3%;
}
 section#status-info .bursts li::after {
	 background: #38b44a;
}
 section#status-info i:nth-of-type(n) {
	 color: #38b44a;
	 font-size: 2em;
}
 section#status-info .info a:hover {
	 color: #38b44a;
}
 section#thumb .bursts {
	 left: 52%;
}
 section#thumb .bursts li::after {
	 background: #772953;
}
 section#thumb i:nth-of-type(n) {
	 color: #772953;
	 font-size: 2em;
}
 section#thumb i:nth-of-type(n).thumbsup {
	 animation: thumbsUp 1.5s ease-in-out 0s infinite;
}
 @keyframes thumbsUp {
	 0%, 100% {
		 -moz-transform: rotate(-25deg) scale(0.8);
		 -o-transform: rotate(-25deg) scale(0.8);
		 -ms-transform: rotate(-25deg) scale(0.8);
		 -webkit-transform: rotate(-25deg) scale(0.8);
		 transform: rotate(-25deg) scale(0.8);
	}
	 20%, 90% {
		 -moz-transform: rotate(0deg) scale(1);
		 -o-transform: rotate(0deg) scale(1);
		 -ms-transform: rotate(0deg) scale(1);
		 -webkit-transform: rotate(0deg) scale(1);
		 transform: rotate(0deg) scale(1);
	}
	 10% {
		 -moz-transform: rotate(10deg) scale(1.2);
		 -o-transform: rotate(10deg) scale(1.2);
		 -ms-transform: rotate(10deg) scale(1.2);
		 -webkit-transform: rotate(10deg) scale(1.2);
		 transform: rotate(10deg) scale(1.2);
	}
}
 section#load .bursts {
	 width: 20px;
}
 section#load .bursts li::after {
	 background: #d3d3d3;
	 -moz-transform: rotate(90deg);
	 -o-transform: rotate(90deg);
	 -ms-transform: rotate(90deg);
	 -webkit-transform: rotate(90deg);
	 transform: rotate(90deg);
}
 section#load i:nth-of-type(1) {
	 font-size: 0.75em;
	 color: #20b5e9;
	 margin-left: -30px;
	 -webkit-animation-delay: 0s;
	 -moz-animation-delay: 0s;
	 animation-delay: 0s;
}
 section#load i:nth-of-type(2) {
	 font-size: 0.75em;
	 color: #20b5e9;
	 margin-left: 0px;
	 -webkit-animation-delay: 0.2s;
	 -moz-animation-delay: 0.2s;
	 animation-delay: 0.2s;
}
 section#load i:nth-of-type(3) {
	 font-size: 0.75em;
	 color: #20b5e9;
	 margin-left: 30px;
	 -webkit-animation-delay: 0.4s;
	 -moz-animation-delay: 0.4s;
	 animation-delay: 0.4s;
}
 section#load .trackup {
	 animation: trackUp 1.5s ease-in-out 0s infinite;
}
 @keyframes trackUp {
	 0%, 10%, 70%, 100% {
		 margin-top: 28%;
	}
	 40% {
		 margin-top: 20%;
	}
}
 section#coffee .bursts {
	 margin-left: -2px;
}
 section#coffee .bursts li::after {
	 background: #d3d3d3;
}
 section#coffee i:nth-of-type(n) {
	 color: #53b22b;
}
 section#coffee .info p > b {
	 color: SaddleBrown;
}
 section#highfive .bursts {
	 z-index: 0;
}
 section#highfive .bursts li::after {
	 background: turquoise;
}
 section#highfive i:nth-of-type(1) {
	 color: SaddleBrown;
	 z-index: -1;
	 margin-left: -30px;
	 -moz-transform: rotate(-25deg);
	 -o-transform: rotate(-25deg);
	 -ms-transform: rotate(-25deg);
	 -webkit-transform: rotate(-25deg);
	 transform: rotate(-25deg);
}
 section#highfive i:nth-of-type(1)::after {
	 content: "";
	 width: 0.5em;
	 height: 0.4em;
	 background: SaddleBrown;
	 border-radius: 0 0 25% 25%;
	 position: absolute;
	 bottom: -0.3em;
	 left: 0.3em;
}
 section#highfive i:nth-of-type(1).highfive {
	 animation: highFiveLeft 1.5s ease-in-out 0s infinite;
}
 @keyframes highFiveLeft {
	 0%, 70%, 100% {
		 margin-top: 20%;
		 margin-left: -40px;
		 -moz-transform: rotate(-15deg) scale(0.7);
		 -o-transform: rotate(-15deg) scale(0.7);
		 -ms-transform: rotate(-15deg) scale(0.7);
		 -webkit-transform: rotate(-15deg) scale(0.7);
		 transform: rotate(-15deg) scale(0.7);
	}
	 10% {
		 margin-top: 20%;
		 margin-left: -50px;
		 -moz-transform: rotate(-25deg) scale(0.7);
		 -o-transform: rotate(-25deg) scale(0.7);
		 -ms-transform: rotate(-25deg) scale(0.7);
		 -webkit-transform: rotate(-25deg) scale(0.7);
		 transform: rotate(-25deg) scale(0.7);
	}
	 15%, 30% {
		 margin-top: 5%;
		 margin-left: -5px;
		 -moz-transform: rotate(0deg) scale(1);
		 -o-transform: rotate(0deg) scale(1);
		 -ms-transform: rotate(0deg) scale(1);
		 -webkit-transform: rotate(0deg) scale(1);
		 transform: rotate(0deg) scale(1);
	}
}
 section#highfive i:nth-of-type(2) {
	 color: BurlyWood;
	 z-index: 1;
}
 section#highfive i:nth-of-type(2)::after {
	 content: "";
	 width: 0.5em;
	 height: 0.4em;
	 background: BurlyWood;
	 border-radius: 0 0 25% 25%;
	 position: absolute;
	 bottom: -0.3em;
	 left: 0.3em;
}
 section#highfive i:nth-of-type(2).highfive {
	 animation: highFiveRight 1.5s ease-in-out 0s infinite;
}
 @keyframes highFiveRight {
	 0%, 70%, 100% {
		 margin-top: 25%;
		 margin-left: 40px;
		 -moz-transform: rotate(15deg) scale(1.1);
		 -o-transform: rotate(15deg) scale(1.1);
		 -ms-transform: rotate(15deg) scale(1.1);
		 -webkit-transform: rotate(15deg) scale(1.1);
		 transform: rotate(15deg) scale(1.1);
	}
	 10% {
		 margin-top: 25%;
		 margin-left: 50px;
		 -moz-transform: rotate(25deg) scale(1.1);
		 -o-transform: rotate(25deg) scale(1.1);
		 -ms-transform: rotate(25deg) scale(1.1);
		 -webkit-transform: rotate(25deg) scale(1.1);
		 transform: rotate(25deg) scale(1.1);
	}
	 15%, 30% {
		 margin-top: 5%;
		 margin-left: 5px;
		 -moz-transform: rotate(0deg) scale(1);
		 -o-transform: rotate(0deg) scale(1);
		 -ms-transform: rotate(0deg) scale(1);
		 -webkit-transform: rotate(0deg) scale(1);
		 transform: rotate(0deg) scale(1);
	}
}

.inline-size{
	line-height: 19px;
    margin-left: -58px;
    margin-top: 46px;}

.link{
	color: #fff;
	font-size: 12px;
	border: 1px solid #000;
	padding: 0px 4px;
 }
 .link:hover{background: #63c0f1;color:blue;}
 .cl-1{background-color: #5757b8;}
 .cl-2{background-color: #53ca53;}
 .cl-3{background-color: #1d9eb2;}
 .cl-4{background-color: #bc4c8f;}

.fa-tree{
	 /*animation: highFiveRight 1.5s ease-in-out 0s infinite;*/
	 animation: treegrow 3.5s ease-in-out 0s infinite;
	 color: green;

}

@keyframes treegrow {
	 0%, 100% {
	 	  /*margin-top: 30px;*/
		 -moz-transform: rotate(-25deg) scale(0.8);
		 -o-transform: rotate(-25deg) scale(0.8);
		 -ms-transform: rotate(-25deg) scale(0.8);
		 -webkit-transform: rotate(-25deg) scale(0.8);
		 transform: rotate(-35deg) scale(0);
	}
	 20%, 90% {
		 -moz-transform: rotate(0deg) scale(1);
		 -o-transform: rotate(0deg) scale(1);
		 -ms-transform: rotate(0deg) scale(1);
		 -webkit-transform: rotate(0deg) scale(1);
		 transform: rotate(0deg) scale(1);
	}
	 10% {
	 	font-size: 50px;
		 -moz-transform: rotate(10deg) scale(1.2);
		 -o-transform: rotate(10deg) scale(1.2);
		 -ms-transform: rotate(10deg) scale(1.2);
		 -webkit-transform: rotate(10deg) scale(1.2);
		 transform: rotate(10deg) scale(1.2);
	}
}
.fa-person-praying::before{
	font-size: 35px;
    line-height: 116px;
    margin-left: -20px;
    color: #e19d80;
    filter: drop-shadow(3px 3px 2px brown);
}
.fa-cloud::before{
	color: saddlebrown;
    font-stretch: expanded;
    font-size: 15px;
    position: absolute;
    top: 52px;
}
.two::before{

}
.fa-seedling::before{
	font-size: 35px;
    background: -webkit-linear-gradient(#5cce76, #c86a19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 83px;
    padding-left: 22px;
	 animation: treegrow 3.5s ease-in-out 0s infinite;

}


/*gif animation */
img.releted.images {
    height: 77px;
    max-height: 77px;
}

p {
    text-transform: capitalize;
}