html, body { width: 100%; height: 100%; overflow-x: hidden; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; }
*,*:before,*:after { box-sizing: border-box; }

.container { background: transparent; width: 100%; height: 100%; position: relative; }
.container .one-half { position: absolute; width: 50%; height: 100%; overflow: hidden; }
.container .one-half.left { left: 0; }
.container .one-half.right { right: 0; }

.container .one-half .bg-img { position: absolute; z-index: 1; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.container .one-half .bg-col { position: absolute; z-index: 2; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.container .one-half .bg-main { position: absolute; z-index: 3; width: 100%; height: 100%; overflow: hidden; display: grid; align-content: center; }

.container .one-half.left, .container .one-half.right { transition: 500ms all ease-in-out; }

.container.left-is-hovered .left,
.container.right-is-hovered .right { width: 60%; }

.container.left-is-hovered .left h1:after,
.container.right-is-hovered .right h1:after { width: 100%; }

.container.left-is-hovered .right,
.container.right-is-hovered .left { width: 40%; }

.container.left-is-hovered .right:before,
.container.right-is-hovered .left:before { background: rgba(0, 0, 0, 0.65); z-index: 2; }

.ttl { text-align: center; }
.ttl h1 { display: inline-block; vertical-align: top; color: #fff; white-space: nowrap; position: relative; font-size: 40px; letter-spacing: 2px; font-weight: 700; }
.ttl h1:after { content: ""; position: absolute; width: 0; height: 4px; left: 0; bottom: -10px; background: #fff; transition: 500ms all ease-in-out; }

.img {  margin: 100px 0; }
.img img { display: block; margin: 0 auto; max-width: 300px; }

.lnk { text-align: center; }
.lnk a { display: inline-block; vertical-align: top; padding: 10px 20px; text-align: center; color: #fff; text-decoration: none; border: 2px solid #fff; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; position: relative; }

@media only screen and (max-width: 767px){
.container .one-half { width: 100%; height: 50%; }
.container .one-half.left { top: 0; }
.container .one-half.right { top: 50%; }

.img {  margin: 30px 0; }
.img img { max-width: auto; max-width: 200px; }

.ttl h1 { font-size: 30px; }

.lnk a { padding: 7px 15px; font-size: 14px; }
}