/*----------------------------------------------------------------------------------------------------------------------
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: 0.4s ease;
  outline: none !important;
  color: #000;
}

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

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

dl dt {
  float: left;
}

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

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

h2 {
  font-size: 1.5rem;
}

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

h5 {
  font-size: 0.875rem;
}

p {
  opacity: 0.6;
}

img {
  width: 180px;
}

section {
  margin-bottom: 2.5rem;
}

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

/* Animate */

.animate {
  transition: 0.6s;
  opacity: 0;
  transform: scale(0.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: 0.4;
  font-size: 0.75rem;
  margin: 0.5rem 0;
}

.shadow {
  box-shadow: 0 0.0625rem 0.625rem rgba(0, 0, 0, 0.07);
}

.font-size-10 {
  font-size: 0.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: 0.9;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-19 {
  opacity: 0.19;
}

.opacity-18 {
  opacity: 0.18;
}

.opacity-17 {
  opacity: 0.17;
}

.opacity-16 {
  opacity: 0.16;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-14 {
  opacity: 0.14;
}

.opacity-13 {
  opacity: 0.13;
}

.opacity-12 {
  opacity: 0.12;
}

.opacity-11 {
  opacity: 0.11;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-9 {
  opacity: 0.09;
}

.opacity-8 {
  opacity: 0.08;
}

.opacity-7 {
  opacity: 0.07;
}

.opacity-6 {
  opacity: 0.06;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-4 {
  opacity: 0.04;
}

.opacity-3 {
  opacity: 0.03;
}

.opacity-2 {
  opacity: 0.02;
}

.opacity-1 {
  opacity: 0.01;
}

.opacity-0 {
  opacity: ;
}

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

/* Background */

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

/* -- Box */

.box {
  margin-bottom: 1.875rem;
}

.box .icon {
  margin-top: 0.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: 0.5;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* -- Footer */

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

footer .social-icons a {
  opacity: 0.5;
  color: #000;
  padding: 0.3125rem 0.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: 0.3s;
  box-shadow: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.03);
  border: 0 solid transparent;
  color: rgba(0, 0, 0, 0.6);
  outline: none !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  height: inherit;
  font-size: 0.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, 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, 0.06);
}

form.has-background {
  border-radius: 0.3125rem;
  background-color: rgba(0, 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(0.1);
  transition: 0.4s ease;
  top: -1.25rem;
  right: -1.25rem;
  position: absolute;
}

form .status .status-icon {
  border-radius: 50%;
  transition: 0.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, 0.3);
}

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

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

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

.input-group {
  box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0, 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(0.8);
  border-radius: 100%;
  transition: 0.4s ease;
  border: 0.1875rem solid rgba(0, 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, 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: 0.3s;
  box-shadow: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 0.125rem solid #fff;
  color: rgba(0, 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: 0.875rem;
  padding-bottom: 0.875rem;
}

/* -- Header */

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

body {
  background-color: #f3f3f3;
}
.iconDiv div {
  background: black;
  padding: 10px;
  border-radius: 10px;
}
.iconDiv img {
  border-radius: 6px;
}