* {
    transition: all 0.5s ease;
}

body {
  font-family:  Lato, Arial, sans-serif;  
  font-size: 16px;
  color: #444;
  font-weight: 400;
}

hr { display: none; }

header.navbar {
	margin-bottom: 4em;
}

h2, .h2 {
    font-size: 24px;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: darkorange;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.1;
}

article h2,
article .h2 {
    font-size: 2em;
    margin-bottom: 1em;
    margin-top: 2em;
}

.btn-primary {
    background-color: darkorange;
    border-color: darkorange;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-color: black;
    border-color: black;
}

.titol-pagina {
    font-size: 3em;
}

li {
    list-style: none outside none;
}

a {
	color: darkorange;
}

a:hover, a:focus, a:active {
	color: black;
}

.navbar-toggle .icon-bar {
    background-color: black;
    border-radius: 1px;
    display: block;
    height: 2px;
    width: 22px;
}

.lead,
.text-benvinguda {
    clear: both;
    font: 300 42px/1.15em Lato,"Neue Helvetica",Arial,sans-serif;
    max-width: 1120px;
    color: #888;
}

.text-benvinguda {
    margin-top: 0;
    margin-bottom: 40px;
}

.nav-menu > li > a {
    line-height: 1.25;
    margin-top: 5px;
}

.nav-menu li a {
    display: block;
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: lowercase;
}

.nav-menu > li {
    margin-left: 0.25em;
    padding-bottom: 3px;
}

.nav-menu > li,
.nav-menu > li a {
	color: #999;
}

.nav-menu li {
    display: inline-block;
    position: relative;
}

ul.nav-menu, div.nav-menu > ul {
    margin: 0;
    padding: 0;
}
.nav-menu .actiu a { font-weight: bold }

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

.nav-menu li a {
    font-family: Lato, "Neue Helvetica", Arial, sans-serif;
    font-size: 16px;
}

.menu-item.entypo {
    font-size: 60px;
    text-align: center;
}

.menu-item.entypo {
    font-size: 60px;
    text-align: center;
}
.menu-item.actiu a { font-weight: bold }


.interior-projecte2 .navbar {
    margin-top: 1em;
}

.interior-projecte2 .navbar-nav > li > a {
    padding-right: 0;   
}

.project-slides .img-responsive {
    display: block;
    height: auto;
/*    margin: 0 -25px;
    max-width: 106%;*/
}

nav ul, nav ol {
    list-style: none outside none;
}

#menu-main-menu {
  margin-top: 36px;
}

.navbar-brand {
    display: block;
    height: auto;
}

.site-logo {
    width: 210px;
	max-width: 100%;
	outline: 0 none;
	vertical-align: 0;
}

.site-logo-pt {
    width: 300px;
    max-width: 100%;
    outline: 0 none;
    vertical-align: 0;
}

.nav > li:hover,
.nav > li:hover a,
.nav > li > a:hover,
.nav > li > a:focus {
	background-color: transparent;
	color: darkorange;
	text-decoration: none;
	cursor: pointer;
}

.pagination > li > a, .pagination > li > span {
	color: darkorange;
}

.pager li {
    font-size: 14px;
}

#menuet {
    background-color: white;
    visibility: hidden;    
    opacity: 0;
}

#menuet.affix {
    visibility: visible;
    background-color: white;    
    transition: all 0.5s ease;
    opacity: 1;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: darkorange;
    border-color: darkorange;
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: darkorange;
}

/* Portfoli - Isotope */

#options {
    margin: 0 auto;
    padding-bottom: 15px;
    width: 100%;
}

#options ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#options li {
    float: left;
    margin: 0 0 3px 5px;
}

#options li a.selected {
    background-color: darkorange;
    border-radius: 12px;
    color: #fff;
}

#options li a:hover {
    background-color: darkorange;
    border-radius: 12px;
    color: #fff;
}

#options li a:active,
#options li a:focus,
#options li a:hover {
	text-decoration: none;
	outline: 0 none;
}

