@font-face {
    font-family: 'Avenir LT Std 95 Black';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir LT Std 95 Black'), url('/bundles/app/font/AvenirLTStd-Black.woff') format('woff');
}

@font-face {
    font-family: 'Avenir LT Std 85 Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir LT Std 85 Heavy'), url('/bundles/app/font/AvenirLTStd-Heavy.woff') format('woff');
}

@font-face {
    font-family: 'Avenir LT Std 65 Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir LT Std 65 Medium'), url('/bundles/app/font/AvenirLTStd-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Avenir LT Std 55 Roman';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir LT Std 55 Roman'), url('/bundles/app/font/AvenirLTStd-Roman.woff') format('woff');
}

@font-face {
    font-family: 'Avenir LT Std 45 Book Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir LT Std 45 Book Oblique'), url('/bundles/app/font/AvenirLTStd-BookOblique.woff') format('woff');
}

html {
    font-family: "Avenir LT Std 65 Medium";
}

.required::after {
    content: " *";
    color: #FF0000;
}

#sidebar {
    position: fixed;
    width: 300px;
    padding: 40px;
    margin: 0;
    height: 100%;
}
#content {
    margin: 0 0 0 300px;
    padding: 40px;
    height: 100%;
}
@media all and (max-width: 767px) {
    #content {
        margin: 0;
    }
}

a#logo {
    height :40px;
    width: 100%;
    margin: 0 0 40px 0;
    display: block;
}
#brand {
    margin: 0 0 0 5px;
}

h3 {
    margin-top: 0;
}

h5 {
    font-family: "Avenir LT Std 95 Black";
    font-size: 16px;
}

.overlay-close {
    color: #fff;
    font-weight: bold;
    font-size: 50px !important;
    position: absolute;
    top: 25px;
    right: 35px;
    z-index: 10001;
    cursor: pointer;
    font-family: "Avenir LT Std 85 Heavy";
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0;
}

nav .container-fluid {
    padding: 0;
}
.navbar {
    border: none;
    margin-bottom: 0;
    min-height: 80px;
}

.navbar-right {
    margin-right: 0;
}

.navbar-toggle {
    margin-top: 0;
}
.navbar-toggle .icon-bar {
    width: 30px;
    height: 4px;
}

.navbar-nav {
    margin: 0;
}
.navbar-nav>li>a {
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-collapse.in {
    overflow: hidden;
    max-height: none !important;
    height: auto !important;
}
.navbar-default {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.navbar-brand {
    padding: 0;
    height: 40px;
}
.navbar-brand>img {
    display: inline-block;
}
.navbar-toggle {
    border: none;
    color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #000000;
}
ul.nav li a.selected {
    color: #000000;
}

#menu-link {
    font-family: "Avenir LT Std 85 Heavy";
    font-size: 24px;
    padding: 0 0 5px 0;
    cursor: pointer;
}
#menu-translation {
    padding: 0 50px 0 0;
}

#page {
    margin-top: 120px;
    padding: 0 40px 50px 40px;
}
#page .container-fluid {
    padding: 0;
}

.contact_message {
   resize: vertical;
    min-height: 150px;
}

.title {
    font-family: "Avenir LT Std 95 Black";
    font-size: 16px;
    color: #000000;
    margin: 5px 0;
}
.company {
    font-size: 16px;
    margin: 8px 0 5px 0;
}

a {
    color: #000000;
    position: relative;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
a.stylised:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
a.stylised:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

a.category {
    font-size: 16px;
    color: #7b7b7b;
    display: block;
    margin-bottom: 5px;
}
a.category.selected {
    font-family: "Avenir LT Std 85 Heavy";
    text-decoration: underline;
    color: #000000;
}
a.category:hover {
    color: #000000;
}

.project-container {
    margin: 20px 10px;
}

.project-container, .sibling-container {
    float: left;
}
@media all and (min-width: 1800px) {
    .project-container {
        width: 20%;
    }
    .sibling-container {
        width: 33%;
    }
}
@media all and (max-width: 1799px) and (min-width: 1500px) {
    .project-container {
        width: 25%;
    }
    .sibling-container {
         width: 33%;
     }
}
@media all and (max-width: 1499px) and (min-width: 1200px) {
    .project-container, .sibling-container {
        width: 31%;
    }
}
@media all and (max-width: 1199px) and (min-width: 900px) {
    .project-container, .sibling-container {
        width: 45%;
    }
}
@media all and (max-width: 899px) and (max-width: 899px) {
    .project-container, .sibling-container {
        width: 100%;
    }
}


a.project {
    text-decoration: none;
    display: block;
    width: 100%;
    border: 5px transparent solid;
}
.project-info {
    margin: 15px 0 0 0;
    padding: 0 10px;
}
a.project .title {
    margin: 0;
    line-height: 20px;
    text-transform: uppercase;
    color: #000000;
    font-size: 16px;
    font-family: "Avenir LT Std 95 Black";
}
a.project .company {
    font-family: "Avenir LT Std 55 Roman";
    line-height: 20px;
    font-size: 16px;
    color: #7b7b7b;
}
a.project .categories {
    font-family: "Avenir LT Std 45 Book Oblique";
    color: #3d3d3d;
    font-size: 12px;
    line-height: 20px;
}

ul {
    -webkit-padding-start: 0;
}

#menu-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index:5000;
    top: 0;
    left: 0;
}
#overlay-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background-image: -webkit-linear-gradient(left, #1954cc, #1983cc);*/
    opacity: 0.92;
    z-index: 5000;
    background: #1954cc; /* Old browsers */
    background: -moz-linear-gradient(left, #1954cc 0%, #1983cc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1954cc 0%,#1983cc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1954cc 0%,#1983cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1954cc', endColorstr='#1983cc',GradientType=1 ); /* IE6-9 */
}
#menu-overlay-items {
    z-index: 10001;
    position: absolute;
    margin-top: 100px;
    width: 100%;
}

