#diapo-viewport {
	display: none;
	padding: 10px;
	position: relative;
	z-index: 99999;
}

#diapo-viewport.active {

	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.95);	
}
.diapo-container .diapo-pic {
	display: none;
}
.diapo-container .diapo-info {
	display: none;
}

#diapo-viewport .diapo-info {
	max-width: 90%;
	margin: 0 auto;
	padding: 5px
}
#diapo-viewport .diapo-info .title {

	padding: 5px;
	border: solid 1px white;
	border-radius: 5px;
	color: white;
	font-size: 1.5em;
    font-weight: bold;
}
#diapo-viewport #diapo-list {

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	max-width: 80%;
	margin: 0 auto;

}

#diapo-viewport #diapo-screen {
	position: relative;
}

#diapo-viewport #diapo-screen #screen-content {

	max-width: 90%;
	margin: 0 auto;
	text-align: center;
}

#diapo-viewport #diapo-screen .nav-arrow {

	opacity: 0;
	cursor: pointer;
	position: absolute;
	top: calc(50% - 12px);
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;

}
#diapo-viewport #diapo-screen:hover .nav-arrow:hover {

	opacity: 1;
}


#diapo-viewport #diapo-screen:hover .nav-arrow {

	opacity: 0.5;
}

#diapo-viewport #diapo-screen #nav-left.nav-arrow {

    border-right: 50px solid #ffc700;
    left: calc(10% - 12px);
}
#diapo-viewport #diapo-screen #nav-right.nav-arrow {

    border-left: 50px solid #ffc700;
    right: calc(10% - 12px);
}

#diapo-viewport #diapo-screen #screen-content img {
	max-width: 100%;
	margin: 10px 0;
	height: auto;
	background-color: black;
	border: solid 1px white;
}

#diapo-viewport #diapo-list img {

	cursor: pointer;
	opacity: 1;
	height: 80px;
	width: 80px;
	margin: 10px;
	object-fit: cover;
	border: solid 3px white;
	border-radius: 20px;
}
#diapo-viewport #diapo-list img:hover {

	border: solid 3px #ffc700;;
}

#diapo-viewport #close-diapo {

	position: relative;
    max-width: 90%;
    margin: 0 auto;
	padding: 5px;
	display: flex;
	flex-direction:row-reverse;
}

#diapo-viewport #close-diapo #close-btn {
	
	cursor: pointer;
	border-radius: 30px;
	width: 45px;
	height: 45px;
}

#diapo-viewport #close-diapo #close-btn:hover:before, #diapo-viewport #close-diapo #close-btn:hover:after {
	background-color: #ffc700;
}
#diapo-viewport #close-diapo #close-btn:before, #close-btn:after {
	position: absolute;
	right: 26px;
	content: ' ';
	height: 45px;
	width: 2px;
	background-color: white;
}
#diapo-viewport #close-diapo #close-btn:before {
	transform: rotate(45deg);
}
#diapo-viewport #close-diapo #close-btn:after {
	transform: rotate(-45deg);
}


/* page videogames*/

body#page-videogames #diapo-viewport .diapo-info {

	padding: 10px;
}
body#page-videogames #diapo-viewport .diapo-info .title {

	margin-bottom: 15px;
}
body#page-videogames #diapo-viewport .diapo-info .resume {

	color: white;
	padding: 10px;
}
body#page-videogames #diapo-viewport .diapo-info .link a {

	color: #52c2ff;
	padding: 10px;
}

body#page-videogames #diapo-viewport .diapo-info .role {

	color: white;
	padding: 10px;
}