/*
 *  Copyright 2012 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/*
CSS FOR CAROUSEL CONTENT
*/

.inpt-header-content.carousel-contents div.carousel-table{
	display : table;
	}

.inpt-header-content.carousel-contents div.carousel-row{
	display : table-row;
	max-width : 1100px;
	box-sizing : border-box;
}


.inpt-header-content.carousel-contents .carouselDetails a {
	display : table-cell;
}

.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails .details {
	display: table-cell;
	padding: 0 0 40px 0;
}

.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails .details a {
	background-color: #b21a24;
	border: #b21a24 1px solid;
	padding: 10px 20px;
	margin-top: 40px;
	display: inline-block;
	position: relative;
}

.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails .details a:hover {
	background-color: transparent;
}

.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails .details p {
	position: relative;
}	
	
.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails .content-illustration {
	float: right;
	padding: 0;
	margin: 0;
	display : table-cell;
    vertical-align: middle;
    position: relative;
}

.inpt-header-content.carousel-contents .carousel-container.js .carouselDetails {
	position : relative;
	max-width : none;
	min-height:
}
.inpt-header-content.carousel-contents .carousel-container.js ul {
	padding : 0;
	margin : 0;
}
.inpt-header-content.carousel-contents .carousel-container.js ul li {
	max-width : none;
	padding : 0;
	margin : 0;
}

.inpt-header-content.carousel-contents .carousel-container .carouselDetails {
	box-shadow : none;
	vertical-align : middle;
	display : table-cell;
	vertical-align : middle;
    width: 100%;
    font-size : 16px;
    line-height : 22px;
}
.inpt-header-content.carousel-contents .carousel-container .carouselDetails div {
	position : relative;
	vertical-align : middle;
}
.inpt-header-content.carousel-contents .carouselDetails h1 {
    color : #fff;
    font-size : 30px;
    line-height : 42px;
	margin-bottom : 20px;
}
.inpt-header-content.carousel-contents .carouselDetails h2,
.inpt-header-content.carousel-contents .carouselDetails h3{
    color : #fff !important;
}
.inpt-header-content.carousel-contents .carouselDetails h1:before {
    background : none;
}
.inpt-header-content.carousel-contents .carousel-container  div.carrousel-table{
	display : table;
}
.inpt-header-content.carousel-contents .carousel-container  div.carrousel-row{
	display : table-row;
	max-width : 1100px;
	box-sizing : border-box;
}
.inpt-header-content.carousel-contents {
	position : relative;
}

.wrapper.home-carousel-wrapper {
	margin : 60px auto 30px;
}
.inpt-header-content.carousel-contents div.carousel-pagination {
	opacity : 0;
}
.inpt-header-content.carousel-contents:hover div.carousel-pagination {
	opacity : 1;
}
.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control {
 	background-color: #000;
    color: transparent;
    height: 30px;
    margin-top: 70px;
    text-indent: 0;
    width: 30px;
    opacity : 0.45;
    color : #fff;
    z-index : 10;
    position : absolute;
    right : -102px;
    top : 50%;
}
.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control:before {
	display: inline-block;
  	font-family: FontAwesome;
  	font-style: normal;
  	font-weight: normal;
  	line-height: 1;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
    z-index : 10;
}
.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control:hover {
 	opacity : 1;
}
.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control.play:before {
	content: "\f04c";
}
.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control.pause:before {
	content: "\f04b";
}

.inpt-header-content.carousel-contents div.carousel-pagination a {
	display : none;
}
.inpt-header-content.carousel-contents div.carousel-pagination .carousel-control {
	top : 50%;
	z-index : 10;
	width : 56px;
	height : 56px;
	color : transparent;
	text-indent : -1000px;	
	margin-top : -28px;
}
.inpt-header-content.carousel-contents div.carousel-pagination .carousel-control.next {
	right : 0;
	left : auto;
	margin-right: -100px;
}
.inpt-header-content.carousel-contents div.carousel-pagination .carousel-control.previous {
	margin-left: -100px;
}
.inpt-header-content.carousel-contents div.carousel-pagination .carousel-control.next:hover {
	opacity : 1;
}
.inpt-header-content.carousel-contents div.carousel-pagination .carousel-control.previous:hover {
	opacity : 1;
}


@media screen and (min-width: 1350px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 1150px;
	}
}

@media screen and (max-width: 1350px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 900px;
	}
}

@media screen and (max-width: 1100px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 830px;
	}
	.inpt-header-content.carousel-contents .content-illustration img {
		max-width : 200px;
	}
}

@media screen and (max-width: 910px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 600px;
	}
	.inpt-header-content.carousel-contents .carousel-control {
		display : none;
	}
}

@media screen and (max-width: 790px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 635px;
	}
	
	.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control {
		right: 0px;
	}
}

@media screen and (max-width: 660px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 540px;
	}
	
	.inpt-header-content.carousel-contents .carousel-container .carouselDetails, 
	.inpt-header-content.carousel-contents .carousel-container .carrousel-row, 
	.inpt-header-content.carousel-contents .carousel-container .carrousel-table {
		text-align : center;
		display : block;
	}
	
	.inpt-header-content.carousel-contents .content-illustration {
		display : none !important;
	}
}

@media screen and (max-width: 400px) {
	.home-carousel-wrapper.wrapper,
	.inpt-header-content.carousel-contents .carousel-container.js ul li .carouselDetails {
		width : 285px;
	}
	
	.inpt-header-content.carousel-contents .carousel-control {
		display : none;
	}
	
	.inpt-header-content.carousel-contents div.carousel-pagination button.slide-control {
		top : 15px;
		margin-top : 0;
		margin-right : 0;
	}
}

/* Animation */

.inpt-header-content.carousel-contents .carousel-container.js li.animate .carouselDetails .content-illustration {
	animation-name: carousel-img;
	animation-duration: 1.5s;
}

@keyframes carousel-img {
	0% {
	    top: -800px;
	}
	5% {
	    top: -800px;
	}
	80% {
	    top: 50px;
	}
	100% {
	    top: 0;
	}
}

.inpt-header-content.carousel-contents .carousel-container.js li.animate .carouselDetails .details h1 {
	animation-name: carousel-title;
	animation-duration: 2s;
}

@keyframes carousel-title {
	0% {
	    top: -1500px;
	}
	80% {
	    top: 50px;
	}
	100% {
	    top: 0;
	}
}

.inpt-header-content.carousel-contents .carousel-container.js li.animate .carouselDetails .details p {
	animation-name: carousel-para;
	animation-duration: 2.5s;
}

@keyframes carousel-para {
	0% {
	    left: -1500px;
	}
	50% {
	    left: -1500px;
	}
	90% {
	    left: 20px;
	}
	100% {
	    left: 0;
	}
}

.inpt-header-content.carousel-contents .carousel-container.js li.animate .carouselDetails .details a {
	animation-name: carousel-anchor;
	animation-duration: 2.7s;
}

@keyframes carousel-anchor {
	0% {
	    left: -1500px;
	}
	50% {
	    left: -1500px;
	}
	90% {
	    left: 20px;
	}
	100% {
	    left: 0;
	}
}