/*font-family: 'Fredericka the Great', cursive;
font-family: 'La Belle Aurore', cursive;
font-family: 'Muli', sans-serif;
*/


* { box-sizing: border-box; }


.cf:after {
content:"";
display:table;
clear:both;
}

html {
background: #fff;
font:16px/1.5 'Muli', sans-serif;
}


.container {
margin: 0 auto;
}

body{
background: #fff;
margin: 0;
font-weight: 300;
font-size: 1em;
}


img{
width: 100%
height:auto;
}



.headline-img{

background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: center 0 ;
background-size: cover;

}


.headline {
font-size: 10vw;
font-family: 'La Belle Aurore', cursive;
text-align: center;
padding: 11px 0 294px 0;
margin: 0;
}


.intro p{
font: 16px/1.5 'Muli', sans-serif;
text-align: left;
padding: 30px;
margin: 0 auto;

}

.row {
overflow: hidden;
padding: 0 20px;
}


.our-mission{
background-color: #f26522;
}
.our-vision{
background-color: #d4df4e; 
}



.mission h2, .performance h2, .growth h2, .vision h2, .second-bar-chart h2, .five-pillars h2{
font: 47px/1.5 'La Belle Aurore', cursive;
color: #fff;
padding: 28px 25px;
text-align: center;
margin: 0;
margin-top: 25px;
}
.performance h2, .second-bar-chart h2, .growth h2, .five-pillars h2{

color: #000;
font-size: 45px;
}





.performance-p, .second-bar-chart p{
font: 16px/1.5 'Muli', sans-serif;
text-align: left;
padding: 40px;
}

.growth p{

text-align: left;
padding:  10px 40px;
}

.bubble p {
    font: 20px/34px 'La Belle Aurore', cursive;
    margin: 0;
    padding: 0;
}
.bubble-2 p {
    margin: 0;
    font: 20px/40px 'La Belle Aurore', cursive;
}

.bubble {
    position: relative;
    margin: 0 auto;
    margin-left: 164px;
    padding: 1em;
    width: 222px;
    height: 122px;
    border-radius: .25em;
    transform: rotate(-4deg) rotateY(15deg);
    background: #ffa500;
    font: 2em/4 'La Belle Aurore', cursive;
    text-align: center;
}
.bubble:before, .bubble:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.bubble:after {
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}
.bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #ffa500;
  border-bottom: solid .25em #ffa500;
  bottom: 1em;
    left: -0.75em;
    width: 0;
    height: 1em;
    transform: rotate(144deg) skewX(68deg);
}



.bubble-2 {
 position: relative;
  margin: .5em auto;
  padding: 1em;
  width: 10em; height: 4em;
  border-radius: .25em;
  transform: rotate(-4deg) rotateY(15deg);
  background: #ffa500;
  font: 2em/4 'La Belle Aurore', cursive;
  text-align: center;
}
.bubble-2:before, .bubble-2:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.bubble-2:after {
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}
.bubble-2:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #ffa500;
  border-bottom: solid .25em #ffa500;
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
}




.target img {
max-width: 25%;

float: left;
margin-left: 20px;
margin-top: -57px;
}



.growth{

margin-bottom: 30px;
}

.growth h4{
font-size: 1.3em;
text-align: center;
padding: 50px;
margin: 0;
line-height: 2em; 
color: #ffa500;
}


.list li{
list-style-type: none;

}

.list ul {
margin-left: 48px;

}



.list {
width: 310px;
margin: 0 auto;
margin-bottom: 20px;
background: #fff;
border: 2px solid #ffa500;
}


.chart h3, .chart-2 h3 {
font-size: 1.5em;
font-family: 'La Belle Aurore', cursive;
text-align: center;
padding: 50px;
margin: 0;
line-height: 2em;
}



.little-man  {
max-width: 50%;
margin-left: 18px;
animation: dance 2s infinite alternate;
}
@keyframes dance {
100% 
{
transform: rotate(15deg);
}



}





.man-2 {
max-width: 40%;
transform-origin: 50% 50%;
animation: pulse 2s infinite alternate; 
}
@keyframes pulse {
from { transform: scale3d(1,1,1); }
to { transform: scale3d(3,3,3); }
}

.little-man-2 {
max-width: 88%;
margin-left: 290px;

padding-bottom: 79px;
}



