@import 'library.less';

/* variables */

@width: 950px;
@white: #ffffff;
@black: #333131;
@grey: #959494;
@link_color: #429DDC;
@red: #F14646;
@bg_color_dark: #f7f7f7;
@radius: 3px;
@duration: 350ms;

/* typography */

.typo-text {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: @black;
	font-size: 14px;
	line-height: 24px;
}

.typo-text-caption {
	.typo-text;
	font-weight: 600;
}

.typo-title(@fs: 24px) {
	.typo-text;
	font-size: @fs;
	line-height: 1;
	font-weight: 300;
	text-transform: uppercase;
}

.typo-link {
	.typo-text;
	color: @link_color;
	border-bottom: 1px dotted fadeout(@link_color, 75%);
	cursor: pointer;
	
	&:hover {
		color: @red;
		border-color: fadeout(@red, 75%);
		/*border-style: solid;*/
	}
}

/* styles */

.burger-style(@s: 32px, @bc: transparent) {
	@is: 16px;
	@bw: 1px;

	position: relative;
	width: @s;
	height: @s;
	cursor: pointer;
	border: @bw solid @bc;
	.border-radius(@radius);
	.box-sizing;
	
	&__line {
		position: absolute;
		width: @is;
		height: 2px;
		background-color: @black;
		left: (@s - @is) / 2 - @bw;
		pointer-events: none;
		.transition(@duration: 300ms);
	
		&--top {
			top: 10px;
			.transform-origin(@x: 8px, @y: 1px);
		}
		
		&--center {
			top: 15px
		}
		
		&--bottom {
			top: 20px;
			.transform-origin(@x: 8px, @y: 1px);
		}
	}
	
	&--active {
		.menu_button__line {
			&--top {
				.translate(@y: 5px);
				.rotate(45deg);
			}
			
			&--center {
				opacity: 0;
			}
			
			&--bottom {
				.translate(@y: -5px);
				.rotate(-45deg);
			}
		}
	}
}

.button-style(@w: auto, @h: 24px, @fs: 14px) {
	display: inline-block;
	width: @w;
	height: @h;
	background-color: transparent;
	.typo-title(@fs);
	line-height: @h;
	cursor: pointer;
	border: 1px solid #A6A6A6;
	text-align: center;
	width: @w;
	.border-radius(@radius);
	.box-sizing;
	
	&:hover {
		background-color: @red;
		border-color: @red;
		color: @white;
	}
}

.socials-style(@s: 24px) {
	height: @s;

	&__item {
		float: left;
		width: @s;
		height: @s;
		margin-right: 12px;
		cursor: pointer;
		border: 0;
	
		&--facebook {
			background-position: 0px 0px;
		}
		
		&--linkedin {
			background-position: -@s 0px;
		}
		
		&--twitter {
			background-position: -@s * 2 0px;
			margin-right: 0;
		}
	}
}

.contacts-style(@h: 14px, @c: @white) {
	font-size: 14px;
	
	&__item {
		&--phone {
			position: relative;
			display: block;
			height: @h;
			line-height: @h;
			float: left;
			margin-right: 40px;
			color: @c;
			
			&:after {
				content: '';
				position: absolute;
				background-color: fadeout(@c, 80%);
				width: 1px;
				height: 30px;
				right: -20px;
				top: 50%;
				margin-top: -15px;
			}
		}
		
		&--email {
			height: @h;
			line-height: @h;
			display: block;
			float: left;
			color: @c;
			border: 0;
			
			&:hover {
				color: @white;
			}
		}
	}
}

/* layout */

