*{
    padding: 0;
    margin: 0;
    font-family: Helvetica, sans-serif;
}
#container{
    width: 80vw;
    height: 100vh;
    margin: auto;
    overflow: hidden;
    align-content: center;
    text-align: left;
}
.column{
    width: 14.28%;
    height: 100%;
    padding-left: 20px;
    font-family: light;
    float: left;
}
h1{
    font-size: 3em;
}
.col1{
    background-color: red;
}
.rule{
    border-top: 3px solid #84a1c9;
    width: 100%;
    height: 1px;
    position: relative;
}
.name{
    height: 200px;
    width: 80vw;
    position: absolute;
    top: 40%;
    margin: auto;
    z-index: 1000000000000000000;}



.name .fogarty{
left: 15.2%;   
position: absolute;
}
.name .rule{
    width: 28.2%;
    height: 1px;
    position: absolute;
}
nav{
    position: relative;
    top: 30%;
}
nav li{
    list-style: none;
}

nav a {
    text-decoration: none;
    color: black;

}
.col3 .rule{
    top: 20%;
    width: 100%;
    position: relative;
}
p{
    position: relative;

}
.col4{
background-image: url(portrait1.jpg);
background-size:500px;
background-position:50% 14vh;
background-repeat: no-repeat;
width: 12%;
margin-left: 1%;
}

.col5 p{
    top: 15%;
}
.col5 .rule{
    top: 14%
}
.col6 p{
    top: 55%;
}
.col6 .rule{
     top: 54%
}
.col7 p{
    top: 40%;
}
@media only screen and (max-width: 400px) {} /* smaller than mobile */ 
@media only screen and (max-width: 750px) {} /* smaller than tablet */ 
@media only screen and (max-width: 1200px) {
    .column{
        width: 100%;
        height: 14.28%;
    }
    .rule{
        width: 100%;
    }
    .name .rule{
        width: 100%;
    }
    .col1{
        position: relative;
        top: 0;
    }
    .col2{
        width: 0;
        display: none;
    }
    .col3, .col4, .col5, .col6, .col7{
        width: 50%;
        height: 25%;
        float: left;
        padding-left: 0;
    }
   
    .name .fogarty{
        left: 40vw;
    }
    .name{
        height: 200px;
        width: 100%;
        position: static;
        top: 0;
        margin: auto;
    }
    .col5 .rule{
        top: 0;
    }
    .col5 .p{
        top: 0;
        position: static;
        margin: 0;
        padding: 0;
    }
    .col6 .p{
        top: 0;
    }
    .col4{
        margin: 150px 0 0 0;
        background-size:500px;
        background-position: 50%;
        background-repeat: no-repeat;
        margin-left: 0;
        height: 30%;
    }
} /* smaller than desk */