/******************************************************
    Stylesheet:  SuperHosting - Landing page for Webit
	Updated on:  21/10/2011
******************************************************/


/* ******************* ERIC MEYER's RESET */

/* .................... v1.6.1 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,/*sub,sup,*/tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}:focus{outline:0px;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}


/* **************** MARTIN METODIEV RESET */

/* ................... General */
h1,h2,h3,h4,h5,h6{font-weight:normal}a:link{text-decoration:underline}a:visited,a:hover,a:active{text-decoration:none}acronym,abbr,fieldset,img,a img{border:0px}textarea{overflow:auto;resize:none}caption,th{text-align:left;font-weight:normal;font-style:normal}

/* ................ Predefined */
html{-webkit-font-smoothing:antialiased;font-size:1.25em/*20px*/}body{font-size:50%/*10px*/}body *{cursor:default}a,a *,a:hover,a:hover *,button,input.btn,div.btn input,select{cursor:pointer}.txt p,div.textfield input,input.txt,textarea,.txt li,.txt th,.txt td{cursor:text}#layout,input.txt,input.btn,textarea{font-family:Verdana, Geneva, sans-serif}.cf{zoom:1}.ie7 img{-ms-interpolation-mode:bicubic}


/* *********************** PREDEFINITIONS */

/* .................. Floating */
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0pt}.l{float:left}.r{float:right}.c{clear:both}.cl{clear:left}.cr{clear:right}

/* ................ Displaying */
.inline{display:inline}.block{display:block}.none{display:none}.visible{visibility:visible}.hidden{visibility:hidden}

/* ........... Text formatting */
.italic{font-style:italic}.bold{font-weight:bold}.small-caps{font-variant:small-caps}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.align-l{text-align:left}.align-c{text-align:center}.align-r{text-align:right}.align-j{text-align:justify}.lst-pi{list-style-position:inside}.lst-po{list-style-position:outside}.lst-tn{list-style-type:decimal}.lst-td{list-style-type:disc}.nowrap{white-space:nowrap}

/* ............... Positioning */
.rel{position:relative}.abs{position:absolute}.fix{position:fixed}.stat{position:static}

/* .................. Overflow */
.ohidden{overflow:hidden}.oauto{overflow:auto}.oscroll{overflow:scroll}.ovisible{overflow:visible}

/* .................... Spaces */
.mt5{margin-top:5px}.mb5{margin-bottom:5px}.ml5{margin-left:5px}.mr5{margin-right:5px}.mt10{margin-top:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}.mr10{margin-right:10px}.mt15{margin-top:15px}.mb15{margin-bottom:15px}.ml15{margin-left:15px}.mr15{margin-right:15px}.mt20{margin-top:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}.mr20{margin-right:20px}.mt25{margin-top:25px}.mb25{margin-bottom:25px}.ml25{margin-left:25px}.mr25{margin-right:25px}.mt30{margin-top:30px}.mb30{margin-bottom:30px}.ml30{margin-left:30px}.mr30{margin-right:30px}.mt35{margin-top:35px}.mb35{margin-bottom:35px}.ml35{margin-left:35px}.mr35{margin-right:35px}.mt40{margin-top:40px}.mb40{margin-bottom:40px}.ml40{margin-left:40px}.mr40{margin-right:40px}.pt5{padding-top:5px}.pb5{padding-bottom:5px}.pl5{padding-left:5px}.pr5{padding-right:5px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.pl10{padding-left:10px}.pr10{padding-right:10px}.pt15{padding-top:15px}.pb15{padding-bottom:15px}.pl15{padding-left:15px}.pr15{padding-right:15px}.pt20{padding-top:20px}.pb20{padding-bottom:20px}.pl20{padding-left:20px}.pr20{padding-right:20px}.pt25{padding-top:25px}.pb25{padding-bottom:25px}.pl25{padding-left:25px}.pr25{padding-right:25px}.pt30{padding-top:30px}.pb30{padding-bottom:30px}.pl30{padding-left:30px}.pr30{padding-right:30px}.pt35{padding-top:35px}.pb35{padding-bottom:35px}.pl35{padding-left:35px}.pr35{padding-right:35px}.pt40{padding-top:40px}.pb40{padding-bottom:40px}.pl40{padding-left:40px}.pr40{padding-right:40px}

/* .................. Wrappers */
.wrp{margin:0px auto}.wrp-main{max-width:1000px}


/* ******************* DOCUMENT STRUCTURE */

/* ...................... Body */
html, body {width: 100%; height: 100%; -webkit-text-size-adjust: none}

body.portrait {}
body.landscape {}

/* ................... General */
#general {
	min-width: 240px; min-height: 0px !important;
	/*visibility: hidden;*/
	overflow: hidden;
}

