/* -------------------------- Generic Styles -------------------------- */
*,
*::before,
*::after,
*:before,
*:after
{
	box-sizing: border-box;
}


body
{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
	font-style: normal;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
	color: #333333;
    /* background-color: #ecebe8; */
    /* background-color: white; */
    /* background-color: rgba(246, 203, 230, 0.3); */
    /* background-color: rgba(199, 45, 105, 0.3); */
    /* background-color: rgba(91, 2, 56, 0.3); */
    /* background-color: rgba(11, 130, 138, 0.3); */
    background-color: rgba(128, 191, 170, 0.2);
    /* background-color: rgba(253, 208, 187, 0.3); */
    word-wrap: break-word;
}

header,
nav,
.main,
footer
{
    width: 100%;
	padding: 20px;
}



header
{
	padding: 0px;
    /* background-color: #ccffdd; */
    color: #4055bb;
    color: black;
    text-align: left;
}

header > *
{
    /* background-color: rgb(246, 203, 230); */
    /* background-color: rgb(199, 45, 105); */
    /* background-color: rgb(91, 2, 56); */
    /* background-color: rgb(11, 130, 138); */
    background-color: rgba(128, 191, 170, 0.35);
    /* background-color: rgb(253, 208, 187); */
    /* background-color: rgb(8, 30, 88, 0.3); */
    /* background-color: rgb(16, 110, 180, 0.3); */
    background-color: rgb(27, 149, 214, 0.3);
    /* background-color: rgb(23, 31, 142, 0.3); */
    /* background-color: rgb(46, 110, 210, 0.3); */
}



nav
{
	margin: 0px;
	padding: 0px;
	/* background-color: #22aa44; */
    /* background-color: rgb(11, 130, 138); */
    /* background-color: rgba(128, 191, 170); */
    /* background-color: rgb(8, 30, 88); */
    background-color: rgb(16, 110, 180);
    /* background-color: rgb(27, 149, 214); */
    /* background-color: rgb(23, 31, 142); */
    /* background-color: rgb(46, 110, 210); */
    text-transform: capitalize;
}

nav ul
{
	padding: 0px;
	margin: 0px;
}

nav li
{
	display: inline-block;
	padding: 10px;
	margin: 0px;
	color: white;
}

nav li:first-child
{
	border-bottom-left-radius: 5px;
	border-radius: 0px;
}

nav li:hover
{
    background-color: rgb(31, 150, 158);
    text-shadow: 0px 0px 20px white;
}



.main
{
    background-color: white;
    /* margin: 15px auto !important; */
    /* border-radius: 10px; */
    text-align: left;
}

.main > :first-child
{
    margin-top: 0px;
}

.main > :last-child
{
    margin-bottom: 0px;
}



footer
{
	font-size: 12px;
    background-color: #22aa44;
    background-color: rgb(246, 203, 230);
    background-color: rgb(199, 45, 105);
    background-color: rgb(91, 2, 56);
    background-color: rgb(11, 130, 138);
    background-color: rgba(128, 191, 170, 1);
    background-color: rgb(253, 208, 187);
    background-color: rgba(128, 191, 170);
    background-color: rgb(8, 30, 88);
    background-color: rgb(16, 110, 180);
    background-color: rgb(27, 149, 214);
    background-color: rgb(23, 31, 142);
    background-color: rgb(46, 110, 210);
    color: white;
    text-align: center;
}



.container
{
	max-width: 100%;
	margin: auto;
	width: 1024px;
}

.centered-text
{
    text-align: center;
}



/* ----------------------------- Headings ----------------------------- */

h1
{
    display: inline-block;
    /* font-size: 35px; */
}

h2
{
    /* font-size: 25px; */
}

h1, h2, h3, h4, h5, h6
{
    text-align: left;
}



/* --------------------------- Main Content --------------------------- */

a:link,
a:visited
{
	text-decoration: none;
    color: light-blue;
}

a:hover,
a:active
{
	text-decoration: none;
    color: green;
}



::selection
{
    background-color: #77ff99;
    color: inherit;
    background-color: #44bb66;
    color: white;
}



a:link,
a:visited
{
	text-decoration: none;
    color: blue;
}

a:hover,
a:active
{
	text-decoration: none;
    color: green;
}



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



.project-main-img
{
    max-width: 50%;
    float: right;
    padding-left: 1em;
    padding-bottom: 1em;
}



/* ------------------------- Tablet && Mobile -------------------------- */

@media (max-width: 1054px)
{
    .main
    {
        width: 100%;
        margin: 0px !important;
        border-radius: 0px;
    }
}

@media (min-width: 701px)
{
    address p
    {
        display: inline-block;
    }
    
    address p:not(:last-child)
    {
        padding-right: 1.40em;
    }
}
@media (max-width: 700px)
{
    .project-main-img
    {
        max-width: 100%;
        padding-left: 0px;
    }
}