/*
Theme Name: Astrid Vis 
Theme URI: https://wordpress.org/themes/custom
Author: Adeko
Author URI: https://adeko.nl
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: pjdecocq.nl

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
#blog .container .row > div {
	padding:0 20px;
}
@-moz-keyframes bounce {
  0%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

/* Round icon rotation */
.rotate {
	-webkit-transition-duration:.8s;
	-moz-transition-duration:.8s;
	-o-transition-duration:.8s;
	transition-duration:.8s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	overflow:hidden;
}

.rotate:hover { 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

/*********************************************
 * ROLLING LINKS
 *********************************************/

#reveal .roll {
    display: inline-block; /* give it a layout */    
    overflow: hidden;
    vertical-align: top; /* just to be sure */

    /*
     * The smaller the number the closer you look at this element
    */
    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
            perspective: 400px;

    /*
     * Relative position of the POV
     * Default is 50% 50% so not necessary
    */
    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;    

}
    #reveal .roll:hover {
        background: none;
        text-shadow: none;
    }

#reveal .roll span {
    display: block; /* give it a layout */ 
    position: relative;
    padding: 0 2px;

    pointer-events: none;

    /* duration */
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%; /* posx posy */
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
    #reveal .roll:hover span {
        background: rgba(0,0,0,0.5);
        -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
                transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
    }

/* ======================= */
/* = Face after rotation = */
/* ======================= */
#reveal .roll span:after {
    content: attr(data-title);
    display: block; /* maybe its not necessary */
    position: absolute; /* position over  */
    left: 0;
    top: 0;
    padding: 0 2px; /* nothing functional, just right, left space */
    color: #fff;
    background: #d35d94;
	border-radius:2px;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    
    /* 
    * translate3d => move up element to the top 
    *     rotateX => rotate till hidden
    */
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}