/* ==============================================================

Project:	Vespia - Creative Coming Soon WordPress Plugin
Info:		https://themeforest.net/user/athenastudio
Version:	1.0
Author:		AthenaStudio
Profile:	https://themeforest.net/user/athenastudio

-----------------------------------------------------------------
					*** TABLE OF CONTENTS ***
-----------------------------------------------------------------

	1.	General
	2.	Page loader
	3.	Intro
	4.	Background
	5.	Header
	6.	Welcome
	7.	Subscribe
	8. 	Burger menu
	9.	Sections
	10.	Skills
	11.	Contact info
	12. Contact form
	13.	Clients
	14.	Google maps
	15.	Footer
	16.	Scroll top
	17.	Works
		
=============================================================*/

/*********************
    - 1. General -
*********************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	margin:0;
	padding:0;
}

html {
	height:100%;
	width:100%;
}

body {
	position:relative;
	color:#fff;
	font-family:"Roboto", sans-serif;
	font-size:16px;
	line-height:1.5em;
	font-weight:300;
	width:100%;
	height:100%;
	background:#000;
	text-rendering:optimizeLegibility;
}

a, a > * {
	outline:none;
	cursor:pointer;
	text-decoration:none;
}

a:focus, 
a:hover {
	outline:none;
	text-decoration:underline;
	transition:all 0.3s;
}

strong {
	font-weight:bold;
}

p {
	margin-bottom:1em;
}

::selection {
	color:#1a1a1a;
	text-shadow:none;
	background-color:#fff;
}

::-webkit-selection {
 	color:#1a1a1a;
 	text-shadow:none;
 	background-color:#fff;
}

::-moz-selection {
 	color:#1a1a1a;
 	text-shadow:none;
 	background-color:#fff;
}

/*************************
    - 2. Page loader -
*************************/
.page-loader {
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:40;
	background:#fff;
}

.page-loader .progress {
	position:absolute;
	margin:-15em 0 0 -15em;
	font-size:2px;
	top:50vh;
	left:50vw;
	background:#fff;
	border-top:0.8em solid rgba(35, 35, 35, 0.2);
	border-right:0.8em solid rgba(35, 35, 35, 0.2);
	border-bottom:0.8em solid rgba(35, 35, 35, 0.2);
	border-left:0.8em solid #000;
	transform:translateZ(0);
	animation:preloader 0.7s infinite linear;
}

.page-loader .progress,
.page-loader .progress:after {
	border-radius:50%;
	width:30em;
	height:30em;
}

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

/*******************
    - 3. Intro -
*******************/
.page {
	position:relative;
	left:0;
  	top:0;
  	z-index:5;
  	width:100%;
  	height:100%;
}

.empty {
	height:30px;
}

/* Magic mouse */
.magic-mouse {
	position:absolute;
	z-index:3;
	width:19px;
	height:30px;
	border:1px solid #fff;
	border-radius:12px;
	background:transparent;
	bottom:42px;
	margin:0 auto;
	left:0;
	right:0;
	transition:all 0.3s;
}

.magic-mouse a {
	display:block;
	width:21px;
	height:32px;
}

.magic-mouse .wheel {
	position:absolute;
	display:block;
	width:1px;
	height:5px;
	background:#fff;
	border-radius:50%;
	margin-left:auto;
	margin-right:auto;
	top:3px;
	left:0;
	right:0;
	animation:magic-mouse 1.7s infinite ease;
}

@keyframes magic-mouse {
 	0% {
 		top:3px;
 		opacity:0;
	}
	
 	30% {
 		opacity:1;
	}
	
 	100% {
 		top:16px;
 		opacity:0;
	}
}

/************************
    - 4. Background -
************************/
.bg {
	position:fixed;
  	top:0;
  	left:0;
  	width:100%;
  	height:100%;
  	overflow:hidden;
}

/* Overlay */
.bg:after,
.mbYTP_wrapper:after {
	content:'';
  	position:absolute;
  	top:0;
  	left:0;
  	z-index:0;
  	width:100%;
  	height:100%;
  	background:rgba(35, 52, 105, 0.5);
}

