@charset "utf-8";


/* CSS Document */











@font-face {


    font-family: "Ostrich Bold";


    src: url('fonts/ostrich-black.eot');


    src: url('fonts/ostrich-blackd41d.eot?#iefix') format('embedded-opentype'),


         url('fonts/ostrich-black.html') format('woff'),


         url('fonts/ostrich-black.ttf') format('truetype'),


         url('fonts/ostrich-black.svg') format('svg');


    font-weight: 700;


    font-style: normal;


}





@font-face {


    font-family: "Open Sans";


    src: url('fonts/OpenSans-Regular-webfont.eot');


    src: url('fonts/OpenSans-Regular-webfontd41d.eot?#iefix') format('embedded-opentype'),


         url('fonts/OpenSans-Regular-webfont.html') format('woff'),


         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),


         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');


    font-weight: normal;


    font-style: normal;


}





@font-face {


    font-family: 'Open Sans Bold';


    src: url('fonts/OpenSans-Bold-webfont.eot');


    src: url('fonts/OpenSans-Bold-webfontd41d.eot?#iefix') format('embedded-opentype'),


         url('fonts/OpenSans-Bold-webfont.html') format('woff'),


         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),


         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');


    font-weight: normal;


    font-style: normal;


}





@font-face {


    font-family: 'Airship';


    src: url('fonts/airship_27-regular-webfont.eot');


    src: url('fonts/airship_27-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),


         url('fonts/airship_27-regular-webfont.html') format('woff'),


         url('fonts/airship_27-regular-webfont.ttf') format('truetype'),


         url('fonts/airship_27-regular-webfont.svg#airship_27regular') format('svg');


    font-weight: normal;


    font-style: normal;





}





body


{


	margin: 0 auto;


	height: 100%;


	text-align: center;


	/*background:#000 url(images/box-dark.png) repeat;*/


	background:#000 url(images/box-dark.jpg) repeat;


	-webkit-text-size-adjust:100%;


}





html 


{


	font-family: "Open Sans", sans-serif;


	font-size: 12px;


	line-height: 18px;


	color: #313131;


	height: 100%;


	min-height: 100%;


}








::selection{


	background: #ff0066;


	color:#ccc;


}





::-moz-selection {


	background: #ff0066;


	color:#ccc;


}





webkit::-webkit-selection {


	background: #ff0066;


	color:#ccc;


}








*


{


	margin: 0;


	padding: 0;


	border:none;


	outline:none;


}





h1, h2, h3, h4


{


	font-family: "Ostrich Bold";


	font-weight: normal;


}





a


{


	text-decoration: none;


	outline: none;


	transition: color .20s ease-in-out;


   	-moz-transition: color .20s ease-in-out;


   	-webkit-transition: color .20s ease-in-out;


}





input, textarea, select


{


	font-family: "Open Sans";


	font-size: 12px;


}





.Logo


{


	position: absolute;


	top:30px;


	left: 30px;


	z-index: 10;


}





.vAligner > * 


{


	display: inline-block;


	vertical-align: middle;


}





.vAligner:after 


{


	content: "";


	display: inline-block;


	vertical-align: middle;


	height: 100%;


	width: 0px;


}





#Intro


{


	position: relative;


	height: 100%;


	vertical-align: middle;


	background: url(images/black-gray-bg1.jpg) no-repeat top right;


	background-size: contain;


	color: #fff;


	


}





.page01_bg


{


	/*position: relative;*/


	height: 100%;


	/*vertical-align: middle;*/


	background: url(images/center_bg.png) repeat;


	background-position:left top;


	/*background-size: contain;*/


	color: #fff;


	width:100%;


}


.page02_bg


{


	/*position: relative;*/


	height: 100%;


	/*vertical-align: middle;*/


	background: url(images/center_bg2.png) no-repeat;


	background-position:left top;


	/*background-size: contain;*/


	color: #001821;


	width:100%;


}


.page03_bg


{


	/*position: relative;*/


	height: 100%;


	/*vertical-align: middle;*/


	background: url(images/sparkles.png) no-repeat;


	background-position:left top;


	/*background-size: contain;*/


	color: #001821;


	width:100%;


}





#Intro .Pink1


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


	z-index:1;


}





#Intro .Pink1 img


{


	position: absolute;


	top:0%;


	left: 10%;


	width: 80%;


}





#Intro .Pink2


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Intro .Pink2 img


{


	position: absolute;


	bottom:30%;


	right: 30%;


	width: 55%;


}





#Intro .Pink5


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


	z-index:2;


}





#Intro .Pink5 img


{


	position: absolute;


	top:0%;


	left:10%;


	/*right: 30%;*/


	width: 80%;


}





#Intro .Pink4


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Intro .Pink4 img


{


	position: absolute;


	/*bottom:15%;


	right: 10%;


	width: 25%;*/


	top:0%;


	left:10%;


	/*right: 30%;*/


	width: 80%;


}





#Intro .Video


{


	width: 100%;


	/*max-width: 640px;*/


	padding-bottom: 70px;


	/*padding-top:20px;*/


}





#Intro .Video h2


{


	position: relative;


	text-align: right;


	color: #fff;


	font-size: 600%;


	line-height: 100%;


	z-index: 1;


	padding: 2% 2% 0% 0;


}





#Intro .Video h2 .Paint


{


	color: #ed1568;


}








#Intro .Video .VideoBox


{


	position: relative;


	/*padding: 30px 0;*/


}


.VideoBox{}





#Intro .Video .VideoBox .VideoGlow


{


	/*position: absolute;*/


	/*left: -73px;


	left: 198px;*/


	/*top:-200px;*/


}


.VideoGlow


{


	/*top:-114px !important;


	width:88%;*/


	width:70%;


}





#Intro .Video .VideoBox #Player


{


	position: relative;


	width: 630px;


	height: 350px;


	margin: 5px;


}





#Intro .Video .VideoBox iframe


{


	position: relative;


	border: none;


}





#Intro .Video .VideoBox .PlayBtn


{


	position: absolute;


	top:30px;


	left: 0;


	width: 640px;


	height: 360px;


}





#Intro .Video p


{


	position: relative;


	text-align: center;


	font-size: 14px;


	line-height: 20px;


} 





#Intro .Video p strong


{


	font-family: "Open Sans Bold";


	font-weight: normal;


}








#Coding


{


	position: relative;


	height: 100%;


	/*background: #e4e3e1 url(images/gray-bg.jpg) repeat ;*/


	background-color:#1494c5;


}





#Coding .Wrap


{


	position: relative;


	width: 100%;


	height: 100%;


	background: url(images/gray-white-bg.jpg) no-repeat top right;


	background-size: contain;


}





#Coding .Content


{


	position: relative;


	display: inline-block;


	height: 100%;


	width: 80%;


	z-index: 10;


	text-align: center;


}





#Coding .Content .Heading


{


	position: relative;


	display: inline-block;


	text-align: right;


	width: 40%;


	padding-right: 5%;


}





#Coding .Content h4


{


	position: relative;


	font-family: "Open Sans";


	font-size: 200%;


	line-height: 100%;


	color: #016017;


	text-shadow:#25a5d6 1px 1px;


}





#Coding .Content h3


{


	position: relative;


	font-size: 600%;


	line-height: 98%;


}





#Coding .Content h2


{


	position: relative;


	font-size: 950%;


	line-height: 60%;


	color: #016017;


	text-shadow:#25a5d6 1px 1px;


}





#Coding .Content h2 span


{


	font-family: "Open Sans Bold";


	font-size: 95%;


	color: #313131;


}





#Coding .Content p


{


	position: relative;


	font-size: 180%;


	line-height: 150%;


	padding-top: 5%;


	padding-bottom: 60%;


}





#Coding .Matija


{


	position: relative;


	max-height: 100%;


	max-width: 70%;


	bottom: 0;


	vertical-align: top;


	margin-left: -4%;


	padding-top:30px;


}








#Coding .Content .Heading .Database


{


	position: relative;


	z-index: 10;


	width: 35%;


	left: 0;


	bottom: 27%;


}





#Coding .Content .Heading .Database img


{


	width: 100%;


	margin: 0 -190% 0 0;


}





#Coding .Content .Heading .Asp


{


	position: relative;


	z-index: 10;


	width: 32%;


	left: 0;


	bottom: 22%;


}





#Coding .Content .Heading .Asp img


{


	width: 100%;


	margin:  0 0;


}





#Coding .Content .Heading .Java


{


	position: relative;


	z-index: 10;


	width: 28%;


	left: 0;


	bottom: 32%;


}





#Coding .Content .Heading .Java img


{


	width: 100%;


	margin: 0 -130% 0 0;


}





#Coding .Content .Heading .Html


{


	position: relative;


	z-index: 10;


	width: 45%;


	left: 0;


	bottom: 2%;


}





#Coding .Content .Heading .Html img


{


	width: 100%;


	margin: 0 -60% 0 0;


}








#Coding .Blue1


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Coding .Blue1 img


{


	position: absolute;


	top:0%;


	right: 10%;


	width: 25%;


}





#Coding .Blue2


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Coding .Blue2 img


{


	position: absolute;


	top:20%;


	left: 20%;


	height: 35%;


}





#Coding .Blue3


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Coding .Blue3 img


{


	position: absolute;


	bottom:25%;


	right: 25%;


	width: 5%;


	z-index: 20;


}




















#Design


{


	position: relative;


	height: 100%;


	background:#fff url(images/white-black-bg.jpg) no-repeat top right;


	background-size: contain;


}





#Design .Content


{


	position: relative;


	height: 100%;


	width: 80%;


	text-align: center;


}





#Design .Content .Heading


{


	position: relative;


	text-align: right;


	width: 40%;


	padding-right: 2%;


}





#Design .Content h4


{


	font-family: "Open Sans";


	font-size: 200%;


	line-height: 100%;


	color: #ed1568;


}





#Design .Content h3


{


	font-size: 470%;


	line-height: 98%;


}





#Design .Content h2


{


	font-size: 950%;


	line-height: 70%;


	color: #ed1568;


}





#Design .Content h2 span


{


	color: #313131;


}





#Design .Content p


{


	font-size: 180%;


	line-height: 150%;


	padding-top: 5%;


	padding-bottom: 60%;


}





#Design .Dejan


{


	position: relative;


	max-height: 100%;


	max-width: 99%;


	bottom: 0;


	vertical-align: bottom;


	margin-right: -50%;


}








#Design .Content .Heading .Illustrator


{


	position: relative;


	z-index: 10;


	width: 35%;


	left: 0;


	bottom: 27%;


}





#Design .Content .Heading .Illustrator img


{


	width: 100%;


	margin: 0 -190% 0 0;


}





#Design .Content .Heading .Photoshop


{


	position: relative;


	z-index: 10;


	width: 32%;


	left: 0;


	bottom: 22%;


}





#Design .Content .Heading .Photoshop img


{


	width: 100%;


	margin:  0 0;


}





#Design .Content .Heading .Dreamweaver


{


	position: relative;


	z-index: 10;


	width: 28%;


	left: 0;


	bottom: 32%;


}





#Design .Content .Heading .Dreamweaver img


{


	width: 100%;


	margin: 0 -130% 0 0;


}





#Design .Content .Heading .Indesign


{


	position: relative;


	z-index: 10;


	width: 45%;


	left: 0;


	bottom: 2%;


}





#Design .Content .Heading .Indesign img


{


	width: 100%;


	margin: 0 -60% 0 0;


}








#Design .White1


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Design .White1 img


{


	position: absolute;


	top:0%;


	right: 5%;


	width: 35%;


}





#Design .White2


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Design .White2 img


{


	position: absolute;


	bottom:8%;


	right: 25%;


	width: 10%;


}








#Design .White3


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Design .White3 img


{


	position: absolute;


	top:10%;


	left: 5%;


	width: 40%;


}

















#Quote


{


	position: relative;


	height: 100%;


}





#Quote .Content


{


	position: relative;


	width: 45%;


	padding-bottom: 70px;


}





#Quote .Content h2


{


	position: relative;


	color: #fff;


	font-size: 800%;


	text-align: right;


	line-height: 100%;


}





#Quote .Content h2 span


{


	color: #ed1568;


}





#Quote .Content p


{


	color: #878787;


	position: relative;


	font-size: 180%;


	line-height: 150%;


	padding: 5% 0 5% 30%;


	text-align: right;


}





#Quote .Content p a


{


	color: #ed1568;


}





#Quote .Content p a:hover


{


	text-decoration: underline;


}





#Quote .Content .QuoteBtn


{


	position: relative;


	height: 40px;


}





#Quote .Content .QuoteBtn a


{


	position: relative;


	display: inline-block;


	width: 30%;


	height: 40px;


	float: right;


	margin-right: -10%;


}





#Quote .Content .QuoteBtn img


{


	width: 100%;


	margin-left: -120%;


}








#Quote .Pink6


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Quote .Pink6 img


{


	position: absolute;


	bottom:8%;


	left: 20%;


	width: 20%;


}





#Quote .Pink7


{


	position: relative;


	width: 100%;


	height: 100%;


	left: 0;


}





#Quote .Pink7 img


{


	position: absolute;


	top: 10%;


	right: 15%;


	width: 60%;


}











#Footer


{


	position: fixed;


	left: 0;


	bottom: 0;


	height: 48px;


	width: 100%;





}





#Footer p


{


	float: left;


	font-size: 14px;


	text-align: left;


	margin-left: 30px;


	color: #575757;


	line-height: 35px;


}





#Footer .Nav


{


	position: absolute;


	left: 0;


	right: 0;


	top:3px;


	font-size: 20px;


	line-height: 35px;


	padding: 0 200px;


	font-family: "Ostrich Bold";


}





#Footer .Nav li


{


	display: inline-block;


	margin: 0 0.5%;


	padding-left: 28px;


	line-height: 27px;


	background: url(images/nav-separator.png) no-repeat top left;


}





#Footer .Nav li a


{


	color: #575757;


}





#Footer .Nav li a:hover


{


	color: #ed1568;


}








#Footer .Socials


{


	position: relative;


	float: right;


	height: 35px;


	margin-right: 30px;


}





#Footer .Socials a


{


	position: relative;


	float: left;


	width: 35px;


	height: 35px;


	margin-right: 5px;


	background: url(images/socials.png) no-repeat;


}





#Footer .Socials a.YouTube


{


	background-position: 0 0;


}





#Footer .Socials a.YouTube:hover


{


	background-position: 0 -35px;


}





#Footer .Socials a.Twitter


{


	background-position: -35px 0;


}





#Footer .Socials a.Twitter:hover


{


	background-position: -35px -35px;


}





#Footer .Socials a.Tumblr


{


	background-position: -70px 0;


}





#Footer .Socials a.Tumblr:hover


{


	background-position: -70px -35px;


}

















#InteriorWhite


{


	background: #fff url(images/black-corner.png) no-repeat top left;


	min-width: 940px;


	height: 100%;


	min-height: 100%;


}





#InteriorWhite .Wrap


{


	position: relative;


	width: 100%;


	height:auto !important; /* real browsers */


	height:100%; /* IE6: treaded as min-height*/


	min-height:100%; /* real browsers */


}





#InteriorWhite .WhiteBottom


{


	position: absolute;


	bottom: 0;


	left: 400px;


	width: 25%;


	z-index: 5;


}





#InteriorWhite .WhiteMiddle


{


	position: absolute;


	bottom: 45%;


	left: 800px;


	width: 20%;


}





#InteriorWhite .WhiteTop


{


	position: absolute;


	top: 80px;


	left: 900px;


	width: 10%;


}





#InteriorWhite .WebDesign


{


	position: relative;


	float: left;


	width: 700px;


	margin-left: -200px;


}








#InteriorWhite .GraphicDesign


{


	position: relative;


	float: left;


}





#InteriorWhite .Branding


{


	position: relative;


	float: left;


	width: 500px;


}











#InteriorBlack


{


	background: #171717 url(images/white-corner.png) no-repeat top left;


	min-width: 940px;


	height: 100%;


	min-height: 100%;


}





#InteriorBlack .Wrap


{


	position: relative;


	width: 100%;


	height:auto !important; /* real browsers */


	height:100%; /* IE6: treaded as min-height*/


	min-height:100%; /* real browsers */


}





#InteriorBlack .PinkBottom


{


	position: absolute;


	bottom: 0;


	right: 15%;


	width: 25%;


}





#InteriorBlack .PinkMiddle


{


	position: absolute;


	bottom: 40%;


	left: 150px;


	width: 25%;


}





#InteriorBlack .PinkTop


{


	position: absolute;


	top: 200px;


	left: 950px;


	width: 5%;


}





#InteriorBlack .PinkTop1


{


	position: absolute;


	top: 60%;


	left: 250px;


	width: 5%;


}





#InteriorBlack .PinkMiddle1


{


	position: absolute;


	top: 250px;


	left: 800px;


	width: 25%;


}





#InteriorBlack .PinkBottom1


{


	position: absolute;


	bottom: 10%;


	right: 20%;


	width: 25%;


}








.InteriorNav


{


	position: relative;


	float: left;


	margin: 180px 0 0 30px;


	list-style: none;


	text-align: left;


	font-family: "Ostrich Bold";


	font-size: 29px;


	line-height: 35px;


	width: 250px;


	height: 100%;


}








.InteriorNav li


{


	display: inline-block;


	margin: 10px 0;


	padding-left: 20px;


	line-height: 27px;


	background: url(images/nav-separator.png) no-repeat top left;


}





.InteriorNav li a


{


	color: #575757;


}





.InteriorNav li a:hover


{


	color: #ed1568;


}








.InteriorContent


{


	position: relative;


	padding: 190px 0 0 430px;


	z-index: 5;


}





.InteriorContent .MainContent


{


	position: relative;


	float: left;


	width: 500px;


}





.InteriorContent .Tabs


{


	position: relative;


	float: left;


	width: 170px;


	height: 35px;


	line-height: 42px;


	color: #6c6c6c;


	font-family: "Ostrich Bold";


	font-size: 22px;


	margin-right: -15px;


	z-index: 5;


	background: url(images/work-tabs.png) no-repeat 0 -35px;


}








.InteriorContent .Tabs.Active


{


	color: #fff;


	background-position: 0 0;


}





.InteriorContent h2


{


	position: relative;


	float: left;


	width: 100%;


	font-size: 80px;


	line-height: 80px;


	padding: 80px 0 20px;


	color: #171717;


	text-align: left;


}








.InteriorContent p


{


	position: relative;


	float: left;


	width: 100%;


	font-size: 18px;


	line-height: 26px;


	text-align: left;


	padding-bottom: 40px;


	color: #575757;


}





#Footer.InteriorFooter


{


	height: 90px;


}





#Footer.InteriorFooter .Socials


{


	position: relative;


	float: left;


	margin-left: 30px;


}





#Footer.InteriorFooter p


{


	width: 100%;


}








.ClientsPage .MainContent


{


	padding-bottom: 90px;


}





.ClientsPage h2


{


	color: #fff;


	padding-top: 0;


}





.ClientsPage h2 span


{


	color: #ed1568;


}





.ClientsPage .TestimonialBox


{


	position: relative;


	float: left;


	width: 100%;


	padding: 15px 0;


	border-bottom: 1px solid #272727;


}





.ClientsPage .TestimonialBox p


{


	font-size: 12px;


	line-height: 16px;


	color: #fff;


	padding: 0;


}





.ClientsPage .TestimonialBox p span


{


	color: #ed1568;


}





.ClientsPage .RequestQuoteBtn


{


	position: relative;


	float: right;


	margin: 15px 0 0 0;


}











.QuotePage .MainContent


{


	padding-bottom: 90px;


}





.QuotePage h2


{


	color: #fff;


	padding-top: 0;


}





.QuotePage h2 span


{


	color: #ed1568;


}








.QuotePage .InputRow


{


	position: relative;


	float: left;


}





.QuotePage .LV_validation_message


{


	padding-left: 10px;


	line-height: 40px;


	font-size: 24px;


	color: #ed1568;


}





.QuotePage .MainInput


{


	position: relative;


	float: left;


	padding: 13px 35px;


	width: 315px;


	background: url(images/input.png) no-repeat 0 0;


	margin-bottom: 15px;


	color: #999;


}





.QuotePage .MainInput:focus


{


	color: #ed1568;


}





.QuotePage textarea.MainInput


{


	padding: 13px;


	background: #313131;


	resize: none;


	height: 120px;


	width: 354px;


	margin-left: 5px;


}





.QuotePage .Security


{


	position: relative;


	float: left;


	width: 160px;


	padding-right: 340px;


	line-height: 40px;


}





.QuotePage .Security label


{


	position: relative;


	float: left;


	font-size: 18px;


	color: #575757;


	font-weight: normal;


	margin:0 10px;


}





.QuotePage .Security p


{


	position: relative;


	float: left;


	width: auto;


	font-size: 18px;


	color: #575757;


	margin-left: 5px;


	text-transform: uppercase;


}





.QuotePage .Security p img


{


	margin-top: 5px;


}





.QuotePage .Security .LV_validation_message


{


	float: right;


}





.QuotePage .Security .MainInput


{


	width: 20px;


	text-align: center;


	font-size: 20px;


	padding: 6px 4px 6px 6px;


	color: #ed1568;


	background: #313131;


	font-family: "Airship";


	font-weight: normal;


}





.QuotePage .SubmitBtn


{


	float: right;


	margin-right: 120px;


}








.mark_text{color: #575757; font-size: 180%; line-height: 150%; padding: 5% 0 5% 30%; position: relative; text-align: right;


font-family: "Open Sans",sans-serif;}


.top_mark{width:70%; float:right; height:116px; background:url(images/page2/top_market.png) center no-repeat;}


.web_mark{width:70%; float:right; height:33px; background:url(images/page2/web_txt.png) center no-repeat; margin-top:-20px;}


.bottom_mark{width:70%; float:right; height:126px; background:url(images/page2/bottom_market.png) center no-repeat; margin-top:-30px;}