/*when width is greater than this*/
@media (min-width: 620px) {

  body .hiShape {

    float:left;


  }

  body .whatwedo {

    float:right;
    max-width: 40vw;
    position: relative;
    margin:10px 0 10px 0;
    border: 0px solid blue;

  }

}

.informthepeople {
  padding: 0px;

  margin: 10px auto 0px auto;
  position: relative;
  /*box-sizing: border-box;*/


/*fit height to content*/
  display:block;
  overflow:auto;
/*                     */

  max-width: 100%;

  /*float: left;*/
  width: 100vw;

  /*left:5%;*/

  border: 0px solid blue;
  background-color: white;

}
.informthepeople .whatwedo{

  padding: 0px 5px 0 0px;
  width: 90vw;
  margin: 10px;

}

/*div with shapes to spell Hi*/
.hiShape{
  position:relative;
  /*fit height to content*/
    /*display:block;
    overflow:auto;*/
  /*                     */
  width:100px;
  height:100px;

  float:none;


  margin:10px 0% 0px 0%;

  border: 0px solid red;


}

/*left rectangle for H*/
.hLeft {
  position: absolute;
  height: 5%;
  width: 60%;

  background-color: Green;


  border-radius: 0px;
  /*the first element defines position of the rest from top*/
  /*margin-top: 5px;

  margin-left: 25%;*/


    -moz-transform:translate3d(20px, 20px, 0px) rotateZ(0deg);
    -webkit-transform:translate3d(20px, 20px, 0px) rotateZ(0deg);
    -o-transition: translate3d(20px, 20px, 0px) rotateZ(0deg);
    transform: translate3d(20px, 20px, 0px) rotateZ(0deg);

  /*A transition works by animating the change in
  CSS property values. To do that, it needs to know
  what CSS property to listen for changes on.
  In our case, the CSS property that is changing
  is the opactity property. That's why the
  first argument to our transition declaration
  is opacity. The next two arguments specify
  how long we want the transition to run and what
  easing function to use to give some
  extra life to the transition*/
  -webkit-transition: transform .5s ease-in-out;

  -moz-transition: transform .5s ease-in-out;

  -o-transition: transform .5s ease-in-out;

  transition: transform .5s ease-in-out;
}
/*Right rectangle for H*/
.hRight {
  position: absolute;
  height: 5px;
  width: 60px;
  background-color: #000000;
  background-color: blue;

  border-radius: 1px;
  /*margin-top: 15px;

  margin-left: 25%;*/


  -moz-transform:translate3d(20px, 10px, 0px) rotateZ(0deg);
  -webkit-transform:translate3d(20px, 10px, 0px) rotateZ(0deg);
  -o-transition: translate3d(20px, 10px, 0px) rotateZ(0deg);
  transform: translate3d(20px, 10px, 0px) rotateZ(0deg);

  -webkit-transition: -moz-transform .5s ease-in-out;

  -moz-transition: -moz-transform .5s ease-in-out;

  -o-transition: transform .5s ease-in-out;

  transition: transform .5s ease-in-out;
}
/*Right rectangle for H*/
.iLine {
  position: absolute;
  height: 5%;
  width: 35%;
  background-color: #444;
  color: black;

  -moz-transform:translate3d(20px, 40px, 0px) rotateZ(0deg);
  -webkit-transform:translate3d(20px, 40px, 0px) rotateZ(0deg);
  -o-transition: translate3d(20px, 40px, 0px) rotateZ(0deg);
  transform: translate3d(20px, 40px, 0px) rotateZ(0deg);

  -webkit-transition: transform .4s ease-in-out;

  -moz-transition: transform .4s ease-in-out;

  -o-transition: transform .4s ease-in-out;

  transition: transform .4s ease-in-out;
}

