/* Swiper */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Gotham, Helvetica, Arial, "Sans-serif";
}

.hero {
    width: 100%;
    height: 100vh;
    background: url(../img/bg-1.jpg) no-repeat fixed center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    color: #fff;

}

.hero a {
    text-decoration: none;
    color: white;
}

hgroup.teamhead h1,
hgroup.teamhead h2 {
    margin: 10px 0 10px;
    text-align: center;
    width: 100%;

}

/* team section */
hgroup.teamhead {
    width: 100%;
    text-align: #eee;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

.team {
    width: 100%;
    min-height: 50vh;
    height: auto;
    padding: 40px;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

figure.person {
    background: #eee;
    padding: 20px;
    margin: 20px;
    width: 100%;
    /* adjusts below in media queries */
    text-align: center;
    transition: all .5s;
}

figure.person img {
    width: 80%;
    border-radius: 50%;
    margin-bottom: 20px;

}

figure p {
    text-align: left;
}

figure.person:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

figure.person .social a:link {
    font-size: 28px;
    color: #333;
    transition: all .3s;
    margin-right: 3px;
}

figure.person .social a:link {

    color: cadetblue;


}

figure.person h3,
figure.person p {
    margin-bottom: 16px;
}

/* swiper*/

.swiper-container {
    width: 100%;
    height: 70vh;
    background: #000;
}

.swiper-slide {
    font-size: 18px;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 60px;
}

.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.swiper-slide .title {
    font-size: 41px;
    font-weight: 300;
}

.swiper-slide .subtitle {
    font-size: 21px;
}

.swiper-slide .text {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.3;
}

/* === Contact ===*/
section.contact {
    width: 100%;
    min-height: 50vh;
    height: auto;
    padding: 40px;
    background-color: #555;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.contact form {
    font: 95% Arial, Helvetica, Sans-serif;
    padding: 20px;
    margin: 20px;
    width: 100%;
    background: #fff;
    transition: all .5s;
}

.content aside {
    font: 95% Arial, Helvetica, Sans-serif;
    padding: 20px;
    margin: 20px;
    width: 100%;
    transition: all .5s;
}

aside div {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
}

aside div p {
    margin-bottom: 10px;

    background: #fff;
}

.form-style {
    font: 95% Arial, Helvetica, Sans-serif;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
}

.form-style input[type="text"],
.form-style input[type="date"],
.form-style input[type="datetime"],
.form-style input[type="email"],
.form-style input[type="number"],
.form-style input[type="search"],
.form-style input[type="time"],
.form-style input[type="url"],
.form-style textarea,
.form-style select {
    transition: all 0.3 ease;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #555;
    font: 95% Arial, Helvetica, sans-serif;
    resize: none;
}

.form-style input[type="text"]:focus,
.form-style input[type="date"]:focus,
.form-style input[type="datetime"]:focus,
.form-style input[type="email"]:focus,
.form-style input[type="number"]:focus,
.form-style input[type="search"]:focus,
.form-style input[type="time"]:focus,
.form-style input[type="url"]:focus,
.form-style textarea:focus {
    box-shadow: : 0 0 5px #43D1AF;
    border: 1px solid crimson;
}

.form-style input[type="submit"],
.form-style input[type="button"] {
    box-sizing: border-box;
    width: 100%;
    padding: 3%;
    background: #333;
    border-bottom: 2px solid crimson;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    color: #fff;
}

.form-style input[type="submit"]:hover,
.form-style input[type="buttom"]:hover {
    background-color: crimson;
}


/* media */
@media all and (min-width: 600px) {
    figure.person {
        width: 45%;
    }

    .contact form,
    .contact aside {
        width: 45%;
    }

    footer aside {
        width: 40%;
    }
}

@media all and (min-width: 1000px) {
    figure.person {
        width: 20%;
    }
    .contact form, .contact aside{
        width: 46%;
    }
    footer aside {
        width: 20%;
    }
}