/*! Accelsiors global CSS file
By Yiannis Konstantakopoulos, hello@porcupine.gr

*/
/* =html
--------------------------------------------------------------------------------------------------------*/
main {
  width: 800px;
  margin: -50px auto 0 auto;
  height: 800px;
 
  position: relative;
  text-align: left;
}

.core {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: #FFF;
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
  z-index: 2;
}
.core h1 {
  font-size: 16px;
  text-transform: uppercase;
  color: #2A2564;
  font-weight: bold;
  text-align: center;
  margin: 55px 0 0 0;
}
.core span {
  color: #3CB8E5;
}

.pillar {
  width: 200px;
  height: 225px;
  position: absolute;
}

.icon {
  width: 60px;
  height: 64px;
  position: absolute;
}

.text {
  max-width: 200px;
}
.text h2 {
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}
.text p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.text sup {
  vertical-align: super;
  font-size: 11px;
}

/********************* one **********************
*************************************************/
.pillar-one {
  left: calc(50% - 100px);
  top: 150px;
}

.pillar-icon-one {
  left: calc(50% - 30px);
  top: 235px;
}

.pillar-text-one {
  position: absolute;
  left: calc(50% - 90px);
  top: 70px;
}

/********************* two **********************
*************************************************/
.pillar-two {
  top: 240px;
  left: calc(50% + 25px);
}

.pillar-icon-two {
  position: absolute;
  top: 320px;
  left: 490px;
}

.pillar-text-two {
  position: absolute;
  left: calc(50% + 230px);
  top: 290px;
}

/********************* three **********************
*************************************************/
.pillar-three {
  top: 370px;
  left: calc(50% - 25px);
}

.pillar-icon-three {
  position: absolute;
  top: 460px;
  left: 450px;
}

.pillar-text-three {
  position: absolute;
  left: calc(50% + 100px);
  top: 590px;
}

/********************* four **********************
*************************************************/
.pillar-four {
  top: 370px;
  left: calc(50% - 175px);
}

.pillar-icon-four {
  position: absolute;
  top: 460px;
  left: 290px;
}

.pillar-text-four {
  position: absolute;
  left: calc(50% - 230px);
  top: 590px;
}

/********************* five **********************
*************************************************/
.pillar-five {
  width: 225px;
  height: 225px;
  top: 240px;
  left: calc(50% - 205px);
}

.pillar-icon-five {
  position: absolute;
  top: 320px;
  left: 265px;
}

.pillar-text-five {
  position: absolute;
  left: calc(50% - 370px);
  top: 270px;
}

/* =RWD
--------------------------------------------------------------------------------------------------------*/
/* Shorter screens should have smaller fonts but 
above all, no full screen screens */
/* For computers with height less than an MBA 
	+ for iPads
*/
@media screen and (max-width: 767px) {
  main {
    background: #f5f5f5;
    width: 100%;
    height: auto;
    padding: 20px 0;
  }

  .core {
    top: 120px;
  }

  .text {
    max-width: 300px;
  }

  /********************* one **********************
  *************************************************/
  .pillar-one {
    left: calc(50% - 100px);
    top: 0;
  }

  .pillar-icon-one {
    left: calc(50% - 30px);
    top: 50px;
  }

  .pillar-text-one {
    position: static;
    background: url(../img/fp_icons-mob-5.svg) top left no-repeat;
    margin: 430px auto 0 auto;
    padding: 0 0 0 80px;
    visibility: visible;
  }

  /********************* two **********************
  *************************************************/
  .pillar-two {
    top: 80px;
    left: calc(50% - 0px);
  }

  .pillar-icon-two {
    position: absolute;
    top: 150px;
    left: calc(50% + 80px);
  }

  .pillar-text-two {
    position: static;
    background: url(../img/fp_icons-mob-2.svg) top left no-repeat;
    margin: 30px auto 0 auto;
    padding: 0 0 23px 80px;
    opacity: 1;
    visibility: visible;
  }

  /********************* three **********************
  *************************************************/
  .pillar-three {
    top: 190px;
    left: calc(50% - 25px);
  }

  .pillar-icon-three {
    position: absolute;
    top: 280px;
    left: calc(50% + 50px);
  }

  .pillar-text-three {
    position: static;
    background: url(../img/fp_icons-mob-3.svg) top left no-repeat;
    margin: 30px auto 0 auto;
    padding: 0 0 23px 80px;
    opacity: 1;
    visibility: visible;
  }

  /********************* four **********************
  *************************************************/
  .pillar-four {
    top: 190px;
    left: calc(50% - 175px);
  }

  .pillar-icon-four {
    position: absolute;
    top: 280px;
    left: calc(50% - 110px);
  }

  .pillar-text-four {
    position: static;
    background: url(../img/fp_icons-mob-4.svg) top left no-repeat;
    margin: 30px auto 0 auto;
    padding: 0 0 0 80px;
    opacity: 1;
    visibility: visible;
  }

  /********************* five **********************
  *************************************************/
  .pillar-five {
    width: 225px;
    height: 225px;
    top: 80px;
    left: calc(50% - 205px);
  }

  .pillar-icon-five {
    position: absolute;
    top: 150px;
    left: calc(50% - 140px);
  }

  .pillar-text-five {
    position: static;
    background: url(../img/fp_icons-mob-5.svg) top left no-repeat;
    margin: 30px auto 0 auto;
    padding: 0 0 23px 80px;
  }
}