:root{
	
	--black:#212121; 
	--black2:#2d3436;
	--black3:#222f3e;
	 
	--lightgrey:#dfe6e9;
	--darkgrey:#424242;
	--mediumgrey:#576574;


	--zapablueL:#647da1; /*darkgrey*/
	--zapablueM:#254d74; /*darkgrey*/
	--zapablueD:#1e3e5d; /*darkgrey*/
}

html {
    height: 100%;
    overflow-x: none;
    
}

body{
	height: 100%;
	background: 
    	url(assets/ZaPa-shared-working-space-poblenou-barcelona-11.jpg);
	background-size: cover;
	background-position: right;
	background-attachment: fixed;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility !important;

}


/**********FONTS**************/

.txt-highlight{
	font-family: 'Source Code Pro', monospace;
	background-color: white;
	color: var(--black3);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 5px;
	padding: 1px 10px;

}

.txt-body{
	font-family: 'Source Code Pro', monospace;
	color: var(--black3);
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
}

.txt-body-bold{
	font-weight: 600;
}

.txt-body-small{
	font-size: 12px;
}

.txt-h3{
	font-family: 'Source Code Pro', monospace;
	color: var(--black3);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
}

.txt-large{
	font-size: 24px;
}

.txt-title{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--darkgrey);	
}



.spacer{
	border-bottom: 3px solid var(--zapablueM);
	width: 10%;
	margin:	7px 0 30px 0;

}



.txt-news-head{
	font-family: 'Source Code Pro', monospace;
	color: var(--mediumgrey);
	font-size: 10px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.1em;
	text-transform: uppercase;

}

.txt-news-title{
	font-family: 'Source Code Pro', monospace;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--black3);
	margin: 20px 0;
}

.txt-news-subtitle{
	font-family: 'Source Sans Pro', sans-serif;
	color: var(--zapablueL);
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	display: inline-block;
	text-transform: uppercase;
}



#links{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--darkgrey);	
}

#links:hover{
	color: var(--zapablueM);
	text-decoration: underline;
}


.links-inline{
	color: var(--zapablueM);
	z-index: 2;
}

.links-inline:hover{
	color: var(--zapablueM);
	text-decoration: underline;	
	z-index: 2;
}


a{
	color: var(--zapablueM);
}


i{
	color: black;
	background-color: white;
    padding: 12px;
	opacity: 1;
}

i:hover{
	color: var(--zapablueD);
}


/**********COMPONENTS**************/

#sandwich{
	color: rgba(0,0,0, .7);
	border: none;
	border-radius: 0px;
	background: white;
	
}



/**********WRAPPERS**************/

.social{

	margin: 20px 10px 0px 0px;
}


#scrollable{
	z-index: 1;
		
}



.wrapper{
 margin-left: 0px;
 margin-right: 0px;
 background: white;
 padding: 7%;

}

.wrapper-txt{
	padding: 5% 4% 5% 30%;
}

#img-logo{
	max-width:80%;
	margin:30px auto;
}




.img-body-hor{
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.img-body-ver{
    max-width: 70%;
    height: auto;
    margin-bottom: 20px;
}

.c-news{
	border-top: 1px solid var(--lightgrey);
	padding:20px;
	margin-top: 20px;
}	

.c-people-left{
	padding:0px;
}

.c-people-right{
	margin-left: 30%;
}

.hideme
{
    opacity:0;
}



/* 
992px comes from the bootstrap grid sizes for 'lg'

https://v4-alpha.getbootstrap.com/layout/grid/#grid-options 
*/
@media (min-width: 992px){
    #fixed {
        position: fixed;
        top: 50px;
        bottom: 0;
        width:400px;
        z-index: 2;
        
    }
    #img-logo{
	max-width:140%;

	}

    
}



#header{
    animation: fadein .5s;
    -moz-animation: fadein .5s; /* Firefox */
    -webkit-animation: fadein .5s; /* Safari and Chrome */
    -o-animation: fadein .5s; /* Opera */
}

#scrollable {
    animation: fadein .5s;
    -moz-animation: fadein .5s; /* Firefox */
    -webkit-animation: fadein .5s; /* Safari and Chrome */
    -o-animation: fadein .5s; /* Opera */
}

#fixed {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}