<div class="a-container">
   <h1 style="text-align:center;">Material cards FlexBox</h1>
   <a href="https://codepen.io/pirolab/project/editor/AyBEvm" target="_blank">Angular 2 Version <i class="icon-right"></i></a> 
   <div class="o-card_container">
      <div class="o-card" id="Nikola_Tesla">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/tesla-bg.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/tesla.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">Nikola Tesla</h2>
            <h3 class="o-card_subTitle">The Misunderstood</h3>
            <p class="o-card_paragraph">Nikola Tesla (Serbian Cyrillic: Никола Тесла; 10 July 1856 – 7 January 1943) was a Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist who is best known for his contributions to the design of the modern alternating current (AC) electricity supply system.
               Born and raised in the Austrian Empire, Tesla received an advanced education in engineering and physics in the 1870s and gained practical experience in the early 1880s working in ......
            </p>
         </div>
         <div class="o-card_footer">
            <a data-href="Nikola_Tesla" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
      <div class="o-card" id="Ernest_Hemingway">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/Hemingway_and_Marlins.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/hemingway.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">Ernest Hemingway</h2>
            <h3 class="o-card_subTitle">The Brave</h3>
            <p class="o-card_paragraph">Ernest Miller Hemingway (July 21, 1899 – July 2, 1961) was an American novelist, short story writer, and journalist. His economical and understated style had a strong influence on 20th-century fiction, while his life of adventure and his public image influenced later generations. Hemingway produced most of his work between the mid-1920s and the mid-1950s, and won the Nobel Prize in Literature in 1954. He published seven novels, six short story collections, and two non-fiction works....</p>
         </div>
         <div class="o-card_footer">
            <a data-href="Ernest_Hemingway" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
      <div class="o-card" id="J_R_R_Tolkien">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/Argonath1.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/tolkien.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">J. R. R. Tolkien</h2>
            <h3 class="o-card_subTitle">The Visionary</h3>
            <p class="o-card_paragraph">John Ronald Reuel Tolkien, CBE, FRSL (/ˈtɒlkiːn/;[a] 3 January 1892 – 2 September 1973) was an English writer, poet, philologist, and university professor who is best known as the author of the classic high-fantasy works The Hobbit, The Lord of the Rings, and The Silmarillion.
               He served as the Rawlinson and Bosworth Professor of Anglo-Saxon and Fellow of Pembroke College, Oxford, from 1925 to 1945 and Merton Professor of English Language and Literature and Fellow of Merton College....
            </p>
         </div>
         <div class="o-card_footer">
            <a data-href="J._R._R._Tolkien" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
      <div class="o-card" id="Malcolm_X">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/Malcolm_X_bullet_holes2.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/malcom-x.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">Malcom X</h2>
            <h3 class="o-card_subTitle">The Necessary</h3>
            <p class="o-card_paragraph">Malcolm X (/ˈmælkəm ˈɛks/; May 19, 1925 – February 21, 1965), born Malcolm Little and later also known as el-Hajj Malik el-Shabazz[A] (Arabic: الحاجّ مالك الشباز‎‎; Arabic pronunciation: [ɛl-hæʤ ˈmælɪk ɛl-ˈʃɑbɑz]), was an African-American Muslim minister and human rights activist. To his admirers he was a courageous advocate for the rights of blacks, a man who indicted white America in the harshest terms for its crimes against black Americans; detractors accused him of preaching racism and violence....</p>
         </div>
         <div class="o-card_footer">
            <a data-href="Malcolm_X" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
      <div class="o-card" id="George_Orwell">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/poum.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/g-orwell.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">George Orwell</h2>
            <h3 class="o-card_subTitle">The Warrior</h3>
            <p class="o-card_paragraph">Eric Arthur Blair (25 June 1903 – 21 January 1950),[1] better known by his pen name George Orwell, was an English novelist, essayist, journalist, and critic. His work is marked by lucid prose, awareness of social injustice, opposition to totalitarianism, and outspoken support of democratic socialism.[2][3]
               Orwell wrote literary criticism, poetry, fiction, and polemical journalism. He is best known for the allegorical novella Animal Farm (1945) and the dystopian novel Nineteen Eighty-Four (1949)....
            </p>
         </div>
         <div class="o-card_footer">
            <a data-href="George_Orwell" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
      <div class="o-card" id="Albert_Einstein">
         <div class="o-card_header">
            <div class="o-card_headerHeroImg"  data-image="https://s3.eu-west-2.amazonaws.com/pirolab/images/einstein-bg.jpg"></div>
            <ul class="o-card-headerList">
               <li class="o-card-headerList--openIcons ">
                  <span></span>
                  <span></span>
                  <span></span>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-facebook"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-twitter"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-linkedin"></i></a>
               </li>
               <li class="o-card-headerList--item">
                  <a class="o-card-headerList--link" href="#"><i class="icon-github"></i></a>
               </li>
            </ul>
            <div class="o-card_logo" style="background:url(https://s3.eu-west-2.amazonaws.com/pirolab/images/einstein.jpg) center no-repeat;"></div>
         </div>
         <div class="o-card_body">
            <h2 class="o-card_title">Albert Einstein</h2>
            <h3 class="o-card_subTitle">The forerunner</h3>
            <p class="o-card_paragraph">Albert Einstein (/ˈaɪnstaɪn/;[4] German: [ˈalbɛɐ̯t ˈaɪnʃtaɪn] ( listen); 14 March 1879 – 18 April 1955) was a German-born theoretical physicist. He developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[1][5]:274 Einstein's work is also known for its influence on the philosophy of science.[6][7] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation")....</p>
         </div>
         <div class="o-card_footer">
            <a data-href="Albert_Einstein" target="_blank" class="a-readMore" data-modal="#first">Read More <i class="icon-right"></i></a>
         </div>
         <div class="o-modal">
            <span class="o-modal__close">
            <i class="icon-cancel-circled"></i>
            </span>
            <h2 class="o-modal__title"></h2>
            <div class="o-modal__inner"></div>
         </div>
         <div class="a-loader">
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
            <div class="a-loader__bar"></div>
         </div>
      </div>
   </div>
