@charset "UTF-8";
/* CSS Document */

body{
	padding:0;
	margin:0;
	font-family: 'Open Sans', sans-serif;
}
a{
	color:#000;
	text-decoration:none;
}
br.clear{
	clear:both;
}










#navi{
	position:fixed;
	width:100%;
	height:70px;
	z-index:8;
	text-align:center;
	top:0;
	left:0;
}
nav{
	position:relative;
	display:block;
	margin:0;
	padding:32px 0 10px 0;
	background-color:rgba(255,255,255,0.99);
}
#site-main-menu{
	position:relative;
	padding:0;
	margin:0;
}
#site-main-menu li{
	position:relative;
	list-style:none;
	display:inline-block;
	font-size:14px;
	padding:5px;
	width:110px;
}
#site-main-menu li a{
	display:inline-block;
	padding:0 0 3px 0;
	border-bottom-style:solid;
	border-width:2px;
	border-color:#FFF;
}
#site-main-menu li a:hover{
	border-color:#000;
}

li#servicebtn{
	margin-right:108px;
}
li#portfoliobtn{
	margin-left:108px;
}


a#site-logo{
	display:inline-block;
	position:relative;
  text-indent: -9999px;
	background-color:rgba(255,255,255,1);
	width:166px;
	height:82px;
	background-image:url(imgs/logo.png);
	background-position:center center;
	background-size:138px auto;
	background-repeat:no-repeat;
	top:-68px;
	border-radius:3px;
}




/*---------------------------------------*/
#background-pic{
	position:fixed;
	width:100%;
	height:680px;
	top:0;
	left:0;
	background-image:url(imgs/studiofides-backgroundcolor.jpg);
	background-repeat:repeat;
	background-color:#e5e3e6;
	z-index:-1;
	text-align:center;
	padding-top:72px;
}
/**/


div#content-about{
	margin-top:678px;
}













div.contentbloc{
	position:relative;
	background-color:#FFF;
	background-image:url(imgs/bg-pattern/notebook/notebook.png);
	background-repeat:repeat;
	text-align:center;
	font-size:14px;
	line-height:1.5em;
	font-weight:400;
	margin:0;
	padding:70px;
}
div.contentbloc-inner{
	width:980px;
	padding:0;
	margin:0 auto;
}
h2.blocktitle{
	font-size:24px;
	font-weight:400;
	margin:0;
	padding:0 0 40px 0;
}
.about-words p{
	margin-top:0;
}








div.service-box{
	display:inline-block;
	width:277px;
	padding:15px 15px 15px 15px;
	margin:15px 0 0 15px;
	float:left;
}
h3.servicename{
	font-size:18px;
}
h3.detailedservice{
	color:#25c60e;
}
ul.service-list{
	margin:0;
	padding:0;
	font-weight:400;
}
.service-list li{
	list-style:none;
}
.service-description-box ul{
	padding:0 0 0 20px;
	margin:0;
}
.service-description-box ul li{
	
}
div.service-description-box{
	padding:0 25px 20px 18px;
	border-style:solid;
	border-width:2px;
	border-color:#000;
	text-align:left;
	background-color:rgba(255,255,153,0.62);
	display:none;
	width:720px;
	margin:0 auto;
	position:relative;
	top:-15px;
}
img.service-icon{
	position:relative;
	height:52px;
  padding:5px;
	opacity:0.1;
	
	-ms-transform: rotate(-75deg); /* IE 9 */
	-webkit-transform: rotate(-75deg); /* Chrome, Safari, Opera */
	transform: rotate(-75deg);
	
	
	-webkit-transition: 1.3s; /* Safari */
  transition: 1.3s;
}
.shown img.service-icon{
	opacity:1;
	-ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
}
#service-design img.service-icon{
	height:55px;
	padding-top:5px;
	padding-bottom:2px;
}
#service-develop img.service-icon{
	height:50px;
	padding-top:6px;
	padding-bottom:6px;
}
#service-support img.service-icon{
	height:56px;
	padding:3px;
}
p.read-more-btn{
	cursor:pointer;
	display:inline-block;
	font-weight:400;
	font-size:12px;
}
p.read-more-btn:hover{
	color:#25c60e;
	cursor:pointer;
}
p.read-more-btn:before{
	content:url(imgs/small-transparent-ele.png);
	border-top-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	border-width:1px;
}
p.read-more-btn:after{
	content:url(imgs/small-transparent-ele.png);
	border-top-style:solid;
	border-bottom-style:solid;
	border-right-style:solid;
	border-width:1px;
}
div.design-service-cate{
	padding:0 0px 5px 12px;
	margin:0;
	width:165px;
	float:left;
	font-size:14px;
}
.service-description-box h5{
	font-weight:400;
	margin-bottom:5px;
	font-size:16px;
	margin-top:10px;
}
span.close-service-description-btn{
	position:absolute;
	top:5px;
	right:5px;
	display:inline-block;
	font-size:16px;
	font-weight:300;
	letter-spacing:2px;
	padding:0;
	cursor:pointer;
}
span.close-service-description-btn:hover{
	font-weight:400;
}

