body {background:url("../img/bg.jpg") no-repeat; width:100%; background-size:100%;  height: auto; position:relative; font-family:toia; overflow:hidden;
    background-color: #000002;
}

 *:focus {
    outline: none;
}

@font-face {
  font-family: toia;
  src: url("../fonts/OpenSans-Regular.ttf");
}

.full-view { 
    background: #05289c;
    color: #f7f7f7;
    border: 2px solid #ccc;
    padding: 10px;
    font-size: 18px;
    border-radius: 20px;
    margin: 10px;
    position: absolute;
    cursor: pointer;
}

#container { display:block; }

/*@media only screen and (orientation:portrait){

  body {

  background-image: url("../img/bg-1.jpg"); 
            background-repeat: no-repeat; 
            height: 100%;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);
    margin-top: 86vw;
    margin-left: 20vw;
	
  }

}

@media only screen and (orientation:landscape){

  body {
     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(0deg);

     transform: rotate(0deg);

  }

}*/


.dot-circle {
    position: absolute;
    z-index: 999;
    left: 45.3%;
    right: 0;
    top: 0;
    margin-top: 19.3%;
    display: block;
    width: 11vw;
    -webkit-animation: dot-circle 25s infinite;
    animation: dot-circle 25s infinite;
}
	
	
	
	
	
/* Chrome, Safari, Opera */
@-webkit-keyframes dot-circle {
     0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}

/* Standard syntax */
@keyframes dot-circle {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
	
}


.dot-circle-1 {
    position: absolute;
    z-index: 999;
    left: 45.3%;
    right: 0;
    top: 0;
    margin-top: 19.3%;
    display: block;
    width: 11vw;
    
}

.dot-circle-small {
   position: absolute;
    z-index: 999;
    left: 45.8%;
    right: 0;
    top: 0;
    margin-top: 19.8%;
    display: block;
    width: 10vw;
    -webkit-animation: dot-circle-small 25s infinite;
    animation: dot-circle-small 25s infinite;
}
	
	
	
	
	
/* Chrome, Safari, Opera */
@-webkit-keyframes dot-circle-small {
     0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}

/* Standard syntax */
@keyframes dot-circle-small {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
	
}



