@charset "UTF-8";
/* CSS Document */
/*swatch book:
 row 1 colors:
 green1: #00cc99;
 green2: #00e6b8;
 green3: #66ff66;
 grey: #222;
 off-white: #f2f2f2;
 0ff-white2: #e4e4e4;
 pink:  #ff9999; 

*/


/* Rules for page layout and SVG ani-icons project */

#document-icon1 .cls-1, #document-icon1  .cls-8 {
  fill: none;
}
#document-icon1 .cls-2 {
  isolation: isolate;
}
#document-icon1 .cls-3 {
  fill: #e8636f;
}
#document-icon1 .cls-4 {
  opacity: 0.35;
  mix-blend-mode: multiply;
}
#document-icon1 .cls-5 {
  clip-path: url(#clip-path);
}
#document-icon1 .cls-6 {
  fill: url(#linear-gradient);
}
#document-icon1 .cls-7 {
  fill: #f2f2f2;
}
#document-icon1 .cls-7, #document-icon1  .cls-8 {
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.81px;
}
#document-icon1 .cls-9 {
  fill: #fff;
}
#document-icon1 .cls-10 {
  fill: #fff;
}
/*----- SVG global container ---- */
svg-container {
  width: 50%;
  margin: 0 3em;
}
/*==== animation styling ===*/
#document-icon1.move {
  pointer-events: all;
  cursor: pointer;
}
/* change individual styles */
#icon-bg-color .cls-3 {
  /* fill: #e8636f; change circle bg here */
  fill: #00cc99;
  transition: all 2s ease;
}
#document-icon1.move:hover #icon-bg-color .cls-3 {
  /*fill: #F0949C;*/
  fill: #00e6b8;
}
#icon-page #page .cls-7 {
  fill: #f2f2f2; /*change page color here */
}
#icon-page #lines .cls-8 {
  stroke: #000;
  stroke-width: 2.81px;
}
#icon-arrow #arrow-bg .cls-9 {
  fill: #000; /*change bg arrow here */
}
#document-icon1.move:hover #arrow-bg .cls-9 {
  /* fill: #000; default */
  fill: #66ff66;
}
#document-icon1.move #arrow-bg #arrow {
  fill: #fff; /*change arrow color here */
}
#document-icon1.move:hover #arrow {
  fill: #000;
}
/* for the animation with transition and keyframes */
#document-icon1.move:hover #arrow {
  animation: upDown 0.8s ease-in-out infinite forwards;
}
@keyframes upDown {
  0% {
    transform: translate(-5.03px, 0)
  }
  50% {
    transform: translate(-5.03px, -5px)
  }
  100% {
    transform: translate(-5.03px, 0)
  }
}
/* ----- Maintenance icon1 ----- */
/*-- imported styles ---*/

#maintenance-icon1  .cls-1 {
        isolation: isolate;
      }

#maintenance-icon1  .cls-2 {
        fill: #22b573;
	    
      }

#maintenance-icon1  .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient);
      }

#maintenance-icon1  .cls-4 {
        fill: #e6e6e6;
      }

#maintenance-icon1  .cls-5, .cls-8 {
        fill: none;
      }

#maintenance-icon1  .cls-5, #maintenance-icon1 .cls-6, #maintenance-icon1  .cls-8 {
        stroke: #222;
        stroke-width: 2px;
      }

#maintenance-icon1  .cls-5 {
        stroke-miterlimit: 10;
      }

#maintenance-icon1  .cls-6 {
        fill: #fff;
	    stroke:#222;
	    stroke-weight: 2px;
      }

#maintenance-icon1 .cls-6, #maintenance-icon1 .cls-8 {
        stroke-linejoin: round;
      }

#maintenance-icon1  .cls-7 {
        fill: #e2ec55;
      }

#maintenance-icon1  .cls-8 {
        stroke-linecap: round;
      }

/* ---- styling ----- */

