@font-face { font-family: proxima; font-weight: 400; src: url('fonts/ProximaNova-Semibold.ttf'); }
@font-face { font-family: proxima; font-weight: 500; src: url('fonts/ProximaNova-Extrabld.ttf'); }
@font-face { font-family: proxima; font-weight: 100; src: url('fonts/ProximaNova-Thin.ttf'); }
@font-face { font-family: proxima; font-weight: 300; src: url('fonts/ProximaNova-Medium.ttf'); }
@font-face { font-family: proxima; font-weight: 200; src: url('fonts/ProximaNova-Light.ttf'); }

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    min-width: 500px !important;
    text-align: center;
    background-color: #fff;

}

#wrapper{
    min-height: 100%;
    margin-bottom: -100px;
    overflow: hidden;
}

/*=========================================================
||                                                       ||
||                        HEADER                         ||
||                                                       ||
=========================================================*/
@media only screen
and (min-width: 1026px)
and (min-device-width: 667px) {
    #header{
        min-width: 500px;
        width: 100%;
        background-color: RGBA(20,20,20,1);
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999999999999;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    .headlogo {
        width: 200px;
        display: block;
        padding: 10px 15px;
        float: left;

    }

    .headimg{
        float: left;
    }


    h1{
        cursor: pointer;
        color: #000;
        font-size: 80px;
        letter-spacing: 20px;
        display: inline-block;
        padding: 0;
        margin-bottom: 0;
        margin-top: 20px;
        clear: left;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    h1 span {	margin-left: -40px;
    }

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

        h1 span {
            margin-left: 0;
        }
    }




    #nav-bar{
        max-width: 100%;
        min-width: 530px;
        list-style: none;
        padding: 20px 5px 20px 5px;
        float: left;
        box-sizing: border-box;

    }



    #nav-bar li{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 17px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        background-color: inherit;
        margin-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        cursor: pointer;
        float: left;


        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }


    #nav-bar li:hover{
        color: rgb(200,200,200);
        transform: scale(1.01);

    }

    a{
        text-decoration: none;
        color: inherit;
    }

    .onpage {
        color: rgb(69,69,69);
    }

    #shopping-cart{
        width: 130px;
        float: right;
        cursor: pointer;

    }

    .cart-img{
        height: 40px;
        padding: 25px 10px 20px 20px;
        margin: 0;
        display: block;
        float: left;
    }

    .cart-quantity{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
        font-size: 35px;
        padding: 25px 0;
        margin: 0;
        width: 20px;
        float: left;
    }


    #cart-popup{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        position: fixed;
        top: 93px;
        right: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;
        z-index: 99999;



    }

    #cart-popup #cart-popup-body{
        padding: 15px;

    }
    #cart-popup div.cart-item{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        width: 300px;
        margin: 0 auto;
        list-style: none;
        clear: both;

        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }

    #cart-popup div.cart-item p{
        float: left;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
    }

    #cart-popup div.cart-item p:nth-of-type(1){
        text-align: left;
        width: 50%;
    }
    #cart-popup div.cart-item p:nth-of-type(2){
        text-align: center;
        width: 40%;
    }
    #cart-popup div.cart-item p:nth-of-type(3){
        text-align: right;
        width: 10%;
        position: relative;
        top: -3px;
        color: crimson;
        cursor: pointer;
    }

    #cart-popup-checkout{
        width: 300px;
        margin: 0 auto;
    }

    #cart-popup-checkout p{
        float: left;
        width: 46%;
        color: white;
        padding: 10px;
        margin: 2%;
        font-family: "Proxima Nova Light", sans-serif;
        box-sizing: border-box;
        border: 1px solid white;
        cursor: pointer;
    }

    #cart-popup-checkout p:hover{
        background: rgba(250,250,250,1);
        color: black;
    }

    #cart-break{
        height: 1px;
        width: 300px;
        background-color: rgba(250,250,250,0.5);
        margin: 0 auto;
        display: block;
    }

    #exit-button img {
        display: none;
    }
    #cart-exit-button img{
        height: 40px;
        position: absolute;
        right: 30px;
        top: 26px;
        cursor: pointer;
    }

    #no-items{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
    }

}
@media only screen
    and (max-width: 1026px)
{
    #header{
        min-width: 500px;
        width: 100%;
        height: 90px;
        background-color: RGBA(20,20,20,1);
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999999999999;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    .headlogo {
        width: 200px;
        display: block;
        padding: 10px 15px;
        float: left;

    }

    .headimg{

    }


    h1{
        cursor: pointer;
        color: #000;
        font-size: 80px;
        letter-spacing: 20px;
        display: inline-block;
        padding: 0;
        margin-bottom: 0;
        margin-top: 20px;
        clear: left;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    h1 span {	margin-left: -40px;
    }

    #cart-popup{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        position: fixed;
        top: 74px;
        right: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;
        z-index: 99999;



    }

    #cart-popup #cart-popup-body{
        padding: 15px;

    }
    #cart-popup div.cart-item{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        width: 300px;
        margin: 0 auto;
        list-style: none;
        clear: both;

        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }

    #cart-popup div.cart-item p{
        float: left;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
    }

    #cart-popup div.cart-item p:nth-of-type(1){
        text-align: left;
        width: 50%;
    }
    #cart-popup div.cart-item p:nth-of-type(2){
        text-align: center;
        width: 40%;
    }
    #cart-popup div.cart-item p:nth-of-type(3){
        text-align: right;
        width: 10%;
        position: relative;
        top: -3px;
        color: crimson;
        cursor: pointer;
    }

    #cart-popup-checkout{
        width: 300px;
        margin: 0 auto;
    }

    #cart-popup-checkout p{
        float: left;
        width: 46%;
        color: white;
        padding: 10px;
        margin: 2%;
        font-family: "Proxima Nova Light", sans-serif;
        box-sizing: border-box;
        border: 1px solid white;
        cursor: pointer;
    }

    #cart-popup-checkout p:hover{
        background: rgba(250,250,250,1);
        color: black;
    }

    #cart-break{
        height: 1px;
        width: 300px;
        background-color: rgba(250,250,250,0.5);
        margin: 0 auto;
        display: block;
    }

    #exit-button img {
        height: 40px;
        position: absolute;
        right: 30px;
        top: 10px;
        cursor: pointer;
    }
    #cart-exit-button img{
        height: 40px;
        position: absolute;
        right: 30px;
        top: 26px;
        cursor: pointer;
    }

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

        h1 span {
            margin-left: 0;
        }
    }




    #nav-bar{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        min-height: 100%;
        position: absolute;
        top: 74px;
        left: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;

    }



    #nav-bar li{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        margin-top: 0;
        padding: 10px;
        cursor: pointer;


        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }


    #nav-bar li:hover{
        color: rgb(180,180,180);
        transform: scale(1.01);
    }

    a{
        text-decoration: none;
        color: inherit;
    }

    .onpage {
        color: rgb(69,69,69);
    }

    #shopping-cart{
        width: 130px;
        position: absolute;
        right: 50px;
        cursor: pointer;

    }

    .cart-img{
        height: 40px;
        padding: 24px 10px 20px 20px;
        margin: 0;
        display: block;
        float: left;
    }

    .cart-quantity{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
        font-size: 35px;
        padding: 24px 0;
        margin: 0;
        width: 20px;
        float: left;
    }

    #menu-button{
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 50px;
        background-image: url("images/menuwhite.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 20px;
        box-sizing: border-box;
        display: block;
        cursor: pointer;
    }

    #cart-popup{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        position: fixed;
        top: 74px;
        right: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;
        z-index: 99999;



    }

    #cart-popup #cart-popup-body{
        padding: 15px;

    }
    #cart-popup div.cart-item{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        width: 300px;
        margin: 0 auto;
        list-style: none;
        clear: both;

        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }

    #cart-popup div.cart-item p{
        float: left;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
    }

    #cart-popup div.cart-item p:nth-of-type(1){
        text-align: left;
        width: 55%;
    }
    #cart-popup div.cart-item p:nth-of-type(2){
        text-align: center;
        width: 35%;
    }
    #cart-popup div.cart-item p:nth-of-type(3){
        text-align: right;
        width: 10%;
        position: relative;
        top: -3px;
        color: crimson;
        cursor: pointer;
    }

    #cart-popup-checkout{
        width: 300px;
        margin: 0 auto;
    }

    #cart-popup-checkout p{
        float: left;
        width: 46%;
        color: white;
        padding: 10px;
        margin: 2%;
        font-family: "Proxima Nova Light", sans-serif;
        box-sizing: border-box;
        border: 1px solid white;
        cursor: pointer;
    }

    #cart-popup-checkout p:hover{
        background: rgba(250,250,250,1);
        color: black;
    }

    #cart-break{
        height: 1px;
        width: 300px;
        background-color: rgba(250,250,250,0.5);
        margin: 0 auto;
        display: block;
    }

    #exit-button img {
        height: 40px;
        position: absolute;
        right: 30px;
        top: 10px;
        cursor: pointer;
    }
    #cart-exit-button img{
        height: 40px;
        position: absolute;
        right: 30px;
        top: 26px;
        cursor: pointer;
    }

    #no-items{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
    }



}

