@media screen and (max-width: 1279px) {
	#page1 h1 {
		font-size: 55px;
		margin-top: 0;
	}
	.palette {
		width: 420px;
	}
	.painting-tool {
		max-width: 900px;
	}
	.brush img {
		width: 170px;
	}
	.name-main {
		letter-spacing: 0.08em;
	}
	.name-main span.letterI {
		font-size: 225px;
	}
	.name-main span.letterV {
		font-size: 161px;
	}
	.name-main span.letterA {
		font-size: 162px;
	}
	.name-main span.letterN {
		font-size: 170px;
	}
	.surname-main span.letterT {
		font-size: 215px;
	}
	.surname-main span.letterO {
		font-size: 215px;
	}
	.surname-main span.letterC {
		font-size: 185px;
	}
	.surname-main span.letterI-sec {
		font-size: 165px;
	}
	.surname-main span.letterCH {
		font-size: 185px;
	}
	.surname-main strong.apo {
		top: -58px;
		left: 65px;
		font-size: 135px;
	}
	@keyframes paintname {
	    0% {    transform: translate3d(0, 0, 0);}
	    7% {    transform: translate3d(-105px, -295px, 0);}
	    14% {    transform: translate3d(-90px, -160px, 0);}
	    21% {    transform: translate3d(-55px, -265px, 0);}
	    28% {    transform: translate3d(-20px, -165px, 0);}
	    35% {     transform: translate3d(5px, -265px, 0);}
	    42% {     transform: translate3d(10px, -160px, 0);}
	    49% {     transform: translate3d(56px, -270px, 0);}
	    56% {     transform: translate3d(90px, -160px, 0);}
	    63% {     transform: translate3d(42px, -203px, 0);}
	    70% {     transform: translate3d(90px, -223px, 0);}
	    77% {     transform: translate3d(125px, -170px, 0);}
	    84% {     transform: translate3d(125px, -250px, 0);}
	    92% {     transform: translate3d(175px, -175px, 0);}
	    100% {     transform: translate3d(175px, -265px, 0);}
	}
	@keyframes paintbreak {
		0% {   transform: translate3d(175px, -265px, 0);}
		50% {    transform: translate3d(0, 0, 0);}
		58.33% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg); }
		66.66% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
		75% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg);}
		83.33% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
		91.66% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg);}
		100% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	}
	@keyframes paintsurname {
	    0% {    transform: translate3d(0, 0, 0);}
	    20% {    transform: translate3d(-43px, -310px, 0);}
	    40% {    transform: translate3d(-33px, -165px, 0);}
	    60% {    transform: translate3d(-105px, -275px, 0);}
	    80% {    transform: translate3d(25px, -305px, 0);}
	    100% {    transform: translate3d(58px, -253px, 0);}
	}
	.painting-tool.activeStaticO .brush {
	    height: 92px;
	    width: 92px;
	}
	@keyframes paintroundO {
		from {transform: translate3d(36px, -93px, 0) rotate(0deg); }
		to {transform: translate3d(36px, -93px, 0) rotate(-310deg); }
	}
	@keyframes paintroundOR {
		from {transform: translate3d(58px, -168px,0) rotateZ(10deg) rotate(0deg); }
		to {transform: translate3d(58px, -168px,0) rotateZ(10deg) rotate(310deg); }
	}
	@keyframes paintpathC {
	    0% {    transform: translate3d(87px, -230px, 0);}
	    100% {   transform: translate3d(204px, -253px, 0);}
	}
	.painting-tool.activeStaticC .brush {
		top: 225px;
	    left: 2px;    
	    width: 90px;
	    height: 90px;
	}
	@keyframes paintroundC {
		from {transform: translate3d(270px, -310px, 0) rotate(0deg); }
		to {transform: translate3d(270px, -310px, 0) rotate(-265deg); }
	}
	@keyframes paintroundCR {
		from {transform: translate3d(68px,-164px,0) rotateZ(10deg) rotate(0deg); }
		to {transform: translate3d(68px,-164px,0) rotateZ(10deg) rotate(265deg); }
	}
	@keyframes paintI {
	    0% {    transform: translate3d(217px, -188px, 0);}
	    16.66% {    transform: translate3d(240px, -265px, 0);}
	    33.33% {   transform: translate3d(250px, -160px, 0);}
	    50% {   transform: translate3d(245px, -295px, 0);}
	    55.55% {    transform: translate3d(245px, -295px, 0) rotateZ(1deg);}
	    61.1% {    transform: translate3d(245px, -295px, 0) rotateZ(-1deg);}
	    66.66% {    transform: translate3d(245px, -295px, 0) rotateZ(1deg);}
	    72.2% {   transform: translate3d(245px, -295px, 0) rotateZ(-1deg);}
	    77.75% {    transform: translate3d(245px, -295px, 0) rotateZ(1deg);}
	    83.33% {    transform: translate3d(245px, -295px, 0) rotateZ(-1deg);}
	    100% {   transform: translate3d(362px, -248px, 0) rotateZ(0deg);}
	}
	.painting-tool.activeStaticCH .brush {
		top: 225px;
	    left: -64px;    
	    width: 90px;
	    height: 90px;
	}
	@keyframes paintroundCH {
		0% {transform: translate3d(490px, -310px, 0) rotate(0deg); }
		60% {transform: translate3d(490px, -310px, 0) rotate(-275deg); }
		100% {transform: translate3d(490px, -310px, 0) rotate(-275deg); }
	}
	@keyframes paintroundCHR {
		0% {transform: translate3d(72px,-160px,0) rotateZ(10deg) rotate(0deg); }
		60% {transform: translate3d(72px,-160px,0) rotateZ(10deg) rotate(275deg); }
		80% {transform: translate3d(-21px,-120px,0) rotateZ(10deg) rotate(275deg); }
		100% {transform: translate3d(-57px,-155px,0) rotateZ(10deg) rotate(275deg); }
	}
}

