html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family:  "AtypDisplay-Regular", Arial;
	color:#fff;
	background:#181716;
}
* {outline:none;}

html { font-size: 62.5%; } 
body { font-size: 16px; font-size: 1.6rem; } /* =14px */


@font-face {
	font-family: 'AtypDisplay-Regular';
	src: url('fonts/atypdisplay-regular.eot'); /* IE 9 Compatibility Mode */
	src: url('fonts/atypdisplay-regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/atypdisplay-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/atypdisplay-regular.woff') format('woff'); /* Firefox >= 3.6, any other modern browser */
}
@font-face {
	font-family: 'AtypDisplay-Medium';
	src: url('fonts/atypdisplay-medium.eot'); /* IE 9 Compatibility Mode */
	src: url('fonts/atypdisplay-medium.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/atypdisplay-medium.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/atypdisplay-medium.woff') format('woff'); /* Firefox >= 3.6, any other modern browser */
}


@font-face {
	font-family: 'AtypDisplay-Semibold';
	src: url('fonts/atypdisplay-semibold.eot'); /* IE 9 Compatibility Mode */
	src: url('fonts/atypdisplay-semibold.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/atypdisplay-semibold.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/atypdisplay-semibold.woff') format('woff'); /* Firefox >= 3.6, any other modern browser */
}

.wrapper {
	width:100%;
	height:100%;
	overflow:hidden;
}

#aside {
	width:210px;
	width:16.2rem;
	float:right;
	height: 100%;
	padding:2.4rem;
	background:#2B2A28
}

#frame {
	margin-right:210px;	
	margin-right:21rem;	
	height:100vh;
	    box-sizing: border-box;
    padding-bottom: 4.5rem;
	position:relative;
}
#frame.nopad {
	 padding-bottom: 0rem;
}

#frame iframe {
	border:none;
	width:100%;
	height:100%;
	transition: all 0.7s
}

#frame_error_message {
	text-align: center; max-width: 50%; color: #fff; padding: 30px; font-size: 1.6rem;
	margin: auto; 
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	height: 1px;
    min-height: fit-content;	
}

.err_tittle {
	font-size: 3.2rem;
    font-family: 'AtypDisplay-Medium', Arial;
	background:url(images/info.svg) no-repeat 50% 0%;
	padding-top:10rem;
	margin:0
}

#aside .logo {
    color: #fff;
    font-size: 1.8rem;
    font-family: 'AtypDisplay-Medium', Arial;
    text-decoration: none;
    letter-spacing: 0.03rem;
	display:inline-block;
	clear:both
}

#aside .logo:after {
  display: block;
  content: "";
  height: 1px;
  width: 0%;
  background-color: #fff;
  transition: width 0.3s ease-in-out;
}
#aside .logo:hover:after,
#aside .logo:focus:after {
  width: 100%;
}
#aside  .menu {
	padding:2rem 0rem 3rem;
	font-size:1.4rem;
	color:#959595
}
#aside  .menu #nomination {
	display:block;
	text-decoration:none;
	color:#D9AA28;
	margin-top:0.5rem
}

#aside  .menu #nomination:hover{
	color:#CEA126;
}
#aside  .voting  ol{
	margin:0;
	padding:0;
	list-style:none;
	counter-reset: list;
	
}
#aside  .voting  ol li {
	font-size:1.4rem;
	margin-bottom:1rem;
	cursor: pointer;
	position:relative
}
#aside  .voting  ol li  span{
    position: absolute;
    left: 0;
    display: inline-block;
    height: 3.6rem;
    line-height: 3.6rem;
    padding-left: 4.8rem;
    padding-right: 2.3rem;
	color:#959595;
	transition: border 0.3s,
	opacity 0.3s
}
#aside  .voting  ol li:hover  span{
	color:#F2F2F2;
}
#aside  .voting  ol li.hide  {
	opacity:0.5;
}

#aside  .voting  ol li.hide.active {
	opacity:1
}



#aside  .voting input[type=checkbox] {
	position: absolute;
    left: -9999px;
}
#aside  .voting label {
	cursor:pointer;
}
#aside  .voting  ol li:before {
	display:inline-block;
	width:3.6rem;
	height:3.6rem;
	font-family: 'AtypDisplay-Semibold', Arial;
	background:url(images/vote_dot.svg) no-repeat 0% 50%;
	color:#181716;
	line-height:3.3rem;
	text-align:center;
	font-size:2rem;
	margin-right:1rem;
	counter-increment: list;
	content: counter(list);
}

.mac #aside  .voting  ol li:before {
	line-height:3.6rem;
}

#aside  .voting  ol li.active:before, #aside  .voting  ol li:hover:before {
		background:url(images/vote_dot.svg) no-repeat 100% 50%;
	
}
#aside  button {
	border:none;
	background:#CEA126;
	border-radius:40px;
	font-family: 'AtypDisplay-Medium', Arial;
	font-size:1.6rem;
	width:100%;
	color:#000000;
	height:3.6rem;
	margin:2.5rem 0 0;
	cursor:pointer;
	vertical-align: middle;
	padding:0;
}

