body, html { width: 100%; height: 100%; }
body, p { font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem; }
hr { max-width: 50px; border-width: 3px; border-color: #F05F40; }
a { color: Black; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; text-decoration: none !important; }
a:hover { color: Black; text-decoration: none !important; }
a.marked { color: Black; text-decoration: underline !important; text-underline-offset: 4px; padding:0px 4px 2px 4px; }
a:hover.marked {  background-color: #FEFE79; text-decoration: underline !important; }
::-webkit-scrollbar {
  width: 0px;
}
.button { cursor: pointer; margin: 0.25rem; margin-left: 0rem; margin-top: 0rem; text-transform: uppercase; font-weight: 700; padding: 5px; padding-left: 8px; padding-right: 8px; color: Black; background-color: White; border: 1px solid Black; border-radius: 4px; }
.button:hover { color: Black; background: linear-gradient(to right, #ff93bf , #00d4ff); box-shadow: 0px 0px; border: 1px solid Black; border-radius: 4px; }
.BTNreadmore { float: left; padding-right: 1rem; cursor: pointer; border: 1px solid Black; background-color: black; color: white; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:300; border-radius: 3px; }
.BTNmorework { float: left; cursor: pointer; color: #FF3366; border: 2px solid #FF3366; background-color: White; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:500; border-radius: 3px; }
.brand_gall1 { padding: 15px 5%; width: 45%; opacity: 0.3; margin: 0; }
.brand_gall2 { padding: 9px 5%; width: 45%; opacity: 0.3; margin: 0; }  

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Arial, sans-serif; }
h2 { font-family: 'Barlow', sans-serif; text-transform: uppercase; padding-bottom: 0.3rem; font-size: 1.8rem; font-weight: 500; text-align: left; padding-left: 0px; line-height: 1; }
h3 { font-family: 'Barlow', sans-serif; font-size: 1.6rem; padding-left: 1px; font-weight:400; line-height: 1; }
h5 { font-size: 0.95rem; font-weight: 400; line-height: 1.5; text-align: left; padding-left: 1px; margin:0; }
h6 { font-size: 0.8rem; font-weight: 400; line-height: 1.3; text-align: left; padding-left: 1px; }


.masthead { background-position-x: center; }
header.masthead { text-align: left; background-image: url(''); background-position: center; background-repeat: no-repeat;  background-size: cover; }
.mastblock { position: relative; display: inline-block; margin: 0rem 0rem; width: 100vw; height: 100vh; text-align: left; }
.text-mastblock { overflow: hidden; position: absolute; left: 1.5rem; width: 80vw; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }
 
header.masthead h1 { font-family: 'Noto Serif'; font-size: 1.6rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 0.9; }
.h1_big { font-size: 160%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
header.masthead h4 { font-family: 'Barlow', Arial, sans-serif; text-transform: uppercase; display: inline; color: White; font-size: 1.2rem; color: white; font-weight: 300; padding-bottom: 0.3rem; line-height:1.1; }
.h2services { margin-left: -0.5rem; display: inline; margin-top: 0rem; padding-top: 0.2rem; line-height: 1.1; box-shadow: 10px 0px 0px black, -10px 0px 0px black; background-color: Black; color: White; font-family: 'Raleway'; font-weight: 400; font-size: 1.8rem; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; }
.h5services { margin-left: -1.0rem; line-height: 1.25; margin-top: 0.5rem; font-family: 'Open Sans'; font-size: 1rem; font-weight: 400; }

.artblock { float: left; padding: 0; padding-bottom: 2rem; }
section { padding: 2rem 0.5rem 4rem 0.5rem; overflow: hidden; }

#article_head { padding-left: 2rem; }
#article_category { padding: 10rem 1rem 0rem; color: White; text-transform: uppercase; max-width: 900px; }
#article_title { padding: 0.5rem 0.75rem; font-family: 'Noto Serif'; font-weight: 400; color: White; padding-bottom: 0.3rem; font-size: 2.5rem; line-height: 1; width: 80vw; text-align: left; display: inline-block; }
#article_shorttext { padding: 1rem 0.75rem; color: White; font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 400; text-align: left; width: 80vw; }
h4 { font-family: 'Barlow', sans-serif; text-transform: uppercase; padding-bottom: 0.3rem; font-size: 1.8rem; font-weight: 500; text-align: left; padding-left: 0px; line-height: 1; }
#article_text { font-size: 0.95rem; font-weight: 400; line-height: 1.5; text-align: left; padding: 2rem; margin:0; }
#article_text2 { font-size: 0.95rem; font-weight: 400; line-height: 1.5; text-align: left; padding: 0rem 2rem; margin:0; }
#article_addThis { width: 100%; padding: 1rem; padding-left: 2rem; padding-bottom: 0rem; text-align: left; float: left; }
.pictag { font-size: 0.8rem; font-weight: 400; line-height: 1.15; text-align: left; padding-left: 5px; padding-top: 0px; }

.showblock {  display: none; }
.showblockT { display: none; }
.showblock2 {  display: none; }
.showblockM { display: block; }

.bg-primary { background-color: White !important; }
.bg-darkXX { background-color: #212529 !important; }
.text-faded2 { color: rgba(255, 255, 255, 0.7); }

::-moz-selection { color: #fff; background: #212529; text-shadow: none; }
::selection { color: #fff; background: #212529; text-shadow: none; }
img::selection { color: #fff; background: transparent; }
img::-moz-selection { color: #000; background: transparent; }
body { -webkit-tap-highlight-color: #212529; }

.zoomframe { overflow: hidden; border: 0.1rem solid White; transition: transform 1s; transform: scale(1); z-index:1; }
.zoom:hover { transition: transform 1s; transform: scale(1.2); z-index:999; }
.btn { font-weight: 500; text-transform: uppercase; background-color: Black !important; border-radius: 3px; color: White; text-align: center; font-size: 1.25rem; }
.btn:hover, .btn:focus, .btn:active { background-color: #ee4b28 !important; }

.datetag { background-color: black; color: #EEE; display: inline-block; vertical-align: center;
  margin: 0.5rem 0rem 0rem 0rem; padding:5px 7px 6px; text-align: left; line-height: 1;
}


.bigabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.5rem; line-height: 1.1; }
.medabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 1.7rem; line-height: 1.2; }
.about { display: block; font-family: 'Noto Serif'; font-weight: 400; font-size: 1.5rem; line-height: 1.2; padding-top: 0.5rem; }
.smabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 1.2rem; line-height: 1.2; padding-top: 0.5rem; }
.xsabout { font-family: 'Noto Serif'; font-weight: 400; color: Black; font-size: 1.1rem; line-height: 1; }
#about { padding: 15rem 3rem; text-align: center; }

@media (min-width: 376px) {
  .sectionblockZZX { padding-left: 0rem; padding-right: 0rem; margin:0; } /* in navigator */
   
  .mastblock { width: 40vw; }
  .masthead { background-position-x: center; }
  .text-mastblock {}
  header.masthead h1 { font-size: 2rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 1.1; }
  .h1_big { font-size: 160%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
  header.masthead h4 { font-size: 1.65rem; color: white; font-weight: 300; padding-bottom: 0.3rem; line-height:1.1; }
  .h2services { margin-left: -0.25rem; font-weight: 500; font-size: 1.7rem; }
  .h5services { margin-left: -0.75rem; }
  .medabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 1.8rem; line-height: 1.2; }

  section { padding: 2rem 1rem 4rem 1rem;}
   /* #services { padding: 0.8rem; }
  #projects { padding: 0.5rem; } */

  .BTNreadmore { float: left; padding-right: 1rem; cursor: pointer; border: 1px solid Black; background-color: black; color: white; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:300; border-radius: 3px; }
  .BTNmorework { float: left; cursor: pointer; color: #FF3366; border: 2px solid #FF3366; background-color: White; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:500; border-radius: 3px; }
  .brand_gall1 { padding: 15px 1%; width: auto; opacity: 0.3; margin: 0; float: left; }
  .brand_gall2 { padding: 9px 1%; width: auto; opacity: 0.3; margin: 0; float: left; }  

  .bigabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 3rem; line-height: 1.1; }
  .about { font-family: 'Noto Serif'; font-weight: 400; font-size: 1.5rem; line-height: 1.3; }
  .smabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2rem; line-height: 1.25; }
  .xsabout { font-size: 1.45rem; }
  #about { padding: 15rem 4rem; text-align: center; }

  .h4 { color: black; font-family: 'Open Sans'; font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
  
  .navbar { padding: 0rem 2rem; }
  .navbar-menu { margin-top: 0px !important; }
  .artblock { padding-bottom: 2rem; }

  #article_category { padding-top: 12rem; max-width: 900px; }
  #article_title { font-size: 3.6rem; line-height:0.9; width: 90vw; display: inline-block; }
  #article_text { font-size: 1.05rem; font-weight: 400; line-height: 1.25; }
  #article_text2 { font-size: 1.05rem; font-weight: 400; line-height: 1.25; }
}

/* for Alternative Phones?! */
@media (min-width: 412px) {
  .h4 { color: black; font-family: 'Open Sans'; font-size: 1rem; line-height: 1.3; font-weight: 400; }
}

/* for Tablets */
@media (min-width: 768px) {
  .sectionblockZZX { padding-left: 0rem; padding-right: 0rem; margin: 0; text-align: left; float: left; } /* in navigotor */

  header.masthead { text-align: left; }

  .mastblock {}
  .text-mastblock { font-size: 8rem; line-height: 1.1; left: 4rem; width: 80vw; }
  header.masthead h1 { font-size: 2.6rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 1.1; }
  .h1_big { font-size: 160%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
  header.masthead h4 { font-size: 1.35rem; color: white; font-weight: 300; padding-bottom: 0.3rem; line-height:1.1; }
  .h2services { margin-left: 0.25rem; font-weight: 500; font-size: 1.8rem; }  
  .h5services { margin-left: -0.5rem; }
  .medabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.3rem; line-height: 1.2; }

  section {  padding: 3rem 3rem 6rem; }
  /* #services { padding: 2.5rem; }
  #projects { padding: 4rem; } */

  .BTNreadmore { float: left; padding-right: 1rem; cursor: pointer; border: 1px solid Black; background-color: black; color: white; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:300; border-radius: 3px; }
  .BTNmorework { float: left; cursor: pointer; color: #FF3366; border: 2px solid #FF3366; background-color: White; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:500; border-radius: 3px; }
  .brand_gall1 { padding: 15px 3.5%; opacity: 0.3; margin: 0; float: left; }
  .brand_gall2 { padding: 9px 4%; opacity: 0.3; margin: 0; float: left; }  

  .showblock {  display: block; }
  .showblockT { display: none; }
  .showblockM { display: none; }

  .bigabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 4rem; line-height: 1.5; }
  .about { font-family: 'Noto Serif'; font-weight: 400; font-size: 2rem; line-height: 1.5; }
  .smabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2rem; line-height: 1.25; }
  .xsabout { font-size: 1rem; }

  h2 { font-size: 2rem; line-height: 1.0; font-weight: 500; }
  h3 { font-size: 1.8rem; line-height: 1; font-weight: 400; }
  .h4 { color: black; font-family: 'Open Sans'; font-size: 1.1rem; line-height: 1.5; font-weight: 400; }
  h5 { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
  #article_head { padding-left: 4rem; }
  #article_category { padding-top: 16rem; max-width: 900px; }
  #article_title { font-size: 4rem; line-height:0.9; max-width: 650px; display: inline-block; }
  #article_shorttext { font-size: 0.95rem; max-width: 650px; }
  h4 { font-size: 2rem; line-height: 1.0; font-weight: 500; }
  #article_text { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
  #article_text2 { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }

  .navbar { padding: 0rem 4rem; }
  .navbar-menu { margin-top: 0px !important; }
  .artblock { padding: 0; padding-bottom: 2rem; }

  button { margin: 0.75rem; margin-left: -0.25rem; margin-top: 0rem; }
}

@media (min-width: 992px) {
  .sectionblockZZx { padding-left: 0rem; padding-right: 0rem; text-align: left; float: left; }
  header.masthead { height: 100vh; min-height: 650px; text-align: left; }

  .mastblock {}
  .text-mastblock { left: 4rem; width: 60vw; }
  header.masthead h1 { font-size: 3rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 1.1; }
  .h1_big { font-size: 200%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
  header.masthead h4 { font-size: 1.65rem; color: white; font-weight: 300; padding-bottom: 0.3rem; line-height: 1.1; }
  .h2services { font-weight: 500; font-size: 1.4rem; }  
  .h5services { font-size: 0.85rem; font-weight: 500; }
  .medabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.6rem; line-height: 1.5; }

  .showblock {  display: block; }
  .showblock2 {  display: block; }
  .showblockT { display: inline; }
  .showblockM { display: none; }
  section { padding: 5rem 3rem 7rem; color: #}
  /* #services { padding: 2.75rem; }
  #projects { padding: 4rem; } */

  .BTNreadmore { float: left; padding-right: 1rem; cursor: pointer; border: 1px solid Black; background-color: black; color: white; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:300; border-radius: 3px; }
  .BTNmorework { float: left; cursor: pointer; color: #FF3366; border: 2px solid #FF3366; background-color: White; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:500; border-radius: 3px; }
  .brand_gall1 { padding: 15px 3.5%; opacity: 0.3; margin: 0; float: left; }
  .brand_gall2 { padding: 9px 4%; opacity: 0.3; margin: 0; float: left; }  

  .bigabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 5rem; line-height: 1.5; }
  .about { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.5rem; line-height: 1.2; }
  .smabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.15rem; line-height: 1.2; }
  .xsabout { font-size: 1rem; }
  #about { padding: 15rem 5rem; text-align: center; }  

  h2 { font-size: 2rem; line-height: 1.0; font-weight: 500; }
  h3 { font-size: 1.8rem; line-height: 1; font-weight: 400; }
  .h4 { color: black; font-family: 'Open Sans'; font-size: 1.2rem; line-height: 1.5; font-weight: 400; }
  h5 { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
  h6 { font-size: 0.85rem; line-height: 1.3; font-weight: 400; }

  
  #article_head { padding-left: 4rem; }
  #article_title { font-size: 5rem; line-height:0.9; max-width: 800px; display: inline-block; }
  #article_category { padding-top: 16rem; max-width: 900px; }
  #article_shorttext { font-size: 1.0rem; max-width: 700px; }
  h4 { font-size: 2rem; line-height: 1.0; font-weight: 500; }
  #article_text { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
  #article_text2 { font-size: 0.95rem; line-height: 1.5; font-weight: 400; padding-top:2rem; }

  .artblock { padding: 4rem; padding-left: 0rem; padding-bottom: 0rem; }
  .navbar { padding: 0rem 6rem; }
  .navbar-menu { margin-top: -55px !important; }
}

@media (min-width: 1200px) {
  .row { padding: 0px; max-width: 1600px; margin: auto; }
  header.masthead { height: 100vh; min-height: 650px; text-align: left; max-width: 1600px; margin: auto;  }
  /* .mastblock { border: 0px solid red; } obsolete ?! */
  .text-mastblock { width: 40%; padding-left: 1rem; }
  header.masthead h4 { font-size: 1.65rem; color: white; font-weight: 300; padding-bottom: 0.3rem; line-height:1.1; }

  .h2services { font-weight: 500; font-size: 1.9rem; } 
  .h5services { font-size: 1.1rem; line-height: 1.5; font-weight: 500; }


  .BTNreadmore { float: left; padding-right: 1rem; cursor: pointer; border: 1px solid Black; background-color: black; color: white; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:300; border-radius: 3px; }
  .BTNmorework { float: left; cursor: pointer; color: #FF3366; border: 2px solid #FF3366; background-color: White; margin-left: -2px; padding: 5px; padding-left: 8px; padding-right: 8px; font-size: 1.3rem; font-weight:500; border-radius: 3px; }
  .brand_gall1 { padding: 15px 3.5%; opacity: 0.3; margin: 0; float: left; }
  .brand_gall2 { padding: 9px 3%; opacity: 0.3; margin: 0; float: left; }  

  .bigabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 5rem; line-height: 1.5; }
  .about { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.6rem; }
  .smabout { font-family: 'Noto Serif'; font-weight: 400; font-size: 2.5rem; }
  .xsabout { font-size: 1.3rem; }

  .showblockM { display: none; }

  header.masthead h1 { font-size: 3rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 1.1; }
  .h1_big { font-size: 200%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
  h2 { font-size: 2.2rem; line-height: 1.0; font-weight: 500; }
  h3 { font-size: 2rem; font-family: Barlow; font-weight: 400; line-height: 1; }
  .h4 { font-family: 'Open Sans'; font-size: 1.3rem; line-height: 1.5; font-weight: 400; }
  h5 { font-size: 0.95rem; font-weight: 400; line-height: 1.5; color: #333; }
  h6 { font-size: 0.85rem; line-height: 1.3; font-weight: 400; text-align: left; }
  #article_head { padding-left: 0px; background-size: 100%; max-width: 100vw; }
  #article_title { font-size: 5rem; line-height:0.9; max-width: 1000px; }
  #article_category { padding-top: 20rem; }
  #article_shorttext { font-size: 1.2rem; max-width: 900px; }
  h4 { font-family: 'Barlow', serif; font-size: 2.2rem; font-weight: 500; line-height: 1.0; text-transform: uppercase; }
  #article_text { font-size: 0.95rem; font-weight: 400; line-height: 1.5; }
  #article_text2 { font-size: 0.95rem; font-weight: 400; line-height: 1.5; }
}


@media (min-width: 1600px) {
  header.masthead h1 { font-size: 3rem; color: White; font-weight: 500; padding-bottom: 5%; line-height: 1.1; }
  .h1_big { font-size: 200%; font-weight: 900; opacity: 0.9; color: #FF3366; line-height: 1; }
  .text-mastblock { width: 40%; padding-left: 8rem; }
  #article_head { padding-left: 0px; background-size: 100%; max-width: 100vw; }
}

.save { border-width: 0px; display: block; font-size: .8em; font-weight: bold; margin: 0.2em; padding: 0.4em;
  float: left; text-align: center; background: #9AF; box-shadow: 0 1px 2px rgba(0,0,0,0.2); background: -moz-linear-gradient(#00ADEE 5%, #0078A5 80%); background: -webkit-linear-gradient(#00ADEE 5%, #0078A5 80%); border-radius: 0.25em; border-color: #0076A3; color: #FFF; cursor: pointer;
}
.save:hover { background: #00ADEE;
}

.makeup { border-width: 0px; display: block; font-size: .8em; font-weight: bold; margin: 0.2em; padding: 0.4em;
  float: left; text-align: center; background: transparent; box-shadow: 1px 1px rgba(200,200,200,0.8); border-radius: 0.25em; border-color: #fff; color: #FFF; cursor: pointer;
}
.makeup:hover { background: #3a7084;
}