body {
  background-color: rgba(255, 0, 0, 1);
  background: transparent url(../gfx/lhm-opt.svg) center center;
  background-size: 1500px, 1500px;
  font-family: pixel, pixel7, Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: cyan;
}

body.sketchbook,
body.paintings,
body.graphic-design {
  background: rgb(13, 13, 13) none !important;
}


h1 {
  font-size: 1.5rem;
  font-family: pixel, sans-serif;
}


h2 {
  font-size: 1.25rem;
  font-family: pixel, sans-serif;
  position: relative;
}


p {}

#container p { color:red;}

.row {
  margin: 0;
  padding: 0 !important;
}

.content {
  display: block;
  position: relative;
  margin: 0px auto;
  padding: 0px;
}


.content .row, .footer .row {
  /*outline: 0px solid red;*/
  max-width: 1000px;
  margin: 1.5em auto;
  text-align: center;
}

.columns {
  margin: 0 !important;
  padding: 0 !important;
  /*outline: 1px solid green !important;*/
}


#container {
  /*display: none;*/
  display: block;
  position: relative;
  width: 1000px;
  background: rgba(255,255,255,0.5);
  outline: 7px solid
   !important;
  z-index: -9999;
  margin: 0px auto;
}


.decorblock a {
  padding: 0.5em;
  background: magenta;
  box-shadow: 7px -7px 0px darkcyan;
  outline: 0px solid red;
  /*margin-right: 40em;*/
  animation: footeranim 900ms linear infinite forwards;
}

@keyframes footeranim {

0% {
  background: magenta;
  box-shadow: 10px -10px 0px darkcyan;
}
16.6% {
  background: orange;
  box-shadow: 10px -10px 0px #ff9999;
}
33.2% {
  background: yellow;
  box-shadow: 10px -10px 0px cyan;
}
49.8% {
  background: #00e64d;
  box-shadow: 10px -10px 0px #ffff66;
}
66.4% {
  background: #00cc44;
  box-shadow: 10px -10px 0px #00e6ac;
}
83% {
  background: #0099ff;
  box-shadow: 10px -10px 0px red;
}
100% {
  background: #99004d;
  box-shadow: 10px -10px 0px orange;
}
}


#card {
  /*display: block;*/
  position: absolute;
  top:27%;
  left: 0%;
  width: 700px;
  height:150px;
  /*min-height:200px;*/
  background: rgb(13, 13, 13);
  transform: translate(0%, -50%);
  transform: translate(0%, calc( -50% - 2rem ));
  /*text-align: center;*/
  /*padding: 2em;*/
  mix-blend-mode: normal;

}


#lhmlogo {
  position: relative;
  display: block;
  width: 85px;
  top: 50%;
  left:82%;
  transform: translate(-50%,-50%);
  mix-blend-mode: normal;
}

#contentcard {
  /*display: none;*/
  position: relative;
  width: 100%;
  height:200px;
  background: rgb(13, 13, 13);
  padding-top: 2em;
  mix-blend-mode: normal;
  /*border: 1px solid red;*/
}

#contentcard .name a {
  padding: 0.5em;
  background: magenta;
  box-shadow: 7px -7px 0px darkcyan;
  outline: 0px solid red;
  margin-left: 15em;
  animation: ccardanim 1000ms linear infinite forwards;
}

@keyframes ccardanim {
  0% {
    background: magenta;
    box-shadow: 10px -10px 0px darkcyan;
  }
  16.6% {
    background: orange;
    box-shadow: 10px -10px 0px #ff9999;
  }
  33.2% {
    background: yellow;
    box-shadow: 10px -10px 0px cyan;
  }
  49.8% {
    background: #00e64d;
    box-shadow: 10px -10px 0px #ffff66;
  }
  66.4% {
    background: #00cc44;
    box-shadow: 10px -10px 0px #00e6ac;
  }
  83% {
    background: #0099ff;
    box-shadow: 10px -10px 0px red;
  }
  100% {
    background: #99004d;
    box-shadow: 10px -10px 0px orange;
  }
}

#contentcard #lhmlogo {
  position: relative;
  display: block;
  width: 90px;
  /*transform: translate(-50%,-50%);*/
  mix-blend-mode: normal;
}

.nonindex #contentcard #lhmlogo {
  top:100px;
}

.graphic-design #contentcard #lhmlogo {
  fill:cyan;
}

.graphic-design .content a +  p {
  margin-top: 0.3em;
  font-family: pixel7, Arial, Helvetica, sans-serif;
  color: #d9d9d9

}

.sketchbook #contentcard #lhmlogo {
  fill:cyan;
}
.paintings #contentcard #lhmlogo {
  fill:cyan;
}

.sketchbook .lhmgallery {}

.sketchbook .lhmgallery img {
    margin: .5rem;
}



.m-gd {
  position: absolute;
  top: 52%;
  left:50%;
  transform: rotate(90deg) translate(-200px,-120px) ;
  /*outline: 1px solid red;*/
}
.m-gd:hover {
  cursor: pointer;
  color: purple;
}


