@charset "UTF-8";
/* CSS Document */


/* ======================================================
   GENERAL
   ====================================================== */


/* Reset browser default styles: */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
  list-style: none;
}





 :root {
    --backgr-color: hsla(0,0%,0%,0.025);
	--inner-backgr: hsla(0,0%,0%,0.05);
	--font-color1: hsla(0,0%,0%,1.00);
	--font-color2: hsla(0,0%,0%,0.50);
	--font-color3: hsla(0,0%,0%,0.25);
	--rd-color: hsla(0,0%,0%,0.50);
    --rd-hover: hsla(0,0%,0%,1.00);
	--font-color-inv: hsla(0,0%,100%,1.00);
	--font-color-inv-hover: hsla(0,0%,100%,0.75);
	
	--filter: brightness(45%);
	--filter-hover: brightness(100%);
	
	--menu-backgr: hsla(0,0%,0%,0.90);
	--square-back: hsla(0,0%,0%,0.90);
 
    --link-color: hsla(0,0%,25%,1.00);
    --link-hover: hsla(0,0%,0%,1.00);
	--medium-color: hsla(0,0%,50%,1.00);
    --border-color: #999;
    --bg-trans: hsla(0,0%,100%,0.50);
    --gallery-border: #fff;
	--menu-bg: hsla(0,0%,100%,0.99);
	--menu-font: hsla(0,0%,0%,0.85);
	--menu-font-hover: hsla(0,0%,0%,0.99);
	--logo-color-a: hsla(0,0%,0%,0.99);
	--home-bg: url(../img/home-white.jpg);
	--hometype-backgr: hsla(0,0%,0%,0.40);
	--hometype-color: hsla(0,0%,100%,0.99);
	--hometype-hover: hsla(0,0%,0%,0.90);
	--overlay-backgr: hsla(0,0%,100%,0.80);
	--grid-backgr: hsla(0,0%,0%,0.07);
	--fancy-backgr: hsla(0,0%,100%,1.00);
	--button-backgr: hsla(0,0%,100%,0.90);
	--button-color: hsla(0,0%,0%,0.70);
	--button-hover: hsla(0,0%,0%,0.99);
	--button-disabled: hsla(0,0%,1%,0.6);
	--line: hsla(0,0%,0%,0.3);
	
}

[data-theme="dark"] {
	--backgr-color: hsla(0,0%,0%,1.00);
	--inner-backgr: hsla(0,0%,100%,0.20);
	--font-color1: hsla(0,0%,100%,1.00);
	--font-color2: hsla(0,0%,100%,0.50);
    --font-color3: hsla(0,0%,100%,0.25);
	--rd-color: hsla(0,0%,100%,0.50);
    --rd-hover: hsla(0,0%,100%,1.00);
	--font-color-inv: hsla(0,0%,0%,1.00);
	--font-color-inv-hover: hsla(0,0%,0%,0.75);
	
	--filter: brightness(190%);
	--filter-hover: brightness(100%);
	
	--menu-backgr: hsla(0,0%,100%,0.95);
	--square-back: hsla(0,0%,100%,0.99);
	
    --link-color: hsla(0,0%,75%,1.00);
    --link-hover: hsla(0,0%,100%,1.00);
    --medium-color: hsla(0,0%,50%,1.00);
	--border-color: #888;
	--bg-trans: hsla(0,0%,0%,0.50);
	--gallery-border: #000;
	--menu-bg: hsla(0,0%,0%,0.80);
	--menu-font: hsla(0,0%,100%,0.85);
	--menu-font-hover: hsla(0,0%,100%,0.99);
	--logo-color-a: hsla(0,0%,100%,0.99);
	--home-bg: url(../img/backgr8.jpg);
	--hometype-backgr: hsla(0,0%,100%,0.70);
	--hometype-color: hsla(0,0%,0%,0.99);
	--hometype-hover: hsla(0,0%,100%,0.99);
	--overlay-backgr: hsla(0,0%,0%,0.80);
	--grid-backgr: hsla(0,0%,100%,0.20);
	--fancy-backgr: hsla(0,0%,0%,1.00);
	--button-backgr: hsla(0,0%,0%,0.90);
	--button-color: hsla(0,0%,100%,0.70);
	--button-hover: hsla(0,0%,100%,0.99);
	--button-disabled: hsla(0,0%,100%,0.6);
	--line: hsla(0,0%,100%,0.3);
	
}


