﻿/*#####################################################################
	IRA
#####################################################################*/
.breadcrumb { padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #c9c3c8; margin-left: auto; margin-right: auto; }

#pmIra h2 { font-size: 1.5em;   }

#iraOpen picture { animation: imgFade 3s; -webkit-animation: imgFade 3s;-moz-animation: imgFade 3s; -o-animation: imgFade 3s; }
#iraOpen h1 { font-size: 2em;  }
#iraOpen p { font-size: 1.1em; margin: 0.5rem 0; font-size: 0.9em;  }
#iraOpen .btns { font-size: 0.9em; }
#iraOpen .btns strong { display: block; margin-bottom: 0.25em; }
#iraOpen .btns a + a { margin-left: 1%; }

@keyframes imgFade { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes imgFade { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes imgFade { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes imgFade { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }

#iraStart { border-top: 1px solid #c9c3c8; }
#iraStart .custodians { padding: 10px 0; text-align: center; }
#iraStart .custodians .t { font-weight: bold;  margin: 0.25em 0; }
#iraStart .custodians .a { font-size: 0.9em; }
#iraStart .custodians .l { margin-top: 0.5em; }
#iraStart .custodians .l a { font-size: 0.75em; font-weight: bold; }
#iraStart .custodians .l a i { margin-right: 5px; }
#iraStart .custodians + .custodians { border-top: 1px dashed #c9c3c8; }

#iraForms { background: #ABA60B; padding: 1rem; }
#iraForms .t { font-size: 1.1em; line-height: 1.2em; font-weight: bold; color: #fff; }
#iraForms .l { font-size: 0.85em;  }
#iraForms .l a { display: block; }
#iraForms .l a + a { margin-top: 0.5rem; }

#iraFyi .img { text-align: center; }

#iraSteps { background: #dbe4e9; padding: 3rem 0 2rem; }
#iraSteps .step { font-size: 0.9em; padding: 1rem 0.5rem; }
#iraSteps .step img { mix-blend-mode: darken; }
#iraSteps .step h3 { font-size: 1.3em;  text-align: left; }
#iraSteps .step p { text-align: left; }
#iraSteps .step + .step { border-top: 1px dotted #c9c3c8; }

#iraCost .img { text-align: center; }
#iraCost .txt { margin-top: 1rem; }
#iraCost table { font-size: 0.8em; width: 100%; }
#iraCost table tr th { padding: 8px; background: #02636b; color: #fff; text-align: right; line-height: 1.2em; vertical-align: top; }
#iraCost table tr td { padding: 8px; border-bottom: 1px dotted #ccc; }
#iraCost table tr td:nth-child(2),
#iraCost table tr td:nth-child(3) { width: 30%; text-align: right; }

#iraFaqs .q { font-weight: bold; font-size: 1.05em; }
#iraFaqs .a { margin-left: 5%; margin-top: 0.5rem; }
#iraFaqs .a + .q { margin-top: 1.75rem; }
#iraFaqs ul { margin-top: 1em; }
#iraFaqs li + li { margin-top: 0.5rem; }



/*#####################################################################
	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) {
	#iraOpen p { margin-left: auto; margin-right: auto; width: 75%; }
	
	#iraStart .custodians + .custodians { border-top: none; padding: 10px; }
	#iraForms { padding: 2rem 1rem; }
	#iraForms .l a { display: inline-block; }
	#iraForms .l a + a { margin-top: 0; margin-left: 1%; }
	#iraSteps .step { padding: 0 0.5rem; }
	#iraSteps .step + .step { border-top: none; }
}

/* Large devices (desktops, 992px and up) - background: yellow; */
@media (min-width: 992px) {
	.breadcrumb { padding-left: 0; padding-right: 0; }
	#iraOpen { position: relative; }
	#iraOpen .ov { position: absolute; left: 0; top: 25%; background: rgba(255, 255, 255, 0.75); width: 100%; padding: 1.5rem 0; }
	#iraFyi .img { padding-bottom: 4em; padding-right: 1rem; position: relative; z-index: 1; }
	#iraFyi .coin { position: absolute; right: 60%; bottom: 0; }
	#iraFyi .check { position: absolute; left: 5%; bottom: 13%; }
	/* Animate */
	#iraFyi .coin.animate { animation: coinRoll 3s ease-out; -webkit-animation: coinRoll 3s ease-out; -moz-animation: coinRoll 3s ease-out; -o-animation: coinRoll 3s ease-out; }
	#iraFyi .check.animate { animation: iraCheck 4s; -webkit-animation: iraCheck 4s; -moz-animation: iraCheck 4s; -o-animation: iraCheck 4s; }

	@keyframes coinRoll {
		0% { right: -60%; transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); }
		100% { right: 60%; transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }
	}
	@-webkit-keyframes coinRoll {
		0% { right: -60%; transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); }
		100% { right: 60%; transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }
	}
	@keyframes iraCheck {
		0% { opacity: 0; }
		75% { opacity: 0; transform: scale(2,2); -webkit-transform: scale(2,2); -moz-transform: scale(2,2); }
		100% { opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); }
	}
	@-webkit-keyframes iraCheck {
		0% { opacity: 0; }
		75% { opacity: 0; transform: scale(2,2); -webkit-transform: scale(2,2); -moz-transform: scale(2,2); }
		100% { opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); }
	}

	#iraCost .img { padding-left: 1rem; }
	#iraCost .txt { margin-top: 0; }

	#iraFaqs .in { width: 75%; margin-left: auto; margin-right: auto; }

}

/* Extra large devices (large desktops, 1200px and up) - background: green; */
@media (min-width: 1200px) {
	#iraStart .info { padding-right: 1rem; }
	#iraStart .contact { padding: 0 0 0 1rem; border-left: 1px dotted #c9c3c8; text-align: center;  }
	#iraStart .contact .out { height: 100%; width: 100%; }
	#iraStart .contact .in { vertical-align: middle; }
	#iraStart .contact img { width: 75px; height: auto; opacity: 0.75; }
	#iraStart .contact .t { font-weight: bold;  }
	#iraStart .contact .txt { margin: 0.25em 0; font-size: 0.8em; }
	#iraStart .contact .l { font-weight: bold; font-size: 0.8em; }
}