.ie7 #general,
.ie8 #general {min-width: 1000px}


/* *********************** PAGE STRUCTURE */

/* .................... Header */
#header {margin-bottom: 40px}

/* .................... Layout */
#layout {}

.template-1st {}

.template-2nd {}

.template-2nd .wrp-main .content {padding: 10px 0px 0px 30px}

.template-2nd .wrp-main .content .box {float: left}

.template-2nd .wrp-main .content .txt {
	width: 64.89%;
	margin-right: 3.19%;
}

.template-2nd .wrp-main .content .txt h2 {
	margin-top: 2em;
}

.template-2nd .wrp-main .content .img {width: 31.91%}

.template-2nd .wrp-main .content .img img {
	max-width: 300px;
	margin: 40px auto 20px;
}

.template-2nd .wrp-main .content .img p {margin-top: 10px}

@media only screen and (max-width: 599px), only screen and (width: 600px) and (orientation: landscape) {
	.template-2nd .wrp-main .content {padding-left: 10px}
	
	.template-2nd .wrp-main .content .box {
		width: auto;
		float: none;
	}
	
	.template-2nd .wrp-main .content .img p.centered {text-align: center}
}

/* .................... Footer */
#footer {margin-top: 40px}


/* ****************************** MARKERS */

/* .................. Wrappers */
.wrp- {}

/* ...................... Meta */
.meta {
	font-size: 11px;
	line-height: 15px;
}

/* ......... Background Colors */
.bgc-005380 {background-color: #005380}

.bgc-ADCB57 {background-color: #ADCB57}

/* ................... Borders */
.brd-top {border-top: 1px solid #CCC}

/* ................... Indents */
.ind-15 {margin-left: 15px !important; margin-right: 15px !important}

.ind-20 {margin-left: 20px !important; margin-right: 20px !important}

.ind-30 {margin-left: 30px !important; margin-right: 30px !important}

/* .................. Percents */
.percent {
	display: inline-block;
	width: 40px;
	margin-right: 5px;
	text-align: right;
}


/* ****************************** CLASSES */

/* ............. Image Holders */
.img-holder {}

/* .................... Quotes */
.quote {
	width: auto !important;
	padding-left: 60px; margin-top: 40px !important;
	background: url(../images/quotes.png) no-repeat left top; background-size: 40px 32px;
}

@media only screen and (max-width: 599px), only screen and (width: 600px) and (orientation: landscape) {
	.quote {
		padding-left: 42px;
		background-size: 32px 26px;
	}
}

.ie .quote {
	background-image: url(../images/quotes-small.png);
	zoom: 1;
}

/* ................. Yearlines */
.yearline {}

.yearline ul {}

.yearline ul li {
	float: left;
	font-size: 11px;
}

@media only screen and (max-width: 599px), only screen and (width: 600px) and (orientation: landscape) {.yearline ul li {font-size: 9px}}


/* ****************************** MODULES */

/* ................ Navigation */
#nav {
	min-height: 40px;
	font-size: 12px; line-height: 40px;
}

#nav,
#nav a {color: #FFF}

#nav a {padding: 0px 15px; -webkit-tap-highlight-color: rgba(255,255,255,0.1)}

#nav .menu {}

#nav .menu ul {}

#nav .menu ul li {}

#nav .menu ul li a {}

#nav .menu,
#nav .menu ul li,
#nav .menu ul li a {float: left}

#nav .menu ul li.current {background: url(../images/arrow-white-up.png) no-repeat center bottom}

#nav .menu ul li.current a {
	text-decoration: none;
	cursor: default;
}

#nav .menu select {
	display: none;
	width: 100%;
	padding: 5px; margin: 3px 0px 0px 15px;
	font: normal 14px Verdana, Geneva, sans-serif;
	color: #333;
	background-color: #FFF;
}

.opera #nav .menu select {margin-top: 5px}
.chrome #nav .menu select {margin-top: 5px}
.safari #nav .menu select {margin-top: 9px}
.iphone #nav .menu select {margin-top: 7px}

#nav .lang {float: right}

#nav .lang ul {}

#nav .lang ul li {}

#nav .lang ul li a {}

#nav .lang ul li,
#nav .lang ul li a {float: left}

@media only screen and (max-width: 699px) {#nav .menu {width: 66%}}

@media only screen and (max-width: 699px) {
	#nav .menu ul {display: none}
	#nav .menu select {display: inline-block}
}

/* ...................... Head */
#logo {margin: 40px 0px 25px}

#logo img {}

#logo a,
#logo img {
	display: block;
	max-width: 480px; max-height: 33px;
	margin: 0px auto;
}