.red { color: rgb(255, 0, 0); }
.green { color: rgb(0, 180, 30) !important; }
.blue { color: hsla(206, 100%, 50%, 1) !important; }

.prompt {
	background-color: hsla(0, 0%, 0%, 0.10);
	padding: 10px 20px 10px 20px;
	color: black;
	margin-bottom: 2em;
}
.prompt p {
	font-size: 1.125em !important;
	font-weight: 600 !important;
	margin-bottom: 0em;
}

.fancybox-bg {
  background: var(--fancy-backgr) !important;
}
.fancybox-button {
	background: var(--button-backgr) !important;
}
.fancybox-button,
.fancybox-button:visited,
.fancybox-button:link {
  color: var(--button-color) !important; }

.fancybox-button:focus,
.fancybox-button:hover {
  color: var(--button-hover) !important;  }

.fancybox-button[disabled] {
  color: var(--button-disabled) !important;
  opacity: 1.0; }
  
.fancybox-caption-wrap {
  background: var(--button-backgr) !important;
}
.fancybox-caption {
  font-size: 14px;
  color: var(--button-color) !important;;
}
.fancybox-caption a {
  color: var(--button-disabled) !important;
}
  
.fancybox-caption a:hover {
  	color: var(--button-hover) !important; ;
}


* { box-sizing: border-box; }  

/* border-box so that border widths aren't added to the total width of the element: */
html {
	height: 100%;
  	box-sizing: border-box;
}


/* Clearfix to make floated elements behave correctly: */
  .cf:before, .cf:after { content: ""; display: table; }
  .cf:after { clear: both; }
  .cf { zoom: 1; }
  .clear { clear: both; }
  

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

a:focus,
a:active {
	outline: none;
}

a {
	text-decoration: none;
	color: var(--link-color);
}
a:hover {
	cursor: pointer;
	color: var(--link-hover);
}


html {
	background: var(--backgr-color);
}
body {
	font-family: 'Barlow', sans-serif;
	position: ;
	min-height: 100%;
	background-color: var(--backgr-color);
	color: var(--font-color1);
	padding-bottom: 350px;	
	font-weight: 200;
}

.left {
	float: left;
}
.right {
	float: right;
}

section img {
	width: 100%;
	height: auto;	
}



.red { color: hsla(0, 100%, 50%, 1.0); }
.blue { color: hsla(240, 100%, 50%, 1.0); }
.green { color: hsla(120, 100%, 50%, 1.0); }
.magenta { color: hsla(300, 100%, 50%, 1.0); }
.magenta { color: hsla(300, 100%, 50%, 1.0); }
.yellow { color: hsla(60, 100%, 50%, 1.0); }
.cyan { color: hsla(180, 100%, 50%, 1.0); }


/* ======================================================
   Type
   ====================================================== */
.hometxt-big {
	font-size: 3.5em;
	line-height: 1.2em;
	margin: 0px 0px .1em 0px;
	font-weight: 200;
	display: inline;
}
.hometxt-small  {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 200;
}
.hometxt-xsmall  {
	font-size: 0.9em;
	line-height: normal;
	font-weight: 200;
}
.home-title {
	display: inline;
}
.hometxt-big a, .hometxt-small a, .hometxt-xsmall a {
	-webkit-animation: font1 20s infinite alternate;
}
.hometxt-big a:hover, .hometxt-small a:hover, .hometxt-xsmall a:hover {
	color: var(--font-color1);
}

h1 {
	font-size: 3.5em;
	line-height: 1em;
	margin: 0px 0px .1em 0px;
	font-weight: 200;
}
h2 {
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 400;
}
h3 {
	font-size: 1.5em;
	line-height: 1.25em;
	margin: 0px 0px .75em 0px;
}
h4 {
	margin-bottom: 1em;
	font-weight: 600;
}
p {
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 0em 0px 1.5em 0px;
	font-weight: 400;
}
blockquote {
	font-size: 2em;
	line-height: 1.25em;
	text-indent: -0.25em
}
.rdesign {
	font-size: 1.5em;
	font-weight: 600;
}
.rdesign span {
	color: var(--font-color2);
}
.grid ul {
	line-height: 1.4em;
	margin: 1.2em 0px 0px 0px;
}
.caption {
	font-size: 0.75em;
	margin-top: 1.75em;
}
.image-caption {
	font-size: 0.0em;
	display: block;
	margin: 10px 0px 0px 0px;
	font-style: italic;
}
.text-col_2 {
	column-count: 2;
	column-gap: 40px;
}
.bold {
	font-weight: ;
}
.titles {
	margin: 50px 0px 0px 0px;
}
.description {
	column-count: 2;
	column-gap: 50px;
	margin: 2em 0px 0px 0px;
	color: var(--font-color2);
}
.description_1-col {
	margin: 2em 0px 0px 0px;
	color: var(--font-color2);
}


