﻿/* ---------------------------------- */
/* Home page - Site Media Queries     */
/* ---------------------------------- */

/* Small devices (mobile phones) */
@media only screen and (max-width: 800px) {
    #main-header {
        height: 65px;
    }
		#main-header.with-promo {
	        height: 95px;
		}

    .main-header-wrapper {
        overflow: auto;
    }

    .main-logo {
        line-height: 50px;
        margin-left: 15px;
        margin-top: 5px;
    }

        .main-logo img {
            height: 43px;
            width: 150px;
        }

    .mobile-nav-button {
        cursor: pointer;
        display: block;
        float: right;
        margin: 16px 16px 0 0;
        overflow: hidden;
        width: 31px;
    }

        .mobile-nav-button img {
            height: 30px;
            width: 31px;
        }

    .main-header-right {
        display: block;
        position: fixed;
        right: 0;
        width: 258px;
        z-index: 100;
    }
        
        .main-nav ul li {
            display: block;
            float: none;
            line-height: normal;
            overflow: hidden;
            width: 258px;
        }

        .main-nav ul li.nav-home,
		.main-nav ul li.nav-features,
		.main-nav ul li.nav-pricing,
		.main-nav ul li.nav-customers,
		.main-nav ul li.nav-resources {
			display: block;
		}

        .main-nav ul li a {
          display: block;
          color: #FFF;
          font-size: 18px;
          line-height: normal;
          margin: 0;
          overflow: hidden;
          padding: 15px 10px 15px 30px;
          width: 258px;
        }

        .main-nav ul li a:hover,
		.main-nav ul li a:focus {
          background-color: #2AA4D7;
          color: #FFF;
        }

        .main-actions {
          margin-left: 55px;
        }

        .main-actions.vertical {
          margin-left: 18px;
        }

          .action-button {
            margin-left: 10px;
            margin-top: 10px;
          }

          .action-button.free-trial {
            margin-top: 15px;
          }

    #main-content {        
        z-index: 1000;
    }

    .simple-actions-content {
        padding: 20px;
    }

    .simple-actions-content.connect {
      padding: 0 20px 20px 20px;
    }

      .simple-actions-text {
          margin: 0 70px 0 0;
      }

    .main-banner-content {
      margin: 0 15px;
      padding-top: 255px;
    }

      .main-banner-content h1 {
        font-size: 35px;
      }

      .main-banner-customer-logos {
        margin: 0 auto;
        padding-top: 15px;
        width: 350px;
      }

        .logo-content-inner {
            float: none;
          }

            .logo-item.four {
              display: none;
            }

      .client-logos-inner {
        width: 490px;
      }

      .client-logo-item.off {
        display: none;
      }

    .section-overview {
      padding: 30px 30px 0 30px;
    }

    .section-overview-text h2 {
        color: #333;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .web-edmonton {
        margin: 0;
        position: relative;
        z-index: 600;
    }

        .web-edmonton img {
            width: 450px;
        }

    .web-sparrow {
        float: left;
        margin: -230px 0 0 0;
        position: relative;
        z-index: 500;
    }

        .web-sparrow img {
            width: 275px;
        }

    .web-colorado-state {
        float: right;
        margin: -230px 0 0 0;
        position: relative;
        z-index: 550;
    }

        .web-colorado-state img {
            width: 275px;
        }

    .section-overview-text h2 {
      line-height: 22px;
    }


    .section-hiedweb-content {
      max-width: none;
    }

      .hiedweb-image {
        float: none;
        margin: 0;
        text-align: center;
      }

      .hiedweb-text {
        float: none;
        margin: 5px;
        max-width: none;
        padding: 15px;
        text-align: center;
      }


    .publish-text {
      margin: 0 auto;
      text-align: center;
    }

    .event-reg-text {
      max-width: none;
      text-align: center;
    }

    .event-reg-image {
      display: none;
    }

    .section-mobile-content {
      max-width: none;
    }

      .mobile-image {
        float: none;
        margin: 0;
        text-align: center;
      }

      .mobile-text {
        float: none;
        margin: 5px 0 0 0;
        max-width: none;
        padding: 15px;
        text-align: center;
      }

    .section-social-content {
      max-width: 361px;
    }

    .section-info.custom-objects {
      margin-left: 0;
      max-width: 315px;
    }

    .section-info.connect {
        margin-left: 0;
        margin-right: 0;
        max-width: 315px;
    }

    .section-actions-content {
      max-width: 350px;
    }

    .section-action-info.schedule {
        margin-right: 0;
    }

    .testimonials-header {
        text-align: center;
    }

    .testimonials-slider {
        display: none;
    }

    .features-item {
        height: auto;
        margin: 0 15px 20px 0;
        width: auto;
    }       
    
    .features-items-wrapper .features-item:nth-child(2n+1) {
      margin-right: 15px;
    }

            .features-icon {
            }

            .features-text {
                max-width: 365px;
            }

    #main-footer {
        padding: 30px;
    }

        .main-footer-column {
            margin-right: 45px;
        }

    .secondary-content-wrapper {
        padding: 20px;
    }

    .input-group {
        width: 255px;
    }

    .input-group textarea.form-control {
        width: 255px;
    }

    .snapshot-logo, .testimonial-logo {
      text-align: left;
    }

    .main-banner-content {
		padding-top: 50px;
		padding-bottom: 90px;
    }

    h1.main-tagline {
      line-height: 35px;
    }

    .main-banner-sub-content {
      line-height: 28px;
      font-size: 18px;
    }

    .btn-large {
        font-size: 14px;
        padding: 5px 10px;
    }  

    .spud-gallery-slider {
      /*display: none;*/
      padding: 0;
    }

    .spud-gallery-left {
      margin: 0;
      width: auto;
    }

    .spud-gallery-date-icon,
    .spud-gallery-photo {
      width: 270px;
    }

    .spud-gallery-date-icon {
      margin: 10px 0 30px 8px;
    }

    .spud-gallery-photo {
        margin-left: 8px;
    }

    .page-left,
    .page-left.mobile {
      margin-right: 10px;
      width: auto;
    }

    .page-left.bottom {
      margin-bottom: 20px;
    }

    .clear.mobile {
      display: inherit;
    }

    .clear-mobile {
      clear: both;
    }

    .newsletter-input {
      width: auto;
    }

  .t-page-left {
    width: 100%;
  }

  .t-page-right {
    display: none;
  }

  .lombardi-trophy {
    display: none;
  }

  #mobile-nav {
    /*-webkit-transform: translate3d(0,0,0);*/
    /*-webkit-transform:translateZ(1px);
    -moz-transform:translateZ(1px);
    -o-transform:translateZ(1px);
    transform:translateZ(1px);
    position: relative; 
    z-index: 1;*/ 
    /*-webkit-transform: translate3d(0,0,0);*/
  }

  #main-content {
    /*-webkit-transform:translateZ(3000px);
    -moz-transform:translateZ(3000px);
    -o-transform:translateZ(3000px);
    transform:translateZ(3000px);
    position: relative; 
    z-index: 3000;*/ 
  }

  .vertical-content-wrapper.higher-ed h2 {
    font-size: 20px;
  }

  .simple-actions-button.connect {
    padding: 0;
  }

  .btn-mobile {
     width: 175px;
  }

  /*--- Higher Ed --- */
  .home-section.vertical {
    margin-top: 60px;
  }

  .home-section.vertical h2 {
    font-size: 20px;
    line-height: 25px;
  }

  .section-demonstrate h2 {
    font-size: 20px;
    line-height: 25px;
  }

  .section-demonstrate-content {
    padding: 25px 0;
  }

    .demonstrate-text {
      padding: 5px 20px;
    }

  .section-schedule-content {
    padding: 30px 0 40px 0;
  }

    .schedule-text-inner {
      margin: 0 0 25px 0;
    }

  .university-logos {
      width: 200px;
    }

      .university-logos-row {
        width: 200px;
      }

      .university-logos-row:first-child {
        width: 200px;
      }

        .university-logo-item {
          margin: 10px auto;
          text-align: center;
          width: 99%;
        }
      
      .seeMore {
          height: 60px;
          width: 100%;
      }

      .seeMore .leftDivider, .seeMore .rightDivider{
        display: none;
      }

      .seeMore .middleInfo {
        background-image: none;
        color: #333;
        margin: 0 auto;
        text-decoration: underline;
        width: 99%;
      }

      .seeMore .middleInfo .gradCap {
        left: 0;
        margin: 0 auto;
        position: relative;
      }

      .see-more-mobile {
        display: block;
        margin: -20px 0 0 0;
      }

      .section-highered-testimonials {
        display: none;
      }

      .section-actions-edu {
        border-top: 1px solid #E5E5E5;
      }

      .main-banner-headlines {
        /*margin: 40px 0 0 0;*/
        text-align: center;
      }
}

