.row.main{
	font-size:16px;
	display:flex;
	flex-direction:row;
	margin: 0 auto;
	margin-top:70px;
	flex-wrap: unset;
	max-width: 100%;
}

.row.main .pic{
	flex: 1 1 0px
}

.row.main .pic img{
	max-width: 100%;
}

.row.main .message{
	margin-bottom: 56px;
	flex: 1 1 0px;
	padding-right: 20px;
}

.row.main .message .header{
	font-size:30px;
	margin-bottom: 6px;
}

.row.main .message .sub-header{
	font-size:20px;
	margin-bottom:25px;
}
.row.main .message ul.list li{
	font-size:16px;
	padding-left:30px;
	line-height:22px;
}

.row.main .message ul.list li:before{
	font-size: 25px;
	line-height: 15px
}

.row a.main-button{
	font-size:16px;
	min-height: 54px;
	border-radius: 36px !important;
	margin-top:44px;
	line-height: 30px;
	padding:10px 20px;
}
.row a.main-button.tablet{
	display:none;
}

.row.center{
	text-align: center;
	flex-direction: row;
	justify-content: center;
	max-width: 100%;
	margin: 0 auto;
}

.row.center .description{
	font-size:16px;
}

.row.center h2{
	margin-top:90px;
}

/*circle animations*/
.row.universe{
	max-width: 620px;
	max-height: 620px;
	overflow: visible;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	position: relative;
	min-height:620px;
	min-width: 620px;
	margin-top:90px;
	margin-bottom:65px;
}

#universe {
	z-index: 1;
	position: absolute;
	overflow: visible;
	width: 100%;
	height: 100%;
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size: cover;
}
  
#galaxy {
	position: relative;
	width: 100%;
	height: 100%;
}

#sun{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110px;
	height: 110px;
	margin-top: -55px;
	margin-left: -55px;
	transform-style: preserve-3d;
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 24em;
	z-index: 1;
	background-image: url('images/puzzle.jpg'); 
}

.orbit{	
	position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #BEC3CB;
    border-radius: 50%;
	width: 99%;
    height: 99%;
	margin-top: -50%;
	margin-left: -50%;
	
	animation-name: orbit;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
	animation-duration: 55s;
}

.orbit-for-planet-2{
	transform: rotateZ(72deg);
	animation-name: orbit-2;
	border: 0px;
}
.orbit-for-planet-3{
	transform: rotateZ(144deg);
	animation-name: orbit-3;
	border: 0px;
}
.orbit-for-planet-4{
	transform: rotateZ(216deg);
	animation-name: orbit-4;
	border: 0px;
}
.orbit-for-planet-5{
	transform: rotateZ(288deg);
	animation-name: orbit-5;
	border: 0px;
}

.planet{
	left: 0%;
	top: 50%;
	position: absolute;
	width: 28px;
	height: 28px;
	background: #ccc;
	border-radius: 50%;
	margin-left: -14px;
	margin-top: -14px;
	z-index: 10;
}

.planet .core{
	left: 0%;
	top: 50%;
	position: absolute;
	width: 16px;
	height: 16px;
	background: #000;
	border-radius: 50%;
	margin-left: 6px;
	margin-top: -8px;
}

.planet-1{ background:rgb(242, 201, 76, 0.3); }
.planet-1 .core{ background:rgba(242, 201, 76, 1); }

.planet-2{ background:rgba(111, 207, 151, 0.3); }
.planet-2 .core{ background:rgba(111, 207, 151, 1); }

.planet-3{ background:rgb(86, 204, 242, 0.3); }
.planet-3 .core{ background:rgba(86, 204, 242, 1); }

.planet-4{ background:rgb(187, 107, 217, 0.3); }
.planet-4 .core{ background:rgba(187, 107, 217, 1); }

.planet-5{ background:rgb(235, 87, 87, 0.3); }
.planet-5 .core{ background:rgba(235, 87, 87, 1); }

.inner-orbit{
	width: 60%;
	height: 60%;
	margin-top: -31%;
	margin-left: -31%;
	overflow:visible;
}

#universe.tooltips{
	margin-top:35px;
}

#universe.tooltips .orbit{
	border:0px;
}


#universe.tooltips .orbit .message
{
	background: none;
	font-size: 20px;
	width: 200px;
	margin-left: -100px;
	text-transform:uppercase;
	
	animation-name: reverse-orbit;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
	animation-duration: 55s;
}

#universe.tooltips .orbit-for-planet-2 .message{
	transform: rotateZ(-72deg);
	animation-name: reverse-orbit-2;
}
#universe.tooltips .orbit-for-planet-3 .message{
	transform: rotateZ(-144deg);
	animation-name: reverse-orbit-3;
}
#universe.tooltips .orbit-for-planet-4 .message{
	transform: rotateZ(-216deg);
	animation-name: reverse-orbit-4;
}
#universe.tooltips .orbit-for-planet-5 .message{
	transform: rotateZ(-288deg);
	animation-name: reverse-orbit-5;
}


/* Animations */
@keyframes orbit {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); } 
}
@keyframes orbit-2 {
  0%   { transform: rotateZ(72deg); }
  100% { transform: rotateZ(432deg); } 
}
@keyframes orbit-3 {
  0%   { transform: rotateZ(144deg); }
  100% { transform: rotateZ(504deg); } 
}
@keyframes orbit-4 {
  0%   { transform: rotateZ(216deg); }
  100% { transform: rotateZ(576deg); } 
}
@keyframes orbit-5 {
  0%   { transform: rotateZ(288deg); }
  100% { transform: rotateZ(648deg); } 
}

