/*  

Theme Name: PinchMedia Website



Theme URI: http://www.facebook.com/foxporcupine



Description: A custom theme for PinchMedia website



Author: Marko Pejovic



Author URI: http://www.facebook.com/foxporcupine



Version: 1



*/



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



   HTML5 display definitions



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



article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {



    display: block



}



audio, canvas, video {



    display: inline-block;



    *display: inline;



    *zoom: 1;



}



audio:not([controls]) {



    display: none



}



[hidden] {



    display: none



}



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



   Base



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



/*





 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units



 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g



 */



html {



    font-size: 100%;



    -webkit-text-size-adjust: 100%;



    -ms-text-size-adjust: 100%;



}



html, button, input, select, textarea {



    font-family: sans-serif;



    color: #222;



}



body {



    margin: 0;



    font-size: 1em;



    line-height: 1.4;



}



/*















 * Remove text-shadow in selection highlight: h5bp.com/i















 * These selection declarations have to be separate















 * Also: hot pink! (or customize the background color to match your design)















 */



::-moz-selection {



    background: #00aeef;



    color: black;



    text-shadow: none;



}



::selection {



    background: #00aeef;



    color: black;



    text-shadow: none;



}



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



   Links



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



a {



    color: #00e



}



a:visited {



    color: auto !important



}



a:hover {



    color: auto !important



}



a:focus {



    outline: thin dotted



}



/* Improve readability when focused and hovered in all browsers: h5bp.com/h */



a:hover, a:active {



    outline: 0



}



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



   Typography



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



abbr[title] {



    border-bottom: 1px dotted



}



b, strong {



    font-weight: bold



}



blockquote {



    margin: 1em 40px



}



dfn {



    font-style: italic



}



hr {



    display: block;



    height: 1px;



    border: 0;



    border-top: 1px solid #ccc;



    margin: 1em 0;



    padding: 0;



}



ins {



    background: #ff9;



    color: #000;



    text-decoration: none;



}



mark {



    background: #ff0;



    color: #000;



    font-style: italic;



    font-weight: bold;



}



/* Redeclare monospace font family: h5bp.com/j */



pre, code, kbd, samp {



    font-family: monospace, serif;



    _font-family: 'courier new', monospace;



    font-size: 1em;



}



/* Improve readability of pre-formatted text in all browsers */



pre {



    white-space: pre;



    white-space: pre-wrap;



    word-wrap: break-word;



}



q {



    quotes: none



}



q:before, q:after {



    content: "";



    content: none;



}



small {



    font-size: 85%



}



/* Position subscript and superscript content without affecting line-height: h5bp.com/k */



sub, sup {



    font-size: 75%;



    line-height: 0;



    position: relative;



    vertical-align: baseline;



}



sup {



    top: -0.5em



}



sub {



    bottom: -0.25em



}



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



   Lists



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



ul, ol {



    margin: 1em 0;



    padding: 0 0 0 40px;



}



dd {



    margin: 0 0 0 40px



}



nav ul, nav ol {



    list-style: none;



    list-style-image: none;



    margin: 0;



    padding: 0;



}



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



   Embedded content



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



/*



 * 1. Improve image quality when scaled in IE7: h5bp.com/d



 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440



 */



img {



    border: 0;



    -ms-interpolation-mode: bicubic;



    vertical-align: middle;



}



/*



 * Correct overflow not hidden in IE9



 */



svg:not(:root) {



    overflow: hidden



}



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



   Figures



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



figure {



    margin: 0



}



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



   Forms



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



form {



    margin: 0



}



fieldset {



    border: 0;



    margin: 0;



    padding: 0;



}



/* Indicate that 'label' will shift focus to the associated form element */



label {



    cursor: pointer



}



/*



 * 1. Correct color not inheriting in IE6/7/8/9



 * 2. Correct alignment displayed oddly in IE6/7



 */



legend {



    border: 0;



    *margin-left: -7px;



    padding: 0;



    white-space: normal;



}



/*

 * 1. Correct font-size not inheriting in all browsers



 * 2. Remove margins in FF3/4 S5 Chrome



 * 3. Define consistent vertical alignment display in all browsers



 */



button, input, select, textarea {



    font-size: 100%;



    margin: 0;



    vertical-align: baseline;



    *vertical-align: middle;



}



/*















 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)















 */



button, input {



    line-height: normal



}



/*















 * 1. Display hand cursor for clickable form elements















 * 2. Allow styling of clickable form elements in iOS















 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)















 */



