html, body{
	height: 100%;
	margin:0;
	padding:0;
	font-family:'Ubuntu';
	background:#000;
}
.flex {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}
a.portalLink{
	display:block;
	width:100%;
	height: 50%;
	z-index: 1;
    text-decoration:none;
	-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
    color:#000;
    position: relative;
}

#dev{
	background: url(code.jpg) no-repeat;
	background-size: cover;
}
#wrt{
	background: url(films.jpg) no-repeat;
	background-size: cover;
	background-position: 50% 0;
}

.text{
	position: absolute;
    top: 10%;
	background:#661659;
	overflow:hidden;
	height:55px;
	width: 100%;
	-webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
    -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
}

a.portalLink:hover .text{
	height: 150px;
}

h2{
	margin: 0;
	padding:10px 0;
	text-align:center;
	font-size: 1.8em;
	color:#ffc502;
}

p{
	margin:5px auto 0;
	color:#fff;
	font-size:1.2em;
	text-align:center;
	width:80%;
}

a.portalLink:hover p{
}

.btn{
	font-weight:500;
	color:#ffc502;
	font-size:1.4em;
	width:60px;
	margin:10px auto 0;
	display:block;
}
.btn:hover{
	color:#fff;
}

@media only screen and (max-width: 1000px){
	.text{
		top: calc(50% - 25px);
		height: 100px;
	}
	.text h2 {
		padding: 30px 0;
		font-size: 2em;
	}
	.text p, .text .btn {
		display: none;
	}
}