/* FONTS */

@font-face {
    font-family: AvantGardeBook;
    src: url(../fonts/AvantGardeITCbyBT-Book.woff);
}

@font-face {
    font-family: AvantGardeLight;
    src: url(../fonts/AvantGardeITCbyBT-ExtraLight.woff);
}

/* BOOTSTRAP OVERRIDES */

#navbar.override {
    border: none;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    background-color: white;
    overflow: visible;
    height: auto;
}

#navbar.override .navbar-brand, #navbar.override .navbar-nav li a, #navbar.override div.navbar-header {
    line-height: 80px;
    color: #6f7b8c;
    overflow: visible;
    height: auto;
    font-family: AvantGardeBook;
    font-size: 12pt;
}

#navbar.override .nav > li > a {
    padding: 10px;
    transition: 0.75s ease;
}

#navbar.override .nav > li > a:hover {
    color: #d9843b;
}

#navbar.override #mainmenu li a.active {
    color: #d9843b;
}

.img-responsive {
    margin: 0 auto;
}

/* STYLES */

section#nav {
    overflow: visible;
    height: auto;
    height: 107px;
}

img.arrow {
    padding-right: 5px;
    margin-top: -2px;
}

.section {
    background-image: url(../img/We-Are-Wolf-People.jpg);
    height: 800px;
}

.inner {
    background-image: url(../img/Wolf-People-Logo-Large.png);
    background-repeat: no-repeat;
    background-size: 60%;
    margin-left: 15%;
    height: 800px;
}

.large-logo {
    margin: -170px 0 0 150px;
}

.greyarrow {
    padding-left: 17%;
    margin-top: -11%;
}

section#aboutus > div > div > div > p {
    font-family: AvantGardeBook;
    font-size: 16pt;
    font-weight: 500;
}

section#aboutus > div > div > div > h2 {
    font-family: AvantGardeLight;
    font-size: 40pt;
    color: #d9843b;
}

section#services h2 {
    font-family: AvantGardeLight;
    font-size: 40pt;
    color: white;
}

section#services p {
    font-family: AvantGardeBook;
    font-size: 14pt;
    color: white;
}

section#services {
    background-image:url(../img/Services.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0;
    margin-top: 15px;
}

.service {
    padding: 20px;
    height: 200px;
}

.service img:hover {
    cursor: pointer;
}

.service-detail {
    display: none;
    height: auto;
    padding-bottom: 15px;
    z-index: 50;
    background-color: white;
    position: absolute;
}

.service-detail h3 {
    font-family: AvantGardeBook;
    font-size: 20pt;
    color: #d9843b;
}

#brand-ambassadors-detail {
    background-image: url(../img/Brand-Ambassador-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
}

#event-managers-detail {
    background-image: url(../img/Event-Managers-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
}

#international-staffing-detail {
    background-image: url(../img/International-Staffing-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
}

#hospitality-staff-detail {
    background-image: url(../img/Hospitality-Staff-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 200px;
}

#actors-detail {
    background-image: url(../img/Actors-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 200px;
}

#data-capture-detail {
    background-image: url(../img/Data-Capture-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 200px;
}

#mystery-shoppers-detail {
    background-image: url(../img/Mystery-Shoppers-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 400px;
}

#leafleters-detail {
    background-image: url(../img/Leafleters-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 400px;
}

#logistics-detail {
    background-image: url(../img/Logistics-Detail.png);
    background-repeat: no-repeat;
    background-position: -10px 115%;
    position: absolute;
    margin-top: 400px;
}

.service-icon {
    height: 210px;
}

#services > div > div > div:nth-child(2) > div.col-md-12.col-sm-12.col-xs-12 {
    padding: 0;
}

div.service-detail p {
    color: #585857 !important;
}

section#heart h2 {
    font-family: AvantGardeLight;
    font-size: 40pt;
    color: #6f7b8c;
}

section#heart h3 {
    font-family: AvantGardeLight;
    font-size: 40pt;
}

section#heart h4 {
    font-family: AvantGardeBook;
    font-size: 26pt;
    color: white;
    margin-top: 0;
}

section#heart h5 {
    font-family: AvantGardeLight;
    font-size: 16pt;
}

section#heart h6 {
    font-family: AvantGardeBook;
    font-size: 16pt;
    color: #585857;
}

section#heart p {
    font-family: AvantGardeBook;
    font-size: 14pt;
    color: white;
}

img.drive, img.wand {
    width: 100%
}

