@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Bellefair|Montserrat:100,200,300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

video {
  width: 100%; 
  height: auto;
}
.buttons{
display:block;
width:60px;
height:60px;

float:left;
cursor: pointer;
}
@media(max-width:500px) {
   .buttons{
display:block;
width:40px;
height:40px;

float:left;
cursor: pointer;
}

}
#control{
	width: 60px;
	height:200px;
	clear:both;
	position:absolute;
	top: 20px;
	right: 10px;
	z-index: 1;
	
}
@media(max-width:500px) {
	#control{
	width: 40px;
	height:200px;
	clear:both;
	position:absolute;
	top: 20px;
	right: 10px;
	z-index: 1;
	
}
}
.vid-container{
	position:relative;
	max-width: 1400px;
	margin: 0 auto;
	padding-top: 5px;
}

button.play{
	background-size:100%;
	background-image: url(../img/play.png);
	background-color: Transparent;
	 height: 60px;
  width:60px;  
  border:none;
  outline:none;
  margin-top: 10px;
  cursor: pointer;
}
@media(max-width:500px) {
	button.play{
	background-size:100%;
	background-image: url(../img/play.png);
	background-color: Transparent;
	 height: 40px;
  width:40px;  
  border:none;
  outline:none;
  margin-top: 10px;
  cursor: pointer;
	}
}
button.pause{
	background-size:100%;
	background-image: url(../img/pause.png);
	background-color: Transparent;
}

#control-btm{
	width: 60px;
	height:60px;
	clear:both;
	position:absolute;
	Bottom: 10px;
	right: 10px;
	z-index: 1;
	
}
@media(max-width:500px) {
	#control-btm{
	width: 40px;
	height:40px;
	clear:both;
	position:absolute;
	Bottom: 10px;
	right: 10px;
	z-index: 1;
	
}
}
.name {
	font-family: 'Parisienne', cursive;
	font-size: 30pt;
	font-weight: 400;
	color: #FFF;
	
}
.top-logo {
	max-width:300px; 
	margin-top:-15px;
}

.classes-table {
	font-family: 'Montserrat', sans-serif;
	font-size: 14pt;
	font-weight: 400;
	color: #333;
	border: 1px solid #A2828F;
	max-width: 800px;	
}
.classes-table-top {
	font-family: 'Bellefair', serif;
	font-size: 24pt;
	font-weight: 400;
	color: #FFF;
	background-color: #A2828F;
	
}
.reviews-flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	justify-content: space-between;
	justify-content: space-around;
	width: 100%;
	 
	
  
}
.reviews-flex-container > * {
  flex: 1 100%;
}
.review-flex-item {
	width: auto;
	height: auto;
	min-width: 300px;
	max-width: 350px;
	margin: 10px;
	width: 100%;
	padding: 0px;
	background-color: #FFF;
	font-family: 'Montserrat', sans-serif;
	border: 1px solid #385791;
	font-weight: 300;
	border-radius: 3px;
}


#control{
	height:30px;
	margin: 0 auto;
}

