/* *********************************************************
   undergraduateViewbook.css
************************************************************ */

/* ============================================================================== 
   Masonry
   Grid and Items Width
   Content Type: multiple  
   Last revised 09/06/18 by Aubrey
*/
.masonryWrapper { }

.masonryImageTile{ width:100% }

.tile { width: calc(25% - 20px);margin-bottom:20px; } 

/* old breakpoints
@media screen and (min-width: 992px) { 
  .tilewidth1 { width: calc(25% - 20px); }
  .tilewidth2 { width: calc(50% - 20px); }
  .tilewidth3 { width: calc(75% - 20px); }
  .tilewidth4 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 991.999px) { 
  .tilewidth1, .tilewidth2 { width: calc(50% - 20px); }
  .tilewidth3, .tilewidth4 { width: 100%; }
}
@media screen and (max-width: 767.999px) { 
  .tilewidth1, .tilewidth2, .tilewidth3, .tilewidth4 { width: 100%; }
}
*/
@media screen and (min-width: 1440px) { /* md + lg*/
  .tilewidth1 { width: calc(25% - 20px) !important; }
  .tilewidth2 { width: calc(50% - 20px) !important; }
  .tilewidth3 { width: calc(75% - 20px); }
  .tilewidth4 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 1439.999px) { 
  .tilewidth1, .tilewidth2 { width: calc(50% - 20px); }
  .tilewidth3, .tilewidth4 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 1439.999px) { /* sm */
  .masonryImageTileWrapper.tilewidth1, .masonryImageTileWrapper.tilewidth2 { width: calc(50% - 20px) !important; }
  .masonryImageTileWrapper.tilewidth3, .masonryImageTileWrapper.tilewidth4 { width: 100%; }
}
@media screen and (max-width: 767.999px) { /* xs */
  .tilewidth1, .tilewidth2, .tilewidth3, .tilewidth4 { width: 100%; }
}

/* All paths | mirrored */
/* Questions Find your counselor */
#id333683 { width: calc(25% - 20px); }

/* Bridgebuilder path page */

/* Emily Boynton video */
#id338805 { width: calc(25% - 20px); }

/* CTA feature Connect and Explore*/
#id340835 { width: calc(25% - 20px); }

/* downtown video */
#id333696 { width: calc(75% - 20px);}


/* Visionary path page */
/* braden video */
#id337937 { width: calc(25% - 20px);}

/* CTA feature Inspire and Innovate */
#id340846 { width: calc(25% - 20px); }

/* Steve Jenkins video */
#id338806 { width: calc(75% - 20px);}

/* capitol hill video */
#id335715 { width: calc(75% - 20px);}


/* Explorer path page */
/* Alan Yu video */
#id338800 { width: calc(25% - 20px);}

/* CTA feature Get Involved*/
#id340865 { width: calc(25% - 20px); }

/* Spotify playlist */
#idSpotifyApplyLikeARedhawk {}

/* parks video */
#id334574{ width:100%; }

/* Student stories page */
/* CTA feature Ready to be a Redhawk */
#id342618 { width: calc(25% - 20px); }

@media (max-width: 991.999px) and (min-width: 768px) {
  #id333683, #id338805, #id340835, #id337937, #id340846, #id338800, #id340865 { 
    width: calc(50% - 20px); 
  }
}
@media (max-width: 767.999px) {
  #id333683, #id338805, #id340835, #id337937, #id340846, #id338800, #id340865,
  #id333696, #id338806, #id335715, #idSpotifyApplyLikeARedhawk, #id342618 { 
    width: calc(100%); 
  }
}


/* ============================================================================== 
   Home page
   Hero (headline in frame font with icon background)
   Content Type: Code Only  
   Last revised 09/05/18 by Aubrey
*/

#heroAdventure{
  background-image: url(/media/undergraduate-admissions/undergraduate-viewbook/images/SU-icon-bg-fff7ec.png); 
  background-position: 50% 100%;
  background-repeat:no-repeat;
  background-size:cover;
  padding:150px 0;
  text-align:center;
}
@media (max-width:767.999px) {
  #heroAdventure{
    padding:50px 0;
  }
}
#heroAdventure .adventureImage img {
  max-width:90%;
}
  
#heroAdventure h1 {
  color:#333333;
  font-size:2.4rem;
  font-weight:500;
  letter-spacing: 3px;
  margin-top:0;
  padding:0;
  text-transform: uppercase;
}

#heroAdventure h1 span{
  display:none;
}
#heroAdventure p {
  color: #333333;
  font-size: 2rem;
  font-weight: 700;
  line-height: 3.5rem;
  margin-top: 3rem;
}

/* ============================================================================== 
   Home page
   Interactive Backpacks
   Content Type: Code Only  
   Last revised 9/6/18 by Jason
*/

#backpack-section .description{ /* deprecated with  .textWrapper */

  background-color:#333333;
  color:#ffffff;
  text-align:center;
  padding:20px;
  position: absolute;
    top: 455px;
    width: 100%;
}
#backpack-section .description h3{/* deprecated with  .textWrapper */
  color:#fdb913;
  font-family: "Roboto Slab", serif;
  text-align:center;
}

#backpack-section .textWrapper{ 
  background-color:#333333;
  color:#ffffff;
  text-align:center;
  padding:20px;
}
@media screen and (min-width: 992px) { /* md + lg*/
  #backpack-section .textWrapper{ 
    height:225px;
    position: absolute;
    top: 455px;
    width: 100%;
  }	
}

