body {
font-family: 'Inter', sans-serif;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
h1, h2, h3, h4, h5, h6 {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.link {
display: inline-block;
font-weight: 400;
font-weight: 500;
position: relative;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color:white;
}
/* The progress container (grey background) */
.progress-container {
width: 100%;
height: 5px;
background: white;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 5px;
background: #666666;
border-radius: 2px;
width: 0%;
}
.button {
display: inline-block;
margin-top: 2%;
margin-left:0%;
margin-right: 1%;
padding: 6px 10px;
border-radius: 25px;
line-height: 1.5;
background-color: #f5f5f7;
border-color: black;
font-size: 0.85rem;
letter-spacing: 0.015rem;
font-family: 'Inter', sans-serif;
}
.button1 {
display: inline-block;
margin-top: 2%;
margin-left:0;
padding: 2px 10px 0px 0px;
border-radius: 25px;
line-height: 1.5;
border-color: black;
font-size: 0.95rem;
font-family:'Inter';
}
.button a {
color:black;
text-decoration: none;
}
.button-content {
width:80%;
margin:0 auto;
}
.button-content h4 {
font-family:'Inter Light';
float:left;
margin-left: left;
width:10%;
}
body {
background-color: white;
margin: 0 auto;
}
.grid {
margin:0 auto;
max-width:650px;
float:none;
padding-bottom: 00%;
display: block;
opacity: 1;
clear: both;
}
.grid2 {
margin:0 auto;
max-width:800px;
float:none;
padding-bottom: 00%;
display: block;
opacity: 1;
clear: both;
}
.li-grid {
margin-right: 0%;
width:100%;
float:left;
z-index: 100;
margin-left: 0%;
}
.header-li {
position: absolute;
width:100%;
max-width:650px;
}
ul {
font-family: 'Inter', sans-serif;
margin-top: 0vh;
float:left;
margin-left: 1%;
font-weight: regular;
font-size: 1.1rem;
line-height:1.6;
z-index: 1;
text-decoration: none;
width:100%;
float:left;
padding-top: 12%;
padding-bottom: 0%;
color:black;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.project {
margin-top: 15%;
margin-bottom: 10%;
}
.project h3 {
text-align: left;
margin-top:12%;
margin-bottom: 2%;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 1.2rem;
margin-left: 1%;
color:black;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.line {
display: flex;
flex-direction: row;
padding: 2% 3%;
width: 100%;
transition: background-color 300ms;
border-radius: 8px;
position: relative;
left: -2%;
justify-content: space-between;
}
.line2 a{
text-decoration: none;
}
.headline {
font-family: 'Inter', sans-serif;
color:black;
display: flex;
flex-direction: row;
min-width: 50%;
float:left;
font-size: 1.1rem;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color:black;
}
.vd {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
float:right;
color:#aaaaaa;
display: flex;
flex-direction: row;
width:35%;
text-decoration: none;
float:right;
}
.type {
margin-right: 16px;
float:right;
min-width: 50%;
}
.date {
width: 120px;
text-align: right;
float:right;
}
.li-grid2 li {
margin-left: 40px;
float:right;
text-align: right;
z-index: 100;
}
.line:hover {
color:#344343;
background-color: #f5f5f7;
}
.button:hover {
transition: opacity .3s ease;
background-color: #E0E0E0;
}
#tag1 {
margin-top: 20px;
}
#tag2 {
margin-top: 20px;
}
#tag1:hover {
background-color: #f5f5f7;
}
#tag2:hover {
background-color: #f5f5f7;
}
.pic1 {
margin:0 auto;
width:95%;
}
.pic11 {
width:50%;
float:left;
margin-top: 0%;
overflow: hidden;
margin:0 auto;
margin-top: 2%;
position: relative;
margin-bottom: 10%;
}
.pic22 {
width:100%;
float:left;
margin-top: 0%;
overflow: hidden;
margin:0 auto;
margin-top: 2%;
position: relative;
margin-bottom: 10%;
}
.pic1 .img-top {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
width:95%;
margin:0 auto;
transition: opacity .3s ease;
}
.pic1:hover .img-top {
opacity: 1;
}
.pic-main {
width:100%;
float:left;
margin-top: 0%;
overflow: hidden;
margin:0 auto;
margin-top: 2%;
position: relative;
margin-bottom: 10%;
}
.pic-main .img-top {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
width:98%;
margin:0 auto;
transition: opacity .3s ease;
}
.pic-main:hover .img-top {
opacity: 1;
}
h4 {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
line-height: 1.6;
margin-left: 0%;
width:100%;
float:left;
margin-top: 3%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.h4 a{
color:black;
}
.pic11:hover h4 {
color:black;
}
.pic11 a, .pic-main a{
color:black;
}
.pic22:hover h4 {
color:black;
}
.description {
font-family:'Inter', sans-serif;
font-size: 1.06rem;
line-height: 1.4;
width:100%;
float:left;
margin-top: 8px;
color:#888888;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
li a {
color:#111111;
text-decoration: none;
}
.about {
padding-bottom:2%;
padding-top: 0%;
margin-left: 1%;
width:99%;
}
.about h1 {
text-align: left;
padding-bottom:3%;
margin-top: 0%;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size:1.0rem;
line-height: 1.5;
float:none;
margin-top: 0%;
margin: 0 auto;
color: #4d4d4d;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.about p {
font-size:1.05rem;
line-height:1.6;
padding-bottom:0%;
text-align:left;
margin-top: 0%;
font-family: 'Inter', sans-serif;
color:#272727;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.bottom {
width:98%;
padding-bottom:2%;
padding-top: 12%;
margin-left: 0%;
}
.bottom p {
font-size:1.02rem;
line-height:1.6;
padding-bottom:0%;
text-align:left;
margin-top: 0%;
font-family: 'Inter', sans-serif;
color:#272727;
letter-spacing: 0.005em;
}
/*------------footer------------*/
footer {
margin-top: 25%;
margin-bottom: 10%;
font-family: 'Inter', sans-serif;
color: #222222;
font-weight: light;
font-size: 0.90rem;
width:99%;
letter-spacing: 0.025em;
margin-left: 1%;
line-height: 1.7;
text-align: center;
}
/*--- Home ----*/
.pic1 img {
border-radius:15px;
}
.subtitle {
font-family: 'Inter', sans-serif;
letter-spacing: 0.0014rem;
font-size: 0.9rem;
text-align:left;
margin-left:0%;
margin-bottom:3%;
color:#2563EB;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
b {
font-family: 'Inter', sans-serif;
color:black;
}
i {
font-family: "Inter Italic", sans-serif;
}
/*-----------text-styles------------*/
p {
font-family: sans-serif;
font-weight: 500;
font-size:1.10rem;
line-height: 1.6;
float:none;
opacity: 70%;
margin-top: 0%;
margin: 0 auto;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h1 {
font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5;
letter-spacing: 0rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin-bottom:2%
}
.head {
padding-top: 4%;
}
.head h3 {
text-align: left;
color:black;
font-family: sans-serif;
font-weight: regular;
font-size:1.20rem;
line-height:1.5;
width:100%;
margin-top: 2%;
margin-bottom: 3%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h2 {
font-family:sans-serif;
font-size:1.3rem;
line-height: 1.5;
margin-bottom:3%;
width:95%;
color:black;
text-align: left;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h3 {
font-family: sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: regular;
font-size:1.0rem;
line-height:1.6;
width:100%;
margin-bottom: 3%;
}
h5 {
font-family: sans-serif;
font-size:1.22rem;
line-height:1.55;
margin-bottom: 4%;
width:100%;
text-align: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h6 {
font-family:sans-serif;
font-size:1.6rem;
line-height: 1.5;
margin-bottom:3%;
width:100%;
color:black;
letter-spacing: 0.0em;
text-align: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.content h4 {
font-family: sans-serif;
font-weight: regular;
font-size:1rem;
line-height:1.7;
width:100%;
color:#666666;
margin-bottom: 10%;
text-align: left;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
ul a:hover {
text-decoration: none;
color:#2563EB;
}
ul a:active {
text-decoration: none;
color:#2563EB;
}
ul a {
text-decoration: none;
color:#888888;
}
a {
color:#2563EB;
}
a:hover {
color:#2563EB;
text-decoration: none;
}
.h4 a {
color:black;
}
sub {
font-family: sans-serif;
font-weight: normal;
font-size: 0.9rem;
padding-top: 1%;
line-height: 1.4;
color:#aaaaaa;
margin:0 auto;
letter-spacing: 0.02em;
width:80%;
padding-left: 10%;
padding-top: 5%;
padding: 0 auto;
}
.caption {
font-family: sans-serif;
font-weight: normal;
font-size: 0.9rem;
padding-top: 1%;
line-height: 1.4;
color:#666666;
width:80%;
margin:0 auto;
text-align: center;
letter-spacing: 0.02em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
font {
color:black;
}
.grid-playground .caption {
font-family: sans-serif;
font-size: 0.95rem;
line-height: 1.5;
text-align: left;
width:100%;
color:black;
letter-spacing: 0.00em;
}
.grid-playground .caption a {
color:#2563EB;
text-decoration: underline;
}
.grid-playground .caption a:hover {
color:#2563EB;
text-decoration: none;
}
/*/////////////////////playground/////////////////// */
img, video {
width:100%;
margin-left: 0%;
}
.grid-otherwork {
width:98%;
margin-left:0%;
margin-left:0%;
}
.grid-playground {
width:98%;
margin-left:0%;
margin:0 auto;
margin-top: 6%;
/* padding-top: 12%;
*/}
.row-1 {
width:50%;
float:left;
}
.row-1-content {
width:92%;
margin-bottom:8%;
}
.row-1-content img {
margin-bottom:1%;
}
img, video {
border-radius:20px;
}
.nb-bg{
padding-top:0%;
padding-bottom: 5%;
width: auto;
height: auto;
overflow:hidden;
background-color: #e8e8e8;
clear: both;
}
.screens {
width:33.3%;
margin-left: 0%;
float:left;
margin-bottom: 5%;
}
.grauerRand3 {
width:90%;
float:left;
margin-left: 0%;
}
.content-large {
width:100%;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 10%;
}
.content {
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10%;
margin-right: 10%;
}
.content p, .content h2, .content h3 {
width:80%;
margin: 0 auto;
margin-bottom: 2%;
}
.head h3{
width: 100%;
margin-bottom: 4%;
}
@media only screen and (min-device-width: 1800px) {
}
@media only screen and (min-device-width: 1440px){
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (max-width: 700px) {
.insights, .insights2 {
width:40%;
}
.content-1 h3, .content-1 p {
text-align: left;
width: 100%;
}
.content, .content-large {
width:100%;
padding-left: 0%;
margin-left:0%;
margin-top: 10%;
margin-bottom: 10%;
float:left;
}
.grid-playground {
width:100%;
margin-left:0%;
margin-left:0%;
}
.row-1 {
width:100%;
margin-left:0%;
}
.row-1-content {
width:95%;
margin:0 auto;
margin-left: 2%;
margin-bottom:10%;
float:left;
}
img, video {
border-radius:10px;
}
.li-grid {
margin-right: 0%;
width:100%;
float:none;
z-index: 100;
margin-left: 0%;
margin-top: 5%;
}
ul {
padding-top: 0%;
font-size: 1.6rem;
}
.about {
padding-top:5%;
margin-left: 0%;
margin-right: 0%;
}
.opt-project h5 {
font-size: 1.6rem;
line-height: 2.2rem;
}
li {
line-height: 1.5;
float:left;
padding-left: 2%;
}
ul {
width:90%;
margin-left: 0%;
}
.nb-bg {
text-align: left;
width:100%;
padding-bottom: 5%;
}
img {
width:100%;
margin-left: 0%;
float:none;
margin-right:0%;
margin-left: 0%;
margin-right: 0%;
}
h7 {Â
font-family: sans-serif;
font-size: 0.9rem;
padding-top: 1%;
line-height: 1.4;
color:#aaaaaa;
width:80%;
margin:0 auto;
text-align: center;
letter-spacing: 0.02em;
}
h5 {
font-family: sans-serif;
font-weight: regular;
font-size: 2.5rem;
line-height: 3rem;
margin-top: 10%;
margin-bottom: 10%;
width:10%;
}
.grid-third {
width:100%;
margin-right: 0%;
float:left;
margin-bottom: 10%;
}
.grid-third-a {
width:100%;
margin:0 auto;
}
.grid-line {
width:100%;
float:left;
margin:auto;
}
.grid-content {
width:100%;
float:left;
margin-left: 0%;
margin-bottom: 10%;
}
.content-large {
width:120%;
margin: 0 auto;
}
.screen-prev-text {
width:100%;
}
.screen-prev {
width:100%;
margin-left: 0%;
}
.header-li {
position: relative;
width:100%;
max-width: 1000px;
}
.content li {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 4%;
width:100%;
float:none;
}
r {
float:right;
}
.notes {
padding:5%;
width:90%;
}
n {
display: none;
}
.about h1 {
text-align: left;
}
.caption {
text-align: left;
width:100%;
margin-bottom: 5%;
}
}
@media only screen and (min-device-width : 175px) and (max-device-width : 600px) {
.button{
margin-left:0%;
}
.card-1, .card-2 {
width:100%;
float:left;
margin-bottom: 10%;
}
.head h3 {
text-align: left;
}
.head {
margin-top: 10%;
}
.caption {
text-align: left;
width:100%;
}
.about h1 {
text-align: left;
}
.nb-bg {
text-align: left;
}
.content li {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 4%;
width:96%;
float:none;
}
.vd {
display: none;
}
.line {
margin-bottom: 5%;
}
.grid-playground {
width:100%;
margin-left:0%;
margin-left:0%;
}
.row-1 {
width:100%;
margin-left:0%;
}
.row-1-content {
width:95%;
margin:0 auto;
margin-left: 2%;
margin-bottom:10%;
float:left;
}
img, video {
border-radius:25px;
}
.li-grid2 li, .li-grid li {
margin-left: 0;
float:none;
text-align: left;
z-index: 100;
}
.li-grid {
margin-right: 0%;
width:100%;
float:none;
z-index: 100;
margin-left: 0%;
margin-top: 5%;
}
li {
line-height: 1.4;
float:left;
padding-left: 2%;
}
ul {
padding-top: 0%;
}
.grid2, .grid {
width:90%;
margin-left:5%;
}
.content-large {
width:90%;
margin-left:5%;
}
.content {
float:none;
width: 100%;
}
img {
width:100%;
padding-left: 0%;
padding-right: 0%;
}
h1, h2, h3, h4, .content h4 {
text-align: left;
}
p {
margin: 0%;
}
.content p, .content h2, .content h3 {
width:100%;
}
.content h3 {
margin-top: 10%;
}
.pic11 {
width:100%;
margin-left: 0%;
margin-right:0%;
padding-left: 0%;
padding-right:0%;
margin-top:5%;
}
.pic1 {
width:100%;
}
.content-large {
width:100%;
margin: 0 auto;
}
.screen-prev-text {
width:100%;
}
n {
display: none;
}
}
/* toggle button start */
/* Light Mode Button Styles---------------------------
.light-mode-button {
background:0;
border: 0;
box-sizing: border-box;
cursor: pointer;
width: 30px;
height: 16px;
position: relative;
border: 1px solid rgba(255,255,255,0);
/* Fixed position for this demo
position: fixed;
top:16px;
right:16px;
}
.light-mode-button:focus {
outline:none; /* Not ideal for accessibility
}
.light-mode-button span:nth-child(1) {
position: absolute;
top:0;
left:0;
width: 30px;
height:16px;
background-color: #d6d7db;
border-radius: 9px;
transition: .3s;
}
.light-mode-button span:nth-child(2) {
position: absolute;
top:3px;
left:3px;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
transition: .3s;
}
*/
/* Light & Dark Mode Styles
---------------------------
body {
background-color: #ffffff;
transition: background-color .3s;
}
body[light-mode=dark] {
background-color: #141516;
color: #DEDEDE;
}
h4[light-mode=dark] {
color:#DEDEDE;
}
footer[light-mode=dark] {
color:#DEDEDE;
}
body[light-mode="dark"] .light-mode-button span:nth-child(1){
background-color: #222222;
color: #444444;
}
body[light-mode=dark] .light-mode-button span:nth-child(2) {
left: 17px;
background-color: #141516;
}
*/
@media only screen and (max-width: 700px) {
#moj {
display: none;
}
}
@media only screen and (max-width: 700px) {
#designprocess {
display: none;
}
}
#moj{
float: left;
position: relative;
margin:5px;
}
.alignnone{
width:200px;
height:150px;
border-radius: 15px;
}
.wp-image-5{
background: #F9E7E6;
}
.wp-image-6{
background: #E5F4E8;
}
.wp-image-7{
background: #DFD5E9;
}
.wp-image-8{
background: #E2ECEE;
}
.wp-image-9{
background: #FAF0DF;
}
.wp-image-10{
background: #F5F5F7;
}