#options li a {
    color: #202020;
    display: block;
    font-family: Lato, "Neue Helvetica", Arial, sans-serif;
    font-size: 80%;
    font-weight: normal;
    line-height: 1.125;
    padding: 0.35em 0.9em;
}

.element {
    background-color: #888;
    color: #222;
    cursor: pointer;
    float: left;
    height: 220px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    position: relative;
    width: 220px;
    word-wrap: break-word;
}

.isotope, .isotope .isotope-item {
    transition-duration: 0.8s;
}

/**
 * Contacte
 * ----------------------------------------------------------------------------
 */

 address abbr[title] {
    border-bottom: 0;
    width: 25px;
    display: inline-block;
 }

/**
 * 3.1 Thumbnails
 * ----------------------------------------------------------------------------
 */

.element { cursor: pointer; float: left; overflow: hidden; position: relative; background-color: darkorange; color: #222; width: 220px; height: 220px; margin: 0 5px 5px 0; word-wrap: break-word; }

.element:hover img {
	display: none;
}

.thumbnail-link { background-color: rgba(255, 255, 255, 0.01); width: 100%; height: 100%; position: absolute; opacity: 0; z-index: 5; }
.thumbnail-project-link { background-color: rgba(255, 255, 255, 0.01); width: 100%; height: 100%; position: absolute; text-indent: -9999px; z-index: 3; }

.element .thumbnail-meta-data-wrapper { overflow: hidden; left: 0; top: 0; padding: 9px 15px 0 13px; width: 100%; position: absolute; word-wrap: break-word; }
.element .symbol { color: #fff; overflow: hidden; height: 3em; font: 300 175%/1 Lato, sans-serif; width: 100%; position: relative; text-transform: uppercase; z-index: 2; }
.variable-sizes .element .symbol { font-size: 175%; }
.variable-sizes .element.width2.height2 .symbol { font-size: 350%; }
.variable-sizes .element.width3.height2 .symbol { font-size: 500%; }


.element .dades-projecte {
    overflow: hidden; 
/*    color: #fff; */
    padding: 0 15px; 
    max-width: 100%; 
    left: 0; 
    position: absolute; 
/*    text-overflow: ellipsis; 
    white-space: nowrap; 
    word-wrap: break-word; */
    z-index: 2;   
    bottom: 10px;  
}

.element .categories, .element .name { 
    color: #fff; 
}

.element .name { font-weight: bold; font-size: 26px; }
.element .categories { font-weight: 400; font-size: 75%; font-family: Helvetica, sans-serif; }

.thumbnail-hover { width: 100%; height: 100%; position: absolute; }
.project-img { width: 100%; z-index: 0; position: absolute; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }

.element:hover .project-img-visible { opacity: 0; }


.element video { max-width: none; z-index: -1; }

.element .name,
.element .categories {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-moz-transition: 	opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-ms-transition: 	opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-o-transition: 		opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	transition: 		opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}
.element:hover .name,
.element:hover .categories  {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.25s ease-in-out, visibility 0s;
	-moz-transition: 	opacity 0.25s ease-in-out, visibility 0s;
	-ms-transition: 	opacity 0.25s ease-in-out, visibility 0s;
	-o-transition: 		opacity 0.25s ease-in-out, visibility 0s;
	transition: 		opacity 0.25s ease-in-out, visibility 0s;
}

.tn-display-meta .name,
.tn-display-meta .categories { opacity: 1; visibility: visible; }

@media (max-width: 700px) {
	.element .name { display: none; }
	.variable-sizes .element.width3 { width: 445px; }
	.element.width3.height2 .symbol { font-size: 375%; }
}

@media (max-width: 480px) { /* Intentionally set to 480px and not 479px to display 3 columns of thumbnails on width=480 */
	.element .name { font-size: 100%;  }
	.variable-sizes .element .symbol { font-size: 100%; }
	
	/* Thumbnail sizes on mobile devices */
	.element {
		width: 92px !important;
		height: 92px !important;
		margin: 0 3px 3px 0 !important;
	}
	.element.height2 {
		height: 199px !important;
	}
	.element.width2 {
		width: 291px !important;
	}
	.element.width2.height2,
	.element.width3.height2 {
		height: 199px !important;
		width: 291px !important;
	}
	.variable-sizes .element.width2.height2 .symbol,
	.variable-sizes .element.width3.height2 .symbol {
		font-size: 200%;
	}
}


/* Fitxa de projecte */

.project-title {
	margin-top: 0;
}

.project-meta-data {
	margin-bottom: 1em;
}

.project-meta-heading {
	font-weight: bold;
    font-family: Helvetica,Arial,sans-serif;
}

.pictos-comparteix a {
	color: inherit;
	text-decoration: none;
	margin-right: 0.5em;
}

.tb-seccio {
    padding: 3em 0;
}

#tb-media {
	background-color: #f1ebd7;
	margin-top: -2em;
}

/*  ==========================================================================
    Blog
    ========================================================================== */

    .titol-pagina {
        color: darkorange;
        font-weight: 300;
        margin-bottom: 30px;        
        margin-top: -30px;
    }

    #index-blog .titol-pagina {
        margin-left: 15px;
    }


