@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display|Open+Sans+Condensed:300,700&display=swap');

*, *:before, *:after {
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

html, body {
    font-weight: 300;
    height: 100%;
    margin: 0;
    overflow-x: hidden;      
    padding: 0;
    width: 100%;
}     

.container {
    min-height: 100%;
    position: relative;
}

/* ******* Header ******** */

header {
    background-color:  rgb(32, 48, 70);
    position: relative;
    z-index: 0;
}

.headerBox {
    padding: 10px;
    z-index: 100;
}

.hero {
    padding-bottom: 10px; 
}

.heroImg {
    min-height: 100%; 
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.hero span, .smaller {
    font-size: .7em;
}

.smaller {
    position: relative;
    top: -6px;
}

/********* fonts ************/
p, h3, a, h1 {
    font-family: "Open Sans Condensed", sans-serif;
}

h1 {
    color: #323232;
    font-size: 24px;    
    font-weight: 700;
    letter-spacing: .05em;
}

.individual h1 {
    font-size: 24px;
    line-height: 1.2em;
    margin-bottom: 0;
}

h2, .heroText {
    color: #c6c5c5;
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .05em;
    text-align: left;
}

.heroText {
    color: #FFFFFF;
    font-size: 25px;
    line-height: 1.2em;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width:80%;
}

.dark-text {
    color: #323232;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 600;
}

a.logo {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 300;
    text-decoration: none;
}

label {
    color: #323232;
    font-family: "Open Sans Condensed", sans-serif;
}

p, p a:link, p a:visited, label {
    
    font-size: 20px;
    text-decoration: none;
}
    
p a:link, p a:visited, .blue {
    color: rgb(61, 93, 122);
}

p a:hover {
    color: #fff;
}

.light {
    color: #d7d7d7;
}

/*********** nav ***********/

header {
    max-height: 670px;
    overflow: hidden;
}

.header-rule {
    border-color: #7B92B3;
}

nav ul, .sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li, .sub li {
    display: inline-block;
    padding-right: 15px;
}

nav a:link, nav a:visited {
    color: #7B92B3;
    display: block;    
    font-size: 15px;
    text-decoration: none;
}

nav a:hover, .sub a:hover{
    color: #ffffff;
    font-weight: 400;
}

.selected, .selected:hover {
    color: #ffffff !important;
}

.tag-line {
    color: #7B92B3;
    margin-top: 0px;
    font-size: 15px;
}

/********** main ***********/

main {
    background-color: #d7d7d7;
    padding-bottom: 90px;
    overflow:auto;
}

.dark {
    background-color: rgb(32, 48, 70);
}

.desktop-title {
    display: none;
}

.indImg {
    width: 100%;
}

.logoImg {
    width: 100%;
}

.portfolio {
    margin: 45px 0px 10px 15px;
}

.smallSqr, .largeSqr, .wideSqr, .tallSqr {
    float: left;
    height: 300px;
    margin-bottom: 15px;
    position: relative;
    width: 95%;
}

.fullSqr {
    height: 300px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 95%;
}

.smallimg, .largeimg, .wideimg, .tallimg, .fullImg {
    height: 100%;
}

.overlay {
    align-content: center;
    background-color: rgba(61, 93, 122, 0.9);
    bottom: 0;
    color: #ffffff;
    display: flex;
    flex-flow: column;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: opacity .5s ease;
}

.overlay2 {
    bottom: 0;
    left: 0;
    position:absolute;
    right: 0;
    top: 0;
}

.overlay h3 {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 0px; 
}

.overlay p {
    color: #fff;
    font-size: 12px;
    margin-top: 5px;
}

.p:hover > .overlay {
    opacity: 1;
    transition: opacity .5s ease; 
}

.button-block {
    padding-top: 30px;
}

/******** Contact Page *********/

.asterisk {
    margin-left: 220px;
}

.button {
    width: 100px;
}

.button, .button2, .button3 {
    background-color: transparent;
    border: solid 1px rgba(61, 93, 122, 0.9);
    color: rgba(61, 93, 122, 0.9);
    font-size: 16px;
    height: 32px;
    line-height: 1.5em;
    margin-top: 15px;
    text-decoration: none;
    font-family: "Open Sans Condensed", sans-serif;
}

.button:hover, .button2:hover, .button3:hover {
    background-color: rgba(61, 93, 122, 0.9);
    color: #fff;
}

.button-block {
    grid-column-start: 2;
}

.button2 {
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 2px 10px;
    text-align: center;
    width: 100px;
}

.button3 {
    margin-bottom: 40px;
}

.contact {
    background-color: #323232;
}

.contact body, .about body {
    background-color: #d7d7d7;
}

form {
    margin-top: 60px;
}

input {
    height: 40px;
    margin-bottom: 10px;    
    width: 90%;
}

.portrait {
    margin: 8px 30px 10px 0;
    vertical-align: text-top;
}

textArea {
    height: 80px;
    width: 90%;
}

.text-main {
    padding: 0 10px 90px 10px;
}

.honey {
    visibility: hidden;
    height: 0;
    position: absolute;
}

/* ******** detail page ********/

.individual {
    background-color: #d7d7d7;
}

.individual main{
    padding: 45px 15px 110px 15px;
}

.logoSqr {
    width: 100%;      
}

/*********** footer ************/

footer {
    background-color: rgb(32, 48, 70);
    bottom: 0;
    height: 60px;
    margin-top: 0;
    padding: 10px 30px;
    position: absolute;
    width:100%;
}

.button-logos {
    margin-top: 15px;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer li {
    display: inline-block;
}

footer a:link, footer a:visited {
    color: #c6c5c5;
    padding-right: 10px;
    text-decoration: none;
}

footer a:hover {
    color: #ffffff;
}

/********* thumbnails *********/
.p {
    background-size: cover;
    background-position: center center;
}

.p1 {
    background-image: url(../images/fontaine-thumb.jpg);
}

.p2 {
    background-image: url(../images/sras-thumb.jpg);
}

.p3 {
    background-image: url(../images/alpine-thumb.jpg);
}

.p4 {
    background-image: url(../images/rpr-thumb.jpg);
}

.p5 {
    background-image: url(../images/ifcc-thumb.jpg);
}

.p6 {
    background-image: url(../images/lawntech-thumb.jpg);
}

.p7 {
    background-image: url(../images/summitBillboard-thumb.jpg);
}

.p8, .b2 {
    background-image: url(../images/pickledEgg-thumb.jpg);
}

.p9, .b5 {
    background-image: url(../images/landspinSqr-thumb.jpg);
}

.p10 {
    background-image: url(../images/glacier-thumb.jpg);
}

.p11 {
    background-image: url(../images/txtwireAd-Sqr-thumb.jpg);
}

.p12 {
    background-image: url(../images/honerkamp-thumb.jpg);
}

.p13 {
    background-image: url(../images/austinKade-thumb.jpg);
}

.p14, .b4 {
    background-image: url(../images/northpoint-thumb.jpg);
}

.p15 {
    background-image: url(../images/logos-Sqr-thumb.jpg);
}

.p16 {
    background-image: url(../images/sleepy-Sqr-thumb.jpg);
}

 .p17 {
     background-image: url(../images/candy-thumb.jpg);
}

.p18 {
    background-image: url(../images/summitAdd-thumb.jpg);
}

.p19 {
    background-image: url(../images/hpPrinter-thumb.jpg);
}

.p20 {
    background-image: url(../images/txtwireInfo-thumb.jpg);
}

.p21 {
    background-image: url(../images/monarch-thumb.jpg);
}

.p22 {
    background-image: url(../images/mmh-thumb.jpg);
}

.p23 {
    background-image: url(../images/txtwireweb-Sqr-thumb.jpg);
}

.p24 {
    background-image: url(../images/liljenquist-thumb.jpg);
}

.p25, .b3 {
    background-image: url(../images/49North-thumb.jpg);
}

.p26 {
    background-image: url(../images/highValley-thumb.jpg);
}

.p27 {
    background-image: url(../images/tallman-Sqr-thumb.jpg);
}

.p28 {
    background-image: url(../images/townesquare-thumb.jpg);
}

.p29 {
    background-image: url(../images/bluefox-Sqr-thumb.jpg);
}

.p30 {
    background-image: url(../images/FoxstoneSqr.jpg);
}

.p31 {
    background-image: url(../images/individual/Kingfish-thumb.jpg);
}

.b1 {
    background-image: url(../images/logos-thumb.jpg);
}


/**************** individual *****************/

@media (min-width: 400px) {
    
    .headerBox {
        padding: 30px 45px 5px 45px;
    }
    
    .hero {
        padding-bottom: 30px;
    }
    
    input, textarea {
        max-width: 450px;
    }

    nav a:link, nav a:visited {
        font-size: 15px;
    }

    .portfolio {
        margin: 45px 15px 60px 30px;
    }

    .smallSqr, .largeSqr, .wideSqr, .tallSqr, .fullSqr {
        height: 350px;
    }

    .text-main {
        padding: 0 30px 90px 30px;
    }
}

@media (min-width: 450px) {
    nav {
        float: right;
        padding-top: 5px;
    }
    
    nav ul li {
        padding-left: 15px;
        padding-right: 0;
        padding-top: 3px;
    }

    .smallSqr, .largeSqr, .wideSqr, .tallSqr, .fullSqr {
        height: 400px;
    }  
}

@media (min-width: 525px) { /* 2 columns */
    .individual main{
        padding: 45px 45px 110px 45px;
    }
    
    .heroText {
        font-size: 28px;
    }

    .logo {
        font-size: 30px;
    }

    .logoSqr {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
    }

    .logoImg {
        width: 100%;
        align-self: center;
    }

    nav a:link, nav a:visited {
        font-size: 20px;  
    }
    
    .portrait {
        float: left;
    }
    
    .sub a:link, .sub a:visited {
        font-size: 20px;
    }
    
    .tag-line {
        margin-top: 0px;
        font-size: 20px;
    }
    
    .text-main p {
        width: 80%;
        max-width: 1000px;
    }
    
    .smallSqr, .largeSqr, .wideSqr, .tallSqr {
        margin-bottom: 2vw;
    }

    .fullSqr {
        margin-left: 2vw;
        width: 85vw;
    }
    
    .largeSqr {
        height: 85vw;
        margin-left: 2vw;
        width: 85vw;
    }

    .smallSqr {
        height: 41.5vw;
        margin-left: 2vw;
        width: 41.5vw;
    }

    .tallSqr {
        height: 85vw;
        margin-left: 2vw;
        width: 41.5vw;
    }

    .wideSqr {
        height: 41.5vw;
        margin-left: 2vw;
        width: 85vw;
    }

    .fullImg {
        margin-bottom: -5px;
        min-width: 100%;
    }

    .p9 {
        background-image: url(../images/landspin-thumb.jpg);
    }

    .p11 {
        height: 41.5vw;
        width: 41.5vw;
    }

    .m1 {
        background-image: url(../images/txtwireAd-Wide-thumb.jpg);
        width: 85vw;
    }
    
    .p15 {
        background-image: url(../images/logos-thumb.jpg);
    }

    .p16 { 
        background-image: url(../images/sleepy-thumb.jpg);
    }

    .p20 {
        background-image: url(../images/txtwireInfo-Sqr-thumb.jpg);
        height: 41.5vw;
    }

    .p23 {
        background-image: url(../images/txtwireWeb-thumb.jpg);
    }

    .p27 {
        background-image: url(../images/tallman-thumb.jpg);
    }

    .p29 {
        width: 41.5vw;
    }

    .m2 {
        background-image: url(../images/bluefox-thumb.jpg);
        width: 85vw;
    }
}

@media (min-width: 766px) { /* 3 columns */
    .fullSqr {
        width: 89.5vw;
    }

    .largeSqr {
        width: 59vw;
        height: 58.9vw;  
    }

    .smallSqr {
        height: 28.5vw;
        width: 28.5vw;
    }

    .tallSqr {
        height: 58.9vw;  
        width: 28.5vw;
    }

    .wideSqr {
        height: 28.5vw;
        width: 59vw;
    }

    .p6 {
        background-image: url(../images/lawntech-Sqr-thumb.jpg);
        width: 28.5vw;
    }

    .p9 {
        background-image: url(../images/landspinSqr-thumb.jpg);
        width: 28.5vw;
    }

    .p11 {
        background-image: url(../images/txtwireAd-Wide-thumb.jpg);
        height: 28.5vw;
        width: 59vw;
    }

    .p20 {
        height: 28.5vw;
    }

    .p23 {
        background-image: url(../images/txtwireweb-Sqr-thumb.jpg);
        width: 28.5vw;
    }

    .p29 {
        background-image: url(../images/bluefox-thumb.jpg);
        width: 59vw;
    }

    .m1 {
        background-image: url(../images/txtwireAd-Sqr-thumb.jpg);
        width: 28.5vw;
    }

    .m2 {
        background-image: url(../images/bluefox-Sqr-thumb.jpg);
        width: 28.5vw;
    }

    .w1 {
        background-image: url(../images/bluefox-Sqr-thumb.jpg);
        width: 28.5vw;
    }

    .heroText {
        font-size: 36px;
    }

    .logoSqr {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 800px) {
    .heroText {
        font-size: 35px;     
    }

    h1 {
        font-size: 38px;
    }

    header.dark {
        min-height: 100px;
    }

    header.dark h1 {
        font-size: 35px;
        margin-top: 5px;
    }

    nav ul li, .sub li {
        padding-left: 30px;
    }

    .tag-line {
        margin-top: 0px;
    }

    .logoSqr {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@media (min-width: 960px) {
    .block-start {
        grid-row-start: 1;
    }
    
    .button-block {
        padding-top: 0;
        grid-column-start: 2;
    }
    
    .desktop-title {
        display: block;
    }

    .double-block {
        align-items: start;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    
    .img-block {
        grid-column-start: 2;
    }
    
    .indImg {
        width: 100%;
    }
    
    .ind-main {
        display: grid;
        gap: 50px;
        grid-template-columns: 1px 3fr 1fr 1px;
    }

    .individual h1.dark-text {
        font-size: 24px;
        margin-bottom: -5px !important;
        margin-top: 0;;
    }

    .individual h3 {
        font-weight: 400;
        margin-top: 0;
    }

    .logoSqr {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .mobile-title {
        display: none;
    }

    .text-block {
        grid-column-start: 3;
        margin-top: -5px;
    }
}

@media (min-width: 1017px) { /* 4 columns */
    .fullSqr {
        width: 92vw;
        height: auto;
    }

    .largeSqr {
        width: 45vw;
        height: 44.9vw;  
    }

    .smallSqr {
        height: 21.5vw;
        width: 21.5vw;
    }

    .tallSqr {
        height: 44.9vw;  
        width: 21.5vw;
    }
    
    .wideSqr {
        height: 21.5vw;
        width: 45vw;
    }

    .fullImg {
        height: auto;
        width: 100%;
    }

    .p6 {
        background-image: url(../images/lawntech-thumb.jpg);
        width: 45vw;
    }

    .p9 {
        width: 21.5vw;
    }

    .p11 {
        height: 21.5vw;
    }

    .p12 {
        background-image: url(../images/honerkamp-Lrg-thumb.jpg);    
        width: 45vw;
    }

    .m1 {
        background-image: url(../images/txtwireAd-Sqr-thumb.jpg);
        width: 21.5vw;
    }

    .m2 {
        background-image: url(../images/bluefox-Sqr-thumb.jpg);
        width: 21.5vw;
    }

    .p20 {
        height: 21.5vw;
    }

    .p23 {
        background-image: url(../images/txtwireWeb-thumb.jpg);
        width: 45vw;
    }

    .p25 {
        background-image: url(../images/49North_Tall-thumb.jpg);
        height: 44.9vw;
    }

    .heroText {
        font-size: 45px;
    }

    .logoSqr {
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1247px) { /* 5 columns */
    .smallSqr {
        height: 17.75vw;
        margin-bottom: 1vw;
        margin-left: 1vw;
        width: 17.75vw;
    }

    .fullSqr {
        margin-left: 1vw;
        margin-bottom: 1vw;
        width: 92.75vw;
    }

    .largeSqr {
        height: 36.4vw;    
        margin-bottom: 1vw;
        margin-left: 1vw;
        width: 36.5vw;
    }
    
    .tallSqr {
        height: 36.4vw;
        margin-left: 1vw;
        margin-bottom: 1vw;
        width: 17.75vw;
    }
    
    .wideSqr {
        height: 17.75vw;
        margin-bottom: 1vw;
        margin-left: 1vw;
        width: 36.5vw;
    }

    .p9 {
        background-image: url(../images/landspin-thumb.jpg);
        width: 36.5vw;
    }

    .p11 {
        background-image: url(../images/txtwireAd-Sqr-thumb.jpg);
        height: 36.4vw;
        width: 36.5vw;
    }

    .p12 {
        background-image: url(../images/honerkamp-thumb.jpg);
        width: 17.75vw;
    }

    .p20 {
        background-image: url(../images/txtwireInfo-thumb.jpg);
        height: 36.4vw;
    }

    .p25 {
        background-image: url(../images/49North-thumb.jpg);
        height: 17.75vw;
    }

    .m1 {
        background-image: url(../images/txtwireAd-Sqr-thumb.jpg);
        height: 17.75vw;
        width: 17.75vw;
    }

    .m2 {
        background-image: url(../images/bluefox-thumb.jpg);
        width: 36.5vw;
    }

    .m3 {
        background-image: url(../images/txtwireInfo-Sqr-thumb.jpg);
        height: 17.75vw;
    }

    .b5 {
        width: 17.75vw;
    }
    
    .heroText {
        font-size: 46px;
    }
    
    .individualp  {
        max-width: 1000px;
        width: 80%; 
    }

    .qtrSqr {
        max-width: 1600px;       
        width: 100%;
    }

    .logoSqr {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1300px) {    
    .individualp {
        width: 70%;
    }
    
    .ind-main {
        grid-template-columns: auto 900px 300px auto;
    }
    
    .overlay h3 {
        font-size: 30px;
    }

    .overlay p {
        font-size: 18px;
    }
}

@media (min-width: 1620px) {
    .heroText {
        font-size: 65px;
        width: 1250px;
    }
}