#backpack-section .textWrapper h3{
  color:#fdb913;
  font-family: "Roboto Slab", serif;
  font-size: 2.4rem;
  text-align:center;
}
#backpack-section .textWrapper p{
  font-size: 1.4rem;
  margin:0;
}
#backpack-section .textWrapper .buttonLink{
  margin-top: 30px;
}
#backpack-section .textWrapper .buttonLink a{
  margin:0;
}
#backpack-section .textWrapper .buttonLink a:hover, #backpack-section .textWrapper .buttonLink a:focus {
    background: #088099;
  border-radius:0;
}


.arrow-point-down{
    background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTYuNzQycHgiIGhlaWdodD0iMTQuNzVweCIgdmlld0JveD0iLTIuMTI1IC0xLjAzNCA5Ni43NDIgMTQuNzUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIuMTI1IC0xLjAzNCA5Ni43NDIgMTQuNzUiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik03LjUzMywwTDAsNi41OTFsNy41MzIsNi41OTEiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTYuOTQ4LDBMOS40MTUsNi41OTFsNy41MzIsNi41OTEiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMjYuMzYzLDBsLTcuNTMyLDYuNTkxbDcuNTMyLDYuNTkxIi8+DQo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTAuOTQyLDYuNTkxaDkzLjY3NSIvPg0KPC9zdmc+DQo=');
    height: 15px;
    width:70px;
    top:80px;
    right:calc(50% - 35px);
   /* because the svg is rotated, height is now width, width is now height */
    position:absolute;
    background-repeat: no-repeat;
    transform:rotate(270deg);
    z-index:999;
 }
#backpacks{
  padding:0;

}
@media screen and (min-width: 992px) { /* md + lg*/
  #backpacks{  display:flex; } /* helps make jq transition smooth by filling whole space. But we don't want it on mobile. */
}

#backpack-section .backpack{
  padding:0;

}
@media screen and (min-width: 992px) { /* md + lg*/
	.backpack { height: 680px}
}



.backpack .backpackimg{
  text-align:center;
  margin: 50px 33% !important;
}


.backpack .backpackimg:hover, .backpack .backpackimg:focus{
  animation: shake .5s; 
  animation-iteration-count: infinite; 
  cursor:zoom-in;
}
@media screen and (max-width: 991.999px) { /* xs + sm */
  .backpack .backpackimg{
    text-align:center;
    margin: 20px 33% !important;
  }	
}
@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  25% { transform: translate(0px, 0px) rotate(5deg); }
  75% { transform: translate(0px, 0px) rotate(-5deg); }
}

#backpackBridgeBuilderWrapper, #backpackItemsBridgeBuilder{
  background-color:#ef4136;
}
#backpackVisionaryWrapper, #backpackItemsVisionary{
 background-color:#fdb813; 
}
#backpackExplorerWrapper, #backpackItemsExplorer{
  background-color:#088099;
}

.backpackItems{
  cursor:zoom-out;
  padding:10px;
  margin:0 auto;
}
.backpackItems img{
  margin-bottom:10px;
}

.itemRow{
display: flex;
}
.item img{
 max-height: 215px;
 padding: 15px;
}

@media screen and (max-width:768px){ /* wat */
  .backpackitems{
    width:95px !important;
  }
  .backpackitems img{
    width:75px;
  }

}
@media screen and (min-width: 992px) { /* md + lg*/
  .backpackimg, .backpackItems{
    height:455px;
  }
}


body .buttonLink a{    
    border: 1px solid #ffffff;
    border-radius: 4rem;
    color: #ffffff;
    display: block;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 2rem;
  margin: 0 0 1.6rem 0;
    padding:1rem;
    text-align: center;
    text-transform: uppercase;
    -o-transition:.25s;
  -ms-transition:.25s;
  -moz-transition:.25s;
  -webkit-transition:.25s;
  transition:.25s;  
}
body .buttonLink a:hover, .buttonLink a:focus {    
    text-decoration:none;
}
body .caption {
    position: absolute;
    font-size: 1.2rem;
    letter-spacing: .2rem;
    font-weight: 100;
    font-style: italic;
}
body .caption.leftAlign {
    left: 3%;
    bottom: 1%;
}
body .caption.rightAlign {
    right: 3%;
    bottom: 1%;

}
@media (max-width: 767px) {
  body .caption.rightAlign {
    color: #333;
    top: 0;
    z-index: 10;
  }
}

/* ============================================================================== 
   Arrows
   Last revised 08/10/18 by Aubrey
*/
body .arrow-point-right {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NTAgMTYiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj4KICAgIDxwYXRoIGQ9Ik0gMTAgMSBMIDIgOCAxMCAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+CiAgICA8cGF0aCBkPSJNIDIwIDEgTCAxMiA4IDIwIDE1IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzMzMyIgLz4KICAgIDxwYXRoIGQ9Ik0gMzAgMSBMIDIyIDggMzAgMTUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjMzMzIiAvPgogICAgPHBhdGggZD0iTSAzIDggTCA2NTAgOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+Cjwvc3ZnPg==");    height: 30px;
    background-position: initial;
    background-repeat: no-repeat;
    height: 2rem;
    margin: 1rem 0;
    transform:rotate(180deg);
}
body .arrow-point-left {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NTAgMTYiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj4KICAgIDxwYXRoIGQ9Ik0gMTAgMSBMIDIgOCAxMCAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+CiAgICA8cGF0aCBkPSJNIDIwIDEgTCAxMiA4IDIwIDE1IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzMzMyIgLz4KICAgIDxwYXRoIGQ9Ik0gMzAgMSBMIDIyIDggMzAgMTUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjMzMzIiAvPgogICAgPHBhdGggZD0iTSAzIDggTCA2NTAgOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+Cjwvc3ZnPg==");    height: 30px;
    background-position: initial;
    background-repeat: no-repeat;
    height: 2rem;
    margin: 1rem 0;
}
/* ============================================================================== 
   Home page
   By the Numbers Top 4 Requested Stats + Financial Aid Link
   Content Type: Homepage Grid  
   Last revised 08/13/18 by Aubrey
*/
body .homepageGrid .homepageGridItem {
   justify-content: center;
}
/* ============================================================================== 
   Home page
   Content Type: Featured Curated Events
   Last revised 09/05/18 by Aubrey
*/ 
body .featuredCuratedEventsWrapper {
  margin:0;
}
/* ============================================================================== 
   Home page
   Impact LP Link
   Content Type: Jumbotron  
   Last revised 08/17/18 by Aubrey
*/
#id333541 {
    background-image: none;
  background:linear-gradient(115deg, #fdb913 0%, #fdb913 3%, transparent 3%, transparent 100%), linear-gradient(115deg, transparent 0%, transparent 97%, #fdb913 97%, #fdb913 100%);
}