/********************
    - 5. Header -
********************/
header {
	position:fixed;
	z-index:11;
	left:0;
	top:0;
	padding:50px;
	width:100%;	
	transition:all .7s cubic-bezier(.165, .85, .45, 1);
}

header:after {
	content:'';
	position:relative;
	display:block;
	clear:both;
}

/* Logo */
header .logo > img {
	display:block;
}

header .navbar-brand1 {
	display:block;
}

header .navbar-brand2 {
	display:none;
}

/* Navigation */
header .top-menu {	
	text-align:right;
}

header .top-menu ul {
	list-style:none;
	margin:0;
	padding:0;
}

header .top-menu ul li {
	position:relative;
	display:inline-block;
	margin-left:40px;
}

header .top-menu ul li:first-child {
	margin-left:0;
}

header .top-menu ul li a {
	position:relative;
	overflow:hidden;
	display:block;
	font-size:15px;
	line-height:50px;
	color:#fff;
	font-weight:900;
	padding:0;
	text-decoration:none;
	text-transform:uppercase;
	transition:opacity .3s, color .7s cubic-bezier(.165, .85, .45, 1);
}

/* Fixed menu */
header.fixed-menu {
	visibility:visible !important;
	background-color:#fff;
	padding-top:10px;
	padding-bottom:10px;
	box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.06);
}

header.fixed-menu .navbar-brand1 {
	display:none;
}

header.fixed-menu .navbar-brand2 {
	display:block;
}

header.fixed-menu  .top-menu ul li a {
	color:#111;
}

/* Animated button */
.animated-button {
	position:relative;
	top:-1px;
	display:inline-block;
	vertical-align:middle;
	line-height:16px;
}

.animated-button span {
	position:relative;
	overflow:hidden;
	display:block;
	font-weight:900;
}

.animated-button span em {
	display:inline-block;
	min-width:5px;
	vertical-align:middle;
	font-style:normal;
	backface-visibility:hidden;
	transition:transform 0.3s ease;
	transform:translateY(0);
}

header .top-menu ul li:hover > a:hover .animated-button em,
.action-btn:hover .animated-button em {
	transform:translateY(calc(16px * -1));
}

.animated-button span em:nth-child(1) 	{transition-delay:0.025s;}
.animated-button span em:nth-child(2) 	{transition-delay:0.05s;}
.animated-button span em:nth-child(3) 	{transition-delay:0.075s;}
.animated-button span em:nth-child(4) 	{transition-delay:0.1s;}
.animated-button span em:nth-child(5) 	{transition-delay:0.125s;}
.animated-button span em:nth-child(6) 	{transition-delay:0.15s;}
.animated-button span em:nth-child(7) 	{transition-delay:0.175s;}
.animated-button span em:nth-child(8) 	{transition-delay:0.2s;}
.animated-button span em:nth-child(9) 	{transition-delay:0.225s;}
.animated-button span em:nth-child(10) 	{transition-delay:0.25s;}
.animated-button span em:nth-child(11) 	{transition-delay:0.275s;}
.animated-button span em:nth-child(12) 	{transition-delay:0.300s;}
.animated-button span em:nth-child(13) 	{transition-delay:0.325s;}
.animated-button span em:nth-child(14) 	{transition-delay:0.350s;}
.animated-button span em:nth-child(15) 	{transition-delay:0.375s;}
.animated-button span em:nth-child(16) 	{transition-delay:0.400s;}
.animated-button span em:nth-child(17) 	{transition-delay:0.425s;}
.animated-button span em:nth-child(18) 	{transition-delay:0.450s;}
.animated-button span em:nth-child(19) 	{transition-delay:0.475s;}
.animated-button span em:nth-child(20) 	{transition-delay:0.500s;}

/*********************
    - 6. Welcome -
*********************/
.welcome {
	position:absolute;
	z-index:1;
	top:0;
	width:100%;
	height:100%;
}

.welcome.left-aligned {
	padding:0 50px;
}

.welcome h2 {
	font-size:60px;
	line-height:60px;
	font-weight:900;
	color:#fff;
	text-transform:uppercase;
	margin-bottom:25px;
}

.welcome p {
	font-size:18px;    
	color:#fff;
	margin-bottom:25px;
}

/* Countdown */
.is-countdown {
	max-width:800px;
	margin:0 0 25px 0;
	width:100%;
}

