@import url("https://use.typekit.net/tpf8joa.css");
 
 body {
   color:#cccccc;
   
 }
 
 h1.titleX {
		text-transform: uppercase;
	letter-spacing: 0;
	font-weight: 300;
/*    background: linear-gradient(139deg, rgba(232,116,61,1) 0%, rgb(59 111 181) 105%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	font-family: 'myriad-pro', sans-serif !important;
	font-size: 2em;
}

.title {
		text-transform: uppercase;
	letter-spacing: 0;
	font-weight: 300;
	font-family: 'myriad-pro', sans-serif !important;
	font-size: 1.5em;
}

.subtitle {
	font-size:16px;
}


.uppercase {
	text-transform: uppercase;
}

h3, div {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 300;
	font-family: 'myriad-pro', sans-serif !important;
	font-size: 1em;
	margin-top: 1em;
}


.pt-10 {
	padding-top:10px;
	display: block;
}

.uppercase {
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

button.btn, button {
	margin-top: 20px;
	background-color: #ff5500;
	color: #ffffff;
	padding: 10px 15px;
	border: none;
	font-family: 'myriad-pro', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	
}

button.outline {
  margin-top: 20px;
	background-color: transparent !important;
	color: #ffffff;
	padding: 10px 15px;
	border: 1px solid #999;
	font-family: 'myriad-pro', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
  
}

.noDecoration {
  text-decoration: none;
  color:white;
}

/*animations*/

/** fade in */

.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}

.delayThird {
  animation: fadeIn ease 12s;
  -webkit-animation: fadeIn ease 12s;
  -moz-animation: fadeIn ease 12s;
  -o-animation: fadeIn ease 12s;
  -ms-animation: fadeIn ease 12s;
}

  .fade-in-slow {
animation: fadeIn ease 15s !important;
-webkit-animation: fadeIn ease 15s;
-moz-animation: fadeIn ease 15s;
-o-animation: fadeIn ease 15s;
-ms-animation: fadeIn ease 15s;
animation-delay: 10s;
}


@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

/** fade In  end */

/** fading start */

@keyframes fading {
0% {opacity:0;}
50% {opacity:1}
100% {opacity:0;}
}

/** slow fade In start */

@keyframes fadeInSlow {
0% {opacity:0;}
80% {opacity:0}
100% {opacity:1;}
}

@-moz-keyframes fadeInSlow {
0% {opacity:0;}
80% {opacity:0}
100% {opacity:1;}
}

@-webkit-keyframes fadeInSlow {
0% {opacity:0;}
80% {opacity:0}
100% {opacity:1;}
}

@-o-keyframes fadeInSlow {
0% {opacity:0;}
80% {opacity:0}
100% {opacity:1;}
}

@-ms-keyframes fadeInSlow {
0% {opacity:0;}
80% {opacity:0}
100% {opacity:1;}
}

/* slow fade In end*/

/*delay fade In start */

.delayButton {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;
-webkit-animation-fill-mode: forwards;
}


/*delay fade In end */

.fadeAway {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 4s, opacity 2s linear;
}

div.cover.fadeAway:hover {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 4s, opacity 2s linear;

}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 2s, opacity 2s linear;
}

/** gradient blue */

.linear-orange {
	background: linear-gradient(233deg, #ff215a, #71bbd7, #a527ca, #ff7121);
	background-size: 800% 800%;
	
	  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 6s linear infinite;

	-webkit-animation: ourworlds 41s ease infinite;
	-moz-animation: ourworlds 41s ease infinite;
	animation: ourworlds 41s ease infinite;
}

@-webkit-keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}
@-moz-keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}
@keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}


/** gradient blue */

.linear-blue {
	background: linear-gradient(233deg, #ff7121, #ff215a, #71bbd7, #a527ca);
	background-size: 800% 800%;
	
	  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 6s linear infinite;

	-webkit-animation: ourworlds 41s ease infinite;
	-moz-animation: ourworlds 41s ease infinite;
	animation: ourworlds 41s ease infinite;
}

@-webkit-keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}
@-moz-keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}
@keyframes ourworlds {
	0%{background-position:0% 92%}
	50%{background-position:100% 9%}
	100%{background-position:0% 92%}
}

.look {
	animation: customAni 2s ease 0s infinite alternate-reverse none;
}

@keyframes customAni {
  0% {
	animation-timing-function: ease-in;
	opacity: 1;
	transform: translateX(0);
  }

  24% {
	opacity: 1;
  }

  40%, 60% {
	animation-timing-function: ease-in;
	transform: translateX(-46px);
  }


  20%,
  87%,
   {
	animation-timing-function: ease-out;
	transform: translateX(-45px);
  }

  100% {
	animation-timing-function: ease-out;
	opacity: 1;
	transform: translateX(0px);
  }
}


/************red original*/
.linear-wipe {
  text-align: center;
  
  background: linear-gradient(10deg, #ba0061 40%, #ff4900 60%, #a80065 80%);
  /*could also add a 4th color, to beginning of colors but it seems abrupt #9d0059 20%, */
  /*need to add a gradient going the other direction*/
  background-size: 200% auto;
  
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 6s linear infinite;
 }
 
 .centerV {
	 bottom: 50%;
	 transform: translateY(50%);
	 text-align: center;
	 padding: 0 30px !important;
	 width: 90%;
 }
 
 

.linear-wipe-green {
  text-align: center;
  
  background: linear-gradient(20deg,  #ff4900 60%, #a40032 40%, #ff4900 60%, #a80065 80%);
  /*could also add a 4th color, to beginning of colors but it seems abrupt #9d0059 20%, */
  /*need to add a gradient going the other direction*/
  background-size: 200% 400%;
  
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: float 6s linear infinite;
 }
  
@keyframes shine {
	to {
	  background-position: 200% center;
	}
  }
  
@keyframes float {
	to {
	  background-position: 200% 200%;
	}
}  

@media (max-width:767px) {
	h1,h2,h3,h4,h5 {
	width:90% !important;
	display:block;
	margin:0 auto;
}