/* make background home screen video full screen */

#bgvideo {
  position: fixed;
  top: 50%; left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

/* For all other screens, make image background (opening image of video) */
body { 
	background-image: url(https://bocaskiclub.wildapricot.org/resources/media/bgskier.jpg) ;
	background-position: center center;
	background-repeat:  no-repeat;
	background-attachment: fixed;
	background-size:  cover;
	background-color: #999; 
}

/* for small screens, disable background video and use image instead */
@media screen and (max-device-width: 800px) {
    html {background: url(http://bocaskiclub.wildapricot.org/resources/media/bgskier.jpg) #000 no-repeat center center fixed;}
    #bgvideo {display: none; }
}

.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.pulse {
  animation-name: pulse;
  animation-duration: 1s;
}
@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.25) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
.rubberBand {
  animation-name: rubberBand;
}
.fieldSubContainer .fieldBody .fieldItem {
    margin: 0px 0 10px 0;
}

/* alerts on pages */
.alert-box {
    padding: 20px;
    color: #000;;
    margin-bottom: 15px;
	border-radius:10px;
}

.warning {
    background:#ffecec 10px 50%;
    border:1px solid #f5aca6;
}

.warning .icon{
    color: #ff0000;
}

.notice {
    background:#fff8c4 10px 50%;
    border:1px solid #f2c779;
}

.notice .icon {
    color: #ff9100;
}

.closebtn {
    margin-left: 15px;
    color: 000;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}