@media only screen and (min-width: 730px) and (max-width: 1090px) {
  .section-social-content {
      max-width: 710px;
    }

  .section-info.custom-objects {
      margin-left: 177px;
      max-width: 315px;
    }

  .section-info.connect {
      margin-left: 177px;
      max-width: 315px;
    }

  .section-actions-content {
      max-width: 350px;
    }

    .section-action-info.schedule {
        margin-right: 0;
    }

    #main-footer {
        padding: 30px;
    }
}


/* --- Promo Bar fix ---*/
@media only screen and (max-width: 480px) {
	#main-header.with-promo {
	    height: auto;
	}

	#main-header.with-promo #main-promo-header {
		height: 52px;
	}

	#main-promo-header .text .buttonWrap {
		display: block;
		padding-top: 6px;
	}

    .main-header-wrapper {
		height: 61px;
    }

	.main-banner.with-promo #main-promo-spacer {
		height: 52px;
	}
}

@media only screen and (max-width: 320px) {
	#main-promo-header .text {
		padding-right: 20px;
	}
	#main-promo-header .text .buttonWrap {
		padding-left: 10px;
	}
}

/* --- Banner Fix --- */
@media only screen and (min-width: 1150px) {
	.main-banner-content {
		padding-top: 80px;
		padding-bottom: 160px;
	}
}

