/*Default Settings */
body{
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	font-family: 'Hind', sans-serif;
}

@font-face {
    font-family: 'Shoguns Clan';
    src: url('../fonts/ShogunsClan.eot');
    src: url('../fonts/ShogunsClan.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ShogunsClan.woff2') format('woff2'),
        url('../fonts/ShogunsClan.woff') format('woff'),
        url('../fonts/ShogunsClan.ttf') format('truetype'),
        url('../fonts/ShogunsClan.svg#ShogunsClan') format('svg');
    font-weight: normal;
    font-style: normal;
}
.container-fluid{
	margin: 0px;
	padding: 0px;
}

.row{
	padding: 0px;
	margin: 0px;
}

/*End Defaut Settings*/


/*Page 1*/
#page1{
	background-image: url(../img/pozadina/pozadina_3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 975px;
	position: relative;
}
#page1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}
.navigation{
	position: fixed;
	width: 100%;
	padding: 0px;
	margin: 0px;
	z-index: 1000;
	transition: background-color 0.3s ease;
	animation-name: menu;
    animation-duration: 3s;
    animation-iteration-count: 1;
}
.navigation.sticky-menu {
	background-color: rgba(255, 255, 255 , 0.95);
	-webkit-box-shadow: rgba(0,0,0,.117647) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,.117647) 0 1px 3px;
	box-shadow: rgba(0,0,0,.117647) 0 1px 3px;
}
@keyframes menu {
    from {margin-top: -150px;}
    to {margin-top: 0px;}
}

.main-header{
	padding: 15px 30px;
	margin: 0 auto;
    max-width: 1200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: padding 0.3s ease;
}
.navigation.sticky-menu .main-header {
	padding: 5px 20px;
}
.logo img {
	max-width: 140px;
	transition: max-width 0.3s ease;
}
.navigation.sticky-menu .logo img {
	max-width: 90px;
}
.mobile-button {
	display: none;
}

#page1 .navigation ul{
	text-align: right;
	margin: 0;
	padding: 0;
}

#page1 .navigation ul li {
	display: inline-block;
	padding-right: 30px;
}

#page1 .navigation ul ul{
	display: none;
	position: relative;
	padding: 20px 25px;
	background-color: rgba(255,255,255,0.95);
}

#page1 .navigation ul li a{
	font-size: 24px;
	color: #000;
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
}
#page1 .navigation .main-menu > ul {
	position: relative;
}
#page1 .navigation.sticky-menu ul > li > a {
	font-size: 20px;
}
#page1 .navigation ul li:hover  ul {
    display: block;
    text-decoration: none;
    position: absolute;
    right: 45px;
    text-align: center;
}
#page1 .navigation ul li:hover ul li {
	display: block;
	padding-right: 0;
}

#page1 .navigation ul li a:hover{
	color: black;
	padding-bottom: 5px;
	box-shadow: 0px 2px 0px black;
	font-weight: bolder; 
}

#page1 .navigation ul li .active{
	color: #000;
	box-shadow: 0px 2px 0px #000; 
	padding: 5px;
	font-weight: bolder;	
}

#page1 h1, #page1 h2{
	font-family: 'Shoguns Clan';
    font-weight: normal;
    font-style: normal;
	font-size: 80px;
	text-align: center;
	color: #000;
	margin: 20px;
}

#page1 h2{
	font-size: 240px;
	position: relative;
    left: 0px;
	animation-name: heading;
    animation-duration: 3s;
    animation-iteration-count: 1;
}

.heading{
	margin-top: 170px;
}

/*End Page1*/

