*,*:before,*:after {box-sizing: border-box;} html, body {width: 100%;height: 100%;overflow-x: hidden;}
.logo img {display: block; margin: 100px auto 100px auto; width: 23px; height: 20px; opacity: .9;}

.container {background: #fff;max-width: 1348px; height: 757px; position: relative;margin: 0 auto; margin-top: 100px}
.container h1 {color: #fff;position: relative;position: absolute;left: 50%;top: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);white-space: nowrap;}
.container h1 {transition: all .2s ease-in-out;}
.container h1:hover {transform: scale(1.05);}
.container a.cta {display: block;position: absolute;height: 60px;line-height: 50px;width: 140px;text-align: center;color: #fff;text-decoration: none;left: 50%;bottom: 20%;-webkit-transform: translateX(-50%);transform: translateX(-50%);border: 2px solid #fff;font-size: 0.75em;font-weight: 700;letter-spacing: 1px;}
.container a.designer {color: #000;border: 2px solid #000; font-family: texas-hero, sans-serif; font-size: 36px; font-weight: 400;font-style: normal;}
.container a.dentist {font-family: questa-grande, serif;font-weight: 400;font-style: italic; text-transform: uppercase}
.container .one-half {position: absolute;width: 50%;height: 100%;overflow: hidden;}
.container .one-half.left {left: 0;background: url("../images/designer.jpg") center center no-repeat;background-size: cover;}
.container .one-half.left:before {content: "";width: 100%;height: 100%;position: absolute;}
.container .one-half.right {right: 0;background: url("../images/dentist.jpg") center center no-repeat;background-size: cover;}
.container .one-half.right:before {content: "";width: 100%;height: 100%;position: absolute;}
.container .one-half.left, .container .one-half.right {-webkit-transition: 500ms all ease-in-out;transition: 500ms all ease-in-out;}
.container .one-half.left:before, .container .one-half.right:before {-webkit-transition: 500ms all ease-in-out;transition: 500ms all ease-in-out;}

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

@media only screen and (max-device-width: 451px) { 
.container {width: 100%; height: 100%;margin-top: 0px;}
.container a.cta {font-size: 40px; width: 220px; line-height: 70px; height: 80px;}
.container a.designer {font-size: 50px;}
.logo {display: none;}}