/* Mautic Dynamic Web Content (DWC) only styles 
 * for multi-site / system usage */

/* BASE */
[data-slot="dwc"]
{
  /* GLOBAL: 
   * either of these selectors will target all dwc 
   * Add an ID to the slot for more custom targeting
   * OR
   * Target the slot name you give it specifically:
   *    [data-param-slot-name="yourSlotName"] {}
  */ 
  clear: both;
  display: block;
  font-size: 14px;
  font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
  margin: 1.5em auto;
  /*min-height: 15em;*/
  max-width: 100%;
  position: relative;
}
[data-slot="dwc"]:empty,
[data-slot="dwc"]:blank {display:none;height:0;margin:0;padding:0;width:0;}

	@media only screen and (min-width: 992px) 
	{ 
		[data-slot="dwc"] { max-width: 80%; }
	}
[data-slot="dwc"] abbr,
[data-slot="dwc"] abbr[style]{ border-bottom-width:0px!important;border-bottom-color:transparent!important;border-bottom:none!important;box-sizing: border-box;text-decoration:none;vertical-align:baseline; }
[data-slot="dwc"] > #dwc_wrapper,
[data-slot="dwc"] > #dwc_wrapper ~ * { margin:0 auto; max-width:100%; }

[data-slot="dwc"] a {font-weight:300!important;letter-spacing:0;text-transform:unset;}
	[data-slot="dwc"] a:link, [data-slot="dwc"] a:visited, [data-slot="dwc"] a:hover, [data-slot="dwc"] a:focus, [data-slot="dwc"] a:active {font-weight:300!important;}

/* BIG ICONS:
 * For enlarged FontAwesome icon, direct SVG embeds */
[data-slot="dwc"] > #dwc_wrapper > #icon_ribbon,
[data-slot="dwc"] > #dwc_wrapper ~ #icon_ribbon
{
	/*clip-path: polygon(0px 0px, 75% 0px, 90% 25%, 85% 59%, 100% 100%, 0px 100%); */
	float: left;
	margin: -1.5em 0 0 -1.5em; 
	max-height: 15em;
	max-width: 15em; 
	min-width: 38%;
	position: relative;
	shape-outside: polygon(0px 0px, 75% 0px, 90% 25%, 85% 59%, 100% 100%, 0px 100%);
	width: 62%;
}
[data-slot="dwc"] > #dwc_wrapper > #icon_checkmark,
[data-slot="dwc"] > #dwc_wrapper ~ * > #icon_checkmark,
[data-slot="dwc"] > #dwc_wrapper > * > #icon_checkmark/* After updated WYSIWIG in Jan 2021, this is the correct one, the other two are legacy for the Advantage campaign, based on the code the WYSIWYG writes. */
{
	float: left;
	margin: 0 1.5em 0 -1.5em; 
	max-height: 9em;
	max-width: 6.75em; 
	position: relative;
	shape-outside: polygon(0% 0%, 100% 0%,100% 15%, 28% 100%, 0% 100%);
	width: 62%;
}
	[data-slot="dwc"] > #dwc_wrapper > #icon_checkmark[style] > img, /* legacy, Advantage Campaign */ 
	[data-slot="dwc"] #icon_checkmark img /*legacy, Advantage Campaign */
	{
		margin: -3em 0 0;
		max-height: 15em;
		max-width: 12em;
	}
	
	@media only screen and (min-width: 992px) 
	{ 
		[data-slot="dwc"] > #dwc_wrapper > #icon_checkmark,/* legacy, Advantage Campaign */ 
		[data-slot="dwc"] #icon_checkmark,/* legacy, Advantage Campaign */ 
		[data-slot="dwc"] > #dwc_wrapper > * > #icon_checkmark { margin:0;max-height: 15em; max-width: 15em;  }
	}


/* Custom DWC campaign slots */
[id*="-advantage"] #dwc_wrapper 
{
	clear:both;
	opacity:0;
	position:relative; 
}

/* ANIMATION KEYFRAMES */
@keyframes slide--up {
	0%    {opacity: 0; transform: translateY(3rem); }
	100%  {opacity: 1; transform: translateY(0); }
}
/* Animations */
.slideUp,
	[fr-original-class*="slideUp"],
	[data-slot="dwc"] > #dwc_wrapper,
	[id*="-advantage"] > #dwc_wrapper { animation: slide--up 0.5s 0.5s forwards ease-out; opacity: 0; }
.slideUp2,
	[fr-original-class*="slideUp2"],
	[data-slot="dwc"] > #dwc_wrapper > #CTA,
		[data-slot="dwc"] > #dwc_wrapper ~ #CTA,
	[id*="-advantage"] > #dwc_wrapper > #CTA { animation: slide--up 0.5s 2.5s ease-out forwards; opacity: 0; }


/* COMMON ELEMENTS always needed - - - - - - - - - - - - - - - - - - - - */
[data-slot="dwc"] > #dwc_wrapper > #headline[style] 
{
	box-sizing: border-box;
	color:#000;
	font-size:1.4em!important;
	font-family:Oswald,sans-serif!important;
	font-weight:400;
	line-height: 1!important;
}
	@media only screen and (min-width: 992px) 
	{
		[data-slot="dwc"] > #dwc_wrapper > #headline[style] { font-size:2.75rem!important; }
	}

