/************************************************************
 * Font face declarations
 ***********************************************************/

@font-face {
  font-family: "CiscoSansTT Light";

  src: url('../fonts/CiscoSansTTLight.eot');
  src: url('../fonts/CiscoSansTTLight.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CiscoSansTTLight.woff') format('woff');
}

@font-face {
  font-family: "CiscoSansTT ExtraLight";

  src: url('../fonts/CiscoSansTTExtraLight.eot');
  src: url('../fonts/CiscoSansTTExtraLight.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CiscoSansTTExtraLight.woff') format('woff');
}

@font-face {
  font-family: "CiscoSansTT Thin";

  src: url('../fonts/CiscoSansTTThin.eot');
  src: url('../fonts/CiscoSansTTThin.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CiscoSansTTThin.woff') format('woff');
}

@font-face {
  font-family: "CiscoSansTT Bold";

  src: url('../fonts/CiscoSansTTBold.eot');
  src: url('../fonts/CiscoSansTTBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CiscoSansTTBold.woff') format('woff');
}

@font-face {
  font-family: "CiscoSansTT Regular";

  src: url('../fonts/CiscoSansTTRegular.eot');
  src: url('../fonts/CiscoSansTTRegular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CiscoSansTTRegular.woff') format('woff');
}

/************************************************************
 * Styles for page layout
 ***********************************************************/

.page {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding-top: 3em
}

@media (min-width: 1025px) {

  .page {
    border: 1px solid #cacaca;
  }
  }

/************************************************************
 * Generic styles
 ***********************************************************/

body {
  font-family: "CiscoSansTT ExtraLight", Arial, sans-serif;
  text-align: center;
  color: #595a5c;
  font-size: 18px;
  line-height: 1.3;
  padding: 0;
  margin: 0
}

@media (min-width: 800px) {

  body {
    font-size: 25px;
  }
  }

body * {
  box-sizing: border-box;
}

img {
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin-top: 0;
}

h1 {
  font-size: 32px;
  color: #1d52a2;
  margin-bottom: 0
}

@media (min-width: 800px) {

  h1 {
    font-size: 65px;
  }
  }

h2 {
  font-size: 26px;
  margin-bottom: 5px
}

@media (min-width: 800px) {

  h2 {
    font-size: 45px;
  }
  }

p {
  margin: 5px 0;

}

a:link,a:visited {
  color: #66bde5;
  text-decoration: none;
}

.highlight {
  color: #66bde5;

}

/************************************************************
 * Themes
 ***********************************************************/

.theme-1 {
  /*default*/
  padding: 0 45px;
  margin-bottom: 40px
}

.theme-1 h2 {
  margin-bottom: 20px;
}

.theme-2 {
  background: #1d52a2;
  color: #ffffff;
  padding: 45px

}

@media (min-width: 800px){

  .theme-2 {
    padding-left: 170px;
    padding-right: 170px;
  }
  }

.theme-3 {
  background: #c5d6ee;

  padding: 45px 45px 20px 45px;
}

/************************************************************
 * Generic styles for interactive sections with popups
 ***********************************************************/

@-webkit-keyframes pulsing {
  from {
    -webkit-transform: scale(1, 1) rotateZ(0.001deg);
            transform: scale(1, 1) rotateZ(0.001deg);/*rotate is not visible but is here to prevent pixel snapping in IE which casese clunky animation*/
  }
  to {
    -webkit-transform: scale(1.05, 1.05) rotateZ(0.001deg);
            transform: scale(1.05, 1.05) rotateZ(0.001deg);
  }
}

@keyframes pulsing {
  from {
    -webkit-transform: scale(1, 1) rotateZ(0.001deg);
            transform: scale(1, 1) rotateZ(0.001deg);/*rotate is not visible but is here to prevent pixel snapping in IE which casese clunky animation*/
  }
  to {
    -webkit-transform: scale(1.05, 1.05) rotateZ(0.001deg);
            transform: scale(1.05, 1.05) rotateZ(0.001deg);
  }
}