.countdown-row {
	display:block;
}

.countdown-section {
	position:relative;
	display:inline-block;
	width:20%;
	text-align:center;
}

.countdown-amount {
	position:relative;
	display:block;
	color:#fff;
	font-size:56px;		
	height:56px;
	line-height:56px;
	font-weight:600;	
	text-align:center;
	vertical-align:middle;
}

.countdown-period {
	display:block;
	font-size:13px;
	text-align:center;
	text-transform:uppercase;
}

.countdown-section:after {
	content:"";
	position:absolute;
	top:15px;
	right:0;
	width:1px;
	height:60%;
	background:#fff;
	opacity:0.3;
}

.countdown-section:last-child:after {
	display:none;
}

/* Horizontal countdown */
.countdown-horizontal .countdown-section {
	width:auto;
	margin-right:40px;
}

.countdown-horizontal .countdown-section:after {
	display:none;
}

.countdown-horizontal .countdown-amount {
	display:inline-block;
	vertical-align:bottom;
}

.countdown-horizontal .countdown-period {
	display:inline-block;
	vertical-align:bottom;
	font-size:16px;
	margin-left:5px;
	margin-bottom:2px;
}

/* Buttons */
.action-btn {
	position:relative;
	display:inline-block;
	overflow:hidden;
	color:#fff;
	font-size:14px;
	line-height:14px;
	font-weight:900;
	text-transform:uppercase;
	padding:16px 30px;
	border-radius:3px;
	border:0;
	cursor:pointer;
	transition:background .5s, color .7s cubic-bezier(.165, .85, .45, 1);
}

.action-btn > i {
	display:inline-block;
	margin-left:10px;
	font-weight:600;
	transition:1s all cubic-bezier(0.165, 0.85, 0.45, 1) 0s;
}

.action-btn:hover {
	background:#fff;
}

.action-btn:hover > i {
	transform:translateX(6px);
}

/* Dark button */
.action-btn.dark:hover {
    background:#282828;
}

/***********************
    - 7. Subscribe -
***********************/
.dialog, .dialog__overlay {
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.dialog {
	position:fixed;
	z-index:999;
	display:flex;
	justify-content:center;
	align-items:center;
	pointer-events:none;
}

.dialog__overlay {
	position:absolute;
	z-index:1;
	background:rgba(31, 34, 46, 0.9);
	opacity:0;
    transition:all 0.3s;
}

.dialog--open .dialog__overlay {
	opacity:1;
	pointer-events:auto;
}

.dialog__content {
	position:relative;
	z-index:5;
	width:50%;
	max-width:450px;
	min-width:290px;
	padding:0;
	text-align:center;
	overflow:hidden;
	background:transparent;
  	background:url(../../images/bg/subscribe.jpg) center;
  	background-size:cover;
  	opacity:0;
}

.dialog__content:before {
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	background:rgba(32, 35, 45, 0.7);
}

.dialog--open .dialog__content {
	pointer-events:auto;
}

.dialog .close-newsletter {
	position:absolute;
	top:10px;
	right:10px;
	border:none;
	background:transparent;
	width:40px;
	height:40px;
	line-height:35px;
	color:#fff;
	font-size:20px;
	opacity:0.5;
	outline:none;
	cursor:pointer;
    transition:all 0.3s;
}

.dialog .close-newsletter:hover {
	opacity:1;
}

.dialog .dialog-inner {
	padding:90px 70px;
	overflow:hidden;
	border-left:10px solid #3dade9;
  	border-right:10px solid #bf2fcb;
  	background-size:100% 10px;
  	background-position:0 100%, 0 0;
  	background-repeat:no-repeat;
  	background-clip:border-box;
    background-image:linear-gradient(to right, #3dade9, #bf2fcb), linear-gradient(to right, #3dade9, #bf2fcb);
}

.dialog .dialog-inner:before {
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
}

.dialog .dialog-inner h4 {
	color:#fff;
	font-size:40px;
	line-height:40px;
	font-weight:700;
	margin-bottom:10px;
	letter-spacing:1px;
}

.dialog .dialog-inner p {
	color:#fff;
}

#subscribe #notifyMe {
	max-width:450px;
	margin:auto;
	margin-top:2em;
}

#subscribe #notifyMe ::-webkit-input-placeholder {
 	color:#747c83 !important;
}

