/* University Template over-ride
   Launched: 2020-03-19
   Author: Notre Dame Web Team
   ----------------------------------------------------*/
.page-section { padding:2rem 0; }
.page-secondary { margin-top:2rem; }

.section--light {background:var(--sky-blue);}
.border { border:1px solid var(--gray-light); }

.home .page-main, 
.about .page-main,
.recent-projects .page-main { padding-bottom:0; }

.section--dark { background:var(--brand-blue); color:#fff; }

/* Lists */
.anchor-list {}
  .anchor-list li {display:inline-block;}
  .anchor-list a {display:block; padding:0.2rem;}
.site-list {}
  .site-list li {margin-bottom:1rem; line-height:1.3rem;}
  .site-letter {padding-bottom:0.3rem; border-bottom:2px solid #777;}
  .site-list a {text-decoration:none;}
    .site-list a:hover {text-decoration:underline;}
  .site-name {font-size:1.2rem;}
  .site-url {display:block; color:#777; font-size:0.9rem; font-style:italic;}

/* Projects */
.project-item { align-self:flex-start; }
.project-item-url { margin-bottom:0; font-size:0.9rem; }

/* Twitter */
.tweet-user-img {width:48px; margin-right:12px; margin-top:0.25em; float:left;}
.tweet-text {width:calc(100% - 60px); float:left;}
.tweet-actions {text-align:center; clear: left;}
.tweet-actions a {display:inline-block; width:30%; position:relative; text-indent:-999em;}
.tweet-actions svg {height:1.5em; width:1.5em; position:absolute; left:50%; margin-left:-0.75em; fill:#aab8c2;}

/* Social Share */
.social-share ul {display:-webkit-box;display:flex;}
.social-share li {margin:0 0.2rem;}
.social-share a {position:relative; display:block; padding:6px 6px 4px; line-height:1rem; color:#fff; background:#565656; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; border-radius:3px;}
  .social-share a::after {content:""; top:0; left:0; width:100%; height:100%;}
  .social-share a > svg,
  .social-share a > img {pointer-events:none;}
  .social-share a:hover {-webkit-transform:translateY(-2px);transform:translateY(-2px);}
  .social-share svg {fill:#fff;}
  .social-share .share-facebook {background-color:#3b5998;}
  .social-share .share-twitter {background-color:#00aced;}
  .social-share .share-pinterest {background-color:#cd2029;}
  .social-share .share-gmail {padding:2px 0; background-color:#fff; border:1px solid #d14836;}
    .social-share .share-gmail img {width:30px; height:22px;}

@media only screen {
  .site-title a { text-indent:-999em; width:18rem; height:3rem; margin:0 auto; background:url(/stylesheets/images/logo-conductor.svg) 50% 50% / contain no-repeat;}

  .home-projects::before { background-image:url(/stylesheets/themes/ndt/v3/images/hdr-cube-ptn@2x.png); background-repeat: repeat; background-size: 67px 100px; }
  .home-projects .card { background:var(--gray-extra-extra-light); }
  .home-projects .card:hover,
  .home-projects .card:focus-within { border-bottom-color:var(--gray-light); }
  
  .home-aside { margin-bottom:3rem; }
  .home-aside .grid { grid-gap:1.5rem; }
  
  /* Stat Items */
  .stat-item { margin-left:2em; }
  .stat-item-icon {margin:0 auto;}
    .stat-item-icon img {margin-bottom:1em; width:3em;}
    
  .stat-item-title {font-size:2.5rem; font-weight:700; font-family:GPC, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; margin-bottom:0; color:var(--brand-blue); line-height:100%; }
  .stat-item-title svg {font-size:0.5em; vertical-align:middle; margin-left:0.125em; margin-bottom:0.5em; }
  
  .home .stat-item { margin:0; text-align:center; } 
  .home .stat-item-title { color:#fff; }
  
  .home-primary .btn { margin-top:1rem; }   
  
  .page-section.about-websites {background:url('images/about_small.jpg') center center #0c2340; background-size:cover;}
  .about-features .stat-item {padding:1em 1.25em;}
  .about-features .stat-item-title { font-size:1.25rem; }

  /* About */
  .about-primary {padding:2rem 0;}
  .about-advantages { background-color:var(--sky-blue-light); }
  .about-advantages ul {list-style:none; padding:0; margin:2em 0;}
    .about-advantages li {margin:0; padding:0 0 2em 4em; position:relative;}
    .about-advantages li:before {content:''; position:absolute; top:0.25em; height:3em; width:3em; left:0; display:block; background:transparent 50% 50% / contain no-repeat;}
      .about-advantages .placeholder:before {background-image:url('images/check-mark.svg');}
    .about-advantages li strong {display:block;}
  .about-features {background-color:#FFF;}
  .about-websites { padding:3rem 0; }
  .global-get-started {padding:2rem 0; text-align:center; background:var(--sky-blue);}
    .global-get-started .page-section-title {margin:0 0 1em;}

  /* Get Started */
  .get-started-intro {margin:2rem 0; padding:2rem 0; background:#0c2340;}
    .get-started-intro > .row {-webkit-box-align:center;align-items:center;}
  .get-started-divider {padding-top:37.5%; background:#0c2340 50% 50% / cover no-repeat;}
  .get-started-option {background:#fff; padding:3em 1em; text-align:center; border:1px solid #ddd; margin-bottom:1em;}
  .get-started-option-content {padding:1em 0;}
  .page-get-started-diy {background:#FFF;}
  .get-started-projects .project-item-title {font-size:1.2em;}
  .layout-options > div {display:inline-block; vertical-align:top; margin:0 1.5em 0 0;}
  .layout-options > div img {border:1px solid #999;}

   /* Section Images */
  .page-section .section-image img { width:100%; }
  .page-section--image-offset .section-image,
  .page-section--image-bg .section-image { position:relative; width:100vw; margin:0 var(--gutter-offset); }
  .page-section--image-offset .section-body { position:relative; padding:2rem 0; }
  .page-section--image-bg .section-body { position: relative; background: var(--sky-blue); border-bottom: 0.25rem solid var(--sky-blue-dark); padding: 2rem 3rem; }

  /* Twitter */
  .tweet { margin-bottom:1em; background-color:var(--sky-blue-light); padding:1.5rem; border-radius:1rem; }
    .tweet .date {font-size:0.8em; color:var(--gray); margin-bottom:0.5em;}
    .tweet:last-child {border-bottom:none; margin-bottom:0;}
    .tweet .tweet-actions svg {-webkit-transition: all 125ms ease;transition: all 125ms ease;}
    .tweet:hover .tweet-actions svg {fill:#61768d;}
    .tweet:hover .tweet-actions svg:hover {fill:#002b5c;}
  .twitter-column {padding:0 0.9375rem;}
  .twitter-content {background:#FFF; padding:0.9375rem;}
  .tweet-text {font-size: 0.9em;}
  .tweet-user-img {display:none;}
  .tweet-actions .twitter-reply:active {fill-opacity:50%;}
  .tweet-actions .twitter-retweet:active {fill-opacity:50%;}
  .tweet-actions .twitter-like:active {fill-opacity:50%;}

  /*Forms*/
  .wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select {background:#FFF; padding:5px 10px;-webkit-transition: background-color 350ms ease-out;transition: background-color 350ms ease-out;}
  .wufoo li.focused {background-color:transparent;}
  .wufoo input:focus, .wufoo textarea:focus, .wufoo select:focus {background:#EEE;}
  .wufoo .instruct {padding:25px;}
  .wufoo .section h3 {color:#444; font-weight:bold; font-size:100%;}

  /*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
  */
  #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
  #cboxWrapper {max-width:none;}
  #cboxOverlay{position:fixed; width:100%; height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
  #cboxContent{position:relative;}
  #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
  #cboxTitle{margin:0;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
  .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
  .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
  #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

  /*
      User Style:
      Change the following styles to modify the appearance of Colorbox.  They are
      ordered & tabbed in a way that represents the nesting of the generated HTML.
  */
  #cboxOverlay{background:rgba(0,0,0,0.5);}
  #colorbox{outline:0;}
      #cboxTopLeft{width:15px; height:15px; background:#FFF;}
      #cboxTopRight{width:15px; height:15px; background:#FFF;}
      #cboxBottomLeft{width:15px; height:15px; background:#FFF;}
      #cboxBottomRight{width:15px; height:15px; background:#FFF;}
      #cboxMiddleLeft{width:15px; background:#FFF;}
      #cboxMiddleRight{width:15px; background:#FFF;}
      #cboxTopCenter{height:15px; background:#FFF;}
      #cboxBottomCenter{height:15px; background:#FFF;}
      #cboxContent{background:#fff;}
          .cboxIframe{background:#fff;}
          #cboxError{padding:50px; border:1px solid #ccc;}
          #cboxLoadedContent{margin-bottom:0}
          #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
          #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}

          /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
          #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

          /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
          #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

          #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
          #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
          #cboxPrevious:hover{background-position:-75px -25px;}
          #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
          #cboxNext:hover{background-position:-50px -25px;}
          #cboxClose{position:absolute; top:-10px; right:-10px; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
          #cboxClose:hover{background-position:-25px -25px;}

  /*
    The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
    when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
    See: http://jacklmoore.com/notes/ie-transparency-problems/
  */
  .cboxIE #cboxTopLeft,
  .cboxIE #cboxTopCenter,
  .cboxIE #cboxTopRight,
  .cboxIE #cboxBottomLeft,
  .cboxIE #cboxBottomCenter,
  .cboxIE #cboxBottomRight,
  .cboxIE #cboxMiddleLeft,
  .cboxIE #cboxMiddleRight {
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
  }
}

/* 480px
----------------------------------------------------*/
@media only screen and (min-width:30em) {

}

/* 768px
----------------------------------------------------*/
@media only screen and (min-width:48em) {
  .site-title a { margin:0; }
  .page-section { padding:3rem 0; }
  .page-secondary { margin-top:3rem; }
  .page-title-wrapper { background-color:transparent; position:relative; padding:2rem 5vw 0; }
    .page-title-wrapper::before { content:''; display:block;position:absolute; top:0; bottom:0; left:0; right:-3rem; background:#fff; z-index:-1; }
    
  .section-image { margin-bottom:0; }
  
  .home-highlights::before {background-image:url(images/stats_medium.jpg);}

  /* About */
  .about-advantages ul {-webkit-column-count:2;-moz-column-count:2;column-count:2;}
    .about-advantages li {-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;}
    .about-websites {padding:10em 0;}
  
  /* Twitter */
  .tweet-user-img {display:block;}
}

/* 960px
----------------------------------------------------*/
@media only screen and (min-width:60em) {
  .about-primary ul {-webkit-columns:2;-moz-columns:2;columns:2; -webkit-column-gap:2rem; -moz-column-gap:2rem; column-gap:2rem;}
  
  .site-list {display:-webkit-box;display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-flow:row wrap;}
    .site-list li {width:50%; padding-right:2rem;}
    
  .home-primary { padding:2rem 3.5rem; margin-top:-7.75rem; background:#fff; }   
  .home-aside { padding:0 1.5rem; }
  .stat-item-title { font-size:3em; }
  
  /* Image Offset */
  .page-section--image-offset { display:grid; grid-template-columns:[image-start] 55% [image-end body-start] 45% [body-end]; grid-gap:2rem; }
  .page-section--image-offset .section-image { position:relative; width:calc(100% + var(--gutter-width)); grid-row:1; grid-column:image; margin-top:-2rem; margin-bottom:-2rem; margin-right:0; }
  .page-section--image-offset .section-body { align-self:center; grid-row:1; grid-column:body; }

  .page-section--image-offset.alt { grid-template-columns:[body-start] 45% [body-end image-start] 55% [image-end]; }
  .page-section--image-offset.alt .section-image { margin-left:0; margin-right:var(--gutter-offset); }

}

/* 1280px
----------------------------------------------------*/
@media only screen and (min-width:80em) {
  .page-section { padding:4rem 0; }
  .page-secondary { margin-top:4rem; }
  
  .home-primary { margin-top:-8.5rem; }
  
  .home-highlights::before {background-image:url(images/stats_large.jpg); background-attachment:fixed;}
  .page-section.about-websites {background-image:url(images/about_large.jpg); background-attachment:fixed;}
  
  .home-aside { }
  .home .stat-item { padding:0; }
  .home-primary .btn { margin-top:1.5rem; }   
  
}

/* 1760px
----------------------------------------------------*/
@media only screen and (min-width:110em) {
  .page-title { font-size:3.325rem; }
}

/* 1920px
----------------------------------------------------*/
@media only screen and (min-width:120em) {
  /* Image Offset Sections */
  .page-section--image-offset .section-image { margin-left:-6rem; width:calc(100% + 6rem); }
  .page-section--image-offset.alt .section-image { margin-right:-6rem; }
}

/* Print
----------------------------------------------------*/
@media print {

}