/* Animated Content */
.section {
	padding: 150px 0;
	color: #fff;
}

.section .col-md-6 img {
	max-width: 200px;
	text-align: center;
	margin: auto;
}

#section1 {
	background: #358ebc;
}

#section2 {
	background: #F36A71;
}

#section3 {
	background: #efc75e;
}

#section4 {
	background: #a7e2a0;
}

#section4 .col-md-4 img{
	max-width: 150px;
	text-align: center;
	margin: auto;
}

.desktop .animate-down {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, -100px);
    -moz-transform: translate(0, -100px);
    transform: translate(0, -100px)
}
.desktop .animate-down.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 1600ms ease-out 100ms;
    -moz-transition: all 1600ms ease-out 100ms;
    transition: all 1600ms ease-out 100ms
}
.desktop .animate-up {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, 200px);
    -moz-transform: translate(0, 200px);
    transform: translate(0, 200px)
}
.desktop .animate-up.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
    -moz-transition: -moz-transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
    transition: transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
}
.desktop .animate-right {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-100px, 0);
    -moz-transform: translate(-100px, 0);
    transform: translate(-100px, 0);
}
.desktop .animate-right.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);

    -webkit-transition: -webkit-transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
    -moz-transition: -moz-transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
    transition: transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
}
.desktop .animate-left {
    opacity: 0;
    visibility: hidden;
    transform: translate(100px, 0)
}
.desktop .animate-left.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
    -moz-transition: -moz-transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
    transition: transform 2400ms ease-out 100ms, opacity 2400ms ease-out 100ms;
}

.desktop .animate-slogan {
    opacity: 0;
    visibility: hidden;
    transform: translate(100px, 0);
    
    -moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
    
    transition-duration: 0s;
}
.desktop .animate-slogan.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
    -moz-transition: -moz-transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
    transition: transform 1400ms ease-out 100ms, opacity 1400ms ease-out 100ms;
    
    -moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
    
    transition-duration: 1.0s;
    z-index: 999;
}





@media (max-width: 767px){
	h1 {
		font-size: 1.5rem;;
	}
  .back-navi {
  	display: block;
  	position: static;
  	top: 0;
  	margin-left: 15px;
  }
  
  .arlogo {
  	display: none;
  }
}