/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/

    *, :before, :after {
      box-sizing: border-box;
    }

    body {
       
    }
    /* Default link styling */
    a {
        transition: color 0.5s ease;
    }
    a:link, a:visited, a:active { color:#009688; }
    a:hover, a:focus { color:#000; }
    
    
    
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
    body {
   
    }

    picture {
        display: block;
    }
    
    h1,h2,h3,h4,h5,h6 {
        margin-top: 0px;
    }

    .js div#preloader { 
        position: fixed; 
        left: 0; 
        top: 0; 
        z-index: 999; 
        width: 100%; 
        height: 100%; 
        overflow: visible; 
        background: #455A64; 
    }

    .spinner {
        width: 40px;
        height: 40px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-60%);
    }

    .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #cacaca;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        animation: sk-bounce 2.0s infinite ease-in-out;
    }

    .double-bounce2 {
        animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }

    @keyframes sk-bounce {
      0%, 100% { 
        transform: scale(0.0);
      } 50% { 
        transform: scale(1.0);
      }
    }

    header#banner {
        position: relative;
        background: #455A64;
    }
    
    header #introduction {
        position: absolute;
        z-index: 100;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-60%);
        color: #fff;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
    }
    
    .cv-button {
        background: transparent;
        border: 2px solid #fff;
        padding: 6px 20px;
        color: #fff !important;
        text-decoration: none !important;
    }
    
    .section-about {
        position: relative;
        text-align: center;
    }

    .section-anchor {
        position: absolute;
        top: 0px;
    }

    ul.skills {
        text-align: center;
        list-style: none;
        padding-left: 0px;
        text-transform: uppercase;
    }
    ul.skills li {
        position: relative;
        display: inline-block;
        background: #607D8B;
        color: #B2DFDB;
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-size: 16px;
        padding: 7px 18px;
        margin: 6px;
    }
    
    ul.skills li:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 16px 16px 0;
        border-style: solid;
        border-color: #33505d #fff;
    }

    .section-works {
        color: #fff;
    }

    .section-content.section-works:nth-child(2n) {
        background: #212121 none repeat scroll 0% 0%;
    }

    .section-content.section-works:nth-child(2n+1) {
        background: #302D2D none repeat scroll 0% 0%;
    }

    .section-works img {
        max-width: 100%;
        display: inherit;
        transition: opacity 0.5s ease;
    }

    .section-works img:hover {
        opacity: 0.75;
    }

    .content-projects {
        text-align: center;
        max-width: 1108px;
        margin: auto;
    }

    .content-projects p {
        margin-top: 0px;
    }

    .content-projects p span {
        color: #009688;
    }

    .content-projects h3 {
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        margin-bottom: 0px;
    }

    .content-projects h3 a {
        text-decoration: none;
        color: #fff;
    }
    
    .fa {
     width: 60px;
     display: block;
     text-align: center;
     color:#fff;
     font:normal 45px 'FontAwesome';
     line-height:60px;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
    }
    .fa-angle-double-down:before {content: "\f103";}

    .bounce {
     position: absolute;
     bottom: 30px;
     left: 50% ;
     width: 60px;
     height: 60px ;
     margin-left:-30px;
     animation: bounce 2s infinite;
    }

    .bounce a {
        text-decoration: none;
        color: transparent;
    }

    section {
        padding: 8% 5% 8% 5%;
        font-family: 'Catamaran', sans-serif;
        font-weight: 300;
        font-size: 17px;
    }

    section h2 {
        text-transform: uppercase;
        margin: auto;
        text-align: center;
    }

    section hr {
        border: 1px solid #455A64;
        max-width: 320px;
        margin: 22px auto;
    }

    section.section-works {
        padding-bottom: 0px;
    }

    @-webkit-keyframes bounce {
     0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
     40% {-webkit-transform: translateY(-30px);}
     60% {-webkit-transform: translateY(-15px);}
    }

    @-moz-keyframes bounce {
     0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
     40% {-moz-transform: translateY(-30px);}
     60% {-moz-transform: translateY(-15px);}
    }

    @-o-keyframes bounce {
     0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
     40% {-o-transform: translateY(-30px);}
     60% {-o-transform: translateY(-15px);}
    }
    @keyframes bounce {
     0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
     40% {transform: translateY(-30px);}
     60% {transform: translateY(-15px);}
    }
    


