/*Main*/
body {background-color: #ffffff; margin: 0;}
section {margin: 0;}
.container {width: 85%; max-width: 820px; margin: 24px auto;}
.img2-full {background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; background-position: top; background-color: #ffffff;}


.flex-row {display: flex; flex-direction: row; text-align: left; justify-content: space-between;}
.flex-row-top {display: flex; flex-direction: row; align-items: center;}
.flex-row-button {display: flex; flex-direction: row;}
.flex-col {display: flex; flex-direction: column; position: relative;}
.justify {justify-content: space-between;}
.justifycenter {justify-content: center;}
.col2 {width: 46%;}
.col3 {width: 33%;}
.col25 {width: 22%;}
.col29 {width: 30%;}
.col6 {width: 66%; padding-right: 20%;}
.end {align-self: center;}

.col-top1 {width: 80%; text-align: left;}
.col-top {text-align: right;}
.text-right {text-align: right;}

.ProjectLink {margin-top: 5px;}
#tl-logo {width: 22px; height: 22px;}
.arrow {height: 60px; width: 60px; align-self: center;}

/*Margins*/
.m-top {margin-top: 70px;}
.mt120 {margin-top: 120px;}
.mt80 {margin-top: 80px;}
.mt60 {margin-top: 60px;}
.mb50 {margin-bottom: 40px}
.mb70 {margin-bottom: 70px}
.mt-bottom {margin-top: 120px; margin-bottom: 60px;}

hr {height: 1px; border-width: 0; color: #272727; border-top: dotted;margin: 80px 0px 30px 0px;}
.blue {width: 20%; color: #00ffff; border-top:none; height: 10px; }

/*Type*/
h3, h4, h5 {display: inline-block; font-family: 'Inter', sans-serif; margin: 0 0 0 0;}
h3 {font-size: 48px; line-height: 1em; font-weight: 700; margin-bottom: 38px;}
h4 {font-size: 12px; line-height: 1.5em; font-weight: 500; margin-bottom: 15px; text-decoration: underline; background-color: #00ffff; padding: 4px;}
h5 {font-size: 12px; line-height: 1.5em; font-weight: 600;}
p, li {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5em; margin: 0;}
ul {list-style-type: none; padding: 0;}
.psmall {font-size: 11px; color: #aaaaaa}
.bold {font-weight: bold;}
.twelve {width: 12%;}

a {color: #000; text-decoration: none; padding: 4px;}
a:hover, a:active, a:focus {color: #000; text-decoration: underline; background-color: #00ffff;}

.text a, .text a:link, .text a:visited, {text-decoration: underline; color:#000;}
.text a:active, .text a:hover, .text a:focus {color:#000; text-decoration: none; background-color: #00ffff;}


.button a, .button a:link, .button a:visited, {text-decoration: underline; color:#fff;}
.button a:active, .button a:hover, .button a:focus {color:#fff; text-decoration: none; background-color: #00ffff;}

.button {background-color: #000000; margin: 10px; border: none; color: #fff; width: 120px; padding: 12px 0px; text-align: center; text-decoration: none; display: inline-block;}


img {width: 100%; height: auto; display: block;}
#img1 {background-image: url(img/img_sq.png); }
#img2 {background-image: url(img/img_sq.png); }
#me1 {background-image: url(img/me1.png); min-height: 400px; background-position: bottom;}
#me2 {background-image: url(img/me5.png); max-height: 450px; min-height: 365px; background-position: bottom;}
#img4 {background-image: url(img/img_wide.png); min-height: 400px;}


/*NEW*/
.container-new {width: 85%; max-width: 820px; margin: 24px auto;}
.flex-row1 {display: flex; flex-direction: row; text-align: left; justify-content: space-between; align-items: center;}
.flex-item {background-color: #ddd; margin: 10px;}
.flex-item-25 {background-color: #ddd; margin: 10px; width: 22%;}
.flex-wrap-row {display: flex; flex-direction: row; text-align: left; justify-content: space-between; flex-flow: wrap;}
.wide {flex-basis: 78%;}
.fifty {width: 50%; margin-top: 50px;}
.intro_main {background-image: url(img/main.png); min-height: 400px; background-position: right;}
.box {display: grid;}
.subtitle {padding-top: 4px;}
.mt-40 {margin-top: 40px;}


.grid-header {
    display: grid;
    grid-template-columns: 6% 72% 22%;
    justify-content: space-between;
    align-items: center;
    margin: 40px auto;
    
  }

.grid-footer {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
    align-items: center;
    margin: 60px auto;
    
  }

.grid-name {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-between;    
  }

.grid-main {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-between;
    grid-row-gap: 28px;
    
  }

.grid-about {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-between;
    grid-row-gap: 28px;
    
  }

.grid-overview {
    display: grid;
    grid-template-columns: 22% 22% 22% 22%;
    justify-content: space-between;
    
  }


.header1 {grid-column: 1; grid-row: 1;}
.header2 {grid-column: 2; grid-row: 1;}
.header3 {grid-column: 3; grid-row: 1; text-align: right;}

.footer1 {grid-column: 1; grid-row: 1;}
.footer2 {grid-column: 2; grid-row: 1; text-align: right;}
.footer3 {grid-column: 3; grid-row: 1; text-align: right;}

.name1 {grid-column: 2 / 4; grid-row: 1;}
.name2 {grid-column: 1; grid-row: 1; align-self: end;}

.a { grid-column: 2 / 4; grid-row: 1;}
.c { grid-column: 1 ; grid-row: 1 / 3;}
.d { grid-column: 2 / 4; grid-row: 2;}



.proj00 {grid-column: 1; grid-row: 1; align-self: center;}
.proj0 {grid-column: 2 / 4; grid-row: 1;}
.proj1 {grid-column: 1; grid-row: 2;}
.proj2 {grid-column: 2; grid-row: 2;}
.proj3 {grid-column: 3; grid-row: 2;}
.proj4 {grid-column: 1; grid-row: 3;}
.proj5 {grid-column: 2; grid-row: 3}
.proj6 {grid-column: 3; grid-row: 3;}

.words1 {grid-column: 1; grid-row: 1;}
.words2 {grid-column: 2; grid-row: 1;}
.words3 {grid-column: 3; grid-row: 1;}
.words4 {grid-column: 4; grid-row: 1;}




@media only screen and (max-width:600px){
section {margin: 0;}
.margin-right {margin-right: 0px; margin-bottom: 20px;}
/*.flex-row {flex-direction: column; text-align: left;}*/
.flex-row-button {display: flex; flex-direction: column; align-items: center;}
.col2 {width: 97%;}
.col25 {width: 100%; margin-bottom: 30px;}
.col3 {width: 100%;}
.col29 {width: 46%;}
.col6 {width: 100%; padding-right: 10px;}
.text-right {text-align: left;}
.mb50 {margin-bottom: 20px;}
.mb70 {margin-bottom: 40px}
.button {width: 200px;}
p {font-size: 12px;}
h3 {margin-top: 38px;}

/*NEW*/
.grid-main {grid-template-columns: 46% 46%}
.grid-overview {grid-template-columns: 45% 45%; row-gap: 20px;}
.grid-header {grid-template-columns: 8% 44% 44%;}
.grid-name {grid-template-columns: 100%;}
.name1 {grid-column:1; grid-row:1;}
.name2 {grid-column:1; grid-row:2;}


.proj00 {grid-column: 1 / 3; grid-row: 2;}
.proj0 {grid-column: 1 / 3; grid-row: 1;}
.proj1 {grid-column: 1; grid-row: 3;}
.proj2 {grid-column: 2; grid-row: 3;}
.proj3 {grid-column: 1; grid-row: 4;}
.proj4 {grid-column: 2; grid-row: 5;}
.proj5 {grid-column: 2; grid-row: 4}
.proj6 {grid-column: 1; grid-row: 5;}

.words1 {grid-column: 1; grid-row: 1;}
.words2 {grid-column: 2; grid-row: 1;}
.words3 {grid-column: 1; grid-row: 2;}
.words4 {grid-column: 2; grid-row: 2;}

}
/*.img2-full {width: 100%;}*/


/*
.flex-col85 {display: flex; flex-direction: column; width:  85%; margin: 24px auto;}
.flex-row85 {display: flex; flex-direction: row; justify-content: center; width:  85%; margin: 12px auto;}
.img1 {background-size: cover; background-repeat: no-repeat; /*margin: 24px auto 0 auto;}
.img2 {width: 50%;  display: flex; flex-direction: column;}
.img3 {background-size: cover; background-repeat: no-repeat; margin: 0 0 12px 0;}
.col50 {width: 50%; display: flex; flex-direction: column; justify-content: center;}
*/