/*   
Theme Name: Gentle giant
Theme URI: http://gentlegiant.me
Description: A style-free theme to get you started on an HTML5-based Wordpress theme of your own.
Author: Mgretzki
Author URI: 1
Version: 1
*/

/*
	HTML5 Reset Wordpress Theme :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
	Special thanks: The Wordpress theme owes its start to an empty theme authored 
		by Chris Coyier & Jeff Starr: http://digwp.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
@font-face {
    font-family: 'OpenSansRegular';
    src: url('_/css/OpenSans-Regular-webfont.eot');
    src: url('_/css/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('_/css/OpenSans-Regular-webfont.woff') format('woff'),
         url('_/css/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('_/css/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpenSansLight';
    src: url('_/css/OpenSans-Light-webfont.eot');
    src: url('_/css/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('_/css/OpenSans-Light-webfont.woff') format('woff'),
         url('_/css/OpenSans-Light-webfont.ttf') format('truetype'),
         url('_/css/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {
	margin:0;
                        
    font: 16px/26px 'OpenSansRegular', Arial, sans-serif;
    background:url(img/bg3.jpg) repeat #322938;
    color:#fff;

}
a{outline: none;
     -webkit-transition: color 200ms ease-out;
        -moz-transition: color 200ms ease-out;
        -ms-transition: color 200ms ease-out;
        -o-transition: color 200ms ease-out;
        transition: color 200ms ease-out;
}
p{line-height: 1.6875;}
.container{

    width:100%;
    margin:0 auto;
    

}
.top{
    max-width:100%;
    background:url(img/bg.jpg) repeat #6db593;
    overflow: hidden;
    padding-bottom: 30px;
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.5);

}
header, .content{

    max-width:1020px;
    margin:0 auto;
   /* border: 1px solid red;*/
    overflow: hidden;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}
header p{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
    font-family: 'Sanchez', serif;
    margin-top:130px;
    margin-left:20px;
    float:left;
    width:60%;
    line-height: 1.4em;
    font-size:1.3em;
    color:#fff;
   

    padding:0 0px 0 5px;

    text-shadow: rgba(0, 0, 0, .2) 1px 1px 0px;
}

header p a{

    color:#ccc;
    text-decoration: none;
    font-weight: bold;
     text-shadow: rgba(0, 0, 0, .4) 1px 1px 0px;

}
header p a:hover{
	color:#fff;
}
.gentlegiant{
    float: left;
    position: relative;
    background: url(img/gentlegiant2.png) no-repeat center;
    background-size: 280px 335px;
    width:280px;
    height: 335px;
    display: block;
    margin-left:50px;
}
.gentlegiant404{
    float: left;
    position: relative;
    background: url(img/gentlegiant404.png) no-repeat center;
    width:280px;
    height: 335px;
    display: block;
    margin-left:50px;
}

.gentlegiant .cloud1, .gentlegiant404 .cloud1{
    width: 220px;
    height: 133px;
    background: url(img/c1.png) no-repeat center;
    z-index: 5;
    display: block;
    position: absolute;
    top: 0px;
    left: -44px;
    -webkit-animation: cloud-one-animation 6s  infinite;
    -moz-animation: cloud-one-animation 6s infinite ;
    -o-animation: cloud-one-animation 6s infinite ;
    -ms-animation: cloud-one-animation 6s infinite;
    animation: cloud-one-animation 6s  infinite;

}
.gentlegiant .cloud2, .gentlegiant404 .cloud2{

    width: 200px;
    height: 100px;
    background: url(img/c2.png) no-repeat center;
    z-index: 2;
    display: block;
    position: absolute;
    top: 8px;
    left:105px;
    -webkit-animation: cloud-two-animation 6s infinite ;
    -moz-animation: cloud-two-animation 6s infinite ;
    -o-animation: cloud-two-animation 6s infinite ;
    -ms-animation: cloud-two-animation 6s infinite ;
    animation: cloud-two-animation 6s infinite ;
}
.content{
    margin-top:30px;
    padding:0 15px;
    overflow: hidden;

}
.content figure{
    float:left;
    padding:0 10px 0 0;

    width: 50%;
     max-width: 480px;

     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}
.content a{
    color:#fff;
    text-decoration: underline;
}

