@charset "utf-8";
@font-face {
        font-family: "seaweed";
        src: url("seaweed-script.ttf");
}

@font-face {
        font-family: "brush";
        src: url("brush-regular.ttf");
}

@font-face {
        font-family: "gladifilthefte";
        src: url("../images/fonts/Gladifilthefte.ttf");
}

@font-face {
        font-family: "ubuntubold";
        src: url("../images/fonts/ubuntubold.ttf");
}

*.mobilered {
    background:  red;
}

*.topleft {
    top:  5%;
    left:  5%;
}

*.opaque {
    opacity:  .75;
}
*.opaque2 {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */

}

*.opaque3 {
  background: #000000;
  filter: alpha(opacity=80);
  /* IE */
  -moz-opacity: 0.8;
  /* Mozilla */
  opacity: 0.8;
  /* CSS3 */

}

*.variablefont {
    font-size:  10em;
}

*.cursive {
    font-family: "seaweed";
}

*.cursive2 {
    font-family: "brush";
}

*.headerfont {
    font-family: "gladifilthefte";
}

*.boldbold {
    font-family: "ubuntubold";
}

body, html {
  height: 100%;
}
* {
  box-sizing: border-box;
}
body, div, p, a {
  margin: 0;
	padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color:  #FFFFFF;
}

*.indent {
	text-indent: 5%;
}
*.graybg {
	background-color: #4D5759;
}

*.lightgraybg {
	background-color: #F1F1F1;
}

*.lightgreenbg {
    background-color:  #55F73C;
}

*.greenbg {
    background-color:  #006120;
}

*.yellowbg {
    background-color:  #FFFF00;
}

*.darkgreentext {
    color:  #003F07;
}

*.darkgreenbg {
    background-color:  #003F07;
}

*.lightgreentext {
    color:  #55F73C;
}

*.orangebg {
	background-color: #EC7625;
}

*.orangegradient {
 background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 21%, rgba(255,244,198,1) 52%, rgba(180,100,0,1) 100%); 
}

*.absolute {
	position: absolute;
}



*.bottomleft {
	position: absolute;
	left:5px;
	bottom:5px;
}

*.pointer {
    cursor:  pointer;
}

*.borderround {
	border-radius: 15px;
}

*.borderround2 {
    border-radius:  8px;
}

*.relative {
	position: relative;
}
*.nodecoration {
	text-decoration: none;
}
*.centertext {
		text-align:center;
	}

*.center {
    margin:  auto;
}

*.blackbar {
	height: auto;
	width: 5px;
	background-color: #000000;
}

*.blackline {
	height: 5px;
	width: 100%;
	background-color:#000000;
}
*.blackborder {
	border:  2px solid #000000;
}

*.whitetext {
    color:  #FFFFFF;
}

*.redtext {
    color:  #FF0000;
}

*.whitebg {
    background-color:  #FFFFFF;
}

*.blackbg {
    background-color:  #000000;
}

*.blacktext {
	color: #000000;
}

*.bluetext {
	color:#1800C5;
}

*.blueunderline {
	border-bottom: solid 2px #1800C5;
	padding-bottom: 2px;
}

*.darkblueborder {
    border:  solid 2px #000082;
}

*.padding5- {
    padding:  5px;
}

*.padding12- {
    padding:  12px;
}

*.whiteunderline {
    border-bottom:  solid 2px #FFFFFF;
}

*.blackunderline {
	border-bottom: 2px solid #000000;
}
*.boxshadow {
text-shadow: 2px 2px 18px #000000;
}
*.margin5 {
	margin: 5px;
}
*.margin5-bottom {
    margin-bottom:  5px;
}

*.margin8-top-bottom {
    margin-top:  8px;
    margin-bottom:  8px;
}

*.margin10-top{
    margin-top:10px;
}

*.margin10-topbottom-{
    margin-top:10px;
    margin-bottom:10px;
}

*.margin20 {
	margin: 20px;
}

*.margin20top {
	margin-top: 20px;
}

*.margin50top {
    margin-top:  50px;
}

*.margin50topbottom {
    margin-top:  50px;
    margin-bottom:  50px;
}

*.margin100top {
    margin-top:  100px;
}

*.margin30percenttop- {
    margin-top:  30%;
}

*.margin5leftright- {
	margin-left: 5px;
	margin-right: 5px;
}

*.margin20leftright {
	margin-left: 20px;
	margin-right: 20px;
}

*.margin20bottom {
	margin-bottom: 20px;
}

*.padding10 {
	padding: 10px;
}

