html,
body {
margin:0;
padding:0;
height:100%;
}

* {font-family: 'Fira Sans', sans-serif;}

#container {
min-height:100%;
position:relative;
font-size:1.25em;
}

#header {
background:#275566;
padding:10px;
}

#body {
padding-bottom:60px;
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
border-top: 1px solid #275566;
font-size: 0.875em;
text-align: center;
}

#parent {
}

#parent:after {
content:'';
display:block;
clear:both;
}

#child {
float:left;
padding-left: 25px;
width:30%;
}

a {
text-decoration: none;
color: #275566;
}

div > div > div {
padding:10px;
}

.tresc {
text-align: justify;
padding: 0 45px;
}

.text {
color: #fff;
font-size: 1.5em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.card {
position: relative;
border: 1px solid #275566;
border-radius: 3px;
overflow: hidden;
padding: 0 10px 0 20px;
}

.card .imgBx {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
transition: .3s;
text-align: center;
}

.card .details {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
transition: .3s;
}

.card .imgBx {
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.card:hover .imgBx {
top: 100%;
left: 0;
}

.card .details {
background: #275566;
top: -90%;
left: 95%;
}

.card:hover .details {
top: 0;
left: 0;
}

@media screen and (max-width: 1200px) {

#child {
padding-left: 15px;
width:93%;
}

}