@import 'https://fonts.googleapis.com/css?family=Prompt';
@import 'https://fonts.googleapis.com/css?family=Oswald';
@import 'https://fonts.googleapis.com/css?family=Noto+Sans';

 #body
 {
     height: auto;
    background-color: #3b4242;
    margin: 0;
    padding: 0;
}
#body-one, #body-two, #body-three, #body-four {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    min-width: 150px;
    height: 90vh;       /*    vh = screen height
                                vw = screen width          */
    padding: 0;
    width: 100%;
}

#body-one {
    overflow: auto;
    margin: 0;
    padding: 0;
   top: 0;
    background: #3b4242 url('../images/background.jpg') no-repeat center top;
}
#body-two {
    background-color: #676f68;
    margin-top: 100px;
    overflow: hidden;
}
#body-three {
    margin-top: 100px;
    background-color: #4c4d54;
}
#body-four {
    background-color: #726659;
    margin-top: 100px;
    overflow: hidden;
    margin-bottom: 100px;
}

.box-name {

    font-family: 'Oswald';
    letter-spacing: 15px;           /* yay comments */
    text-align: center;
    margin: 0 auto;
    height: 400px;
    width: fit-content;
    margin-top: 15vh;
}

.box-name h1 {
    opacity: 0.8;
    background-color: white;
    overflow: hidden;
}
.box-name .foot {
    padding: 5px 15px 5px 15px;
    letter-spacing: normal;
    background-color: lightgray;
    color: #444d6b;
    font-size: 20px;
    opacity: 0.9;
}


.box-name h1 span {
    margin-left: 15px;
    font-size: 145px;
    background: url(../images/background.jpg) no-repeat center top;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: block;
    background-position: center -260px;
}


a {
    color: inherit;
    text-decoration: none;
}
.active {
    text-decoration: underline;
}
.box-form {
    z-index: 3;
    padding: 1px 50px 1px 50px;
    margin: 0 auto;
    height: 530px;
    margin-top: -90px;
    width: 50%;
    background-color: #708090;
    font-family: "Apple SD Gothic Neo";
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.box-form:hover {
    box-shadow: 0 44px 58px rgba(0,0,0,0.25), 0 40px 40px rgba(0,0,0,0.22);
}
.topStripe {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    z-index: 0;
    width: 100%;
    height: 25%;
    background-color: #564c43;
}
.about-Slider {
    color: black;
    width: 90%;
    margin: 0 auto;
}



/*1st slide of carousel */

#caro1 {
    height: 850px;
    width: 100%;
   background: black url(../images/carousel1.jpg) top left no-repeat;
    background-size: 100%;
    text-align: center;
}
#caro1 h1 {
    width: 400px;
    margin: 20px auto;
    padding: 25px 0 25px 0;
    background: rgba(103, 111, 104, 0.5);
}
#caro1 .left {
    margin-left: 30px;
    width: 45%;
    float: left;
    background: rgba(103, 111, 104, 0.5);
}
#caro1 .right {
    margin-right: 30px;
    width: 45%;
    float: right;
    background: rgba(103, 111, 104, 0.5);
}
#caro1 p {
    line-height: 50px;
}
#caro1 article {
    height: 75%;
    margin-top: 70px;
}



/*carousel number 2*/


#caro2 {

    background: black url(../images/carousel2.jpg) top left no-repeat;
    background-size: 100%;
    height: 850px;
    width: 100%;
}
#caro2 h1 {
    border-radius: 7px;
    text-align: center;
    width: 200px;
    padding: 25px 0 25px 0;
    background: rgba(204, 204, 204, 0.5);
    margin: 20px auto;
}
#caro2 article {
    height: 75%;
}
#leftCol {
    margin-left: 40px;
    height: 75%;
    width: 45%;
    float: left;
}
#rightCol {
    margin-right: 40px;
    height: fit-content;
    float: right;
    width: 45%;
}
div.circle {
    text-align: center;
    margin: auto;
    width: 150px;
    height: 150px;
    background: rgba(204, 204, 204, 0.7);
    margin-bottom: 50px;
    border-radius: 100%;
    border: rgba(204, 204, 204, 0.9) solid 4px;
    transition-duration: .3s;
}
div.circle:hover {
    box-shadow: inset 0 0 0 80px gold,
    0 0 0 40px gold;
}

div.circle span {
    display: block;
    margin-top: 40px;
}


#caro3 {
    height: 850px;
    width: 100%;
    background: black url(../images/carousel3.jpg) top left no-repeat;
    background-size: 100%;
}

.pictureStripe {
    overflow: hidden;
    width: 100%;
    height: 25vh;
    margin-top: 100px;
    /*http://cdn.skilledup.com/wp-content/uploads/2014/11/online-portfolio-Feature_1290x688_MS-940x501.jpg*/
}
.pictureStripe img {
    position: relative;
    z-index: 0;
}
#buttonPort {
    position: relative;
        z-index: 1;
        display: table;
        font-family: 'Noto Sans';
        font-weight: bold;
        background-color: #0D47A1;
        color: white;
        padding: 20px 10px;
        padding-bottom: 0;
        border-radius: 4px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        margin: 0 auto;
        margin-top: -35px;
    text-align: center;
}
#buttonPort:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#portfolioContainer {
    overflow: hidden;
    align-content: flex-start;
    background-color: #0D87A1;
    width: 50px;
    height: 10px;
    margin: 0 auto;
    display: none;
    transition-duration: 2s;
    margin-top: 40px;
    border-radius: 15px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.itemBox {
    text-align: center;
    height: 80%;
    width: 100px;
    background-color: #0c2f67;
    margin: 30px;
    margin-left: 20px;
    justify-content: space-around;
    flex-grow: 1;
    border-radius: 20px;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.proLink {
    height: 40%;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgba(132, 205, 90, .07);
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-content ul {
    margin: 80px auto;
     text-align: center;

}
.modal-content ul li {
    border: #b3aca7 3px solid;
    text-align: center;
    padding: 20px;
    list-style-type: none;
    display: inline;

}
.modal-content ul li:hover {
    background-color: #D9D8D8;
}
.modal-content h1 {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    margin-left: 10px;
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}