/* @font-face {
  font-family: 'Cera GR';
  src: url('fonts/DPSDbeyond.eot');
  src: url('fonts/DPSDbeyond.eot?#iefix') format('embedded-opentype'),
       url('fonts/DPSDbeyond.woff') format('woff'),
       url('fonts/DPSDbeyond.ttf')  format('truetype');
  font-style: normal;
  font-weight: 400;
} */

*{
  box-sizing: border-box;
}
@import url(//db.onlinewebfonts.com/c/508fb4f19c40b7c6a170913ad9a5de34?family=CeraGR-Medium);

@font-face {font-family: "CeraGR-Medium";
    src: url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.eot");
    src: url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/508fb4f19c40b7c6a170913ad9a5de34.svg#CeraGR-Medium") format("svg");
}

body,html{
  cursor: url('../img/cursor.png'), auto!important;
}

/*----------------------- Scrolling text --------------------- */

.scroll-left {
    height: 50px;
   overflow: hidden;
   position: fixed;
   background: #fff;
   z-index: 2;
   width: 100%;
   top: 0;
}
.scroll-left p {
  color: #ff3399;
  font-weight: bold;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 30px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
 /* Apply animation to this element */
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   {
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%);
 }
}
.scroll-left .color-mint{
  color: #33ff99;
}

/*-----------------------   END Scrolling text --------------------- */

body{
  cursor: url(img/cursor.png), auto;
  font-family: "CeraGR-Medium";
}

.navbar-light .navbar-nav .nav-link{
  color: #243c71;
}
.navbar-light .navbar-nav .nav-link:hover{
  color: #ff3399;
}

.row-50{
  height: 50vh;
}
section h2{
  font-size: 2.5rem;
}
a{
    cursor: url('../img/cursor-hover.png'), auto!important;
}
/* a img{
    cursor: url('../img/cursor.png'), auto!important;
} */

#mint{
  background-color: #33ff99;
}
#pink{
  background-color: #ff3399;
}
#circle{
  height: 350px;
  width: 350px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: #fff;
  border-radius: 50%;
}
#promoVideo{
  position: relative;
  margin: auto;
}
.text-blue{
  color: #243c71;
}

.bg-pink{
  background-color: #ff3399;
}
.bg-mint{
  background-color: #33ff99;
}


/*----------------------- Promo video ----------------------- */
.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.iframe-container iframe {
  position: absolute;
    top: 0;
    left: 0;
    /* width: 100%;
    height: 100%; */
    border: 0;
}

/*----------------------- END Promo video ----------------------- */

#whereWhen{
  height: 100vh;
}
#whereWhen .info{
  width: 40%;
}

#whereWhen p{
  margin-bottom: 0!important;
  padding: 2em 0 0 0!important;
}

.text-pink{
  color: #ff3399;
}

footer .logos-sponsors .row{
  margin: 3rem 0;
}

footer p, footer a{
  color: #fff!important;
}
footer .info p{
margin: 0 !important;
padding: 0;
height: 100%;
vertical-align: bottom !important;
text-align: right;
}

footer .info a:hover{
  opacity: .7;
}

footer a:hover{
  cursor: url('../img/cursor-green.png'), auto!important;
}

footer .logos-sponsors img:hover{
  opacity: .7;
}
/* .col-lg-2{
  background: orange;
}

.col-lg-12{
  background: blue;
}

.col-lg-8{
  background: green;
}

.col-lg-7{
  background: red;
}
.col-lg-6{
  background: yellow;
}
.col-lg-5{
  background: cyan;
} */

/* .about-section .col-lg-4{
  margin-top: 6rem;
} */

#location{
  padding: 0!important;
}

#googleMap{
  	webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.social a{
  color: #fff;
}



/*----------------------- Grads --------------------- */


.grads #circle {
  background: #243c71;
}
.active-pink {
    color: #ff3399!important;
    font-weight: 400!important;
}

  .mySlides1, .mySlides2 {display: none}
  img {vertical-align: middle;}

#carousel{
  height: 350px;
  width: 350px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius: 50%;
}
#arrows{
  max-height: 300px;
  height: 180px;
  max-width: 400px;
  margin: auto;
}

#name-container{
  max-height: 300px;
  max-width: 400px;
  margin: auto;
  text-align: center;
  margin-top: 3rem;
}
#name-container h2{
}
#name-container a{
  display: block;
  font-size: .8rem;
}

.next {
    float: right;
  border-radius: 3px 0 0 3px;
}

.prev {
  float: left;
}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: relative;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: #33ff99!important;
}