@media only screen
and (min-device-width: 200px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
{
    #header{
        min-width: 500px;
        width: 100%;
        height: 90px;
        background-color: RGBA(20,20,20,1);
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999999999999;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    .headlogo {
        width: 200px;
        display: block;
        padding: 10px 15px;
        float: left;

    }

    .headimg{

    }


    h1{
        cursor: pointer;
        color: #000;
        font-size: 80px;
        letter-spacing: 20px;
        display: inline-block;
        padding: 0;
        margin-bottom: 0;
        margin-top: 20px;
        clear: left;

        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;

        transition: 0.2s ease;
    }

    h1 span {	margin-left: -40px;
    }

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

        h1 span {
            margin-left: 0;
        }
    }




    #nav-bar{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        min-height: 100%;
        position: absolute;
        top: 74px;
        left: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;

    }



    #nav-bar li{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230);
        margin-top: 0;
        padding: 10px;
        cursor: pointer;


        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }


    #nav-bar li:hover{
        color: rgb(180,180,180);
        transform: scale(1.01);
    }

    a{
        text-decoration: none;
        color: inherit;
    }

    .onpage {
        color: rgb(69,69,69);
    }

    #shopping-cart{
        width: 130px;
        position: absolute;
        right: 50px;
        cursor: pointer;

    }

    .cart-img{
        height: 40px;
        padding: 24px 10px 20px 20px;
        margin: 0;
        display: block;
        float: left;
    }

    .cart-quantity{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
        font-size: 35px;
        padding: 24px 0;
        margin: 0;
        width: 20px;
        float: left;
    }

    #menu-button{
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 50px;
        background-image: url("images/menuwhite.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 20px;
        box-sizing: border-box;
        display: block;
        cursor: pointer;
    }

    #cart-popup{
        max-width: 100%;
        min-width: 100%;
        list-style: none;
        padding: 20px 5px 20px 5px;
        box-sizing: border-box;
        position: fixed;
        top: 74px;
        right: -100%;
        background-color: rgba(20,20,20,1);
        -webkit-transition: 0.4s ease;
        -moz-transition: 0.4s ease;
        -o-transition: 0.4s ease;
        transition: 0.4s ease;
        z-index: 99999;



    }

    #cart-popup #cart-popup-body{
        width: 300px;


    }
    #cart-popup div.cart-item{
        font-family: proxima, sans-serif;
        font-weight: 200;
        font-size: 30px;
        letter-spacing: 1px;
        color: rgb(230,230,230) !important;
        width: 300px;
        margin: 0 auto;
        list-style: none;
        clear: both;

        -webkit-transition: 0.1s ease;
        -moz-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;

    }

    #cart-popup div.cart-item p{
        float: left;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
    }

    #cart-popup div.cart-item p:nth-of-type(1){
        text-align: left;
        width: 55%;
    }
    #cart-popup div.cart-item p:nth-of-type(2){
        text-align: center;
        width: 35%;
    }
    #cart-popup div.cart-item p:nth-of-type(3){
        text-align: right;
        width: 10%;
        position: relative;
        top: -3px;
        color: crimson;
        cursor: pointer;
    }

    #cart-popup-checkout{
        width: 300px;
        margin: 0 auto;
    }

    #cart-popup-checkout p{
        float: left;
        width: 46%;
        color: white;
        padding: 10px;
        margin: 2%;
        font-family: "Proxima Nova Light", sans-serif;
        box-sizing: border-box;
        border: 1px solid white;
        cursor: pointer;
    }

    #cart-popup-checkout p:hover{
        background: rgba(250,250,250,1);
        color: black;
    }

    #cart-break{
        height: 1px;
        width: 300px;
        background-color: rgba(250,250,250,0.5);
        margin: 20px auto;
        display: block;
    }

    #exit-button img {
        height: 40px;
        position: absolute;
        right: 30px;
        top: 10px;
        cursor: pointer;
    }
    #cart-exit-button img{
        height: 40px;
        position: absolute;
        right: 30px;
        top: 26px;
        cursor: pointer;
    }
    #no-items{
        color: white;
        font-family: "Proxima Nova Light", sans-serif;
    }



}


/*=========================================================
||                                                       ||
||                        CONTENT                        ||
||                                                       ||
=========================================================*/
#landing-content{
    width: 100%;
    height: 650px;
    background: url("images/Harry Flett-152.png") center;
    background-size: cover;
    padding: 100px 0 0 0;
    position: relative;

}



.landing-color{
    background-color: rgba(250,250,250,0);
}

#landing-content h2{
    margin: 30px 0 10px 0;
}