#content-service h2.blocktitle{
	padding-bottom:10px;
}






div#content-about, div#content-how{
	background-color:#FFF;
	background-image:none;
	padding-bottom:100px;
	padding-top:70px;
}




div.workstep{
	display:inline-block;
	position:relative;
	width:227px;
	padding:25px 15px;
	margin:15px 32px 0 32px;
}
div.left-sign, div.right-sign{
	position:absolute;
	display:block;
	height:50%;
	width:15px;
	left:12px;
	top:20%;
	border-top-style:solid;
	border-left-style:solid;
	border-bottom-style:solid;
	border-width:3px;
	border-color:#CCC;
}
div.right-sign{
	left:auto;
	right:12px;
	border-right-style:solid;
	border-left:none;
}
.workstep p{
	margin:0;
	font-weight:400;
	font-size:18px;
}
img.stepicon{
	display:inline-block;
	height:62px;
	margin-top:18px;
}



/*
#content-about h2.blocktitle, #content-how h2.blocktitle, #content-portfolio h2.blocktitle, #content-contact h2.blocktitle{
	padding-bottom:35px;
}
*/






div.portfolio-work{
	display:inline-block;
	position: relative;
	width: 292px;
	height:219px;
	padding: 0;
	margin: 15px 8px 0 8px;
	background-color: #000;
	box-shadow:0 0 3px rgba(65,65,65, 0.6);
	overflow:hidden;
}
div.active-work{
	
}

a.portfolio-pic{
	position:relative;
	top:0;
	left:0;
	width:292px;
	height:219px;
	display:inline-block;
	background-position:center center;
	background-size:292px 219px;
	background-repeat:no-repeat;
	opacity:0.78;
	-webkit-transition: opacity 0.5s; /* Safari */
  transition: opacity 0.5s;
}
.active-work a.portfolio-pic{
	opacity:1;
}
span.portfolio-words{
	display:inline-block;
	position:absolute;
	top:220px;
	left:0;
	width:292px;
	height:93px;
	display:inline-block;
	background-color:rgba(255,255,153,0.96);
	-webkit-transition: top 0.5s; /* Safari */
  transition: top 0.5s;
}
.active-work span.portfolio-words{
	top:126px;
}
span.portfolio-work-title{
	display:inline-block;
	width:100%;
	height:20px;
	padding:8px 0 5px 0;
	margin:0;
	font-weight:400;
	font-size:16px;
}
span.portfolio-work-description{
	display:inline-block;
	width:262px;
	margin:0;
	padding:0 15px;
	font-size:12px;
	line-height:1.15em;
}
img.new-window-icon{
	height:14px;
	position:absolute;
	top:2px;
	right:-6px;
}
span.porfolio-work-linker{
	position:absolute;
	left:50%;
	margin-left:-59px;
	bottom:5px;
	display:inline-block;
	width:116px;
	padding:3px 0;
	font-size:12px;
}







div#content-contact{
	background-image:none;
	background-color:#393939;
	color:#FFF;
	padding-bottom:20px;
}
#content-contact a{
	color:#FFF;
}
div#contactform{
	display:block;
	padding:30px 0;
	vertical-align: top;
}
div#contact-left-col, div#contact-right-col, div.content-left-col, div.content-right-col{
	display:inline-block;
	width:328px;
	margin:0 10px;
	text-align:left;
	
	height:128px;

	position:relative;
	overflow:hidden;
}

#contact-left-col p{
	position:relative;
	height:30px;
	padding:0 0 0 6px;
	margin:12px 0 0 6px;
	
	overflow:hidden;
}
#contact-left-col input{
	display:inline-block;
	width:310px;
	padding:0 0 0 6px;
	height:30px;
	font-size:12px;
	margin:0;
	left:0;
	border-style:none;
	position:absolute;
}
#input-message{
	width:316px;
	padding:5px;
	height:102px;
	display:inline-block;
	margin:0;
	position:absolute;
	top:12px;
	font-size:12px;
}