#maintenance-icon1.move {
	 pointer-events: all;
  cursor: pointer;
}

#maintenance-icon1 #h1-outline .cls-6{
	stroke: #222;
	stroke-weight: 2px;
}


#m-tools1-bg .cls-2{ /* change bg fill for maintenance tool 1 */
	 /*  fill: #999; default */
	   fill: #00cc99;
}
#maintenance-icon1.move:hover #m-tools1-bg .cls-2{
	/*fill: #00cc99; */
	fill: #00e6b8;
}


/* just the head bg 
#hammer-bg .cls-4:nth-of-type(1) {
        fill: #e6e6e6;
	    fill: lightgreen;
      }
*/

#hammer-bg .cls-4 {
        fill: #e6e6e6;
	    
      }
#maintenance-icon1.move:hover #hammer-bg .cls-4 {
	 fill: #222; /* change hammer handle color */

}
#maintenance-icon1.move:hover #hammer-bg .cls-4:nth-of-type(1) {
      /*  fill: #e6e6e6;*/
	    fill: #e6e6e6;
      }

#h1-outline .cls-6{
	 
	 stroke: #222;
        stroke-width: 2px;
}

#maintenance-icon1 #handle-bg.cls-7{ /*handle color */
	 /* fill: #666; */
	   fill: #222; 
	transition: fill 2s ease;
}
#maintenance-icon1.move:hover #handle-bg.cls-7{ /*handle color */
	 /* fill: #666; */
	   fill: #66ff66;
}
#decor-lines .cls-8{
	/*  stroke: #222; */
	    stroke: #e4e4e4;
        stroke-width: 2px;
	transition: stroke 2s ease;
}
#maintenance-icon1.move:hover #decor-lines .cls-8{
	 stroke: #222;
}
/* --- for animation --*/

#maintenance-icon1.move #hammer1{
	/* transform: translate(-5px,  -5px) */
	transform-origin: 50% 50%;
}

#maintenance-icon1.move:hover #hammer1{
	animation: giro1 1.7s ease-in-out forwards;
}
@keyframes giro1{
	from{ 
	 transform: rotate(0);
	}
	to{
	 transform: rotate(-3turn);
	}
}

/*---- Regiser Icon1 ---*/
/*imported styles ---*/

#register-icon1 .cls-1 {
        isolation: isolate;
      }
#register-icon1   .cls-2 {
        fill: #cb86ef;
      }

#register-icon1  .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient3);
      }

 #register-icon1 .cls-4, #register-icon1  .cls-6 {
        fill: #f2f2f2;
	    stroke: none;
      }

 #register-icon1 .cls-4, #register-icon1  .cls-5, #register-icon1 .cls-7 {
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.81px;
      }

   #register-icon1 .cls-5 {
        fill: none;
      }

#register-icon1 .cls-6 {
	stroke: #f2f2f2;
	stroke-weight: 0;
}

   #register-icon1  .cls-7 {
        fill: #fff;
      }

/* ---- 4 styling --- */

#register-icon1.move{
	 pointer-events: all;
  cursor: pointer;
}

#bg-circle .cls-2 {
        fill: #00cc99; /* change circle bg here*/
	    transition: fill 2s ease;
      }
#register-icon1.move:hover #bg-circle .cls-2 {
        fill: #00e6b8; /* change circle bg here*/
	   
      }

#register-icon1  #white-patch .cls-6{
	stroke: #e4e4e4;
	stroke-weight: none;
}

#page2-bg .cls-4, .cls-6 {
        fill: #f2f2f2;
	    stroke: none;
      }
#register-icon1 #pencil-body.cls-7{
	fill: #fff;
	 stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.81px;
	
	/*transition: fill 2s ease;*/
}

/* ----- for animaiton --- */

#register-icon1.move #pencil-group{
	transform-origin: 50% 60%;
}
#register-icon1.move:hover #pencil-body.cls-7{
	fill: #66ff66;

}