#content,#content2{
    min-width: 500px;
    max-width: 1000px;
    clear: both;
    font-family: proxima, sans-serif;
    font-weight: 100;
    color: #1a1a1a;
    background-color: transparent;
    overflow:hidden;
    margin-left: auto;
    margin-right: auto;

}

#content{
    padding-top: 100px;
}

#content2{
    min-height: 500px;
}


div.blurb {
    font-family: proxima, sans-serif;
    box-sizing:border-box;
    min-width: 500px;
    text-align: left;
    padding: 50px 50px 25px 50px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

#landing-content .blurb p{
    padding: 0;
    margin: 0;

}
#landing-content .blurb p:nth-of-type(1){
    font-weight: 300;
    font-size: 15px;
}

#landing-content .blurb p:nth-of-type(2){
    font-weight: 500;
    font-size: 25pt;
}

#contact-blurb{
    max-width: 760px !important;
    color: rgb(50,50,50);
}

.pagehead {
    font-family: proxima,sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: #1a1a1a;
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid transparent;
    cursor: default;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
}

.pagehead:hover {
    color: #fff;
    background-color: #1a1a1a;


}

#backtotop{
    width: 50px;
    height: 50px;
    background-color: #fff;
    color: #1a1a1a;
    position: fixed;
    right: 20px;
    bottom: 80px;
    border: 1px solid #1a1a1a;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    box-sizing:border-box;
}

#backtotop:hover {

    background-color: #1a1a1a;
    color: #f9f9f9;

}

#backtotop p {
    font-family: proxima, sans-serif;
    font-weight: 300;
}

.pagebreak {
    height: 30px;
    width: 100%;
}

#facebook{
    width: 50px;
    height: 50px;
    background-color: #f9f9f9;
    color: #1a1a1a;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: 0 solid #3b5998;
    border-radius: 50px;
    cursor: pointer;
    font-weight: normal;
    text-decoration: none;
    z-index: 999999999;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
}

#facebook:hover{
    opacity: 0.7;
}

/*=========================================================
||                        HOME                           ||                                                       
=========================================================*/




#landing-image img{
    width: 200px;
    margin: 0 0 -50px 0;
    opacity: 0.9;
}


#landing-content .blurb p{
    padding: 0;
    margin: 0;

}
#landing-content .blurb p:nth-of-type(1){
    font-weight: 300;
    font-size: 50px;
    padding: 10px 0;
    margin: 0;
}

#landing-content .blurb p:nth-of-type(2){
    font-weight: 500;
    font-size: 90pt;
    padding: 10px 0;
    margin: -20px 0;
}


#landing-buttons{
    margin: 0;
    text-align: center;
    float: right;
    width: auto;
    position: absolute;
    top: 120px;
    right: 30px;

}


#landing-buttons a{
    clear: both;
    margin: 0;
    width: 40%;
    max-width: 200px;
    min-width: 200px;
    height: 150px;
    display: block;
    font-size: 10px;
    box-sizing: border-box;
    cursor: pointer;
    background-color: rgba(245,245,245,1);
    color: rgb(80,80,80);
    border: solid 0.1px rgb(230,230,230);
    font-family: proxima, sans-serif;
    font-weight: 100;
    position: relative;

    -webkit-transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    transition: background 0.1s ease;
}



#landing-buttons p{
    font-family: "Proxima Nova Light", sans-serif;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 15px;
    width: 100%;
}

div.button-icon{
    width: 75px;
    height: 75px;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%,0);
}

#workshop-icon{
    background-image: url('images/grayBook.png');
    background-size: contain;
}
#private-icon{
    background-image: url('images/greyPrivate.png');
    background-size: contain;
}
#tutor-icon{
    background-image: url('images/grayTutor.png');
    background-size: contain;
}
#what-icon{
    background-image: url('images/greyWhat.png');
    background-size: contain;
}


.workshopButton:hover #workshop-icon{
    background-image: url('images/whiteBook.png');
}
.privateButton:hover #private-icon{
    background-image: url('images/whitePrivate.png');
}
.tutorButton:hover #tutor-icon{
    background-image: url('images/whiteTutor.png');
}
.whatButton:hover #what-icon{
    background-image: url('images/whiteWhat.png');
}



#landing-buttons a:hover{
    background: rgb(20,20,20);
    color: white;
    border: solid 0.1px rgba(230,230,230,0);
}

.whatButton{
    display: block;
}
.whatButtonHide{
    display: none;
}


.whatButtonHide a{
    background: rgb(20,20,20) !important;
    color: white !important;
    border: none !important;
}
.whatButtonHide #what-icon{
    background-image: url('images/exitwhite.png');
    width: 40px;
    height: 40px;
    top: 30px;


}

.whatButtonHide a:hover{
    background: rgb(250,250,250) !important;
    color: rgb(50,50,50) !important;
    border: solid 0.1px rgba(230,230,230,0);
}

.whatButtonHide:hover #what-icon{
    background-image: url('images/exitblack.png')!important;
    width: 40px;
    height: 40px;
    top: 30px;
    opacity: 0.9;
}


#what-blurb{
    font-family: proxima, sans-serif;
    color: white;
    background-color: inherit;
    width: 60%;
    text-align: left;
    margin: 5%;
    position: absolute;
    bottom: 200px;
    font-size: 20px;
    left: -100%;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;

    transition: 0.5s ease;
}




#feedback{
    clear: both;
    width: 100%;
    text-align: center;
    position: relative;
    height: 122px;
    background: rgb(20,20,20) no-repeat center ;
    background-size: cover;
    z-index: 1000;

}

#feedback-group-1{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    min-width: 100%;

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;

    transition: 0.5s ease;


}

#feedback-group-2{
    position: absolute;
    transform: translate(-50%,-50%);
    left: -150%;
    top: 50%;
    min-width: 100%;

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;

    transition: 0.5s ease;


}



.student-slides{
    display: inline-block;
    padding: 0;
    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
    position: relative;
    top: 10px;
    z-index: 999999999;
}



.student-image{
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;

    cursor: pointer;

    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;


}
.student-image img{
    height: 80px;
    display: block;
    transform: rotate(-0deg);
    margin: 0 5px;
    border-radius: 100%;
    border: 3px solid rgb(250,250,250);
    box-shadow: 0 2px 2px rgba(50,50,50,0.5);


    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

}
.up-arrow{
    position: absolute;
    height: 10px;
    left: 40px;
    top: 0;
    opacity: 0.5;
}

.student-quote{
    float: left;
    box-sizing: border-box;
    padding: 0;
    margin: 10px 0;
    transform-origin: top;
    transform:perspective(400px) rotate3d(-1,0,0,90deg) ;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    z-index: 99999999;
}
.student-quote p{
    width: 250px;
    margin: 0;
    padding: 20px;
    color: white;
    background-color: rgba(25,25,25,0.9);
    box-sizing: border-box;
    font-family: "Proxima Nova Light", sans-serif;
    font-size: 15px;
    position: absolute;
    left: 50%;
    top: 5px;
    z-index: 999999999;
}

