body{
background: #f5f5f5 url("images/bg.png") repeat-x left;
}

body,img { 
transition:all .25s linear; 
-o-transition:all .25s linear; 
-moz-transition:all .25s linear; 
-webkit-transition:all .25s linear;
}

.wrap{
width: 960px;
margin: 0px auto;
}

/*  ||||||||||||||||||||||HEAD||||||||||||||||||||||  */

header{
height: 110px;
background: #f8f8f8;
}

#logo{
height: 51px;
width: 101px;
background: url("img/sprite.png") no-repeat;
background-position: 0 -170px;
margin-top: 30px;
margin-left: 15px;
position: absolute;
}

nav{
float: right;
padding-top: 45px;
}

nav li{
list-style: none;
position: relative;
display: inline;
float: right;
margin-left: 45px;
}

nav span{
text-indent: -500%;
}

nav #home{
height: 15px;
width: 40px;
background: url("img/sprite.png") no-repeat;
background-position: 0 -140px;
}

nav #home-active{
height: 15px;
width: 40px;
background: url("img/sprite.png") no-repeat;
background-position: 0 -155px;
}

nav #home:hover{
background: url("img/sprite.png") no-repeat;
background-position: 0 -155px;
}

nav #resume{
height: 15px;
width: 55px;
background: url("img/sprite.png") no-repeat;
background-position: -113px -140px;
}

nav #resume-active{
height: 15px;
width: 55px;
background: url("img/sprite.png") no-repeat;
background-position: -113px -155px;
}

nav #resume:hover{
background: url("img/sprite.png") no-repeat;
background-position: -113px -155px;
}

nav #hire-me{
height: 15px;
width: 97px;
background: url("img/sprite.png") no-repeat;
background-position: -168px -140px;
}

nav #hire-me:hover{
background: url("img/sprite.png") no-repeat;
background-position: -168px -155px;
}

nav #lang{
height: 34px;
width: 34px;
background: url("img/sprite.png") no-repeat;
background-position: -169px -180px;
margin-top: -12px;
}

nav #lang:hover{
background: url("img/sprite.png") no-repeat;
background-position: -135px -180px;
}

/*  ||||||||||||||||||||||BODY||||||||||||||||||||||  */

.bg{
width: 1120px;
height: 130px;
background: url("img/sprite.png") no-repeat;
background-position: 0 -221px;
}

/*  ||||||||||||||||||||||HOME||||||||||||||||||||||  */

article.why{
width: 960px;
height: 180px;
margin-top: 110x;
background: url("img/heading.png") no-repeat;
background-position: 0 0;
text-indent: -900%;
}

article.recent{
height: 940px;
width: 100%;
margin-top: 110px;
}

#recent{
width: 470px;
height: 220px;
background: url("img/recent_work.png") no-repeat;
background-position: 0 0;
float: left;
}

#work-1{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 0px;
float: left;
margin: 20px 0 0 0;
position: relative;
}

#work-1 span{
background: url("img/work.png") no-repeat;
background-position: -470px 0px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-1:hover span{
opacity: 1;
}

#work-2{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -220px;
float: left;
margin: 20px 20px 0 0px;
position: relative;
}

#work-2 span{
background: url("img/work.png") no-repeat;
background-position: -470px -220px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-2:hover span{
opacity: 1;
}

#work-3{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -440px;
float: left;
margin: 20px 0 0 0;
position: relative;
}

#work-3 span{
background: url("img/work.png") no-repeat;
background-position: -470px -440px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-3:hover span{
opacity: 1;
}

#work-4{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -660px;
float: left;
margin: 20px 20px 0 0;
position: relative;
}

#work-4 span{
background: url("img/work.png") no-repeat;
background-position: -470px -660px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-4:hover span{
opacity: 1;
}

#work-5{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -880px;
float: left;
margin: 20px 0 0 0;
position: relative;
}

#work-5 span{
background: url("img/work.png") no-repeat;
background-position: -470px -880px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-5:hover span{
opacity: 1;
}

#work-6{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -1100px;
float: left;
margin: 20px 20px 0 0;
position: relative;
}