#name-container a:hover{
  color: #33ff99;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.carousel-fade {
  -webkit-animation-name: carousel-fade;
  -webkit-animation-duration: 1.5s;
  animation-name: carousel-fade;
  animation-duration: 1.5s;
  clip-path: circle(250px at center);
}

@-webkit-keyframes carousel-fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes carousel-fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.students{
  margin: 2rem 0;
}

.students .col img{
  clip-path: circle(49% at center);
}

.students img{
  transition: 0.5s ease-in-out;
}
.students img:hover{
  cursor: url("img/cursor-hover.png"), auto;
  filter: grayscale(0);
  -webkit-filter: saturate(4);
  filter: saturate(4);
}

/*----------------------- END Grads --------------------- */





/*----------------------- RESPONSIVE WD --------------------- */

@media screen and (max-width: 574px) {
  body {
    /* background: yellow; */
  }
  .navbar-light .navbar-nav .nav-link{
    font-size: 1.5rem;
  }
  .about-section{
    /* background: yellow; */
    min-height: 800px;
    /* overflow: visible; */
  }
  .about-section .container{
    padding: 5em 1rem!important;
  }
  .about-section .container p{
    font-size: .9rem;
  }

  .about-section .container .text-pink{
    font-size: .9rem;
  }
  .iframe-container{
    /* overflow: visible; */
  }
  .iframe-container iframe {
      width: 100%;
      height: 100%;
  }

  #circle{
    height: 250px;
    width: 250px;
  }

  #whereWhen{
    height: auto;
  }

  #whereWhen #line{
    display: none;
  }
  #location .text-pink{
    padding: 0 !important;
  }

  #googleMap{
    margin-top: 3rem;
    width: 100%!important;
    height: 200px!important;
  }

  footer{
    padding: .1rem!important;
  }

  footer .col{
    flex-basis: auto!important;
    margin-top: 2rem;
  }

  footer .col img{
    max-width: 50%;
  }
  footer .supporters img {
      max-width: 50%;
      margin: .8rem 0;
  }
  footer .info p{
    text-align: left;
    margin-top: 2rem!important;
  }
  footer .logos-sponsors .row{
    margin: 0!important;
  }

  footer .social{
    margin-top: 5rem;
  }



/* ----------RWD GRADS */

  #carousel{
    height: 250px;
    width: 250px;
  }
  #name-container {
  margin-top: 0;
  }
  .mySlides2 h2{
    font-size: 1.5rem!important;
  }

  .students .col img {
    clip-path: circle(40% at center);
  }
  .students .col{
    padding: 0;
    margin: 0;
  }


  /* ---------- END RWD GRADS */




}


@media screen and (min-width: 766px) and (max-width: 991px) {
  .iframe-container iframe {
    width: 100%!important;
    height: 100%!important;
  }

  #googleMap{
    margin-top: 3rem;
    width: 100%!important;
    height: 200px!important;
  }
}

@media screen and (min-width: 575px) and (max-width: 765px) {
	body {
  	/* background: red; */
	}
  .navbar-light .navbar-nav .nav-link{
    font-size: 1.5rem;
  }
  .about-section{
    /* background: green; */
    min-height: 800px;
    /* overflow: visible; */
  }
  .about-section .container{
    padding: 5em 0!important;
  }
  .iframe-container{
    /* overflow: visible; */
  }
  .iframe-container iframe {
      width: 100%;
      height: 100%;
  }
  #whereWhen{
    height: auto;
  }

  #whereWhen #line{
    display: none;
  }
  #location .text-pink{
    padding: 0 !important;
  }
  #googleMap{
    margin-top: 3rem;
    width: 100%!important;
    height: 200px!important;
  }
  footer{
    padding: .1rem!important;
  }
  footer .col{
    flex-basis: auto!important;
    margin-top: 2rem;
  }

  footer .col img{
    max-width: 50%;
  }
  footer .supporters img {
      max-width: 18%;
  }
  footer .info p{
    text-align: left;
    margin-top: 2rem!important;
  }
  footer .logos-sponsors .row{
    margin: 0!important;
  }
  .supporters img{
    width: 50%;
  }

  /* ----------RWD GRADS */

    #name-container {
    margin-top: 0;
    }

    #arrows {
    height: 100px;
    }

    .mySlides2 h2{
      font-size: 1.5rem!important;
    }
    .students .col img {
      clip-path: circle(40% at center);
    }
    .students .col{
      padding: 0;
      margin: 0;
    }

    /* ---------- END RWD GRADS */
}


@media (min-width: 1400px){
.grads .about-section .container {
  max-width: 1540px;
  }