body {
  background-color:#000000;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  min-width: 300px;
  overflow: auto;
  color: white;
  background-position:top;
  background-repeat:no-repeat;
  background-size:cover;	
}

h1 {
  font-size:8rem;
  letter-spacing: 0;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1rem;
}

h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }

article {
  font-size: 1.2rem;
  letter-spacing: 1.4px;
}

.orange { color:#F58220; }
.dark { color: black; }
h2.light{ color: #fff; }
h3.dark { color: #232222; }

#form a, #cookies a { color:#F58220; }

p { font-size: 1.25rem; }
p.light { color: #fff;}
p.light a { color: #fff; }


article {
  max-width: 1351px;
  text-align: left;
}

article.dark { color: #232222; }

.btn-first {
  font-size: 1.25rem;
  font-weight:bold!important;
  background-color:#F58220;
  color:#000000!important;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border:3px solid #F58220;
  border-radius:5px;
}

.btn-first:hover {
  background:#F58220;
  text-decoration:none;
  color:#FFFFFF!important;
}

.btn-first.reverse {
  font-size: 1.25rem;
  font-weight:bold!important;
  background-color:transparent;
  color:#F58220!important;
  border:3px solid #F58220;
}

.btn-first.reverse:hover {
  background:#F58220;
  text-decoration:none;
  color:#FFFFFF!important;
}

button:focus { outline: 0 transparent; }

input.primary {
  font-size: 1.875rem;
  background: #232222;
  color: #fff;
  border: solid 3px #232222;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border-left: 0;
}

input.primary:hover {
  background: #fff;
  color: #232222;
  border: solid 3px #232222;
  border-left: 0;
}

.shadow {
  -webkit-box-shadow: 30px 30px 30px #000;
          box-shadow: 30px 30px 30px #000;
}

section { position: relative; }

section.content-full {
  max-width: 2000px;
  padding: 0;
}

header {
	padding: 0 5rem;
}
section.content {
  max-width: 900px;
  padding: 0 5rem;
}



.img-fluid { width: 100%; }

#menu_back {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #F58220;
  z-index: 4;
  margin: 0px;
  overflow-y: auto;
}

a 		{ color: white; text-decoration: none; }
a:hover { color: white; text-decoration: underline; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent;}
input:focus:-ms-input-placeholder { color: transparent; }

input {
  border-radius: none;
  -webkit-border-radius: 0px;
}

.form-check-label {display: inline;}

#navbar-toggler {
  position: absolute;
  top:0.8rem;
  left: 0;
  border: 0;
  background-color: transparent;
}

#navbar-toggler:focus { outline: none; }

#bar {
  width: 100%;
  position: relative;
  height: 5rem;
  max-width: 1920px;
  top: 0;
}

#navigace {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  max-width: 100%;
  margin: 0px auto;
  background-color: black;
}

#navigace .navbar-brand.logo { display: block; }
#navigace a { color: white; font-size: 1.3rem; }
#navigace a:hover { text-decoration: none; }

#logo { height: 3rem; }

#footer {
    background-color:#000000;
    border-top:1px solid #404040;
}

#footer a { color:#a3a3a3; }

#hero {
    width: 100%;
    min-height: 411px;
	margin-top: 5rem;
    /*background-color:#000000;*/
    background-position:top;
    background-repeat:no-repeat;
    background-size:cover;
}

#youtube iframe {
	width: 100%;
}

#rewards img.icon { height: 12rem; }

#rules, #rules2, #video { background-color:#DEDEDE; }
#rules article h2, #poster article h2 {color:#F58220; font-weight: 700 !important; text-align: center !important; margin-bottom: 1rem !important;}
#footer_img {padding-left: 15px; padding-right: 15px;}
#form, #poster { background-color:#EDE9EA; }

