.responsiveCal {
 
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
 
}
 
.responsiveCal iframe {
 
position: absolute; top:0; left: 0; width: 100%; height: 100%;
 
}


/* Footer */

	#footer {
		padding: 5em 0 6em 0 ;
		background-color: #848482;
	}

		#footer > .inner {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
		}

			#footer > .inner > * > :last-child {
				margin-bottom: 0;
			}

			#footer > .inner section:nth-child(1) {
				width: calc(66% - 2.5em);
				margin-right: 2.5em;
			}

			#footer > .inner section:nth-child(2) {
				width: calc(33% - 2.5em);
				margin-left: 2.5em;
			}

			#footer > .inner .copyright {
				width: 100%;
				padding: 0;
				margin-top: 5em;
				list-style: none;
				font-size: 0.8em;
				color:#00004d;
			}

				#footer > .inner .copyright a {
					color: inherit;
				}

				#footer > .inner .copyright li {
					display: inline-block;
					border-left: solid 1px rgba(88, 88, 88, 0.15);
					line-height: 1;
					padding: 0 0 0 1em;
					margin: 0 0 0 1em;
				}

					#footer > .inner .copyright li:first-child {
						border-left: 0;
						padding-left: 0;
						margin-left: 0;
					}

		@media screen and (max-width: 1280px) {

			#footer {
				padding: 5em 0 3em 0 ;
			}

				#footer > .inner section:nth-child(1) {
					width: calc(66% - 1.25em);
					margin-right: 1.25em;
				}

				#footer > .inner section:nth-child(2) {
					width: calc(33% - 1.25em);
					margin-left: 1.25em;
				}

		}

		@media screen and (max-width: 980px) {

			#footer > .inner section:nth-child(1) {
				width: 66%;
				margin-right: 0;
			}

			#footer > .inner section:nth-child(2) {
				width: calc(33% - 2.5em);
				margin-left: 2.5em;
			}

		}

		@media screen and (max-width: 736px) {

			#footer {
				padding: 3em 0 1em 0 ;
			}

				#footer > .inner {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					#footer > .inner section:nth-child(1) {
						width: 100%;
						margin-right: 0;
						margin: 3em 0 0 0;
					}

					#footer > .inner section:nth-child(2) {
						-moz-order: -1;
						-webkit-order: -1;
						-ms-order: -1;
						order: -1;
						width: 100%;
						margin-left: 0;
					}

					#footer > .inner .copyright {
						margin-top: 3em;
					}

		}

		@media screen and (max-width: 480px) {

			#footer > .inner .copyright {
				margin-top: 3em;
			}

				#footer > .inner .copyright li {
					border-left: 0;
					padding-left: 0;
					margin: 0.75em 0 0 0;
					display: block;
					line-height: inherit;
				}

					#footer > .inner .copyright li:first-child {
						margin-top: 0;
					}

		}