@media only screen and (max-width: 479px) {#logo {margin: 30px 0px 15px}}

#slogan {text-align: center}

/* ..................... About */
#mod-about {}

#mod-about ul {text-align: center}

#mod-about ul li {
	display: inline-block;
	margin: 0px 1px 20px;
}

#mod-about ul li img {
	display: block;
	margin-bottom: 8px;
}

#mod-about ul li .meta {
	display: block;
	font-size: 11px;
	text-align: center;
}

@media only screen and (max-width: 480px) {
	#mod-about ul li {margin: 0px 1px}
	
	#mod-about ul li img {width: 25px; height: 78px}
	
	#mod-about ul li .meta {display: none}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	#mod-about ul li {margin: 0px 6px 20px}
	
	#mod-about ul li img {width: 32px; height: 99px}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#mod-about ul li {margin: 0px 1px 20px}
}

.ie7 #mod-about ul li {
	display: block;
	float: left;
	margin: 0px 4px 20px 3px;
}

/* ................... Clients */
#mod-clients {}

#mod-clients .yearline ul {
	width: 99%;
	margin-left: 1%;
}

#mod-clients .yearline ul li {width: 18%}

#mod-clients .yearline ul li.last {width: 10%}

.ie7 #mod-clients .yearline ul li.last {width: 9%}

/* .................. Services */
#mod-services {}

#mod-services .content {position: relative}

#mod-services .boxes,
#mod-services .legend {position: absolute}

#mod-services .boxes {}

#mod-services .boxes .box {
	width: 200px;
	float: left;
}

#mod-services .boxes .box img {width: 100%; height: auto}

#mod-services .boxes .registered {margin-right: 40px}

#mod-services .legend {top: 280px}

#mod-services .legend ul {}

#mod-services .legend ul li {font-size: 11px}

#mod-services .legend ul li img {position: relative; top: 4px}

#mod-services .yearline ul {
	width: 88%;
	margin-left: 12%;
}

#mod-services .yearline ul li {width: 27%}

#mod-services .yearline ul li.last {width: 19%}

@media only screen and (min-width: 641px) and (max-width: 940px) {
	#mod-services .legend {top: 250px}
	
	#mod-services .legend p {margin-bottom: 5px}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	#mod-services .graph {margin-top: 100px}
}

@media only screen and (min-width: 320px) and (max-width: 459px) {
	#mod-services .boxes .box {width: 124px}
	
	#mod-services .boxes .registered {margin-right: 20px}
	
	#mod-services .legend {top: 210px}
	
	#mod-services .legend p {margin-bottom: 5px}
}

@media only screen and (min-width: 460px) and (max-width: 940px) {
	#mod-services .boxes .box {width: 180px}
	
	#mod-services .boxes .registered {margin-right: 30px}
	
	#mod-services .legend p {margin-bottom: 5px}
}

@media only screen and (max-width: 640px) {
	#mod-services .boxes {position: static}
}

.ie7 #mod-services .yearline ul li {width: 27%}

.ie7 #mod-services .yearline ul li.last {width: 7%}

/* .................. Partners */
#mod-partners {}

/* ..................... Links */
#links {text-align: center;}

#links ul,
#links ul li {display: inline-block}

#links ul li {
	width: 190px;
	margin-bottom: 20px;
}

#links ul li.website,
#links ul li.facebook {margin-right: 20px}

#links ul li label {display: block}

#links ul li label,
#links ul li p {text-align: left}

#links ul li p a {
	display: block;
	line-height: 30px;
}

@media only screen and (max-width: 481px) {
	#links {text-align: left}
}

.ie7 #links {
	width: 840px;
	margin: 0px auto 20px !important;
}

.ie7 #links li.website {margin-left: 20px}

.ie7 #links ul,
.ie7 #links ul li {float: left}

.lte8 #links ul {text-align: left}

.lte8 #links ul li label {display: inline}

/* .................. Contacts */
#contacts {
	padding: 20px 20px 10px;
	font-size: 12px;
	text-align: center;
}

#contacts,
#contacts a {color: #FFF}


#contacts ul,
#contacts ul li {display: inline-block}

#contacts ul {text-align: center}

#contacts ul li {
	margin: 0px 50px;
	text-align: left;
	vertical-align: top;
}

#contacts ul li .inner {
	padding-left: 40px;
	background-repeat: no-repeat; background-position: left 5px;
}

#contacts .timeline .inner {background-image: url(../images/icon-contacts-clock.png); background-size: 28px 29px}
#contacts .mails .inner {background-image: url(../images/icon-contacts-mail.png); background-size: 31px 23px}
#contacts .numbers .inner {background-image: url(../images/icon-contacts-phone.png); background-size: 30px 30px}

#contacts ul li .inner p span {line-height: 24px}

#contacts .addon {margin-top: -5px}

#contacts .addon li {margin: 5px 20px}

