<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ruluko&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


<div class="header">
    <!--Content before waves-->
    
<div class="inner-header flex column">
	  
<h1>Welcome Aboard</h1>
      
<h2><span class="cop-name">the Jira & Confluence Community of Practice</span></h2>
      
<div id="actions">
		
<div class="action">
			
<div class="action-title">Request</div>
			
<div class="subactions">
				<a href="https://confluence.vanguard.com/pages/viewpage.action?pageId=39667454" class="subaction">Service Center</a>
				<a href="https://confluence.vanguard.com/pages/viewpage.action?pageId=424323129" class="subaction">Request and Vote for Outcomes & Add-Ons</a>
			</div>
		</div>
		<a href="/wiki/plugins/servlet/ac/biz.artemissoftware.confluence.html.HtmlMacro-d/html-macro-config">Visit W3Schools</a>
<div class="action">
			
<div class="action-title">Learn</div>
			
<div class="subactions">
                <a href="https://confluence.vanguard.com/display/JCCP/Atlassian+Cloud" class="subaction">Atlassian Cloud</a>
				<a class="subaction training-center" href="https://confluence.vanguard.com/x/hhepAQ">Training Center</a>
				<a class="subaction field-of-use" href="https://confluence.vanguard.com/x/qWKYL">Future Roadmap</a>
				<a class="subaction field-of-use" href="https://confluence.vanguard.com/x/t7OaAQ">Field of Use</a>
			</div>
		</div>
		
<div class="action">
			
<div class="action-title">Chat</div>
			
<div class="subactions">
				<a class="subaction chat-with-us" href="https://teams.microsoft.com/l/team/19%3afda472702f1a43b29f1b37d5ca2435b7%40thread.tacv2/conversations?groupId=fef09597-0892-4e11-8800-4ec3b88352b5&tenantId=d3a74ac8-efe4-4fe8-b707-b1bf8c6a25bd">Chat with us on Teams</a>
			</div>
		</div>
	  </div>
    </div>

    
<div>
      <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
        </g>
      </svg>
    </div>
</div>


<style>
.page-metadata, #title-text { display: none; }

.header {
      position: relative;
      margin-top: 60px !important;
      background: linear-gradient(60deg, #37649c 0%, #17687e 100%);
}

.header h1 {
    color: #fff;
    font-weight: 100;
    font-size: 5.6em;
	line-height: 40px;
    margin: 0px;
	font-family: "Ruluko";
}

.header h2 {
    color: #eee;
    font-weight: 100;
    font-size: 2em;
    margin: 0px;
}

.header h2 .cop-name { 
	font-family: 'Satisfy', cursive;
    font-size: 1.1em;
    color: #e2cb89;
}

.header p {
    letter-spacing: 1px;
    font-size: 16px;
    color: #333333;
    margin: 0px;
    color: #eee;
}

.header #actions {
    display: flex;
    width: 90%;
    justify-content: space-evenly;
}


.header #actions .action {
	width: inherit;
    margin: 50px 20px 0px 20px;
}

.header #actions .action .subactions a.subaction,
.header #actions .action div.action-title {
	display: block;
    background-color: rgba(0,0,0,0.13);
    text-align: center;
    transition: background-color 0.3s;
    font-family: 'Arima Madurai', 'Calibri Light', sans-serif;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 500;
	color: #fff;
}
.header #actions .action > div.action-title {
    font-size: 1.5em;
    padding: 27px 20px;
}

.header #actions .action .subactions { visibility: hidden; }

.header #actions .action .subactions a.subaction {
    padding: 12px 0px;
    margin: 6px 0px;
    background-color: rgba(0,0,0,0.13);
    color: #fff !important;
	font-size: 1.2em;
}
.header #actions .action:hover > div.action-title {
	background-color: rgba(0,0,0,0.4);
	text-decoration: none;
	cursor: initial;
	transition: background-color 0.3s;
}

.header #actions .action:hover .subactions {
	visibility: visible;
}

.header #actions .action .subactions a.subaction:hover {
	background-color: rgba(0,0,0,0.4);
    cursor: pointer;
	transition: background-color 0.3s;
}

.inner-header {
      height: 55vh;
      width: 100%;
      margin: 0;
      padding: 0;
}

.flex {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
}

.flex.column {
	flex-direction: column;
}

.waves {
      position: relative;
      width: 100%;
      height: 20vh;
      margin-bottom: -7px;
}

.content {
      position: relative;
      height: 20vh;
      text-align: center;
      background-color: white;
}

.parallax>use {
      animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
}

.parallax>use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
}

.parallax>use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
}

.parallax>use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
}

@keyframes move-forever {
	0% {
    	transform: translate3d(-90px, 0px, 0px);
  	}
	100% {
    	transform: translate3d(85px, 0px, 0px);
  	}
}
</style>
<script>
setTimeout(function(){$("#comments-section").remove();},500);


var isTeams = navigator.userAgent.toLowerCase().indexOf("teams/") > -1;
if(isTeams) { 
	$(".chat-with-us").replaceWith("<a class='subaction' href='#'>Go to the Posts tab to chat with us</a>");
}
</script>