@charset "UTF-8";
/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-enable */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASICS
\*------------------------------------*/
/* For horizontal spacing (e.g. gutters) */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/*------------------------------------*\
    $TYPOGRAPHY
\*------------------------------------*/
/**
 * Font-families.
 */
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/**
 * h1–h6 Based on Modular Scale Perfect Fourth (3:4 or 1:1.333)
 * http://modularscale.com/scale/?px1=16&px2=24&ra1=1.333&ra2=0
 */
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $COLOR
\*------------------------------------*/
/**
 * Define your design’ palette by choosing three main colours
 */
/**
 * Now set a neutral colour for borders etc.
 */
/**
 * Greyscale. 
 */
/**
 * Choose a color for your hyperlinks. Often this will be the $cired 
 */
/**
 * These will be used to style alerts and buttons
 */
/**
 * Footer colors
 */
/**
 * Theme colors
 */
/* Alternate theme text colors */
/*------------------------------------*\
    $TEXTURE
\*------------------------------------*/
/**
 * Next set variables for your design’ borders. 
 * These will be inherited by many elements
 */
/*------------------------------------*\
    $ICONS
\*------------------------------------*/
/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Supplementary mixins needed and not found in Bourbon.io
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
 * @thierrylemoulec for refining and improving my initial mixin.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * @include mq(UNIT, IE CLASS, QUERY PART LEFT, QUERY PART RIGHT, TARGET)
 * 
 * Thanks to: 
 * http://alwaystwisted.com/post.php?s=2013-04-01-my-media-query-mixin 
 * https://github.com/sparkbox/SB-Media
 *
 * Usage Example:

 .hello { 
	@include mq($tiny) {
		@include mq($smaller, max){
	color: green;}	
	}
 }

 * Outputs:

 @media screen and (min-width: 20em) and (max-width: 30em) {
  .hello {
    color: green; 
	} 
  }

 *  
 */
/**
 * Convert px into rem
 * also used in mixins like `font-size`
 */
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
   `@include font-size(10px, false);` if you don't need line-height
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/*------------------------------------*\
    $MAX-WIDTH
\*------------------------------------*/
/*------------------------------------*\
    $INTRINSIC-RATIOS
\*------------------------------------*/
/*------------------------------------*\
    $RUN-IN
\*------------------------------------*/
/**
 * Until `display: run-in` works on more browsers do this:
 * 
    <h2 class="run-in">Innovative. Student-centered. That&rsquo;s CI.</h2>
    <p>All of our more than 50 academic programs at ÌÇÐÄVlog (CI) are student-centered, innovative and creative. You’ll be inspired to question, think critically and explore. Your professors are accessible mentors who take an interdisciplinary approach to teaching and learning&mdash;whether you’re pursuing an <a href="/orientation/your-path/css/{{page.relative}}endpreview.html">undergraduate</a> or <a href="/orientation/your-path/css/{{page.relative}}endpreview.html">graduate degree</a>, or <a href="/orientation/your-path/css/{{page.relative}}endpreview.html">certification</a> to advance your career.</p>
 *
 *
 */
.fy-path {
  text-align: center;
}
.fy-path .thumb__img img {
  max-width: 7rem;
  margin: 0 auto;
}
.fy-path:first-child {
  margin-bottom: 6rem;
}
.fy-path--a img, .fy-path--b img {
  border: 2px solid #e9ded3;
  padding: 0.75rem;
}
.fy-path--b img {
  padding: 0.25rem;
}
.fy-path ul {
  text-align: left;
}
.fy-path ul li:not(:last-child) .media::after {
  content: "";
  position: absolute;
  bottom: -1.15rem;
  left: 14.5%;
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid rgb(203, 19, 42);
}
@media screen and (min-width: 30em) {
  .fy-path ul li:not(:last-child) .media::after {
    left: 12.5%;
  }
}
.fy-path .media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.fy-path .media__img {
  margin-right: 12px;
}
.fy-path .media__heading, .fy-path .media__description {
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 0.875rem;
}
.fy-path .fy-path__heading {
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 500;
}
@media screen and (max-width: 47.4375em) {
  .fy-path .fy-path__heading span {
    display: none;
  }
}
.fy-path__heading-two {
  text-align: center;
  background-color: rgb(203, 19, 42);
  color: rgb(255, 255, 255);
  padding: 0.75rem 0;
  position: relative;
}
.fy-path__heading-two::after {
  content: "";
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid rgb(203, 19, 42);
  bottom: -0.6rem;
  left: 14.5%;
}
@media screen and (min-width: 30em) {
  .fy-path__heading-two::after {
    left: 12.5%;
  }
}

.fy-path--a .fy-path__heading {
  position: relative;
}
@media screen and (min-width: 47.5em) {
  .fy-path--a .fy-path__heading {
    margin-bottom: 0;
  }
}
/*# sourceMappingURL=first-year-path.css.map */