@font-face {
    font-family: 'TG';
 src: url('fonts/TradeGothicLT.woff') format('woff'), url('fonts/TradeGothicLT.ttf');
}

@font-face {
    font-family: 'TGL';
 src: url('fonts/TradeGothicLT-Light.woff') format('woff'), url('fonts/TradeGothicLT-Light.ttf');
}

@font-face {
    font-family: 'TGB';
 src: url('fonts/TradeGothicLT-Bold.woff') format('woff'), url('fonts/TradeGothicLT-Bold.ttf');
}

body
{
	font-family:TG;
	font-weight:200;
}

.sectionContainer
{
	padding-top:50px;
	padding-bottom:10px;
	text-align:center;
	min-width:1020px;
}

.logo
{
	position:relative;
	top:50%;
	left:200px;
	height:80px;
	margin-top:-40px;
	float:left;
	mask-image: url(images/logo.png);
	-webkit-mask-image: url(images/mask.png);
	-moz-mask-image: url(images/mask.png);
	mask-size: cover;
	-webkit-mask-size: cover;
	-moz-mask-size: cover;
}

.footerLogo
{
	height:80px;
}

.menu
{
	position:relative;
	top:50%;
	height:20px;
	margin-top:-10px;
	right:100px;
	float:right;
}

.menulink
{
	position:relative;
	text-decoration:none;
	display:inline-block;
	color:rgb(84,19,143);
	margin-left:10px;
	margin-right:10px;
	font-weight:300;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;

}

.active
{
	text-decoration: underline;
	color:rgb(120,0,153);
	position:relative;
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
	font-weight:400;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;
}

.menulink:hover
{
	color:rgb(55,35,132);
}



.menulink:after {
  display:block;
  content: '';
  border-bottom: solid 1px rgb(55,35,132);  
  transform: scaleX(0);  
  transition: transform 500ms ease-in-out;
  transform-origin:100% 50%
}
.menulink:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}

.header
{
	height:100px;
	width:100%;
	position:fixed;
	display:table-cell;
	top:0px;
	background-color:rgba(255,255,255,.95);
	z-index:5;
}

.pageTitle
{
	position:relative;
	width:100%;
	color:rgb(84,19,143);
	height:500px;
	text-align:center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow:hidden;
}

.pageTitleMovie
{
	position:absolute;
	width:100%;
	left:0px;
}
.pageTitleOverlay
{
	background-color:rgb(255,255,255,.7);
	position:absolute;
	width:100%;
	left:0px;
	height:960px;
}

