﻿/*#####################################################################
	STORAGE
#####################################################################*/
.breadcrumb { padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #c9c3c8; margin-left: auto; margin-right: auto; }


#secureStorage h2 { font-size: 1.5em;  }
#secureStorage h3 { font-size: 1.3em;  }


#ssOpen picture { animation: imgFade 3s; -webkit-animation: imgFade 3s;-moz-animation: imgFade 3s; -o-animation: imgFade 3s; }
#ssOpen h1 { font-size: 2em;  }
#ssOpen h2 { font-size: 1.5em;  color: #555; }

@keyframes imgFade { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }


#ssDocuments { background: #ABA60B; padding: 1.5rem; }
#ssDocuments .t { font-size: 1.1em; line-height: 1.2em; font-weight: bold; color: #fff; }
#ssDocuments .l { font-size: 0.85em;  }
#ssDocuments .l a { display: block; }
#ssDocuments .l a + a { margin-top: 0.5rem; }

#ssFee table { width: 100%; }
#ssFee table tr th { font-size: 0.8em; padding: 8px; background: #02636b; color: #fff;  }
#ssFee table tr td { padding: 8px; border-bottom: 1px dotted #c9c3c8; font-size: 0.9em; }
#ssFee table tr th:nth-child(2),
#ssFee table tr td:nth-child(2),
#ssFee table tr th:nth-child(3),
#ssFee table tr td:nth-child(3) { text-align: center; width: 20%; }


#ssFaqs .q { font-weight: bold; font-size: 1.05em; }
#ssFaqs .a { margin-top: 0.25rem; }


/*#####################################################################
	BROWSER RESIZE
#####################################################################*/
/* Small devices (landscape phones, 576px and up) - background: red; */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) - background: blue; */
@media (min-width: 768px) {
	#ssDocuments .l a { display: inline-block; }
	#ssDocuments .l a + a { margin-top: 0; margin-left: 0.5%; }

	#ssFee .fee { padding-right: 1rem; }
	#ssFee .txt { padding-left: 1rem; }
}

/* Large devices (desktops, 992px and up) - background: yellow; */
@media (min-width: 992px) {
	.breadcrumb { padding-left: 0; padding-right: 0; }

	#ssOpen { position: relative; }
	#ssOpen .ov { position: absolute; left: 0; top: 45%; background: rgba(255, 255, 255, 0.75); width: 100%; padding: 1.5rem 0; }

	#ssBanners { position: relative; height: 500px; }
	#ssBanners .right { position: absolute; right: 10%; bottom: 0; animation: right 2s; -webkit-animation: right 2s; -moz-animation: right 2s; -o-animation: right 2s; }
	#ssBanners .down.an { 
		transform-origin: top; -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top;
		animation: down 1s; -webkit-animation: down 1s; -moz-animation: down 1s; -o-animation: down 1s; }
	#ssBanners .right.an {  }

	@keyframes down {
		0% { transform: scaleY(0); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); }
	}

	@keyframes right {
		0% { opacity: 0; transform: translate(250px, 250px); }
	}
}

/* Extra large devices (large desktops, 1200px and up) - background: green; */
@media (min-width: 1200px) {
	#ssStart .info { padding-right: 1.5rem; }
	#ssStart .contact { padding: 0 0 0 1rem; border-left: 1px dotted #c9c3c8; text-align: center;  }
	#ssStart .contact .out { height: 100%; width: 100%; }
	#ssStart .contact .in { vertical-align: middle; }
	#ssStart .contact img { width: 75px; height: auto; opacity: 0.75; }
	#ssStart .contact .t { font-weight: bold;  }
	#ssStart .contact .txt { margin: 0.75em 0; font-size: 0.8em; }
	#ssStart .contact .l { font-weight: bold; font-size: 0.8em; }
}

