@charset "utf-8";

/*     OPTIONAL ELEMENTS  for Default - Wide-------------------------------- */



/* ----------------------------------------------------------------
	Video - Self-Hosted
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Embedded YouTube Video
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Centered Map
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Centered Facebook Feed
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Centered RSS Feed
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Slideshow
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Gradients
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Animation
-----------------------------------------------------------------*/




/* -- VIDEO - SELF-HOSTED */


.flex-video {
	flex: 1 1 30%;
	-webkit-flex: 1 1 30%;
	-ms-flex: 1 1 30%;
	margin-top: 1em;
	margin-bottom:2em;
	text-align:center;
}

video {
  width: 90%    !important;
  height: auto   !important;
}

.flex-video p {
	width: 100%;
	text-align:center;
	font-weight: bold;
	font-style:italic;
	color:#007cc0;
	font-size:1em;
	line-height:2em;
}



/* -- EMBEDDED YOUTUBE VIDEO */

.video {
	position: relative;
	padding-bottom: 56.25%;  /*  16:9 aspect ratio, which will automatically give the height  
								A 4:3 video would be 75% for bottom padding.  */
	height: 0;  /* Just triggers layout;  "auto" won't do that for you  */
	padding-top: 25px;   /* To accommodate any "chrome from the video player  */
	margin:  2em auto;
	max-width:560px; /* Can be set to any size I want */
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* -- CENTERED MAP */

.map {
	text-align:center;
	margin: 2em auto;
}


/* -- CENTERED FACEBOOK FEED */

.facebook {
    margin: 2em auto;
	text-align: center;
}

#fb-album-content a span { 
	display:none !important; 
}

.fb-link {
	color:#9995ca;  
}


/* -- CENTERED RSS FEED */

#feed {
	margin-bottom:1em;
	text-align:center;
}

.feed-container {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

/*  -- Slideshow  */

#gallery {
	border:1px solid #000;
	margin-bottom:2em;
}

.cycle-slideshow img {
	border: 1px solid #000;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: -5px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/*  -- Gradients  */

.gradient, .gradient2, .gradient3 {
  height: 100px;
  padding: 15px;
  background-color: red;
  background-image:
    linear-gradient(
      red, #f06d06
    );
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
  margin-bottom:20px;
}

.gradient2 {
  background-color: blue;
  background-image:
    linear-gradient(
      to right, 
      #2486D6,  #6EB3E5
    );
}

.gradient3 {
  height:200px;
  width:350px;
  background-color: black;
  background-image:
    linear-gradient(
      45deg, 
      white,  black
    );
}

.gradient p, .gradient2 p, .gradient3 p {
	padding:0;
	margin:0;
	color: #fff;
    text-shadow: 1px 1px #555;
}


/* -- ANIMATION */



.fade-text {
	opacity: 0;  /* make things invisible upon start */
	animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */
	animation-fill-mode: forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/* -- SCROLLING TEXT - RIGHT TO LEFT */


.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: #fff;
 color: #555;
 border: 1px solid #ccc;
}

.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 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%); 
 }
	
}



/* -- SCROLLING TEXT - LEFT TO RIGHT */

.scroll-right {
	 height: 50px;	
	 overflow: hidden;
	 position: relative;
	 background: #ccc;
	 color: black;
	 border: 1px solid slateblue;
}
.scroll-right p {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 margin: 0;
	 line-height: 50px;
	 text-align: center;
	
	 /* Starting position */
	 -moz-transform:translateX(-100%);
	 -webkit-transform:translateX(-100%);	
	 transform:translateX(-100%);
	
	 /* Apply animation to this element */	
	 -moz-animation: scroll-right 15s linear infinite;
	 -webkit-animation: scroll-right 15s linear infinite;
	 animation: scroll-right 15s linear infinite;
}

	/* Move it (define the animation) */
	@-moz-keyframes scroll-right {
	 0%   { -moz-transform: translateX(-100%); }
	 100% { -moz-transform: translateX(100%); }
	}
	@-webkit-keyframes scroll-right {
	 0%   { -webkit-transform: translateX(-100%); }
	 100% { -webkit-transform: translateX(100%); }
	}
	@keyframes scroll-right {
	 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%); 
	 }
	}


/* -- SCROLLING TEXT - SCROLL UP */

.scroll-up {
	 height: 50px;	
	 overflow: hidden;
	 position: relative;
	 background: #fff;
	 color: red;
	 border: 1px solid orange;
}
.scroll-up p {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 margin: 0;
	 line-height: 50px;
	 text-align: center;
	 /* Starting position */
	 -moz-transform:translateY(100%);
	 -webkit-transform:translateY(100%);	
	 transform:translateY(100%);
	 /* Apply animation to this element */	
	 -moz-animation: scroll-up 5s linear infinite;
	 -webkit-animation: scroll-up 5s linear infinite;
	 animation: scroll-up 5s linear infinite;
}

	/* Move it (define the animation) */
	@-moz-keyframes scroll-up {
	 0%   { -moz-transform: translateY(100%); }
	 100% { -moz-transform: translateY(-100%); }
	}

	@-webkit-keyframes scroll-up {
	 0%   { -webkit-transform: translateY(100%); }
	 100% { -webkit-transform: translateY(-100%); }
	}

	@keyframes scroll-up {
	 0%   { 
	 -moz-transform: translateY(100%); /* Browser bug fix */
	 -webkit-transform: translateY(100%); /* Browser bug fix */
	 transform: translateY(100%); 		
	 }
	 100% { 
	 -moz-transform: translateY(-100%); /* Browser bug fix */
	 -webkit-transform: translateY(-100%); /* Browser bug fix */
	 transform: translateY(-100%); 
	 }
	}



/* -- SCROLLING TEXT - SCROLL DOWN */


.scroll-down {
	 height: 50px;	
	 overflow: hidden;
	 position: relative;
	 background: #fff;
	 color: blue;
	 border: 1px solid #555;
}
.scroll-down p {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 margin: 0;
	 line-height: 50px;
	 text-align: center;
	 /* Starting position */
	 -moz-transform:translateY(-100%);
	 -webkit-transform:translateY(-100%);	
	 transform:translateY(-100%);
	 /* Apply animation to this element */	
	 -moz-animation: scroll-down 5s linear infinite;
	 -webkit-animation: scroll-down 5s linear infinite;
	 animation: scroll-down 5s linear infinite;
}

	/* Move it (define the animation) */
	@-moz-keyframes scroll-down {
	 0%   { -moz-transform: translateY(-100%); }
	 100% { -moz-transform: translateY(100%); }
	}
	@-webkit-keyframes scroll-down {
	 0%   { -webkit-transform: translateY(-100%); }
	 100% { -webkit-transform: translateY(100%); }
	}
	@keyframes scroll-down {
	 0%   { 
	 -moz-transform: translateY(-100%); /* Browser bug fix */
	 -webkit-transform: translateY(-100%); /* Browser bug fix */
	 transform: translateY(-100%); 		
	 }
	 100% { 
	 -moz-transform: translateY(100%); /* Browser bug fix */
	 -webkit-transform: translateY(100%); /* Browser bug fix */
	 transform: translateY(100%); 
	 }
}