button, input[type="button"], input[type="reset"], input[type="submit"] {



    cursor: pointer;



    -webkit-appearance: button;



    *overflow: visible;



}



/*















 * Re-set default cursor for disabled elements















 */



button[disabled], input[disabled] {



    cursor: default



}



/*















 * Consistent box sizing and appearance















 */



input[type="checkbox"], input[type="radio"] {



    box-sizing: border-box;



    padding: 0;



    *width: 13px;



    *height: 13px;



}



input[type="search"] {



    -webkit-appearance: textfield;



    -moz-box-sizing: content-box;



    -webkit-box-sizing: content-box;



    box-sizing: content-box;



}



input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {



    -webkit-appearance: none



}



/*















 * Remove inner padding and border in FF3/4: h5bp.com/l















 */



button::-moz-focus-inner, input::-moz-focus-inner {



    border: 0;



    padding: 0;



}



/*















 * 1. Remove default vertical scrollbar in IE6/7/8/9















 * 2. Allow only vertical resizing















 */



textarea {



    overflow: auto;



    vertical-align: top;



    resize: vertical;



}



/* Colors for form validity */



input:valid, textarea:valid {







}



input:invalid, textarea:invalid {



    background-color: #f0dddd



}



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















   Tables















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



table {



    border-collapse: collapse;



    border-spacing: 0;



}



td {



    vertical-align: top



}



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















   Chrome Frame Prompt















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



.chromeframe {



    margin: 0.2em 0;



    background: #ccc;



    color: black;



    padding: 0.2em 0;



}



/* ==|== non-semantic helper classes ========================================















   Please define your styles before this section.















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



/* For image replacement */



.ir {



    display: block;



    border: 0;



    text-indent: -999em;



    overflow: hidden;



    background-color: transparent;



    background-repeat: no-repeat;



    text-align: left;



    direction: ltr;



    *line-height: 0;



}



.ir br {



    display: none



}



/* Hide from both screenreaders and browsers: h5bp.com/u */



.hidden {



    display: none !important;



    visibility: hidden;



}



/* Hide only visually, but have it available for screenreaders: h5bp.com/v */



.visuallyhidden {



    border: 0;



    clip: rect(0 0 0 0);



    height: 1px;



    margin: -1px;



    overflow: hidden;



    padding: 0;



    position: absolute;



    width: 1px;



}



/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */



.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {



    clip: auto;



    height: auto;



    margin: 0;



    overflow: visible;



    position: static;



    width: auto;



}



/* Hide visually and from screenreaders, but maintain layout */



.invisible {



    visibility: hidden



}



/* Contain floats: h5bp.com/q */



.clearfix:before, .clearfix:after {



    content: "";



    display: table;



}



.clearfix:after {



    clear: both



}



.clearfix {



    *zoom: 1



}



/* ==|== print styles =======================================================















   Print styles.















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



@media print { 



    * {



        background: transparent !important;



        color: black !important;



        box-shadow: none !important;



        text-shadow: none !important;



        filter: none !important;



        -ms-filter: none !important;



    }



    /* Black prints faster: h5bp.com/s */



    a, a:visited {



        text-decoration: underline



    }



    a[href]:after {



        content: " (" attr(href) ")"



    }



    abbr[title]:after {



        content: " (" attr(title) ")"



    }



    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {



        content: ""



    }



    /* Don't show links for images, or javascript/internal links */



    pre, blockquote {



        border: 1px solid #999;



        page-break-inside: avoid;



    }



    thead {



        display: table-header-group



    }



    /* h5bp.com/t */



    tr, img {



        page-break-inside: avoid



    }



    img {



        max-width: 100% !important



    }



}



