* {
	
margin: 0px;
padding: 0px;
box-sizing: border-box;

}


@font-face {

font-family: sf-display-bold;
src:url(../fonts/SF-Pro-Display-Bold.otf);/*need this syntax if .css is in a css folder*/

}

@font-face {

font-family: sf-display-regular;
src:url(../fonts/SF-Pro-Display-Regular.otf);/*need this syntax if .css is in a css folder*/

}

@font-face {

font-family: sf-display-medium;
src:url(../fonts/SF-Pro-Display-Medium.otf);/*need this syntax if .css is in a css folder*/

}


@font-face {

font-family: sf-display-heavy;
src:url(../fonts/SF-Pro-Display-Heavy.otf);/*need this syntax if .css is in a css folder*/

}

@font-face {

font-family: lavanderia-sturdy;
src:url(../fonts/Lavanderia-Sturdy.otf);/*need this syntax if .css is in a css folder*/

}




html {

background-color: white;
scroll-behavior: smooth;
/*background-image: url(../images/crumbled_paper_texture.jpg);*/
border: none;

}


body {
	
width: 100%;
margin: auto;
background-color: none;


}


footer	{

display: none;

}



header {

background-color: #2276d3;
opacity: 1;
height: 50px;
width: 100%;
position: fixed;
top: 0px;
z-index: 100;
background-image: url("../images/textures/animated_gradient.gif");
background-size: cover; /*use cover or contain*/
background-position: center;
box-shadow: 0px 0px 50px rgba(10,10,10,.5);

}


/*visited links appear black*/
a:visited {

color:black;

}


/*links*/
a {

text-decoration: none;

}


/*category headline*/
.category-row-label {

color: #2276d3;
text-align: left;
font-family: "sf-display-bold";
margin-bottom: 20px;
border-bottom: 2.5px dotted #a8a8a8;
display: inline-block; /*so dotted line isnt too long*/
font-size: 18px;


}

/*the row of images WITH headline*/
.category-row-container {

margin-top: 0px;
margin-bottom: 40px;
margin-left: 20px;
margin-right: 20px;
background-color: none;
overflow: hidden;
max-width: 1800px;

}


/*the row of images WITHOUT headline*/
.category-row {

background-color: none;
transition: margin 1s ease;
white-space: nowrap;
opacity: 1;
display: flex;
flex-wrap: nowrap;
height: 400px; /*match height of #imgContainer*/
border-radius: 0px;
overflow: scroll;

}


/*image containers within all rows*/
#imgContainer {

position: relative;
box-sizing: border-box;
background-color: none;
border-radius: 10px;
overflow: hidden;
background-color: none;
/*keep caption div centered*/
display: flex;
justify-content: center;
align-items: center; 
height: 400px; /*match height of .category-row*/
margin-right: 10px;

}


/*image inside the containers*/
#imgContainer img {

height: 100%;
width: auto;

}


/*video inside the containers*/
#imgContainer video {

height: 100%;
width: auto;

}


/*image caption*/
.caption {

position: absolute;
top:10px;
left: 10px;
visibility: visible;
font-family: "sf-display-medium";
font-size:.5em;
color:white;
letter-spacing: 1px;
background-color: #2276d3;
text-align: center;
overflow: hidden;
border-radius: 10px;
padding: 4px 8px;
box-shadow: 8px 8px 30px rgba(10,10,10,.3);

}


/*png logo settings*/
.logo {

padding: 0px;
background-color: none;
text-align: center; /*keeps logo centered in div*/
margin: auto; /*centers div in header*/
margin-top: 17px;
width: 300px;
animation-name: none;
animation-duration: 2s;
animation-timing-function: cubic-bezier(.49,0,0,.49);
transform: rotateY(0deg);

}


.logo img {

height: 13px;

}


/*type style logo settings*/
#logo {

text-align: center;
padding-top: 19px;
font-family: "sf-display-bold";
font-size:11px;
letter-spacing: 4px;
background-color: none;
color:white;
display: none;

}


/*navigation*/
.left-hand-nav {

position: fixed;
background-color: #2276d3;
height: 50px;
width: 100%;
z-index: 105;
bottom: 0px;
display: flex;
justify-content: center;
opacity: 1;
background-image: url("../images/textures/animated_gradient.gif");
background-size: cover; /*use cover or contain*/
background-position: center;
box-shadow: 0px 0px 50px rgba(10,10,10,.5);


}


.left-hand-nav button {

padding-top: 0px;
margin: 0px;
display: inline-block;
width: 120px;
height:100%;
border:none;
color:white;
font-size: 0px; /*quickly removes text from all artwork pages*/
background-color: rgba(0, 0, 10, 0);
transition: .2s ease;

}


/*menu button hover settings*/
.left-hand-nav button:hover {

background-color: #2A4A7A;
cursor: pointer;
	
}



/*general icon (home, about, contact) settings*/
.icons {

height: 15px;
width: auto;
background-color: none;

}


.new-tag {

background-color: #2276d3;
height: 20px;
width: 38px;
position: absolute;
top: 0px;
right: 0px;
color: white;
text-align: center;
text-transform: uppercase;
font-family: "sf-display-bold";
font-size: 8px;
letter-spacing: 1px;
padding-top: 5px;
padding-left: 2px;
border-radius: 0px 0px 0px 0px;
display: none;

}




@keyframes logo-animation {

0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}

}



#backToTop {

margin: auto;
background-color: #2276d3;
border-radius: 100px;
text-align: center;
font-family: "sf-display-bold";
color: white;
font-size: 15px;
padding: 20px;
width: 150px;
margin-top: 80px;
margin-bottom: 120px;
transition: .5s ease;

}

#backToTop:hover {

background-color: #2A4A7A;
cursor: pointer;

}


#web_wrapper, #motion_wrapper, #print_wrapper, #illustration_wrapper, #genai_wrapper{

opacity: 1;
transform: rotate(0deg);
transform: scale(1);

}

/*---------------------tablet starts here-------------------------------------*/

@media only screen and (min-width: 850px) {


}

/*---------------------tablet ends here-------------------------------------*/





/*---------------------desktop starts here-------------------------------------*/


@media only screen and (min-width: 1900px) {

.category-row-container {


margin: auto; /* center containers in desktop */
margin-bottom: 40px;
background-color: none;

}


/*hide caption in desktop unless hovering*/
.caption {

font-size: 1em;
visibility: hidden;
top:auto;/*reset to flex div in imgContainer*/
left:auto;
background-color: none;
border-radius: 0px;
box-shadow: none;

}


/*show caption when hovering*/
#imgContainer:hover .caption {

visibility: visible;

}


/*make image inside imgContainer opaque when hovering. not #imgContainer because caption is inside*/ 
#imgContainer:hover img {

opacity: .01;
cursor: pointer;

}



/*make video inside imgContainer opaque when hovering. not #imgContainer because caption is inside*/ 
#imgContainer:hover video {

opacity: .01;
cursor: pointer;

}


/*only show card background color when hovering*/
#imgContainer:hover {

background-color: #2276d3;

}


/*change new-tag bg color when hovering over imgContainer*/
#imgContainer:hover .new-tag {

background-color: #2A4A7A;

}



}

/*---------------------desktop ends here-------------------------------------*/