/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
#hdrImg{display: none;}
.secBox1{padding: 0px; background:url('/styles/stylesets/202001vserve/images/hdr.jpg') center top no-repeat; height: 489px; display: flex; justify-content: center; align-items: center;}
.secBox3{background:url('/users/admin/Home/Ftr.jpg') center center no-repeat;  height: 300px; display: flex; position: relative; padding: 0; margin: 50px auto 0;}
#quote{ position: absolute; max-width: 1200px; left: 917px; top: 49px; padding: 0; }
#quoteTitle1{font-size: 3em; font-family: 'Anton', sans-serif; color: #343a46;}
#quoteTitle2{font-family: 'Montserrat', sans-serif; font-size: 1.5em; margin: 5px auto 0;}

#servicesWrap{display: flex; justify-content: center; align-items: center;margin: 70px auto 0; flex-wrap: wrap;}

#fancybox_72 .fancybox{ border: 1px solid #C0C0C0 !important; margin: 5px !important;}
.photogallery{max-width: 1500px; justify-content: center; margin: auto; display: flex; flex-wrap: wrap;}
.photogallery .fancybox{}

#services{}
#services a:link, #services a:visited{text-decoration:none; display: block; width: 200px; text-align: center; margin: 10px; text-align: center; border-radius: 300px; background: #696d75; padding: 20px; height: 200px; transition: 0.3s ease-in;}
#services a:hover, #services a:active{text-decoration:none; background: #0d7993;  color:#ffffff;}

#serviceTitle1{display: block; font-size: 3em; color: #ffffff; text-transform: uppercase; margin: 50px 0 0 0; font-family: 'Anton', sans-serif;}
#serviceTitle2{display: block;  font-size: 1.5em; color:#ffffff; font-family: 'Montserrat', sans-serif;}

#ourBrandsWrap{display: flex; justify-content: center; align-items: center; }
#ourBrands{margin: 20px 54px 20px 0px; }

#homeWrap{display: flex; justify-content: center;}
#homeSec1{width: 80%;}
#homeSec2{width: 25%; margin: 0 20px;}
#badge{}
#badgeBorder1{display: block; width: 200px; text-align: center; margin: 10px; text-align: center; border-radius: 300px; border: 10px outset #a2a3a5; padding: 20px; height: 200px; transition: 0.3s ease-in;}
#badgeBorder2{line-height: 50px; display: block; width: 220px; margin: -12px; text-align: center; border-radius: 200px; border: 2px solid #0d7993; height: 220px;transition: 0.3s ease-in;font-family: 'Montserrat', sans-serif; background:#0d7993;color:#fff;}
#badgeText1{font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; padding: 34px 0 0 0;}
#badgeText2{font-family: 'Anton', sans-serif; width: 100%; font-size: 3em; color:#fff;text-transform: uppercase;letter-spacing: 0.03em;}
#badgeText3{font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold;}

#contentmask{width:100%; height:100%; margin: -70px auto 0;}


#CpKZNInfoWrap{max-width: 1200px;margin: auto; display: flex;justify-content: space-between;}
#CpKZNInfo{width: 50%; border: 1px solid #d0d0d0; padding: 25px 15px;}
#CpKZNInfo2{width: 50%;margin: 0 0 0 20px; border: 1px solid #d0d0d0; padding: 25px 15px;}
/* #CpKZNInfoImg{display: block; height: 68px; text-align: center;} */
#CpKZNInfoImg{display: block; text-align: center;}
#CpKZNInfoText{height: 300px;}

/*#CpKZNInfoWrap{max-width: 1200px;margin: auto;}
#CpKZNInfo{display: flex;justify-content: center;align-items: center;}*/
/*#CpKZNInfoImg{z-index: 1;display: block;width: 200px;text-align: center;margin: 10px;text-align: center;border-radius: 300px;background:#696d75;padding: 20px;height: 200px;}
#CpKZNInfoImg img{margin: 80px auto 0;}*/
/*#CpKZNInfoText{display: block; width: 80%;border: 1px solid #696d75; padding: 20px 10px 20px 70px; margin: 0 0 0 -70px;text-align: left; text-align: left;}*/


@media screen and (max-width:1500px){
    #quote{ left: 689px; top: 87px;}
    
}

@media screen and (max-width:1200px){
    #services a:link, #services a:visited{width: 180px; border-radius: 180px; height: 180px;}
    #serviceTitle1{font-size: 2.5em; }
    #quote{left: 555px;}
    
}