.pageTitleSmall
{
	width:100%;
	height:400px;
	text-align:center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


.details
{
	position:relative;
	top:525px;
	text-align:left;
	width:400px;
	left:100%;
	margin-left:-450px;
	color:white;
	
	padding:15px;
}

.cardContainer
{
	text-align:center;
	position:relative;
	width:1000px;
	left:50%;
	margin-left:-500px;
	margin-bottom:30px;
}

.flip-card-front h2
{
font-size:18pt;
margin-top:40px;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  display:inline-block;
  overflow: hidden;
 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #53128e;
  color: white;
}

.flip-card-back {
  background-color: white;
  color: black;
 font-size:10pt;
  transform: rotateY(180deg);
}


h1
{
	font-family:TGL;
	font-weight:100;
	font-size:64pt;
}
h5
{
	font-size:10pt;
	margin-bottom:2px;
}

.pageTitle h1
{
	position:relative;
	top:50px;
}
.pageTitle .subTitle
{
	font-family:TGL;
	position:relative;
	top:30px;
	font-weight:100;
	font-size:28pt;
	letter-spacing: 1px;
}

.pageTitleSmall h1
{
		position:relative;
	top:100px;
}

.pageTitleSmall .subTitle
{
		font-family:TGL;
	position:relative;
	top:70px;
	font-weight:100;
	font-size:28pt;
	letter-spacing: 1px;
}

h2
{
	font-family:TGL;
	margin:7px;
	font-weight:100;
	font-size:28pt;
}
h4
{
	font-weight:300;
	font-size:16pt;
}

.section-line {
    display: inline-block;
    width: 65px;
    height: 1px;
    margin: 0 auto;
    background: #ccc;
    position: relative;
    top: -6px;
    margin-bottom:4px;
}

.content
{
	position:relative;
	top:100px;
	background-image:url(images/bg3.png);
}

.section-line:after {
    content: "";
    width: 40px;
    height: 1px;
    display: block;
    background: #ccc;
    margin:3px auto
}
.subTitle
{
		font-family:TGL;
	margin:7px;
	font-weight:100;
	font-size:12pt;
	letter-spacing: 1px;
}


.whiteBackground
{
	background-color:white;
}

.perkIcon
{
	font-size:48pt;
	color:grey;
}

.perkImg
{
	width:120px;
	clip-path: circle(60px at center);
	-webkit-clip-path: circle(60px at center);
	-moz-clip-path: circle(60px at center);
	margin-bottom:-40px;
}


.perkBox
{
	width:220px;
	margin:10px;
	padding:5px;
	background-color:#edebf0;
	position:relative;
	display:inline-block;
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
	height:450px;
	line-height:18pt;
}
.perkBox .perkBox-icon span, .perkBox .perkBox-icon i {
    color:#aaa
}

.perkBox .perkBox-icon span {
    font-size: 64px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}



.perkBox:hover {
    background-color:#f4eeff;
}

.perkBox h5 {
    font-size:18pt;
    text-align: center;
}

.perkText {
    font-size: 16px;
    letter-spacing: 0.75px;
    font-weight:200;
    position: absolute;
top:190px;
}

.perkBox:hover {
    transform:translateY(-10px)
}


.perkBox:hover .perkBox-icon span {
    color:#2d6a62
}

.perkLink
{
text-decoration:none;
color:rgb(84,19,143);	
}


.contactAd
{
	width:100%;
	height:160px;
	text-align:center;
	color:white;
	background-color: rgba(200, 200, 200, 0.7);
}

.contactAd a
{
	color:rgb(240,240,240);
	letter-spacing: 1px;
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}
.contactAd a:hover
{
	color:white;
	text-shadow:0px 0px 5px white;
}

.footer
{
	text-align:center;
}

.footer a
{
	display:inline-block;
	color:grey;
	letter-spacing: 1px;
	margin:10px;
	padding:15px;
	width:15px;
	height:15px;
	border-radius:60px;
}

.footer a:hover
{
	background-color:#2d6a62;
	color:white;
}

.featuredGallery
{
	display:inline-block;
	margin:5px;
	position:relative;
	overflow: hidden;
	width: 18%; 
	height:550px;
	text-shadow:2px 2px 2px black;
	font-family:TGL;
	font-weight:100;
	font-size:14pt;
}

.featuredGallery img
{
	position:relative;
	width: auto; 
	height: 550px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: -webkit-filter 0.3s linear,transform 0.3s linear;
    -moz-transition: filter 0.3s linear,transform 0.3s linear;
    -o-transition: -o-filter 0.3s linear,transform 0.3s linear;
    transition:filter 0.3s linear,transform 0.3s linear;
	
}

.featuredGallery img:hover
{
	transform: scale(1.05); 
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}

.featuredGallery .description
{
	position:absolute;
	text-align: left;
	top:20px;
	left:30px;
	color:white;
	z-index:3;
	font-family:TG;
	font-weight:200;
	font-size:22pt;
	opacity:0;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition:all 0.4s ease-in-out;
}

.featuredGallery img:hover + .description
{
	transform: translate3d(0px,20px,0px);

	opacity:1;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

.featuredGallery .subDescription
{
	display:inline-block;
	color:white;
	z-index:3;
	font-family:TG;
	font-weight:100;
	font-size:14pt;
}

@keyframes introSlide {
  0% {
    transform: translateX(50px);
    opacity:0;
  }
  100% {
    transform: translateX(0);
    opacity:1;
  }
}

@keyframes introSlide2 {
  0% {
    transform: translateY(-20px);
    opacity:0;
  }
  100% {
    transform: translateX(0);
    opacity:1;
  }
}

.titleName
{
	  animation: 1s ease-out 0s 1 introSlide;
	  font-family: TGB;
	  font-weight: 700;
	  display: inline-block;
}

.subTitleOne
{
	opacity:0;
	  animation: 1s ease-out 1s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}
.subTitleTwo
{
	opacity:0;
	  animation: 1s ease-out 1.5s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}
.subTitleThree
{
	opacity:0;
	  animation: 1s ease-out 2s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}

.principles
{
	position:relative;
	top:80px;
	font-size:18pt;
	font-style: italic;
	text-align:center;
}


.handwritting
{
		position:relative;
	top:80px;
	font-family: 'Nothing You Could Do';
	font-size:24pt;
	color:rgb(200,200,200);
}
ul
{
	width:800px;

}

.uldivide
{
		border-bottom: 1px solid rgb(235,235,235);
}

.faqsection
{
	text-align:center; 
	font-size:14pt;
}

.insideCenter
{
	text-align:left;
	width:800px;
	display:inline-block;
}

li
{
	list-style:none;
	font-weight:200;
	font-size:14pt;
	margin-top:20px;
	margin-bottom:10px;

}

.yeolde
{
	position:relative;
	left:-2px;
	top:-5px;
	float:left;
	font-size:30pt;
}

.twocolumns
{
text-align:justify;
width:500px;
height:200px;
display:inline-flex;
margin-left:10px;
margin-right:10px;

}
.threecolumns
{
	text-align:justify;
width:300px;
height:150px;
display:inline-grid;
margin-left:20px;
margin-right:20px;
}

.contactInfo
{
	position:absolute;
	padding-top:50px;
	padding-bottom:50px;
	width:500px;
	height:400px;
	left:50%;
	letter-spacing:.7px;
	font-size:16pt;
	line-height:22px;
	
}

.contactInfo:nth-child(1)
{
	margin-left:-540px; 
	background-color:#ffffff;
}

.contactInfo:nth-child(2)
{
	margin-left:40px; 
	background-color:#efefef;
}

input
{
	font-size:14pt;
	font-family: TGL;
	font-weight:100;
	margin-top:15px;
	border:none;
	border-bottom:solid 1px grey;
	background:none;
	height:40px;
	width:175px;
}

textarea
{
		font-size:14pt;
		font-family: TGL;
	font-weight:100;
	margin-top:15px;
	width:358px;
	height:150px;
	border:none;
	border-bottom:solid 1px grey;
	background:none;
}
.subButton
{
	width:75px;
	height:50px;
	font-size:12pt;
	font-family: TGB;
	font-weight:400;
	border:none;
	background-color:black;
	color:white;
}

.portfolios
{
	position:relative;
	left:50%;
	margin-left:-650px;
	width:1300px;
}
.portfolioCaption
{
		position:relative;
	left:50%;
	margin-left:-500px;
	width:1000px;
	text-align: left;
	font-size:12pt;
	margin-bottom:20px;
	transform: scale(1.2);
}
.lightbox
{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.8);
	display:none;
	z-index:20;
}
.lightbox img
{
	position:relative;
	z-index:21;
	height:800px;
	margin-top:-400px;
	border:solid 5px white;
	top:50%;
}

.portfolioImage
{
	width:400px;
	margin:5px;
	display: inline-block;
}

.portfolioImage img
{
width:400px;
cursor:pointer;	
}

.pageSelector
{
	letter-spacing:15px;
	font-size:32pt;
	cursor:pointer;
}
.pageSelector span:hover
{
	color:#2d6a62;
}

/*----Responsive Design----*/
@media screen and (max-width: 1200px)
	{
		
		.menu
		{
			position:fixed;
			top:0px;
			left:0px;
			height:100vh;
			width:100%;
			background-color:rgba(0,0,0,.8);
			text-align:center;
			display:none;
		}
		
		.menulink
		{
			position:relative;
			text-decoration:none;
			display:block;
			color:white;
			margin-top:40px;
			font-size:48pt;
			font-family: TGB;
			font-weight:300;
			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		  text-transform: uppercase;
		
		}
		
		.active
		{
			text-decoration: none;
			color:#2d6a62;
			position:relative;
			display:block;
			margin-top:40px;
			font-size:48pt;
			font-family: TGB;
			font-weight:400;
			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		  text-transform: uppercase;
		}
		
		.lightbox img
{
	position:relative;
	z-index:21;
	height:600px;
	margin-top:-300px;
	border:solid 5px white;
	top:50%;
}
		
		.content
		{
			left:-8px; 
			width:1020px;
		
		}
		.portfolios
        {
	        width:1000px;
	        margin-left:-500px;
	     }
	     
	     .contactInfo:nth-child(1)
		{
			margin-left:-500px; 
			background-color:#ffffff;
		}
		
		.contactInfo:nth-child(2)
		{
			margin-left:10px; 
			background-color:#efefef;
		}

		
.burger-menu
{
position:fixed;
top:20px;
right:20px;
width:60px;
height:43px;
padding-top:17px;
cursor:pointer;
z-index:10;
border: 1px solid #323232;
}

.bar {
    height: 1px;
    width: 30px;
    display: block;
    margin: 5px auto;
    position: relative;
    background-color: #323232;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}


.exone {
	 background-color: white;
transform:translateY(6px) rotate(-45deg)
}

.extwo {
	 background-color: white;
opacity:0;
}

.exthree {
	 background-color: white;
transform:translateY(-6px) rotate(45deg)
}

.activeMenu
{
	display:block;
}

.activeBoxMenu
{
	border: 1px solid white;
}




	
	}
	

@media only screen /*Phone View*/

and (max-device-width : 742px)
{

}