/*
This is a good layout for a mobile-first CSS template.
Following this flow will minimize the number of styles you need to write and will ensure you are thinking, designing and developing mobile-first.
Most of your styles get written like standard CSS, but for your mobile presentation. Generally speaking, a good mobile presention will stretch out nicely for larger screens.

Sometimes, when we stretch out to larger screens, we need to make minor tweaks for the larger devices -- you can make these tweaks in the tablet media query, or if the issue exists on desktop only, the desktop media query.
You will find this is far easier than the opposite task of using CSS to cram your desktop experience into a mobile device.
*/
/*********************************************************************
 LOADS IN A NICE RESET TO ENSURE ALL BROWSERS HAVE THE SAME BASE STYLES
*********************************************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');

/*********************************************************************
  YOUR MOBILE/BASE STYLES GO HERE
*********************************************************************/
/** SET BORDER BOX EVERYWHERE */
* {
    box-sizing: border-box;
}

body,
/** RESPONSIVE IMAGES */
figure,
img {
    /* Sets image width to match parent */
    width: 100%;
    display: block;
    margin: 0 auto;
}

/** Menu effect */
p {
    line-height: 1.2em;
}

li {
    list-style-type: none;
}

.menu {
    padding: 5px;
    position: absolute;
    line-height: .5em;
    font-size: .9em;
    color: #696969;
    z-index: 1;
    font-family: 'Roboto Slab', serif;
    max-width: 90%;
    width: 58%;
    text-align left;
    top: 20px;
    left: 40px;
    transition: 1.5s;
    height: auto;
    width: 85px;
}

.menu.active {
    padding: 5px;
    position: absolute;
    line-height: .5em;
    font-size: .9em;
    color: #696969;
    text-align: center;
    z-index: 1;
    font-family: 'Roboto Slab', serif;
    max-width: 90%;
    height: 30px;
    width: 85px;
    top: 20px;
    left: 40px;
    overflow: hidden;
    text-align: left;
    transition: 1.5s;
}

#header {
    border: 1pt solid black;
}

/** Clip section styles */

.clip {

  text-align left;
  padding-top:5px;
  line-height: 1.3em;
  font-size: .8em;
  color: #696969;
  padding-top: 15px;
}

.clip.info{

  text-align left;
  padding-right: 5px;
  font-size: .8em;
  color: #629390;
  padding-top: 1px;

}

/** Caption styles */
.caption {
    font-size: .8rem;
    color: #8e8a8a;
    padding: 5px 0;
    opacity: 1;
    text-align: left;
}

.caption.active {
    opacity: 1;
    transition: .5s
}

.photos.active {
    width: 100%;
    opacity: 1;
}

.phots {
    width: 100%;
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
    z-index: 1;
}

hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

/** ------ defines some of the portratin in the BnP section------  */
#portrait {
    width: 65%;
    margin: 0 auto;
}

#portrait2 {
    width: 40%;
    margin: 0 auto;
}

#portrait.content {
    padding-bottom: 100px;
}

/** -------------------------------------------------------------  */
/** BASE CLASSES */
/** Container styles to keep content from becoming too wide or coming too close to
* mobile edge */
/** index page photo */
.cover.text {
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 10%;
    width: 0 auto;
    width: 100%;
    color: white;
    z-index: 1;
    font-family: 'Poppins', sans-serif;
}

.cover.text b {
    font-size: 1.2em
}

.cover {
    width: 100%;
    margin: 0 auto;
    align-content: center;
}

.cover img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0 auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.container {
    max-width: 90%;
    padding: 0px;
    margin: 0 auto;
    min-width: 300px;
    position: relative;
    top:260px;
}

.content {
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 100px;
}

.description {
    width: 75%;
    margin: 0 auto;
    line-height: 1.5em;
    font-size: 1em;
    color: gray;
    height: 325px;
    overflow: none;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */

}

.footnote {
    width: 100%;
    padding: 10px;
    display: inline-block;
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 80%;
    color: #696969;
}

.arrowup {
    margin: 0 auto;
    width: 20px;
    margin-top: 200px;
}