/* ======================================================
   Sections
   ====================================================== */


.inner {
	width: 90%;
	margin: 0px auto 0px auto;
	max-width: 1200px;
	background: ;
}
header {
	margin: 15px 0px;
}
.header {
	/*background: var(--header-backgr);*/
}
.web {
	background: var(--inner-backgr);
	padding; 0px 0px 0px 0px;
	margin: 40px 0px 80px 0px;
}
.work {
	background: var(--inner-backgr);
	padding; 0px 0px 0px 0px;
	margin: 30px 0px 50px 0px;
}



/* ======================================================
   Navigation
   ====================================================== */
header {
	display: ;
	align-items: ;
	align-content: ;
	text-align: ;
	background: ;
	padding-top: 0px
}
header ul {
	color: var(--font-color2);
}
header li {
	display: inline-block;
	vertical-align:middle;
	font-size: 1.5em;
	font-weight: 400;
}

header li a {
	color: var(--rd-color);
}
header li a:hover {
	color: var(--rd-hover);
}
.active {
	color: var(--font-color1);
}
/*.slash {
	font-size: 4em;
	font-weight: 100;
	margin-top: -5px;
	color: var(--font-color3);
}*/
.tasks {
	font-size: 0.9em;
	color: var(--font-color2);
	margin-top: 20px;
}
.tasks li {
	display: inline-block;
	vertical-align: middle;
}
/*.slashy {
	font-size: 2em;
	font-weight: 100;
	margin: 0px 20px;
	color: var(--font-color3);
}*/
.slash-img {
	width: 50px;
	margin: 0px 10px;
}
.slashy-img {
	width: 30px;
	margin: 0px 10px;
	display: inline-block;
}



.tasks {
	float: left;
}
.visit {
	float: right;
	text-align: right;
}
.visit {
	font-size: 0.9em;
	color: var(--font-color2);
	margin-top: 20px;
}
.visit li a {
	
	-webkit-animation: font1 20s infinite alternate;
}
.visit li a:hover {
	color: var(--button-hover);
	cursor: pointer;
}
.visit li {
	display: inline-block;
	vertical-align: middle;
}




/* ======================================================
   Menu
   ====================================================== */

.button-wrap {
 text-align: ;
 width: 90%;
 padding: 0px 0%;
 margin: 0px auto 0px auto;
 position: relative;
/* background: yellow;
 height: 100px;*/
}
/*styling open close button*/
.button img {
 display: ;
 margin-top: -15px;
 margin-right: 0px;
 z-index: 999;
 position: fixed;
 top: 0;
}
.button {
	padding-right: ;
	position: absolute;
	right: 8%;
}
/* ========= OVERLAY ========= */   
.overlay {
 display: none;
 position: fixed;
 top: 0;
 height: 100%;
 width: 100%;
 background: var(--menu-backgr);
 overflow: auto;
 z-index: 998;
}
.wrap {
 color: var(--font-color-inv);
 margin: 0 auto;
 width: 90%;
 padding: ;
}
#navigation {
	margin: 15px auto 0px auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ; 
	grid-auto-rows: minmax(10px, auto);
	grid-gap: 40px;	
}
#navigation div {
	grid-column-end: span 4;
	grid-column-start: 1; 
}
.rd-menu {
	color: var(--font-color-inv);
}
.rd-menu span {
	display: inline-block;
	vertical-align:middle;
	font-size: 1.225em;
	font-weight: 400;
}
.slash-img-w {
	width: 50px;
	margin: 0px 10px;
}
.rd-menu img {
	width: 100%;
	height: auto;
}
.menu-links {
	margin-top: 50px;
	grid-column-end: span 3 !important;
	grid-column-start: 2 !important; 
}
.menu-links li {
	vertical-align: middle;
	margin: 0px 0px 30px 0px;
	line-height: ;
}
.menu-links li {
	font-size: 5.10vw;
	font-weight: 100;	
}
.menu-links li a{
	color: var(--font-color-inv);
}
.menu-links li a:hover {
	color: var(--font-color-inv-hover);
}
.menu-slash {
	display: inline-block;
	vertical-align: middle;
	margin: -2vw 3vw 0px 0px;
	width: 15%;
}
.menu-slash img {
	width: 100%;
	height: auto;
}