#id333541 .jumbotron1.standardContent {
    padding: 10rem;
}
@media screen and (min-width: 992px) {
  body #pageContentWrapper #zoneA.col-md-12 #id333541 .jumbotron1 .boxlinks li{
  flex: none !important;
  width: auto;
  }
}
#id333541 .boxlinks li a {
    display:block;
    /* flex:none; */
}
/* ============================================================================== 
   Home Page 
   Infographic Grid of Stats and Rankings
   Content Type: Code only | Based on GradViewbook About Page Rankings Grid  
   Last revised 09/05/18 by Aubrey
*/

#section-rankings-grid {
  padding: 0;
  clear:both;
}

#section-rankings-grid h2 {
  text-align: center;
}  
  #section-rankings-grid p {
  text-align: center;
    margin:0;
}  
#section-rankings-grid .col-md-6 .col-md-12 {
  position: relative;
  width: 100%;
  padding-top: 83.9%;
}
@media screen and (max-width: 767.999px) { /* xs */
#section-rankings-grid .col-md-6 .col-md-12 {
  position: relative;
  width: 100%;
  padding-top: 83.9%;
}	
}


#section-rankings-grid .col-md-6 .col-md-6 {
  position: relative;
  width: 50%;
  padding-top: 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
#section-rankings-grid .Great-Wheel {
  background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/images/wheel375x315.jpg);
}


#section-rankings-grid .masters-university {
  background: #088099;
}
#section-rankings-grid .private-university {
  background: #fdb913;
}
#section-rankings-grid .part-time-mba {
  background: #178355;
}
#section-rankings-grid .SU-Rain {
  background-image:url('/media/graduate-admissions/images/graduate-viewbook/SU-Rain-293x243.jpg'); 
}
#section-rankings-grid .SU-Athletics {
  background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/images/rudy375x315.jpg); 
}
#section-rankings-grid .green-campus {
  background: #ef4135;
}
#section-rankings-grid .mba-accounting {
  background: #04a1b9;
}
#section-rankings-grid .peace-corps {
  background: #178355;
}
#section-rankings-grid .SU-Campus {
  background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/images/library375x315.jpg);
}
#section-rankings-grid .SU-Chalkboard {
  background-image:url('/media/graduate-admissions/images/graduate-viewbook/SU-Chalkboard-293x243.jpg'); 
}
#section-rankings-grid .Fulbright {
  background: #ef4135;
}
#section-rankings-grid .SU-Desk{
  background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/images/coffeeshopgirl375x315.jpg);
}
#section-rankings-grid .copy-container {
  position:  absolute;
  top: 25%;
  left: 0;
  right: 0;
  text-align: center;
  font-family:Montserrat,sans-serif;
  font-weight:200;
  font-size: 1.8rem;
  color: white;
  line-height: 1.4;
}
#section-rankings-grid .copy-container p {
  padding: 0 2.5rem;
}
#section-rankings-grid .copy-container strong {
  font-size: 6.6rem;
  font-weight: 100;
  display: block;
  line-height: 1em;
  padding-bottom: 1.5rem;
  /* font-family: Oswald; */
}

#section-rankings-grid .copy-container cite {
  font-size: 0.7em;
  display: block;
  font-style: italic;
}
#section-rankings-grid .col-md-12.col-sm-12 .copy-container p {
    font-size: 2.4rem;
}
@media (max-width: 480px) {
  #section-rankings-grid .col-md-12.col-sm-12 .copy-container p {
      font-size: 1.8rem;
  }
}
#section-rankings-grid .col-md-12.col-sm-12 .copy-container strong {
    font-size: 12rem;
}
#section-rankings-grid .col-md-12.col-sm-12 .copy-container cite {
    font-size: 1.4rem;
    margin-top: 2rem;
}
#section-rankings-grid .green-campus .copy-container strong {
  line-height: 1.25;
  text-transform: uppercase;
}
#section-rankings-grid .Fulbright .copy-container strong {
  font-size:5.5rem;
}
#section-rankings-grid .peace-corps .copy-container strong {
  text-transform: uppercase;
}
#section-rankings-grid .private-university .copy-container {
  color:#333 !important;
}
#section-rankings-grid .masters-university a,
#section-rankings-grid .masters-university a:hover {
    font-size: 1.4rem;
    color: #fff;
    text-decoration: underline;
}
@media (max-width: 1199px) {
  #section-rankings-grid .copy-container {
      padding:0 !important;
  }
  #section-rankings-grid .copy-container p {
      padding:.5rem;
      line-height:1.2;
  }
  #section-rankings-grid .copy-container strong {
      font-size: 4.4rem;
  }
}
@media (max-width: 991px) {
  #section-rankings-grid .copy-container strong {
    font-weight:400;
  }
}
@media (max-width: 767px) {
  #section-rankings-grid .copy-container strong {
    font-weight:400;
  }
}
@media (max-width: 640px) {
  #section-rankings-grid .copy-container {
      top: 35% !important;
  }
  #section-rankings-grid .copy-container strong {
  }
}
@media (max-width: 480px) {
  #section-rankings-grid .copy-container {
      top: 5% !important;
  }
  #section-rankings-grid .copy-container strong {
    xfont-size:1.6rem !important;
    font-weight:400;
    xdisplay:inline !important;
        font-size: 5rem !important;
    padding-bottom: 0;
  }
}
@media (max-width: 320px) {
  #section-rankings-grid .copy-container {
      top: 15% !important;
  }
}