@-ms-keyframes wiggle{0%{-ms-transform:rotate(7deg);}50%{-ms-transform:rotate(-7deg);}100%{-ms-transform:rotate(7deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(7deg);}50%{-moz-transform:rotate(-7deg);}100%{-moz-transform:rotate(7deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(7deg);}50%{-webkit-transform:rotate(-7deg);}100%{-webkit-transform:rotate(7deg);}}
@keyframes wiggle{0%{transform:rotate(7deg);}50%{transform:rotate(-7deg);}100%{transform:rotate(7deg);}}
img.wiggle-me:hover{-ms-animation:wiggle .6s 4;-moz-animation:wiggle .6s 4;-webkit-animation:wiggle .6s 4;animation:wiggle .6s 4;}



.pie-paragraph p,  {
width: 342px;
font: 16px/1.5 'Muli', sans-serif;
text-align: left;
margin: 0 auto;
padding: 30px;
}

.animated-paragraph, .animated-paragraph-2 {
width: 100%;
font: 27px/40px 'La Belle Aurore', cursive;
text-align: left;
margin: 0 auto;
padding: 15px;
background: #ffa500;
}

.number{
font-family: 'Fredericka the Great', cursive;
font-size: 70px;
color: #ffa500;

}

.number2{
font-family: 'Fredericka the Great', cursive;
font-size: 70px;
color: #d4df4e;

}

.five-pillars h3{
font: 5vw/1.5 'Fredericka the Great', cursive;
color: #d4df4e;

}


.five-pillars{
padding: 40px;
}

.five-pillars li{
list-style-type: none;

}

.navlist li {
list-style-type: none;
margin: 0;
padding: 0;


}

.navlist li img {
width: 100%;
}

.table {
    margin-bottom: 20px;
}

nav ul {
position: fixed;
padding: 0;
margin: 0;
width: 34px;
}



table {
font-size: 12px;
border-collapse: collapse;
width: 80%;
margin: 0 auto;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 2px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

th{
background: #ffa500; 
}


@keyframes bake-pie {
from {
transform: rotate(0deg) translate3d(0, 0, 0);
}
}


section {
padding: 10px;
width: 300px;
}

.pieID, .pieID2 {
display: inline-block;
vertical-align: top;
}

.pie, .pie2 {
height: 200px;
margin: 0 0 30px 48px;
position: relative;
width: 200px;
}

.pie::before, .pie2::before {
content: "";
display: block;
height: 100px;
width: 100px;
background: #EEE;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}

.pie::after, .pie2::after {
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
content: "";
display: block;
height: 2px;
margin: 220px auto;
width: 120px;
}

.slice {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 200px, 200px, 100px);
animation: bake-pie 1s;
}

.slice span {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 200px;
height: 200px;
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
}

.legend, .legend2 {
list-style-type: none;
padding: 0;
margin: 0;
background: #FFF;
padding: 15px;
font-size: 13px;
box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB;
}

.legend li, .legend2 li{
width: 267px;
height: 2.25em;
margin-bottom: 0.7em;
padding-left: 0.5em;
border-left: 1.25em solid black;
}

.legend em, .legend2 em{
font-style: normal;
}

.legend span, .legend2 span {
float: right;

}
.legend span::after, .legend2 span::after {
content: " %";

}

.chart , .chart-2{
background: none repeat scroll 0% 0% #fff;
box-shadow: 1px 1px 0px #DDD, 2px 2px 0px #cfcfcf;
border: 1px solid #cfcfcf;
width: 320px;
margin: 20px auto;

}

.big-chart-section{
background: none repeat scroll 0% 0% rgba(212, 223, 78, 0.6);
padding: 40px 0;
}


.second-bar-chart-p{
max-width: 300px;
margin: 0 auto;
padding: 5px;
}

.second-bar-chart-p p{

padding: 5px;
}

#bar-chart {
width: 300px;
height: 300px;
position: relative;
}
#line-chart {
width: 300px;
height: 300px;
position: relative;
}
#bar-chart::before, #line-chart::before {
content: "";
position: absolute;
display: block;
width: 135px;
height: 30px;
left: 155px;
top: 254px;
background: #FAFAFA;
box-shadow: 1px 1px 0 0 #DDD;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

}

.animated.infinite {
  -webkit-animation-iteration-count: infinite ;
  animation-iteration-count: infinite ;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;

}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}



@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/*----------------------------------------------- Iphone 6 landscape 570px*/
@media screen and (min-width:570px){

.man-2 {
    max-width: 25%;
    
}
.little-man-2{margin-left: 387px;}
.bubble{
  margin-left: 156;
  width: 380px;
  height: 146px;
}
.bubble p {
    font: 28px/41px 'La Belle Aurore', cursive;
}
}

/*----------------------------------------------- Iphone 6 landscape 570px*/
@media screen and (min-width: 667px){

.man-2 {
    max-width: 40%;
    
}
.little-man-2 {
    margin-left: 495px;
}

.target img {
    max-width: 25%;
    margin-left: 49px;
    margin-top: -83px;
}

.animated-paragraph, .animated-paragraph-2 {
    text-align: center; 
}
.bubble{
  margin-left: 274px;
  
}
}

/*-----------------------------------------------End of Iphone 6 landscape 667px*/