/* ======================================================
   Projects
   ====================================================== */
   
.legends {
	width: 96%;
	margin: 0px auto 0px auto;
	padding-top: 30px;
	font-size: 0.9em;
	color: var(--font-color1);
	clear: both;
}
.legend {
	margin: 10px auto 0px auto;
	padding-top: 0px;
	font-size: 0.9em;
	color: var(--font-color1);
	display: inline-block;
}
.web-mobile {
	width: 8%;
	margin: 0px 2% 0px 2%;
	float: left;
}
.web-tablet {
	width: 18%;
	margin: 0px 2% 0px 2%;
	float: left;
}
.web-desktop {
	width: 62%;
	margin: 0px 2% 0px 2%;
	float: left;
	position: relative;
}
.web-mobile img {
	width: 92%;
	margin: 12% auto 10px auto;
	position: relative;
	z-index: 2;
}
.web-tablet img {
	width: 92%;
	margin: 4.4% auto 10px auto;
	position: relative;
	z-index: 2;
}
.web-desktop img {
	width: 92%;
	margin: 4.4% auto 10px auto;
	position: relative;
	z-index: 2;
}
.device img {
	width: 100%;
	margin: 0px;
}
.device {
	position: absolute;
	opacity: 0.5;
	height: 100%;
	top: 0px;
	z-index: 1;
}




/* ======================================================
   Work
   ====================================================== */

.work-nav {
	font-size: 0.9em;
	color: var(--font-color2);
	margin: 30px 0px 0px 0px;
	float: right;
}
.work-nav li {
	display: inline-block;
	vertical-align: middle;
}
.square {
	background-color: var(--square-back);
	clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}
.square img  {
	opacity: .15;
}
.square img:hover  {
	opacity: .99;
}

.square-img {
	background-color: var(--square-back);
	clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}
.square-img img  {
	opacity: .99;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.square-img img:hover  {
	opacity: .00;
}
.square-img h2 {
	z-index: -1 !important;
}

.square-txt {
	background-color: var(--square-back);
	clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}
.square-txt img  {
	opacity: .00;
 	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.square-txt img:hover  {
	opacity: .99;
}
.square-txt h2 {
	z-index: -1 !important;
}

.boxes {
	float: left;
	vertical-align: middle;
	color: var(--font-color3);
}
.boxes div{
	display: inline-block;
	vertical-align: middle;
}
.boxes a {
	color: var(--font-color3);
}
.boxes a:hover {
	color: var(--font-color1);
}
.boxes a.active {
	color: var(--font-color1);
}

.grid > div h2 {
	position: absolute;
	top: 6%;
	left: 6%;
	right: 6%;
	color: var(--font-color-inv);
}
.isotope > div h2 {
	position: absolute;
	top: 6%;
	left: 6%;
	right: 6%;
	color: var(--font-color-inv);
}
.thumb-titles {
	position: absolute;
	z-index: 5;
}
.box-slash {
	position: absolute;
	bottom: -10%;
	right: -10%;
	z-index: 2;
	width: 40%;
}
.kind {
	position: absolute;
	z-index: 6;
	bottom: 0%;
	right: 0%;
	color: var(--font-color2);
	font-size: 1.1vw;
}

/* ---- isotope buttons ---- */

#filters {
	margin-left: 0;
	margin-right: 0%;
	margin-top: 0px;
	margin-bottom: -10px;
	float: right;
	vertical-align: middle;
}
.iso-button {
	display: inline-block;
  	border: none;
  	color: var(--font-color3);
	font-size: 0.9em;
	cursor: pointer;
	background: none;
	vertical-align: middle;
	margin-top: -20px;
	padding: 0px;
}
.iso-button:hover {
  color: var(--link-hover);
}
.iso-button:active,
.iso-button.is-checked {
  color: var(--font-color3);
}

.iso-button.is-checked {
  color: var(--font-color1);
}



/* ---- isotope ---- */

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}
#portfolio {
	clear: both;
	margin: 40px auto 0px auto;
	width: 104%;
}
.grid-sizer { 
	width: calc(33.33% - 40px) ;

}
.gutter-sizer {
  width: 40px;
}
.item {
	width: calc(33.33% - 40px) ;
	/*margin: 20px;*/
	float: left;
	position: relative;
	margin-bottom: 40px;
}