.content h2{
     font-family: 'Sanchez', serif; 
}
    figure{
        display:block;
        position: relative;
        margin:0;

    
    }
   figure a img{
      
        max-width: 100%;
        z-index: 1;
        

    }

    figure figcaption{
        
        color:#fff;
        text-decoration: none;
        font-size: 0.8125em;
        margin-bottom:5px;
        background: #1d1717;
        padding:2px 8px 2px 8px;
        margin-bottom: 10px;
        text-align: right;
        -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, .7);

        -webkit-transition: background 200ms ease-out;
        -moz-transition: background 200ms ease-out;
        -ms-transition: background 200ms ease-out;
        -o-transition: background 200ms ease-out;
        transition: background 200ms ease-out;


    }
    figure figcaption.postmetadata a{

        color:#fff;
        text-decoration: none;

        padding:8px 3px 8px 3px;

    }
    figure figcaption a:hover{

        color:#1d1717;
    }
     figure:hover figcaption{
       background: #6db593; /*oranžno rdeča#F24D16;*/
    
  
    }



    aside.sidebar{
        clear:both;
        font-size:0.8125em;
        padding-top: 20px;
    }

    aside.sidebar a{

        text-decoration: none;
        color:#ccc;


    }
   
    .back-to-top a:hover{
        color:#fff;
    }
    .back-to-top, .sidebar_social{
        width: 50%;
        float: left;


    }
    .sidebar_social{text-align: right;}

    aside .social-small{
        list-style: none;
        margin:0 40px 0 0;
        overflow: hidden;
        padding-left: 0;
        text-align: right;
        float: right;

     
        

    }
    body.single aside .social-small{
        margin:0;
    }
    aside .social-small li{
        float:left;
        

    }
    
    aside .social-small li a{
        text-transform: uppercase;
    }


    aside .social-small li::before{
        content:"/";
        margin:0 4px;
        
        color:#adadad;
    }
aside .social-small li:first-child::before{
        content:" ";
        margin:0;
    }
  
    aside .social-small .twitter a:hover{

        color: #1bb2e9;

    }
    aside .social-small .facebook a:hover{

        color: #3b5998;
    }
     aside .social-small .about-me a:hover{

        color: #6db593;
    }

    

    footer{

        font-size:13px;
          font-family: 'Sanchez', serif;
          color:#ccc;
    }

    /*SOCIAL IKONS and text - se obarva kot je barva strani*/
/**
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
*/