[data-slot="dwc"] > #dwc_wrapper > p [style]{ line-height:1.3em!important;margin: 0;padding: 0.75rem 0; }
	@media only screen and (min-width: 992px) 
	{
		[data-slot="dwc"] > #dwc_wrapper > p [style] { line-height: 1.5em!important;}
	}

[data-slot="dwc"] > #dwc_wrapper > #CTA[style],
[data-slot="dwc"] > #dwc_wrapper ~ #CTA[style] /* legacy, Advantage Campaign */ 
{
	box-sizing: border-box;
	color: rgb(4, 106, 56);
	display: flex;
	flex-direction: row;
	font-size: 1.1em!important;
	font-family: Oswald, source-sans-pro, sans-serif!important;
	font-weight: 300;
	justify-content: space-between;
	line-height: 1.5em!important;
	margin: 0;
	text-align: center;
	
}
	@media only screen and (min-width: 992px) 
	{ 
		[data-slot="dwc"] > #dwc_wrapper > #CTA[style],
		[data-slot="dwc"] > #dwc_wrapper ~ #CTA[style] { font-size:1.3em!important;  }
	}

[data-slot="dwc"] > #dwc_wrapper > #CTA > a[style],
[data-slot="dwc"] > #dwc_wrapper ~ #CTA > a[style]
{

	border-radius:0.75em;
	box-sizing: border-box;
	color:#005eb8!important;
	display:inline-block;
	flex: 1 1 auto;
	font-family:Oswald,sans-serif;
	max-width: 50%;
    padding: 0;
}
[data-slot="dwc"] > #dwc_wrapper > #CTA > a[style]:hover,
[data-slot="dwc"] > #dwc_wrapper > #CTA > a[style]:focus,
[data-slot="dwc"] > #dwc_wrapper ~ #CTA > a[style]:hover,
[data-slot="dwc"] > #dwc_wrapper ~ #CTA > a[style]:focus { color:#041e42!important; text-decoration:none!important; }

[data-slot="dwc"] > #dwc_wrapper > #CTA > a > img,
[data-slot="dwc"] > #dwc_wrapper ~ #CTA > a > img
{
	border: 0px;
	box-sizing: border-box;
	display: inline;
    font-size: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    margin: 0;
	max-height: 1em;
    padding: 0;
    vertical-align: text-bottom;
    width: 1em;
}

	
	@media only screen and (min-width: 992px) 
	{ 
		[data-slot="dwc"] > #dwc_wrapper > #CTA,
		[data-slot="dwc"] > #dwc_wrapper ~ #CTA{ text-align: left; }
	}

/* CUSTOM PER DWC BELOW */

/* 2020FA Advancement UG Campaign */
[id*="-advantage"] { max-width: 36em; }
[id*="-advantage"] > #dwc_wrapper
{
	background-image: linear-gradient(to right,transparent 0%, #FFF 72%);
	border-radius: 1.5em;
	box-shadow: 0.1875em 0 0 rgba(0,94,184,0.1);
	box-sizing: border-box;
	display: block;
	margin: 1.5rem auto 3rem;
	padding: 0.75em 1.5em 0.75em 0;
	position: relative;
}
/*#dwc_admissions-advantage > #dwc_wrapper > #iconLeft,
/*[id*="-advantage"] > #dwc_wrapper > [fr-original-class*="float--left"],
[id*="-advantage"] > #dwc_wrapper > #icon_ribbon 
{
	/*clip-path: polygon(0px 0px, 75% 0px, 90% 25%, 85% 59%, 100% 100%, 0px 100%); * /
	float: left;
	margin: -1.5em 0 0 -1.5em; 
	shape-outside: polygon(0px 0px, 75% 0px, 90% 25%, 85% 59%, 100% 100%, 0px 100%);
	max-width: 15em; 
	min-width: 38%;
	position: relative;
	width: 62%;
}
*/
[id*="-advantage"] > #dwc_wrapper > #CTA
{
	box-sizing: border-box;
	color: rgb(4, 106, 56);
	font-size: 1.1em;
	font-family: Oswald, sans-serif;
	font-weight: 300;
	line-height: 1.5em;
	margin: 0;
	text-align: center;
	
}
[id*="-advantage"] > #dwc_wrapper > #CTA > a[style]
{
	
	background-color: rgb(255, 199, 44)!important;
	border-radius:0.75em;
	box-sizing: border-box;
	color:#041e42!important;
	display:inline-block;
	font-family:Oswald,sans-serif;
    padding: 0.1875em 0.75em 0.1875em;
    text-decoration: none;
}
[id*="-advantage"] > #dwc_wrapper > #CTA > a:hover { color:#000;text-decoration:underline;}
[id*="-advantage"] > #dwc_wrapper > #CTA > a > img
{
	
	border: 0px;
	box-sizing: border-box;
	display: inline;
    font-size: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 1em;
}
	
	@media only screen and (min-width: 992px) 
	{ 
		[id*="-advantage"] > #dwc_wrapper > #CTA { text-align: left; }
	}