/********reset style*************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul {x-list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;   border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

* {
	font-family: 'Muli', sans-serif;
	transition:0.5s;
    -webkit-transition:0.5s;
}

html,body {
	height: 100%;
}

#preloader {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 7777;
	transition:0.5s;
    -webkit-transition:0.5s;
    opacity: 1;
      -webkit-transition-delay: 0.3s; 
    transition-delay: 0.3s;
}

#preloader.fade_loader {	
    
    opacity: 0;
}

#preloader .loader_back {
	width: 100%;
	height: 100%;
	z-index: 8888;
	background:white;
	position: absolute;
}

#preloader .loader_git {
	width: 128px;
	height: 171px;
	position: absolute;
	z-index: 9999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition:0.5s;
    -webkit-transition:0.5s;
    opacity: 1;
}

#preloader .loader_git.fade_loader_gif {
     transform: scale(0);
	-webkit-transform: scale(0);
	opacity: 0;
}

#preloader .loader_git img {
	width: 128px;
}

header {
	width: 100%;
	height: 130px;
	position: fixed;
	background-color: rgba(255,255,255,0);
	border-bottom: solid thin rgba(0,0,0,0);
	z-index: 1000;
	top: 0;
	  transform: scale(2);
	-webkit-transform: scale(2);
	transition:0.5s;
    -webkit-transition:0.5s;
      /*-webkit-transition-delay: 0.5s; 
    transition-delay: 0.5s;*/
}

header.tint {
	background-color: rgba(0,0,0,1) !important;
}

header.tint .nav_wrapper .nav_line,
header.tint .nav_wrapper .nav_line::before,
header.tint .nav_wrapper .nav_line::after,
header.tint .nav_wrapper.nav_animate .nav_line::before,
header.tint .nav_wrapper.nav_animate .nav_line,
header.tint .nav_wrapper.nav_animate  .nav_line::after {
	background-color: #FFF !important;
}

header.tint nav ul li a {
	color: #FFF;
}

#home {
    z-index: 500;
    background: beige;
    height: 100%;
    position: relative;
      transform: scale(2);
	-webkit-transform: scale(2);
	 -webkit-transition-delay: 2s; 
    transition-delay: 2s;
    transition:0.5s;
    -webkit-transition:0.5s;
}


.main_content {
	width: 100%;
	margin: auto;
	height: 100%;
	overflow: hidden;
}

header .header_content {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 75px;
	transition:0.5s;
    -webkit-transition:0.5s;

}

header.header_fixed {
	background-color: rgba(255,255,255,1);
	border-bottom:solid thin rgba(0, 0, 0, 0.11);
	height: 70px;
}


header .header_content .logo {
	left: 4%;
	position: relative;
	display: inline-block;
	width: 157px;
	height: 75px;
}

header .header_content .logo a{
	display: block;
	background-image: url('../images/logo.png');
	width: 157px;
	height: 75px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transition:0.5s;
    -webkit-transition:0.5s;
    transform: scale(0.9);
	-webkit-transform: scale(0.9);
	/*   -webkit-transition-delay: 0.25s;   
    transition-delay: 0.25s;*/
}

header .header_content .logo a.logo_fixed{
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
}

header .nav .nav_wrapper.nav_fixed {
	transform: scale(0.6);
	-webkit-transform: scale(0.6);
}

header .nav {
	width: 600px;
    display: inline-block;
    height: 22px;
    position: absolute;
    right: 4%;
    top: 0;
    vertical-align: middle;
    bottom: 0;
    margin: auto;
}

header .nav nav {
	position: absolute;
    width: 66%;
    height: 100%;
    left: 32%;
    opacity: 0;
    transition:0.5s;
    -webkit-transition:0.5s;

}

header .nav nav.nav_move {
	left: 22%;
	opacity: 1;
	transition:0.5s;
    -webkit-transition:0.5s;
}

.nav_wrapper {
	position: absolute;
	z-index: 200;
	width: 30px;
	height: 22px;
	right: 4%;
	cursor: pointer;
	transition:0.5s;
    -webkit-transition:0.5s;
}

nav ul li {
	list-style-type: none;
	display: inline-block;
}