/* ============================================================================== 
   Home Page
   Image Panel 
   Content Type: | Based on #1936 Gradviewbook Featured Profile
   Last revised
*/


body .panelWrapper {
    position:relative;
}
body .panelWrapper .panelFlexContainer{
    display:flex;
    float:right;
}
/*only way to get mobile to not take up space set in html tag*/
@media (max-width: 991px) {
    body .panelWrapper .panelFlexContainer{
        height:initial !important;
    }
}
body .panelOverlay {
    background-size: cover;
    width: 100%;
    background-color: blue;
}
@media (max-width: 991px) {
  body .panelOverlay {
    height: 300px !important;
  }
}
body .panelText {
    background: #333333;
    padding: 30px;
}
body .panelWrapper .panelDarkBlueDiv, body .panelWrapper .panelGoldDiv, body .panelWrapper .panelGreenDiv, body .panelWrapper .panelLightBlueDiv, body .panelWrapper .panelOrangeDiv, body .panelWrapper .panelRedDiv, body .panelInner{
    border-image: 0;
    border-image-slice: 0;
    border-bottom:0;
    border-right:0;
    border-left:0;
}
body .panelWrapper .panelDarkBlueDiv{
    border-top:10px solid #00345d;
}
body .panelWrapper .panelGoldDiv{
    border-top:10px solid #fab82f;
}
body .panelWrapper .panelGreenDiv{
    border-top:10px solid #6cb33f;
}
body .panelWrapper .panelLightBlueDiv{
    border-top:10px solid #088099;
}
body .panelWrapper .panelOrangeDiv{
    border-top:10px solid #ef4135;
}
body .panelWrapper .panelRedDiv{
    border-top:10px solid #aa0000;
}
body .panelInner{
    margin:0;
    border-top:10px solid #ffffff;
    border-image: 0;
    border-image-slice: 0;
    border-bottom:0;
    border-right:0;
    border-left:0;
}
body .flexboxtweener .panelWrapper .panelInner{ /* hack to hide banner in IE/Edge */
 border:0;
}

@media (min-width: 768px) {
    body .panelWrapper .topRightPanel, .panelWrapper .bottomRightPanel{
        justify-content: flex-end;
    }
    body .panelWrapper .topLeftPanel, .panelWrapper .bottomLeftPanel{
        justify-content:flex-start;
    }
    body .panelWrapper .topCenterPanel, .panelWrapper .bottomCenterPanel{
        justify-content: center;
    }
    body .panelFlexContainer .topRightPanel, .panelFlexContainer .bottomRightPanel{
        margin-right:4.1666666%;
    }
    body .panelFlexContainer .topRightPanel, .panelFlexContainer .topLeftPanel, .panelFlexContainer .topCenterPanel{
        margin-top:4.1666666%;
    }
    body .panelFlexContainer .bottomRightPanel, .panelFlexContainer .bottomLeftPanel, .panelFlexContainer .bottomCenterPanel{
        align-self:flex-end;
    }
    body .panelFlexContainer .topRightPanel, .panelFlexContainer .topCenterPanel, .panelFlexContainer .topLeftPanel{
        margin-bottom:auto;
    }
    body .panelFlexContainer .topLeftPanel, .panelFlexContainer .bottomLeftPanel{
        margin-left:4.1666666%;
    }
    body .panelFlexContainer .bottomRightPanel, .panelFlexContainer .bottomCenterPanel, .panelFlexContainer .bottomLeftPanel{
        margin-bottom:4.1666666%;
    }
    body .panelWrapper .panelDarkBlueDiv{
        border: 10px solid #00345d;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #00345d 25.01%, #00345d 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelWrapper .panelGoldDiv{
        border: 10px solid #fab82f;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #fab82f 25.01%, #fab82f 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelWrapper .panelGreenDiv{
        border: 10px solid #6cb33f;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #6cb33f 25.01%, #6cb33f 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelWrapper .panelLightBlueDiv{
        border: 10px solid #088099;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #088099 25.01%, #088099 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelWrapper .panelOrangeDiv{
        border: 10px solid #ef4135;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #ef4135 25.01%, #ef4135 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelWrapper .panelRedDiv{
        border: 10px solid #aa0000;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #aa0000 25.01%, #aa0000 100%);
        border-image-slice: 1;
        border-bottom: 0;
    }
    body .panelInner {
        border: 10px solid #ffffff;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, #ffffff 25.01%, #ffffff 100%);
        border-image-slice: 1;
        border-bottom: 0;
        padding: 0;
    }
    body .panelWrapper .topRightPanel, .panelWrapper .bottomRightPanel, .panelWrapper .topCenterPanel, .panelWrapepr .bottomCenterPanel{
      float:right;
    }
    body .panelWrapper .topLeftPanel, .panelWrapper .bottomLeftPanel{
      float:left;
    }
}

body .panelDarkBlueH2{
    color: #00245d;
}
body .panelGoldH2{
    color: #fab82f;
}
body .panelGreenH2{
    color: #6cb33f;
} 
body .panelLightBlueH2{
    color: #088099;
}
body .panelOrangeH2{
    color: #ef4135;
}
body .panelRedH2{
    color: #aa0000;
}
body .panelText h2 {
    margin: 0;
}
body .panelText p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 2.4rem;
}
body .panelLink {
    padding: 0;
    margin-top: 30px;
}

