/* SPECIFIC STYLES */

html, body {
    background: #FCCE64;
    /* background: -webkit-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: -moz-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%); */
}

body {
    padding: 60px 0px 200px 0px;
    font-size: 100%;
}

.div {
    text-align: center;
}

.center {
    margin: auto;
    padding: 10px;
}

/* row style */

.row {
    text-align: center;
    margin: 0px 0px 0px -5px;
}

.row-header {
    text-align: center;
    margin: 0px auto;
    padding: 0px auto;
}

.row-content {
    margin: 0px auto;
    padding: 50px 0px 50px 0px;
    border-bottom: 1px ridge;
    min-height: 400px;
}

.row-footer {
    background-color: rgb(175, 175, 175, 0.4);
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
}

/*** end row style ***/

/* top menu */

.navbar-header button.navbar-toggle {
    clear: both;
    margin-top: 8px;
}

#btn {
    clear: both;
    margin-top: 8px;
}

.nav a {
    color: #A62F00;
}

.navbar {
    background: #FC8D05;
    background: -webkit-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: -moz-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    padding: 10px 0px 10px 0px;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
}

/* home link */

.navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus {
    color: #fcad38;
    background: #fcfbab;
    border-radius: 10px;
}

.navbar-right>li>a:focus {
    color: #fcad38;
    background: #fcfbab;
    border-radius: 10px;
}

/* other links */

.nav>li>a:hover, .nav>a:focus, .navbar .navbar-nav>a:visited {
    color: #fcad38;
    background: #fcfbab;
    border-radius: 10px;
}

/* other links click */

.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus {
    color: #fff;
    background: #fcce64;
    border-radius: 10px;
}

.navbar .navbar-nav .open .dropdown-menu>li>a, .navbar .navbar-nav .open .dropdown-menu {
    color: #fcce64;
    background-color: #A62F00;
    border-radius: 10px;
}

.navbar .navbar-nav .open .dropdown-menu>li>a:hover {
    color: #A62F00;
    background: #fcce64;
    border-radius: 10px;
}

.navbar-header img {
    margin: 8px 5px 0px 12px;
    width: 35px;
    height: 35px;
}

ul li img {
    margin: 12px 5px 0px 0px;
    width: 28px;
    height: 28px;
}

.navbar-header i, nav i {
    margin: 8px 8px 0px 10px;
    -webkit-text-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
    text-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
}

.yellow-color {
    color: #fcfcac;
}

.dropdown-header {
    color: #fff;
}

/*** end top menu ***/

/* Page title */

.jumbotron {
    padding: 0px 0px 0px 0px;
    text-align: center;
    width: 100%;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
}