#register-icon1.move:hover #pencil-group{
	animation: write1 0.7s ease-in-out 2 forwards;
}
@keyframes write1{
	0%{
		transform: translate(0);	
	}
	50%{
		transform: translate(-5px);
	}
	100%{
		transform: translate(0);

	}
}


/* ---- Thumbs Up icon1 ------ */
/* imported styles */

      #thumbs-up-icon1 .cls-1 {
        isolation: isolate;
      }

       #thumbs-up-icon1 .cls-2 {
        fill: #f93;
      }

       #thumbs-up-icon1 .cls-3 {
        fill: none;
      }

       #thumbs-up-icon1 .cls-4 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient4);
      }

       #thumbs-up-icon1 .cls-5, #thumbs-up-icon1 .cls-6 {
        fill: #f2f2f2;
        stroke: #000;
        stroke-width: 2.6px;
      }

       #thumbs-up-icon1 .cls-5 {
        stroke-linejoin: round;
      }

       #thumbs-up-icon1 .cls-6 {
        stroke-miterlimit: 10;
      }
/*---- 4 styling --- */

#thumbs-up-icon1.move{
	 pointer-events: all;
  cursor: pointer;
	
}
#th-circle-bg .cls-2 {
        fill: #00cc99;
	    transition: fill 2s ease;
}

#thumbs-up-icon1.move:hover #th-circle-bg .cls-2 {
	fill: #00e6b8;
}


#hand1.cls-5 {
        fill: #f2f2f2;
        stroke: #000;
        stroke-width: 2.6px;
	    transition: fill 2s ease;
      }
#thumbs-up-icon1.move:hover #hand1.cls-5 {
        fill: #66ff66;
       
      }

#puno1.cls-6 {
        fill: #f2f2f2; /*change color here*/
        stroke: #000;
        stroke-width: 2.6px;
      }

#thumbs-up-icon1.move:hover #puno1.cls-6 {
        fill: #000; /*change color here*/
        
      }

/* -- for the animation --*/

#thumbs-up-icon1.move #hand1-group {
	transform-origin: bottom left;
	
}

#thumbs-up-icon1.move:hover #hand1-group{
	animation: thumbs-up 1.2s ease-in-out 2 forwards;
}
@keyframes thumbs-up{
	0%{
		transform: rotateZ(0deg);
	}
	50%{
		transform: rotateZ(-5deg);
	}
	100%{
		transform: rotateZ(0deg);
	}
}

/* ++++++++++++ Javascript Animated Icons ++++++++++++ */

/* ------ IconR1I1 Imported Style ------*/

      #house-heart-icon1 .cls-1 {
        isolation: isolate;
      }

      #house-heart-icon1 .cls-2 {
        fill: #333; /*circle-bg here */
      }

      #house-heart-icon1 .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient6);
      }

      #house-heart-icon1 .cls-4 {
        fill: #f2f2f2;
      }

      #house-heart-icon1 .cls-5 {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.3px;
      }

      #house-heart-icon1 .cls-5, #house-heart-icon1 .cls-6 {
        stroke: #000;
      }

      #house-heart-icon1 .cls-6 {
        fill: #ff5050;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }

      #house-heart-icon1 .cls-7 {
		  fill: #000;
        fill-rule: evenodd;
      }
  /* ---- 4Icon Styling ---*/

#house-heart-icon1.move{
	 pointer-events: all;
 	 cursor: pointer;
}

#house-heart-icon1 .cls-2{
	fill: #ff9999; /*change circle-bg here */
}

#house-heart-icon1 #heart-bg-grp .cls-7{
	fill: #FFF;
}

