/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 5, 2017 */
@font-face      {
  font-family   : 'optimusprincepsregular';
  src           : url('optimusprinceps-webfont.woff2') format('woff2'),
                  url('optimusprinceps-webfont.woff') format('woff');
  font-weight   : normal;
  font-style    : normal;
}

/* Widget Home Featured */
.home-featured h1     {
  xfont-family         : 'optimusprincepsregular';
  margin-bottom       : 0;
}
.cls-bruu-logo-text  {
  margin-right        : 0.5em;
  text-align          : right;
}
.cls-bruu-logo-text1  {
  font-family         : 'optimusprincepsregular';
  xfont-size           : 2.5em;
}
.cls-bruu-mission     {
  color               : #006073;
  font-weight         : bold;
  text-align          : center;
}



/* The video block
 *  This area has a H2 title and the veideo IFRAME
 *  It also has a DIV that overlays the title and video
 *  This overlay DIV has a message with text and image
 */
div#id-home-video-container {
  position    : relative;
}
div#id-home-video-container h2 {
  margin-top    : 0;
}
/* Video -- make it be full width, but stay in proportion in height */
div#id-home-video {
  padding-bottom    : 65%;
  position          : relative;
  width             : 100%;
}
div#id-home-video iframe {
  height            : 90%;
  width             : 90%;
  position          : absolute;
  top               : 2%;
  bottom            : 8%;
  left              : 5%;
  right             : 5%;
}
/* The copyright line */
div#id-home-video > p.cls-copyright {
  font-size         : 0.6em;
  margin            : 0;
  position          : absolute;
  bottom            : 0;
  right             : 2.0em;
}
/* This is the message overlay DIV
 *  It has two child DIVs one image and one text
 */
div#id-home-video-message {
  background        : rgba(96,117,35,0.5);
  background        : rgba(255,255,255,0.8);
  background        : rgb(255,255,240);
  box-shadow      : -0.2em -0.2em 1em #607523 inset, 0.1em 0.1em 0.3em #006073;
  box-shadow      : -0.2em -0.2em 1em rgba(0, 96, 115, 0.1) inset, 0.1em 0.1em 0.3em #006073;
  border-radius     : 0.5em;
  padding           : 1.0em;
  position          : absolute;
  top               : 0;
  bottom            : 0;
  left              : 0;
  right             : 0;
  overflow          : hidden;
  /* pointer-events:none removes the element from the click stack, so the click goes straight to the IFRAME below. See footer.php for the JS that will detect the click on the IFRAME and then hide this element. */
  pointer-events    : none;
}
/* For a large screen, we move the message over a little to get a gutter from the next widget */
@media only screen and (min-width: 992px) {
  div#id-home-video-message {
    right                   : 0.4em;
  }
}
div#id-home-video-message h2  {
  margin-top                  : 0;
}
#id-home-video-image {
  position    : absolute;
  right       : 0;
  top         : 0;
  xwidth       : 50%;
  z-index     : 1;
  right       : -20%;
  left        : 30%;
}
#id-home-video-image img  {
  xopacity                 : 0.4;
  xwidth                   : 90%;
}
#id-home-video-text {
  margin-left       : 16px;
  position          : absolute;
  top               : 0;
  left              : 0;
  xbottom           : 20%;
  z-index           : 100;
}
#id-home-video-text p {
  line-height         : 3.0em;
  xtext-align          : center;
}
#id-home-video-text p a {
  background-color      : #c4f1ff;
  border-color          : #5bc0de;
  color                 : black;
  min-width             : 12em;
  padding-left          : 6px;
  pointer-events        : auto;
  text-align            : left;
}
div#id-home-video-text a img  {
  height                      : 1.6em;
}
#id-home-video-text a#id-video  {
  pointer-events                : none;
}
@media only screen and (min-width: 480px) {
  #id-home-video-text {
    top               : 20%;
  }
}
@media only screen and (min-width: 768px) {
}


/**************************/
/* Widget 2 side bar */