*.padding10-top- {
	padding-top: 10px;
}

*.padding10-bottom- {
	padding-bottom: 10px;
}


*.font10 {
    font-size:  10px;
}

*.font14 {
    font-size:  14px;
}

*.font18 {
	font-size:18px;
}
*.font20 {
	font-size: 20px;
}
*.threeem {
	height: 3em;
}
*.font24 {
	font-size: 24px;
}
*.font32 {
	font-size: 32px;
}

*.font36 {
    font-size:  36px;
}

*.font40 {
    font-size:  36px;
}

*.font48 {
    font-size:  48px;
}

*.font60 {
    font-size:  60px;
}

*.scalein {
 scale: 1;
   animation-name: scalein1;
  animation-duration: 2s;
    animation-timing-function: ease-in;
}
@keyframes scalein1 {
  from {scale: .1;}
  to {scale: 1;}
}


*.lightgraybg {
	background-color:#EBEBEB;
}

*.graybg {
	background-color:#D3D3D3;
}

*.darkgraybg {
    background-color:  #4D4D4D;
}
.topnav {
  overflow: hidden;
  background-color: #D3D3D3;
}

.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding:  5px 5px 5px 25px;
 /* padding: 10px 16px; */
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
	
  .topnav a.icon {
    float: right;
    display: block;
      margin: 10px;
      padding: 10px;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
*.floatleft {
	float:  left;
}
*.floatright {
	float: right;
}
*.topright {
	position: absolute;
	top:10px;
    right:  5%;
}

*.maxwidth90percent {
    max-width:  90%;
}

*.maxwidth99percent {
    max-width:  99%;
    margin-left: auto;
    margin-right: auto;
}

*.opacity {
	opacity: .75;
}
*.opacity1 {
	opacity: 1;
}

*.opacity0 {
    opacity:  0;
}

*.imageresponsive- {
  width:  250px;
  max-width: 100%;
  height: auto;
}

*.supsmall- {
  vertical-align: super;
  font-size: smaller;    
}

*.sup- {
  vertical-align: super;
}

*.sub- {
    vertical-align:  sub;
}

*.lineheight1_5 {
    line-height:  1.5em;
}

*.lineheight2 {
    line-height:  2em;
}

*.backgroundblue- {
   background:  rgb(26,141,255, .25);
}

*.backgroundpurple- {
   background:  rgb(26,141,255, .25);
}

*.backgroundorange- {
   background:  rgb(255,140,26, .5);
}

*.backgroundblack- {
   background:  rgb(0,0,0, .5);
}

*.parallax {
  /* The image used */
background-image: url("../images/cleveland-skyline-desktop.jpg");

  /* Full height */
  height: 45%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

*.parallaxlong {
  /* The image used */
background-image: url("../images/cleveland-skyline-desktop.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

*.flexbox {
  display: flex;
	justify-content: center;
	background-color: #D3D3D3;
}
*.flexbox > p {
	text-align: center;
  background-color: #f1f1f1;
}

*.flexbox-2-columns {
  display: flex;
	justify-content: center;
	background-color: #D3D3D3;
}
*.flexbox-2-columns > p {
	text-align: center;
  background-color: #f1f1f1;
}

*.flexbox2 {
   display: flex;
   justify-content: space-around; 
   flex-wrap:  wrap;
}
.flexbox2 > p {
	text-align: center;
}

.flexbox2 > span {
  margin: 25px;
  text-align: center;
}

*.maxwidth100 {
	width: 400px;
  max-width: 100%;
  height: auto;
}

*.transparent {
	 background: rgba(0,0,0,0.5);
}

*.blackshadow {
      text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
    0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
    0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
    -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1)
}



*.lightgrayshadow {
	text-shadow: 2px 2px 50px #d1d1d1;
}

*.lightblackshadow {
	text-shadow: 2px 2px 50px #000000;
}

*.scaleuphover:hover {
	  transform: scale(1.1);
	   transition: transform .5s;
	}
*.scaleupfocus:focus {
	  transform: scale(1.1);
	   transition: transform .5s;
	}

*.blueandgraygradient {
background: rgb(158,184,240);
background: radial-gradient(circle, rgba(158,184,240,1) 0%, rgba(92,116,217,1) 100%);
}

*.lightgraygradient {
	 background: rgb(241,241,241);
     background: -webkit-linear-gradient(left, rgba(241,241,241,1) 21%, rgba(255,255,255,1) 52%, rgba(241,241,241,1) 100%);
     background: -o-linear-gradient(left, rgba(241,241,241,1) 21%, rgba(255,255,255,1) 52%, rgba(241,241,241,1) 100%);
     background: linear-gradient(to right, rgba(241,241,241,1) 21%, rgba(255,255,255,1) 52%, rgba(241,241,241,1) 100%); 
}

*.graygradient {
background: rgb(211,211,211);
background: linear-gradient(90deg, rgba(211,211,211,1) 55%, rgba(133,133,133,1) 100%);
}

*.graygradient2 {
     background: rgb(169,169,169);
background: linear-gradient(90deg, rgba(169,169,169,1) 23%, rgba(222,112,11,1) 53%); 
}

*.lightorangegradient {
	 background: rgb(241,241,241);
background: -webkit-linear-gradient(left, rgba(241,241,241,1) 0%, rgba(255,236,185,1) 52%, rgba(241,241,241,1) 100%);
background: -o-linear-gradient(left, rgba(241,241,241,1) 0%, rgba(255,236,185,1) 52%, rgba(241,241,241,1) 100%);
background: linear-gradient(to right, rgba(241,241,241,1) 0%, rgba(255,236,185,1) 52%, rgba(241,241,241,1) 100%); 
}

*.eightypercentwidth {
    width:  80%;
}

*.whiteborder {
    border: solid 2px #FFFFFF;
}

*.grayborder {
    border:  solid 2px #D3D3D3;
}

*.padding15 {
    padding:  15px;
}

*.padding20top {
    padding-top: 20px;
}

*.padding30top {
    padding-top: 30px;
}

*.padding20 {
	padding:20px;
}

*.padding20bottom {
    padding-bottom:  20px;
}

*.padding30bottom {
    padding-bottom: 30px;
}


*.bold {
	font-weight: bold;
}
*.italic {
	font-style:  italic;
}

*.inline-block {
	display: inline-block;
}

*.sub {
    vertical-align:  sub;
}

*.block {
	display:  block;
}

*.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

*.container img {vertical-align: middle;}

*.content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  /*background: transparent;*/
  color: #f1f1f1;
  /*width: 100%;*/
}

*.width90 {
    max-width: 90%;
}

*.flex-container {
  display: flex;
  justify-content: center;
	line-height:2;
}

*.flex-container > p, img {
  /*background-color: #f1f1f1;*/
  margin: 10px;
  text-align: center;
}

*.flex-container-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

*.flex-container-wrap > a, span {
  text-align: center;
}

*.flex-container-space-around {
	display:  flex;
	justify-content: space-around;
}
*.flex-container-space-around > span {
  text-align: center;
}


*.flex-container-center{
    display:  flex;
    justify-content: center;
}

*.flex-container-nowrap{
    display:  flex;
    justify-content: center;
    flex-wrap:  nowrap;
}

*.flex-container-contact-info {
    display:  flex;
    flex-wrap:  wrap;
    justify-content: space-around;
    align-items: center;
}

.flex-container-contact-info > a {
  text-align: center;
  margin:  10px;
}

.grid-container {
  display: grid;
  grid-template-columns: 25% 25%;
  justify-content: center;
  align-content:  center;
}

.grid-container2 {
  display: grid;
  grid-template-columns: 50% 50%;
  /*justify-content: center;
  align-content:  center;*/
}

*.grid-container-header {
  display: grid;
  align-content: center;
  align-self:  flex-start;
  grid-template-areas:
    'menu logo aanpride contact'
    'menu logo home contact';
}

*.grid-2-columns {
    display:  grid;
    grid-template-columns:  auto auto;
}

*.grid-3-columns {
  display: grid;
  grid-template-columns: auto auto auto;
}

*.item1 { 
    grid-area: menu;
    text-align:  center;
    align-self:  center;
}
*.item2 { 
    grid-area: logo;
    text-align: center;
	align-self: center;
}
*.item3 { 
	grid-area: aanpride; 
    text-align: center;
	align-self: flex-end;
}
*.item4 {
	grid-area: home; 
    text-align: center;
	align-self: flex-start;
}
*.item5 { 
    grid-area: contact;
    text-align: center;
	align-self: center;
}

*.grid-container-producerheader {
  display: grid;
  align-content: center;
  grid-template-areas:
    'logo training leaderboard myproduction logout'
}

*.item1p { grid-area: logo; 
}
*.item2p { 
    grid-area: training;
    text-align: center;
	align-self: center;
}
*.item3p { 
	grid-area: leaderboard; 
    text-align: center;
	align-self: center;
}
*.item4p {
	grid-area: myproduction; 
    text-align: center;
	align-self: center;
}
*.item5p {
	grid-area: logout; 
    text-align: center;
	align-self: center;
}

*.centervertical {
    vertical-align: middle;
}

*.centerhorizontal {
    justify-content:  center;
}

*.flex-container-stacked {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container-stacked > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


	*.bgfade {
		animation: fadeout .5s;
		animation-delay: .75s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
}

@keyframes fadeout {
  from {
	  filter: brightness(100%);
	}
  to {
	  filter: brightness(25%);
	}
}
	
		*.bgfadein {
		animation: fadein .5s;
		animation-delay: .5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
}

@keyframes fadein {
  from {
	  filter: brightness(25%);
	}
  to {
	  filter: brightness(100%);
	}
}
	
	/* 3d fade effect */
	/*@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");*/

h1 {
  text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
    0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
    0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
    -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
}
	*.variablefontsize {
		font-size: 8vw;
	}
	*.twentymarginabovebelow {
		margin:  20px 0 20px 0;
	}
	*.bigfont {
		font-size: 36px;
	}
	*.paddingtop10percent {
		padding-top: 10%;
	}
*.swoopin {
  animation: 2.5s swoop-in ease;
}
@keyframes swoop-in {
  0% {
    opacity: 0;
    transform: rotateX(90deg);
  }
  50% {
    opacity: 1;
    transform: rotateX(20deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
	  
    transform: rotateX(0deg);
  }
}
	*.threeem {
		line-height: 5;
	}
@keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%,
  100% {
    transform: scale(1);
  }
}

@keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%,
  100% {
    transform: scale(1) rotateZ(-3deg);
  }
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  /*opacity: 0.65;*/
	
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
*.bgcleveland- {
  background-attachment: fixed;
  background-image: url("../images/cleveland-skyline-mobile.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* Resize the background image to cover the entire container */
	/*background-image: url("images/lion-bg1.jpg");*/
  /*min-height: 100%;*/
	height: 75%;
}

*.bgclevelandtaxprojection- {
  background-image: url("../images/cleveland-skyline-desktop.jpg");
 /*background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover; /* Resize the background image to cover the entire container */
	/*background-image: url("images/lion-bg1.jpg");*/
  /*min-height: 100%;*/
	/*height: 100%;*/
}

*.bgimg-2 {
  /*background-image: url("images/2022-awards-dinner-web-tint-reduced1.jpg");*/
  min-height: 400px;
}

*.bgimg-3 {
  /*background-image: url("img_parallax3.jpg");*/
	/*background-image: url("images/horizon.jpg");*/
	background-image: url("../images/office-building.jpg");
  min-height: 400px;
}

*.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

*.caption span.border {
  background-color: #111;
  color: #fff;
  font-size: 25px;
	padding: 8px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

*.hideme {
	display:  none;
}




    *.whitetext {
        color: #FFFFFF;
    }

*.lightgraytext {
   color: rgb(235,235,235);
}
    
    *.flex-container- {
        /*display:  inline-flex;*/
        display:  flex;
        flex-direction: column;
        width:  auto;
    }
    
    *.marginleft5percent {
        margin-left: 5%;
    }

*.padding7leftright {
    padding-left:  7px;
    padding-right:  7px;
}

*.padding10leftright {
    padding-left:  10px;
    padding-right:  10px;
}

*.marginleftright40 {
    margin-left:  40px;
    margin-right: 40px;
    margin-top:  20px;
    margin-bottom:  20px;
}

*.margin10top- {
    margin-top:  10px;
}

*.margin1000top- {
    margin-top:  1000px;
}
    
    *.whiteborder {
        border: solid 2px #FFFFFF;
    }
    
    *.font24 {
        font-size:  24px;
    }
    *.font20 {
        font-size:  20px;
    }

*.grayhover:hover {
  color:  #000000;
  background-color: #d3d3d3;
}

*.blackhover:hover {
  color:  #000000;
  background-color: transparent;
}
*.whitebghover:hover {
    color:  #000000;
    background-color:  #FFFFFF;
}

table {
    width:  100%;
}

table,
td {
  padding:  5px;
  border: 1px solid #333;
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}


span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
      -webkit-transform: scale(0);
      transform:  scale(0);
    } 
  to {
      -webkit-transform: scale(1);
      transform:  scale(1);
      }
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}




 /* Dropdown Button */
.dropbtn {
 /* background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;*/
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: inline-flex;
  position: absolute;
  /*background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  /*padding: 12px 16px;*/
  text-decoration: none;
  display: inline-flex;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}