</div>
</div>
$primary_color : #109bce;
$secondary_color: #07526e;
$bg_body:#d4d4d4;
$white: #fff;
$black: #000;
$grey_1:#f1f1f1;
$grey_2:#f9f9f9;
$grey_3:#ccc;
$grey_4:#999;
$grey_5:#555;

@function bg_rgba($a:1){
  @return rgba(0,0,0,$a);
}
@function bg_rgba_w($a:1){
  @return rgba(255,255,255,$a);
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
body {
  background: url(https://s3.eu-west-2.amazonaws.com/pirolab/images/grad-bg.png) no-repeat center (center / cover) $bg_body;
  font-family: Nunito Sans , sans-serif;
  margin: 0;
  padding: 0;
  font-size: 95%;
  line-height: 1.2;
}
* {
  box-sizing: border-box;
}

a {
  color: $grey_5;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
}
h1 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  text-shadow:1px 1px 1px rgba(255,255,255,.8);
  font-weight:400;
  color:$grey_4;
}
.a-container {
  width: 90%;
  margin: 30px auto;
  padding: 20px 0;
}

.o-card_container {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  &.isOpen{
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
}

.o-card {
  width: 100%;
  min-width:300px;
  background: $white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  @include border-radius(4px);
  overflow: hidden;
  margin: 20px 0;
  transition: all .4s;
  vertical-align: middle;
  position:relative;
  z-index:1;
  padding: 0;
  align-self: center;
  &.isOpenIng {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    opacity: 0;
    z-index: 100000 !important;
  }
  &.isOpen {
    transform-origin: center top;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0 40px bg_rgba(.3)!important;
    opacity: 1;
  }
  &::before {
    content: '';
    @include abs-pos(0, auto, auto, 50%);
    width: 0;
    height: 2px;
    background-color: $white;
    z-index: 1111;
    transition: all .4s;
  }
}


.a-loader {
  position: absolute;
  bottom:0;
  left:0;
  z-index:12000000;
  margin: 0;
  width: 100%;
  height: 6px;
  background-color: #fdba2c;
  display:none;
}
.a-loader__bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
.a-loader__bar:nth-child(1) {
  background-color: #da4733;
  animation: loading 1s linear infinite;
}
.a-loader__bar:nth-child(2) {
  background-color: #3b78e7;
  animation: loading 1s linear .3s infinite;
}
.a-loader__bar:nth-child(3) {
  background-color: #fdba2c;
  animation: loading 1s linear .6s infinite;
}
@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
    33.3333% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;}
}
.o-modal{
  position:absolute;
  width:100%;
  height:1px;
  bottom:0;
  left:50%;
  transform:translate(-50%,70%);
  transition: all 1s;
  //background:rgba(255,255,255,.99);
  z-index:1111110;
  padding:15px;
  opacity:0;
  &::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    margin: 0px 0 0 -5px;
    height: 10px;
    transform-origin: center;
    background: rgba(255, 255, 255, 0.97);
    transition: all 1s;
    z-index: 1;
    border-radius: 50%;
  }
  &.isOpen{
    width:100%;
    height:100%;
    opacity:1;
    left:0;
    transform:translate(0,0);
    &::after{
      width:1000px;
      height:1000px;
      left: 50%;
      margin: -500px 0 0 -500px;
    }
  }
}
.o-modal__close{ 
  position:absolute; 
  top: -1500px;
  right: 5px;
  font-size: 2rem;
  color:$grey_5;
  cursor:pointer;
  z-index:5;
  transition: all 1s;
}

.o-modal.isOpen .o-modal__close{
  top: 5px;
}
.o-modal__title {
    font-size: 1.8rem;
    background: none;
    font-weight: 600;
    display: block;
    line-height:1;
    margin:-15px -15px 0 -15px;
    padding:10px 15px;
    border-bottom:1px solid $grey_3;
    position:relative;
    z-index:4;
    //color:white;
    //background:$grey_5;
}
.o-modal__inner{
    overflow-y: auto;
    height: calc( 100% - 40px );
    opacity:0;
    padding:5px;
    transition: all 1.4s;
    position:relative;
    z-index:4;
}
.o-modal.isOpen .o-modal__inner{
  opacity:1;
  transition-delay:1.4s;
}
.o-card_header {
  position: relative;
  width: 100%;
  height: 180px;
  background: bg_rgba(.5);
  overflow: hidden;
  transition: all .7s;
  -webkit-background-clip: padding-box;
  -moz-border-radius:360px;
  &::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -2%;
    width: 104%;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1220;
    transform: skew(0, -3deg);
    transition: all .6s;
  }
  &::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -2%;
    width: 104%;
    height: 30px;
    background-color: $grey_2;
    box-shadow:0 0 2px rgba(0,0,0,.5);
    z-index: 1221;
    transform: skew(0, 2deg);
    transition: all .6s;
  }
}

.o-card_headerHeroImg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  transition: .4s;
  transform-origin: center center;
  transform: scale(1, 1);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  &::after{
    content:'';
    position:absolute;
    top:-20%;
    left:-20%;
    width:140%;
    height:140%;
    background:rgba(0,0,0,1);
    transform: skew(0, 2deg);
    transition: .4s;
    opacity:0;
  }
}

