@font-face {
    font-family: Avenir;
    src: url(fonts/avenir.ttc);
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Avenir, sans-serif;
}

footer {
    position: absolute;
    display: inline;
    bottom: 0px;
}

header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    background: #34AADC;
    z-index: 100;
}

header h1 {
    text-align: center;
    margin: .5rem;
    
    font-weight: 500;
    color: white;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

header h2 {
    font-size: 1rem;
    text-align: center;
    margin: .5rem;
    
    font-weight: 500;
    color: white;
}

header h1 a:hover {
    cursor: pointer;
}

nav {
    padding: 10px;
    
    text-align: center;
    
    background: #5AC8FB;
}

.nav-link {
    display: inline;
    margin: 10px;
}

.nav-link a {
    padding: 5px 10px 5px 10px;
    color: white;
    border-radius: 4px;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-link a:link {
    text-decoration: none;
    
}

.nav-link a:visited {
    text-decoration: none;
}

.nav-link a:hover {
/*
    color: white;
    background: #218ebd;
*/
    cursor: pointer;
}

.nav-link a:active {
/*
    color: white;
    background: #176384;
*/
    cursor: pointer;
}

.nav-link a[currentnav="true"] {
    color: white;
    background: #218ebd;
    cursor: pointer;
}

a {
    text-decoration: none;
}

a:link {
    color: #0960b9;
}

a:visited {
    color: #0960b9;
}

main {
    position: absolute;
    top: 100px;
    width: 100%;
}

.main-column {
    position: absolute;
    
    left: 50%;
    transform: translate(-50%);
    
    width: 75%;
    
    margin-top: 1em;
    margin-bottom: 1em;
}

.card {
    box-sizing: border-box;
    padding: 1rem;
    margin-top: 1rem;
    line-height: 1.4rem;
    text-align: left;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.1);
    box-shadow: 0 0 2px rgba(0,0,0,.1);
}

div.card:last-element {
    margin-bottom: 2rem;
}

.card h2 {
    margin: 0;
    font-weight: 600;
    line-height: 2rem;
}

.card h3 {
    margin: 1rem 0 0 0;
}

.card h4 {
    margin: 1.5rem 0 0 0;
}

.card p {
    margin: .7rem 0 0 0;
}

ul.skills li {
    /*list-style: none;*/
    list-style-position:inside;
}

ul {
    /*list-style: none;*/
    list-style-position:inside;
    margin:5px;
    padding:5px;
}

.accesso {
    clear: right;
    float: right;
    height: 63px;
    width: 120px;
    margin-left: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/accesso.png); 
    background-size: contain;
}

.photopass {
    clear: right;
    float: right;
    height: 100px;
    width: 148px;
    margin-left: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/photopass.png); 
    background-size: contain;
}

.disney {
    clear: right;
    float: right;
    height: 80px;
    width: 245px;
    margin-left: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/disney.png); 
    background-size: contain;
}

.uri {
    float: right;
    height: 8.3rem;
    width: 8.3rem;
    margin-left: .5rem;
    border-radius: 3px;
    background: url(images/URI.jpg);
    background-size: contain;
}

.skhs {
    float: right;
    height: 6.1rem;
    width: 6.1rem;
    margin-left: .5rem;
    border-radius: 3px;
    background: url(images/skhs.png);
    background-size: contain;
}

.igt {
    clear: right;
    float: right;
    height: 80px;
    width: 200px;
    margin-left: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/igt.png);
    background-size: contain;
}