body.aqua-green .home-widget-2 {
  background          : transparent; /*#006073;*/
  padding             : 1.0em;
  padding-top         : 0.1px; /*Without padding, margin of first child element does not apply. */
}
body.aqua-green .home-widget-2 h2    {
  color               : #006073;
  font-size           : 1.8em;
  font-weight         : bold;
  text-align          : center;


}
@media only screen and (min-width: 1200px) { /* When two widghets side-by-side */
  body.aqua-green .home-widget-2 h2    {
    height              : 45px; /* To match the H1 to the left */
    margin-bottom       : 0; /* To match the H1 to the left */
    margin-left         : -1.0em; /* counteract the padding of the container */
    background-image    : url(page-header-right.png);
    background-position : right bottom;
    background-size     : auto 1.0em;
    background-repeat   : repeat-x;
  }
  body.aqua-green .home-widget-2 .cls-widget-2-body    {
    min-height  : 410px;
  }
}
body.aqua-green .home-widget-2 .cls-widget-2-body    {
  background          : rgba(0, 96, 115, 0.2);
  background          : rgb(255,255,240);
  box-shadow      : -0.2em -0.2em 1em #607523 inset, 0.1em 0.1em 0.3em #006073;
  box-shadow      : -0.2em -0.2em 1em rgba(0, 96, 115, 0.1) inset, 0.1em 0.1em 0.3em #006073;
  border-radius       : 0.5em;
  margin              : -1.0em; /* counteract the padding of the container */
  margin-top          : 0.4em;
  padding-top         : 0.1px; /*Without padding, margin of first child element does not apply. */
  padding             : 1.0em;  /* mimic the padding of the container */
}

.cls-home-map-frame {
  width               : 100%; /* The map iframe> */
}

/* Animated faces on the home page.
 *
 */
.cls-star   {
  box-shadow        : 0 0 15px 10px rgb(255,255,240) inset, 0 0 15px 10px rgb(255,255,240);
  border-radius     : 40%;
  position          : absolute;
  overflow          : hidden;
  xbackground        : url(img_flower.jpg);
  background-size   : cover;
  background-repeat : no-repeat;
}
.cls-star   {
  animation-name: star;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  -moz-animation-name: star;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: star;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -o-animation-name: star;
  -o-animation-duration: 5s;
  -o-animation-timing-function: ease-in;
  -o-animation-iteration-count: 1;
  opacity: 0;
}
@keyframes star { /* Standard syntax */
  0% {
    opacity        : 0;
  }
  20% {
    opacity        : 0;
  }
  30% {
    opacity        : 0.6;
  }
  60% {
    opacity        : 0.6;
  }
  80% {
    opacity        : 0;
  }
  100% {
    opacity        : 0;
  }
}
@-webkit-keyframes star { /* Safari 4.0 - 8.0 */
  0% {
    opacity        : 0;
  }
  20% {
    opacity        : 0;
  }
  30% {
    opacity        : 0.6;
  }
  60% {
    opacity        : 0.6;
  }
  80% {
    opacity        : 0;
  }
  100% {
    opacity        : 0;
  }
}




div#id-home-video-image {
  display: none;
}
div#id-home-video-image ,
div#id-home-video-text  {
  animation-name        : hide, fadeIn;
  animation-delay       : 0s, 2s;
  animation-duration    : 5s;
}
div#id-home-video-text  {
  animation-delay       : 0s, 4s;
}
@keyframes hide {
  from {
    opacity        : 0;
  }
  to {
    opacity        : 0;
  }
}
div#id-home-video-message {
  animation: fadeIn 5.0s;
}
@keyframes fadeIn {
  from {
    opacity         : 0;
    left            : 0;
    right           : 0;
  }
  to {
    xopacity         : 1;
  }
}

