/* ==========================================================================
   Author's custom styles
   ========================================================================== */


body { background-color: #00AEEF; }

h1 { font-size: 16px; margin-top: 0px; line-height: 20px; }
h2 { font-size: 12px; text-align: center; background-color: #00AEEF; margin: 0px; padding: 20px; font-weight: normal; line-height: 24px; } 
h3 { text-align: center; background-color: #005594; color: white; margin-bottom: 0px; font-size: 20px; font-weight: normal; padding: 10px 20px; clear: both; line-height: 24px; }
h4 {  }
h5 {  }
h6 {  }

#mainContainer { background-color: #FFF; }

.main-content { /*padding: 10px 30px;*/ color: #005594; }
.content-padding { padding: 10px 30px 30px; }

.blue-footer {  }

.title { font-style: italic; font-weight: bold; margin-top: 20px; }
.top-mar { margin-top: 20px; }

.left { width: 50%; float: left; }

.right { width: 50%; float: right; }

.clear { clear: both; } 

#mainMap { height: 30em; width: 100%; border: 2px solid; }

.phone-logo { padding: 20px; text-align: center; }
.phone-logo img { width: 50%; }
.desktop-header { width: 100%; }

/*.animation-container { padding: 40px 20px; position: relative; height: 500px; }
	.animation-container img { position: absolute; top: 10%; }
	.animation-container img.foreground { left: 34.7%; z-index: 10; animation:myfirst 2s; -webkit-animation:myfirst 2s; }
	.animation-container img.background { right: 34.7%; top: 10.2%; z-index: 9; animation:mysecond 2s; -webkit-animation:mysecond 2s; }*/


@media (max-width: 479px) {
	body {
		/*background-color: blue !important;*/
	}
	
	.animation-container { padding: 20px; text-align: center; /*position: relative; height: 500px;*/ }
	.animation-container img { margin: 0px auto; width: 50%; animation:myfirst1 2s; -webkit-animation:myfirst1 2s;}

	@keyframes myfirst1 {

	from { width: 45%; }
	to { width: 50%; }
	
	}
	
	@-webkit-keyframes myfirst1 {
	
	from { width: 45%; }
	to { width: 50%; }
	
	}
}

@media (min-width: 480px) {
	body {
		/*background-color: green !important;*/
	}
	
	.animation-container { padding: 20px; text-align: center; /*position: relative; height: 500px;*/ }
	.animation-container img { margin: 0px auto; width: 50%; animation:myfirst2 2s; -webkit-animation:myfirst2 2s; }

	@keyframes myfirst2 {

	from { width: 45%; }
	to { width: 50%; }
	
	}
	
	@-webkit-keyframes myfirst2 {
	
	from { width: 45%; }
	to { width: 50%; }
	
	}

}

@media (min-width: 768px) {
	body {
		/*background-color: red !important;*/
	}
	
	.animation-container { padding: 20px; position: relative; height: 580px; }
	.animation-container img { position: absolute; top: 10%; width: 49%; }
	.animation-container img.foreground { left: 25.1%; z-index: 10; animation:myfirst3 2s; -webkit-animation:myfirst3 2s; }
	.animation-container img.background { right: 25.1%; top: 10.2%; z-index: 9; animation:mysecond3 2s; -webkit-animation:mysecond3 2s; }
	
	@keyframes myfirst3 {

	from { left: 29.1%; }
	to { left: 25.1%; }
	
	}
	
	@-webkit-keyframes myfirst3 {
	
	from { left: 29.1%; }
	to { left: 25.1%; }
	
	}
	
	@keyframes mysecond3 {
	
	from { right: 29.1%; }
	to { right: 25.1%; }
	
	}
	
	@-webkit-keyframes mysecond3 {
	
	from { right: 29.1%; }
	to { right: 25.1%; }
	
	}
}

@media (min-width: 980px) { 
	body {
		/*background-color: white !important;*/
	}
	
	.animation-container { padding: 20px; position: relative; height: 580px; }
	.animation-container img { position: absolute; top: 10%; width: 38%; }
	.animation-container img.foreground { left: 30.7%; z-index: 10; animation:myfirst4 2s; -webkit-animation:myfirst4 2s; }
	.animation-container img.background { right: 30.7%; top: 10.2%; z-index: 9; animation:mysecond4 2s; -webkit-animation:mysecond4 2s; }
	
	@keyframes myfirst4 {

	from { left: 34.7%; }
	to { left: 30.7%; }
	
	}
	
	@-webkit-keyframes myfirst4 {
	
	from { left: 34.7%; }
	to { left: 30.7%; }
	
	}
	
	@keyframes mysecond4 {
	
	from { right: 34.7%; }
	to { right: 30.7%; }
	
	}
	
	@-webkit-keyframes mysecond4 {
	
	from { right: 34.7%; }
	to { right: 30.7%; }
	
	}
}

@media (min-width: 1200px) { 
	body {
		/*background-color: black !important;*/
	}
	
	.animation-container { padding: 20px; position: relative; height: 580px; }
	.animation-container img { position: absolute; top: 10%; width: 30%; }
	.animation-container img.foreground { left: 34.8%; z-index: 10; animation:myfirst5 2s; -webkit-animation:myfirst5 2s; }
	.animation-container img.background { right: 34.8%; top: 10.2%; z-index: 9; animation:mysecond5 2s; -webkit-animation:mysecond5 2s; }
	
	@keyframes myfirst5 {

	from { left: 38.8%; }
	to { left: 34.8%; }
	
	}
	
	@-webkit-keyframes myfirst5 {
	
	from { left: 38.8%; }
	to { left: 34.8%; }
	
	}
	
	@keyframes mysecond5 {
	
	from { right: 38.8%; }
	to { right: 34.8%; }
	
	}
	
	@-webkit-keyframes mysecond5 {
	
	from { right: 38.8%; }
	to { right: 34.8%; }
	
	}
}

/*-------------*/

.container-padding { padding: 20px; }

.blue {  }
.dark {  }
.light {  }