body {
    font-family: 'Open Sans', sans-serif;
}

.container-fluid {
    background-color: #FFFFFF;
}

p { padding: 20px; font-size: 18px; display:inline-block;}

.naslov {
    background-color: #333333;
    color: #FFFFFF;
    margin: 0;
    padding: 20px;
    font-weight: bold;
}

.levo {float:left;display: block; color: #9BA7AB !important;}
.desno {float:right;display: block;}


#heder {
    
    background-image: url('../slike/heder_pozadina_1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    
    
}

#wrapper { display: block; max-width: 960px; padding-left: 10px; padding-right: 10px; height: auto; margin: auto;}

#navbar {display: inline-block; height: 50px; width: 100%; border-bottom: 1px solid #899396; color:#555555;}
#navbar nav { display: block; padding: 20px;}
#navbar nav a {color:#ffffff;}
#navbar nav a:hover {color:#C9EA3D; text-decoration: none;}

#heder h1 {font-weight: 100; margin-top: 0; margin-bottom: 5px;}
#heder h2 {font-weight: 100; font-size: 16px; color: #D8D8D8; margin-top: 5px; padding-bottom: 10px;}
#heder h3 {border: 3px solid #ffffff; padding: 20px 60px 20px 60px; text-transform: uppercase; display: inline-block;}
#avatar_holder {
    margin-top: 30px;
    display: inline-block; height: 125px;width: 125px; background-color: #ffffff;
    border-radius: 60px;-webkit-border-radius: 60px;-moz-border-radius: 60px;
	background: url('../slike/alien_avatar_zoljo.jpg') no-repeat;
    background-size: contain;
    border: 5px solid #fff;
}



#about {
    padding: 0;
    text-align: right;
    }
#about .naslov {background-color: #C9EA3D;}
#about p { font-weight: 100; max-width: 480px;}
#services .naslov {background-color: #3FD0E8;}

