/*
 CSS for Vimeo Website
 (c) 2013 Hammertime (www.hammerti.me)
 Designed by Supertusch (supertusch.dk)
 AHJ / MB
*/

@font-face {
    font-family: "eurostileregular";
    src: url("../fonts/vkZBbnITnYCI.eot");
    src: url("../fonts/vkZBbnITnYCI.eot#iefix") format("embedded-opentype"),
        url("../fonts/eLX5SftYbo3X.woff") format("woff"),
        url("../fonts/BM8UxMe7MUhj.ttf") format("truetype"),
        url("../images/sqApyFpASeBm.svg#eurostileregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* A little space to the bottom of the page */
html {
    padding-bottom: 25px;
    overflow-y: scroll;
}

/* Structure */

body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

#wrapper {
    width: 960px;
    margin: 0px auto;
}
#masthead {
    position: relative;
    height: 70px;
}
#logo {
    position: absolute;
    left: 0px;
    bottom: 0px;
    margin-bottom: 12px;
}
#menu {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin-bottom: 12px;
}
#content {
    padding-top: 10px;
}

/* Header Menu */
ul.header-nav {
    margin: 0px;
    padding: 0px;
}
ul.header-nav li {
    padding: 0px;
    float: left;
    list-style-type: none;
    margin-left: 40px;
}
ul.header-nav li.first {
    margin-left: 0px;
}
ul.header-nav li a {
    font-size: 18px;
    /*color: #b2b2b2; /* Grey */
    color: #b2b2b2;
}

ul.header-nav li a:hover {
    /* color: #444444; /* Black-ish */
    color: #b2b2b2;
    text-decoration: none;
}
ul.header-nav li a.nav-selected {
    color: #ffffff;
}

/* Video category page */
#videowrapper {
    clear: both;
}

#videowrapper.frontpage {
    margin-top: 240px;
}

.portfolioelement {
    float: left;
    margin-right: 10.5px;
    margin-top: 10.5px;
    cursor: pointer;
    /* Ease all transitions */
    -webkit-transition: all 0.05s;
    -moz-transition: all 0.05s;
    -o-transition: all 0.05s;
    transition: all 0.05s;
    border: 1px solid #000000;
}
.portfolioelement:nth-child(2n + 2) {
    margin-right: 0px;
}
.portfolioimg {
    width: 472px;
    height: 266px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.animthumb_anim {
    width: 472px;
    height: 266px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    display: none;
}
.portfoliocaption {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 472px;
    background-image: url(../images/rQbQDzQykgn8.png);
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
    text-align: left;
    font-size: 16px;
}
.byline,
.byline a {
    font-weight: normal;
    font-size: 14px;
    color: #b2b2b2;
}

#playerwrapper {
    display: none;
    position: relative;
}
#playercaption {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

#playerframe {
    margin-top: 5px;
    border: 1px solid #000000;
}

#share {
    position: absolute;
    right: 0px;
    top: 0px;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#share li {
    float: right;
}
#share li a {
    display: block;
    float: right;
    width: 19px;
    height: 19px;
    margin: 0 0 0 9px;
    cursor: pointer;
}
#share li a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

#share li a.facebook {
    background: url(../images/ydht0lZUrQu6.png) no-repeat 0px 0px;
}
#share li a.vimeo {
    background: url(../images/ydht0lZUrQu6.png) no-repeat -19px 0px;
}
#share li a.twitter {
    background: url(../images/ydht0lZUrQu6.png) no-repeat -38px 0px;
}

#share #txt_share {
    text-align: right;
}

/* Gallery images */
#gallery_images_wrap {
    position: relative;
    width: 100%;
    height: 430px;
    clear: both;
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid #000000;
}
.galleryimage {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
}

/* Grid for Contact page */
.contact-grid {
    position: relative;
    width: 960px;
}
.contact-grid .cell-1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 310px;
}
.contact-grid .cell-2 {
    position: absolute;
    left: 325px;
    top: 0px;
    width: 310px;
}
.contact-grid .cell-3 {
    position: absolute;
    left: 650px;
    top: 0px;
    width: 310px;
}

.contact-grid a {
    color: #b2b2b2 !important;
}