/*----------------------------------------------------------------------------------------------------------------------
Project:	    CreaSoon
Version:        1.0.0

Default Color   #000;

Body copy:		'Monsterat', sans-serif; 14px;
Headers:		'Monsterat', sans-serif;

----------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------
[Table of contents]

A. Basic Styling
  -- Styling

B. Helpers
  -- Animations
  -- Universal Classes

C. Components
  -- Background
  -- Box
  -- Content wrapper
  -- Count-down
  -- Footer
  -- Forms
  -- Header
  -- Magnific popup
  -- Map
  -- Modal
  -- Page wrapper
  -- Parallax
  -- Person
  -- Skill
  -- Social icons
  -- Work;

----------------------------------------------------------------------------------------------------------------------*/

/***********************************************************************************************************************
A. Basic Styling
***********************************************************************************************************************/

body, html {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    overflow: hidden;
    position: relative;
    margin-right: 0 !important;
    margin: 0;
}

a {
    transition: .4s ease;
    outline: none !important;
    color: #000;
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

a.icon i {
    margin-right: .375rem;
    margin-left: .375rem;
}

dl dt {
    float: left;
}

dl dd {
    text-align: right;
    margin-bottom: .375rem;
}

h1 {
    font-size: 5rem;
    font-weight: bold;
}

h2 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: bold;
}

h5 {
    font-size: .875rem;
}

p {
    opacity: .6;
}

img {
    max-width: 100%;
}

section {
    margin-bottom: 2.5rem;
}

/***********************************************************************************************************************
B. Helpers
***********************************************************************************************************************/

/* Animate */

.animate {
    transition: .6s;
    opacity: 0;
    transform: scale(.98);
}

.animate.idle {
    opacity: 1;
    transform: scale(1);
}

.background-wrapper, .active-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.background-wrapper img, .active-slider img {
    width: 100%;
    height: auto;
}

.background-wrapper .map, .active-slider .map {
    height: 100%;
}

.background-wrapper .background-color, .active-slider .background-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.background-wrapper .background-color.background-color-white,
.active-slider .background-color.background-color-white {
    background-color: #fff;
}

.background-wrapper .background-color.background-color-black,
.active-slider .background-color.background-color-black {
    background-color: #000;
}

.bg-transfer {
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    width: 100%;
}

.bg-transfer img {
    display: none !important;
}

.bg-transfer.bg-fixed {
    background-attachment: fixed;
    background-size: 100%;
    background-position: top center;
}

.center {
    text-align: center;
}

.note {
    opacity: .4;
    font-size: .75rem;
    margin: .5rem 0;
}

.shadow {
    box-shadow: 0 .0625rem .625rem rgba(0, 0, 0, .07);
}

.font-size-10 {
    font-size: .625rem;
}

.font-size-20 {
    font-size: 1.25rem;
}

.font-size-30 {
    font-size: 1.875rem;
}

.font-size-40 {
    font-size: 2.5rem;
}

.font-size-50 {
    font-size: 3.125rem;
}

.font-size-60 {
    font-size: 3.75rem;
}

.font-size-70 {
    font-size: 4.375rem;
}

.font-size-80 {
    font-size: 5rem;
}

.font-size-90 {
    font-size: 5.625rem;
}

.font-size-100 {
    font-size: 6.25rem;
}

.font-size-110 {
    font-size: 6.875rem;
}

.font-size-120 {
    font-size: 7.5rem;
}

.opacity-90 {
    opacity: .9;
}

.opacity-80 {
    opacity: .8;
}

.opacity-70 {
    opacity: .7;
}

.opacity-60 {
    opacity: .6;
}

.opacity-50 {
    opacity: .5;
}

.opacity-40 {
    opacity: .4;
}

.opacity-30 {
    opacity: .3;
}

.opacity-20 {
    opacity: .2;
}

.opacity-19 {
    opacity: .19;
}

.opacity-18 {
    opacity: .18;
}

.opacity-17 {
    opacity: .17;
}

.opacity-16 {
    opacity: .16;
}

.opacity-15 {
    opacity: .15;
}

.opacity-14 {
    opacity: .14;
}

.opacity-13 {
    opacity: .13;
}

.opacity-12 {
    opacity: .12;
}

.opacity-11 {
    opacity: .11;
}

.opacity-10 {
    opacity: .1;
}

.opacity-9 {
    opacity: .09;
}

.opacity-8 {
    opacity: .08;
}

.opacity-7 {
    opacity: .07;
}

.opacity-6 {
    opacity: .06;
}

.opacity-5 {
    opacity: .05;
}

.opacity-4 {
    opacity: .04;
}

.opacity-3 {
    opacity: .03;
}

.opacity-2 {
    opacity: .02;
}

.opacity-1 {
    opacity: .01;
}

.opacity-0 {
    opacity: ;
}

/***********************************************************************************************************************
C. Components
***********************************************************************************************************************/

/* Background */

#background-content {
    height: 100%;
    width: 100%;
}

/* -- Box */

.box {
    margin-bottom: 1.875rem;
}