#services {padding: 0;}
#services ul {padding: 0;margin:0; }
#services ul li { border-bottom: 1px solid #EDEDED; list-style-type: none; padding: 0;margin:0; display: block; width: 100%; height: 80px;}
.services_polje1 {display: block; width: 80px; height: 80px; background-color: #D1D1D1; clear: both; float: left; background: rgb(209,209,209); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(209,209,209,1) 47%, rgba(199,199,199,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,rgba(209,209,209,1)), color-stop(100%,rgba(199,199,199,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(209,209,209,1) 47%,rgba(199,199,199,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(209,209,209,1) 47%,rgba(199,199,199,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(209,209,209,1) 47%,rgba(199,199,199,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(209,209,209,1) 47%,rgba(199,199,199,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#c7c7c7',GradientType=0 ); /* IE6-9 */
}
.services_polje2 {float: left; margin: 0; padding-left: 20px;}
.services_polje2 h3 {margin: 0; padding-top: 15px; font-size: 20px;}
.services_polje2 .services_opis { font-size: 16px; padding: 0; padding-top: 5px; color:#6E6E6E;font-weight: 100;}
.services_opis {}
#services .bez_bordera {border: 0px;}

#recent_work {padding: 0;background-color: #F1F1F2;}
#recent_work .link_fullsize {width: 100%; text-align: center;display: inline-block; font-size: 25px;}


.slika_wrap{width: 25%; height: auto;background-color: #222222; float:left; position: relative;}
.slika_wrap img {width: 100%;}
.slika_wrap .overlay {width: 100%;display: block; position: absolute; top:0; opacity: 0;  transition: opacity 300ms ease-in-out; background:rgba(0,0,0,0.5); color: #ffffff; padding: 20px;}
.slika_wrap:hover .overlay {opacity: 1;}
.slika_wrap .overlay strong {font-size: 18px; display: block; transition: font-size 300ms;}
.slika_wrap:hover .overlay strong {font-size: 24px;}
.slika_wrap .overlay small {opacity: 0; transition: opacity 300ms; transition-delay: 300ms;}
.slika_wrap .overlay a {width: 100%;height: 1000%;}
.slika_wrap:hover .overlay small {opacity: 1;}

#recent_work p {display: block;width: 100%; text-align: center;}
#recent_work .naslov, #contact .naslov {
    text-align: center;
    
}

#shop {text-align: center;
    background-image: url('../slike/shop_pozadina.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    
    color: #ffffff;
    overflow: hidden;
}
#shop .shop_wrap { display: inline-block; padding: 20px; padding-top: 40px; padding-bottom: 40px;  width: 100%;max-width: 1200px; min-height: 380px; }

#shop_slika { display: block; float: left; width: 30%; height: auto; }

#shop .shop_text_wrap {  text-align: left; padding-left: 40px; display: block; float: left; max-width: 70%; margin-top: 50px; }

#shop .shop_text_wrap h3 {font-weight: bold; font-size: 28px;}
#shop .shop_text_wrap p {padding: 0; margin-bottom: 30px; opacity: 0.8;}
#shop .shop_text_wrap a {color: #fff; font-size: 18px; border: 1px solid #fff; padding: 5px 40px; font-weight: bold;}
#shop .shop_text_wrap a:hover {color: #FFC21D; text-decoration: none; border: 1px solid #FFC21D; }

#galerije {text-align: center; font-weight: 100; padding-bottom: 40px;}
#galerije p {width: 100%; padding-top: 40px; color: #6E6E6E;}
.social_ikona {display: inline-block; font-size: 16px; padding: 20px; padding-top: 0; color: #6E6E6E;}
.social_ikona a {display: block; border-radius: 60px;-webkit-border-radius: 60px;-moz-border-radius: 60px;border: 1px solid #D4D4D4; margin-bottom: 10px;}
.social_ikona a img {width: 120px; height: 120px; padding: 20px;}
.social_ikona:hover a img {opacity: 0.5;}


#contact {
    background-color: #F1F1F2;
    display:block;
    text-align: center;
}

#contact p {width: 100%; font-weight: 100; display: inline-block;}
#contact p.email {font-weight: normal; font-size: 24px; padding-top: 5px;}
#email_ikona {border-radius: 60px;-webkit-border-radius: 60px;-moz-border-radius: 60px;border: 3px solid #333333; width: 120px; height: 120px; display: inline-block;}
#email_ikona img {display:inline-block;height: 80px;width: 80px; margin-top: 15px;}

#futer {text-align: center; font-weight: 100; color:#6F6E6E;}


@media (max-width: 960px) {
    #shop .shop_wrap { display: inline-block; padding: 20px; max-width: 1200px; min-height: 280px; }
   #shop_slika { display: inline-block;  width: 100%; height: auto; float: none;} 
  #shop .shop_text_wrap {  text-align: center; padding: 20px; display: block; max-width: 100%; float: none; }
}



@media (max-width: 1024px) {

    #shop_slika {max-width: 270px;}
    #shop .shop_text_wrap { margin-top: 20px; }
    #shop .shop_text_wrap p {font-size: 16px;}
    #shop .shop_wrap {min-height: 280px;}
}

@media (max-width: 768px) {
    .slika_wrap{width: 50%; }
    .services_polje2 .services_opis{
        font-size: 14px;
    }
}


@media (max-width: 480px) {
.slika_wrap{width: 100%;}
    #services ul li  { text-align: center; border: none; padding-bottom: 20px; display: block;  }
    .services_polje1, .services_polje2 { display: block;width: 100%; padding-left: 0px; float: left; height: auto;}
    .services_polje2 { padding-bottom: 20px;}
}

/* UPWORK FIX */


.upwork #contact p:after {
    content: "For any questions and proposals contact me from my Upwork profile";
}

.upwork_link {
    padding-bottom: 40px;
    
    float: left;
    width: 100%;
    font-size: 25px;
    display:none;
}

.upwork .upwork_link {
    display: block;
}
.upwork #contact #email_ikona, 
.upwork #contact .email,
.upwork #contact p span
{
    display: none;
}
.shot {
    display:block;
    float:left;

}