html {
    height: 100%
}

body {
    height: 100%;
}

.intro {
    height: 100%
}

.left, 
.right {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3d231b;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
    background-position: center center;
}

.left {
    background-image: url(../img/02.24.2020_21.18.11.jpg);
	border-right:10px solid white;
}

.right {
    background-image: url(../img/08.20.2019_07.45.35.jpg);
	border-left:10px solid white;
}


.left a,
.right a {
    color: #FFF;
    display: inline-block;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 200px;
    font-size: 40px;
    text-shadow: 2px 2px 4px #000000;
}

.panel a:hover {
    text-decoration: none;
}

.panel:hover {
    /*transform: scale(1.2);*/
}


.panel::before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52, 73, 94, 0.75);
  }
  
  .panel:hover .panel:before,
  .panel:focus .panel:before {
    display: block;
  }

@media (max-width: 768px) {

    .navbar-dark .navbar-brand {
        color: #fff;
        font-size: 17px;
        margin: auto;
    }

    .panel {
        height: 50% !important;
    }

    .panel a {
        padding-top: 100px;
    }
	.left, .right {
		border-left: 0;
		border-right: 0;
	}
	.left {
		border-bottom: 10px solid white;
	}
	.right {
		border-top: 10px solid white;
	}
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1f1f1f;
    color: #FFF;
    text-align: center;
    font-size: 70%;
    padding-top: 30px;
}

.about, .about a, .about a:hover, .about a:visited {
    color: #FFF;
}