@charset "UTF-8";
/* CSS Document */
/*Global*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0;}

html{
	font-family: customBold;
	margin:0;
	background: #fff;
}
a{
	text-decoration: none;
	color:#f1f1f1;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
*:focus {
    outline: none;
}        
 @font-face{
            font-family:customLight;
            src: url("../fonts/panisans-light-webfont.woff");
            src: url("../fonts/panisans-light-webfont.woff2");
        }
@font-face{
            font-family:lightIt;
            src: url("../fonts/panisans-lightitalic-webfont.woff");
            src: url("../fonts/panisans-lightitalic-webfont.woff2");
        }
 @font-face{
            font-family:custom;
            src: url("../fonts/panisans-regular-webfont.woff");
            src: url("../fonts/panisans-regular-webfont.woff2");
        } 
@font-face{
            font-family:customIt;
            src: url("../fonts/panisans-regularitalic-webfont.woff");
            src: url("../fonts/panisans-regularitalic-webfont.woff2");
        } 
 @font-face{
            font-family:customMed;
            src: url("../fonts/panisans-medium-webfont.woff");
            src: url("../fonts/panisans-medium-webfont.woff2");
        }
 @font-face{
            font-family:customBold;
            src: url("../fonts/panisans-bold-webfont.woff");
            src: url("../fonts/panisans-bold-webfont.woff2");
        }
.copy{
    font-family: custom;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .2rem;
}
/*Header*/ 
	.slide {
		width:100%; 
		height:0px; 
		padding-bottom: 71.4%; 
		overflow:hidden; 
		position:relative; 
		margin-bottom: -19.6%;
	}

	
	.slide img{
      position:absolute; 
      animation:slide 60s infinite; 
      opacity:0; 
      width: 100%; 
      height: auto;
	}

    @keyframes slide {5%{opacity:1;} 60%{opacity:0;}}
    .slide img:nth-child(1){animation-delay:0s;}
    .slide img:nth-child(2){animation-delay:10s;}
    .slide img:nth-child(3){animation-delay:20s;}
    .slide img:nth-child(4){animation-delay:30s;}
    .slide img:nth-child(5){animation-delay:40s;}
    .slide img:nth-child(6){animation-delay:50s;}
        .overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0px;
            padding-bottom: 48%;
			overflow: hidden;
            background: rgba(17,17,17,.5);
            z-index: 4;
        }
        .logo{
            position: relative;
            width: 40%;
            margin: 20% auto 0 auto;
			min-width: 300px;
            top: 0;
            z-index: 5;
        }
 		.links{
            position: absolute;
			top:0;
			margin: 40% auto;
			width: 100%;
			height: auto;
            text-align: center;
            padding: 0;
			z-index: 99;
        }
 
        .btn:hover{
            opacity: 1;
        }
        .btn{
            padding: 100px 0;
            opacity: .5;
        }

        .dropdown:hover #galleryBTN{
            opacity: 1;		
            z-index: 99;
        }
        .dropbtn,  .btn {
            color: #f1f1f1;
            font-size: 1rem;
            padding: 5px 10px;
            margin: 10px 0 0 0;
            border: none;
            cursor: pointer;
            font-family: customMed;
            text-transform: uppercase;
            letter-spacing: .1rem;
        }
        .dropdown,.btn {
            position: relative;
            display: inline-block;
        }
        .dropdown-content::before {
            content: "";
            position: absolute;
            width: 0; 
          	height: 0; 
            top:-10px;
            left: 10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            border: none;
            background: rgba(241,241,241,.9);
            min-width: 130px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
            z-index: 99;
            font-family: customMed;
            font-size: .9rem;
            letter-spacing: 0;
        }
        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            text-align: left;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #fff;
            color: rgba(11,172,139.25);

        }
        .dropdown-content a:hover:first-child {
            border-radius: 0 5px 0 0;
        }
        .dropdown-content a:hover:last-child {
            border-radius: 0 0 5px 5px;
        }
        .dropdown:hover .dropdown-content {
            display: block;	
        }
        .dropdown:hover .dropbtn, .btn:hover {
        }