@keyframes reverse-orbit {
  0%   { transform: rotateZ(-deg); }
  100% { transform: rotateZ(-360deg); } 
}
@keyframes reverse-orbit-2 {
  0%   { transform: rotateZ(-72deg); }
  100% { transform: rotateZ(-432deg); } 
}
@keyframes reverse-orbit-3 {
  0%   { transform: rotateZ(-144deg); }
  100% { transform: rotateZ(-504deg); } 
}
@keyframes reverse-orbit-4 {
  0%   { transform: rotateZ(-216deg); }
  100% { transform: rotateZ(-576deg); } 
}
@keyframes reverse-orbit-5 {
  0%   { transform: rotateZ(-288deg); }
  100% { transform: rotateZ(-648deg); } 
}


/* media */

@media(max-width:320px){
	
}

@media(max-width:766px){
	.row.main .pic img{
		border-left:none;
	}
	.row a.main-button.desktop{
		display:none;
	}
	.row a.main-button.tablet{
		display:inline-block;
	}
	
	.row.universe{
		overflow:hidden;
	}
	
	.row.universe #universe #galaxy{
		margin-left: 45%;
	}
	
	#universe.tooltips{
		margin-left: -130px;
		margin-top: -10px;
	}
	
	.orbit,
	.orbit-for-planet-2,
	.orbit-for-planet-3,
	.orbit-for-planet-4,
	.orbit-for-planet-5,
	#universe.tooltips .orbit .message,
	#universe.tooltips .orbit-for-planet-2 .message,
	#universe.tooltips .orbit-for-planet-3 .message,
	#universe.tooltips .orbit-for-planet-4 .message,
	#universe.tooltips .orbit-for-planet-5 .message{
		animation-name: none;
	}
	
	.orbit-for-planet-2{
		transform: rotateZ(35deg);
	}
	.orbit-for-planet-3{
		transform: rotateZ(70deg);
	}
	.orbit-for-planet-4{
		transform: rotateZ(-35deg);
	}
	.orbit-for-planet-5{
		transform: rotateZ(-70deg);
	}


	#universe.tooltips .orbit-for-planet-2 .message{
		transform: rotateZ(-35deg);
	}
	#universe.tooltips .orbit-for-planet-3 .message{
		transform: rotateZ(-70deg);
	}
	#universe.tooltips .orbit-for-planet-4 .message{
		transform: rotateZ(35deg);
	}
	#universe.tooltips .orbit-for-planet-5 .message{
		transform: rotateZ(70deg);
	}
}

@media(max-width:620px){
	
	.row.main{
		flex-direction:column-reverse;
	}
	
	.row.universe{
		left:initial;
		position: initial;
		min-height: initial;
		min-width: initial;
		margin-top: initial;
		margin-bottom: initial;
		max-width: initial;
		max-height: initial;
	}
	
	.row.universe #universe{
		position: initial;
		width: initial;
		height: initial;
	}
		
	.row.universe #universe #galaxy{
		margin:0;
	}
	
	.row.universe #universe #sun{
		display:none;
	}
	
	.orbit{
		position: initial;
		width: initial;
		height: initial;
		margin:0;
		border: 0;
		transform: none;
	}
	
	.planet:not(.message){
		display:none
	}
	
	.row.universe #universe.tooltips{
		margin:0;
		margin-top: 40px;
	}
	
	#universe.tooltips .orbit{
		top:initial;
		left:initial;
		transform: none;
		position: relative;
		margin-bottom: 32px;
	}
	
	#universe.tooltips .orbit .planet{
		height:initial;
	}
	
	.universe #universe.tooltips .orbit .message{
		width: 100%;
		text-align: left;
		margin:0;
		transform: none;
		position: relative;
		padding-left: 40px;
	}
	
	.universe #universe.tooltips .orbit .message:before{
		display:block;
		width:28px;
		height:28px;
		content: "";
		position: absolute;
		background: #ccc;
		border-radius: 50%;
		top: 50%;
		margin-top: -14px;
		left: 0;
	}
	.universe #universe.tooltips .orbit .message:after{
		display:block;
		width:16px;
		height:16px;
		content: "";
		position: absolute;
		background: #000;
		border-radius: 50%;
		top: 50%;
		margin-top: -8px;
		left: 6px;
	}
	
	.universe #universe.tooltips .orbit .message.planet-1:before{ background:rgb(242, 201, 76, 0.3); }
	.universe #universe.tooltips .orbit .message.planet-1:after{ background:rgba(242, 201, 76, 1); }
	
	.universe #universe.tooltips .orbit .message.planet-2:before{ background:rgba(111, 207, 151, 0.3); }
	.universe #universe.tooltips .orbit .message.planet-2:after{ background:rgba(111, 207, 151, 1); }
	
	.universe #universe.tooltips .orbit .message.planet-3:before{ background:rgb(86, 204, 242, 0.3); }
	.universe #universe.tooltips .orbit .message.planet-3:after{ background:rgba(86, 204, 242, 1); }
	
	.universe #universe.tooltips .orbit .message.planet-4:before{ background:rgb(187, 107, 217, 0.3); }
	.universe #universe.tooltips .orbit .message.planet-4:after{ background:rgba(187, 107, 217, 1); }
	
	.universe #universe.tooltips .orbit .message.planet-5:before{ background:rgb(235, 87, 87, 0.3); }
	.universe #universe.tooltips .orbit .message.planet-5:after{ background:rgba(235, 87, 87, 1); }
	
	.planet{
		position: relative;
		line-height: 28px;
		margin:0;
		margin-top: 28px;
	}
	
	.planet .core{
		position: initial;
		margin:0;
		margin-left: 6px;
		margin-top: -8px;
		top: 50%;
		position: absolute;
	}
}