.interactive {
  position: relative
}

.interactive img {
  display: block;
  width: 100%;
}

.interactive__buttons {

}

.interactive__buttons a {
  position: absolute;
  z-index: 2;
  outline: none;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: rgba(0,0,0,0);/*to prevent grayish highlight that appeared on iPhone upon touch event*/
  -webkit-touch-callout: none;
}

.interactive__buttons a img {
  -webkit-animation: 0.5s ease-in infinite alternate pulsing;
          animation: 0.5s ease-in infinite alternate pulsing;
}

.interactive__buttons a.active, .interactive__buttons a.was-active {
  z-index: 5;
}

.interactive__buttons a.active img, .interactive__buttons a.was-active img {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.interactive__buttons a.interactive--popup-above {
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}

.interactive__overlay {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: no-repeat;
  background-size: 100%;

  -webkit-tap-highlight-color: rgba(0,0,0,0); /*to prevent grayish highlight that appeared on iPhone upon touch event*/
  -webkit-touch-callout: none
}

.interactive__overlay[data-active] {
  z-index: 1;
  display: block;
}

.interactive__popup {
  position: absolute;
  z-index: 4;
  background: #1d52a2;
  color: #ffffff;
  border-radius: 20px;
  padding: 25px 20px;
  text-align: left;
  border: 2px solid #ffffff;
  font-size: 17px;
  width: 100%;
  left: 0;
  right: 0

}

@media (min-width: 800px) {

  .interactive__popup {
    width: 36%;
    margin-left: -18%;/*webkit has renders blurry fonts when using transform: translateX(-50%) */
  }
  }

.interactive__popup h5 {
  font-size: 18px;
  margin-bottom: 5px;
  font-family: "CiscoSansTT Regular", Arial, sans-serif;
}

.interactive__popup p {
  margin-top: 5px;
}

/************************************************************
 * Styles specific to Digital Learning interactive section
 ***********************************************************/

.interactive__buttons [href="#virtual-classroom"] {
  left: 29%;
  top: 40%;
}

.interactive__popup#virtual-classroom {
  top: 40%
}

@media (min-width: 800px) {

  .interactive__popup#virtual-classroom {
    left: 29%;
  }
  }

.interactive__buttons [href="#collaborative-learning-spaces"] {
  left: 35%;
  bottom: 23%;
}

.interactive__popup#collaborative-learning-spaces {
  bottom: 23%
}

@media (min-width: 800px) {

  .interactive__popup#collaborative-learning-spaces {
    left: 35%;
  }
  }

.interactive__buttons [href="#mobility-and-byod"] {
  left: 86.3%;
  bottom: 33%;
}

.interactive__popup#mobility-and-byod {
  bottom: 33%
}

@media (min-width: 800px) {

  .interactive__popup#mobility-and-byod {
    left: 86.3%;
  }
  }

.interactive__overlay {
}

.interactive__overlay[data-active="virtual-classroom"] {
  background-image: url(../images/digital-learning-k-12-virtual-classroom.png);
}

.interactive__overlay[data-active="collaborative-learning-spaces"] {
  background-image: url(../images/digital-learning-k-12-collaborative-learning-spaces.png);
}

.interactive__overlay[data-active="mobility-and-byod"] {
  background-image: url(../images/digital-learning-k-12-mobility-and-byod.png);
}

.interactive__popup {
}

@media (min-width: 800px) {

  .interactive__popup {

}

  .interactive__popup#virtual-classroom {
    width: 50%;
    margin-left: -25%;
  }

  .interactive__popup#collaborative-learning-spaces {
    width: 50%;
    margin-left: -25%;
  }

  .interactive__popup#mobility-and-byod {
    left: auto;
    right: 0;
  }
  }

/************************************************************
 * Styles specific to Digital Campus interactive section
 ***********************************************************/

