@font-face {
  font-family: 'Simplifica';
  src: url('fonts/simplifica.ttf');
}

@font-face {
    font-family: 'Majestic';
    src: url('fonts/majestic.ttf');
}
@font-face {
    font-family: 'The Bravery';
    src: url('fonts/bravery.ttf');
}

img {
    max-width: 100%;
}

body {
    font-family: 'Raleway', sans-serif;
	color: #333; 

}

a {
	color: #3D3D3D;
    text-decoration: none;
}

a:hover {
    color: #800611;
}

.clear {
	margin: 0;
	padding: 0;
	clear: both;
}

h1 {
	margin: 0;
	letter-spacing: 4px;
	font-weight: 100;
	font-family: "Simplifica";
	font-size: 30px;
	text-align: center;
	color: #3D3D3D;
	padding: 35px 0px 35px 0px;
	background-color: #308383;
}

h2 {
    margin: 0;
    font-weight: 100;
}

h3 {
	font-family: 'Majestic';
	font-size:36;
	
}

p {
	padding: 0;
    margin: 0;
	text-align: center;
}

#page_wrap {
   	/* max-width:1000px; */
 	max-width:none;
	width: 100%;
	height:100%;
	margin: auto;
	position:relative; 
}


 

/*********************************************/
/* NAVBAR CSS */
/**********************************************/

header {
    font-family: 'Raleway', sans-serif;
	background: #fff;
    max-width: 1000px;
	width: 100%;
	height: 66px;
	top: 0;
	z-index: 1;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  height: 0vh;
  box-sizing: border-box;
}

.topbar {
    position: fixed;
    top: 0;
	width: 100%;
    background-color: #308383;
    z-index: 2;
	border-bottom: 3px solid #484848;
	
}

nav {
	float: right;
	/* padding: 10px 10px 8px 0;	 */
	padding: 0px 10px 2px 0;	
}

.navbar {
	font-size: 16px;
	border-bottom-color: #fff;
	border-bottom-width: 2px;
}

.navbar ul {
	margin: 0;
	padding: 0;
}

.navbar li {
	float: left;
	display: inline; 
	height: 20px;
	padding: 10px 30px 8px 0;
	text-align: center;
}

.navbar a:link {
	color: #333;
	text-decoration: none;
	padding: 4px 4px 5px 4px;
}

.navbar a:visited {
	color: #333;
	text-decoration: none;
	padding: 4px;
}

.navbar a:hover {
	color: #800611;
	padding: 4px 4px 5px 4px;
}

/* .navbar a.active {
	color: #800611;
} */




.content1, .content2 {
    position: relative;
    font-family: "Simplifica"; 
    
}


.content1 {
    color: #ffffff;
    top: 7px;
	left:0.5%;
    max-width: 50px;
    font-size: 17px;  
}

.content2 {  
    /* left: 12%; */
    max-width: 330px;
    font-size: 33px;
    top: 5px;   
}


.content1 h1 {
    color: #ffffff;
	font-size: 14px;
	left: 5%;
	text-align: left;
	padding: 0px 0px 0px 0px;
}

.content2 h2 {
    color: #484848;
}
.content2 h1{
	color: #ffffff;
	font-size:30px;
	font-family: "Simplifica";
	text-align: left;
	padding: 0px 0px 0px 0px;
}


/***********************************/
/* ----------home page-------------*/
/***********************************/
.simplegallery1, .simplegallery1b, 
.simplegallery2, .simplegallery3 {
	z-index: 0;
	top: 1px;
}

.gallery1 {
	width: 100%;
	max-height: 1000px; 
	height: 100%;
}

.gallery1b {
  display: none;	
	width: 100%;
	max-height: 800px; 
	height: 100%;
}

.gallery2 {
  display: none;	
	width: 100%;
	max-height: 600px; 
	height: 100%;
}

.gallery3 {
	
  display: none;	
	width: 100%;
	max-height: 300px; 
	height: 100%;
}



/***********************************/
/* ----------Portfolio-------------*/
/***********************************/

.portfolio {
	height: 1000%;
	margin-top:75px;
	z-index: 4;
	font-family: 'Simplifica';
	background-color:#308383;
}


.portimages {
	position: relative;
	float: left;
	width: 50%;
	background-color:#308383;
}

.portimages .image {	display: block; }

.overlay {
  position: absolute; 
  top: 40%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #8080B2; 
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 30px;
  padding: 20px 0;
  text-align: center;
  text-family: "The Bravery";
 /* font-family: 'Fredericka the Great', cursive; */

}

.portimages:hover .overlay {
  opacity: 1;
}

 div.portimages:hover {
	opacity:0.9; 
}

	
/***********************************/
/*----------Commissions------------*/
/***********************************/
	
.commissions {
	background-color: #308383;
	margin-top: 75px;
	text-align: center;
	/* height: 100px; */
}

.commissions a {
	font-style: italic;
}

.liimages {
	padding-top: 20px;
	float: left;
	width: 33.333%;
	background-color:#308383;
}

.liimages .image {	display: block; }


/***********************************/
/*----------About ME---------------*/
/***********************************/

.about {
	margin-top: 75px;
	text-align: center;
	/* height: 100px; */
}

.about h1 {
	background-color: #308383;
}

.about p {
	padding: 0px 75px;
}

.contact h1 {
	background-color: #308383;
}









#flickrembed {
    position: absolute;
    top: 0px;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
}



#bigphone {
    font-size: 25px;
}

#bigphone2 {
    font-size: 20px;
}

.dividecontact {
    margin: 0 auto;
    width 300px;
    width: 30%;
    min-width: 150px;
    padding-bottom: 20px
}


/*********************************/
/* --------Media queries---------*/
/*********************************/

/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width: 1024px) {
    
     .gallery1 {
display: none;	
}

#g1b.gallery1b {
        display: block;
    }
    
}


/* Large screen mobiles */
@media only screen and (max-width: 767px) {
    
    /*********homepage************/


    #navicon {
        display: block;
        width: 1.75em;
        height: .25em;
        line-height: 0;
        border-top: .75em double #000;
        border-bottom: .25em solid #000;
    }
        
    header {
        height: 50px;
        z-index: 40;
	}
    
    
	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		background: #308383;
		border: 2px solid #b4b4b4;
		right: 20px;
		width: 50%;     
		border-radius: 4px 0 4px 4px;
       z-index: 40;
	}

	nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}
    
	nav:hover ul {
		display: block;
	} 


/*
	.navbar li,  .navbaraerial li {
	padding: 30px 7px 8px 0;
    }   
*/
    
    /*************top bar********/
    
    .content2 {  
    max-width: 320px; 
}

.content2 h1{
	font-size:25px;	
}

    
/***********gallery*******/

  #g1b.gallery1b {
display: none;	
}

#g2.gallery2 {
        display: block;
    }



}


/* iPhones and other mobiles*/
@media only screen and (max-width: 480px) {
    
	
.overlay {
  font-size: 10px;
  padding: 10px;
}

    
        .content2 {  
    max-width: 200px;  
}
    
    .content2 h1{
	font-size:20px;	
}
    
    
    #g2.gallery2 {
        display: none;
    }
    
     #g3.gallery3 {
        display: block;
    }
    
}