div#student3 p{
    display: block;
    transform: translate(-35%, 0);
}
div#student4 p{
    display: block;
    transform: translate(-70%, 0);
}
div#student5 p{
    display: block;
    transform: translate(-70%, 0);
}

.student-image:hover{
    transform: scale(1.2);
}

#student1:hover > .student-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#student2:hover > .student-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#student3:hover > .student-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#student4:hover > .student-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#student5:hover > .student-quote{
    transform: rotate3d(-1,0,0,0deg);
}

.arrows{
    width: 100%;
    padding: 35px;

}

.arrows img{
    width: 50px;
    cursor: pointer;

}

.left-arrow{
    position: absolute;
    left: 20px;
    transform: rotate(180deg);
    opacity: 0.1;
}

.right-arrow{
    position: absolute;
    right: 20px;
    transform: rotate(0deg);


}


#subanchor {
    margin: 0;
    padding: 0;
}


h2{
    font-family: proxima, sans-serif;
    font-weight: 200;
    font-size: 30px;
}

/*----------------------------------------  STAFF -------------------------------------------*/

#staff-blocks{
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 50px auto 50px auto;
    height: 250px;
    font-weight: 300;
    z-index: 1;
}

#staff-blocks p{
    text-align: left;
}

.staff-block{
    height: 250px;
    background-color: #1a1a1a;
    float: left;
    width: 33%;
    padding: 25px 25px 25px 25px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#staff-main{
    background: url('images/left.png') no-repeat center;
    background-size: cover;

}
#staff-private{
    background: url('images/middle.jpg')  no-repeat center ;
    background-size: cover;
}
#staff-admin{
    background: url('images/right.jpg') no-repeat center ;
    background-size: cover;
}

.staff-header{
    font-family: proxima, sans-serif;
    font-size: 30px;
    font-weight: 500;
    text-align: left;
    margin: 0;
    width: 50%;
}

#staff-private .staff-header, #staff-admin .staff-header{
    color: rgb(250,250,250);
}

.staff-pullup{
    position: absolute;
    bottom: 0;
    width: 85%;



    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.staff-pullup p:nth-of-type(1){
    font-weight: 400;
    font-size: 16px;

}
.light-color{
    color: rgb(250,250,250);
}

.staff-button{
    background-color: rgb(250,250,250);
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 500;
    text-align: left;
    margin: 10px 0;
    position: absolute;
    left: 0;
    cursor: pointer;
}

.staff-button-1{
    border: solid 1px rgb(150,150,150);
}


.staff-block:hover .staff-pullup{
    bottom: 75px;
}




.tutor-block{
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-0%);
    width: 90%;
    background: rgb(250,250,250);
    padding: 10px 0 50px 0;
    border-radius: 5px;
    max-height: 60%;
    min-width: 500px;
    max-width: 850px;
    overflow: scroll;
    display: none;
    z-index: 999999;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;


}

.tutor-block h2{
    margin: 0;
    padding: 0;
}



#tutors-div h2{
    margin: 50px;
}

#tutor-popup-main{
    z-index: 999999;
}

#team-category-admin{
    z-index: 999999;

}

#fixed-background1{
    width: 100%;
    height: 100%;
    min-width: 500px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100,100,100,0.5);
    z-index: 99999;
    display: none;
}

#infoexit1{
    min-width: 500px;
}

.team-category{
    height: 51px;
    max-width: 600px;
    margin: 0 auto;
    border-top: solid 1px rgb(150,150,150);
    padding: 5px 0 5px 0;
    cursor: pointer;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;



}

.team-category img{
    height: 35px;
    width: 35px;
    margin: 8px;
    box-sizing: border-box;
    float: left;
    z-index: -1;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    transform:  rotate(0deg);
    -moz-transform: rotate(0deg) ;
    -webkit-transform: rotate(0deg);

}

.team-category p{
    float: left;
    margin: 8px;
    padding: 5px;
    font-family: "Proxima Nova Medium", sans-serif;
    font-size: 20px;
    color: rgb(50,50,50);
    background-color: inherit;
}
.team-category-open{
    height: 51px;
    max-width: 600px;
    margin: 0 auto;
    border-top: solid 1px rgb(150,150,150);
    padding: 5px 0 5px 0;
    cursor: pointer;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;

}
.team-category-open img{
    height: 35px;
    width: 35px;
    margin: 8px;
    box-sizing: border-box;
    float: left;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);


}

.team-category-open p{
    float: left;
    margin: 8px;
    padding: 5px;
    font-family: "Proxima Nova Medium", sans-serif;
    font-size: 20px;
    color: rgb(50,50,50);
    background-color: inherit;
}


.team-images{
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    box-sizing: border-box;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.team-images-open{
    height: auto;
    margin-bottom: 30px;
    overflow: hidden;
    box-sizing: border-box;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.team-images-closed{
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    box-sizing: border-box;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}



.tutor{
    clear: both;
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 4px solid rgb(240,240,240);
    box-shadow: 0 2px 2px rgba(0,0,0,0.4);
    position: relative;
    margin: 25px 25px;

}

.become-tutor{
    color: rgb(50,50,50);
    background-color: white;
    padding: 1px;
    border: solid 2px rgb(50,50,50);
    width: 36%;
    margin: 40px auto 0 auto;
    font-size: 20px;
    cursor: pointer;
    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
}

.become-tutor:hover{
    color: white;
    background-color: rgb(50,50,50);
}

.tutor div:nth-of-type(1){
    height: 100%;
    width: 100%;
    border-radius: 0;
    background-size: contain;
}



.tutor-img1, #harry-image{
    background-image: url('images/fleek.jpeg');
 }
.tutor-img2, #alice-image{
    background-image: url('images/alice.jpeg');
}
.tutor-img3, #jack-image{
    background-image: url('images/jack.jpeg');

}
.tutor-img4, #megan-image{
    background-image: url('images/megan.jpg');
}
.tutor-img5, #ffion-image{
    background-image: url('images/fiion.jpg');
}

