/* --- Basic --- */

p, a {
    font-size: 16px;
    line-height: 2;
}

h2,
h3,
h4 {
    font-weight: 700;
}

body,
input,
textarea,
select {
    font-family: 'Open Sans', sans-serif;
}

.mywrapper {
    /* Fallback for browsers do NOT support vh unit */
    min-height: 100%;
    /* These two lines are counted as one :-)       */
    min-height: 100vh;
    background-image: url("../images/bg.png");
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
}

.mycolumn {
    /* Fallback for browsers do NOT support vh unit */
    min-height: 100%;
    /* These two lines are counted as one :-)       */
    min-height: 100vh;
    padding: 100px 60px 100px 60px;
    box-shadow: inset 1px 0px 0px 0px rgba(0, 0, 0, 0.3), inset -1px 0px 1px 0px rgba(0, 0, 0, 0.3);
}

.personal-info {
    min-height: 570px;
    padding: 100px 0px 100px;
}

.mywrapper.style1 {
    background-color: #fafafa;
    text-shadow: 1px 1px 0px #fff;
}

.mywrapper.style2 {
    /* padding: 0 0 0 0; */
    background-color: #f4f4f4;
    text-shadow: 1px 1px 0px #fff;
}

.mywrapper.style3 {
    /* padding: 0 0 0 0; */
    background-color: #e8dada;
    text-shadow: 1px 1px 0px #fff;
    color: #3e3e3e;
}

.myfooter {
    padding: 60px 50px;
}

/* .row {
    margin: 0;
} */

/* --- Navbar --- */


/*
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}
*/

.navbar.navbar-default,
.navbar-collapse {
    background-color: #282828;
    border: none;
}

.navbar-toggle {
    background-color: #bcbcbc;
}

.navbar-default .navbar-nav li a,
.navbar.navbar-default .navbar-brand {
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    color: #fff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background: #383838;
    color: #fff;
}


/*
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: #484848;
    color: #fff;
}
*/

.navbar-brand {
    display: inline-block;
    margin: 0 0 0 20px;
    padding: 0;
}

.logo-img {
    padding-top: 5px;
    max-height: 45px;
    width: auto;
    height: auto;
}

/* --- Front page --- */

.jumbotron {
    background: url("../images/jump.jpeg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fff;
    margin-bottom: 0;
    text-shadow: 1px 1px 0px #303030;
}

.vertical-center {
    /* Fallback for browsers do NOT support vh unit */
    height: 100%;
    /* These two lines are counted as one :-)       */
    height: 100vh;
    max-height: 1280px;
    display: flex;
    align-items: center;
}


/* --- Misc --- */

.box {
    word-wrap: break-word;
    background: #fff;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 40px 10px 40px 10px;
    margin: 40px 10px 20px 10px;
    min-height: 300px;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.logo-small {
    color: #EA8A95;
    font-size: 100px;
    margin: 0 0 10px 0;
}

.contact-row {
    height: 253px;
}

.contact-col {
    top: 50%;
    transform: translateY(-50%);
}

.portrait-img {
    height: 253px;
    max-width: 90%;
}

/* --- Carousel --- */

.carousel-control.left,
.carousel-control.right {
    background-image: none
}

.carousel-inner > .item > img {
    display: block;
    height: 700px;
    max-height: 90vh;
    margin: 0 auto;
    object-fit: contain;
}

/* Mobile */
@media screen and (max-width: 499px) {
    .carousel-inner > .item > img {
        display: block;
        height: 400px;
        max-height: 90vh;
        margin: 0 auto;
        object-fit: contain;
    }
    .personal-info {
        min-height: unset;
        padding: unset;
    }
    .portrait-img {
        height: unset;
    }
}

/* --- Button --- */
/*
.btn {
    background-color: #444;
    color: #fff;
    box-shadow: inset 0px 0px 0px 1px #242424, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.2);
}

.btn:hover {
    background-color: #4f4f4f;
    color: #fff;
}

.btn:active {
    background-color: #3f3f3f;
}
*/

/* --- Footer --- */

footer {
    background-color: #303030;
    color: #999;
    text-shadow: -1px -1px 0px #181818;
    margin-bottom: -1px;
}


/* --- Form --- */

.form-control {
    border: none;
    color: #303030;
    background: #ccc3c3;
}

.form-control:focus {
    color: #f4f4f4;
    background: #847c7c;
}

/* --- Map --- */

.map {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    /* Let clicks fall through to the wrapping link so tapping the
       map opens the Google Maps app instead of panning OpenStreetMap. */
    pointer-events: none;
}