/* version 3.4 */

body {
    color:#3d3d3d;
    font-family:serif;
    font-family: 'Bitter', serif;
}

body.errorpage {
    text-align: center;
}

header {
    height:390px;
    background:url(../images/layout/vk-header-5.jpg) 76% 0 no-repeat;
    background-size:cover;    
    position: relative;
}

main {
    padding-bottom:1.4em;
    background:#f2ebdb;
}

article {
    padding:0 1.4em;
    box-sizing: border-box;
}


footer {
    text-align: center;
    color:#f2ebdb;
    background:#3d3d3d;
    padding:20px 0.7em;
}

footer img {
    width:30px;
    height:30px;
}

footer a {display:block;}

a, a:link {
    color:#1b8b73;
    text-decoration: none;
    border-bottom: solid 2px;
}

a:link.button, a:link img, footer a:link {
    border-bottom:none;}

.button, article, img {
    border-radius:2px;
}

h1 {
    margin:0 auto;
    color:#8b381b;
    text-align:center;
    text-indent:-99999px;
    display: block;
    height:100%;
    background-image:url(../images/layout/vk-logo-white.png);
    background-image:url(../images/layout/vk-logo.svg), linear-gradient(transparent, transparent); 
    background-size:96%;
    background-position:5% 100%, 0 0;
    background-repeat:no-repeat;
    opacity:0.8;
    z-index:99;
}

article img {
    max-width: 100%;
    height: auto;
    margin-top:0.7em;
    margin-left:auto;
    margin-right:auto;
}

h2,h3 {
    font-family: 'Oswald', sans-serif;
}

h2 {
    color:#8b381b;
    font-size:1.3em;
    line-height:1.4;
    margin-top:0;
    padding-top:0.7em;
}

p, li {
    font-size:0.9em;
}


li {
    list-style-position: inside;
}

a.button  {
    display:block;
    position:relative;
    background:#1b8b73;
    color:#f2ebdb;
    padding:16px;
    text-align:center;
    overflow-wrap: break-word;
    max-width:338px;
}

a:hover.button {
    background:#3d3d3d;   
}


.button:after  {
    content:"";
    display:block;
    position:absolute;
    height:0px;
    width:0px;
    bottom:-16px;
    left:20px;
    z-index:190;
    border-right: solid 20px transparent;
    border-left: solid 5px transparent;
    border-top: solid 20px #1b8b73;
}


a:hover.button:after  {
    border-top: solid 20px #3d3d3d; 
}

.some {
    text-align:center; 
    width:100%; 
    overflow: hidden;
}

.some h2 {
    display:none;
}

 .some ul {
    list-style: none;
    position: relative;
    float:left;
    display:block;
    left:50%;
    padding:0;
}

.some li {
    position: relative;
    float:left;
    display:block;
    right:50%;
}

.some a {
    display: block;
    float:left;
    text-indent: -999999px;
    height:40px;
    width:40px;
    border-radius:50%;
    background:#3d3d3d;
    background-image:url(../images/layout/some-icons.png);
    background-size:400%;
    background-repeat: no-repeat;
    background-position-y:50%; 
    margin:0 4px 0 4px;
    border-bottom:none;
}

.some a:last-child {
    margin-right:0;
    margin-right:0;
}

a.fb {
    background-position-x:-2px;
}

a.tw {
    background-position-x:-40px;
}


a.yt {
    background-position-x:-79px;
}

a.ig {
    background-position-x:-118px;
}

a.fb:hover {
    background-color:#3c5b9a;
} 

a.tw:hover {
    background-color:#69aad9;
} 

a.yt:hover {
    background-color:#cd201f;
} 

a.ig:hover {
    background-color:#b900b4;
} 


audio {margin:0.7em 0;}


hr {clear: both; visibility: hidden;}


@media (min-width: 400px) {
        header {
        height:500px;
    }
 
    h1 {
        margin:0 0 0 10px;
        height:100%;
        background-size:90%;
        background-position:0% 96%, 0 0;
    }
  
    main {
        background-image:url(../images/layout/vk-border.jpg); 
        background-position:100% -210px;     
        background-repeat:repeat-y;
        padding-right:30px;
    }
        
        article {
        margin-right:auto;
        margin-left:auto;
        max-width:28em;
    }
        
        h2 {
            font-size: 1.46em;
    }
}