/************SLIDER***********/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

  .rslides_tabs{
    list-style: none;
    float:right;
    margin:20px 0 5px 0;
  }
  .rslides_tabs li{

    display: inline;
  }
  .rslides_tabs li a{

    background:#222;
    float:left;
    display: block;
    width:20px;
    text-align: center;
    line-height: 20px;
    margin:0 4px;
    border-radius: 20px;
    text-indent: 9000%;
    outline: none;


  }
  .rslides_tabs li a:hover{background: #2a2a2a;}
  .rslides_tabs li.rslides_here a{
    background: #6db593;
  }
  div.description{

    width: 48%;
    float:left;
    font-size: 0.8125em;
    margin-bottom:20px;

  }
  .description p a{
    color:#6db593;
    text-decoration: none;
  }
  .description p a:hover{
    color:#ccc;
  }

.description .category a{

   
    padding:3px 10px;
    background: #222;
    margin: 0 2px;
    text-decoration: none;
    border-radius: 4px;
}
.description .category a:hover{

    background:#2a2a2a;
}

.projects-navi{

    padding:15px 0 0 0;
    margin:0;

}
.projects-navi a{
     font-size:0.8125em;
    text-decoration: none;
    color:#ccc;
    margin-right: 5px;

}
.projects-navi a:hover{
    color:#6db593;
}
  .projects-navi, footer{clear:both;}


.picture{
    width:30%;
    float:left;
    margin-bottom: 20px;
}
.picture img{
    max-width: 300px;
    width: 100%
}
.about-more{
    width: 70%;
    padding:0 30px 0 42px;
    display: block;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}
.about-more p{ 
    font-size: 0.875em;
    line-height: 1.45em;
    margin-top:0;
   
}
.about-more .cv{
    text-transform: uppercase;
    color:#6db593;
}
.about-more p a, .cv a{
      color:#6db593;

    text-decoration: none;
    font-weight: bold;
}


.about-more p a:hover, .cv a:hover{
    color:#6db593;
    text-decoration: underline;
}

.about-more h4{
    margin-bottom:5px;
}
.about-more .all{
    list-style:none;
    padding:0 0 20px 0;
    margin:0;
    display: block;
    overflow: hidden;

}
.about-more .all:hover li a{
    -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    opacity:1;
}
.about-more .all li{

    float:left;
    text-align: left;
}
.about-more .all li a{
    display:block;
    padding:0 8px 0 0;
    font-size:0.8125em;
    text-decoration: none;
    color:#ccc;
    opacity:0.3;
}
.about-more .all  li.lastfm a:hover{
    color:#d51007;
    opacity:1;
}
.about-more .all li.linkedin a:hover{
    color:#3e8cc8;
    opacity:1;
}
.about-more .all li.twitter a:hover{
    color:#1bb2e9;
    opacity:1;
}
.about-more .all li.facebook a:hover{
    color:#3b5998;
    opacity:1;
}
.about-more .all li.forrst a:hover {
    color:#376134;
    opacity:1;
}
.about-more .all li.flickr a:hover{
    color:#ff0084;
    opacity:1;
}

.about-more .all li.vimeo a:hover{
    color:#3bb7ea;
    opacity:1;
}
.about-more .all li.instagram a:hover{
    color:#9e7053;
    opacity:1;
}

.about-more .award{

    font-size:0.8125em;
    color:#ccc;
    font-style: italic;
    margin-bottom: 0;
    
}

footer small{
    font-size:0.9375em;
    color:#777;
}
footer.info a{
    text-decoration: none;
    color:#ccc;
}
footer.info a:hover{
    color:#6db593;
}

/*********ANIMATIONS**********/

@-webkit-keyframes cloud-one-animation  {
  
    0% {-webkit-transform: translate(3px, 0px);}
    40% {-webkit-transform: translate(-3px, 1px);}
    100% {-webkit-transform: translate(3px, 0px);}
  

}

@-webkit-keyframes cloud-two-animation {
    0% {-webkit-transform: translate(-4px, 0px);}
    50% {-webkit-transform: translate(2px, 2px);}
    100% {-webkit-transform: translate(-4px, 0px);}
}
@-moz-keyframes cloud-one-animation {
     0% {-moz-transform: translate(3px, 0px);}
    50% {-moz-transform: translate(-3px, 1px);}
    100% {-moz-transform: translate(3px, 0px);}
}
@-moz-keyframes cloud-two-animation {
    0% {-webkit-transform: translate(-4px, 0px);}
    50% {-webkit-transform: translate(2px, 2px);}
    100% {-webkit-transform: translate(-4px, 0px);}
}
@-o-keyframes cloud-one-animation {
    0% {-o-transform: translate(3px, 0px);}
    50% {-o-transform: translate(-3px, 1px);}
    100% {-o-transform: translate(3px, 0px);}
}
@-o-keyframes cloud-two-animation {
    0% {-webkit-transform: translate(-4px, 0px);}
    50% {-webkit-transform: translate(2px, 2px);}
    100% {-webkit-transform: translate(-4px, 0px);}
}
@-ms-keyframes cloud-one-animation {
    0% {-ms-transform: translate(3px, 0px);}
    50% {-ms-transform: translate(-3px, 1px);}
    100% {-ms-transform: translate(3px, 0px);}
}
@-ms-keyframes cloud-two-animation {
    0% {-webkit-transform: translate(-4px, 0px);}
    50% {-webkit-transform: translate(2px, 2px);}
    100% {-webkit-transform: translate(-4px, 0px);}
}
@keyframes cloud-one-animation {
    0% {transform: translate(3px, 0px);}
    50% {transform: translate(-3px, 1px);}
    100% {transform: translate(3px, 0px);}
}
@keyframes cloud-two-animation {
    0% {-webkit-transform: translate(3px, 0px);}
    50% {-webkit-transform: translate(-3px, 1px);}
    100% {-webkit-transform: translate(3px, 0px);}
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */


#cssawards{
  position:fixed;
  top:0px;
  left:0px;
  z-index:555;
  }
  #cssawards a{
  width:140px;
  height:140px;
  text-indent:-8000px;
  display:block;
  background:url(cssa-dark.png) no-repeat;}
/* ==========================================================================
   Media Queries
   ========================================================================== */



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



}

@media only screen and (max-width: 900px) {
    .gentlegiant{

        float:none;
        margin:0 auto;
    }
    header p{

        float:none;
        width: 100%;
        margin:20px auto;
        padding:0 15px;
        text-align: center;

    }

    .content figure{

        float:none;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;

    }

   
  
}
@media only screen and (max-width: 680px) {
    header p{

        font-size:1.125em;
    }
    div.description{

        float:none;
     
        width: 100%;
        display:block;
        overflow: hidden;
    }

    .rslides_tabs li a{

        width:30px;
    
    line-height: 30px;
    
    border-radius: 30px;
    margin:0 10px;
    }
  
    .picture{

        float:none;
        width: 100%;
    }
    .picture img{
        max-width: 300px;
        margin:0 auto;
        display: block;
    }
    .about-more{

        float:none;
        width: 100%;
        padding:0;
    }





    .back-to-top, .sidebar_social{
        width: 100%;
        float: none;


    }
    .sidebar_social .social-small{
       float:left;
    }
 

}
@media only screen and (max-width: 320px) {
    .container{

        width:320px;
    }

}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi){

    /*.gentlegiant{
         background: url(img/gentlegiant2x.png) no-repeat center;

    }*/
   /* .gentlegiant .cloud1{
         background: url(img/c12x.png) no-repeat center;
    }
    .gentlegiant .cloud2{
         background: url(img/c22x.png) no-repeat center;
    }*/

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}