body.home { background-color: #fff; }
.responsive .contents { max-width: 100%; }
.wrap { width: 100% !important; }
.wrap.header { background: #000; }

.wrap.hero { background: url(/static/corel/images/home/corel/hero/background-cdgs-2019.jpg) no-repeat, #008ca1 ; background-position: center bottom, left bottom; color: #fff; font-size: 21px; overflow-x: hidden;}
.wrap.hero p {line-height: 1.5;}
.wrap.hero { min-width: 1200px; }
.title-box {margin-top: 100px; margin-bottom: 50px; min-height: 460px;}

h1.wordmark {margin: 0 0 20px 0; padding: 0; }
h1.wordmark img { width: 315px; margin-left: 0;  }
h1.wordmark span { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.hero p.label-new { padding: 0; margin: 0; font-size: 30px; font-weight:500; font-style: italic; text-transform: uppercase; color: #fdc528; background: none; }

p.tagline { font-weight: 500 !important; font-style: italic; margin: 0; padding: 0; color: #fdc528 }
p.tagline span {display: block;}
p.tagline .title { font-weight: 500 !important;}
p.tagline .save {font-size: 80%; font-weight: 400;}

.buttons { padding-top: 25px; margin: 0 0 10px 0; }
.btn { border: 2px solid #fff; font-size: 20px; padding: 5px 30px 8px; margin-right: 20px; border-radius: 0px }
.btn:hover { opacity: 0.85; }
.btn-learn-more { background: #fff; color: #008ca1; }
.btn-learn-more:hover, .btn-learn-more:focus, .btn-learn-more:active { outline: none; color: #008ca1; }

p.available { font-style: italic; font-size: 14px; }


.hero-ui { position: relative; }
.hero-ui .mac-ui { position: absolute; top: 80px; -webkit-animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) .6s both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) .6s both }
.hero-ui .screen-shadow { position: absolute; height: 424px; top: 113px; left: 351px; width: auto; -webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1.8s both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1.8s both }
.hero-ui .pc-ui { position: absolute; top: 80px; left: 350px; -webkit-animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) 1.2s both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) 1.2s both }
.hero-ui .pc-exp { position: absolute; top: 25px; left: 390px; font-size: 13px; background: url(/static/corel/images/home/corel/hero/screen-arrow.png) no-repeat; min-height: 55px; padding-left: 120px; padding-top: 15px; width: 500px; -webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 2.4s both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 2.4s both}
.hero-ui .mac-exp { position: absolute; top: 57px; left: 50px; font-size: 13px; line-height: 19px; background: url(/static/corel/images/home/corel/hero/screen-arrow.png) no-repeat; min-height: 55px; padding-left: 120px; padding-top: 15px; width: 340px; -webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1.8s both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1.8s both}
.wrap.brand { background: #000; }
.wrap.footer { background: #fff; border-top: #d7d7d7 1px solid; }
.container.footer {
    border-top: none;
}


.fade-in{-webkit-animation:fade-in 1.6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
.fade-in-right{-webkit-animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) .6s both;animation:fade-in-right .6s cubic-bezier(.39,.575,.565,1.000) .6s both}
@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}