@charset "UTF-8";
/* CSS Document */



body.kiosk,
body.kiosk *, 
body.kiosk .smooth-menu,
body.kiosk .swiper-slide .close, 
body.kiosk .swiper-slide  .open,
body.kiosk a, 
body.kiosk img,
body.kiosk .grid-item img,
body.kiosk .swiper-button-next,
body.kiosk .swiper-button-prev,
body.kiosk .home-web .slide.first .expo-title, 
body.kiosk .home-web .slide.first h1,
body.kiosk .egipte-i-india .smooth-menu,
body.kiosk .i-torna-al-born .smooth-menu{
	cursor:none!important
 
}


.smooth-back {
	display:none;
}

.swiper-button-next, .swiper-button-prev {
    top: calc(50vh);
    width: 11vh;
    height: 11vh;
    background-size: 40%;
    Background-color: #0003;
    border-radius: 100%;
    background-position: center center;
    border: 1px solid rgba(255,255,255,0.2);
	
}
.swiper-button-prev {
	left: 4px;
	background-image: url(images/frwrd.png);
}
.swiper-button-next {
	right:4px;
	background-image: url(images/next.png);
}


.centrat {
	margin-left:33vw;
	
}
/* SLIDERS */



.slide.second, .slide.third {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.carme-garcia-1 .slide.first {
	background-image: url(http://ajuntament.barcelona.cat/arxiufotografic/virtuals/images/sub_topics/medium_size/268/44cb41bf7c7e62ca9325d605ec6f6375.jpeg);
	
}
.carme-garcia-2 .slide.first {
	background-image: url(http://ajuntament.barcelona.cat/arxiufotografic/virtuals/images/sub_topics/medium_size/265/28b00e3ff6b8eafe983c192248897f71.jpeg);
	
}
.exposicio-carme-garcia-des-del-terrat .slide.first {
	background-image: url(http://ajuntament.barcelona.cat/arxiufotografic/virtuals/images/sub_topics/medium_size/275/dd1cbeda8f1352bde45490f266719024.jpeg);
}



.slide.third {
	background-image: url(images/bn.png);	
}
.slide.second .centrat .intro {
	margin-top:18vh;
}

.kiosk .slide.second .centrat .intro {
	margin-top:1vh;
	font-size:1vw;
}
.kiosk .slide.second .centrat .intro p{
	font-size:24px;
}

.slide.second .centrat .main-title:before {
	margin-top:calc(50vh - 5.8vh);
	margin-top:calc(0vh - 5.8vh);
	margin-bottom:0;
    width: 4.6vh;
    height: 4.6vh;
	margin-left: -4.6vh;
}
.slide.second .centrat .intro p {
	font-size:30px;
	color:rgba(255,255,255,1);
	font-family: AkzidenzGroteskBE-Light;
	letter-space:normal;
	
}
.slide.second .centrat h2 {
	display:none;	
}
.slide.second  .centrat, .slide.first  .centrat {
	/* height:100%; */
	height: 50%;
    background-color:rgba(0,0,0,0.7);
	padding-left:33%;
	box-sizing: border-box;
	width:100%;
	margin-left:0;
	    -webkit-transform: translateY(-0%);
    -moz-transform: translateY(-0%);
    -ms-transform: translateY(-0%);
    -o-transform: translateY(-0%);
    transform: translateY(-0%);
}

.no-kiosk slide.second .centrat, .no-kiosk .slide.first .centrat {
    /* height: 100%; */
    background-color: #000000;
}
.kiosk .slide.second  .centrat {
	background-color: rgba(0,0,0,1);
}
.slide.first p {
    /* margin-top: 0; */
}
.slide.second  .main-title a {
	display: block;
    color: rgba(255,255,255,1);
    font-size: 10vh;
    position: absolute;
    top: 50%;
	top: 0%;
    transform: translateY(-7.5vh);
    width: 30vw;
    line-height: 87%;
    letter-spacing: -0.03em;
}
.kiosk .slide.second  .main-title {
        font-size: 2vw;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-right: 2vw;
    padding-left: 0;
    padding-top: 0vh;
    line-height: 110%;
    margin-top: calc(0vh - 2vw);
    display: block;
    letter-spacing: -0.03em;
    color: #000;
}
.no-kiosk .slide.second  .main-title {
	      font-size: 1em;
}
.no-kiosk .slide.second  .main-title a {
     padding-left: 7.5vh;
	background-image: none;
    font-family: AkzidenzGroteskBE-bold;
    font-size: 53px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    letter-spacing: -0.03em;
    transform: translateY(-42px);
    position: relative;
}
.no-kiosk .slide.second .centrat .main-title:before{
    top: 45px;
    margin-left: 15px;
    width: 64px;
    height: 64px;
	padding-left: 0px;
    position: absolute;
    left: auto;
    background-size: 40%;
    Background-color: #0003;
    border-radius: 100%;
    background-position: center center;
    border: 1px solid #fff3;
	background-image: url(images/frwrd.png);
}
.no-kiosk .second .expo-title {
    font-size: 1.1em;
}
.no-kiosk .slide.second .centrat .intro {
    margin-top: 1vh;
     padding-left: 7.5vh;
}
.no-kiosk .slide.second .centrat{
    background-color: #000000;
	padding-left:20%;
	min-height:50%;
	height:auto;
}
.slide.first  h1 {
    font-size: 129px;
    transform: translateY(-101px);
     text-align: center;
	display: block;
    color: rgba(255,255,255,1);
    position: absolute;
	top: 0%;
    transform: translateY(-101px);
    width: 30vw;
    line-height: 87%;
    letter-spacing: -0.03em;
}
.main-title a:first-line, .slide.first h1:first-line {
	color:rgba(0,0,0,1);
}
.second .expo-title {
	background-image:none;
	font-family: AkzidenzGroteskBE-Light;
	font-size:0.58em;
	margin-bottom:0px;
	padding-bottom:0px;
}
.slide.first .expo-title {
	background-image: none;
    font-family: AkzidenzGroteskBE-Light;
    font-size: 69px;
    margin-top: 120px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    letter-spacing: -0.03em;
	
     width: 30vw;
    text-align: center;
}
.kiosk .second .expo-title {
	color:rgba(255,255,255,1);
	background-image: none;
	font-size:2vw;
    font-family: AkzidenzGroteskBE-Light;
     margin-top: 6px;
    padding-bottom: 0px;
    letter-spacing: 0;
}
.kiosk .ambit-title {
	display:none;
}

.home-web p.ambit-title a {
    display: none!important;
}

.home-web p.ambit-title a:last-child {
	position:absolute;
    top: calc(50vh);
    display: block!important;
	background-color:rgba(0,0,0,0.3);
	 width: 11vh;
    height: 11vh;
    background-size: 40%;
    border-radius: 100%;
    background-position: center center;
	background-repeat:no-repeat;
    border: 1px solid rgba(255,255,255,0.2);
	color:rgba(0,0,0,0);
	overflow:hidden;
	text-indent:-100000px;
	right:4px;
	background-image: url(images/next.png);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* GRID */
#masonry-wrapper{
    margin-left: 0vw;
    width: calc(100% - 0vw);
	overflow-y:hidden;
}

.grid {
	
     height: 100vh;
	 /* margin-top:45px;
	height:calc(100% - 45px);
	*/
}
.grid-item.grid-spacer {
	 width: 33vw;
	margin:0px;
	border:none;
}
.grid-item.grid-spacer h4 {
	font-size: 2vw;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    padding-right: 2vw;
     padding-left: 15vw;
    padding-top: 0vh;
	line-height:110%;
    margin-top: calc(50vh - 2vw);
    display: block;
	color:rgba(255,255,255,1);
}

.grid-item.grid-spacer h4:first-line {
	color:rgba(0,0,0,1);
}
.grid-item {
    width: calc(33vh - 20px);
	margin:10px;
    height: calc(33vh - 20px);
	background-image:none;
	background-color:rgba(0,0,0,0.05);
	border:1px solid rgba(255,255,255,0.2);
	box-sizing:border-box;
}
.grid-item img {
    max-width: 100%;
    max-height: 100%;
    /* left: 0%;
    -webkit-transform: translate(-0%,-50%);
    -moz-transform: translate(-0%,-50%);
    -ms-transform: translate(-0%,-50%);
    -o-transform: translate(-0%,-50%);
    transform: translate(-0%,-50%); */
}
.grid-item.grid-spacer.smooth-menu {
    top: 6px!important;
	margin-left: 6vw;
	display:none!important;
}

.masq .ambit-title {
	display:none;
}
/* MODAL */
.data {
    font-size: 0.7vw;
}



.home-web .credits dl {
    color: #fff;
}
.home-web .credits dd {
    font-family: 'AkzidenzGroteskBE-Light'!important;
}

.home-web .intro p, .home-web .credits dl, .home-web .intro h3, .home-web .down {
    padding-left: 33%;
}
@media only screen and (max-width: 1366px) {
	
	
.slide.first  h1 {
    font-size: 87px;
    transform: translateY(-66px);
	}
	
	.grid-item.grid-spacer h4 {
		font-size: 3vw;
		margin-top: calc(50vh - 3vw);
	}
	.grid-item {
		width: calc(33vh - 20px);
		height: calc(33vh - 20px);
	}
	
	.home.slide.first .expo-title {
		font-size: 47px;
    	margin-top: 82px;
	}

	.slide.second .centrat .intro p {
			font-size:17px;
	}
	
	.no-kiosk .slide.second .centrat .main-title:before{
		top: 10px;
		margin-left: -22px;
		width: 64px;
		height: 64px;
	}
	.no-kiosk .slide.second .main-title a {
		font-size: 40px;
     transform: translateY(-32px);
	}

}

@media only screen and (max-width: 1023px){
	
	.grid-item.grid-spacer {
		width: 55vw;
	}
	.grid-item.grid-spacer h4 {
		font-size: 5vw;
		margin-top: calc(50vh - 5vw);
		padding-left: 20vw;
	}
	.swiper-button-next, .swiper-button-prev {
		width: 10vh;
		height: 10vh;
	}
	.slide.second .main-title a {
		font-size: 9vh;
		transform: translateY(-6.8vh);
		width: 35vw;
	}
	.slide.second {
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
	}
	.slide.second .centrat {
    	background-color: rgba(0,0,0,1);
	}
	.centrat h2, .slide.first .centrat h1 {
		font-size: 86px;
		width: 38vw;
	}
	.slide.first .expo-title {
		background-image: none;
		font-size: 3.4em;
		margin-top: 99px;
		    width: 38vw;
	}
	.no-kiosk .slide.second .main-title a {
		font-size: 37px;
    	transform: translateY(-29px);
	}
	.no-kiosk .slide.first .expo-title {
		font-size:2.5em;
		mrgin-top: 75px;
	}
	.no-kiosk .slide.second .centrat .main-title:before{
		top: 26px;
		margin-left: 0px;
	}
}
@media only screen and (max-width: 736px){
	.slide.second .main-title a {
		font-size: 14vh;
		transform: translateY(-10.8vh);
	}
	.second .expo-title {
		font-size: 0.58em!important;
		color:rgba(255,255,255,1)!important;
	}
	.slide.second .centrat .intro {
		margin-top: 26vh;
	}
	.slide.second .centrat .intro p {
		font-size: 14px;
	}
	.slide.second {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	.slide.second .centrat {
    	background-color: rgba(0,0,0,0.7);
	}
	.centrat h2, .slide.first .centrat h1 {
    	font-size: 48px;
		transform: translateY(-36px);
		width:31vw;
}
	.home-web .slide.first .expo-title {
		font-size: 3.5vw;
		margin-top: 46px;
		    width: 31vw;

	}
	.no-kiosk .slide.second .expo-title {
		font-size: 37px!important;
	}
	.no-kiosk .slide.second .centrat .intro {
		margin-top: -7vh;
	}
	.no-kiosk .slide.second .centrat .main-title:before {
    top: 2px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
	}
	
}

@media only screen and (max-width: 414px){
	.slide.second .centrat {
		padding-left: 27vw;
	}
	.slide.second .main-title a {
		font-size: 8vh;
		transform: translateY(-6vh);
		width: 43vw;
	}
	.slide.second .centrat .intro {
		margin-top: 18vh;
	}
	.swiper-button-next, .swiper-button-prev {
		width: 8vh;
		height: 8vh;
	}
	.slide.second {
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
	}

	.slide.second .centrat {
    	background-color: rgba(0,0,0,1);
	}
	.intro {
		margin-top: 16vh;
	}
	.slide.second .centrat .intro p {
		font-size: 12px;
		margin-right: 3%;
	}

	.centrat h2, .slide.first .centrat h1 {
		font-size: 9.4vh;
		
     transform: translateY(-7vh);

	}
	.slide.second .centrat, .slide.first .centrat {
    	padding-left: 19%;
	}
	.home-web .slide.first .expo-title {
		font-size: 5.2vh;
    	margin-top: 72px;
		    width: 50vw;

	}.no-kiosk .slide.second .centrat .intro {
		margin-top: -2vh;
		margin-right: 8vw;
	}
	.no-kiosk .slide.second .centrat .main-title:before {
		top: 22px;
		width: 5vh;
		height: 5vh;
	}
		.home-web .credits dl, .home-web .intro p, .home-web .down {
		padding-left: 6%!important;

	}
	
	.no-kiosk .slide.second  .main-title a {
		 padding-left: 23px;
	}
	.no-kiosk .slide.second .centrat .intro {
    	padding-left: 23px;
	}
	.no-kiosk .slide.second .main-title a {
		font-size: 25px;
		transform: translateY(-20px);
	}
	.no-kiosk .slide.second .expo-title {
		font-size: 25px!important;
	}
}