#subscribe #notifyMe :-ms-input-placeholder {
 	color:#747c83 !important;
}

#subscribe #notifyMe ::-ms-input-placeholder {
 	color:#747c83 !important;
}

#subscribe #notifyMe ::placeholder {
 	color:#747c83 !important;
}

#subscribe #notifyMe .form-group {
	margin-bottom:1em;
}

#subscribe #notifyMe .form-group i {
	color:#757a86;
	position:absolute;
	text-align:center;
	top:15px;
	left:15px;
}

#subscribe #notifyMe .opacity-0 {
	opacity:0 !important;
	visibility:hidden !important;
}

#subscribe #notifyMe .form-group input {
	width:100%;
	color:#fff;
	background:rgba(0, 0, 0, 0.7);
	border:0;
	border-radius:3px;
	padding:16px 18px;
	margin-bottom:20px !important;
	font-size:14px;
	font-weight:bold;
	line-height:1;
	text-align:center;
	outline:none;
    transition:all 0.3s;
}

#subscribe #notifyMe .form-group input::-webkit-input-placeholder {
  	color:rgba(255, 255, 255, 0.6) !important;
  	font-weight:400;
}

#subscribe #notifyMe .form-group input::-moz-placeholder {
  	color:rgba(255, 255, 255, 0.6) !important;
  	font-weight:400;
}

#subscribe #notifyMe .form-group input:-moz-placeholder {
  	color:rgba(255, 255, 255, 0.6) !important;
  	font-weight:400;
}

#subscribe #notifyMe .form-group input:-ms-input-placeholder {
  	color:rgba(255, 255, 255, 0.6) !important;
  	font-weight:400;
}

#subscribe #notifyMe .form-group button.submit {
	float:none;
	margin:0;
}

#subscribe .block-message {
	min-height:50px;
	position:absolute;
	bottom:-100px;
	width:100%;
	left:0;
	padding:15px;
	background:transparent;
	transition:all 0.3s cubic-bezier(0, 0, 0.58, 1);
}

#subscribe .block-message.show-block-error {
	bottom:0;
	background:#ff1d4d;
}

#subscribe .block-message.show-block-valid {
	bottom:0;
}

#subscribe p.notify-valid {
	color:#fff;
	text-transform:none;
	font-size:16px;
	letter-spacing:0;
	font-weight:600;
}

.dialog__overlay {
	transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.dialog.dialog--open .dialog__content, .dialog.dialog--close .dialog__content {
	animation-duration:0.4s;
	animation-fill-mode:forwards;
}

.dialog.dialog--open .dialog__content {
	animation-name:anim-open;
}

.dialog.dialog--close .dialog__content {
	animation-name:anim-close;
}

@keyframes anim-open {
 	0% {
 		opacity:0;
 		transform:translate3d(0, 50px, 0);
	}

	100% {
		opacity:1;
 		transform:translate3d(0, 0, 0);
	}
}

@keyframes anim-close {
 	0% {
 		opacity:1;
 		transform:translate3d(0, 0, 0);
	}

 	100% {
 		opacity:0;
 		transform:translate3d(0, 50px, 0);
	}
}

/*************************
    - 8. Burger menu -
*************************/
.menu-bar {
	position:absolute;
	z-index:999999;
	top:50%;
	right:12px;
	width:30px;
	height:20px;
	display:none;
	transform:translateY(-50%);
	transition:all 0.3s;
}

.menu-bar:before,
.menu-bar:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:2px;
	background:#fff;
	transition:all 0.3s;
}

.menu-bar:after {
	top:auto;
	bottom:0;
}

.menu-bar span {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:2px;
	background:#fff;
	margin-top:-1px;
	transition:all 0.3s ease 0s;
}

.menu-bar.active {
	display:block;
}

.menu-bar.active span {
	background:#666;
}

.menu-bar.active:before {
	opacity:0;
}

.menu-bar.active:after {
	background:#666;
	bottom:9px !important;
	transform:rotate(-45deg);
}

.menu-bar.active span {
	transform:rotate(45deg);
}

.menu-bar.active:hover span,
.menu-bar.active:hover:after {
	background:#000;
}

