/* === CCI Journalist Press Card === */ 
.cci-press-card__wrap

 .cci-press-card.card--front 
  header.press-card__header
  section.press-card__content
   div.journalist-name.animated.fadeInLeft data-journalist-name="Lasse Chor" 
   span.journalist-title Happiest Man Alive
  footer.press-card__footer
   h4 Lasse's Latest Articles
   div.article-link Why Startups Succeed
   div.article-link PCI's Next Big Opportunity

   div#flipTrigger 
    ' Tap to view Lasse's Instagram
    span.triggerImage ➜
  
 .cci-press-card.card--back
  <iframe src="http://snapwidget.com/in/?h=c3RhcnR1cHN8aW58NzV8NHw0fHxub3wwfG5vbmV8b25TdGFydA==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:300px; height: 300px" ></iframe>
  
  div#flipTrigger.padded 
   span.triggerImage
   ' Tap here to go back
   

  

/* === CCI Journalist Press Card === */

* {
  position: relative;
  box-sizing: border-box;
} 

html { font-size: 62.5%; }
body {
  background: #ecf0f1;
  margin: 0 auto;
  font-size: 1.6rem;
  width: 72rem;
  padding-top: 4rem;
}

h4 { margin-bottom: 1rem; }

.cci-press-card__wrap {
  position: relative;
  width: 300px;
  height: 380px;
  
  margin: 0 auto;
  
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  transition: transform 0.5s ease;
} 

.card--front {  z-index: 10; }
.card--back {  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);  
  transform: rotateY(180deg); top: 0; overflow: hidden; }

.padded { padding: 0 2rem; font-size: 2.3rem; text-align: center; }

.cci-press-card {
  width: 30rem;
  height: 38rem;
  margin: 0 auto;
  font-family: "Lucida Grande", sans-serif;
  background: #3498db;
  border-radius: 8px;
  border-bottom: 3px solid #2980b9;
  
  position: absolute;
  
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden; 
  backface-visibility: hidden;   
  
  .press-card__header {
    height: 6rem;
    padding: 2rem;
    font-size: 2rem;
    color: ghostwhite;
    line-height: 1;
    font-weight: 700;
    
    &:before {
      content: "Journalist";
    }
    
    &:after {
      content: "Press Card";
      color: #2980b9;
      float: right;
    }
  }

  .press-card__content {
    height: 16rem;
    padding: 2rem;
    font-size: 2rem;
    background: white url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/swb_foto_lasse.jpg') no-repeat;  
    background-position-x: 125px;
    background-size: contain;
    transition: background-position-x 1s ease-out;
    animation: moveRight .32s ease-in-out forwards;
    
    
    .journalist-name {
      
      
      
      &:before {
        content: attr(data-journalist-name) "\A\A";
        color: black;
        width: 100%;
        clear: both;
        display: block;
        font-weight: 700;
        
      }
     
    }
    
  }
  
      .journalist-title {
        display: block;
        font-size: 1.4rem;
        color: #7f8c8d;
        width: 100%;
        clear: both;
      }
  
  .press-card__footer {
    padding: 0 2rem;
    color: white;
    
    .article-link { margin-bottom: .5rem; opacity: .75; }
    

  }
  
}

    #flipTrigger {
      font-weight: 700;
      top: 22px;
      color: #2980b9;
    }

.rotate-3d{
  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);  
  transform: rotateY(180deg);  
}

.z-up { z-index: 10; }

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes moveRight {
  from {}
  to { background-position-x: 145px; }
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}

/* === CCI Journalist Flip Card === */ 
document.ontouchmove = function(event){
    event.preventDefault();
}

$(document).ready(function(){
  $('.cci-press-card__wrap').on("click", function(){
    $(this).toggleClass('rotate-3d');
    $('.card--back').toggleClass('z-up');
  })
})