.o-card_logo {
  position: absolute;
  z-index: 2;
  width: 80px;
  height: 80px;
  //border: 1px solid $black;
  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.2);
  transition: all .5s;
  @include border-radius(50%);
  top: 10px;
  left:10px;
  transform-origin: center center;
  transform: translate(0, 0) scale(1, 1);
  overflow: hidden;
  background-size: cover !important;
  &.isOpen{
    /*box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);*/
    //top: 40%;
    //transform: translate(0,0) scale(0.6, 0.6);
    //left: 90%;
    box-shadow: 0 0 0 800px rgba(255, 255, 255, .6);
    transform: translate(-140% ,0) scale(1,1);
  }
}
.o-card:hover .o-card_logo{
  transform: translate(0 ,0) scale(.8,.8);
}
.o-card:hover .o-card_logo.isOpen{
  transform: translate(-140% ,0) scale(1,1);
}


.o-card-headerList {
  width: 100%;
  height: auto;
  transition: all .4s;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  border-spacing: 5px;
  list-style: none;

}

.o-card-headerList--openIcons {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 40px;
  @include border-radius(4px);
  background: rgba(0, 0, 0, .3);
  z-index: 6;
  cursor: pointer;
  transition: all .4s;
  span {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -3px;
    width: 6px;
    height: 6px;
    background: $white;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    transition: all .8s;
    transform-origin: center;
    @include border-radius(50%);

    &:nth-child(1) {
      top: 6px;
    }
    &:nth-child(2) {
      top: 17px;
    }
    &:nth-child(3) {
      top: 28px;
    }
  }
}
.o-card-headerList.isOpen .o-card-headerList--openIcons {
  width: 40px;
  @include border-radius(50%);
  span{
    @include border-radius(0);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
    margin: 0 0 0 -13px;
    top: 20px;
    &:nth-child(1) {
      width: 26px;
      height: 2px;
      transform: rotate(45deg);
    }
    &:nth-child(2) {
      opacity: 0;
      left: -250%;
    }
    &:nth-child(3) {
      width: 26px;
      height: 2px;
      transform: rotate(-45deg);
    }
  }
}
.o-card-headerList--item {
  position: absolute;
  top: 10px;
  right: 0;
  width: 40px;
  height: 40px;
  transform:scale(.15,.15);
  line-height: 40px;
  text-align: center;
  font-size: 1.5rem;
  background: rgba(255,255,255,.8);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  @include border-radius(50%);
  transition: all .4s;
  opacity: 1;
  margin: 0;
  padding: 0;
  z-index: 5;
}
.o-card-headerList.isOpen .o-card-headerList--item {
  opacity: 1;
  transform:scale(1,1);
  &:nth-child(2) {
    right: 55px;
    transition-delay: .10s;
  }
  &:nth-child(3) {
    right: 100px;
    transition-delay: .15s;
  }
  &:nth-child(4) {
    right: 145px;
    transition-delay: .20s;
  }
  &:nth-child(5) {
    right: 190px;
    transition-delay: .25s;
  }
}

.o-card-headerList--item:hover {
  background:$primary_color;
  color:white;
}

.o-card-headerList--link {
  color: $grey_5;
  font-size: 1rem;
  transition: all .3s;
  display: block;
  &:hover {
    color: $white;
    transform:scale(1.2,1.2);
  }
}

.o-card_body {
  width: 100%;
  height: auto;
  display: block;
  margin: -5px 0 0 0;
  padding: 0 30px  30px 30px;
  position: relative;
  background: $grey_2;
  transition: all .3s;
}

.o-card_title, .o-card_subTitle {
  margin: 0;
  padding:5px 0 5px 5px;
  border-bottom:1px solid $grey_1;
  font-size: 1.4rem;
  font-weight: 400;
}
.o-card_title {
  font-size: 1.8rem;
  background:none;
  font-weight: 600;
  display: block;
}

.o-card_paragraph {
  margin: 0;
  padding:5px;
  font-size: .9rem;
  line-height:1.3;
  transition: all .4s;
  opacity: 1;
  position:relative;
  max-height: 3rem;
  overflow:hidden;
  &::after{
    content: "";
    width: 100%;
    max-height: 200rem;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3rem;
    background: -webkit-linear-gradient(90deg,$grey_2 0,hsla(0,0%,100%,0) 100%);
    background: linear-gradient(0deg,$grey_2 0,hsla(0,0%,100%,0) 100%); 
  }
  &.isToggle{
    max-height:500px;
    &::after{
      background:none;
    }
  }
}
.a-more{
  color:$grey_3;
  font-weight:700;
  font-size:1.5rem;
  position:absolute;
  right:10px;
  bottom:25px;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  text-shadow:0 0 2px  rgba(0,0,0,0.1);
  // border-radius:50%;
  // background:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:all .5s;
  &::after{
    content: "\2795";
    font-family: entypo;
  }
  &.isActive::after{
    content: '\2796';
  }
  &:hover{
    transform:scale(1.2,1.2);
    color:$primary_color;
  }
}


.morecontent span {
    display: none;
}
.morelink {
    display: block;
}
.o-card {
  &.isOpen {
    .o-card_subTitle, .o-card_paragraph {
      display: block;
    }
  }
  &:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 10px 15px rgba(0,0,0,0.1);
    .o-card_headerHeroImg {
      transform: scale(1.2) rotate(-2deg);
      opacity: 1;
      &::after{
        opacity:.4;
      }
    }
  }
  &.isOpen .o-card_header {
    height: 150px;
  }
  &:hover {
    // .o-card_header {
    //   height: 150px;
    // }
    // .o-card_logo {
    //   /*box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);*/
    //   top: 40%;
    //   transform: translate(0, 0) scale(0.6, 0.6);
    // }
  }
  &.isOpen {
    .o-card_headerHeroImg {
      transform: scale(1, 1);
      opacity: 1;
    }
    .o-card_logo {
      top: 10%;
      transform: translate(0, 0) scale(1, 1);
    }
    .o-card_header::before {
      //bottom: -30px;
    }
    &::before {
      width: 100%;
      left: 0;
    }
  }
  &:hover::before {
    width: 100%;
    left: 0;
  }
}

