@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
    background-color: #252525;
}

a {
    font-family: 'Raleway', sans-serif;
    color: #7FBCD6;
    text-decoration: none;
}

#desktopvers {
    display: block;
}
    
#mobilevers{
    display: none;
}

#lightbox {
    max-height: 100%;
    max-width: 100%;
    z-index: 3;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

#lightboxmobile {
    max-height: 0px;
    max-width: 0px;
    z-index: 3;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

#profilebox {
    position: fixed;
    background-color:  #FFFFFF;
    overflow:scroll;
    width: 40vw;
    height: 30vw;
    margin-left: 50vw;
    margin-top: 25vh;
    z-index: 4;
     border-radius: 50px;
    border-width: 3px;
    border-style: solid;
    border-color: #F3ED8B;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: none;
    padding: 20px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 2.8vw;
    color: #7FBCD6;
}

#aboutbox {
    font-size: 1.5vw;   
}

#titlecont {
    margin-top: 20vh;
    margin-left: 35vw;
    width: 30vw;
    z-index: 1;
    position: fixed;
}

#titlecontmobile {
    margin-top: 15vh;
    margin-left: 25vw;
    width: 50vw;
    min-width: 30vw;
    z-index: 1;
    position: fixed;
    display: none;
}

.titleimg {
    width: 100%;
    transform: translateY(150px);
    animation: movelogo 6s ease infinite;
/*    animation: logofade 10s ease infinite;*/
}

.profilecont {
    width:16vw;
    max-width: 170px;
}

#mattcont {
    margin-left: 23vw;
    margin-top: 110vh;
    position: fixed;
}

#simcont {
    margin-left: 33vw;
    margin-top: 100vh;
    position: fixed;
}

#harrycont {
    margin-left: 51vw;
    margin-top: 110vh;
    position: fixed;
}

#margotcont {
    margin-left: 62vw;
    margin-top: 100vh;
    position: fixed;
}

#kimcont {
    margin-left: 24vw;
    margin-top: 135vh;
    position: fixed;
}

#innocentcont {
    margin-left: 42vw;
    margin-top: 135vh;
    position: fixed;
}

#burakcont {
    margin-left: 60vw;
    margin-top: 135vh;
    position: fixed;
}

.personimg {
    width: 100%; 
}

#svgcanv {

    margin-left: -1vw;
    z-index: -1;
    margin-top: 0%;
    width: 102%;

}

.svgmobilecanv {
    position: fixed;
    margin-left: -1vw;
    z-index: -1;
    margin-top: 40vh;
    width: 102%;

}