nav ul li a {
	text-decoration: none;
    display: block;
    font-size: 17px;
    padding: 0 17px;
    position: relative;
    top: 3px;
    color: #000;
    transition:0.5s;
    -webkit-transition:0.5s;
    pointer-events: none;
}

nav ul li a:hover {
	color: #ABABAB;
}

nav.nav_move ul li a {
	pointer-events: inherit;
}

.nav_wrapper .nav_line, .nav_wrapper .nav_line::before , .nav_wrapper .nav_line::after  {
	width: 30px;
	height: 3px;
	background-color: #000;
	transition:0.3s;
	-webkit-transition:0.3s;
		transition-timing-function:linear;
	-webkit-transition-timing-function:linear;
}

.nav_wrapper .nav_line::before {
	content: "";
	position: absolute;
	top: 20px;
}
.nav_wrapper .nav_line::after {
	content: "";
	position: absolute;
	top: 10px;
}

.nav_wrapper.nav_animate .nav_line::before {
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	top: 0;
	background-color: #000;
		transition-timing-function:linear;
	-webkit-transition-timing-function:linear;
}

.nav_wrapper.nav_animate .nav_line{
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform-origin: left top;
	-webkit-transform-origin: left top;
	background-color: #000;
		transition-timing-function:linear;
	-webkit-transition-timing-function:linear;
}

.nav_wrapper.nav_animate  .nav_line::after {
	opacity: 0;
	background-color: #000;
}

#home.slideshow_content .slideshow_img{
	background-image: url('../images/slideshow.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 300;
	background-position: 50%;
}

#home.slideshow_content .slidehsow_content {
	width: 100%;
	height: 310px;
	top: 70px;
	bottom: 0;
	margin: auto;
	z-index: 400;
	position: absolute;
	text-align: center;
	transition:0.5s;
    -webkit-transition:0.5s
     -webkit-transition-delay: 0.3s; 
    transition-delay: 0.3s;
}

.no_scale {
	transform: scale(1) !important;
}

#home.slideshow_content .slidehsow_content h1 {
	font-size: 30px;
	font-weight: 200;
	width: 50%;
	margin: auto;
	line-height: 1.3em;
}

#home.slideshow_content .slidehsow_content a {
	display: block;
	margin-top: 15px;
    width: 200px;
    padding: 22px 0;
    margin: auto;
    border-radius: 30px;
    text-decoration: none;
    color: #FFF;
    background: -moz-linear-gradient(top, rgba(18,129,180,1) 0%, rgba(71,174,222,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18,129,180,1)), color-stop(100%, rgba(71,174,222,1)));
background: -webkit-linear-gradient(top, rgba(18,129,180,1) 0%, rgba(71,174,222,1) 100%);
background: -o-linear-gradient(top, rgba(18,129,180,1) 0%, rgba(71,174,222,1) 100%);
background: -ms-linear-gradient(top, rgba(18,129,180,1) 0%, rgba(71,174,222,1) 100%);
background: linear-gradient(to bottom, rgba(18,129,180,1) 0%, rgba(71,174,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1281b4', endColorstr='#47aede', GradientType=0 );
transition:0.5s;
	-webkit-transition:0.5s;
}

#home.slideshow_content .slidehsow_content a:hover {
	
	width: 220px;
	
}

#home.slideshow_content .slidehsow_content a i {
	top: 0.5px;
    position: relative;
    left: 2px;
}

#home.slideshow_content .slidehsow_content .slideshow_device_set {
	margin: 30px auto;
}

#home.slideshow_content .slidehsow_content .slideshow_device_set .outline_img {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 10px;
	background-repeat: no-repeat;
	background-size: 100%;
}

#home.slideshow_content .slidehsow_content .slideshow_device_set .outline_iphone {
	width: 44px;
	height: 88px;
	background-image: url(../images/outline_iphone.png);
}

#home.slideshow_content .slidehsow_content .slideshow_device_set .outline_ipod {
	width: 43px;
	height: 68px;
	background-image: url(../images/outline_ipod.png);
}

#home.slideshow_content .slidehsow_content .slideshow_device_set .outline_ipad {
	width: 89px;
	height: 111px;
	background-image: url(../images/outline_ipad.png);
}

.main_content .sub_content {
	height: 100%;
	position: relative;
	text-align: center;
}