/* Gallery */
#gallery {
  	width: 90%;
  	margin: 0 auto 50px auto;
  	overflow: hidden;
	background: #f1f1f1;	
}
/*Gallery-Titles and quotes*/
.title, .quote, .sub{
	text-align: center;
}
.title{
	margin: 20px 0 0 0;
	font-family:customBold;
	font-size: 1.2rem;
	letter-spacing: 10px;
	text-transform: uppercase;	
	color: rgba(11,172,139,1);
}
.quote{
	font-family:customIt;
	color:#333;
}

.sub{
	font-family:customLight;
	color:#5b5b5b;
}
	.youtube:hover img{
		opacity: 80%
	}
	
/*---lightbox---*/
          .box img {
           		cursor:zoom-in !important;
          }
          #lightbox {
                position: fixed;
                z-index: 1000;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, .85);
                display: none;
                cursor:zoom-in;
                backdrop-filter: blur(6px);
          }
          #lightbox.active {
                display: flex;
                justify-content: center;
                align-items: center;
          }
          #lightbox img {
                max-width: 90%;
                max-height: 80%;
                padding: 4px;
                background-color: #fff;
                border: 10px solid #fff;
                box-shadow: 0px 0px 15px 5px rgba(0,0,0,.8);
          }

/*to top*/
        #toTop {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 0px;
            z-index: 99;
            width: 60px;
            height: 70px;
            cursor: zoom-in;
            text-align: left;
        }
        #toTop i{
            font-size: 40px;
            line-height: 30px;
            color:rgba(241,241,241,1);
            border: 2px solid rgba(241,241,241,1);
            border-radius: 5px;
            padding:0px 8px 6px 8px;
            background: rgba(150,150,150,.5);
        }
        #toTop:hover i{
            background:rgba(11,172,139,.5);
        }

