/*Homepage*/

@font-face {
  font-family:Phosphate;
  src: url(../fonts/Phosphate-Inline-01.ttf);
}


body{
    background-color:#E6E4E7;
    background-image: url("../images/backgroundPattern.png");
    background-repeat: no-repeat;
    background-position: center 580px;
}

.wholewrap{
    width:100%;
    overflow-x:hidden;
}

/*Navigation Styles*/

nav{
    background-color:#99929C;
    position: fixed;
    width:100%;
    height:60px;
    z-index: 1000;
    text-align: right;
    border-bottom-style: #E6E4E7 6px solid;
}

#contactinfo{
    display:flex;
    flex-direction: column;
    height:60px;
    justify-content: center;
}


nav p{
    font-family:Lato, arial, sans-serif;
    font-weight:700;
    color:#ffffff;
    text-align:right;
    padding:2px;
}


nav img {
       
    border-radius: 50%;
    border:#ffffff 3px solid;
    width:70px;
    height:70px;
    margin:10px 20px;
    float:right;
}



/*Header Styles*/

.backgroundtilt{
    background-image: url("../images/rectangle.svg");
    background-size: auto 140%;
    background-repeat:no-repeat;
    background-color:#ffffff;
    box-shadow: 0px 0px 10px 10px rgba(00, 00, 00, 0.2);
    width:120%;
    margin-left:-10%;
}


.content{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:center;
}


.content header{
    text-align: left;
}


.content h1{
    font-family:'Phosphate', Helvetica, Serif; 
    font-weight: normal;
    font-style: normal;
    color:#615466;
    letter-spacing:.02em;
    width:100%;
    line-height: 1.1em;
}


.content span{
    font-weight: 800;
}


.content h3{
    font-family: lato, arial, sans-serif;
    font-size:21px;
    color:#615466;
    width:100%;
    padding-top:18px;
    line-height:1.4em;
}



/* Thumbnails and Footers */
body h4{
    font-family:'Phosphate', Helvetica, Serif; 
    font-size:45px;
    color:#615466;
    margin-bottom:52px;
    margin-top:12px;
}



.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;
}















/*  Footer Styles */


.clipfooter{
    height:335px;
    overflow:hidden;
    padding-top:60px;
    margin-top:-30px;
    width:120%;
    margin-left:-10%;
}



.footertilt{
    background-image: url("../images/rectanglefooter.svg");
    background-size: 550px 600px;
    background-repeat: no-repeat;
    background-color:#ffffff;
    background-position:top right;
   /*** -o-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);  ***/
    box-shadow: 0px 0px 10px 10px rgba(00, 00, 00, 0.2);
}


#footercontent{
    padding:60px 0 120px 0;
    text-align: center;
    /***** -o-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);     ****/
    width:70%;
    max-width:1200px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 auto;
}


#footercontent .footerwords{
        width:580px;
        margin-right:100px;
        text-align: left;
}


#footercontent h4{
    border-bottom: solid 1px #DCAD85;
    padding:0 0 15px 0;
    margin-bottom: 15px;
}


#footercontent p{
    border-bottom: solid 1px #DCAD85;
    padding:0 0 18px 0;
    font-family: lato, arial, sans-serif;
    font-size:18px;
    color:#615466;
    margin-bottom:18px;
    line-height:1.3em;
}


#footercontent .contactfooter{
    display:flex;
}


#footercontent .contactfooter p{
    font-family: lato, arial, sans-serif;
    font-size:23px;
    font-weight:800;
    color:#615466;
    border-bottom: none;
    margin:0 30px 0 0;
    padding:0;
}


#footercontent img{
    width:350px;
    margin-top:50px;
}






/*******************LARGEST SCREENS ********************/
@media screen and (min-width: 1301px)
{
    
.content:first-of-type{
    padding:110px 0 70px 0;
}

    
.content{
    padding:70px 0 70px 0;
}

    
.content h1{
     font-size: 70px;
}

    
.content h3{
    font-size:21px;
}
  
    
.content header{
    width:660px;
    
}
    

}



/*******************SECOND LARGEST SCREENS ********************/
@media screen and (min-width: 1062px) and (max-width: 1300px)
{
    
.content{
    padding:110px 8% 80px 8%;
}


.content header{
    width:550px;
}


.content h1{
    font-size: 54px;
}
    

.content h3{
    font-size:18px;
    margin-bottom:55px;
}
  
    
/**** Footer *****/

#footercontent .footerwords{
        margin-right:50px;
}

#footercontent img{
    width:275px;
}
    
    
}


/*******************TABLET-ISH SCREENS ********************/
@media screen and (min-width: 740px) and (max-width: 1061px)
{
     
.hidesmall{
    display:none;
}
    

nav img {
    width:80px;
    height: 80px;
}
    
    
.backgroundtilt{
    width:120%;
    padding-bottom:85px;
    margin-left:-10%;
    background-size: auto 100%;
}

    
.content{
    flex-direction: column;
    width:68%;
    max-width:600px;
    margin:auto;
    
}


.content header{
    text-align:center;
}
    

.content header h1{
    width:100%;
    font-size:67px;
    text-align:left;
}
    

.content header h3{
    width:100%;
    text-align:left;
    margin-bottom:50px;
}
    
    
/**** Footer *****/

#footercontent .footerwords{
        width:600px;
        margin-right:0;
}
    
}



/*******************LARGE PHONES AND SMALL TABLETS ********************/
@media screen and (min-width: 500px) and (max-width: 739px)
{
    
.hidesmall{
    display:none;
}

nav img {
    width:65px;
    height:65px;
    margin:10px 20px;
}
    
    
.backgroundtilt{
    width:120%;
    padding-bottom:65px;
    margin-left:-10%;
    background-size: 0%;
}

.content{
    flex-direction: column;
    width:70%;
    max-width:600px;
    margin:auto;
    
}


.content header{
    text-align:center;
}



.content header h1{
    width:100%;
    font-size:9.1vw;
    text-align:center;
}
    
    
.content header h3{
    width:100%;
    text-align:left;
    margin-bottom:50px;
}

/**** Footer *****/

.clipfooter{
    height:390px;
}


#footercontent .footerwords{
        width:600px;
        margin-right:0;
}


#footercontent .contactfooter{
    display:block;
}

#footercontent .contactfooter p{
    margin-bottom:6px;
}
}




/*******************SMALL PHONES ********************/
@media screen and (max-width: 499px)
{
    
nav img {
    width:38px;
    height:38px;
    border:#ffffff 2px solid;
}



.backgroundtilt{
    width:120%;
    padding-bottom:35px;
    margin-left:-10%;
    background-size: 0%;
}

.content{
    flex-direction: column;
    width:70%;
    max-width:600px;
    margin:auto;
    
}


.content header{
    text-align:center;
}



.content header h1{
    width:100%;
    font-size:9.1vw;
    text-align:center;
}
    
    
/**** Footer *****/

.clipfooter{
    height:450px;
}


#footercontent .footerwords{
        width:600px;
        margin-right:0;
}


#footercontent .contactfooter{
    display:block;
}

#footercontent .contactfooter p{
    margin-bottom:6px;
}
}