.fa {
    border: 2pt solid black;
    text-align: center;
    font-size: 1em;
    margin: 0 auto;
    padding: 5px;
    border-radius: 20px;
}

.about {
    width: 60%;
    min-width: 49%;
    max-width: 70%;
    color: #696969;
    font-size: .9em;
    line-height: 1.5em;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: auto;
    margin-top: 150px;
    font-family: 'Poppins', sans-serif;
}

/** Video stuff */
.video {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
    transition: width 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.video[data-id] {
    margin-bottom: 30px;
}

.video {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
    transition: width 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.video[data-id] {
    margin-bottom: 30px;
}

.video iframe, .video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
}

/** Images are allowed to be a little wider when broken out into their own container */
figcaption {
    font-size: 6.5vw
}

.desktop {
    display: none;
}

.mobile {
    display: block;
}

/** Screens are the size of at least one device screen */
.screen {
    width: 100%;
    min-height: 100vh;
}

/** for vertical centering */
.screen.padd {
    padding-top: 25%;
}

/** video setup */
.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(9 / 16 * 100%);
}

.video.vertical {
    padding-bottom: calc(16 / 9 * 100%);
}

.video iframe,
.video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
}

/* ------ intro------ */
.square {
    width: 200px;
    border: 1pt solid white;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 1em;
    line-height: 200px;
    min-width: 200px;
    z-index: 1;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.square a {
    text-decoration: none;
}

.square:hover {
    background: white;
    opacity: .25;
    color: black;
}

.content.intro {
    display: flex;
    flex-wrap: wrap;
}

#myname b {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
}

/* ------ for the future------
.logos {
    float: right;
    width: 66%;
    z-index: 1;
    max-width:
}

.logos img {
    position: relative;
    float: right;
    width: 20px;
    z-index: 1;
    margin: 3px;
}  */
.container.videos {
    width: 60%;
    margin: 0 auto;
}

.container.image {
    margin-bottom: 100px;
    margin-top: 100px;
}

/*********************************************************************
  YOUR TABLET/DESKTOP STYLES GO HERE
*********************************************************************/
@media(min-width: 681px) {

    /* Any adjustments for tablets and larger go here.
    Note these styles will be applied to anything 681px or larger -- so tablet AND desktop */
    .content {
        padding-top: 50px;
        padding-bottom: 100px;
        width: 85%;
    }

    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }

    /*  .active {
        background-color: green;
        width: 70%;
        height: 100%;
        float: right;
    }
    */
    .footnote {
        width: 100%;
        padding: 10px;
        display: inline-block;
        padding-top: 40px;
        padding-bottom: 40px;
        text-align: center;
        font-size: 80%;
        color: gray;
    }

    

    /* ------------------ */
    /*  .content {
        width: 75%;
        margin: 0 auto;
        padding-top: 400px;
        padding-bottom: 300px;
    }*/
    /* ------ intro------ */
    .square {
        width: 33%;
        border: 1pt solid white;
        height: 200px;
        margin: 8px;
        flex-basis: 30%;
        font-family: 'Roboto Slab', serif;
        text-align: center;
        vertical-align: middle;
        color: white;
        font-size: 1.15em;
        line-height: 200px;
        z-index: 1;
    }

    .square a {
        background: none;
        text-decoration: none;
    }

    .content.intro {
        display: flex;
        flex-wrap: wrap;
    }
}

/*********************************************************************
  YOUR DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 769px) {

    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
    .content {
        padding-top: 50px;
        padding-bottom: 150px;
        width: 90%;
    }

    .square {
        font-size: 1.35em;
    }
}

/*********************************************************************
  YOUR MEDIUM-DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 950px) {

    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
    .container {
        padding: 0;
        margin-left: 9%;
        width: 90%;
    }

    .content {
        padding-top: 40px;
        padding-bottom: 150px;
        width: 75%;
    }

    .square {
        font-size: 1.5em;
    }

    .menu {
        float: left
    }
}

/*********************************************************************
  YOUR LARGE DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 1500px) {

    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
    .content {
        padding-top: 50px;
        width: 70%;
    }

    .container {
        width: 92%;
    }