/* ==========================================================================
   #Parallax
   ========================================================================== */

	.parallax {
		overflow: hidden;
		margin: 40px 0;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: 50% 0;
		-webkit-background-size: cover;
				background-size: cover;
						
	}
	
	.parallax.parallax-enabled { background-attachment: fixed !important; }
	
	#bg-parallax-1 { background-image: url(../../_content/backgrounds/wasp_crash_crew.jpg); }
	#bg-parallax-2 { background-image: url(../../_content/backgrounds/jim_haas_lisbon.jpg); }
	#bg-parallax-3 { background-image: url(../_content/backgrounds/brewkettle.jpg); }
	#bg-parallax-4 { background-image: url(../_content/backgrounds/gatorade.jpg); }
	#bg-parallax-5 { background-image: url(../_content/backgrounds/004.jpg); }
	#bg-parallax-6 { background-image: url(../../_content/backgrounds/1920x1400.jpg); }
	#bg-parallax-7 { background-image: url(../../_content/backgrounds/1920x1200.jpg); }
	#bg-parallax-8 { background-image: url(../../_content/backgrounds/1920x800.jpg); }
	#video-parallax-1 { background-image: url(../../_content/backgrounds/1920x1000.jpg); }
	#bg-portfolio-box { background-color: #dff5d8; }
	
	/*
	 * 1. Overwite element color when in parallax
	 */
	
	.parallax { color :#fff; } /* 1 */
	
	.parallax h1, 
	.parallax h2, 
	.parallax h3, 
	.parallax h4, 
	.parallax h5, 
	.parallax h6,
	.parallax a,
	.parallax .btn,
	.parallax .milestone .milestone-content,
	.parallax .milestone .milestone-description,
	.parallax .tabs-container .tabs-menu li a,
	.parallax .vertical-tabs-container .tabs-menu li a,
	.parallax .icon-box-4 i,
	.parallax .headline span.bullet:before,
	.parallax .headline span.bullet:after,
	.parallax .headline-2 i,
	.parallax .icon-box-1 h3 a,
	.parallax .icon-box-2 h3 a,
	.parallax .icon-box-3 h3 a,
	.parallax .icon-box-4 h3 a,
	.parallax .icon-box-5 h3 a,
	.parallax .icon-box-6 h3 a,
	.parallax .icon-box-7 h3 a,
	.box h1, 
	.box h2, 
	.box h3, 
	.box h4, 
	.box h5, 
	.box h6,
	.box a,
	.box .btn,
	.box .milestone .milestone-content,
	.box .milestone .milestone-description,
	.box .tabs-container .tabs-menu li a,
	.box .vertical-tabs-container .tabs-menu li a,
	.box .icon-box-4 i,
	.box .headline span.bullet:before,
	.box .headline span.bullet:after,
	.box .headline-2 i,
	.box .icon-box-1 h3 a,
	.box .icon-box-2 h3 a,
	.box .icon-box-3 h3 a,
	.box .icon-box-4 h3 a,
	.box .icon-box-5 h3 a,
	.box .icon-box-6 h3 a,
	.box .icon-box-7 h3 a { color: #fff; }
	
	.parallax abbr[title] { border-bottom: 1px dotted #fff; }		
	
	/*
	 * 1. added this because adding position: relative; to .parallax breaks parallax backgrounds in chrome
	 * 2. Parallax texture overlay
	 * 3. should be used to wrap parallax content if you are using a Parallax texture overlay
	 *
	 */
	
	.parallax-content { 	/* 1 */
		position: relative;
		z-index: 1;	
	}
	
	.parallax-overlay { /* 2 */
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-attachment: scroll;
		background-repeat: repeat;
		background-position: 0 0;
	}
	
	.parallax-content-inner { /* 3 */
		position: relative;
		z-index: 3;
	}
	
	.parallax .accordion,
	.parallax .toggle,
	.box .accordion,
	.box .toggle { margin-bottom: 0; }
	
	.parallax .accordion-item-toggle,
	.parallax .toggle-item-toggle,
	.box .accordion-item-toggle,
	.box .toggle-item-toggle { color: #555; }
	
	.parallax .accordion-item-toggle,
	.parallax .toggle-item-toggle,
	.box .accordion-item-toggle,
	.box .toggle-item-toggle { border-bottom: none; }
	
	.parallax .icon-box-4,
	.box .icon-box-4 { background-color: transparent; }
	
	.parallax .table-bordered th:first-child,
	.parallax .client-logos li,
	.box .table-bordered th:first-child,
	.box .client-logos li { border-left-color: #fff; }
	
	.parallax .client-logos li:last-child,
	.box .client-logos li:last-child { border-right-color: #fff; }
	
	.parallax .client-logos,
	.box .client-logos,
	.parallx #newsletter-subscribe-form,
	.box #newsletter-subscribe-form { margin-bottom: 0; }
	
	.parallax .headline:before,
	.parallax .headline:after,
	.box .headline:before,
	.box .headline:after { border-color: #fff; }
	
	.parallax ul.check,
	.box ul.check { margin: 30px 0 30px 30px; }
	
	.parallax ul.check li,
	.box ul.check li {
		margin-bottom: 10px;
		font-size: 18px; 
	}
	
	.parallax ul.check li:last-child,
	.box ul.check li:last-child { margin-bottom: 0; }
	
	.parallax ul.check li:before,
	.box ul.check li:before { font-size: 18px; }
	
	.box {
		position: relative;
		padding: 30px 0;
		margin: 40px 0;
		background: #4b5759 no-repeat center center;
		color: #fff;
	}
	
	.box-overlay {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-attachment: scroll;
		background-repeat: repeat;
		background-position: 0 0;
	}
	
	.box-content {
		position: relative;
		z-index: 3;
	}
	
	.box-2 {
		padding: 60px 0;
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		margin: 40px 0;
		background-color: #f3f3f3;
	}
	
	.box-2 .portfolio-strip { margin-bottom: 0; }
	
	.box-2 .headline:after { background-color: #dff5d8; }
	
	.get-in-touch-box {
		padding-top: 20px;
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		margin: 100px 0 40px 0;
		background: #f3f3f3 url(../../_content/backgrounds/1920x70.jpg) no-repeat bottom center;
	}
	
	.get-in-touch-box img {
		display: block;
		margin-top: -80px;
	}
	
	.get-in-touch-box h2 { color: #fff; }
	
	@media (min-width: 768px) and (max-width: 979px) {
			
		.get-in-touch-box img { margin-top: -25px; }
		
	}
	
	@media (max-width: 767px) {
			
		.get-in-touch-box img { margin-top: 0; }
		.get-in-touch-box h2 { color: #4b5759; }
		
	}


	




@media (max-width: 767px) { 
  #slider1_container { display: none; }   /* hide it elsewhere */
}

@media (max-width: 991px) { 
  #donate { display: none; }   /* hide it elsewhere */
}

@media (max-width: 991px) { 
  #register { display: none; }   /* hide it elsewhere */
}

@media (max-width: 767px) { 
  #bg-parallax-3 { display: none; }   /* hide it elsewhere */
}

@media (max-width: 767px) { 
  #hide4mobile { display: none; }   /* hide it elsewhere */
}

@media (max-width: 1199px) { 
  #hide4iframe { display: none; }   /* hide it elsewhere */
}

@media (min-width: 1199px) { 
  #fullscreen { display: none; }   /* hide it elsewhere */
}

@media (min-width: 767px) { 
  #mobile { display: none; }   /* hide it elsewhere */
}

@media (min-width: 767px) { 
  #mobileadd { display: none; }   /* hide it elsewhere */
}




/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:300px;
    height:300px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/preload.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-150px 0 0 -150px; /* is width and height divided by two */
}


        .navbar-wrapper {
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 51px;
        }
        .navbar-wrapper > .container {
            padding:20;
        }

        @media all and (max-width: 768px ){
            .navbar-wrapper {
                position: relative;
                top: 0px;
            }
						
        }
		
		
		
		
            <!-- Help: http://www.jssor.com/tutorial/set-bullet-navigator.html -->
                /* jssor slider bullet navigator skin 21 css */
                /*
                .jssorb21 div           (normal)
                .jssorb21 div:hover     (normal mouseover)
                .jssorb21 .av           (active)
                .jssorb21 .av:hover     (active mouseover)
                .jssorb21 .dn           (mousedown)
                */
                .jssorb21 {
                    position: absolute;
                }
                .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 19px;
                    height: 19px;
                    text-align: center;
                    line-height: 19px;
                    color: white;
                    font-size: 12px;
                    background: url(img/b21.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb21 div { background-position: -5px -5px; }
                .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
                .jssorb21 .av { background-position: -65px -5px; }
                .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }



            <!-- Help: http://www.jssor.com/tutorial/set-arrow-navigator.html -->
                /* jssor slider arrow navigator skin 21 css */
                /*
                .jssora21l                  (normal)
                .jssora21r                  (normal)
                .jssora21l:hover            (normal mouseover)
                .jssora21r:hover            (normal mouseover)
                .jssora21l.jssora21ldn      (mousedown)
                .jssora21r.jssora21rdn      (mousedown)
                */
                .jssora21l, .jssora21r {
                    display: block;
                    position: absolute;
                    /* size of arrow element */
                    width: 55px;
                    height: 55px;
                    cursor: pointer;
                    background: url(img/a21.png) center center no-repeat;
                    overflow: hidden;
                }
                .jssora21l { background-position: -3px -33px; }
                .jssora21r { background-position: -63px -33px; }
                .jssora21l:hover { background-position: -123px -33px; }
                .jssora21r:hover { background-position: -183px -33px; }
                .jssora21l.jssora21ldn { background-position: -243px -33px; }
                .jssora21r.jssora21rdn { background-position: -303px -33px; }
				
				
				
@font-face {
    font-family: 'Capture-it';
    src:url('Capture-it.ttf.woff') format('woff'),
        url('Capture-it.ttf.svg#Capture-it') format('svg'),
        url('Capture-it.ttf.eot'),
        url('Capture-it.ttf.eot?#iefix') format('embedded-opentype'); 
        font-weight: normal;
        font-style: normal;
}



h4 { 
   font-family: 'Capture-it';
}  


/*https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
.gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 70%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


div.slideshow {
  width: 100%;
  padding-left:100px;
  padding-right:100px:
  margin: auto;
  border: 100px solid #73AD21;
}