.paint-holder {
	overflow: hidden;
}
.painting-tool {
	position: relative;
	max-width: 1100px;
	margin: -90px auto 0;
	display: none;
	transition: transform 0.75s ease-in-out;
}
.palette {
	transform: rotateX(67deg) rotateY(17deg) rotateZ(-54deg);
	width: 500px;
}
.move-tools {
	transform: translate3d(40%, 0, 0);
}
.brush {
    position: absolute;
    top: 10px;
    left: 100px;
}
.starting-brush .brush img,
.activeName .brush img,
.activeBreak .brush img,
.activeSurname .brush img,
.activeOtoC .brush img,
.activePaintI .brush img {
	transform: translate3d(50px,10px,0) rotateZ(10deg);
}
.painting-tool.activeName .brush {
	animation: paintname 4.8s ease forwards;
}
.painting-tool.activeBreak .brush {
	animation: paintbreak 1.2s ease forwards;
}
.painting-tool.activeSurname .brush {
	animation: paintsurname 1.8s ease forwards;
}
.painting-tool.activeStaticO .brush {
    height: 110px;
    width: 110px;
    animation: paintroundO 1s ease forwards;
}
.painting-tool.activeStaticO .brush img {
	animation: paintroundOR 1s ease forwards;
	transform-origin: bottom left;
}
@keyframes paintroundO {
	from {transform: translate3d(70px, -115px, 0) rotate(0deg); }
	to {transform: translate3d(70px, -115px, 0) rotate(-310deg); }
}
@keyframes paintroundOR {
	from {transform: translate3d(65px,-194px,0) rotateZ(10deg) rotate(0deg); }
	to {transform: translate3d(65px,-194px,0) rotateZ(10deg) rotate(310deg); }
}
.painting-tool.activeOtoC .brush {
	animation: paintpathC 0.5s ease forwards;
}
.painting-tool.activeStaticC .brush {
	top: 192px;
    left: 69px;    
    width: 120px;
    height: 120px;
   	animation: paintroundC 1s ease forwards;
}
.painting-tool.activeStaticC .brush img {
	animation: paintroundCR 1s ease forwards;
	transform-origin: bottom left;
}
@keyframes paintroundC {
	from {transform: translate3d(270px, -310px, 0) rotate(0deg); }
	to {transform: translate3d(270px, -310px, 0) rotate(-250deg); }
}
@keyframes paintroundCR {
	from {transform: translate3d(85px,-194px,0) rotateZ(10deg) rotate(0deg); }
	to {transform: translate3d(85px,-194px,0) rotateZ(10deg) rotate(250deg); }
}
.painting-tool.activePaintI .brush {
	animation: paintI 2s ease forwards;
}
.painting-tool.activeStaticCH .brush {
	top: 191px;
    left: 51px;
    width: 120px;
    height: 120px;
   	animation: paintroundCH 1.7s ease forwards;
}
.painting-tool.activeStaticCH .brush img {
	animation: paintroundCHR 1.7s ease forwards;
	transform-origin: bottom left;
}
@keyframes paintroundCH {
	0% {transform: translate3d(490px, -310px, 0) rotate(0deg); }
	60% {transform: translate3d(490px, -310px, 0) rotate(-250deg); }
	100% {transform: translate3d(490px, -310px, 0) rotate(-250deg); }
}
@keyframes paintroundCHR {
	0% {transform: translate3d(85px,-194px,0) rotateZ(10deg) rotate(0deg); }
	60% {transform: translate3d(85px,-194px,0) rotateZ(10deg) rotate(250deg); }
	80% {transform: translate3d(-10px,-88px,0) rotateZ(10deg) rotate(250deg); }
	100% {transform: translate3d(-60px,-105px,0) rotateZ(10deg) rotate(250deg); }
}

