body {
    background-image: url('../imag/bg.jpg');
    background-position: cover;
    background-color: #C4A580;
}
@font-face {
    font-family: 'radikalbold';
    src: url('../fonts/radikalbold.woff2') format('woff2'),
         url('../fonts/radikalbold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'radikalmedium';
    src: url('../fonts/radikalmedium.woff2') format('woff2'),
         url('../fonts/radikalmedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'radikal';
    src: url('../fonts/radikal.woff2') format('woff2'),
         url('../fonts/radikal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'radikallight';
    src: url('../fonts/radikallight.woff2') format('woff2'),
         url('../fonts/radikallight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2 {
    font-family: radikalbold;
    color: #fe5200;
    text-transform: uppercase;
}

h1 {
    font-size:7rem;
    line-height:6rem;
}

h2 {
    font-size:3.5rem;
    line-height:2.2rem;
}

p {
    font-family: radikal;
    text-transform: uppercase;
    color:white;
    margin-bottom: 0.7rem;
}
.l {
    font-family: radikallight;
}
ol {
    list-style: none;
    padding:0;
    margin:0; 
    font-family: radikalmedium;
    color: #fe5200;
    text-transform: uppercase;
    font-size:1.6rem;
    line-height: 1.5rem;
}

ol li {
    display: inline-block;
}
ol li:after {
    content: '>>'; 
    padding: 0 7px 0 7px;
    display:inline-block;
}
ol li:last-child:after {
    content: '';
}

.button {
    font-family: radikalmedium;
    color:white;
    background-color: #fe5200;
    border:0;
    margin-bottom: 1.2rem;
}
.button:hover {
    color:#000;
}
.button:active {
  transform: translateY(2px);
  filter: saturate(150%);    
}
.box {
    padding:0;
    background-color: transparent;
}

.buy {
    max-width: 750px;
}
figure {
    cursor: pointer;
}
.lower {
  background-image: url('lower.png');
  background-blend-mode: multiply;
  height:400px;
  background-color: #C4A580;
}

.backg {
  mix-blend-mode: multiply;
}

.hd {
    width: 455px;
}
.dv {
    max-width:800px;
}
.v {
    max-width:650px;
}
.cd, .d {
    max-width:460px;
}
.light {
    font-family: radikallight;
    font-size:90%;
    margin: 0 10px;
}
.from {
    font-size:80%;
}

@media only screen and (max-width: 1220px) {
    .hd {width:auto;}
    .container { max-width:1024px; }
}

@media only screen and (max-width: 950px) {
    h1 { font-size: 5rem; line-height:4rem; }
    h2 { font-size: 2.5rem;} 
    ol { font-size:1.3rem; }
}

@media only screen and (max-width: 829px) {
    ol { font-size:1.1rem; }
}

@media only screen and (max-width: 770px) {
    .button {margin:auto; }
    .buy {margin:auto; margin-bottom:1rem;}
    .section {padding-bottom:0;}
    .hd {width:auto;}
}


@media only screen and (max-width: 770px) {
    .button {margin:auto; }
    .buy {margin:auto; margin-bottom:1rem;}
    .section {padding-bottom:0;}
    .hd {width:auto;}
    .type { display:none; }
}
@media only screen and (min-width: 770px) {
    ol {position:absolute; bottom:0;}
}