@media screen and (max-width: 979px) {
	#page1 h1 {
	    font-size: 50px;
	}
	#page1 h2 {
		margin-top: 0;
	}
	.palette {
		width: 350px;
	}
	.painting-tool {
		max-width: 700px;
	}
	.brush img {
		width: 150px;
	}
	.name-main {
		letter-spacing: 0.05em;
	}
	.name-main span.letterI {
		font-size: 185px;
	}
	.name-main span.letterV {
		font-size: 121px;
	}
	.name-main span.letterA {
		font-size: 122px;
	}
	.name-main span.letterN {
		font-size: 130px;
	}
	.surname-main span.letterT {
		font-size: 175px;
	}
	.surname-main span.letterO {
		font-size: 175px;
	}
	.surname-main span.letterC {
		font-size: 145px;
	}
	.surname-main span.letterI-sec {
		font-size: 125px;
	}
	.surname-main span.letterCH {
		font-size: 145px;
	}
	.surname-main strong.dot {
	    left: -10px;
	    bottom: calc(100% - 27px);
	    font-size: 220px;
	}
	.surname-main strong.apo {
	    top: -50px;
	    left: 45px;
	    font-size: 115px;
	}
	.starting-brush .brush img,
	.activeName .brush img,
	.activeBreak .brush img,
	.activeSurname .brush img,
	.activeOtoC .brush img,
	.activePaintI .brush img {
		transform: translate3d(20px,0,0) rotateZ(10deg);
	}
	@keyframes paintname {
	    0% {    transform: translate3d(0, 0, 0);}
	    7% {    transform: translate3d(-80px, -250px, 0);}
	    14% {    transform: translate3d(-70px, -130px, 0);}
	    21% {    transform: translate3d(-45px, -220px, 0);}
	    28% {    transform: translate3d(-21px, -133px, 0);}
	    35% {    transform: translate3d(0px, -215px, 0);}
	    42% {    transform: translate3d(0px, -130px, 0);}
	    49% {    transform: translate3d(30px, -220px, 0);}
	    56% {    transform: translate3d(57px, -135px, 0);}
	    63% {    transform: translate3d(20px, -165px, 0);}
	    70% {    transform: translate3d(58px, -180px, 0);}
	    77% {    transform: translate3d(83px, -130px, 0);}
	    84% {   transform: translate3d(80px, -205px, 0);}
	    92% {   transform: translate3d(122px, -137px, 0);}
	    100% {    transform: translate3d(120px, -213px, 0);}
	}
	@keyframes paintbreak {
		0% {    transform: translate3d(120px, -213px, 0);}
		50% {    transform: translate3d(0, 0, 0);}
		58.33% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg); }
		66.66% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
		75% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg);}
		83.33% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
		91.66% {    transform: rotateX(10deg) rotateY(10deg) rotateZ(5deg);}
		100% {    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	}
	@keyframes paintsurname {
	    0% {    transform: translate3d(0, 0, 0);}
	    20% {     transform: translate3d(-35px, -257px, 0);}
	    40% {    transform: translate3d(-25px, -125px, 0);}
	    60% {    transform: translate3d(-85px, -225px, 0);}
	    80% {     transform: translate3d(25px, -250px, 0);}
	    100% {    transform: translate3d(40px, -200px, 0);}
	}
	.painting-tool.activeStaticO .brush {
	    height: 72px;
	    width: 72px;
	}
	@keyframes paintroundO {
		from {transform: translate3d(2px, -70px, 0) rotate(0deg); }
		to {transform: translate3d(2px, -70px, 0) rotate(-315deg); }
	}
	@keyframes paintroundOR {
		from {transform: translate3d(46px, -145px,0) rotateZ(10deg) rotate(0deg); }
		to {transform: translate3d(46px, -145px,0) rotateZ(10deg) rotate(315deg); }
	}
	@keyframes paintpathC {
	    0% {    transform: translate3d(59px, -185px, 0);}
	    100% {   transform: translate3d(160px, -200px, 0);}
	}
	.painting-tool.activeStaticC .brush {
		top: 245px;
	    left: -62px;    
	    width: 72px;
	    height: 72px;
	}
	@keyframes paintroundC {
		from {transform: translate3d(270px, -310px, 0) rotate(0deg); }
		to {transform: translate3d(270px, -310px, 0) rotate(-285deg); }
	}
	@keyframes paintroundCR {
		from {transform: translate3d(60px,-140px,0) rotateZ(10deg) rotate(0deg); }
		to {transform: translate3d(60px,-140px,0) rotateZ(10deg) rotate(285deg); }
	}
	@keyframes paintI {
	    0% {    transform: translate3d(167px, -158px, 0);}
	    16.66% {    transform: translate3d(185px, -213px, 0);}
	    33.33% {   transform: translate3d(192px, -133px, 0);}
	    50% {   transform: translate3d(184px, -238px, 0);}
	    55.55% {    transform: translate3d(184px, -238px, 0) rotateZ(1deg);}
	    61.1% {    transform: translate3d(184px, -238px, 0) rotateZ(-1deg);}
	    66.66% {    transform: translate3d(184px, -238px, 0) rotateZ(1deg);}
	    72.2% {   transform: translate3d(184px, -238px, 0) rotateZ(-1deg);}
	    77.75% {    transform: translate3d(184px, -238px, 0) rotateZ(1deg);}
	    83.33% {    transform: translate3d(184px, -238px, 0) rotateZ(-1deg);}
	    100% {   transform: translate3d(278px, -202px, 0) rotateZ(0deg);}
	}
	.painting-tool.activeStaticCH .brush {
		top: 247px;
		left: -157px;
		width: 70px;
		height: 70px;
	}
	@keyframes paintroundCH {
		0% {transform: translate3d(490px, -310px, 0) rotate(0deg); }
		60% {transform: translate3d(490px, -310px, 0) rotate(-275deg); }
		100% {transform: translate3d(490px, -310px, 0) rotate(-275deg); }
	}
	@keyframes paintroundCHR {
		0% {transform: translate3d(53px,-143px,0) rotateZ(10deg) rotate(0deg); }
		60% {transform: translate3d(55px,-145px,0) rotateZ(10deg) rotate(275deg); }
		80% {transform: translate3d(-15px,-103px,0) rotateZ(10deg) rotate(275deg); }
		100% {transform: translate3d(-46px,-134px,0) rotateZ(10deg) rotate(275deg); }
	}
}