.main_content .sub_content .content_left, .main_content .sub_content .content_img, .main_content .sub_content .content_right{
	width: 48%;
	display: inline-block;
	height: 100%;
	position: relative;
}

#software .main_content .sub_content .content_img {
	width: 51.67%;
}

.main_content .sub_content .sub_content_content div.sub_main {
	width: 83%;
    text-align: left;
}

.main_content .sub_content .content_left .sub_content_wrapper{
	right: 0;
}

.main_content .sub_content .content_right .sub_content_wrapper{
	left: 0;
}


.main_content .sub_content .content_img div {
	width: 80%;
	position: absolute;
	height: 100%;
}

.main_content .sub_content .content_img.img_right div {
	left: 0;
}

.main_content .sub_content .content_img.img_left div {
	right: 0;
	width: 100%;
}

.main_content .sub_content .content_img div img {
	width: 460px;
	position: relative;
	top: -40px;
	opacity: 0;
}

#software .main_content .sub_content .content_img div img {
	right: 100px;
}
#repair {
	background-color: #fafafa;
	overflow: hidden;
}

.main_content .sub_content .content_img div img.software_img {
	width: 100%;
	top: 3.9%;
	right: 100px;
	opacity: 0;
}

.animate {
	-webkit-animation: phone 4.1s forwards;
    animation: phone 4.1s forwards;
}

@-webkit-keyframes phone {
    from {top: -40px; opacity: 0;}
    to {top: -200px; opacity: 1;}
}

@keyframes phone {
    from {top: -40px; opacity: 0;}
    to {top: -200px; opacity: 1;}
}

.animate_left {
	-webkit-animation: alimate_left 3.1s forwards 1.5s;
    animation: alimate_left 3.1s forwards 1.5s;
}

@-webkit-keyframes alimate_left {
    from {right: 100px; opacity: 0;}
    to {right: 45px; opacity: 1;}
}

@keyframes alimate_left {
    from {right: 100px; opacity: 0;}
    to {right: 45px; opacity: 1;}
}

.fade {
	-webkit-animation: fade 1.5s forwards 0.4s;
    animation: fade 1.5s forwards 0.4s;
    opacity: 0;
}

@-webkit-keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

.main_content .sub_content .sub_content_content .sub_content_wrapper {
	position: absolute;
    width: 80%;
    text-align: left;
    height: 400px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.main_content .sub_content .sub_content_content h1 {
	color: #118fc6;
	font-size: 50px;
	font-weight: bold;
	opacity: 0;
}

.main_content .sub_content .sub_content_content h2 {
	font-size: 17px;
	color: #434343;
	margin-top: 10px;
	font-weight: 200;
	opacity: 0;
}

.main_content .sub_content .sub_content_content ul {
	margin-top: 20px;
}

.main_content .sub_content .sub_content_content ul li {
	list-style-type: none;
	line-height: 2.3em;
	font-size: 17px;
	color: #434343;
	opacity: 0;
}

.main_content .sub_content .sub_content_content .service_set {
	margin-top: 30px;
	opacity: 0;
}

.main_content .sub_content .sub_content_content .service_image {
    height: 50px;
    text-align: center;
    display: inline-block;
    margin-right: 53px;
}

.main_content .sub_content .sub_content_content .service_image img {
	width: 36px;
	margin-bottom: 2px;
}

.main_content .sub_content .sub_content_content .service_image p {
	font-size: 12px;
	color: #434343;
	line-height: 1.2em;
}

.main_content .sub_content .sub_content_content .service_image:last-child {
	margin-right: 0;
}

#contact {
	background-color: #fafafa;
	height: 700px;
}

#contact h1 {
	font-size: 29px;
	font-weight: 200;
}

#contact h2 {
	font-size: 36px;
	font-weight: bold;
    color: #2591C3;
}

#contact .book_form_inner {
	height: 462px;
    position: absolute;
    top: -70px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#book_form {
	position: relative;
    width: 100%;
    height: 100%;
}

footer {
	background-color: #242424;
	padding: 0 20px;
	color: #848282;
	text-align: center;
	font-size: 11px;
	font-weight: 1.2em;
}

footer a {
	text-decoration: none;
	color: #848282;
	transition:0.5s;
	-webkit-transition:0.5s;
}