@media screen and (max-width:1100px){
    #services a:link, #services a:visited{width: 170px; border-radius: 170px; height: 170px;}
    #serviceTitle1{font-size: 2.5em;margin: 40px 0 0 0; }
    h1{font-size: 1.6em; }
    #quote{left: 485px;}
    
}

@media screen and (max-width:1000px){
    .secBox3{background:#ffffff url("/classes/timthumb.php?w=1000&h=300&zc=1&q=90&src=/users/admin/Home/Ftr.jpg") no-repeat center top;}
    h1{text-align: center; }
    #services a:link, #services a:visited{width: 150px; border-radius: 150px; height: 150px; margin: 10px 5px;}
    #serviceTitle1{font-size: 2.3em;margin: 30px 0 0 0; }
    #servicesWrap{margin: -18px auto 0;}
    #quote{top: 58px;}
    #quoteTitle1{font-size: 2.5em;}
    #homeSec1{width: 70%;}
    #homeSec2{width: 30%; margin: 0 20px;}
    #CpKZNInfo, #CpKZNInfo2{margin: 10px;}
    
}

@media screen and (max-width:900px){
    #services a:link, #services a:visited{width: 130px; border-radius: 130px; height: 130px; margin: 10px 5px;}
    #serviceTitle1{font-size: 2.2em;margin: 20px 0 0 0; }
    #quoteTitle1{font-size: 2em;}
    #quote{left: 414px;}
    #homeSec1{width: 100%;}
    #homeSec2{width: 100%; margin:10px auto;}
    #homeWrap{flex-wrap: wrap;}
    #badgeBorder1{text-align: center; margin: auto;}
    #CpKZNInfoWrap{flex-wrap: wrap;}
    #CpKZNInfo, #CpKZNInfo2{width: 100%;}
    
}

@media screen and (max-width:800px){
    .secBox3{background:#ffffff url("/classes/timthumb.php?w=800&h=200&zc=1&q=90&src=/users/admin/Home/Ftr.jpg") no-repeat center top; height: 200px;}
    #contentmask{margin: -50px auto 0;}
    #services a:link, #services a:visited{width: 120px; border-radius: 120px; height: 120px; margin: 10px 5px;}
    #serviceTitle1{font-size: 2.2em;margin: 20px 0 0 0; }
    #quote{left: 360px; top: 32px;}
    
   
}

@media screen and (max-width:760px){
    #servicesWrap{margin: 30px auto 0;}
    #services{width: 35%; text-align: center;}
    #services a:link, #services a:visited{margin: 10px auto;}
    #services a:link, #services a:visited{width: 150px; border-radius: 150px; height: 150px;}
    #serviceTitle1{font-size: 2.2em; margin: 30px 0 0 0; }
    #serviceTitle2{font-size: 1.2em;}
    
}

@media screen and (max-width:700px){
    #services{width: 40%;}
    #quoteTitle1{font-size: 1.5em;}
    #quote{left: 360px; top: 45px;}
    #ourBrands{margin: 20px 10px 20px 10px; }
    
}

@media screen and (max-width:650px){
    #quote{left: 286px;}
    
}

@media screen and (max-width:600px){
    #services{width: 45%;}
    #quote{left: 240px;}
    
}

@media screen and (max-width:500px){
    #servicesWrap{margin: -55px auto 0;}
    #services a:link, #services a:visited{width: 110px; border-radius: 110px; height: 110px; margin: 5px 10px;}
    #serviceTitle1{font-size: 2.2em;margin: 20px 0 0 0; }
    #services{width: 50%; }
    h1{font-size: 1.3em; }
    #quoteTitle1{font-size: 1.3em;}
    #quote{left: 197px;}
    #quoteTitle2{font-size: 1em; }
    #contentbox{margin: -30px auto 0;}
    #serviceTitle1{font-size: 1.8em; margin: 20px 0 0 0;}
    #serviceTitle2{font-size: 1.1em;}
    #ourBrandsWrap{flex-wrap: wrap;}
    
}

@media screen and (max-width:400px){
    .secBox3{background:#ffffff url("/classes/timthumb.php?w=800&h=200&zc=1&q=90&src=/users/admin/Home/Ftr.jpg") no-repeat center right; height: 150px;}
    #quote{left: 125px; top: 32px;}
    #services a:link, #services a:visited{width: 100px; border-radius: 100px; height: 100px;}
    #servicesWrap{margin: 10px auto 0;}
    .secBox1{height: 350px; }
    
}

@media screen and (max-width:360px){
    #services a:link, #services a:visited{width: 95px; border-radius: 95px; height: 95px;}
    #serviceTitle1{font-size: 1.5em;}
    #serviceTitle2{font-size: 1em;}
    
    #quote{left: 77px; top: 32px;}
    
}