/*Contact/About*/
.a, .c, .m{
	margin:  0;
	padding: 0;
	display: block;
	width: 100%;
}
.contact, .about, .me{
    align-items: center;
    width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/*Contact section*/

        .contactCard{
            display: block;
            width: 310px;
            margin-left: 15%;
            float: right;
            margin: 5% 0;
        }
        .contact-img-box{
			position: relative;
            width: calc(85% - 310px);
            min-width: 400px;
            display: block;
			margin-bottom: -22%;
            margin-right: 10%;
        }
        a .copy:hover{
            color:rgba(11,172,139,1)!important;
        }
        .about img, .me img, .contact img{
            position: relative;
            border: 10px solid #f1f1f1;
            width: 100%	
        }
        .contact .img2  {
            position: relative;
            transform: translateY(-118%);
            left:81%;
            width: 40%;
            z-index: 2;
        }
        .icon, .contactInfo{
            display: inline-block;
            padding: 5px;
            color: #333;
        }
        .icon{
            position: relative;
        }
        .contactinfo{
            width: 250px;
        }
        .contact i {
            position: relative;
            border-radius: 10px 10px 0 10px ;
            text-transform: uppercase;
            font-size: 2rem;
            font-weight: 900;
            margin:0; 
            left: 0px;
            top: -1rem;
        }
        .contactCard h1{
            font-family: customBold;
            text-transform: uppercase;
            font-size: 2rem;
            letter-spacing: .5rem;
            border-bottom: 2px solid rgba(11,172,139,1);
            padding: 0px;
            margin: 0 0 5% 0;
			text-align: center;
        }
        .contact-sub{
            font-family: customBold;
            text-transform: uppercase;
            font-size: 1rem;
            letter-spacing: .2rem;
        }

/*Partner section*/
.partners{
    display: block;
    margin:0% ;
	padding: 15px 10% 5% 10%;
    background: #ccc;
    text-align: center;
}
.aff-title{
    position: relative;
    font-family: customMed;
    font-size: 1.5rem;
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
}
.aff-title::after{
    content: " ";
    position: absolute;
    bottom:-10px;
    left: calc(50% - 35px);
    height: 4px;
    width: 70px;
    background: rgba(11,172,139,1);
}
.affLink{
	margin: 25px;
	display: inline-block;
	width: 125px
}
.affHide{
	display: none;
}
.affLink img{
    height: 100%;
    width: 100%;
}
.affLink:hover, .affLink2:hover{
    opacity: .5;
    transition: opacity .2s;
}
.client-title{
    position: relative;
    font-family: customMed;
    font-size: 1.5rem;
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
	line-height: 1.25rem;
	margin: 0 0 5% 0;
}
.client-title span{
	font-family: customLight;
	font-size: .75rem;
	letter-spacing: .5rem;
	text-align: center;
}
.client-title::after{
    content: " ";
    position: absolute;
    bottom:-10px;
    left: calc(50% - 35px);
    height: 4px;
    width: 70px;
    background: rgba(11,172,139,1);
}
.clientLink{
	margin: 0 15px;
	display: inline-block;
	width: 85px;
	opacity: .8
}
.clientLink img{
    height: 100%;
    width: 100%;
}

/*About Section*/
        .about, .me{
			display: flex;
			margin: 0 auto;
			overflow: visible;
        }   
        .aboutQuote, .meQuote{
			width: 50%;
            padding: 0 5%;
			display: block;
}
		.meQuote{
			margin-left: auto;
			order: 2;
}
        .about-img-box, .me-img-box{
			width: 50% ;
            min-width: 310px;
			text-align: center;
			display: block;
			margin: -5% 0 -22% 0;
			position: relative;
        }
		.me-img-box{
			margin: -10% 0 -15% 0
		}
        .about img, .me img{
                vertical-align: middle;
        }
		.Q-Mark, .Q-Mark2, .meQ-Mark, .meQ-Mark2{
			font-family: customBold;
            font-size: 3rem;
            color: rgba(11,172,139,1);
			z-index: 9;}
        .Q-Mark, .Q-Mark2{
            margin: 0 0 -5% -5%;
        }
		.meQ-Mark, .meQ-Mark2{
            margin: 0 0 -8% -5%;
        }
        .Q-Mark2,.meQ-Mark2{
            text-align: right;
        }   
		.Q-Mark2{
			margin: -5% -5% 0 0;
        }	
		.meQ-Mark2{
			margin: -15% -5% 0 0;
        }
        .about .img1, .me .img1{
			margin: 0 10%;
        }
		.me .img1{
			width: 70%;
		}
        .about .img2, .me .img2{
            position: relative;
            left:-5%;
			transform: translateY(25%);		
            width: 60%;
            z-index: 2;
			margin: 0;
        }
		.me .img2{
			transform: translateY(35%);		
            left:-5%;

        }
        .about .img3, .me .img3  {
            position: relative;
            transform: translateY(-40%);
            left:40%;
            width: 60%;
			z-index: 2;
        }
        .me .img3{
            transform: translateY(-65%);
            left:65%;
            width: 35%;
        }
		.about .img4{
	        position: relative;
            transform: translateY(-75%);
            left:0%;
            width: 70%;
			z-index: 1;
		}
        .about .copy, .me .copy{
            font-family: customMed;
        }
        .about .sub-copy, .me .sub-copy{
	        text-align: right;
            text-transform: uppercase;
            color: #333;
            font-family: customBold;
            font-size: 1rem;
            letter-spacing: .2rem;
        }
        .about .sub-copy, .me .sub-copy{
            margin: 1rem 0;
        }
        .me .sub-title{
            position: relative;
            margin: 10% 0 0 0;
        }
		.about .sub-title, .me .sub-title{
            text-align: right;
            text-transform: uppercase;
            font-family: customLight;
            font-size: .9rem;	
            letter-spacing: .2rem;	
		}
        .about .sub-title{
            margin: -15px 0;
        }
		.me .sub-copy{           
			margin:  0 0 10% 0;
		}
        .about .sub-copy:hover, .me .sub-copy:hover{
            opacity: .5;
        }
        .img1, .img2, .img3, .img4{
            position: relative;
        }
		.credit{
            position: absolute;
            width: 100%;
            height: 25px;
            padding: 15px;
            background: rgba(255,255,255,.85);
            z-index: 2;
			top: calc(50% - 20px);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: customLight;
            font-size: .3rem;
            opacity: 0;
            transition-delay: .5s;
            transition-duration: .5s;
            transition-timing-function: ease-out;
        }
        .img1:hover .credit, .img2:hover .credit, .img3:hover .credit, .img4:hover .credit{
            opacity: 1;	
        }
        .credit a{
            color:rgba(11,172,139,1);
            font-family: customBold;
        } 
        .credit a:hover{
            color:rgba(249, 105, 14, 1);
		}
/*Footer*/
#footer{
    position: relative;
	text-transform: uppercase;
	letter-spacing: .15em;
	font-size: .8em;	
    display:block;
    color:#f1f1f1;
    background: #333;
    padding-top: 100px!important;
    padding-bottom: 10px;
    border-bottom: 10px solid rgba(11,172,139,1);
    padding: 55px 0px;
    text-align: center;
	width: 100%;
}
#footer a:hover{
	color:rgba(11,172,139,1);
}
.social{
	clear: both;
	padding: 10px;
}	
.social ul{
	margin: 15px 0;
}
.social li{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: #f1f1f1;
	border-radius: 50%;
	height: 22px;
	width: 22px;
	margin: 2px;
}
.social li:hover{
	background: rgba(11,172,139,1);
}
.social i{
	position: relative;
	left:1px;
	top:2px;
	font-size: 1em;
	text-align: center;
	color: #333;
}
.cert{

	opacity: .05;
}
.cert:hover{
	opacity: 1;
}
.dot{
	height: 12px!important;
	width: 12px!important;
	background: #f1f1f1!important;
}
.by{
	text-align: center;
	font-size: .75em;
	text-transform: none;
	color:#555;
	letter-spacing: 0;
	margin: 75px 0 0 0;
}
.copyright{
	font-family: customLight;
	font-size: .75em;
	letter-spacing: .2em;
}
.insta{
	transform: scale(.75);	
}	
.footerInfo li{
	display: inline-block;		
}	
.frame{
	width: 100%!important;
	padding: 15px;
	}	