@media only screen and (min-width: 767px) and (max-width: 1023px) {
	#contacts .numbers span.nowrap {display: block}
	#contacts .numbers br {display: none}
}

@media only screen and (min-width: 860px) and (max-width: 1023px) {#contacts ul li {margin: 0px 30px}}
@media only screen and (min-width: 820px) and (max-width: 859px) {#contacts ul li {margin: 0px 20px}}
@media only screen and (min-width: 768px) and (max-width: 819px) {#contacts ul li {margin: 0px 10px}}

@media only screen and (min-width: 450px) and (max-width: 767px) {#contacts .wrp {width: 370px}}

@media only screen and (max-width: 767px) {
	#contacts {text-align: center}
	
	#contacts {text-align: left}
	
	#contacts ul li {
		display: block;
		margin: 0px 0px 10px;
	}
	
	#contacts .addon li {padding-left: 20px; margin-bottom: 5px}
}

.ie #contacts ul li .inner {zoom: 1}

.ie #contacts .timeline .inner {background-image: url(../images/icon-contacts-clock-small.png)}
.ie #contacts .mails .inner {background-image: url(../images/icon-contacts-mail-small.png)}
.ie #contacts .numbers .inner {background-image: url(../images/icon-contacts-phone-small.png)}

.ie7 #contacts ul,
.ie7 #contacts ul li {float: left}

.ie7 #contacts .wrp {width: 808px}

.ie7 #contacts .wrp .addon,
.ie7 #contacts .wrp .addon li {float: none}

.ie7 #contacts .wrp .addon {margin-top: 0px}

.ie7 #contacts .wrp .addon li {display: inline}

/* ................. Copyright */
#copyright {
	margin-top: 10px;
	font-size: 11px;
	text-align: center;
	color: #999;
}

#copyright a {
	display: inline-block;
	line-height: 30px;
}


/* *************************** TYPOGRAPHY */

/* ................... GENERAL */
#general {
	font: normal 13px/20px Verdana, Geneva, sans-serif;
	color: #333;
}

#header {}

#layout {}

#footer {}

/* .................. Headings */
@media only screen and (max-width: 599px), only screen and (width: 600px) and (orientation: landscape) {
	.ttl-i18g {font: italic 16px/26px Georgia, "Times New Roman", Times, serif}
	.ttl-n18g {font: normal 16px/20px Georgia, "Times New Roman", Times, serif}
	.ttl-n28g {font: normal 24px/26px Georgia, "Times New Roman", Times, serif}
}

@media only screen and (min-width: 601px), only screen and (width: 600px) and (orientation: portrait) {
	.ttl-i18g {font: italic 18px/30px Georgia, "Times New Roman", Times, serif}
	.ttl-n18g {font: normal 18px/22px Georgia, "Times New Roman", Times, serif}
	.ttl-n28g {font: normal 28px/30px Georgia, "Times New Roman", Times, serif}
}

.lte8 .ttl-i18g {font: italic 18px/30px Georgia, "Times New Roman", Times, serif}
.lte8 .ttl-n18g {font: normal 18px/20px Georgia, "Times New Roman", Times, serif}
.lte8 .ttl-n28g {font: normal 28px/30px Georgia, "Times New Roman", Times, serif}

/* ..................... Links */
body a {color: #005380; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,83,128,0.1)}

body a:link {}
body a:visited {}
body a:hover {}
body a:active {}


/* ****************************** CONTENT */

/* .................. Headings */
.txt h1, .txt h2, .txt h3, .txt h4, .txt h5, .txt h6 {}

/* .................... Global */
.txt {/*font: normal 13px/18px Verdana, Geneva, sans-serif*/}

.txt > * {
	display: block;
	margin-top: 1.385em /*18px*/;
}

.txt > :first-child {margin-top: 0px}
.txt > :last-child {margin-bottom: 0px}

/* ..................... Lists */
.txt li {display: list-item}

.txt > ol,
.txt > ul {margin-top: 0px !important}

.txt ol {list-style: decimal outside none}
.txt ul {list-style: disc outside none}

.txt > ul > li > ul,
.txt > ul > li > ul > li > ul,
.txt > ul > li > ul > li > ul > li > ul,
.txt > ol > li > ul,
.txt > ol > li > ul > li > ul,
.txt > ol > li > ul > li > ul > li > ul {margin-left: 22px}

.txt > ol > li > ul > li > ul,
.txt > ul > li > ul {list-style-type: circle}

.txt > ol > li > ul > li > ul > li > ul,
.txt > ul > li > ul > li > ul {list-style-type: square}

.txt ul {margin-left: 30px}

/* ............... Text Format */
.txt-format .img-block {width: 100% !important; height: auto !important}


/* ********************************* TEMP */

/* ........................... */