.st0{fill:#F4ED8A;stroke:#F4ED8A;stroke-width:4;stroke-miterlimit:10;}
.st1{fill:#D97190;stroke:#D97190;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:#75BA5D;stroke:#75BA5D;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:#7EBCD6;stroke:#7EBCD6;stroke-width:4;stroke-miterlimit:10;}
.st4{fill:#D97190;stroke:#D97190;stroke-miterlimit:10;}
.st5{fill:#75BA5D;}

@keyframes movelogo {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateX(10px) translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateX(10px) translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateX(-10px) translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble4 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateX(-10px) translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble5 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateX(50px) translateY(50px);
  }
  50% {
    transform: translateX(70px) translateY(0px);
  }
  75% {
    transform: translateX(0px) translateY(60px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble6 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateX(-50px) translateY(-50px);
  }
  50% {
    transform: translateX(-100px) translateY(0px);
  }
  75% {
    transform: translateX(0px) translateY(-60px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble7 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateX(50px) translateY(-50px);
  }
  50% {
    transform: translateX(100px) translateY(50px);
  }
  75% {
    transform: translateX(50px) translateY(-60px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes movebubble8 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateX(-80px) translateY(-50px);
  }
  50% {
    transform: translateX(100px) translateY(50px);
  }
  75% {
    transform: translateX(-50px) translateY(-60px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes hideprofiles1 {
  0% {
    margin-top: 20vh;
  }
  100% {
    margin-top: -100vh;
  }
}

@keyframes hideprofiles2 {
  0% {
    margin-top: 2vh;
  }
  100% {
    margin-top: -100vh;
  }
}

@keyframes hideprofiles3 {
  0% {
    margin-top: 70vh;
  }
  100% {
    margin-top: 150vh;
  }
}

@keyframes hideprofiles4 {
  0% {
    margin-top: 60vh;
  }
  100% {
    margin-top: 150vh;
  }
}

@keyframes transitionprofiles11 {
  0% {
    margin-top: -80vh;
  }
  100% {
   margin-top: 35vh;
  }
}

@keyframes transitionprofiles12 {
  0% {
    margin-top: -90vh;
  }
  100% {
    margin-top: 17vh;
  }
}

@keyframes transitionprofiles5 {
  0% {
    margin-top: -80vh;
  }
  100% {
    margin-top: 25vh;
  }
}

@keyframes transitionprofiles6 {
  0% {
    margin-top: -90vh;
  }
  100% {
    margin-top: 4vh;
  }
}

@keyframes transitionprofiles1 {
  0% {
    margin-top: 110vh;
  }
  100% {
    margin-top: 25vh;
  }
}

@keyframes transitionprofiles9 {
  0% {
    margin-top: 110vh;
  }
  100% {
    margin-top: 35vh;
  }
}

@keyframes transitionprofiles10 {
  0% {
    margin-top: 110vh;
  }
  100% {
    margin-top: 17vh;
  }
}

@keyframes transitionprofiles2 {
  0% {
    margin-top: 110vh;
  }
  100% {
    margin-top: 4vh;
  }
}

@keyframes transitionprofiles3 {
  0% {
    margin-top: 135vh;
  }
  100% {
    margin-top: 65vh;
  }
}

@keyframes transitionprofiles7 {
  0% {
    margin-top: 135vh;
  }
  100% {
    margin-top: 57vh;
  }
}

@keyframes transitionprofiles8 {
  0% {
    margin-top: 135vh;
  }
  100% {
    margin-top: 68vh;
  }
}

@keyframes transitionprofiles4 {
  0% {
    margin-top: 135vh;
  }
  100% {
    margin-top: 50vh;
  }
}

@keyframes transitionsvg {
  0% {
    margin-top: 0vh;
  }
  100% {
    margin-top: -80vh;
  }
}

@keyframes transitionmobilesvg {
  0% {
    margin-top: 0vh;
  }
  100% {
    margin-top: -70vh;
  }
}

@keyframes transitioninfobox {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: 30vw;
    opacity: 1;
  }
}

@keyframes transitionawayinfobox {
  0% {
    height: 30vw;
    opacity: 1;
  }
  100% {
    height: 0vw;
    opacity: 0;
  }
}

@keyframes logoshrinktotal {
0%   {
    width: 20vw;
    margin-left: 40vw;   
    margin-top: 30vh;
    }
100% {
    margin-top: 50vh;
    margin-left: 50vw;
    width: 0vw;
    }
}

@keyframes logogrowtotal {
0%   {
    width: 0vw;
    margin-left: 50vw;   
    margin-top: 50vh;
    }
100% {
    margin-top: 30vh;
    margin-left: 40vw;
    width: 20vw;
    }
}

@keyframes logoshrink {
0%   {
    max-width: 600px;
    width: 30vw;
    margin-left: 35vw;   
    margin-top: 20vh;
    }
100% {
    margin-top: 30vh;
    max-width: 223px;
    margin-left: 40vw;
    width: 20vw;
    }
}

@keyframes logoshrinkmobile {
0%   {
    width: 50vw;
    margin-left: 25vw;   
    margin-top: 15vh;
    }
100% {
    margin-top: 35vh;
    margin-left: 28vw;
    width: 20vw;
    }
}

@keyframes animationgrow {
0%   {max-width: 170px; margin-top: 20vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes simgrow {
0%   {max-width: 170px; margin-top: 2vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes harrygrow {
0%   {max-width: 170px; margin-top: 2vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes margotgrow {
0%   {max-width: 170px; margin-top: 20vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes kimgrow {
0%   {max-width: 170px; margin-top: 60vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes innocentgrow {
0%   {max-width: 170px; margin-top: 70vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes burakgrow {
0%   {max-width: 170px; margin-top: 60vh; width: 16vw; position: fixed;}
100% {max-width: 30vw; z-index: 5; margin-left: 20vh; margin-top: 25vh; width: 30vw; position: fixed;}
}

@keyframes profilemove1 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateX(-10px) translateY(10px);
  }
  50% {
    transform: translateX(-20px) translateY(0px);
  }
  75% {
    transform: translateX(10px) translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

#circle1 {
  transform: translateY(150px);
  animation: movebubble 5s ease infinite;
}

#circle2 {
  transform: translateY(150px);
  animation: movebubble2 6s ease infinite;
}

#circle4 {
  transform: translateY(150px);
  animation: movebubble 4.5s ease infinite;
}

#circle3 {
  transform: translateY(150px);
  animation: movebubble2 5.5s ease infinite;
}

#circle5 {
  transform: translateY(150px);
  animation: movebubble3 4s ease infinite;
}

#circle6 {
  transform: translateY(150px);
  animation: movebubble2 6s ease infinite;
}

#circle7 {
  transform: translateY(150px);
  animation: movebubble 5.2s ease infinite;
}

#circle8 {
  transform: translateY(150px);
  animation: movebubble4 4s ease infinite;
}

#circle9 {
  transform: translateY(150px);
  animation: movebubble5 12s ease infinite;
}

#circle10 {
  transform: translateY(150px);
  animation: movebubble6 11s ease infinite;
}

#circle11 {
  transform: translateY(150px);
  animation: movebubble7 10.5s ease infinite;
}

#circle12 {
  transform: translateY(150px);
  animation: movebubble8 11.5s ease infinite;
}

#circle13 {
  transform: translateY(150px);
  animation: movebubble5 9.5s ease infinite;
}

#circle14 {
  transform: translateY(150px);
  animation: movebubble6 10s ease infinite;
}

#circle15 {
  transform: translateY(150px);
  animation: movebubble7 13.0s ease infinite;
}

.profile1 {
  animation: movelogo 13.0s ease infinite;
}

@media only screen and (max-height: 600px) {
    
.profilecont {
    width:14vw;
    max-width: 170px;
}
    
@keyframes logoshrink {
0%   {
    max-width: 600px;
    width: 30vw;
    margin-left: 35vw;   
    margin-top: 20vh;
    }
100% {
    margin-top: 27vh;
    max-width: 223px;
    margin-left: 39vw;
    width: 20vw;
    }
}
    
}

@media only screen and (max-height: 450px) {
    
.profilecont {
    width:11vw;
    max-width: 170px;
}
    
@keyframes logoshrink {
0%   {
    max-width: 600px;
    width: 30vw;
    margin-left: 35vw;   
    margin-top: 20vh;
    }
100% {
    margin-top: 24vh;
    max-width: 223px;
    margin-left: 39vw;
    width: 16vw;
    }
}
    
}

@media only screen and (max-width: 600px) {

#desktopvers {
    display: none;
}
    
#mobilevers{
    display: block;
}
    
#titlecont {
    margin-top: 15vh;
    margin-left: 25vw;
    width: 50vw;
    min-width: 30vw;
    z-index: 1;
    position: fixed;
}
    
#titlecontmobile {
    margin-top: 15vh;
    margin-left: 25vw;
    width: 50vw;
    min-width: 40vw;
    z-index: 1;
    position: fixed;
    display: block;
}
    
#svgmobilecanv {
    z-index: -1;
    margin-left: -20%;
    margin-top: 20%;
    width: 130%;

}
    
.profilecont {
    width:25vw;
}

#mattcont {
    margin-left: 1vw;
}