.box .icon {
    margin-top: .9375rem;
}

/* -- Content Wrapper */

.content-wrapper {
    display: table;
    height: 100%;
    width: 100%;
    position: absolute;
}

.content-wrapper .content-main {
    text-align: center;
    z-index: 1;
    pointer-events: none;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.content-wrapper .content-main h1 {
    margin-bottom: 2.5rem;
}

.content-wrapper .content-main h2 {
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
}

.content-wrapper .content-main form {
    pointer-events: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.25rem;
}

.content-wrapper .content-main .container {
    z-index: 1;
    position: relative;
}

/* -- Count Down */

.count-down {
    margin-bottom: 3.75rem;
}

.count-down .countdown-row {
    width: 100%;
}

.count-down .countdown-row.countdown-show4 .countdown-section {
    width: 25%;
}

.count-down .countdown-row.countdown-show3 .countdown-section {
    width: 33%;
}

.count-down .countdown-row.countdown-show2 .countdown-section {
    width: 50%;
}

.count-down .countdown-row.countdown-show1 .countdown-section {
    width: 100%;
}

.count-down .countdown-row .countdown-section {
    display: inline-block;
    position: relative;
}

.count-down .countdown-row .countdown-amount {
    font-size: 3.75rem;
    font-weight: bold;
    display: block;
    margin-bottom: -1.25rem;
    position: relative;
}

.count-down .countdown-row .countdown-period {
    opacity: .5;
    font-size: .75rem;
    text-transform: uppercase;
}

/* -- Footer */

footer {
    position: absolute;
    bottom: .625rem;
    text-align: center;
    width: 100%;
}

footer .social-icons a {
    opacity: .5;
    color: #000;
    padding: .3125rem .625rem;
    display: inline-block;
    font-size: 1.125rem;
}

footer .social-icons a:hover {
    opacity: 1;
}

input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="search"], input[type="password"], input[type="number"],
input[type="tel"], textarea.form-control {
    border-radius: 0;
    transition: .3s;
    box-shadow: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, .03);
    border: 0 solid transparent;
    color: rgba(0, 0, 0, .6);
    outline: none !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: .75rem;
    padding-right: .75rem;
    width: 100%;
    height: inherit;
    font-size: .875rem;
}

input[type="text"]:active, input[type="text"]:focus, input[type="email"]:active,
input[type="email"]:focus, input[type="date"]:active, input[type="date"]:focus,
input[type="time"]:active, input[type="time"]:focus, input[type="search"]:active,
input[type="search"]:focus, input[type="password"]:active,
input[type="password"]:focus, input[type="number"]:active,
input[type="number"]:focus, input[type="tel"]:active, input[type="tel"]:focus,
textarea.form-control:active, textarea.form-control:focus {
    box-shadow: none;
    background-color: rgba(0, 0, 0, .06);
    border-color: #fff;
}

input[type="text"]:hover, input[type="email"]:hover, input[type="date"]:hover,
input[type="time"]:hover, input[type="search"]:hover,
input[type="password"]:hover, input[type="number"]:hover,
input[type="tel"]:hover, textarea.form-control:hover {
    box-shadow: none;
    background-color: rgba(0, 0, 0, .06);
}

form.has-background {
    border-radius: .3125rem;
    background-color: rgba(0, 0, 0, .3);
    padding: 1.25rem;
}

form.submitted .status {
    transform: scale(1);
}

form.submitted .form-group, form.submitted .input-group {
    pointer-events: none;
}

form .status {
    transform: scale(.1);
    transition: .4s ease;
    top: -1.25rem;
    right: -1.25rem;
    position: absolute;
}

form .status .status-icon {
    border-radius: 50%;
    transition: .4s ease;
    width: 2.5rem;
    height: 2.5rem;
    background-color: grey;
    color: #fff;
    text-align: center;
    line-height: 2.5rem;
}

form .status .status-icon.valid {
    background-color: #50aa8d;
}

form .status .status-icon.invalid {
    background-color: #e45544;
}

form .status i {
    font-size: 1.125rem;
}

.form ::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form :-moz-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form ::-moz-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form :-ms-input-placeholder {
    color: rgba(0, 0, 0, .3);
}

.input-group {
    box-shadow: .0625rem .0625rem .5rem rgba(0, 0, 0, .07);
    border-radius: 3.125rem;
    width: 100%;
    overflow: hidden;
}

.input-group .input-group-btn {
    position: absolute;
    height: 100%;
    right: 0;
    width: auto;
    z-index: 5;
}

.input-group .input-group-btn .btn {
    transform: scale(.8);
    border-radius: 100%;
    transition: .4s ease;
    border: .1875rem solid rgba(0, 0, 0, .03);
    background-color: transparent;
    height: 100%;
    outline: none !important;
    width: 5rem;
    font-size: 1.5rem;
}

.input-group .input-group-btn .btn:hover {
    background-color: rgba(0, 0, 0, .03);
}

