@charset "UTF-8";
/* CSS Document */
body {font-family: 'Roboto Mono', monospace;font-size:1em;}
a {text-decoration:none;color:#444; font-weight:300; display: inline-block;

  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;

}
a:hover{color: #444; background:#fff}
h1 {font-weight:700}
.logo {padding-top:10px; padding-bottom:30px;padding-left:15px;color:#fff!important; background:#fff!important;}
.work {max-width: 100%;width:100%;height:auto; margin-top:15px;margin-bottom:15px;}
.text {font-weight:300; color:#444;padding-left:15px; hanging-punctuation: allow-end;}
.text-600 {font-weight:300; color:#444;padding-left:15px; width:600px}
.text-copy {font-weight:300!important; color:#444;

 -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
.text-copy:hover {color:#444; background:#fff}
.text-copy:visited {color: blue}

.hover {font-weight:300!important; padding-left:15px; color:#444;
 -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
.hover:hover {color:#444} /*vignelli red*, yellow: ffe707 */
.hover:visited {color: blue}

.text-heading {font-weight:600}
.text-mini {font-size: 0.7em}
.text-link {color:#777;}
.full {margin-top:50px; margin-left:150px; padding-right:150px;}
.lower-right {position:absolute; bottom:50px; right:50px;}
.text-button {cursor: pointer; font-weight:400; color:#fff; padding:30px; background:#444}
.button {
    background-color: #fff;
    border: 1px solid #444;
    color: #444!important;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	font-size: 1em;
	margin-left: 0;
	margin-top:15px;
    border-radius: 7px;
	
  -webkit-transition: color 0.1s;
  -moz-transition: color 0.1s;
  -o-transition: color 0.1s;
  transition: color 0.1s;
	
	-webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
.button:hover{background-color: #ffe707; /*f04e23 vignelli red*/
    border: 1px solid #000;
    color: #000!important}

.button-full {
    background-color: #fff;
    border: 1px solid #444;
    color: #444!important;
    padding: 14px 14px;
    text-align: center;
    text-decoration: none;
    display:inline-block;
	font-size: 1em;
	margin-left: 0;
	margin-top:15px;
    border-radius: 7px;
	cursor: pointer;
	
  -webkit-transition: color 0.1s;
  -moz-transition: color 0.1s;
  -o-transition: color 0.1s;
  transition: color 0.1s;
	
	-webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
.button-full:hover{background-color: #ffe707; /* ffe707 vignelli red*/
    border: 1px solid #000;
    color: #000!important;
background:#ffe707}

.button-neo {
    text-align: center;
    text-decoration: none;
    display:inline-block;
	font-size: 1em;
	margin-left: 0;
	margin-top:15px;
   padding: 14px 14px;
cursor: pointer;

border-radius: 7px;
background: #fff;
box-shadow:  5px 5px 16px #9c9c9c, 
             -5px -5px 16px #ffffff;
}/*
.button-neo:hover{
color:#000;
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow:  3px 3px 7px #d9d9d9, 
             -6px -6px 11px #ffffff;
font-weight:700!important;
}*/

.button-neo:hover{
color:#000;
border-radius: 7px;
background: #ffffff;
box-shadow: inset 5px 5px 12px #d9d9d9, 
            inset -5px -5px 12px #ffffff;
font-weight:400!important;
}

.button-neo-invisible {
    text-align: center;
    text-decoration: none;
    display:inline-block;
	font-size: 1em;
	margin-left: 0;
	margin-top:15px;
   padding: 14px 14px;
cursor: pointer;

border-radius: 7px;
background: #fff;
}

.button-neo-invisible:hover{
color:#000;
border-radius: 7px;
background: #ffffff;
box-shadow: inset 5px 5px 12px #d9d9d9, 
            inset -5px -5px 12px #ffffff;
font-weight:400!important;
}

.green {color:green}
.limegreen {color: limegreen}
.palegreen {color:palegreen}
.red {color:red}
.orangered {color:orangered}
.orange {color:darkorange}
.blue {color:blue}
.dodgerblue {color:dodgerblue}
.yellow {color: yellow}
.violet {color: darkviolet}
.gray1 {color:gray}
.gray0 {color: dimgray}
.gray2 {color: darkgray}

.frame-line {
	display:inline-block;
	border: 1px solid #444;
    padding: 7px 14px;
	margin-bottom:0;}
.frame-dash {
	display:inline-block;
	border: 1px dashed #444;
    padding: 7px 14px;
	margin-bottom:0;}
.frame-dot {
	display:inline-block;
	border: 1px dotted #444;
    padding: 7px 14px;
	margin-bottom:0;}

.hover_img_size {width:400px; height: auto;}
.hover_img_size_big {width:500px; height: auto;}

.hover_img a { position:relative;}
.hover_img a span { position:fixed; display:none; z-index:99; top:15px; right:15px;}
.hover_img a:hover span { display:block; }

.full-buttons {text-align: left}



@media (prefers-color-scheme: dark) {
  .dark-scheme   { background: #333; color: #999; }
}

@media (prefers-color-scheme: light) {
  .dark-scheme   { background: #fff; color:  #444; }
}



/*.hover_img_size {height:110px, width:auto;}*/

@media only screen and (min-width: 768px) {
	full {padding-right:170px;}
}
@media only screen and (max-width: 768px) {
	body {font-size:1em; text-align: left}
	.full {margin-top:30px; margin-left:10px; margin-right:10px; padding-right:10px; padding-left:10px;}
	.text {padding-left:0px}
	.text-600 {padding-left:0px; width: 100%}
	.text-button {padding-right:30px;}
	.lower-right {position:absolute; bottom:30px; right:30px;}
.work {width:100%;height:auto; margin-top:15px;margin-bottom:15px;}

.hover_img a span {top:5px; right:5px;}
.hover_img_size {height:auto; width:250px;}
.hover_img_size_big {height:auto; maring-left:0; margin-right:0; width:100%}
.logo {padding-left:0}
.button-full {
    display: block;
	font-size: 1.1em}
.button-neo {
    display: block;
	font-size: 1.1em;}
.full-buttons {text-align: center}
}