.dashed-circle {
   position: absolute;
    z-index: 9;
    left: 41.8%;
    right: 0;
    top: 0;
    margin-top: 16%;
    width: 18vw;
    display: block;
    -webkit-animation: dashed-circle 25s infinite;
    animation: dashed-circle 25s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dashed-circle {
   0%   {transform: rotate(360deg); }
    100% {transform: rotate(0deg); }
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}

/* Standard syntax */
@keyframes dashed-circle {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}


.dashed-circle-1{
    position: absolute;
    z-index: 9;
    left: 41.8%;
    right: 0;
    top: 0;
    margin-top: 16%;
    width: 18vw;
    display: block;
   -webkit-animation: dashed-circle-1 25s infinite;
    animation: dashed-circle-1 25s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dashed-circle-1 {
   0%   {transform: rotate(360deg); }
    100% {transform: rotate(0deg); }
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}

/* Standard syntax */
@keyframes dashed-circle-1 {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}


.dashed-circle-2{
    position: absolute;
    z-index: 9;
    left: 41.8%;
    right: 0;
    top: 0;
    margin-top: 16%;
    width: 18vw;
    display: block;
   
}


.line-circle {
   position: absolute;
    left: 35%;
    right: 0;
    top: 0;
    margin-top: 10%;
    display: block;
    width: 32vw;
   -webkit-animation: line-circle 25s infinite;
    animation: line-circle 25s infinite;
	z-index: 9;
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-circle {
   0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}

/* Standard syntax */
@keyframes line-circle {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
	/*0%   {transform: rotateX(360deg)}
    100% {transform: rotateX(180deg)}*/
}


.line-circle-1 {
    position: absolute;
    left: 35%;
    right: 0;
    top: 0;
    margin-top: 10%;
    display: block;
    width: 32vw;
    -webkit-animation: line-circle-1 3s infinite;
    animation: line-circle-1 3s infinite;
    z-index: 9;
    opacity: 1.0;
	
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-circle-1 {
   0%   {opacity: 0.1}
   0%   {opacity: 1.0}
	
}

 /*Standard syntax */
@keyframes line-circle-1 {
    0%   {opacity: 0.1}
   0%   {opacity: 1.0}
}


.line-circle-stop {
   position: absolute;
    left: 35%;
    right: 0;
    top: 0;
    margin-top: 10%;
    display: block;
    width: 32vw;
  	z-index: 9;
    
}



	.logo  {
    position: absolute;
    left: 47%;
    top: 0;
    margin-top: 23.8%;
    width: 7.5vw;
	z-index: 9999999;
}




.layer-two-1 {
	position: absolute;
    left: 42.5%;
    top: 0;
    color: #ccc;
	font-weight: bold;
	width:15vw;
    font-size: 1.7vw;
    text-align: center;
    margin-top: 8%;
    -webkit-animation: layer-two-1 1s 1;
    animation: layer-two-1 1s 1;
    z-index: 999;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-two-1 {
  	0%   {opacity:.0;  margin-top: 16%;}
    100% {opacity:1.0; margin-top: 8%;}
}

/* Standard syntax */
@keyframes layer-two-1 {
  	0%   {opacity:.0; margin-top: 16%;}
    100% {opacity:1.0; margin-top: 8%;}
}







.layer-two-2 {
	position: absolute;
    left: 66%;
	width:20vw;
	text-align:left;
	top: 0;
    color: #ccc;
	font-weight: bold;
    font-size: 1.7vw;
    margin-top: 35%;
	padding:10px;
	-webkit-animation: layer-two-2 1s 1;
    animation: layer-two-2 1s 1;
   
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-two-2 {
  	0%   {opacity:.0; left:59%;}
    100% {opacity:1.0; left:66%;}
}

/* Standard syntax */
@keyframes layer-two-2 {
  	0%   {opacity:.0; left:59%;}
    100% {opacity:1.0; left:66%;}
}

.layer-two-3 {
	position: absolute;
    left: 14.5%;
	width:20vw;
	text-align:right;
    top: 0;
    margin-top: 35%;
    color: #ccc;
	font-weight: bold;
    font-size: 1.7vw;
    text-align: right;
	-webkit-animation: layer-two-3 1s 1;
    animation: layer-two-3 1s 1;
   
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-two-3 {
  	0%   {opacity:.0; left:30%;}
    100% {opacity:1.0; left:14.5%;}
}

/* Standard syntax */
@keyframes layer-two-3 {
  	0%   {opacity:.0; left:30%;}
    100% {opacity:1.0; left:14.5%;}
}

.layer-two-4 {
	position: absolute;
    left: 69%;
    top: 0;
    color: #fff;
    font-size: 1.3vw;
	width:10%;
	min-width:50px;
    margin-top: 31%;
    background:#ffffff26;
	padding:10px;
	border-radius:10px;
	border:1px solid #ccc;
	-webkit-animation: layer-two-4 1s 1;
    animation: layer-two-4 1s 1;
   transform: rotate(13deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-two-4 {
  	0%   {opacity:.0; left:57%; transform: rotate(0deg);}
    100% {opacity:1.0; left:69%; transform: rotate(13deg);}
}

/* Standard syntax */
@keyframes layer-two-4 {
  	0%   {opacity:.0; left:57%;}
    100% {opacity:1.0; left:69%;}
}

.layer-three-1 a, .layer-three-1-1 a{ color: #fff; text-decoration: none;}
.layer-three-1 a:hover, .layer-three-1-1 a:hover{color:#ccc}
.layer-three-2 a, .layer-three-2-2 a{color: #fff; text-decoration: none; }
.layer-three-2 a:hover, .layer-three-2-2 a:hover{color:#ccc}	
.layer-three-3 a, .layer-three-3-3 a{color: #fff; text-decoration: none; }
.layer-three-3 a:hover, .layer-three-3-3 a:hover{color:#ccc}
.layer-three-4 a, .layer-three-4-4 a{color: #fff; text-decoration: none; }
.layer-three-4 a:hover, .layer-three-4-4 a:hover{color:#ccc}

.layer-three-1 {
	position: absolute;
    left: 12.5%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 6.5%;
	-webkit-animation: layer-three-1 1s 1;
    animation: layer-three-1 1s 1;
	z-index: 999;
	

}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-three-1 {
  	0%   {opacity:.0; left:20%; }
    100% {opacity:1.0; left:12.5%;}
}

/* Standard syntax */
@keyframes layer-three-1 {
    0%   {opacity:.0; left:20%}
    100% {opacity:1.0; left:12.5%}
}


.layer-three-1-1 {
	position: absolute;
    left: 12.5%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 6.5%;
	z-index: 999;
	

}


.layer-three-2 {
	position: absolute;
    left: 79.3%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 7%;
    -webkit-animation: layer-three-2 1s 1;
    animation: layer-three-2 1s 1;
    z-index: 999;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-three-2 {
  	0%   {opacity:.0; left:70%}
    100% {opacity:1.0; left:79.3%}
}

/* Standard syntax */
@keyframes layer-three-2 {
    0%   {opacity:.0; left:70%}
    100% {opacity:1.0; left:79.3%}
}

.layer-three-2-2 {
	position: absolute;
    left: 79.3%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 7%;
    z-index: 999;
}


.layer-three-3 {
	position: absolute;
    left: 13%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 40.5%;
   -webkit-animation: layer-three-3 1s 1;
    animation: layer-three-3 1s 1;
	z-index: 999;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-three-3 {
  	0%   {opacity:.0; left:27%}
    100% {opacity:1.0; left:13%}
}

/* Standard syntax */
@keyframes layer-three-3 {
    0%   {opacity:.0; left:27%}
    100% {opacity:1.0; left:13%}
}

.layer-three-3-3 {
	position: absolute;
    left: 13%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 40.5%;
  	z-index: 999;
}


.layer-three-4 {
	position: absolute;
    left: 79.5%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 40.5%;
   -webkit-animation: layer-three-4 1s 1;
    animation: layer-three-4 1s 1;
	z-index: 999;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes layer-three-4 {
  	0%   {opacity:.0; left:71%}
    100% {opacity:1.0; left:79.5%}
}

/* Standard syntax */
@keyframes layer-three-4 {
    0%   {opacity:.0; left:71%}
    100% {opacity:1.0; left:79.5%;}
}

.layer-three-4-4 {
	position: absolute;
    left: 79.5%;
    top: 0;
    color: #fff;
    font-size: 2.3vw;
    text-align: right;
    margin-top: 40.5%;
   	z-index: 999;
}


.line-1 {
    background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 8.5%;
    left: 19%;
    position: absolute;
    -webkit-animation: line-1 .3s linear 1;
    animation: line-1 .3s linear 1;
   
    opacity: .2;
  content: '';
  transform-origin: 0 100%;
  transform: rotate(0deg);
  animation-fill-mode: forwards;
	
	
	
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-1 {
    0% { width: 0px; }
  100% { width: 10vw; }
}

/* Standard syntax */
@keyframes line-1 {
    0% { width: 0px; }
  100% { width: 10vw; }
}


.line-1-r {
    background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 8.5%;
    left: 19%;
    position: absolute;
    -webkit-animation: line-1-r .3s linear 1;
    animation: line-1-r .3s linear 1;
   
    opacity: .2;
  content: '';
  transform-origin: 0 100%;
  transform: rotate(0deg);
  animation-fill-mode: forwards;
	
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-1-r {
    0% { width: 10vw; }
  100% { width: 0; }
}

/* Standard syntax */
@keyframes line-1-r {
    0% { width: 10vw; }
  100% { width: 0; }
}




.line-1-1 {
    background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 8.5%;
    left: 19%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .2;
}

.line-1-2 {
    background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 8.5%;
    left: 29%;
    position: absolute;
    -webkit-animation: line-1-2 .3s linear 1;
    animation: line-1-2 .3s linear 1;
      transform: rotate(46deg);
    opacity: .2;
   content: '';
  transform-origin: 0 100%;
  animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-1-2 {
    0%   {width:0; }
    100% {width:14vw }
}

/* Standard syntax */
@keyframes line-1-2 {
    0%   {width:0; }
    100% {width:14vw }
}


.line-1-3 {
    background: #fff;
    width: 14vw;
    height: 1px;
    top: 0;
    margin-top: 13.5%;
    left: 26.9%;
    position: absolute;
    transform: rotate(46deg);
    opacity: .2;
}


.line-1-2-r {
    background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 8.5%;
    left: 29%;
    position: absolute;
    -webkit-animation: line-1-2-r .3s linear 1;
    animation: line-1-2-r .3s linear 1;
      transform: rotate(46deg);
    opacity: .2;
   content: '';
  transform-origin: 0 100%;
  animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-1-2-r {
    0%   {width:14vw; }
    100% {width:0 }
}

/* Standard syntax */
@keyframes line-1-2-r {
    0%   {width:14vw; }
    100% {width:0 }
}





.line-2 {
  background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 8.8%;
    right: 20.9%;
    position: absolute;
    -webkit-animation: line-2 .3s linear 1;
    animation: line-2 .3s linear 1;
    opacity: .2;
    transform: rotate(0deg);
}


/* Chrome, Safari, Opera */
@-webkit-keyframes line-2 {
    0% { width: 0px;}
  100% { width: 10vw; }
}

/* Standard syntax */
@keyframes line-2 {
    0% { width: 0px; }
  100% { width: 10vw; }
}

.line-2-r {
  background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 8.8%;
    right: 20.9%;
    position: absolute;
    -webkit-animation: line-2-r .3s linear 1;
    animation: line-2-r .3s linear 1;
    opacity: .2;
    transform: rotate(0deg);
}


/* Chrome, Safari, Opera */
@-webkit-keyframes line-2-r {
    0% { width: 10vw;}
  100% { width: 0; }
}

/* Standard syntax */
@keyframes line-2-r {
    0% { width: 10vw;}
  100% { width: 0; }
}


.line-2-1 {
   background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 8.8%;
    right: 20.9%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .2;
}

.line-2-2 {
  background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 8.8%;
    right: 30.9%;
    position: absolute;
    opacity: .2;
    transform: rotate(-45deg);
    -webkit-animation: line-2-2 .3s linear 1;
    animation: line-2-2 .3s linear 1;
    transform-origin: 100% 0;
    animation-fill-mode: forwards;
    content: '';
}

 
/* Chrome, Safari, Opera */
@-webkit-keyframes line-2-2 {
    0%   {width:0px; }
    100% {width:14vw;}
}

/* Standard syntax */
@keyframes line-2-2 {
    0%   {width:0px;}
    100% {width:14vw;}
}


.line-2-2-r {
  background: #fff;
    width: 14vw;
    height: 1px;
    top: 0;
    margin-top: 8.8%;
    right: 30.9%;
    position: absolute;
    opacity: .2;
    transform: rotate(-45deg);
    -webkit-animation: line-2-2-r .3s linear 1;
    animation: line-2-2-r .3s linear 1;
    transform-origin: 100% 0;
    animation-fill-mode: forwards;
    content: '';
}

 
/* Chrome, Safari, Opera */
@-webkit-keyframes line-2-2-r {
    0%   {width:14vw; }
    100% {width:0;}
}

/* Standard syntax */
@keyframes line-2-2-r {
    0%   {width:14vw;}
    100% {width:0;}
}


.line-2-3 {
   background: #fff;
    width: 1px;
    height: 14vw;
    top: 0;
    margin-top: 6.8%;
    right: 35.7%;
    position: absolute;
    transform: rotate(45deg);
    opacity: .2;
}


.line-3 {
    background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 42.2%;
    left: 17.5%;
    position: absolute;
    -webkit-animation: line-3 .3s linear 1;
    animation: line-3 .3s linear 1;
    transform: rotate(-8deg);
    opacity: .2;
	content: '';
  transform-origin: 0 100%;
  transform: rotate(0deg);
  animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-3 {
    0%   {width:0vw;}
    100% {width:11vw;}
}

/* Standard syntax */
@keyframes line-3 {
    0%   {width:0vw;}
    100% {width:11vw;}
}


.line-3-r {
    background: #fff;
    width:11vw;
    height: 1px;
    top: 0;
    margin-top: 42.2%;
    left: 17.5%;
    position: absolute;
    -webkit-animation: line-3 .3s linear 1;
    animation: line-3-r .3s linear 1;
    transform: rotate(-8deg);
    opacity: .2;
	content: '';
  transform-origin: 0 100%;
  transform: rotate(0deg);
  animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-3-r {
    0%   {width:11vw;}
    100% {width:0vw;}
}

/* Standard syntax */
@keyframes line-3-r {
    0%   {width:11vw;}
    100% {width:0vw;}
}


.line-3-1 {
    background: #fff;
    width: 11vw;
    height: 1px;
    top: 0;
    margin-top: 42.2%;
    left: 17.5%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .2;
}

.line-3-2 {
   background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 42.2%;
    left: 28.5%;
    position: absolute;
    -webkit-animation: line-3-2 .3s linear 1;
    animation: line-3-2 .3s linear 1;
    opacity: .2;
    content: '';
    transform-origin: 0 100%;
    transform: rotate(-38deg);
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-3-2 {
    0%   {width:0;}
    100% {width:14vw;}
}

/* Standard syntax */
@keyframes line-3-2 {
    0%   {width:0;}
    100% {width:14vw;}
}

.line-3-2-r {
   background: #fff;
    width: 14vw;
    height: 1px;
    top: 0;
    margin-top: 42.2%;
    left: 28.5%;
    position: absolute;
    -webkit-animation: line-3-2-r .3s linear 1;
    animation: line-3-2-r .3s linear 1;
    opacity: .2;
    content: '';
    transform-origin: 0 100%;
    transform: rotate(-38deg);
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-3-2-r {
    0%   {width:14vw;}
    100% {width:0;}
}

/* Standard syntax */
@keyframes line-3-2-r {
    0%   {width:14vw;}
    100% {width:0;}
}


.line-3-3 {
    background: #fff;
    width: 14vw;
    height: 1px;
    top: 0;
    margin-top: 37.9%;
    left: 27%;
    position: absolute;
    transform: rotate(-38deg);
    opacity: .2;
}


.line-4 {
    background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 42.1%;
    right: 20.9%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .5;
   -webkit-animation: line-4 .3s linear 1;
    animation: line-4 .3s linear 1;
    opacity: .2;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-4 {
    0%   {width:0vw;}
    100% {width:10vw;}
}

/* Standard syntax */
@keyframes line-4 {
    0%   {width:0vw;}
    100% {width:10vw;}
}


.line-4-r {
    background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 42.1%;
    right: 20.9%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .5;
   -webkit-animation: line-4-r .3s linear 1;
    animation: line-4-r .3s linear 1;
    opacity: .2;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes line-4-r {
    0%   {width:10vw;}
    100% {width:0vw;}
}

/* Standard syntax */
@keyframes line-4-r {
    0%   {width:10vw;}
    100% {width:0vw;}
}

.line-4-1 {
   background: #fff;
    width: 10vw;
    height: 1px;
    top: 0;
    margin-top: 42.1%;
    right: 20.9%;
    position: absolute;
    transform: rotate(0deg);
    opacity: .2;
}

.line-4-2 {
    background: #fff;
    width: 0;
    height: 1px;
    top: 0;
    margin-top: 42.1%;
    right: 30.9%;
    position: absolute;
    transform: rotate(44deg);
    opacity: .2;
    -webkit-animation: line-4-2 .3s linear 1;
    animation: line-4-2 .3s linear 1;
    transform-origin: 100% 0;
    animation-fill-mode: forwards;
    content: '';

}


/* Chrome, Safari, Opera */
@-webkit-keyframes line-4-2 {
    0%   {width:0; }
    100% {width:12vw;}
}

/* Standard syntax */
@keyframes line-4-2 {
     0%   {width:0; }
    100% {width:12vw;}
}


.line-4-2-r {
    background: #fff;
    width: 12vw;
    height: 1px;
    top: 0;
    margin-top: 42.1%;
    right: 30.9%;
    position: absolute;
    transform: rotate(44deg);
    opacity: .2;
    -webkit-animation: line-4-2-r .5s linear 1;
    animation: line-4-2-r .5s linear 1;
    transform-origin: 100% 0;
    animation-fill-mode: forwards;
    content: '';

}


/* Chrome, Safari, Opera */
@-webkit-keyframes line-4-2-r {
    0%   {width:12vw; }
    100% {width:0;}
}

/* Standard syntax */
@keyframes line-4-2-r {
     0%   {width:12vw; }
    100% {width:0;}
}


.line-4-3 {
   background: #fff;
    width: 12vw;
    height: 1px;
    top: 0;
    margin-top: 38%;
    right: 29.2%;
    position: absolute;
    transform: rotate(44deg);
    opacity: .2;
}




.line-dot {background-color: #fff;
    width: 0.7vw;
    height: .7vw;
    border-radius: 50%;
    position: absolute;
    background-image: radial-gradient(#fff 20%, #a3b1f5);
}

.line-dot-p-1 {
    position: absolute;
    margin-top: 8.2%;
    top: 0px;
    left: 19%;
}

.line-dot-p-1-1 {
    position: absolute;
    margin-top: 18.2%;
    top: 0px;
    left: 38.5%;
}


.line-dot-p-2 {
    position: absolute;
    margin-top: 8.5%;
    top: 0px;
    left: 78.5%;
}

.line-dot-p-2-1 {
    background-color: #fff;
    position: absolute;
    margin-top: 18.5%;
    top: 0px;
    left: 58.9%;
}


.line-dot-p-3 {
   position: absolute;
    margin-top: 41.9%;
    top: 0px;
    left: 19.5%;
}

.line-dot-p-3-1 {
    position: absolute;
    margin-top: 33%;
    top: 0px;
    left: 39.4%;
}

.line-dot-p-4 {
  
	position: absolute;
    margin-top: 41.8%;
    top: 0px;
    left: 78.7%;
}

.line-dot-p-4-1 {
    position: absolute;
    margin-top: 33.5%;
    top: 0px;
    left: 60.1%;
}


.opacity-1{opacity:0.1;}
.opacity-2{opacity:0.1;}


.overlay { position:absolute; width:100vw; height:100vw; display:block; z-index:0;}



/*footer class   */
footer {
background: #e7eaf2;
    bottom: 0px;
    position: fixed;
    width: 100Vw;

}

/* footer class  */


/* flip  */
.flip-box {
  background-color: transparent;
  width: 18vw;
  height: 18vw;
  border: 1px solid #ccc;
  margin:20px auto;
 
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}

.flip-box-front img{
	width:18vw;
	height:18vw;
	border: 1px solid #ccc;
}

/*  flip */


@media only screen and (min-width: 1200px){
	.container {
		max-width: 90% !important;
	}
}


@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 600px) {
 
.full-view {display:none;}
}

@media all and (orientation: portrait) {
  body{
    background-image: url(../img/bg-2.jpg);
    background-repeat: no-repeat;
    height: 100%;
    margin-top: 49vw;
    margin-left: 0vw;
  }
   .layer-three-1, .layer-three-1-2, .layer-three-2, .layer-three-2-1, .layer-three-3, .layer-three-3-1, .layer-three-4, .layer-three-4-1 {font-size:3.5vw}
}