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


#indexcontainer {
    position:relative;
     margin:1%;
}

.imagegroupsindex {   
     position:relative; 
     
      }

.box {
    position:relative;
    float: left;
    margin:.3%;      
}

.link {
  	background-color: transparent;
  	border: none;
  	cursor: pointer;
}

.bttntext {
    vertical-align: middle;
    line-height: normal;
}


.buttons{  
    font-family: 'Lato'; 
	color:#FFFFFF;
}


/*TITLEBLOCK */

p1 /*matthew bandsuch */{
    text-align:left;
	font-family: 'Lato';
	font-size: 1.1em;
	letter-spacing: .2em;
	font-weight: bold;
}

p2 /*for projects, contact and about*/{
    font-family: 'Lato';
	font-size: .9em;
	letter-spacing: .1em;
}

p4 /*image titles */{
    text-align:left;
	font-family: 'Lato';
	font-size: 1.2em;
	color:#000000;
	letter-spacing: .1em;
}

p5 /* CV */{
    text-align:left;
	font-family: 'Lato';
	font-size: .9em;
	color:#000000;
	letter-spacing: .08em;
}

#cv {
    display: block;
    margin:2% 0 0 20%;
}

#titleblock {
    display: inline-block;
    width:255px;
    margin:1% 1% 1% 1%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   
}

#contact {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* DRAWINGPAGE*/

.outerimage:{
    width: 100vmax;
    height: 100vmax;
    
}
   
.drawingimagecontainer {
   position:relative;
 }   

#imageinfo { 
    display: flex;
    justify-content: center;
    width:100%;
    margin: 1% 1% -1.5em 1%;
    text-align:left;
	font-family: 'Lato'; 
	font-size: .8em; 
	color:#A0A0A0;
	letter-spacing:.1em;
}

.imagebox {
    margin: 0 auto;
    display: table;
    vertical-align:middle;
    position:relative;
    padding:0 3% 0 3%;
}

.image{
    display: inline-block;
    max-width: 90vw;
    max-height: 80vh;
    width:auto;
    height: auto;
    margin: 0  1% 0 0;
}

@media only screen and (max-width: 780px) {
  .image {
    max-width: 100%;
    max-height: 100%;
  }
}

.imagebuttons {
    background-color:transparent;
    width:100%;
    display: inline-block;
    font-size: 2em;
}

.buttonnext {
    display: inline-block;
    width:50%;
    right:0;
    height:100%;
    text-align:right;
    
	position:absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

.buttonprev {
    display: inline-block;
    width:50%;
    left:0;
    height:100%;
    text-align:left;
    
    position:absolute;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

#footerdrawing {
	display:block;
    position:relative;
    font-family: 'Lato'; 
	font-size: .7em;
	color:#cecece;
	letter-spacing: .1em;
	
}

.img {
    max-width: 100%;
    height: auto;
    user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
    
}

/* PROJECTS and CATEGORY*/

.projectsPAGEcontainer{
    position:relative;
    display: flex;
    justify-content: center;
    
}

.PROJECTScontainer /* dont use display block on these they load funny*/
{   clear: both;
    margin:0 0 0 1%;
    position:relative;
}

.CATEGORIEScontainer {
    clear: both;
    margin:0 0 0 1%;
    position:relative;
}

.PROJECTSandCATEGORIESpage /* dont use display block on these they load funny*/
{   display: flex, inline-block;
    justify-content: center;
    margin:1%;
    position:relative;
}

.projectstitles {
    display: flex;
    justify-content: center;
    font-family: 'Lato';
	margin-left:1%;
	text-transform: uppercase;
	font-size: 1.2em;
	color:#000000;
	letter-spacing: .1em;

}

.imagegroups { 
    margin:0 0 0 0 ;
    display: inline-block;
    position:relative;
    font-family: 'Lato';
	text-align:center;
	font-size: 1.2em; 
	color:#A0A0A0; 
	letter-spacing: .1em;
}

.imagegroupscategory { 
    margin:0 0 0 0 ;
    display: inline-block;
    position:relative;
    font-family: 'Lato';
	text-align:center;
	font-size: 1.2em; 
	color:#A0A0A0; 
	letter-spacing: .1em;
}

.projectbox  {   
    width:30em;
    height:25em;
    padding:.5em;
    
}

#footer {
    padding:5% 0 0 1%;
    font-family: 'Lato'; 
	font-size: .8em; 
	color:#cecece;
	letter-spacing: .1em;
	position:relative;
	clear:both;
    
}

.fade-in {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
}@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


.fade-infooter {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
}@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}




/*.link:hover {color:#333;text-decoration:underline;}
.link2:hover {color:#333;text-decoration:underline;}
.link3:hover {color:#333;text-decoration:underline;}
.link4:hover {color:#333;text-decoration:underline;}*/

.buttonprev:link {color:transparent;text-decoration:none;}  /* unvisited link */
.buttonprev:visited {color:transparent;text-decoration:none;} /* visited link */
.buttonprev:hover {color:#A0A0A0;text-decoration:none;} /* mouse over link */
.buttonprev:active {color:transparent;text-decoration:none;} /* selected link */

.buttonnext:link {color:transparent;text-decoration:none;}  /* unvisited link */
.buttonnext:visited {color:transparent;text-decoration:none;} /* visited link */
.buttonnext:hover {color:#A0A0A0;text-decoration:none;} /* mouse over link */
.buttonnext:active {color:transparent;text-decoration:none;} /* selected link */


a:link {color:#000000;text-decoration:none;}   /* unvisited link */
a:visited {color:#333;text-decoration:none;}  /* visited link */
a:hover {color:#333;text-decoration:none;}  /* mouse over link */
a:active {color:#333;text-decoration:none;}  /* selected link */