/* Tags */
    *      {box-sizing:border-box}
              /* sets body margin center page and background image */
    body   {width:100%; max-width:1000px; margin:auto; background-image:url('images/bg.jpg'); 
            background-repeat:no-repeat; background-size:cover}
    main   {padding-left:15px; padding-right:15px}
    h1     {text-align:center; color:#7CA06F} /* light green */
    h2     {color:#5C1D36; text-align:center} /* dark burgundy */
    h3     {color:#728FCE; text-align:left; font-size:25px} /* light purple blue */
    p      {text-align:left; font-size:18px}
    blockquote {text-align:justify; font-size:18px; line-height:1.5; color:#040720}
    blockquote:first-letter {font-size:2.2em; font-weight:bold; color:#5C1D36}
    img    {max-width:100%; height:auto}
    hr     {width:60%; height:4px; background-color:#7CA06F; border:none}

    nav    {border-top: 1px solid #5C1D36; text-align:center; padding:5px; background-color:#FEFCFF} /* nav section milk white */
    nav ul {margin:auto; padding:0px; line-height:40px}
    nav li {list-style-type:none}

    nav a  {display:block; width:60%; margin:6px auto;
            padding: 10px 15px; font-size: 1.3em;
            color:#040720; background-color:#FEFCFF; text-decoration:none; 
            border-radius: 20px; font-family:Verdana, Geneva, Tahoma, sans-serif}
    nav a:hover {background-color: #bfd9b6; color:#040720}

    figure     {display:inline-block; width:300px; margin:10px; text-align:center; vertical-align:top}
    figure img {width:100%; border:2px solid #5C1D36}
    figcaption {font-size:16px; color:#5C1D36; padding-top:5px}

    footer {background-color:#FEA3AA; color:#5C1D36; 
            padding:15px; text-align:center; font-size:18px;} /* background pink and dark burgundy words */
    a:hover {color:#488AC7}
    aside   {padding:14px}
    section {padding:14px}
    section ul {margin-top:0; padding:0 0 0 20px}
    main::after {content:""; display:table; clear:both}

    /* IDs */
    #wrapper {border:1px #5C1D36 solid; background-color:#fff3e6;} /* dark burgundy border around page */
    #social  {text-align:center; padding:10px}
              /* Company Banner and size */
    #Top     {padding-top:22%; background-image:url('images/banner.jpg'); 
              background-repeat:no-repeat; background-size:cover; 
              background-position:center center}
    #figureContainer {text-align:center}

    /* Classes */
    .logo  {width:50px}
    .important {color:#B0485B; font-weight:bold} /* muted red */
    .callout   {font-weight:bold; text-align:center}
    .highlight {font-weight:bold; font-size:22px; 
                color:#FEA3AA; text-align:center; 
                background-color:#FEFCFF} /* milk white and pink words*/
    .degree-aa {color:#800000} /* AA Degree brown red */
    .degree-as {color:seagreen} /* AS Degree seagreen */
    .text-link {color:#040720} /* inside text links black */
    .footer-link {color:#FFFFFF} /* footer links white */
    .hr-thin   {width:40%; height:3px} /* hr variant */
    .icon-small {border:0; width:30px} /* img variant */
    .profile-photo {max-width:150px; width:100%; height:auto; display:block; margin:0 auto 10px}
    .selected {color: #7CA06F; font-weight:bold}
    .hr-line {width:100%; height:1px; background-color:#5C1D36; clear:both}
    .subheading {font-size: 20px;}
    .tight-bottom {margin-bottom:4px}
    .font-helveticasans {font-family:"Trebuchet MS", Helvetica, sans-serif}
    .font-arialrounded {font-family: arial rounded mt bold, helvetica rounded, arial, sans-serif}
    .font-impact {font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans-serif}
    .font-calibri {font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif}
    .font-optima {font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif}
    .font-copperplate {font-family: Copperplate, Copperplate Gothic Light, fantasy}
    .font-didot {font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif}
    .greencallout {font-weight:bold; text-align:center; font-size:22px; color:#7CA06F}
    .location {font-size:15px}
    .transcript-heading {font-size:28px; text-decoration:underline}
    .transcript-recommend {font-size:28px; text-decoration:underline; text-align:center}
    .transcript-professors {font-size:25px; text-decoration:underline; text-align:center}
    .courses      {list-style-type:square; width:90%; margin:auto}
    .recommenders {list-style-image:url('images/bullet.png'); list-style-position:inside; text-align:center; padding:0}  /* small image, about 16-20px, no spaces in name */
    .certifications    {text-align:center}
    .certifications dd {margin:0 0 10px 0}  /* removes default indent, adds space between items */
    .references   {list-style-type:upper-roman; width:90%; margin:auto}
    .special      {color:#2F0909; font-weight:bold; font-size:.7em} /* special characters */
    .special-blue {color:#728FCE; font-weight:bold; font-size:1em}
    .copyright {font-size:.7em; color:#2F0909}
    .standout {background-color:#FEFCFF}
    .center {text-align:center}
    .page-links         {text-align:center; font-size:14px; margin:10px 0}
    .page-links a       {color:#5C1D36; margin:0 15px; text-decoration:none} /* spaces the links apart */
    .page-links a:hover {color:#488AC7; text-decoration:underline}
    .underlined-callout {font-weight:bold; text-align:center ;text-decoration:underline;}
    .justify     {text-align:justify}
    .byline      {text-align:center; color:#728FCE; font-size:16px; font-style:italic}
    .hr-news     {width:70%; height:6px; background-color:#7CA06F; border-radius:6px}
    .infobar     {color:#FEFCFF; background-color:#5C1D36; font-weight:bold; font-size:18px; text-align:center; padding:1px;
                  background-image:linear-gradient(to right, #5C1D36, #7a184c); 
                  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, 
                               Helvetica Inserat, Bitstream Vera Sans Bold, sans-serif;
                  letter-spacing:2px}
    .box         {border:2px solid #5C1D36; border-radius:12px; padding:15px; margin:20px 0;
                  background-color:#fbfafa; box-shadow:4px 4px 10px #999999}
    .news-bullets {list-style-image:url('images/checkmark.png')}
    .wheel-svg   {display:block; margin:auto}
    .news-columns h2 {text-align:left; font-variant:small-caps; font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif}
    .news-columns .courses {width:90%; break-inside:avoid}
    .news-columns {font-family:Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif; color:#040720; line-height:1.6}
    .news-columns li {font-size:18px; margin-bottom:6px}
    .pullquote {font-weight:bold; font-style:italic; text-align:center; color:#5C1D36; border-top:2px solid #7CA06F; border-bottom:2px solid #7CA06F; padding:10px 0}
    .box {break-inside:avoid; column-span:all}
    .box-img {display:block; width:60%; margin:15px auto 0}

    /* open media query */
     @media only screen and (min-width:750px) 
     {
       main   {padding-left:45px; padding-right:45px}
       nav ul {white-space:nowrap}
       nav li {display:inline; padding:0}
       nav a  {display:inline; width:auto; margin:10px; padding:12px 15px; font-size:15px}
       aside   {width:25%; float:left; clear:left; text-align:right}
       section {width:75%; float:left}
       .courses {width:40%; break-inside:avoid} 
       .references {width:40%}
       .news-columns {column-count:2}
       .box      {display:flex; align-items:center}
       .box-text {width:65%}
       .box-img  {width:30%; margin:0 0 0 20px}
     } /* close media query */