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

/* 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);
    }
}	
	
	
}