/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.btn-outline-danger.focus, .btn-outline-danger:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-danger.dropdown-toggle:focus {box-shadow: none; outline: none}

/* ==========================================================================
   custom styles
   ========================================================================== */

	body {
    font-weight: 400 !important; 
    color:#58595b;
    font-style: normal !important;
    font-family: "Libre Franklin", sans-serif !important;
    font-optical-sizing: auto !important;
    font-style: normal !important;}
	h1, h2, h3, h4, h5 {font-family: "Libre Franklin", sans-serif !important;
    font-weight: bold;
    font-style: normal;}
			.video-wrapper { margin-top:5vw; margin-bottom:5vw; background:#ec1b35; color:#fff; height:35vw}
			.video-wrapper .container, .video-wrapper .row { height:100%}
			.intro {position:relative; margin-top:100px; margin-bottom:40px;}
			.videobox {position:absolute;  left:5%; display:inline-block; top:-5vw; height:45vw;}
			.videobox img { height:100%}
			.section { padding:80px 0}
			.title-text { font-weight:400}
			.padsec { padding-left:45px; padding-right:0}
			.users { padding-left:10px}
			.users-number { font-size:3.5rem; font-weight:bold; display:block; line-height:1; color:#ec1b35}
			.users-text { font-size:1.2rem; font-weight:400}
			.verse-btn { border-radius:0; margin-top:2rem; color:#ec1b35   ;  border-color:#ec1b35  }
			.btn-white .verse-btn {color:#fff   ;  border-color:#fff}

			.verse-btn.btn-outline-danger:hover {background-color: #ec1b35;
    border-color: #ec1b35;}
		.fontred {color:#ec1b35 }
	.btn-group-lg>.btn, .btn-lg {padding: .7rem 2rem;
    font-size: 1rem; min-width:200px}
	.gallery { margin:0}
	.gallery > div { padding:0}
	.imgtext {  color:#fff; font-weight:500; font-size:1.8rem; line-height:1.1;  position:absolute; z-index:9; top: calc(50% - 32px); left:50%; transform: translate(-50%);}
	.creator-blog { color:#fff; padding:80px 60px}
	.shadow-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .8;
	background: -moz-linear-gradient(left, black 0%, black 40%, transparent 100%);  /* FF3.6-15 */
	background: -webkit-linear-gradient(left, black 0%, black 40%, transparent 100%);  /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, black 0%, black 40%, transparent 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1);  /* IE6-9 */
}
.gallery-item { cursor: pointer}
.gallery-item .svgplay { fill:#ffffff; }
.gallery-item:hover .svgplay { fill:#dc3545}
.footer { background:#797979; padding:50px 15px; color:#fff}
.footer-links { list-style:none;}
.footer-links a { color:#fff; line-height:2.4}

.input-group>.input-group-prepend:not(:first-child)>.input-group-text {border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;}
	.input-group-text {        padding: 0 .75rem;}
	.input-group-text button:focus { outline: none; box-shadow: none}
	
	.sociallinks { padding-left:0; list-style: none; margin-top:20px}
	.sociallinks li { display: inline-block; margin-right:18px}
	.sociallinks li  a { color: #bcbcbc; font-size:20px}
	.faplus { float:right;}
	.faplus  i { font-style: normal; font-size: 24px}

	#accordion h5, .menutitle { font-size:22px; font-weight:400; /*color:#ec1b35;*/ color: #949494; padding-bottom:8px; padding-top:8px; border-bottom: 1px solid #ec1b35;  }
	
	#accordion a.menutitle[aria-expanded="true"]  h5, #accordion h5:hover  {color:#ec1b35}
	
	#accordion a.menutitle[aria-expanded="false"] h5 { cursor: pointer}
	
	a.menutitle[aria-expanded="true"]  h5 .plusicon { display: none}
	a.menutitle[aria-expanded="true"]  h5 .minusicon {display:inline-block}
	
	a.menutitle[aria-expanded="false"]  h5 .plusicon {display:inline-block}
	a.menutitle[aria-expanded="false"]  h5 .minusicon { display: none}
	
	
	#accordion a {font-size:18px; font-weight:300; text-decoration: none;  color: #949494 }
	.sub-menu {padding-bottom:8px; padding-top:8px; border-bottom: 1px solid #ec1b35; margin-bottom:0}
	.ourstoryusers {position:absolute; bottom:0; width:100%; padding-right:40px}


@media screen and (max-width: 575px) {
	.intro { margin-top:0; margin-bottom:0}
	.navbar {padding: 1.5rem 1rem;}
	.video-wrapper { height: initial; margin-top:0; margin-bottom:0; padding-top:40px}
	.video-wrapper h1 { font-size:2rem}
	.videobox  { position:relative; left: initial; top:initial; height: initial; width:100%; padding-top:40px; padding-bottom:100px }
	.videobox   img { height:initial; width:100%}
	.gallery-sidetext { padding-top:80px; padding-bottom:80px}
	.users { margin-top:60px}
	.creator-blog {
    color: #fff;
    padding: 40px 15px;
}
.creator {    background-position: 80% center !important;}
.shadow-overlay {opacity: 0.6;}
.padsec {
    padding-left: 15px;
    padding-right: 15px;
}
	.footer-links { padding-left:0}
			.footer-item-1 { clear:both}
			.footer-item-1 img  { float: left; margin-bottom:40px !important; }
			.footer-item-1 p { float: right; margin-top:10px}
			.footer-item-2 { margin-bottom:40px;}
			.footer-item-3 { margin-bottom:40px}
			.ourstoryusers {position: static; bottom: initial; width:100%; padding-right: 0; margin-top: 3rem;}
			.ourstoryusers .users {    margin-top: 0; margin-bottom:2rem}
	
	}



/* ==========================================================================
   Header
   ========================================================================== */


	html { width:100%}
		#accordion .sub-menu a:hover { color:#ec1b35}
		.gallery-item { overflow: hidden; }
		.gallery-item img {transition:all 0.5s ease}
		.gallery-item:hover img { transform: scale(1.05)}
		.navbar.fixed-top { background:#fff;  }
		
		header ::-webkit-scrollbar {
  display: none;
}
		
	
			.overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgba(239,239,240,0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}



.overlay .closebtn {
	float:right; padding:10px; height:40px; width:40px; cursor:pointer; position: relative;
    top: 10px;
    right: -7px
  
}
@media screen and (max-width: 575px) {
.xsmobile { padding-top:15px}
.top-banner {     padding: 70px 0 40px !important;}
.top-banner-with-img {padding: 70px 0 160px !important;}
.video-wrapper { padding-top:70px !important}
.tagline {
    font-size: 2rem !important;
}
.mrbxs { margin-bottom: 1rem !important}
.xsbottom { margin-bottom:2.5rem}
.taglinexs { margin-bottom:2rem}
.imgtext svg { width:50px !important}
.joshstudiohead { padding:15px 15px 0 15px }

}

@media screen and (max-height: 450px) {
 	
  .overlay .closebtn {
   
  }
}




		
		.white-popup {
  position: relative;
  background: #FFF;
  padding: 0;
  width: auto;
  max-width: 1000px;
  margin: 20px auto;
}

.mfp-close-btn-in .mfp-close {
    color: #da0000;
    font-size: 40px;
}

video { outline: none !important}
			/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.65s ease-out;
  -moz-transition: all 0.65s ease-out;
  transition: all 0.65s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8; 
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.65s ease-out;
  -moz-transition: all 0.65s ease-out;
  transition: all 0.65s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Filter
   ========================================================================== */
   .filter { list-style:none; margin:auto; display:block; text-align:center;}
   .filter li  { display:inline-block;  margin-bottom:40px; margin-top:40px;}
   .filter li a { padding:8px 20px; margin-right: 10px;}
   .project-item {width:100px; height:100px; margin-right:10px; margin-bottom:4px; text-align:center}
	.project-item h1 { margin-top:20px;     font-size: 14px;}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print { 
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}