div.drive-icons, div.wand-icons {
    padding-top: 48%;
}

div.drive-image {
    background-image: url(../img/Drive-Image.jpg);
    background-size: 100%;
    height: 500px;
    background-repeat: no-repeat;
}

div.wand-image {
    background-image: url(../img/Wand-Image.jpg);
    background-size: 100%;
    height: 500px;
    background-repeat: no-repeat;
}

.inline-headers h5 {
    margin-top: 23px;
}

.inline-headers {
    text-align: center;
}

.inline-headers h3, .inline-headers h5 {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0px;
}

.drive h3, .drive h5 { 
    color: #6ebba9;
}

.wand h3, .wand h5 {
    color: #d9843b;
}

section#ourwork {
    background-image:url(../img/Some-Of-Our-Work.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin-top: 15px;
}

section#ourwork h2 {
    font-family: AvantGardeLight;
    font-size: 34pt;
    color: white;
    padding-top: 10px;
}

.casestudy {
    display: none;
}

.casestudy ul {
    margin: 0 0 0 20px;
    padding: 0;
    color: white;
}

.casestudy ul li p {
    margin: 0;
}

.casestudy ul.case-study-content li:last-child {
    margin: 0 0 10px;
}

.casestudy p {
    color: white;
    font-family: AvantGardeBook;
    font-size: 14pt;
}

.cs-stella-artois {
    background-image: url(../img/Stella-Artois-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-pringles {
    background-image: url(../img/Pringles-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-appleton-estate {
    background-image: url(../img/Appleton-Estate-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-princes {
    background-image: url(../img/Princes-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-google {
    background-image: url(../img/Google-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-american-eagle {
    background-image: url(../img/American-Eagle-Background.jpg);
    background-size: 1400px;
    overflow: auto;
    display: flex;
}

.cs-image {
    padding: 10px;
    background-color: rgba(111,123,140,0.9);
}

.cs-image:nth-child(2) {
    padding: 3px 10px;
}

ul.case-study-images {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.case-study-images li {
    padding: 0;
    margin: 0;
}

ul.case-study-images li img {
    background-color: rgba(111,123,140,0.9);
    padding: 5px;
}

#case-study > article.casestudy.casestudy-stella-artois > div > div.col-md-3.col-sm-12,
#case-study > article.casestudy.casestudy-pringles > div > div.col-md-3.col-sm-12,
#case-study > article.casestudy.casestudy-appleton-estate > div > div.col-md-3.col-sm-12,
#case-study > article.casestudy.casestudy-princes > div > div.col-md-3.col-sm-12,
#case-study > article.casestudy.casestudy-google > div > div.col-md-3.col-sm-12,
#case-study > article.casestudy.casestudy-american-eagle > div > div.col-md-3.col-sm-12{
    padding-right: 0;
}

.bluebg {
    background-color: rgba(111,123,140,0.9);
}

#close-case-study-stella-artois img, #close-case-study-pringles img, #close-case-study-appleton-estate img, #close-case-study-princes img, #close-case-study-google img, #close-case-study-american-eagle img {
    padding-top: 12px;
}

.client-logo {
    padding: 65px 0;
    width: 250px;
    height: 280px;
}

section#contact {
    padding-bottom: 30px;
}

section#contact h2 {
    font-family: AvantGardeLight;
    font-size: 40pt;
    color: #6f7b8c;
}

section#contact h3 {
    font-family: AvantGardeBook;
    font-size: 20pt;
    color: #585857;
    text-transform: uppercase;
}

a.btn {
    font-family: AvantGardeBook;
    font-size: 14pt;
    border-radius: 5px;
    color: white;
    transition: 0.75s ease;
}

a.button {
    width: 275px;
}

.register {
    background-color: #da873b;
}

img.email, img.phone {
    margin-right: 10px;
}

a#email-hello, a#email-info, a#phone {
    font-family: AvantGardeBook;
    color: #585857;
    font-size: 14pt;
}

a#email-hello:hover, a#email-info:hover, a#phone:hover {
    color: white;
}

a#email-hello, a#email-info {
    background-color: #da873b;
    border-radius: 5px;
}

a#phone {
    background-color: #eabe42;
    border-radius: 5px;
}

.contact-details {
    padding-bottom: 15px;
}

.login, .phone {
    background-color: #eabe42;
}

#footer {
    background-color: #c5c5c5;
}

#footer p {
    font-family: AvantGardeBook;
    padding: 24px 0;
    margin: 0;
    color: #585857;
}

