body { font-size: 14px; line-height: 1.5; color: #333 }
p { line-height: 1.5; margin: 1em 0; }
h4 { font-size: 18px; line-height: 1.1; margin-top: 10px; margin-bottom: 10px; }
.responsive .contents { max-width: 100%; }
.wrap.header { background: #000 }
.btn { border-radius: 0px }
p.available { font-style: italic; }
h1.wordmark img { width: 280px; margin-left: 0; }
#hero.vsp h1.wordmark img { width: auto; }
p.tagline { color: #fdc528; }
.hero-ui { position: relative; }
.responsive .hero-ui img { width: 90%; }
.hero-ui .mac-ui { position: absolute; top: 65px; -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: 330px; top: 90px; 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: 65px; 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: 10px; left: 390px; font-size: 13px; line-height: 15px; background: url(/static/corel/images/home/corel/hero/screen-arrow.png) no-repeat; min-height: 55px; padding-left: 120px; padding-top: 15px; width: 300px; -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: 38px; left: 50px; font-size: 13px; line-height: 15px; background: url(/static/corel/images/home/corel/hero/screen-arrow.png) no-repeat; min-height: 55px; padding-left: 120px; padding-top: 15px; width: 300px; -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 }
#brand-bar { margin: 0; list-style: none; background: #000; text-align: center; }
#brand-bar li { display: inline-block; *display:inline;
position: relative; margin-top: 0; background: url(/static/corel/images/brands/separator.png) no-repeat; }
#brand-bar li:first-child, #brand-bar .first-child { background: none; }
#brand-bar li a { padding: 0 24px 0 26px; }
#brand-bar li a img { vertical-align: top; width: inherit}
#brand-bar .logo-hover, #brand-bar .hover .logo, #brand-bar li:hover .logo { display: none; }
#brand-bar li.hover .logo-hover, #brand-bar li:hover .logo-hover { display: inline; }
.wrap.footer { background: #fff; border-top: #d7d7d7 1px solid; }
.contents {min-width: inherit; margin-bottom: 0;}

@media (max-width: 767px) {
    .hero-ui{display: none}
     h1.wordmark img {width: 100%;}
    #hero .artist-name {display: none !important;}
    #brand-bar li a img {width: 55%;}
    #brand-bar li{background: none}
    #hero.vsp h1.wordmark { width: 300px; }
    #hero.vsp h1.wordmark img { width: 100%; }
}