/*font-family: 'Montserrat', sans-serif;
font-family: 'Nunito', sans-serif;*/

.stage {
	background-image: url(images/deskstartpage1.png);
	width: 900px;
	height: 600px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	position: relative;
	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.35), 0 10px 40px 0 rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	overflow: hidden;
	display:none;
}

body {
	background-color: #d4cdc3;
}

.title {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-size: 56px;
	font-weight: 60px;
	color: grey;
	width: 400px;
	margin-left: 1000px;
	margin-right: 20px;
	margin-top: 60px;
	text-align: right;
}

.buzz1 {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 900;
	color: grey;
	width: 10px;
	left: 585px;
	top: 400px;
	text-align: right;
	transform: rotate(5deg);
	display: none;
	animation: buzz 1.35s infinite;
	animation-delay: 0.75s	
}

.buzz2 {
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 900;
	color: grey;
	width: 10px;
	left: 600px;
	top: 430px;
	text-align: right;
	transform: rotate(-13deg);
	display: none;
	animation: buzz 1.35s infinite;
	animation-delay: 0.75s
}

.startphone {
	position: absolute;
	width: 350px;
	height: 350px;
	margin-left: 550px;
	margin-top: 600px;
}

.startphone:hover {
	cursor: pointer;
}

.textphone {
	position: absolute;
	width: 350px;
	height: 350px;
	margin-left: 550px;
	margin-top: 220px;
	display: none;		
}

.textphone:hover {
	cursor: pointer;
}

.textphone_animation {
	animation: textphone 4s infinite;
}

@keyframes textphone {
	0% {transform: rotate(0deg);}
	25% {transform: rotate(15deg);}
	50% {transform: rotate(0deg);}
	75% {transform: rotate(15deg);}
	100% {transform: rotate(0deg);}
}

@keyframes buzz {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}