.tutor-img6, #callum-image{
    background-image: url('images/callum.jpg');
}
.tutor-img7, #alesha-image{
    background-image: url('images/alesha.jpg');
}
.tutor-img8, #laura-image{
    background-image: url('images/laura.jpeg');
}
.tutor-img9, #lily-image{
    background-image: url('images/lily.jpg');
}
.tutor-img10, #sophie-image{
    background-image: url('images/sophie.jpg');
}
.tutor-img11, #nadine-image{
    background-image: url('images/nadine.jpg');
}
.tutor-img12, #oscar-image{
    background-image: url('images/oscar.jpg');
}
.tutor-img13, #lauren-image{
    background-image: url('images/lauren.jpg');
}
.tutor-img14, #sam-image{
    background-image: url('images/sam.jpg');
}
.tutor-img15, #emma-image{
    background-image: url('images/emma.jpg');
}
.tutor-img16, #hugh-image{
    background-image: url('images/hugh-nixon.jpg');
}
.tutor-img17{
    background-image: url('images/KateKenna.jpg');
}
.tutor-img18{
    background-image: url('images/JerryZindel.jpg');
}
.tutor-img19{
    background-image: url('images/TomClaughley.png');
}
.tutor-img20{
    background-image: url('images/HamishKennett.png');
}
.tutor-img21{
    background-image: url('images/FreddieCleverley.png');
}
.tutor-img22{
    background-image: url('images/AdamStachurski.png');
}
.tutor-img23{
    background-image: url('images/toribode.png');
}
.tutor-img24{
    background-image: url('images/BenSimmers.png');
}
.tutor-img25{
    background-image: url('images/AlyshaMiller.png');
}
.tutor-img26{
    background-image: url('images/DeclanBartlett.png');
}
.tutor-img27{
    background-image: url('images/HannahMcCay.png');
}
.tutor-img28{
    background-image: url('images/GraceyFarquharson.png');
}
.tutor-img29, #kelsey-image{
    background-image: url('images/KelseyMcNabb.png');
}
.tutor-img30{
    background-image: url('images/RebeccaStanley.png');
}
.tutor-img31{
     background-image: url('images/SamKerridge.png');
 }

.tutor-img32{
    background-image: url('images/sam.png');
}
.tutor-img33, #zoe-image{
    background-image: url('images/zoe.png');
}


.tutor-long-name{
    width: 155px;
    margin-left: -52%;
    transform: translateX(50%);
}

.about-hover{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    border-radius: 0;
    opacity: 0;
    cursor: pointer;

    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

.about-hover p{
    margin-top: 40%;
    font-weight: 300;
    font-size: 30px;
    color: white;
    font-family: "Proxima Nova Light", sans-serif;
}

.about-hover:hover{
    opacity: 1;
}

.tutors-subject{
    position: absolute;
    bottom: -14px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 3px;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 14px;
}

.tutor-name{
    width: 150px;
    text-align: center;
}

.tutor-break{
    height: 10px;
    display: block;
    position: relative;
    width: 600px;
    margin: 0 auto;
    border-top: 1px solid rgb(150,150,150);
    z-index: -1;
}
#fixed-background{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100,100,100,0.5);
    z-index: 9999999;
    display: none;
}
#tutor-popup{
    width: 600px;
    background-color: rgb(255,255,255);
    color: inherit;
    margin: auto;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 5px rgba(50,50,50,0.5);
    border-radius: 3px;
    overflow: visible;
    z-index: 999999999;
}

.tutor-popup-image{
    height: 150px;
    width: 150px;
    margin: -70px auto 0 auto;
    border: 1px solid white;
    border-radius: 0;
    background-color: white;

    background-size: contain;
    box-shadow: 0 1px 1px rgba(100,100,100,0.8);

}




.tutor-popup-name{
    font-weight: 200;
    font-size: 30px;
}

.tutor-popup-subjects{
    color: #047dff;
    font-weight: 200;
    font-size: 20px;
    padding: 0;
}

#tutor-popup p{
    margin: 0;
    padding: 5px 30px 30px 30px;
}


.pagebreak {
    height: 150px;
    margin-top: 50px;
    background-color: rgb(220,220,220);
    background-image: url("images/Harry Flett-19.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    box-shadow: 0 0 5px rgb(80,80,80) inset;
}
#categories{
    width: 80%;
    margin: 0 auto;
    padding: 0;
}

.cat-menu{
    width: 100%;
    text-align: center;
}


.cat-menu p{
    width: 33.33%;
    font-size: 18px;
    font-family: proxima, sans-serif;
    font-weight: 300;
    background-color: rgb(30,30,30);
    color: rgb(250,250,250);
    padding: 20px 0;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0 -2.2px;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;


}

.cat-menu p:hover{
    background-color: rgb(20,20,20);
    color: rgb(250,250,250);


}



.subjectsnav{
    cursor: pointer;
}

#subjects-commerce, #subjects-laws, #subjects-health, #subjects-other{
    max-width: 1000px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    color: white;



}



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

    #categories {
        width: 100%;

    }
}

/*@media only screen and (max-width: 1000px) {
 
  	#subjects {
		min-width: 300px;
		max-width: 660px;

  }
}

@media only screen and (max-width: 660px) {
 
  	#subjects {
		min-width: 300px;
		max-width: 330px;

  }
}*/



.subjectshead{
    margin-top: 100px;
}


.subject{
    position: relative;
    box-sizing:border-box;
    width: 33.33%;
    background-color: rgb(230,230,230);
    color: #1a1a1a;
    float: left;
    cursor:pointer;
    padding: 33.31% 10px 10px 10px;
    border: solid 1px rgb(215,215,215);

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;




}

.subject h2 span{
    font-weight: 500;
}
.subject-done{
    position: relative;
    box-sizing:border-box;
    width: 33%;
    padding-top: 33%;
    background-color: rgb(150,150,150);
    color: #1a1a1a;
    float: left;;
    cursor:pointer;
    opacity: 0.5;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;




}

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

    .subject{
        width: 50%;
        padding-top: 50%;
    }
    .subject-done{
        width: 50%;
        padding-top: 50%;
    }




}

#finc102{

}

#bsns112{

}

#bsns113{

}

#bsns114{

}

#bsns115{

}

#laws101a{

}

#laws101b{

}

#bioc192{

}

#pubh192{

}

#hubs192{

}

#maor102{

}

#stat110{

}

#stat115{

}
#acct102{

}

#other-subject{
    display: none;
}

.subject:hover {
    background-color: rgb(50,50,50); ;
    color: rgb(50,50,50);
    opacity: 1;
    border: 1px solid transparent;


}

#subjects-laws, #subjects-health, #subjects-other{
    display: none;
}
#subjects-laws, #subjects-health, #subjects-other, #subjects-commerce{
    -webkit-transition: visiblity 0.2s ease;
    -moz-transition: visiblity 0.2s ease;
    -o-transition: visiblity 0.2s ease;
    transition: visiblity 0.2s ease;
}


.subject h2 {
    position: absolute;
    font-weight: 300;
    text-align: center;
    height: 0;
    bottom: 30%;
    width: 80%;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: proxima, sans-serif;


}

.subject-done h2 {
    position: absolute;
    font-weight: 300;
    text-align: center;
    height: 0;
    bottom: 30%;
    width: 80%;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: proxima, sans-serif;
}

.subject:hover h2{
    color: white;
}

@media only screen and (max-width: 660px) {
    .subject h2, .subject-done h2 {
        font-size: 20px;


    }
}

.sold-out-cover{
    bottom: 0;
    position: absolute;
    color: white;
    padding: 10px;
    background-color: rgba(20,20,20,0.7);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.subject-icon{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
}

#acct102-icon{
    background: url('images/acctGrey.png');
    background-size: contain;
}