#aside  button span {
    display: inline-block;
    height: 3.6rem;
    line-height: 3.3rem;
	padding:0
}

.mac #aside  button span {
    display: inline-block;
    height: 3.6rem;
    line-height: 3.6rem;
	padding:0
}



#aside  button:hover {
	background:#D9AA28;
}

.sharebtns .vk {
	background:#48729e url(vk.svg) no-repeat 50% 50%;
	
}
.sharebtns .fb {
	background:#3c5a98 url(fb.svg) no-repeat 50% 50%;
}
.sharebtns .gl {
	background:#db4437 url(g.svg) no-repeat 50% 50%;
}
.sharebtns .tw {
	background:#00aced url(tw.svg) no-repeat 50% 50%;
}
.sharebtns {
	margin-bottom:1rem
}
.sharebtns a {
	margin-right:0.5rem;
	display:inline-block;
	width:2.4rem;
	height:2.4rem;
	line-height:2.4rem;
	text-align:center;
	border-radius:0.2rem;
	background-size:90%;
	opacity:0.5;
	text-decoration:none;
	transition: opacity 0.3s
}
.sharebtns a:hover {
	opacity:1;
}
.v-footer {
	position:absolute;
	bottom:2.4rem
}
.fmenu {
	margin-bottom:1.5rem
}

.fmenu a {
	color:#959595;
	font-family: 'AtypDisplay-Regular', Arial;
	font-size:1.4rem;
	display:inline-block;
	margin-bottom:0.5rem;
}
.fmenu a:hover {
	text-decoration:none;
}

.fmenu a:hover:after,
.fmenu a:focus:after {
  width: 100%;
}

.v-footer .prize {
	background:url(images/art.svg) no-repeat -0.2rem 0%;
	background-size:100%;
	display:block;
	width:10.4rem;
	font-family: 'AtypDisplay-Regular', Arial;
	font-size:1.2rem;
	color:#fff;
	text-decoration:none;
	opacity:0.5;
	padding-top:3.4rem;
	transition: opacity 0.3s
}

.v-footer .prize:hover {
	opacity:1;	
}
.popup-menu {
		position:absolute;
		top:0;
		right:21rem;
		width:26rem;
		height:100%;
		background:#fff;
		box-shadow: -5px 0px 7px #00000015;
		display:none;
		z-index:100
}
.popup-menu:after{
    content: '';
    position: absolute;
    top: 10.8rem;
    left: 100%;
    margin-top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.popup-menu  ul{
	list-style:none;
	padding:0;
	margin:3rem 0;
}

.popup-menu  ul li{
	padding:0.2rem 3rem;
	position:relative;
}
.popup-menu  ul li.active:before{
	content: '';
    background-size: contain;
    width: 3rem;
    height: 1rem;
    position: absolute;
    top: 0.51rem;
    left: 0;
}
.popup-menu  ul li a{
	color:#000;	
	text-decoration:none;
	font-size:1.2rem;
	border-bottom:dashed 1px #000;
	transition: border-color 0.3s
}

.popup-menu  ul li a:hover{
	border-color:#fff;
}
.popup-menu  ul li.active a{
	border-bottom:none;
	cursor:default;
	color:#D9AA28
}
.popup-menu  ul li.active a:hover{
	border-bottom:none;
	cursor:default;
}

/* Top line */
		

.context-line {
	min-height: 4.8rem;
	font-size:1.6rem;
	line-height: 4.2rem;
	color: #000;
	text-align: center;
	position: relative;
	background: #F2F2F2;
	margin:0 !important;
}

.context-line.hide {
	top:-4.8rem;
}

.context-line a,
.context-line a:visited,
.context-line a:active {
	color:#000;
	text-decoration:underline;
}

.context-line a:hover {
	text-decoration:none;
}

.context-line .toprrlogo {
	max-height:24px;
	margin-right:1rem; 
	vertical-align:middle
}

.close-line {
	float:right;
	display:inline-block;
	width:4.5rem;
	height:4.5rem;
	background:url("images/close_line.svg") no-repeat 50% 50%;
	cursor:pointer;
}


@media screen and (orientation:landscape) {
   html, body, .wrapper {min-height:64rem; overflow:hidden}
   

}
@media screen and (orientation:landscape) and (max-height:640px) {
   .v-footer {    margin-top: 3rem; position:initial}
}

@media screen and (orientation:landscape) and (max-height:605px) {
.popup-menu {
    width: 42rem;
}
.popup-menu ul {

		-webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}
}

@media screen and (orientation:portrait),
screen and (orientation:landscape) and (max-height:605px) and (max-width:640px),
screen and (orientation:landscape) and (max-height:430px),
only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1) {
	#aside {
		width:100%;
		float:none;
		height: 8rem;
		padding:0;
	}

	#frame {
		margin-right:0;	
		height:100%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-bottom: 15rem !important;
	}
	#frame_error_message {
	top:-8rem;
	max-width:80%
	}
	
	#aside .logo {
		margin: 1rem 0 0 2rem;
		display: inline-block;
	}
	#aside .logo:hover:after, #aside .logo:focus:after {
		width: 0%;
	}
	#aside .menu {
		padding: 0.5rem 0 0 2rem;
		font-size: 1.2rem;
	}
	#aside .menu #nomination {
    display: inline;
	}
    
	.v-footer {
		position: absolute;
        top: 2.5rem;
        right: 2rem;
        bottom: initial;
        margin:0
	}
	.v-footer .sharebtns , .v-footer .prize{
		display:none;
	}
	
	.fmenu br {
		display:none
	}
	
	.fmenu {
		    display: flex;
    justify-content: space-around;
    column-gap: 2rem;
	}
	
	.fmenu a {
		margin-bottom: 0.2rem;
	}
	
	.popup-menu {
    position: absolute;
    top: 9rem;
    right: initial;
    width: 100%;
    height: 2rem;
	}
	.popup-menu ul {
		margin: 1rem 0;
		width: 100%;
		-webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2; /*3 in those rules is just placeholder -- can be anything*/
	background:#fff;
	padding-bottom:2rem;
	}
	.popup-menu ul li {
		padding: 0.2rem 2.2rem;
	}
	.popup-menu ul li.active:before {
		background-position:20% 50%;
	}
	.voting {
		 position: fixed;
        bottom: 0;
        height: 7.2rem;
        background: #3b3b3b;
        width: 100%;
        z-index: 999;
	}	
	.popup-menu:after {
		content: '';
		position: absolute;
		top: -0.7rem;
		left: 2rem;
		margin-top: -7px;
		width: 0;
		height: 0;
		border-bottom: 7px solid #fff;
		border-right: 7px solid transparent;
		border-left: 7px solid transparent;
		z-index: 999;
	}
	#aside .voting ol li{
		float:left;
		margin-bottom:0
	}
	#aside .voting ol {
			float: left;
			margin: 1.8rem 1.16rem;
	}
	#aside .voting ol li span{
		position:absolute;
		left:9999px
	}
	
	 #aside button {
		float: left;
        width: auto;
        padding: 0 2rem;
        margin: 1.7rem 0;
        height: 3.6rem;
	 }
	 
	 #aside .voting .formwrap {
		position:relative
	 }
	  #aside .voting .formwrap form {
		width:43rem;
		margin:0 auto;
	  }
	
}