.jumbotron h1 {
    position: absolute;
    text-align: center;
    top: 10%;
    font-size: 4em;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.jumbotron h1:nth-of-type(2) {
    position: absolute;
    text-align: center;
    top: 40%;
    font-size: 2em;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.jumbotron h2 {
    position: absolute;
    text-align: center;
    top: 70%;
    font-size: 2em;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.jumbotron span {
    position: absolute;
    text-align: center;
    top: 95%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.imageHolder {
    position: relative;
    text-align: center;
    width: 100%;
    /* IE 6 */
    overflow: hidden;
}

.imageHolder img {
    width: 100%;
}

.otto {
    font: bold;
    font-family: "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive;
    color: white;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

/*** end Page title ***/

/* Portfolio */

.picture-holder {
    width: 340px;
    height: 320px;
    position: relative;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, -1px 0px 1px 19px rgba(166, 47, 0, 0);
    color: #A62F00;
    overflow: hidden;
    text-align: center;
    background: #FCFCAC;
    background: -webkit-linear-gradient(bottom, #FCCE64, #FC8E06);
    background: -moz-linear-gradient(bottom, #FCCE64, #FC8E06);
    background: linear-gradient(to top, #FCCE64, #FC8E06);
}

.picture-holder a {
    color: #A62F00;
}

.picture-holder:hover {
    background: #FC8D05;
    background: -webkit-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: -moz-linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
    background: linear-gradient(to top, #FC8D05 0%, #FCCE64 50%, #FC8D05 100%);
}

.picture-holder h4 {
    font-weight: bold;
}

.picture-holder img {
    margin-top: 16px;
    border-radius: 25px;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.square-img img {
    margin-top: 16px;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.on, .unde {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 6px;
    left: 20px;
    z-index: 10;
}

.unde {
    top: 35%;
    left: 5%;
    font: 1.5em sans-serif;
}

/*** end Portfolio ***/

/* Print text */

.cell {
    width: 315px;
}

.line1 {
    display: inline-block;
}

.space1 {
    padding-left: 7px;
    padding-right: 115px;
}

.space2 {
    padding-left: 0px;
    padding-right: 10px;
}

.vertiсal {
    width: 1ch;
    text-align: center;
    font-family: monospace, ui-monospace;
    color: #FF4900;
    font-size: 2.2em;
    word-wrap: break-word;
}

.typewriter1 {
    position: relative;
    text-align: left;
    color: brown;
    font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace, ui-monospace;
    font-weight: bold;
    font-size: 3.2em;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: 2px solid rgb(95, 72, 28);
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: 4px;
    /* Adjust as needed */
    animation: typing1 1s steps(4, end), blink-caret 1s step-end forwards;
}

.typewriter2 {
    text-align: left;
    position: relative;
    color: brown;
    font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace, ui-monospace;
    font-weight: bold;
    font-size: 3.3em;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: 3px solid orange;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: 8px;
    /* Adjust as needed */
    animation: typing2 1s steps(8, end), go-down 1s linear forwards, blink-caret 1s step-end forwards;
}

.typewriter1::first-letter {
    color: #FF9200;
}

.typewriter2::first-letter {
    color: #FF9200;
}

/* The typing effect */

@keyframes typing1 {
    from {
        width: 0
    }
    to {
        width: 4ch
    }
}

@keyframes typing2 {
    from {
        width: 0
    }
    to {
        width: 8ch
    }
}

@keyframes go-down {
    0% {
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_AVA {
    animation: go-AVA 1s linear forwards, blink-AVA .5s linear forwards;
}

@keyframes go-AVA {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_MENU {
    float: right;
    animation: go-DATA 2s linear forwards, blink-DATA .5s linear forwards;
}

@keyframes go-DATA {
    0%, 60% {
        opacity: 0;
    }
    70%, 90% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.9;
    }
}

.topMenu {
    width: 120px;
    padding-top: 12px;
}

.topMenu a {
    font-weight: bold;
}

.rightpic {
    float: right;
    margin: 0;
    display: block;
}

.projectsMenu {
    padding: 10px 0px 0px 0px;
}

.go_DEV {
    animation: go-DEV 1s linear forwards, blink-DEV .5s linear forwards;
}

@keyframes go-DEV {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_CRIPT {
    animation: go-CRIPT 1s linear forwards, blink-CRIPT .5s linear forwards;
}

@keyframes go-CRIPT {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_LOPER {
    animation: go-LOPER 1s linear forwards, blink-LOPER .5s linear forwards;
}

@keyframes go-LOPER {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_PORTAL {
    animation: go-PORTAL 1s linear forwards, blink-PORTAL .5s linear forwards;
}

@keyframes go-PORTAL {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.go_ACT {
    animation: go-ACT 1s linear forwards, blink-ACT .5s linear forwards;
}

@keyframes go-ACT {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

/*end*/

/* The typewriter cursor effect */

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

.contactLink {
    width: 125px;
    text-align: right;
}

.contact {
    color: #FF4900;
    font-size: 1.1em;
    font-weight: bold;
    animation: go-contact 1s linear forwards, blink-contact .5s linear forwards;
}

.convert::after {
    content: '\2709';
    color: #FF4900;
    font-size: 3.6em;
    text-shadow: 1px 1px 3px #FF4900;
    animation: go-contact 1s linear forwards, blink-contact .5s linear forwards;
}

@keyframes go-contact {
    0% {
        opacity: 0;
        transform: translateY(-105px);
    }
    100% {
        transform: none;
    }
}

.picture-holder .btn {
    color: rgb(252, 253, 198);
    font-weight: bold;
}

.sap-ui5-bg {
    width: auto;
    height: 90% !important;
}

.on-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border: none;
}

/* MOVE IMG */

.kenburns-bottom-left {
    -webkit-animation: kenburns-bottom-left 5s ease-out both;
    animation: kenburns-bottom-left 5s ease-out both;
}

@-webkit-keyframes kenburns-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(-20px, 15px);
        transform: scale(1.25) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}

@keyframes kenburns-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(-20px, 15px);
        transform: scale(1.25) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}

/* end move img */

/* FOOTER */

.panel-footer {
    background: #FFFFFF;
    text-align: center;
}

.panel-footer img {
    width: 300px;
    overflow: hidden;
}

/* end footer */

/********** Large devices only **********/

@media (min-width: 1200px) {
    .jumbotron {
        padding: 0px 0px 0px 0px;
        margin: 0px auto;
        height: 300px;
    }
    .imageHolder {
        height: 300px;
    }
    .row {
        margin-top: 15px;
    }
    .panel-footer {
        left: 0;
        bottom: 0;
    }
}

/********** Medium devices only **********/

@media (min-width: 992px) and (max-width: 1200px) {
    .jumbotron {
        padding: 0px 0px 0px 0px;
        margin: 0px auto;
        height: 250px;
    }
    .jumbotron h1 {
        font-size: 3em;
    }
    .jumbotron h1:nth-of-type(2) {
        font-size: 2em;
    }
    .jumbotron h2 {
        font-size: 2em;
    }
    .imageHolder {
        height: 250px;
    }
    .row {
        margin: 20px 0px 0px -5px;
    }
    .panel-footer {
        left: 0;
        bottom: 0;
    }
}

/********** Small devices only **********/

@media (min-width: 768px) and (max-width: 992px) {
    /* Page */
    .jumbotron {
        padding: 0px 0px 0px 0px;
        margin: 10px auto;
        height: 200px;
    }
    .jumbotron h1 {
        font-size: 2em;
    }
    .jumbotron h1:nth-of-type(2) {
        font-size: 1.5em;
    }
    .jumbotron h2 {
        font-size: 1.3em;
    }
    .imageHolder {
        width: 100%;
        height: 200px;
    }
    .row {
        margin: 10px 0px 0px -10px;
    }
    .picture-holder {
        height: 330px;
    }
    .panel-footer {
        left: 0;
        bottom: 0;
    }
    /* End Page */
}

/********** Extra small devices only **********/

@media (max-width: 768px) {
    /* Header */
    .jumbotron {
        width: 100%;
        padding: 0px;
        margin: 15px 0 40px 0;
    }
    .jumbotron h1 {
        font-size: 2em;
    }
    .jumbotron h1:nth-of-type(2) {
        top: 50%;
        font-size: 1.5em;
    }
    .jumbotron h2 {
        font-size: 1.3em;
    }
    .imageHolder {
        width: 100%;
        height: 250px;
    }
    /* End Header */
    .row {
        margin: 0px 0px 0px -20px;
    }
    .picture-holder {
        height: 330px;
    }

    .row-footer {
        margin: 0px 0px 20px -20px;
        float: left;
    }
    .panel-footer {
        width: 340px;
        margin: auto;
        border-radius: 20px;
    }
}

/********** Super extra small devices Only (e.g., iPhone 4) **********/

@media (max-width: 479px) {
    /* Page */
    .col-xxs-12 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 0px;
        float: left;
        width: 100%;
    }
    .row-footer {
        margin: 0px 0px 20px 10px;
        background-color: #FCCE64;
    }
    /* END Page */
}