#work-6 span{
background: url("img/work.png") no-repeat;
background-position: -470px -1100px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-6:hover span{
opacity: 1;
}

#work-7{
width: 470px;
height: 220px;
background: url("img/work.png") no-repeat;
background-position: 0 -1320px;
float: left;
margin: 20px 0 0 20px;
position: relative;
}

#work-7 span{
background: url("img/work.png") no-repeat;
background-position: -470px -1320px;
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
-webkit-transition: opacity 600ms ease-in-out;
-moz-transition: opacity 600ms ease-in-out;
-o-transition: opacity 600ms ease-in-out;
transition: opacity 600ms ease-in-out;
opacity: 0;
text-indent: -900%;
}

#work-7:hover span{
opacity: 1;
}

/*  ||||||||||||||||||||||DETAIL||||||||||||||||||||||  */

#detail{
background: #eee;
width: 100%;
}

#detail #work_1_1{
background: url("work/work_1_1.png") center no-repeat;
width: 100%;
height: 417px;
}

#detail #work_1_2{
background: url("work/work_1_1.jpg") center no-repeat;
width: 100%;
height: 900px;
margin: 50px 0 50px 0;
}

#detail #work_1_3{
background: url("work/work_1_2.png") center no-repeat;
width: 100%;
height: 921px;
}

#detail #work_1_4{
background: url("work/work_1_3.png") center no-repeat;
width: 100%;
height: 1011px;
}

#detail #work_1_5{
background: url("work/work_1_4.png") center no-repeat;
width: 100%;
height: 838px;
}

#detail #work_1_6{
background: url("work/work_1_5.png") center no-repeat;
width: 100%;
height: 77px;
}

#detail #work_2_1{
background: url("work/work_2_1.png") center no-repeat;
width: 100%;
height: 291px;
}

#detail #work_2_2{
background: url("work/work_2_2.png") center no-repeat;
width: 100%;
height: 980px;
}

#detail #work_2_3{
background: url("work/work_2_3.jpg") center no-repeat;
width: 100%;
height: 980px;
}

#detail #work_2_4{
background: url("work/work_2_4.png") center no-repeat;
width: 100%;
height: 980px;
}

#detail #work_3_1{
background: url("work/work_3_1.png") center no-repeat;
width: 100%;
height: 291px;
}

#detail #work_3_2{
background: url("work/work_3_2.png") center no-repeat;
width: 100%;
height: 642px;
}

#detail #work_3_3{
background: url("work/work_3_3.png") center no-repeat;
width: 100%;
height: 936px;
}

#detail #work_3_4{
background: url("work/work_3_4.png") center no-repeat;
width: 100%;
height: 104px;
}

#detail #work_4_1{
background: url("work/work_4_1.jpg") center no-repeat;
width: 100%;
height: 291px;
}

#detail #work_4_2{
background: url("work/work_4_2.jpg") center no-repeat;
width: 100%;
height: 982px;
}

#detal_5{
background: #f5f5f5;
}

#detail_5 #work_5_1{
background: url("work/work_5_1.png") center no-repeat;
width: 100%;
height: 291px;
}

#detail_5 #work_5_2{
background: url("work/work_5_2.jpg") center no-repeat;
width: 100%;
height: 800px;
}

#detail_5 #work_5_3{
background: url("work/work_5_3.png") center no-repeat;
width: 100%;
height: 480px;
}

#detail_5 #work_5_4{
background: url("work/work_5_4.png") center no-repeat;
width: 100%;
height: 540px;
margin-top: 50px;
}

#detail_6{
background: #000 url("work/work_6_bg.png") center no-repeat;
width: 100%;
height: 1190px;
text-align: center;
}

#detail_6 #work_6_1{
background: url("work/work_6_1.png") center no-repeat;
width: 100%;
height: 1190px;
}

#detail_6 #work_6_2{
background: url("work/work_6_2_bg.png") center repeat-x;
width: 100%;
height: 542px;
}

#detail_6 #work_6_3{
background: url("work/work_6_3_bg.png") center;
width: 100%;
height: 539px;
border-bottom: 1px solid #000;
}

