/* red Skin Colors
================================================== */

.navigation ul li a:hover, .navigation ul li a.selected, .navigation ul li a.active{
	border-bottom:1px solid #d7202c;
}

.navigation ul li ul li:first-child a, .navigation ul li ul li:first-child a:hover {
	border-top:1px solid #d7202c;
}

span.color, a:hover, .navigation ul li ul li a:hover, .recent-blog .tags-comments a:hover, .tags-comments2 a:hover, #accordion h3:hover a, ul.team  li:hover h3, .choose ul li:hover, .our-services ul li:hover h3, .square-list li:hover, .square-list li a:hover, .check-list li:hover, .check-list li a:hover, .plus-list li:hover, .plus-list li a:hover, .arrow-list li:hover, .arrow-list li a:hover, .cross-list li:hover, .cross-list li a:hover, .star-list li:hover, .star-list li a:hover, .minus-list li:hover, .minus-list li a:hover, .arrow2-list li:hover, .arrow2-list li a:hover, .circle-list li:hover, .circle-list li a:hover, .breadcrumbs li a, .comment a, h1.big, .tweet_list li a, .under-construction .copyright a {
	color:#d7202c;
}

::-moz-selection {
	background:#d7202c;
}

::selection {
    background:#d7202c;
}

span.line, .services .item:hover .square, .services .item.active .square, .flex-control-nav li a:hover, .flex-control-nav li a.active, .subscribe input.submit, a.link, #accordion h3.ui-state-active, .meter > span:after, .animate > span > span, .icon-box, .button.color, .button.black:hover, .highlight-color, .red .colorTip, #horizontal-tabs ul.tabs li.current, #horizontal-tabs ul.tabs li:hover, #vertical-tabs ul.tabs li.current, #vertical-tabs ul.tabs li:hover, #toggle-view li h3.color, .dropcap.color, .pagination.color li a.current, .pagination.color li a:hover, .tables-column.featured .header h3, .tables-column .footer.gray h3 span:hover, .tables-column .footer.black h3 span:hover, .tables-column.featured .footer h3 span, #options li a:hover, #options li a.selected, .popular-tags a:hover, .date-post .day, .date-post .month, .ei-slider-thumbs li.ei-slider-element, #under-construction   {
	background:#d7202c;
}

.ei-slider-thumbs li.ei-slider-element {
	background: rgba(230,65,65,0.9);
}

.tabscontent.color {
	background-color:#d7202c !important;
}

.services .item:hover, .services .item.active {
	border-right:5px solid #d7202c;
}

.recent-work .item:hover, .lightbox .item:hover, .portfolio .item:hover {
	border-bottom:4px solid #d7202c;
}

.sti-menu li a:hover {
	border-bottom:5px solid #d7202c;
}

#horizontal-tabs .tabscontent {
	border-top:1px solid #d7202c;
}

#vertical-tabs .tabscontent {
	border-left:1px solid #d7202c;
}

/* another color in hover from red */
.subscribe input.submit:hover, .tables-column.featured .header h1 {
	background:#fa5454;
}

/* services icons */
.color-1 { background:url(../../images/icons/services/webdesign-red.png) no-repeat; width:45px; height:42px; }
.color-2 { background:url(../../images/icons/services/branding-red.png) no-repeat; width:50px; height:47px; }
.color-3 { background:url(../../images/icons/services/development-red.png) no-repeat; width:47px; height:46px; }
.color-4 { background:url(../../images/icons/services/wordpress-red.png) no-repeat; width:45px; height:44px; }

/* process icons */
.color-5 { background:url(../../images/icons/process/search-red.png) no-repeat; width:39px; height:40px; }
.color-6 { background:url(../../images/icons/process/design-red.png) no-repeat; width:46px; height:40px; }
.color-7 { background:url(../../images/icons/process/develop-red.png) no-repeat; width:49px; height:41px; }
.color-8 { background:url(../../images/icons/process/deliver-red.png) no-repeat; width:45px; height:30px; }

/* team social icons */
a.twitter { background: url(../../images/icons/icons/social-icons-red.png) no-repeat 0 0;  }
a.facebook { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -28px 0;  }
a.skype { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -56px 0;  }
a.linkedin { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -84px 0;  }

a.twitter:hover { background: url(../../images/icons/icons/social-icons-red.png) no-repeat 0 -29px;  }
a.facebook:hover { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -28px -29px;  }
a.skype:hover { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -56px -29px;  }
a.linkedin:hover { background: url(../../images/icons/icons/social-icons-red.png) no-repeat -84px -29px;  }

/* Small Icons */
* .icon.color {
	background:url(../../images/icons/icons/icons-red.png) no-repeat;
}

/* pricing table icons */
.list li span.ok.color {
	background: url(../../images/icons/icons/pricing-tabe-icons-red.png) no-repeat -13px 0;
	width: 13px;
	height: 12px;
	display: inline-block;
}

.list li span.minus.color {
	background: url(../../images/icons/icons/pricing-tabe-icons-red.png) no-repeat 0 -7px;
	width: 9px;
	height: 4px;
	display: inline-block;
}

/* arrow icons for flex slider */
.flex-direction-nav li .next{
	background:#d7202c url(../../images/icons/project-slider-arrow-right.png) no-repeat;
	background-position:55% 50%;
}

