am-commons 0.0.1 → 0.0.3

data/stylesheets/am-commons/am-flights-result.scss

@@ -0,0 +1,2404 @@
+
+@import "compass/css3";
+@import "compass/support";
+@import "compass/utilities/general/clearfix";
+@import "compass/css3/transition";
+
+@import "am-variables";
+@import "epp-mixins";
+
+
+@import "am-utils";
+@import "am-icons";
+
+@mixin striped-bg($bg-color: #ccc, $darken-amount: 5%, $stripe-color: lighten($bg-color, $darken-amount)) {
+	background-color: $bg-color;
+	@include background-image(linear-gradient(-45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent));
+	background-size: 10px 10px;
+ }
+
+ @mixin striped-bg2($bg-color: $gray-lightest, $color: $orange) {
+	background-color: $bg-color;
+	@include background-image(linear-gradient(-45deg, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent));
+	background-size: 50px 50px;
+ }
+ 
+.header {
+	position:relative;
+	margin-top:8px;
+
+	&__suggestion {
+		position:absolute;
+		right:8px;
+		top:-10px;
+	}
+
+}
+
+
+
+.view-detail, .view-detail-icon {
+	//position: relative;
+	//top:8px;
+
+	@include respond-to(ph) {
+		//top:0px;
+	}
+
+}
+
+.airline-name {
+	display:inline-block;
+}
+
+.cluster {
+	position:relative;
+	padding:24px 8px 8px;
+	background:$gray-lightest;
+	border-bottom:2px solid $orange;
+	margin-bottom:24px;
+	
+	@include respond-to(ph) {
+		padding-right:24px;
+	}
+
+	&:after {
+		content:"";
+		position:absolute;
+		top:0px;
+		right:0px;
+		height:100%;
+		width:32px;
+		background:$orange;
+
+		@include respond-to (ph) {
+			width:16px;
+		}
+	}
+
+	&--favorite {
+		&:after {
+			content:"";
+			position:absolute;
+			top:0px;
+			right:0px;
+			height:100%;
+			width:32px;
+			//background-size: 10px 10px;
+			//background-image: linear-gradient(135deg, rgb(255,121,0) 25%, transparent 25%, transparent 50%, rgb(255,121,0) 50%, rgb(255,121,0) 75%, transparent 75%, transparent);
+		    //background-color:$gray-lightest;
+		    //@include striped-bg(#FF7900, 10%);
+		    background-image:url("#{$staticPath}img/common/stripe.png");
+		}
+	}
+
+	& .favorite {
+		@include font-rem(bold, 24px, 24px);
+		position:absolute;
+		top:16px;
+		right:8px;
+		z-index:3;
+		background:$white;
+		@include border-radius(50%);
+		padding:8px;
+		cursor:pointer;
+		border:2px solid $gray-lightest;
+		text-align:center;
+
+		&--active {
+			border-color:$white;
+			background:$orange;
+			color:$white;
+		}
+	}
+
+	& .segment {
+		background:$white;
+		margin-bottom:16px;
+		//border:2px solid $white;
+
+		// &:hover {
+		// 	background:#DEEFF9;
+		// 	cursor:pointer;
+
+		// 	& .segment-detail {
+		// 		background:$white;
+		// 	}
+		// }
+
+		&--selected {
+			border:2px solid #DFDFDF;
+
+			&:hover {
+				background:$white !important;
+			}
+
+		}
+		
+		&__title {
+			text-align:center;
+			padding:0px;
+			margin:0px 0px 16px 0px;
+
+			&--detail {
+				margin-top:30px;
+				@include respond-to(ph) {
+					margin-top:0px;
+				}
+			}
+
+			@include respond-to(ph) {
+				text-align:left;
+				padding-left:40px;
+				margin-bottom:0px;
+			}
+		}
+
+		&__container-grafic {
+			text-align:center;
+
+		}
+
+		&__items {
+			display:table;
+			width:100%;
+			padding-bottom:8px;
+			min-height:96px;
+			
+			&:hover {
+				background:#DEEFF9;
+				cursor:pointer;
+			}
+
+			&__item {
+				box-sizing:border-box;
+				display:table-cell;
+				vertical-align:middle;
+				padding:8px 0px 0px;
+				
+				@include respond-to(ph) {
+					display:block;
+				}
+
+				& img {
+					vertical-align:middle;
+				}
+
+				&--fixed {
+					width:120px;
+
+					@include respond-to(ph) {
+						width:auto;
+					}
+
+					&__info {
+						display:table-cell;
+						vertical-align:middle;
+						padding:0px 8px 0px 16px;
+
+						&__row {
+							
+
+						}
+
+						&--airline {
+							padding-left:4px !important;
+						}
+
+					}
+
+				}
+
+				&--time {
+					width:104px;
+
+					@include respond-to(ph) {
+						text-align:left !important;
+						width:auto;
+						padding-left:40px !important;
+					}
+
+				}
+
+				&__info {
+					display:table-cell;
+					vertical-align:middle;
+
+					&__row {
+						margin:0px;
+
+					}
+
+				}
+				
+				&--detail {
+					@include respond-to(ph) {
+						display:block;
+					}
+
+					&--view {
+						@include respond-to(ph) {
+							padding-left:40px !important;
+						}
+					}
+
+				}
+				
+
+			}
+
+		}
+
+	}
+
+}
+
+.price-box {
+	padding-right:40px !important;
+	text-align:center;
+	
+	&__container {
+		width:100%;
+		max-width:256px;
+		
+	}
+
+	&__table {
+		border:0px;
+		background:transparent;
+		padding:0px;
+		margin:0px 0px 32px 0px;
+		text-align:left;
+		
+		&__price {
+			width:10%;
+		}
+
+		& tr {
+			border:0px;
+			padding:0px;
+			margin:0px;
+
+			& td, th {
+				border:0px;
+				padding:0px;
+				margin:0px;
+				font-weight:normal;
+			}
+
+		}
+
+	}
+
+	&__price {
+		color:$orange-dark;
+	}
+
+}
+
+.promo-card {
+	display:inline-block;
+	padding-right:16px;
+}
+
+.airport-point {
+		background:$gray;
+		width:18px;
+		height:18px;
+		@include border-radius(50%);
+		position:absolute;
+		top:calc(50% - 9px);
+		left:calc(50% - 14px);
+		
+		&:before {
+			content:"";
+			display:block;
+			height:8px;
+			width:8px;
+			position:absolute;
+			left:3px;
+			top:3px;
+			@include border-radius(50%);
+			background:$orange-dark;
+			z-index:2;
+			border:2px solid $white;
+		}
+
+		&--stop {
+			background:$gray-light;
+
+			&:before {
+				background:$notification;
+			}
+
+		}
+
+
+		&--technique {
+			background:transparent;
+
+			&:before {
+				left:5px;
+				top:5px;
+				box-sizing:border-box;
+				@include border-radius(0px);
+				background:$notification;
+			}
+		}
+
+		&--change {
+			background:$gray-light;
+
+			&:before {
+				background:$red;
+			}
+			
+			&:after {
+				content:"";
+				display:block;
+				height:4px;
+				width:18px;
+				position:absolute;
+				left:0px;
+				top:7px;
+				background:$white;
+				
+			}
+			
+			&--horizontal {
+				&:after {
+					height:18px;
+					width:4px;
+					left:7px;
+					top:0px;
+				}
+			}
+
+		}
+
+}
+
+.night-flight {
+	line-height:24px;
+	display:inline-block;
+}
+
+.align-middle {
+	vertical-align:middle;
+}
+
+.flight-line {
+		
+		position:absolute;
+		height:100%;
+		background:$gray;
+		width:8px;
+
+		&--stop {
+			background-size: 15px 15px;
+	        /*background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
+	        background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);*/
+	        background-image: linear-gradient(to top left, rgb(170,170,170) 25%, transparent 25%, transparent 50%, rgb(170,170,170) 50%, rgb(170,170,170) 75%, transparent 75%, transparent);
+	        background-color:$gray-lightest;
+	        min-height:56px;
+	    }
+
+	    &--start {
+	    	top:50%;
+	    	height:50%;
+	    }
+
+	    &--finish {
+	    	bottom:50%;
+	    	height:50%;
+	    }
+
+	    &-horizontal {
+	    	height:8px;
+	    	width:100%;
+	    	position:absolute;
+			background:$gray;
+			top:calc(50% - 16px);
+
+			&--stop {
+				background-size: 15px 15px;
+		        /*background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
+		        background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);*/
+		        background-image: linear-gradient(to top left, rgb(170,170,170) 25%, transparent 25%, transparent 50%, rgb(170,170,170) 50%, rgb(170,170,170) 75%, transparent 75%, transparent);
+		        background-color:$gray-lightest;
+			}
+
+			&--start {
+				border-top-left-radius:4px;
+				border-bottom-left-radius:4px;
+			}
+
+			&--finish {
+				border-top-right-radius:4px;
+				border-bottom-right-radius:4px;
+			}
+
+	    }
+
+}
+
+.segment-detail {
+	border-top:2px solid #F2F2F2;
+	padding-top:16px;
+}
+
+.segment-detail-horizontal {
+	font-size:0px;
+	display:table;
+	width:100%;
+}
+
+
+
+.segment-detail-step-horizontal {
+	display:table-cell;
+	position:relative;
+
+	&__visual {
+		height:40px;
+		
+
+		& .airport-point {
+			top:calc(50% - 21px);
+			left:calc(50% - 12px);
+		}
+
+		& .airport-point--start {
+			left:0%;
+		}
+
+		& .airport-point--finish {
+			left:calc(100% - 18px);
+		}
+	}
+
+	&__description {
+		min-height:8px;
+		position:absolute;
+		top:16px;
+		left:calc(50% - 4px);
+		text-align:left;
+		
+		&--start {
+			top:-24px;
+			left:0px;
+		}
+
+		&--finish {
+			top:-24px;
+			right:0px;
+			text-align:right;
+		}
+
+		&--info {
+			padding-left:4px;
+			border-left:2px solid $gray-light;
+			min-width:96px;
+			
+			&__text {
+				width:100%;
+			}
+			/*&:before {
+				position:absolute;
+				top:calc(50% - 4px);
+				left:calc(50% - 6px);
+				content:"";
+				height:16px;
+				width:2px;
+				background:$gray-light;
+			}*/
+
+		}
+
+	}
+
+}
+
+.airline-logo {
+	width:32px;
+	height:32px;
+
+	&--comparative {
+		@include border-radius(50%);
+	}
+
+}
+
+.segment-detail-step {
+	position:relative;
+	display:table;
+
+	@include respond-to(ph){
+		display:block;
+		margin-left:24px;
+	}
+
+	&__info {
+		display:table-cell;
+		vertical-align:middle;
+		width:220px;
+		text-align:right;
+		padding-right:16px;
+		word-break: break-all;
+	}
+
+	&__visual {
+		display:table-cell;
+		vertical-align:middle;
+		position:absolute;
+		height:100%;
+		width:18px;
+		min-height:16px;
+		z-index:10;
+	}
+
+	&__description {
+		display:table-cell;
+		vertical-align:middle;
+		padding:8px 16px;
+
+		@include respond-to(ph) {
+			display:block;
+		}
+
+		&--info {
+			position:relative;
+			margin-left:8px;
+			padding:8px 16px;
+			background:$gray-lightest;
+			border-left:2px solid $gray-light;
+
+			&:before {
+				position:absolute;
+				top:calc(50% - 1px);
+				left:-20px;
+				content:"";
+				height:2px;
+				width:20px;
+				background:$gray-light;
+			}
+
+			&__cell {
+				display:table-cell;
+				vertical-align:middle;
+
+				@include respond-to(ph){
+					display:block;
+				}
+
+				&--logo {
+					padding-left:16px;
+					padding-right:8px;
+
+					@include respond-to(ph) {
+						padding-left:0px;
+						float:left;
+					}
+
+					& img {
+						width:32px;
+						height:32px;
+						background:$white;
+					}
+				}
+			}
+
+		}
+
+		&--technique {
+			position:relative;
+			margin-left:8px;
+		}
+
+		&--table {
+			display:table;
+			border-color:$gray;
+
+			@include respond-to(ph) {
+				display:block;
+			}
+
+		}
+
+	}
+
+	&:nth-child(odd) {
+		
+	}
+
+	&:nth-child(even) {
+		
+	}
+
+	& .info-destination {
+		margin-bottom:16px;
+
+		@include respond-to(ph) {
+			margin-bottom:0px;
+			padding-left:8px;
+		}
+	}
+
+	& .change-representation {
+		@include respond-to(ph) {
+			display:block;
+		}
+	}
+
+}
+
+.info-place {
+	display:block;
+	text-align:right;
+
+	@include respond-to(ph){
+		text-align:left;
+	}
+}
+
+.iata-code {
+	color:$orange-dark;
+	font-weight:bold;
+}
+
+.search-ctn {
+	background-image:url('http://ux.almundo.com/vuelos/img/fondo-vuelos.jpg');
+	background-size:cover;
+	background-position:center bottom;
+}
+
+.search-container {
+	padding-bottom:104px;
+}
+
+.search {
+	background:$white;
+	background:rgba(255,255,255,0.8);
+	margin-bottom:0px !important;
+	height:auto !important;
+	
+	&--research {
+		//background:$gray-lighter;
+		background:$orange;
+	}
+
+	& * {
+		outline:none;
+	}
+	
+	&__title {
+		margin-top:40px;
+		margin-bottom:40px;
+		line-height:48px !important;
+	}
+
+	/*& [class*="icon-"] {
+		color:$gray-light;
+	}*/
+
+	&__label {
+		display:inline-block;
+	}
+
+	&__input {
+		padding-left:28px !important;
+	}
+
+	&__icon {
+		position:absolute;
+		top:12px;
+		left:16px;
+	}
+	
+	&__icon--first {
+		position:absolute;
+		top:12px;
+		left:10px;
+		
+		&--rp {
+			@include respond-to(dt) {
+				left:16px;
+			}
+			@include respond-to(ph) {
+				left:10px;
+			}
+		}
+	}
+
+	&__container {
+		position:relative;
+	}
+
+	&__details {
+		//position:absolute;
+		//left:0px;
+		display:inline-block;
+		background:$white;
+		//background:rgba(255,255,255,0.8);
+		//padding:16px;
+
+		&--passenger {
+			display:none;
+			margin-top:4px !important;
+			box-sizing:border-box;
+			min-width:338px;
+			position:absolute;
+			z-index:3;
+			//box-shadow:1px -1px 0px $gray-lighter inset, -1px 0px 0px $gray-lighter inset;
+			box-shadow:0px 0px 3px rgba(0,0,0,0.75);
+			@include border-radius(4px);
+			border:4px solid $gray-lighter;
+		}
+
+		&--class {
+			margin-top:16px;
+			box-sizing:border-box;
+			min-width:168px;
+			position:absolute;
+			z-index:3;
+			box-shadow:1px -1px 0px $gray-lighter inset, -1px 0px 0px $gray-lighter inset;
+		}
+		
+		&__container {
+			padding:16px 8px;
+			background:$white;
+			min-width:120px;
+			border-width:0px 1px 1px 1px;
+			border-style:solid;
+			border-color:$gray-lightest;			
+
+			& .label-age {
+				//background:$notification-light;
+				//padding:4px;
+				display:inline-block;
+				line-height:32px !important;
+				//margin-top:4px;
+			}
+
+			& .separator {
+				border-bottom:1px dashed $gray-lighter;
+			}
+
+			& .circle-button {
+				@include font-rem(normal, 24px, 24px);
+				cursor:pointer;
+
+				&--disabled {
+					cursor:auto;
+					color:$gray-lighter;
+					border-color:$gray-lighter;
+				}
+
+			}
+
+			& .number-input {
+				@include font-rem(normal, 24px, 24px);
+				display:inline-block;
+				text-align:center;
+				min-width:24px;
+				vertical-align:top;
+			}
+
+			& .highlight {
+				background:$warning;
+			}
+
+			& .text-option {
+				
+			}
+
+			&__list {
+				list-style:none;
+				margin-bottom:0px !important;
+
+				&__item {
+					cursor:pointer;
+					margin-bottom:8px;
+
+					&:hover {
+						background:$gray-lighter;
+						font-weight:bold;
+						color:$gray-darker;
+					}
+				}
+			}
+
+		}
+
+	}
+
+}
+
+[class*="icon-pin-active"] {
+	color:$white;
+}
+
+.recomendations {
+	background:$gray-lightest;
+	position:relative;
+
+	&__item:first-child {
+			border-left:none;
+	}
+
+	&__item {
+		position:relative;
+		border-left:1px solid $gray-lighter;
+			
+		&--selected {
+			background:$orange;
+			color:$white;
+
+			& .recomendations__item__type__icon {
+				color:$white;
+			}
+
+			& .recomendations__item__description__text {
+				color:$white;
+			}
+
+			& .recomendations__item__description__price {
+				color:$white;
+			}
+
+			&:hover {
+				cursor:auto !important;
+				
+				& .recomendations__item__type__icon {
+					color:$white !important;
+				}
+
+				& .recomendations__item__description__text {
+					color:$white !important;
+
+					&:hover {
+						text-decoration:none !important;
+					}
+
+				}
+
+				& .recomendations__item__description__price {
+					color:$white !important;
+				}
+				
+			}
+
+		}
+
+		&:hover {
+			cursor:pointer;
+			
+			& .recomendations__item__type__icon {
+				color:$link-light;
+			}
+
+			& .recomendations__item__description__text {
+				color:$link-light;
+				text-decoration:none;
+			}
+
+			& .recomendations__item__description__price {
+				color:$orange;
+			}
+
+		}
+
+		& > div {
+			display:table;
+			width:100%;
+
+			@include respond-to(ph) {
+				&:before {
+					display:none;
+				}
+			}
+
+		}
+
+		&__type {
+			display:table-cell;
+			width:80px;
+			padding:24px 16px 0px 32px;
+			box-sizing:border-box;
+			color:$white;
+			vertical-align:top;
+
+			&__icon {
+				@extend .link-style;
+			}
+		}
+
+		&__description {
+			display:table-cell;
+			vertical-align:top;
+			padding-top:24px;
+
+			&__text {
+				
+				@extend .link-style;
+			}
+
+			&__price {
+				color:$orange-dark;
+			}
+
+		}
+
+		&__airline {
+			display:table-cell;
+			width:104px;
+			box-sizing:border-box;
+			padding:16px;
+			text-align:center;
+			
+			&__logo {
+				box-sizing:border-box;
+				background:$white;
+				width:48px;
+				height:48px;
+				margin:0px auto 8px;
+				@include border-radius(50%);
+
+				& img {
+					display:inline-block;
+					margin-top:8px;
+					width:32px;
+					height:32px;
+
+					
+				}
+
+			}
+			
+
+		}
+
+	}
+
+}
+
+.comparative {
+	border:2px solid #DFDFDF;
+	box-sizing:border-box;
+	position:relative;
+	background:$gray-lightest;
+	
+	&-arrow {
+		//position:absolute;
+		//top:calc(50% - 5px);
+		
+		&--before {
+			//left:calc(50% - 7px);
+		}
+
+		&--after {
+			//left:calc(50% - 4px);
+		}
+	}
+
+	&__before, &__after {
+		position:absolute;
+		height:24px;
+		width:24px;
+		top:calc(50% - 8px);
+		background:$gray-darkest;
+		color:$white;
+		z-index:3;
+		cursor:pointer;
+		opacity:.4;
+		text-align:center;
+
+		&:hover {
+			opacity:1;
+		}
+
+	}
+	
+	&__before {
+		left:8.3333%;
+		left:calc(8.3333% + 2px);
+		//padding:56px 8px 56px 4px;
+
+		@include respond-to(tb) {
+			left:16.6667%;
+		}
+	}
+
+	&__after {
+		right:0px;
+		//padding:56px 4px 56px 8px;
+	}
+	
+	.hover {
+		background:$hover-link;
+	}
+
+	.selected {
+		background:$white;
+		color:$link;
+		
+		& .outstanding {
+			//background:transparent;
+
+			&:hover {
+				text-decoration:none;
+				color:$link !important;
+			}
+
+		}
+
+		& .link-style {
+			color:$link;
+
+			&:hover {
+				text-decoration:none;
+			}
+
+		}
+
+		& .airline-logo {
+			border:1px solid #DFDFDF;
+		}
+
+	}
+
+	.outstanding {
+		background:$yellow;
+		display:inline-block;
+		padding:0px 8px;
+
+		@extend .link-style;
+		color:$link-dark;
+
+	    &:hover{
+	        color:$link-dark;
+	    }
+
+
+	}
+
+	& * {
+		box-sizing:border-box;
+	}
+
+	&__headers {
+		position:relative;
+		//border-right:1px solid $gray-lighter;
+
+		&__text{
+			//border-top:1px solid $gray-lighter;
+			height:48px;
+
+			& p {
+				padding:8px;
+				line-height:32px !important;
+			}
+			
+		}
+
+		&__one {
+			height:40px;
+			border-top:1px solid #DFDFDF;
+			
+			& p {
+				padding:8px;
+				line-height:24px !important;
+			}
+
+			/*&:hover {
+				background:$gray-lightest;
+			}*/
+
+		}
+
+		&__two {
+			height:40px;
+			border-top:1px solid #DFDFDF;
+			
+			& p {
+				padding:8px;
+				line-height:24px !important;
+			}
+
+			/*&:hover {
+				background:$gray-lightest;
+			}*/
+
+		}
+
+		&__more {
+			height:40px;
+			border-top:1px solid #DFDFDF;
+
+			& p {
+				padding:8px;
+				line-height:24px !important;
+			}
+
+			/*&:hover {
+				background:$gray-lightest;
+			}*/
+
+		}
+
+	}
+	
+	&__items {
+		overflow:hidden;
+		white-space:nowrap;
+	}
+	
+	&__carrousel {
+		position:relative;
+		//left:-1px;
+		width:100%;
+	}
+
+	&__airlines {
+
+		&__item {
+			text-align:center;
+			border-left:1px solid #DFDFDF;
+
+			&__airline {
+				height:48px;
+				//border-top:1px solid $gray-lighter;
+				
+				
+				& p {
+					padding:8px 0px;
+					line-height:32px;
+				}
+				
+				& img {
+					background:$white;
+					margin-right:8px;
+					width:32px;
+					height:32px;
+				}
+
+				/*&:hover {
+					background:$gray-lightest;
+				}*/
+
+			}
+
+			&__one {
+				height:40px;
+				border-top:1px solid #DFDFDF;
+
+				& p {
+					padding:8px 0px;
+				}
+
+				/*&:hover {
+					background:$gray-lightest;
+				}*/
+
+			}
+
+			&__two {
+				height:40px;
+				border-top:1px solid #DFDFDF;
+
+				& p {
+					padding:8px 0px;
+				}
+
+				/*&:hover {
+					background:$gray-lightest;
+				}*/
+
+			}
+
+			&__more {
+				height:40px;
+				border-top:1px solid #DFDFDF;
+
+				& p {
+					padding:8px 0px;
+				}
+
+				/*&:hover {
+					background:$gray-lightest;
+				}*/
+
+			}
+
+			&--disabled {
+				& .link-style {
+					color:$gray-darker !important;
+
+					&:hover {
+						cursor:auto;
+						text-decoration:none;
+					}
+				}
+
+				&:hover {
+					background:$gray-lightest;
+					&.selected {
+						background:$white;
+					}
+				}
+				
+			}
+
+		}
+
+	}
+
+	.border-left {
+		border-left:2px solid #DFDFDF;
+	}
+
+	.border-right {
+		border-right:2px solid #DFDFDF;
+	}
+
+	.border-top {
+		border-top:2px solid #DFDFDF;
+	}
+
+	.border-bottom {
+		border-bottom:2px solid #DFDFDF;
+	}
+
+}
+
+.filters {
+
+	.filter-description {
+		top:-1px;
+	}
+
+	&__top {
+		overflow:hidden;
+	}
+
+	&__left {
+		position:relative;
+		line-height:40px;
+
+		&__item {
+			display:inline-block;
+			position:relative;
+			
+			@include respond-to(ph) {
+				padding-right:4px;
+			}
+
+			&__text {
+				position:relative;
+				padding:0px 8px;
+
+				@include respond-to(ph) {
+					padding:0px 4px 0px 0px;
+				}
+
+				border-right:1px solid $gray-light;
+			}
+
+			&:first-child {
+
+				& .filters__left__item__text {
+					padding-left:0px;
+				}
+
+			}
+
+
+
+			&--selected {
+
+				@include respond-to(dt) {
+					&:before {
+						position:absolute;
+						left:calc(50% - 17px);
+						bottom:-20px;
+						content:"";
+						border-width:9px;
+						border-color:transparent transparent $gray-lighter transparent;
+						border-style:solid;
+						z-index:2;
+					}
+
+					&:after {
+						position:absolute;
+						left:calc(50% - 16px);
+						bottom:-20px;
+						content:"";
+						border-width:8px;
+						border-color:transparent transparent $gray-lightest transparent;
+						border-style:solid;
+						z-index:3;
+					}
+				}
+
+				@include respond-to(tb) {
+					&:before {
+						position:absolute;
+						left:calc(50% - 17px);
+						bottom:-12px;
+						content:"";
+						border-width:9px;
+						border-color:transparent transparent $gray-lighter transparent;
+						border-style:solid;
+						z-index:2;
+					}
+
+					&:after {
+						position:absolute;
+						left:calc(50% - 16px);
+						bottom:-12px;
+						content:"";
+						border-width:8px;
+						border-color:transparent transparent $gray-lightest transparent;
+						border-style:solid;
+						z-index:3;
+					}
+				}
+
+
+			}
+		}
+
+	}
+
+	&__right {
+		
+		text-align:right;
+		@include respond-to(ph) {
+			text-align:left;
+		}
+
+		@include font-rem(normal,14px,16px);
+
+		& label {
+			display:inline-block;
+			line-height:40px;
+			vertical-align:middle;
+		}
+
+		& select {
+			//color:$link;
+			vertical-align:middle;
+		}
+
+		& .view-favorite {
+			//color:$white;
+			//background:$gray;
+			padding:8px;
+			cursor:pointer;
+
+			&__icon {
+				background:$white;
+				@include border-radius(50%);
+				padding:4px;
+				color:$gray;
+				vertical-align:middle;
+			}
+
+			&:hover {
+				& .view-favorite__icon {
+					color:$gray-light;
+				}
+			}
+
+			&--disabled {
+				background:$white;
+				color:$gray-lighter;
+				border:1px solid $gray-lighter;
+
+				& .view-favorite__icon {
+					color:$white;
+					background:$gray-lighter;
+				}
+
+				&:hover {
+					color:$white;
+					background:$gray-light;
+
+					& .view-favorite__icon {
+						color:$gray-light;
+						background:$white;
+					}
+
+				}
+
+			}
+
+			&--selected {
+				
+				color:$white;
+
+				& .view-favorite__icon {
+					color:$orange;
+					background:$white;
+				}
+
+				&:hover {
+
+					& .view-favorite__icon {
+						color:$orange-light;
+					}
+
+				}
+
+			}
+
+		}
+	}
+
+	&__container {
+		position:relative;
+		background:$gray-lightest;
+		border:1px solid $gray-lighter;
+		padding:24px;
+		@include font-rem(normal,12px,16px);
+		@include border-radius(2px);
+		
+		&__item {
+			position:relative;
+			cursor:pointer;
+				
+			&__icon {
+				color:$gray-light;
+				padding:8px;
+				@include border-radius(50%);
+				background:$white;
+				border:1px solid $gray-light;
+				@include font-rem(normal,24px,24px);
+				margin-bottom:8px;
+			}
+
+			&__text {
+				
+			}
+
+			&--selected {
+				
+				cursor:pointer !important;
+				
+
+				& .filters__container__item__icon {
+					color:$white;
+					background:$orange;
+					border:1px solid $orange;
+				}
+
+				& .filters__container__item__text {
+					color:$orange;
+				}
+
+				& .filters__container__item__airline {
+					background:$orange;
+					border:1px solid $orange;
+
+					&__logo {
+						color:$white;
+					}
+
+				}
+
+				& .representation-scale {
+					color:$orange;
+					cursor:pointer !important;
+
+					& .line {
+						background:$orange !important;
+
+						&--finish {
+
+							&:after {
+								border-color:transparent transparent transparent $orange !important;
+							}
+
+						}
+
+					}
+
+					& .circle {
+						background:$orange-dark !important;
+
+						&--extreme {
+							background:$orange !important;
+						}
+
+					}
+
+				}
+
+				&.filters__container__airport__item {
+					cursor:auto;
+					color:$orange !important;
+					
+					& .filters__container__airport__item__iata {
+						
+					}
+
+					& .filters__container__airport__item__iata__text {
+						color:$white !important;
+						background:$orange !important;
+						border:1px solid $orange !important;
+					}
+
+					& .filters__container__airport__item__icon {
+						color:$white !important;
+						background:$orange !important;
+						border:1px solid $orange !important;
+					}
+				}
+
+			}
+
+			&--disabled {
+				cursor:auto !important;
+
+				& .filters__container__item__icon {
+					color:$gray-lighter;
+					background:$gray-lightest;
+					border:1px solid $gray-lighter;
+				}
+
+				& .filters__container__item__text {
+					color:$gray-lighter;
+				}
+
+				& .filters__container__item__airline {
+					background:$gray-lightest;
+				
+				}
+
+				& .representation-scale {
+					cursor:auto;
+					color:$gray-lighter !important;
+
+					& .line {
+						background:$gray-lighter !important;
+
+						&--finish {
+
+							&:after {
+								border-color:transparent transparent transparent $gray-lighter !important;
+							}
+
+						}
+
+					}
+
+					& .circle {
+						background:$gray-lighter !important;
+					}
+
+				}
+
+
+				& .filters__container__airport__item__iata {
+					
+				}
+
+				& .filters__container__airport__item__iata__text {
+					color:$gray-lighter !important;
+					background:$gray-lightest !important;
+					border:1px solid $gray-lighter !important;
+				}
+				
+				& .filters__container__airport__item__icon {
+					color:$gray-lighter !important;
+					background:$gray-lightest !important;
+					border:1px solid $gray-lighter !important;
+				}
+
+
+			}
+
+			&__airline {
+				width:40px;
+				height:40px;
+				color:$gray-light;
+				//padding:8px;
+				@include border-radius(50%);
+				background:$white;
+				border:1px solid $gray-lighter;
+				margin:0px auto 8px;
+
+				&__logo {
+					display:block;
+					@include font-rem(normal,24px,32px);
+					width:24px;
+					height:24px;
+					margin:8px auto 0px;
+				}
+
+			}
+
+
+
+		}
+
+		& .schedule {
+
+			&--go {
+				border-right:1px solid $gray-lighter;
+			}
+
+		}
+
+		&__airport {
+			
+			&__go {
+				border-right:1px solid $gray-lighter;
+				padding:0px 16px 0px 24px;
+
+				&__group {
+					border-bottom:1px dotted $gray-lighter;
+					padding-bottom:8px;
+					margin-bottom:16px;
+				}
+
+			}
+
+			&__back {
+				padding:0px 16px 0px 24px !important;
+			}
+
+			&__item {
+				cursor:pointer;
+				margin-bottom:8px;
+
+				&__text {
+					display:table-cell;
+					padding-bottom:8px;
+					margin-bottom:8px;
+					vertical-align:middle;
+					padding-left:8px;
+				}
+
+				&__iata {
+					display:table-cell;
+					//padding:8px 6px;
+					margin-bottom:8px;
+					@include font-rem(normal,14px,40px);
+					font-weight:bold;
+					text-align:center;
+
+					&__text {
+						display:inline-block;
+						@include border-radius(50%);
+						background:$white;
+						border:1px solid $gray-light;
+						width:40px;
+						height:40px;
+					}
+
+				}
+				
+				&__icon-container {
+					display:table-cell;
+				}
+
+				&__icon {
+					display:inline-block;
+					margin-bottom:8px;
+					@include font-rem(normal,14px,40px);
+					font-weight:bold;
+					text-align:center;
+					@include border-radius(50%);
+					background:$white;
+					border:1px solid $gray-light;
+					width:40px;
+					height:40px;
+					
+					//padding:8px;
+					@include font-rem(normal,24px,40px);
+
+					
+
+				}
+				
+			}
+
+		}
+
+		&__buttons {
+			text-align:center;
+			border-top:1px solid $gray-lighter;
+			padding-top:16px;
+			margin-top:16px;
+
+		}
+
+		&__currency {
+
+			& label {
+				display:inline-block;
+			}
+
+			&__slider {
+				padding:0px !important;
+			}
+
+			&__price {
+				padding:0px !important;
+			}
+
+		}
+
+		
+
+	}
+
+	& .slider-currency {
+		
+		&.ui-slider {
+			position:relative;
+			box-sizing:border-box;
+			background:$white;
+			border:4px solid $gray-lighter;
+			@include border-radius(2px);
+			height:8px;
+		}
+
+		&.ui-slider .ui-slider-handle {
+			box-sizing:border-box;
+			background:$white;
+			border:6px solid $gray;
+			@include border-radius(50%);
+			width:24px;
+			height:24px;
+			position:absolute;
+			top:-11px;
+			cursor:pointer;
+			
+			&:hover {
+				border-color:$orange;
+			}
+
+			&:focus {
+				outline:none;
+			}
+		}
+
+		&.ui-slider .ui-slider-range {
+			//background:$orange-dark;
+			//background-size:6px 1px !important;
+			//background: repeating-linear-gradient(to right, rgba(255,121,0,1) 0px, rgba(255,121,0,1) 2px, rgba(204,204,204,1) 3px, rgba(204,204,204,1) 4px);
+			background-color:$orange;
+			height:2px;
+			margin-top:-1px;
+            color:$gray-lighter;
+		}
+
+	}
+
+	& .slider-currency-input {
+		border:none;
+		background:transparent;
+		font-weight:bold;
+		padding:0px;
+	}
+	
+	.representation-scale {
+		font-size:0px;
+
+		& .circle {
+			position:relative;
+			top:2px;
+			display:inline-block;
+			width:8px;
+			height:8px;
+			background:$gray-dark;
+			@include border-radius(50%);
+
+			&--extreme {
+				background:$gray-light;
+
+				&--selected {
+					background:$orange;
+				}
+
+			}
+
+			&--space {
+				margin:0px 4px;
+			}
+
+		}
+		
+		.line {
+			position:relative;
+			display:inline-block;
+			width:24px;
+			height:4px;
+			background:$gray-light;
+			margin-top:-4px;
+
+			&--short {
+				width:16px;
+			}
+
+			&--finish {
+				width:8px;
+
+				&:after {
+					position:absolute;
+					top:-6px;
+					right:-16px;
+					content:"";
+					border-width:8px;
+					border-color:transparent transparent transparent $gray-light;
+					border-style:solid;
+				}
+
+			}
+
+		}
+
+	}
+
+	&__labels {
+		border-top:1px dashed $gray-light;
+		padding-top:16px;
+		margin-top:16px;
+
+		&__label {
+			cursor:pointer;
+			background:$gray-lightest;
+			padding:8px;
+			margin-right:16px;
+			margin-bottom:8px;
+			@include border-radius(4px);
+
+			&:hover {
+				background:$orange;
+				color:$white;
+			}
+
+			&__close {
+				@include respond-to(ph) {
+					margin-right:8px;
+					float:right;
+				}
+			}
+		}
+
+		&__header {
+			line-height:32px !important;
+		}
+
+		&__remove {
+			line-height:32px !important;
+		}
+	}
+
+}
+
+[class*="icon-none"] {
+	color:transparent;
+}
+
+
+.ui-autocomplete {
+	position:absolute !important;
+	margin-top:16px !important;
+
+	//border:16px solid $white;
+	//border:16px solid rgba(255,255,255,0.8);
+	@include background-clip(padding-box);
+	padding:8px 0px;
+	//box-shadow:1px 0px 0px $gray-lightest inset,-1px -1px 0px $gray-lightest inset, 1px 1px 0px $gray-lighter, -1px 1px 0px $gray-lighter;
+	box-shadow:0px 0px 3px rgba(0,0,0,0.75);
+	@include border-radius(4px);
+	border:4px solid $gray-lighter;
+	@include box-sizing(border-box);
+
+	& .ui-menu-item {
+		
+		//height:16px;
+		vertical-align:top;
+		display:block;
+		@include font-rem(normal,14px,16px);
+		padding:8px 16px;
+		margin:0px;
+		//margin-bottom:8px;
+		letter-spacing:normal;
+		text-align:left;
+		font-weight:bold;
+
+		& mark {
+			font-weight:normal !important;
+			background:$white;
+		}
+
+		&:hover {
+			background:#DEEFF9;
+			color:$gray;
+			//height:16px;
+			vertical-align:top;
+			display:block;
+			@include font-rem(bold,14px,16px);
+			padding:8px 16px;
+			margin:0px;
+			//margin-bottom:8px;
+			letter-spacing:normal;
+			text-align:left;
+
+			& mark {
+				background:#DEEFF9;
+			}
+
+		}
+		
+		& a {
+			color:$black;
+			height:16px;
+			vertical-align:top;
+			display:block;
+			@include font-rem(normal,14px,16px);
+			padding:0px;
+			margin:0px;
+			//margin-bottom:8px;
+			letter-spacing:normal;
+			text-align:left;
+			font-weight:bold;
+
+			& mark {
+				font-weight:normal !important;
+			}
+
+			&:hover {
+				vertical-align:top;
+				@include font-rem(bold,14px,16px);
+				padding:0px;
+				margin:0px;
+				//margin-bottom:8px;
+				text-decoration:none;
+				letter-spacing:normal;
+				text-align:left;
+
+				& mark {
+					background:#DEEFF9;
+					font-weight:normal !important;
+				}
+
+			}
+		}
+
+	}
+}
+
+.ui-datepicker {
+	//margin-top:16px;
+	margin-top:4px !important;
+	//border:16px solid $white;
+	//border:16px solid rgba(255,255,255,0.8);
+	padding:16px !important;
+	background:$white;
+	@include background-clip(padding-box);
+	//box-shadow:1px 0px 0px $gray-lightest inset,-1px -1px 0px $gray-lightest inset, 1px 1px 0px $gray-lighter, -1px 1px 0px $gray-lighter;
+	box-shadow:0px 0px 3px rgba(0,0,0,0.75);
+	@include border-radius(4px);
+	border:4px solid $gray-lighter;
+
+	&:before {
+		content:"";
+		position:absolute;
+		width:100%;
+		height:100%;
+		z-index:5;
+		background:red;
+	}
+	
+	& .ui-datepicker-group {
+		background:$white;
+	}
+
+	& .ui-datepicker-prev {
+		font-family:almundo;
+		@extend .icon-arrow-left;
+		color:$gray;
+		padding-left:4px;
+		cursor:pointer;
+
+		&:after {
+			content:"";
+		}
+
+	}
+	
+	& .ui-datepicker-next {
+		font-family:almundo;
+		@extend .icon-arrow-right;
+		color:$gray;
+		padding-right:4px;
+		cursor:pointer;
+
+		&:after {
+			content:"";
+		}
+
+	}
+
+	& .ui-datepicker-header {
+		background:$white;
+		border:none;
+	}
+
+	& .ui-datepicker-month {
+		@include font-rem(normal,14px,16px);
+		font-weight:bold;
+		color:$gray;
+	}
+
+	& .ui-datepicker-year {
+		@include font-rem(normal,12px,16px);
+		color:$gray;
+	}
+
+	& .ui-datepicker-calendar {
+		border:none;
+		background:$white;
+		margin:0px !important;
+
+		& thead tr th {
+			@include font-rem(normal,12px,16px);
+			font-weight:bold;
+		}
+
+		& .ui-datepicker-today {
+			font-weight:bold;
+		}
+
+		& .ui-state-default {
+			color:$gray-darker;
+			padding:0px;
+			text-align:center;
+			@include font-rem(null,16px,32px);
+			width:32px;
+			height:32px;
+		}
+
+		& .ui-datepicker-unselectable {
+			& .ui-state-default {
+				color:$gray-lighter;
+			}
+
+		}
+
+		& .ui-datepicker-current-day {
+			@include border-left-radius(50%);
+			background:$notification !important;
+			& .ui-state-default {
+				color:$white;
+				font-weight:bold;
+				@include border-left-radius(50%);
+				background:$notification;
+			}
+		}
+
+		& .ui-datepicker-current-day-ow {
+			@include border-radius(50%);
+			background:white !important;
+			& .ui-state-default {
+				color:$white;
+				font-weight:bold;
+				@include border-radius(50%);
+				background:$notification;
+			}
+		}
+
+		.ui-state-finish {
+			@include border-left-radius(0%);
+			@include border-right-radius(50%);
+			background:$notification;
+			& .ui-state-default {
+				color:$white;
+				font-weight:bold;
+				@include border-left-radius(0%);
+				@include border-right-radius(50%);
+				background:$notification;
+			}
+		}
+
+		& .ui-state-range {
+			background:$notification-light;
+			& .ui-state-default {
+					color:$white;
+			}
+		}
+
+
+	}
+
+}
+
+.day, .month {
+	width:64px;
+}
+
+.year {
+	width:104px;
+}
+
+.pagination {
+	
+	&__list {
+		list-style:none;
+		font-size:0px;
+	}
+
+	&__item {
+		display:inline-block;
+		margin-left:0px;
+		border-width:1px 1px 1px 0px;
+		border-style:solid;
+		border-color:$gray-lighter;
+		@include font-rem(normal, 13px, 16px);
+		
+		&:first-child {
+			border-left:1px solid $gray-lighter;
+		}
+
+	}
+
+	&__link {
+		display:block;
+		padding:8px;
+
+		&:hover {
+			background:$gray-lightest;
+		}
+	}
+
+	&__item--disabled {
+		background:$white;
+
+		& .pagination__link {
+			color:$gray-lighter;
+			cursor:default;
+
+			&:hover {
+				text-decoration:none;
+				background:$white;
+			}
+
+		}
+
+	}
+
+	& .selected {
+		background:$gray;
+		color:$white;
+		cursor:default;
+
+		&:hover {
+			text-decoration:none;
+		}
+	}
+
+}
+
+.credit-card__content {
+	// padding-bottom:16px;
+	margin-bottom:16px;
+	border-bottom:1px dashed $gray;
+
+	&--last {
+		border-bottom:none;
+		padding-bottom:0px;
+		margin-bottom:0px;
+	}
+
+	&__text {
+		//display:table-cell;
+		padding-top:8px;
+
+		@include respond-to(ph) {
+			padding-top:0px;
+		}
+	}
+
+	&__logos {
+		//display:table-cell;
+
+		&__logo {
+			// display:block;
+			margin:0px auto 8px;
+
+			&:last-child {
+				margin:0px auto 0px;
+			}
+
+		}
+
+	}
+
+}
+
+
+
+
+.loader0{
+    position: relative;
+    width:464px;
+    height:464px;
+    margin:40px auto;
+    z-index:10;
+
+    @include respond-to(ph) {
+    	width:216px;
+    }
+
+    & .loader1 {
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    @include animation (spin 290s linear infinite);
+
+	    @include respond-to(ph) {
+	    	width:100%;
+	    }
+	}
+
+	& .loader2 {
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    @include animation (spin2 4s linear infinite);
+
+	    @include respond-to(ph) {
+	    	width:100%;
+	    }
+	}
+
+	& .loader__icon {
+		position:absolute;
+		top:114px;
+		left:calc(50% - 50px);
+		@include font-rem(normal, 100px, 100px);
+		color:$orange;
+
+		@include respond-to(ph) {
+			top:72px;
+			left:calc(50% - 32px);
+			@include font-rem(normal, 64px, 64px);
+		}
+	}
+
+	& .loader__text {
+		position:absolute;
+		top:225px;
+		width:232px;
+		text-align:center;
+		left:calc(50% - 116px);
+		@include font-rem(normal,24px,32px);
+
+		@include respond-to(ph) {
+			top:240px;
+		}
+	}
+
+}
+
+
+
+@include keyframes (spin) {
+    0% {
+        @include rotate(0deg);
+    }
+    100% {
+        @include rotate(-360deg);
+    }
+}
+
+@include keyframes (spin2) {
+    0% {
+        @include rotate(0deg);
+    }
+    100% {
+        @include rotate(360deg);
+    }
+}
+
+
+.epp-space-bottom-0 {
+	margin-bottom:0px;
+}
+
+.display-table--compact {
+	width:auto;
+}
+
+.display-inline-block {
+	display:inline-block;
+}
+
+.divisor {
+	border:none;
+	height:1px;
+	background-color:$gray-lighter;
+	margin:0px;
+}
+
+
+.display-block {
+	display:block;
+}
+
+.rotation{-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
+
+.ui-tooltip {
+	position:absolute;
+	background:$black;
+	background:rgba(0,0,0,.8);
+	color:$white;
+	@include border-radius(4px);
+	@include font-rem(normal, 12px, 16px);
+	padding:0px 4px;
+	box-shadow:none;
+	border:none;
+}
+
+.ui-tooltip-arrow {
+
+    &:after {
+    	content: "";
+	    position: absolute;
+	    border-width:4px;
+	    border-color:transparent transparent $black transparent;
+		border-color:transparent transparent rgba(0,0,0,.8) transparent;
+	    border-style:solid;
+	    left:calc(50% - 4px);
+	    top:-8px;
+    }
+
+    &.top {
+
+    	&:after {
+		    top: auto;
+		    border-color:transparent transparent $black transparent;
+		    border-color:transparent transparent rgba(0,0,0,.8) transparent;
+		    left:calc(50% - 4px);
+	    	top:-8px;
+		}
+    }
+
+    &.bottom {
+
+    	&:after {
+		    bottom: -20px;
+		    top: auto;
+		    border-color:$black transparent transparent transparent;
+		    border-color:rgba(0,0,0,.8) transparent transparent transparent;
+		    left:calc(50% - 4px);
+	    	bottom:-8px;
+		}
+    }
+
+}