/* ==|== primary styles =====================================================































   Author: Marko Pejovic































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



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-hv-webfont.eot');



    src: url('fonts/helveticaneueltstd-hv-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-hv-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-hv-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-hv-webfont.svg#HelveticaNeueLTStdMedBold') format('svg');



    font-weight: bold;



    font-style: normal;



}



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-hvit-webfont.eot');



    src: url('fonts/helveticaneueltstd-hvit-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-hvit-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-hvit-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-hvit-webfont.svg#HelveticaNeueLTStdMedBdIt') format('svg');



    font-weight: bold;



    font-style: italic;



}



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-it-webfont.eot');



    src: url('fonts/helveticaneueltstd-it-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-it-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-it-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-it-webfont.svg#HelveticaNeueLTStdItalic') format('svg');



    font-weight: normal;



    font-style: italic;



}



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-roman-webfont.eot');



    src: url('fonts/helveticaneueltstd-roman-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-roman-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-roman-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-roman-webfont.svg#HelveticaNeueLTStdRegular') format('svg');



    font-weight: normal;



    font-style: normal;



}



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-th-webfont.eot');



    src: url('fonts/helveticaneueltstd-th-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-th-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-th-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-th-webfont.svg#helveticaneuelt_std_thinRg') format('svg');



    font-weight: 100;



    font-style: normal;



}



@font-face {



    font-family: 'HelveticaNeue';



    src: url('fonts/helveticaneueltstd-thit-webfont.eot');



    src: url('fonts/helveticaneueltstd-thit-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-thit-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-thit-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-thit-webfont.svg#helveticaneuelt_std_thinIt') format('svg');



    font-weight: 100;



    font-style: italic;



}



@font-face {



    font-family: 'HelveticaNeueCn';



    src: url('fonts/helveticaneueltstd-bdcn-webfont.eot');



    src: url('fonts/helveticaneueltstd-bdcn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-bdcn-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-bdcn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-bdcn-webfont.svg#helveticaneuelt_std_cnbold') format('svg');



    font-weight: bold;



    font-style: normal;



}



@font-face {



    font-family: 'HelveticaNeueCn';



    src: url('fonts/helveticaneueltstd-bdcno-webfont.eot');



    src: url('fonts/helveticaneueltstd-bdcno-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-bdcno-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-bdcno-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-bdcno-webfont.svg#helveticaneuelt_std_cnBdIt') format('svg');



    font-weight: bold;



    font-style: italic;



}



@font-face {



    font-family: 'HelveticaNeueCn';



    src: url('fonts/helveticaneueltstd-thcn-webfont.eot');



    src: url('fonts/helveticaneueltstd-thcn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-thcn-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-thcn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-thcn-webfont.svg#helveticaneuelt_std_thin_cnRg') format('svg');



    font-weight: 100;



    font-style: normal;



}



@font-face {



    font-family: 'HelveticaNeueCn';



    src: url('fonts/helveticaneueltstd-thcno-webfont.eot');



    src: url('fonts/helveticaneueltstd-thcno-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-thcno-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-thcno-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-thcno-webfont.svg#helveticaneuelt_std_thin_cnIt') format('svg');



    font-weight: 100;



    font-style: italic;



}



body {



    background-color: black;



    color: white;



    font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;



    font-size: 25px;



    font-weight: 100;



    padding: 0 !important;



    margin: 0 !important;



    height: 100% !important;



    min-width: 1000px !important;



}



html {



    font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;



    padding: 0 !important;



    margin: 0 !important;



    height: 100% !important;



    min-width: 1000px !important;



}



p, h1, h2, h3, h4, h5, h6 {



    margin: 1em 0



}



h1 {



    font-family: 'HelveticaNeueCn';



    font-size: 52px;



    font-weight: bold;



    margin-top: 0;



    color: #00aeef;



    letter-spacing: 0.4;



    line-height: 1em;



    display: inline-block;



    margin-bottom: 0.4em;



    text-transform: uppercase;



}



h2 {



    font-family: 'HelveticaNeueCn';



    font-size: 25px;



    font-weight: bold;



    margin-top: 0;



    color: #00aeef;



    letter-spacing: 0.4;



    line-height: 0.7em;



    margin-bottom: 0.4em;



    text-transform: uppercase;



}



a, a:hover {



    color: #00aeef;



    text-decoration: none;



    display: inline-block;



    font-family: 'HelveticaNeueCn';



    font-weight: bold;



    /*: ;;



    padding-left: 0.3em;



    padding-right: 0.3em;



    margin-left: -0.2em;



    margin-right: -0.2em;*/



    transition: color .25s ease-in-out, background-color .25s ease-in-out;



    -webkit-transition: color .25s ease-in-out, background-color .25s ease-in-out;



    -moz-transition: color .25s ease-in-out, background-color .25s ease-in-out;



}



a:hover {



    /*background-color: #00aeef;*/



    color: white;



}



strong {



    font-family: 'HelveticaNeueCn';



    font-weight: bold;



}



span.small {



    font-size: 0.7em



}



span.italic {



    font-style: italic



}



/*general*/