#simcont {
    margin-left: 20vw;
}

#harrycont {
    margin-left: 50vw;
}

#margotcont {
    margin-left: 70vw;
}
    
#kimcont {
    margin-left: 6vw;
}

#innocentcont {
    margin-left: 36vw;
}

#burakcont {
    margin-left: 67vw;
    margin-top: 135vh;
    position: fixed;
}
    
#titlecontmobile {
    display: block;
} 
    
#titlecont {
    display: none;
}
    
#lightbox {
    max-height: 0px;
    max-width: 0px;
    z-index: 3;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

#lightboxmobile {
    max-height: 100%;
    max-width: 100%;
    z-index: 3;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}
    
#profilebox {
    width: 80vw;
    margin-left: 10vw;
    margin-top:35vh;
    font-size: 8vw;
}
    
#aboutbox {
    font-size: 4vw;   
}
    
@keyframes transitioninfobox {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: 70vw;
    opacity: 1;
  }
}
    
@keyframes transitionawayinfobox {
  0% {
    height: 70vw;
    opacity: 1;
  }
  100% {
    height: 0vw;
    opacity: 0;
  }
}
    
@keyframes animationgrow {
0%   {max-width: 170px; margin-top: 20vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes simgrow {
0%   {max-width: 170px; margin-top: 2vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes harrygrow {
0%   {max-width: 170px; margin-top: 2vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes margotgrow {
0%   {max-width: 170px; margin-top: 20vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes kimgrow {
0%   {max-width: 170px; margin-top: 60vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes innocentgrow {
0%   {max-width: 170px; margin-top: 70vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}

@keyframes burakgrow {
0%   {max-width: 170px; margin-top: 60vh; width: 16vw; position: fixed;}
100% {max-width: 34vw; z-index: 5; margin-left: 33vw; margin-top: 5vh; width: 34vw; position: fixed;}
}
    
}