/* HSD PBSA MAKD Masterstudio – 2014-09-23 – by Albert Naasner (albert@naasner.com}

/* reset */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
legend { display: none;; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ul { list-style: none; }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
a { text-decoration: none; }
strong { font-weight: bold; }
em { font-style: italic; }
* a { position: relative; }
a img { border: none; }
* { outline: none; }
form { display: inline; }
input:focus { outline: 0 }





/* fonts */

@font-face {
font-weight: normal;
font-style: normal;
font-family: 'hsdsansregular';
src: url('http://masterstudio.info/assets/styles/HSDSans-Regular.eot');
src: url('http://masterstudio.info/assets/styles/HSDSans-Regular.eot?#iefix') format('embedded-opentype'), url('http://masterstudio.info/assets/styles/HSDSans-Regular.woff') format('woff'), url('http://masterstudio.info/assets/styles/HSDSans-Regular.ttf') format('truetype'), url('http://masterstudio.info/assets/styles/HSDSans-Regular.svg#hsdsansregular') format('svg');
}

html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust:100%;
height:100%; 
}

html.loading {overflow:hidden;}

body {
font-size: 17px; font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.25;
}

#main {position:relative; width:100%; display:block;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
html.loading #main {opacity:0;}

#main .images {position:relative; width:100%; display:block;}
#main .images img {position:relative; width:100%; height:auto; display:block; background:#000;}

#main .text {position:relative; width:100%; display:block;}
#main .text .container {position:relative; display:block; padding:20px 3%; margin:-31px 0 0 15%; background:#fff;}
#main .text .container.caption {margin:0 0 0 15%;}
#main .text .container.no-image {margin:0 0 0 15%; padding:0 3% 20px 3%;}
#main .text .container h1 {font-weight:bold; font-size:130%;}
#main .text .container h2 {font-size:130%;}
#main .text .container h3 {font-weight:bold; padding:20px 0;}
#main .text .container h4 {font-weight:bold;}
#main .text .container p, #main .text .container video, #main .text .container iframe, #main .text .container embed, #main .text .container obejct, #main .text .container img {padding:0 0 20px 0;}
#main .text .container img {width:100%; height:auto;}
#main .text .container a {color:#888;}
#main .text .container a:hover {color:#000;}
#main .text .container a h1, #main .text .container a h2, #main .text .container a h3, #main .text .container a h4 {color:#000;}
#main .text .container a:hover h1, #main .text .container a:hover h2, #main .text .container a:hover h3, #main .text .container a:hover h4 {color:#888;}
#main .text .container .max {max-width:100%; width:650px; padding:0 0 80px 0;}
#main .text .container.caption .max {padding:0;}
#main .text .container .max .video-container {position:relative; width:100%; height:0; padding-bottom:56%;}
#main .text .container .max .video-container video, #main .text .container .max .video-container iframe, #main .text .container .max .video-container embed, #main .text .container .max .video-container object {position:absolute; top:0; left:0; width:100%; height:100%; display:block; border-width:0;}
#main .text .container.profile-link .max {padding:0 0 40px 0;}
#main .text .container.profile-link a {color:#000;}
#main .text .container.profile-link a:hover {color:#888;}
#main .text .container.profile-link a img {width:auto; height:90px; float:left; padding:0 10px 0 0;}
#main .text .container.profile-link a:hover img {opacity:.5;}