.flex-direction-nav li .prev{
	background:#d7202c url(../../images/icons/project-slider-arrow-left.png) no-repeat;
	background-position:45% 50%;
}

/* color switcher active */
.styleswitch.red {
	opacity:1;
}

.contact {background: url(../../images/kontakt.jpg) no-repeat top right; min-height: 134px;}
.contact p {font-size: 15px; color: #d7202c; padding: 40px 0 20px 30px; line-height: 120%;}
.contact-text {font-size:14px; line-height: 130%; padding-left: 24px;}
.contact-text a {color: #d7202c;}

/* codrops */

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 164px;
	height: 164px;
	border-radius: 50%;
}

.ch-info-wrap {
	top: 18px;
	left: 18px;
	background: #f9f9f9 url(../../imagesround/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	
	-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}

.ch-info .ch-info-front {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-back {
	opacity: 0;

	background: #d7202c;
	pointer-events: none;
	
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-1 { 
	background-image: url(../../imagesround/lager-versand.jpg);
}

.ch-img-2 { 
	background-image: url(../../imagesround/auftragsabwicklung.jpg);
}

.ch-img-3 { 
	background-image: url(../../imagesround/gecco-green.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Source Sans Pro', sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
	/*letter-spacing: 1px;*/
	padding-top: 44px; padding-bottom: 10px;
	font-family: 'Source Sans Pro', sans-serif;
}

.ch-info p a:hover {
	color: #fff;
}

.ch-item:hover .ch-info-front {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	opacity: 0;
} 

.ch-item:hover .ch-info-back {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}

.ch-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 20px;
}


/* codrops klein */

.ch-item2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap2, 
.ch-info2{
	position: absolute;
	width: 138px;
	height: 138px;
	border-radius: 50%;
}

.ch-info-wrap2 {
	top: 14px;
	left: 14px;
	background: #f9f9f9 url(../../imagesround/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info2 > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	
	-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}

.ch-info2 .ch-info-front2 {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info2 .ch-info-back2 {
	opacity: 0;

	background: #d7202c;
	pointer-events: none;
	
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-4 { 
	background-image: url(../../imagesround/lager-versand-166.jpg);
}

.ch-img-5 { 
	background-image: url(../../imagesround/auftragsabwicklung-166.jpg);
}

.ch-img-6 { 
	background-image: url(../../imagesround/gecco-green-166.jpg);
}

.ch-info2 h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Source Sans Pro', sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info2 p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

.ch-info2 p a {
	display: block;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 18px;
	/*letter-spacing: 1px;*/
	padding-top: 30px; padding-bottom: 10px;
	font-family: 'Source Sans Pro', sans-serif;
}

.ch-info2 p a:hover {
	color: #fff;
}

.ch-item2:hover .ch-info-front2 {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	opacity: 0;
} 

.ch-item2:hover .ch-info-back2 {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
	opacity: 1;
	pointer-events: auto;
}

.ch-grid2 {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid2:after,
.ch-item2:before {
	content: '';
    display: table;
}

.ch-grid2:after {
	clear: both;
}

.ch-grid2 li {
	width: 166px;
	height: 166px;
	display: inline-block;
	margin: 20px 30px 20px 0;
}


/* hover */
#text-2, #text-3, #text-4, #text-5, #text-6, #moreinfo_text_1, #moreinfo_text_2 {display: none; color:#585858;}
#moreinfo_1, #moreinfo_2 {cursor:pointer;}
li a{cursor:pointer;}

/* modal window impressum */

.modal {

    /* Overlay page content */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;

    /* Transition opacity on open */
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;

    /* Hide for now */
    opacity: 0;
    pointer-events: none;
}

/* Show modal */
.modal:target {
    opacity: 1;
    pointer-events: auto;
    /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
    width: 50%;
    background: #fff;
    position: relative;
    margin: 10% auto;

    /* Default minimise animation */
    -webkit-animation: minimise 500ms linear;
    -moz-animation: minimise 500ms linear;

    /* Prettify */
    padding: 30px;
    border-radius: 7px;
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    background: #fff;
    background: -moz-linear-gradient(#fff, #ccc);
    background: -webkit-linear-gradient(#fff, #ccc);
    background: -o-linear-gradient(#fff, #ccc);
    text-shadow: 0 1px 0 #fff;
}

/* Override animation on modal open */
.modal:target > div {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
}

.modal h2 {
    font-size: 36px;
    padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
    -webkit-transform: scale3d(1,1,1);
  }
  100% {
    -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -moz-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -moz-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -moz-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
    -moz-transform: scale3d(1,1,1);
  }
  100% {
    -moz-transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"] {
    position: absolute;
    right: 0;
    top: 0;
    color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
    outline: none;
}

/* Create close button */
.modal a[href="#close"]:after {
    content: 'X';
    display: block;

    /* Position */
    position: absolute;
    right: -10px;
    top: -10px;
    width: 1.5em;
    padding: 1px 1px 1px 2px;

    /* Style */
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    font-weight: bold;
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    .modal a[href="#close"]:focus:after,
    .modal a[href="#close"]:hover:after {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {outline: 1px solid #000;}

/* Open modal */
a.openModal { }
a.openModal:hover, a.openModal:focus {text-decoration: underline;}

.green {line-height: 140%;}