@keyframes paintname {
    0% {    transform: translate3d(0, 0, 0);}
    7% {    transform: translate3d(-125px, -345px, 0);}
    14% {    transform: translate3d(-100px, -185px, 0);}
    21% {    transform: translate3d(-60px, -325px, 0);}
    28% {    transform: translate3d(-10px, -185px, 0);}
    35% {    transform: translate3d(20px, -325px, 0);}
    42% {    transform: translate3d(35px, -185px, 0);}
    49% {    transform: translate3d(90px, -325px, 0);}
    56% {    transform: translate3d(135px, -190px, 0);}
    63% {    transform: translate3d(75px, -240px, 0);}
    70% {    transform: translate3d(135px, -265px, 0);}
    77% {    transform: translate3d(175px, -195px, 0);}
    84% {    transform: translate3d(180px, -315px, 0);}
    92% {    transform: translate3d(250px, -200px, 0);}
    100% {   transform: translate3d(240px, -330px, 0);}
}
@keyframes paintbreak {
	0% {   transform: translate3d(240px, -330px, 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(-30px, -380px, 0);}
    40% {    transform: translate3d(-20px, -205px, 0);}
    60% {    transform: translate3d(-100px, -335px, 0);}
    80% {    transform: translate3d(50px, -370px, 0);}
    100% {    transform: translate3d(100px, -300px, 0);}
}
@keyframes paintpathC {
    0% {    transform: translate3d(135px,-275px,0);}
    100% {    transform: translate3d(290px, -313px, 0);}
}
@keyframes paintI {
    0% {    transform: translate3d(307px, -217px, 0);}
    16.66% {    transform: translate3d(340px, -323px, 0);}
    33.33% {    transform: translate3d(352px, -190px, 0);}
    50% {    transform: translate3d(340px, -365px, 0);}
    55.55% {    transform: translate3d(340px, -365px, 0) rotateZ(1deg);}
    61.1% {    transform: translate3d(340px, -365px, 0) rotateZ(-1deg);}
    66.66% {    transform: translate3d(340px, -365px, 0) rotateZ(1deg);}
    72.2% {    transform: translate3d(340px, -365px, 0) rotateZ(-1deg);}
    77.75% {    transform: translate3d(340px, -365px, 0) rotateZ(1deg);}
    83.33% {    transform: translate3d(340px, -365px, 0) rotateZ(-1deg);}
    100% {   transform: translate3d(493px, -314px, 0) rotateZ(0deg);}
}

.name-main {
	display: inline-flex;
	letter-spacing: 0.1em;
	line-height: 0.85;
	position: relative;
	top: -20px;
}
.name-main span {
    opacity: 0;
    display: flex;
    align-items: flex-end;
}
.name-main span.letterI {   
    font-size: 280px;
    position: relative;
    top: 13px;
}
.painting-title.activeName .name-main span.letterI {
	animation: letteropacity 1s ease 0.5s forwards;
}
.name-main span.letterV {
    font-size: 216px;
}
.painting-title.activeName .name-main span.letterV {
	animation: letteropacity 1s ease 1.4s forwards;
}
.name-main span.letterA {
    margin-left: -12px;
    font-size: 217px;
}
.painting-title.activeName .name-main span.letterA {
	animation: letteropacity 1s ease 3s forwards;
}
.name-main span.letterN {
    font-size: 225px;
    position: relative;
    top: 15px;
    margin-left: 9px;
}
.painting-title.activeName .name-main span.letterN {
	animation: letteropacity 1s ease 4.4s forwards;
}
@keyframes letteropacity {
	from {opacity: 0;}
    to {opacity: 1;}
}

.surname-main {
	display: inline-flex;
	line-height: 0.85;
}
.surname-main span {
	opacity: 0;
}
.surname-main strong {
	opacity: 0;
}
.surname-main span.letterT {
	margin-right: -40px;
    font-size: 270px;
}
.painting-title.activeSurname .surname-main span.letterT {
	animation: letteropacity 1s ease 1s forwards;
}
.surname-main span.letterO {
	font-size: 270px;
	position: relative;
    top: 5px;
}
.painting-title.activeSurname .surname-main span.letterO {
	animation: letteropacity 1s ease 2.1s forwards;
}
.surname-main span.letterC {
	font-size: 240px;
    position: relative;
    top: 18px;
}
.painting-title.activeSurname .surname-main span.letterC {
	animation: letteropacity 1s ease 3.5s forwards;
}
.surname-main span.letterI-sec {
	position: relative;
    top: 29px;
    font-size: 220px;
    margin: 0 3px;
}
.painting-title.activeSurname .surname-main span.letterI-sec {
	animation: letteropacity 1s ease 4.7s forwards;
}
.surname-main strong.dot {
	display: block;
    font-weight: normal;
    position: absolute;
    left: -7px;
    bottom: calc(100% - 35px);
    font-size: 270px;
}
.painting-title.activeSurname .surname-main strong.dot {
	animation: letteropacity 1s ease 5.35s forwards;
}
.surname-main span.letterCH {
	font-size: 240px;
    position: relative;
    top: 18px;
}
.painting-title.activeSurname .surname-main span.letterCH {
	animation: letteropacity 1s ease 6.5s forwards;
}
.surname-main strong.apo {
	display: block;
    font-weight: normal;
    position: absolute;
    top: -65px;
    left: 75px;
    font-size: 160px;
    transform: rotateZ(45deg) rotateX(55deg);
}
.painting-title.activeSurname .surname-main strong.apo {
	animation: letteropacity 1s ease 7.6s forwards;
}




.name-drawing {
	text-align: center;
	font-size: 200px;
	font-family: 'Shoguns Clan';
	font-weight: normal;
	font-style: normal;
	letter-spacing: 2px;
	opacity: 0;
}
.name-drawing.active {
	opacity: 1;
}
.name-drawing > div {
	display: inline-block;
	transition: transform 2s ease, opacity 2s ease;
	opacity: 0;
}
.name-drawing.active > div {
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) !important;
	opacity: 1;
}
.name-drawing .blank {
	margin: 0 20px;
}