.page {
	.typo-text;
	
	a {
		.typo-link;
		font-size: inherit;
	}
	
	.column {
		float: left;
	}
	
	.short-break {
		display: none;
	}
	
	&__section {
		&__container {
			position: relative;
			width: @width;
			margin: 0 auto;
		}
		
		&--menu {
			@h: 70px;
			@c: #B7B7B7;
			@s: 34px;
			
			position: fixed;
			z-index: 10;
			left: 0;
			top: 0;
			width: 100%;
			height: @h;
			.translate(@y: -@h);
			.transition(@duration: @duration);
			
			&-shown {
				top: 70px;
				/*.translate(@y: 0px);*/
			}
			
			.menu {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				.transition(@duration: @duration);
				
				&--navigation {
					z-index: 1;
					background-color: @black;
					color: @c;
				}
				
				&--main {
					z-index: 2;
					background-color: @white;
					border-bottom: 1px solid #BBBBBB;
				}
				
				&--slided {
					top: 70px;
					/*.translate(@y: 70px);*/
				}
			}
			
			.column {
				&--right {
					float: right;
				}
			}
			
			.name {
				.typo-title(20px);
				line-height: @h;
			}
			
			.services {
				line-height: @h;
				
				&__item {
					.typo-title(14px);
					line-height: 18px;
					display: block;
					float: left;
					margin-top: (@h - 18px) / 2;
					color: #D0D0D0;
					border-color: #5C5A5A;
					margin-right: 50px;
					
					&--me {
					}
					
					&--services {
						
					}
					
					&--cost {
						margin-right: 0;
					}
					
					&:hover {
						color: @white;
					}
				}
			}
			
			.ask_button {
				.button-style(200px, @s, 13px);
				float: left;
				margin-right: 20px;
				margin-top: (@h - @s) / 2;
			}
			
			.menu_button {
				.burger-style(@s: @s, @bc: #E8E7E7);
				float: left;
				margin-top: (@h - @s) / 2;
			}
			
			.contacts {
				.contacts-style(@h: @h, @c: #999898);
			}
		}
		
		&--intro {
			padding-top: 30px;
			padding-bottom: 90px;
			background-color: @bg_color_dark;
		
			.header {
				@h: 80px;
			
				height: @h;
			
				.column {
					height: 100%;
				
					&--left {
						width: 300px;
					}
					
					&--center {
						width: 350px;
					}
					
					&--right {
						width: 300px;
					}
				}
				
				.name {
					.typo-title(20px);
					line-height: @h;
				}
				
				.photo {
					background-image: url(../images/photo.jpg);
					width: @h;
					height: @h;
					margin: 0 auto;
					.cover;
					.border-radius;
				}
				
				.socials {
					@s: 24px;
				
					.socials-style(@s: @s);
					margin-top: (@h - @s) / 2;
					width: 100px;
					float: right;
					
					&__item {
						background-image: url(../images/socials.png);
					}
				}
			}
			
			.content {
				.title {
					position: relative;
					.typo-title(33px);
					line-height: 1.3;
					text-align: center;
					margin-top: 80px;
					padding-bottom: 50px;
					/*height: 35px;*/
					
					&:after {
						content: '';
						position: absolute;
						width: 60px;
						height: 1px;
						background-color: @black;
						bottom: 25px;
						left: 50%;
						margin-left: -30px;
					}
				}
				
				.text {
					text-align: center;
					margin-bottom: 40px;
				}
				
				.panel {
					font-size: 0;
					text-align: center;
					padding-bottom: 60px;
				
					&__item {
						.button-style(250px, 50px);
						
						&--me {
							margin-right: 20px;
						}
						
						&--ask {
							
						}
					}
				}
				
				.next {
					width: 18px;
					height: 10px;
					margin: 0 auto;
					background-image: url(../images/scroll-down.png);
					cursor: pointer;
				}
			}
		}
		
		&--timeline {
			.page__section__container {
				position: relative;
				width: 800px;
			}
		
			.column {
				&--left {
					width: 80px;
				}
				
				&--right {
					width: 720px;
				}
			}
		
			.header {
				position: relative;
				z-index: 2;
			
				.title {
					padding-top: 60px;
					.typo-title;
					text-align: center;
					margin-bottom: 40px;
				}
				
				.text {
					font-size: 13px;
				}
			}
			
			.content {
				position: relative;
				z-index: 2;
			}
			
			.footer {
				font-style: italic;
				font-size: 13px;
				padding-top: 40px;
				padding-bottom: 90px;
			}
			
			.line {
				position: absolute;
				z-index: 1;
				width: 2px;
				height: 100%;
				top: 0px;
				left: 54px;
				background-color: @red;
			}
			
			.timeline {
				&__item {
					font-size: 13px;
					line-height: 20px;
				
					&--point {
						padding-top: 40px;
						
						.column {
							&--left {
								position: relative;
							}
						}
					}
					
					&--mention {
						margin-top: 50px;
						padding: 40px 30px;
						background-color: @white;
						.box-shadow(0px 0px 40px 0px rgba(0, 0, 0, 0.1));
						
						.column {
							&--left {
								width: 70px;
							}
							
							&--right {
								width: 670px;
							}
						}
						
						.timeline__item__text {
							color: @grey;
						}
					}
					
					&__image {
						width: 50px;
						height: 50px;
						.border-radius;
						.cover;
					}
					
					&__point {
						@s: 12px;
						
						position: absolute;
						width: @s;
						height: @s;
						background-color: @white;
						border: 2px solid @red;
						left: 49px;
						top: 6px;
						.box-sizing;
						.border-radius;
					}
					
					&__date {
						position: absolute;
						top: 0px;
						right: 50px;
						white-space: nowrap;
					}
					
					&__title {
						
					}
					
					&__subtitle {
						color: @grey;
						font-size: 12px;
						margin-bottom: 10px;
					}
				}
			}
		}
		
		&--services {
			padding-top: 60px;
			padding-bottom: 80px;
			background-color: @bg_color_dark;
			font-size: 13px;
			line-height: 20px;
			
			.page__section__container {
				width: 800px;
			}
			
			.header {
				margin-bottom: 40px;
			
				.title {
					.typo-title;
					text-align: center;
				}
			}
			
			.content {
				.column {
					&--left {
						width: 300px;
						padding-right: 40px;
						.box-sizing;
					}
					
					&--right {
						width: 500px;
					}
				}
			
				.section {
					margin-bottom: 30px;
					
					.description {
						color: @grey;
					}
					
					.list {
						&__item {
							margin-bottom: 6px;
						}
					}
				}
			}
			
			.footer {
				position: relative;
				border: 10px solid @white;
				padding: 35px 100px;
			
				.text {
					text-align: center;
					color: @grey;
					font-style: italic;
				}
				
				.arrow {
					position: absolute;
					top: -10px;
					right: -85px;
					width: 11px;
					height: 130px;
					background-image: url(../images/arrow-down.png);
					background-repeat: no-repeat;
					background-position: center center;
				}
			}
		}
		
		&--cost {
			padding-top: 60px;
			padding-bottom: 80px;
			font-size: 13px;
			line-height: 20px;
			
			.page__section__container {
				width: 800px;
			}
			
			.title {
				.typo-title;
				text-align: center;
				margin-bottom: 30px;
			}
			
			.text {
				margin-bottom: 10px;
				text-align: center;
			}
			
			.panel {
				margin-top: 40px;
				text-align: center;
				font-size: 0px;
			
				&__item {
					.button-style(310px, 50px);
				}
			}
		}
		
		&--footer {
			@h: 80px;
			@c: #B7B7B7;
			
			background-color: #555555;
			height: @h;
			color: @c;
		
			.column {
				height: 100%;
			
				&--left {
					width: 400px;
				}
				
				&--right {
					width: 400px;
					float: right;
				}
			}
			
			.contacts {
				.contacts-style(@h: @h, @c: #B7B7B7);
			}
			
			.socials {
				@s: 24px;
				
				.socials-style(@s: @s);
				margin-top: (@h - @s) / 2;
				float: right;
				
				&__item {
					background-image: url(../images/socials-white.png);
				}
			}
			
			.dev {
				@lh: 24px;
				@fs: 10px;
			
				font-size: @fs;
				line-height: @lh;
				margin-top: (@h - @lh) / 2;
				float: right;
				margin-left: 30px;
				color: #B7B7B7;
				
				a {
					font-size: @fs;
					line-height: @lh;
					color: #B7B7B7;
					border-color: #B7B7B7;
					
					&:hover {
						color: @white;
						border-color: @white;
					}
				}
			}
		}
	}
}

.popup {
	@p: 30px;
	@w: 470px - @p * 2;
	@h: 510px - @p * 2;

	position: fixed;
	z-index: 24;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;

	&--shown {
		display: block;
	}
	
	&__content {
		position: absolute;
		width: @w;
		height: @h;
		left: 50%;
		top: 50%;
		margin-left: -@w / 2 - @p;
		margin-top: -@h / 2 - @p;
		background-color: @white;
		padding: @p;
		
		.close {
			display: none;
			position: absolute;
			width: 44px;
			height: 44px;
			cursor: pointer;
			background-image: url(../images/cross.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 60%;
			top: 0px;
			right: 0px;
		}
		
		.header {
			height: 55px;
		
			.title {
				position: relative;
				.typo-title(19px);
				line-height: 1;
				text-align: center;
				
				&:after {
					content: '';
					position: absolute;
					width: 60px;
					height: 1px;
					left: 50%;
					margin-left: -30px;
					bottom: -17px;
					background-color: #CCCCCC;
				}
			}
		}
		
		.content {
			.form {
				&__item {
					position: relative;
				
					&__element {
					}
					
					&__signal {
						@s: 20px;
					
						position: absolute;
						z-index: 5;
						top: 10px;
						right: 15px;
						display: none;
						width: @s;
						height: @s;
						background-color: @red;
						cursor: pointer;
						.typo-text;
						text-align: center;
						line-height: @s;
						font-size: 10px;
						color: @white;
						.border-radius;
						
						&:hover {
							.hint {
								font-size: 12px;
								display: block;
							}
						}
						
						&:after {
							content: '!';
						}
						
						.hint {
							width: 220px;
							height: 50px;
							left: 50%;
							margin-left: -110px;
							top: -57px;
							position: absolute;
							display: none;
							padding: 10px;
							color: @white;
							background-color: @red;
							text-align: left;
							line-height: 16px;
							pointer-events: none;
							.box-sizing;
							
							&:after {
								content: '';
								position: absolute;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 5px 5px 0 5px;
								left: 50%;
								margin-left: -5px;
								bottom: -5px;
								border-color: @red transparent transparent transparent;
							}
						}
					}
				
					input, textarea, select {
						.typo-text;
						font-size: 13px;
						display: block;
						width: @w;
						background-color: #F8F8F8;
						border: 1px solid #D8D8D8;
						outline: none !important;
						color: @black;
						.border-radius(@radius);
						.box-sizing;
					}
				
					&--input {
						input {
							line-height: 38px;
							padding: 0 15px;
							margin-bottom: 20px;
						}
					}
					
					&--textarea {
						textarea {
							padding: 12px 15px;
							line-height: 1.4;
							resize: none;
							height: 120px;
						}
					}
					
					&--label_none {
						.label, select {
							color: #AAAAAA;
						}
					}
					
					&--select {
						.typo-text;
						font-size: 13px;
						margin-bottom: 20px;
						
						select {
							padding: 0 15px;
							line-height: 38px;
							 -webkit-appearance: none;
						}
						
						.selectric-wrapper {
							.selectric {
								.border-radius(@radius);
								background-color: #F8F8F8;
								border: 1px solid #D8D8D8;
								
								.label {
									margin-left: 15px;
									
									/*&--none {
										color: #AAAAAA;
									}*/
								}
							}
							
							.selectric-items {
								top: 0;
								z-index: 1;
								border-color: @link_color;
								overflow: hidden;
								.border-radius(@radius);
							
								ul {
									background-color: @white;
									
									li {
										border: none;
										padding: 5px 15px;
										
										&:hover, &.selected {
											background-color: @white;
											color: @link_color;
										}
										
										&:first-child {
											color: #C0C0C0;
											pointer-events: none;
											cursor: default;
											padding-top: 9px;
											padding-bottom: 4px;
										}
									}
								}
							}
						}
					}
					
					&--wrong {
						.form__item__signal {
							display: block;
						}
					
						input, textarea {
							color: @red ;
							border-color: @red;
						}
						
						select {
							border-color: @red;
						}
						
						.selectric-wrapper {
							.selectric {
								border-color: @red;
							}
						}
					}
					
					&--selected {
						input, textarea {
							border-color: @link_color;
						}
					}
				}
			}
			
			.panel {
				margin-top: @p;
			
				&__item {
					&--send {
						.button-style(@w, 60px);
					}
				}
			}
		}
		
		.result {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display: none;
			text-align: center;
			
			.title {
				position: relative;
				.typo-title(19px);
				color: @white;
				margin-top: 110px;
				padding-bottom: 40px;
				
				&:after {
					content: '';
					position: absolute;
					width: 60px;
					height: 1px;
					background-color: #6CB2E1;
					bottom: 20px;
					left: 50%;
					margin-left: -30px;
				}
			}
			
			.message {
				position: relative;
				.typo-text;
				color: @white;
				padding: 0 55px;
				margin-bottom: 190px;
				font-style: italic;
				
				&:after {
					content: '';
					position: absolute;
					top: 95px;
					left: 50%;
					margin-left: -5px;
					width: 11px;
					height: 130px;
					background-image: url(../images/arrow-down-white.png);
					background-repeat: no-repeat;
					background-position: center center;
				}
			}
			
			.back {
				.typo-link;
				.typo-title(14px);
				line-height: 18px;
				display: inline-block;
				color: #C3DBF0;
				border-color: #6CB2E1;
				
				&:hover {
					color: @white;
					border-color: #6CB2E1;
				}
			}
		
			&--success {
				background-color: #499FDA;
			}
			
			&--shown {
				display: block;
			}
		}
	}
}

@media only screen and (max-width: 1000px) {
	.page {
		.short-break {
			display: block;
		}
		
		.long-break {
			display: none;	
		}
	
		&__section {
			&__container {
				width: 100% !important;
			}
			
			&--menu {
				.menu {
					&--navigation {
						.column {
							&--left {
								display: none;
							}
							
							&--right {
								width: 90%;
								padding-left: 10%;
							}
						}
					}
				
					&--main {
						.column {
							&--left {
								width: 70%;
								padding-left: 5%;
							}
							
							&--right {
								width: 20%;
								padding-right: 5%;
							}
						}
						
						.menu_button {
							float: right;
						}
						
						.ask_button {
							display: none;
						}
					}
				}
			
				.column {
					&--left {
						width: 70%;
						padding-left: 5%;
					}
					
					&--right {
						width: 20%;
						padding-right: 5%;
					}
				}
			}
			
			&--intro {
				.header {
					.column {
						&--left {
							width: 40%;
						}
						
						&--center {
							width: 20%;
						}
						
						&--right {
							width: 40%;
						}
					}
					
					.name {
						text-align: center;
					}
					
					.socials {
						margin-left: auto;
						margin-right: auto;
						float: none;
					}
				}
				
				.content {
					.title, .text {
						padding: 0 10%;
					}
					
					.title {
						height: 135px;
					}
				
					.panel {
						&__item {
							&--me {
								display: none;
							}
						}
					}
				}
			}
			
			&--timeline {
				.header, .footer {
					.column {
						&--left {
							width: 15%;
						}
						
						&--right {
							width: 85%;
						}
					}
				}
				
				.header {
					.text {
						padding-right: 10%;
					}
				}
				
				.content {
				}
				
				.footer {
					.text {
						padding-right: 10%;
					}
				}
			
				.timeline {
					&__item {
						&--point {
							.column {
								&--left, &--right {
									float: none;
									width: 85%;
									margin-left: 15%;
								}
								
								&--left {
									height: 30px;
								}
							}
						}
						
						&--mention {
							width: 80%;
							margin-left: 5%;
							padding: 4% 5%;
							
							.column {
								&--left {
									width: 15%;
								}
								
								&--right {
									width: 85%;
								}
							}
						}
					
						&__date {
							position: static;
						}
						
						&__point {
							left: -5.7%;
							margin-left: -6px;
						}
						
						&__text {
							padding-right: 10%;
						}
					}
				}
				
				.line {
					left: 10%;
				}
			}
			
			&--services {
				.content {
					.section {
						padding: 0 10%;
					
						.column {
							float: none;
							width: auto;
							padding: 0;
						}
						
						.list {
							padding-left: 5%;
							margin-top: 30px;
						}
					}
				}
				
				.footer {
					width: 80%;
					margin-left: 10%;
					padding: 5% 10%;
					.box-sizing;
					
					.text {
						
					}
					
					.arrow {
						display: none;
					}
				}
			}
			
			&--cost {
				.text {
					padding: 0 10%;
				}
			}
			
			&--footer {
				.column {
					&--left {
						width: 70%;
						padding-left: 5%;
					}
					
					&--right {
						width: 20%;
						padding-right: 5%;
					}
				}
				
				.dev {
					display: none;
				}
			}
		}
	}
}

@media only screen and (max-width: 500px) {
	.page {
		br {
			display: none;
		}
	
		&__section {
			&--menu {
				display: none;
			}
			
			&--intro {
				padding-top: 20px;
				padding-bottom: 0;
			
				.header {
					.column {
						display: none;
						
						&--left {
							display: block;
							width: 100%;
						}
					}
				}
				
				.content {
					/*padding-bottom: 10px;*/
				
					.title {
						margin-top: 10px;
						height: 175px;
					}
					
					.panel {
						padding-bottom: 50px;
					}
					
					.next {
						display: none;
					}
				}
			}
			
			&--timeline {
				.header {
					.title {
						font-size: 20px;
						padding-top: 50px;
					}
				}
				
				.content {
					.timeline {
						&__item {
							&--mention {
								.column {
									&--left {
										display: none;
									}
									
									&--right {
										width: 95%;
										padding-left: 5%;
									}
								}
							}
						}
					}
				}
				
				.footer {
					padding-bottom: 50px;
				}
			}
			
			&--services {
				padding-bottom: 50px;
			}
			
			&--cost {
				padding-top: 50px;
				padding-bottom: 50px;
			
				.panel {
					&__item {
						width: 250px;
					}
				}
			}
			
			&--footer {
				height: auto;
				padding: 20px 0 30px 0;
			
				.column {
					float: none;
					width: 100%;
					padding: 0;
				}
				
				.contacts {
					padding: 0;
				
					&__item {
						float: none;
						margin: 0;
						border: none;
						line-height: 35px;
						text-align: center;
						height: auto;
						
						&:after {
							display: none;
						}
					}
				}
				
				.socials {
					float: none;
					width: 100px;
					margin: 15px auto 0 auto;
				}
			}
		}
	}
	
	.popup {
		&__content {
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0px;
			
			.close {
				display: block;
			}
			
			.result {
				.message {
					margin-bottom: 40px !important;
					
					&:after {
						display: none;
					}
				}
			}
			
			.header {
				padding-top: 50px;
				padding-bottom: 0px;
			
				.title {
					padding: 0 8%;
					line-height: 1.5;
					font-size: 13px;
				}
			}
			
			.content {
				
			}
			
			.form {
				&__item {
					&__element {
						width: 80% !important;
						margin-left: 10%;
					}
					
					&__signal {
						display: none !important;
					}
					
					&--select {
						margin-bottom: 10px !important;
					}
					
					input, select {
						margin-bottom: 10px !important;
					}
					
					textarea {
						height: 70px !important;
					}
					
					.selectric {
						width: 80%;
						margin-left: 10%;
					}
					
					.selectric-items {
						left: 10%;
					}
				}
			}
			
			.panel {
				margin-top: 20px !important;
			
				&__item {
					&--send {
						width: 80% !important;
						margin-left: 10%;
					}
				}
			}
		}
	}
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
	
	.page {
		.socials {
			&__item {
				background-image: url(../images/socials@2x.png) !important;
				background-size: 300% !important;
			}
		}
	
		&__section {
			&--intro {
				.next {
					background-image: url(../images/scroll-down@2x.png) !important;
					background-size: 100% !important;
				}
			}
			
			&--services {
				.arrow {
					background-image: url(../images/arrow-down@2x.png) !important;
					background-size: 100% !important;
				}
			}

			&--footer {
				.socials {
					&__item {
						background-image: url(../images/socials-white@2x.png) !important;
						background-size: 300% !important;
					}
				}
			}
		}
	}
	
	.popup {
		.close {
			background-image: url(../images/cross@2x.png) !important;
			background-size: 60% !important;
		}
		
		.message {
			&:after {
				background-image: url(../images/arrow-down-white@2x.png) !important;
				background-size: 100% !important;
			}
		}
	}
}