.screenContainer {



    min-width: 900px;



    width: 100%;



    background-repeat: no-repeat;



    background-position: center center;



    background-attachment: scroll;



    background-size: cover;



    overflow: hidden;

}


html.ie8 .screenContainer {
	background-image:none !important;
}


.screenContainer.dark {



    background-color: black



}



.screenContainer.light {



    background-color: #fefefe;




    color: black;



}



.screenContainer.light a, .screenContainer.light h1 {



    color: #00aeef



}



.screenContainer.light a:hover {



    color: black



}



.screenContainer.blue {



    background-color: #00aeef;



    color: white;



}



.screenContainer.blue a, .screenContainer.blue h1 {



    color: black



}



.screenContainer.blue a:hover {



    color: white



}



.screenContainer.firstPost {



    margin-top: 130px



}



.screenContainer .pictureBckgOverlay {



    min-width: 900px;



    width: 100%;



    background-repeat: repeat;



    background-position: top left;



}



.screenContainer.dark .pictureBckgOverlay {



    background-image: url(img/linesBlackBckg.png)



}



.screenContainer.light .pictureBckgOverlay {



    /*background-image: url(img/linesWhiteBckg.png);*/



    background-image: url(img/linesBlackBckg3.png);



}



.screenContainer.dark.ultra .pictureBckgOverlay {



    background-image: url(img/linesBlackBckg2.png)



}



.screenContainer.light.ultra .pictureBckgOverlay {



    /*background-image: url(img/linesWhiteBckg2.png);*/



    background-image: url(img/linesWhiteBckg2.png);



}



.screenContainer.blue .pictureBckgOverlay {



    /*background-image: url(img/linesWhiteBckg.png);*/



    background-image: url(img/linesWhiteBckg3.png);



}



.screenContainer.blue.ultra .pictureBckgOverlay {



    background-image: url(img/linesWhiteBckg2.png)



}



.screen {



    width: 900px;



    margin: 0px auto;



    padding-top: 100px;



    padding-bottom: 100px;



}



.dark span.typobckg {



    background-color: black;



    color: white;



}


span.typobckg {
	position:relative;
	left:5px;
}


.light span.typobckg {



    background-color: white;



    color: black;



}



.blue span.typobckg {



    background-color: #00aeef;



    color: white;



}



footer.metaPostData {



    font-size: 0.5em



}



.fadeIn {



    opacity: 0.2;



    transition: opacity .25s ease-in-out;



    -moz-transition: opacity .25s ease-in-out;



    -webkit-transition: opacity .25s ease-in-out;



}



.fadeIn:hover {



    opacity: 1



}



.fadeIn:hover {



    opacity: 1



}



/*menu*/



#menuContainer {



    min-width: 900px;



    width: 100%;



    padding-top: 50px;



    padding-bottom: 50px;



    position: fixed;



    top: 0;



    z-index: 100;



    background-color: black;



    /*-moz-box-shadow: 0 0 5px #000;;;



    -webkit-box-shadow: 0 0 5px #000;



    box-shadow: 0 0 5px #000;*/



}



#menuContainer.static {



    position: static



}



#menu {



    width: 900px;



    height: 30px;



    margin-left: auto;



    margin-right: auto;



}



.homeLink a {



    background-image: url(img/logoSmallTextBlue1.png);



    background-repeat: no-repeat;



    background-position: top left;



    height: 30px;



    width: 299px;



    float: left;



    transition: background-image .25s ease-in-out;



    -moz-transition: background-image .25s ease-in-out;



    -webkit-transition: background-image .25s ease-in-out;



}



.homeLink a:hover {



    background-image: url(img/logoSmallTextBlue2.png)



}



.menuLinks {



    height: 30px;



    float: right;



    margin-left: 20px;



    position: relative;



    top: 4px;



}



.menuLinks a {



    font-size: 17px;



    text-transform: uppercase;



    line-height: 30px;



    vertical-align: baseline;



    color: white;



    text-decoration: none;



    font-weight: bold;



    margin-bottom: 0;



}



.menuLinks a:hover {



    color: #00aeef



}



/*navigation*/



#navigationContainer {



    min-width: 900px;



    width: 100%;



}



#navigation {



    width: 900px;



    margin-left: auto;



    margin-right: auto;



}



#navigation div {



    line-height: 35px;



    font-size: 0.7em;



    vertical-align: middle;



}



#navigation table {



    font-size: 25px



}



/*side menu*/



