@media only screen and (max-width: 1200px) {
    .vid{
        width:75%;
        padding-top:35%;
    }
    .recomendedCard{
        width: calc(33% - .2%);
    }
    .container h1{
        width:100%;
    }
}
@media only screen and (max-width: 600px) {


    .hamburger:hover {
        cursor: pointer;
    }
    
    .hamburger {
        display: block;
        margin: 10px;
        width: 50px;
        height: 50px;
        background-color: var(--colorAccent);
        float: right;
    }
    
    #topbun {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: calc(33.33% - 10px);
        background-color: var(--colorPrimary);
        margin-top: 10px;
        margin-bottom: 5px;
    }
    
    #patty {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: calc(33.33% - 10px);
        margin-top: 10px;
        margin-bottom: 5px;
        background-color: var(--colorPrimary);
    }
    
    #bottombun {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: calc(33.33% - 10px);
        margin-top: 10px;
        margin-bottom: 5px;
        background-color: var(--colorPrimary);
    }
    

    .vid{
        width:100%;
        padding-top:50%;

    }
    .recomendedCard{
        width: 100%;
    }
    
    .recomendedCard:hover > .imageFit {
        transform: scale(1.1) translate(.5%, -.1%);
    }

    .container h1{
        font-size: 50px;
    }
    
    .closenav{
        display: none;
        width:0;
        height: 0;
    }

    .visnav{
        display: block;
        width:100%;
        height: auto;
    }

    .visnav a{
        width: 100%;
        float: right;
    }

    .vid{
        width:calc(100% - 15px);
    }
}



@media only screen and (max-width: 500px) {

    .downloadCard{
        width:100%;
    }

    .downloadCard a{
        margin: 0 auto;
        width: 100%;
    }

    .downloadCard img{
        margin: 0 auto;
        width:100%;
    }

    .downloadCard ul{
        margin: 2px;
        padding:2px;
    }
    .downloadCard li{
        width:calc(100% - 4px);
    }

    #ios{
        max-width: 150px;
        float: left;
    }
    
    #android{
        max-width: 150px;
        float: left;
    }

    .downloadCardButtons{
        padding:0;
        max-width: 300px;
        margin:0 auto;
    }
}