ul#menu {
    list-style-type: none;
    margin: 0 auto;
}
ul#menu li {
    color: #FFF;
    opacity: 1;
    text-align: center;
}
ul#menu li a, ul#social li a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bolder;
}
ul#menu li#studio:hover li.item {
    opacity: 0.2;
}
ul#menu li#projects:hover li.item {
    opacity: 0.2;
}
ul#menu li#contact:hover li.item {
    opacity: 0.2;
}

ul#social {
    list-style-type: none;
    display: block;
    text-align: center;
    margin: 0 auto;
}
ul#social img {
    width: 40px;
    margin: 40px 20px 0 0;
    display: block;
}
ul#social li {
    opacity: 1;
    display: inline-block;
}
ul#social:hover li {
    opacity:1;
}

ul#menu li a {
    color: #FFFFFF;
    position: relative;
    text-decoration: none;
}
ul#menu li a:hover {
    color: #000000;
}
ul#menu li a:before {
    content: "";
    position: absolute;
    width: 0;
}
ul#menu li a:hover:before {
    visibility: hidden;
}

ul#menu li.menu-content {
    margin: 0;
}
ul#menu li.menu-content a {
    color: #FFFFFF;
    font-family: "Avenir LT Std 85 Heavy";
}
ul#menu li.menu-content a:hover {
    color: #FFFFFF;
}

li.right {
    text-align: right;
}
li.right a {
    display: inline-block;
}


@media all and (min-width: 960px) {
    ul#menu li.menu-content a {
        font-size: 128px;
    }
}

@media all and (max-width: 959px) and (min-width: 600px) {
    ul#menu li.menu-content a {
        font-size: 9vw;
    }
}

@media all and (max-width: 599px) and (min-width: 50px) {
    ul#menu li.menu-content a {
        font-size: 10vw;
    }
}

#video-body-container {
    margin: 0 auto;
}

/**
 * VIDEO FRAME DIMENSIONS
 */
@media all and (min-width: 1150px) {
    #video-body-container, #video {
        width: 800px;
    }
    #video {
        height: 450px;
    }
}
@media all and (max-width: 1149px) and (min-width: 1050px) {
    #video-body-container, #video {
        width: 700px;
    }
    #video {
        height: 394px;
    }
}
@media all and (max-width: 1049px) and (min-width: 960px) {
    #video-body-container, #video {
        width: 600px;
    }
    #video {
        height: 337px;
    }
}
@media all and (max-width: 959px) and (min-width: 860px) {
    #video-body-container, #video {
        width: 500px;
    }
    #video {
        height: 281px;
    }
}
@media all and (max-width: 859px) and (min-width: 768px) {
    #video-body-container, #video {
        width: 400px;
    }
    #video {
        height: 225px;
    }
}
@media all and (max-width: 767px) and (min-width: 660px) {
    #video-body-container, #video {
        width: 600px;
    }
    #video {
        height: 337px;
    }
}
@media all and (max-width: 659px) and (min-width: 560px) {
    #video-body-container, #video {
        width: 500px;
    }
    #video {
        height: 281px;
    }
}
@media all and (max-width: 559px) and (min-width: 460px) {
    #video-body-container, #video {
        width: 400px;
    }
    #video {
        height: 225px;
    }
}
@media all and (max-width: 459px) and (min-width: 50px) {
    #video-body-container, #video {
        width: 300px;
    }
    #video {
        height: 169px;
    }
}

.lineDrag, .ui-draggable:hover {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    border: 2px #ccc dashed;
}