/* Browser mockup code
 * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
 * Live example: https://updown.io
 */

.browser-mockup {
	border-top: 35px solid #D3D3D3;
	box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 1);
	position: relative;
	border-radius: 7px 7px 0 0
}

.browser-mockup:before {
	display: block;
	position: absolute;
	content: '';
	top: -20px;
	left: 1em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: #f44;
	box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

.browser-mockup.with-tab:after {
	display: block;
	position: absolute;
	content: '';
	top: -2em;
	left: 5.5em;
	width: 20%;
	height: 0em;
	border-bottom: 2em solid white;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}

.browser-mockup.with-url:after {
	display: block;
	position: absolute;
	content: '';
	top: -25px;
	left: 5.5em;
	width: calc(100% - 6em);
	height: 1.2em;
	border-radius: 2px;
	background-color: white;
}

.browser-mockup > * {
	display: block;
	width: 100%;
	border-radius: 0 0 7px 7px;
}