.subject:hover #acct102-icon{
    background: url('images/acctWhite.png');
    background-size: contain;
}
#bsns112-icon{
    background: url('images/111grey.png');
    background-size: contain;
}

.subject:hover #bsns112-icon{
    background: url('images/111White.png');
    background-size: contain;
}

#bsns113-icon{
    background: url('images/113grey.png');
    background-size: contain;
}

.subject:hover #bsns113-icon{
    background: url('images/113white.png');
    background-size: contain;
}

#bsns114-icon{
    background: url('images/114grey.png');
    background-size: contain;
}

.subject:hover #bsns114-icon{
    background: url('images/114white.png');
    background-size: contain;
}

#bsns115-icon{
    background: url('images/115grey.png');
    background-size: contain;
}

.subject:hover #bsns115-icon{
    background: url('images/115white.png');
    background-size: contain;
}
#laws101a-icon{
    background: url('images/lawsAgrey.png');
    background-size: contain;
}

.subject:hover #laws101a-icon{
    background: url('images/lawsAwhite.png');
    background-size: contain;
}
#laws101b-icon{
    background: url('images/lawsBgrey.png');
    background-size: contain;
}

.subject:hover #laws101b-icon{
    background: url('images/lawsBwhite.png');
    background-size: contain;
}

#bioc192-icon{
    background: url('images/biocGrey.png');
    background-size: contain;
}

.subject:hover #bioc192-icon{
    background: url('images/biocWhite.png');
    background-size: contain;
}
#epid192-icon{
    background: url('images/epidGrey.png');
    background-size: contain;
}

.subject:hover #epid192-icon{
    background: url('images/epidWhite.png');
    background-size: contain;
}
#hubs192-icon{
    background: url('images/hubsGrey.png');
    background-size: contain;
}

.subject:hover #hubs192-icon{
    background: url('images/hubsWhite.png');
    background-size: contain;
}
#maor102-icon{
    background: url('images/maorGrey.png');
    background-size: contain;
}

.subject:hover #maor102-icon{
    background: url('images/maorWhite.png');
    background-size: contain;
}
#stat115-icon{
    background: url('images/statGrey.png');
    background-size: contain;
}

.subject:hover #stat115-icon{
    background: url('images/statWhite.png');
    background-size: contain;
}

.workshop-counter{
    position: absolute;
    top: 10px;
    left: 0;
    background: rgb(50,50,50);
    padding: 0;
}

.workshop-counter p{
    padding: 3px 10px;
    color: white;
    font-weight: 400;
    margin: 0;
}

.cancel-click{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}


/*=========================================================
||                     Subject Popup                     ||                                                       
=========================================================*/

#subjectinfo{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(100,100,100,0.5);
    padding: 0;
    margin: 0;
    display: none;
}

.infoblock{
    width: 600px;
    height: 450px;
    background-color: rgb(240,240,240);
    color: inherit;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0 1px 5px rgba(50,50,50,0.5);
    border-radius: 3px;


}

.infohead{
    width: 100%;
    height: 80px;
    background-color: #fff;
    color: rgb(100,100,100);
    box-shadow: 0 1px 2px rgba(50,50,50,0.3);
    font-family: proxima, sans-serif;
    font-weight: 100;
}

.infohead p:nth-of-type(1){
    float: left;
    padding: 15px 0 15px 30px;
    margin: 0 0 0 0;
    font-size: 40px;
    color: #047dff;

}
.infohead p:nth-of-type(2){
    float: right;
    padding: 25px 0;
    margin: 0 0 0 0;
    font-size: 25px;
    width: 350px;
    text-align: center;

}

.infohead p.double-line{
    padding: 25px 20px;
    font-size: 22px;
}

.infobody{
    text-align: left !important;
    font-family: proxima, sans-serif;
    font-weight: 200;
    font-size: 15px;
    padding: 30px 50px;
    color: rgb(100,100,100);

}

.infoicon{
    position: relative;
    top: 6px;
    padding-right: 15px;
    height: 25px;
    width: auto;
}

.infobook{
    background-color: #047dff;
    color: white;
    width: 100px;
    text-align: center;
    padding: 1px 5px;
    position: absolute;
    right: 50px;
    bottom: 50px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
}

.infobook:hover{
    background-color: rgb(100,100,100);
}

.infoexit{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    font-family: proxima, sans-serif;
    font-weight: 200;
    font-size: 35px;
    color: rgb(240,240,240);

    z-index: -500;
}

.infoexit p{
    position: absolute;
    top: 70px;
    right: 50px;
    font-size: 50px;
    cursor: pointer;
}
.infoexit1{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    font-family: proxima, sans-serif;
    font-weight: 200;
    font-size: 35px;
    color: rgb(240,240,240);

    z-index: -500;
}

.infoexit1 p{
    position: absolute;
    top: 70px;
    right: 50px;
    font-size: 50px;
    cursor: pointer;
}

.add-to-cart{
    position: absolute;
    right: 30px;
    bottom: 30px;
    color: rgb(20,20,20);
    border: 2px solid rgb(20,20,20);
    padding: 15px;
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    font-family: "Proxima Nova Light", sans-serif;


}

.add-to-cart:hover {
    background: rgb(20,20,20);
}
.add-to-cart p{
    padding: 0;
    margin: 0;
}

.add-to-cart:hover{
    background-color: rgb(20,20,20);
    color: white;
    font-family: "Proxima Nova Light", sans-serif;
}

.sold-out{
    position: absolute;
    right: 30px;
    bottom: 30px;
    color: rgb(250,250,250);
    border: 2px solid rgb(250,250,250);
    padding: 15px;
    font-size: 20px;
    cursor: not-allowed;
    font-family: "Proxima Nova Light", sans-serif;
    background: rgb(50,50,50);
}

.sold-out p{
    padding: 0;
    margin: 0;
}



.add-workshops-fail{
    border: 2px solid rgb(20,20,20);
    width: 200px;
    padding: 10px;
    margin: -60px auto 0 auto;
    font-size: 20px;
}

.add-workshops-fail:hover{
    color: white;
    background-color: rgb(20,20,20);
}



/*=========================================================
||                        ABOUT US                       ||                                                       
=========================================================*/
#aboutcontent{
    padding-top: 0;
}
#aboutcontent,#aboutcontent1,#aboutcontent2{
    padding-bottom: 5%;
}

#aboutcontent .blurb{
    color: rgb(50,50,50);
}
#aboutcontent1 .blurb{
    color: rgb(50,50,50);
}
#aboutcontent2 .blurb{
    color: rgb(50,50,50);
}

#about-landing-content{
    width: 100%;
    background-image: url("images/Harry Flett-137.jpg");
    background-size: cover;
    background-position: center;
    padding: 100px 0 0 0;
}


h3{
    font-size: 20px;
    font-family: proxima, sans-serif;
    font-weight: 300;
}

