/*  ==========================================================================
    HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
    ========================================================================== */

    html, button, input, select, textarea {color: #222; } body {font-size: 1em; line-height: 1.4; } ::-moz-selection {background: #b3d4fc; text-shadow: none; } ::selection {background: #b3d4fc; text-shadow: none; } hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } img {vertical-align: middle; } fieldset {border: 0; margin: 0; padding: 0; } textarea {resize: vertical; } .chromeframe {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/*  ==========================================================================
   
    Copyright 2014 www.redninja.co.uk
    Design and Code: Red Ninja Studios (Steven Hassall)


    COLOURS

    Black:                  #333333;
    Grey:                   #F2F2F2;

    Primary Green:          #46AD9E;
    Light Green:            #90CEC5;
    Dark Green:             #23574F;

    Blue:                   #284B6D;
    Dark Blue:              #1E3852;

    Pink:                   #E36870;
    Dark Pink:              #AA4E54;

    Gold:                   #BFA87D;

    Orange:                 #F78633;


    STRUCTURE

    0.  Imports
    1.  Base
    2.  Layout
    3.  Typograhy
    4.  Buttons
    5.  Images
    6.  Navigation
    7.  Modal
    8.  Animations (CSS3)
    9.  Media Queries (Responsive)
    10. Colours
        Helper Classes
        Print

    ========================================================================== */

/*  ==========================================================================
    0.  IMPORTS

    @import url(//fonts.googleapis.com/css?family=Dosis:400,700);
    =========================================================================== */
    
    /* Dosis */
    @font-face {
        font-family: 'Dosis'; font-style: normal; font-weight: 400;
        src: local('Dosis Normal'), local('Dosis-Normal');
        src: url("http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/fonts/Dosis/Dosis-Regular.ttf") format('truetype');
    }
    @font-face {
        font-family: 'Dosis'; font-style: normal; font-weight: 700;
        src: local('Dosis Bold'), local('Dosis-Bold');
        src: url("http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/fonts/Dosis/Dosis-Bold.ttf") format('truetype');
    }


/*  ==========================================================================
    1.  BASE
    =========================================================================== */

    html {
        height: 100%; font-size: 100%; 
        -webkit-text-size-adjust: 100%;
    } /* Force scrollbar in non-IE and Remove iOS text size adjust without disabling user zoom */

    body {
        font-size: 1em; line-height: 1.625em; margin: 0; padding: 0; height:100%; min-height: 100%; 
        -webkit-font-smoothing:antialiased; 
        ont-smoothing:antialiased; 
        text-rendering:optimizeLegibility;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color:#333333; background-color:#FFFFFF;
        /* background-image: url(http://basehold.it/i/26/111111);   26px baseline */ 
    }

    .breakout {
        position: relative; width: 100%; height: auto;
        padding-top: 3.25em; padding-bottom: 3.25em;
    }
    .wrapper {
        width:990px; margin:0 auto; 
        z-index: 9;
    }


/*  ==========================================================================
    2.  Layout
    ========================================================================== */

    #container {}
        #banner {
            height: auto; padding-top: 1.625em; padding-bottom: 0; overflow: hidden;
        }
            #banner nav {position: relative;}
                #primary-nav {z-index: 10; position: absolute; right:0;}
                #introduction {margin-top: 16em; margin-bottom:6.5em; position: relative;}
                    .blog #introduction,
                    .single #introduction {margin-top: 13em; margin-bottom: 3em;}

        #main-content {overflow: hidden;}
            #features {position: relative; padding-bottom: 0;}
            .blog #features,
            .single #features {padding-bottom: 3.25em;}
                /* .home #features {padding-top: 11.375em;} */
                    .home #features .copy {margin-top: 6.5em;}
            #about {padding-top: 16.25em; padding-bottom: 6.5em;}
                #about div:nth-child(2) {text-align: center;}
                .video {margin-bottom: 1.625em; }
            #testimonials {text-align: center;}
            #partners {text-align: center; overflow: hidden;}
                #partners .wrapper {position: relative;}


        /* BLOG-HOME */

        .blog-posts {position: relative; display: block;}
            .blog-post {position: relative;}
                .blog-post-body,
                .pagination {
                    float:right; width: 77%; margin-bottom: 1.625em;
                }
                .blog-post header {}
                .blog-post article {}
                .article-meta {
                    width:20%; float: left; display: block; 
                }
                    .blog-post-body:after {
                        content: "\2014"; color:#E0C19E; font-size: 2.25em;
                        font-family: 'Dosis', sans-serif; font-weight:700;
                    } 
                    .blog-posts .blog-post:nth-last-child(2) .blog-post-body,
                    .blog-posts .blog-post:nth-last-child(2) .blog-post-body article p:last-child {
                        margin-bottom: 0;
                    }
                    .blog-posts .blog-post:nth-last-child(2) .blog-post-body:after {content: none;}

            .blog-sidebar {position: relative;}

        #page-footer {}
            #page-footer {
                padding-top: 3.25em;
            }
            .credits {
                clear:both; border-top: 2px #46AD9E solid; text-align: center;
                margin-top: 3.25em; padding-top: 3.25em; padding-bottom: 3.25em;
            }

        .stripes {width: 100%; position: absolute; bottom: 0;}
            .stripes span {
                height: 1em; width: 100%; display: block;
                background-color: #BFA87D;
            }
                .stripes span:nth-child(2) {background-color: #F78633;}
                .stripes span:nth-child(3) {background-color: #E36870;}


/*  ==========================================================================
    3.  Typography

    BASELINE FROM '1.61803398875' (GOLDEN RATIO);
    13px (0.8125em)
    26px (1.625em)
    52px (3.25em)
    78px (4.875em)
    104px (6.5em)

    ^^ Baseline calculation = desired baseline (ie 3.25em) / font-size
    

    FONT-SIZE 

    FONT-SIZE HIERARCHY = 13px, 16px, 28px, 44px, 72px, 116px

    13px = 0.8125em {13/16 = 0.8125} // 16px = 1em {16/16 = 1} // 28px = 1.75em {28/16 = 1.75} // 44px = 3.25em {44/16 = 2.75} // 72px = 4.5em {72/16 = 4.5} // 116px = 7.25em {116/16 = 7.25}
    
    FONT-SIZE-SPECIAL;    
    20px = 1.25em {20/16 = 1.25} // 30px = 1.875em {30/16 = 1.875} // 36px = 2.25em {36/16 = 2.25} // 68px = 4.25em {68/16 = 4.25} // 100px = 6.25em {100/16 = 6.25}

    LINE-HEIGHT;         
    26px = 1.625em {26/16 = 1.625} --------------------------------------------------------------] // 52px = 3.25em {52/16 = 3.25} ------------------------------------]

    ========================================================================== */

    h1, h2, h3, h4, h5, h6 {font-family: 'Dosis', sans-serif; font-weight:700; margin: 0 0 26px 0;} 
        
        /* desired line-height / font-size */

        h1 {font-size: 4.5em; line-height: 1.083333em; margin-bottom: 0.361111em;} 
            #about h1 {margin-bottom: 1em;}
            #partners h1,
            #supporters h1 {
                text-transform: uppercase; 
                font-size: 2.25em; line-height: 1em; margin-bottom: 1em;
            } #supporters h1 {margin: 0;}
                .blog #features h1,
                .single #features h1 {font-size: 3.25em; line-height: 1em;}
                .blog h1, 
                .single h1 {text-transform: uppercase;}
        h2 {font-size: 1.75em; line-height: 26px;}
        h3 {font-size: 1em; line-height: 26px;} 
        h4 {font-size: 1em; line-height: 26px;} 
        h5 {font-size: 1em; line-height: 26px;} 

    p, ul, blockquote, pre, td, th, label, time, small, small p {
        color:#333333; font-size: 1em; line-height: 1.625em; margin: 0 0 1.625em 0;
    } 
        #banner p {color: white;}
        p.doubleSpace {margin-bottom:3.25em;}

    small, small p {display:block;}

    a {text-decoration:underline; color:#333333;} a:hover {color:#E36870;}
        .logo {display: block;}

    ul {list-style-type:none; margin: 0 0 1.625em 0; padding:0; margin:0;}
        ul li {
            display: inline-block; margin-right: 1.625em;
        }
            ul li:last-child {
                margin-right:0em; text-align: right;
            }
        #supporters ul {text-align: center;}
            #supporters ul li:first-child {margin-right: 3em;}
        #testimonials ul {margin-bottom: 1.625em;}

    #page-footer small p {color: #46AD9E;}
    #page-footer small p a {color: #46AD9E;}

    /* BLOG */

    .article-meta,
    .blog-sidebar,
    .pagination {
        font-family: 'Dosis', sans-serif; font-weight:700;
        font-size: 1.75em; text-align: center; color: #E0C19E;
    }
        .article-meta a,
        .article-meta time span {
            display: block; color: #E0C19E; line-height: 1em;
            text-decoration: none; margin: 0;
        }   .article-meta a {margin-bottom: 13px;}
            .blog-post-body a{ margin: 0;}

        .single .blog-post-body p:first-child {font-size: 1.25em; line-height: 1.3em; font-weight: bold;}

        .single #introduction span {
            font-size: 1.25em; line-height: 1.3em;
            font-family: 'Dosis', sans-serif; font-weight:700;
        }
        .single #introduction a {text-decoration: none;}

        .blog-sidebar {color: #E36870; font-size: 1.25em; text-decoration: none;}
            .blog-sidebar ul {margin-bottom: 1.625em;}
            .blog-sidebar ul li {margin-right:0;}
            .blog-sidebar h2 {color: #E36870; font-size: 1em; margin: 0; text-transform: uppercase;}
            .blog-sidebar a {font-weight:300; color: #E36870; text-decoration: none;}
            .blog-sidebar a:hover {border-bottom: #E36870 2px solid;}

    .given-name {font-size: 0.8125em; text-transform: uppercase;}
    .pagination {
        display: block; margin-top: 1.625em; padding-top: 1.625em; 
        border-top:4px #E0C19E solid; text-align: left; 
    } 
        .pagination a {
            color: #E0C19E; text-decoration: none; text-transform: uppercase;
        } .pagination a:hover {color: #E36870;}
            
        .pagination li:last-child {
            margin-right:0em; text-align: right;
            float: right;
        }


/*  ==========================================================================
    4. Buttons
    ========================================================================== */

    .nav-button { display: none; } /* hide the navigation button by default */

    /*  Block Buttons  */
    .button {
        font-size: 1.625em; color: white; font-family: 'Dosis', sans-serif; font-weight:400;
        display: inline-block; text-decoration:none; background-color: #46AD9E; 
        margin-bottom:1.625em; padding: 0.40625em 1.625em;
        -moz-border-radius: 1.625em; -webkit-border-radius: 1.625em; border-radius: 1.625em;
    }
        .button:hover {background-color: #E36870; color: white;}
        nav .button {font-size: 1.25em;}

        input.button {width: 50%;}


/*  ==========================================================================
    5.  Images
    ========================================================================== */

    .brand { 
        display:block; float:left;
        height: 6.5em; width: 12.75em;
    }
        .svg .brand img {display: none;}
        .svg .brand { 
        background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Logo.svg') no-repeat scroll -1.625em  50%;
        background-size: 100%;
    }

    .icon { 
        display: inline-block;
        height: 200px; width: 160px;
    }
        .svg .icon img {display: none;}
        .svg .icon { 
            background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Icon.svg') no-repeat scroll 50% 50%;
            background-size: 100%; 
        }

        .svg .icon-pink { 
            background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Icon-Pink.svg') no-repeat scroll -2.75em 50%;
            background-size: 100%; 
        }

    /* PARALLAX */

    .parallax {
        display: block; position: absolute; 
    }

    .hand {
        top:15em; right:0; overflow: hidden;
    }
        .hand img {margin-right: -15em;}
    .mobile {
        bottom:0; margin-left: 1.625em;
    }

    /* PARALLAX - PATTERNS */

    .svg .pattern-main img {display: none;}
    .svg .pattern-main {
        background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Big.svg') no-repeat scroll 50% 50%;
        background-size: 100%; 
        opacity:0.1;
        filter:alpha(opacity=10); /* For IE8 and earlier */
    }

    .pattern-1 {
        width: 760px; height: 560px;
        top: -10em; right: -14em; z-index:0;
    }

    .pattern-2 {
        width: 468px; height: 342px;
        bottom: -4em; left: -4em; z-index:0;
    } 
        .pattern-2 img {
            width:100%; height: 100%;
            -webkit-transform: scaleX(-1);
               -moz-transform: scaleX(-1);
                 -o-transform: scaleX(-1);
                    transform: scaleX(-1);
                   -ms-filter: "FlipH";
                       filter: FlipH;
        }

    .pattern-3 {
        width: 468px; height: 342px;
        top: -17.5em; left: -4em; z-index:0;
    } 
        .pattern-3 img {
            width:100%; height: 100%;
            -webkit-transform: scaleY(-1);
               -moz-transform: scaleY(-1);
                 -o-transform: scaleY(-1);
                    transform: scaleY(-1);
                   -ms-filter: "FlipV";
                       filter: FlipV;
        }

    .pattern-4a {
        width: 482px; height: 142px;
        bottom: 0; left: 0; right:0; z-index:0; margin: 0 auto;
    } 
        .pattern-4a img {
            width:100%; height: 100%;
        }
            .svg .pattern-4a img {display: none;}
            .svg .pattern-4a {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Split-Top.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
            }

    .pattern-4b {
        width: 482px; height:210px;
        top: 0; left: 0; right:0; z-index:0; margin: 0 auto;
    } 
        .pattern-4b img {
            width:100%; height: 100%;
        }
            .svg .pattern-4b img {display: none;}
            .svg .pattern-4b {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Split-Bottom.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
            }

    .pattern-red {
        width: 482px; height:376px;
        bottom: -7em; margin-left: -17em; z-index:0;
    } 
        .pattern-red img {
            width:100%; height: 100%;
        }
            .svg .pattern-red img {display: none;}
            .svg .pattern-red {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Red-Big.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
            }

    .pattern-tri-big {
        width: 482px; height:254px;
        bottom: 8em; z-index:0; margin-left: 50em;
    } 
        .pattern-tri-big img {
            width:100%; height: 100%;
        }
            .svg .pattern-tri-big img {display: none;}
            .svg .pattern-tri-big,
            .svg .pattern-tri-small,
            .svg .pattern-tri-left1,
            .svg .pattern-tri-left2 {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Tri.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
            }

    .pattern-tri-small {
        width: 110px; height: 58px;
        top: 7em; z-index:0; margin-left: 50em;
    } .pattern-tri-small img {
            width:100%; height: 100%;
        }

    .pattern-tri-left1 {
        width: 246px; height: 126px;
        top: 30em; z-index:0; margin-left: -5em;
    } .pattern-tri-left1 img {
            width:100%; height: 100%;
        }

    .pattern-tri-left2 {
        width: 246px; height: 126px;
        top: 40em; z-index:0; margin-left: -15.5em;
    } .pattern-tri-left2 img {
            width:100%; height: 100%;
        }

    .pattern-gold1 {
        width: 140px; height: 102px;
        bottom: 0.25em; z-index:0; left: 0; right:0; margin:0 auto;
    } .pattern-gold1 img {
            width:100%; height: 100%;
        }
            .svg .pattern-gold1 {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Gold1.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
            }


    /* BLOG IMAGES */
    .blog .pattern-4a,
    .blog .pattern-4b,
    .single .pattern-4a,
    .single .pattern-4b {left: auto;}

    .pattern-blog-1a,
    .pattern-blog-1b {
        width: 828px; height: 606px;
        bottom: 0; left: 0; right:0; z-index: -1; margin: 0 auto; margin-bottom: -7em;
    }   .pattern-blog-1b { top:0; z-index:0; margin-top: -31em; margin-bottom: 0;}

        .pattern-blog-1a img,
        .pattern-blog-1b img {
            width:100%; height: 100%;
        }
            .svg .pattern-blog-1a img,
            .svg .pattern-blog-1b img {
                display: none;
            }
            .svg .pattern-blog-1a,
            .svg .pattern-blog-1b {
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Pattern_Blog-Bottom.svg') no-repeat scroll 50% 50%;
                background-size: 100%; 
                opacity:0.3;
                filter:alpha(opacity=30); /* For IE8 and earlier */
            }


    .article-meta figure{
        display: block; width: 2em; height: 2em;
        overflow: hidden; margin: 0 auto; margin-bottom: 0.5em; /* desired line-height / font-size */
        border: 4px #E0C19E solid;
        -webkit-border-radius: 50%;
                border-radius: 50%;
    }
        .article-meta figure img {width: 100%; min-height: 100%; margin: 0 auto;}

    a.advert {margin-left: -1.45em; display: block; margin-bottom: 26px;}
        a.advert:hover {margin-top: -2px; margin-bottom: 28px; border-bottom: none;}


/*  ==========================================================================
    6.  Navigation
    ========================================================================== */

    nav {margin-top:3.25em; margin-bottom:1.625em; float:right}
        nav ul {list-style-type:none; margin: 0 0 1.625em 0; padding:0; margin:0;}
            nav ul li {
                display: inline-block; margin-right: 1.625em;
            }
                nav ul li:last-child {margin-right:0em;}
            
            nav a {
                font-size: 1.25em; border-bottom: 2px white solid;
                color: white; text-decoration: none; text-transform: uppercase;
                font-family: 'Dosis', sans-serif; font-weight:700; 
                margin: 0 0 1.625em 0; padding-bottom:0.25em;
            }
                nav ul li a:hover {
                    border-bottom-color: #E36870;
                }
                nav ul li:last-child a {
                    color: #0E2D3A; text-transform: uppercase; border-bottom: none; font-weight:700; 
                }

    /*
     * Navigataur: A pure CSS responsive navigation menu
     * Author: Mike King (@micjamking)
     */

    /*--------------------------------
     Functional Styles (Required)
    ---------------------------------*/

    .header { position: relative; }
    #toggle, .toggle { display: none; }
    .menu > li { list-style: none; float:left;  }

    /* Nicolas Gallagher micro clearfix */
    .clearfix:before, .clearfix:after { display: table; content: ""; }
    .clearfix:after { clear: both; }

    /*--------------------------------
     Presentation Styles (Editable)
    ---------------------------------*/

    .nav, .menu, .menu > li, .menu > li > a{ 
        height: 100%; 
    }

    .menu > li > a{
        display: block; margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
        -webkit-transition: all 0.25s linear;
        -moz-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
    }

    .toggle{ 
        z-index: 2; 
    }

    label {
        color: white; font-family: 'Dosis', sans-serif; font-weight:700; text-transform: uppercase;
        background: #1E3852; font-size: 1.25em;
    }


/*  ==========================================================================
    8. Animations
    ========================================================================== */
    
    a {
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition:all 200ms ease-in-out;
        -ms-transition:all 200ms ease-in-out;
        transition:all 200ms ease-in-out;
    } 

    /* Image animations  */
    body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
    -webkit-backface-visibility: hidden;
    }
    .animated {
        -webkit-animation-duration: 1s;
           -moz-animation-duration: 1s;
             -o-animation-duration: 1s;
                animation-duration: 1s;
        -webkit-animation-fill-mode: both;
           -moz-animation-fill-mode: both;
             -o-animation-fill-mode: both;
                animation-fill-mode: both;
    }

    .animated.hinge {
        -webkit-animation-duration: 2s;
           -moz-animation-duration: 2s;
             -o-animation-duration: 2s;
                animation-duration: 2s;
    }

    /* Bounce Animations  */
    @-webkit-keyframes bounceInUp {0% {opacity: 0; -webkit-transform: translateY(30em); } 60% {opacity: 1; -webkit-transform: translateY(-0.5em); } 80% {-webkit-transform: translateY(0.5em); } 100% {-webkit-transform: translateY(0); } }

    @-moz-keyframes bounceInUp {0% {opacity: 0; -moz-transform: translateY(30em); } 60% {opacity: 1; -moz-transform: translateY(-0.5em); } 80% {-moz-transform: translateY(0.5em); } 100% {-moz-transform: translateY(0); } }

    @-o-keyframes bounceInUp {0% {opacity: 0; -o-transform: translateY(30em); } 60% {opacity: 1; -o-transform: translateY(-0.5em); } 80% {-o-transform: translateY(0.5em); } 100% {-o-transform: translateY(0); } }

    @keyframes bounceInUp {0% {opacity: 0; transform: translateY(30em); } 60% {opacity: 1; transform: translateY(-1em); } 80% {transform: translateY(1em); } 100% {transform: translateY(0); } }
    
    .bounceInUp {
        -webkit-animation-name: bounceInUp;
        -moz-animation-name: bounceInUp;
        -o-animation-name: bounceInUp;
        animation-name: bounceInUp;
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        -o-animation-delay: 1s;
        animation-delay: 1s;
    }

    /* Fade In Animations  */
    @-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); } } 

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



/*  ==========================================================================
    9.  Media Queries
    ========================================================================== */


    /*  LARGE SCREEN  */

    @media only screen and (min-width:1921px) {
        
        /* PARALLAX */
        .hand img {margin-right: 0;}

    }
 
    
    /*  DESKTOP - DEFAULT  */

    @media only screen and (min-width:1057px) and (max-width:1920px) {

        /* PARALLAX */
        .hand img {margin-right: -10em;}

    }


    /*  TABLETS  */

    @media only screen and (min-width : 768px) and (max-width : 1024px) {

        .wrapper {width: 90%;}

        /* PARALLAX */
        .hand img {margin-right: -20em;}


    }


    /*  MOBILE  */

    @media only screen and (max-width:767px) {

        /*  Layout  */
        .wrapper {width: 86%;}

        #banner {height: 39.625em; padding-bottom: 0;}
            .blog #banner,
            .single #banner {height: auto;}

        #introduction {margin-top: 6.5em; }
            /*.home #introduction {margin-bottom:0em;}*/

        .home #features {padding-top: 4em; }
        .mobile {width: auto;}
            .mobile img {width: 100%;}

        #about {padding-top: 3.25em;}

        .video {width: auto; margin-bottom: 1em;}
            .video img {width: 100%;}

        .hand {
            top: 7em;
            overflow: hidden;
            width: 100%;
            height: auto;
        }
            .hand img {width: 150%; }

        .home #features .copy {
            margin-top: 0;
        }

        #page-footer {text-align: center;}
        #page-footer .brand {margin: 0 auto; margin-bottom: 1.625em;}
            .svg #page-footer .brand { 
                background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Logo.svg') no-repeat scroll 50%  50%;
                background-size: 100%;
            }
            #page-footer .brand img {margin: 0 auto; }
        #page-footer .brand,
        #page-footer nav {float: none; }


        .z-top {position: absolute; z-index: 10; width: 90%;}

            .home #introduction .z-top {
                padding-top: 1em;
                background-color: rgba(40, 75, 109, 0.7);
                      background: rgba(40, 75, 109, 0.7);
                           color: rgba(40, 75, 109, 0.7);
                -webkit-border-radius: 1em;
                   -moz-border-radius: 1em;
                        border-radius: 1em;
            }

            .blog .z-top,
            .single .z-top {position: relative;}
                .blog #introduction .z-top,
                .single #introduction .z-top {padding:0; background: none;}


        /* BLOG LAYOUT */
        .blog #introduction,
        .single #introduction {
            margin-top: 6em;
        }
        .blog-post-body, .pagination {
            width: 100%;
        } .blog-post-body { margin: 0;}
            .blog-posts .blog-post:nth-last-child(2) .blog-post-body {margin-bottom: 1.625em;}

        .article-meta {
            width: 80%;
            text-align: left;
        }   


        /* NAVIGATION */
        .logo {position: absolute; z-index: 10;}
        #primary-nav {text-align: right;}

        
        /* IMAGES */
        .brand {height: 3.5em; width: 7em; position: relative; z-index: 2;}
        .svg .brand {
            background: url('http://www.inhand.org.uk/blog/wp-content/themes/IN-THEME_2014/img/svg/In-Hand_Logo.svg') no-repeat scroll 50% 50%;
            background-size: 130%;
        }

        
        /* PATTERNS */
        .pattern-2 {display: none;}
        .pattern-4a {bottom: -4.5em;left: -4em;}
            .blog .pattern-4a, .blog .pattern-4b {
                left: 0;
            }
        .pattern-gold1 {bottom: -3.25em;}

        .pattern-tri-left1,
        .pattern-tri-left2 {
            display: none;
        }

        #about .icon {height: 100px;}

        /*  Typography  */
        h1 {font-size: 2.5em}
            #coming-soon h1, 
            #about h1,
            #partners h1 {
            font-size: 2em;
            }

        .button {margin-bottom: 0.5em;}

        #testimonials li {margin-bottom: 0.5em; margin-right: 0;}

        #partners ul li,
        #supporters ul li {margin-bottom: 1.625em;}
            #partners ul li:last-child,
            #supporters ul li:last-child {margin-bottom: 0;}

        #page-footer ul li {margin-bottom: 1.625em;}
            #page-footer ul li:last-child,
            #page-footer ul li:nth-child(4n) {margin-right: 0;}


        /* BLOG */

        .blog #features h1,
        .single #features h1 {
            font-size: 2em;
            line-height: 1em;
        }
        

            .blog-post-body:after {
                content: none;
            }

        .article-meta a, 
        .article-meta time span {
            display: inline-block;
            margin-right: 0.5em;
        }
            .article-meta a:last-child, 
            .article-meta time span:last-child {
                margin-right: 0;
            }

            .article-meta:after {
                content: "\2014"; display: block; margin-bottom: 0.722em;
                color: #E0C19E;
                font-size: 2.25em;
                font-family: 'Dosis', sans-serif;
                font-weight: 700;
            }

        .article-meta figure {
            float: left; display: inline-block; margin-bottom: 0; margin-right: 0.5em;
            width: 2em;
            height: 2em;
        } 
        .article-meta a.given-name {margin: 0;}


        /* 

            MOBILE MENU 
            CORE

        */

        .menu { display: none; opacity: 0; width: 50%; position: absolute; right: 0; }
        .menu > li { display: block; width: 100%; margin: 0; }
        .menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; margin:0;}
        #toggle:checked + div .menu { display: block; opacity: 1; width: auto;}


        /* MOBILE STYLING */
        nav {margin-top: 0;}

        .menu {
            background: #E36870; text-align: left; min-width: 280px;
        }
        
        .menu, .menu > li, .menu > li > a{
            height: auto;
        }
        
        .menu > li > a{
            padding: 15px 15px;
        }
        
        .menu > li > a:hover, .menu > li > a:focus{
            background: #AA4E54;
        }
        
        .toggle:after {
            content: attr(data-open);
            display: block; padding: 0.5em 1.5em;
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; 
        }
        
        .toggle:hover:after{
            background: #AA4E54;
        }
        
        #toggle:checked + div .toggle:after{
            content: attr(data-close);
            background: #1E3852;
        }

        .header > h1 { 
            text-align: center;
        }
        .header > h1, .nav, .toggle:after{ 
            float: none; 
        }
        .toggle:after { 
            text-align: center; width: 100%; 
        }


    }