/*@media all and (max-width: 2000px) { #hero { min-height: 45vw;} body {background-position-y: calc(5rem + 19vw);}}*/
@media all and (max-width: 2000px) { #hero { min-height: 20vw;} body {background-position-y: 5rem;}}
@media all and (max-width: 1600px) { #rules2_parent, #video_parent, #form_parent, #video_parent, #form_parent, #rules_parent, #rewards_parent, #poster_parent { background: none !important;}}

@media all and (max-width: 1365px) { h1 { font-size: 8rem; letter-spacing: 0.0456rem; }}
@media all and (min-width: 1200px) { #menu_back {display: none !important;} #navigace {background-color: black !important;}}
@media all and (max-width: 1200px) { html { font-size: 80%; } #bar{ height:6rem; } #hero {margin-top: 6rem;} #navigace .navbar-brand.logo{position:absolute; right:0;} .navbar-nav{  padding-top:50px; } }
@media all and (max-width: 992px) { 
  div.scroll-down {display: none;}
  section.content, header { padding: 0px 2rem; }  
  h1 { font-size: 7rem; }
  p { font-size: 1.5rem; }
  #footer h2 { font-size: 14px;}
}

@media all and (max-width: 576px) { h1 { font-size: 5rem; }}
@media all and (max-width: 450px) { header, section { padding: 0px 15px; } }
@media all and (max-width: 375px) {
  footer { padding: 0; }
}
.navbar-brand {  padding-bottom: .33rem; margin-right: 1rem; }
@media all and (max-width: 320px) { h1 { font-size: 3rem;}}

  .line {
	fill: none;
	stroke-width: 6;
	stroke: white;
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	  stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .line1 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
  }
  .line2 {
	stroke-dasharray: 60 60;
	stroke-width: 6;
  }
  .line3 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
  }
  .opened .line1 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
  }
  .opened .line2 {
	stroke-dasharray: 1 60;
	stroke-dashoffset: -30;
	stroke-width: 6;
  }
  .opened .line3 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
  }
  
  .bold { font-weight: 400 !important;}
  
  .circle {
	height: 2em;
	width: 2em;
	line-height: 1.8em;
	color: white;
	font-size: 1.8em;
	font-weight: 800;
	background-color: #F58220;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 33px 2px #F58220;
	margin: 1rem 0;
  }
  .circle img {
	height: 2em;
	width: 2em;
  }	  
  
  #form .txt {
  border: 2px solid #F58220;
  font-size: 1.25rem;
  color: #000;
  border-radius: 5px;
  background:transparent;
}


#cookies { 
    padding: 0.5em;
    position: fixed;
    margin: 0.5em;
    right: 0;
    bottom: 0;
    background: rgba(86,86,86,0.9);
    text-align: center;
    color: white;
    z-index: 999;
    max-width: 42em;
    border-radius: 5px;
	font-size: 85%;
}

.btn, .btn:visited {
  color: #fff !important;
  text-decoration: none;
  background-color: #f5821e;
  font-weight: bold;
  padding: 7px 30px;
  margin: 0.4em 0.4em;
}

.dialog {
	border-radius: 6px;
	-moz-border-radius: 6px;
	background: black;
	-webkit-border-radius: 6px;
	border: 1px solid #66564f;
	box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
	-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
	-moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;
	padding: 1em;
	max-width: min(80%, 1066px); 
	overflow-x: auto;
	display: none;
}

#span_loader {
	display: none;
	width: 1.2em;
}

div.panel img {
	max-width: 100%;
	height: auto !important;
}

video {
	max-width: 100%;
	height: auto;
	outline: none;
	border: none;
	cursor: pointer;
}


.scroll-down {
    position: relative;
    width: 10vw; 
    max-width: 40px; 
    height: 18vw; 
    max-height: 70px; 
}

.scroll-down {
    position: relative;
    width: 10vw; 
    max-width: 40px; 
    height: 18vw; 
    max-height: 70px;
}

.mouse {
    width: 100%;
    height: 100%;
    border: 0.2em solid #FFF;
    border-radius: 20px;
    position: relative;
    box-sizing: border-box; 
    overflow: hidden;
}

.scroll-arrow {
    width: 20%;
    height: 25%;
    background: #FFF;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0% {
        top: 25%;
        opacity: 1;
    }
    100% {
        top: 75%;
        opacity: 0;
    }
}