.m-p {
  position: absolute;
  top: calc(50% - 10px);
  left:calc(50% + 35px);
  /*top: 49%;
  left:52%;*/
/*outline: 1px solid red;*/
}
.m-p:hover {
  cursor: pointer;
  color: purple;
}


.m-s {
  position: absolute;
  top: calc(50% - 180px);
  left:calc(50% - 50px);
/*outline: 1px solid red;*/
}
.m-s:hover {
  cursor: pointer;
  color: purple;
}


a, a:visited {
  color: cyan !important;
}

a:hover {
  color: magenta !important;
}

a:active {
  color: red !important;
}

/*639px*/
@media screen and (max-width: 39.9375em) and (orientation: portrait){

  /*ip5*/
  #card {
    display: block;
    position: relative;
    top:0%;
    left: 0%;
    width: 100%;
    height:auto;
    margin-top:20vh;
    padding: .5em !important;
    background: rgb(13, 13, 13);
    transform: translate(0%, 0%);
    text-align: center;
    mix-blend-mode: normal;
    font-size: 50%;
  }
  #card h1 { font-size: 1rem;}
  #card p { font-size: 1rem;}
  #lhmlogo {
    /*transform: none !important;*/
    position: relative;
    display: block;
    width: 55px;
    top: 0%;
    left:0%;
    transform: translate(0%,0%);
    margin: 0px auto;
    margin-top: 1em;
    margin-bottom: 1.5em;
    mix-blend-mode: normal;
  }

  .m-gd, .m-p, .m-s {
    display: inline-block;
    width: 100%;
    text-align: left;
    position: relative;
    top: auto;
    padding: 1rem 0rem 1rem 20vw;
    left: auto;
    transform: none;
    margin: 0px auto;
    background-color: rgba(0, 0, 0, 0.5);
  }


  #contentcard {
    /*display: none;*/
    position: relative;
    width: 100%;
    height:200px;
    background: rgb(13, 13, 13);
    padding-top: 2em;
    mix-blend-mode: normal;
    /*border: 1px solid red;*/
    margin-bottom: 3em;
  }
  #contentcard .name p {
    /*text-align: center;*/
  }

  #contentcard .name a {
    display: inline-block;
    padding: 0.5em;
    background: magenta;
    box-shadow: 7px -7px 0px darkcyan;
    outline: 0px solid red;
    margin-left: 1em; /* OPTIKAI KOZEP A TARTALMI OLDALAKON  */
    animation: ccardanim 1000ms linear infinite forwards;
  }

  .nonindex #contentcard #lhmlogo {
    top:0.5em;
    width: 75px;
    margin: 2em 0em 3em 2em;
    left: 0em;
    transform: translate(0%,0%);
  }




}

@media screen and (max-width: 39.9375em) and (orientation: landscape){

  #card {
    display: block;
    position: relative;
    top:0%;
    left: 0%;
    width: 100%;
    height:15vw;
    margin-top:0vh;
    padding: .5em !important;
    background: rgb(13, 13, 13);
    transform: translate(0%, 0%);
    text-align: center;
    mix-blend-mode: normal;
    font-size: 50%;
  }

  #card h1 { font-size: 1.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3em); }
  #card p { font-size: 1.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3em); }

  #lhmlogo {
    /*transform: none !important;*/
    position: absolute;
    display: block;
    width: 50px;
    top: .5em;
    left:5em;
    transform: translate(0%,0%);
    margin: 0px auto;
    margin-top: 1em;
    margin-bottom: 1.5em;
    mix-blend-mode: normal;
  }

  .m-gd, .m-p, .m-s {
    display: inline-block;
    height: calc((85vh - 2em) /3);
    width: 100%;
    text-align: left;
    position: relative;
    top: auto;
    padding: 1rem 0rem 1rem 20vw;
    left: auto;
    transform: none;
    margin: 0px auto;
    background-color: rgba(0, 0, 0, 0.5);
  }


    #contentcard {
      /*display: none;*/
      position: relative;
      width: 100%;
      height:200px;
      background: rgb(13, 13, 13);
      padding-top: 2em;
      mix-blend-mode: normal;
      /*border: 1px solid red;*/
      margin-bottom: 3em;
    }
    #contentcard .name p {
      /*text-align: center;*/
    }

    #contentcard .name a {
      display: inline-block;
      padding: 0.5em;
      background: magenta;
      box-shadow: 7px -7px 0px darkcyan;
      outline: 0px solid red;
      margin-left: 1em; /* OPTIKAI KOZEP A TARTALMI OLDALAKON  */
      animation: ccardanim 1000ms linear infinite forwards;
    }

    .nonindex #contentcard #lhmlogo {
      top:0.5em;
      width: 75px;
      margin: 2em 0em 3em 2em;
      left: 0em;
      transform: translate(0%,0%);
    }



}