body .panelDarkBlueA a:hover{
    background: #00245d;
    color: #ffffff;
}
body .panelGoldA a:hover{
    background: #fab82f;
}
body .panelGreenA a:hover{
    background: #6cb33f;
}
body .panelLightBlueA a:hover{
    background: #088099;
}
body .panelOrangeA a:hover{
    background: #ef4135;
}
body .panelRedA a:hover{
    background: #aa0000;
}
body .panelLink a:hover {
    background: #ffffff;
    color: #333333;
    text-decoration: none;
}

body .panelInner .panelLinks{
  padding-top: 30px;
  text-align:center;
  width:100%;
  display:flex;
  margin:auto auto;
  list-style-type: none;
  justify-content: space-between;
  flex-wrap:wrap;
}

html .panelInner .panelLinks a{
  color:#aa0000;
  display:block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight:500;
  line-height:1.6rem;
  padding:15px;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
  border-radius:30px;
}

html .panelInner .panelLinks li{
  border: 1px solid #088099;
  border-radius:0;
  display: flex;
  flex: 0 1 calc(50% - 7px);
  flex-direction: column;
  justify-content: center;

}


body .panelInner .panelLinks li:hover a, body .panelInner .panelLinks li:focus a,
body .panelInner .panelLinks li a:hover, body .panelInner .panelLinks li a:focus{
  background: #088099;
    border-radius:0;
  color: #ffffff;
  text-decoration: underline;
}
body .panelInner .panelLinks li:before{
  content: '';
  padding-right:0px;
}

/* ============================================================================== 
   Path Pages 
   Megabanner
   Content Type: Megabanner 
   Last revised 9/6/18 by Jason
*/
body .megaBannerWrapper {
  background:#333;
}
body .megaBannerTrianglesRed, body .megaBannerTrianglesOrange,
body .megaBannerTrianglesGold, body .megaBannerTrianglesGreen,
body .megaBannerTrianglesEmerald, body .megaBannerTrianglesDarkGreen,
body .megaBannerTrianglesLightBlue, body .megaBannerTrianglesDarkBlue,
body .megaBannerTrianglesBrown, body .megaBannerTrianglesBlack, body .megaBannerTrianglesWhite {
  background-image: none;
}
body .megaBannerIntro h5 {
    color: #fdb913;
    font-weight:500;
}
body .megaBannerIntro p {
    color: #fff;
}


#id333011 .megaBanner { /* Explorer Megabanner */
    background-position: center 27% !important;
}
/* ============================================================================== 
   Path Page 
   Jumbotron 1
   Content Type: Jumbotron 1 with Jumplinks 
   Last revised 08/23/18 by Aubrey
*/
body .jumbotron1Wrapper {
  background-image:linear-gradient(115deg, #fdb913 0%, #fdb913 3%, transparent 3%, transparent 100%), linear-gradient(115deg, transparent 0%, transparent 97%, #fdb913 97%, #fdb913 100%);
  position: relative;
  top: -20px;
}
body #zoneA .jumbotron1Wrapper {
  margin:0;
}
#id333645 {
background-image:none;
}
body .jumbotron1 {
    padding: 20rem 0;
    text-align:center;
}
body .jumbotron1 .jumbotronContent {
    padding: 0rem 12rem;
  }
@media (max-width: 1170px) and  (min-width: 768px) {
  body #zoneA.col-xs-12 .jumbotron1 {
    padding: 6rem 0 8rem;
  }
  body #zoneA.col-xs-12 .jumbotron1 .jumbotronContent {
    padding: 0rem 6rem;
  }
}
@media  (max-width: 767.999px) {
  body #zoneA.col-xs-12 .jumbotron1 {
    padding: 3rem;
    text-align: left;
  }
  body .jumbotron1 .jumbotronContent {
    padding:0rem;
  }
}
body .jumbotron1 h2 {
    color:#333;
    font-family:Montserrat,sans-serif;
    font-size:2.2rem;
    font-weight:500; 
    letter-spacing:2px;
    line-height:1.5;
    text-transform:uppercase;
}
body .jumbotron1 h3 {
    color:#ef4135;
    font-size:2.2rem;
    font-weight:500; 
    padding:2rem 0;
}
body .jumbotron1 .boxlinks {
  align-items: center;
  justify-content: center;
}
body .arrow-point-right {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NTAgMTYiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj4KICAgIDxwYXRoIGQ9Ik0gMTAgMSBMIDIgOCAxMCAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+CiAgICA8cGF0aCBkPSJNIDIwIDEgTCAxMiA4IDIwIDE1IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzMzMyIgLz4KICAgIDxwYXRoIGQ9Ik0gMzAgMSBMIDIyIDggMzAgMTUiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjMzMzIiAvPgogICAgPHBhdGggZD0iTSAzIDggTCA2NTAgOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMzMzMiIC8+Cjwvc3ZnPg==");    
    height: 30px;
    background-position: initial;
    background-repeat: no-repeat;
    height: 2rem;
    margin: 1rem 0;
    transform:rotate(180deg);
}



/* ============================================================================== 
   Path Page 
   Subheaders (partial blue background images plus backpack item)
   Content Type: Code only | Based on Jumbotron III
   Last revised 09/05/18 by Aubrey
*/

.tile .jumbotron3 {
    display:flex;
    padding: 60px 0;
    background-repeat:no-repeat;
}
.tile .jumbotron3.jumbotron3Flipped {
    flex-direction: row-reverse;
}
.tile .jumbotron3Image {
    flex: 1;
    overflow:visible;
    position: relative;
    text-align: center;
    z-index: 10;
}