/*.kind {
      width: 0;
      height: 0;
      border-bottom: 50px solid hsla(0,0%,100%,0.80);
      border-left: 50px solid transparent;
	  position: absolute;
	  bottom: 0px;
	  right: 0px;
}*/
/*.kind {
    width: 30%;
    height: 0;
    padding-top: 30%;
    overflow: hidden;
	position: absolute;
	bottom: 0px;
	 right: 0px;
	 border: 0px solid black;
}
.kind:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-100px;
    border-top: 100px solid transparent;
    border-right: 100px solid hsla(0,0%,100%,0.80);
}/*




/* ======================================================
   Grid
   ====================================================== */
 
 .grid_other {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ; 
	grid-auto-rows: minmax(10px, auto);
	grid-gap: 40px;
	align-items: ;
	justify-items: ;
	margin: 50px auto;
	align-content: ;
	/*margin: 0px;
	padding: 0px;*/
	/*background: red;*/
	/*grid-auto-flow: dense;*/
} 
.grid_other > div {
	/*background-color: var(--grid-backgr);*/
	padding: 0px;
	justify-self: ;
	align-self: ;
	position: relative;
}
 
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ; 
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 40px;
	align-items: ;
	justify-items: ;
	margin: 50px auto;
	align-content: ;
	/*margin: 0px;
	padding: 0px;*/
	/*background: red;*/
	/*grid-auto-flow: dense;*/
} 
.grid > div {
	/*background-color: var(--grid-backgr);*/
	padding: 0px;
	justify-self: ;
	align-self: ;
	position: relative;
}

.grid > div img {
	clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}
.grid-web {
	width: 94%;
	margin: 60px auto 50px auto;
	max-width: 1240px;
} 
.grid-web > div {
	background: ;
	position: relative;
} 

img {
	display: block;
}


.col_span1 { grid-column-end: span 1; }
.col_span2 { grid-column-end: span 2; }
.col_span3 { grid-column-end: span 3; }
.col_span4 { grid-column-end: span 4; }
.col_span5 { grid-column-end: span 5; }
.col_span6 { grid-column-end: span 6; }
.col_span7 { grid-column-end: span 7; }
.col_span8 { grid-column-end: span 8; }

.row_span1 { grid-row-end: span 1; }
.row_span2 { grid-row-end: span 2; }
.row_span3 { grid-row-end: span 3; }
.row_span4 { grid-row-end: span 4; }
.row_span5 { grid-row-end: span 5; }
.row_span6 { grid-row-end: span 6; }
.row_span7 { grid-row-end: span 7; }
.row_span8 { grid-row-end: span 8; }

.pos_hori1 { grid-column-start: 1; }
.pos_hori2 { grid-column-start: 2; }
.pos_hori3 { grid-column-start: 3; }
.pos_hori4 { grid-column-start: 4; }
.pos_hori5 { grid-column-start: 5; }
.pos_hori6 { grid-column-start: 6; }
.pos_hori7 { grid-column-start: 7; }
.pos_hori8 { grid-column-start: 8; }

.pos_vert1 { grid-row-start: 1; }
.pos_vert2 { grid-row-start: 2; }
.pos_vert3 { grid-row-start: 3; }
.pos_vert4 { grid-row-start: 4; }
.pos_vert5 { grid-row-start: 5; }
.pos_vert6 { grid-row-start: 6; }
.pos_vert7 { grid-row-start: 7; }
.pos_vert8 { grid-row-start: 8; }



.center { align-self: center; }
.bottom { align-self: baseline; }





/* ======================================================
   Masonry
   ====================================================== */

/* ---- masonry-grid ---- */
/*
.mgrid {
  max-width: 1200px;
  margin: auto;
  position: relative;
}


.mgrid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-item img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}



.gutter-sizer {
  width: 20px;
}

.grid-sizer,
.grid-item {
  width: calc(33.33% - 20px) ;
}
.grid-item {
  float: left;

 margin: 10px 0%;
  padding: 0px;
  background-color: hsla(0,0%,100%,0.00);
}

.grid-item--width2 { width: calc(50% - 20px); }
.grid-item--width3 { width: calc(75% - 20px); }

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

.grid-item:before {

}
.type-padding {
	padding: 60px 0px;
}

*/