#sideMenuContainer {



    position: fixed;



    top: 0px;



    left: 0px;



    z-index: 150;



    max-width: 50px;



    height: 100%;



    min-height: 600px;



    /*background-color: #8d8e8e;*/



    background-repeat: repeat;



    background-position: top left;



}



#sideMenuContainer table {



    height: 100%



}



#sideMenuContainer tr td {



    vertical-align: middle



}



#sideMenuContainer .link {



    background-color: black;



    /*width: 12px;;;



    height: 12px;*/



    color: white;



    font-size: 12px;



    padding: 4px;



    text-transform: uppercase;



    font-family: 'HelveticaNeueCn';



    font-weight: bold;



    margin: 12px;



    cursor: pointer;



    transition: background-color .25s ease-in-out;



    -moz-transition: background-color .25s ease-in-out;



    -webkit-transition: background-color .25s ease-in-out;



}



#sideMenuContainer .link:hover {



    background-color: #00aeef



}



#sideMenuContainer .link.current {



    background-color: #e40079



}



/*footer*/



#footerContainer {



    min-width: 900px;



    width: 100%;



    padding-top: 50px;



    padding-bottom: 50px;



    background-color: black;



}



#footer {



    width: 859px;



    height: 30px;



    margin-left: auto;



    margin-right: auto;



    font-size: 0.5em;



    line-height: 32px;



    vertical-align: middle;



    text-align: left;



    background-image: url(img/logoSmall.png);



    background-repeat: no-repeat;



    background-position: center left;



    padding-left: 41px;



}



#footer a {



    color: white;



    font-weight: bold;



    text-decoration: none;



}



#footer a:hover {



    color: #00aeef



}



#footer a.social {



    background-repeat: no-repeat;



    background-position: center center;



    height: 12px;



    width: 12px;



    float: left;



    margin-top: 9px;



    margin-right: 12px;



}



#footer a.social.face {



    background-image: url(img/iconFacebook.png)



}



#footer a.social.twitter {



    background-image: url(img/iconTwitter.png)



}



#footer a.social.mail {



    background-image: url(img/iconMail.png)



}



#footer a.social:hover {



    background-color: #00aeef



}



/*home*/



#sociallinks {



    position: relative;



    top: -80px;



    z-index: 50;



    margin-bottom: -80px;



}



#sociallinks .screen {



    height: 20px;



    text-align: left;



    padding-top: 30px;



    padding-bottom: 30px;



}



.socialButtons, .socialButtons div, .socialButtons iframe {



    display: inline-block !important;



    height: 20px;



    vertical-align: top !important;



    padding: 0 !important;



    margin: 0 !important;



    border: none !important;



    margin-right: 3px !important;



    line-height: 20px !important;



    position: relative !important;



    top: 0px !important;



    left: 0px !important;



    max-height: 20px !important;



}



.socialButtons.face, .socialButtons.face div, .socialButtons.face iframe {



    width: 150px !important



}



.socialButtons a {



    font-size: 0px



}



.fb-like.fb_iframe_widget span {



    position: relative !important;



    display: inline-block !important;



    vertical-align: top !important;



    height: 20px !important;



    text-align: justify !important;



}



span.fb_edge_comment_widget.fb_iframe_widget, span.fb_edge_comment_widget.fb_iframe_widget span, span.fb_edge_comment_widget.fb_iframe_widget  iframe {



    display: none !important



}



#splash {



    background-color: black;



    height: 100%;



    min-height: 370px;



    padding: 0px;



    overflow: hidden;



}



#splash .screen {



    padding: 0px



}



#splash .screenBigLogoContainer {



    height: 400px;



    width: 900px;



    margin-left: auto;



    margin-right: auto;



    position: relative;



    z-index: 20;



}

html.ie8 .screenBigLogoContainer {
display:block !important;
}



#splash .screenBigLogo {



    background-image: url(img/logoBig.png);



    background-repeat: no-repeat;



    background-position: center;



    position: absolute;



    height: 400px;



    width: 900px;



    margin-left: auto;



    margin-right: auto;



}



#splash .screenBckgImageContainer {



    background-color: black;



    /*background-image: url(img/logoEmptyBckg.png);;;



    background-repeat: repeat;



    background-position: center bottom;



    background-attachment: fixed;*/



    position: absolute;



    z-index: 1;



    /*: ;;



    margin-left: auto;



    margin-right: auto;*/



    min-height: 600px;



    height: 100%;



    width: 100%;



    text-align: center;



    top: 0;



    left: 0;



    overflow: hidden;



}