.tile .jumbotron3 .jumbotron3PartialBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 50.01%);
}
.tile .jumbotron3.jumbotron3Flipped .jumbotron3Image .jumbotron3PartialBg {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 50.01%);
}
.tile .jumbotron3Image .jumobtron3BackpackItem {
    max-width: 100%;
    padding: 10rem;
    position: relative;
    z-index: 1000;
    width: 80%;
}
@media screen and (min-width: 768px) and (max-width: 1199.999px) { /* sm + md */
   .tile .jumbotron3Image .jumobtron3BackpackItem {
      padding: 2rem;
  } 
}

.tile .jumbotron3Image .arrow-point-right {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    z-index: 10;
}
.tile .jumbotron3Image .arrow-point-left {
    position: absolute;
    top: 45%;
    left: -5rem;
    width: 100%;
    z-index: 10;
}

.tile .jumbotron3Content {
    flex: 1;
    display: flex;
}
.tile .jumbotron3Content .jumbotron3Text {
    padding: 0 10rem;
    border:none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (min-width: 768px) and (max-width: 1199.999px) { /* sm + md */
  .tile .jumbotron3Content .jumbotron3Text {
      padding: 0 5rem;
  }
}
.tile .jumbotron3Content h2 {
    color: #aa0000;
    font-family: "Roboto Slab", serif;
    text-transform: uppercase;
    padding:0;
    text-align: left;
}
.tile .jumbotron3Content p {
    color: #333333;
    font-size: 1.4rem;
    line-height: 1.75;
    padding:0;
}

.tile .jumbotron3Content a,
.tile .jumbotron3Content a:visited {
  color:#088099;
  text-decoration:underline;
}
.tile .jumbotron3Content a:hover {
  color:#aa0000;
  text-decoration:underline;
}
@media screen and (max-width: 767.999px) {
  .tile .jumbotron3,
  .tile .jumbotron3.jumbotron3Flipped {
    flex-direction: column;
  }
  .tile .jumbotron3 .jumbotron3PartialBg,
  .tile .jumbotron3.jumbotron3Flipped .jumbotron3Image .jumbotron3PartialBg {
    background: none;
  }
  .tile .jumbotron3Image .jumobtron3BackpackItem {
    padding:5rem;
    top: 170px;
    width:100%;
  }
  .tile .jumbotron3Image .arrow-point-left,
  .tile .jumbotron3Image .arrow-point-right {
    display: none;
  }
  .tile .jumbotron3Content .jumbotron3Text {
    padding: 150px 5rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ============================================================================== 
   Path Page
   Masonry Image Tile
   Content Type: Masonry Image Tile #5047
   Last revised 08/22/18 by Aubrey
*/
body .masonryImageTile{
  background-position: center center; /* could be overriden by content item */
  background-repeat: no-repeat;
  background-size: cover;
  /*cursor:pointer;*/
  position:relative;
}
body .masonryImageTile img {
  width:100%;
}
body .masonryImageTileOverlay{
  border: 8px solid transparent;
  display: flex;
  flex-direction: column;
  height:100%;
  justify-content: center;
  left:0;
  position: absolute;
  top: 0;
  transition: all 0.2s ease;
  width: 100%;
  z-index: 1;
}

body .masonryImageTileOverlayRed:hover {
  background-color: rgba(170, 0, 0,.7);
}
body .masonryImageTileOverlayOrange:hover {
  background-color: rgba(239, 65, 53,.7);
}
body .masonryImageTileOverlayGold:hover {
  background-color: rgba(253, 185, 19,.7);
}
body .masonryImageTileOverlayGreen:hover {
  background-color: rgba(85, 179, 27,.7);
}
body .masonryImageTileOverlayEmerald:hover {
  background-color: rgba(0, 135, 101,.7);
}
body .masonryImageTileOverlayDarkGreen:hover {
  background-color: rgba(18, 74, 18,.7);
}
body .masonryImageTileOverlayLightBlue:hover {
  background-color: rgba(4, 169, 197,.7);
}
body .masonryImageTileOverlayDarkBlue:hover {
  background-color: rgba(0, 50, 130,.7);
}
body .masonryImageTileOverlayBlack:hover {
  background-color: rgba(51, 51, 51,.7);
}
body .masonryImageTileOverlayBrown:hover {
  background-color: rgba(128, 112, 96, .7);
}  
body .masonryImageTileOverlayWhite:hover {
  background-color: rgba(247, 247, 247,.7);
}
body .masonryImageTileOverlayTransparent:hover {
  background-color: none;
}
body .masonryImageTileBorderRed:hover {
  border: 8px solid #aa0000;
}
body .masonryImageTileBorderOrange:hover {
  border: 8px solid #ef4135;
}
body .masonryImageTileBorderGold:hover {
  border: 8px solid #fdb913;
}
body .masonryImageTileBorderLightGreen:hover {
  border: 8px solid #55b31b;
}
body .masonryImageTileBorderEmerald:hover {
  border: 8px solid #008765;
}
body .masonryImageTileBorderDarkGreen:hover {
  border: 8px solid #124a12;
}
body .masonryImageTileBorderLightBlue:hover {
  border: 8px solid #088099;
}
body .masonryImageTileBorderDarkBlue:hover {
  border: 8px solid #003282;
}
body .masonryImageTileBorderBlack:hover {
  border: 8px solid #333333;
}
body .masonryImageTileBorderBrown:hover {
  border: 8px solid #807060;
}
body .masonryImageTileBorderWhite:hover {
  border: 8px solid #f7f7f7;
}

body .masonryImageTileText {
  color: #fff;
  display: none;
  padding: 0 25%;
  text-align: center;
  z-index: 1;
}
body .tilewidth1 .masonryImageTileText {
  padding:0 2%;
} 
@media (max-width: 767.999px) {
  body .masonryImageTileText {
    padding: 0 5%;
  }
}

body .masonryImageTileOverlay:hover .masonryImageTileText {
  display: block;
}
body .masonryImageTileText h3 {
  color: #fdb913;
  font-family: "Roboto Slab",serif;
  font-size:2.4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}
body .masonryImageTileText p {
  color: #fff;
  font-size:1.4rem;
}
body .masonryImageTileText .masonryImageTileLink {
    margin-top: 3rem;
    text-transform: uppercase;
}
body .masonryImageTileText .masonryImageTileLink a{
  color:#fff;
  text-decoration:underline;
}
body .masonryImageTileText .masonryImageTileLink a:hover {
  color:#fdb913;
  text-decoration:underline;
}
/* ============================================================================== 
   Masonry Image Tile with Rollovers
*/

/* Rudy at Mens Soccer rollover  */
#id337725 .masonryImageTileOverlayBlack:hover {
  background-image: linear-gradient(rgba(51, 51, 51,.7),rgba(51, 51, 51,.7)), url(/media/undergraduate-admissions/undergraduate-viewbook/images/SU-Mens_Soccer_09_24_015.jpg);
  background-position:60%;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Redhawk March Madness rollover  */
#id337720 .masonryImageTileOverlayBlack:hover {
  background-image: linear-gradient(rgba(51, 51, 51,.7),rgba(51, 51, 51,.7)), url(/media/undergraduate-admissions/undergraduate-viewbook/images/SU-Redhawk-Madness-IMG_1323.jpg);
  background-size:100%;
}

/* ============================================================================== 
   Path Page   
   On Campus and Around Seattle Links
   Content Type: Code Only | Based on LinkBoxes from gradviewbook featured profiles
   Last revised 08/06/18 by Aubrey
*/

body .linksBoxesWrapper.tile {
    background: #008765;
    color: #ffffff;
}
body .linkBox {
    padding: 0;
}
body .linksBoxesWrapper h2{
  color: #fdb913;
  font-family: "Roboto Slab", Courier, monospace;
  font-size: 2.4rem;
  margin: 0;
  padding: 0 0 3rem 0;
  text-align: center;
  text-transform: uppercase;
}
body .linksBoxesWrapper ul{
  text-align:center;
  list-style-type:none;
  padding: 0 0 3rem;
}
body .linksBoxesWrapper ul li{
  padding:5px 0;
}
body .linksBoxesWrapper ul li a{
  border-radius:0 !important;
  color: #fff;
  font-family: 'Montserrat', Verdana, Geneva, sans-serif;
  font-size: 1.6rem;
  text-decoration:underline;
}
body .buttonLink a{
  border-radius:0 !important;
}
body .linksBoxesWrapper .buttonLink a:hover, .linksBoxesWrapper .buttonLink a:focus {
    background: #088099;
  border-radius:0;
}
/* ============================================================================== 
   Path Page
   Student Profile 
   Content Type: Code Only | Based on #1936 Gradviewbook Featured Profile
   Last revised 11/27/18 by Aubrey
*/

body .featuredProfileWrapper {
    background: #333333;
    color: #ffffff;
    font-family: 'Montserrat', Verdana, Geneva, sans-serif;
}
body .featuredProfileWrapper .featuredProfile {
    display:flex;
}
@media (max-width:767.999px) {
  body .featuredProfileWrapper .featuredProfile {
    flex-direction:column;
    padding: 0 !important;
  }
}
body .featuredProfileWrapper .featuredProfilePhoto {
  flex:1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}
body .featuredProfileWrapper .featuredProfileContent {
  flex:1;
}
body .featuredProfileWrapper .featuredProfileText {
  max-width: 585px;
  padding: 5rem;
}
@media (max-width:767.999px) {
  body .featuredProfileWrapper .featuredProfilePhoto {
    min-height: 450px;
  }
  body .featuredProfileWrapper .featuredProfileText {
    padding: 3rem;
  }
}
@media all and (min-width: 767.999px) and (max-width: 991.999px){ /* sm */
  body .featuredProfileWrapper .alignleft .featuredProfilePhoto{ left: 50%; }
  body .featuredProfileWrapper .alignleft .featuredProfileText{ right: 50%; }
}
@media all and (min-width: 992px){ /* md and lg */
  body .featuredProfileWrapper .alignleft .featuredProfilePhoto{ left: 33.33333%; }
  body .featuredProfileWrapper .alignleft .featuredProfileText{ right: 66.66666%; }
}

body .featuredProfileWrapper .featuredProfileType {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPgogICAgPHBhdGggZD0iTSAwIDQwIEwgNjAgNDAiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJub25lIiAvPgogICAgPHBhdGggZD0iTSA1MCAzMCBMIDYwIDQwIDUwIDUwIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI2ZmZiIgZmlsbD0ibm9uZSIgLz4KICAgIDxwYXRoIGQ9Ik0gNDAgMzAgTCA1MCA0MCA0MCA1MCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNmZmYiIGZpbGw9Im5vbmUiIC8+CiAgICA8cGF0aCBkPSJNIDMwIDMwIEwgNDAgNDAgMzAgNTAiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJub25lIiAvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: 23%;
  background-position: right center;
  color:#fdb913;
  display: inline-block;
  font-family:"Roboto Slab",serif;
  font-size: 1.4rem;
  margin: 0 0 15px 0;
  padding-right: 50px;
}
body .featuredProfileWrapper .featuredProfileName {
  color: #04a9c5; /* keep, on black */
  margin:0 0 15px 0;
}
body .featuredProfileWrapper .featuredProfileAffiliation{
  margin-bottom: 30px;
}
body .featuredProfileWrapper .featuredProfileAffiliation p{
  color: #04a9c5; /* keep, on black */
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8rem;
  margin:0;
  text-transform: uppercase;
}
body .featuredProfileWrapper .featuredProfileSummary p {
  color: #ffffff;
  font-size: 1.6rem;
  line-height:2;
}
body .featuredProfileLink {
  padding: 0;
}
body .featuredProfileLink a:hover {
  background: #088099;
  color: #ffffff;
  text-decoration: none;
}
/* ============================================================================== 
   Student Stories
   Student Profile 
   Content Type: Grad Viewbook Profile Page	
   Last revised 08/27/18 by Aubrey
*/

#section-profile {
    background:#fff;
    padding:5rem 0 10rem;
}
#section-profile .container {
  position:relative;
  width:auto;
}
#section-profile .img-container {
  position:relative;
    z-index:1;
}
#section-profile .img-container img {
    width:100%;
    height: auto;
}
#section-profile .arrow-point-right {
    top:4.25rem;
}
@media (max-width:992px) {
  #section-profile .arrow-point-right {
    top:0;
  }
}
@media (max-width:767px) {
  #section-profile .arrow-point-right {
    background-position: 0;
    background-size:200%;
    top:0;
  }
}
#section-profile .copy-container h1 {
    color:#aa0000;
    font-family:"Roboto Slab",Courier,serif;
    margin: 0;
    line-height: 3.4rem;
    text-transform:uppercase;
}
#section-profile .copy-container h2 {
    color:#333;
    font-family:"Montserrat",sans-serif;
    font-size:1.3rem;
    line-height:2;
    margin: 1rem 0 3rem;
    text-transform:uppercase;
}
#section-profile .copy-container h2 {
    color:#333;
    font-family:"Montserrat",sans-serif;
    font-size:1.3rem;
    line-height:1.5;
}
#section-profile .copy-container p {
  color:#333;
  font-size:1.4rem;
}