.entrada {
    margin: 15px 15px 45px;
}

.entrada + .entrada {
    border-top: 1px solid #ccc;
    padding-top: 45px;
}

.entrada h1 {
    margin-top: 0;
    font-size: 48px;
}

.entrada header {
    margin-bottom: 15px;
}


.entrada small {
    padding-top: 5px;
}

.entrada aside {
    margin-bottom: 10px;
}

.entrada aside,
.entrada small {
    font-size: 14px;
}

.entrada aside ul {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: -1px;
    padding: 9px 0;
}

.entrada aside ul li {
    display: inline;
    padding: 0 10px 0 0;
}

.entrada aside ul a {
    color: inherit;
} 

.entrada aside ul a:hover {
    text-decoration: none;
    color: darkorange;
}

.entrada .lead {
    clear: both;
    color: #333;
    font: 300 28px/1.3em Lato, Arial, sans-serif;
}

.text-entrada > div {
    font-size: 20px;
}

/*  ==========================================================================
    Projectes
    ========================================================================== */

.projecte {
    margin-bottom: 2em;
}

body#projectes .lead {
    font-size: 3em;
}

/*  ==========================================================================
    Peu de pàgina
    ========================================================================== */

.container.principal {
    margin-bottom: 4em;
}

#copyright {
    margin-top: 2em;
}

.site-footer .footer-client-logos a {
    float: left;
    margin-right: 3.5em;
    max-width: 33%;
}

#peu-pagina address {
    margin-bottom: 0.75em;
    margin-top: 0.75em;
}

#peu-pagina h6 {
    font-size: 16px;
    color: white;
}

#peu-pagina a {
    color: #fff;
}

#peu1 a:hover {
    color: white;
}

#peu1 .logos-peu img {
    max-width: 100%;
}

#peu2 a:hover {
    color: tomato;
}

#peu3 a {
    color: #666;
}

#peu3 a:hover {
    color: #000;
}

#peu1 {
    background-color: #666;
    color: #fff;
}

#peu2 {
    background: #c41d00;
    color: #fff;
}

#peu1 {
    padding: 30px 15px 15px;
}

#peu3 {
    padding: 30px 15px 25px;
}

#peu1 .container > .row {
    margin-bottom: 30px;
}

#peu1 .container {
    padding: 20px 10px;
}

.menu-peu {
    margin-top: 15px;
}

.menu-peu ul {
    float: right;
}

.menu-peu li {
    float: left;
    margin-right: 2em;
}

.menu-peu li {
    float: left;
    margin-left: 2em;
    margin-right: 0;
}

#logo-peu img {
    width: 232px;
}

#logo-peu small {
    display: table;
    margin-top: 0.5em;
    font-size: 15px;
}

.form-butlleti-peu {
    margin-bottom: 0.25em;
}

#xarxes-peu ul {
    margin-left: -7px;
}

