.flex_plan {
            display: flex;
            flex-wrap: wrap;
            height: 100vh;
            margin: 70px 0 0 0;position: relative;
         
        }
.flex_plan::before { content: ""; position: absolute;   background: url("SVG/text.svg") no-repeat center;width: 30em;
  height: 30em;
  left: 0;
  right: 0;
  top: 0; bottom: 0;  margin: auto;  background-size: contain;}
        .section_flex {
            flex: 1 1 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            box-sizing: border-box;
            text-align: center; font-size:15.5px; line-height:20px;
        }
        .info-container_flex {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            color: #fff;
            padding: 0px;
            border-radius: 5px;
            z-index: 10;
            left: 0;
            pointer-events: none;float: left;
  margin: 0;
        }
        .info-container_flex p {
            font-size: 15px; padding: 5px 0
        }
        .info {
            margin: 5px;
        }
.info  span{ padding: 0px 0}
 .info p{line-height: 22px;}

.info .title {        	padding: 5px 35px;}
        .shape {
            width: 500px;
            height: 500px;
            background-color: #007BFF;
            cursor: pointer;
        }
        #top-left .shape {
            mask-image: url("SVG/blue.svg");
            background-color: #41a8c1;
            display: block;
            width: 95%;
            height: 95%;
            mask-repeat: no-repeat;
            background-size: contain;
            mask-position: right 0px bottom 0px;
        }
        #top-left::before {
            content: "";
            background: url("SVG/school.svg") no-repeat bottom right;
            width: 40%;
           height: 65%;
  position: absolute;
  background-size: contain;
  right: 90px;
  bottom: 70px;
            z-index: 1;
            pointer-events: none;
        }
        #top-left .info .title {
            background: #41a8c1;
            padding: 5px 35px;
            border-radius: 50px;
            display: inline-block;
            float: left;
        }
        #top-left .info span {
            clear: both;
            float: left;
            color: #26596c;
        
            width: 100%;
            border-bottom: 1px solid #fff;
        }
        #top-left .info p {
            clear: both;
            float: left;
            color: #333;
            margin: 0;
       
            width: 80%;
        }
        #top-left .info {
            text-align: left;
            width: 50%;
            position: relative;
            display: flow-root;
        }
        #blue_1 {
            top: 0;
            right: 0;
            transform:translate(80%, -30%);
        }
        #blue_2 {
            top: 0;
            right: 0;
            transform: translate(30%, -60%);
        }
        #blue_3 {
            top: 0;
            right: 0;
            transform: translate(0%, -50%);
        }
       	
		
		
		#top-right .shape { mask-image: url("SVG/green.svg");
  background-color: #9cbd23;  display: block;  width: 95%;  height: 95%;
  mask-repeat: no-repeat;  background-size: contain; mask-position: left 0px bottom 0px;}
		
				
		#top-right::before { content: "";background: url("SVG/teenager.svg") no-repeat;width: 30%;
 height: 55%;
  position: absolute;
  background-size: contain;
  left: 50px;
  bottom: 70px;  z-index: 1;  pointer-events: none;}
	
		#top-right .info .title{ background: #9dc01e; border-radius: 50px;  display: inline-block; float: right;right: 0;
  position: relative;}
		#top-right .info span{ clear: both;float: right; color: #51702a;   width: 100%;  border-bottom: 1px solid #fff;text-align: right;}		
		#top-right .info p{ clear: both;color: #333;margin: 0;    width: 70%;float: right;text-align: left;}	
		#top-right .info {text-align: left;  width: 50%;position: relative;display: flow-root; float: right; margin-bottom:-10px; }
	
#green_1 {  transform:  translate(-90%, -75%);  }
#green_1 .title {}


#green_2 { transform: translate(-50%, -80%) }
#green_3 { transform: translate(-20%, -80%) }
#green_4 { transform: translate(0%, -90%) }
		
		
        #bottom-left .shape {
            mask-image: url("SVG/purple.svg");
            background-color: #7069a4;
            display: block;
            width: 95%;
            height: 95%;
            mask-repeat: no-repeat;
            background-size: contain;
            mask-position: right 0px top 0px;
        }

  
        #bottom-left::before {
            content: "";
            background: url("SVG/community.svg") no-repeat bottom right;