/*.o-card:hover .o-card_header::before { bottom: -38px;}
.o-card.isOpen .o-card-headerList{display: none;}
.o-card:hover .o-card-headerList{top: 0; transition-delay: .2s;}
.o-card.isOpen .o-card-headerList--item,
.o-card:hover .o-card-headerList--item{padding:10px 0;}*/

/*.o-card:hover .o-card_body{ height: 300px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);}*/
/*.o-card:hover::before{height: 100%; top: 0;}*/

@media screen and (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }  
  .a-container {
    width: 1170px;
  }
  .o-card {
    width: 31.3333%;
    margin: 20px 1%;
  }
  .o-card-headerList::before {
    bottom: -15px;
    border-width: 0 0 15px 400px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  h1 {
    font-size: 2rem;
  }   
  .a-container {
    width: 100%;
  }
  .o-card {
    width: 48%;
    margin: 20px 1%;
  }
}

.o-card_footer {
  width: 100%;
  background: $grey_1;
  padding: 10px 10px 20px 10px;
  text-align: right;
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  &::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: $grey_1;
    z-index: 1;
    transform: skew(0, -2deg);
    transition: all .6s;
  }
}

.a-readMore {
  width: 100%;
  height: auto;
  display: inline-block;
  font-family: Arial, "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: $white;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 1px 1px 0px #07526e;
  padding: 15px 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  position: relative;
  cursor: pointer;
  z-index: 3;
  border: none;
  background: #109bce;
  box-shadow: inset 0px 1px 0px $primary_color, 0px 1px 0px 0px $secondary_color, 0px 4px 6px rgba(0, 0, 0, 0.2);
  transition: all .5s;
  &:hover, &:active {
    top: 0;
    box-shadow: inset 0px 1px 0px $primary_color, 0px 2px 0px 0px $secondary_color, 0px 4px 1px rgba(0, 0, 0, 0.2);
  }
}

.o-wtfModal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: -300px;
  opacity: 1;
  background: url(https://s3.eu-west-2.amazonaws.com/pirolab/images/circle.svg) no-repeat;
  background-position: center -10px;
  background-size: 300px 300px;
  opacity: .5;
  z-index: 100000;
  transition: all .5s;
  display: none;
  &.isOpenIng {
    display: block;
  }
  &.isOpen {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 1;
    background-position: center center;
    background-size: 500% 500%;
  }
}

.o-wtfModal_close {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
  text-align: center;
  font-size: 4rem;
  color: $primary_color;
  opacity: 0;
  transition: all 1s;
  cursor: pointer;
  &::before, &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    @include border-radius(2px);
    text-align: center;
    font-size: 4rem;
    background: $primary_color;
    transform: rotate(0) translate(0, -50%);
    transition: all .5s;
  }
}
@media screen and (min-width: 768px){
  .o-wtfModal_close {
    width: 66px;
    height: 66px;
  }
}
.o-wtfModal.isOpen .o-wtfModal_close {
  opacity: 1;
  &::after {
    transform: rotate(-45deg);
    width: 100%;
  }
  &::before {
    transform: rotate(45deg);
    width: 100%;
  }
  &:hover {
    transform: scale(0.8, 0.8);
  }
}
@charset "UTF-8";

@font-face {
  font-family: 'entypo';
  src: url('https://s3.eu-west-2.amazonaws.com/pirolab/icons/entypo.eot');
  src: url('https://s3.eu-west-2.amazonaws.com/pirolab/icons/entypo.eot?#iefix') format('embedded-opentype'),
       url('https://s3.eu-west-2.amazonaws.com/pirolab/icons/entypo.woff') format('woff'),
       url('https://s3.eu-west-2.amazonaws.com/pirolab/icons/entypo.ttf') format('truetype'),
       url('https://s3.eu-west-2.amazonaws.com/pirolab/icons/entypo.svg#entypo') format('svg');
  font-weight: normal; font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: entypo;
  font-style: normal;

  /* font-size: 14px; */

  display: inline-block;
  width: 1.1em;
  margin-right: .1em;
  text-align: center;
}

.the-icons li {
  font-size: 14px;
  line-height: 24px;
  height: 24px;
}