@media (min-width:600px) {
    header {
        height:520px;
        background-position: 0 -50px;
    } 
        
    h1 {
        background-size:80%;
        background-position:0% 88%, 0 0;
    }
        
    article {
        max-width: inherit;
    }
    
    main {
        background-image:none;
        padding-right:inherit;
    }
    
    article.news {
        width:100%;
        text-align: center;
        background:#f2deb4; 
        background-image:url(../images/layout/vk-border.jpg), url(../images/layout/vk-border.jpg); 
        background-position:-1% -0px, 103% -210px;     
        background-repeat:repeat-y;
        padding:2.8em 0;
    }
    
    .teaserteksit h2 {
        font-size:2.2em;
        color: #8b381b;
    }
    
    .teaserteksit p, .teaserteksit ul {
        line-height:1.2;
        margin:0;
        padding:0 0.7em;
    }
    
    .teaser ul,.teaser li {
        display: inline;
    }
    
    .teaserteksit li:after {
        content:'\2044';
        font-size:1.2em;
        color:#8b381b;
    }
    
    .teaserteksit li:last-child:after {
        content:none;
    }
    
    
    
    .stores {
        background: #3e1506;
    }
    
    .stores h2 {display: none;}
    
    
    .stores ul {
        text-align:center;
        display:inline-block;
        width:90%;
        margin:0 auto;
        padding:0.7em;
    }
    
    
    .stores li {
        display:inline-block; 
        line-height:1;
        color:#8b381b; 
        text-transform: uppercase; 
        font-family: 'Oswald';
        font-size:1.2em;
        padding:0 0.35em;
}
 
     .stores a {
        border-bottom:none; 
        color:#f2ebdb; 
        transition:ease-in-out all 0.3s;
    }
    
    .stores a:hover {
        color:#1b8b73;
    }
    
    .stores li:last-child a {
        border-right:none;
    }
    
    .about img  {
        max-width:260px;
        float:left;
        margin:1.4em 1.4em 0.4em  5px;
    } 
   
    
    .contact {
        clear:both; 
        text-align: center;
        margin:3.7em 0 0;
    }
    
    section.contact {
        text-align: center;
      }
    
    .contact h2 {
        display:none;
      }
    
    .button{
        margin:2em  auto;
        width:20em;
    }
    
    .button:after  {
        left:100px;
    }
    
    .some{
        margin-left:-5px;
    }
    
}


@media (min-width:700px) {
    header {
        height:620px;
        background-position: 0 -100px;
    } 
    
   .teaserteksit h2 {
       font-size:1.8em;
       margin-top:-1em;
       line-height:1.2;
    }
    
    
    .teaserteksit h2 span {
        font-size:3.2em;
        display:inline-block;
        width:100%;
    }
    
    .teaserteksit li {
          font-size:1.2em;
        color:#8b381b;
    }
    
    
    .button:after  {
        left:40px;
    }
    
    .some {
        margin-top:2em;
    }
}


@media (min-width:800px) {
    header {
        background-position: 0 -150px;
} 
    
    h1 {
        background-size:70%;
        background-position:0% 38%, 0 0;
    }
    
    article.news {
        background-position:-1% -800px, 100% -210px;     
}
    .teaserteksit h2 {
        font-size: 2.2em;
        margin-bottom:1em;
    }
            
    .stores ul {
        display:block;
        width: 60%;
        margin:0 auto;
    }
    
    .about {
        max-width:46em;
        margin:0 auto;
    }
    
    
    
        .about img  {
        float:left;
        margin:1.4em 1.4em 0.4em  5px;
    } 
    
   footer a {display:inherit;}
    
    
} 