/* Fixed menu */
.fixed-menu .menu-bar:before,
.fixed-menu .menu-bar:after,
.fixed-menu .menu-bar span {
	background:#666;
}

/* Mobile menu */
header.mobile-menu {
	background:#fff;
	height:100%;
}

header.mobile-menu .top-menu {
	display:block;
	text-align:center;
	margin:30px 0;
}

header.mobile-menu .top-menu ul li {
	display:block;
	margin:0;
}

header.mobile-menu .top-menu ul li a {
	font-size:20px;
	border-bottom:1px solid #eee;
}

/**********************
    - 9. Sections -
**********************/
section {
	position:relative;
	background:#fff;
	color:#444;
}

section .container {
	position:relative;
	z-index:2;
	padding-top:80px;
	padding-bottom:80px;
}

section.section-box .container {
	padding-top:50px;
	padding-bottom:50px;
}

section.bg-grey {
	background-color:#fafbfe;
}

section.bg-dark {
	background-color:#20232d;
	color:#fff;
}

/* Section title */
.section-title {
	padding-bottom:40px;
}

.section-title h3 {
	position:relative;
	clear:both;
	display:inline-block;
	font-size:36px;
	line-height:42px;
	font-weight:700;
	margin-bottom:12px;
	color:#111;
}

.section-title p {
	font-size:18px;
	line-height:27px;
	color:#999;
	margin:0;
}

/*********************
    - 10. Skills -
*********************/
.skill {
	text-align:center;
}

.skill h5 {
	font-size:48px;
	line-height:48px;
	font-weight:700;
	margin-bottom:5px;
}

.skill p {
	color:#999;
	font-size:12px;
	line-height:12px;
	text-transform:uppercase;
	margin-bottom:0;
}

.skill .counter-value {
	opacity:0;
	transition:opacity .6s ease;
}

.skill.animated .counter-value {
	opacity:1;
}
	
.skill .counter-value .main {
	display:none;
}
	
.skill .counter-value .digit {
	position:relative;
	overflow:hidden;
	display:inline-block;
	vertical-align:middle;
}

.skill .counter-value .digit > .digit-value {
	visibility:hidden;
	display:inline-block;
	vertical-align:middle;
}
	
.skill .counter-value .digit .counter-animator {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow:hidden;
}
	
.skill .counter-value .digit .counter-animator ul {
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	transition:all 3s ease;
}
	
.skill .counter-value .digit .counter-animator ul li {
	margin-top:0;
}

/***************************
    - 11. Contact info -
***************************/
.contact-info .icon {
    margin-right:5px;
}

.contact-info h5 {
	font-size:20px;
	line-height:24px;
	font-weight:600;
	margin-bottom:5px;
}

/* Info single */
.info-single {
	position:relative;
	text-align:center;
    border-radius:6px;
    transition:all 0.3s;
    transform:translateY(0);
}

.info-single:hover {	
	transform:translateY(-5px);
}

/* Title */
.info-single h5 {
	font-size:24px;
	line-height:30px;
	font-weight:600;
	margin:20px 0 15px;
	text-align:center;
    transition:all 0.3s;
}

/* Text */
.info-single p {
	color:#999;
	text-align:center;
    transition:all 0.3s;
}

.info-single p:last-child {
	margin-bottom:0;
}

.info-single:hover p {
	color:#666;
}

/* Icon */
.info-single .icon {
	display:inline-block;
	width:auto;
	height:60px;
	font-size:60px;
	line-height:60px;
	text-align:center;
    transition:all 0.3s;
}

.info-single .icon:before {
	line-height:80px;
}

/***************************
    - 12. Contact form -
***************************/
.contact-form-holder {
	padding:20px;
	background-color:#fafbfe;
	border-radius:6px;
}

#contact-form .form-group {
	position:relative;
}

#contact-form input, 
#contact-form textarea {
	border:1px solid #ddd;
	background-color:#fff;
	font-weight:normal;
    font-size:14px;
	box-shadow:none;
	border-radius:3px;
	height:50px;
	padding:0 20px;
	transition:all 0.3s;
}

#contact-form textarea {
	overflow:auto;
	resize:vertical;
    line-height:1.75;
	padding:12px 20px;
    height:auto;
}

