/*Header Styles*/

.backgroundtilt{
    /***     -o-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);     ****/
    margin-bottom:90px;
}


.content{
  /********  -o-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);    ******/
}


.content .designerimage{
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
}


.content header{
    text-align: left;
}


.content h1{
    border-bottom: solid 1px #DCAD85;
    padding:0 0 15px 0;
    display: inline-block;
}


.content h2{
    font-family: lato, arial, sans-serif;
    font-size:30px;
    font-weight:500;
    color:#615466;
    padding:20px 0 20px 0;
    display: inline-block;
    border-bottom: solid 1px #DCAD85;
    width:100%;
    line-height:1.4em;
}



.content h3{
    margin-bottom:60px;
}



.content a{
    background-color: #F67209;
    padding:14px 24px;
    font-size:18px;
    color:#ffffff;
    text-decoration: none;
    font-family:'Lato', Helvetica, Serif; 
    font-weight:700;
    text-transform:uppercase;
    letter-spacing: .1em;
    border-radius: 7px;
    transition: background-color .4s;
}


.content a:hover{
    background-color: #CE5B00;
}

.content .basiclink{
    background-color: #ffffff;
    color:#F67209; 
    transition: border .4s;
    border:solid 1px #ffffff;
}


.content .basiclink:hover{
    background-color:#ffffff;
    border:solid 1px #CE5B00;
}


/* Thumbnails */

.digitaldesign{
    text-align: center;
    max-width:95%;
    margin:auto;
}


.thumbnailgroup{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width:100%;
}


.tbncontainer{
    box-shadow: 0px 0px 5px 2px rgba(00, 00, 00, 0.2);
    overflow: hidden;
    margin-bottom:20px;
    position:relative;
}
     
    
.tbn img{
    width:100%;
    transition: all .2s ease-in-out;
}


.tbn a:hover img{
    transform: scale(1.2, 1.2);
}


.tbn a h5{
    font-family: lato, arial, sans-serif;
    font-size:18px; 
    color:#ffffff;
    text-decoration: none;
    line-height:28px;
    padding:18px 20px;
    background-color: rgba(97, 84, 102, 0.85);
    z-index: 500;
    position: absolute;
    left: 0;
    right:0;
    bottom: 0;
    text-align: left;
}


.tbn a:hover h5{
    background-color: rgba(246, 119, 9, 1);
    transition: all .2s ease-in-out;
}


.tbn a{    
     text-decoration: none;
}



/*ProjectPages*/

.portfolio{
    justify-content: left;
}



/*******************LARGEST SCREENS ********************/
@media screen and (min-width: 1301px)
{
    
    /*Header Styles*/


.content h2{
    font-size:30px;
}


.content .designerimage{
    width:380px;
    background-image:url("../images/designerportrait.png");
    margin-right:76px;
    height:500px;
    margin-left:-20px;
}



/*  Thumbnails  */

.tbn{
    max-width:425px;
    margin:0 22px 75px 22px;
}


.tbncontainer{
    width:425px;
    height:425px;
}
}




/*******************SECOND LARGEST SCREENS ********************/
@media screen and (min-width: 1062px) and (max-width: 1300px)
{
    
    /*Header Styles*/


.content h2{
    font-size:26px;
}



/***
#content img{
    width:25%;
    float:left;
    margin:0 70px 0 90px;
}
***/


.content .designerimage{
    width:32%;
    background-image:url("../images/designerportrait.png");
    margin-right:40px;
    height:425px;
    margin-left:-20px;
}



/* Thumbnails */

.tbn{
    max-width:325px;
    margin:0 22px 45px 22px;
}


.tbncontainer{
    width:325px;
    height:325px;
}

}



/*******************TABLET-ISH SCREENS ********************/
@media screen and (min-width: 740px) and (max-width: 1061px)
{
    
    
/*********  SCREEN SIZES  ************/


.content header h2{
    width:100%;
    text-align:left;
}


.content .designerimage{
    width:65%;
    background-image:url("../images/designerportraitsmall.png");
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
    height:180px;
    margin-top:85px;
}




/*  Thumbnails   */


.digitaldesign{
    max-width:85%;
}


.tbn{
    max-width:280px;
    margin:0 15px 40px 15px;
}


.tbncontainer{
    width:280px;
    height:280px;
}


}



/*******************LARGE PHONES AND SMALL TABLETS ********************/
@media screen and (min-width: 500px) and (max-width: 739px)
{
    /*********  SCREEN SIZES  ************/

.hidesmall{
    display:none;
}


nav img {
    width:80px;
    height: 80px;
}


.content header h2{
    width:100%;
    text-align:left;
    font-size:4.1vw;
}

    
.content header h3{
    font-size:3vw;
}    
    

    
.content a{
    font-size:16px;
}


    
    

.content .designerimage{
    width:80%;
    max-width:375px;
    background-image:url("../images/designerportraitsmall.png");
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
    height:180px;
    margin-top:85px;
}



/**Thumbnails **/

.digitaldesign{
    max-width:90%;
}

.tbn a h5{
    font-size:18px; 
}    
    
.tbn{
    max-width:75%;
    height:75%;
    max-width:400px;
    margin:0 22px 40px 22px;
}


.tbncontainer{
  margin-bottom:12px;
}

}
   



/*******************SMALL PHONES ********************/
@media screen and (max-width: 499px)
{
    
    /*********  SCREEN SIZES  ************/

.hidesmall{
    display:none;
}

.content header h2{
    width:100%;
    text-align:left;
    font-size:4.2vw;
}


.content header h3{
    width:100%;
    text-align:left;
    margin-bottom:50px;
    font-size:4.05vw;
    line-height:1.5em;
}

    
    

.content a{
    font-size:16px;
    display: inline-block;
}


.content .basiclink{
    margin:12px 0 0 0;
   
}


.content .basiclink:hover{
    background-color:#ffffff;
    border:solid 1px #CE5B00;
}
    

.content .designerimage{
    width:80%;
    max-width:375px;
    background-image:url("../images/designerportraitsmall.png");
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
    height:150px;
    margin-top:70px;
}



/**Thumbnails **/

.digitaldesign{
    max-width:90%;
}

.tbn a h5{
    font-size:22px; 
}    
    
.tbn{
    max-width:80%;
    height:35%;
    margin:0 22px 55px 22px;
}


.tbncontainer{
  margin-bottom:12px;
}

}