#wrapper {
    display: inline-flex;
    width: 100%;
    background-image: linear-gradient(to right,white, rgb(218, 188, 126),rgb(250, 240, 230),rgb(250, 240, 230),rgb(250, 240, 230),rgb(250, 240, 230),rgb(218, 188, 126),white);
}
@media screen and (max-width: 950px){
    #wrapper{
        background-image: linear-gradient(to right, rgb(250, 240, 230), white,rgb(250, 240, 230));
    }
}
.videocontainer{
    position: relative;
    text-align: center;
    z-index: 1;
    max-width: 66%;
    max-height: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
@media screen and (max-width: 575){
    .videocontainer{
        height: 40vw;
        overflow: hidden;
    }
}
.video{
    z-index: 1;
    height: auto;
    width: 95.6%;
    position: absolute;
    align-items: center;
    top: 0;
    left: 2.6%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 575){
    .video{
        width: 100%;
        left: 0;
        height: 40vw;
        overflow: hidden;
    }
}
#content {
    z-index: 5;;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    background: linen;
}
html,body {
   width:100%;
    height:100%;
}
.headerback{
    background-image: linear-gradient(linen,linen,rgb(252, 250, 214));
}
.sepia{
    background-color:#14C2CC;
    background-image: rgb(253, 250, 198)
    radial-gradient(circle farthest-side at top right, transparent, rgb(210, 225, 250)), radial-gradient(ellipse farthest-corner at 0% 100%, transparent,rgb(253, 251, 219));
    animation:bg-change 200s infinite;
}

@keyframes bg-change {
0%, 100% {
    filter:hue-rotate(0deg);
}
50% {
    filter:hue-rotate(-45deg);
}
}



.myheader{
    display: flex;
    flex-direction: row;
    position: relative;
    height: 55vw;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;

}
@media screen and (max-width: 575px){
    .myheader{
        flex-direction: column;
        height: 30vw;
    }
}
@media screen and (min-width:950px){
    .myheader{
        height: 522px;
    }
}
.boxheight{
    height: 33%;
}
.buttonwide{
    width: 100%;
    border: black;
    background-color: paleturquoise;
    border-style: dashed;
    border-width: 0.7vw;
    border-radius: 13%;    
}
.buttonwide:hover{
    background-color: mediumpurple;
    box-shadow: chocolate;
    
}
.smallbuttonwide{
    width: 100%;
     
}
.smallbuttonwide:hover{
    background-color: mediumpurple;
    
}
.centerbuttonwide{
    position: absolute;
    left: 1.8%;
    width: 97.5%;
    border: grey;
    border-style: solid;
    border-width: 0.8vw;
    border-radius: 8%; 
    z-index: 5;   
    background-color: paleturquoise;
}
.centerbuttonwide:hover{
    background-color: mediumpurple;
    box-shadow: chocolate;
}
.buttonheight{
    height: 20%;
}
.smallbuttonheight{
    height: 100%;
}
.tuck{
    z-index: 5;
}

.myborder{
    border: black;
    border-width: 5px;
}
.topright{
    display: block;
    text-align: center;
}
@media screen and (max-width: 575px){
    .topright{
        display: none;
    }
}
.smallmenu{
    display: none;

}

@media screen and (max-width: 575px){
    .smallmenu{
        display: flex;
        width: 100%;
        height: 10vw;
        text-align: center;
        text-size-adjust: auto;
    }
}
.smalloverlay{
    display: none;

}
.buttonimg{
    width:100%;
    height:100%;
}

@media screen and (max-width: 575px){
    .smalloverlay{
        display: block;
        pointer-events: none;
        position: absolute;
        z-index: 10;
        top: 0;
        left: -0.85vw;
        width: 100vw;
        height: auto;
    }
}
.smalloverlayimage{
    position: relative;
}
.topleft{
    z-index: 5;
}
.overlaid{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 98vw;
    height: 55vw;
    overflow: hidden;
}
@media screen and (min-width:950px){
    .overlaid{
        width: 931px;
        height: 522px;
    }
}
.hiddenoverlaid{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 98vw;
    height: 55vw;
    overflow: hidden;
}
@media screen and (min-width:950px){
    .overlaid{
        width: 931px;
        height: 522px;
    }
}
.spacer{
    height: 6vw;
}
@media screen and (min-width:950px){
    .spacer{
        height: 57px;
    }
}
.circle{
    z-index: 7;
    height: 30vw;
    width: 30vw;
    margin: 0 auto;
    border: black;
    border-style: dashed;
    border-width: 7px;
    border-radius: 50%;
    background-image: radial-gradient(WHITE,white,white,white,grey,black);
}


@media screen and (min-width: 950px){
    .circle{
        height: 285px;
        width: 285px;
    }
}

.mycontainer{
    margin-left: auto;
    margin-right: auto;
}

.notactuallyphotobox{
    display: flexbox;
    align-items: center;
    height: 66%;
    
}
.col-sm-9{
    padding-right: 0;
}
@media screen and (max-width: 575px){
    .col-sm-9{
        padding-left: 0;
    }
}
.buttonpad{
    padding-right: 2%;
}
#vidhandle{
    align-items: center;
    
}
.mycontent{

    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;

}
@media screen and (max-width: 575px){
    .mycontent{
        padding-left: 5%;
        padding-right: 5%;
        flex-direction: column;
    }
}
.aboutcontentitem{
    width: 70%;
    padding-left: 10px;
    padding-right: 10px;
}
.rightaboutcontainer{
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.leftaboutcontainer{
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
@media screen and (max-width: 575px){
    .aboutcontentitem{
        width: 100%;
        height:auto;
    }
}

.aboutpic{
    display: block;
width: 30%;
}
@media screen and (max-width: 575px){
    .aboutpic{
        max-width: 50%;    
        margin-left: auto;
        margin-right: auto;
    }
}
.intro{
    padding-right: 25%;
}
@media screen and (max-width:575px){
    .intro{
        padding-right: 0;
    }
}
.aboutimagelarge{
    display: block;
}
@media screen and (max-width:575px){
    .aboutimagelarge{
        display: none;
    }
}
.aboutimagesmall{
    display: none;
}
@media screen and (max-width:575px){
    .aboutimagesmall{
        display: block;
    }
}

.contentelement{
    height: 20rem;
    width : 85%;

}