#detail_6 #work_6_4{
background: url("work/work_6_4_bg.png") center;
width: 100%;
height: 539px;
border-top: 1px solid #2c2c2c;
}

#detail #work_7_1{
background: url("work/work_7_1.png") center no-repeat;
width: 100%;
height: 291px;
}

#detail #work_7_2{
background: url("work/work_7_2.png") center no-repeat;
width: 100%;
height: 963px;
}

#detail #work_7_3{
background: url("work/work_7_3.png") center no-repeat;
width: 100%;
height: 963px;
}

#detail #work_7_4{
background: url("work/work_7_4.png") center no-repeat;
width: 100%;
height: 963px;
}

footer#work_bottom{
width: 620px;
height: 220px;
background: none;
margin-left: auto;
margin-right: auto;
}

footer#work_bottom a.work_left{
width: 20px;
height: 28px;
background: url("work/left.png") no-repeat;
background-position: 0 0px;
float: left;
margin: 66px 25px 66px 25px;
}

footer#work_bottom a:hover.work_left{
background-position: 0 -28px;
}

footer#work_bottom img{
width: 480px;
height: 160px;
float: left;
}

footer#work_bottom a.work_right{
width: 20px;
height: 28px;
background: url("work/right.png") no-repeat;
background-position: 0 0px;
float: left;
margin: 66px 25px 66px 25px;
}

footer#work_bottom a:hover.work_right{
background-position: 0 -28px;
}

/*  FOOTER  */

footer{
width: 100%;
height: 120px;
margin-top: 50px;
}

#oddelovac{
height: 1px;
width: 70px;
margin: 0px auto;
background: url("img/sprite.png") no-repeat;
background-position: -243px -379px;
}

#site{
height: 95px;
width: 285px;
margin: 0px auto;
margin-top: 40px;
padding-bottom: 40px;
}

.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 85px;
height: 95px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

.front {
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

#dribbble, #twitter, #facebook{
float: left;
}

#twitter{
margin: 0 15px 0 15px;
}

#dribbble .front{
background: url(img/sites.png);
z-index: 2;
}

#dribbble .back{
background: url(img/sites_back.png);
}

#twitter .front{
background: url(img/sites.png);
background-position: -100px 0;
z-index: 2;
}

#twitter .back{
background: url(img/sites_back.png);
background-position: -100px 0;
}

#facebook  .front{
background: url(img/sites.png);
background-position: -200px 0;
z-index: 2;
}

#facebook .back{
background: url(img/sites_back.png);
background-position: -200px 0;
}

@media only screen 
and (min-width: 240px) and (max-width: 1023px) {

.wrap{
width: 95%;
margin: 0px auto;
}

nav{
margin-right: 15px;
}

nav li{
margin-left: 25px;
}

article.why{
width: 480px;
height: 300px;
margin: 0px auto;
margin-top: 80x;
background: url("img/heading_responsive.png") no-repeat;
background-position: 0 0;
text-indent: -900%;
}

article.recent{
height: 2400px;
margin: 0px auto;
margin-top: 50px;
}

#recent{
width: 470px;
height: 145px;
background: url("img/recent_work.png") no-repeat;
background-position: 0 0;
margin: 0px auto;
float: none;
}

a,a:hover,a:active {
text-decoration: none;
color: black;
}

h2{
font-family: Myriad Pro, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 400;
font-size: 18pt;
font-variant: small-caps;
text-indent: 0;
text-align: center;
line-height: 1.1;
padding-top: 240px;
}

h3{
font-family: Myriad Pro, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
font-size: 13pt;
font-style: italic;
text-indent: 0;
text-align: center;
}

#work-1 span,#work-2 span,#work-3 span,#work-4 span,#work-5 span,#work-6 span,#work-7 span{
background: none;
position: relative;
text-indent: 0;
opacity: 1;
}

#work-1{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-2{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-3{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-4{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-5{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-6{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#work-7{
float: none;
margin: 0px auto;
margin-top: 90px;
}

#detail{
width: 1200px;
}

#detail_5{
width: 1200px;
}

}