html, body {margin:0;padding:0;}
h1,h2,h3,h4,p {margin:0;padding:0;}
* {box-sizing: border-box;}
a {text-decoration: none;color:#78909c;transition:color ease-in-out 200ms;}
a:hover {color:#2170ea;}
body {min-width:100vw;min-height:100vh;font-family: 'Poppins', sans-serif;background: radial-gradient(ellipse at center, #7c8dcc 0%,#0055bd 100%)}
input, textarea, button {outline:none;}

#site {width:100vw;height:100vh;vertical-align: middle;justify-content: center;align-items: center;overflow:hidden;display:none;}
body #site.initialize  {display:flex;}
    #container {display:flex;flex-direction: row;width:90%;justify-content: center;transition:all linear 20ms;}
        header {height:600px;background-color:#ffffff;box-shadow: -10px 10px 1px rgba(0,0,0,0.1);z-index:2;position: relative;z-index:10;}
        header > .title {position:relative;width:480px;}
        header > .title > .bg {display:block;width:100%;height:350px;margin-bottom:65px;overflow:hidden;}
        header > .title > .bg.showIn {opacity:1;}
        header > .title > .bg::before {content:'';display:block;height:250px;height: 100%;-webkit-clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);background:url(../images/header_bg.jpg);background-size:cover;}
        header > .title > .bg.showIn::before {animation: runInUp ease-in-out 700ms;}
        header > .title > .img {position: absolute;width:150px;height:150px;left:0;right:0;margin:0 auto;top:250px;border-radius: 100%;overflow: hidden;padding:3px;background-color:#FFF;box-shadow: -10px 10px 0 rgba(33, 112, 234, 0.3);}
        header > .title > .img > img {max-width: 100%;max-height:100%;border-radius: 100%;animation-duration: 100ms;}
        header > .title > .info {text-align: center;}
        header > .title > .info > h1 {font-size:28px;margin-bottom:0px;font-weight: 600;animation-duration: 700ms;}
        header > .title > .info > p {font-size:16px;color:#2170ea;animation-duration: 700ms;}
        header > .buttons {display:flex;width:100%;position:absolute;bottom:0;left:0;align-items: stretch;overflow:hidden;}
        header > .buttons > .item {display:flex;width:100%;align-items:center;justify-content: center;color:#78909c;border-top:1px solid #eeeeee;border-right: 1px solid #eeeeee;font-size:12px;cursor:pointer;transition:all ease-in-out 200ms;font-weight: 600;}
        header > .buttons > .item > a {display:block;padding:20px;width:100%;text-align: center;}
        header > .buttons > .item:hover{background-color:#FFF;}
        header > .buttons > .item:last-child {border-right:none;}
            #menu {position:absolute;left:-80px;box-shadow: -10px 10px 0 rgba(0,0,0,0.1);}        
            #menu > .item {width:70px;height:70px;background-color:#ffffff;text-align: center;border:1px solid #eeeeee;border-bottom:none;cursor:pointer;text-align: center;display:flex;flex-direction: column;align-items: center;justify-content: center;color:#000;transition:all ease-in-out 200ms;user-select: none;}   
            #menu > .item:hover, #menu > .item.active {color:#2170ea;}
            #menu > .item > i {font-size:18px;display:block;margin-bottom:5px;}
            #menu > .item > span {font-size:12px;}
        header > .contacts {display:flex;justify-content: center;margin-top:10px;vertical-align: middle;}
        header > .contacts > a {font-size:18px;color:#909090;margin:0 5px;}
        header > .contacts > a.linkedin:hover {color:#0077B5;}
        header > .contacts > a.github:hover {color:#24292e;}
        header > .contacts > a.r10:hover {color:#3f4257;}

        
        #content {display:none;min-height: 100%;width:0;height:550px;margin-top:25px;position: relative;}
        #content.animation-in {display:flex;width:600px;}
        #content > .item {height:100%;display:none;transform-origin: left bottom;background-color:#FAFAFA;width:615px;box-shadow: 10px 10px 1px rgba(0,0,0,0.1);position: absolute;top:0;left:-30px;z-index:1;overflow:hidden;padding-left:30px;padding-bottom:25px;}
        #content > .item.show {display:block;z-index:2;}


        .test {background-color:#000;width:200px;height:300px;font-size:100px;color:#FFF;text-align: center;}

.tooltip {position:relative;}
.tooltip > .tooltip-container {position:absolute;padding:3px 10px;font-size:12px;color:#FFF;background-color:#000;transform:translateX(-50%);left:0;margin-left:50%;z-index:10;display:none;white-space: nowrap;}
.tooltip:hover > .tooltip-container {display:block;}
.tooltip > .tooltip-container::after {content:'';display:block;left:0;right:0;margin:auto;position: absolute;width:0;height:0;border:9px solid transparent;}
.tooltip > .tooltip-container.tc-up {top:-35px;}
.tooltip > .tooltip-container.tc-up::after {top:100%;border-bottom:none;border-top-color:#000;}
.tooltip > .tooltip-container.tc-down {bottom:-35px;}
.tooltip > .tooltip-container.tc-down::after {bottom:100%;border-top:none;border-bottom-color:#000;}
.tooltip > .tooltip-container.tc-left {right:calc(100% + 15px);left:auto;top:3px;transform:none;}
.tooltip > .tooltip-container.tc-left::after {left:calc(100% - 1px);top:2px;border-right:none;border-left-color:#000;}
.tooltip > .tooltip-container.tc-right {left:calc(100% + 5px);right:auto;top:1px;transform:none;}
.tooltip > .tooltip-container.tc-right::after {right:calc(100% - 1px);left:auto;top:3px;border-left:none;border-right-color:#000;}

.block {font-size:14px;}
.block > .title {padding:20px 15px;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;}
.block > .title > h2 {font-weight: normal;}
.block > .cont {margin:0 15px;border-left:1px solid #eeeeee;border-right:1px solid #eeeeee;display:flex;flex-wrap: wrap;}
.block > .cont p {padding:15px;}
.block > .cont > .img-text-block {width:33.33%;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;padding:15px;}
.block > .cont > .img-text-block > .img-wrapper {margin-bottom:10px;position:relative;}
.block > .cont > .img-text-block > .img-wrapper > .img {border-radius:100%;border:1px solid #eeeeee;padding:5px;background-color:#FFF;overflow:hidden;transform:rotateY(-90deg);transition:transform ease-out 300ms;transition-delay: 300ms;}
.block > .cont > .img-text-block > .img-wrapper > .img > img {width:100%;border-radius:100%;display:block;}
.block > .cont > .img-text-block > .img-wrapper > .loader {position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100%;background-color:#ddd;transition:transform ease-in 300ms;}
.block > .cont > .img-text-block > .img-wrapper > .loader::after {content:'';display:block;width:40px;height:40px;border-radius:50%;border: 5px solid #FFF;border-color:#fff transparent #fff transparent;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;animation:rotate linear 2s infinite;}
.block > .cont > .img-text-block > .img-wrapper.loaded > .loader {transform:rotateY(90deg);}
.block > .cont > .img-text-block > .img-wrapper.loaded > .img {transform:rotateY(0deg);}
.block > .cont > .img-text-block > .text {text-align: center;}
.block > .cont > .img-text-block > .text > h3 {line-height:15px;}
.block > .cont > .img-text-block > .text > span {font-size:14px;line-height: 14px;}

.timeline {padding:10px 15px 20px 15px;position:relative;}
.timeline::before {content:'';display: block;position:absolute;width:3px;height:calc(100% - 60px);top:30px;left:-2px;background-color:#2170ea;}
.timeline > .item {position:relative;padding:0 10px;margin:25px 0;}
.timeline > .item:first-child {margin-top:15px;}
.timeline > .item::before {content:'';display:block;width:11px;height:11px;border-radius:100%;background-color:#2170ea;position: absolute;left:-21px;top:4px;}
.timeline::after {top:calc(100% - 40px);left:-6px;}
.timeline > .item > .date {font-size:13px;font-weight: bold;color:#2170ea;margin-bottom:10px;}
.timeline > .item > .title {font-weight: bold;line-height: 16px;}
.timeline > .item > .tech {margin-bottom:5px;}

.img-bw-title {width:100%;overflow:hidden;position: relative;}
.img-bw-title > img {width:100%;display:block;}
.img-bw-title > .text {position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.6);color:#FFFFFF;text-align: center; display:flex;align-items: center;flex-direction: column;justify-content: center;padding:15px;}
.img-bw-title > .text > h2 {font-size:36px;line-height:40px;}
.img-bw-title > .text > .cont {margin-top:50px;display:flex;flex-wrap: wrap;width:60%;}
.img-bw-title > .text > .cont > .item {width:50%;text-align:left;display:flex;align-items: center;margin-bottom:10px;opacity:0.8;}
.img-bw-title > .text > .cont > .item:hover {opacity: 1;}
.img-bw-title > .text > .cont > .item:nth-child(2n) {flex-direction: row-reverse;}
.img-bw-title > .text > .cont > .item > i {margin-right:5px;font-size:18px;width:18px;line-height:18px;text-align: center;}
.img-bw-title > .text > .cont > .item:nth-child(2n) > i {margin: 0 0 0 5px;}
.img-bw-title > .text > .cont > .item > a {font-size:12px;font-weight: bold;color:#fff;}

#contact-form {display:flex;flex-direction: row;flex-wrap: wrap;padding:15px 15px 0px 15px;justify-content: space-between;}
#contact-form > .input {width:calc(50% - 10px);margin-bottom:20px;}
#contact-form > .input.full-width {width:100%;}
#contact-form > .input > input, #contact-form > .input > textarea {border:1px solid #DDD;font-size:14px;padding:15px;width:100%;min-width:100%;max-width: 100%;}
#contact-form > .input > textarea {min-height:100px;}
#contact-form > .input > input:focus, #contact-form > .input > textarea:focus {border-color:#000;}
#contact-form > button {display:block;border:1px solid #000;padding:15px;text-align: center;background-color:transparent;font-size:14px;font-weight: bold;width:100%;color:#000;transition:all ease-in-out 200ms;margin-bottom:5px;}
#contact-form > button:hover {cursor: pointer;background-color:#2170ea;color:#FFF;border-color:#2170ea;}
#contact-form > button:active {margin-bottom:2px;margin-top:3px;border-color:#4765b3;background-color:#4765b3;transition:none;}
#contact-form > button:disabled {border:1px solid #DDD;color:#757575;background-color:#ebebe4;}
#contact-form.loader {cursor: wait;}
#contact-form.loader input, #contact-form.loader textarea, #contact-form.loader button {cursor: wait;}

.loader-content {position:relative;overflow:hidden;}
.loader-content > .loader-wrapper {cursor:wait;background-color:rgba(0, 0, 0, 0.75);position: absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content: center;align-items: center;animation: loader-in 0.3s ease-in-out;z-index:100;}
.loader-content > .loader-wrapper > .loader  {width:40px;height:40px;position:relative;}
.loader-content > .loader-wrapper > .loader::before,.loader-content > .loader-wrapper > .loader::after {content:'';display:block;width:15px;height:15px;background-color:rgb(255, 255, 255);position:absolute;}
.loader-content > .loader-wrapper > .loader::before {top:0;left:0;animation: loader-1 ease-in-out 1s infinite;}
.loader-content > .loader-wrapper > .loader::after {bottom:0;right:0;animation: loader-2 ease-in-out 1s infinite;}

@keyframes loader-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes loader-1 {
    50% {transform:translateX(25px) rotate(-90deg);width:10px;height:10px;}
    100% {transform:translateX(25px) translateY(25px) rotate(-180deg);width:15px;height:15px;}
}
@keyframes loader-2 {
    50% {transform:translateX(-25px) rotate(-90deg);width:10px;height:10px;}
    100% {transform:translateX(-25px) translateY(-25px) rotate(-180deg);width:15px;height:15px;}
}

@media (max-width: 600px) {
    #site {align-items: unset;justify-content: unset;vertical-align: unset;overflow: unset;height:auto;}
    #container {width:calc(100% - 30px);margin:auto;flex-direction: column;}
    header {width:100%;margin-top:90px;height:calc(100vh - 100px);}
    header > .title {width:100%;}
    header > .title > .bg {height:calc(100vh - 400px);}
    header > .title > .img {top:calc(100vh - 500px);}
    #menu {left:15px;top:10px;display:flex;width:calc(100vw - 30px);flex-wrap: unset;position:fixed;z-index:11;}
    #menu > .item {width:100%;}
    #content {margin-top:10px;width:100%;margin-bottom:10px;height:calc(100vh - 100px);}
    #content.animation-in {width:100%;}
    #content > .item {width:100%;transform-origin: center center;left:0;padding-left:0;overflow:auto;}
    
    .img-bw-title {background: url(../images/istanbul-avrupa.jpg) center;background-size: cover;}
    .img-bw-title > img {display:none;}
    .img-bw-title > .text {height:auto;position:static;}
    .img-bw-title > .text > .cont > .item {width:100%;text-align:center;}
    .img-bw-title > .text > .cont > .item:nth-child(2n) {flex-direction: row;}
    .img-bw-title > .text > .cont > .item:nth-child(2n) > i {margin:0 5px 0 0;}

    #contact-form > .input {width:100%;}

    
}
        

@keyframes circleInCenter {
        0% {transform:scale(0,0);-webkit-clip-path: circle(0.8% at 50% 50%);
            clip-path: circle(0.8% at 50% 50%);}
        100% {transform:scale(1, 1);-webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);}
}
.circleInCenter {animation: circleInCenter ease-in-out 700ms;}

@keyframes runInUp{
    0% {transform:translateY(-110%)}
    100% {transform:translateY(0);}
}
.runInUp {animation:runInUp ease-in-out 700ms;}

@keyframes runInLeft{
    0% {transform:translateX(-110%)}
    100% {transform:translateX(0);}
}
.runInLeft {animation:runInLeft ease-in-out 700ms;}

@keyframes runInRight{
    0% {transform:translateX(110%)}
    100% {transform:translateX(0);}
}
.runInRight {animation:runInRight ease-in-out 700ms;}

@keyframes runOutLeft{
    0% {transform:translateX(0)}
    100% {transform:translateX(-110%);}
}
.runOutLeft {animation:runOutLeft ease-in-out 700ms;}

@keyframes runOutRight{
    0% {transform:translateX(0)}
    100% {transform:translateX(110%);}
}
.runOutRight {animation:runOutRight ease-in-out 700ms;}

@keyframes runInDown{
    0% {transform:translateY(110%)}
    100% {transform:translateY(0);}
}
.runInDown {animation:runInDown ease-in-out 700ms;}

@keyframes slideInLeft {
    0% {width:0;-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);transform:translateX(-100%);}
    100% {width:600px;-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transform:translateX(0);}
}
.slideInLeft {animation: slideInLeft ease-in-out 500ms;}

@keyframes fadeInRight {
    0% {transform: translateX(100%);opacity:0;}
    100% {transform: translateX(0);opacity:1;}
}
.fadeInRight {animation: fadeInRight ease-in-out 500ms;}

@keyframes turnUpOut {
    0% {transform:rotate(0);opacity: 1;}
    100% {transform:rotate(-60deg);opacity: 0;}
}
.turnUpOut {animation:turnUpOut ease-out 800ms;}

@keyframes turnUpIn {
    0% {transform:rotate(60deg);opacity: 0;}
    100% {transform:rotate(0deg);opacity: 1;}
}
.turnUpIn {animation:turnUpIn ease-out 800ms;}

@keyframes turnDownOut {
    0% {transform:rotate(0);opacity: 1;}
    100% {transform:rotate(60deg);opacity: 0;}
}
.turnDownOut {animation:turnDownOut ease-out 800ms;}

@keyframes turnDownIn {
    0% {transform:rotate(-60deg);opacity: 0;}
    100% {transform:rotate(0deg);opacity: 1;}
}
.turnDownIn {animation:turnDownIn ease-out 800ms;}

@keyframes bounceIn {
    0% {transform:scale(0);}
    75% {transform:scale(1.25);}
    100% {transform:scale(1);}
}
.bounceIn {animation:bounceIn ease-in-out 300ms;}

@keyframes fadeInUp{
    0% {transform:translateY(-100%);opacity:0;}
    100% {transform:translateY(0);opacity: 1;}
}
.fadeInUp {animation:fadeInUp ease-in-out 300ms;}

@keyframes fadeInDown{
    0% {transform:translateY(100%);opacity:0;}
    100% {transform:translateY(0);opacity: 1;}
}
.fadeInDown {animation:fadeInDown ease-in-out 300ms;}

@keyframes pageTurnOutLeft{
    0% {transform:rotateY(0deg);}
    100% {transform:rotateY(-90deg);}
}
.pageTurnOutLeft {animation:pageTurnOutLeft ease-in-out 700ms;}

@keyframes pageTurnInRight{
    0% {transform:rotateY(-90deg);}
    100% {transform:rotateY(0deg);}
}
.pageTurnInRight {animation:pageTurnInRight ease-in-out 700ms;animation-delay:700ms;}

@keyframes pageTurnOutRight{
    0% {transform:rotateY(0deg);}
    100% {transform:rotateY(90deg);}
}
.pageTurnOutRight {animation:pageTurnOutRight ease-in-out 700ms;}

@keyframes pageTurnInLeft{
    0% {transform:rotateY(90deg);}
    100% {transform:rotateY(0deg);}
}
.pageTurnInLeft {animation:pageTurnInLeft ease-in-out 700ms;animation-delay:700ms;}

@keyframes zoomIn {
    0% {transform:scale(0);}
    100% {transform:scale(1);}
}
.zoomIn {animation:zoomIn ease-in-out 500ms;}

@keyframes rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}