/*
.cls-carousel-box {
  opacity         : 0.5;
  position        : absolute;
  z-index         : 10;
}
.cls-carousel-box img {
  position        : absolute;
  z-index         : 10;
}
.cls-carousel-top {
  xborder          : 2px solid yellow;
  z-index         : 50;
}
x.cls-carousel-top {
  z-index         : 50;
  animation       : fadeIn 2.0s;
}
*/

/**************************/
/* UUA Feature Box Widget hover */

/* Center image in uuafbw widget  */
body.aqua-green section.uuafbw_widget .thumbnail img      {
  margin              : auto;
}
/* Center text in the uuafbw widget title  and other headers*/
body.aqua-green section.uuafbw_widget .thumbnail .caption h4  ,
body.aqua-green section.uuafbw_widget .thumbnail .caption h5  ,
body.aqua-green section.uuafbw_widget .thumbnail .caption h6  {
      text-align          : center;
}
/* Fix font size in the uuafbw widget, so that all text is smaller, not just <P>*/
body.aqua-green section.uuafbw_widget .thumbnail .caption p     {
  font-size           : 100%;
}
body.aqua-green section.uuafbw_widget .thumbnail .caption      {
  font-size           : 90%;
}

/*body.aqua-green div.home-feature .thumbnail:hover      {*/
body.aqua-green section.uuafbw_widget .thumbnail:hover      {
  margin-top          : -12px;
  margin-bottom       : 36px;
  transition          : 0.4s;
}
body.aqua-green div.home-feature:nth-of-type(odd) .thumbnail:hover      ,
body.aqua-green div.home-events                   .thumbnail:hover      {
  box-shadow          : 0px 0px 50px #3c3a73;
}
body.aqua-green div.home-feature:nth-of-type(even) .thumbnail:hover     ,
body.aqua-green div.home-news                      .thumbnail:hover     ,
body.aqua-green div.home-testimonials             .thumbnail:hover      {
  box-shadow          : 0px 0px 50px #708829;
}
/* Override the parent theme style - the even color goes with the original theme */
body.aqua-green div.home-feature:nth-of-type(odd) .thumbnail:hover  p.box-link ,
body.aqua-green div.home-feature:nth-of-type(odd) .wp-caption:hover p.box-link ,
body.aqua-green div.home-events                   .thumbnail:hover  p.box-link ,
body.aqua-green div.home-events                   .wp-caption:hover p.box-link {
    border-color      : #6663b0;
    background        : #3c3a73;
}
/* Override the parent theme style, which has color stay dark for small screens  */
body.aqua-green div.home-feature      .thumbnail:hover  p.box-link ,
body.aqua-green div.home-feature      .wp-caption:hover p.box-link ,
body.aqua-green div.home-news         .thumbnail:hover  p.box-link ,
body.aqua-green div.home-news         .wp-caption:hover p.box-link ,
body.aqua-green div.home-testimonials .thumbnail:hover  p.box-link ,
body.aqua-green div.home-testimonials .wp-caption:hover p.box-link ,
body.aqua-green div.home-events       .thumbnail:hover  p.box-link ,
body.aqua-green div.home-events       .wp-caption:hover p.box-link {
    color             : white;
}
/* In the widgets, do not underline text, because it's all one big link */
body.aqua-green .uuafbw_widget a   {
  text-decoration     : none;
}
/* In the widgets, do not outline on focus, because it's all one big link */
body.aqua-green .uuafbw_widget a:focus  ,
main .uuafbw_widget a:focus img         {
    outline             : none;
}
/* In the widgets, do not underline text, because it's all one big link */
body.aqua-green .uuafbw_widget .cls-feature-subtitle   {
  font-weight     : bold;
  text-align      : center;
}

body.aqua-green .thumbnail p.box-link,
body.aqua-green .wp-caption p.box-link,
body.aqua-green .wp-caption p.box-link {
    background    : white;
    color         : #5e7321;  /* This is darker to get enough color contrast for small text */
}

/* The theme file templates/template_home.php can place an announcement on the home page. */
.cls-home-page-announcement   {
  border          : 8px solid orange;
  background-color: lightyellow;
  padding         : 1em;
}