#xarxes-peu a {
    color: inherit;
}

.social {
    background-color: gray;
    border-radius: 4px;
    color: white;
    display: inline-block;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    margin: 0 5px;
    overflow: hidden;
    text-align: center;
    transition: background-color 0.3s ease 0s;
    width: 50px;
}

.social:hover {
  cursor: pointer;
  background-color: #222;

}


/*Butlletí peu*/

.form-butlleti-peu .form-control {
    background-color: gray;
    border: 0 none;
    border-radius: 0;
    width: 100%;
}

.form-butlleti-peu .btn {
    color: gray;
    background-color: white;
    text-transform: uppercase;
    transition: background-color 0.3s ease 0s;
}

.form-butlleti-peu .btn:hover {
    color: white;
    background-color: #222;
}


#peu-pagina input.form-control {
    color: white;
}

#peu-pagina input.form-control::-webkit-input-placeholder {
   color: white;
}

#peu-pagina input.form-control:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

#peu-pagina input.form-control::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

#peu-pagina input.form-control:-ms-input-placeholder {  
   color: white;  
}


/*  ==========================================================================
    Media queries
    ========================================================================== */

    /*Només mòbil*/

@media (max-width: 767px) {

    .container.principal {    
        margin-top: 50px;
    }
    
    header.navbar {
        margin-bottom: 0;
    }

    body {
        padding-top: 76px;
    }

    body .navbar {
        background-color: white;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    #menuet {
        display: none;
    }

    .titol-pagina {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .entrada h1 {
        font-size: 28px;
    }

    .text-entrada > div {
        font-size: 16px;
    }
    
    .lead {
        padding-bottom: 20px;
    }

    .lead, .text-benvinguda {
        font-size: 24px;
        margin-bottom: 0;
    }

    .site-logo {
        width: 160px;
    }

    .navbar-nav {
        float: none;
    }

    .nav-menu li {
        display: block;
        margin-bottom: 27px;
        position: relative;
    }

    body#projectes .lead {
        font-size: 24px;
        margin-bottom: 24px;
    }

    #peu1 {
        padding: 0 15px;
    }

}   

@media (min-width: 768px) and (max-width: 991px) {

    .lead, .text-benvinguda {
        font-size: 36px;
        margin-bottom: 0;
    }

    body {
        font-size: 14px;
    }

	.navbar-header {
    	float: unset;
    	text-align: center;
	}

	.navbar-brand {
		float: unset;
        padding-bottom: 0;
        padding-top:5px;
	}

    header.navbar {
        margin-bottom: 2em;
    }

    .main-menu-container {
        text-align: center;
    }

    .navbar-nav {
        display: inline-block;
        float: none;
    }
    
    .navbar-nav>li>a {
        padding-bottom: 5px;
    }

    .nav-menu li a {
        font-size: 14px;
    }

    .menu-item.entypo {
        font-size: 45px;
    }

    #menu-main-menu {
        margin-top: 18px;
    }

    #menuet .nav {
        display: table;
        margin: 0 auto;
    }

    #menuet .nav li a {
        padding-top: 0;
    }
    
    .menu-peu {
        margin-top: 0;
    }

}

@media (max-width: 970px) {

}

@media (min-width: 970px) and (max-width: 1200px) {

    .nav-menu li a {
        font-size: 14px;
    }

    .menu-item.entypo {
        font-size: 45px;
    }

    .entrada h1 {
        font-size: 40px;
    }

}

@media (min-width: 991px) {

}


.paginacio { float: right;}
.paginacio a, .paginacio span {
    display: block;
    float: left;
    margin-right: 5px;
    padding: 3px 6px;
    border: 1px solid #FFE3C4;
    background-color: #FFE3C4;
    color: #000;
}
.paginacio a:hover {
    color: #FFF;
    background-color: #FF8C00;
    border: 1px solid #FF8C00;
}
.paginacio span.actual {
    font-weight: bold;
    background-color: #FF8C00;
    border: 1px solid #FF8C00;
    color: #FFF;
}