p,h1,h2,h3,h4,ul,a,img {margin:0; padding:0;}
img {border:none;}
html,body { background: url(../img/proba.jpg)  center top no-repeat; background-size:cover;
font-family:sans-serif, Verdana, Geneva, ;
font-size:14px;
line-height:1.5em;
text-align:left;
margin:0 auto;
padding:0;
}

.link {float: left;}
.left {float:left; margin-left:83px;}
a:link.wayWorkingParagraph {color:#1b8cd0; font-size:11px; font-weight:bold; display:block; margin-top:60px; text-decoration:none; }
a:visited.wayWorkingParagraph {color:#1b8cd0;}
a:hover.wayWorkingParagraph {color:#bc4b1d; }
.selected a.wayWorkingParagraph{ color:#bc4b1d; }
a:active.wayWorkingParagraph {color:#bc4b1d; }

#container {width:1000px; height:100%; background: url(../img/proba1.png) repeat;  overflow: hidden; margin: 0 auto; border:1px solid #ccc; position:relative;}

/* Start top part of the site */
#topArena {width:1000px; height:66px;  overflow:hidden; background: url(../img/vem-web-lineSS.png) no-repeat;}

#regArena {width:800px; height:100%; float:left;}
#regArena ul {list-style-type:none;}
#regArena li {float:left; padding-left:10px; color:#fff;}
#regArena a , #regArena a:visited {color:#fff; text-decoration:none; font-weight:bold;}
#regArena a:hover , #regArena a:active {color:#d7d4d4; text-decoration:none;}

#lanArena {width:100px; height:100%; float:right;}
#lanArena ul {list-style-type:none;}
#lanArena li {float:left; padding-left:10px; color:#d7d4d4;}
#lanArena a , #lanArena a:visited {color:#fff; text-decoration:none; font-weight:bold;}
#lanArena a:hover , #lanArena a:active {color:#d7d4d4; text-decoration:none;}
/* End top part of the site */

/* Start navigation part of the site */
#navigation {width:780px; height:72px; margin-left:105px; margin-top:-12px; }
#hometBt{ display:block; width: 130px; height: 72px; background: url(../img/homeBt.jpg) no-repeat 0 0;}
#hometBt:hover { background-position: 0 -72px; }
#homeBt span {position: absolute; top: -999em; }
#aboutBt{ display:block; width: 130px; height: 72px; background: url(../img/AboutBt.jpg) no-repeat 0 0;}
#aboutBt:hover { background-position: 0 -72px; }
#aboutBt span {position: absolute; top: -999em; }
#servicesBt{ display:block; width: 130px; height: 72px; background: url(../img/servicesBt.jpg) no-repeat 0 0;}
#servicesBt:hover { background-position: 0 -72px; }
#servicesBt span {position: absolute; top: -999em; }
#priceBt{ display:block; width: 130px; height: 72px; background: url(../img/priceBt.jpg) no-repeat 0 0;}
#priceBt:hover { background-position: 0 -72px; }
#priceBt span {position: absolute; top: -999em; }
#portfolioBt{ display:block; width: 130px; height: 72px; background: url(../img/portfolioBt.jpg) no-repeat 0 0;}
#portfolioBt:hover { background-position: 0 -72px; }
#portfolioBt span {position: absolute; top: -999em; }
#contactsBt{ display:block; width: 130px; height: 72px; background: url(../img/contactsBt.jpg) no-repeat 0 0;}
#contactsBt:hover { background-position: 0 -72px; }
#contactsBt span {position: absolute; top: -999em; }
#bottomLine { width:1000px; height:13px; background: url(../img/vem-web-bottom-lineSS.png) no-repeat;}
/* End navigation part of site */

/* Start "way of working "part of the site */
#wayWorking {width:1000px; height:100%; overflow:hidden; margin-top:10px;}
#plan {width:100px; height:96px; background: url(../img/vem-web-plan.png) no-repeat;text-align: center;}
#design {width:100px; height:96px; background: url(../img/vem-web-design.png) no-repeat;text-align: center;}
#codding {width:100px; height:96px; background: url(../img/vem-web-codding.png) no-repeat;text-align: center;}
#seo {width:100px; height:96px; background: url(../img/vem-web-seo.png) no-repeat;text-align: center;}
#support {width:100px; height:96px; background: url(../img/vem-web-support.png) no-repeat;text-align: center;}

#design {width:100px; height:96px; background: url(../img/vem-web-plan.png) no-repeat;text-align: center;}
#kodirane {width:100px; height:96px; background: url(../img/vem-web-design.png) no-repeat;text-align: center;}
#sistemi {width:100px; height:96px; background: url(../img/vem-web-codding.png) no-repeat;text-align: center;}
#mobilna {width:100px; height:96px; background: url(../img/vem-web-seo.png) no-repeat;text-align: center;}
#podrujka {width:100px; height:96px; background: url(../img/vem-web-support.png) no-repeat;text-align: center;}


#wayWorkingLine {width:967px; height:1px; background: url(../img/vem-web-line2.png) no-repeat; margin-top:15px; margin-left:15px;}
/* End "way of working" part of the site */

/* Start Last five sites */
#LastSitesArena {width:950px; height:100%; overflow:hidden;  padding-top:60px;  padding-left:30px;}
.DescriptionTopArena {width:1000px; height:100%; overflow:hidden; margin-top:10px; margin-left:10px;}
.DescriptionTopArena h1 {color:#222; text-align:center; width:100%; font-size:18px; border-bottom:2px dashed #1B8CD0; padding-bottom:5px; margin-top:20px;  }
.DescriptionTopArena ul {list-style-type:none; width:100%;}
.DescriptionTopArena li {float:left; padding-left:10px; width:95%; }

#NavigationSites {width:275px; height:100%; float: left;}
#NavigationSites ul {list-style-type: none;}
#NavigationSites li {width:275px; height:51px; background: url(../img/reklama-site-button.png) no-repeat;  color: #777777; line-height:51px; text-align: center; display:block; margin-bottom:12px; padding-left:13px;}
#NavigationSites li:hover {background: url(../img/reklama-site-button.png) no-repeat; color:#bc4b1d; cursor:pointer;}
#NavigationSites li.active{background: url(../img/reklama-site-button-hover.png) no-repeat; color:#bc4b1d;}

#TechnologiesWork {width:103px; height:303px; float:left; background: url(../img/BackgroundTech.png) no-repeat; text-align:center;}
#TechnologiesWork ul {list-style-type: none;}
#TechnologiesWork li {padding-top:17px;}

#PicSiteArena {width:572px; height:413px; float:left; margin-top:-55px; }
/* End Last five sites */


.PromotionArena {width:915px; height:328px; background: url(../img/vem-web-promotion-background.png) no-repeat; overflow:hidden; margin-left:50px; margin-top:15px; margin-bottom:15px;}
.PromotionArena h3 { margin-top:32px; margin-left:140px; color:#1b8cd0;}
#FirstPromotion {display: block; float:left; width:200px; height:208px; background:url(../img/vem-web-promocia-flowers.png) no-repeat 0 0; margin-top:10px; margin-left:50px; cursor:pointer;}
#FirstPromotion:hover {background-position:0 -208px;}
 p.PromotionDescription {margin-top:-30px;}

#SecondPromotion {display: block; float:left; width:200px; height:208px; background:url(../img/vem-web-promocia-medical.png) no-repeat 0 0; margin-top:10px; margin-left:90px; cursor:pointer;}
#SecondPromotion:hover {background-position:0 -208px;}

#ThirdPromotion {display: block; float:right; width:200px; height:208px; background:url(../img/vem-web-promocia-law.png) no-repeat 0 0; margin-top:10px; margin-right:70px; cursor:pointer;}
#ThirdPromotion:hover {background-position:0 -208px;}

#DiscArena {width:915px;  overflow:hidden;}
#FirstDesc {float:left; width:210px; padding-left:70px; color:#931111; margin-top:30px; }
#SecondDesc {float:left; width:250px; padding-left:40px; color:#115193; margin-top:30px;}
#ThirdDesc {float:right; width:280px; padding-right:20px; color:#935211; margin-top:30px;}

#commentsArena {width:1000px; height:100%; overflow:hidden; margin-top:15px; position:relative;}
#comments {width:688px; height:221px; background: url(../img/vem-web-komentari-background.png) no-repeat; float:left; }
#comments p {width:670px; padding-top:10px; padding-right:10px; padding-left:10px; padding-top:10px; font-size:18px;}
#commentator {width: 210px; height:100%; float:left; padding-left:5px; text-align:center; padding-top:30px;}
a:link.website {float:right; text-decoration:none; color:#bc4d1c; position:absolute; bottom:10px; right:120px;}
a:visited.website {color:#bc4d1c;}
a:hover.website {text-decoration:underline;}
a:active.website {text-decoration: underline;}
#addOpinion {width:60px; height:221px; background: url(../img/vem-web-add-opinion.png) no-repeat; float:left; margin-left:-3px;}
#addOpinion:hover {background:url(../img/vem-web-add-opinion-hover.png) no-repeat; cursor:pointer;}

.addCommentArena { margin-top:15px; width:943px; height:318px; background: url(../img/vem-web-addCommentArena.png) no-repeat; margin-left:60px; padding-top:15px; padding-left:15px; display: none;}
.addCommentArena ul {list-style-type:none; overflow:hidden; width:700px;}
.addCommentArena li {float:left; padding-left:10px;}
.addCommentArena li.color {color: #1b8cd0; font-weight:bold;}
.addCommentArena input.FullName {background:transparent; border:1px solid #ccc; width:250px;}
.addCommentArena li.Symbol { color:#1b8cd0; font-size: 11px; float:right; padding-right:35px;}
.addCommentArena textarea.OpinionArena {background:transparent; border:1px solid #ccc; width:650px; height:150px;}
.addCommentArena li.button {float:right; margin-top:15px; padding-right:35px;}

#footer {background: url(../img/vem-web-footer-background.png) no-repeat; width:1000px; height:117px; margin-top:25px; overflow:hidden;}
#copyrightArena {width:300px;  float:left; font-size:11px; margin-top:50px; margin-left:30px;  color:#777777;}
#copyrightArena a:link , #copyrightArena a:visited { color:#777777; padding-left:80px; text-decoration:none; margin-top:10px;}
#copyrightArena a:hover , #copyrightArena a:active {text-decoration:underline;}
.vemLink {margin-top:10px;}
#logo {width:189px; float:left; margin-top:45px; margin-left:85px;}
#socialArena {width:170px; float:right; font-size: 11px; color:#777777; margin-right:30px; text-align:center;}
#socialArena p {margin-top:45px;}
#socialArena ul {list-style-type:none;  margin-left:18px;}
#socialArena li {float:left; }
#commentsArenaWrap {}
header{font-size:20px; text-align:center;}
.projectWrap{width:816px; height:204px; margin:0 auto;}
.project{width:180px; height:180px; float:left; position:relative; overflow:hidden; background:url("../projBG.png") center no-repeat; cursor:pointer; border-radius:15px; margin:10px;}
.projectCat img{ height:50px; text-align:middle; position:absolute; top:15px; left:0; z-index:5;}
.projectImg{width:400px;  position:absolute; z-index:2;} 
.projOverlay {width:200px; height:200px; position:absolute; z-index:10; background:url("../img/projOverlay.png");}
.serviceIcons{width:800px; margin:0 auto; height:320px; margin-bottom:50px;}
.service {width:160px; height:160px; float:left; padding-top: 5px; margin-top: 30px;}
.service img{width:140px; height:140px;}
.service p{width:140px; font-size:14px; text-align:center; font-weight:bold;}
#changeColorsWrap{position:fixed; bottom:0; right:0; width:200px; height:50px;}
.changeColors{width:50px; height:50px; float:left;}


#motto ul {list-style-type:none; width:100%; margin-top:5px; }
#motto li {float:left; padding-left:20px; width:95%; font-size:9px; margin-top:15px; }

#portWrap {display:none;}
#portPreview {width:950px; height:400px; overflow:hidden; border-radius:15px; background-color:#ccc; position:relative;}
#portInner {width:1000px; margin-left:0px; height:400px; bordel:1px solid #222; }
#portTechnologies {width:950px; height:40px; border-bottom:1px solid #999; padding-bottom:10px;}
#portTechnologies header{width:150px; height:40px; float:left; padding-top:10px;}
#portDescription {width:950px; height:200px; border-radius:15px; margin-bottom:10px; }
.innerPic {width:950px; float:left; height:auto; }
.innerPic img{width:950px; float:left; }
#portPreviewAbs{width:100%; height:100%; position:absolute;}

#leftArrowArea {width:200px; height:200px; left:0px; top:100px; z-index:1; position:absolute; display:none;}
#leftArrow{width:50px; height:50px; top:75px; position:absolute; z-index:2; cursor:pointer; background:url("../img/leftArrow.png");}

#rightArrowArea {width:200px; height:200px; right:0px; top:100px; z-index:1; position:absolute; display:none;}
#rightArrow{width:50px; height:50px; right:0px; top:75px; position:absolute; z-index:2; cursor:pointer; background:url("../img/rightArrow.png");}

#upArrowArea {width:200px; height:150px; left:375px; top:0px; z-index:1; position:absolute; display:none;}
#upArrow{width:50px; height:50px; right:75px; top:0px; position:absolute; z-index:2; cursor:pointer; background:url("../img/upArrow.png");}

#downArrowArea {width:200px; height:150px; left:375px; bottom:0px; z-index:1; position:absolute;}
#downArrow{width:50px; height:50px; right:75px; bottom:0px; position:absolute; z-index:2; cursor:pointer; background:url("../img/downArrow.png");}

.portAbs{cursor:pointer;}
.preSlideLeft{margin-right:50px;}
.preSlideRight{margin-right:-50px;}

.technology {width:50px; height:50px; margin-left:5px; float:left; position:relative; cursor:pointer;}
.technology img {margin-top:10px;}
.techAbs {posision:absolute; top:40px; left:100px; width:150px; height:150px; background-color:#222; border-radius:10px; display:none; font-size:18px; text-align:center; color:#999;}

#desc {width:735px; height:180px; float:left; padding-right:15px; font-size:18px; padding-top:20px;}
#portPrice {width:200px; height:200px; float:right; border-radius:15px; text-align:center; font-size:24px; color:#999; cursor:pointer;}
#portPrice p.text{margin-top:70px;}
p.price {margin-top:50px;}
.serviceWrap{width:800px; margin:0 auto; height:230px; position:relative;}
.serviceWrap h1{width:950px; height:30px; font-size:20px; position:absolute; top:20px; left:0px; color:#444;}
#WebSiteDevelopment {padding-left:150px; background:url('../img/websitedevelopment.png') left no-repeat; border-bottom:2px dashed #1B8CD0; padding-bottom:5px; position:relative;}
.service {background:url('../img/package.png') top no-repeat; width:200px; height:200px; float:left; cursor:pointer; position: relative;}
.service .title {margin:65px auto 0px auto; text-align:center; width:110px; }
.service:hover { background-position: 0 -200px; }
.service .price{text-align:center; width:190px; height:20px;bottom:85px; position:absolute;}
.service .priceTitle{margin-top:-8px;font-size:8px; width:190px; height:8px; bottom:110px; position:absolute;}
#WebSiteAddOns {padding-left:150px; background:url('../img/websiteaddons.png') left no-repeat; border-bottom:2px dashed #1B8CD0; padding-bottom:5px;}
#WebSiteMaintainence {padding-left:150px; background:url('../img/WebSiteMaintainence.png') left no-repeat; border-bottom:2px dashed #1B8CD0; padding-bottom:5px;}

#cartWrap{position:absolute; width:100%; height:auto; display:none; z-index:20; top:50px;  z-index:13;}
#cart {width:900px; margin:0 auto;border:1px solid #333; min-height:auto; position:absolute; background-color:rgba(255,255,255,0.9); z-index:8; margin-left:-450px; left:50%;}
#cart p{margin-top:15px;}
#cartL{width:450px; margin:0; float:left; height:auto; padding-bottom:60px;}
#cartR{width:450px; margin:0; float:left; height:auto;}
#cartR h1{margin-top:10px; width:450px; text-align:center; border-bottom:0px dashed #1B8CD0; padding-top:10px;}
#cartR input{ width:440px;}
#cartR label{margin-top:10px;}
#cartR textarea{margin-top:5px; width:428px; height:150px;}
#cartR button {display:none;}
#cartR form{height:420px;}
.total { font-size:20px; padding-top:10px; font-weight:bold; text-align:right; margin-left:50px; width:325px; margin-top:10px;}
.order {font-size:19px; margin-top:10px; margin-bottom:-9px; text-align:center; background:url("../img/order.jpg") no-repeat; background-position:68px 10px; height:40px; }
.success { font-size:25px; text-align:center; width:450px; margin-top:25%;}
#checkout {font-size:18px; margin-top:10px; color:#222; text-align:center; width:100px; cursor:none; font-weight:bold; height:100px; background: url("../img/checkout.png")no-repeat 0 0; margin: 0 auto;}
#checkout:hover{background-position:0 -100px;}
.close {position:absolute; top:5px; right:5px; cursor:pointer; background:url('../img/close.png'); width:50px; height:50px;}
#receipt {width:300px; float:left; margin:0px 75px; box-shadow: 3px 5px 7px #888888; background-color:#fff; display:none; margin-bottom:20px;}
#receipt p{float:right; width:230px; text-align:right;padding-left:20px; padding-right:50px; border-bottom:1px dashed #222; font-size:16px;}
#receipt h1 {font-size:18px; padding-left:20px;}
#ceniMenu {cursor:pointer;}
#editOrder{cursor:pointer; font-size:18px; color:#444; font-weight:bold; bottom:10px; left:0px; position:absolute; width:450px; text-align:center; background:url("../img/editPageOrder.jpg") no-repeat; height:30px; background-position:130px -2px;}
.lastOrder{color:#333;}
#content{position:absolute; left:-1000px;width:1000px; font-size:1vh;}