/* ++++++++ Check list icon 1 +++++++ */
/* imported styles */

      #check-list-icon1 .cls-1 {
        isolation: isolate;
      }

      #check-list-icon1 .cls-2 {
        fill: #666;
      }

      #check-list-icon1 .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient7);
      }

      #check-list-icon1 .cls-4, #check-list-icon1 .cls-6 {
        fill: #f2f2f2;
      }

      #check-list-icon1 .cls-4, #check-list-icon1 .cls-5 {
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.0px;
      }

      #check-list-icon1 .cls-5 {
        fill: none;
      }

      #check-list-icon1 .cls-7 {
        fill: #fff;
      }

	#the-tick{
	fill: blue;
	}
 /* ---- 4 Styling ---*/

	#check-list-icon1.move{
	pointer-events: all;
	cursor: pointer;
	}
	 #check-list-icon1 .cls-2 {
        fill: #ff9999; /*change circ-bg here*/
      }

	#tick-bg {
		 /*outline*/
	}
	#tick-bg .cls-7{
		/*fill: green;*/
	}

	#check-list-icon1 #the-tick {
		fill: red;
	}







/* --- Short Lets Icon---*/
/* --- Imported Styles ---*/
 
      #short-lets-icon1 .cls-1 {
        isolation: isolate;
		  
      }

       #short-lets-icon1 .cls-2 {
        fill: #666;
      }

       #short-lets-icon1 .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient8);
      }

       #short-lets-icon1 .cls-4 {
        fill: #f2f2f2;
      }

       #short-lets-icon1 .cls-4,  #short-lets-icon1 .cls-5 {
        fill-rule: evenodd;
      }

       #short-lets-icon1 .cls-6 {
        fill: #fff;
      }

       #short-lets-icon1 .cls-7,  #short-lets-icon1 .cls-8 {
        fill: none;
        stroke-linecap: round;
        stroke-miterlimit: 10;
      }

       #short-lets-icon1 .cls-7 {
        stroke: #ff7aa7;
        stroke-width: 0.7px;
      }

       #short-lets-icon1 .cls-8 {
        stroke: #000;
        stroke-width: 1.7px;
      }
 /* --- 4Styling --- */

#short-lets-icon1.move{
	pointer-events: all;
	cursor: pointer;
	transform-origin: center center;
}

 #short-lets-icon1 .cls-2 {
        fill: #ff9999; /*change circle-bg here*/
	 
      }

#sec-bar .cls-7{
	display: none;
}

#min-bar .cls-8{
	
}
#hour-bar .cls-9{
	
}

/* ==== for Javascript code ===*/
/* short lets icon*/

#hourmark-grp{
	 
}

#hour-bar .cls-9,
#min-bar .cls-8,
#sec-bar .cls-7{
   transform-origin: center center;
	transition: transform .5s ease-in-out;
	
}


/* ========= Home  Icon ===== */
/*----- imported styles ----*/

      #house-value-icon1 .cls-1 {
        isolation: isolate;
		  
      }

      #house-value-icon1 .cls-2 {
        fill: #666;
      }

      #house-value-icon1 .cls-3 {
        opacity: 0.33;
        mix-blend-mode: multiply;
        fill: url(#linear-gradient9);
      }

      #house-value-icon1 .cls-4 {
        fill: #f2f2f2;
      }

      #house-value-icon1 .cls-5 {
        fill: none;
      }

      #house-value-icon1 .cls-5, #house-value-icon1 .cls-6 {
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
      }

      #house-value-icon1 .cls-6 {
        fill: #fff;
      }
#house-value-icon1 #circle-bg0{
	fill:#ff9999; 
} 
#house-value-icon1  #shield-bg{
	/*fill:#ff9999; */
	fill: #ff5050;
}
#house-value-icon1 #lock-line,
#house-value-icon1 #lock{
	fill: #fff;
}



/* ====== Layout content ===== */
#footer-content {
  background: #999;
}
#footer-content ul {
  padding: 0 0 0 .9em;
}
#footer-content li, #footer-content p {
  font-size: .9em;
  color: black;
}