@media screen and (max-width:900px) {
	.v-footer {
        top: 1.5rem;
    }
}

@media screen and (max-width:925px) {
	.context-line {
    font-size: 1.3rem;
	}
}

@media screen and (max-width:680px) {
	.context-line {
    font-size: 1.2rem;
	}
	.fmenu a {
    font-size: 1.2rem;
	}
}
@media screen and (orientation:landscape) and (max-width:640px) {
	.context-line {
		line-height: 0.1rem;
		padding: 0 4rem;
		text-align: center;
	}
	
	.close-line {
		position: absolute;
		top: 0;
		right: 0;
	}
	.v-footer {
        top: 1.5rem;
    }
}

@media screen and (orientation:portrait) and (max-width:410px) {
#aside .voting ol {
    margin: 2.3rem 1rem;
}

#aside button {
    padding: 0 1.3rem;
	font-size: 1.2rem;	
}

#aside .voting ol li:before {
    width: 2.6rem;
    height: 2.6rem;
    line-height: 2.6rem;
    font-size: 1.2rem;
    margin-right: 1rem;
	background-size: cover !important;
}

#aside .voting ol li.active:before {
    width: 2.6rem;
    height: 2.6rem;
    line-height: 2.6rem;
    font-size: 1.2rem;
    margin-right: 1rem;
	background-size: cover !important;
}

.mac #aside  .voting  ol li:before {
	line-height:2.8rem;
}
#aside button span {
	height:2.6rem;
    line-height: 2.6rem;
}

.mac #aside button span {
	height:2.6rem;
    line-height: 2.8rem;
}

#aside .voting .formwrap form {
    width: 33rem;
}
}
/*
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1){

#frame iframe, #frame {width:81.4rem !important; overflow:hidden}
 #frame {float: left; margin-right:0}

}
*/

@media screen and (max-width:640px) {
   .context-line {
		font-size: 1.2rem;
        line-height: normal;
        padding: 0.5rem 5rem 0.5rem 6rem;
        z-index: 999;
        vertical-align: middle;
	}
	.context-line img {
		max-height: 20px !important;
		position: absolute;
		top: 1.5rem;
		left: 2rem;
	
	}
	
	.context-line .close-line{
	position: absolute;
    top: 0;
    right: 0;
    float: none;
	}
	
	.rr_wlc {
		display: inline-block;
    padding-top: 5px;
	}
}