button#contact-form-btn{
	position:relative;
	display:inline-block;
	margin-top:15px;
	background-color:#25c60e;
	padding:5px 25px;
	border-style:solid;
	border-color:#090;
	border-width:1px;
	border-radius:2px;
	font-size:14px;
	cursor:pointer;
}




div#the-google-map{
	position:relative;
	padding:0;
	margin:0;
	height:408px;
	background-color:#CCC;
}

#the-google-map iframe{
	width:100%;
	height:408px;
	z-index:0;
}
a#map-overlay{
	display:block;
	background:transparent; 
	position:absolute;
	width:100%;
	height:408px; 
	top:0;
	left:0;
	z-index:1;
}

div#pic-hotspots-container{
	position:absolute;
	width:1000px;
	height:680px;
	top:72px;
	left:50%;
	margin-left:-500px;
}
div.clickhotspot{
	position:absolute;
	cursor:pointer;
	-webkit-transition: opacity 0.3s; /* Safari */
  transition: opacity 0.5s;
	background-color:#FFF;
}
div#contact-hotspot{
	top:64px;
	left:150px;
	width:67px;
	height:111px;
	opacity:0;
}
div#contact-hotspot:hover{
	opacity:0.5;
}
div#howwework-hotspot{
	top:64px;
	left:718px;
	width:121px;
	height:115px;
	border-radius:100%;
	opacity:0;
}
div#howwework-hotspot:hover{
	opacity:0.5;
}
#howwework-hotspot span{
	position:absolute;
	display:inline-block;
	width:62px;
	font-size:18px;
	height:100px;
	color:#FFF;
	left:32px;
	top:20px;
	-ms-transform: rotate(-15deg); /* IE 9 */
	-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
	transform: rotate(-15deg);
}
div#service-hotspot{
	top:394px;
	left:202px;
	width:390px;
	height:182px;
	opacity:0;
}
div#service-hotspot:hover{
	opacity:0.3;
}
div#portfolio-hotspot{
	top:290px;
	left:667px;
	width:201px;
	height:259px;
	opacity:0;
}
div#portfolio-hotspot:hover{
	opacity:0.5;
}




div#footer{
	position:relative;
	margin:0;
	padding:35px 0;
	background-color:#393939;
	text-align:center;
	color:#FFF;
	font-size:12px;
}



#contact-feedback-message-ok{
	color:#25c60e;
	display:none;
}
#contact-feedback-message-error{
	color:#F00;
	display:none;
}

#content-products{
	text-align:center;
	background-color:#FFF;
	background-image:none;
}
a.product-linker{
	display:inline-block;
	margin:12px;
	cursor:pointer;
	width:288px;
}
img#fvlogo{
	width:112px;
	background-color: rgba(65,65,65,0.93);
	padding:12px 20px;
	border-radius:6px;
	-webkit-transition: 0.1s;
	transition: 0.5s;
	margin-bottom: 8px;
}
img#fvlogo:hover{
	background-color: rgba(65,65,65,0.73);
}
img#dmditlogo{
	width:138px;
	-webkit-transition: 0.1s;
  transition: 0.5s;
}
img#dmditlogo:hover{
	opacity:0.5;
}
span.product-words{
	display:inline-block;
	margin:15px 0 0 0;
	font-size:12px;
	color:#999;
}





@media all and (max-width: 1120px) {
div.contentbloc-inner{
	width:auto;
}
#content-service div.contentbloc-inner{
	width:650px;
}
div.service-box{
	width:228px;
}
div.service-description-box{
	width:auto;
}
}

@media all and (max-width: 1000px) {
#background-pic img{
	display:none;
}
div#background-pic{
	background-image:url(imgs/studiofides-visual-opti.jpg);
	background-size:1000px auto;
	background-position:center center;
	background-repeat:no-repeat;
}
div#pic-hotspots-container{
	top:59px;
}
}

@media all and (max-width: 858px) {
#contact-left-col p{
	padding-left:0;
	margin-left:0;
	background-color:#FFF;
	margin-right:3px;
}
}

@media all and (max-width: 790px) {
#content-service{
	padding-left:0;
	padding-right:0;
}
#content-service div.contentbloc-inner{
	width:513px;
}
div.service-box{
	width:228px;
	white-space:nowrap;
	padding:8px;
	margin:0;
}
}

@media all and (max-width: 728px) {
#navi nav #site-main-menu{
	display:none;
}
a#site-logo{
	top:-42px;
}
}


@media all and (max-width: 530px) {
#content-service div.contentbloc-inner{
	width:auto;
}
div.service-box{
	float:none;
	display:block;
	margin:15px auto;
}
div.contentbloc{
	padding-left:0;
	padding-right:0;
}

}