@font-face{
    font-family: 'Bold';
    src: url('../fonts/axiforma-bold.eot');
    src: url('../fonts/axiforma-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/axiforma-bold.woff2') format('woff2'),
         url('../fonts/axiforma-bold.woff') format('woff'),
         url('../fonts/axiforma-bold.ttf') format('truetype'),
         url('../fonts/axiforma-bold.svg#axiformabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'Black';
    src: url('../fonts/axiforma-black.eot');
    src: url('../fonts/axiforma-black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/axiforma-black.woff2') format('woff2'),
         url('../fonts/axiforma-black.woff') format('woff'),
         url('../fonts/axiforma-black.ttf') format('truetype'),
         url('../fonts/axiforma-black.svg#axiformablack') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'Medium';
    src: url('../fonts/axiforma-medium.eot');
    src: url('../fonts/axiforma-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/axiforma-medium.woff2') format('woff2'),
         url('../fonts/axiforma-medium.woff') format('woff'),
         url('../fonts/axiforma-medium.ttf') format('truetype'),
         url('../fonts/axiforma-medium.svg#axiformamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'Light';
    src: url('../fonts/axiforma-light.eot');
    src: url('../fonts/axiforma-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/axiforma-light.woff2') format('woff2'),
         url('../fonts/axiforma-light.woff') format('woff'),
         url('../fonts/axiforma-light.ttf') format('truetype'),
         url('../fonts/axiforma-light.svg#axiformalight') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{
	padding: 0;
	margin: 0;
}
body{
	background: url('../img/bg.jpg');
}
body::-webkit-scrollbar{
    width: 10px;
    background: #000;
}
body::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px #00f6ff;
    border-radius: 10px;
}
body::-webkit-scrollbar-thumb{
    background: #009ca2; 
    border-radius: 10px;
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover{
    background: #00676b; 
}
.sidebar{
	background: #000;
	box-shadow: 0 0 15px #00f6ff;
    padding: 30px;
}
.sidebar img{
    visibility: hidden;
    width: 80%;
    display: block;
    margin: 0 auto 30px;
}
.sidebar p{
    visibility: hidden;
    font-family: 'Medium';
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 20px #00f6ff;
    margin-bottom: 25px;
}
.sidebar a{
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.sidebar a:hover{
    color: #00f6ff;
}
.main{
	padding: 50px;
}
.main .item{
    visibility: hidden;
}
.main .col-md-6{
	position: relative;
	margin-bottom: 30px;
}
.main img{
    animation: pulse 4s infinite ease-in-out;
}
@keyframes pulse{
    0%{box-shadow: 0 0 15px #00f6ff;}
    50%{box-shadow: 0 0 25px #00f6ff;}
    100%{box-shadow: 0 0 15px #00f6ff;}
}
.main .col-md-6 .details{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	background: rgba(0, 116, 120, 0.9);
	opacity: 0;
	transform-origin: 50%;
	transform: translate(-50%, -50%) rotateY(90deg);
	transition: all 0.4s ease-in;
}
.main .col-md-6 .details p{
	position: absolute;
	top: 50%;
	left: 50%;
	border: 3px solid #fff;
	background: rgba(0, 0, 0, 0.6);
    font-family: 'Bold';
    font-size: 20px;
    letter-spacing: 1.5px;
    color: #fff;
    text-align: center;
	padding: 5px 10px;
	transform: translateX(-50%) translateY(-50%);
}
.main .col-md-6:hover .details{
	opacity: 1;
	transform: translate(-50%, -50%) rotateY(0deg);
}