.icon-note:before { content: "\266a"; } /* '\266a' */
.icon-note-beamed:before { content: "\266b"; } /* '\266b' */
.icon-music:before { content: "🎵"; } /* '\1f3b5' */
.icon-search:before { content: "🔍"; } /* '\1f50d' */
.icon-flashlight:before { content: "🔦"; } /* '\1f526' */
.icon-mail:before { content: "\2709"; } /* '\2709' */
.icon-heart:before { content: "\2665"; } /* '\2665' */
.icon-heart-empty:before { content: "\2661"; } /* '\2661' */
.icon-star:before { content: "\2605"; } /* '\2605' */
.icon-star-empty:before { content: "\2606"; } /* '\2606' */
.icon-user:before { content: "👤"; } /* '\1f464' */
.icon-users:before { content: "👥"; } /* '\1f465' */
.icon-user-add:before { content: "\e700"; } /* '\e700' */
.icon-video:before { content: "🎬"; } /* '\1f3ac' */
.icon-picture:before { content: "🌄"; } /* '\1f304' */
.icon-camera:before { content: "📷"; } /* '\1f4f7' */
.icon-layout:before { content: "\268f"; } /* '\268f' */
.icon-menu:before { content: "\2630"; } /* '\2630' */
.icon-check:before { content: "\2713"; } /* '\2713' */
.icon-cancel:before { content: "\2715"; } /* '\2715' */
.icon-cancel-circled:before { content: "\2716"; } /* '\2716' */
.icon-cancel-squared:before { content: "\274e"; } /* '\274e' */
.icon-plus:before { content: "\2b"; } /* '\2b' */
.icon-plus-circled:before { content: "\2795"; } /* '\2795' */
.icon-plus-squared:before { content: "\229e"; } /* '\229e' */
.icon-minus:before { content: "\2d"; } /* '\2d' */
.icon-minus-circled:before { content: "\2796"; } /* '\2796' */
.icon-minus-squared:before { content: "\229f"; } /* '\229f' */
.icon-help:before { content: "\2753"; } /* '\2753' */
.icon-help-circled:before { content: "\e704"; } /* '\e704' */
.icon-info:before { content: "\2139"; } /* '\2139' */
.icon-info-circled:before { content: "\e705"; } /* '\e705' */
.icon-back:before { content: "🔙"; } /* '\1f519' */
.icon-home:before { content: "\2302"; } /* '\2302' */
.icon-link:before { content: "🔗"; } /* '\1f517' */
.icon-attach:before { content: "📎"; } /* '\1f4ce' */
.icon-lock:before { content: "🔒"; } /* '\1f512' */
.icon-lock-open:before { content: "🔓"; } /* '\1f513' */
.icon-eye:before { content: "\e70a"; } /* '\e70a' */
.icon-tag:before { content: "\e70c"; } /* '\e70c' */
.icon-bookmark:before { content: "🔖"; } /* '\1f516' */
.icon-bookmarks:before { content: "📑"; } /* '\1f4d1' */
.icon-flag:before { content: "\2691"; } /* '\2691' */
.icon-thumbs-up:before { content: "👍"; } /* '\1f44d' */
.icon-thumbs-down:before { content: "👎"; } /* '\1f44e' */
.icon-download:before { content: "📥"; } /* '\1f4e5' */
.icon-upload:before { content: "📤"; } /* '\1f4e4' */
.icon-upload-cloud:before { content: "\e711"; } /* '\e711' */
.icon-reply:before { content: "\e712"; } /* '\e712' */
.icon-reply-all:before { content: "\e713"; } /* '\e713' */
.icon-forward:before { content: "\27a6"; } /* '\27a6' */
.icon-quote:before { content: "\275e"; } /* '\275e' */
.icon-code:before { content: "\e714"; } /* '\e714' */
.icon-export:before { content: "\e715"; } /* '\e715' */
.icon-pencil:before { content: "\270e"; } /* '\270e' */
.icon-feather:before { content: "\2712"; } /* '\2712' */
.icon-print:before { content: "\e716"; } /* '\e716' */
.icon-retweet:before { content: "\e717"; } /* '\e717' */
.icon-keyboard:before { content: "\2328"; } /* '\2328' */
.icon-comment:before { content: "\e718"; } /* '\e718' */
.icon-chat:before { content: "\e720"; } /* '\e720' */
.icon-bell:before { content: "🔔"; } /* '\1f514' */
.icon-attention:before { content: "\26a0"; } /* '\26a0' */
.icon-alert:before { content: "💥"; } /* '\1f4a5' */
.icon-vcard:before { content: "\e722"; } /* '\e722' */
.icon-address:before { content: "\e723"; } /* '\e723' */
.icon-location:before { content: "\e724"; } /* '\e724' */
.icon-map:before { content: "\e727"; } /* '\e727' */
.icon-direction:before { content: "\27a2"; } /* '\27a2' */
.icon-compass:before { content: "\e728"; } /* '\e728' */
.icon-cup:before { content: "\2615"; } /* '\2615' */
.icon-trash:before { content: "\e729"; } /* '\e729' */
.icon-doc:before { content: "\e730"; } /* '\e730' */
.icon-docs:before { content: "\e736"; } /* '\e736' */
.icon-doc-landscape:before { content: "\e737"; } /* '\e737' */
.icon-doc-text:before { content: "📄"; } /* '\1f4c4' */
.icon-doc-text-inv:before { content: "\e731"; } /* '\e731' */
.icon-newspaper:before { content: "📰"; } /* '\1f4f0' */
.icon-book-open:before { content: "📖"; } /* '\1f4d6' */
.icon-book:before { content: "📕"; } /* '\1f4d5' */
.icon-folder:before { content: "📁"; } /* '\1f4c1' */
.icon-archive:before { content: "\e738"; } /* '\e738' */
.icon-box:before { content: "📦"; } /* '\1f4e6' */
.icon-rss:before { content: "\e73a"; } /* '\e73a' */
.icon-phone:before { content: "📞"; } /* '\1f4de' */
.icon-cog:before { content: "\2699"; } /* '\2699' */
.icon-tools:before { content: "\2692"; } /* '\2692' */
.icon-share:before { content: "\e73c"; } /* '\e73c' */
.icon-shareable:before { content: "\e73e"; } /* '\e73e' */
.icon-basket:before { content: "\e73d"; } /* '\e73d' */
.icon-bag:before { content: "👜"; } /* '\1f45c' */
.icon-calendar:before { content: "📅"; } /* '\1f4c5' */
.icon-login:before { content: "\e740"; } /* '\e740' */
.icon-logout:before { content: "\e741"; } /* '\e741' */
.icon-mic:before { content: "🎤"; } /* '\1f3a4' */
.icon-mute:before { content: "🔇"; } /* '\1f507' */
.icon-sound:before { content: "🔊"; } /* '\1f50a' */
.icon-volume:before { content: "\e742"; } /* '\e742' */
.icon-clock:before { content: "🕔"; } /* '\1f554' */
.icon-hourglass:before { content: "\23f3"; } /* '\23f3' */
.icon-lamp:before { content: "💡"; } /* '\1f4a1' */
.icon-light-down:before { content: "🔅"; } /* '\1f505' */
.icon-light-up:before { content: "🔆"; } /* '\1f506' */
.icon-adjust:before { content: "\25d1"; } /* '\25d1' */
.icon-block:before { content: "🚫"; } /* '\1f6ab' */
.icon-resize-full:before { content: "\e744"; } /* '\e744' */
.icon-resize-small:before { content: "\e746"; } /* '\e746' */
.icon-popup:before { content: "\e74c"; } /* '\e74c' */
.icon-publish:before { content: "\e74d"; } /* '\e74d' */
.icon-window:before { content: "\e74e"; } /* '\e74e' */
.icon-arrow-combo:before { content: "\e74f"; } /* '\e74f' */
.icon-down-circled:before { content: "\e758"; } /* '\e758' */
.icon-left-circled:before { content: "\e759"; } /* '\e759' */
.icon-right-circled:before { content: "\e75a"; } /* '\e75a' */
.icon-up-circled:before { content: "\e75b"; } /* '\e75b' */
.icon-down-open:before { content: "\e75c"; } /* '\e75c' */
.icon-left-open:before { content: "\e75d"; } /* '\e75d' */
.icon-right-open:before { content: "\e75e"; } /* '\e75e' */
.icon-up-open:before { content: "\e75f"; } /* '\e75f' */
.icon-down-open-mini:before { content: "\e760"; } /* '\e760' */
.icon-left-open-mini:before { content: "\e761"; } /* '\e761' */
.icon-right-open-mini:before { content: "\e762"; } /* '\e762' */
.icon-up-open-mini:before { content: "\e763"; } /* '\e763' */
.icon-down-open-big:before { content: "\e764"; } /* '\e764' */
.icon-left-open-big:before { content: "\e765"; } /* '\e765' */
.icon-right-open-big:before { content: "\e766"; } /* '\e766' */
.icon-up-open-big:before { content: "\e767"; } /* '\e767' */
.icon-down:before { content: "\2b07"; } /* '\2b07' */
.icon-left:before { content: "\2b05"; } /* '\2b05' */
.icon-right:before { content: "\27a1"; } /* '\27a1' */
.icon-up:before { content: "\2b06"; } /* '\2b06' */
.icon-down-dir:before { content: "\25be"; } /* '\25be' */
.icon-left-dir:before { content: "\25c2"; } /* '\25c2' */
.icon-right-dir:before { content: "\25b8"; } /* '\25b8' */
.icon-up-dir:before { content: "\25b4"; } /* '\25b4' */
.icon-down-bold:before { content: "\e4b0"; } /* '\e4b0' */
.icon-left-bold:before { content: "\e4ad"; } /* '\e4ad' */
.icon-right-bold:before { content: "\e4ae"; } /* '\e4ae' */
.icon-up-bold:before { content: "\e4af"; } /* '\e4af' */
.icon-down-thin:before { content: "\2193"; } /* '\2193' */
.icon-left-thin:before { content: "\2190"; } /* '\2190' */
.icon-right-thin:before { content: "\2192"; } /* '\2192' */
.icon-up-thin:before { content: "\2191"; } /* '\2191' */
.icon-ccw:before { content: "\27f2"; } /* '\27f2' */
.icon-cw:before { content: "\27f3"; } /* '\27f3' */
.icon-arrows-ccw:before { content: "🔄"; } /* '\1f504' */
.icon-level-down:before { content: "\21b3"; } /* '\21b3' */
.icon-level-up:before { content: "\21b0"; } /* '\21b0' */
.icon-shuffle:before { content: "🔀"; } /* '\1f500' */
.icon-loop:before { content: "🔁"; } /* '\1f501' */
.icon-switch:before { content: "\21c6"; } /* '\21c6' */
.icon-play:before { content: "\25b6"; } /* '\25b6' */
.icon-stop:before { content: "\25a0"; } /* '\25a0' */
.icon-pause:before { content: "\2389"; } /* '\2389' */
.icon-record:before { content: "\26ab"; } /* '\26ab' */
.icon-to-end:before { content: "\23ed"; } /* '\23ed' */
.icon-to-start:before { content: "\23ee"; } /* '\23ee' */
.icon-fast-forward:before { content: "\23e9"; } /* '\23e9' */
.icon-fast-backward:before { content: "\23ea"; } /* '\23ea' */
.icon-progress-0:before { content: "\e768"; } /* '\e768' */
.icon-progress-1:before { content: "\e769"; } /* '\e769' */
.icon-progress-2:before { content: "\e76a"; } /* '\e76a' */
.icon-progress-3:before { content: "\e76b"; } /* '\e76b' */
.icon-target:before { content: "🎯"; } /* '\1f3af' */
.icon-palette:before { content: "🎨"; } /* '\1f3a8' */
.icon-list:before { content: "\e005"; } /* '\e005' */
.icon-list-add:before { content: "\e003"; } /* '\e003' */
.icon-signal:before { content: "📶"; } /* '\1f4f6' */
.icon-trophy:before { content: "🏆"; } /* '\1f3c6' */
.icon-battery:before { content: "🔋"; } /* '\1f50b' */
.icon-back-in-time:before { content: "\e771"; } /* '\e771' */
.icon-monitor:before { content: "💻"; } /* '\1f4bb' */
.icon-mobile:before { content: "📱"; } /* '\1f4f1' */
.icon-network:before { content: "\e776"; } /* '\e776' */
.icon-cd:before { content: "💿"; } /* '\1f4bf' */
.icon-inbox:before { content: "\e777"; } /* '\e777' */
.icon-install:before { content: "\e778"; } /* '\e778' */
.icon-globe:before { content: "🌎"; } /* '\1f30e' */
.icon-cloud:before { content: "\2601"; } /* '\2601' */
.icon-cloud-thunder:before { content: "\26c8"; } /* '\26c8' */
.icon-flash:before { content: "\26a1"; } /* '\26a1' */
.icon-moon:before { content: "\263d"; } /* '\263d' */
.icon-flight:before { content: "\2708"; } /* '\2708' */
.icon-paper-plane:before { content: "\e79b"; } /* '\e79b' */
.icon-leaf:before { content: "🍂"; } /* '\1f342' */
.icon-lifebuoy:before { content: "\e788"; } /* '\e788' */
.icon-mouse:before { content: "\e789"; } /* '\e789' */
.icon-briefcase:before { content: "💼"; } /* '\1f4bc' */
.icon-suitcase:before { content: "\e78e"; } /* '\e78e' */
.icon-dot:before { content: "\e78b"; } /* '\e78b' */
.icon-dot-2:before { content: "\e78c"; } /* '\e78c' */
.icon-dot-3:before { content: "\e78d"; } /* '\e78d' */
.icon-brush:before { content: "\e79a"; } /* '\e79a' */
.icon-magnet:before { content: "\e7a1"; } /* '\e7a1' */
.icon-infinity:before { content: "\221e"; } /* '\221e' */
.icon-erase:before { content: "\232b"; } /* '\232b' */
.icon-chart-pie:before { content: "\e751"; } /* '\e751' */
.icon-chart-line:before { content: "📈"; } /* '\1f4c8' */
.icon-chart-bar:before { content: "📊"; } /* '\1f4ca' */
.icon-chart-area:before { content: "🔾"; } /* '\1f53e' */
.icon-tape:before { content: "\2707"; } /* '\2707' */
.icon-graduation-cap:before { content: "🎓"; } /* '\1f393' */
.icon-language:before { content: "\e752"; } /* '\e752' */
.icon-ticket:before { content: "🎫"; } /* '\1f3ab' */
.icon-water:before { content: "💦"; } /* '\1f4a6' */
.icon-droplet:before { content: "💧"; } /* '\1f4a7' */
.icon-air:before { content: "\e753"; } /* '\e753' */
.icon-credit-card:before { content: "💳"; } /* '\1f4b3' */
.icon-floppy:before { content: "💾"; } /* '\1f4be' */
.icon-clipboard:before { content: "📋"; } /* '\1f4cb' */
.icon-megaphone:before { content: "📣"; } /* '\1f4e3' */
.icon-database:before { content: "\e754"; } /* '\e754' */
.icon-drive:before { content: "\e755"; } /* '\e755' */
.icon-bucket:before { content: "\e756"; } /* '\e756' */
.icon-thermometer:before { content: "\e757"; } /* '\e757' */
.icon-key:before { content: "🔑"; } /* '\1f511' */
.icon-flow-cascade:before { content: "\e790"; } /* '\e790' */
.icon-flow-branch:before { content: "\e791"; } /* '\e791' */
.icon-flow-tree:before { content: "\e792"; } /* '\e792' */
.icon-flow-line:before { content: "\e793"; } /* '\e793' */
.icon-flow-parallel:before { content: "\e794"; } /* '\e794' */
.icon-rocket:before { content: "🚀"; } /* '\1f680' */
.icon-gauge:before { content: "\e7a2"; } /* '\e7a2' */
.icon-traffic-cone:before { content: "\e7a3"; } /* '\e7a3' */
.icon-cc:before { content: "\e7a5"; } /* '\e7a5' */
.icon-cc-by:before { content: "\e7a6"; } /* '\e7a6' */
.icon-cc-nc:before { content: "\e7a7"; } /* '\e7a7' */
.icon-cc-nc-eu:before { content: "\e7a8"; } /* '\e7a8' */
.icon-cc-nc-jp:before { content: "\e7a9"; } /* '\e7a9' */
.icon-cc-sa:before { content: "\e7aa"; } /* '\e7aa' */
.icon-cc-nd:before { content: "\e7ab"; } /* '\e7ab' */
.icon-cc-pd:before { content: "\e7ac"; } /* '\e7ac' */
.icon-cc-zero:before { content: "\e7ad"; } /* '\e7ad' */
.icon-cc-share:before { content: "\e7ae"; } /* '\e7ae' */
.icon-cc-remix:before { content: "\e7af"; } /* '\e7af' */
.icon-github:before { content: "\f300"; } /* '\f300' */
.icon-github-circled:before { content: "\f301"; } /* '\f301' */
.icon-flickr:before { content: "\f303"; } /* '\f303' */
.icon-flickr-circled:before { content: "\f304"; } /* '\f304' */
.icon-vimeo:before { content: "\f306"; } /* '\f306' */
.icon-vimeo-circled:before { content: "\f307"; } /* '\f307' */
.icon-twitter:before { content: "\f309"; } /* '\f309' */
.icon-twitter-circled:before { content: "\f30a"; } /* '\f30a' */
.icon-facebook:before { content: "\f30c"; } /* '\f30c' */
.icon-facebook-circled:before { content: "\f30d"; } /* '\f30d' */
.icon-facebook-squared:before { content: "\f30e"; } /* '\f30e' */
.icon-gplus:before { content: "\f30f"; } /* '\f30f' */
.icon-gplus-circled:before { content: "\f310"; } /* '\f310' */
.icon-pinterest:before { content: "\f312"; } /* '\f312' */
.icon-pinterest-circled:before { content: "\f313"; } /* '\f313' */
.icon-tumblr:before { content: "\f315"; } /* '\f315' */
.icon-tumblr-circled:before { content: "\f316"; } /* '\f316' */
.icon-linkedin:before { content: "\f318"; } /* '\f318' */
.icon-linkedin-circled:before { content: "\f319"; } /* '\f319' */
.icon-dribbble:before { content: "\f31b"; } /* '\f31b' */
.icon-dribbble-circled:before { content: "\f31c"; } /* '\f31c' */
.icon-stumbleupon:before { content: "\f31e"; } /* '\f31e' */
.icon-stumbleupon-circled:before { content: "\f31f"; } /* '\f31f' */
.icon-lastfm:before { content: "\f321"; } /* '\f321' */
.icon-lastfm-circled:before { content: "\f322"; } /* '\f322' */
.icon-rdio:before { content: "\f324"; } /* '\f324' */
.icon-rdio-circled:before { content: "\f325"; } /* '\f325' */
.icon-spotify:before { content: "\f327"; } /* '\f327' */
.icon-spotify-circled:before { content: "\f328"; } /* '\f328' */
.icon-qq:before { content: "\f32a"; } /* '\f32a' */
.icon-instagrem:before { content: "\f32d"; } /* '\f32d' */
.icon-dropbox:before { content: "\f330"; } /* '\f330' */
.icon-evernote:before { content: "\f333"; } /* '\f333' */
.icon-flattr:before { content: "\f336"; } /* '\f336' */
.icon-skype:before { content: "\f339"; } /* '\f339' */
.icon-skype-circled:before { content: "\f33a"; } /* '\f33a' */
.icon-renren:before { content: "\f33c"; } /* '\f33c' */
.icon-sina-weibo:before { content: "\f33f"; } /* '\f33f' */
.icon-paypal:before { content: "\f342"; } /* '\f342' */
.icon-picasa:before { content: "\f345"; } /* '\f345' */
.icon-soundcloud:before { content: "\f348"; } /* '\f348' */
.icon-mixi:before { content: "\f34b"; } /* '\f34b' */
.icon-behance:before { content: "\f34e"; } /* '\f34e' */
.icon-google-circles:before { content: "\f351"; } /* '\f351' */
.icon-vkontakte:before { content: "\f354"; } /* '\f354' */
.icon-smashing:before { content: "\f357"; } /* '\f357' */
.icon-sweden:before { content: "\f601"; } /* '\f601' */
.icon-db-shape:before { content: "\f600"; } /* '\f600' */
.icon-logo-db:before { content: "\f603"; } /* '\f603' */
View Compiled
$(window).on("load", function() {
  //console.log(view);
  $(".o-card_headerHeroImg").each(function() {
    var bg = $(this).attr("data-image");
    $(this).css({ "background-image": "url(" + bg + ")" });
  });

  $(document).on("click touch", ".o-card-headerList--openIcons", function(e) {
    $(this).parent().toggleClass("isOpen");
    $(this).parent().next().toggleClass("isOpen");
    var btnOffset = $(this).offset(),
    xPos = e.pageX - btnOffset.left,
    yPos = e.pageY - btnOffset.top;
    //console.log(xPos +' / '+ yPos);
    return false;
  });
  
  $(document).on("click touch", ".o-card-headerList li", function(e) {
    e.stopPropagation();
    return false;
  });
  
  $(document).on("click touch", function() {
    $(".o-card-headerList,.o-card_logo").removeClass("isOpen");
  });
  
  $('.o-card_paragraph').each(function(){
    var _this = $(this);
    var pHeight = _this.height();
    console.log(pHeight);
    _this.after('<span class="a-more"></span>')
  });
  
  $(document).on( 'click' , '.a-more' , function(){
    $(this).prev('p').toggleClass('isToggle');
    $(this).toggleClass('isActive');
  });
  
  $('.a-readMore').on('click touch', function(event) {
    event.preventDefault();
    $(id_target).find('.o-modal__close').attr('data-close','');
    var this_target = $(this).attr('data-href');
    var _this = $(this);
    var id_target = '#'+this_target.replace(/\./g,'');
    console.log(id_target);
    $(id_target).find('.a-loader').show();
    $(id_target).find('.o-modal__close').attr('data-close',id_target);
    
    $.ajax({
        url: 'https://en.wikipedia.org/w/api.php',
        data: {
            format: 'json',
            action: 'parse',
            page: this_target,
            prop:'text',
            section:0,
        },
        dataType: 'jsonp',
        success: function (data) {
        //console.log(data)
        $(id_target).find('.o-modal__inner').html('');
        $(id_target).find('.o-modal__title').html('').hide();    
        $(id_target).find('.o-modal').addClass('isOpen');
        if(!$(id_target).find('.a-more').hasClass('isActive')){
            $(id_target).find('.a-more').trigger('click');
         }
        var markup = data.parse.text['*'];
        var i = $('<div></div>').html(markup);
        i.find('a').each(function() { $(this).replaceWith($(this).html()); });
        i.find('sup').remove();
        i.find('.mw-ext-cite-error').remove();
         setTimeout(function() {
            $(id_target).find('.o-modal__title').html( data.parse.title).fadeIn(300);
            $(id_target).find('.o-modal__inner').html($(i).find('p'));
            $(id_target).find('.a-loader').hide();
          }, 1000);
        }
    });
  });
  
  $('.o-modal__close').on('click touch', function(){
    var close_target = $(this).attr('data-close');
    $(close_target).find('.o-modal').removeClass('isOpen');
    $(close_target).find('.o-modal__inner').html('');
    $(close_target).find('.o-modal__title').html('').hide();       
    $(close_target).find('.a-more').trigger('click');
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js