* { margin: 0; padding : 0; }

@font-face{
    font-family: "century gothic";
    src: 
        local("century gothic");
}

html
{
	background-color: #ffffff;
	box-sizing: border-box;
	overflow-x: hidden;
    margin:0% 0%;
	padding: 0px 0px;

    -ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar
{
	display: none;
}

body
{
    background:white;
    color: #006699;
    margin:0% 0% ;
	padding: 0px 0px;
}

header
{
    background: #006699;
    margin:0% 0%;
	padding: 0px 0px;
    width: 100%; 
    height: fit-content;  
    background-size: cover;
	background-position: center bottom;
    /*position: fixed;
	z-index: 3;
	display: flex;
    */
}

footer
{
    background: #ffffff;
    margin:0% 0%;
	padding: 50px 0px;
    width: 100%; 
    height: fit-content;  
    text-align: center;
}

.header_grid
{
    display: grid;
	grid-gap: 0px;
	grid-row-gap: 0px;
    width: 100%;
    margin:  0px 0px;
    padding:  0px 0px;
}

.title
{
    font-size: larger;
    text-align: center;
}

.subtitle
{
    display: block;
    font-size: larger;
    text-align: center;
}

.titleNames
{
    display: block;
    font-size: larger;
    text-align: center;
}

.titleNamesSmall
{
    font-size: larger;
    text-align: center;
    display: none;
}

.logo
{
    width: 400px;
    align-self: left;
}

.sams
{
    width: 85px;
}

.logos
{
    height: max-content;
    padding: 70px 0px;
}

.navigation
{
    height: max-content;
    background-color: #006699;
}

a
{
    color: #006699;
}

.content
{
    margin:0% 10%;
	padding: 0px 0px;
}

.bottom_links
{
    list-style: none;
}
.bottom_links li
{
	display: inline-block;
	padding: 0px 0px;
    margin: 0% 0%;
    width: auto;
}
.bottom_links li a
{
    text-decoration: none;
    display: block;
    padding: 15px 20px;
	transition: all 0.1s ease 0s;
}
.bottom_links li a:hover
{
    opacity: 50%;
}

.nav_links 
{
	list-style: none;
    background-color: #006699;
    text-align: center;
}

.nav_links li
{
	display: inline-block;
	padding: 0px 0px;
    margin: 0% 0%;

}

.nav_links li a
{
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    font-size: large;
	transition: all 0.1s ease 0s;
    background-color: #006699;
    color: #ffffff;
}
.nav_links li a:hover
{
    /*padding: 0px 50px;*/
    background-color: #ffffff;
    color: #006699;
}

.nav_links .contact a
{
	/*transition: all 0.3s ease 0s;*/
    background-color: #cc3333;
    color: #ffff33;
}
.nav_links .contact a:hover
{
    /*padding: 0px 50px;*/
    background-color: #ffff33;
    color: #cc3333;
}

.textBlockWrapped
{
    font-size: large;
    display: flexbox;
    height: fit-content;
}

.textBlockWrapped::after
{
    content: "";
    clear: both;
    display: table;
}

.gridContainer
{
    display: grid;
    gap: 20px;
    padding: 0px;
}

.centeredImage
{
    display: block;
    margin: auto auto; 
    height: auto;
}

.centeredImageSmall
{
    display: block;
    margin: auto auto; 
    height: auto;
}

.nav_links a.icon
{
    z-index: 2;
	list-style: none;
    text-align: right;
    display: none;
}

.contactBlock
{
    font-size: x-large;
    display: block;
    background-color: #ffffff;
    margin: auto auto;
    text-align: center;
    height: fit-content;
}

.contactForm
{
    display: block;
    width: 400px;
    margin: auto auto;
    padding: 5px 5px;
    background-color: #0066995b;
    text-align: center;
    color: #ffffff;
    border-radius: 20px;
}

.resumeTable
{
    padding: 0% 20%;
}

.typesTable
{
    display: block;
}

.typesTable td 
{
    border-radius: 20px;
    border: 10px solid white;
}

.typesTableMobile
{
    display: none;
    padding: 0% 5%;
}

.typesTableMobile td
{
    border-radius: 20px;
    border: 10px solid white;
}

.tableTitle
{ 
    vertical-align: top;
    text-align: center;
    font-size: x-large;
    background-color: white;
    width: 30%;
}

.tableBody
{
    background-color: #0066995b;
    text-align: left;
    vertical-align: top;
}

th,td
{
    padding: 15px;
}

.gallery
{
    padding: 0% 20%;
}

 /* Small Screen (... its a phone) Adjustments*/
 @media screen and (max-width: 700px){
    html
	{
        margin:0 0;
        padding: 0;
	}	

    .logo
    {
        width: 80%;
        display: block;
        margin: auto 10%;
    }

    .sams
    {
        display: none;
    }

    .nav_links
    {
        text-align: left;
    }

    .nav_links li
    {
        display: flex;
        width: 100%;
    }

    .nav_links li {display: none;}
    .nav_links li a
    {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    font-size: larger;
    width: 100%;
    }

    .nav_links.responsive li
    {
        display: block;
    }

    .gridContainer
    {
        margin: 0% 10%;
        margin-bottom: 10%;
        display: inline-block;
        gap: 20px;
    }

    .title
    {
        margin: 0% 10%;
    }

    footer
    {
        display: none;
    }

    .content
    {
        margin: 0% 0%;
    }

    .nav_links a.icon
    {
        display: inline-block;
        float: right;
    }

    header
    {
        background-size: cover;
        background-position: center center;
    }

    .contactBlock
    {
        width: 100%;
    }
    .contactForm
    {
        width: 100%;
    }

    .titleNamesSmall
    {
        display: block;
    }

    .titleNames
    {
        display: none;
    }
  
    .resumeTable
    {
        padding: 0% 5%;
    }

    .typesTable
    {
        display: none;
    }

    .typesTableMobile
    {
        display: block;
    }

    .centeredImageSmall
    {
        display: block;
        margin: auto auto; 
        height: auto;
        width: 50%;
    }

    .gallery
    {
        padding: 0% 5%;
    }
}