.nexttab {
    float: right;
    height: 120px;
    width: 199px;
    margin-left: .5rem;
    margin-bottom: 2rem;
    border-radius: 0px;
    background: url(images/nextab.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.pocketdex {
    float: right;
    height: 120px;
    width: 199px;
    margin-left: .5rem;
    margin-bottom: 2rem;
    border-radius: 0px;
    background: url(images/pocketdex.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.parkbench {
    float: right;
    height: 120px;
    width: 199px;
    margin-left: .5rem;
    margin-bottom: 2rem;
    border-radius: 0px;
    background: url(images/parkbench.png);
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.catandomizer {
    float: right;
    height: 120px;
    width: 199px;
    margin-left: .5rem;
    margin-bottom: 2rem;
    border-radius: 0px;
    background: url(images/catandomizer.png);
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.rhodes {
    clear: right;
    float: right;
    height: 71px;
    width: 120px;
    margin-left: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/rhodes.png);
    background-size: contain;
}

.photo {
    clear: right;
    float: right;
    height: 120px;
    width: 120px;
    margin-left: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/photo.png);
    background-size: contain;
}

.belize {
    clear: right;
    float: right;
    height: 120px;
    width: 120px;
    margin-left: .5rem;
    margin-bottom: .8rem;
    border-radius: 3px;
    background: url(images/belize.jpg);
    background-size: contain;
}

.nicaragua {
    clear: right;
    float: right;
    height: 120px;
    width: 120px;
    margin-left: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/nicaragua.jpg);
    background-size: contain;
}

.bsa {
    clear: right;
    float: right;
    height: 66px;
    width: 66px;
    margin-left: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    background: url(images/bsa.png);
    background-size: contain;
}

p.when {
    font-weight: bold;
}

p.where {
    margin-top: 0em;
    color: gray;
}

.logo-container {
    display: inline-block;
    height: 5rem;
    width: 5rem;
    border-radius: 2.5rem;
    margin-top: 1rem;
    margin-right: 1.5rem;
}

div.logo-container:nth-child(6n) {
    margin-right: 0;
}

.logo {
    display: inline-block;
    height: 5rem;
    width: 5rem;
    border-radius: 2.5rem;
    background-size: contain;
}

.logo-label {
    text-align: center;
    font-weight: bold;
}

.java-logo {
    background: url(images/java.png);
    background-size: contain;
}

.java {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #6D4C41 0%, #4E342E 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #6D4C41 0%, #4E342E 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #6D4C41 0%, #4E342E 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D4C41), color-stop(100, #4E342E));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #6D4C41 0%, #4E342E 100%);
}

.html5-logo {
    background: url(images/html5.png);
    background-size: contain;
}

.html5 {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #FB8C00 0%, #EF6C00 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #FB8C00 0%, #EF6C00 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #FB8C00 0%, #EF6C00 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FB8C00), color-stop(100, #EF6C00));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #FB8C00 0%, #EF6C00 100%);
}

.css-logo {
    background: url(images/css.png);
    background-size: contain;
}

.css {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #D81B60 0%, #AD1457 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #D81B60 0%, #AD1457 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #D81B60 0%, #AD1457 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D81B60), color-stop(100, #AD1457));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #D81B60 0%, #AD1457 100%);
}

.js-logo {
    background: url(images/js.png);
    background-size: contain;
}

.js {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #039BE5 0%, #0277BD 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #039BE5 0%, #0277BD 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #039BE5 0%, #0277BD 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #039BE5), color-stop(100, #0277BD));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #039BE5 0%, #0277BD 100%);
}

.sql-logo {
    background: url(images/sql.png);
    background-size: contain;
}

.sql {
    /* IE10+ */
    background: -ms-linear-gradient(top, #00acc1 0%, #00838F 100%);

    /* Mozilla Firefox */
    background: -moz-linear-gradient(top, #00acc1 0%, #00838F 100%);

    /* Opera */
    background: -o-linear-gradient(top, #00acc1 0%, #00838F 100%);

    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00acc1), color-stop(100, #00838F));

    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top, #00acc1 0%, #00838F 100%);
}

.sql-logo {
    background: url(images/sql.png);
    background-size: contain;
}

.jquery-logo {
    background: url(images/jquery.png);
    background-size: contain;
}

.jquery {
   /* IE10+ */ 
    background: -ms-linear-gradient(top, #43A047 0%, #2E7D32 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #43A047 0%, #2E7D32 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #43A047 0%, #2E7D32 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43A047), color-stop(100, #2E7D32));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #43A047 0%, #2E7D32 100%);
}

.bootstrap-logo {
    background: url(images/bootstrap.png);
    background-size: contain;
}

.bootstrap {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #5E35B1 0%, #4527A0 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #5E35B1 0%, #4527A0 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #5E35B1 0%, #4527A0 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E35B1), color-stop(100, #4527A0));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #5E35B1 0%, #4527A0 100%);
}

.angular-logo {
    background: url(images/angular.png);
    background-size: contain;
}

.angular {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #E53935 0%, #C62828 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #E53935 0%, #C62828 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #E53935 0%, #C62828 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E53935), color-stop(100, #C62828));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #E53935 0%, #C62828 100%);
}

.php-logo {
    background: url(images/php.png);
    background-size: contain;
}

.php {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #00897B 0%, #00695C 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #00897B 0%, #00695C 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #00897B 0%, #00695C 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00897B), color-stop(100, #00695C));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #00897B 0%, #00695C 100%);
}

.python-logo {
    background: url(images/python.png);
    background-size: contain;
}

.python {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #FFEB3B 0%, #FBC02D 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #FFEB3B 0%, #FBC02D 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #FFEB3B 0%, #FBC02D 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFEB3B), color-stop(100, #FBC02D));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #FFEB3B 0%, #FBC02D 100%);
}

.git-logo {
    background: url(images/git.png);
    background-size: contain;
}

.git {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F4511E), color-stop(100, #D84315));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #F4511E 0%, #D84315 100%);
}

.unix-logo {
    background: url(images/git.png);
    background-size: contain;
}

.unix {
    /* IE10+ */ 
    background: -ms-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Opera */ 
    background: -o-linear-gradient(top, #F4511E 0%, #D84315 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F4511E), color-stop(100, #D84315));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top, #F4511E 0%, #D84315 100%);
}

.clear-div{
    clear: both;
}

@media only screen and (max-width: 600px) {
    .main-column {
        width: 90%;
    }
    .image {
        float: left;
        margin: 1.5em;
    }
    .card h3 {
        clear: both;
    }
    .clear-div
    {
        display: none;
    }
  }