/* About page */
#about-sect { margin: 0px auto; padding: 0px 0 50px; }
h3,p { margin: 0; padding: 0; }
.shape-type1,.shape-type2 { position: relative; margin: 0; padding: 0; width: 100%; height: 115px; }
.flow-container { position: relative; display: table; margin: auto; padding: 10px; width: 1180px; height: auto; overflow: hidden; }
.cntr-line { width: 1px; border-left: 5px dotted #dedede; height: 1195px; position: absolute; left: 49%; top: 40px; }
.shape-type1,.shape-type2 { position: relative; width: 55%;  }
.shape-type1 { float: right; }
.shape-type2 { float: left; }
.shape-type1 svg { left: 0; width: 100%; top: 0px; }
.shape-type2 svg { right: -62px; width: 100%; top: 0px; }
.svg1,.svg2,.year-no { position: absolute; }
.year-no { font: bold 20px beba; color: #fff; }
.txt1 { top: 44px; left: 33px; }
.txt2 { top: 40px; right: 44px; }
.shape-content.type1,.shape-content.type2 { position: absolute; width: 100%; top: 10px; }
.shape-content.type1 { left: 254px; text-align: left; right: 0; }
.shape-content.type2 { right: 34px; text-align: right; }
.shape-content.type1 .content-inner, .shape-content.type2 .content-inner { position: relative; width: 399px; margin: 0; padding: 9px; overflow: hidden; height: 100%; min-height: 73px; }
.content-inner h3 { padding-bottom: 4px; font: 20px beba; word-spacing: 7px; letter-spacing: 1px; }
.content-inner p { font: normal 16px ebrima; }
.abt-smalltxt { font: bold 22px abel-r; line-height: 0; }
.shape-type1.green .shape-content .content-inner h3 { color: #068C82; }
.shape-type2.yellow .shape-content .content-inner h3 { color: #B09F2D; }
.shape-type1.orange .shape-content .content-inner h3 { color: #C88B2C; }
.shape-type2.red1 .shape-content .content-inner h3 { color: #B86344; }
.shape-type1.voilet .shape-content .content-inner h3 { color: #8B80B1; }
.shape-type2.green1 .shape-content .content-inner h3 { color: #208A64; }
.shape-type1.blue .shape-content .content-inner h3 { color: #5277AA; }
.shape-type2.pink .shape-content .content-inner h3 { color: #B074B4; }
.shape-type1.red2 .shape-content .content-inner h3 { color: #A7617C; }

.shape-type1.blue2 .shape-content .content-inner h3 { color: #127cab; }
.shape-type2.green2 .shape-content .content-inner h3 { color: #66b607; }
.shape-type2.orange2 .shape-content .content-inner h3 { color: #c57604; }



/* SVG */
.st0 { fill: #dddddd; }
.st1 { fill: #00C1CC; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st2 { fill: url(#SVGID_1_); }
.st3 { fill: #068C82; box-shadow: 0px 0px 0px #068C82; }
.st1-0 { fill: #dddddd; }
.st1-1 { fill: #DCC739; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st1-2 { fill: url(#SVGID_2_); }
.st1-3 { fill: #B09F2D; box-shadow: 0px 0px 0px #B09F2D; }
.st2-0 { fill: #dddddd; }
.st2-1 { fill: #FBAE38; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st2-2 { fill: url(#SVGID_3_); }
.st2-3 { fill: #C88B2C;box-shadow: 0px 0px 0px #C88B2C; }
.st3-0 { fill: #dddddd; }
.st3-1 { fill: #E67C55; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st3-2 { fill: url(#SVGID_4_); }
.st3-3 { fill: #B86344; box-shadow: 0px 0px 0px #B86344; }
.st4-0 { fill: #dddddd; }
.st4-1 { fill: #A396CE; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st4-2 { fill: url(#SVGID_5_); }
.st4-3 { fill: #8278A4; box-shadow: 0px 0px 0px #8278A4; }
.st5-0 { fill: #dddddd; }
.st5-1 { fill: #28AD7E; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st5-2 { fill: url(#SVGID_6_); }
.st5-3 { fill: #208A64; box-shadow: 0px 0px 0px #208A64; }
.st6-0 { fill: #dddddd; }
.st6-1 { fill: #6795D5; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st6-2 { fill: url(#SVGID_7_); }
.st6-3 { fill: #5277AA; box-shadow: 0px 0px 0px #5277AA; }
.st7-0 { fill: #dddddd; }
.st7-1 { fill: #DC92E1; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st7-2 { fill: url(#SVGID_8_); }
.st7-3 { fill: #B074B4; box-shadow: 0px 0px 0px #B074B4; }
.st8-0 { fill: #dddddd; }
.st8-1 { fill: #D17A9C; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st8-2 { fill: url(#SVGID_9_); }
.st8-3 { fill: #A7617C; box-shadow: 0px 0px 0px #A7617C; } 

.st9-0 { fill: #dddddd; }
.st9-1 { fill: #96c85b; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st9-2 { fill: url(#SVGID_81_); }
.st9-3 { fill: #66b607; box-shadow: 0px 0px 0px #96c85b; }

.st10-0 { fill: #dddddd; }
.st10-1 { fill: #43b8ed; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st10-2 { fill: url(#SVGID_91_); }
.st10-3 { fill: #127cab; box-shadow: 0px 0px 0px #35b9f3; }

.st11-0 { fill: #dddddd; }
.st11-1 { fill: #eaa540; stroke: #FFFFFF; stroke-width: 1.5; stroke-miterlimit: 10; }
.st11-2 { fill: url(#SVGID_8_); }
.st11-3 { fill: #c57604; box-shadow: 0px 0px 0px #eaa540; }


/* Animation */
.st1,.st1-1,.st2-1,.st3-1,.st4-1,.st5-1,.st6-1,.st7-1,.st8-1,.st9-1,.st10-1,.st11-1 { stroke: transparent; stroke-width: 4; stroke-dasharray: 670, 100; stroke-dashoffset: 0; }
.shape-type1.green:hover .st1, .shape-type1.orange:hover .st2-1, .shape-type1.voilet:hover .st4-1, .shape-type1.blue:hover .st6-1, .shape-type1.red2:hover .st8-1,.shape-type1.blue2:hover .st10-1, .shape-type2.yellow:hover .st1-1, .shape-type2.red1:hover .st3-1, .shape-type2.green1:hover .st5-1, .shape-type2.pink:hover .st7-1, .shape-type2.green2:hover .st9-1, .shape-type2.orange2:hover .st11-1 {  stroke-width: 4; stroke-dasharray: 0, 300; stroke-dashoffset: 45; -webkit-transition:  all 2s cubic-bezier(0.17, 0.67, 0.48, 1.32); transition: all 2s cubic-bezier(0.17, 0.67, 0.48, 1.32);  box-shadow: 0px 0px 30px #000; -moz-transition:  all 2s cubic-bezier(0.17, 0.67, 0.48, 1.32); -o-transition:  all 2s cubic-bezier(0.17, 0.67, 0.48, 1.32); }

.shape-type1.green:hover .st1 { stroke: #068C82; }
.shape-type1.orange:hover .st2-1 { stroke: #C88B2C; }
.shape-type1.voilet:hover .st4-1 { stroke: #8278A4; }
.shape-type1.blue:hover .st6-1 { stroke: #5277AA; }
.shape-type1.red2:hover .st8-1 { stroke: #A7617C; }
.shape-type1.blue2:hover .st10-1 { stroke: #137aaa; }
.shape-type2.yellow:hover .st1-1 { stroke: #B09F2D; }
.shape-type2.red1:hover .st3-1 { stroke: #B86344; }
.shape-type2.green1:hover .st5-1 { stroke: #208A64; }
.shape-type2.pink:hover .st7-1 { stroke: #B074B4; }
.shape-type2.green2:hover .st9-1 { stroke: #66b607; }
.shape-type2.orange2:hover .st11-1 { stroke: #c57604; }

.shape-type1.green:hover .shape-content.type1 .content-inner h3,
.shape-type1.blue2:hover .shape-content.type1 .content-inner h3,
.shape-type1.orange:hover .shape-content.type1 .content-inner h3,
.shape-type1.voilet:hover .shape-content.type1 .content-inner h3,
.shape-type1.blue:hover .shape-content.type1 .content-inner h3,
.shape-type1.red2:hover .shape-content.type1 .content-inner h3 { animation: header-animation .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -webkit-animation: header-animation .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -webkit-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); }

.shape-type2.yellow:hover .shape-content.type2 .content-inner h3,
.shape-type2.green2:hover .shape-content.type2 .content-inner h3,
.shape-type2.orange2:hover .shape-content.type2 .content-inner h3,
.shape-type2.red1:hover .shape-content.type2 .content-inner h3,
.shape-type2.green1:hover .shape-content.type2 .content-inner h3,
.shape-type2.pink:hover .shape-content.type2 .content-inner h3 { animation: header-animation1 .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -webkit-animation: header-animation1 .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -webkit-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: all .5s cubic-bezier(0.260, 0.860, 0.440, 0.985); }
@keyframes header-animation { 0% { margin-left: 0px; } 50% { margin-left: 45px; } 100%{ margin-left: 0; } }
@-webkit-keyframes header-animation { 0% { margin-left: 0px; } 50% { margin-left: 45px; } 100% { margin-left: 0; } }
@keyframes header-animation1 { 0% { margin-right: 0px; } 50%{ margin-right: 45px; } 100%{ margin-right: 0; } }
@-webkit-keyframes header-animation1 { 0% { margin-right: 0px; } 50% { margin-right: 45px; } 100% { margin-right: 0; } }
/* Mobile view */
.abt-container { position: relative; max-width: 800px; margin: 40px auto; overflow: hidden; display: none; }
.abt-list-view { margin: 0; padding: 0; }
.abt-list-view li { list-style-type: none; float: none; display: block; padding: 20px; }
.abt-box { border: 1px solid #ccc; overflow: hidden; width: 80%; margin: 0 auto; position: relative; min-height: 100px; box-shadow: 0px 0px 20px #cecece; border-radius: 10px;  -webkit-border-radius: 10px; background: #fff; z-index: 1000; }
.abt-list-num { position: absolute; left: 0; top: 0; font: 28px beba; padding: 26.5px 39.5px; height: 100%; color: #fff; min-width: 60px; }
.abt-list-content { position: relative; padding: 10px 10px 10px 150px; }
.abt-box:before { content: ""; position: absolute; left: 140px; top: 0; width: 1px; height: 100%; }
.abt-list-content h2 { padding-bottom: 4px; font: 20px beba; word-spacing: 7px; letter-spacing: 1px; }
.abt-list-content p { font: normal 16px ebrima; }
.abt-box.type1 .abt-list-content { padding: 10px 150px 10px 15px; }
.abt-box.type1 .abt-list-num  { right: 0; left: auto; }
.abt-box.type1:before { right: 140px; left: auto; }
.txt-yellow { color: #B09F2D; }
.txt-orange { color: #C88B2C; }
.txt-red1 { color: #B86344; }
.txt-voilet { color: #8B80B1; }
.txt-green1 { color: #208A64; }
.txt-blue { color: #5277AA; }
.txt-pink { color: #B074B4; }
.txt-red2 { color: #A7617C; }
.abt-list-num.bg1 { background: #B09F2D; }
.abt-list-num.bg2 { background: #C88B2C; }
.abt-list-num.bg3 { background: #B86344; }
.abt-list-num.bg4 { background: #8B80B1; }
.abt-list-num.bg5 { background: #208A64; }
.abt-list-num.bg6 { background: #5277AA; }
.abt-list-num.bg7 { background: #B074B4; }
.abt-list-num.bg8 { background: #A7617C; }
.arr-angle.type1, .arr-angle.type2 { position: relative; }
.arr-angle.type1:after, .arr-angle.type2:after { content: ""; position: absolute; width: 125px; height: 125px; border: 2px solid #ababab; top: 56px; }
.arr-angle.type1:after { border-top-right-radius: 90px; border-bottom-right-radius: 90px; border-left: 0; border-bottom: 0; border-top: 0; right: 0; transform: rotate(-14deg); }
.arr-angle.type2:after { border-top-left-radius: 90px; border-bottom-left-radius: 90px; border-right: 0; border-bottom: 0; border-top: 0; left: 0; transform: rotate(14deg); }
.arr-angle.type1:before, .arr-angle.type2:before { content: ""; position: absolute; top: 155px; width: 28px; height: 28px; }
.arr-angle.type1:before { border-bottom: 2px solid #ababab; border-left: 2px solid #ababab; -webkit-transform: rotate(11deg); -moz-transform: rotate(11deg); -ms-transform: rotate(11deg); transform: rotate(11deg); right: 16px; }
.arr-angle.type2:before { border-top: 2px solid #ababab; border-right: 2px solid #ababab; -webkit-transform: rotate(78deg); -moz-transform: rotate(78deg);   -ms-transform: rotate(78deg); transform: rotate(78deg); left: 16px; }
@media screen and (min-width:1152px) and (max-width: 1279px) { 
	.txt1 { top: 40px; left: 0px; }
	.txt2 { top: 36px; right: 54px; }	
}
@media screen and (min-width:992px) and (max-width: 1279px) {
	.pageinnercontainer { min-width: 965px; } 
	.flow-container { width: 1028px; }
	.shape-type1,.shape-type2 { width: 54%; clear: both; height: 90px; }
	.shape-type1 svg ,.shape-type2 svg { width: 97%; }
	.shape-type1 svg { left: -52px; }
	.shape-type2 svg { right: -18px; }
	.cntr-line { left: 45.2%; height: 940px; }
	.year-no { font-size: 18px; }
	.txt1 { top: 35px; left: -26px; }
	.txt2 { top: 32px; right: 68px; }
	.shape-content.type1 .content-inner, .shape-content.type2 .content-inner { width: 100%; }
	.shape-content.type1, .shape-content.type2 { top: 4px; }
	.shape-content.type1 { width: 61%; }
	.shape-content.type2 { width: 56%; }
	.shape-content.type1 { left: 150px; }
	.shape-content.type2 { right: 266px; }
	.content-inner p { font: normal 13px ebrima; }
	.content-inner h3 { font-size: 17.5px; }
}