.mockup-browser-url-bar {
	width: 95%;
	display: table;
	margin-left: auto;
	margin-right: auto;
	background-color: #f5f5f5;
	color: #61666c;
	height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left !important;	
	border-radius: 20px;
	padding: 8px;
	font-size: 14px !important;
}

.mockup-browser-url-bar-dark-mode {
	background-color: #343a40 !important;
	color: #fff !important;
}

img.mockup-browser-feature-img {
	width: 40px;
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.mockup-browser-url-bar span {
	text-align: left;	
	margin-left: 10px;
}

.mockup-app-title-container {
	height: 60px;
	margin-top: 75px !important;
	/* border: 1px solid #fff; */
}

.mockup-app-title-container h2 {
	font-weight: 200 !important;
	color: #354468;
	font-size: 30px;
	text-align: center;
}


.mockup-content-height-control {
	height: 200px;
}


/* Hover */

.mockup-hover {
	background-color: transparent !important;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mockup-hover::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mockup-hover:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.mockup-hover:hover::after {
	opacity: 1;
}


.mockup-hover > a {
	text-decoration: none !important;
	color: #414A52 !important;
}


.mockup-browser-content {
	height: auto;
	min-height: 330px;
	overflow-y: scroll;
}

.mockup-browser-content p {
	text-align: center;
	margin-top: 15px;
	font-size: 17px !important;
}

img.mockup-browser-content-icon {
	float: left !important;
	margin-top: 12px;
	margin-bottom: 12px;
	width: 35px;
}


/* Custom */

.mockup-browser-content p {
	margin-top: 15px;
	font-weight: 400 !important;
	line-height: 28px !important;
}

.pd {
  position: relative;
  display: flex;
  z-index: 4;
  width: 100%;
}

.pd--bottom,
.pd--top {
  max-height: 400px;
  align-items: center;
  justify-content: center;
}

.pd--bottom {
  align-items: normal;
  justify-content: center;
}

.pd--top {
  margin-top: 20px;
}

.pd--left,
.pd--right {
  margin-top: 30px;
  max-height: 500px;
  align-items: center;
  justify-content: center;
}

.pd--left {
  margin-right: 50px;
}

.pd--right {
  margin-left: 50px;
}

.pd__browser,
.pd__imgBox {
  display: block;
  border-radius: 8px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  margin: 0 auto;
 
  box-shadow: 0 3px 6px #0000001a, 0 10px 22px #0003;
  }

.pd__browser {
  width: 95%;
  display: table;
  margin-left: auto;
  margin-right: auto;  
}

/* Overrule filepond css */
.pd__browser .filepond--root {
  height: 220px !important;
}

.pd__browser .filepond--panel-root {
  background-color: #fff;
}

.pd__browser .filepond--drop-label {
  top: 25px;
}

.pd__browser .filepond--drop-label .btn {
  background-color: rgba(24, 106, 255, 1);
  color: #fff;
  text-decoration: none;
  display: block;
  line-height: 2.4em;
  width: fit-content;
  margin: 15px auto;
}

.pd__imgBox {
  object-fit: contain;
  border-radius: 0;
}

.pd__imgBox video {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: left;
}

.pd--bottom {
  max-width: 100%;
}

.pd--bottom .pd__imgBox video {
  object-position: center;
}

.pd--left .pd__imgBox,
.pd--right .pd__imgBox {
  max-height: 500px;
}

.pd--bottom .pd__imgBox,
.pd--top .pd__imgBox {
  max-height: 400px;
}

.pd--bottom .pd__imgBox video,
.pd--top .pd__imgBox video {
  max-height: 400px;
  width: auto;
  max-width: 100%;
}

.pd--bottom .pd__browser {
  border-radius: 8px;
}

.pd__imgBox--transparent {
  box-shadow: none;
  background-color: transparent;
}

.pd--bottom .pd__imgBox--transparent {
  background-position: top;
}

/* Top App Bar With 3 macOS red/yellow/green dots */
.pd__browserChrome {
  height: 15px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
}

.pd__browserChrome-dark-mode {
	background-color: #343a40 !important;
}


.pd__browserActions {
  height: 12px;
  width: 12px;
  background: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  border-radius: 50%;
}

.pd__browserContent {
  height: calc(100% - 36px);
  background-size: cover;
  background-position: 0 0;
  padding: 15px;
  background-color: #fff;
}

.pd__browserContent-dark-mode {
	background-color: #121212;	
}


.pd__browserContent video {
  object-fit: cover;
}

.pd__smartphones {
  position: relative;
  display: flex;
  justify-content: center;
}

.pd--bottom .pd__smartphones {
  max-height: 370px;
}

.pd--right .pd__smartphones {
  transform: translateY(20px);
}

/* Clay iPhone X */

.pd__sp {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 475px;
  background: #fff;
  border-radius: 38px;
  box-shadow: 0 3px 35px #0003, inset 0 2px 5px #0003,
    inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.pd--dark .pd__sp {
  background: #242424;
}

.pd__sp--small {
  width: 161px;
  height: 333px;
  border-radius: 25px;
}

.pd__sp--slanted:first-child {
  transform: rotate(-12deg) scale(0.95) translate(40px, 20px);
}

.pd__sp--slanted:last-child {
  transform: rotate(12deg);
}

.pd__sp__screen {
  border: 2px solid #f9f9f9;
  height: 380px;
  width: 200px;
  background-size: cover;
  background-position: top;
}

.pd--dark .pd__sp__screen {
  border: none;
}

.pd__sp--small .pd__sp__screen {
  height: 266px;
  width: 140px;
}

.pd__crossPlatform {
  position: relative;
  display: flex;
  justify-content: center;
}

.pd--bottom .pd__crossPlatform {
  max-height: 370px;
  max-width: 580px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.pd--right .pd__crossPlatform {
  transform: translateX(40px);
}

.pd__crossPlatform .pd__sp {
  position: absolute;
  left: -40px;
  top: 70px;
}

.pd--bottom .pd__crossPlatform .pd__sp {
  top: 33px;
  left: -20px;
}

.pd__laptop {
  position: relative;
  width: 500px;
  height: 350px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 30px 30px 20px 20px;
  box-shadow: 0 3px 35px #0003, inset 0 5px 5px rgba(0, 0, 0, 0.089),
    inset 0 -13px 13px #0000000a, inset 0 0 10px #0000001a;
}

.pd--dark .pd__laptop {
  background: #242424;
}

.pd__laptop:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -36px;
  right: -36px;
  height: 9px;
  background: #e3e8ed;
  border-bottom-left-radius: 25% 100%;
  border-bottom-right-radius: 25% 100%;
}

.pd--dark .pd__laptop:before {
  background: #242424;
}

.pd__laptop:after {
  content: "";
  position: absolute;
  bottom: 3px;
  height: 5px;
  left: -36px;
  right: -36px;
  background: #fff;
  border-radius: 3px 3px 0 0;
}

.pd--dark .pd__laptop:after {
  background: #43494e;
}

.pd__laptop__screen {
  border: 2px solid #f9f9f9;
  height: 290px;
  width: 460px;
  background-size: 460px auto;
}

.pd--dark .pd__laptop__screen {
  border: none;
}




/* Mobile */
@media only screen and (max-width: 700px) {
  .pd--left,
  .pd--right {
    margin-left: 0;
    margin-right: 0;
  }

  .pd--right .pd__imgBox {
    max-height: 400px;
  }

  .pd--left .pd__imgBox video,
  .pd--right .pd__imgBox video {
    max-height: 400px;
    width: auto;
    max-width: 100%;
  }
}


/* Component: Features List Inside Browser Window */

ul.mockup-browser-features-list {
	margin-left: -35px !important;
}

ul.mockup-browser-features-list li {
	list-style: none;
	margin-top: 35px !important;
	font-weight: 300;
	font-size: 17px;
}

/*
	
	<div class="pd pd--bottom">
		<div class="pd__browser">
			<div class="pd__browserChrome">
				<div class="pd__browserActions"></div>
			</div><!-- ./pd__browserChrome -->
			
			<div class="pd__browserContent">
				<div class="filepond--wrapper">
					<div class="filepond--root filepond--hopper">
				
						<input class="filepond--browser" type="file" id="filepond--browser-udfgwccf7" aria-controls="filepond--assistant-udfgwccf7" aria-labelledby="filepond--drop-label-udfgwccf7"><div class="filepond--drip"></div><div class="filepond--drop-label" style="transform:translate3d(0px, 16px, 0);opacity:1"><label for="filepond--browser-udfgwccf7" id="filepond--drop-label-udfgwccf7" aria-hidden="true">Drag &amp; Drop your files, paste from clipboard or <span class="filepond--label-action btn btn--c btn--primary" tabindex="0">Browse files</span></label></div>
						<div class="filepond--list-scroller" style="transform:translate3d(0px, 16px, 0)">
							<ul class="filepond--list" role="list"></ul>
						</div><!-- ./filepond--list-scroller -->
						
						<div class="filepond--panel filepond--panel-root" data-scalable="false">
							<div class="filepond--panel-top filepond--panel-root"></div>
							<div class="filepond--panel-center filepond--panel-root" style="transform:translate3d(0px, 0px, 0) scale3d(1, 2.2, 1)"></div>
							<div class="filepond--panel-bottom filepond--panel-root" style="transform:translate3d(0px, 220px, 0)"></div>
						</div><!-- ./filepond--panel .filepond--panel-root -->
						
						<span class="filepond--assistant" id="filepond--assistant-udfgwccf7" role="status" aria-live="polite" aria-relevant="additions"></span>
					</div><!-- ./filepond--root .filepond--hopper -->
				</div><!-- ./filepond--wrapper -->
			</div><!-- ./pd__browserContent -->
		</div><!-- ./pd__browser -->
	</div><!-- ./pd .bd--bottom -->

*/