width: 30%;
  height: 65%;
  position: absolute;
  background-size: contain;
  right: 150px;
  bottom: 90px;
            z-index: 1;
            pointer-events: none;
        }
        #bottom-left .info .title {            background: #7169a5;            padding: 5px 35px;            border-radius: 50px;            display: inline-block;            float: left;        }
        #bottom-left .info span {            clear: both;           float: left;            color: #3c3372;            width: 100%;            border-bottom: 1px solid #fff;        }
        #bottom-left .info p {clear: both;float: left;color: #333;margin: 0;width: 80%;}
        #bottom-left .info {text-align: left;width: 50%;position: relative;display: flow-root;}
        #purple_1 { top: 0;  right: 0;  transform: translate(0%, 0%); }
        #purple_2 { top: 0;  right: 0; transform: translate(20%, 10%)}
        #purple_2 p {width: 90% !important;}
      
        #purple_3 {  top: 0;  right: 0; transform: translate(40%, 20%)} 
        #purple_3 p{width: 90% !important;}
       	













    #bottom-right .shape {  mask-image: url("SVG/pink.svg");            background-color: #f1958f;      display: block;
            width: 95%;            height: 95%;            mask-repeat: no-repeat;            background-size: contain;    mask-position: left 0px top 0px;}


	#bottom-right::before { content: "";background: url("SVG/family.svg") no-repeat;   position: absolute;  background-size: contain; left: 100px;  bottom: 130px;  z-index: 1;  pointer-events: none;  width: 34%;  height: 65%;}
	
	#bottom-right .info .title{ background: #f2958e; border-radius: 50px;  display: inline-block; float: right;right: 0%; position: relative}
	#bottom-right .info span{ clear: both;float: left; color: #8a3430;   width: 100%;  border-bottom: 1px solid #fff;text-align: right;}		
	#bottom-right .info p{ clear: both;color: #333;margin: 0;    width:75%;float: right;}	
	#bottom-right .info {text-align: left;  width: 50%;position: relative;display: flow-root; float: right; }

    #pink_1 { top: 0;  left: 0;  transform:translate(0%, 34%)}
    #pink_1 p{width: 75%;text-align: left;}

    #pink_2 { transform: translate(-20%, 33%); top: 0;  left: 0;}
    #pink_2 p {width: 75% !important;  text-align: left !important;}
    #pink_3 {  transform: translate(26%, 35%);  float: left !important;  width: 60% !important;}

/***/