/* Video*/

.youtube:hover{
	opacity: 80%;
}






			 /*Mobile*/
/*----------------------------------*/
/* mobile --- MOBILE --- mobile --- */
/*----------------------------------*/
@media only screen and (max-width: 700px){
		.logo{
			margin: 5% auto !important;
		}
	 	.links{
			transform: translateY(-75px);

        }
	        .dropbtn,  .btn {
            color: #f1f1f1;
            font-size: .75rem;
            padding: 15px 10px;
				margin: 10px 0 0 0;}
}


              @media only screen and (max-width: 1000px) {
				  
				  		.contact, .about, .me{
                            width: 100%;
                            margin: 0 auto;
                            padding: 0 5px;
                        }

                  /*Contact section*/
                                .contactCard{
                                    margin-left:0;
                                    float:none;
                                    margin: 5% auto;
                                }
                                .contact-img-box{
                                    margin-right: 10%;
                                }
                                .contact-img-box{
                                    width: calc(100%);
                                    min-width: 200px;
                                    display: block;
                                    float: none;
                                    margin-bottom: 0;
                                    transform: translateY(30%)
                                }
                                .contact .img2  {
                                    transform: translateY(-195%);
                                    left:50%;
                                    width: 40%;
                                }

              /*Partner section*/
                        .partners{
                            display: block;
                            padding: 15px 10% 5% 10%;
                            background: #ccc;
                            text-align: center;
                        }
                        .affLink{
                            width: 100px;
                            margin: 15px;
                        }
              /*About Section*/
                                .about, .me{
                                    display: block;
                                }  
                                .me{
                                    overflow:hidden;
                                }
                                .aboutQuote, .meQuote{
                                    width: 100%;
                                    padding: 0 5%;
                                    float: none;
                                }
                                .about-img-box, .me-img-box{
                                    width: calc(95% );
                                    float: right;
                                    margin: 0;
                                    text-align: center;
                                    display: block;
                                }
				
              /*Footer Section*/
                  .hide{
                      display:none!important;
                  }
                  .footerInfo li{
                      display: block;
                  }
                  .insta{
                      width: 100%;
                      transform: scale(1);
                  }
/*END MOBILE CSS*/}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; transform-webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;  }
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#f1f1f1; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#f1f1f1;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:15px solid #fff; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; bottom:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:15px; margin-top:-32px; background:url("../images/lightBox/controls.png") no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:15px; margin-top:-32px; background:url("../images/lightBox/controls.png") no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:14px; left:15px; display:block; background: rgba(0,0,0,.5); background:url("../images/lightBox/controls.png") no-repeat top center; width:40px; height:18px; text-indent:-9999px; opacity: .97; }
        #cboxClose:hover{background-position:bottom center;}
#cboxCurrent{ position:absolute; bottom:25px; right:25px; display:block; background: rgba(0,0,0,.5); background:url("../images/lightBox/lippsphotoCCC.svg") no-repeat bottom right; width:250px; height:10%; text-indent:-9999px; opacity: .97; }