/*----------------------------------------------------Ipad portrait 768px*/

@media screen and (min-width: 768px){

.performance-p, .second-bar-chart p {
    text-align: center;
}
.five-pillars ul {
    padding: 0;
}

.five-pillars li {
    width: 300px;
    float: left;
    height: 425px;
    margin: 0 17px;
}

.animated-paragraph,.animated-paragraph-2 {
    clear: both;
}

.five-pillars h3 {
    font: 4vw/1.5 'Fredericka the Great', cursive;
}



}

/*---------------------------------------------------end of-Ipad portrait 768px*/


/*----------------------------------------------------desktop 850px*/

@media screen and (min-width: 850px){

.five-pillars li {
    margin: 0 38px;
    height: 400px;
}

.five-pillars h3 {
    font: 2.5vw/1.5 'Fredericka the Great', cursive;
}

.five-pillars-p{
    width: 600px;
    margin: 0 auto;
}

.growth-section{
    width: 700px;
    margin: 0 auto;

}

.list {
    margin-top: 77px;
    display: inline-block;
    width: 310px;
    margin-left: 79px;
}

.man-2 {
    max-width: 40%;
    margin-left: 110px;
}

.little-man-2 {
    display: inline-block;
    width: 34%;
}

.bubble-2 {
    width: 57%;
    margin-left: 210px;
    display: inline-block;
}

.bubble-2 p {
    font-size: 31px;

}

.target img {
    height: 126px;
}
.animated-paragraph, .animated-paragraph-2 {
    width: 100%;
    font: 3vw/2 'La Belle Aurore', cursive;
}


blockquote.animated.swing, blockquote.animated.bounceInUp {
    max-width: 708px;
    margin: 20px auto;
}
.little-man {
    max-width: 43%;
    margin-left: 37px;
    
}

}

/*----------------------------------------------------End end of 850px*/


















/*----------------------------------------------------desktop 960px*/

@media screen and (min-width: 960px){




.little-man {
    max-width: 43%;
    margin-left: 80px;
}


.intro p {
    width: 800px;
}

.five-pillars{
    width: 940px;
    margin: 0 auto;
}

.five-pillars h3 {
    font: 30px/1.5 'Fredericka the Great', cursive;
}

.five-pillars li {
    margin: 0 60px;
}



.animated-paragraph, .animated-paragraph-2 {
    font: 30px/2 'La Belle Aurore', cursive;
}
.list {
    margin-left: 118px;
}

 
.chart-2{
    display: inline-block;
margin-left: 160px;
}


.second-bar-chart-p {
    max-width: 300px;
 margin-left: 30px;
display: inline-block;
}

.second-bar-chart {
    width: 940px;
    margin: 0 auto;
}

.bubble-2 {
    width: 44%;
    margin-left: 210px;
    display: inline-block;
}
.bubble{
    margin-left: 380px;
  width: 506px;
  height: 150px;
}
}

/*----------------------------------------------------End end of 960px*/




/*----------------------------------------------------desktop 1024px*/

@media screen and (min-width: 1024px){

.second-bar-chart-p {
 margin-left: 50px;
}
.five-pillars{
    width: 1000px;
    margin: 0 auto;
    padding: 0;
}
.five-pillars li {
    margin: 0 99px;
}

.list {
    margin-left: 133px;
}


.chart {
    margin: 0 6px;
    width: 320px;
    display: inline-block;
}
.animated-paragraph-2 {
    width: 32%;
    font: 1.8vw/2 'La Belle Aurore', cursive;
    display: inline-block;
    margin-left: 2px;
    padding: 0;
}


.man-2 {
    
    margin-left: 220px;
}

.big-list-section{
    margin: 0 auto;
    width: 960px;
}


.big-chart-section{
    margin: 0 auto;
    width: 100%;
}

.small-chart-section{
    width: 1000px;
    margin: 0 auto;
}

.number2 {
    font-size: 83px;
}
}

/*----------------------------------------------------End end of 1024px*/

/*----------------------------------------------------desktop 1055px*/

@media screen and (min-width:1055px){
table{
  max-width: 1000px;
}

}

/*----------------------------------------------------End end of 1055px*/




/*----------------------------------------------------desktop 1200px*/

@media screen and (min-width: 1200px){

.little-man-2 {
    margin-left: 640px;
}

.animated-paragraph-2 {
    width: 32%;
    font: 21px/2 'La Belle Aurore', cursive;
}
.bubble {
    margin-left: 494px;
    width: 512px;
    height: 172px;
}

.bubble p {
    font: 44px/61px 'La Belle Aurore', cursive;
}
}

/*----------------------------------------------------End end of 1200px*/



@media screen and (min-width: 1500px){


.little-man-2 {
    margin-left: 740px;
}

}