#stripe {position:absolute; z-index:999; top:0; right:3%; left:3%; height:25px; background:rgba(230,0,40,1);
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
#stripe h1 {font-family:'hsdsansregular', Arial, Helvetica, sans-serif; font-size:13px; line-height:1; text-transform:capitalize; margin:0 0 0 1%; padding:6px 0 0 0;}
#stripe h1 a span {display:block; position:relative; float:left; padding:0 8px 0 0; color:#000;}
#stripe h1 a .white {color:#fff; padding:0 9px 0 0;}
#stripe .links {display:block; position:absolute; top:0; right:200px;}
#stripe .links a {display:block; float:left; font-size:14px; line-height:1; padding:4px 20px 0 0; color:#000;}
#stripe .search-field {position:absolute; top:0; right:0; display:block; float:right; background:rgba(230,230,230,1); padding:0 0 0 5px;}
#stripe .search-field input[type="text"] {font-family:Arial, Helvetica, sans-serif; padding:0 0 0 25px; font-size:14px; line-height:1; display:block; margin:0; border:none; background:none; appearance:none; box-shadow:none; border-radius:none; height:25px; width:170px; background-size:15px auto; background-position:left; background-repeat:no-repeat; background-image:url('http://masterstudio.info/assets/images/search.png');
-webkit-transition:all .1s ease-out;
-moz-transition:all .1s ease-out;
-o-transition:all .1s ease-out;
transition:all .1s ease-out;
}
.search-focus #stripe .search-field input[type="text"] {outline:none; width:320px; height:40px; font-size:30px;}
::-webkit-input-placeholder {color:#000;}
:-moz-placeholder {color:#000; opacity:1;}
::-moz-placeholder {color:#000; opacity:1;}
:-ms-input-placeholder {color:#000;}
html.loading #stripe, html.login #stripe {top:-21px;}
html.loading #stripe h1, html.loading #stripe .search-field, html.loading #stripe .links {opacity:0;}
html.login #stripe h1, html.login #stripe .search-field, html.login #stripe .links {opacity:0;}

#menu {position:relative; width:100%; display:block; margin:25px 0 0 0; padding:75px 0 110px 0;}
#menu .container {padding:0 4% 0 6%;}
#menu a.menu-link, #menu span.arr {font-size:200%; line-height:1;}
#menu a.menu-link {color:#bbb;}
#menu a.menu-link:hover {color:#000;}
#menu a.menu-link.selected {font-family:'hsdsansregular', Arial, Helvetica, sans-serif; font-size:180%; text-transform:capitalize; color:#000;}
#menu a.menu-link.selected:hover {color:#888;}
#menu a.menu-link.title {font-family:'hsdsansregular', Arial, Helvetica, sans-serif; font-size:180%; text-transform:capitalize; color:#000;}
#menu a.menu-link.title:before {content:'→'; font-size:110%; color:#aaa;}
#menu a.menu-link.title:hover {color:#888;}
#menu .masterstudio:after, #menu .info:after {content:'. '; font-size:200%; color:#888;}
#menu .projects:after, #menu .people:after {content:', '; font-size:200%; color:#888;}
#menu .social {font-size:13px; line-height:2;}
#menu .social a {color:#999;}
#menu .social a:hover {color:#000;}

#list {position:relative; width:100%; display:block;}
#list table {width:100%;}
#list table td {padding:20px 15px; border-bottom:1px solid #ddd; vertical-align:top;}
#list table td a {color:#000;}
#list table td a:hover {color:#888;}
#list table td:nth-child(1) {padding:20px 15px 20px 3.1%;}
#list table td:nth-last-child(1) {text-align:right; padding:20px 3.1% 20px 15px;} 
#list table th {font-size:13px; line-height:1; color:#888; padding:10px 15px; border-bottom:1px solid #ddd;}
#list table th:nth-child(1) {padding:10px 15px 10px 3.1%;}
#list table th:nth-last-child(1) {text-align:right; padding:10px 3.1% 10px 15px;}
#list table .tags {display:none;}
#list table tr.active, #list table tr.active a {color:#888;}
#list table td.alt {border-bottom:1px solid #888;}
#list table td.alt a {}
.filter-table {padding:0 50px 50px 3%;}
.filter-table input[type="tablesearch"] {font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:1; display:block; position:relative; float:left; margin:0 20px 20px 0; border:1px solid #fff; background:rgba(230,230,230,1); appearance:none; box-shadow:none; width:300px; height:40px; padding:0 10px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.filter-table input[type="tablesearch"]:focus {border:1px solid red; color:rgba(230,0,40,1); background:#fff;}
.filter-table .quick {position:relative; display:block; float:left; padding:2px 5px; margin:6px 10px 5px 0; color:#000; border:1px solid #fff;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.filter-table .quick:hover {color:rgba(230,0,40,1);}
.filter-table .quick.selected {color:rgba(230,0,40,1); border:1px solid red;}

#people {position:relative; display:block; padding:0 3%; margin:0; background:#fff;}
#people .person {float:left; min-width:200px; width:15%; padding:0 20px 40px 0;}
#people .person h4 {font-weight:bold;}
#people .person a {color:#888;}
#people .person a:hover {color:#000;}

#home .item {position:relative; display:block; float:left; margin:0; width:33.333333%;}
#home .item img {position:relative; display:block; float:left; width:100%; height:auto; background:rgba(240,240,240,1);}
#home .item .caption {padding:15px 9% 35px 9%; position:relative; display:block; float:left;  clear:both; color:#000;}
#home .item .caption:hover {color:#888;}
#home .item .caption h4 {font-weight:bold;}
#home .item .shorttext {position:absolute; display:block; top:20px; padding:0 9%; margin:0;}
#home .item:hover {background:rgba(230,0,40,1); color:#fff;}
#home .item:hover a {color:#fff;}
#home .item:hover img {opacity:.1;}

#search-results {position:relative; display:block; padding:0 3%; margin:0 0 0 15%;}
#search-results .result {max-width:100%; width:600px; padding:20px 0 40px 0; clear:both;}
#search-results .result img {position:relative; display:block; float:left; width:130px; margin:0 20px 0 0; height:auto;}
#search-results .result h1 {font-size:130%; padding:6px 0 0 0;}
#search-results .result h1 a {font-weight:bold; color:#000;}
#search-results .result h1 a:hover {color:#888;}
#search-results .result.no-image {margin:0 0 0 150px; width:450px; padding:20px 0;}

#login {position:relative; width:100%; display:block; margin:25px 0 0 0; padding:75px 0 110px 0;}
#login .container {padding:0 4% 0 6%;}
#login .container h4 {font-weight:bold; padding:0 0 0 2px;}
#login .container input[type="text"], #login .container input[type="password"] {font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:1; display:block; position:relative; float:left; margin:0 20px 5px 0; border:1px solid #fff; background:none; background-color:rgba(240,240,240,1) !important; appearance:none; box-shadow:none; width:250px; height:40px; padding:0 10px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#login .container input[type="text"]:focus, #login .container input[type="password"]:focus {border:1px solid red; color:rgba(230,0,40,1); background:#fff;}
#login .container input[type="submit"] {cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#000; line-height:1; display:block; position:relative; float:left; margin:0 20px 5px 0; border:1px solid #fff; background:rgba(230,230,230,1); appearance:none; box-shadow:none; width:auto; height:40px; padding:0 10px;
-webkit-border-radius:px;
-moz-border-radius:4px;
border-radius:4px;
}
#login .container input[type="submit"]:hover {border:1px solid rgba(230,0,40,1); color:#fff; background:rgba(230,0,40,1);}

#footer {position:relative; display:block; width:100%; /*background:rgba(69,0,12,1); color:rgba(255,255,255,.5);*/ font-size:14px;}
#footer p {padding:40px 3%;}

a.big-button {display:block; margin:100px 18%; padding:15px 3%; font-size:150%; line-height:1; border:1px solid #fff; background:rgba(230,230,230,1); width:auto; max-width:82%; text-align:center; color:#000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
a.big-button:hover {border:1px solid rgba(230,0,40,1); background:#fff; color:rgba(230,0,40,1);}

.nowrap {white-space:nowrap;}

@media only screen and (max-width: 1100px) {
#home .item {width:50%;}
#home .item .caption {padding:15px 6% 35px 6%;}

#list table td:nth-child(3), #list table th:nth-child(3) {display: none;}
.filter-table .quick {clear:both;} 
}

@media only screen and (max-width: 800px) {
#stripe {right:0; left:0;}

#main .text .container {margin:-31px 0 0 0;}
#main .text .container.caption {margin:0;}
#main .text .container.no-image {margin:0;}

#search-results {margin:0;}

#menu .container {padding:0 3%;}
#menu a.menu-link, #menu span.arr {font-size:150%; line-height:1.1;}
#menu a.menu-link.selected {font-size:145%;}
#menu a.menu-link.title {font-size:145%;}
#menu .masterstudio:after, #menu .info:after {font-size:150%;}
#menu .projects:after, #menu .people:after {font-size:150%;}

#list table td:nth-child(3), #list table th:nth-child(3), #list table td:nth-child(4), #list table th:nth-child(4) {display: none;}

a.big-button {display:block; margin:100px 3%; max-width:94%;}
}

@media only screen and (max-width: 550px) {
html.search-focus #main {padding-top:25px;}

#home .item {width:100%;}
#home .item .caption {padding:15px 3% 35px 3%;}

#stripe {height:75px; background:#fff;}
#stripe h1 {position:absolute; top:0; right:0; left:0; height:25px; text-align:center; font-size:90%; padding:0; margin:0; width:100%; background:rgba(230,0,40,1); display:block;}
#stripe h1 a span {float:none; padding:7px 12px 7px 0; display:inline-block;}
#stripe .links {top:55px; right:3%; left:3%;
-webkit-transition:all .1s ease-out;
-moz-transition:all .1s ease-out;
-o-transition:all .1s ease-out;
transition:all .1s ease-out;
}
#stripe .links a {float:right; padding:5px 10px; border:1px solid rgba(230,0,40,1); color:rgba(230,0,40,1); background:#fff;
-webkit-border-radius:px;
-moz-border-radius:4px;
border-radius:4px;
}
#stripe .links a:hover {background:rgba(230,0,40,1); color:#fff;}
html.search-focus .links {margin-top:25px;}

#stripe .search-field {top:25px; left:0; padding:0 0 0 10px}
#stripe .search-field input[type="text"] {cursor:pointer;}
html.search-focus #stripe .search-field input[type="text"] {cursor:auto; outline:none; height:50px; font-size:25px;}
html.loading #stripe, html.login #stripe {top:-70px; background:rgba(230,0,40,1);}

#menu {padding:0 0 30px 0; margin:80px 0 0 0; color:#000;}
#menu .container {padding:0;}
#menu a.menu-link, #menu span.arr {font-size:130%; color:#888;}
#menu a.menu-link.selected {font-size:130%; font-family: Arial, Helvetica, sans-serif; font-weight:bold;}
#menu a.menu-link.title {display:none;}
#menu .masterstudio:after, #menu .info:after {content:''; display:none;}
#menu .projects:after, #menu .people:after {content:''; display:none;}
#menu .social {display:none; padding:30px 3% 10px 3%; clear:both;}

#menu .masterstudio, #menu .projects, #menu .people, #menu .info {padding:0 3% 5px 3%; clear:both; display:block;}

#list table td:nth-child(3), #list table th:nth-child(3), #list table td:nth-child(4), #list table th:nth-child(4), #list table td:nth-child(2), #list table th:nth-child(2) {display: none;}
.filter-table {padding:0 0 50px 3%;}
.filter-table input[type="tablesearch"] {display:block; width:94%; height:36px; padding:0 0 0 3%; margin:0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
}






.spinner {display:none; position:fixed; z-index:100; top:40%; right:auto; bottom:auto; left:50%;
  width: 40px;
  height: 40px;
  margin:-20px 0 0 -20px;

  border-radius: 100%;  
  -webkit-animation: scaleout 1s infinite ease-in-out;
  animation: scaleout 1s infinite ease-in-out;
}
.loading .spinner {display:block;}

@-webkit-keyframes ui-spinner-rotate-right {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(180deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes ui-spinner-rotate-left {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes ui-spinner-rotate-right {
  0% {
    -moz-transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(180deg);
  }

  50% {
    -moz-transform: rotate(180deg);
  }

  75% {
    -moz-transform: rotate(360deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@-moz-keyframes ui-spinner-rotate-left {
  0% {
    -moz-transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(0deg);
  }

  50% {
    -moz-transform: rotate(180deg);
  }

  75% {
    -moz-transform: rotate(180deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@keyframes ui-spinner-rotate-right {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes ui-spinner-rotate-left {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ui-spinner {
  position: relative;
  border-radius: 100%;
}
.ui-spinner .side {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.ui-spinner .side .fill {
  border-radius: 999px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}
.ui-spinner .side-left {
  left: 0;
}
.ui-spinner .side-left .fill {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation-name: ui-spinner-rotate-left;
  -moz-animation-name: ui-spinner-rotate-left;
  -ms-animation-name: ui-spinner-rotate-left;
  -o-animation-name: ui-spinner-rotate-left;
  animation-name: ui-spinner-rotate-left;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.ui-spinner .side-right {
  left: 50%;
}
.ui-spinner .side-right .fill {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-animation-name: ui-spinner-rotate-right;
  -moz-animation-name: ui-spinner-rotate-right;
  -ms-animation-name: ui-spinner-rotate-right;
  -o-animation-name: ui-spinner-rotate-right;
  animation-name: ui-spinner-rotate-right;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.ui-spinner {
  width: 46px;
  height: 46px;
}
.ui-spinner .side .fill {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  opacity: 0.8;
}
.ui-spinner:after {
  content: "";
  background: transparent;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  top: 7px;
  left: 7px;
  display: block;
}

.hole .ui-spinner {
  background:rgba(230,230,230,1);
  width: 40px;
  height: 40px;
}
.hole .ui-spinner .side .fill {
  background:rgba(230,0,40,1);
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  opacity:1;
}
.hole .ui-spinner:after {
  content: "";
  background:#fff;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  top: 6px;
  left: 6px;
  display: block;
}