:root {
  --white: #fff;
  --gray: #dddddd;
  --gray2: #82878c;
  --gray3: #666;
  --graylight: #f3f3f3;
  --graylight2: #9ea3a8;
  --graylight3: #fafafa;
  --graylight4: #f8f9f9;
  --graylight5: #ebedee;
  --blue: #0085ba;
  --blue2: #00beea;
  --red: #ff1a00;
  --red2: #D54E21;
  --red3: #bb0000;
  --green: #179f00;
  --green2: #00ba92;
  --dark: #23282d;
}

body.wpeg-inspector * {
  cursor: default !important;
}

.no-underline {
  text-decoration: none;
}

.no-underline:focus {
  box-shadow: none;
}

.wp-core-ui .button.button-danger {
  background: var(--red);
  border-color: var(--red2);
  box-shadow: 0 1px 0 var(--red3);
  color: var(--graylight3);
  text-decoration: none;
  text-shadow: 0 -1px 1px var(--red), 1px 0 1px var(--red), 0 1px 1px var(--red), -1px 0 1px var(--red);
}

.wp-core-ui .button.button-danger:hover {
  background: var(--red);
  border-color: var(--red3);
  color: var(--white);
}

#wpeg-tool {
  position: relative;
  z-index: 999999;
}

#wpeg-tool .mce-toolbar .mce-ico {
  font-size: 14px;
}

#wpeg-tool .mce-top-part:before {
  box-shadow: none
}

#wpeg-tool .mce-tinymce {
  box-shadow: none;
  border: var(--gray) 1px solid !important;
}

#wpeg-tool .mce-toolbar .mce-btn button {
  padding: 1px 2px;
}

#wpeg-tool .mce-toolbar .mce-btn-group {
  padding: 0 0;
}

#wpeg-tool .mce-toolbar .mce-btn-group .mce-btn {
  margin: 0;
}

#wpeg-tool .mce-btn.mce-active i {
  color: var(--dark);
}

@keyframes wpeg-ripple {
  0% {
   left: 5px;
   top: 5px;
   opcity: 0.8;
   width: 0;
   height: 0;
 }

 100% {
   left: -20px;
   top: -20px;
   opacity: 0;
   width: 50px;
   height: 50px;
 }
}

div.mce-inline-toolbar-grp {
  z-index: 999999;
}

div.mce-notification-error {
  display: none;
}

.wpeg-button { 
	font-size: 18px!important; 
	font-weight: bold;
}

/* .wpeg-about {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh;
}

.wpeg-about > div {
	padding: 36px;
	max-width: 30%;
} */

.wpeg-about h3 { font-size: 24px; }
.wpeg-about p { font-size: 16px; }

.wpeg-illustration img { max-width: 100%; }

.wpeg-about-links {
	display: flex;
	align-items: center;
	padding: 24px 0;
}

.wpeg-link {
	margin: 0 24px;
	text-decoration: none; 
}

ul#wp-admin-bar-guide_list-default {
	width: 240px;
}

.wpeg-submenu a.ab-item {
	height: auto !important;
	white-space: normal !important;
}

/** New styles for about page */
.wrap.wpeg-about {
	display: flex;
	justify-content: center;
	align-content: center;
}

.wpeg-about-wrapper {
	width: 900px;
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	margin-top: 50px;
}

.wpeg-about-wrapper::after {
	content: "";
  display: table;
  clear: both;
}

.wpeg-about-header__title h3 {
	margin: 0 !important;
	font-size: 1rem;
	display: inline-block;
}

.wpeg-about-header__title {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wpeg-about-header__title img {
	width: 25px;
	margin-right: 5px;
}

.wpeg-about-header {
	padding: 15px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}

.wpeg-about h3 {
	text-align: center;
	margin: 0 0 15px 0;
}

.wpeg-about-container {
	padding: 50px;
}

.wpeg-about-video-wrapper {
	margin: 30px 0;
	text-align: center;
	width: 100%;
	position: relative;
	cursor: pointer;
}

.wpeg-about-video-wrapper img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	box-shadow: 10px 10px 20px rgba(0,0,0,.15);
}

.wpeg-about-video-wrapper .btn-video {
	position: absolute;
	top: 45%;
	left: 30%;
}

.video-banner:hover > span.btn-video svg .ytp-large-play-button-bg {
	fill: #ff0000;
	fill-opacity: 1;
}

.wpeg-about-content {
	max-width: 500px;
	margin: auto;
	text-align: center;
}

.wpeg-about-content img {
	width: 250px;
	margin-bottom: 15px;
}

.wpeg-about-content p {
	margin: 0;
	font-size: 14px;
}

.wpeg-about-video {
	box-shadow: 8px 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.wpeg-about-buttons {
	display: flex;
	justify-content: center;
}
.wpeg-about-buttons a {
	margin-right: 15px !important;
}
.wpeg-about-buttons a:last-of-type {
	margin: 0;
}

/* Video Modal */
.video-modal,
.video-modal .overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99990;
}

.noscroll {
	overflow: hidden;
}

.video-modal {
	overflow: hidden;
	position: fixed;
	opacity: 0.0;

  -webkit-transform: translate(500%,0%);
  transform: translate(500%,0%);

  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;


  /* using flexbox for vertical centering */

  /* Flexbox display */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  /* Vertical alignment */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: rgba(0,0,0,0.4); /* overlay color */

  opacity: 0.0;

  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}

.video-modal-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;
	margin: 0 auto;
	overflow-y: visible;
	background: #000;
  width: calc(60% - 12em);
  height: 0;
  padding-top: calc((60% - 12em) * 0.5625);
}

.video-banner {
  display: block;
}

/* modal close button */
.close-video-modal {
	display: block;
	position: absolute;
	right: -50px;
	top: 0;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: #000;
	box-shadow: 0px 2px 16px rgba(0,0,0,0.5);
}

/* show the modal: 
   add class to the body to reveal */
.show-video-modal .video-modal {
	opacity: 1.0;
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}

.show-video-modal .video-modal .overlay {
	opacity: 1.0;
}

.show-video-modal .video-modal-content {
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}
/* End of about styles */