/*akzidenz*/
@font-face {
    font-family: 'akzidenz-grotesk_bqbold';
    src: url('../font/akzidenzgrotesk-bold-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'akzidenz-grotesk_bqregular';
    src: url('../font/akzidenzgrotesk-regular-webfont.woff2') format('woff2'),
         url('../font/akzidenzgrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {margin: 0 auto; background-color:rgb(245,245,245);}
a {text-decoration: none !important;}


/*landing page */
#home{
    width:100vw;
    height:100vh;
    background-image: -webkit-linear-gradient(-40deg, rgba(240,89,51,1) 0%, rgba(240,120,50,1) 60%, rgba(240,170,40,1) 100%);
    font-family:'akzidenz-grotesk_bqbold';
}
#homeName{
    padding-top:52vh;
    color:white;
}
#mobileNotice{
    
}
.portfolio{
    font-family: 'akzidenz-grotesk_bqbold';
    position:fixed;
    bottom:0;
    color:white;
    font-size: 4em;
    font-weight:bold;
    width:100%;
    text-align: right;
}
.portfolioMobile{
    font-family: 'akzidenz-grotesk_bqbold';
    position:fixed;
    color:white;
    font-size: 1.5em;
    font-weight:bold;
    width:100%;
    text-align: left;
    padding-left:10vw;
    padding-right:10vw;
    padding-top:40vh;
    padding-bottom:2vh;
}
.portfolio p{
    padding-right:10vw;
    padding-top:2vh;
    padding-bottom:2vh;

}
.portfolio p:hover{
    background-color:white;
    color: rgba(240,89,51,1)
}
.portfolio a{
    color:white;
}
.libre{
    font-family: 'Libre Baskerville', serif;
}

/*animations landing page */

.first{
    animation-name:first;
    animation-delay:0s;
    animation-duration:1.5s;
}
.second{
    animation-name:second;
    animation-delay:0s;
    animation-duration:3s;
}
.third{
    animation-name:third;
    animation-delay:0s;
    animation-duration:3.5s;
}
.fourth{
    animation-name:fourth;
    animation-delay:0s;
    animation-duration:5s;
}

@keyframes first{
    0%{ 
    opacity: 0;
    transform: translateX(100%);
  }
  100%{
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes second{
    0%{ 
    opacity: 0;
    transform: translateX(100%);
  }
  100%{
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes third{
    0%{ 
    opacity: 0;
    transform: translateX(100%);
  }
  100%{
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fourth{
    0%{ 
    opacity: 0;
  }
    50%{
        opacity: 0;
    }
    90%{
        opacity:.8;
    }
  100%{
    opacity: 1;
  }
}





/*gallery header */

#header{
    background-color: rgb(245,245,245);;
    width:100%;
    height:11vh;
    padding-top:1em;
    padding-bottom: 1em;
    padding-top:.5em; 
    z-index:1;
    position:fixed;
}
#galleryPadding{
    background-color: white;
    width:100%;
    height:11vh;
    padding-top:1em;
    padding-bottom: 1em;
    padding-top:.5em; 
}
#resume{
    padding-top:.75em;
    padding-left:10vw;
    padding-right:5vw;
    font-size:1.25em;
}
ul{
    list-style-type: none;
    font-family:'akzidenz-grotesk_bqbold';
}
#name{
    font-size:1.25em;
    float:right;
    padding-right:8vw;
}
#name.active{
    border-bottom: none;
}
#filterPadding{
    float:left;
    padding-left:5vw;
}
.gradient{
    background-image: -webkit-linear-gradient(left, rgba(240,89,51,1) 0%, rgba(240,120,50,1) 52%, rgba(240,170,40,1) 100%);
    color:transparent;
    background-clip: text;
    -webkit-background-clip:text;
}
.filter{
    float:left;
    font-size:1.25em;
    margin-right:2vw;
}

