/* ---------------------------
	LOADING SCREEN
-----------------------------*/
#loading {
	background-color: #f1f1f1; /*#bd4932;*/
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 2;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}
 #logo_animated {
	margin-top: 5%;
	margin-bottom: 3%;
	}
#logo_animated img {
	margin-right: auto;
	margin-left: auto;	
}
.middleLine {	
	height: 70px;
	margin-bottom: 20px;
}
.animation {
   position: absolute;
   margin-top: 20px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
#animate_one {
   	top: 55%;
    left: 45%;
    width: 74px;
    height: 74px;
    margin:-44px 0 0 -44px;
	-webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
#animate_two {
	top: 65%;
    left: 50%;
   width: 74px;
    height: 75px;
    margin:-55px 0 0 -55px;
	-webkit-animation:spin-back 4s linear infinite;
    -moz-animation:spin-back 4s linear infinite;
	-webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
#animate_three {
	top: 60%;
    left: 55%;
    width: 102px;
    height: 102px;
    margin:-60px 0 0 -60px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin-back { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin-back { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin-back { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}
/* ---------------------------
	HEADER
-----------------------------*/
body header {
	background-color: #ff6666; /*#3399cc #44B787  before　#669933 */
	padding-bottom: 10%;
}
.topNav {
	padding-top: 40px;
	position: relative;
	margin-top: 10%;
}
.logo {
	margin-bottom: 3%;
}
.logo img {
	margin-right: auto;
	margin-left: auto;	
}
#about {
	position: absolute;
	display: block;
	background: url(../../img/about_1.png) no-repeat center #ff6666;
	background-size: 80%;
	top: -30px;  
	right: 50%; 
	width: 114px;
	height: 114px;
	transition: all 300ms ease-in-out;
}
#about:hover {
	background: url(../../img/about_2.png) no-repeat center #ff6666;
	background-size: 80%;
	background-color: #ff6666;
	background-position: 50% 55%;	
}
#contact {
	width: 114px; 
	height: 114px; 
	position: absolute;
	display: block;
	background: url(../../img/envelope.png) no-repeat center #ff6666;
	background-size: 80%; 
	top: -20px; 
	left: 40%;
	transition: all 300ms ease-in-out;
}
#contact:hover {
	background: url(../../img/envelope_open.png) no-repeat center #ff6666;
	background-size: 80%;
	background-color: #ff6666;
	background-position: 50% 55%;	
}
.mainWrapper {
	/* background-color: #AB8687;*/
}
#sideNav {
	position: fixed;
	z-index: 1;
	right: 30px;
	top: 30%;	
}
#sideNav ul {
	position:relative;	
}
#sideNav a {
	width: 120px;
	height: 38px;
	margin: 0;
	padding: 0;
	display: block;
	background: url(../../img/sidenav_button.png) no-repeat right;
	background-size: 10%;
	transition: all 300ms ease-in-out;
	z-index: 1;	
}
#sideNav #link1 a:hover {
	background: url(../../img/sidenav_home.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link2 a:hover {
	background: url(../../img/sidenav_web.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link3 a:hover {
	background: url(../../img/sidenav_system.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link4 a:hover {
	background: url(../../img/sidenav_consul.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link5 a:hover {
	background: url(../../img/sidenav_process.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link6 a:hover {
	background: url(../../img/sidenav_promo.png) no-repeat right;
	background-size: 100%;
}
#sideNav #link7 a:hover {
	background: url(../../img/sidenav_contact.png) no-repeat right;
	background-size: 100%;
}
#myModal-label {
	text-transform: uppercase;	
}
/* ---------------------------
	4 ICONS NAV
-----------------------------*/
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}
.ch-grid:after {
	clear: both;
}
.ch-grid li {
	width: 220px;  
	height: 220px; 
	display: inline-block;
	margin: 20px;
}
.ch-item {
	width: 100%; 
	height: 100%; 
	border-radius: 50%;
	position: relative;
	cursor: default;
	-webkit-perspective: 900px;
	-moz-perspective: 900px;
	-o-perspective: 900px;
	-ms-perspective: 900px;
	perspective: 900px;
}
.ch-info{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
	-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	background: #3399cc;
	opacity: 0;
}
.ch-img-1 { 
	background-image: url(../../img/web_01.png);
}
.ch-img-2 { 
	background-image: url(../../img/system_01.png);
}
.ch-img-3 { 
	background-image: url(../../img/consulting_01.png);
}
.ch-img-4 { 
	background-image: url(../../img/advertisement_01.png);
}
.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 20px; 
	margin: 0 19px; 
	padding: 60px 0 0 0; 
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px; 
	font-size: 12px; 
	border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px; 
	margin: 15px 0; 
	letter-spacing: 1px;
	padding: 10px 5px; 
	font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}
.ch-item:hover .ch-info-front {
	-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	opacity: 0;
}
.ch-item:hover .ch-info-back {
	-webkit-transform: rotate3d(1,0,0,0deg);
	-moz-transform: rotate3d(1,0,0,0deg);
	-o-transform: rotate3d(1,0,0,0deg);
	-ms-transform: rotate3d(1,0,0,0deg);
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
}
/* ---------------------------
	SECTION 1
-----------------------------*/
#section1 {
	background-color: #3399cc; 
}
#section1 .sectionContent {
	padding: 90px;
	background: #fff url(../../img/section_1_back.png) no-repeat  top left;
	position: relative;
	background-size: 100%;
}
.sectionHeader {
	padding-bottom: 50px;	
}
.sectionHeader h2 {
	text-transform: uppercase;
}
.sectionHeader p {
	font-size: 18px;
	line-height: 1.8em;
}
#section1 h3 {
	font-size: 20px;	
}
#section1 ul, #section1 li, #section1 .sectionContent p {
	text-align: left;	
	background-color: #efefef;
}
.scroll {
	width: 114px;
	height: 114px;
	position: absolute;
	display: block;
	background: url(../../img/mouse.png) no-repeat center #ff6666;
	border-radius: 70px;
	left: 50%;
	margin-left: -66px;
	border: 9px solid #f1f1f1;
	top: -70px;
	transition: all 300ms ease-in-out;
	z-index: 1;	
}
.scroll:hover {
	background: url(../../img/arrow.png) no-repeat center #ff6666;
	background-color: #ff6666;
	background-position: 50% 55%;	
}
/* ---------------------------
	SECTION 2
-----------------------------*/
#section2 {
	background-color: #ffcc00;	
}
#section2 .sectionContent {
	padding: 90px;
	background: #ffcc00 url(../../img/purpose.png) no-repeat  top center; 
	position: relative;
	margin-bottom: 20px;
}
#section2 .sectionContent h4, #section2 .sectionContent dt {
	font-weight: bold;	
}
#section2 .sectionContent dl {
	background-color: rgba(255, 229, 178, 0.9);
	background: rgba(255, 229, 178, 0.9);
	color: rgba(255, 229, 178, 0.9);
    color: #000000;
	font-size: 14px;
	line-height: 1.8em;
	padding: 10px;
}
/* ---------------------------
	SECTION 3
-----------------------------*/
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
#section3 {
	background-color: #D6C4AB;
}
#section3 .sectionContent {
	padding: 90px;
	padding-bottom: 60px;
	margin-bottom: 30px;
	position: relative;
	border-bottom: #fff solid 1px;
}
#section3 .sectionContent .view p {
	border: #fff solid 1px;
	height: 200px;
	padding: 10px;
	background-color: #cccc99;
}
.view {
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content { 
  height:100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-size: 14px;
   position: relative;
   color: #000;
   padding: 10px 20px 20px;
   text-align: center;
   line-height: 1.8em;
}
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(47, 173, 253, 0.7); 
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
/* ---------------------------
	SECTION 4
-----------------------------*/
#section4 {
	background-color: #ffcc00;	
}
#section4 .sectionContent {
	padding: 90px;
	background: #ffcc00 url(../../img/process_background.png) no-repeat  top center; 
	position: relative;
	margin-bottom: 20px;
}
#section4 .panel-title {
	text-align: center;	
	font-size: 16px;
	line-height: 1.8em;
	font-weight: bold;
}
#section4 .panel-collapse{
	text-align: center;
}
.accordionLink {
	width: 62px;
	height: 62px;
	display: block;
	background: url(../../img/next.png) no-repeat center #ffcc00;
	border-radius: 70px;
	margin-left: 44%;
	margin-bottom: 5px;
	border: 9px solid #efefef;
	top: 0px;
	transition: all 300ms ease-in-out;
	z-index: 20;	
}
.accordionLink:hover {
	background: url(../../img/arrow.png) no-repeat center #ffcc00;
	background-color: #ffcc00;
	background-size: 50%;
	background-position: 50% 55%;	
}
.accordionLinkLast {
	width: 64px;
	height: 64px;
	display: block;
	background: url(../../img/back.png) no-repeat center #ffcc00;
	border-radius: 70px;
	margin-left: 44%;
	margin-bottom: 5px;
	border: 9px solid #efefef;
	transition: all 300ms ease-in-out;	
}
.accordionLinkLast:hover {
	background: url(../../img/arrow_up.png) no-repeat center #ffcc00;
	background-color: #ffcc00;
	background-size: 50%;
	background-position: 50% 55%;	
}
/* ---------------------------
	SECTION 5
-----------------------------*/
#section5 {
	background-color: #999999;
}
#section5 p {
	color: #ffffcc;
}
#section5 .sectionContent {
	padding: 90px;
	
	position: relative;
	margin-bottom: 20px;
}
#section5 .sectionContent img {
	text-align: center;
}
/* ---------------------------
	FOOTER
-----------------------------*/
.input-group {
	z-index: 0;	
}
/* ---------------------------
	MOBILE NAV BAR
-----------------------------*/
@media (max-width: 767px) {
	body { 
		padding-top: 70px; 
	}
	#custom-bootstrap-menu.navbar-default .navbar-brand {
    	color: rgba(232, 42, 42, 1);
	}
	#custom-bootstrap-menu.navbar-default {
   		font-size: 15px;
    	background-color: rgba(241, 241, 241, 1);
    	border-width: 2px;
    	border-radius: 0px;
	}
	#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    	color: rgba(56, 53, 53, 1);
   		background-color: rgba(241, 241, 241, 1);
	}
	#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
	#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    	color: rgba(31, 16, 16, 1);
   		background-color: rgba(204, 204, 204, 1);
	}
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    	color: rgba(255, 255, 255, 1);
    	background-color: rgba(204, 204, 204, 1);
	}
	#custom-bootstrap-menu.navbar-default .navbar-toggle {
    	border-color: #cccccc;
	}
	#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
	#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    	background-color: #cccccc;
	}
	#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  		background-color: #cccccc;
	}
	#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
	#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    	background-color: #f1f1f1;
	}
	#custom-bootstrap-menu.navbar-default hr {
		outline: none;
		border: none;
		border-top: 1px solid #cccccc;
		margin: 0 0 2px 0;
		text-align: left;	
	}
	.block {
        margin-left: -20px;
        margin-right: -20px;
    }
	#section2 .sectionContent {
		background-image: none;
		background-color: #ffcc00;
	}
}