/* Error */
#contact-form .error {
	display:none;
	position:absolute;
	top:17px;
	right:15px;
	line-height:1;
	cursor:default;
}

#contact-form .error > i {
	font-size:14px;
	line-height:14px;
	cursor:inherit;
	color:#a6a6a6;
}

/* Result */
.contact-form-result {
	display:none;
}

.contact-form-result h3 {
    color:#111;
	margin:30px 0 10px;
	font-size:24px;
	line-height:24px;
    font-weight:600;
}

/**********************
    - 13. Clients -
**********************/
.clients-slider {
	position:relative;
	width:100%;
	margin:0 auto;
	text-align:center;
}

.clients-slider .client {
	position:relative;
	overflow:hidden;
	text-align:center;
}

.clients-slider .client img {
	display:block;
	max-width:140px !important;
	margin:0 auto;
	text-align:center;
	opacity:0.7;
    transition:all 0.3s;
}

.clients-slider .client img:hover {
	opacity:1;
}

/* Dots */
.clients-slider .owl-dots {
	text-align:center;
	margin-top:40px;
}

.clients-slider .owl-dots .owl-dot {
	display:inline-block;
}

.clients-slider .owl-dots .owl-dot span {
    width:10px;
    height:10px;
	margin:5px 3px;
    display:block;
    border-radius:50%;
    border:1px solid #000;
    transition:all 0.3s;
}

/**************************
    - 14. Google maps -
**************************/
#map {
	position:relative;
	overflow:hidden;
}

#map #google-map {
	height:450px;
}

#map #map-info {
	display:none;
}

#zoom-in, 
#zoom-out {
  	height:32px;
  	width:32px;
  	cursor:pointer;
  	margin-left:40px;
  	background-repeat:no-repeat;
  	background-size:32px 64px;
  	background-image:url("../images/map-controller.svg");
  	-webkit-transition:all 0.5s ease;
  	   -moz-transition:all 0.5s ease;
  			transition:all 0.5s ease;
}

#zoom-in {
  	background-position:50% 0;
  	margin-top:100px;
  	margin-bottom:1px;
}

#zoom-out {
  	background-position:50% -32px;
}

#bodyContent > p {
	margin-top:10px;
	line-height:1.5em;
}

/*********************
    - 15. Footer -
*********************/
footer {
	color:#b0b0b0;
	background-color:#20232d;
}

footer .container {
	padding-top:50px;
	padding-bottom:50px;
}

footer .icon {
	margin-bottom:30px;
}

footer a {
	color:#fff;
	font-weight:600;
	text-decoration:none !important;
    transition:all 0.3s;
}

footer .col-12 > p:last-child {
	margin-bottom:0;
}

/* Social */
.social {
	list-style:none;
	padding:0;
	margin:0 0 15px 0;
}

.social li {
	display:inline-block;
	margin:0 20px 0 0;
}

.social li:last-child {
	margin-right:0;
}

.social li a {
	display:block;
	overflow:hidden;
	padding:0;
	color:#fff;
	transition:all 0.3s;
}

.social li i {
	position:relative;
	display:block;
	font-size:18px;
	line-height:18px;	
	cursor:pointer;
	overflow:hidden;
	text-align:center;
}

/*************************
    - 16. Scroll top -
*************************/
.to-top {
	position:fixed;
	z-index:99;
	bottom:-50px;
	right:30px;
	width:40px;
	height:40px;
	background-color:#111;
	color:#fff;
	text-align:center;
	font-size:28px;
	line-height:40px;
    transition:all 0.3s;
    border-radius:50%;
}

.to-top div:before {
	line-height:40px;
}

.to-top:hover {
	color:#fff;
}

.to-top.fixed-totop {
	bottom:30px;
}

/********************
    - 17. Works -
********************/
.works-grid .work-item {
	float:left;
	overflow:hidden;
	padding:10px;
	width:calc(33.33333333% - 20px);
}

.works-grid .work-item a {
	display:flex;
	overflow:hidden;
}

.works-grid .work-item img {
	max-width:100%;
	height:auto;
	transition:all 1s ease;
}

.works-grid .work-item:hover img {
	transform:scale(1.2) translateY(-20px);
}