@import url('Prompt-Regular/style.css');
@import url('Oswald-Regular/styles.css');
@import url('digi-hub/style.css');

body {font-family: 'Prompt', sans-serif; font-size: 16px; line-height: 23px; margin: 0; }
h1,h2,h3,strong {font-weight: normal; }
h1 {font-size: 30px; }
h1 span {color: #000; }
ul, ol {list-style: none; margin: 0; padding: 0;  }


body>header {position: fixed; text-align: center; width: 100%; padding: 0 20px; z-index: 100; box-sizing: border-box; /*background: #fff;*/ top: 0; height: 60px; /*box-shadow: 0px 1px 3px rgba(0,0,0,0.2);*/ }
body>header a {color: #000; /*color: #e73834;*/ text-decoration: none;  }

/*header.fixed ul {position: absolute; right: 30px; top: 50px; }*/
/*header.fixed li {clear: both; padding: 0; text-align: right; width: 100%; }*/

body>header .tel {display: none; }
body>header.fixed .tel {display: block; color: #fff; background: #e73834; border-radius: 20px; padding: 10px; position: absolute; right: 20px; top: 20px; }

#logo {background: url(../img/logo.png) no-repeat; background-size: 100%; }
#logo a {display: block; width: 135px; height: 100px; text-indent: -9999px; }

body>header p {float: left;  }
body>header ul {float: right; padding-top: 20px; }
body>header li {padding: 20px 10px; float: left; }

/*header.fixed li {padding: 20px 0; }
header.fixed li a {background: rgba(255,255,255,1); padding: 5px 10px; }*/

#billboard-slide h1 span,
#services>h1,
#client>h1,
#contact h1 {font-family: 'Oswald-Regular', sans-serif; }

/*header.fixed {background-color: rgba(255,255,255,1);
 	-webkit-animation: mymove 1s; 
    animation: mymove 1s; }
	@keyframes mymove {
    from {background-color: rgba(255,255,255,.6); }
    to {background-color: rgba(255,255,255,1); }
	}
header.fixed a {color: #000; }*/

	#billboard-slide {text-align: center; color: #fff; position: relative; }
	#billboard-slide .slides>li {position: relative; display: none; }
	#billboard-slide .slides>li:first-child {display: block; }
	#billboard-slide img {display: block; width: 100%; }
	#billboard-slide h1 {font-size: 30px; line-height: 35px; position: absolute; top: 50%; left: 0; right: 0; /*background: rgba(231,56,52,.6);*/ transform: translateY(-50%); text-shadow: 0px 1px 3px rgba(0,0,0,0.6); }
	#billboard-slide h1 span {color: #fff; }
	#billboard-slide h1 small {font-weight: normal; font-size: 16px; line-height: 20px; padding-top: 10px; display: block; }

	.mouse-down {
	background: url(../img/icn/mouse-down.png) center no-repeat;
	background-size: 60%;
	border: 2px solid #fff;
	width: 40px;
	height: 60px;
	position: absolute;
	z-index: 100;
	bottom: 20px;
	left: 50%;
	border-radius: 25px; 
	transform: translate(-50%, 0);
	cursor: pointer;
    -webkit-animation: mouseDown .5s infinite;
    animation: mouseDown .5s infinite;
    /*background-position: center 100%;*/
    }
    @-webkit-keyframes mouseDown {
    0% {transform: translate(-50%, 0); }
    100% {transform: translate(-50%, -5px); }
    }

    @keyframes mouseDown {
    0% {transform: translate(-50%, 0); }
    100% {transform: translate(-50%, -5px); }
    }

	#billboard-slide .flex-control-nav {position: absolute; z-index: 10; width: 200px; text-align: center; top: 70%; left: 50%; margin-left: -100px; }
	#billboard-slide .flex-control-nav li {display: inline; }
	#billboard-slide .flex-control-nav li a {background: #fff; font-size: 0px; padding: 1px 20px; margin: 2px; }
	#billboard-slide .flex-control-nav li a.flex-active {background: #e73834; }

	#billboard-slide .flex-direction-nav {position: absolute; z-index: 9; top: 0; bottom: 0; right: 0; left: 0; font-size: 0; display: none; }
	#billboard-slide .flex-direction-nav .flex-prev {background: url(../img/icn/left-arrow.png) 20% center no-repeat; position: absolute; bottom: 0; left: 0; top: 0; width: 48.5%; opacity: 0; }
	#billboard-slide .flex-direction-nav .flex-next {background: url(../img/icn/right-arrow.png) 80% center no-repeat; position: absolute; bottom: 0; right: 0; top: 0; width: 51.5%; opacity: 0; }

	#billboard-slide .flex-direction-nav .flex-prev:hover,
	#billboard-slide .flex-direction-nav .flex-next:hover {opacity: 0.4; }

	#we-are {background: #e73834; color: #fff; padding: 60px 20px 60px; position: relative; text-transform: uppercase; overflow: hidden; }
	#we-are h2 {font-size: 25px; line-height: 33px; text-align: center; }
	/*#we-are:before {content: ''; position: absolute; left: 0; width: 50%; bottom: 0; border-top: 100px solid transparent; border-left: 1000px solid #fff;  }*/
	/*#we-are:after {content: ''; position: absolute; right: 0; width: 50%; bottom: 0; border-top: 100px solid transparent; border-right: 1000px solid #fff;  }*/

	#services {overflow: hidden; text-align: center; color: #e73834; padding: 60px 0 80px; position: relative; background: #fff;  }

	/*#services:before {content: ''; position: absolute; left: 0; width: 100%; bottom: 0; border-top: 100px solid transparent; border-left: 1000px solid #e73834; }*/
	/*#services:after {content: ''; position: absolute; right: 0; width: 50%; bottom: 0; border-top: 100px solid transparent; border-right: 1000px solid #e73834;  }*/
	#services ul {margin: 0 auto;  max-width: 1160px;  }
	#services ul li {width: 20%; display: inline-block; background: #f9f9f9;  box-sizing: border-box; margin: 10px; vertical-align: top; position: relative; z-index: 1; cursor: pointer; }
	#services ul li header {padding: 30px 0 10px; min-height: 130px; }
	#services li span {display: block; }
	#services li h1 {font-size: 14px; line-height: 16px; color: #333; }
	#services li a {text-decoration: none; color: #fff; }
	
	#services ul li:hover span {
    -webkit-animation: contentH .5s;
    animation: contentH .5s;
    }
    @-webkit-keyframes contentH {
    0% {transform: translateY(0); }
    50% {transform: translateY(-5px);}
    100% {transform: translateY(0);}
    }

    @keyframes contentH {
    0% {transform: translateY(0); }
    50% {transform: translateY(-5px);}
    100% {transform: translateY(0);}
    }

	#services.bg li>h1,
	#services.bg li>span {opacity: .6; }
	#services.bg li {background: rgba(249,249,249,.6); }

	#services ul div {cursor: default; position: absolute; z-index: 2; top: 50%; background: rgba(231, 56, 52,1); padding: 30px 30px 10px; margin: -20px -10px; color: #fff; display: none; transform: translateY(-40%); }
	#services ul div h1 {color: #fff; }
	#services ul div p {font-size: 14px; line-height: 16px; color: #fff; }
	#services ul div .close {width: 40px; height: 30px; position: absolute; right: 0; top: 0; cursor: pointer; font-size: 0; }
	#services ul div .close:after {content: ''; display: block; width: 20px; height: 2px; background: #fff; top: 15px; right: 10px; position: absolute; }

	#services ul div>* {position: relative; z-index: 2; }
	#services ul span.bg {position: absolute; font-size: 180px; opacity: .1; left: 0; right: 0; z-index: 1;  }


	#services ul li.active {z-index: 2; }
	#services ul li.active div {
	display: block;
	-webkit-animation: contentD .5s;
    animation: contentD .5s; }

     @-webkit-keyframes contentD {
    0% {transform: translateY(-40%);}
    50% {transform: translateY(-45%);}
    100% {transform: translateY(-40%);}
    }

    @keyframes contentD {
    0% {transform: translateY(-40%);}
    50% {transform: translateY(-45%);}
    100% {transform: translateY(-40%);}
    }
	
	#services>h1,
	#contact>div>h1,
	#client>h1 {position: relative; padding-bottom: 20px; }
	#services>h1:after,
	#contact>div>h1:after,
	#client>h1:after {content: ''; display: block; width: 100px; height: 1px; background: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

	.icon img {display: block; margin: 0 auto; width: 150px; }
	

	#client {background: #f9f9f9; overflow: hidden; position: relative; text-align: center; padding: 60px 0 60px; }
	#client h1 {color: #e73834; }
	/*#client:before {content: ''; position: absolute; left: 0; width: 100%; top: 0; border-left: 1000px solid transparent; border-top: 50px solid #fff;  }*/

	#client ul {overflow: hidden; text-align: center; max-width: 1000px; margin: 0 auto; }
	#client li {display: inline-block; /*background: #fff; /*vertical-align: top;*/ margin-bottom: 10px; }
	#client li img {max-height: 70px; max-width: 150px; text-align: center; vertical-align: middle; margin: 10px;
		-webkit-filter: grayscale(60%); /* Safari 6.0 - 9.0 */
  		filter: grayscale(60%); }
  	#client li:hover img {
  		-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  		filter: grayscale(0); }

	#contact {
	background: #e73834;
	padding: 60px 30px 30px;	
	color: #fff;
	box-sizing: border-box;
	overflow: hidden; }

	#contact>div>h1 {text-align: center; }
	
	#contact address h1 {padding-bottom: 0; margin-bottom: 0; font-size: 25px; }

	.container {max-width: 860px; margin: 0 auto; width: 100%;  }

	#contact .container div {float: left; width: 50%; position: relative; }
	#contact address {font-style: normal;  }
	#contact address span {display: block; }
	#contact a {color: #fff; text-decoration: none; }

	#contact form {float: right; width: 50%; padding: 0 30px; box-sizing: border-box; }
	#contact form li {position: relative; }
	#contact form label {position: absolute; top: 10px; }
	#contact form input[type='text'],
	#contact form input[type='email'],
	#contact form textarea {background: none; border: 0; border-bottom: 1px solid #000; color: #fff; font-family: 'Prompt', sans-serif; font-size: 16px; padding: 10px; width: 100%; margin-bottom: 20px; outline: none; resize: none; box-sizing: border-box; }
	#contact form input[type='submit'] {background: none; cursor: pointer; border: 1px solid #fff; padding: 10px 20px; font-family: 'Oswald-Regular', sans-serif; font-size: 16px; color: #fff; width: 100%; outline: none; }

	#contact form li.active label {
	color: #000;
	font-size: 14px;
	-webkit-animation: label .3s;
    animation: label .3s;
    transform: translateY(-25px);
    }
    @-webkit-keyframes label {
    0% {transform: translateY(0); }
    100% {transform: translateY(-25px); }
    }

    @keyframes label {
    0% {transform: translateY(0); }
    100% {transform: translateY(-25px); }
    }

	.tel {position: absolute; bottom: 0; }
	footer {background: #a2a2a2; overflow: hidden; text-align: center; font-size: 12px; color: #000; }

@media (max-width: 960px) {
	#billboard-slide .slides>li {height: 480px; overflow: hidden;  }
	#billboard-slide .slides>li img {height: 480px; width: auto; transform: translateX(-20%); margin: 0 auto;  }
}

@media (max-width: 768px) {
	body>header li {display: none; }
	body>header li:last-child {display: block; }

	#we-are h2 {font-size: 20px;  }

	#services ul li {width: 40%;  }

	#contact .container div {width: 100%; padding: 0 30px; box-sizing: border-box; }
	#contact form {width: 100%;  }
}

@media (max-width: 520px) {
	#billboard-slide .slides>li h1 {padding-left: 20px; padding-right: 20px; }
	#we-are h2 {font-size : 18px; }
	#we-are h2 br {display: none; }
}

@media (max-width: 480px) {
	#contact .container div,
	#contact form {padding: 0; }
}