/* Medium and up 640px */
/*@media screen and (min-width: 40em) {}*/

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  /*ip6 landscape*/

  #card {
    display: block;
    position: relative;
    top:0%;
    left: 0%;
    width: 100%;
    height:25vh;
    margin-top:0vh;
    padding: .5em !important;
    background: rgb(13, 13, 13);
    transform: translate(0%, 0%);
    text-align: center;
    mix-blend-mode: normal;
    font-size: 50%;
  }

  #card h1 { font-size: 1.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3em); }
  #card p { font-size: 1.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3em); }

  #lhmlogo {
    /*transform: none !important;*/
    position: absolute;
    display: block;
    width: 50px;
    top: .5em;
    left:5em;
    transform: translate(0%,0%);
    margin: 0px auto;
    margin-top: 1em;
    margin-bottom: 1.5em;
    mix-blend-mode: normal;
  }

  .m-gd, .m-p, .m-s {
    display: inline-block;
    height: calc((85vh - 2em) /3);
    width: 100%;
    text-align: left;
    position: relative;
    top: auto;
    padding: 1rem 0rem 1rem 20vw;
    left: auto;
    transform: none;
    margin: 0px auto;
    background-color: rgba(0, 0, 0, 0.5);
  }


    #contentcard {
      /*display: none;*/
      position: relative;
      width: 100%;
      height:200px;
      background: rgb(13, 13, 13);
      padding-top: 2em;
      mix-blend-mode: normal;
      /*border: 1px solid red;*/
      margin-bottom: 3em;
    }
    #contentcard .name p {
      /*text-align: center;*/
    }

    #contentcard .name a {
      display: inline-block;
      padding: 0.5em;
      background: magenta;
      box-shadow: 7px -7px 0px darkcyan;
      outline: 0px solid red;
      margin-left: 1em; /* OPTIKAI KOZEP A TARTALMI OLDALAKON  */
      animation: ccardanim 1000ms linear infinite forwards;
    }

    .nonindex #contentcard #lhmlogo {
      top:0.5em;
      width: 75px;
      margin: 2em 0em 3em 2em;
      left: 0em;
      transform: translate(0%,0%);
    }


}

@media screen and (min-width: 40em) and (max-width: 63.9375em) and (orientation: portrait) {
/* ipad portrait*/

#card {
  display: block;
  position: relative;
  top:0%;
  left: 0%;
  width: 100%;
  height:15vh;
  margin-top:0vh;
  padding: .5em !important;
  background: rgb(13, 13, 13);
  transform: translate(0%, 0%);
  text-align: center;
  mix-blend-mode: normal;
  font-size: 50%;
}

#card h1 { font-size: 2.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3.5em); margin-top: .5rem;}
#card p { font-size: 2.25rem; outline: 0px solid red; width: calc(100vw - 50px - 5em); text-align: left; margin-left:calc(50px + 3.5em); }

#lhmlogo {
  /*transform: none !important;*/
  position: absolute;
  display: block;
  width: 10vh;
  top: .5em;
  left:5em;
  transform: translate(0%,0%);
  margin: 0px auto;
  margin-top: 1em;
  margin-bottom: 1.5em;
  mix-blend-mode: normal;
}

.m-gd, .m-p, .m-s {
  display: inline-block;
  height: auto;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  position: relative;
  top: auto;
  padding: 1rem 0rem 1rem 25.5vw;
  left: auto;
  transform: none;
  margin: 0px auto;
  background-color: rgba(0, 0, 0, 0.5);
}



}



/* Large and up */
@media screen and (min-width: 64em) {
  /*ipad landcape*/

  #card {
    /*display: block;*/
    position: absolute;
    top:85vh;
    left: 0%;
    width: 700px;
    height:150px;
    /*min-height:200px;*/
    background: rgb(13, 13, 13);
    transform: translate(0%, -50%);
    transform: translate(0%, calc( -50% - 2rem ));
    /*text-align: center;*/
    /*padding: 2em;*/
    mix-blend-mode: normal;

  }

}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}
/* Large only */
@media screen and (min-width: 74.9375em)  {
  #card {
    /*display: block;*/
    position: absolute;
    top:15%;
    left: 0%;
    width: 700px;
    height:150px;
    /*min-height:200px;*/
    background: rgb(13, 13, 13);
    transform: translate(0%, -50%);
    transform: translate(0%, calc( -50% - 2rem ));
    /*text-align: center;*/
    /*padding: 2em;*/
    mix-blend-mode: normal;

  }
}








@font-face {
    font-family: 'pixel';
    src: url('../font/pixel_intv-webfont.woff2') format('woff2'),
         url('../font/pixel_intv-webfont.woff') format('woff'),
         url('../font/pixel_intv-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'pixel7';
    src: url('../font/pixel_font-7-webfont.woff2') format('woff2'),
         url('../font/pixel_font-7-webfont.woff') format('woff'),
         url('../font/pixel_font-7-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}