/*
Theme Name: Avada WAR 2019
Description: WAR child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
WAR Black: #1a131b
*/


/* CUSTOM CSS */
:root {  
	--light-gray: #a1a1a4;
	--light-gray-on-white: #666666;
	--war-white: #ffffff;
	--war-black: #1a131b;
	--war-red: #c7061b;
	--war-orange: #eb8736;
	
	/* case studies */
	--war-caseLeftPad: 90px;
}
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
	/* normalize sans-serif fonts */
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

/*     max-width: 1440px; */
    margin: 0 auto;
}

body a {
	/*color: rgb(237, 75, 31)!important;*/
}
body a.war-white-background {
	/*color: rgb(237, 75, 31)!important;*/
}

@media only screen and (max-device-width: 640px) {
	#content {
		margin-bottom: 0!important;
		padding-bottom: 50!important;
	}
}

#main, 
#wrapper, 
.fusion-separator .icon-wrapper 
{
	background-color: var(--war-black)!important;
}

#main > .fusion-row {
	/* trick to get background color of rows to go to full screen width */
	max-width: unset!important;
}

#main, 
.fusion-footer-copyright-area, 
.fusion-footer-widget-area, 
.fusion-page-title-bar, 
.fusion-secondary-header, 
.fusion-sliding-bar-position-bottom .fusion-sliding-bar, 
.fusion-sliding-bar-position-top .fusion-sliding-bar, 
.header-v4 #small-nav, 
.header-v5 #small-nav, 
.sticky-header .sticky-shadow, 
.tfs-slider .slide-content-container {
/*  Over riding this wide-spread setting from main theme 
	but not really sure it's wise.
	There isn't an obvious setting for it in the theme settings. */
    /* padding-left: 30px; */
    /* padding-right: 30px; */
    padding-left: 0!important;
    padding-right: 0!important;
}


.fusion-logo a:not(.war-logo-link),
.fusion-logo-link:not(.war-logo-link) {
	display: none!important;
	/* hide Avada menu logo so we can replace it with svg in functions.php */
}
.fusion-logo a.war-logo-link,
.fusion-logo-link.war-logo-link {
	display: block;
}

@media only screen and (max-width: 800px) {
	.war-logo-svg {
		width: 60px;
	}
}
.war-logo-svg {
	fill: var(--war-white);
}
@media only screen and (min-width: 800px) {
	.war-logo-svg {
		width: 100px;
	}
}

.war-white-background .war-logo-svg:not(.force_white) {
	fill: var(--war-black);
}
.war-black-background .war-logo-svg:not(.force_black) {
	fill: var(--war-white);
}
.war-white-background .nav_text_color_white .war-logo-svg:not(.force_white) {
	fill: var(--war-black);
}
.war-black-background .nav_text_color_black .war-logo-svg:not(.force_black) {
	fill: var(--war-white);
}

.war-white-background .nav_text_color_white .war-logo-svg.force_white,
.war-white-background .war-logo-svg.force_white,
.war-logo-svg.force_white {
	fill: var(--war-white)!important;
}

.war-logo-svg.force_black,
.war-black-background .war-logo-svg.force_black, 
.war-black-background .nav_text_color_black .war-logo-svg.force_black
{
	fill: var(--war-black)!important;
}

@media only screen and (max-width: 800px) {
	.war-white-background.nav_text_color_white .war-logo-svg:not(.force_black) {
		fill: var(--war-white);
	}
	.nav_text_color_white .war-logo-svg:not(.force_black) {
		fill: var(--war-white);
	}

  .war-logo-svg.force_black,
  .nav_text_color_white .war-logo-svg.force_black, 
  .war-white-background.nav_text_color_white .war-logo-svg.force_black
  {
    fill: var(--war-black)!important;
  }
  
}

@media only screen and (max-width: 800px) {
	/* white on portfolio pages in mobile */
	.war-white-background.single-avada_portfolio .war-logo-svg,
	.war-white-background .fusion-is-sticky .war-logo-svg
	{
		fill: var(--war-white);
	}
}

.width-100 .fusion-fullwidth,
.width-100 .nonhundred-percent-fullwidth {
/* 	The theme started applying these margins and I don't know why, but override. */
/*  margin-left: -17.567567567568%; */
/*  margin-right: -17.567567567568%; */
	margin-left: 0!important;
	margin-right: 0!important;
}

#main {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}
/* 
.page_contact #main
{
    padding-top: 120px!important;
}
 */
@media only screen and (min-width: 800px) {
	.page_contact #main
	{
		padding-top: 120px!important;
	}
}
    
@media only screen and (min-width: 800px) {
	.unpadded,
	.full-width-bleed {
		margin-top: -120px!important;
		padding-left: 0!important;
		padding-right: 0!important;
	}
}

.war-section-padded,
.war-padded-container,
.war-padded-section
 {
	/* includes Challenge section, possible others */
	padding-left: 6.5%!important;
	padding-right: 6.5%!important;
}