.team-bg {
	padding: 0px;
	width: 100%;
	height: auto;
	border-radius: 20px;
	background-image: url(../img/flowers-grass.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	margin: 0;
	overflow:hidden;
	position:relative;
	-webkit-box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
	box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
}
.about-flex-container2 {
	padding: 20px;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	justify-content: space-between;
	justify-content: space-around;
	width: 100%;
	border-radius: 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#291c40+13,64429d+100&0.9+0,0.9+100 */
background: -moz-linear-gradient(top,  rgba(41,28,64,0.9) 0%, rgba(41,28,64,0.9) 13%, rgba(100,66,157,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6291c40', endColorstr='#e664429d',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2); 
box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
	color: #FFF;	
  
}
.about-flex-container {
	padding: 20px;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	justify-content: space-between;
	justify-content: space-around;
	width: 100%;
	border-radius: 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#291c40+13,64429d+100&0.9+0,0.9+100 */
background: -moz-linear-gradient(top,  rgba(41,28,64,0.9) 0%, rgba(41,28,64,0.9) 13%, rgba(100,66,157,0.9) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6291c40', endColorstr='#e664429d',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2); 
box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
	color: #FFF;	
  
}
.about-flex-container > * {
  flex: 1 100%;
}
.about-flex-item {
	width: auto;
	height: auto;
	min-width: 300px;
	max-width: 1100px;
	margin: 10px;
	width: 100%;
	padding: 10px;
	
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 14pt;
	line-height: 25px;
	text-align: left;
	border-radius: 20px;
}
.about-flex-card-container {
	padding: 20px;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	align-items: center;
    justify-content: center;
	width: 100%;
	border-radius: 20px;
	column-gap: 60px;
	
	color: #FFF;	
  
}

.about-flex-card-item {
	width: auto;
	height: 200px;
	min-width: 200px;
	max-width: 300px;
	margin: 10px;
	width: 100%;
	font-family: 'Parisienne', cursive;
	font-weight: 300;
	font-size: 36pt;
	line-height: 25px;
	text-align: center;
	border-radius: 10px;
	line-height: 50px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#291c40+13,64429d+100&0.9+0,0.9+100 */
background: -moz-linear-gradient(top,  rgba(41,28,64,0.9) 0%, rgba(41,28,64,0.9) 13%, rgba(100,66,157,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(41,28,64,0.9) 0%,rgba(41,28,64,0.9) 13%,rgba(100,66,157,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6291c40', endColorstr='#e664429d',GradientType=0 ); /* IE6-9 */
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border: 1px solid #FE4FFE;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
	box-shadow: 4px 11px 12px 4px rgba(0,0,0,0.2);
	color: #FFF;
}
.about-flex-card-item:hover {
	border: 1px solid #10FFFF;
	
}

.flex-container-thumbs {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0;
	list-style: none;
	row-gap: 5px;
	column-gap: 10px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 40px;
	padding-left: 0;
}

.flex-item-thumbs {
  padding: 5px;
  width: 200px;
  height: 200px;
  margin-top: 10px;
  line-height: 150px;
  text-align: center;
}
.social-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width:100%;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.explain {
	font-family: 'Montserrat', sans-serif;
	text-align:center;
	width: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8d1dfd+0,471193+0,12536d+100 */
background: rgb(141,29,253); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(141,29,253,1) 0%, rgba(71,17,147,1) 0%, rgba(18,83,109,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d1dfd', endColorstr='#12536d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	font-size: 14pt;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;	
}

.social-item {
	padding: 0px;
	width: 50px;
	height: 50px;
	text-align: center;
	margin: 10px;
	
}


 .gradient {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8256cb+0,219fcd+100 */
background: #8256cb; /* Old browsers */
background: -moz-linear-gradient(left,  #8256cb 0%, #219fcd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8256cb 0%,#219fcd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8256cb 0%,#219fcd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8256cb', endColorstr='#219fcd',GradientType=1 ); /* IE6-9 */
 
 }
 .list-eth {
	list-style-position: outside;
	list-style-image: url(../img/mini-eth2.png);
	list-style-type: none;
	margin-bottom: 20px;	 
	
 }
 
 .blue {
	color: #219fcd;	 
 }
 .purple {
	color: #8256cb;	 
 }
 .button-pink {
	border: 1px solid #8d1dfd;
	color: #FFF;
	font-size: 28pt;
	background-color: #00e8ff;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	cursor:pointer;
	max-width:320px;
	text-transform: none;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
.button-pink:hover {
	border: 1px solid #FCDAFD;
	color: #FFFFFF;
	background-color: #8d1dfd;	
}
.button-blue {
	border: 1px solid #aaa;
	color: #FFFFFF;
	font-size: 14pt;
	background-color: #8d1dfd;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	cursor:pointer;
	
	text-transform: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	max-width:320px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	font-family: 'Montserrat', sans-serif;
}
.button-blue:hover {
	border: 1px solid #aaa;
	color: #FFFFFF;
	background-color: #499abf;	
}
.segment-img {
	border-radius: 10px;
	width: 100%;
	display:inline;
	max-width: 160px;
	min-width: 120px;
	
}
.seg-container {
	background-color: #1a7b9e;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: auto;
	width: 100%;
	padding: 10px;
	display: flex;
	flex-flow: row wrap;
	margin: 10px;
	max-width: 650px;
}
.seg-container:hover {
	background-color: #1FDBF8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: auto;
	width: 100%;
	padding: 10px;
	display: flex;
	flex-flow: row wrap;
	margin: 10px;
}
.seg-item {
	margin: auto;  
	font-family: 'Montserrat', sans-serif;
}

.pink {
	color: #ffddfe;	
	
}
.pop-header {
 margin: 0 auto;
   font-size: 60px;
	color:#1fdbf8;	
	font-family: 'Parisienne', cursive;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align:center;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8d1dfd+0,471193+0,12536d+100 */
background: rgb(141,29,253); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(141,29,253,1) 0%, rgba(71,17,147,1) 0%, rgba(18,83,109,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d1dfd', endColorstr='#12536d',GradientType=0 ); /* IE6-9 */
}
.segments {
	margin: 0 auto;
	text-align:center;
	width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8d1dfd+0,471193+0,12536d+100 */
background: rgb(141,29,253); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(141,29,253,1) 0%, rgba(71,17,147,1) 0%, rgba(18,83,109,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(141,29,253,1) 0%,rgba(71,17,147,1) 0%,rgba(18,83,109,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d1dfd', endColorstr='#12536d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.tab_content {
	display: none;
	width: 96%;
	max-width: 1160px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	text-align:center;
	font-size: 14pt;
}

navChannel {
	width: 96%;
	max-width: 1160px;
	text-align:center;
	
	
	
}
navChannel ul {
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	flex-flow: column wrap;
	align-items: center;
	align-content: center;
	width: 100%;
	max-width: 520px;


}

navChannel ul li {
	list-style: none;
	text-align: center;
	color:#FFF;
	margin: 0 auto;
	padding: 10px;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	text-align:center;
	max-width: 520px;
	height: auto;
	font-size: 18pt;
}
navChannel li a:hover {
	background-color: #1FDBF8;
	color:#FFF;
}
navChannel li.active a {
	background-color: #1FDBF8;
	color:#FFF;
}
navChannel li.active a:hover {
	background-color: #1FDBF8;
	color:#FFF;
}
 
navChannel ul li:first-child {
  border-left: none;
}

navChannel ul li a {
	display: block;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	transition: 0.3s;
	font-size: 14pt;
	padding: 20px;
	background-color: #8D1DFD;
	font-weight: normal;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	
	
	width: 100%;
}

#c5bg {
	background-image: url(../img/c5-bg.jpg);
	background-repeat: no-repeat;	
}

 #about {
	background-position: center center;
	background-repeat: none;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	-o-background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	color:#FFF;
 }
@media (max-width: 754px) {
   #about {
        background-image: url(../img/c1-phone.jpg);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
   #about {
        background-image: url(../img/c1-mid.jpg);
    }
}

@media (min-width: 1025px) {
	#about {
		background-image: url(../img/c1-wide.jpg);
	}
}
 

  #pricing {
	background-position: center center;
	background-repeat: none;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	-o-background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	color:#FFF;
 }
 
 @media (max-width: 754px) {
   #pricing {
        background-image: url(../img/c3-phone.jpg);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
   #pricing {
        background-image: url(../img/c3-mid.jpg);
    }
}

@media (min-width: 1025px) {
	#pricing {
		background-image: url(../img/c3-wide.jpg);
	}
}
#worlds{
	background-position: center center;
	background-repeat: none;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	-o-background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	color:#FFF;
	
 }
 @media (max-width: 754px) {
	 #worlds {
        background-image: url(../img/c6-phone.jpg);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
	#worlds {
        background-image: url(../img/c6-mid.jpg);
    }
}

@media (min-width: 1025px) {
	#worlds {
		background-image: url(../img/c6-wide.jpg);
	}
}