footer a:hover {
	color: #2F99CB;
}

footer .footer_inner {
    padding: 17px;
}

/* R E S P O N S I V E */

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

	body {
		height: auto;
	}

	header .nav {
		width: 100%;
		right: 0;

	}



	header .nav nav {
		top: 0;
	    left: 0px;
	    height: 43px;
	    width: 100%;
	    background: white;
	    text-align: center;
	}

	header .nav nav ul {
		top: 26%;
	    position: relative;
	}

	header .nav nav.nav_move {
		left: 0;
		top: 46px;
		width: 100%;
		text-align: center;
	}

	header .nav nav a{
		font-size: 12px;
	}

	header {
		background-color: rgba(255,255,255,1);
	    border-bottom: solid thin rgba(0, 0, 0, 0.11);
	    height: 70px;
	}

	header .header_content .logo a {
		    transform: scale(0.5);
    -webkit-transform: scale(0.5);
	}

	header .header_content .logo {
		left: 0;
	}

	header .nav .nav_wrapper.nav_fixed {
	    transform: scale(0.6);
	    -webkit-transform: scale(0.6);
	}

	header .nav .nav_wrapper {
	    transform: scale(0.6);
	    -webkit-transform: scale(0.6);
	}

	#home {
		height: 100vh;
	}

	#home.slideshow_content .slidehsow_content h1 {
		font-size: 20px;
	    width: 90%;
	}
	#home.slideshow_content .slidehsow_content a {
		width: 155px;
	    font-size: 14px;
	    padding: 14px 0;
	}
	#home.slideshow_content .slidehsow_content a{
		width: 175px;
	}

	.main_content .sub_content .sub_content_content .sub_content_wrapper {
		width: 90%;
	    text-align: center;
	    left: 0;
	    right: 0;
	    height: auto;
	    margin-top: 20px;
	}

	#repair {
		height: 500px;
	}

	.main_content .sub_content .content_left, .main_content .sub_content .content_img, .main_content .sub_content .content_right {
		width: 95%;
	}
	.main_content .sub_content .content_img{
		display: none;
	}

	.main_content .sub_content .sub_content_content div.sub_main {
		width: 100%;
		text-align: center;
	}

	.main_content .sub_content .sub_content_content .service_image {
		width: 100px;
		margin: 10px 15px;
	}

	.main_content .sub_content .sub_content_content .service_image img {
		width: 20px;
	}

	.main_content .sub_content .sub_content_content .service_image:last-child {
		margin-right: 15px;
	}

	.main_content .sub_content .sub_content_content ul li {
		font-size: 15px;
	}

	.main_content .sub_content .sub_content_content h1 {
		font-size: 35px;
	}

	.main_content .sub_content .sub_content_content h2 {
		font-size: 14px;
	}

	#software {
		height: 500px;
	}

	#contact {
		height: 730px;
	}

	#contact .book_form_inner {
		width: 95% !important;
    	top: 32px;
    	position: relative;
	}

	.contact_left {
		width: 100% !important;
	}

	.form-style input.input-field, .form-style .tel-number-field, .form-style .textarea-field, .form-style .select-field {
		width: 100% !important;
		font-size: 13px;
		text-align: center !important;
		height: 50px !important;
		margin: 5px 0 !important;
	}

	.form-style .textarea-field {
		height: 80px !important;
	}
	#contact h1 {
		font-size: 21px;
	}

	#contact .form-style button {
		width: 100%;
		float: none;
	}

	.form-style {
		height: auto !important;
	}

	#contact .contact_right {
		top: 0;
		width: 100%;
	}

	#contact .contact_right div {
		margin: 20px auto;
	}

	#book_form .contact_right p {
		font-size: 14px !important;
		text-align: center !important;
	}

	@media screen and (max-width: 700px) and (orientation: landscape){
		#home.slideshow_content .slidehsow_content a {
			display: none;
		}

		#home.slideshow_content .slidehsow_content {
			height: 200px;
		}

		.main_content .sub_content .sub_content_content .service_image {
		    width: 91px;
		    margin: 10px 2px;
		}

		#software {
		    height: 392px;
		}

		#repair {
			height: 390px;
		}

		footer {
			font-size: 10px;
		}
	}

}