@media only screen and (min-width: 801px) and (max-width: 1149px) {
	.main-banner-content {
		padding-top: 40px;
		padding-bottom: 120px;
	}
}


@media (max-width: 800px) {
	#main-banner-spacer {
		display: block;
		height: 65px;
	}

	.main-banner-content {
		padding-top: 40px;
		padding-bottom: 80px;
	}
}

@media only screen and (max-width: 450px) {
    .btn-large {
        font-size: 14px;
        padding: 5px 10px;
    }  

    .main-footer-content {
    }

    .main-footer-column {
      margin: 0;
      min-height: 100px;
    }
    
    .main-footer-column.our-company {
      margin: 0;
    }

    .main-footer-column.features,
    .main-footer-column.pricing,
    .main-footer-column.resources,
    .main-footer-column.whats-new,
    .footer-newsletter,
    .footer-partners {
      display: none;
    }

    .main-footer-column-inner {
      display: block;
      float: left;
      margin-right: 75px;
    }

    .main-banner {
    }

    .main-banner-content {
		padding-top: 20px;
		padding-bottom: 80px;
    }

      .main-banner-content h1 {
        font-size: 30px;
      }

      .main-banner-sub-content {
        font-size: 16px;
        margin-bottom: 15px;
      }

        .main-banner-action-buttons button:first-child {
          margin-right: 10px;
        }

    .client-logo-item {
      display: block;
      float: left;
      line-height: 90px;
      margin: 0 10px 0;
    }

    .section-overview {
        /*min-width: 340px;*/
    }

    .section-overview-text h2 {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .overview-site-examples {
        display: none;
    }

    .overview-site-examples-mobile {
      display: block;
      height: 80px;
    }

    .overview-site-examples-mobile img {
      width: 280px;
    }

    .mobile-image img {
      width: 325px;
    }

    .features-text {
        max-width: 205px;
    }

    .pricing_table {
      width: 280px;
    }

    .pricing-hide {
        display: none;
    }

    .mobile-pricing {
      display: block;
    }

    .pricing-features-label {
        width: 65px;
    }

    .pricing-features-wrap {
        white-space: normal;
    }

    /*.pricing-width {
        width: 75px;
    }

    .pricing-width-second {
        width: 75px;
    }*/

    h1.main-tagline {
      line-height: 30px;
    }

    .main-banner-sub-content {
      line-height: 22px;
    }

    .client-logos-inner {
      width: 322px;
    }

    .client-logo-item {
      margin: 0 10px;
    }

    .client-logo-item.uw img {
      width: 75px;
    }

    .client-logo-item.boston img {
      width: 65px;
      height:auto;
    }

    .client-logo-item.seahawks img {
      width: 100px;
    }

    .section-testimonials-content {
      padding: 45px 10px;
    }

    .testimonials-header {
      
    }

    .testimonials-customers {
      float: none;
      margin: 0 auto;
      overflow: hidden;
      padding: 0;
      width: 275px;
    }

      .testimonials-customer-logo {
        float: left;
        margin: 0;
      }

      .testimonials-customers a.see-more {
        margin: 15px 0 0 0;
        text-align: center;
      }
    
    .footer-social-media {
        margin: 20px 0 0 0;
    }
    
    .main-footer-copyright {
        margin: 25px 0 0;
    }

    .main-banner-action-buttons {
        width: 183px;
    }

  .btn-banner {
    float: inherit;
  }

    .btn-banner:first-child {
      margin: 0 0 10px 0;
    }

    .simple-actions-button.connect {
      font-size: 14px;     
      padding: 0;
    }

  .spud-gallery-slider {
      padding: 0;
      width: 200px;
  }
}

@media only screen and (min-width: 452px) and (max-width: 510px) {
  .features-text {
        max-width: 300px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 650px) {
    .main-footer-content {

    }

    .main-footer-column {
      margin: 0;
      min-height: 100px;
    }

    .main-footer-column.our-company {
      margin: 0;
    }

    .main-footer-column.features,
    .main-footer-column.pricing,
    .main-footer-column.resources,
    .main-footer-column.whats-new,
    .footer-newsletter,
    .footer-partners {
      display: none;
    }

    .main-footer-column-inner {
      display: block;
      float: left;
      margin-right: 75px;
    }

    .overview-site-examples {
        display: none;
    }

    .overview-site-examples-mobile {
      display: block;
      height: 115px;
    }

    .overview-site-examples-mobile img {
      width: 385px;
    }
}

@media (min-width: 651px) and (max-width: 800px) {
    .main-banner {
    }

    .main-footer-content {
    }

    .main-footer-column {
      margin: 0;
      min-height: 100px;      
    }

    .main-footer-column.our-company {
      margin: 0;
    }

    .main-footer-column.features,
    .main-footer-column.pricing,
    .main-footer-column.resources,
    .main-footer-column.whats-new,
    .footer-newsletter,
    .footer-partners {
      display: none;
    }

    .main-footer-column-inner {
      display: block;
      float: left;
      margin-right: 75px;
    }

    .overview-site-examples {
        display: none;
    }

    .overview-site-examples-mobile {
      display: block;
      height: 165px;
    }

    .overview-site-examples-mobile img {
      width: 550px;
    }
}

/* Header banner fix */
@media (max-width: 880px) {
	.main-nav ul li.nav-customers,
	.main-nav ul li.nav-resources {
		display: none;
	}
}
@media (max-width: 800px) {
	.main-nav ul li.nav-customers,
	.main-nav ul li.nav-resources {
		display: block;
	}
}

/* Medium devices and Lo-Res Desktops (tablets and desktops) */
@media (min-width: 801px) and (max-width: 991px) {
    .main-header-right {
        float: right;
        margin: 18px 0 0 0;
    }

    .main-nav {
        line-height: normal;
        float: left;
        margin: 9px 0 0 0;
    }

        .main-nav ul li a {
            font-weight: 600;
            font-size: 15px;
            margin: 0 10px;
            text-decoration: none;
        }

    .main-banner {
    }

    .main-actions {
        float: left;
        line-height: normal;
        margin: 3px 20px 0 0;
    }

        .action-button.free-trial {
            margin-right: 5px;
        }

        .action-button.free-trial button,
        .action-button.sign-in button {
            font-size: 14px;
            padding: 4px 15px;
            width: 100px;
        }

    .section-overview-text h2 {
        color: #333;
        font-size: 20px;
    }

    .overview-site-examples {
      height: 265px;
    }

    .web-edmonton {
        margin: 0 auto;
        position: relative;
        width: 450px;
        z-index: 600;
    }

        .web-edmonton img {
            width: 450px;
        }

    .web-sparrow {
        float: left;
        margin: -230px 0 0 0;
        position: relative;
        z-index: 500;
    }

        .web-sparrow img {
            width: 275px;
        }

    .web-colorado-state {
        float: right;
        margin: -230px 0 0 0;
        position: relative;
        z-index: 550;
    }

        .web-colorado-state img {
            width: 275px;
        }


        .section-mobile-content {
      max-width: none;
    }

      .mobile-image {
        float: none;
        margin: 0;        
        text-align: center;
      }

      .mobile-text {
        float: none;
        margin: 5px 0 0 0;
        max-width: none;
        padding: 15px;
        text-align: center;
      }

      .features-items-wrapper .features-item:nth-child(2n+1) {
        margin-right: 15px;
      }

        .features-icon {
        }

        .features-text {
            max-width: 365px;
        }

    .main-footer-column {
        margin-right: 45px;
    }

    .spud-gallery-date-icon {
      margin: 10px 0 30px 8px;
      width: 270px;
    }

    .spud-gallery-photo {
        margin-left: 8px;
    }
}

/* #region Section Startup Wizard promo */
@media only screen and (max-width: 1000px) {
	.sectionWizardPreviewContent {
		max-width: none;
		overflow: hidden;
		text-align: center;
	}

	.wizardPreviewImage {
		margin: 0 0 0 0;
		float: none;
		max-width: none;
		padding-left: calc(50% - 342px/2);	/*Centered*/
	}

	.wizardPreviewText {
		float: none;
		margin: 20px 0;
		padding: 0 30px;
		max-width: none;
	}
}
/* #endregion Section Startup Wizard promo */

/* #region Section Video */
@media only screen and (max-width: 1000px) {
    .section-video-content {
        max-width:none;
    }
    .video-text {
        display: none;
    }
    .video-image{
        float:none;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 500px) {
    .section-video-content {
        max-width: none;
        overflow: hidden;
        text-align: center;
        padding: 15px 0;
    }

    .video-image {
        float: none;
        margin: 0 auto;
        width: 320px;
        height: 180px;
    }

}
/* #endregion Section Video */
