body,html {height:100%;}
body {
	margin: 0;
	padding: 0;
    font-family: 'Poppins', 'arial', sans-serif;
}
body * {webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
.soft-no-wrap {display: inline-block;}


#feature {position:fixed;width:50%;height:100%;top:0;left:0;overflow:hidden;background-size: cover;background-position: center;}
#feature img {position: absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}


#content {width:50%;float:right;height:100%;}
article {display:table;height:100%;width:100%;padding:0;background-color: #FFF;font-size:15px;line-height: 24px;}
article div {display:table-cell;vertical-align: middle;padding-bottom:50px;}
article hgroup {position:relative;margin-bottom:30px;font-family: 'Playfair Display', serif;font-style: italic;text-align: center;}

article h2 {font-size: 61px;line-height:61px;color: #000;padding:0;margin:0;color:#635f76;}
article h1 {padding:0 0 40px 0;margin:0;font-size: 150px;line-height:80%;color:#ff434e;}
article h1 > span {letter-spacing: 10px;}


article section {position:relative;padding:0 12%;}


article p {color:#1C1C1C;font-size:16px;line-height:29px;margin:0 0 20px 0;}
article p a {color:#1C1C1C;font-size:16px;text-decoration: none;}
article p a:hover {border-bottom:1px solid #ff4038;}
footer {margin:0;background:#FFF;border-top:1px solid #DDD;padding:20px 5%;position:fixed;bottom:0;right:0;width:50%;}

footer a {display:inline-block;padding:2px 0;color:#555;text-decoration:none;text-transform: uppercase;font-size:85%;border-bottom:1px solid #CCC;}
footer a:hover {color:#000;}
footer a.icon-download {padding-left:28px;background:url('../images/icon-download.svg') 0 0 no-repeat;}
footer a.icon-download:hover {background-position:0 -60px;}
footer .column {width:50%;float:left;}
footer .column.tertiary {text-align: right;}

@media only screen and (max-width: 1280px){
    article {padding:50px 0 100px 0;}
    article h1 {font-size:120px;margin:0;}
}
@media only screen and (max-width: 1024px){
    article h1 {font-size:100px;}
}
@media only screen and (max-width: 896px){
    article h2 {font-size:51px;line-height: 71px;}
    article h1 {font-size:80px;line-height:70%;margin-bottom:10px;}
    footer {position:static;width:auto;padding:0;}
    footer .column {width:100%;padding:0;float:none;text-align: center;}
    footer .column:nth-of-type(2) {border-top:1px solid #DDD;text-align: center;}
    footer .column a {display:block;border:none;padding:30px 0;}
}
@media only screen and (max-width: 768px){
    body:before {content:'breakpoint';position:absolute;top:-100px;left:0;}
    footer a.icon-download {background:none;}
    #feature {position:relative;width:350px;height:350px;min-height:0;border-radius: 200px;margin:40px auto;}
    #content {width:100%;float:none;height:auto;}
    article {padding:0;display:block;height:auto;}
    article h1 {font-size:140px;}
    article section {padding:0 5%;}
}
@media only screen and (max-width: 640px){
    article h1 {font-size:120px;}
    article h1 > span {letter-spacing:8px;}
}
@media only screen and (max-width: 512px){
    article {padding:20px 3%;}
    article h1 {font-size:90px;line-height:65%;}
    footer {padding:0;}
    footer .column {padding:0;width:100%;float:none;text-align: center;}
    footer .column:nth-of-type(2) {border-top:1px solid #DDD;text-align: center;}
}
@media only screen and (max-width: 384px){
    #feature {width:310px;height:310px;}
    article {padding:0 5%;}
    article h2 {font-size: 41px;line-height: 41px;margin-bottom: 10px;}
    article h1 {margin:0;font-size:70px;line-height:65%;}
}
@media only screen and (max-width: 320px){
    #feature {width:250px;height:250px;margin:30px auto;}        
    article h2 {font-size: 41px;line-height: 40px;}
    article h1 {font-size: 70px;line-height: 60px;}
    article section {padding:0;}
    article section p,
    article section p a {font-size: 16px;}
    article section p a {color:#777;}
}