:root{
    font-size: 10px;
    --container-bg-clr: #333;
    --left-bg-clr:rgba(1,97,146,.2);
    --left-btn-hvr-clr:rgba(1,97,146,.7);
    --right-bg-clr: rgba(43,43,43,.2);
    --right-btn-hvr-clr: rgba(1,97,146,.7);
    --hover-width: 75%;
    --other-width: 25%;
    --speed: 1000ms;
}

html, body{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

h1{
    font-size: 8rem;
    color: white;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

h2{
    font-size: 3rem;
    color: white;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    white-space: nowrap;
}

h3{
    font-size: 1.5rem;
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: white;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translateX(-50%);
    white-space: nowrap;
}

h4{
    font-size: 3rem;
    color: white;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.button{
    display: block;
    position: absolute;
    left: 50%;
    top: 80%;
    height: 4rem;
    width: 24rem;
    text-align: center;
    color: white;
    padding-top: 2rem;
    border: white solid .3rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateX(-50%);
}

.split.left .button:hover{
    background-color: var(--left-btn-hvr-clr);
    border-color: var(--left-btn-hvr-clr);
}

.split.right .button:hover{
    background-color: var(--right-btn-hvr-clr);
    border-color: var(--right-btn-hvr-clr);
}

.container{
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--container-bg-clr);
}

.split{
    position: absolute;
    height: 100%;
    width: 50%;
    overflow: hidden;
}

.split.left{
    left: 0;
    background: url("Assets/australia.jpg") center center no-repeat;
    background-size: cover;
	background-position: center;
}

.split.left:before{
    position: absolute;
    content: "";
    height: 10%;
    width: 100%;
    background-color: var(--left-bg-clr);
}

.split.right{
    right: 0;
    background: url("Assets/newzealand.jpg") center center no-repeat;
    background-size: cover;
}

.split.right:before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-color: var(--right-bg-clr);
}

.split.left, .split.right, .split.left:before, .split.right:before{
    transition: var(--speed) all ease-in-out;
}

.hover-left .left{
    width: var(--hover-width);
}

.hover-left .right{
    width: var(--other-width);
}

.hover-left .right:before{
    z-index: 2;
}

.hover-right .right{
    width: var(--hover-width);
}

.hover-right .left{
    width: var(--other-width);
}

.hover-right .left:before{
    z-index: 2;
}

@media(max-width: 840px){
    h1{
        font-size: 3rem;
    }
    h2{
        font-size: 1.5rem
    }
	h3{
    	font-size: .75rem;
	}
	h4{
    	font-size: 2rem;
	}
    .button{
        width: 16rem;
    }
	img[data-src-840px] {
        content: attr(data-src-840px, url);
    }
}
}
@media(max-height: 600px){
    .button{
        top: 80%;
    }
	h1{
        font-size: 2rem;
    }
    h2{
        display: none;
    }
	h3{
		display: none;
	}
	h4{
		top: 40%;
	}
	 img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
}
@media(max-height: 480px){
    .button{
        top: 80%;
    }
	h1{
        font-size: 2rem;
    }
    h2{
        display: none;
    }
	h3{
		display: none;
	}
	h4{
		top: 40%;
	}
	 img[data-src-480px] {
        content: attr(data-src-480px, url);
    }
}
}
@media(max-height: 320px){
    .button{
        top: 30%;
    }
	h1{
        font-size: 2rem;
    }
    h2{
        display: none;
    }
	h3{
		display: none;
	}
	h4{
		font-size: 1rem;
	}
	 img[data-src-320px] {
        content: attr(data-src-320px, url);
    }
}
}


img.resize {
  max-width:50%;
  max-height:50%
}


img { 
	max-width: 100%;
	height: auto
}