/* ---------->>> CSS Transitions <<<-----------*/


.fade a {
	opacity: 1.0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.fade a:hover {
	opacity: 0.5;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

   
   


/*.menu-switcher {
	display: inline-block;
	float: right;
	width: 100%;
}
*/




/* ======================================================
   Footer
   ====================================================== */
   
 footer {
	

 }
 .inner-footer {
 	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	grid-gap: 40px;
	width: 90%;
	margin: 100px auto;
	max-width: 1200px;
 }
 .inner-footer div {
	font-size: 0.9em;
	color:  var(--medium-color);

 }
 .inner-footer li {
 	margin: 0px 0px 7px 0px;
 }
 .inner-footer a {
 	color: var(--medium-color);
 }
  .inner-footer a:hover {
 	color: var(--link-hover);
 }
 .inner-footer div:last-child {
 	text-align: right;
 }
 .footer-slash {
 	width: 80px;
	display: block;
	float: right;
	margin-top: -5px;
 }
 
 
 
.logo {
 	letter-spacing: 1px;
 }
 
.logo a .roeger {
	-webkit-animation: font1 20s infinite alternate;
}

 @-webkit-keyframes font1 {
    0% {color: cyan;}
    20% {color: magenta;}
    40% {color: grey;}
    60% {color: magenta;}
    80% {color: cyan;}
    100% {color: grey;}
}
.logo a .design {
	-webkit-animation: font2 20s infinite alternate;
}

 @-webkit-keyframes font2 {
    0% {color: grey;}
    20% {color: cyan;}
    40% {color: magenta;}
    60% {color: grey;}
    80% {color: magenta;}
    100% {color: cyan;}
}

   
   
   
/* ======================================================
   MEDIA QUERIES
   ====================================================== */
   
   
 @media (min-width: 1200px ) {   
.button {
	right: 7%;
}
}



@media (max-width: 1199px ) { 



} 


@media (max-width: 959px ) { 

.button {
	right: 10%;
}
#portfolio {
	width: 106%;
}

} 




@media (max-width: 768px ) { 

.hometxt-big {
	font-size: 3.0em;
	line-height: 1.125em;
	margin: 0px 0px .1em 0px;
}
h1 {
	font-size: 3.0em;
	line-height: 1em;
	margin: 0px 0px .1em 0px;
}
h2 {
	font-size: 1.125em;
	line-height: 1.2em;
}
h3 {
	font-size: 1.125em;
	line-height: 1.25em;
	margin: 0px 0px .75em 0px;
}
h4 {
	margin-bottom: 1em;
}
p {
	font-size: 1.125em;
	line-height: 1.25em;
	margin: 0em 0px 1.5em 0px;
}
.rdesign {
	font-size: 1.5em;
}
.grid ul {
	line-height: 1.4em;
	margin: 1.2em 0px 0px 0px;
}
.caption {
	font-size: 0.75em;
	margin-top: 1.75em;
}
.image-caption {
	font-size: 0.9em;
	margin: 10px 0px 0px 0px;
}
header li {
	font-size: 1.25em;
}
.tasks {
	font-size: 0.75em;
}
.visit {
	font-size: 0.75em;
}
.work-nav {
	font-size: 0.75em;
	margin: 30px 0px 0px 0px;
}
.iso-button {
	font-size: 0.75em;
	margin-top: -20px;
}
.inner-footer div {
	font-size: 0.75em;
 }
 .isotope > div h2 {
	top: 8%;
	left: 8%;
	right: 8%;
}
.slash-img {
	width: 35px;
	margin: 0px 5px;
}
.slashy-img {
	width: 25px;
	margin: 0px 10px;
}
.button img {
 margin-top: -24px;
 margin-right: 0px;
 top: 0;
}
.button {
	right: 12%;
}
.rd-menu span {
	font-size: 1.125em;
}
.slash-img-w {
	width: 35px;
	margin: 0px 5px;
}

.grid {

} 

.col_span1 { grid-column-end: span 2 ; }
.col_span2 { grid-column-end: span 2 ; }
.col_span3 { grid-column-end: span 3 ; }
.col_span4 { grid-column-end: span 4 ; }
.col_span5 { grid-column-end: span 4 ; }
.col_span6 { grid-column-end: span 4 ; }
.col_span7 { grid-column-end: span 4 ; }
.col_span8 { grid-column-end: span 4 ; }




/*.grid-sizer,
.grid-item {
  width: calc(50% - 20px) ;
}
.grid-item {
}*/

/*.grid-item--width2 { width: calc(50% - 20px); }
.grid-item--width3 { width: calc(100% - 20px); }*/

.space { display: none; }

 

.web-mobile {
	width: 29.333%;
	margin: 0px 2% 0px 2%;
	float: left;
}
.web-tablet {
	width: 62.666%;
	margin: 0px 2% 0px 2%;
	float: left;
}
.web-desktop {
	width: 96%;
	margin: 50px 2% 0px 2%;
	float: left;
	position: relative;
}
.description {
	column-count: 1;
	column-gap: 0px;
	margin: 2em 0px 0px 0px;
	color: var(--font-color2);
}





}







@media (max-width: 600px ) { 

.button {
	right: 17%;
}
#portfolio {
	width: 108%;
}

} 