.plan_intro h1 , .plan_goals h1 , .plan_scope h1{ color: #5a5655}
.plan_intro_l {float: left;  width: 50%;}
.plan_intro_l #pink_title {margin: 0 0 30px 0;}
.plan_intro_l .content { background: #efb91b; color: #fff; border-top-right-radius: 32px; border-bottom-right-radius: 32px; position: relative; padding: 20px 20px 20px 0;font-size: 20px;line-height: 40px;}
.plan_intro_l .content::before { content: ""; position: absolute; top: 0; left: -100%;background: #efb91b;width: 100%;
  height: 100%}
.plan_intro_r { float: left; width: 32%;margin: 0 0 0 50px;}	
.plan_intro_r img { border-radius: 16px}




.plan_goals { clear:both;padding: 40px 0;display: flow-root;}

.plan_goals #orange_title{ float: left}


.plan_goals .content { float: right; width: 70%; background: #f58221;  color: #fff;  border-top-left-radius: 32px;  border-bottom-left-radius: 32px;
  position: relative;  padding: 20px 0px 20px 20px;  font-size: 20px;line-height: 40px;}
.plan_goals .content::before { content: ""; position: absolute; top: 0; right: -100%;background: #f58221;width: 100%;
  height: 100%}

.plan_scope { clear: both}


#m_flex_plan { display: none}

@media only screen and (max-width: 1600px)  {
	#top-left .info {width: 70%;}	
	#blue_1 {transform: translate(30%, -30%);}
	#top-left .info span { width: 95%}
	#blue_2 {transform: translate(10%, -30%);  width: 60% !important;}
	#blue_2 span { width: 85% !important}
	#blue_3 {transform: translate(0%, -30%);  width: 55% !important;}
	#blue_3 span { width: 75% !important}
	#top-left .info p {width: 70%;}
	#top-left::before {width: 35%;  height: 50%;}
	.flex_plan::before { width: 25em;  height: 25em;}
	#top-right::before { width: 35%;  height: 46%;}
	#bottom-right::before {width: 33%;  height: 48%;}
	#bottom-left::before { 	width: 25%;  height: 53%;}
	#purple_1 span {  width: 80% !important}
	#purple_2 {transform: translate(10%, 10%);}
	#purple_3 {transform: translate(50%, 20%);}
	#bottom-right .info span { text-align: right;float: right;}
	#bottom-right .info .title { float: right; left: auto; right: 0} 
	
	#top-right .info p { width: 90%;}
	#green_4 span {width: 80% !important;}
	#green_4 p {width: 70% !important;}
	#green_3 {  transform: translate(-10%, -90%);}
	#green_3 span { width: 80% !important}
	#green_3 p { width: 70% !important}
	#green_2 {  transform: translate(-40%, -90%);}
	#green_2 p {width: 70% !important; }	
	
	#pink_1 span {width: 80% !important;}
	#pink_2 span {width: 80% !important;}

	.info-container_flex p { font-size: 12px;line-height: 19px;}
}


@media only screen and (max-width: 1200px)  {
	#top-left .shape {width: 85%;  height: 85%;position: absolute;  bottom: 10px;  right: 10px;}
	#top-right .shape {width: 85%;  height: 85%;position: absolute;  bottom: 10px;  left: 10px;}
	#bottom-left .shape {width: 85%;  height: 85%;position: absolute;  top: 10px;  right: 10px;}
	#bottom-right .shape {width: 85%;  height: 85%;position: absolute;  top: 10px;  left: 10px;}
	#top-left::before {    width: 40%;    height: 45%;  }
	#top-right::before {    width: 35%;    height: 40%;  }
    #bottom-left::before {    width: 23%;    height: 38%;bottom: 150px;  }	
    #bottom-right::before {  width: 36%;    height: 40%;    left: 80px;    bottom: 170px; }
	
    #top-left .info p {    width: 90%;  }
	#bottom-left .info p { width: 100%}
	#bottom-right .info p { width: 100%}
    #top-right .info p {    width: 100%;  }
	
    #top-left .info {    width: 80%;  }
	#blue_1,#blue_2,#blue_3 {    transform: translate(0%, 0%);  }
	
	#bottom-right .info {width: 50%;  }
	#pink_1 {transform: translate(0%, 0%);}
	#pink_2 {width: 70% !important;transform: translate(0%, 0%);}
	#pink_3 {  transform: translate(0%, 0%);  float: right !important;  width: 80% !important;}
	
	#top-right .info {width: 50%;}
	#green_1 {  transform: translate(0%, 0%);}
    #green_2 {    transform: translate(-10%, 0%);width: 40%;  }
	#green_2 span{width: 80% !important;}
    #green_3 {    transform: translate(0%, 0%); width: 60% !important; }
	#green_4 {  transform: translate(0%, 0%);}
	.info {  margin: 0;}
	
	
    #purple_2 {    transform: translate(0%, 10%);  }
    #purple_3 {    transform: translate(0%, 20%); width: 90% !important; }
	
	/***/
	.plan_intro_r {width: calc(50% - 50px)}
	.plan_intro_l .content {line-height: 30px;}
	.info-container_flex p { font-size: 10px;}
}

@media only screen and (max-width: 960px)  {
	.flex_plan {height: 100vh;}
	.info-container_flex {		display: block !important;}
    /*.flex_plan::before {    width: 500px;    height: 360px;    bottom: auto;position: relative;  }
	.section_flex { display: block; flex: auto;margin-bottom: 20px;}*/
	#top-left .info { width: 70%}
	
  /* #top-left::before {   width: 190px;    height: 210px;right: 20px;    bottom: 0;    top: 0;    margin: auto;}
	#top-left .shape {    width: 300px;    height: 300px;      bottom: 0;    right: 0;    top: 0;    margin: auto;  }*/
	.info-container_flex { position: relative;margin: 20px 0;}
	#top-right { width: 100%}
	 /* #top-right::before {  width: 190px;    height: 200px;  top: 0;    bottom: 0;    margin: auto;left: 20px;  }
	#top-right .shape {    width: 300px;  height: 300px;  bottom: 0;    left: 0;    top: 0;    margin: auto;  }*/

	#top-right .info { clear: both}
	#top-right .info p { text-align: right}
	
	#green_1 {width: 80% !important;}
	#green_2 {    transform: translate(0%, 0%);    width: 70% !important;  }
	#green_3 {width: 60% !important }
	#green_4 { width: 50% !important}
	#green_4 p {    width: 100% !important;  }
	
	#bottom-left { width: 100%}
	/*#bottom-left::before { width: 130px;    height: 200px;   bottom: 0;    top: 0;    margin: auto;right: 20px;  }
	#bottom-left .shape {    width: 300px;    height: 300px;     top: 0;    right: 0;    bottom: 0;    margin: auto;  }*/
	
	#purple_1 {width: 60% !important;}
	#purple_2 {    transform: translate(0%, 0%); width: 70% !important; }
	#purple_3 {		 transform: translate(0%, 0%);width: 80% !important;}
	
	#bottom-right { width: 100%}
	/*#bottom-right::before {    width: 190px;    height: 210px; 		  bottom: 0;top: 0;    margin: auto;left: 20px;}
    #bottom-right .shape {    width: 300px;    height: 300px;    top: 0;     bottom: 0;    margin: auto;  }*/
	
	#bottom-left .info { margin-bottom: 20px }
	
	#blue_1 { width: 80% !important}
	#blue_2 { width: 70% !important}
	#blue_3 { width: 60% !important}
	
	#pink_1 { width: 60% !important}
	#pink_1 p { text-align: right}
	#pink_2 { width: 70% !important}
	#pink_3 { width: 80% !important}
	
	
	
	#bottom-right .info {		text-align: right;}
	
	.plan_intro_l {width: 70%;  margin: 0 0 50px 0;}
	.plan_intro_r {    width: 100%; margin: 0  }
	
	.plan_intro_r img { width: 100%}
	.plan_goals .content {width: 70%;}
	
	#m_flex_plan {display: block !important; clear: both;    margin-bottom: 20px;}
	#m_flex_plan img {width: 80%;  height:100%; margin: auto}
	#w_flex_plan .info{ display: none !important; float: left; clear: both;}
	
	#blue_1,#blue_2,#blue_3 {clear: both;width: 100% !important;}
    #blue_1 .title, #blue_2 .title , #blue_3 .title {   background: #41a8c1;   padding: 5px 35px;border-radius: 50px;  display: inline-block;float: left; }
    #blue_1 span, #blue_2 span, #blue_3 span {    clear: both;float: left;color: #26596c;width: 100% !important;border-bottom: 1px solid #fff;}	
	#blue_1 p,#blue_2 p,#blue_3 p { float: left;width: 100% !important;}	
	
	#green_1,#green_2,#green_3,#green_4 { clear: both;width: 100% !important;}
    #green_1 .title, #green_2 .title , #green_3 .title, #green_4 .title {  background: #9dc01e;  border-radius: 50px;  display: inline-block;  float: left;  right: 0;  position: relative;  }
    #green_1 span, #green_2 span, #green_3 span , #green_4 span { clear: both;  float: left;  color: #51702a;  width: 100% !important;  border-bottom: 1px solid #fff;  text-align: left;}	
	#green_1 p,#green_2 p,#green_3 p ,#green_4 p { float: left; width: 100%}		
	
	
	#purple_1,#purple_2,#purple_3 {clear: both;width: 100% !important;}
    #purple_1 .title, #purple_2 .title , #purple_3 .title {  background: #7169a5;  padding: 5px 35px;  border-radius: 50px;
  display: inline-block;  float: left; }
    #purple_1 span, #purple_2 span, #purple_3 span{clear: both;  float: left;  color: #3c3372;  width: 100% !important;  border-bottom: 1px solid #fff;}	
	#purple_1 p,#purple_2 p,#purple_3 p  { float: left;  width: 100% !important}			
	
	#pink_1,#pink_2,#pink_3 {clear: both; float: left !important;width: 100% !important;}
    #pink_1 .title, #pink_2 .title , #pink_3 .title { background: #f2958e;  border-radius: 50px;  display: inline-block;
  float: left;  right: 0%;  position: relative;}
    #pink_1 span, #pink_2 span, #pink_3 span{clear: both;  float: left;  color: #8a3430;  width: 100% !important;  border-bottom: 1px solid #fff;  text-align: left;}	
	#pink_1 p,#pink_2 p,#pink_3 p  { float: left;text-align: left; width: 100%}				
	
	.flex_plan { display: none !important}
	
	
}


@media screen and (max-width: 576px){
	
/*	#top-left .shape,#top-right .shape ,#bottom-left .shape,#bottom-right .shape{ position: relative}
	#top-left::before ,  #top-right::before ,  #bottom-left::before ,  #bottom-right::before {bottom: auto;    top: 50px;}
	.info-container_flex { margin-top: 20px}
	#blue_1,#blue_2,#blue_3 { width: 100% !important}
	#top-left .info span {    width: 100% !important;}
	#top-left .info p {    width:100% !important;  }
	
	
	#green_1,#green_2,#green_3,#green_4,#green_1 span,#green_2 span,#green_3 span,#green_4 span,#green_1 p,#green_2 p,#green_3 p,#green_4 p{    width: 100% !important;  }
	
	#purple_1,#purple_2,#purple_3,#purple_1 span,#purple_2 span,#purple_3 span,#purple_1 p,#purple_2 p,#purple_3 p { width:100% !important; }
	
	#pink_1,#pink_2,#pink_3,#pink_1 span,#pink_2 span,#pink_3 span,#pink_1 p,#pink_2 p,#pink_3 p { width:100% !important; }	
	
	.plan_intro_l {width: 100%; }
	.plan_goals .content {width: 100%;}*/

}