.pggrey{
    background-color: rgb(240,240,240) !important;
    color: inherit;
    box-shadow: 0 0 5px rgb(100,100,100) inset;
}



/*=========================================================
||                        PRIVATE                        ||                                                       
=========================================================*/
#private-landing-content{
    width: 100%;
    background: url("images/Harry Flett-176.jpg") bottom;
    background-size: cover;
    padding: 100px 0 0 0;
}
form {
    display: inline-block;
    font-family: proxima, sans-serif;
    font-weight: 200;
    padding-bottom: 20px;

}

#aboutcontent .private-blurb{
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
    text-align: center;
}

#toggleMenu{
    color: #8a8a8a;
    padding: 8px 100px 8px 5px !important;
    width: 316px;
    max-width: 500px;
    text-align: left;
    float: left;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    resize: none;
    border: 2px solid #1a1a1a;
    border-radius: 0 !important;

    background: url('images/acedownarrow.png') no-repeat right transparent;
    background-size: contain;
    overflow: hidden;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;
}

#togglemenu option{
    line-height: 2em;
    text-align: left;
    padding: 5px;


}

#book-form-list{
    width: 450px;
    list-style: none;
}

#book-form-list li{
    margin: 0 auto;
    clear: both;
}

input[type="text"],textarea,input[type="email"]
{
    font-family: proxima, sans-serif;
    font-weight: 300;
}


input,textarea{
    background-color: transparent;
    padding: 5px;
    padding-left: 7px;
    max-width: 500px;
    width: 300px;
    line-height: 1.7em;
    text-align: left;
    float: left;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    resize: none;
    border: 2px solid #1a1a1a;
    outline:none;
}



textarea{
    height: 150px;
}

form p {
    float: left;
    padding: 1px;
    margin: 0;
    margin-top: 15px;
    width: 100px;
    text-align: right;
    padding-right: 25px;
}

#subject-option{
    position: relative;


}

#subject-select{

    color: #8a8a8a;
    padding: 8px 100px 8px 5px !important;
    width: 316px;
    max-width: 500px;
    text-align: left;
    float: left;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    resize: none;
    border: 2px solid #1a1a1a;
    outline:none;
    background: url('images/acedownarrow.png') no-repeat right transparent;
    background-size: contain;
    overflow: hidden;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;
    border-radius: 0;

}



.minus-add-li{
    position: relative;
}

.add-subject-button-div{
    width: 316px;
    text-align: left;
}

#add-subject-button{
    position: relative;
    left: 90px;
    top: -7px;
    text-align: left;
    display: block;
    cursor: pointer;

}

#minus-subject-button{
    position: absolute;
    top: -95px;
    right: -50px;
    font-size: 80px;
    color: #047dff;
    cursor: pointer;
    width: 20px;

}

#add-subject-button span{
    font-size: 50px;
    position: absolute;
    top: -18px;
    left: -30px;
    color: #047dff;

}

.clearer { clear: both; }


.check-span{
    width: 300px;
    height: 40px;
}

input[type="checkbox"]{
    height: 45px;
    width: 40px;
    border-radius: 0;
    border: 1px solid black;
    padding: 0;
    margin: 0;

}







input[type="submit"], #send{
    font-family: proxima, sans-serif;
    font-weight: 300;
    margin-top: 15px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: none;
    border: 2px solid #1a1a1a;
    cursor: pointer;
    text-align: center;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;
}

input[type="submit"]:hover{
    background-color: #1a1a1a;
    color: #fff;

}

form div {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.form-double {
    margin-top: 4px;
}

#leg-popup{
    width: 64%;
    float: right;
    margin: 0 auto;
    height: auto;
    text-align: center;
    font-size: 8pt;
    clear: both;
    color: crimson;
    display: none;



}


/*=========================================================
||                        TUTOR                          ||
=========================================================*/
#tutor-landing-content{
    width: 100%;
    background-image: url("images/Harry Flett-137.jpg");
    background-size: cover;
    background-position: center;
    padding: 100px 0 0 0;
}
#tutor-landing-content p{
    width: 80%;
    font-family: "Proxima Nova Medium", sans-serif;
    margin: 10px auto;
}
#tutor-content{
    min-width: 500px;
    clear: both;
    font-family: proxima, sans-serif;
    font-weight: 100;
    color: #1a1a1a;
    background-color: transparent;
    overflow:hidden;
    margin-left: auto;
    margin-right: auto;
    padding: 0;

}

.tutor-pagehead{
    font-family: "Proxima Nova Medium", sans-serif;
    font-size: 50px;
    padding: 0 0 50px 0;
    color: white;
}
.tutor-para-white{;
    padding: 0 0 50px 0;
    width: 70%;
    margin: 0 auto;

}
#tutor-blurb h3{
    font-family: "Proxima Nova Semibold", sans-serif;
    font-size: 27px;
}
#tutor-blurb p{
    font-family: "Proxima Nova Medium", sans-serif;
}
.tutor-para-black{
    background-color: rgba(20,20,20,1);
    color: white;
    padding: 50px 0 70px 0;
    min-width: 100%;
}



#tutor-blurb ul{
    list-style: none;
    width: 60%;
    text-align: left;
    margin: 0 auto;
}
#tutor-blurb ul li{
    padding: 10px 0;
    position: relative;
    margin: 0 auto;
    max-width: 500px;


}

.tick{
    height: 30px;
    position: absolute;
    left: -50px;
    top: 15%;
}

.tutor-form-thanks{
    font-family: "Proxima Nova Medium", sans-serif;
    font-size: 20px;
}


/*=========================================================
||                        Checkout                        ||
=========================================================*/
#checkout-landing-content{
    width: 100%;
    background-image: url("images/Harry Flett-71.jpg");
    background-size: cover;
    background-position: center;
    padding: 100px 0 0 0;
}
#checkout-landing-content p{
    width: 80%;
    font-family: "Proxima Nova Medium", sans-serif;
    margin: 10px auto;
}
#checkout-content{
    width: 500px;
    clear: both;
    font-family: proxima, sans-serif;
    font-weight: 100;
    color: rgb(20,20,20);
    background-color: transparent;
    overflow:hidden;
    margin-left: auto;
    margin-right: auto;
    padding: 0;

}

.checkout-pagehead{
    font-family: "Proxima Nova Medium", sans-serif;
    font-size: 50px;
    padding: 0 0 50px 0;
    color: rgb(250,250,250);
}



#checkout div.cart-item, #checkout-break, #checkout-body .cart-item {
    font-family: proxima, sans-serif;
    font-weight: 200;
    font-size: 25px;
    letter-spacing: 1px;
    color: rgb(20,20,20);
    width: 300px;
    margin: 0 auto;
    list-style: none;
    clear: both;

    -webkit-transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -o-transition: 0.1s ease;
    transition: 0.1s ease;

}

#checkout div.cart-item p, #checkout-break p, #checkout-body .cart-item p {
    float: left;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    color: rgb(20,20,20);
}