@media (min-width:700px) and (max-width:1023px) {
    
    .about img {float:left;}
    
    .artist-info {
        clear:right;
    }
    
    .contact {
        width:260px;
        margin:0 0 0 4px;
        float:left;
    }
    
    .button {width:228px;}
        
    .some {
        margin:10px 0 0 0px;
        width:180px;
        float:right;
    }
    
}

@media (min-width:1024px) {
    
    header {
        height:800px;
          background-position: 0 -180px;
        } 
           
    article.news {
        background-image:url(../images/layout/vk-border.jpg), url(../images/layout/vk-border.jpg); 
        background-position:-1% -800px, 100% -210px;     
        background-repeat:repeat-y;
        padding:2.8em 0;
        min-height:480px;
        position:relative;
   }
    
    .teaserteksit {
        width:50%; 
        position: absolute;
        left:40px;
    }
        
    .teaserteksit h2 {
        font-size:2.8em;
        line-height:1.2;
        margin:0em 0 0.2em;
    }
        
    .teaserteksit p {
        padding-top:2em;
    }
    
    .teaserteksit h2 span {
        font-size:2.8em;
    }
    
    .teaserteksit li {
        text-align:left;
        font-size: 1.3em;
    }
         
    .teaser img {
        max-width:60%;
        position: absolute;
        left:55%;
    }

    .about{
        max-width:60em;
        position:relative;
    }
    
    
    
    section.artist-info {
        max-width:36em;
        margin-left:0;
        
 }
    
    .contact {
        clear:none;
        display:block; 
        position:absolute;
        top:108px;
        left:638px;
        text-align:center;
    }
    
    
    .button {
        margin-left:0;
    }
        
    .button:after {
        left:50px;
    }
    
    .some {
        width:260px;
        position: absolute;
        top:40px;
        left:638px;
        text-align: left;    
    }   
       
    .some li a {
        margin:0 20px 10px 10px;
    }
    
}

@media (min-width:1200px) {
    
    header {
        background-position:100% -340px;
    } 
    
    h1 {
        background-size:70%;
        background-position:0% 18%, 0 0;
    }
    
    .teaserteksit p, .teaserteksit ul {
        padding:1.4em 0 0.6em;
    }
    
    .teaserteksit li {
        font-size: 1.2em;
    }
    
    .teaser img {
        left:57%;
    }
    
    .stores ul {
        width:80%;
    }
    
    .stores ul:after, .stores ul:before {
        content:"";
        display:inline-block;
        height:0.7em;
        width:0.7em;
        background:#8b381b;
        border-radius:50%;
        margin-bottom:0.2em;
    }
    
    .contact, .some {
        left:670px;
    }
    

    
}

@media (min-width:1400px) {
    header {
        background-position:0px -450px;        
}    
    
    .teaserteksit {left:100px;}
        section.artist-info {
        max-width:34em;
        margin-left:15%;
    }  
    
    .about {max-width:80em;}
    
        section.artist-info {
        max-width:46em;
        margin-left:0;    
 }
    
    .contact,.some {left:846px;}
    
    
    
}

@media (min-width:1600px) {
    
    header {
        background-position:0px -450px;        
}  
            
    h1 {
        background-size:70%;
        background-position:0% 30%, 0 0;
    }
    
    
    article.news {
        min-height:480px;
    }
    
    .teaserteksit {
        font-size:1.2em;
        text-align: right;
        width:68%;
        left:0;
        top:-10px;
    }
        
    .teaserteksit h2 span {
        font-size:3.6em;
    }
    
    .teaser img {
        left:71%;
    }

    .about {
        max-width:90%;
    }
    
    section.artist-info {
        margin-left:32px;
        max-width:46em;
 }
        
    .contact {
        left:60%;
        top:-10px;
    }
    
    .some{
        left:80%;
        top:30px;
    } 
}

@media (min-width:1700px) {
    
    h1 {
        background-size:70%;
        background-position:0% 46%, 0 0;
    }   

}

@media (min-width:1800px) {
        .about  {
            margin-left:200px;
            margin-top:0.7em;
            margin-bottom:0.7em;
    }
    
    .about img {
        max-width: 250px;
    }
    
    section.artist-info {
        max-width: 50em;
        margin-left:2.8em;
    }
}