*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    background: #42b4e6;
    height: 100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

body:hover .column {
    width: 10%;
}

.column {
    width: 20%;
    padding: 2%;
    height: 100%;
    float: left;
	position:relative;
    margin: 0;
    transition: all 0.5s ease;
    &#red {
        background: #f25648 url(../images/slide-01.jpg) no-repeat 50% 50%;
    }
    &#orange {
        background: #fc7b16 url(../images/slide-02.jpg) no-repeat 50% 50%;
    }
    &#yellow {
        background: #fee532 url(../images/slide-03.jpg) no-repeat 50% 50%;
    }
    &#green {
        background: #23af4c url(../images/slide-04.jpg) no-repeat 50% 50%;
    }
    &#blue {
        background: #42b4e6 url(../images/slide-05.jpg) no-repeat 50% 50%;
    }
    &:hover {
        .cont, .overlay {
            opacity: 1;
        }
		.overlay {
            opacity: 0;
        }
        width: 60% !important;
    }
}

p {
    color: #000;
    text-align: center;
    font-family: Arial, sans-serif;
	line-height:23px;
	padding:0pc;
	margin:0pc;
}
.cont {
	position:absolute;
	width:70%;
	min-height:100px;
	background:#FFF;
	border-radius:100px;
	top:75%;
	margin:-50px;
	opacity:0;
	transition: all 0.5s ease;
	left:50%;
	margin-left:-35%;
	padding:25px;
}
.overlay {
	position:absolute;
	width:100%;
	height:100%;
	left:0pc;
	top:0px;
	z-index:50;
	background:rgba(0, 0, 0, .3);
	opacity:1;
}