div.cart-item p:nth-of-type(1), #checkout-body .cart-item p:nth-of-type(1){
    text-align: left;
    width: 55%;
}
div.cart-item p:nth-of-type(2), #checkout-body .cart-item p:nth-of-type(2){
    text-align: center;
    width: 35%;
}
div.cart-item p:nth-of-type(3), #checkout-body .cart-item p:nth-of-type(3){
    text-align: right;
    width: 10%;
    position: relative;
    top: -3px;
    color: crimson;
    cursor: pointer;
}

#checkout{
    width: 500px;
    margin: 0 auto;
}

#cart-checkout p{
    float: left;
    width: 46%;
    color: rgb(20,20,20);
    padding: 10px;
    margin: 2%;
    font-family: "Proxima Nova Light", sans-serif;
    box-sizing: border-box;
    border: 1px solid rgb(20,20,20);
    cursor: pointer;
}

#cart-checkout p:hover{
    background: rgba(250,250,250,1);
    color: black;
}

#confirm-name, #confirm-cell , #confirm-email{
    font-weight: 400;
}

#checkout-break{
    height: 1px;
    width: 300px;
    background-color: rgba(20,20,20,0.5);
    margin: 0 auto;
    display: block;
}



#cart-total p:nth-of-type(3){
    color: crimson;
}


#checkout #no-items{
    color: rgb(20,20,20);
    font-family: "Proxima Nova Light", sans-serif;
}

#payment-form{
    margin: 30px 0 0 0;
}

.form-row{
    width: 500px;
    position: relative;
    height: 50px;
}

.form-row input{
    position: absolute;
    right: 20px;
}


#checkout-submit{
     border: 2px solid rgb(20,20,20);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     padding: 10px;
     margin: 20px auto 0 auto;
     font-size: 20px;
 }


.add-workshops-checkout{
    border: 2px solid rgb(20,20,20);
    width: 200px;
    padding: 10px;
    margin: -60px auto 0 auto;
    font-size: 20px;
}

.add-workshops-checkout:hover{
    color: white;
    background-color: rgb(20,20,20);
}


/*=========================================================
||                        SUBJECT                        ||                                                       
=========================================================*/



#subjectcontent, #subjectcontent1{
    min-width: 500px;
    clear: both;
    font-family: proxima, sans-serif;
    color: #1a1a1a;
    background-color: inherit;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 70px;

}

figure {
    padding: 0;
    margin: 0;
    width: 100%;
}

#content.subjectpage{
    background-color: transparent;
}

#content.subjectpage h2{
    margin-bottom: 50px;
}
figure{
    width: 50%;

}

.subjectimage {
    width: 100%;
    height: auto;
    float: left;
    box-sizing:border-box;
    padding-left: 2%;
}

.subjectinfo {
    font-weight: 300;
    position: relative;
    box-sizing:border-box;
    padding-right: 2%;
    padding-bottom: 0;
    margin: 0;
    width: 48%;
    float: left;
    text-align: left;
}

#subjects h2{
    color: rgb(20,20,20);
}


.subjectinfo p {
    position: relative;
    top: 0;
    left: 0;
    font-size: 30px;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 0;
    overflow: visible !important;
}

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

    .subjectinfo p {
        font-size: 10px;
    }

}

/*=========================================================
||                                                       ||
||                     Contact                           ||
||                                                       ||
=========================================================*/
#contact-landing-content{
    width: 100%;
    background-image: url("images/Harry Flett-1691.jpg");
    background-size: cover;
    background-position: center;
    padding: 100px 0 0 0;
}
#contact-landing-content p{
    width: 80%;
    font-family: "Proxima Nova Medium", sans-serif;
    margin: 10px auto;
}

#contact-content{
    min-width: 500px;
    clear: both;
    font-family: proxima, sans-serif;
    font-weight: 100;
    color: #1a1a1a;
    background-color: transparent;
    overflow:hidden;
    margin-left: auto;
    margin-right: auto;
    padding: 0;

}
#tutor-contact{
    padding: 20px 60px;
    max-width: 800px;
    margin: 0 auto;
}
.contact-image{
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;

    cursor: pointer;
}
.contact-image{
    height: 80px;
    width: 80px;
    display: block;
    transform: rotate(-0deg);
    margin: 0;
    border-radius: 0;
    border: 3px solid rgb(20,20,20);

}



.contact-image p{
    font-family: "Proxima Nova Medium", sans-serif;
    color: black;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0;
    margin: 0;


}


.contact-quote{
    float: left;
    box-sizing: border-box;
    padding: 0;
    margin: 10px 0;
    transform-origin: top;
    transform:perspective(400px) rotate3d(-1,0,0,90deg) ;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    z-index: 99999;
}
.contact-quote p{
    width: 250px;
    margin: 0;
    padding: 20px;
    color: white;
    background-color: rgba(25,25,25,0.9);
    box-sizing: border-box;
    font-family: "Proxima Nova Light", sans-serif;
    font-size: 15px;
    position: absolute;
    left: 30%;
    transform: translateX(-30%);
    top: 5px;
}

.contact-image:hover{
    transform: scale(1.2);
}

#bsns111-contact:hover > .contact-quote{
     transform: rotate3d(-1,0,0,0deg);
 }
#bsns112-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#bsns113-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#bsns114-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#bsns115-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#laws101a-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#laws101b-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#hubs191-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#cels191-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#chem191-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#phys191-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
#stat110-contact:hover > .contact-quote{
    transform: rotate3d(-1,0,0,0deg);
}
/*=========================================================
||                                                       ||
||                        FOOTER                         ||
||                                                       ||
=========================================================*/

.home-push{
    margin-top: 150px;
}
#footer, .push{  /*TO PUSH FOOTER TO BOTTOM*/
    min-width: 500px;
    margin-top: 50px;
}

#footer{
    min-width: 500px;
    width: 100%;
    padding: 0;
    background-color: rgba(20,20,20,1);
    height: 250px;
}

#footer div{
    width: 65%;
    padding: 0;
    margin: 0;
    float: left;
    text-align: left;
}

#footer div:nth-of-type(1){
    width: 35%;
}


.footerlogo {
    margin: 20px;
    width: 80%;
    height: auto;
}

#footer ul{
    margin: 40px 20px;
    padding: 0;
    text-align: left;
    list-style: none;
    width: 25%;
    float: left;
    color: white;
    font-family: "Proxima Nova Light", sans-serif;
    font-size: 18px;

}

#footer ul li:nth-of-type(1){
    font-size: 120%;
    font-family: proxima, sans-serif;
    font-weight: 400;
}

#footer ul li{
    padding: 2px;
}

#footer p{
    color: white;
    width: 500px;
    margin:  auto;
    clear: both;
    position: relative;
    top: 35px;
    font-family: proxima, sans-serif;
    font-weight: 400;
    font-size: 13px;
}

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

    #footer p{
        top: 15px;
    }

}