@import "index_icons.css";

a { color:#316394; text-decoration:none}
a { color:#007DE5; }

header a:hover, header .icons a:hover { color: #316394; }
header a.active { color: #316394; }
header .menu {margin-top:-54px}
header .icons a:hover {color:#316394}

.menu svg { vertical-align:top; margin-left:5px  }
.menu a:hover { color:#316394; }
.menu a:hover svg polygon { fill:#316394; stroke:#316394 }
.menu a:hover svg path { stroke:#316394 }

footer .container { background:  #316394; }
footer .canals a {padding:0px; }
footer .menu {margin-top:-54px}
footer .links {padding-bottom:0px}
footer .menu a:hover {color:white !important}

#sixpackfilm-Logo path { fill:#316394}
.indexlogomobil, .onlymobile { display:none}


.pagination a.active {  color: #316394; }
.pagination a:hover {  background: #316394; }
.pagination a.active:hover {  color: white; }

.card .item {font-size: 18px !important;}
.card .item:nth-child(3) { text-align:right}
.card svg { vertical-align:text-bottom;  }
.card a:hover svg .hover { fill:#007DE5}
.card a:hover .downloadicon svg path { stroke:white}
.card .buytext {margin-right:5px; font-size: 18px;}
.card a:hover { color:#007DE5; text-decoration:none}

.card .buyicon {padding-right:5px; display:inline-block}
.card .buytext {display:inline-block}
.card .inactive { color: #a3a3a3 }
.card .soldout { color: #a3a3a3 }
.card .shipping_info { font-size:0.8em}

.movielist .container, .moviedetail { border-top: 1px solid black; padding-top: 20px}
.movielist .container {padding-top: 30px}
.movielist .release {  display: grid; grid-template-columns: 60px auto;}
.movielist .releasedata  {  margin-bottom: 32px;}
.movielist .releasef img { max-height:263px }
.movielist .card  { }
.movielist .card a {margin-right:0px}
.movielist .card .item:nth-child(3) { text-align:left}
.movielist .card .item .buyicon { padding-right:5px}
.movielist .card .item  { padding-right:5px}

.movielist .thumb {position:relative;margin-bottom: 90px; }
.movielist .cardbottom {position:absolute;width:100%; bottom:0}
.movielist .thumb .releasenr {font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;  font-weight:500; font-size:1.3em; }

.moviedetail .movietitl { display:flex }
.moviedetail .movietitl h1  { margin-bottom:0px; line-height:1.1em; margin-right:0.5em}
.moviedetail .movietitl h2 { margin-top:0px; font-family: "Benton Sans Bk", Roboto, Arial, Helvetica, sans-serif; font-size:2em; line-height:1.10em}
.moviedetail .movietitl svg:hover path { stroke:black }
.moviedetail .movietitl svg { vertical-align:baseline }
.moviedetail .movietitl {margin-bottom:1em}
.moviedetail .releasecontent { border-top: 1px solid black; margin-top:42px; padding-top:15px; padding-bottom:6px; padding-left:10px}
.moviedetail .opensub  { border-top: 1px solid black; margin-top:42px; padding-bottom:6px; padding-left:0px}
.moviedetail .releasecontent .content { padding-right:0px; }
.moviedetail .tracktitle { padding:0px 15px;}
.moviedetail .tracktitle a:hover svg path { stroke:#000000 }
.moviedetail .trackyear, .moviedetail .tracknr {  }
.moviedetail .trackduration { text-align:right; padding-right:0px; font-size:0.9em}
.moviedetail .meta {width:100%}
.moviedetail .tracknr {  text-align:right; padding-right:5px }
.moviedetail .releaseslides { margin-top:20px}
.moviedetail .releasesimgcaption { font-size:0.9em; margin-top:5px;}
.moviedetail .pure-img-index  {width:auto; height:300px; display: block; margin-left: auto; margin-right: auto; } 
.moviedetail .PDFFlip { height:340px;}
.moviedetail .cardmobile {display:none} 

.slick-prev {
    left: 0px !important;
}
.slick-next {
    right: 0px !important;
    
}

@media screen and (max-width: 1280px) {
  .moviedetail .card .item:nth-child(3) { text-align:left}
  .moviedetail .buyicon { width:60px}
  .moviedetail .buytext { width:100px}
}

@media screen and (max-width: 1024px) {
  .movielist .card .item .buyicon { padding-right:2px}
  .thumb { margin-bottom: 40px; }
  .moviedetail .movietitl h1, .moviedetail .movietitl h2  { font-size: 1.9em; }
  /*.movielist .pure-g [class*="pure-u"], .moviedetail .pure-g [class*="pure-u"] { font-size:1em}*/
}

@media screen and (max-width: 768px) {
  .onlymobile { display:inline-block }
  .hidemobile { display:none }
  header, #menu { background:  #316394; }
  header .mlang { float:right; padding-left: 0;}
  header .mcard { float:left }
  header .menu { margin-top: -4px;  }
  .sixplogo, .indexlogo { display:none}
  .indexlogomobil { display:inline-block}
  .icon_warenkorb.mobilemenu { line-height: 1.6em }
  .menu a:hover svg polygon, .menu a svg polygon { fill:white; stroke:white }
  .menu a:hover svg path, .menu a svg path, .mcard svg polygon { stroke:white}

  header .container { justify-content: space-between }
  header .toggle { width:100px}
  header .msearch { width:30%}
  header .toggle svg { margin-top:3px}
  header .logo { text-align:left}

  .movielist .container, .moviedetail { padding-top: 0px}
  .movielist {  margin-top: 20px; }
  .movielist .container, .moviedetail { border-top:0px;}
  .movielist .card .item  {padding:0px}
  .movielist .card .item  svg { height:16px}
  .movielist .card .item .buyicon { padding-right:0px; text-align:left}
  .movielist .card .item  { padding-right:0px}
  .moviedata .releaseslides {max-width:calc(100vw - 40px)}
  .movielist .releaseimg { text-align:center}
  .movielist .releaseimg img {margin:0px 0px 20px 0px;}
  .movielist .release { display:block}
  .movielist .thumb .title { margin-top:0px}
  
  .moviedetail .carddesktop { display:none} 
  .moviedetail .cardmobile {display:block} 
  .moviedetail .card .buyicon { padding-right:0px; text-align:left}
  .moviedetail .moviedata .left { padding-bottom: 0px} 
  .moviedetail .releasecontent { margin-top:0px}
  .moviedetail .releasecontent {padding-left:5px}
}

@media screen and (max-width: 414px) {
  footer .menu {margin-top:0px}
  footer .canals {text-align:left}
  .movielist .card .item  {font-size: 0.9em}  
  .moviedetail .movietitl { display: block;}
  .moviedetail .pure-img-index  {height:200px;} 
  .moviedetail .PDFFlip { height:240px;}
}