.iCircle {
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: #0074d9;
  color: black;

  border-radius: 10px;

    -moz-transform:translate3d(42px, 70px, 0px) rotateZ(0deg);
    -webkit-transform:translate3d(42px, 70px, 0px) rotateZ(0deg);
    -o-transition: translate3d(42px, 70px, 0px) rotateZ(0deg);
    transform: translate3d(42px, 70px, 0px) rotateZ(0deg);

  -webkit-transition: transform .4s ease-in-out;

  -moz-transition: transform .4s ease-in-out;

  -o-transition: transform .4s ease-in-out;

  transition: transform .4s ease-in-out;
}

/*Right rectangle for H*/
.hMiddle {
  position: absolute;
  height: 5%;
  width: 25%;
  background-color: #000000;
  background-color: red;


    -moz-transform:translate3d(20px, 70px, 0px) rotateZ(60deg);
    -webkit-transform:translate3d(20px, 70px, 0px) rotateZ(60deg);
    -o-transition: translate3d(20px, 70px, 0px) rotateZ(60deg);
    transform: translate3d(20px, 70px, 0px) rotateZ(60deg);

  -webkit-transition: transform .6s ease-in-out;

  -moz-transition: transform .6s ease-in-out;

  -o-transition: transform .6s ease-in-out;

  transition: transform .6s ease-in-out;
}

.whatwedo {
  position:relative;


    margin:0px 0 10px 0;
    padding:5px;

    /*for media query*/
    width:100%;
    float: none;
    /*              */

      font-family:"Montserrat",sans-serif;
      font-family:"lato",sans-serif;


    /*some weigths dont work on some browsers 100 , 200 dont show on firefox*/
    font-weight: 400;
    color: #000;

    border: 0px solid black;

}
/* '~''  this effects class once element/class is after hovered class in dom*/

/* ''>'' We'll apply a CSS properties to a child of the
parent when the parent is in the hover state. */

.hiShape:hover > .hLeft{

  -webkit-transform:translate3d(0px, 50px, 0px) rotateZ(-90deg);

  -moz-transform:translate3d(0px, 10px, 0px) rotateZ(-90deg) ;

  -o-transform :translate3d(0px, 10px, 0px) rotateZ(-90deg);
  transform: translate3d(0px, 45px, 0px) rotateZ(-90deg) ;
}
.hiShape:hover > .hRight{
  /*transform:translateX(-5%) translateY(25px) rotate(-90deg) scaleX(1);*/

  -webkit-transform:translate3d(0px, 50px, 0px) rotateZ(90deg);

  -moz-transform:translate3d(20px, 10px, 0px) rotateZ(90deg) ;

  -o-transform :translate3d(10px, 10px, 0px) rotateZ(90deg);
  transform: translate3d(20px, 45px, 0px) rotateZ(90deg) ;



}



.hiShape:hover > .hMiddle{
  -webkit-transform:translate3d(27px, 45px, 0px) rotateZ(180deg) ;

  -moz-transform:translate3d(27px, 45px, 0px) rotateZ(180deg) ;

  -o-transform :translate3d(27px, 45px, 0px) rotateZ(180deg) ;
  transform: translate3d(27px, 45px, 0px) rotateZ(-180deg) ;

}

.hiShape:hover > .iLine{
  -webkit-transform:translate3d(0px, 50px, 0px) rotateZ(180deg);

  -moz-transform:translate3d(20px, 10px, 0px) rotateZ(180deg) ;

  -o-transform :translate3d(10px, 10px, 0px) rotateZ(180deg);
  transform: translate3d(50px, 58px, 0px) rotateZ(270deg) ;
}

.hiShape:hover > .iCircle{
  -webkit-transform:translate3d(0px, 50px, 0px) rotateZ(180deg);

  -moz-transform:translate3d(20px, 10px, 0px) rotateZ(180deg) ;

  -o-transform :translate3d(10px, 10px, 0px) rotateZ(180deg);
  transform: translate3d(63px, 30px, 0px) rotateZ(180deg) ;
}