.input-group input[type="text"], .input-group input[type="email"],
.input-group input[type="date"], .input-group input[type="time"],
.input-group input[type="search"], .input-group input[type="password"],
.input-group input[type="number"], .input-group input[type="tel"],
.input-group textarea.form-control {
    border-radius: 0;
    transition: .3s;
    box-shadow: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: .125rem solid #fff;
    color: rgba(0, 0, 0, .6);
    outline: none !important;
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
    width: 100%;
    height: inherit;
    font-size: 1.125rem;
}

.input-group input[type="text"]:active, .input-group input[type="text"]:focus,
.input-group input[type="email"]:active, .input-group input[type="email"]:focus,
.input-group input[type="date"]:active, .input-group input[type="date"]:focus,
.input-group input[type="time"]:active, .input-group input[type="time"]:focus,
.input-group input[type="search"]:active,
.input-group input[type="search"]:focus,
.input-group input[type="password"]:active,
.input-group input[type="password"]:focus,
.input-group input[type="number"]:active,
.input-group input[type="number"]:focus, .input-group input[type="tel"]:active,
.input-group input[type="tel"]:focus, .input-group textarea.form-control:active,
.input-group textarea.form-control:focus {
    box-shadow: none;
    background-color: #fff;
    border-color: #fff;
}

.input-group input[type="text"]:hover, .input-group input[type="email"]:hover,
.input-group input[type="date"]:hover, .input-group input[type="time"]:hover,
.input-group input[type="search"]:hover,
.input-group input[type="password"]:hover,
.input-group input[type="number"]:hover, .input-group input[type="tel"]:hover,
.input-group textarea.form-control:hover {
    box-shadow: none;
    background-color: #fff;
}

.form-group .btn {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

/* -- Header */

.page-wrapper header {
    position: fixed;
    z-index: 999;
    padding: 1.875rem;
    display: table;
    width: 100%;
    pointer-events: none;
}

.page-wrapper header .brand {
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    pointer-events: auto;
}

.page-wrapper header nav {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.page-wrapper header nav .navigation li {
    display: inline-block;
}

.page-wrapper header nav .navigation li a {
    padding: .3125rem .375rem;
    font-weight: bold;
    text-transform: uppercase;
    font-size: .75rem;
    pointer-events: auto;
}

/* -- Magnific Popup */

.mfp-wrap {
    z-index: 2000;
}

.mfp-bg {
    z-index: 1999;
}

/* -- Map */

#map {
    height: 12.5rem;
    width: 100%;
}

/* -- Modal */

.modal {
    text-align: center;
}

.modal.fade .modal-dialog {
    transform: translate(0, 0) scale(.95);
}

.modal.fade.in .modal-dialog {
    transform: translate(0, 0) scale(1);
}

.modal-dialog {
    width: auto;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    max-width: 100%;
}

.modal-dialog .modal-content {
    border-radius: 0;
    border: none;
}

.modal-dialog .modal-content h2 {
    font-size: 2.25rem;
    font-weight: bold;
}

.modal-dialog .modal-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1.875rem;
}

.modal-dialog .modal-content .modal-header {
    border-bottom: none;
    padding: 4.0625rem 2.8125rem;
}

.modal-dialog .modal-content .modal-header .close {
    opacity: 1;
    background-color: #fff;
    padding: .625rem .875rem;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
}

.modal-dialog .modal-content .modal-body {
    padding: 2.1875rem 2.8125rem;
}

/* -- Page Wrapper */

.page-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* -- Parallax */

.parallax {
    position: absolute;
    bottom: 0;
    list-style: none;
    margin-bottom: 0;
}

.parallax img {
    max-width: inherit;
    width: auto;
    position: absolute;
    bottom: 0;
}

/* -- Person */

.person h4 {
    margin-bottom: .3125rem;
}

.person h5 {
    opacity: .7;
    margin-top: .3125rem;
}

.person .image {
    border-radius: 100%;
    height: 7.5rem;
    width: 7.5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
}

/* -- Skill */

.skill {
    position: relative;
    margin-bottom: 2.5rem;
}

.skill h4 {
    font-size: .875rem;
    text-transform: uppercase;
}

.skill aside {
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
}

.skill .bar {
    position: relative;
}

.skill .bar .bar-active, .skill .bar .bar-background {
    height: .125rem;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

.skill .bar .bar-background {
    opacity: .2;
    width: 100%;
}

/* -- Social Icons */

.social-icons a {
    color: #000;
    padding: .3125rem;
    display: inline-block;
}

/* -- Work */

.work {
    display: block;
    position: relative;
    margin-bottom: 1.875rem;
}

.work .description {
    position: absolute;
    bottom: .625rem;
    z-index: 2;
    left: .625rem;
}

.work .description h4 {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: .125rem;
    margin-top: 0;
    background-color: #fff;
    padding: .125rem;
    display: inline-block;
}

.work .description h5 {
    font-size: .875rem;
    margin-bottom: 0;
    margin-top: 0;
    background-color: #fff;
    padding: .125rem;
}

.work .image {
    position: relative;
    height: 13.75rem;
    z-index: 1;
}

@media screen and (min-width: 48rem) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}