@media (max-width: 550px ) { 
#portfolio {
	width: 106%;
	margin-bottom: 20px;
}
.button img {
 margin-top: -23px;
 margin-right: 0px;
 top: 0;
}
.button {
	right: 22%;
}
.text-col_2 {
	column-count: 1;
	column-gap: 0px;
}
.grid {
} 
.grid > div {

}

.col_span1 { grid-column-end: span 4 ; }
.col_span2 { grid-column-end: span 4 ; }
.col_span3 { grid-column-end: span 4 ; }
.col_span4 { grid-column-end: span 4 ; }
.col_span5 { grid-column-end: span 4 ; }
.col_span6 { grid-column-end: span 4 ; }
.col_span7 { grid-column-end: span 4 ; }
.col_span8 { grid-column-end: span 4 ; }

.pos_hori1 { grid-column-start: 1 ; }
.pos_hori2 { grid-column-start: 1 ; }
.pos_hori3 { grid-column-start: 1 ; }
.pos_hori4 { grid-column-start: 1 ; }
.pos_hori5 { grid-column-start: 1; }
.pos_hori6 { grid-column-start: 1; }
.pos_hori7 { grid-column-start: 1; }
.pos_hori8 { grid-column-start: 1; }

.grid-sizer { 
	width: calc(50% - 20px) ;

}
.gutter-sizer {
  width: 20px;
}
.item {
	width: calc(50% - 20px) ;
	margin-bottom: 20px;
}
.slash-img {
	width: 35px;
	margin: 0px 0px;
}
.slashy-img {
	width: 25px;
	margin: 0px 5px;
}
.menu-links li {
	font-size: 5.10vw;
}
.menu-links {
	margin-top: 50px;
	grid-column-end: span 4 !important;
	grid-column-start: 1 !important; 
}
 .inner-footer {
	grid-template-columns: 1fr 1fr ; 
	margin: 20px auto;
 }
  .inner-footer div:last-child {
 	text-align: left;
 }
 .footer-slash {
 	width: 50px;
	display: block;
	float: left;
	margin-top: -5px;
 }


/*.grid-sizer,
.grid-item {
  width: calc(100% - 20px) ;
}
.grid-item {
}

.grid-item--width2 { width: calc(100% - 20px); }
.grid-item--width3 { width: calc(100% - 20px); }

.ggutter-sizer {
  width: 20px;
}

.ggrid-sizer,
.gallery-item {
  width: calc(50% - 20px) !important;
}*/

} 



@media (max-width: 375px ) { 

.button img {
 margin-top: -23px;
 margin-right: 0px;
 top: 0;
}
.button {
	right: 25%;
}

}







*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: bottom;
  margin-left: 10px;
  
 }
 
 
 .theme-switch-l {
  display: inline-block;
  height: 15px;
  position: relative;
  width: 60px;
    top: 2px;
}

.theme-switch-l input {
  display:none;
}




.theme-switch {
  display: inline-block;
  height: 15px;
  position: relative;
  width: 30px;
    top: 2px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #333;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #ccc;
  bottom: 0px;
  content: "";
  height: 15px;
  left: 0px;
  position: absolute;
  transition: .4s;
  width: 15px;
}

input:checked + .slider {
  background-color: #000;
}

input:checked + .slider:before {
  transform: translateX(15px);
}

.slider.round {
  border-radius: 15px;
}

.slider.round:before {
  border-radius: 50%;
}