@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital@0;1&family=Source+Sans+3:wght@300&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 300;
  kerning: normal;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

strong {
  color: var(--accent);
  font-weight: inherit;
}

html {
	--primary: rgb(180, 39, 45);
	--secondary: rgb(180, 39, 45);
	--accent: rgb(180, 39, 45);
	--text: rgb(71, 71, 71);
	--reverse: rgb(255, 255, 255);
	--animate-duration: 2s;

}






/* LINKS CSS */

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
  transition: 1s ease;
}

a:hover
 {
  cursor:pointer !important;
    transition: 0.5s ease;

}

h1, h2, h3, h4, h5 { font-family: 'Source Serif 4', serif; font-weight:300; font-style: normal; color: var(--accent); line-height: 135%; }


p a:link, p a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
p a:hover {color:  var(--accent); text-decoration: underline;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

.logo a:link, .logo a:visited {color: var(--reverse); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
.logo a:hover {color: var(--accent); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

.bodoni { font-family: 'Source Serif 4', serif; font-weight:300;}

a:link.bodoni, a:visited.bodoni  {color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent);}
a:hover.bodoni  {color: var(--text); text-decoration: none;  border-bottom: 1px solid var(--text);}

a:link.source, a:visited.source  {color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent);}
a:hover.source  {color: var(--text); text-decoration: none;  border-bottom: 1px solid var(--text);}

h3 a:link, h3 a:visited, h3.postlist a:link, h3.postlist a:visited {color: var(--accent) !important; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h3 a:hover{color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

h5 a:link, h5 a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h5 a:hover{color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

a:link .portal h5, a:visited .portal h5 {color: var(--accent) ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; }
a:hover .portal h5{color: var(--reverse); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; text-shadow: 0 0 8px #000;}

.footer a:link, .footer a:visited {color:var(--reverse); transition: 1s ease; outline: 0; font-weight: inherit; text-decoration: underline; }
.footer a:hover, .footer a:active {color:var(--accent);  transition: 0.5s ease; text-decoration: none; outline: 0; font-weight: inherit; }

h2 a:link, h2 a:visited {font-weight: inherit; 	font-family: 'Source Serif 4', serif; color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;}
h2 a:hover, h2 a:active {font-weight: inherit;  font-family: 'Source Serif 4', serif; color: var(--text); text-decoration: none;  transition: 1s ease; }

.blue h2 a:link, .blue h2 a:visited {font-weight: inherit; color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;}
.blue h2 a:hover, .blue h2 a:active {font-weight: inherit; color: #CC285F; text-decoration: none;  transition: 1s ease; outline: 0;}


/* TYPOGRAPHY CSS */

p, ul > li, ol > li, i {
  font-size: calc(16px + 0.25vw);
  margin: 0 0 calc(10px + 0.5vw) 0;
  color: var(--text);
  padding:0;
  line-height:135%;
}

ul.advantage > li {  margin-bottom : 0 !important; margin-top: 0;}

article ul {padding-left:0; margin-left:10px;}
article ul li {list-style-position: outside; padding-left:15px; list-style-type: '–';  }
article ul li::marker { color:var(--accent);}


.contact p {
	margin-bottom: 0;
	line-height:100%;
}

blockquote p {
	color: var(--accent);
	font-family: 'Source Serif 4', serif;
	font-weight:300;
	font-style: italic;
	font-size: calc(18px + .25vw);
	width:100%;
	max-width: 700px;
	text-align: center;
	margin: auto;
	padding: 20px 0;
}

ul, ol {margin-top:30px;}

p:last-of-type {
	margin-bottom: 0;
}



p.text-stats {
	text-align: center;
	padding: 0 10px;
	font-family: 'Source Serif 4', serif;
	color:var(--accent);
	}

.blue p {
	color: var(--reverse);
}

.background-image p {
  font-size: calc(20px + 0.25vw);
  margin: 0 0 15px 0;
  color: var(--reverse);
  padding:0;
}

.valuecopy p { font-size: calc(14px + .25vw); transition: all 3s ease;}
.valuecopy:hover > p{color:var(--accent);transition: all 1s ease;}


.footer p {color:var(--reverse); font-size: calc(16px + 0.1vw);}
.footer ul{padding: 0;margin: 0;}
.footer li{
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: large;
}


h1 {
	font-size: calc(32px + .25vw);
	text-align: left;
	margin-bottom: 20px;
	line-height:120%;
}

.banner h1 {
	font-size: calc(22px + 1vw);
	font-style: italic;
	color: var(--reverse);
	margin-bottom: 30px;
	margin-top: 50px;
	line-height:130%;
  white-space:unset;
  text-wrap:balance;
}



h2 {
	font-size: calc(24px + .25vw);
}

article h2 {font-size: calc(20px + .25vw); line-height:125%; margin-bottom:calc(10px + 0.5vw);}

h1 ~ h3:first-of-type {margin-top:-20px;}

.blue h2 {color: var(--reverse);}

h3 {
	font-size: calc(20px + .25vw);
	padding-top: 30px;
  color: var(--text);
  margin-bottom:calc(10px + 0.5vw);
}

h3.postlist {color:var(--accent); transition: 1s ease;  margin-bottom:calc(10px + 0.1vw); }
h3.postlist:hover {color:var(--text); transition: 1s ease;  margin-bottom:calc(10px + 0.1vw);}

.footer h3 {color:var(--reverse); padding-bottom: 15px;  margin-bottom:calc(10px + 0.1vw);}


h4 {
	font-size: calc(18px + 0.25vw);
	padding-top:20px;
	line-height: 125%;
 }

.expert {
	padding-top: 0;
}


h5 {
	font-size: calc(18px + .25vw);
	transition: all 1s ease;
	text-transform: capitalize;
}

 h5.accordion-header:hover {
	color: #cc285F;
	transition: all 0.5s ease;
}

/* CONTAINERS CSS */


.banner {min-height: calc(450px + 20vw); background-color:var(--text);}
.teambanner {height:75px;}

.background-image, .portal {
  background-repeat: no-repeat;
  background-size: cover;
  background-position:right top;
}

.none {box-shadow:none;}

.home {background-image: url(/assets/images/index.jpg);}
.nicole {background-image:url(/assets/images/team.jpg);}
.tmp {background-image:url(/assets/images/background3.jpg);}
.cookies {background-image:url(/assets/images/cookies.jpg);}
.security {background-image:url(/assets/images/cookies.jpg);}
.legal {background-image:url(/assets/images/legal.jpg);}
.resources {background-image:url(/assets/images/resources.jpg);}
.categorybanner {background-image:url(/assets/images/categorybanner.jpg);}



.container-fluid {
	padding: calc(20px + 3vw) calc(20px + 3vw);
	margin:0;
}

.wrapper {
  width:100%;
  max-width:  calc(1400px + 3vw);
  margin: 0 auto;
}

.footer {
	background-color:var(--text);
	color:var(--reverse) !important;
	padding: calc(15px + 2.5vw) 30px;
	border-bottom: calc(10px + 1vw) solid var(--accent);
	}

.linkedin {padding:30px; padding-bottom:0;}
.links {padding-right: 50px;}

.columns {
  		margin-top: 40px;
  		margin-bottom: 40px;
  	  -moz-columns: 300px 3;
    	   columns: 300px 3;
   -moz-column-gap: 50px;
        column-gap: 50px;
    padding: 0;
}

.blue {background-color: #225780; color:var(--reverse);}
.grey {background-color: #252933;}
.palegrey, .card-body {background-color: rgba(230,230,235,.75);}
.pale {background-color: rgba(71,71,71,.03);}


.partnerlogo {
	width:auto;
	max-height: 75px;
	margin-top: 30px;
}

.partner {
	padding-right: 40px;
}


















/* OUTER MENU */

.logo {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 100;
  height: 55px;
  width: auto;
  line-height: calc(37px + .25vw);
  color: #fff;
  font-weight: 200;
  font-size: calc(20px + .5vw);
}


.outer-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  box-sizing: border-box;
  	  transition: all 2s ease;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 30px;
  right: calc(15px + 1vw);
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:hover + .hamburger > div {
	background-color:var(--reverse); /* Hamburger hover color */
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.5s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 30px;
  right: calc(15px + 1vw);
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 0.5em 1em;
  background: var(--accent);
  cursor: pointer;
  transition: box-shadow 0.5s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--reverse);  /* Hamburger main color */
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.5s ease;
}
.outer-menu .hamburger > div:after {
  top: 12.5px;
}

/*
.outer-menu {
	  transition: opacity 2s ease;

}
*/

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 400vw;
  height: 400vw;
  color: #fff;
  background: rgba(71,71,71, 0.9);
  border-radius: 50%;
  transition: all 1.25s ease-in-out;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 2s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 0.5em;
  font-size: calc(20px + 0.75vw);
  display: block;
  color:var(--reverse);
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 1s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
  color: var(--reverse);
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 1s ease;
}








/* GLOBAL CSS */

.check {border:1px solid pink;}

.copyright {
	width:100%;
	margin-top: 60px;
	border-top:1px solid #fff;
	padding-top: 30px;
	text-align: center;

}

.copyright p {font-size: 90%;}

.contacts img {width:100%; max-width: calc(200px + 3vw); margin-bottom: 30px;}

.services img { max-width:100%; padding:0; margin:0; margin-bottom: 20px;}

.linkedinpost p {font-size: 90%; }

.reach img {text-align: center;}

.linkedin {
	border:1px solid none;
	border-radius: 10px;
	background-color: #13151a;
	}

.linkedinlogo{
	margin-bottom: 30px;
	width:calc(100px + 2vw);
	}

.linkedinimage {
	margin-bottom: 20px;
	border-radius:7px;
	border:1px solid #2badd8;
	transition: 1s ease;
	overflow: hidden
	}



.linkedinimage img {
	width:100%;
	height: calc(175px + 2vw);
	object-fit:cover;

		}

.linkedinimage:hover {
	border:1px solid #CC285F;
	transition: 1s ease;
	}


i.fal, i.fas, i.fab, i.fa-light {
	padding-right:10px;
}

.footer i {
	color:#fff;
	padding-right:10px;
}

.studyrow {max-width: 100vw !important;}

hr, hr.top {
	border-top: 2px solid var(--accent);
	margin-bottom: 60px;
	width:60px;
	}

hr.bottom {
	border-top: 2px solid var(--accent);
	margin-top: 50px;
	width:60px;
	}




#accordion-container hr.long  {
	height: 0;
	margin-top: 2em;
	margin-bottom: 1em;
	border: 0;
	border-top: 2px solid #cc285f;
	width:100%;
}



label {display: none !important;}
a {outline: none;}

/* MEDIA QUERIES CSS */


@media only screen and (max-width: 1200px) {
	.carousel-control-prev, .carousel-control-next { display:none;}
}

@media only screen and (min-width: 1200px) {
	.fixed {background-attachment:fixed;}
}


:root {
  --animate-delay: 0.5s;
}

.zero {padding: 0 0 0 0;}

.portal {width:100%; height: calc(150px + 4vw); border-radius:  5px; margin: 15px 0;}
.portal + p {  font-size: calc(16px + 0.125vw); padding: 0 15px;}
.vcenter h5  {text-transform:uppercase; text-align:center; color: #fff; font-size: calc(20px + 0.5vw);}
a:link .portal, a:visited .portal  {box-shadow: rgba(6, 15, 22, 0.65) 1000px 1000px 1000px 1000px inset; transition: 1s ease }
a:hover .portal {box-shadow: rgba(6, 15, 22, 0) 1000px 1000px 1000px 1000px inset;transition: 2s ease}

img.footerlogo {width: 100%; max-width: 350px; margin-bottom:50px; text-align:center; }
img.reach  {width:100%; max-width:1400px; margin: auto; text-align: center; padding: 20px calc(1px + 5vw);}

img.meyerStats { text-align:center; width:100%; max-width: 200px; padding: 20px; margin: 20px auto 0 auto;}
.meyerStats {text-align:center;   white-space:unset; text-wrap:balance;}
.speech h1 img { width: calc(30px + 1.25vw);}
.speech h1 {text-align: right;}


/* When the browser is at least 600px and above */
@media screen and (min-width: 768px) {
  .desktop {display: none;}
  .mobile {display: inline-block;  }
}
/* When the browser is at least 599px and below */

@media screen and (max-width: 767px) {
  .desktop {display: inline-block;}
  .mobile {display: none; }
}


/* CATEGORIES */


.categories {
  font-size: calc(16px + .25vw);
padding:0;
}



#global .global a:link, #global .global a:visited {
  color: var(--text); }

#articles .articles a:link, #articles .articles a:visited {
  color: var(--text); }

#downloads .downloads a:link, #downloads .downloads a:visited {
  color: var(--text);}

#video .video a:link, #video .video a:visited {
  color: var(--text); }

/* Categories CSS */
  .categories a:link, .categories a:visited, .categories i {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background-color: transparent;
    color:  var(--text);
    text-decoration: none; }

  .categories a:hover {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  color:  var(--accent) !important;
  text-decoration: none !important; }

.categories a:hover i {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  color:  var(--accent)!important;
  text-decoration: none !important; }

#resources .global i {color:  var(--accent); }
    #video .video i {color:  var(--accent); }
#downloads .downloads i, #downloads .downloads > a {color: var(--accent); }
 #articles .articles i {color:  var(--accent); }

/* Icon images on blog list CSS */
div.icon {
  margin: auto;
  width: 50px;
  height: 50px;
  background-image: url(/images/icon.svg);
  background-repeat: no-repeat;
  background-position: center center; }

div.downloads .icon { background-image: url(/images/downloads.png); }
div.video .icon { background-image: url(/images/video.png); }
div.articles .icon { background-image: url(/images/articles.png); }

.imageshadow1 {
       box-shadow: 20px -20px 0px #eee;
}

.imageshadow {
       box-shadow: -20px -20px 0px #eee;
}