.views-slideshow-controls-top {
width:none;
margin-top:7px;
margin-right: 100px;
}

#backtohome {
 margin-top:10px;
 margin-left:20px;
 float:left;

 *margin-left:30px;
 *margin-top:18px;
}
strong
{
  font-weight: bold;
}
em
{
  font-style: italic;
}

*,*:hover, *:active, *:link, *:visited {
  outline:1px white white;
  text-decoration:none;
}
body {
font-size:12px;
font-family:arial,verdana;
}

a {
color:black;
text-decoration:none;
}

*:link, *:visited {
    text-decoration: none;
}

ol, ul, dir, menu, dd {
    margin-left: 0px;
}


#page {
    margin: 0px auto;
 }

#header {
    position: fixed;
    width: 100%;
    height: 70px;
    background: white;
    z-index: 10;
}

#header-left {
  position: absolute;
  top:6%;
  left:2%;
  z-index:21;
  top:20px;
  left:20px;

  width:70px;
}
#header-center {
    position: absolute;
    left: 50%;
    margin-left: -66px;
}
#header-right {
  position:absolute;
  top:6%;
  right:2%;
  top:20px;
  right:20px;
}
 #logo {
    position: absolute;
    top: 20px;
    z-index: 20;
}

#content-left {
float:left;
}

#content-right {
float:right;
}

#contact {
    position:fixed;
    top:50%;
    right:3%;
    text-align:right;
    right:20px;
    width:130px;
    z-index:20;
}
#contact a {
    text-decoration:none;
    font-weight:bold;
    color:black;
}
#contact #credits a {
   font-weight:normal;
}
#contact .part1 {
}
#contact .part2 {
margin-top:10px;
}
#container {
margin-top:0px;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}

a, p, ul, ol, li, img, span, strong, em {
    line-height: 1.3em;
}

.pau-title {
 margin-top:10px;
 margin-bottom:0px;
 text-transform: uppercase;
 margin-top:15px;
 margin-bottom:10px;

}

.top-menu-element-works a span{
  background-image:url("images/work_w.png");
  height:16px;
  width:74px;
  float:left;
  clear:both;
}

.top-menu-element-works  a:hover span{
  background-image:url("images/work_b.png");
  height:16px;
  width:74px;
}

.top-menu-element-trabajo a span{
  background-image:url("images/trabajo_w.png");
  height:16px;
  width:74px;
  float:left;
  clear:both;
}

.top-menu-element-trabajo  a:hover span{
  background-image:url("images/trabajo_b.png");
  height:16px;
  width:74px;
}






.top-menu-element-estudio a span {
  background-image:url("images/estudio_w.png");
  height:16px;
  width:69px;
  float:right;
  clear:both;
}

.top-menu-element-estudio a:hover span {
  background-image:url("images/estudio_b.png");
  height:16px;
  width:69px;
}
.top-menu-element-office a span {
  background-image:url("images/office_w.png");
  height:16px;
  width:69px;
  float:right;
  clear:both;
}

.top-menu-element-office a:hover span {
  background-image:url("images/office_b.png");
  height:16px;
  width:69px;
}


#download-portfolio {
  position:fixed;
  top:50%;
  left:3%;
  line-height:0.1em;
  left:20px;
  width:65px;
  z-index:20;
}
#download-portfolio a {
 text-decoration:none;
 font-weight:bold;
 color:black;
}


.twitter {
  background-image:url("images/twitter.png");
  width:16px;
  height:16px;
  float:left;
  margin-top:10px;
}
.facebook {
  background-image:url("images/facebook.png");
  width:16px;
  height:16px;
  float:left;
  margin-left:3px;
  margin-top:10px;
}

.view-view-work td {
 width:157px;
 padding-left:10px;
 font-weight:bold;
}

.page-trabajo  #content-center {
    margin: 10% 5%;
    width: auto;
    padding: 0 7.5%;
    box-sizing: border-box;
}

#content-center {
    margin: 10% 5%;
    width: 75%;
    /* margin: 143px auto; */
    /* width: 880px; */
    padding: 0px 7.5%;
}

.node-50 #content-center {
    max-width: 900px;
    margin: 100px auto;
}

#content-center .panel-3col {

}
#node-5 {
    text-align: center;
    margin: 0 auto;
}
#content-center .panel-3col-33 {
    text-align: center;
    margin: 0 auto;
}
.panel-3col-33 {
    display: inline-block;
}

.panel-3col-33 .panel-panel {

    width: 33%;
    width: 300px;
    box-sizing: border-box;
    margin: 0px 20px;
    display: inline-block;
    float: none;
    text-align: left;
}

/* el problema del centrat en dos columnes es degut a quan es fa estret i una col baixa abaix, queda massa a l'esquerra. Per tant es millor fixar-ho */

.node-6 #content-center{
  position:relative;
  margin: 12% auto;
  width:840px;
}

#box-wrapper {
 margin:0 auto;
 width:1000px;
}
.box {
width:200px;
height:200px;
background-color:red;
float:left;
}

/* ------------------------------- Panels -------------------------*/
.pane-title {
   font-weight:bold;
   margin-top:60px;
}

.pane-content {
 margin-top:15px;
}
/*------------------------------ Work ------------------------------*/
.view-view-works {
 clear:both;
 float:left;
}
.view-view-works ul,
.view-view-works-admin ul {
  float:left;
  text-align:center;
  margin: 0 10px;
}

