/* @override
	http://localhost:8888/brontedisko/css/style.css */
@font-face {
    font-family: 'Source Code Pro Regular';
    src: url('../fonts/sourcecodepro-regular-webfont.eot');
    src: url('../fonts/sourcecodepro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcecodepro-regular-webfont.woff') format('woff'),
         url('../fonts/sourcecodepro-regular-webfont.ttf') format('truetype'),
         url('../fonts/sourcecodepro-regular-webfont.svg#source_code_proregular') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Source Code Pro ExtraLight';
    src: url('../fonts/sourcecodepro-extralight-webfont.eot');
    src: url('../fonts/sourcecodepro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcecodepro-extralight-webfont.woff') format('woff'),
         url('../fonts/sourcecodepro-extralight-webfont.ttf') format('truetype'),
         url('../fonts/sourcecodepro-extralight-webfont.svg#source_code_proextralight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Source Code Pro Light';
    src: url('../fonts/sourcecodepro-light-webfont.eot');
    src: url('../fonts/sourcecodepro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcecodepro-light-webfont.woff') format('woff'),
         url('../fonts/sourcecodepro-light-webfont.ttf') format('truetype'),
         url('../fonts/sourcecodepro-light-webfont.svg#source_code_prolight') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-regular-webfont.eot');
    src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

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

html,
body,
p,
dt,
dd
{
    margin: 0;
    padding: 0;
}


/* Typo --------------------------------------------------------------- */

body {
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none; 
        -ms-text-size-adjust: none; 
            text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 2em;
}

h1, h2, h3, h4, h5, h6,
dt
{
    font-family: "Source Code Pro Regular", "Ubuntu Mono", monospace;
    font-weight: 800;
}

h3 {
    font-size: 1em;
}

.wrap,
.category
{
    font-family: "Source Code Pro Light", "Ubuntu Mono", monospace;

    font-weight: 300;
    line-height: 1.7;
}

@media (max-width: 787px) {

    /* Use built-in fonts on small screen devices (avoid downloads) */
    h1, h2, h3, h4, h5, h6,
    dt
    {
        font-family: monospace;
        font-weight: 800;
    }

    .wrap,
    .category
    {
        font-family: monospace;
        font-weight: 400;
        line-height: 1.7;
    }

    .detail {
        /*font-size: 100%;*/
    }
}

.single-character,
.word
{
    /* either there is Futura present and everthing is fine or else ... */
    font-family: Futura, 'Montserrat', 'Trebuchet MS', Ubuntu, sans-serif;
    line-height: 1;

    text-transform: uppercase;
}

/* Use built-in font for head char and bronte-clicker text on touch devices (avoid downloads) */
/*
.touch .single-character,
.touch .word
{
    font-family: Futura, 'Droid Sans', 'Trebuchet MS', Ubuntu, sans-serif;
}
*/

body {
    font-size: 20px;
}

p
{
    margin-bottom: .5em;
}

a:link,
a:visited
{
    color: #b51704;
    text-decoration: none;
}

a:hover
{
    text-decoration: line-through;
}

a:active
{
    text-decoration: none;
}

/* page --------------------------------------------*/

html {  
    background-color: #f0e5d0;
}
.circus {
    position: fixed;
    bottom: 1px;
    width: 100%;
    height: 1px;
}

.circ:before {
    display: block;
    content: " ";
    border: 1px solid #003;

    border-radius: 50em;
}

.c5:before {
    position: absolute;
    
    width: 50em;
    height: 50em;

    background-color: rgba(255, 205, 0, 0.5);
}

.left.c5:before {
    left: -10em;
    bottom: -25em;
}

.left .c4:before {
    position: absolute;
    bottom: -20em;
    left: -5em;
    width: 40em;
    height: 40em;

    background-color: rgba(255, 160, 0, 0.5);
}

.left .c3:before {
    position: absolute;
    bottom: -15em;
    left: 0em;
    width: 30em;
    height: 30em;

    background-color: rgba(255, 120, 0, 0.5);
}

.left .c2:before {
    position: absolute;
    bottom: -10em;
    left: 5em;
    width: 20em;
    height: 20em;

    background-color: rgba(255, 80, 0, 0.5);
}

.left .c1:before {
    position: absolute;
    bottom: -5em;
    left: 10em;
    width: 10em;
    height: 10em;

    background-color: rgba(255, 60, 0, 0.5);
}

.right.c5 {
    position: absolute;
    right: -10%;
    bottom: -2vh;
}

.right.c5:before {
    right: -10em;
    bottom: -15em;
    background-color: rgba(0, 200, 255, 0.5);

}

.right .c4:before {
    position: absolute;
    bottom: -10em;
    right: -5em;
    width: 35em;
    height: 35em;

    background-color: rgba(0, 160, 255, 0.5);
}

.right .c3:before {
    position: absolute;
    bottom: -2.5em;
    right: 2.5em;
    width: 20em;
    height: 20em;

    background-color: rgba(0, 120, 2555, 0.5);
}

.right .c2:before {
    display: none;

    position: absolute;
    bottom: 5em;
    right: 10em;
    width: 5em;
    height: 5em;

    background-color: rgba(255, 255, 0, 0.5);
}

.right .c1:before {
    display: none;
    position: absolute;
    bottom: 6.5em;
    right: 11.5em;
    width: 2em;
    height: 2em;
    background-color: rgba(255, 255, 0, 0.5)

}

.wrap
{
    position: relative;

    max-width: 304px;
    margin: 0 auto;

    color: #333328;

    -webkit-transition: background-color 200ms;
       -moz-transition: background-color 200ms;
        -ms-transition: background-color 200ms;
         -o-transition: background-color 200ms;
            transition: background-color 200ms;
            
}

.sticky
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

    .single-character
    {
        color: #47473c;

        -webkit-transition: color 300ms ease-in-out;
           -moz-transition: color 300ms ease-in-out;
            -ms-transition: color 300ms ease-in-out;
             -o-transition: color 300ms ease-in-out;
                transition: color 300ms ease-in-out;
    }

    .is-background
    {
        color: #e6d7be;
        color: rgba(255,255,255, 1);
        color: rgb(248, 242, 231);

        text-shadow: 0px 0px 2px black;
        opacity: 0.7;
    }

    .achievement-unlocked .single-character
    {
        -webkit-animation: single-character 0.3s linear 5;
           -moz-animation: single-character 0.3s linear 5;
            -ms-animation: single-character 0.3s linear 5;
             -o-animation: single-character 0.3s linear 5;
                animation: single-character 0.3s linear 5;
    }

    @-webkit-keyframes single-character
    {
        0% { transform: rotate( 0deg ); }
        25% { transform: rotate( -7deg ); }
        50% { transform: rotate( 0deg ); }
        75% { transform: rotate( 7deg ); }
        100% { transform: rotate( 0deg ); }
    }

    @-moz-keyframes single-character
    {
        0% { transform: rotate( 0deg ); }
        25% { transform: rotate( -7deg ); }
        50% { transform: rotate( 0deg ); }
        75% { transform: rotate( 7deg ); }
        100% { transform: rotate( 0deg ); }
    }

    @-ms-keyframes single-character
    {
        0% { transform: rotate( 0deg ); }
        25% { transform: rotate( -7deg ); }
        50% { transform: rotate( 0deg ); }
        75% { transform: rotate( 7deg ); }
        100% { transform: rotate( 0deg ); }
    }

    @-o-keyframes single-character
    {
        0% { transform: rotate( 0deg ); }
        25% { transform: rotate( -7deg ); }
        50% { transform: rotate( 0deg ); }
        75% { transform: rotate( 7deg ); }
        100% { transform: rotate( 0deg ); }
    }

    @keyframes single-character
    {
        0% { transform: rotate( 0deg ); }
        25% { transform: rotate( -7deg ); }
        50% { transform: rotate( 0deg ); }
        75% { transform: rotate( 7deg ); }
        100% { transform: rotate( 0deg ); }
    }

.single-character {
    font-size: 280pt;
}

.headline
{
    font-size: 36px;
}

.word /* klick das plus */
{
    font-size: 50px;
}

.masthead
{
    margin-top: 340px;
}

.masthead
{
    position: relative;
    max-width: 304px;
}

.headline,
.subline
{
    margin: 0
}

.headline,
.subline
{
    text-align: right;
}

.predotted:before
{
    content: '.';
    display: inline;
    color: #aaaaa5;
    color: white;
    font-size: .7em;

}

.current
{
    text-shadow: 2px 2px 0 rgba( 200, 100, 100, .7 );
}


a .current {
    text-decoration: underline;
}

.main
{
    position: relative;
    margin-top: 128px;
}

.container
{
    margin: 0 0 264px 0;
}

.box
{
    position: relative;

    min-height: 57px; /* 88px - 2*16px + 1 rounding bitexpand*/

    margin: 0 -7px 2em;
    padding: 1em 7px;

    border: 1px solid transparent;
}

#staff h2
{
    margin-bottom: 2em;
}

.touch #staff h2
{
    margin-bottom: 2em;
}

.touch .box
{
    margin-bottom: 4em;
}

.no-touch .box:hover
{
    border: 1px dashed;
}

    /* force line break after stuff member name = before email */
    .vcard .email:before
    {
        content: '\A';
        white-space: pre-wrap;
    }

    .vcard-link
    {
        display: none;

        /* Add a little mouse tolerance */
        border-bottom: 4px solid white;
    }

    .box:hover .vcard-link,
    .touch .vcard-link
    {
        display: block;
        position: absolute;
        top: -2em;
        right: -1px;

        padding: 0 1em;

        color: #fefef5;
        background-color: #333328;
    }

    .vcard-link:hover:before,
    .touch .vcard-link:hover:before
    {
        display: block;

        position: absolute;
        right: 0;

        padding: 0 1em;
        content: "Download";

        background-color: #b51704;
    }


    /* staffers' pics ----------------------------*/

    .biometry
    {
        display: none;

        position: absolute;
        top: 0;
        right: 0;

        width: 88px;
        height: 88px;

        opacity: .5;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /* IE 5-7 */
        filter: alpha(opacity=50);
    }

    .box:hover .biometry,
    .touch .biometry
    {
        display: block;
    }

    @media (max-width: 575px) {

        .biometry
        {
            top: 8px;

            width: 72px;
            height: 72px;
        }
    }

    @media (min-width: 576px) {

        .box:hover .biometry,
        .touch .biometry
        {
            display: block;

            top: 0;
            left: -128px;

            width: 88px;
            height: 88px;
        }
    }



.electric
{
    margin-bottom: 4em;
}

#contact h3
{
    margin-bottom: 1em;
}

.description
{
    margin-bottom: 2em;
}

.work
{
    position: relative;
    margin-bottom: 2em;

    border: 1px solid transparent;
}

    .title,
    .category
    {
        margin: 0;
    }

    .detail dl
    {
		-webkit-transition: opacity 300ms ease-in-out;
           -moz-transition: opacity 300ms ease-in-out;
            -ms-transition: opacity 300ms ease-in-out;
             -o-transition: opacity 300ms ease-in-out;
                transition: opacity 300ms ease-in-out;
                
    }

    .detail > p
    {
        display: none;
    }

    .work-toggle
    {
        margin-bottom: 1em;
    }

    .no-touch .work-toggle
    {
        margin-bottom: 1em;
        padding: 0 7px;
        position: relative;
        left: -7px;

        border: 1px solid transparent;
         -webkit-transition: border-color 250ms ease-in-out;
           -moz-transition: border-color 250ms ease-in-out;
            -ms-transition: border-color 250ms ease-in-out;
             -o-transition: border-color 250ms ease-in-out;
                transition: border-color 250ms ease-in-out;
    }

    /*.no-touch .is-collapsed:hover hgroup*/
    .no-touch .work-toggle:hover
    {
        border: 1px solid;

        cursor: pointer;
    }

    .is-collapsed .detail
    {
        visibility: hidden;
        height: 0;
    }

    .is-collapsed .detail dl
    {
        opacity: 0;
    }

    .is-expanded
    {
        min-height: 512px;
        max-height: 100%;
    }

    .is-expanded .detail
    {
        visibility: visible;
        height: auto;
        opacity: 1;
    }

    .is-expanded .detail
    {
        opacity: 1;
    }

    /* toggles -------------------------------*/
    .toggle-icon
    {
        font-size: larger;
    }

    .is-expanded .collapse
    {
        display: inline;
    }

    .is-expanded .expand
    {
        display: none;
    }

    .work:hover .expand,
    .work .is-animated
    {
        -webkit-animation: expand 1s linear infinite;
           -moz-animation: expand 1s linear infinite;
            -ms-animation: expand 1s linear infinite;
             -o-animation: expand 1s linear infinite;
                animation: expand 1s linear infinite;
    }

    .is-collapsed .collapse
    {
        display: none;
    }

    .is-collapsed .expand
    {
        display: inline;
    }

        .is-collapsed:hover .expand,
     	.is-collapsed .is-animated
     	{
     		-webkit-animation: expand 1s linear infinite;
     		   -moz-animation: expand 1s linear infinite;
     		    -ms-animation: expand 1s linear infinite;
     		     -o-animation: expand 1s linear infinite;
     		        animation: expand 1s linear infinite;
     	}

	    @-webkit-keyframes expand
	    {
	    	0% { text-shadow: 0 0 0 #f00; }
	    	100% { text-shadow: 0 0 50px #f00; }
	    }

	    @-moz-keyframes expand
	    {
	    	0% { text-shadow: 0 0 0 #f00; }
	    	100% { text-shadow: 0 0 50px #f00; }
	    }

	    @-ms-keyframes expand
	    {
	    	0% { text-shadow: 0 0 0 #f00; }
	    	100% { text-shadow: 0 0 50px #f00; }
	    }

        @-o-keyframes expand
	    {
	    	0% { text-shadow: 0 0 0 #f00; }
	    	100% { text-shadow: 0 0 50px #f00; }
	    }

	    @keyframes expand
	    {
	    	0% { text-shadow: 0 0 0 #f00; }
	    	100% { text-shadow: 0 0 50px #f00; }
	    }

        dl
        {
            margin-bottom: 1em;
        }

            dt,
            dd
            {
                display: inline;
            }

            /* Force line break */

            dd:after {
                content: '\A';
                white-space: pre-wrap;
            }

        .detail {
            /*font-size: smaller;*/
            overflow: hidden;
        }


        .web-link
        {
            display: block;
            margin-bottom: 2em;
            /*font-size: smaller;*/
        }

        .screenshots
        {
            position: relative;
            left: -8px;

            width: 320px;
            height: 460px;
        }

        @media (min-width: 1024px) {


            .single-character {
                font-size: 500px;
            }

            .headline
            {
                font-size: 42px;
            }

            .masthead
            {
                margin-top: 475px;
            }

            .wrap {
                margin-left: 440px;
                max-width: 600px;
            }

            h3 {
                font-size: 1.3em;
            }


            .screenshots
            {
                position: absolute;

                top: 0;
                left: -380px;
                z-index: 100;
            }
            .screenshot {
    
                -webkit-transform: translate3d(100%, 18%, 0);
                   -moz-transform: translate3d(100%, 18%, 0);
                    -ms-transform: translate3d(100%, 18%, 0);
                     -o-transform: translate3d(100%, 18%, 0);
                        transform: translate3d(100%, 18%, 0);
            }

            .is-collapsed .screenshot
            {
                
                -webkit-transition: all 450ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                   -moz-transition: all 450ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                    -ms-transition: all 450ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                     -o-transition: all 450ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                        transition: all 450ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                        opacity: 0;
                        visibility: hidden;
            }

            .is-expanded .screenshot
            {
                outline: 1px solid #47473c;

                -webkit-transform: translate3d(0, 0, 0);
                   -moz-transform: translate3d(0, 0, 0);
                    -ms-transform: translate3d(0, 0, 0);
                     -o-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                -webkit-transition: all 350ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                   -moz-transition: all 350ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                    -ms-transition: all 350ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                     -o-transition: all 350ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
                        transition: all 350ms cubic-bezier(0.1, 0.7, 0.2, 0.9);
            }
        }

        @media (min-width: 1280px) {

            body {
                font-size: 24px;
            }

            .wrap {
                max-width: 40%;
                margin-left: 40%;
            }

            .screenshots
            {
                position: absolute;

                top: 0;
                left: -460px;
            }
        }

        .screenshot
        {
            position: absolute;
        }

        .fax
        {
			-webkit-transition: opacity .3s ease-in-out;
               -moz-transition: opacity .3s ease-in-out;
                -ms-transition: opacity .3s ease-in-out;
                 -o-transition: opacity .3s ease-in-out;
                    transition: opacity .3s ease-in-out;
        }

        .no-touch .is-expanded .show-pixel:hover .fax,
        .show-fax .fax
        {
            opacity: 1;
            /* IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            /* IE 5-7 */
            filter: alpha(opacity=100);
        }

        .no-touch .is-expanded .show-fax:hover .fax,
        .show-pixel .fax
        {
            opacity: 0;
            /* IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            /* IE 5-7 */
            filter: alpha(opacity=0);
        }

/* - Bronte Clicker ----------------------------------- */

.bronte-logo
{
    position: relative;
    left: -8px;

	width: 318px;
	height: 318px;

	background-color: #b51704;
    background-color: rgba(245, 78, 11, 0.5);
    border: 1px solid;
    text-decoration: none;
    overflow: hidden;
}

.bronte-clicker
{
    width: 320px;
    height: 320px;
}

.bronte-clicker:active,
.bronte-clicker:hover
{
    text-decoration: none;
}

	.word
	{
		display: block;

        color: #fff;
	}

		.is-visible .word-1
		{
			-webkit-animation: word-1 4s infinite;
               -moz-animation: word-1 4s infinite;
                -ms-animation: word-1 4s infinite;
                 -o-animation: word-1 4s infinite;
                    animation: word-1 4s infinite;
		}

		.is-visible .word-2
		{
			-webkit-animation: word-2 4s infinite;
			   -moz-animation: word-2 4s infinite;
			    -ms-animation: word-2 4s infinite;
			     -o-animation: word-2 4s infinite;
			        animation: word-2 4s infinite;
		}

		.is-visible .word-3
		{
			-webkit-animation: word-3 4s infinite;
               -moz-animation: word-3 4s infinite;
                -ms-animation: word-3 4s infinite;
                 -o-animation: word-3 4s infinite;
                    animation: word-3 4s infinite;
		}

		.word-4
		{
			position: absolute;

			right:  -4px;
			bottom: 4px;

			font-size: 150px;
			line-height: 0.5;
		}

        .is-visible .word-4
        {
			-webkit-animation: word-4 4s infinite;
			   -moz-animation: word-4 4s infinite;
			    -ms-animation: word-4 4s infinite;
			     -o-animation: word-4 4s infinite;
			        animation: word-4 4s infinite;
		}

/* - Webkit --------- */
@-webkit-keyframes word-1
{
	0% { opacity: 0; }
	5% { opacity: 1; }
	35% { opacity: 1; }
	55% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes word-2
{
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes word-3
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes word-4
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* - Mozilla --------- */
@-moz-keyframes word-1
{
	0% { opacity: 0; }
	5% { opacity: 1; }
	35% { opacity: 1; }
	55% { opacity: 0; }
	100% { opacity: 0; }
}

@-moz-keyframes word-2
{
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

@-moz-keyframes word-3
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-moz-keyframes word-4
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* - IE --------- */
@-ms-keyframes word-1
{
	0% { opacity: 0; }
	5% { opacity: 1; }
	35% { opacity: 1; }
	55% { opacity: 0; }
	100% { opacity: 0; }
}

@-ms-keyframes word-2
{
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

@-ms-keyframes word-3
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-ms-keyframes word-4
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* - Opera --------- */
@-o-keyframes word-1
{
	0% { opacity: 0; }
	5% { opacity: 1; }
	35% { opacity: 1; }
	55% { opacity: 0; }
	100% { opacity: 0; }
}

@-o-keyframes word-2
{
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

@-o-keyframes word-3
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-o-keyframes word-4
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* - without prefix ---- */
@keyframes word-1
{
	0% { opacity: 0; }
	5% { opacity: 1; }
	35% { opacity: 1; }
	55% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes word-2
{
	0% { opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes word-3
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes word-4
{
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}



/* - Helpers ------------------------------------------ */

.is-hidden
{
	display: none;
}

.is-visible
{
    display: block;

    visibility: visible;
    opacity: 1;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=100);
}

.is-invisible
{
    visibility: hidden;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);
}