.hell-bent-text {
	background: -webkit-linear-gradient(70deg, var(--war-red), var(--war-orange) 75%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* HIDE SCROLLBAR */


@media only screen and (max-width: 1px) {
	/* chrome */
	html {
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
	}
	::-webkit-scrollbar {
		width: 0px;  /* remove scrollbar space */
		background: transparent;  /* optional: just make scrollbar invisible */
	}
	/* optional: show position indicator in red */
	::-webkit-scrollbar-thumb {
		background: #FF0000;
	}
	html, body {
		background-color: var(--war-black); /* #1a131b; */
	/*   	-webkit-overflow-scrolling: touch; */
	}
	html.war-white-background,
	body.war-white-background,
	html.page_company,
	body.page_company {
		background-color: #fff;
	}
	body.single-avada_portfolio #main,
	body.parent_work #main {
		background-color: var(--war-black)!important;/* ;#1a131b */
	}
}


/* BREAKPOINT GUIDELINES */
/* ========================================================================= */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
	body {
		font-size: 11px!important;
	}
}

/* WAR Custom */
@media only screen and (min-width: 768px) and (max-width: 860px) {
	body {
		font-size: 11px!important;
	}
}

/* WAR Custom */
@media only screen and (min-width: 860px) and (max-width: 1024px) {
	body {
		font-size: 12px!important;
	}
}

/* WAR Custom */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
	body {
		font-size: 14px!important;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
	body {
		font-size: 15px!important;
	}
}

/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
	body {
		font-size: 16px!important;
	}
}

/* Extra large devices (large laptops and desktops, 1692px and up) */
@media only screen and (min-width: 16920px) {

}




/* GENERAL */
/* ========================================================================= */
.hidden {
    display: none!important;
    visibility: hidden;
    opacity: 0;
}
.war-spacer {
    opacity: 0;
    text-indent: -9999;
    font-size: 0px;
    overflow: hidden;
}
.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.fusion-text strong,
.fusion-text b {
    font-weight: 400;
    font-family: "PlexesBlackPro";
}
.nobr {
    white-space: nowrap;
}
/* .fusion-layout-column,  */
.white {
    color: #fff;
}
.black {
    color: var(--war-black); /* #1a131b; */
}

.post-password-required:not(._2022) {
	margin-top: 50px;
	padding: 6.5%;
}

@media only screen and (min-width: 800px) {
	.post-content p {
		margin-bottom: calc( 10px + .25vw );
	}
}
@media only screen and (min-width: 1024px) {
	.post-content p {
		margin-bottom: calc( 10px + 1.5vw );
	}
}
@media only screen and (min-width: 1440px) {
	.post-content p {
	    margin-bottom: 31.5px;
	}
}

/* HEADER */
/* ========================================================================= */
.fusion-header,
header.fusion-header-wrapper {
	background-color: var(--war-black); /* #1a131b; */
}
header.fusion-header-wrapper/*,
body.home header.fusion-header-wrapper,
body.page_work header.fusion-header-wrapper,
body.parent_home header.fusion-header-wrapper*/ {
	/* not sure there's anywhere it isn't transparent */
	background-color: transparent; /* to reveal video */
}


.home .fusion-header,
.parent_home .fusion-header {
    background-color: transparent!important; /* to reveal video */
}

@media only screen and (max-width: 800px) {
	.fusion-header-wrapper {
		position: absolute;
		z-index: 10000;
		left: 0;
		right: 0;
	}
}
@media only screen and (min-width: 800px) {
	.fusion-header {
		padding-left: 0;
		padding-right: 0;
	}
}
@media only screen and (max-width: 800px) {
	.fusion-header-wrapper .fusion-header, .fusion-header-wrapper .fusion-secondary-main-menu {
		background-color: transparent!important;
	}
}
@media only screen and (max-width: 800px) {
	.fusion-header-wrapper .fusion-header, .fusion-header-wrapper .fusion-secondary-main-menu {
		position: absolute;
		width: 100%;
	}
}

/* 404 */
.page_ .fusion-header-wrapper {
    position: absolute;
    width: 100%;
}
.page_ .fusion-header {
	background-color: transparent!important;
}
#post-404page {
	text-align: center;
}
@media only screen and (min-width: 800px) {
	.img-404 {
	height: 100vh;
	max-width: unset;
	width: auto;
}}
@media only screen and (max-width: 800px) {
	.img-404 {
		width: 100%;
		max-width: 100vw;
		height: auto;
		margin-top: 50px;
	}
}

.diagonal-stripes {
	background-color: #ddd;
	background-image: -o-repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(255,255,255,2) 9px, rgba(255,255,255,1) 16px);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(255,255,255,2) 9px, rgba(255,255,255,1) 16px);
}

.fusion-video, 
.fusion-vimeo
{
	/* for some reason the theme wants to set max width/height to 640/480 */
	max-height: initial!important;
	max-width: initial!important;
}




/* MISC */    
/* ========================================================================= */

@media only screen and (min-width: 800px) {
	.mobile-only {
		display: none!important;
	}
}
@media only screen and (max-width: 800px) {
	.desktop-only {
		display: none!important;
	}
}

.grecaptcha-badge {
  display: none;
}