@media screen and (max-width: 767px) {
	#page1 h1 {
	    font-size: 40px;
	}
	#page1 h2 {
		font-size: 65px;
	}
	.name-drawing .blank {
		display: block;
	}
	.name-drawing > div {
		margin-bottom: 8px;
	}
	.painting-tool {
	   	display: none !important;
	}
	.name-main span,
	.surname-main span,
	.surname-main strong {
		opacity: 1 !important;
	}
	.name-main {
		letter-spacing: 0.05em;
	}
	.surname-main {
	    letter-spacing: -0.02em;
	}
	.name-main span.letterI {
		font-size: 145px;
	}
	.name-main span.letterV {
		font-size: 81px;
		margin-right: 10px;
	}
	.name-main span.letterA {
		font-size: 82px;
	}
	.name-main span.letterN {
		font-size: 90px;
		top: 8px;
	}
	.surname-main span.letterT {
		font-size: 135px;
	}
	.surname-main span.letterO {
		font-size: 135px;
		margin-left: 15px;
	}
	.surname-main span.letterC {
		font-size: 105px;
	}
	.surname-main span.letterI-sec {
		font-size: 85px;
	}
	.surname-main span.letterCH {
		font-size: 105px;
	}
	.surname-main strong.dot {
	    left: -7px;
	    bottom: calc(100% - 20px);
	    font-size: 190px;
	}
	.surname-main strong.apo {
	    top: -36px;
	    left: 37px;
	    font-size: 80px;
	}
	@keyframes letteropacity {
		from {opacity: 1;}
	    to {opacity: 1;}
	}
}