@charset "utf-8";
/* CSS Document */
*{
	margin: 0; padding:0;
}
body{
	background:#000000;
	color:#ffffff;
	margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.1em;
  font: inherit;
  vertical-align: baseline;
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  line-height:1.2em;
}
h1{
float: left;	
}
h1 a{
text-decoration: none;
color:#ffffff;
margin: 10px auto 10px;
line-height: 30px;


}
h2{
float: right;
position:relative;
margin-top: 10px;
}

.clear{
	clear:both;
}
.textDiv a:link, a:active, a:visited {color:white; text-emphasis:accent; text-decoration:none;}
a:hover, a:focus {color:white;text-emphasis:accent; text-decoration:none;}

.textDiv h3{
text-alnight: center;	
}
.sectionWrapper{
max-width: 1080px;
margin: 0 auto;	
background-color:#000;
}
.imgDiv{
 max-width:80%;
 height: auto;
 border: 1px solid #000;
 border-radius:4px;
 float: left;
}
.textDiv{
	width:380px;
	text-align:justify;
	float: left;

	margin: 0px 0px 0px 30px;
}
.textDiv p{
	width:100%;
	padding: 5px;
	margin: 10px auto;
	
}
.textDiv h2{
float: none;	
}
.textDiv ul{
	width:100%;
	list-style-type:none;
}
.highlight{
color:yellow;
margin: 0 auto;	
text-align:left;
}
.linkslist li{
	width: 80%;
	margin: 0 auto;
}
.clientslist li{
	width: 80%;
	margin: 0 auto;
}
.clear{
clear:both;
}
footer{
max-width: 100%;
margin: 50px auto 0;	
text-align: center;
font-size:12px;
}
.photos img{
	width:100%;
	height: auto;
	border: 1px solid #000;
	 border-radius:4px;
	 margin: 0 auto;

}

 .toggle-nav {
        padding:20px;
        float:left;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:3px;
        background:#303030;
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        font-size:20px;
        transition:color linear 0.15s;
    }
 
    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:#66a992;
    }
	
@media only screen and (max-width: 951px) {
	.imgDiv{
	width:100%;
	 height: auto;
	 border: 1px solid #000;
	 border-radius:4px;
	 margin: 0 auto;
	 float: none;
	}
	.textDiv{
		min-width:80%;
		text-align:justify;
		margin: 10px auto 0;
		float: none;
	}	
	.textDiv p{
	margin: 0px auto;	
	}
	footer{
		min-width: 100%;
		margin: 50px auto 0;	
		text-align: center;
		font-size:12px;
	}
}
@media only screen and (max-width: 501px) {
	.imgDiv{
	width:100%;
	 height: auto;
	 border: 1px solid #000;
	 border-radius:4px;
	 margin: 0 auto;
	 float: none;
	}
	.textDiv{
		min-width:70%;
		text-align:justify;
		margin: 10px auto 0;
		float: none;
	}	
	.textDiv p{
		width:80%;
		margin: 0px auto;
		text-align:justify;	
	}
	footer{
		max-width: 500px;
		margin: 50px auto 0;
		text-align: center;
		font-size:12px;
	}
a.hideThis{
overflow: hidden;display:none;	
}
}


header{
	max-width: 100%;
margin: 0 auto 10px;
height: 80px;
}

.headcontainer {
  margin: 0 auto 10px;
  max-width: 1280px;
  min-height: 100px;
  padding: 10px;
  
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  text-align:center;
}


.content {
  position: relative;
  padding-top: 80px;
}
.content p {
  margin-bottom: 10px;
}
.socialmedia{
	margin: 10px auto 30px;	
	text-align:right;
}
.socialmedia a{
	text-decoration:none;
	color:#ACACAC;
	margin: 0px 5px;
}




