/************************************************************
 * 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: 22.16796875%; /*227px/1024px;*/
  top: 40.29605263157895%; /*245px/608px;*/
}

.interactive__popup#virtual-classroom {
  top: 40.29605263157895% /*245px/608px;*/
}

@media (min-width: 800px) {

  .interactive__popup#virtual-classroom {
    left: 22.16796875%;/*227px/1024px;*/
  }
  }

.interactive__buttons [href="#connected-research"] {
  left: 45.21484375%; /*463px;/1024px*/
  bottom: 75%; /*456px/608px;*/
}

.interactive__popup#connected-research {
  bottom: 75% /*456px/608px;*/
}

@media (min-width: 800px) {

  .interactive__popup#connected-research {
    left: 45.21484375%;/*463px;/1024px*/
  }
  }

.interactive__buttons [href="#mobility-and-byod"] {
  left: 77.34375%; /*792px/1024px;*/
  bottom: 35.85526315789474%; /*218px/608px;*/
}

.interactive__popup#mobility-and-byod {
  bottom: 35.85526315789474% /*218px/608px;*/
}

@media (min-width: 800px) {

  .interactive__popup#mobility-and-byod {
    left: 77.34375%;/*792px/1024px;*/
  }
  }

.interactive__overlay {
}

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

.interactive__overlay[data-active="connected-research"] {
  background-image: url(../images/digital-learning-higher-ed-connected-research.png);
}

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

.interactive__popup {
}

@media (min-width: 800px) {

  .interactive__popup {

}

  .interactive__popup#virtual-classroom {

}

  .interactive__popup#connected-research {
    width: 60%;
    margin-left: -30%;
  }

  .interactive__popup#mobility-and-byod {

}
  }

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

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

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

@media (min-width: 800px) {

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

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

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

@media (min-width: 800px) {

  .interactive__popup#smart-workspaces {
    left: 39.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: 49.7%;
  bottom: 52%;
}

.interactive__popup#campus-security {
  bottom: 52%
}

@media (min-width: 800px) {

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

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

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

@media (min-width: 800px) {

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

.interactive__buttons [href="#digital-signage"] {
  left: 84.5%;
  bottom: 71%;
}

.interactive__popup#digital-signage {
  bottom: 71%
}

@media (min-width: 800px) {

  .interactive__popup#digital-signage {
    left: 84.5%;
  }
  }

/*Digital Learning END*/

.interactive__overlay {

}

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

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

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

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

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

.interactive__overlay[data-active="digital-signage"] {
  background-image: url(../images/digital-campus-higher-ed-digital-signage.png);
}

.interactive__popup {
}

@media (min-width: 800px) {

  .interactive__popup {

}

  .interactive__popup#wireless-connectivity {

}

  .interactive__popup#smart-workspaces {
    width: 50%;
    margin-left: -25%;
  }

  .interactive__popup#cybersecurity {

}

  .interactive__popup#campus-security {

}

  .interactive__popup#facilities-mgmt {

}

  .interactive__popup#digital-signage {
    width: 30%;
    margin-left: -15%;
  }
  }

/************************************************************
 * 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%;
  }
  }