/* ============================================================================== 
   Path pages
   Featured Links in Masonry
   Content Type: Call to Action Feature 
   Last revised 08/17/18 by Aubrey
*/

body #zoneA.col-md-12 .callToActionWrapper.tile .callToActionButton {
    flex-basis: 100%;
}
body #pageContentWrapper.container-fluid #zoneA.col-md-12 .callToActionWrapper.tile .callToAction {
    padding:30px;
}

@media screen and (max-width: 992px) and (min-width: 767px) {
  body #pageContentWrapper #zoneA.col-sm-12 .callToActionWrapper.tile .callToActionButton {
    flex-basis: 100%;
  }
}
body .callToActionWrapper.tile .callToActionButton a {
  text-align:left;
}
/* ============================================================================== 
   Path pages
   New Backpack New Journey Link Panel
   Content Type: Code Only | Based on Jumbotron 
   Last revised 08/13/18 by Aubrey - old
*/

.jumbotronNewBackpack {
    background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/SU-backpacks.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.jumbotronNewBackpack .jumbotronCustom {
    padding: 7rem 0;
    text-align: center;
}
.jumbotronNewBackpack .jumbotron1 h2 {
    color:#ffffff;
}
.jumbotronNewBackpack .jumbotron1 .boxlinks a, .boxlinkItem a {
    border: 1px solid #fff;
    color: #fff;
}
@media (min-width: 992px) {
  .jumbotronNewBackpack .jumbotron1 ul.boxlinks li {
    display: block;
    width: auto;
    flex: none;
  }
}
/* ============================================================================== 
   Path pages
   New Backpack New Journey Link Panel
   Content Type: Code Only 
   Last revised 08/20/18 by Aubrey
*/
.nextBackpackJourney {
  display:flex;
  padding:0;
}
@media (max-width:767.999px) {
  .nextBackpackJourney {
    flex-direction: column;
  }
}
.backpack1Wrapper {
  background:#ef4135;
  flex:1;
  padding: 4rem 0;
  position:relative;
}
.backpack2Wrapper {
  background:#fdb913;
  flex:1;
  padding: 4rem 0;
  position:relative;
}
.backpack3Wrapper {
  background:#088099;
  flex:1;
  padding: 4rem 0;
  position:relative;
}
.nextBackpackJourney h2 {
  color: #fff;
  font-size: 2rem;
  letter-spacing: 4px;
  padding: 0 25%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 9%;
  width: 100%;
  z-index: 10;
}
.backpackImg {
  padding: 50px;
  text-align:center;
}
.backpackImg img {
  max-width: 200px;
  padding-top:100px;
}
.nextBackpackJourneyOverlay {
  background: #000;
  height: 100%;
  opacity: .4;
  position: absolute;
  top: 0;
  width: 100%;
}
.buttonLink {
  margin-top: 4rem;
}
.nextBackpackJourney .buttonLink a {
  border-radius:0;
}

/* ============================================================================== 
   Path pages
   Apply Visit Request Info Links
   Content Type: Code Only  
   Last revised 08/22/18 by Aubrey
*/

.jumbotronCTALinks {
  background-image:url(/media/undergraduate-admissions/undergraduate-viewbook/images/SU-icon-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0 0 -30px;
}
.jumbotronCTALinks .jumbotron1 {
  padding: 10rem 0 14rem;
  text-align: center;
}
@media (max-width: 1199px) {
   #zoneA .jumbotronCTALinks.contentItem {
     margin: 0 0 -30px;
   }
}
@media (max-width: 767.999px) {
   #zoneA .jumbotronCTALinks.contentItem {
     margin: 0 0 30px;
   }
  .jumbotronCTALinks .jumbotron1 {
    padding: 2rem 2rem 5rem;
  }
}

.jumbotronCTALinks .jumbotron1 h2 {
  color: #ef4135;
  margin-bottom: 30px;
}