/*reset*/
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, 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{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{display:block}
body{line-height:1}
ol, ul{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}
/*end reset*/
body{font-family:'Open Sans',sans-serif; font-size:16px}
h1, h2, h3, h4, h5{font-family:'PT Serif',serif}
.header_wrapper{background:#353535; width:100%; height:48px; line-height:48px; box-shadow:0 -16px 32px rgba(0,0,0,0.5) inset}
.header{position:relative; max-width:1280px; overflow:hidden; margin:0 auto}
.header ul{margin:0; padding:0; display:block;text-align:center}
.header ul li{display:inline-block}
.header ul li a{display:block; padding:0 8px; color:#F7943B; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out}
.header ul li a:hover{color:#333; background:#F7943B;text-decoration:none}
/**/
.projectInfo{width:100%; background:#333; position:relative; background-image:url(/special/img/spoy/sm02.jpg); background-size:cover; height:auto; min-height:800px; background-position:center; overflow:hidden;background-attachment:fixed}
.projectInfo .about{min-height:100%; position:relative; box-sizing:border-box; margin:1rem 0 0; background:transparent}
.projectInfo h1{position:absolute; top:0; left:0; font-size:4.5rem; color:#fff; font-weight:900; font-style:italic; padding:0; width:100%; background:rgba(0,0,0,0.32)}
.projectInfo h1 .title{display:inline-block; float:left; width:50%; text-align:center; color:#fff; background:transparent; box-sizing:border-box; line-height:12rem}
.projectInfo h1 .symbols{display:inline-block; float:left; background-image:url(/special/img/spoy/symbols-white.svg); background-repeat:no-repeat; background-size:auto 100%; background-position:left -8px; height:12rem; min-width:50%; box-sizing:border-box}
.about  .poem{display:block; font-family:'PT Serif',serif; font-style:italic; font-size:2.5rem; color:#000; position:relative; left:auto; width:50%; float:left; box-sizing:border-box; padding:0 0 0 2.5rem}
.about .desc{font-size:1.2rem; line-height:1.3em; background-size:100% auto; padding:0 16px 16px 0; width:50%; box-sizing:border-box; color:#000; float:left}
.about .desc  a{color:#CC213E; transition:all 0.5s ease-in-out; border-bottom:1px dotted #CC213E; white-space:nowrap;font-weight:bold}
.about .desc  a:hover, .about .desc  a:focus, .about .desc  a:active{text-decoration:none; color:#fff;background:#CC213E; outline:none; border-bottom:1px dashed rgba(0,0,0,0)}
.about .desc p{margin:0 0 1rem}
#audioTrack{overflow:visible; border:3px solid #333; width:80%; margin:32px 0; border-bottom:3px solid #333; padding:0 2px 2px; background-color:#F7943B}
#audioTrack audio{background:#333; display:block; overflow:hidden; margin:2px 0 0; width:100%; box-sizing:border-box}
.songContainer{position:absolute; top:13rem; background:rgba(255,255,255,0.91); padding:2rem 0 0}
.Overlay{position:absolute; top:0; left:0; background:url(http://www.m24.ru/special/img/grain-overlay.png); width:100%; height:100%}
.theSong{padding:2rem; background:#edc;  background-position:95% 95%; background-repeat:no-repeat; background-size:40% auto;}
.theSong h2{text-transform:uppercase; font-family:'Open Sans',sans-serif; font-size:1.3rem; margin:0 1rem; font-weight:900; letter-spacing:0.3rem}
.theSong h3{font-weight:900; font-style:italic; margin:1rem 0; font-size:3rem; color:rgb(204,33,62)}
.theSong p{margin:0 0 2rem; line-height:1.8rem; font-size:1.5rem}
.uploadSong{background:#cc213e; padding:3rem; color:#fff; border-top:8px double rgba(255,255,255,0.5); border-bottom:8px double rgba(255,255,255,0.5)}
.uploadSong a{color:#ffc; text-decoration:underline}
.inputField{position:relative; margin:0 0 1.5rem; height:3rem; line-height:3rem; box-sizing:border-box; width:auto}
.inputField label{text-transform:uppercase; font-weight:900; letter-spacing:0.3rem}
.inputField input{border:0px none; position:absolute; top:0; left:8rem; width:calc(50% - 8rem); color:#333; box-sizing:border-box; padding:0 1rem; font-weight:bold; border-radius:42px; transition:all 0.5s ease-in-out; background:#edc}
.inputField input:focus, .inputField input:active, .inputField input:hover{width:calc(100% - 8rem); background:#fff}
input#file{visibility:hidden; text-indent:-10000px}
.submitField{position:relative; width:100%; margin:1rem 0; height:64px; overflow:hidden}
input#file ~ label[for=file], input#register{display:inline-block; padding:1rem; cursor:pointer; background:#f11238; color:#fff; text-transform:uppercase; text-align:center; font-weight:900; letter-spacing:0.2rem; border:0px none; position:absolute; top:0; left:50%; width:300px; white-space:nowrap; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transition:all 0.3s ease-in-out; border-radius:32px; opacity:1; border:4px solid #fff}
input#file ~ label[for=file]{z-index:2}
input#file ~ label:hover{background:#c00; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out}
input#register{background:rgb(255,238,221); color:#f11238; z-index:3}
input#register:disabled{border:0px none; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; opacity:0; top:-64px; z-index:1}
input#terms{position:absolute; left:-1000px}
input#terms ~ label{display:block; overflow:hidden; font-size:14px; line-height:1.3em}
input#terms ~ label:before{content:""; background:rgb(255,238,221); width:32px; height:32px; float:left; display:block; box-sizing:border-box; border:8px solid #fff; margin:0.5rem 1rem 1rem 0; transition:all 0.3s ease-in-out; cursor:pointer; border-radius:5px; border:8px solid rgba(204,33,62,0.75)}
input#terms:checked ~ label:before{background:#073; border:8px solid #fff}
.termsField{margin:1rem auto}
/*alert*/
#modal-m{height:0; width:0; overflow:hidden}
.m-overlay{position:fixed; background:rgba(0,0,0,0.85); top:0; left:0; width:100%; height:100%; z-index:999; transition:all 0.3s ease-in-out 0.1s}
.m-overlay h5{position:absolute;  text-align:center; background:transparent; max-width:480px; font-size:2.3em; box-sizing:border-box; padding:48px 16px; line-height:1.5em; border:3px solid #fff; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); font-family:'pt serif'; color:#fff; width:auto; height:auto; font-weight:bold; font-style:italic}
.m-overlay h5 i{display:block; position:absolute; top:8px; right:8px; width:32px; height:32px; background:transparent; cursor:pointer; z-index:12}
.m-overlay h5 i:hover{cursor:pointer}
.m-overlay h5 i:before, .m-overlay h5 i:after{content:""; height:4px; width:32px; position:absolute; top:14px; background:#c30; left:0}
.m-overlay h5 i:before{transform:rotate(45deg)}
.m-overlay h5 i:after{transform:rotate(-45deg)}
/*social likes*/
ul.social-likes-buttons-top{margin:0; padding:0; position:absolute; bottom:-70px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50,0)}
.social-likes-buttons-top li{color:#fff; display:inline-block; float:left; font-size:12px; font-weight:700; line-height:48px; margin:0 5px 0 0; text-transform:uppercase; letter-spacing:0.1em; font-weight:900; font-size:0.8rem}
.social-likes-buttons-top li.social-likes{background-color:rgba(255,255,255,0.15); border-radius:50%; color:#fff; display:inline-block; height:48px; line-height:48px; margin:0px 3px 0; overflow:hidden; position:relative; text-indent:-10000px; width:48px}
.social-likes__widget .social-likes__button{background-color:rgb(247,148,59); transition:all .3s ease-in-out}
.social-likes__widget .social-likes__button:hover{background-color:rgb(255,238,221); transition:all .3s ease-in-out}
.social-likes__widget span.social-likes__button_facebook{background-image:url(/special/img/icons/black/fb32.svg)}
.social-likes__button_twitter{background-image:url(/special/img/icons/black/tw32.svg)}
.social-likes__button_vkontakte{background-image:url(/special/img/icons/black/vk32.svg)}
.social-likes__button_plusone{background-image:url(/special/img/icons/black/gp32.svg)}
.social-likes__button{display:inline-block; width:48px; height:48px; position:absolute; top:0; left:0; cursor:pointer; background-size:80% auto; background-position:center; background-repeat:no-repeat}

/*video*/
.videoWrapper {float:right;width:50%;} 
#thePlayer {border:3px solid #333;box-sizing:border-box;padding:3px;background:#F7943B;margin:0;position:relative}
/*#thePlayer:after  {content:"";display:block;width:100%;height:78px;background-image:url(/special/img/spoy/symbols-black.svg);background-size:auto 100%;;background-position:8px top;background-repeat:no-repeat;}*/
#thePlayer video {max-width:100%;box-sizing:border-box;}
.vSymbols {background-image:url(/special/img/spoy/symbols-white.svg);width:100%;height:230px;background-repeat:no-repeat;background-size:auto 100%;background-position:left top;}

@media screen and (min-width:1200px){
.projectInfo { height:100vh }
}
@media screen and (max-width:1200px){
.projectInfo h1{font-size:4rem}
.about .desc{font-size:0.9rem}
ul.social-likes-buttons-top{bottom:-58px}
.vSymbols {height:160px;} 
}
@media screen and (max-width:1080px){
body{font-size:14px}
.about .desc{font-size:0.8rem}
.vSymbols {height:128px;}  
.about .desc p{margin:0 0 0.5rem}
.projectInfo h1{font-size:2.5rem}
.projectInfo h1 .title{white-space:nowrap}
.about .desc{padding:0 16px 16px 0}
.projectInfo h1 .symbols{background-size:90% auto; background-position:left center}
.about .poem{font-size:2rem; max-width:40%; box-sizing:border-box; position:relative; left:auto; margin-left:16px; overflow:hidden}
}
@media screen and (max-width:800px){
.videoWrapper  {float:none;width:100%;margin:0 auto 16px}
.vSymbols {height:100px;}
.projectInfo .about{padding:0 0 32px}
.about .poem, .about .desc{box-sizing:border-box; float:none; clear:left; padding:0 16px 0; width:90%; max-width:90%; margin:auto}
.songContainer{padding:1rem 0; position:relative; margin:0 auto 16px; display:block}
.container{}
.inputField input{left:6rem; width:calc(100% - 8rem)}
.projectInfo{clear:left; padding:0 0 64px; box-sizing:border-box; position:relative}
.desc{line-height:1.1em}
ul.social-likes-buttons-top{margin:0; padding:0; position:absolute; bottom:-48px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50,0); min-width:250px}
.social-likes-buttons-top li{color:#fff; display:inline-block; float:left; font-size:11px; font-weight:700; line-height:32px; margin:0 2px 0 0; text-transform:uppercase; letter-spacing:0.1em; font-weight:900}
.social-likes-buttons-top li.social-likes{background-color:rgba(255,255,255,0.15); border-radius:50%; color:#fff; display:inline-block; height:32px; line-height:32px; margin:0px 3px 0; overflow:hidden; position:relative; text-indent:-10000px; width:32px}
.social-likes__widget .social-likes__button{background-color:rgb(247,148,59); transition:all .3s ease-in-out}
.social-likes__widget .social-likes__button:hover{background-color:rgb(255,238,221); transition:all .3s ease-in-out}
.social-likes__widget span.social-likes__button_facebook{background-image:url(/special/img/icons/black/fb32.svg)}
.social-likes__button_twitter{background-image:url(/special/img/icons/black/tw32.svg)}
.social-likes__button_vkontakte{background-image:url(/special/img/icons/black/vk32.svg)}
.social-likes__button_plusone{background-image:url(/special/img/icons/black/gp32.svg)}
.social-likes__button{display:inline-block; width:32px; height:32px; position:absolute; top:0; left:0; cursor:pointer; background-size:80% auto; background-position:center; background-repeat:no-repeat}
}
/*counters*/
#counters {display:block;width:100%;text-align:center;padding:8px 0}
#counters li {display:inline-block;margin:0 10px}
.NB {/*font-size:12px;*/line-height:1.1em;font-size:0.8em;display:block;border-top:1px solid rgba(0,0,0,0.35);padding:0.5em 0 0;font-weight:700}
.NB span {font-weight:bold;color:#CC213E}
.Vday {text-align:center;font-family:'PT Serif', Georgia, serif;font-size:5rem;font-weight:bold;font-style:italic}
@media screen and (max-width:720px){
.container{}
.projectInfo .about{min-height:auto; height:100%}
}
@media screen and (max-width:640px){
body{font-size:13px}
.projectInfo .about{padding:0 0 32px}
.theSong h2{font-size:1rem}
.theSong h3{font-size:2rem}
.about .poem, .about .desc{box-sizing:border-box; float:none; clear:left; padding:0; width:90%; max-width:90%; margin:auto; position:relative; overflow:hidden; line-height:1.3em}
.songContainer{padding:1rem 0}
.theSong p{font-size:1rem; line-height:1.3rem}
.projectInfo h1{padding:0; line-height:1em; overflow:hidden}
.projectInfo h1 .title{line-height:1em; float:none; width:100%}
.projectInfo h1 .symbols{background-position:center; width:100%; height:2em; background-size:auto 100%}
.header ul li{font-size:12px}
.header ul li a{padding:0 3px}
.songContainer{top:9rem}
.about .poem{font-size:1.5rem}
.Vday {font-size:3rem}
}
@media screen and (max-width:480px){
body{font-size:12px}
.about .desc{font-size:11px}
.projectInfo{min-height:880px}
.projectInfo h1{font-size:2rem}
.about .poem {font-size:1rem}
.Vday {font-size:2rem}
}
body{background-color:#def}
*:focus, *:active, *:checked{ outline:none; -webkit-outline:none}