::selection {
		background: #000 ; /* Safari */
		color: #fff;
	}
	::-moz-selection {
		background: #000 ; /* Safari */
		color: #fff;
	}
	
.marker { background: #000 ; 
	color: #fff;
	display: block;
	margin-right: 0.2em;
}

body {
      animation: colorchange 30s infinite; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 30s infinite; /* Chrome and Safari */
         color: #000;


font-family: urw-din, sans-serif;
    font-style: normal;
font-weight: 400;

    font-size: 1.7em;
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

    @keyframes colorchange
    {
      0%   {background: red;}
      33%  {background: yellow;}
      66%  {background: blue;}
      
      100% {background: red;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: red;}
      33%  {background: yellow;}
      66%  {background: blue;}
     
      100% {background: red;}
    }

h1 {
     font-size: 1.3em;
    font-weight: 400;

}

h2 {
     font-size: 1.3em;
    font-weight: 800;
      background:#000; 
    color: #fff;
}
.textmarker {
    display:inline; 
    background:#000; 
    color: #fff;
}


}

.responsive100 {
  max-width: 100%;
  height: auto;
}

.responsive_logo{
  max-width: 100%;
  height: auto;
}

ul {
    list-style: none;
    font-size: 2.1em;
    font-weight: 800;
}

* { box-sizing: border-box; }



/* ---- grid ---- */

.grid {
 max-width: 1920px; 
   text-align: center;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
 /*  width: 160px;
  height: 120px;*/
  float: left;
    text-align: left;
    overflow:hidden;
   margin: 5px; 
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }
.grid-item--width5 { width: auto; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
.grid-item--height5 { height: auto; }

/* .grid-item--footer { width: 100%; height: 1%; background-color: black; color: white; margin-left: -5px;} */

.grid-item--style1 {/*border: 2px solid #333; border-color: black; */}
.grid-item--style2 {background-color: black; color: white;}
.grid-item--style3 {}

@media screen and (max-width: 1280px) {
   /* .grid-item{ width: 48%; }  */
}

@media screen and (max-width: 640px) {
    
    .responsive_logo {
  max-width: 80%;
  height: auto;
}
    .responsive100 {
  max-width: 100%;
  height: auto;
}
    
    /* ---- grid ---- */

.grid {
 max-width: 100%; 
   text-align: center;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */


.grid-item--width2 { width: auto; }
.grid-item--width3 { width: auto; }
.grid-item--width4 { width: auto; }
.grid-item--width5 { width: auto; }

.grid-item--height2 { height: auto; }
.grid-item--height3 { height: auto; }
.grid-item--height4 { height: auto; }
.grid-item--height5 { height: auto; }
    .grid-item { width: 98%; }
}

/* ---- iphone 4 ----
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
         
 /* ---- grid ---- 

.grid {
 max-width: 100%; 
   text-align: center;
}

/* clearfix 
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- 


.grid-item--width2 { width: auto; }
.grid-item--width3 { width: auto; }
.grid-item--width4 { width: auto; }
.grid-item--width5 { width: auto; }

.grid-item--height2 { height: auto; }
.grid-item--height3 { height: auto; }
.grid-item--height4 { height: auto; }
.grid-item--height5 { height: auto; }
    .grid-item { width: 98%; }

/* ---- design ---- 

body {

    font-size: 2.5em;
   -webkit-text-size-adjust: none;
}    
      
      h1 {
     font-size: 2.1em;
    font-weight: 400;

}

h2 {
     font-size: 2.1em;
    font-weight: 800;
      background:#000; 
    color: #fff;
}
.textmarker {
    display:inline; 
    background:#000; 
    color: #fff;
}

.responsive33 {
  max-width: 33%;
  height: auto;
}
.responsive50 {
  max-width: 50%;
  height: auto;
}

.responsive100 {
  max-width: 100%;
  height: auto;
}

ul {
    list-style: none;
    font-size: 3.4em;
    font-weight: 800;
}
   
}
*/