/*  -------------------//////////////////////////////////////////// STYLE.CSS ////////////////////////////////////////////------------------- */

/*
Project Name: Enes Kab / Personal Portfolio
Project URL: http://www.enes.online
Version: 1.0.9
Author: Enes Kabacaoglu
Author URI: http://www.enes.online
*/

/*Import Font Files*/
@import url(https://fonts.googleapis.com/css?family=Muli:300,700);

/* For MS viewport - Responsiveness */
@-ms-viewport{width: device-width;}

/*General style settings*/
html{height:100%; font-size:100%; scroll-behavior:smooth;}
body {position:relative; border-top:4px solid #22A991; margin:0px; outline:0; padding:0px; height:calc(100% - 4px); font-weight:300; background:#fdfdfd; font-family: 'Muli', sans-serif; font-size:1em; color:#292929; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
body a{text-decoration:none;}
embed,object{max-width: 100%;}
input:focus,select:focus,textarea:focus{outline: none;}


/*HEAD*/
.head{float:left; position:relative; overflow:hidden; width:100%; background:#f6f6f6; padding-bottom:2em; height:calc(100% - 2em - 4px);}
.head.inner-head{height:auto; padding-bottom:8em;}
.head-container{position:relative; width:90%; max-width:1600px; margin:0 auto; padding-top:2em;}
.head-animation{width:100%; margin:0 auto;}

.head .logo{float:left; width:4.25em; transition-timing-function: ease-out;}

@-webkit-keyframes logo-scale {
  0%   {transform: scale(1)}
  50% {transform: scale(0.9)}
  100% {transform: scale(1)}    
}

@-moz-keyframes logo-scale {
  0%   {transform: scale(1)}
  50% {transform: scale(0.9)}
  100% {transform: scale(1)}   
}
@-o-keyframes logo-scale {
  0%   {transform: scale(1)}
  50% {transform: scale(0.9)}
  100% {transform: scale(1)}     
}
@keyframes logo-scale {
  0%   {transform: scale(1)}
  50% {transform: scale(0.9)}
  100% {transform: scale(1)}           
}

.head .logo:hover {
  -webkit-animation: logo-scale 0.5s; /* Safari 4+ */
  -moz-animation:    logo-scale 0.5s; /* Fx 5+ */
  -o-animation:      logo-scale 0.5s; /* Opera 12+ */
  animation:         logo-scale 0.5s; /* IE 10+, Fx 29+ */
}



.head .bright-anim{width:27em; right:-12.5em; bottom:-3em; z-index:0;}

.head .slogan{position:absolute; width:56%; margin:0 22%; top:15vw; text-align:center; z-index:1;}
.head .slogan .title{font-weight:700; font-size:1.875em; margin-bottom:0.75em;}
.head .slogan .sub{font-size:1.375em; line-height:1.5em;}
.head .slogan .head-button{margin-top:4em;}
.head .slogan .head-button .icon{background:#22A991; border:solid 10px #f6f6f6; width:1.2em; height:1.2em; padding:1em; border-radius:50%;}
.head .slogan .head-button .icon:hover{background:#0D806B; cursor:pointer;}

@-webkit-keyframes head-button-move {
  0%   {padding-top:0;}
  50% {padding-top:1em;}
  100% {padding-top:0;}
}
@-moz-keyframes head-button-move {
  0%   {padding-top:0;}
  50% {padding-top:1em;}
  100% {padding-top:0;}   
}
@-o-keyframes head-button-move {
  0%   {padding-top:0;}
  50% {padding-top:1em;}
  100% {padding-top:0;}
}
@keyframes head-button-move {
  0%   {padding-top:0;}
  50% {padding-top:1em;}
  100% {padding-top:0;}      
}

.head .slogan .head-button {
  -webkit-animation: head-button-move 2s infinite; /* Safari 4+ */
  -moz-animation:    head-button-move 2s infinite; /* Fx 5+ */
  -o-animation:      head-button-move 2s infinite; /* Opera 12+ */
  animation:         head-button-move 2s infinite; /* IE 10+, Fx 29+ */
  animation-delay: 3.5s;
}


/*RECENT WORKS*/
.recent-works{float:left; width:100%; padding-top:6em;}

.recent-works .item{float:left; position:relative; width:calc(100% - 4em); background:#F8F8F8; margin:5em 0; padding:3em 2em 0 2em; border-bottom:solid 1px #e7e7e7;}
.recent-works .item .image{float:left; width:calc(50% - 4em); text-align:center; margin:0 3em -1.4em 1em;}
.recent-works .item .image img{width:100%; max-width:500px;}
.recent-works .item .right-section{float:left; margin:2em 3em 0 2em; width:calc(50% - 5em);}
.recent-works .item .right-section .title{float:left; width:100%; font-weight:700; font-size:1.25em; margin-bottom:0.75em;}
.recent-works .item .right-section .summary{float:left; width:100%; line-height:1.6em;  font-size:1.25em; margin-bottom:2em;}
.recent-works .item .right-section .skills{position:absolute; width:calc(50% - 5em); bottom:5em; right:3em;}
.recent-works .item .right-section .skills .skill{float:left; color:#555555; font-size:0.75em; margin-right:2.5em; text-transform: uppercase;}


/*ABOUT*/
.about{float:left; width:100%; margin:5em 0 8em 0;}
.about .desc{float:left; width:60%; margin:2em 20%; font-size:1.25em; line-height:1.6em; text-align:center;}
.about .desc a{color:#22A991; font-weight:700;}
.about .talents{float:left; width:100%; text-align:center; margin-top:1em;}
.about .talents .talent{display:inline-block; text-transform: capitalize; font-size:1em; margin:0.5em; border:solid 2px #22A991; border-radius:200px; padding:0.5em 1.25em;}



/*CONTACT*/
.contact{float:left; position:relative; width:100%; overflow:hidden; padding:7em 0; margin-top:2em; background:#f6f6f6;}
.contact .desc{float:left; z-index:2; position:relative; width:60%; margin:2em 20%; font-size:1.25em; line-height:1.6em; text-align:center;}
.contact .button-con{float:left; width:100%; text-align:center;}
.contact .bright-anim{width:24em; right:-7em; bottom:3em; z-index:0;}


/*FOOTER*/
.footer{float:left; width:100%; text-align:center; padding:3em 0; color:#555555; font-size:0.875em;}
.footer a{color:#555555; text-decoration:underline;}


/*PROJECT DETAIL*/

/*Head*/

.project-head{float:left; width:80%; margin:2em 10% 0 10%; text-align:center;}
.project-head.spacing{margin:3em 10% 3em 10%;}
.project-head .p-logo{display:inline-block;}
.project-head .p-logo img{width:50%;}
.project-head .p-name{font-weight:700; font-size:1.875em; margin:1.25em 0 0.4em 0;}
.project-head .p-sum{font-size:1.375em; line-height:1.5em;}
.project-head .p-skills{float:left; width:100%; text-align:center; margin-top:4em; font-size:0.85em;}
.project-head .p-skills .skill{display:inline-block; text-transform: capitalize; margin:0.5em 0.25em; padding:0.6em 1.5em; border:solid 2px #22A991; border-radius:200px;}
.project-head .fallow{float:left; width:100%; margin:3em 0 -3em 0;}

/*Detail*/
#project-detail{float:left; width:100%; margin:5em 0;}
.inner-con{float:left; width:60%; margin:0 20%;}

#project-detail h2{font-weight:700; font-size: 1.5em; line-height:1.5em; padding-bottom:1em; }
#project-detail p{font-size: 1.125em; line-height:1.8em; padding-bottom:1em;}
#project-detail p a{color:#22A991;}
#project-detail .spacer{float:left; width:100%; padding:1em 0;}
#project-detail .quote{font-weight:700; color:#555; font-size:1.5em; line-height:1.8em; padding:1em 0 2em 0;}


#project-detail .gal{float:left; width:100%; background:#F6F6F6; padding:5em 0; margin:5em 0;}
#project-detail .gal .item .caption{float:left; width:100%; margin-top:2em; font-size:0.75em; color:#555555; font-style:italic; text-align:center;}
#project-detail .gal.desktop .item{float:left; width:calc(50% - 4em); margin:0 2em; text-align:center;}
#project-detail .gal.mobile .item{float:left; width:calc(25% - 4em); margin:0 2em; text-align:center;}
#project-detail .gal img{float:left; width:100%;}


#project-detail ul{float:left; list-style-type: disc; font-size: 1.125em; line-height:1.8em; float:left; padding-left:1em;}
#project-detail ul li{padding:0.25em 0;}

/*OTHER PROJECTS*/
.other-projects{float:left; width:100%; margin:3em 0 0 0;}
.other-projects .project{float:left; position:relative; text-align:center; width:calc(100% - 6em); background:#f8f8f8; padding:3em; margin:2em 0;}
.other-projects .project .status{position:absolute; right:2em; top:2em; background:#a8a8a8; font-size:0.75em; color:#fff; text-transform: capitalize; padding:0.25em 1em; border-radius:200px; }
.other-projects .project .project-name{float:left; width:100%; margin-bottom:1em; font-weight:700; font-size:1.25em;}
.other-projects .project .desc{font-size:1.125em; line-height:1.8em;}

.other-projects .skills{float:left; width:100%; margin:2em 0 0.5em -0.3em; font-size:0.75em;}
.other-projects .skills .skill{display:inline-block; text-transform: capitalize; margin:0.5em 0.25em; padding:0.25em 1em; border:solid 2px #22A991; border-radius:200px;}

.other-projects .previews{float:left; width:100%; margin:2em 0 1em -0.3em; font-size:0.75em;}
.other-projects .previews .preview{display:inline-block; text-transform: capitalize; margin:0.5em 0.25em;}
.other-projects .previews .preview a{padding:0.4em 1.5em 0.5em 1.25em;}

/*LOGO GALLERY*/
.logo-design{float:left; width:100%; margin:1em 0 1em 0;}
.logo-gal{float:left; width:100%; margin-top:1em;}
.logo-gal .logo{float:left; width:calc(33.3333333% - 1em - 6px); margin:1em 0; border:solid 3px #f6f6f6;}
.logo-gal .logo:nth-child(3n+2){margin:1em 1.5em !important;}
.logo-gal .logo img{float:left; width:100%;}

/*MOTION VIDEO*/
.motion-design{float:left; width:100%; margin:1em 0 7em 0;}
.video-gal{float:left; width:100%; margin-top:2em;}
.video-gal .video{float:left; width:calc(50% - 1em - 6px); border:solid 3px #f6f6f6; margin:0.75em 0; }
.video-gal .video:nth-child(2n+2){margin:1em 0 1em 2em;}


/*COMMON USED////////////////////////////////////////////-------------*/

#light{position:fixed; display:none; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:20;}

.section-title{float:left; width:100%; text-align:center; font-size:1.75em; font-weight:700;}
.section-title.spacing{margin:1.5em 0;}


.button{display:inline-block; background:#22A991; padding:1em 2em; border-radius:200px; color:#fff; }
.button:hover{background:#0D806B;}
.button .icon{display:inline-block; float:left; margin:0.3em -0.5em 0 0.75em; height:1em; width:1em;}
.button span{display:inline-block; float:left; font-weight:700; font-size:1.125em;}

.project-head .button{padding:0.6em 1.25em !important;}
.project-head .icon{margin:0.25em -0.5em 0 0.25em; height:0.75em; width:1.5em;}
.project-head span{font-size:0.9em;}

.bright-anim{position:absolute;}
.bright-anim .constant{position:relative; width:100%;}
.bright-anim .constant .animate{position:absolute; width:100%; top:0;}

.go-top{display:none; position:fixed; z-index:10; right:3em; bottom:2em; background:#22A991; padding:1em; border-radius:200px; color:#fff; }
.go-top:hover{background:#0D806B;}
.go-top .icon{display:inline-block; float:left; height:1em; width:1em;}

#page-cover{position:fixed; z-index:200; top:0; height:100%; width:100%; background:#F6F6F6;}
#page-cover svg{width:20%; height:20%; position:absolute; top:40%; right:40%;}

/*COMMON USED////////////////////////////////////////////-------------*/







/*  -------------------//////////////////////////////////////////// STYLE.CSS ////////////////////////////////////////////------------------- */





/* -------------------//////////////////////////////////////////// RESET.CSS ////////////////////////////////////////////------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;font-weight:100%;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;}q:before,q:after {content:'';}abbr,acronym { border:0;}

/*  -------------------//////////////////////////////////////////// RESET.CSS ////////////////////////////////////////////------------------- */





/*  -------------------//////////////////////////////////////////// MEDIAQUERIES.CSS ////////////////////////////////////////////------------------- */

/*MOBILE SCREEN*/
@media only screen and (max-width:600px) {



}
/*////////////////////////////////////////////////////////////////////////////////////////-*/


/*BETWEEN MOBILE AND TABLET*/
@media only screen and (max-width:990px) and (min-width:600px){


}

/*////////////////////////////////////////////////////////////////////////////////////////-*/

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


}

/*////////////////////////////////////////////////////////////////////////////////////////-*/

@media only screen and (min-width:990px) {

}
/*////////////////////////////////////////////////////////////////////////////////////////-*/

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

/*HEAD*/
.head{height:100%; text-align:center;}
.head-container{position:relative; width:100%; height:calc(100% - 2em); padding-top:2em;}
.head.inner-head{padding-bottom:5em;}
.head-animation{height:calc(100% - 2em) !important; width:auto;}

.head .slogan{top:22vh; width:80%; margin:0 10%; background:#f6f6f6; padding:1.5em 0 0 0;}
.head .slogan .title{font-size:1.4em;}
.head .slogan .sub{font-size:1.15em;}

.head .slogan .head-button{margin:1em 0 -0.5em 1px;}
.head .slogan .head-button .icon{width:0.75em; height:0.75em; padding:0.75em;}

/*HEAD*/
.head .logo{float:none; display:inline-block; width:3.25em;}
.head .bright-anim{display:none;}

/*RECENT WORKS*/
.recent-works{float:left; width:100%; padding-top:3em;}
.recent-works .item{width:calc(100% - 1.5em); margin:3.5em 0 1.5em 0; padding:2em 0.75em 0 0.75em;}
.recent-works .item .image{width:calc(100% - 1em); margin:0 0.5em -0.5em 0.5em;}
.recent-works .item .image img{width:100%;}
.recent-works .item .right-section{margin:2em 0.5em 2em 0.5em; width:calc(100% - 1em);}
.recent-works .item .right-section .title{font-size:1.15em; margin:0 0.25em 0.75em 0.5em; width:cal(100% - 0.75em);}
.recent-works .item .right-section .summary{line-height:1.5em;  font-size:1.1em; margin:0 0.25em 2.5em 0.5em; width:cal(100% - 0.75em);}
.recent-works .item .right-section .button-con{width:100%; float:left; text-align:center;}
.recent-works .item .right-section .skills{position:relative; text-align:center; float:left; margin:2.5em 0 0 0 !important; width:100%; bottom:auto; right:auto;}
.recent-works .item .right-section .skills .skill{float:none; font-size:0.7em; margin:0.5em 1em; display:inline-block;}

/*ABOUT*/
.about{margin:3em 0 4em 0;}
.about .desc{width:85%; margin:2em 7.5%; font-size:1.15em;}
.about .talents{margin-top:0.25em; width:100%;}
.about .talents .talent{font-size:0.85em; margin:0.5em; padding:0.5em 1em;}

/*CONTACT*/
.contact{padding:5em 0 15em 0; margin-top:1em;}
.contact .desc{width:90%; margin:2em 5%; font-size:1.15em;}
.contact .bright-anim{width:10em !important; right:calc(50% - 5em) !important; top:27em;}

/*FOOTER*/
.footer{font-size:0.75em; padding:3em 1em; width:calc(100% - 2em);}

/*PROJECT DETAIL*/

/*Head*/

.project-head{margin-top:3em;}
.project-head.spacing{margin:3em 10% 1em 10%;}
.project-head .p-name{font-size:1.45em;}
.project-head .p-sum{font-size:1.15em;}
.project-head .p-skills{margin-top:3em;}
.project-head .fallow{margin:2em 0 -1.5em 0;}

/*Detail*/
#project-detail{margin:3em 0;}
.inner-con{width:80%; margin:0 10%;}
#project-detail h2{font-size: 1.25em;}
#project-detail p{font-size: 1.1em; line-height:1.6em;}
#project-detail .spacer{padding:0.75em 0;}
#project-detail .quote{font-size:1.25em; line-height:1.8em; padding:0.75em 0 1.5em 0;}
#project-detail ul{font-size: 1.1em; line-height:1.6em; width:calc(80% - 1em) !important;}

#project-detail .gal{padding:3em 0; margin:3em 0;}
#project-detail .gal .item .caption{margin-top:1em;}
#project-detail .gal .item img{width:100%;}
#project-detail .gal.desktop .item{width:calc(100% - 2em); margin:1em 1em 1.5em 1em;}
#project-detail .gal.mobile .item{width:calc(50% - 2em); margin:1em 1em 1.5em 1em;}



/*OTHER PROJECTS*/
.other-projects{margin:2em 0 0 0;}
.other-projects .project{width:calc(100% - 3em); padding:3.5em 1.5em 2em 1.5em; margin:2em 0;}
.other-projects .project .status{right:-1em; font-size:0.65em;}
.other-projects .project .desc{font-size:1.1em; line-height:1.6em;}

.other-projects .skills{margin:2em 0 0.5em 0;}
.other-projects .skills .skill{margin:0.35em 0.25em;}

.other-projects .previews{margin:2em 0 1em 0; font-size:0.75em;}
.other-projects .previews .preview{margin:0.25em 0.25em;}

/*LOGO GALLERY*/
.logo-design{margin:0 0 0 0;}
.logo-gal .logo{width:calc(50% - 0.5em - 6px); margin:1em 0;}
.logo-gal .logo:nth-child(3n+2){margin:1em 0 !important;}
.logo-gal .logo:nth-child(2n){margin-left:1em !important;}

/*MOTION VIDEO*/
.motion-design{margin:1.5em 0 7em 0;}
.video-gal{margin-top:2em;}
.video-gal .video{width:calc(100% - 6px); margin:1em 0;}
.video-gal .video:nth-child(2n+2){margin:1em 0;}


/*COMMON USED////////////////////////////////////////////-------------*/
.section-title{font-size:1.6em;}
.section-title.spacing{margin:0.5em 0;}

.go-top{right:2em; bottom:2em; padding:0.75em;}
.go-top .icon{height:0.75em; width:0.75em;}
/*COMMON USED////////////////////////////////////////////-------------*/


}

/*////////////////////////////////////////////////////////////////////////////////////////-*/
@media only screen and (min-width:769px) {

}
/*////////////////////////////////////////////////////////////////////////////////////////-*/

/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (max-width : 1024px){

.container{width:90%; margin:0 auto;}

.mobile-anim{display:block;}
.desktop-anim{display:none;}    

/*Recent Works*/
.recent-works .item .right-section .skills{position:relative; text-align:center; float:left; margin:2em 0 3em -2em; width:100%; bottom:auto; right:auto;}

/*Contact*/
.contact .bright-anim{width:18em; right:-8em; bottom:7em; z-index:0;}
}
/*////////////////////////////////////////////////////////////////////////////////////////-*/

/* WIDE DESKTOP */
@media only screen and (min-width : 1024px){

.container{max-width:1350px; margin:0 auto;}

.mobile-anim{display:none;}
.desktop-anim{display:block;}
    
}
/*////////////////////////////////////////////////////////////////////////////////////////-*/


/*  -------------------//////////////////////////////////////////// MEDIAQUERIES.CSS //////////////////////////////////////////// -------------------*/