/* ---------------------------------------------------------
   Footer
   ---------------------------------------------------------*/
    
    footer {
        background: #212121;
    }

    .section-footer {
        color: #fff;
        text-align: center;
        padding-top: 4%;
        padding-bottom: 4%;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        font-size: 16px;
    }

    footer a:hover {
        color: #fff;
    }

/* ---------------------------------------------------------
   Contact Form
   ---------------------------------------------------------*/

    .approval-icon .fa {
        color: #455A64;
        margin: auto;
        font-size: 100px;
        line-height: 100px;
        width: 100px;
    }

.message-received, .approval-icon {
    text-align: center;
}

    form {
      text-align: center;
    }

    form textarea, form input {
        border: 2px solid #DDD;
        border-radius: 0px;
        color: #999;
        display: block;
        font: 400 1em/1 'Catamaran', sans-serif;
        margin: 10px auto;
        padding: 1em 0.5em;
        width: 90%;
        transition: border-color 300ms ease 0s, color 300ms ease 0s;
        line-height: 22px;
    }

    form label {
        display: none;
    }
    form textarea:focus, form input:focus {
        border-color: #455A64;
        color: #333;
        outline: 0px none;
    }

    .input-error {
        border-color: #FF3B3B;
    }

    .button,
    [class*="button-"] {
        position: relative;
        display: inline-block;
        overflow: hidden;
        margin: 10px .5em 0px .5em;
        padding: 0 4em;
        height: 3.0em;
        font: 300 .8em/3.0em 'Catamaran', sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
        letter-spacing: .08em;
        color: #fff !important;
        background: #576A73;
        border: solid 1px #fff;
        border-bottom: 3px solid #000;
        border-radius: 2px;
        -moz-transition: ease 0.35s all;
        -o-transition: ease 0.35s all;
        -webkit-transition: ease 0.35s all;
        transition: ease 0.35s all;
    }
    .button:hover,
    [class*="button-"]:hover {
      background: #455A64;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
    }

    .button-hover:hover {
      line-height: 9em;
    }
    .button-hover:before {
      content: attr(data-text);
      color: #DEEFF5;
      position: absolute;
      top: -2.75em;
    }

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

    body {
        line-height: 28px;
    }

    section {
        padding: 15% 5% 15% 5%;
        font-family: 'Catamaran', sans-serif;
        font-weight: 300;
        font-size: 17px;
    }
    
    section.section-works {
        padding-bottom: 0px;
    }
    
    .content-projects p {
        padding: 0px 10px;
    }
    
    section strong {
        font-weight: 400;
    }
    
    #introduction, .bounce {
        margin-top: -50px;
    }
                
    #introduction h1 {
        font-size: 28px;
        font-weight: 600;
        margin: 0px;
    }
    
    #introduction h2 {
        font-size: 22px;
        font-weight: 300;
        margin: 0px;
    }
    
    ul.skills {
        text-align: center;
        list-style: none;
        padding-left: 0px;
        text-transform: uppercase;
    }
    ul.skills li {
        position: relative;
        display: inline-block;
        background: #607D8B;
        color: #B2DFDB;
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-size: 16px;
        padding: 7px 18px;
        margin: 6px;
    }
    
    ul.skills li:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 16px 16px 0;
        border-style: solid;
        border-color: #33505d #fff;
    }

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    section {
        padding: 12% 8% 12% 8%;
        font-size: 22px;    
    }
    
    section.section-works {
        padding-bottom: 0px;
    }
    
    ul.skills li {
        font-size: 18px;
    }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

    body {
        line-height: 34px;
    }    
    
    #introduction, .bounce {
        margin-top: 0px;
    }
    #introduction h1 {
        font-size: 48px;
        line-height: 42px;        
    }
    
    #introduction h2 {
        font-size: 28px;
        line-height: 42px;
    }
    
    ul.skills {

    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
            
            
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */ 
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
    
    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure { 
        margin-bottom:1em; 
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}