/*---- main elements ------*/
body, html {
    height: 100%;
    width:  100%;
    
}

html {
	background-color: #401F28;
    
}


.render {
    text-rendering: optimizeLegibility;
    
}





/*---- h1, h2 ------*/

h2{
    font-family: 'Amatic SC', sans-serif;
    font-size: 55px;
    margin: 0px 0px 40px 0px;
    
    
}


h3 {
    font-family: 'BenchNine', serif;
    color: #50AECC;
    font-size: 60px;
    text-transform: capitalize;
    padding: 15px 0px;
        
}


p {
    font-size: 20px;
    text-indent: 0em;
    text-align: left;
    padding: 30px 0px;
    
    
}


#pageFooter {
	clear:both;
	overflow:hidden;
	height: 150px;
    
}


a:link {
	text-decoration: none;
	background: lightgoldenrod;
	color: #261417;
	display: block;
	padding: 5px 10px;
    font-family: 'Amatic SC', cursive;
	text-align: center;
	text-transform: lowercase;
	margin-bottom: 2px;
    
}


a:visited{
    color: black;
    
}


a:hover{
    background: beige;
    color: goldenrod;
    
}


a:active{
    background: lightgoldenrodyellow;
    
}


.bg {
    height: 98%;
    
}


/*---- main nav ------*/

#mainNav {
    /* margin: 200px 0px 0px 0px; 
    padding: 10px;*/
    
    float: none;
    background-color: #F1F1AB;
    margin: auto;
    position: relative;
    top:500px;
    opacity: 0.9;
    
}

#aboutNav {
    
    float: none;
    background-color: #F1F1AB;
    margin: auto;
    position: relative;
    opacity: 0.9;
    
}

#aboutNav ul {
    
    list-style-type: none;
    margin: auto;
    
}

#aboutNav ul li {
    font-size: 30px;
    display: inline-block;
    font-family: 'Cabin', sans-serif;
    
}


.fixedElement {
    background-color: #fffaf0;
    position:sticky;
    width:100%;
    margin: auto;
    box-shadow: 1px 6px 5px -4px #999999;
    
}


#mainNav ul {
    
    list-style-type: none;
    margin: auto;
    
}

#mainNav ul li {
    font-size: 30px;
    display: inline-block;
    font-family: 'Cabin', sans-serif;
    
}

#bottomNav {
    
    list-style-type: none;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
    color: white;
    padding: 0px 0px;
    float: left;
    margin: auto;
    width: 300px;
    
    
    
}

#bottomNav li {
    
    display: inline-block;
    
    
}

#bottomNav a {
    color: white;
}


#bottomNav a:hover{
    background: beige;
    color: black;
    
}

header {
    
    
        
    background:
    
    linear-gradient(
      rgba(255, 125, 160, 0.6), 
      rgba(255, 143, 112, 0.1)
    ),
    url("../images/crghstn_bkg0517-test.jpg") no-repeat fixed;
    background-size: cover;
    
}



main {
    margin: 0px;
    padding: 0px;
    
}


.image {
    position: absolute;
    
}


div.container {
    margin: 0px 40px;
    
    

}


.imageOne {

    margin: 0px 0px 5px 0px;
    
}


.imageTwo {
 
    
}





/*---- recent work ------*/


#recentWork {
    clear: both;
    background-color: #FAF188;
    color: #401F28;
    padding: 50px 50px;
    width: auto;
    
}


#recentWork h2 {
    text-align: left;
    
}


.recentWorkGroup h3{
    color: #FF7DA0;
    text-transform: uppercase;
    margin: 0px 0px 20px 0px;
    
}


.recentWorkGroup {
    width: auto;
    display: flex;
    text-align: center;
    
    
    
}


.recentWorkOne {
    
    width: 300px;
    padding: 30px 30px;
    flex: auto;
    
    
}


.recentWorkTwo {
    width: 300px;
    padding: 30px 30px;
    flex: auto;

    
}

.recentWorkGroup p {
    
}


.img-circle {
    border-radius: 50%;
    box-shadow: 1px 6px 5px -4px #999999;
    
    
   
    

    
    
}


/*---- container ------*/


.containerOne {
    background-color: #FEFEC1;
    color: #B24663;
    padding: 50px 50px;
    display: flex;
    
}


.containerTwo {
    /*background-color: #B8D990;*/
    background: url(../images/_crghstn_fade-yello.jpg) no-repeat center center;
    background-size: cover;
    color: #000000;
    padding: 50px 50px;
    display: flex;
    
}


.containerThree {
    background-color: #FF7DA0;
    color: #3C360C; 
    padding: 50px 50px;
    display: flex;
    
}

.containerThree h3 {
    color: #FFFFFF;
}


.footer {
    background-color: #50AECC;
    color: #FFFFFF;
    padding: 50px 12px 100px 50px;
    display: flex;
    
}



blockquote {
    font-family: 'Amatic SC', sans-serif;
    font-size: 24px;
}


.copyLeft{
    padding: 75px;
    
    flex: auto;
    
}


.imageRight {
    padding: 75px;
    margin: auto;
    flex: auto;
    
}


.imageRight img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

#about {
    background-color: #FEFEC1;
    color: #B24663;
    padding: 50px 50px;
    display: flex;
    
    
}



/*--------- responsive media size --------*/

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

.recentWorkGroup, .containerOne, .containerTwo, .containerThree, #about{
        display: block;
    
        
}
    .copyLeft {
        width: auto;
        padding: 50px 20px;
    }

    .container{
    }
}