body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

body.article{
   font-family: sans-serif; 
   line-height: 1.6; 
   margin: 0; 
   color: #333;
}
header.article, footer.article { 
  background-color: #222; 
  color: #fff; 
  text-align: center; 
  padding: 1rem; 
}
nav.article a.article { 
  color: #fff; 
  margin: 0 0.5rem; 
  text-decoration: none; 
}
.container { 
  max-width: 800px; 
  margin: auto; 
  padding: 1rem;
  }
article { 
  margin-bottom: 2rem;
}
article img { 
  max-width: 100%; 
  height: auto; 
}


.backButton{
  position: absolute;
  left: 0;
  top: 3.8em;
  border:black;
  padding: 18px;
  background-color: blue;
  color:white;
  font-weight:bold;
}

a.backButton:link, a.backButton:visited {
  background-color: blue;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.backButton:hover, a.backButton:active {
  background-color: #3586e9;
}

.banner-top{
  padding-top:75px;
  padding-bottom: 10px;
  padding-left: 10px;
	color:#ddd;
	background-color:#282E34;
	text-align: justify;
}
.banner-1{
	position:relative;
	color:#ddd;
	background-color:#282E34;
	padding:75px 30px;
	text-align: justify;
}

.banner-2{
	position:relative;
	color:#eee;
	background-color:#282E34;
	padding:50px 80px;
	text-align: justify;
}
.banner-3{
	position:relative;
	color:#4026a5;
	background-color:pink;
	padding:50px 80px;
	text-align: justify;
}

.banner-4{
	position:relative;
	color:#dae031;
	background-color:#4026a5;
	padding:50px 80px;
	text-align: justify;
}
.banner-5{
	position:relative;
	color:black;
	background-color:white;
	padding:50px 80px;
	text-align: justify;
}
.footerBanner{
	position:relative;
	color:#ddd;
	background-color:#282E34;
	padding:25px;
	text-align: justify;
}
.bold{
	font-weight: bold;
}
.bgimg {
  position: relative;
  opacity: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("../images/mkphotoLogo.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("../images/Family.jpg");
  min-height: 80%;
}
.bgimg-3 {
  background-image: url("../images/Wedding.jpg");
  min-height: 400px;
}
.bgimg-4 {
  background-image: url("../images/Maternity.jpg");
  min-height: 80%;
}
.bgimg-5 {
  background-image: url("../images/newborn.jpg");
  min-height: 80%;
}
.bgimg-6 {
  background-image: url("../images/events.jpg");
  min-height: 80%;
}
.bgimg-7 {
  background-image: url("../images/products.jpg");
  min-height: 80%;
}

.bgimgEngagement01{
  background-image: url("../images/engagement/dale/Dale-01.jpg");
  min-height: 100%;
}
.bgimgEngagement02{
  background-image: url("../images/Engagement.jpg");
  min-height: 100%;
}
.bgimgEngagement03{
  background-image: url("../images/engagement/jaundre/Jaundre-26.jpg");
  min-height: 100%;
}
.bgimgEngagement04{
  background-image: url("../images/engagement/erin/Erin-04.jpg");
  min-height: 100%;
}
.bgimgFamily01{
  background-image: url("../images/family/jacqui/Jacqui-03.jpg");
  min-height: 100%;
}
.bgimgFamily02{
  background-image: url("../images/family/samantha/Sam-7.jpg");
  min-height: 100%;
}
.bgimgFamily03{
  background-image: url("../images/family/mariaan/Mariaan-11.jpg");
  min-height: 100%;
}
.bgimgFamily04{
  background-image: url("../images/family/shalom/Shalom-5.jpg");
  min-height: 100%;
}
.bgimgFamily05{
  background-image: url("../images/family/alicia/Alicia-20.jpg");
  min-height: 100%;
}
.bgimgFamily06{
  background-image: url("../images/family/anneke/DSC_1065-1.jpg");
  min-height: 100%;
}
.bgimgFamily07{
  background-image: url("../images/family/sharlene/Sharlene-3.jpg");
  min-height: 100%;
}
.bgimgFamily08{
  background-image: url("../images/family/tarryn/tarryn-15.jpg");
  min-height: 100%;
}

.bgimgBoudior01{
  background-image: url("../images/boudoir/santone/Santone-01.jpg");
  min-height: 100%;
}
.bgimgBoudior02{
  background-image: url("../images/boudoir/petru/Petru-1.jpg");
  min-height: 100%;
}
.bgimgSolo01{
  background-image: url("../images/solo/anzel/Anzel-28.jpg");
  min-height: 100%;
}
.bgimgSolo02{
  background-image: url("../images/solo/anzel/Anzel-22.jpg");
  min-height: 100%;
}
.bgimgWedding01{
  background-image: url("../images/weddings/RichardKendal/Kendal-12.jpg");
  min-height: 100%;
}
.bgimgWedding02{
  background-image: url("../images/weddings/charlcharne/Charl&Charne-40.jpg");
  min-height: 100%;
}
.bgimgWedding03{
  background-image: url("../images/weddings/Ash-Lee/Ash-Lee-33.jpg");
  min-height: 100%;
}
.bgimgWedding04{
  background-image: url("../images/weddings/SherrifLinda/Sherrif&Linda-39.jpg");
  min-height: 100%;
}
.bgimgWedding05{
  background-image: url("../images/weddings/BraamAnuscha/Braam&Anuscha-25.jpg");
  min-height: 100%;
}
.bgimgWedding06{
  background-image: url("../images/weddings/WernerJanine/Janine-40.jpg");
  min-height: 100%;
}
.bgimgWedding07{
  background-image: url("../images/weddings/Carla/Image-23.jpg");
  min-height: 100%;
}
.bgimgMaternity01{
  background-image: url("../images/maternity/tannin2/Tannin-17.jpg");
  min-height: 100%;
}
.bgimgMaternity02{
  background-image: url("../images/maternity/annie/Annie-5.jpg");
  min-height: 100%;
}
.bgimgMaternity03{
  background-image: url("../images/maternity/tannin/Tannin-8.jpg");
  min-height: 100%;
}
.bgimgMaternity04{
  background-image: url("../images/maternity/kay/Kay-10.jpg");
  min-height: 100%;
}
.bgimgMaternity05{
  background-image: url("../images/maternity/annais/Annais-7.jpg");
  min-height: 100%;
}
.bgimgMaternity06{
  background-image: url("../images/maternity/roxy/Roxy-12.jpg");
  min-height: 100%;
}

.bgimgNewborn01{
  background-image: url("../images/newborn/phoenix/Phoenix-9.jpg");
  min-height: 100%;
}
.bgimgNewborn02{
  background-image: url("../images/newborn/romi/Romi-2.jpg");
  min-height: 100%;
}

.bgimgEvent01{
  background-image: url("../images/events/matric/2021/melissa/Melissa-03.jpg");
  min-height: 100%;
}
.bgimgEvent02{
  background-image: url("../images/events/cc2018/cc2018-1.jpg");
  min-height: 100%;
}
.bgimgEvent03{
  background-image: url("../images/events/muddy2019/MuddyPrincess-77.jpg");
  min-height: 100%;
}
.bgimgEvent04{
  background-image: url("../images/events/rfad2019/RFAD-10.jpg");
  min-height: 100%;
}
.bgimgEvent05{
  background-image: url("../images/events/matric/2022/Melissa/Melissa-19.jpg");
  min-height: 100%;
}
.bgimgEvent06{
  background-image: url("../images/events/matric/2022/Melissa/Melissa-33.jpg");
  min-height: 100%;
}
.bgimgEvent07{
  background-image: url("../images/events/matric/2023/Rudolph/Rudolph-13.jpg");
  min-height: 100%;
}
.bgimgMatric01{
  background-image: url("../images/events/matric/2020/BenoniHigh/BenoniHigh-21.jpg");
  min-height: 100%;
}
.bgimgMatric02{
  background-image: url("../images/events/matric/2019/zoe/Zoe-10.jpg");
  min-height: 100%;
}
.bgimgMatric03{
  background-image: url("../images/events/matric/2019/joshua/Joshua-11.jpg");
  min-height: 100%;
}
.bgimgMatric04{
  background-image: url("../images/events/matric/2022/Leah/Leah-14.jpg");
  min-height: 100%;
}
.bgimgMatric05{
  background-image: url("../images/events/matric/2023/Rudolph/Rudolph-15.jpg");
  min-height: 100%;
}
.bgimgMatric06{
  background-image: url("../images/events/matric/2023/Sunel/Sunel-09.jpg");
  min-height: 100%;
}
.caption {
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.noborder {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.caption span.border {
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 10px;
  background-color:transparent;
  color: #f7f7f7;
}
  .hideFullTop{
	padding-top: 50px;
  }
.header{
	text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  font:"Lato", sans-serif;
  font-weight: bold;

  color: #111;
}
.mobileMargin15{
  margin-top: 15px;
}

.gallery{
	padding-top: 65px;
}
.carousel-item{
	/* padding: 7% 10%; */
  font-size:1rem;
}
.carousel-control-prev{
	/* background-color: #fff; */
  font-size:1rem;
}
.carousel-control-next{
	/* background-color: #fff; */
  font-size:1rem;
}
.hideFull{
	visibility: hidden;
}
.landscape{
	max-height: 600px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:auto;
}
.portrait{ 
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}
.mainHead, .hideNonMobile{
	visibility: hidden;	
    height: 0px;

}
.facebook-button {
  background-color: #4267B2;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
}
.facebook-button i {
  margin-right: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 12px;
    text-align: left;
}
.cta {
    background-color: #005a8d;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.cta:hover {
    background-color: #004070;
}

/* h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
} */

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
h2.mobile{
	font-size: 4rem;
}
h4.mobile{
	font-size:1.5rem;
}
h5.mobile{
	font-size:2rem;	
}
body.mobile{	
	font-size:3rem;	
}
p.mobile{
	font-size: 1rem;
}
.banner-1, .banner-2{
	position:relative;
	color:#ddd;
	background-color:#282E34;
	text-align: justify;
	padding: 10px 15px;
}

.mainHead{
	visibility: hidden;		
    height: 0px;
}
.caption span.noborder {
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 10px;
  background-color:transparent;
  color: #f7f7f7;
}
  .bgimg {
    background-attachment: scroll;
	background-size: cover;
	min-height: initial;
  }
  .bgimg-3{
	  color:black;
  }
  .black{
	color:black;
  }
  .hideFull{
	  visibility: visible;
  }
  .hideSmall{
	  visibility: hidden;
  }
  .hideFullTop{
	padding-top: 0;
  }
  
.landscape{
	
	width:100%;
	height:auto;
}
.mobileMargin15{
  margin-top: 25px;
}
}