#splash .screenBckgImageContainer div {



    position: absolute;



    top: 0;



    left: 0;



    overflow: hidden;



}



#welcome {







}



#welcome .screen {



    padding-top: 100px



}



#aboutus {
}



.aboutUsLinks {
	width: 100%
}

.socialLinkFrame.aboutUs {
    width: 140px;
    height: 140px;
    padding: 12px;
	margin-right:12px;
}



a.aboutUsLinkMirko, a.aboutUsLinkEnrico, a.aboutUsLinkAndreas, a.aboutUsLinkLeonie, a.aboutUsLinkAwards {



    height: 140px;



    width: 140px;



    background-repeat: no-repeat;

    background-size: cover;

    background-position: top left;



    border-bottom: none;
	transition: background-image .25s ease-in-out;
    -moz-transition: background-image .25s ease-in-out;
    -webkit-transition: background-image .25s ease-in-out;




}

a.aboutUsLinkMirkoPre {
    background-image: url(img/iconMirkoA.png);
	display:none;
}

a.aboutUsLinkEnricoPre {
	background-image: url(img/iconEnricoA.png);
	display:none;
}

a.aboutUsLinkAndreasPre {
	background-image: url(img/iconAndreasA.png);
	display:none;
}

a.aboutUsLinkLeoniePre {
	background-image: url(img/iconLeonieA.png);
	display:none;
}

a.aboutUsLinkAwardsPre {
    background-image: url(img/iconAwardsA.png);
	display:none;
}

a.aboutUsLinkMirko {
    background-image: url(img/iconMirko.png);
}

a.aboutUsLinkEnrico {
	background-image: url(img/iconEnrico.png);
}

a.aboutUsLinkAndreas {
	background-image: url(img/iconAndreas.png);
}

a.aboutUsLinkLeonie {
	background-image: url(img/iconLeonie.png);
}

a.aboutUsLinkAwards {
    background-image: url(img/iconAwards.png);
}

a.aboutUsLinkMirko:hover, a.aboutUsLinkMirko.active {
    background-image: url(img/iconMirkoA.png);
}

a.aboutUsLinkEnrico:hover, a.aboutUsLinkEnrico.active {
	background-image: url(img/iconEnricoA.png);
}

a.aboutUsLinkAndreas:hover,a.aboutUsLinkAndreas.active {
	background-image: url(img/iconAndreasA.png);
}
a.aboutUsLinkLeonie:hover,a.aboutUsLinkLeonie.active {
	background-image: url(img/iconLeonieA.png);
}

a.aboutUsLinkAwards:hover,a.aboutUsLinkAwards.active {
    background-image: url(img/iconAwardsA.png);
}



a.aboutUsLinkMirko:hover, a.aboutUsLinkEnrico:hover,a.aboutUsLinkAndreas:hover, a.aboutUsLinkAwards:hover, a.aboutUsLinkLeonie:hover,
a.aboutUsLinkMirko.active, a.aboutUsLinkEnrico.active, a.aboutUsLinkAndreas.active, a.aboutUsLinkLeonie.active, a.aboutUsLinkAwards.active {
    border-bottom: none;
}



.aboutUsItems {



    display: none;



    padding: 12px 0px;



    color: white;



    margin-top: 12px;



}



.aboutUsItems p {



    margin-bottom: 0px



}



#awards {

	width:100%;

}



#awards .year{

	width:20%;

	

	padding-right:12px;

	text-align:right;

	font-family:'HelveticaNeueCn';

	font-weight:bold;

}



#awards td {

	padding-bottom:12px;

	padding-top:12px;

	border-bottom: 1px dashed #79BADB;

}



#pinchmedia {



    background-image: url(img/homeBckg1.jpg);



    background-position: -100px bottom !important;



    background-size: auto;



    background-color: #fefefe;



}



#pinchmedia .pictureBckgOverlay {



    background-image: url(img/linesBlackBckg.png)



}



#pinchmedia .screen {



    width: 400px;



    padding-left: 500px;



    text-align: right;



}



#pinchfilm {



    background-image: url(img/homeBckg2.jpg)



}



#pinchfilm .screen {



    width: 600px;



    padding-right: 300px;



}



#showreel {



    position: relative;



    background-color: black;



}



#showreel .pictureBckgOverlay {



    position: relative;



    top: 0;



    left: 0;



    z-index: 2;



}