/*  ==========================================================================
    10.  Colours
    ========================================================================== */
    
    .blueText {color: #284B6D;}
    .whiteText {color: #FFFFFF;}
    .greyText {color: #F2F2F2;}
    .goldText {color: #BFA87D;}
    .greenText {color: #46AD9E;}
    .darkGreenText {color: #23574F;}
    .pinkText {color: #E36870;}

    .blueBG {background-color: #284B6D;}
    .whiteBG {background-color: #FFFFFF;}
    .greyBG {background-color: #F2F2F2;}
    .goldBG {background-color: #BFA87D;}
    .greenBG {background-color: #46AD9E;}
    .midGreenBG {background-color: #358277;}
    .darkGreenBG {background-color: #23574F;}
    .pinkBG {background-color: #E36870;}
    a.pinkBG:hover {background-color: #46AD9E;}


/*  ==========================================================================
    Helper classes
    ========================================================================== */

    .ir {background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before {content: ""; display: block; width: 0; height: 150%; } .hidden {display: none !important; visibility: hidden; } .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible {visibility: hidden; } .clearfix:before, .clearfix:after {content: " "; display: table; } .clearfix:after {clear: both; } .clearfix {*zoom: 1; }


/*  ==========================================================================
    Print styles
    ========================================================================== */

    @media print {
        * {background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited {text-decoration: underline; } a[href]:after {content: " (" attr(href) ")"; } abbr[title]:after {content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: ""; } pre, blockquote {border: 1px solid #999; page-break-inside: avoid; } thead {display: table-header-group; /* h5bp.com/t */ } tr, img {page-break-inside: avoid; } img {max-width: 100% !important; } @page {margin: 0.5cm; } p, h2, h3 {orphans: 3; widows: 3; } h2, h3 {page-break-after: avoid; } }