@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


/* NAVAGATION SQUARES */
#lowernavcon {
    max-width: 800px;
    min-height: 100px;
    z-index: 7;
    margin-right: auto;
    margin-left: auto;
}

#squarenav {
    width: 100px;
    z-index: 10;
    margin: 0;
    display: inline-block;
}

#squaretext {
    font-size: 18px;
    width: 100%;
    z-index: 11;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

#squareimage {
    z-index: 11;
    box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5);
    background-color: #444;
}

#squarepano {
    margin: 0;
    width: 250px;
    z-index: 10;
}


/* NAV SQUARES RESPONSIVE */
@media (min-width: 0px) and (max-width: 750px) {


    #squarenav {
        width: 90px;
    }

}



/* NAV LINK COLOR */
#squarenav a:link {
    color: #444;
    text-decoration: none;
}

#squarenav a:visited {
    color: #444;
    text-decoration: none;
}

#squarenav a:hover {
    text-decoration: none;
    color: #444;
    font-weight: bold;
}

#squarenav a:active {
    color: #444;
    text-decoration: none;
}


/* SQUARE CHANGING COLORS */

.squareback {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 15s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes bgcolor {
    0% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    20% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    40% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    60% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    80% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    100% {
        background-color: rgba(232, 217, 176, 0.12);
    }
}

.squareback2 {
    -webkit-animation: bgcolor2 20s infinite;
    animation: bgcolor2 15s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes bgcolor2 {
    0% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    20% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    40% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    60% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    80% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    100% {
        background-color: rgba(2, 107, 150, 0.2);
    }
}

.squareback3 {
    -webkit-animation: bgcolor3 20s infinite;
    animation: bgcolor3 15s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes bgcolor3 {
    0% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    20% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    40% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    60% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    80% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    100% {
        background-color: rgba(232, 217, 176, 0.12);
    }
}

.squareback4 {
    -webkit-animation: bgcolor4 20s infinite;
    animation: bgcolor4 15s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes bgcolor4 {
    0% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    20% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    40% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    60% {
        background-color: rgba(2, 107, 150, 0.2);
    }

    80% {
        background-color: rgba(232, 217, 176, 0.12);
    }

    100% {
        background-color: rgba(2, 107, 150, 0.2);
    }
}




/* RESPONDSIVE 750 - Square Colors */

@media (max-width: 750px) {

    @keyframes bgcolor4 {
        0% {
            background-color: rgba(2, 107, 150, 0.2);
        }

        20% {
            background-color: rgba(232, 217, 176, 0.12);
        }

        40% {
            background-color: rgba(2, 107, 150, 0.2);
        }

        60% {
            background-color: rgba(232, 217, 176, 0.12);
        }

        80% {
            background-color: rgba(2, 107, 150, 0.2);
        }

        100% {
            background-color: rgba(232, 217, 176, 0.12);
        }
    }

    @keyframes bgcolor3 {
        0% {
            background-color: rgba(232, 217, 176, 0.12);
        }

        20% {
            background-color: rgba(2, 107, 150, 0.2);
        }

        40% {
            background-color: rgba(232, 217, 176, 0.12);
        }

        60% {
            background-color: rgba(2, 107, 150, 0.2);
        }

        80% {
            background-color: rgba(232, 217, 176, 0.12);
        }

        100% {
            background-color: rgba(2, 107, 150, 0.2);
        }
    }


}