.view-view-works ul li,
.view-view-works-admin ul li {
  height:320px;
  width:33%;
    width:300px;
  box-sizing: border-box;
    margin:0px 20px;
    display: inline-block;
}




.view-view-works .year,
.view-view-works-admin .year {
  clear:both;
  font-weight:bold;
  float:left;
  margin:30px 0px 10px;
}
.view-view-works .project_id,
.view-view-works-admin .project_id {
 clear:both;
 float:left;
 font-weight:bold;
}
.view-view-works .title,
.view-view-works-admin .title {
  clear:both;
  float:left;
  font-weight:bold;
}

.view-view-works-admin h3.title {
  clear:both;
  width:100%;
  margin-top:50px;
  float:left;
  font-size:20px;

}

.view-view-works .subtitle,
.view-view-works-admin .subtitle {
  clear:both;
  float:left;
  font-weight:bold;
  margin-bottom:10px;
}
.view-view-works .image,
.view-view-works-admin .image {
clear:both;
float:left;
}

.view-view-works-admin .edit-work,
.view-view-works-admin .delete-work,
.view-view-works-admin .language-work
 {
clear:both;
float:left;

}
/*-----------------------------Work Images SlideShow Lightbox ----------------*/



/* ------ Admin Work -------*/
.add-work {
 float:left;
 margin-left:6px;
 margin-top:10px;
}



/* -------------------------Gesti�� canvi de color -------------------------*/

.myrelativebox {
/*---- per tal d'evitar que el contingut quede a sota --*/
position:relative;
height:150px;
}

.view-view-works .image-bw,
.myrelativebox .image-bw   {
  position:absolute;
  z-index:1;
  float:left;

}

.view-view-works .image-bw {

}
.view-view-works .image-color,
.myrelativebox .image-color {
  position:absolute;
  float:left;
  z-index:0;
}




.view-view-works .boximages,
.myrelativebox .boximages{
   clear:both;
   float:left;
}



/*****************************/


.views_slideshow_slide .field-content{
 cursor: pointer;
 margin-left:100px;
 margin-top: 30px;
 margin-right:100px;
 zzwidth:630px;
 zzheight:470px;
 text-align:justify;

}



.zzviews_slideshow_slide .field-content .scroll {
  overflow-x:hidden;
  overflow-y:scroll;
}

.views_slideshow_singleframe_no_display,
.views_slideshow_singleframe_hidden,
.views_slideshow_singleframe_controls,
.views_slideshow_singleframe_image_count {
    text-align: center;
}
.views_slideshow_singleframe_controls {
 margin-top:15px;
}

.views-slideshow-controls-bottom {
margin:30px 65px 0px 10px;
float:right;
}
.activeSlide {
font-weight:bold;
}

.views_slideshow_pagerNumbered {
float:right;
margin-top:10px;
display:inline;
    text-align: right;
}

#imageData {
 display:none;
}



/* over 2000 */
@media only screen and (min-width: 2000px) {

    .page-trabajo #content-center {
        width: 60%;
        margin: 5% auto;
    }
    #content-center {
        width: 60%;
        margin: 5% auto;
    }
}

/* under 960 */
@media only screen and (max-width: 960px) {

    #content-left{
        display: none;
    }
    #header-center {
        position: absolute;
        left: 50%;
        margin-left: -61px;
    }
    .content-center {
        min-height: 400px;
        display: block;
    }

    #content-center {
        width: 100%;
        float:left;
        margin: 0 ;
        padding: 0;
        box-sizing: border-box;
        margin-top:100px;

    }
    #content-right {
        position: relative;
        float: left;
        margin-left: 47px;
        margin-top:100px;
    }

    #content-right #contact{
        position: relative;
        text-align: left;
    }

    #views_slideshow_singleframe_main_view_slideshow_work_images-page_1 {
        float: left;
    }

    .node-50 #content-center {
        padding: 0 27px;
    }

    .views-slideshow-controls-top {
        margin-top: 15px;
        margin: 15px 25px 25px 25px;
    }

    .views_slideshow_slide .field-content {
        margin: 25px;
    }

    .panel-col {
        width: 100%;
    }

    .views_slideshow_singleframe_pager div {
        display:inline-block
    }

    .page-trabajo  #content-center {
        margin:100px 0 0;
        padding:0;
        width:100%;
    }

    .view-view-works {
        width: 100%;
    }

    .view-view-works ul, .view-view-works-admin ul {
        width: 100%;
    }
    .view-view-works ul li, .view-view-works-admin ul li{
        margin:0 auto;
        display: block;
    }
}

/* under 500 */
@media only screen and (max-width: 500px) {

}

@media only screen and (max-width: 350px) {
    .page-trabajo #content-center{
        overflow: hidden;
    }

    .page-trabajo ul li img {
        max-width:100%;
    }
    .view-view-works ul,
    .view-view-works-admin ul {
        margin:0;
    }
    .view-view-works .year,
    .view-view-works-admin .year,
    .view-view-works .title,
    .view-view-works-admin .title,
    .view-view-works .subtitle,
    .view-view-works-admin .subtitle {
        margin-left: 5px;
    }

    .panel-3col-33 .panel-col-first .inside {
        margin:0;
    }
}

.views_slideshow_singleframe_teaser_section,
.views_slideshow_singleframe_slide {
    width: 100% !important;
    min-height:360px;
}
#views_slideshow_singleframe_main_view_slideshow_work_images-page_1 {
    width: 100% !important;
}

#views_slideshow_singleframe_main_view_slideshow_work_images-page_1 img {
    width: 100%;
}