@charset 'utf-8';

/********** RESET **********/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, button, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] {margin:0; padding:0; border:0; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {display:block;}
ol, ul, li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";	content:none;}
table {border-collapse:collapse; border-spacing:0;}
textarea {overflow:auto}
caption, figcaption {display:none;} 
em, address {font-style:normal;}
label {cursor:pointer;}
legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* for screen reader */
:focus {outline:0 none;}
a {color:inherit;}
a:link {text-decoration:none;color:inherit;}
a, button {background:none; border:0 none; cursor:pointer;}


/********** COMMON **********/

html {height:100%;}
body {position:relative; min-height:100%; word-break:keep-all; background:#eee;}

section {position:relative; max-width:1280px; margin:0 auto;}

section.logo {height:320px; background-position:center; background-repeat:no-repeat; text-indent:-9999px; transition:all 1.5s;}
section.logo.color1 {background-image:url("./brandnewsoda-1.png");}
section.logo.color2 {background-image:url("./brandnewsoda-2.png");}
section.logo.color3 {background-image:url("./brandnewsoda-3.png");}
section.logo.color4 {background-image:url("./brandnewsoda-4.png");}
section.text {height:640px; background:url("./brandnewday.png") center no-repeat; text-indent:-9999px; transition:all 1.0s;}
a.download {display:block; position:absolute; left:50%; top:140px; width:380px; height:152px; background:url("./downloadourworks.png") center no-repeat; text-indent:-9999px; transform:rotate(-15deg); transition:all 0.5s;}
a.download:hover {background-image:url("./downloadourworks-over.png");}

@media all and (max-width:1280px) {

section.logo {height:25vw; background-size:100%;}

}

@media all and (max-width:760px) {

section.text {height:620px; background-position:-260px center; background-size:cover;}
a.download {left:auto; right:0; top:160px;}

}

@media all and (max-width:640px) {

a.download {top:170px;}

}

@media all and (max-width:540px) {

section.text {height:600px}
a.download {width:285px; height:114px; background-size:100%;}

}

@media all and (max-width:480px) {

a.download {top:190px;}

}

@media all and (max-width:400px) {

a.download {top:220px; width:190px; height:76px;}

}