ul.social {
    list-style: none;
    margin: 0;
    padding: 15px 0 10px 0;
}

ul.social li {
    display: inline-block;
    padding: 15px 5px;
}

li.social-links {
    width: 40px;
    height: 40px;
    transition: 0.7s ease;
    background-repeat: no-repeat;
    margin: 0 20px;
}

li.social-links a {
    width: 40px;
    height: 40px;
    display: block;
}

li.twitter {
    background-image: url(../img/Twitter.png);
}

li.twitter:hover {
    background-image: url(../img/Twitter-Hover.png);
}

li.facebook {
    background-image: url(../img/Facebook.png);
}

li.facebook:hover {
    background-image: url(../img/Facebook-Hover.png);
}

li.instagram {
    background-image: url(../img/Instagram.png);
    margin-right: 0;
}

li.instagram:hover {
    background-image: url(../img/Instagram-Hover.png);
}

#case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12,
#case-study > article.casestudy > div {
    padding: 0;
}

/* IPHONE */

@media only screen 
and (min-width : 320px) 
and (max-width : 667px) 
and (orientation : portrait) {
    #navbar.override .navbar-brand, #navbar.override .navbar-nav li a, #navbar.override div.navbar-header {
        line-height: 14px;
    }
    
    .section {
        height: 600px;
        background-position: 65% 0;
    }
    .inner {
        margin-left: 0;
        background-size: 100%;
        height: 600px;
    }
    .client-logo {
        padding: 50px;
    }
    
    a.btn {
        padding: 7.5px 25px 6.5px 25px;
    }
    
    div.wand-image, div.drive-image {
        background-size: auto;
        height: 450px;
    }
    
    div.drive-icons, div.wand-icons {
        padding-top: 240px;
    }
    
    .service-detail {
        width: 90vw;
    }
    
    #case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12 {
        padding-left: 0;
    }
    
    #case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12 > ul {
        text-align: center;
    }
    
    .cs-stella-artois, .cs-pringles, .cs-appleton-estate, .cs-princes, .cs-google, .cs-american-eagle {
        display: block;
    }
    
    #case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12 > div {
        text-align: center;
    }
}

@media only screen 
and (min-width : 320px) 
and (max-width : 667px) 
and (orientation : landscape) {
    #navbar.override .navbar-brand, #navbar.override .navbar-nav li a, #navbar.override div.navbar-header {
        line-height: 14px;
    }
    
    .client-logo {
        padding: 50px;
    }
    
    .inner {
        margin-left: 10%;
        background-size: 60%;
    }
    
    div.wand-image, div.drive-image {
        height: 550px;
    }
    
    #case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12 {
        padding-left: 0;
    }
    
    #case-study > article.casestudy > div > div.col-md-offset-5.col-md-3.col-sm-4.col-xs-12 > ul {
        text-align: center;
    }
}

/* IPAD */

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {
    #navbar.override .navbar-brand, #navbar.override .navbar-nav li a, #navbar.override div.navbar-header {
        line-height: 14px;
    }
    
    .client-logo {
        padding: 50px;
    }
    
    .inner {
        margin-left: 0;
        background-size: 80%;
    }
    
    div.wand-image, div.drive-image {
        background-size: auto;
        height: 450px;
    }
    
    div.drive-icons, div.wand-icons {
        padding-top: 240px;
    }
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {
    #navbar.override .navbar-brand, #navbar.override .navbar-nav li a, #navbar.override div.navbar-header {
        line-height: 14px;
    }
    
    .client-logo {
        padding: 50px;
    }
    
    .inner {
        margin-left: 10%;
        background-size: 70%;
    }
    
    div.wand-image, div.drive-image {
        background-size: auto;
        height: 450px;
    }
    
    div.drive-icons, div.wand-icons {
        padding-top: 230px;
    }
}

@media (max-width: 1500px) {
    .inner {
        margin-left: 15%;
        background-size: 70%;
    }
}

@media (max-width: 1250px) {
    .inner {
        margin-left: 10%;
        background-size: 80%;
    }
}

@media (max-width: 1025px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
    #brand-ambassadors-detail, #event-managers-detail, #international-staffing-detail, #hospitality-staff-detail, #actors-detail, #data-capture-detail, #mystery-shoppers-detail, #leafleters-detail, #logistics-detail {
        margin-top: 0;
    }
}