.interactive__buttons [href="#wireless-connectivity"] {
  left: 18.5%;
  bottom: 62%;
}

.interactive__popup#wireless-connectivity {
  bottom: 62%
}

@media (min-width: 800px) {

  .interactive__popup#wireless-connectivity {
    left: 18.5%;
  }
  }

.interactive__buttons [href="#smart-workspaces"] {
  left: 28.5%;
  bottom: 56%;
}

.interactive__popup#smart-workspaces {
  bottom: 56%
}

@media (min-width: 800px) {

  .interactive__popup#smart-workspaces {
    left: 28.5%;
  }
  }

.interactive__buttons [href="#cybersecurity"] {
  left: 51%;
  bottom: 61.5%;
}

.interactive__popup#cybersecurity {
  bottom: 61.5%
}

@media (min-width: 800px) {

  .interactive__popup#cybersecurity {
    left: 51%;
  }
  }

.interactive__buttons [href="#campus-security"] {
  left: 50.1%;
  top: 65%;
}

.interactive__popup#campus-security {
  top: 65%
}

@media (min-width: 800px) {

  .interactive__popup#campus-security {
    left: 50.1%;
  }
  }

.interactive__buttons [href="#facilities-mgmt"] {
  left: 79.4%;
  bottom: 57%;
}

.interactive__popup#facilities-mgmt {
  bottom: 57%
}

@media (min-width: 800px) {

  .interactive__popup#facilities-mgmt {
    left: 79.4%;
  }
  }

.interactive__buttons [href="#connected-transportation"] {
  left: 71.5%;
  bottom: 22.5%;
  }

.interactive__popup#connected-transportation {
  bottom: 22.5%
}

@media (min-width: 800px) {

  .interactive__popup#connected-transportation {
    left: 71.5%;
  }
  }

/*Digital Learning END*/

.interactive__overlay {

}

.interactive__overlay[data-active="wireless-connectivity"] {
  background-image: url(../images/digital-campus-k-12-wireless-connectivity.png);
}

.interactive__overlay[data-active="smart-workspaces"] {
  background-image: url(../images/digital-campus-k-12-smart-workspaces.png);
}

.interactive__overlay[data-active="cybersecurity"] {
  background-image: url(../images/digital-campus-k-12-cybersecurity.png);
}

.interactive__overlay[data-active="campus-security"] {
  background-image: url(../images/digital-campus-k-12-campus-security.png);
}

.interactive__overlay[data-active="facilities-mgmt"] {
  background-image: url(../images/digital-campus-k-12-facilities-mgmt.png);
}

.interactive__overlay[data-active="connected-transportation"] {
  background-image: url(../images/digital-campus-k-12-connected-transportation.png);
}

.interactive__popup {
}

@media (min-width: 800px) {

  .interactive__popup {

}

  .interactive__popup#wireless-connectivity {

}

  .interactive__popup#smart-workspaces {

}

  .interactive__popup#cybersecurity {

}

  .interactive__popup#campus-security {

}

  .interactive__popup#facilities-mgmt {

}

  .interactive__popup#connected-transportation {

}
  }

/************************************************************
 * Styles for case studies
 ***********************************************************/

.case-studies {
}

.case-studies ul {
  margin-top: 0;
  list-style: none;
  padding-left: 0;
  font-size: 16px;
}

.case-studies li {
  margin-bottom: 5px;
}

.case-studies h4 {
  font-size: 16px;
  margin-bottom: 5px;
  font-family: "CiscoSansTT Regular", Arial, sans-serif;
}

.case-studies a:link,.case-studies a:visited {
  color: #1d52a2;
}

.case-studies section {
  margin: 0 20px 10px;/*flex-grow: 1;*//*flex-basis: 33%;*/
}

.case-studies__columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap
}

@media (min-width: 800px){

  .case-studies__columns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  .case-studies__columns section {
    min-width: 26%;
  }
  }