#filter{
    color:rgb(240,170,40);
    font-family: 'akzidenz-grotesk_bqregular'
}

#filter:hover{
    border-bottom: 0;
}

.filter:hover{
    border-bottom: 3px solid; 
}

.active{
    border-bottom: 3px solid; 
}


/*gallery container list*/

#galleryContainer{
    margin-bottom: 10vh;
    width:100%;
    height:80vh;
}
.box{
    font-family:'akzidenz-grotesk_bqbold';
    font-size: 3em;
    font-weight:bold;
    width:100%;
    text-align: left;
}
.box p {
    padding-left:8vw;
}

#equity, .equity{
    color:rgb(240,90,50);
}
#understanding, .understanding{
    color:rgb(240,120,50);
}
#pleasure, .pleasure{
    color:rgb(240,170,40);
}
.all{
    color:rgb(220,220,220);
}
.equity:hover{
    color:white;
    background-color:rgb(240,90,50);
    -webkit-transition: background-color 800ms linear;
}
.understanding:hover{
    color:white;
    background-color:rgb(240,120,50);
    -webkit-transition: background-color 800ms linear;
}
.pleasure:hover{
    color:white;
    background-color:rgb(240,170,40);
    -webkit-transition: background-color 800ms linear;
}



/*footer styling*/

#footer{
    position:fixed;
    float:right;
    width:100%;
    height:5vh;
    text-align: left;
    font-family:'akzidenz-grotesk_bqbold';
    font-size:1.25em;
    padding-left: 40px;
    padding-bottom:1em;
/*    background-color:rgba(255,255,255,.8);*/
}

/*
#footer a:hover{
    border-bottom: 3px solid rgb(240,90,50);
}
*/



/*detail page styling */

#container img{
    width:60vw;
    margin: 0 auto;
}
#detailPics{
    width:60vw;
    float:right;
    z-index: 1;
    font-family:'akzidenz-grotesk_bqbold';
    font-size:.9em;   
}
#detailPicsDrawing{
    width:60vw;
    float:right;
    z-index: 1;
    font-family:'akzidenz-grotesk_bqbold';
    font-size:.9em;   
}
#detailPicsDrawing img{
    width:45vw;
    float:right;
    z-index: 1;
    padding-bottom:60px; 
}

#bodyText{
    width:35vw;
    float:left;
    padding-top:20px;
    top:5vh;
    position:fixed;
    overflow-y: scroll;
    max-height:95vh;
/*background-image: -webkit-linear-gradient(left, rgba(245,245,245,1) 60%,  rgba(255,255,255,1) 100%);    height:100%;*/
    
}
#bodyText p{
    padding-right:2.5vw;
    padding-left:2.5vw;
}
.bodyLink{
    color:rgba(240,89,51,1);
}
a.bodyLink:visited{
    color:rgba(240,89,51,1);
    color:rgba(240,89,51,1);
}
.italic{
    font-style:italic;
    font-family: 'Libre Baskerville', serif;
}

.title{
    font-size:1.25em;
    font-weight: bold;
    font-family: 'akzidenz-grotesk_bqbold';
}
.body{
    font-size:1em;
    font-family: 'Libre Baskerville';
}

.border{
    border: .1px solid rgba(220,220,220,.6); 
}

.back{
    width:100%;
    margin:0 auto;
    font-size:1em;
    font-family: 'akzidenz-grotesk_bqregular';
    position:fixed;
    top:0;
    color:rgb(240,170,40);
    padding-top:2vh;
    z-index: 0;
    float:left;
}
.back:hover{
    background: -webkit-linear-gradient(left, rgba(240,89,51,1) 0%, rgba(240,120,50,1) 52%, rgba(240,170,40,1) 100%);
    color:white;
}

.video{
   overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}

.video iframe{
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.resize{
    max-width:70%;
    height:auto;
    display: block; 
    margin-left: auto; 
    margin-right: auto
}