/*
Project: V&V Digitaal Adviseur
Author: Voogd & Voogd Diensten
Description: Css reset, responsive grid, clearfix includes, loaders and transitions
File: includes.css
*/


/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 

pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 

samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 

fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, 

aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 

output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, 

summary {
  display: block;
}


/* RWD : Resets
-------------------------------------------------------------- */
html {
  overflow-y: auto;
}


/* RWD : Based on the 1140px Grid V2 by Andy Taylor
-------------------------------------------------------------- */

.container {
	float:left; 
	width:100%; 
}
.row {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	padding-left: 1.25em;
	padding-right: 1.25em;
	overflow: hidden;
}

img, object, embed { max-width: 100%; }
img { height: auto; }



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/
-------------------------------------------------------------- */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

  
  
/* Loader icon
-------------------------------------------------------------- */

@-webkit-keyframes three-quarters {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes three-quarters {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Styles for old versions of IE */
.loader {
    font-family: sans-serif;
    font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.loader:not(:required) {
    -webkit-animation: three-quarters 1000ms infinite cubic-bezier(0.445, 0.050, 0.550, 0.950); 
    animation: three-quarters 1000ms infinite cubic-bezier(0.445, 0.050, 0.550, 0.950);
    border: 4px solid rgba(255,255,255,.2);
    border-right-color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    width: 22px;
    height: 22px;
}
/* Hack for angular ng-hide and ng-show so that the animation doesn't HAVE TO complete */
.loader.ng-animate { 
    -webkit-animation: none 0s; 
    animation: none 0s;
}
.loader.light {
    border: 4px solid rgba(255,255,255,.2);
    border-right-color: #fff;
}
.loader.dark {
    border: 4px solid rgba(80,80,80,.2);
    border-right-color: #505050;
}
.loader.brand {
    border: 4px solid rgba(0,163,255,.2);
    border-right-color: #00a3ff;
}
.loader.mini {
    width: 18px;
    height: 18px;
    border-width:3px;
    border-radius:8px;
}
.loader.large {
    width: 32px;
    height: 32px;
    border-width:5px;
    border-radius:16px;
}
.loader.xlarge {
    width: 48px;
    height: 48px;
    border-width:7px;
    border-radius:24px;
}


/* Page transitions
-------------------------------------------------------------- */

/* Desktop big screen */
@media screen and (max-width: 720px) {
    
    
    /* Header Transitions


    .headerWrapper.ng-animate, .headerWrapper.ng-animate h1 {
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-duration: 2000ms;
        transition-duration: 2000ms;
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

    .headerWrapper.ng-enter { opacity: 1; }
    .headerWrapper.ng-enter.ng-enter-active { opacity: 1; }
    .headerWrapper.ng-leave { opacity: 1; }
    .headerWrapper.ng-leave.ng-leave-active { opacity: 1; }


    .headerWrapper.ng-enter h1 {
        -webkite-transition-property: none;
        transition-property: all;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
    .headerWrapper.ng-enter-active h1 {
        -webkite-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .headerWrapper.ng-leave h1 {
        -webkite-transition-property: none;
        transition-property: all;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .headerWrapper.ng-leave-active h1 {
        -webkite-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(100%,0,0);
    } */


    /* Page Transitions */


    /* Default Enter/Leave */
    .page.ng-animate {
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
        -webkit-transition-property: opacity;
        transition-property: opacity;
        background-color: #efefef;
    }

    .page.ng-enter { opacity: 0; }
    .page.ng-enter.ng-enter-active { opacity: 1; }
    .page.ng-leave { opacity: 1; }
    .page.ng-leave.ng-leave-active { opacity: 0; }


    /* slideRight */
    .page.anim-ltr {
        opacity: 1 !important;
    }

    .page.anim-ltr.ng-enter {
        -webkite-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(-380px,0,0);
        transform: translate3d(-380px,0,0);
    }
    @media screen and (min-width: 321px) {
        .page.anim-ltr.ng-enter {
            -webkit-transform: translate3d(-540px,0,0);
            transform: translate3d(-540px,0,0);
        }
    }
    @media screen and (min-width: 480px) {
        .page.anim-ltr.ng-enter {
            -webkit-transform: translate3d(-660px,0,0);
            transform: translate3d(-660px,0,0);
        }
    }
    @media screen and (min-width: 600px) {
        .page.anim-ltr.ng-enter {
            -webkit-transform: translate3d(-780px,0,0);
            transform: translate3d(-780px,0,0);
        }
    }

    .page.anim-ltr.ng-enter.ng-enter-active {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .page.anim-ltr.ng-leave {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .page.anim-ltr.ng-leave.ng-leave-active {
        -webkit-transform: translate3d(400px,0,0);
        transform: translate3d(400px,0,0);
    }
    @media screen and (min-width: 321px) {
        .page.anim-ltr.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(540px,0,0);
            transform: translate3d(540px,0,0);
        }
    }
    @media screen and (min-width: 480px) {
        .page.anim-ltr.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(660px,0,0);
            transform: translate3d(660px,0,0);
        }
    }
    @media screen and (min-width: 600px) {
        .page.anim-ltr.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(780px,0,0);
            transform: translate3d(780px,0,0);
        }
    }


    /* slideLeft */
    .page.anim-rtl {
        opacity: 1 !important;
    }

    .page.anim-rtl.ng-enter {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(320px,0,0);
        transform: translate3d(320px,0,0);
    }
    @media screen and (min-width: 321px) {
        .page.anim-rtl.ng-enter {
            -webkit-transform: translate3d(480px,0,0);
            transform: translate3d(480px,0,0);
        }
    }
    @media screen and (min-width: 480px) {
        .page.anim-rtl.ng-enter {
            -webkit-transform: translate3d(600px,0,0);
            transform: translate3d(600px,0,0);
        }
    }
    @media screen and (min-width: 600px) {
        .page.anim-rtl.ng-enter {
            -webkit-transform: translate3d(720px,0,0);
            transform: translate3d(720px,0,0);
        }
    }

    .page.anim-rtl.ng-enter.ng-enter-active {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .page.anim-rtl.ng-leave {
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .page.anim-rtl.ng-leave.ng-leave-active {
        -webkit-transform: translate3d(-320px,0,0);
        transform: translate3d(-320px,0,0);
    }
    @media screen and (min-width: 321px) {
        .page.anim-rtl.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(-480px,0,0);
            transform: translate3d(-480px,0,0);
        }
    }
    @media screen and (min-width: 480px) {
        .page.anim-rtl.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(-600px,0,0);
            transform: translate3d(-600px,0,0);
        }
    }
    @media screen and (min-width: 600px) {
        .page.anim-rtl.ng-leave.ng-leave-active {
            -webkit-transform: translate3d(-720px,0,0);
            transform: translate3d(-720px,0,0);
        }
    }
}


/* Popup transitions */

/* popups gaan over de header heen*/
.page.anim-popup {
    z-index: 250;
    top: 0;
}

.page.anim-popup.ng-leave {
    -webkit-animation: hold .4s;
    animation: hold .4s;
    opacity: 0;
    top: 50px;
}

.page.anim-popup.ng-enter {
    -webkit-animation: popupTop .4s ease-in-out;
    animation: popupTop .4s ease-in-out;
    border-top:1px solid #c3c3c3 !important;
    z-index: 251;
}

.anim-popdown.ng-enter {
    z-index: 250;
}
.anim-popdown.ng-leave{
    /* top: 0 !important; */
    z-index: 249;
    opacity: 0;
}

.page.anim-popdown.ng-enter {
    -webkit-animation: hold .4s;
    animation: hold .4s;
}
.page.anim-popdown.ng-leave {
    -webkit-animation: popupBottom .4s;
    animation: popupBottom .4s;
    z-index:251;
    border-top:1px solid #c3c3c3;
}


/* Popup transitions animations */

/* - popupTop (pops into screen from bottom to top) */
@-webkit-keyframes popupTop {
    from { -webkit-transform: translate3d(0,100%,0); opacity: 1; }
    to { -webkit-transform: translate3d(0,0%,0); opacity: 1; }
}
@keyframes popupTop {
    from { transform: translate3d(0,100%,0); opacity: 1;}
    to { transform: translate3d(0,0%,0);  opacity: 1;}
}

/* - popupTop (moves out of screen from top to bottom) */
@-webkit-keyframes popupBottom {
    from { -webkit-transform: translate3d(0,0%,0); opacity: 1; }
    to { -webkit-transform: translate3d(0,100%,0); opacity: 1; }
}
@keyframes popupBottom {
    from { transform: translate3d(0,0%,0); opacity: 1 }
    to { transform: translate3d(0,100%,0); opacity: 1 }
}

/* - hold (keeps the page underneath the popup in it's current position) */
@-webkit-keyframes hold {
    from { -webkit-transform: translate3d(0,0,0); opacity: 1; }
	to { -webkit-transform: translate3d(0,0,0); opacity: 1;}
}
@keyframes hold {
    from { -moz-transform: translate3d(0,0,0); opacity: 1 }
	to { transform: translate3d(0,0,0); opacity: 1 }
}







/* - showPage */
@-webkit-keyframes showPage {
    from {  opacity: 0 }
	to { opacity: 1 }
}
@keyframes showPage {
    from { opacity: 0 }
	to { opacity: 1 }
}

/* - hidePage */
@-webkit-keyframes hidePage {
	from { opacity: 1}
    to { opacity: 0}
}
@keyframes hidePage {
    from { opacity: 1}
    to { opacity: 0}
}