body {
    background-color: #263238;
    background-image: url('../images/bg-tentacles.png');
    background-position: top center;
    background-repeat: no-repeat;
}

.site-logo {
    width: 100%;
    margin: 20px auto 0px auto;
}

.site-logo-home {
    width: 100%;
    margin: 20px auto 0px auto;
    padding: 0 20% 0 20%;
}

header {
        margin-bottom: 15px;
}

#intro {
    padding: 20px;
}

#intro p{
    color: #fff;
    text-align: center;
}

#intro h1 {
    color: #fdd835;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Roboto Condensed', sans-serif;
    
}

footer {
    color: #fff;
    text-align: center;
    margin-top: 15px;
}

footer p {
    color: #fff;
}

footer a,
footer a:link {
    color: #fdd835;
}


h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/*====== Porti Sections =======*/

.porti {
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 15px;
}

.porti p {
    color: #fff;
}

.porti h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
     color: #fdd835;
}


/*======= BUTTONS ==== */

.btn-outline-yellow:hover {
    color: #fff;
    background-color: #fdd835;
    border-color: #fdd835;
}
 
.btn-outline-yellow {
    color: #fdd835;
    background-image: none;
    background-color: transparent;
    border-color: #fdd835;
}

/*====== BTTN ======*/

.bttn-slant.bttn-yello {
    color: #263238;
}
.bttn-slant.bttn-yello:before {
    background: #fdd835;
}

a.bttn-slant {
     color: #263238;
}

/*============= START DEVICES ===============================*/

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

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

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

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

}

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

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


/*// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } */