/**********************************
Universal Styles             	
***********************************/  

@import url('reset.css');

/* For Sticky Footer */
/*
html {
	height: 100%;
}
*/
.runner_icon_1 {
	transition: width 1.5s linear,
				height 1.5s linear;

	-webkit-transition: width 1.5s linear,
				height 1.5s linear;
}


/*V2*/
* {
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
}

div#bg_white {
	background-color: rgba(255,255,255,0);

	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -10;

	width: 100%;
	height: 100%;
}

body {
	background-color: #a9a9a9;   
    background-image: linear-gradient(top, #a9a9a9 0%, #CCC 100%);
    background-image: -webkit-linear-gradient(top, #a9a9a9 0%, #CCC 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a9a9a9), to(#CCC));
    background-image: -moz-linear-gradient(top, #a9a9a9 0%, #CCC 100%);
    background-image: -o-linear-gradient(top, #a9a9a9 0%, #CCC 100%);
    background-image: -ms-linear-gradient(top, #a9a9a9 0%, #CCC 100%);

   	font-family: helvetica;

   	/* For Sticky Footer
  	min-height: 100%;
  	display: flex;
  	flex-direction: column;   

  	background-repeat: no-repeat;
    background-attachment: fixed;	
    */

}

::selection {
  /*background: #4D4D4D;*/
  background-color: #000;
  color: #FFF;
}

::-moz-selection {
  /*background: #4D4D4D;*/
  background-color: #000;
  color: #FFF;
}

a {
	/*color: #0000CC;*/
	color: #0000B2;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h2 {
	font-size: 2.5em;
	margin-bottom: 10px;
}

h3 {
	line-height: 37px;
	margin-bottom: 10px;
}

p {
	line-height: 30px;
}

strong {
	font-weight: bold;
}

.circle_container {
	width: 214px;
	height: 214px;

	cursor: crosshair;

	float: left;
	position: relative;
	top: 0;

	transition: top 0.5s linear;
	-webkit-transition: top 0.5s linear;
	-moz-transition: top 0.5s linear;
	-o-transition: top 0.5s linear;
	-ms-transition: top 0.5s linear;
}

#social_media .categorie_port:last-child {
	margin-right: 0px;
}

/*
.circle_container:nth-child(3n+1) {
	margin-right: 0px;
}
*/

.page_icon {
	/*
	width: 30px;
	height: 30px;
	background-color: #0000FF;
	display: inline-block;
	text-align: center;
	line-height: 30px;
	color: #FFF;
	font-size: 1.3em;
	text-shadow: 0px 0px 4px #000;
	margin-right: 20px;
	*/
}

.circle_container a,
.categorie_port a {
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
}

.icon {
	width: 30px;
	height: 30px;
	position: relative;
	background-color: #0000FF;
	text-align: center;
	line-height: 30px;
	color: #FFF;
	font-size: 1.3em;
	text-shadow: 0px 0px 4px #000;
	display: block;
	/*display: inline-block;*/

	box-shadow: 0px 0px 1.5px #000;
	-webkit-box-shadow: 0px 0px 1.5px #000;
	-moz-box-shadow: 0px 0px 1.5px #000;
	-o-box-shadow: 0px 0px 1.5px #000;
	-ms-box-shadow: 0px 0px 1.5px #000;
}

.circle_container .icon {
	position: absolute;
	top: 92px;
	left: 92px;
	z-index: -1;
}

.icon a {
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
}

.circle_container .outer_circle {
	width: 200px;
	height: 200px;
	cursor: pointer;

	border: 7px solid rgba(0,0,255,1);
	border-top: solid 7px rgba(0,0,255,0);
	border-bottom: solid 7px rgba(0,0,255,0);

	border-radius: 1000px;
	-webkit-border-radius: 1000px;
	-moz-border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;

	transition: transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -moz-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
}

.circle_container .outer_circle .inner_circle {
	width: 120px;
	height: 120px;
	margin: 33px auto;

	border: 7px solid rgba(0,0,255,1);
	border-left: solid 7px rgba(0,0,255,0);
	border-right: solid 7px rgba(0,0,255,0);

	border-radius: 1000px;
	-webkit-border-radius: 1000px;
	-moz-border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;
	position: relative;

	transition: transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -moz-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
}

div.software_cd {
	width: 150px;
    height: 150px;
    
    overflow: hidden;

    background-color: #C0C0C0;
    cursor: crosshair;
    border: 1.2px solid #000;

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

    position: relative;
    z-index: 15;

	box-shadow: 0px 0px 50px #262626;
	-webkit-box-shadow: 0px 0px 50px #262626;
	-moz-box-shadow: 0px 0px 50px #262626;
	-o-box-shadow: 0px 0px 50px #262626;
	-ms-box-shadow: 0px 0px 50px #262626;

    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;

   	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

div.software_cd div.cd_contents {
	width: 150px;
    height: 150px;
    overflow: hidden;
    z-index: 10;

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

	position: absolute;
	top: 0px;
	left: 0px;

	/*
	When s3 button clicked
	animation: cd_spin 1s linear 5;
	-webkit-animation: cd_spin 1s linear 5;
	-moz-animation: cd_spin 1s linear 5;
	-ms-animation: cd_spin 1s linear 5;
	-o-animation: cd_spin 1s linear 5;
	*/
}

/*
div.software_cd:hover div.cd_contents {
	animation: cd_spin 0.5s linear infinite;
	-webkit-animation: cd_spin 0.5s linear infinite;
	-moz-animation: cd_spin 0.5s linear infinite;
	-ms-animation: cd_spin 0.5s linear infinite;
	-o-animation: cd_spin 0.5s linear infinite;
}

div.software_cd:hover {
	transform: scale(1.4);
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-o-transform: scale(1.4);
	-ms-transform: scale(1.4);

	box-shadow: 0px 0px 125px #000;
	-webkit-box-shadow: 0px 0px 125px #000;
	-moz-box-shadow: 0px 0px 125px #000;
	-o-box-shadow: 0px 0px 125px #000;
	-ms-box-shadow: 0px 0px 125px #000;
}
*/

div.software_cd:after {
	content: " ";
	width: 150px;
	height: 150px;
	position: absolute;
    top: 0;
    left: 0;
	z-index: 5;

	background: linear-gradient(right, transparent 50%,  rgba(255,255,255,0.4) 50%);
	background: -webkit-linear-gradient(right, transparent 50%,  rgba(255,255,255,0.4) 50%);
    background: -webkit-gradient(linear, 100% 0%, 0% 0%, color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.4)));
	background: -moz-linear-gradient(right, transparent 50%,  rgba(255,255,255,0.4) 50%);
	background: -o-linear-gradient(right, transparent 50%,  rgba(255,255,255,0.4) 50%);
	background: -ms-linear-gradient(right, transparent 50%,  rgba(255,255,255,0.4) 50%);
	
	border-radius: 100% 0 0 100%;
	-webkit-border-radius: 100% 0 0 100%;
	-moz-border-radius: 100% 0 0 100%;
	-ms-border-radius: 100% 0 0 100%;
	-o-border-radius: 100% 0 0 100%;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}

/* CD spin begin
@keyframes cd_spin_begin {
	0% {
	    transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}	
}

@-webkit-keyframes cd_spin_begin {
	0% {
	    -webkit-transform: rotate(0deg);
	}
	
	100% {
		-webkit-transform: rotate(360deg);
	}	
}

@-moz-keyframes cd_spin_begin {
	0% {
	    -moz-transform: rotate(0deg);
	}
	
	100% {
		-moz-transform: rotate(360deg);
	}	
}

@-o-keyframes cd_spin_begin {
	0% {
	    -o-transform: rotate(0deg);
	}
	
	100% {
		-o-transform: rotate(360deg);
	}	
}

@-ms-keyframes cd_spin_begin {
	0% {
	    -ms-transform: rotate(0deg);
	}
	
	100% {
		-ms-transform: rotate(360deg);
	}	
}
 */

@keyframes cd_spin {
	0% {
	    transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}	
}

@-webkit-keyframes cd_spin {
	0% {
	    -webkit-transform: rotate(0deg);
	}
	
	100% {
		-webkit-transform: rotate(360deg);
	}	
}

@-moz-keyframes cd_spin {
	0% {
	    -moz-transform: rotate(0deg);
	}
	
	100% {
		-moz-transform: rotate(360deg);
	}	
}

@-o-keyframes cd_spin {
	0% {
	    -o-transform: rotate(0deg);
	}
	
	100% {
		-o-transform: rotate(360deg);
	}	
}

@-ms-keyframes cd_spin {
	0% {
	    -ms-transform: rotate(0deg);
	}
	
	100% {
		-ms-transform: rotate(360deg);
	}	
}


/*
div.software_cd:hover .cd_contents {
	animation: cd_spin 0.5s linear infinite;
	-webkit-animation: cd_spin 0.5s linear infinite;
	-moz-animation: cd_spin 0.5s linear infinite;
	-ms-animation: cd_spin 0.5s linear infinite;
	-o-animation: cd_spin 0.5s linear infinite;
}

div.software_cd:not(:hover) .cd_contents {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
}
*/

div.software_cd div.cd_circle {
	width: 49px;
	height: 49px;
	background-color: rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.5);

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

    position: relative;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25.5px 0 0 -25.5px;
}

div.software_cd div.cd_circle div.cd_hole {
	height: 20px;
	width: 20px;
	/*background-color: #222;*/
	background-color: #000;

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	z-index: 10;
}

/**********************************
Header
**********************************/  

header#main_header {
	width: 100%;
	background-color: #FFF;
	padding: 25px 0px;
	position: relative;

	box-shadow: 0px 0px 7px #000;
	-webkit-box-shadow: 0px 0px 7px #000;
	-moz-box-shadow: 0px 0px 7px #000;
	-ms-box-shadow: 0px 0px 7px #000;
	-o-box-shadow: 0px 0px 7px #000;

	position: relative;
	z-index: 15;
}

header#main_header:after {
    content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

/*Main Nav Font*/
@font-face {
    font-family: 'HelsinkiRegular';
    src: url('helsinki-webfont.eot');
    src: url('helsinki-webfont.eot?#iefix') format('embedded-opentype'),
         url('helsinki-webfont.woff') format('woff'),
         url('helsinki-webfont.ttf') format('truetype'),
         url('helsinki-webfont.svg#HelsinkiRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

header#main_header a#logo_container {
	display: block;
	float: left;
	/*margin-top: 10px;*/
	margin-left: 20px;
	/*margin-left: 40px;*/
}

header#main_header img::selection {
	background: none;
	color: none;
}

header#main_header img::-moz-selection {
	background: none;
	color: none;
}

header#main_header img {
	/*max-width: 490px;*/
	max-width: 520px;
	max-height: 100%;

	/*
	width: 420px;
	height: 145px;

	width: 382px;
	height: 132px;
	*/
}

header#main_header nav#main_nav {
	margin-top: 125px;
	margin-right: 40px;
	padding-bottom: 25px;
	float: right;
	font-family: 'HelsinkiRegular';
	font-size: 1.2em;
}

header#main_header nav#main_nav:after {
    content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

header#main_header nav#main_nav li {
	float: left;
	margin-left: 20px;
	text-shadow: 0px -1px 1px #000;
}

header#main_header nav#main_nav li:first-child {
	margin-left: 0px !important;
}

header#main_header nav#main_nav li a {
	color: #0000CC;
	padding: 6px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

header#main_header nav#main_nav li a:hover {
	color: #FFF;
	background-color: blue;
	text-decoration: none;
}

/**********************************
Main Content
**********************************/

section#main_content {
	margin: 40px auto 0px auto;
	width: 960px;

	position: relative;
	z-index: 15;

	/* For Sticky Footer 
	flex: 1;
	*/
}

section#main_content:after {
    clear: both; 
    visibility: hidden;
    content: "";
    display: block;
}

section.white_page {
	width: 930px;
	padding: 15px;
	margin-top: 50px;
	background-color: #FFF;

	box-shadow: 0px 0px 15px #000;
	-webkit-box-shadow: 0px 0px 15px #000;
	-moz-box-shadow: 0px 0px 15px #000;
	-o-box-shadow: 0px 0px 15px #000;
	-ms-box-shadow: 0px 0px 15px #000;

	transition: box-shadow 0.2s linear;
	-webkit-transition: box-shadow 0.2s linear;
	-moz-transition: box-shadow 0.2s linear;
	-o-transition: box-shadow 0.2s linear;
	-ms-transition: box-shadow 0.2s linear;
}

section.white_page:hover {
	box-shadow: 0px 0px 30px #000;
	-webkit-box-shadow: 0px 0px 30px #000;
	-moz-box-shadow: 0px 0px 30px #000;
	-o-box-shadow: 0px 0px 30px #000;
	-ms-box-shadow: 0px 0px 30px #000;
}

section.white_page h3 {
	/*
	border-bottom: 10px solid #0000FF;
	margin-bottom: 10px;
	padding-bottom: 10px;
	*/
}

section.white_page p {
	margin-bottom: 10px;
}

section#web_WP {
	padding-bottom: 45px;
}

section#slide_show {
	width: 1210px; /* Considering Arrow Move Effect On Both Sides +30 */
	/*width: 1180px;*/
	/*width: 1260;*/
	height: 400px;
	position: relative;
	z-index: 15;
	margin: 50px auto 0px auto;
}

section#slide_show #slide_show_view {
	width: 1060px;
	height: 400px;
	margin: 0 auto;
	position: relative;

	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	-ms-box-shadow: 0px 0px 10px #000;
	-o-box-shadow: 0px 0px 10px #000;
}

section#slide_show .slide {
	/*
	width: 1060px;
	height: 400px;
	*/
	width: 1000px;
	height: 350px;
	padding: 25px 30px;

	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;

	transition: opacity 2s linear;
	-webkit-transition: opacity 2s linear;
	-moz-transition: opacity 2s linear;
	-o-transition: opacity 2s linear;
	-ms-transition: opacity 2s linear;
}

section#slide_show h2 {
	font-size: 2.5em;
	width: 500px;
	text-shadow: 0px -1px 1px #000;
	color: #FFF;
	line-height: 50px;
	padding-bottom: 30px;
	border-bottom: 5px solid #000;
}

section#slide_show h2#slogan {
	width: 100%;
	text-align: center;
	border: none;

  	position: relative;
	top: 50%;

	padding: 0px;
	margin: 0px;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

section#slide_show #slide_show_view img {
	max-width: 480px;
	max-height: 350px;	
}

section#slide_show a.slide_button {
	/*width: 140px;*/
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	background-color: #FFF;
	color: #545454;
	padding: 10px;
	border: solid 5px #545454;
	margin-top: 25px; /*old 20px*/
	font-size: 1.3em;

	position: relative;
	z-index: 3;

	transition: background-color 0.25s linear;
	-webkit-transition: background-color 0.25s linear;
	-moz-transition: background-color 0.25s linear;
	-o-transition: background-color 0.25s linear;
	-ms-transition: background-color 0.25s linear;
}

section#slide_show a.slide_button:hover {
	background-color: #545454;
	color: #FFF;
	text-decoration: none;
}

section#slide_show #s1 {
	background-color: #0000FF;
	width: 1050px;
	height: 390px;
	padding: 5px;
	opacity: 1;
	/*z-index: 5;*/
}

section#slide_show #s2 {
	background-color: #FFF;
}

section#slide_show #s2 div.text_container {
	float: left;
}

section#slide_show #s2 h2 {
	color: #0000FF !important;
}

section#slide_show #s2 img {
	float: right;
}

section#slide_show #s3 {	
	width: 1060px;
	height: 400px;
	background-color: #009900;
	padding: 0px 0px;
	overflow: hidden;
}

section#slide_show #s3 div.text_container {
	padding-top: 25px;
	padding-right: 30px;
	float: right;
}

section#slide_show #s3 h2 {
	width: 600px;
	border-color: #FFF;
}

section#slide_show #s3 div.image_container {
	position: relative;
	float: left;
}

section#slide_show #s3 img {
	max-width: 530px !important;
	max-height: 400px !important;
}

section#slide_show #s3 div.software_cd {
	position: absolute;
    top: 115px;
    left: 190px;
    overflow: hidden;

    /*
    When s3 button clicked
   	animation: slide_cd_move 5s linear;
	-webkit-animation: slide_cd_move 5s linear;
	-moz-animation: slide_cd_move 5s linear;
	-ms-animation: slide_cd_move 5s linear;
	-o-animation: slide_cd_move 5s linear;
	*/
}

@keyframes slide_cd_move {
	0% {
		left: -320px; /*550*/
	}

	100% {
		left: 190px;
	}
}

@-webkit-keyframes slide_cd_move {
	0% {
		left: -320px;
	}

	100% {
		left: 190px;
	}
}

@-moz-keyframes slide_cd_move {
	0% {
		left: -320px;
	}

	100% {
		left: 190px;
	}
}

@-ms-keyframes slide_cd_move {
	0% {
		left: -320px;
	}

	100% {
		left: 190px;
	}
}

@-o-keyframes slide_cd_move {
	0% {
		left: -320px;
	}

	100% {
		left: 190px;
	}
}

section#slide_show #s3 div.software_cd div#arrow {
	width: 0; 
	height: 0; 
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 68px solid #398032;

	position: absolute;
	top: 50%;
	left: -3px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

section#slide_show #s4 {
	background-color: #FFDB1A;
	overflow: hidden;
	color: #FFF;
}

section#slide_show #s4 div.text_container {
	float: left;
}

section#slide_show #s4 div.image_container {
	width: 470px;
	position: relative;
	top: 30px;
	float: right;
}

section#slide_show #s4 div.image_container a {
	position: relative;
	top: 0px;
	z-index: 5;

	transition: top 0.15s linear;
    -webkit-transition: top 0.15s linear;
    -moz-transition: top 0.15s linear;
    -o-transition: top 0.15s linear;
    -ms-transition: top 0.15s linear;
}

section#slide_show #s4 div.image_container img {
	max-width: 218px !important;
	max-height: 569px !important;
}

section#slide_show #s4 div.image_container a:first-child {
	top: 40px;
	float: left;
}

section#slide_show #s4 div.image_container a:first-child:hover {
	top: 10px;
}

section#slide_show #s4 div.image_container a:last-child {
	top: 0px;
	float: right;
}

section#slide_show #s4 div.image_container a:last-child:hover {
	top: -30px;
}

@keyframes up_android {
	0% {
		top: 500px;
	}
	
	100% {
		top: 40px;
	}	
}

@-webkit-keyframes up_android {
	0% {
		top: 500px;
	}
	
	100% {
		top: 40px;
	}	
}

@-moz-keyframes up_android {
	0% {
		top: 500px;
	}
	
	100% {
		top: 40px;
	}	
}

@-o-keyframes up_android {
	0% {
		top: 500px;
	}
	
	100% {
		top: 40px;
	}	
}

@-ms-keyframes up_android {
	0% {
		top: 500px;
	}
	
	100% {
		top: 40px;
	}	
}

/* Apple */
@keyframes up_apple {
	0% {
		top: 500px;
	}
	
	100% {
		top: 0px;
	}	
}

@-webkit-keyframes up_apple {
	0% {
		top: 500px;
	}
	
	100% {
		top: 0px;
	}	
}

@-moz-keyframes up_apple {
	0% {
		top: 500px;
	}
	
	100% {
		top: 0px;
	}	
}

@-o-keyframes up_apple {
	0% {
		top: 500px;
	}
	
	100% {
		top: 0px;
	}	
}

@-ms-keyframes up_apple {
	0% {
		top: 500px;
	}
	
	100% {
		top: 0px;
	}	
}

section#slide_show #s5 {
	background-color: #FFF;
}

section#slide_show #s5 div.text_container {
	float: right;
}

section#slide_show #s5 h2 {
	color: #FF69B4 !important;
}

section#slide_show #s5 img {
	float: left;
}

section#slide_show section#arrows {
	width: 1180px;
	height: 50px;

	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	/*margin: -25px 0 0 -590px;*/

	z-index: 16;
}

section#arrows img {
	cursor: pointer;
	width: 50px;
	height: 50px;
}

section#arrows img#left_arrow {
	padding-right: 15px;
	float: left;

	transition: margin-left 0.15s linear;
	-webkit-transition: margin-left 0.15s linear;
	-moz-transition: margin-left 0.15s linear;
	-ms-transition: margin-left 0.15s linear;
	-o-transition: margin-left 0.15s linear;
}

section#arrows img#left_arrow:hover {
	margin-left: -15px;
}

section#arrows img#right_arrow {
	padding-left: 15px;
	float: right;

	transition: margin-right 0.15s linear;
	-webkit-transition: margin-right 0.15s linear;
	-moz-transition: margin-right 0.15s linear;
	-ms-transition: margin-right 0.15s linear;
	-o-transition: margin-right 0.15s linear;
}

section#arrows img#right_arrow:hover {
	margin-right: -15px;
}

section#slide_show ul#slide_show_nav {
	width: 330px;
	position: absolute;
	left: 50%;
	bottom: 10px;
	margin-left: -165px;
	z-index: 10;

	/*
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
	*/
}

section#slide_show ul#slide_show_nav ul:after {
	content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

section#slide_show ul#slide_show_nav li {
	width: 14px;
	height: 14px;
	background-color: rgba(0,0,0,0.0);
	cursor: pointer;
	margin-left: 55px;
	border: solid 4px #000;
	float: left;

	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;

	transition: all 0.35s linear;
	-webkit-transition: all 0.35s linear;
	-moz-transition: all 0.35s linear;
	-ms-transition: all 0.35s linear;
	-o-transition: all 0.35s linear;
	/*
	-webkit-transition: background-color 0.5s linear;
	-moz-transition: background-color 0.5s linear;
	-o-transition: background-color 0.5s linear;
	-ms-transition: background-color 0.5s linear;
	*/
}

section#slide_show ul#slide_show_nav li:hover {
	background-color: #FFF !important;

	transform: scale(1.3) !important;
	-webkit-transform: scale(1.3) !important;
	-moz-transform: scale(1.3) !important;
	-ms-transform: scale(1.3) !important;
	-o-transform: scale(1.3) !important;
}

section#slide_show ul#slide_show_nav li:active {
	background-color: #FFF !important;

	transform: scale(1.1) !important;
	-webkit-transform: scale(1.1) !important;
	-moz-transform: scale(1.1) !important;
	-ms-transform: scale(1.1) !important;
	-o-transform: scale(1.1) !important;
}

section#slide_show ul#slide_show_nav li:first-child {
	background-color: #FFF;
	margin-left: 0;

	transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
}

section#tabs .tab {
	width: 930px;
	height: 370px;	
	padding: 15px;
	margin-top: 50px;
	background-color: #FFF;
	position: relative;
	z-index: 200;

	box-shadow: 0px 0px 15px #000;
	-webkit-box-shadow: 0px 0px 15px #000;
	-moz-box-shadow: 0px 0px 15px #000;
	-o-box-shadow: 0px 0px 15px #000;
	-ms-box-shadow: 0px 0px 15px #000;

	transition: box-shadow 0.2s linear;
	-webkit-transition: box-shadow 0.2s linear;
	-moz-transition: box-shadow 0.2s linear;
	-o-transition: box-shadow 0.2s linear;
	-ms-transition: box-shadow 0.2s linear;
}

section#tabs .tab:hover {
	box-shadow: 0px 0px 30px #000;
	-webkit-box-shadow: 0px 0px 30px #000;
	-moz-box-shadow: 0px 0px 30px #000;
	-o-box-shadow: 0px 0px 30px #000;
	-ms-box-shadow: 0px 0px 30px #000;
}

.tab h3 {
	font-size: 2em;
	margin-bottom: 10px;
}

.tab p {
	font-size: 1em;
}

.tab img {

}

.tab a.TSS_button {
	opacity: 0;
}

.tab:first-child img {
	float: left;
	max-width: 300px;
	max-height: 300px;
}

.tab:first-child h3, 
.tab:first-child p {
	width: 600px;
	float: right;
}

.tab:last-child img {
	max-width: 400px;
	max-height: 400px;

	position: absolute;
  	top: 50%;
  	right: 15px;
  	transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
}

.tab:last-child h3, 
.tab:last-child p {
	width: 515px;
	float: left;
}

#social_media {
	margin: 150px auto;
	width: 1020px;
	height: 214px;
}

#social_media .categorie_port:hover .outer_circle {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

#social_media .categorie_port:hover .inner_circle {
	transform: scale(2);
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
}

#social_media .categorie_port {
	width: 214px;
	height: 214px;
	float: left;
	margin-right: 54px;
	position: relative;
}


/*
#social_media .categorie_port {
	width: 214px;
	height: 214px;
	float: left;
	margin-right: 159px;
	position: relative;
}

#social_media .categorie_port:last-child {
	margin-right: 0px;
}

#social_media .categorie_port .icon {
	width: 30px;
	height: 30px;
	background-color: #0000FF;
	position: absolute;
	top: 92px;
	left: 92px;
	z-index: -1;
}

#social_media .outer_circle {
	width: 200px;
	height: 200px;
	cursor: pointer;

	border: 7px solid rgba(0,0,255,1);

	border-radius: 1000px;
	-webkit-border-radius: 1000px;
	-moz-border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;

	border-top: solid 7px rgba(0,0,255,0);
	border-bottom: solid 7px rgba(0,0,255,0);

	transition: -webkit-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -webkit-transform 0.5s linear;
	-o-transition: -webkit-transform 0.5s linear;
	-ms-transition: -webkit-transform 0.5s linear;
}

#social_media .outer_circle:hover {
	-webkit-transform: rotate(360deg);
}

#social_media .outer_circle:hover .inner_circle {
	-webkit-transform: scale(2);
}

#social_media .outer_circle .inner_circle {
	width: 120px;
	height: 120px;
	margin: 33px auto;

	border: 7px solid rgba(0,0,255,1);

	border-radius: 1000px;
	-webkit-border-radius: 1000px;
	-moz-border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;
	position: relative;

	border-left: solid 7px rgba(0,0,255,0);
	border-right: solid 7px rgba(0,0,255,0);

	transition: -webkit-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -webkit-transform 0.5s linear;
	-o-transition: -webkit-transform 0.5s linear;
	-ms-transition: -webkit-transform 0.5s linear;
}
*/

/**********************************
About
**********************************/

/*
section.about {
	width: 1100px !important;
}

section.about h2 {
	margin-left: 70px;
}
*/

section#about {
	width: 930px;
	min-height: 450px;	
	padding: 15px;
	margin: 50px auto 50px auto;
	background-color: #FFF;

	box-shadow: 0px 0px 15px #000;
	-webkit-box-shadow: 0px 0px 15px #000;
	-moz-box-shadow: 0px 0px 15px #000;
	-o-box-shadow: 0px 0px 15px #000;
	-ms-box-shadow: 0px 0px 15px #000;

	transition: box-shadow 0.2s linear;
	-webkit-transition: box-shadow 0.2s linear;
	-moz-transition: box-shadow 0.2s linear;
	-o-transition: box-shadow 0.2s linear;
	-ms-transition: box-shadow 0.2s linear;
}

section#about:hover {
	box-shadow: 0px 0px 30px #000;
	-webkit-box-shadow: 0px 0px 30px #000;
	-moz-box-shadow: 0px 0px 30px #000;
	-o-box-shadow: 0px 0px 30px #000;
	-ms-box-shadow: 0px 0px 30px #000;
}

img#mini_logo {
	display: block;
	margin: 50px auto 0px auto;
}

/*
section#in_theory {
	width: 1100px;
	margin-top: 50px;
}

section#in_theory h2 {
	font-family: 'HelsinkiRegular';
	color: #0000FF;
	text-shadow: 0px -1px 1px #000;
}

section#in_theory p {
	margin-top: 30px;
	font-size: 1.3em;
	line-height: 35px;
	padding: 20px 0px;
	border-top: 7px solid #000;
	border-bottom: 7px solid #000;

	transition: padding 0.2s linear;
	-webkit-transition: padding 0.2s linear;
	-moz-transition: padding 0.2s linear;
	-o-transition: padding 0.2s linear;
	-ms-transition: padding 0.2s linear;
}

section#in_theory p:hover {
	padding: 40px 0px;
}
*/


/**********************************
The Service Store
**********************************/ 

.the_service_store {
	position: relative;
	margin-top: 70px !important;
	margin-bottom: 70px !important;
}

.the_service_store h2 {
	font-size: 2.9em;
	text-align: center;
	margin-bottom: 30px;
}

.sp h2 {
	margin-bottom: 70px;
}

.the_service_store h3#category_title {
	/*
	font-size: 2.65em;
	font-size: 1.5em;
	*/
	font-size: 1.7em;
	text-align: center;
	padding-bottom: 30px;
	border-bottom: 3px solid #000;

	margin-top: 25px;
	margin-bottom: 70px;
}

.icons:before {
	font-family: 'typicons';
	/*http://www.entypo.com/* other option*/
}

#store_selection {
	margin-top: 30px; /* 50 - 20 because of the padding in the portals*/
	width: 960px;
}

#store_selection:after {
    content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

/* all category portals */
.categorie_port {
	position: relative;
}


#store_selection .categorie_port {
	float: left;
	padding-top: 20px;
	margin-bottom: 80px;
	margin-right: 159px;
}

#store_selection .categorie_port:hover .outer_circle {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

#store_selection .categorie_port:hover .inner_circle {
	transform: scale(2);
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
}

#store_selection .categorie_port:hover h4 {
	top: -20px;
}

#store_selection .categorie_port:hover .circle_container {
	top: 20px;
}

#store_selection .categorie_port:nth-child(3n+3) {
	margin-right: 0px;
}

#store_selection .categorie_port .circle_container {
	float: none;
	margin-right: 0px;
}

#store_selection .categorie_port h4 {
	width: 214px;
	font-size: 1em;
	line-height: 22px;
	text-align: center;
	text-shadow: 0px 0px 3px #000;
	position: relative;
	top: 0;

	transition: top 0.5s linear;
	-webkit-transition: top 0.5s linear;
	-moz-transition: top 0.5s linear;
	-o-transition: top 0.5s linear;
	-ms-transition: top 0.5s linear;
}


/* web */
#store_selection .web h4 {
	color: #0000FF;
}

#store_selection .web .outer_circle {
	border: 7px solid rgba(0,0,255,1);
	border-top: solid 7px rgba(0,0,255,0);
	border-bottom: solid 7px rgba(0,0,255,0)
}

#store_selection .web .inner_circle {
	border: 7px solid rgba(0,0,255,1);
	border-left: solid 7px rgba(0,0,255,0);
	border-right: solid 7px rgba(0,0,255,0);
}

.web_icon {
	background-color: rgba(0,0,255,1);
}

/* software */
#store_selection .software h4 {
	color: #00b300;
	/*color: #009900;*/
}

#store_selection .software .outer_circle {
	border: 7px solid rgb(0, 153, 0);
	border-top: solid 7px rgba(0, 153, 0, 0);
	border-bottom: solid 7px rgba(0, 153, 0, 0);
}

#store_selection .software .inner_circle {
	border: 7px solid rgb(0, 153, 0);
	border-left: solid 7px rgba(0, 153, 0, 0);
	border-right: solid 7px rgba(0, 153, 0, 0);
}

.software_icon {
	background-color: rgb(0, 153, 0);
}

/* mobile apps */
#store_selection .mobile_apps h4 {
	color: #FFDB1A;
}

#store_selection .mobile_apps .outer_circle {
	border: 7px solid rgb(255, 219, 26);
	border-top: solid 7px rgba(255, 219, 26, 0);
	border-bottom: solid 7px rgba(255, 219, 26, 0);
}

#store_selection .mobile_apps .inner_circle {
	border: 7px solid rgb(255, 219, 26);
	border-left: solid 7px rgba(255, 219, 26, 0);
	border-right: solid 7px rgba(255, 219, 26, 0);
}

.mobile_apps_icon {
	background-color: rgb(255, 219, 26);
}

/* database systems */
#store_selection .internet_marketing_and_social_media h4 {
	color: #FF69B4;
}

#store_selection .internet_marketing_and_social_media .outer_circle {
	border: 7px solid rgba(255,105,180,1);
	border-top: solid 7px rgba(255,105,180,0);
	border-bottom: solid 7px rgba(255,105,180,0);
}

#store_selection .internet_marketing_and_social_media .inner_circle {
	border: 7px solid rgba(255,105,180,1);
	border-left: solid 7px rgba(255,105,180,0);
	border-right: solid 7px rgba(255,105,180,0);
}

.internet_marketing_and_social_media_icon {
	background-color: rgba(255,105,180,1);
}
	

/* Database Systems */
#store_selection .database_systems h4 {
	color: #e69500;
}

#store_selection .database_systems .outer_circle {
	border: 7px solid #e69500;
	border-top: solid 7px rgba(230, 149, 0, 0);
	border-bottom: solid 7px rgba(230, 149, 0, 0);
}

#store_selection .database_systems .inner_circle {
	border: 7px solid #e69500;
	border-left: solid 7px rgba(230, 149, 0, 0);
	border-right: solid 7px rgba(230, 149, 0, 0);
}

.database_systems_icon {
	background-color: #e69500;
}

/* print */
#store_selection .design_and_print h4 {
	color: #33CCFF;
}

#store_selection .design_and_print .outer_circle {
	border: 7px solid rgb(51, 204, 255);
	border-top: solid 7px rgba(51, 204, 255, 0);
	border-bottom: solid 7px rgba(51, 204, 255, 0);
}

#store_selection .design_and_print .inner_circle {
	border: 7px solid rgb(51, 204, 255);
	border-left: solid 7px rgba(51, 204, 255, 0);
	border-right: solid 7px rgba(51, 204, 255, 0);
}

.design_and_print_icon {
	background-color: rgb(51, 204, 255);
}

/*
old way example
#store_selection .design_and_print .icon {
	background-color: rgb(51, 204, 255);
}
*/

.service_WP {
	padding-bottom: 25px !important;
}

.service_WP:after {
	content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

.web_WP h3 { 
	color: #0000FF !important;
}

.web_WP div#line {
	background-color: #0000FF !important;
}

.software_WP h3 {
	color: #009900 !important;
}

.software_WP div#line {
	background-color: #009900 !important;
}

.software_WP img#sp_software_to_sell_1 {
	max-width: 730px !important;
	max-height: 730px !important;
}

.software_WP div#software_products {
	width: 930px;
	position: relative;
}

.software_WP div#software_products div#cd_collection {
	width: 930px;
	height: 152px;
	padding: 70px 0px;

	overflow: hidden;
	position: absolute;
	left: 0px;
	bottom: 0px;
}

.software_WP div#cd_collection div.software_cd {
	float: left;
	margin-right: 90px;

	position: relative;
	left: 70px;

	animation: cd_move 5s linear;
	-webkit-animation: cd_move 5s linear;
	-moz-animation: cd_move 5s linear;
	-ms-animation: cd_move 5s linear;
	-o-animation: cd_move 5s linear;
}

.software_WP div#cd_collection div.software_cd:last-child {
	margin-right: 0px;	
}

@keyframes cd_move {
	0% {
		left: -660px;
	}

	100% {
		left: 70px;
	}
}

@-webkit-keyframes cd_move {
	0% {
		left: -660px;
	}

	100% {
		left: 70px;
	}
}

div.hidden_circle {
	width: 51px; /* 49 */
	height: 51px;
	background-color: #b3b3b3;
	/*background-color: rgba(255,255,0,1) b3b3b3; */

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25.5px 0 0 -25.5px;
	/*margin: -24.5px 0 0 -24.5px;*/
}

div#cd_lightred div.hidden_circle div#lines {
	/*background-color: #b3b3b3;*/
	z-index: -1;

	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-webkit-transform: translate(-50%, -50%);
}

div#cd_lightred div.hidden_circle div#lines div {
	position: relative;
	/*top: 10px;*/
	background-color: #900000;
	height: 7px;
	margin-bottom: 7px;
}

div#cd_lightred div.hidden_circle div#line1 {
	width: 45px;
	left: -39px;
}

div#cd_lightred div.hidden_circle div#line2 {
	width: 35px;
	left: -27px;
}

div#cd_lightred div.hidden_circle div#line3 {
	width: 25px;
	left: -15px;
	margin-bottom: 0 !important;
}

div#cd_lightblue div.cd_circle:after {
	content: " ";
	position: absolute;
	z-index: -1;
  	top: -5px;
  	left: -5px;
  	right: -5px;
 	bottom: -5px;
 	
 	border-top: 5px solid #5b93a2;
  	border-left: 5px solid #5b93a2;

  	border-right: 5px solid #406772;
  	border-bottom: 5px solid #406772;

  	border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

div#cd_lightgreen div.cd_contents {
	overflow: hidden;
}

div#cd_lightgreen div#arrows #left_arrow {
	width: 0; 
	height: 0; 
	border-top: 55px solid transparent;
	border-bottom: 55px solid transparent; 
	border-right: 78px solid #7b9452; 

	position: absolute;
	top: 50%;
	right: -3px;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

div#cd_lightgreen div#arrows #right_arrow {
	width: 0; 
	height: 0; 
	border-top: 55px solid transparent;
	border-bottom: 55px solid transparent;
	border-left: 78px solid #7b9452;

	position: absolute;
	top: 50%;
	left: -3px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.mobile_apps_WP h3 {
	color: #FFDB1A !important;
}

.mobile_apps_WP div#line {
	background-color: #FFDB1A !important;
}

.internet_marketing_and_social_media_WP h3 {
	color: #FF69B4 !important;
}

.internet_marketing_and_social_media_WP div#line {
	background-color: #FF69B4 !important;
}

.database_systems_WP h3 {
	color: #e69500 !important;
}

.database_systems_WP div#line {
	background-color: #e69500 !important;
}

.design_and_print_WP h3 {
	color: #33CCFF !important;
}

.design_and_print_WP div#line {
	background-color: #33CCFF !important;
}

#service_content {
	width: 100%;
	font-size: 1em;
}

#service_content h4 {
	font-size: 1.5em;
	margin-top: 20px;
	margin-bottom: 7px;
}

#service_content img {
	display: block;
	margin: 0 auto;
}

#service_content img.small {
	max-width: 500px;
	max-height: 500px;
}

#service_content img.large {
	max-width: 930px;
	max-height: 930px;
}

#service_content img.space {
	margin-bottom: 10px;
}

#service_content img.extra_space {
	margin-top: 20px;
	margin-bottom: 30px;
}

#service_actions {
	/*
	margin: 20px 0;
	*/
	margin-top: 15px;
	float: right;
}

#service_actions li {
	float: left;
	margin-right: 40px;
}

#service_actions li:last-child {
	margin-right: 0px;
}

#service_actions li button {
	background-color: #545454;
	color: #FFF;
	padding: 10px;

	transition: background-color 0.25s ease-out;
	-webkit-transition: background-color 0.25s ease-out;
	-moz-transition: background-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out;
	-ms-transition: background-color 0.25s ease-out;
}

#service_actions li button:hover {
	background-color: #333333;
}

#service_actions li button:active {
	box-shadow: ;
}

#service_content #special_text {
	margin: 100px 0px 85px 0px;
	display: block;
	text-align: center;
	font-size: 2em;
	text-shadow: 0px 0px 5px #000;
}

#service_content #special_text span {
	display: inline-block;
	position: relative;
	top: 0;

	transition: all 0.25s ease-out;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
}

#service_content #special_text span.letter {
	padding-bottom: 15px;
}

#service_content #special_text:hover span.word {
	padding: 0px 15px;
}

#service_content #special_text:hover span.letter {
	padding: 0px 10px 15px 10px;
}

#service_content #special_text span.letter:hover {
	top: -15px;
}

a#back_button {
	/*width: 140px;*/
	width: 930px;
	margin: 0 auto;
	display: block;
	text-align: center;
	background-color: #FFF;
	color: #545454;
	padding: 10px;
	border: solid 5px #545454;
	margin-top: 28px; /* 35 */
	font-size: 1.3em;

	position: relative;
	z-index: 500;

	transition: background-color 0.30s linear;
	-webkit-transition: background-color 0.30s linear;
	-moz-transition: background-color 0.30s linear;
	-o-transition: background-color 0.30s linear;
	-ms-transition: background-color 0.30s linear;
}

a#back_button:hover {
	background-color: #545454;
	color: #FFF;
	text-decoration: none;
}

div#max_box {
	background-color: #111;
	color: #FFF;
	opacity: 0;
	z-index: 30;
	text-align: center;
	padding: 20px;

	position: fixed;
	top: 50%;
	left: 50%;

	box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	-moz-box-shadow: 0px 0px 5px #000;
	-ms-box-shadow: 0px 0px 5px #000;
	-o-box-shadow: 0px 0px 5px #000;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);

	animation: max_box 4s linear;
	-webkit-animation: max_box 4s linear;
	-moz-animation: max_box 4s linear;
	-o-animation: max_box 4s linear;
	-ms-animation: max_box 4s linear;
}

@keyframes max_box {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes max_box {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}	
	100% {
		opacity: 0;
	}
}

@-moz-keyframes max_box {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-o-keyframes max_box {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-ms-keyframes max_box {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

section#cb_container {
	/*V1 z-index: 25;*/
	z-index: 50;
	position: fixed;
	top: 33%;
	left: -150px;

	transition: all 0.22s linear;
	-webkit-transition: all 0.22s linear;
	-moz-transition: all 0.22s linear;
	-o-transition: all 0.22s linear;
	-ms-transition: all 0.22s linear;
}

section#cb_container div#service_name {
	width: 196px;
	padding: 2px;
	text-align: center;
	opacity: 0;
	color: #FFF;
	background-color: #000;

	position: absolute;
	top: -39px;
	left: 0px;

	transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
}

section#cart_bar {
	width: 100px;
	height: 390px; /* 440 */
	background-color: rgba(0,0,0,0.8);
	position: relative;

	border-radius: 0px 7px 7px 0px;
	-webkit-border-radius: 0px 7px 7px 0px;
	-moz-border-radius: 0px 7px 7px 0px;
	-o-border-radius: 0px 7px 7px 0px;
	-ms-border-radius: 0px 7px 7px 0px;

	box-shadow: 0px 0px 30px #000;
	-webkit-box-shadow: 0px 0px 30px #000;
	-moz-box-shadow: 0px 0px 30px #000;
	-o-box-shadow: 0px 0px 30px #000;
	-ms-box-shadow: 0px 0px 30px #000;

	transition: width 0.22s linear;
	-webkit-transition: width 0.22s linear;
	-moz-transition: width 0.22s linear;
	-o-transition: width 0.22s linear;
	-ms-transition: width 0.22s linear;
}

section#cart_bar div#service_icons {
	width: 80px;
	margin: 0px auto;
	padding: 10px 0px;

	transition: width 0.2s linear;
	-webkit-transition: width 0.2s linear;
	-moz-transition: width 0.2s linear;
	-o-transition: width 0.2s linear;
	-ms-transition: width 0.2s linear;
}

section#cart_bar div#service_icons:after {
    content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

section#cart_bar div#service_icons div.icon {
	margin-right: 20px;
	margin-bottom: 20px;
	float: left;

	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
}

section#cart_bar div#service_icons div.icon:nth-child(even) {
	margin-right: 0px !important;
}

section#cart_bar div#form_actions {
	width: 100px;
	background-color: #444;
	padding-top: 8px;

	position: absolute;
	left: 0px;
	bottom: 0px;

	transition: all 0.22s linear;
	-webkit-transition: all 0.22s linear;
	-moz-transition: all 0.22s linear;
	-o-transition: all 0.22s linear;
	-ms-transition: all 0.22s linear;
}

section#cart_bar div#form_actions a {
	background-color: #0000B2;   
    background-image: -webkit-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000B2), to(#000066));
    background-image: -moz-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -o-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -ms-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image:  linear-gradient(top, #0000B2 0%, #000066 100%);

    text-decoration: none;
    text-shadow: 0px 0px 3px #000;
	color: #FFF;
	padding: 5px;
	display: inline-block;

	box-shadow: 0px 0px 1px #000;
    -webkit-box-shadow: 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 1px #000;
    -ms-box-shadow: 0px 0px 1px #000;
    -o-box-shadow: 0px 0px 1px #000;

    transition: all 0.22s linear;
	-webkit-transition: all 0.22s linear;
	-moz-transition: all 0.22s linear;
	-o-transition: all 0.22s linear;
	-ms-transition: all 0.22s linear;
}

section#cart_bar div#form_actions a:active {
    background-image: -webkit-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000066), to(#0000B2));
    background-image: -moz-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -o-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -ms-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image:  linear-gradient(top, #000066 0%, #0000B2 100%);
}

section#cart_bar div#form_actions a:first-child {
	float: left;
}

section#cart_bar div#form_actions a:last-child {
	float: right;
}

/* Cart Bar's Hovers */
@media not screen and (max-width: 985px) {
	section#cart_bar div#service_icons {
		width: 80px !important;
	}

	section#cart_bar:hover {
		width: 200px;
	}

	section#cart_bar:hover div#service_icons {
		width: 160px !important;
	}

	section#cart_bar:hover div#service_icons div.icon {
		margin-right: 35px;
	}

	section#cart_bar:hover div#service_icons div.icon:nth-child(even) {
		margin-right: 35px !important;
	}

	section#cart_bar:hover div#service_icons div.icon:nth-child(3n+3) {
		margin-right: 0px !important;
	}

	section#cart_bar:hover div#form_actions {
		width: 160px;
		left: 20px;
	}

	section#cart_bar:hover div#form_actions a:last-child {
		margin-left: 63px;
	}
}

h3#service_title {
	position: relative;
}

div#line {
	width: 100%;
	height: 10px;
	background-color: #0000FF;
	margin-bottom: 10px;
}

h3#service_title div#main_text {
	font-size: 2em;
	height: 40px;
	line-height: 40px;
	margin-left: 50px;
}

div.runner_icon_2 {
	position: relative;
	top: 0px;
	left: 0px;

	/*


			animation: icon_fade_in 0.3s linear;
		-webkit-animation: icon_fade_in 0.3s linear;
		-moz-animation: icon_fade_in 0.3s linear;
		-ms-animation: icon_fade_in 0.3s linear;
		-o-animation: icon_fade_in 0.3s linear;


	div.icon puts 0.2s on all
	
	transition: opacity 1.5s linear;
	-webkit-transition: opacity 1.5s linear;
	-moz-transition: opacity 1.5s linear;
	-o-transition: opacity 1.5s linear;
	-ms-transition: opacity 1.5s linear;
	*/
}

div#main_service_icon {
	position: absolute;
	top: 50%;
	left: 0px;
	margin-top: -15px;
	/*margin-right: 20px;*/
}

section.mc_port {
	width: 1250px !important;
}

section.mc_port h2 {
	margin-bottom: 0px !important;
}

/**********************************
Contact
**********************************/

#contact:after {
	content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

#contact h2 {
	margin-bottom: 30px;
}

#contact form > div {
	margin-bottom: 25px;
}

#contact label {
	font-size: 1.2em;
}

#contact input:not([type="submit"]) {
	width: 210px;
	height: 30px;
	background-color: #EEEEEE;
	outline: none;
	border: solid 2px #282828;
	font-size: 1.2em;

	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
}

#contact input:not([type="submit"]):focus {
	width: 300px;
	background-color: #4D4D4D;
	color: #FFF;
}

#contact textarea {
	width: 500px;
	height: 250px;
	background-color: #EEEEEE;
	outline: none;
	border: solid 2px #282828;
	font-size: 1.2em;

	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
}

#contact textarea:focus {
	width: 600px;
	background-color: #4D4D4D;
	color: #FFF;
}

#contact div#service_icons {
	width: 875px;
	margin: 17px auto 25px auto;
}

#contact div#service_icons:after {
	content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

#contact div#service_icons div.icon_box {
	width: 200px;
	height: 150px;
	/*background-color: purple;*/
	position: relative;
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;

	transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
}

#contact div#service_icons div.icon_box:nth-child(4n+0) {
	margin-right: 0px;
}

#contact div#service_icons div.icon_box:hover div.service_name, 
#contact div#service_icons div.icon_box:hover div.icon_controls {
	opacity: 1;
}

#contact div#service_icons div.icon_box:last-child {
	margin-right: 0px;
}

#contact div#service_icons div.icon_box div.service_name {
	font-size: 1em;
	width: 190px;
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
	text-align: center;
	padding: 5px;
	margin: 0 auto;

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;

	position: absolute;
	top: 0px;
}

#contact div#service_icons div.icon_box div.icon {
	margin: 60px auto 0px auto;
}

#contact div#service_icons div.icon_box div.icon_controls {
	opacity: 0;
	transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;


	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

#contact div#service_icons div.icon_box div.icon_controls button {
	width: 25px;
	color: #FFF;
	background-color: rgba(0,0,0,0.7);
	border: none;
	font-size: 1em;

	display: block;
	float: left;
}

#contact div#service_icons div.icon_box div.icon_controls button:first-child {
	padding-left: 7px;
	padding-right: 1.5px;

	border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-ms-border-radius: 5px 0px 0px 5px;
	-o-border-radius: 5px 0px 0px 5px;
}

#contact div#service_icons div.icon_box div.icon_controls button:last-child {
	padding-right: 7px;
	padding-left: 1.5px;

	border-radius: 0px 5px 5px 0px;
	-webkit-border-radius: 0px 5px 5px 0px;
	-moz-border-radius: 0px 5px 5px 0px;
	-ms-border-radius: 0px 5px 5px 0px;
	-o-border-radius: 0px 5px 5px 0px;
}

/*
#contact div#service_icons div.icon_box div.icon_controls span {
	background-color: rgba(0,0,0,0.7);
	width: 10px;
	height: 50px;
}
*/

#contact ul#form_actions {
	float: left;
}

#contact ul#form_actions li {
	float: left;
	margin-right: 20px;
}

#contact ul#form_actions li:last-child {
	margin-right: 0px;
}

#contact .blue_button {
	font-size: 1.1em;

	background-color: #0000B2;   
    background-image: -webkit-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000B2), to(#000066));
    background-image: -moz-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -o-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image: -ms-linear-gradient(top, #0000B2 0%, #000066 100%);
    background-image:  linear-gradient(top, #0000B2 0%, #000066 100%);

    text-shadow: 0px 0px 3px #000;
	color: #FFF;
	padding: 7px;

	box-shadow: 0px 0px 1px #000;
    -webkit-box-shadow: 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 1px #000;
    -ms-box-shadow: 0px 0px 1px #000;
    -o-box-shadow: 0px 0px 1px #000;
}

#contact .blue_button:active {
    background-image: -webkit-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000066), to(#0000B2));
    background-image: -moz-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -o-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image: -ms-linear-gradient(top, #000066 0%, #0000B2 100%);
    background-image:  linear-gradient(top, #000066 0%, #0000B2 100%);
}

#contact .blue_button:disabled {
	background-color: #D3D3D3;   
    background-image: -webkit-linear-gradient(top, #D3D3D3 0%, #BABABA 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3D3D3), to(#BABABA));
    background-image: -moz-linear-gradient(top, #D3D3D3 0%, #BABABA 100%);
    background-image: -o-linear-gradient(top, #D3D3D3 0%, #BABABA 100%);
    background-image: -ms-linear-gradient(top, #D3D3D3 0%, #BABABA 100%);
    background-image:  linear-gradient(top, #D3D3D3 0%, #BABABA 100%);
}

p#request_sent {
	text-align: center;
	color: #0000FF;
	font-size: 2em;
	line-height: 45px;
}

/**********************************
Portfoilo
**********************************/

#cases_container {
	overflow: hidden;
	position: relative;
	width: 1250px !important;
	height: 1080px;
	margin: 0 auto;

	padding-top: 40px;
	padding-bottom: 25px;
}

.mc_port h2 {
	margin-left: 65px;
}

#cases {
	width: 1020px;
	margin: 0 auto;
	position: relative;
	top:  0px;
	/*
	top:  -1159px;
	top:  -1199px;

	Initial - top: -40px;
	* 3 - top: -1080px;
	* 4 - top: -1440px;
	*/

	transition: top 0.25s linear;
	-webkit-transition: top 0.25s linear;
	-moz-transition: top 0.25s linear;
	-o-transition: top 0.25s linear;
	-ms-transition: top 0.25s linear;
}

.case_tab {
	width: 980px;
	height: 300px;
	padding: 20px;
	margin-bottom: 20px;
	background-color: #FFF;

	box-shadow: 0px 0px 20px 5px #000;
	-webkit-box-shadow: 0px 0px 20px 5px #000;
	-moz-box-shadow: 0px 0px 20px 5px #000;
	-o-box-shadow: 0px 0px 20px 5px #000;
	-ms-box-shadow: 0px 0px 20px 5px #000;

	transition: transform 0.25s linear;
	-webkit-transition: -webkit-transform 0.25s linear;
	-moz-transition: -moz-transform 0.25s linear;
	-ms-transition: -ms-transform 0.25s linear;
	-o-transition: -o-transform 0.25s linear;
}

.case_tab:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}

.case_tab:nth-child(3n+0) {
	margin-bottom: 100px;
}


/*
.case_tab:hover {
	box-shadow: 0px 0px 40px 10px #000;
	-webkit-box-shadow: 0px 0px 40px 10px #000;
	-moz-box-shadow: 0px 0px 40px 10px #000;
	-o-box-shadow: 0px 0px 40px 10px #000;
	-ms-box-shadow: 0px 0px 40px 10px #000;
}
*/

#cover_case {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;
	z-index: 50;
}

.case_tab img { 
	max-width: 480px;
	max-height: 400px;
	float: left;

	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.case_tab #right_side {
	float: right;
	width: 480px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.case_tab #right_side ul {
	width: 480px;
	margin-bottom: 50px;
}

.case_tab #right_side ul:after {
	content: " ";
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

.case_tab #right_side li {
	float: right;
	margin-right: 10px;
	margin-bottom: 30px;

	position: relative;
	background-color: #000;
	cursor: pointer;

	text-shadow: 0px 0px 2px #000;
}

.case_tab #right_side li:first-child { 
	margin-right: 0;
}	

.case_tab #right_side li a span {
	opacity: 1;

	transition: opacity 0.25s linear;
	-webkit-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;
	-o-transition: opacity 0.25s linear;
	-ms-transition: opacity 0.25s linear;
}

.case_tab #right_side li:hover a span {
	opacity: 0;
}

.case_tab #right_side li:after {
	content: "View";
	color: #FFF;
	margin-top: -25px;
	display: block;
	text-align: center;

	opacity: 0;

	transition: opacity 0.25s linear;
	-webkit-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;
	-o-transition: opacity 0.25s linear;
	-ms-transition: opacity 0.25s linear;
}

.case_tab #right_side li:hover:after {
	opacity: 1;
}

.case_tab #right_side li a {
	display: block;

	text-shadow: 0px 0px 2px #000;

	box-shadow: 0px 0px 3px #000;
	-webkit-box-shadow: 0px 0px 3px #000;
	-moz-box-shadow: 0px 0px 3px #000;
	-o-box-shadow: 0px 0px 3px #000;
	-ms-box-shadow: 0px 0px 3px #000;

	padding: 10px;
	color: #FFF;
	background-color: #000;
	font-size: 1em; /*More Space*/
}

.case_tab #right_side li > span {
	display: block;
	text-align: center;
}

.case_tab #right_side .web {
	background-color: #0000ff;
}

.case_tab #right_side .software {
	background-color: #009900;
}

.case_tab #right_side .mobile_apps {
	background-color: #FFDB1A;
}

.case_tab #right_side .internet_marketing_and_social_media {
	background-color: #FF69B4;
}

.case_tab #right_side .database_systems {
	background-color: #e69500;
}

.case_tab #right_side .design_and_print {
	background-color: #33CCFF;
}

.case_tab #right_side a#view_case {
	font-size: 2em;
	display: inline-block;
	float: right;

	transition: color 0.25s linear;
	-webkit-transition: color 0.25s linear;
	-moz-transition: color 0.25s linear;
	-o-transition: color 0.25s linear;
	-ms-transition: color 0.25s linear;
}


.case_tab #right_side a#view_case:hover {
	color: #000;
}

section#case_nav {
	width: 40px;
	position: fixed;
	top: 390px;
	right: 70px;
}

section#case_nav ul {
	width: 34px;
	margin: 0 auto;
}

section#case_nav ul li {
	background-color: #FFF;
	color: #0000FF;
	font-size: 1.4em;
	text-align: center;
	width: 30px;
	height: 35px;
	line-height: 35px;
	border: 2px solid #0000FF;
	margin-bottom: 15px;

	transition: background-color 0.25s linear;
	-webkit-transition: background-color 0.25s linear;
	-moz-transition: background-color 0.25s linear;
	-o-transition: background-color 0.25s linear;
	-ms-transition: background-color 0.25s linear;
}

section#case_nav ul li:hover {
	background-color: #0000FF;
	color: #FFF;
	cursor: pointer;
}

section#case_nav ul li:last-child {
	margin-bottom: 0px;
}

section#case_nav .TA_container {
	padding-top: 20px;
}

section#case_nav .BA_container {
	padding-bottom: 20px;
}

section#case_nav .TA_container:hover div#top_arrow {
	top: -20px;
}

section#case_nav .BA_container:hover div#bottom_arrow {
	top: 20px;
}

section#case_nav div {
	margin: 0 auto;
	position: relative;
	top: 0;
	cursor: pointer;
	
	transition: top 0.25s linear;
	-webkit-transition: top 0.25s linear;
	-moz-transition: top 0.25s linear;
	-o-transition: top 0.25s linear;
	-ms-transition: top 0.25s linear;
	
	/*
	position: relative;
	*/
}

section#case_nav div#top_arrow {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 35px solid #0000FF;
	margin-bottom: 20px;
}

section#case_nav div#bottom_arrow {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 35px solid #0000FF;
	margin-top: 20px;
}

/**********************************
footer
**********************************/

footer#main_footer {
	width: 940px;
	padding: 10px;
	background-color: #878787;
	font-size: 1em;
	margin-top: 50px;
	margin: 50px auto 0px auto;

	position: relative;
	z-index: 15;
}

/**********************************
Media Queries
**********************************/

/*@media screen and (max-width: 1378px) {*/


/* Tablets and Netbooks */
@media screen and (max-width: 1405px) {
	
	/**************** 
	Universal Styles 
	*****************/
	.circle_container {
		width: 169px;
		height: 169px;
	}

	.circle_container .outer_circle {
		width: 158px;
		height: 158px;
		border-width: 5.5px !important;
	}

	.circle_container .outer_circle .inner_circle {
		width: 95px;
		height: 95px;
		border-width: 5.5px !important;
		margin: 26px auto;
	}

	div.software_cd {
		width: 120px;
		height: 120px;
	}

	div.software_cd:after {
		width: 120px;
		height: 120px;
	}

	div.software_cd div.cd_contents {
		width: 120px;
		height: 120px;
	}

	div.software_cd div.cd_circle {
		width: 39px;
		height: 39px;
		margin: -20.5px 0 0 -20.5px;
	}

	div.hidden_circle {
		width: 41px;
		height: 41px;
		margin: -20.5px 0 0 -20.5px;
	}

	div.software_cd div.cd_circle div.cd_hole {
		width: 16px;
		height: 16px;
		margin: -8px 0 0 -8px;
	}

	div#cd_lightred div.hidden_circle div#lines div {
		height: 5px;
		margin-bottom: 5px;
	}

	div#cd_lightred div.hidden_circle div#line1 {
		left: -45px;
	}

	div#cd_lightred div.hidden_circle div#line2 {
		left: -33px;
	}

	div#cd_lightred div.hidden_circle div#line3 {
		left: -21px;
		margin-bottom: 0 !important;
	}

	.circle_container .icon {
		width: 27px;
		height: 27px;
		font-size: 1.17em;
		line-height: 27px;
		top: 71px;
		left: 71px;
	}

	/* Header */
	header#main_header a#logo_container {
		margin-top: 10px;
	}

	header#main_header img {
		max-width: 420px;
		max-height: 420px;
	}

	header#main_header nav#main_nav {
		font-size: 1.1em;
	}

	header#main_header nav#main_nav li {
		margin-left: 13px;
	}

	/* Main Content */
	section#main_content {
		width: 750px;
	}

	section.white_page {
		width: 720px;
	}

	/****************
	Homepage 
	*****************/

	/* Slideshow */
	section#slide_show {
		width: 1000px; /* 1200px (- 60) */
		height: 320.75px;
	}

	section#slide_show #slide_show_view {
		width: 850px;
		height: 320.75px;
	}

	section#slide_show .slide {
		width: 790px;
		height: 271px;
		/*width: 940px;*/
	}

	section#slide_show h2 { 
		/*width: 401px;*/
		width: 395px;
		font-size: 2em;
		line-height: 38px;
	}

	section#slide_show #slide_show_view img {
		max-width: 379px;
		max-height: 277px;
	}

	section#slide_show a.slide_button {
		font-size: 1.04em;
		border-width: 4.8px;
	}

	section#slide_show #s1 {
		width: 840px;
		height: 311px;
	}

	section#slide_show #s3 {
		width: 850px;
		height: 320.75px;
	}

	section#slide_show #s3 h2 {
		width: 481px;
	}

	section#slide_show #s3 img {
		max-width: 425px !important;
		max-height:	320.75px !important;
	}

	section#slide_show #s4 div.image_container {
		width: 371px;
		top: 24px;
	}

	section#slide_show #s4 div.image_container img {
		max-width: 172px !important;
		max-height: 450px !important;
	}

	section#slide_show section#arrows {
		width: 970px;
		/*margin: -25px 0 0 -485px;*/
	}

	section#tabs .tab {
		width: 720px;
		height: auto;
		/*height: 286px;*/
		/*width: 870px;*/
	}

	section#tabs .tab:after {
		content: " ";
	    display: block;
	    height: 0;
	    clear: both; 
	    visibility: hidden;
	}

	.tab h3 {
		font-size: 1.5em;
	}

	.tab p {
		font-size: 0.9em;
	}

	.tab:first-child img {
		float: left;
		max-width: 232px;
		max-height: 232px;
	}

	.tab:first-child h3, 
	.tab:first-child p {
		/*Calculated: width: 510px;*/
		width: 411px;
	}

	.tab:last-child img {
		max-width: 309px;
		max-height: 309px;
	}

	.tab:last-child h3, 
	.tab:last-child p {
		/*Calculated: width: 510px;*/
		width: 400px;
	}

	#social_media { 
		width: 750px;
	}

	/* About Page */
	section#about {
		width: 720px;
	}

	/* The Service Store */
	.the_service_store h2 {
		font-size: 2.4em;
		margin-bottom: 30px;
	}

	.sp h2 {
		margin-bottom: 70px;
	}

	.the_service_store h3#category_title {
		/*
		font-size: 2.65em;
		font-size: 1.5em;
		*/
		font-size: 1.35em;
	}

	#store_selection {
		width: 750px;
	}

	#store_selection .categorie_port {
		margin-right: 121px;
	}

	#store_selection .categorie_port h4 {
		width: 169px;
	}

	#service_content img.large {
		max-width: 100%;
		max-height: 100%;
	}

	.software_WP img#sp_software_to_sell_1 {
		max-width: 585px !important;
		max-height: 585px !important;
	}

	.software_WP div#software_products {
		width: 750px;
	}

	.software_WP div#software_products div#cd_collection {
		width: 750px;
		height: 94px;
 	}

 	.software_WP div#cd_collection div.software_cd {
 		margin-right: 75px;
 	}

	/* Special Text */
	#service_content #special_text span.letter {
		padding-bottom: 15px;
	}

	#service_content #special_text:hover span.word {
		padding: 0px 10px;
	}

	#service_content #special_text:hover span.letter {
		padding: 0px 8px 15px 8px;
	}

	#service_content #special_text span.letter:hover {
		top: -15px;
	}

	a#back_button {
		width: 720px;
	}

	#contact div#service_icons {
		width: 650px;
	}

	#contact div#service_icons div.icon_box:nth-child(3n+0) {
		margin-right: 0px !important;
	}

	#contact div#service_icons div.icon_box:nth-child(4n+0) {
		margin-right: 25px;
	}

	/* Footer */
	footer#main_footer {
		width: 730px;
	}

}

/* 768 */	
@media screen and (max-width: 1205px) {

	/* Universal Styles */
	div.software_cd {
		width: 95px;
		height: 95px;
	}

	div.software_cd:after {
		width: 95px;
		height: 95px;
	}

	div.software_cd div.cd_contents {
		width: 95px;
		height: 95px;
	}

	div.software_cd div.cd_circle {
		width: 31px;
		height: 31px;
		margin: -16.5px 0 0 -16.5px;
		/*margin: -18.15px 0 0 -18.15px;*/
	}

	div.hidden_circle {
		width: 33px;
		height: 33px;
		margin: -16.5px 0 0 -16.5px;
		/*margin: -18.15px 0 0 -18.15px;*/	
	}

	div.software_cd div.cd_circle div.cd_hole {
		width: 13px;
		height: 13px;
		margin: -6.5px 0 0 -6.5px;
	}

	/* Main Content 

	section#main_content {
		width: 609.32px;
	}

	section.white_page {

	}
	*/

	/* Main Content */
	section#main_content {
		/*width: 80%;*/
		width: 609.32px;
		margin-bottom: 85px;
	}

	section#main_content > h2,
	section#main_content > h3 {
		text-align: center;
	}

	section.white_page {
		width: 609.32px;
		margin-top: 37px;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Homepage */
	section#slide_show {
		width: 768px; 
		height: 253.88px;
	}

	section#slide_show #slide_show_view {
		width: 672.78px; 
		height: 253.88px;
	}

	section#slide_show .slide {
		width: 622.78px; 
		height: 213.88px;
		padding: 20px 25px;

		/*
		padding: 15.87px 19.04px;
		*/
	}

	section#slide_show h2 {
		width: 317.36px;
		font-size: 1.59em !important;
		padding-bottom: 15px;
		/*padding-bottom: 19.04px;*/
	} 

	section#slide_show #slide_show_view img {
		/*port max-width: 304.66px;*/
		max-width: 297.66px;
		max-height: 222.15px;
	}

	section#slide_show a.slide_button {
		font-size: 0.85em;
		border-width: 4px;
		margin-top: 12px;
		padding: 7px;
	}

	section#slide_show #s1 {
		width: 662.78px; 
		height: 243.88px;

		/*
		width: 273.58px;
		height: 85.61px;
		*/
	}

	section#slide_show #s3 {
		width: 672.78px; 
		height: 253.88px;
	}

	section#slide_show #s3 div.text_container { 
		padding-top: 20px;
		padding-right: 25px;

	}
	
	section#slide_show #s3 div.text_container h2 {
		width: 410px;
		/*width: 427.62px;*/
	}

	section#slide_show #s3 img {
		max-width: 100% !important;
		max-height: 253.88px !important;
	}

	section#slide_show #s3 div.software_cd {
		top: 73px;
		left: 121px;
	}

	@keyframes slide_cd_move {
		0% {
			left: -320px; /*550*/
		}

		100% {
			left: 121px;
		}
	}

	@-webkit-keyframes slide_cd_move {
		0% {
			left: -320px;
		}

		100% {
			left: 121px;
		}
	}

	@-moz-keyframes slide_cd_move {
		0% {
			left: -320px;
		}

		100% {
			left: 121px;
		}
	}

	@-ms-keyframes slide_cd_move {
		0% {
			left: -320px;
		}

		100% {
			left: 121px;
		}
	}

	@-o-keyframes slide_cd_move {
		0% {
			left: -320px;
		}

		100% {
			left: 121px;
		}
	}

	section#slide_show #s3 div.software_cd div#arrow {
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent;
		border-left: 43px solid #398032;

		left: -1.9px;
	}

	section#slide_show #s4 h2 {
		width: 305.36px;
	}

	section#slide_show #s4 div.image_container { 
		width: 298.31px;
		top: 10px;
	}

	section#slide_show #s4 div.image_container img {
		max-width: 138.37px !important;
		max-height: 361.14px !important;
	}

	section#slide_show #s4 div.image_container a:first-child {
		top: 25.39px;
	}

	section#slide_show #s4 div.image_container a:first-child:hover {
		top: 6.35px;
	}

	section#slide_show #s4 div.image_container a:last-child {
		top: 0px;
	}

	section#slide_show #s4 div.image_container a:last-child:hover {
		top: -19.04px;
	}

	section#slide_show section#arrows {
		width: 748.96px;
		height: 31.74px;
		/*margin: -15.87px 0 0 -374.48px;*/
	}

	section#slide_show section#arrows img {
		width: 31.74px;
		height: 31.74px;
	}

	section#arrows img#left_arrow {
		padding-right: 9.52px;
		float: left;
	}

	section#arrows img#left_arrow:hover {
		margin-left: -9.52px;
	}

	section#arrows img#right_arrow {
		padding-left: 9.52px;
		float: right;
	}

	section#arrows img#right_arrow:hover {
		margin-right: -9.52px;
	}

	section#slide_show ul#slide_show_nav {
		width: 235px;
		margin-left: -117.5px;
	}

	section#slide_show ul#slide_show_nav li { 
		width: 9px;
		height: 9px;
		margin-left: 35px;
		border-width: 3px;

		/*
		width: 8.89px;
		height: 8.89px;
		margin-left: 34.91px;
		border-width: 2.54px;
		*/
	}

	/* Tabs */
	#tabs {
		width: 609.32px;
	}

	#tabs .tab {
		width: 100% !important;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.tab h3 {
		font-size: 1.27em;
		margin-bottom: 6.35px;
		width: 100% !important;
		float: none !important;
	}

	.tab p {
		width: 100% !important;
		float: none !important;
	}

	.tab img {
		margin: 0px auto 10px auto;
		display: block;
		float: none !important;
	}

	.tab:first-child img {
		max-width: 50% !important;
		max-height: 50% !important;
	}

	.tab:last-child img {
		max-width: 100%;
		max-height: 100%;

		position: static;
		top: 0px;
		right: 0px;

		transform: translateY(0%);
	  	-webkit-transform: translateY(0%);
	  	-moz-transform: translateY(0%);
	  	-ms-transform: translateY(0%);
	  	-o-transform: translateY(0%);
	}

	/* Social Media */
	#social_media { 
		width: 169px;
		margin: 50px auto 0px auto;
	}

	#social_media .categorie_port { 
		margin-right: 0px;
		margin-bottom: 50px;
	}

	#social_media .categorie_port:last-child { 
		margin-bottom: 0px;
	}

	/* About Page */
	section#about {
		width: 609.32px;
	}

	/* The Service Store */
	section#store_selection {
		width: 169px;
		margin: 0 auto;
	}



	h2 {
		font-size: 2em !important;
	}

	.the_service_store h3#category_title {
		font-size: 1.25em;
	}



	section#store_selection div.categorie_port {
		margin-right: 0px;
	}

	h3#service_title div#main_text {
		font-size: 1.5em; /*1.8*/
	}

	#service_content {
		font-size: 0.9em;
		/*font-size: 0.93em;*/
	}

	#service_content h4 {
		font-size: 1.43em;
	}

	#service_content img.small {
		width: 80%;
		height: 100%;
	}

	#service_actions li {
		margin-right: 15px;
	}

	#service_actions li button {
		font-size: 0.9em;
		padding: 8px;
	}

	/* Special Text */
	#service_content #special_text span.letter {
		padding-bottom: 15px;
	}

	#service_content #special_text:hover span.word {
		padding: 0px 10px;
	}

	#service_content #special_text:hover span.letter {
		padding: 0px 8px 15px 8px;
	}

	#service_content #special_text span.letter:hover {
		top: -15px;
	}

	a#back_button {
		width: 609.32px;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;

		font-size: 1.2em;
		padding: 8px;
	}

	/* Contact Page */
	#contact {
		width: 609.32px;
		font-size: 0.8em !important;
	}

	#contact input:not([type="submit"]) {
		width: 40%; /*29%;*/
		height: 20px;
	}

	#contact input:not([type="submit"]):focus {
		width: 45%; /*42%;*/
	}

	#contact textarea {
		resize: none;
		width: 88%;
		height: 170px !important;
		/*
		max-width: 100%;
		max-height: 100%;
		*/
	}

	#contact textarea:focus {
		width: 96%;
	}

	#contact div#service_icons {
		width: 200px;
	}

	#contact div#service_icons div.icon_box {
		margin-right: 0px;	
	}

	#contact div#service_icons div.icon_box:nth-child(4n+0) {
		margin-right: 8px;
	}

	/* Footer */
	footer#main_footer {
		width: 609.32px;
		padding: 7px 10px;
		font-size: 0.9em;
		line-height: 20px;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

}

/* For Cart Bar and Header */
@media screen and (max-width: 985px) {

	/* Header */
	header#main_header a#logo_container {
		padding-top: 10px;
		text-align: center;
		float: none;
		margin: 0 auto;
	}

	header#main_header nav#main_nav {
		width: 100%;
		font-size: 1.05em;
		float: none;
		text-align: center;
		margin-top: 50px;
		margin-right: 0px;
	}

	header#main_header nav#main_nav li {
		float: none;
		display: inline-block;
	}

	/* Cart Bar */
	section#cb_container div#service_name {
		width: 100%;
		top: -26px;
	}

	section#cb_container {
		width: 100% !important;
		height: 95px !important;

		top: auto !important;
		left: auto !important;
		bottom: -150px;
	}

	section#cart_bar {
		width: 100% !important;
		height: 95px !important;

		/*
		overflow-x: scroll;
		overflow-y: visible;
		*/

		border-radius: 0px !important;
		-webkit-border-radius: 0px !important;
		-moz-border-radius: 0px !important;
		-ms-border-radius: 0px !important;
		-o-border-radius: 0px !important;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	section#cart_bar:hover {
		width: 100% !important;
	}

	div#si_container {
		width: 100%;
		height: 85px;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	div#si_container::-webkit-scrollbar {
	    width: 0em;
	}
	 
	div#si_container::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.0);
	}
	 
	div#si_container::-webkit-scrollbar-thumb {
	  background-color: rgba(0,0,0,0.0);
	  outline: 0px solid rgba(0,0,0,0.0);
	}

	section#cart_bar div#service_icons {
		/* breaking point! width: 1020px; */
		/* width: 1032px; */ /* adding 12px for margin-right */

		width: auto;
		height: 45px;
		position: relative;
		float: left;

		margin: 10px 0px 0px 10px;
		padding-right: 10px;
	}

	section#cart_bar div#service_icons div.icon {
		width: 45px;
		height: 45px;
		font-size: 1.95em;
		line-height: 45px;
		float: none;
		position: absolute;
		top: 0px;
	}

	/* 1-8 */
	section#cart_bar div#service_icons div.icon:nth-last-child(1) {
		left: 0px;	
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(2) {
		left: 65px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(3) {
		left: 130px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(4) {
		left: 195px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(5) {
		left: 260px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(6) {
		left: 325px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(7) {
		left: 390px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(8) {
		left: 455px;
	}

	/* 8-16 */
	section#cart_bar div#service_icons div.icon:nth-last-child(9) {
		left: 520px;	
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(10) {
		left: 585px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(11) {
		left: 650px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(12) {
		left: 715px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(13) {
		left: 780px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(14) {
		left: 845px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(15) {
		left: 910px;
	}

	section#cart_bar div#service_icons div.icon:nth-last-child(16) {
		left: 975px;
	}

	/* Only For Mobile */
	.new_icon_m {
		animation: icon_fade_in 0.3s linear;
		-webkit-animation: icon_fade_in 0.3s linear;
		-moz-animation: icon_fade_in 0.3s linear;
		-ms-animation: icon_fade_in 0.3s linear;
		-o-animation: icon_fade_in 0.3s linear;
	}

	@keyframes icon_fade_in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes icon_fade_in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes icon_fade_in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes icon_fade_in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-o-keyframes icon_fade_in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	section#cart_bar div#service_icons div.icon:nth-child(even) {
		margin-right: 20px !important;
	}

	section#cart_bar div#service_icons div.icon:first-child { 
		margin-right: 0px !important;
	}

	section#cart_bar div#form_actions {
		width: 260px;
		padding-top: 0px;
		/*position: fixed;*/
		left: 50%;
		margin-left: -130px;
	}
}

/* 
In Future
500 	
@media screen and (max-width: 775px) {

}
*/


/*
*
*
* IGNORE 
*
*/

/*iPhone 6 width @media screen and (max-width: 667px) {*/
/* Landscape */
/*
@media screen and (max-width: 969px) {
	
	header#main_header img {
		width: 100%;
		height: 100%;
		/*
		width: 191px;
		height: 66px;
		*//*
	}

	header#main_header nav#main_nav {
		width: 463px;
		/*width: 503px;*/
		/*font-size: 1em;*/
		/*
		float: none;
		margin: 35px auto 0px auto;

		margin-top: 125px;
		margin-right: 40px;
		margin-bottom: 25px;
		*//*
	}

	header#main_header nav#main_nav li {
		margin-left: 5px;
	}

}
*/

/* 
To Small? 
Portrait? 
*/

/*
@media screen and (max-width: 560px) {

	#service_actions {
		/* width for above: width: 364px;*/ /*
		width: 311px;
		margin: 0 auto;
		float: none;
	}

	#service_actions li a {
		font-size: 0.75em;
	}

	a#back_button {
		margin-top: 0px;
	}

	#contact label {
		font-size: 1em;
	}

	#contact input:not([type="submit"]) {
		font-size: 1em;
		width: 130px;
		height: 25px;
	}

	#contact input:not([type="submit"]):focus {
		width: 150px;
	}
}
*/

/* Tablets and Netbooks */
/*
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

  	body {
  		display: none;
  	}

}
*/

/* Mobile Phones */

/* portrait */
/*
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: portrait) {

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: landscape) {

}
*/








/**Call Now**/

#call_now {
	font-size: 2.6em;
	padding: 140px 0px 100px 0px;
	font-weight: bold;
	font-family: 'Arial Black', arial;
	color: #000;
	text-shadow: 0px 0px 10px #000;
	text-align: center;
	line-height: 62px;
}

#call_now a {
	text-decoration: underline;
}