#showreel .screen {



    width: 400px;



    padding-right: 500px;



}



#showreel .screenVideo {



    overflow: hidden;



    min-width: 900px;



    min-height: 500px;



    width: 100%;



    height: 100%;



    text-align: center;



    position: absolute;



    top: 0;



    left: 0;



    z-index: 1;



}



#showreel .screenVideo video {



    min-height: 100%;



    min-width: 100%;



}




.socialLinkFrame {
    width: 100px;
    height: 100px;
    padding: 12px;
    background-image: url(img/linesWhiteBckg.png);
    background-repeat: repeat;
    background-position: top left;
	margin-right:134px;
	float:left;
}


.socialLinkFrame.last {
	margin-right:0px;
}

a.socialLinkFacebook, a.socialLinkTwitter, a.socialLinkVimeo, a.socialLinkYoutube {



    height: 100px;



    width: 100px;



    background-repeat: no-repeat;



    background-position: top left;



    border-bottom: none;



}



a.socialLinkFacebook {



    background-image: url(img/linkFacebook.png)



}



a.socialLinkTwitter {



    background-image: url(img/linkTwitter.png)



}



a.socialLinkVimeo {



    background-image: url(img/linkVimeo.png)



}



a.socialLinkYoutube {



    background-image: url(img/linkYoutube.png)



}



a.socialLinkFacebook:hover, a.socialLinkTwitter:hover, a.socialLinkVimeo:hover, a.socialLinkYoutube:hover {



    border-bottom: none;



    background-color: #00aeef;



}



/* blog */



#menuContainer.blog {



    background-color: #fefefe;



    border-bottom: 1px dashed #ccc;



}



#menuContainer.blog .homeLink a {



    background-image: url(img/logoSmallTextBlack1.png)



}



#menuContainer.blog .homeLink a:hover {



    background-image: url(img/logoSmallTextBlack2.png)



}



#menuContainer.blog .menuLinks a {



    color: black



}



#menuContainer.blog .menuLinks a:hover {



    color: #00aeef



}



#navigationContainer.blog {



    background-color: #fefefe;



    border-bottom: 1px dashed #ddd;



}



#navigationContainer.blog a {



    color: black



}



#navigationContainer.blog a:hover {



    color: #00aeef



}



#sideMenuContainer.blog .link {



    background-color: transparent;



    /*width: 10px;;;



    height: 10px;*/



    color: black;



    border: 1px dashed black;



    background-color: white;



    transition: border-color .25s ease-in-out, color .25s ease-in-out;



    -moz-transition: border-color .25s ease-in-out, color .25s ease-in-out;



    -webkit-transition: border-color .25s ease-in-out, color .25s ease-in-out;



}



#sideMenuContainer.blog .link:hover {



    background-color: white;



    border: 1px dashed #00aeef;



    color: #00aeef;



}



#sideMenuContainer.blog .link.current {



    background-color: white;



    border: 1px dashed #e40079;



    color: #e40079;



}

#sideMenuContainer.blog .link a {
	color:black;
}

#sideMenuContainer.blog .link a:hover {
	color:#00aeef;
}



.screenContainer.blogpost {



    border-bottom: 1px dashed #ddd



}



.screenContainer.blogpost.light a, .screenContainer.blogpost.light h1 {



    color: black



}



.screenContainer.blogpost.light a:hover {



    color: #00aeef



}



#footerContainer.blog {



    background-color: #fefefe



}



#footerContainer.blog #footer {



    background-image: url(img/logoSmallBlack.png);



    color: black;



}



#footerContainer.blog #footer a {



    color: black



}



#footerContainer.blog #footer a:hover {



    color: #00aeef



}



#footerContainer.blog #footer a.social {



    width: 10px;



    height: 10px;



    border: 1px dashed black;



    transition: border-color .25s ease-in-out, background-image .25s ease-in-out;



    -moz-transition: border-color .25s ease-in-out, background-image .25s ease-in-out;



    -webkit-transition: border-color .25s ease-in-out, background-image .25s ease-in-out;



}



#footerContainer.blog #footer a.social.face {



    background-image: url(img/iconFacebookBlack1.png)



}



#footerContainer.blog #footer a.social.twitter {



    background-image: url(img/iconTwitterBlack1.png)



}



#footerContainer.blog #footer a.social.mail {



    background-image: url(img/iconMailBlack1.png)



}