/* NAVIGATION */


	
.topnav {
  overflow: hidden;
  background-color: #000;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}
.topnav a.active {
    background-color: #777777;
    color: white;
		display:block;
}


@media screen and (max-width: 600px) {
	.topnav {
  overflow: hidden;
  background-color: #000;
  margin: 35px 0px 0px 0px;
}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  a.hideThis{
overflow: hidden;display:none;	
}
}
@media screen and (max-width: 400px) {
	.topnav {
  overflow: hidden;
  background-color: #000;
  margin:70px 0px 0px 0px;
}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
.topnav .icon {
  display: none;
}
.topnav a.active {
    background-color: #777777;
    color: white;
	display:block;
}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  a.hideThis{
overflow: hidden;display:none;	
}

}
/*********************** end NAVIGATION *?/




/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.homePageSlides{
	display:none;
	margin: 0 auto;
	width: 75%;
	height: auto;
	}



#theForm{
	width: 500px;
	margin: 0 auto;
	box-sizing: border-box;
    border-radius: 4px;
}
label{
margin: 0px; text-align:left;
}
input[type=text] {
    width: 85%;
    padding: 12px 20px 12px 40px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
	font-size:16px;

	
	-webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=tel]:focus {
    border: 3px solid #555;
}
input[type=tel] {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	    border-radius: 4px;
}

input[type=text]:focus {
    border: 3px solid #555;
}
select {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

select:focus {
    border: 3px solid #555;
}
textarea {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

textarea:focus {
    border: 3px solid #555;
}



input[type=submit] {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=submit]:focus {
    border: 3px solid #555;
}



/*@media screen and (max-width: 600px){
	
#theForm{
width: 100%; margin: 0 auto; box-sizing: border-box; border-radius: 4px;
}
label{
margin: 0px; text-align:right;
}
input[type=text] {
    width:85%; padding: 12px 20px 12px 40px;
    margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; 
	border-radius: 4px; font-size:16px; -webkit-transition: 0.5s; transition: 0.5s; outline: none;
}
input[type=tel]:focus {
    border: 3px solid #555;
}
input[type=tel] {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	    border-radius: 4px;
}

input[type=text]:focus {
    border: 3px solid #555;
}
select {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

select:focus {
    border: 3px solid #555;
}
textarea {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

textarea:focus {
    border: 3px solid #555;
}



input[type=submit] {
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=submit]:focus {
    border: 3px solid #555;
}


.homePageSlides{
	display:none;
	margin: 0 auto;
	width: 100%;
	height: auto;
	}
}*/

@media screen and (max-width: 600px){
	.contactSect{
	max-width: 100%;
	margin: 0 auto;	
	}
	.imgDiv{
	 width:100%;
	 height: auto;
	 border: 1px solid #000;
	 border-radius:4px;
	 margin: 0 auto;
	 float: none;
	}
	.textDiv{
		width:100%;
		text-align:justify;
		margin: 10px auto;
		float: none;
	}
	. h3{
	text-align: center;
	width: 100%;
	margin: 0 auto;	
	}
	. p{
		width:75%;
		margin: 0px auto;
		text-align:justify;	
	}
	#contactForm{
		max-width: 100%;
		height: 600px;
		margin: 0 auto;
	}
	#theForm{
	width: 100%;

	margin: 0 auto;
	}
	#labelfn{
	width:20%;
	margin: 0px auto;
	color: white;
	padding: 0px;
	text-align:right;
	
	}
	#tdfn{
	width:100%;	
	margin: 0 auto;
	float: left;	
	}
	input{
		width: 90%;
	text-align: left; padding: 0;
    margin: 0px 0px 0px -300px; box-sizing: border-box; border: 2px solid #ccc; 
	border-radius: 4px; font-size:16px; -webkit-transition: 0.5s; transition: 0.5s; outline: none;
}
input[type=submit] {
    min-width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;    border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=submit]:focus {
    border: 3px solid #555;
}

.homePageSlides{
	display:none;
	margin: 0 auto;
	width: 100%;
	height: auto;
	}
}

li {
	list-style:none;
}

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
  display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}

.tabberlive {
  margin-top: 1em;
  width: 98%;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav {
  margin:0;
  padding: 3px 0;

  font: bold 12px arial, sans-serif;
}

ul.tabbernav li {
  list-style: none;
  margin: 0;
  display: inline;
  font-family: arial, sans-serif;
}

ul.tabbernav li a {
  padding: 3px 0.5em;
  padding-top: 0.2em;
  margin-left: 3px;

  background: #DDE;
  text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
/* ul.tabbernav li a:visited { color: #667; } */

ul.tabbernav li a:hover {
  color: #fff;
  background: #00009c;

}

ul.tabbernav li.tabberactive a {
  background-color: #fff;

}

ul.tabbernav li.tabberactive a:hover {
  color: #000;
  background: white;

}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
  padding: .5em 2em 2em 2em;


  /* If you don't want the tab size changing whenever a tab is changed
     you can set a fixed height */

  /* height:200px; */

  /* If you set a fix height set overflow to auto and you will get a
     scrollbar when necessary */

  /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
  display:none;
}
.tabberlive .tabbertab h3 {
  display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
/* .tabberlive#tab1 {
}
.tabberlive#tab2 {
} */
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}





/*------------------------------------------GALLERY-----------------------------------------------*/
 #wedding-photography{max-width: 1080px; height:700px; margin: 0 auto;}
			#sports-photography{max-width: 1080px; height:700px; margin: 0 auto;}
			#places-photography{max-width: 1080px; height:700px; margin: 0 auto;}
			#people-photography{max-width: 1080px; height:700px; margin: 0 auto;}
			#pet-photography{max-width: 1080px; height:700px; margin: 0 auto;}
			#printed-photography{max-width: 1080px; height:700px; margin: 0 auto;}