@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

@font-face {
 font-family: "Suisse";
 src: url("../fonts/SuisseIntl-Book.woff2") format("woff2"),
        url("../fonts/SuisseIntl-Book.woff") format("woff");
 font-weight: 400;
}

@font-face {
 font-family: "Suisse";
 src: url("../fonts/SuisseIntl-Bold.woff2") format("woff2"),
        url("../fonts/SuisseIntl-Bold.woff") format("woff");
 font-weight: 700;
}

@font-face {
 font-family: "Mihaly";
 src: url("../fonts/MihalyDisplay-Bold.woff2") format("woff2"),
        url("../fonts/MihalyDisplay-Bold.woff") format("woff");
 font-weight: 700;
}

@font-face {
 font-family: "Mihaly";
 src: url("../fonts/MihalyDisplay-Medium.woff2") format("woff2"),
        url("../fonts/MihalyDisplay-Medium.woff") format("woff");
 font-weight: 500;
}

* {
	margin: 0;
	padding: 0;
}

#sptk__iframe__wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 1240px;
	min-height: calc(100vh / 1.25);
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

#sptk__iframe__wrapper .canvas-container {
	position: absolute !important;
	z-index: 9999;
}


#sptk__iframe__wrapper .export__btn {
	position: relative;
	display: block;
}


#sptk__iframe__wrapper .app {
	position: relative;
	margin-bottom: 25px;
}

#sptk__iframe__wrapper #canvas {
	position: relative;
	z-index: 9998;
}


#sptk__iframe__wrapper .btn__selection_wrapper {
    position: relative;
    align-items: center;
    font-family: 'Mihaly', sans-serif;
    display: flex;
    flex-direction: column;
}

#sptk__iframe__wrapper .btn--primary {
	position: relative;
	padding: 15px 10px;
	margin-bottom: 20px;
	font-size: 16px;
	font-family: 'Mihaly', sans-serif;
	/*text-transform: uppercase;*/
	color: #7710FF;
	background: none;
	border: 1px solid #7710FF;
	border-radius: 5px;
	cursor: pointer;
}

#sptk__iframe__wrapper .btn--primary:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: #7710FF;
	z-index: -1;
	transition: 0.2s ease-in;
}


#sptk__iframe__wrapper .btn--primary:hover {
	color: #FFF;
	transition: 0.2s ease-in;
}

#sptk__iframe__wrapper .btn--primary:hover:before {
	height: 100%;
	transition: 0.2s ease-in;
}

/*#sptk__iframe__wrapper .btn--format:hover {
	background: #212923;
	color: #FFF;
}*/

#sptk__iframe__wrapper .part--title {
	text-align: center;
	margin-bottom: 50px;
}


#sptk__iframe__wrapper .inactive-button {
	pointer-events: none;
	opacity: 0.5;
}

#sptk__iframe__wrapper .container__hide--print {
	width: 0;
	height: 0;
	overflow: hidden;
}


#sptk__iframe__wrapper .loader__wrapper {
	position: absolute;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #7710FF;
    z-index: 99999;
    color: #FFF;
    font-family: 'Mihaly', sans-serif;

}

#sptk__iframe__wrapper .loader__wrapper--active {
	display: flex;
}

#sptk__iframe__wrapper .btn__options_wrapper {
	display: none;
	justify-content: space-around;
	width: 50%;
	margin: 0 auto;
}

#sptk__iframe__wrapper .btn__tools_wrapper {
	display: none;
	justify-content: space-around;
	width: 50%;
	margin: 0 auto 25px auto;
	padding: 10px 0;
    border: 1px solid #AEAEAE;
    border-radius: 5px;
}

#sptk__iframe__wrapper .is-display {
	display: flex;
}

/* BUTTONS */
#sptk__iframe__wrapper .btn--ui {
	width: 30px;
	height: 30px;

	border-radius: 5px;
	background: white;

	background-repeat: none;
	border: none;
	cursor: pointer;
}

#sptk__iframe__wrapper button:focus {
	outline: 0;
}

#sptk__iframe__wrapper .btn--ui.is-active {
	box-shadow: 0 0 0px 2px red;
	pointer-events: none;
	cursor: normal;
}

#sptk__iframe__wrapper .btn--center {
	background-image: url("../images/buttons/centeralign.svg");
}

#sptk__iframe__wrapper .btn--left {
	background-image: url("../images/buttons/leftalign.svg");
}

#sptk__iframe__wrapper .btn--right {
	background-image: url("../images/buttons/rightalign.svg");
}

#sptk__iframe__wrapper .btn--delete {
	background-image: url("../images/buttons/delete.svg");
}

#sptk__iframe__wrapper .btn--color {
	border-radius: 100%;
}

#sptk__iframe__wrapper .btn--color--blue {
	background: #53D3FA;
}

#sptk__iframe__wrapper .btn--color--pink {
	background: #FE7EBA;
}

#sptk__iframe__wrapper .btn--color--purple {
	background: #7710FF;
}

#sptk__iframe__wrapper .btn--color--black {
	background: #000000;
}

#sptk__iframe__wrapper .btn--weight--regular {
	background-image: url("../images/buttons/regular.svg");
}

#sptk__iframe__wrapper .btn--weight--bold {
	background-image: url("../images/buttons/bold.svg");
}

@media screen and (max-width: 840px) {
	#sptk__iframe__wrapper .btn__options_wrapper {
		width: 100%;
	}

	#sptk__iframe__wrapper .btn__tools_wrapper {
		width: 100%;
	}

	#sptk__iframe__wrapper .btn--primary {
		position: relative;
		padding: 10px 10px;
		margin-bottom: 20px;
		font-size: 14px;
	}
	#sptk__iframe__wrapper .btn--ui {
		width: 20px;
		height: 20px;
	}

	#sptk__iframe__wrapper .btn__tools_wrapper {
		margin: 0 auto 10px auto;
	}

	#sptk__iframe__wrapper .btn__options_wrapper .btn--primary {
		margin-bottom : 0;
	}
}

@media screen and (max-height: 650px) {

	#sptk__iframe__wrapper .btn--primary {
		position: relative;
		padding: 5px 5px;
		margin-bottom: 20px;
		font-size: 12px;
	}

	#sptk__iframe__wrapper .btn--ui {
		width: 20px;
		height: 20px;
	}

	#sptk__iframe__wrapper .btn__tools_wrapper {
		margin: 0 auto 10px auto;
	}

	#sptk__iframe__wrapper .btn__options_wrapper .btn--primary {
		margin-bottom : 0;
	}
}