#footerContainer.blog #footer a.social.face:hover {



    background-image: url(img/iconFacebookBlack2.png);



    background-color: transparent;



    border: 1px dashed #00aeef;



}



#footerContainer.blog #footer a.social.twitter:hover {



    background-image: url(img/iconTwitterBlack2.png);



    background-color: transparent;



    border: 1px dashed #00aeef;



}



#footerContainer.blog #footer a.social.mail:hover {



    background-image: url(img/iconMailBlack2.png);



    background-color: transparent;



    border: 1px dashed #00aeef;



}



/*projects*/



div.projects {



    width: 500px;



    padding-right: 400px;



}



div.screenProjectsElements {



    position: relative



}



div.projectsElements {



    width: 814px;



    min-height: 74px;



    margin-left: 86px;



}



.projectsIcons {



    width: 50px;



    height: 50px;



    padding: 12px;



    background-image: url(img/linesWhiteBckg.png);



    background-repeat: repeat;



    background-position: top left;



    position: absolute;



    float: left;



}



.hyperIcon, .galleryIcon, .videoIcon {



    width: 50px;



    height: 50px;



    background-position: center center;



    background-repeat: no-repeat;



    margin-right: 25px;



    transition: background-color .25s ease-in-out, color .25s ease-in-out;



    -moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;



    -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;



}



.hyperIcon {



    background-image: url(img/iconHyperlink.png)



}



.galleryIcon {



    background-image: url(img/iconGallery.png)



}



.videoIcon {



    background-image: url(img/iconTrailer.png)



}



a.projects {



    font-size: 52px;



    line-height: 74px;



    vertical-align: middle;



width:812px;

overflow:hidden;

height:74px;

display:block;



}



.projectStatus {



font-size:25px;



color:#e40079;



display:block;



}



a .projectStatus {



font-size:12px;



color:#e40079;



display:block;



}



.projectVideo iframe{

	width: 812px !important;

	height: 456px !important;

}

.screenContainer.dark.project {
	border-bottom: 1px dashed #1e1e1e;
}



/* project listing */



.screen.projectListing {



    padding: 0



}



.projectListingItem {



    width: 192px;



    height: 192px;



    padding: 12px;



    float: left;



    overflow: hidden;



    background-image: url(img/linesWhiteBckg.png);



    margin-right: 12px;



    margin-bottom: 12px;



}



.projectListingItem.rightmost {



    margin-right: 0px;



    clear: right;



}



.projectListingItem .image {



    position: relative;



    width: 192px;



    height: 192px;



    background-position: center center;



    background-size: cover;
	cursor:pointer;
	background-color:black;


}

html.ie8 .projectListingItem .image {
	background-image:none !important;
}

.projectListingItem .image a {



    position: absolute;



    left: 0px;



    bottom: 0px;



    background-color:black;



    background-position: -6px bottom;



    padding: 2px 6px;



    cursor: pointer;



    text-transform: uppercase;



    font-size: 17px;



}



.projectListingLikns {



    width: 50px;



    height: 50px;



    /*padding: 12px;;



    background-image: url(img/linesBlackBckg.png);*/



    background-repeat: repeat;



    background-position: top left;



    float: left;



    margin-right: 12px;



}



.scrollToTop, .moveToArticle {



    width: 50px;



    height: 50px;



    background-position: center center;



    background-repeat: no-repeat;



    margin-right: 25px;



    transition: background-color .25s ease-in-out, color .25s ease-in-out;



    -moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;



    -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;



    cursor: pointer;



}



.dark .scrollToTop {



    background-image: url(img/iconTopBlue.png)



}



.blue .scrollToTop {



    background-image: url(img/iconTopBlack.png)



}



.dark .moveToArticle {



    background-image: url(img/iconForwardBlue.png)



}



.blue .moveToArticle {



    background-image: url(img/iconForwardBlack.png)



}



.dark .scrollToTop:hover, .dark .moveToArticle:hover, .blue .scrollToTop:hover, .blue .moveToArticle:hover {



    background-color: white



}



/* showreel presentation page*/



#showreelPresentation {




    background-position: top top;



    background-size: cover;



}



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



    



}



/* =iPad & iPhone */



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



    html {



        font-size: 100%;



        overflow-y: scroll;



        -webkit-overflow-scrolling: touch;



        -webkit-tap-highlight-color: rgba(0,0,0,0);



        -webkit-text-size-adjust: 100%;



        -ms-text-size-adjust: 100%;



    }



}