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

Project: 	Selene - Responsive Coming Soon Template
Info:		https://themeforest.net/item/selene-responsive-coming-soon-template/19231691
Version: 	1.0
Author:		AthenaStudio
Profile:	https://themeforest.net/user/athenastudio

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

	1.	General
	2.	Clear floats
	3.	Grid
	4.	Form
	5.	Placeholder
	6.	Responsive images
	7.	Custom text styles
	8.	Icons
	9.	Page loader
	10.	Basic structure
	11.	Background overlay
	12.	Logo
	13.	Countdown
	14.	Newsletter
	15.	Social
	16.	Modal toggle
	17.	Modal / About
	18.	No JS
		
=============================================================*/

/*********************
    - 1. General -
*********************/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	display:block;
}

audio, canvas, video {
	display:inline-block;
}

audio:not([controls]) {
	display:none;
	height:0;
}

[hidden] {
	display:none;
}

html {
	font-size:100%;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
		-ms-text-size-adjust:100%;	
}

html, body {
	height:100%;
}

html, button, input, textarea {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
}

body {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	color:#5c5857;
	line-height:1.75;
	margin:0;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a:active, a:focus, a:hover {
	outline:0;
}

h1, h2, h3, h4 {
	color:#343434;
	font-weight:400;
	line-height:1.16667;
	margin:0 0 28px;
	text-align:center;
}

h1 {
	font-size:40px;
	text-transform:uppercase;
}

h2 {
	font-size:30px;
}

h3 {
	font-size:24px;
}

h4 {
	font-size:18px;
}

b, strong {
	font-weight:700;
}

i, em {
	font-style:italic;
}

p {
	margin:0 0 28px;
}

ul, ol {
	margin:0 0 28px;
	padding:0 0 0 24px;
}

ul {
	list-style:disc;
}

ol {
	list-style:decimal;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
	content:none;
}

img {
	border:0;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic;
}

form {
	margin:0;
}

button, input, textarea {
	border-radius:0;
	font-size:14px;
	margin:0;
	max-width:100%;
	vertical-align:baseline;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box;
}

button, input {
	line-height:normal;
}

button, input[type="submit"] {
	-webkit-appearance:button;
	cursor:pointer;
}

textarea {
	overflow:auto;
	vertical-align:top;
}

/**************************
    - 2. Clear floats -
**************************/
.row:afterr { 
	clear:both; 
}

.row:before, .row:after { 
	content:""; 
	display:table; 
}

/******************
    - 3. Grid -
******************/
.row {
	margin-left:-48px;
}

.one-half {
	float:left;
	padding-left:48px;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box;
}

.one-half {
	width:50%;
}

/******************
    - 4. Form -
******************/
input {
	background:#6e6e6e;
	background:rgba(169,169,169,0.3);
	border:1px solid #6e6e6e;
	color:#fff;
	font-weight:700;
	letter-spacing:1px;
	padding:6px 12px;
	text-transform:uppercase;
	-webkit-border-raius:3px 0 0 3px;
	   -moz-border-raius:3px 0 0 3px;
			border-raius:3px 0 0 3px;
}

input:focus {
	outline:0;
}

button, input[type="submit"] {
	-webkit-transition:all 0.3s;
	   -moz-transition:all 0.3s;
			transition:all 0.3s;
}

button:hover, button:focus,
input[type="submit"]:focus, input[type="submit"]:hover {
	color:#dadada;
	outline:0;
}

.form-field {
	position:relative;
}

.form-field label {
	font-size:14px;
}

.form-field span.error {
	position:absolute;
	top:45px;
	color:#fff;
	font-size:10px;
	padding:2px 10px;
	text-transform:uppercase;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
}

.form-wrap .success {
	color:#dadada;
	min-height:42px;
	text-align:center;
}

/*************************
    - 5. Placeholder -
*************************/
::-webkit-input-placeholder {
	color:#a9a9a9;
}

::-moz-placeholder {
	color:#a9a9a9;
	opacity:1;
}

.placeholder {
	color:#a9a9a9;
}

/*******************************
    - 6. Responsive images -
*******************************/
.wrap img {
	height:auto;
	max-width:100%;
}

/********************************
    - 7. Custom text styles -
********************************/
h1.title > span {
	font-weight:700;
}

.slogan {
	font-size:18px;
	text-align:center;
}

.subtitle {
	font-size:14px;
	letter-spacing:1px;
	margin:28px 0;
	text-align:center;
	text-transform:uppercase;
}

.row h2 {
	font-size:24px;
	margin-bottom:14px;
	text-align:left;
}

/*******************
    - 8. Icons -
*******************/
.social a, 
.modal-toggle i {
	color:#f7f7f7;
	display:inline-block;
	font-size:18px;
	width:36px;
	height:36px;
	line-height:36px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
			transition:all 0.3s ease;
}

.row h2 i {
	font-size:18px;
	line-height:1.55556;
	margin-right:10px;
}

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

.page-loader .progress {
	margin:-12em 0 0 -12em;
	width:50px;
	height:50px;
	font-size:2px;
	position:absolute;
	text-indent:-9999em;
	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;
	-webkit-transform:translateZ(0);
	   -moz-transform:translateZ(0);
			transform:translateZ(0);
	-webkit-animation:preloader 0.7s infinite linear;
	   -moz-animation:preloader 0.7s infinite linear;
			animation:preloader 0.7s infinite linear;
}

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

.page-loader.overlay {
	background:rgba(0, 0, 0, 0.5);
}

.page-loader.overlay .progress {
	background:transparent;	
}

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

/******************************
    - 10. Basic structure -
******************************/
.wrap {
	position:relative;
	min-height:100%;
	z-index:99;
}

.inner {
	margin:0 auto;
	padding:42px 24px;
}

#main {
	position:relative;
}

#main .inner {
	max-width:816px;
	padding-bottom:84px;
	padding-top:170px;
}

/*********************************
    - 11. Background overlay -
*********************************/
.body-bg {
	background:rgb(255 255 255 / 81%) ;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:98;
}

/********************
    - 12. Logo -
********************/
.logo {
	    font-size: 45px;
    margin-bottom: 40px;
    font-weight: bolder;
}

/************************
    - 13. Countdown -
************************/
.countdown-row {
	display:block;
	text-align:center;
}

.countdown-section {
	border-left:1px dotted #343434;
	border-color:#343434;
	color:#343434;
	display:inline-block;
	font-size:12px;
	line-height:12px;
	padding:3px 12px 10px;
	text-align:center;
	text-transform:uppercase;
	width:25%;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box;
}

.countdown-section:first-child {	
	border-left:0;
}

.countdown-amount {
	color:#343434;
	display:block;
	font-weight:700;
	font-size:60px;
	line-height:1;
	padding-bottom:5px;
}

/*************************
    - 14. Newsletter -
*************************/
#newsletter {
	margin:0 auto;
	max-width:448px;	
}

#newsletter-form {
	position:relative;
}

#newsletter-form .form-field {
	margin-right:150px;
}

#newsletter-form .form-submit {
	height:42px;
	position:absolute;
	right:0;
	top:0;
	width:150px;
}

#email, #submit {
	display:block;
	height:42px;
	width:100%;
}

#email {
	border-right:0;
	-webkit-border-radius:3px 0 0 3px;
	   -moz-border-radius:3px 0 0 3px;
			border-radius:3px 0 0 3px;
}

#submit {
	border:0;
	-webkit-border-radius:0 3px 3px 0;
	   -moz-border-radius:0 3px 3px 0;
			border-radius:0 3px 3px 0;
}

/*********************
    - 15. Social -
*********************/
.social {
	margin:28px 0 0;
}

.social ul {
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
}

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

/***************************
    - 16. Modal toggle -
***************************/
#main .modal-toggle {
	position:fixed;
	display:block;
	top:50%;
	right:100px;
	width:34px;
	height:34px;
	vertical-align:middle;
	color:#fff;
	border:2px solid #fff;
	    display: none;
	text-align:center;
	-webkit-border-radius:999px;
	   -moz-border-radius:999px;
	   		border-radius:999px;
	-webkit-transition:all 0.3s;
	   -moz-transition:all 0.3s;
			transition:all 0.3s;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		 -o-transform:translateY(-50%);
			transform:translateY(-50%);
}

#main .modal-toggle i {
	font-size:22px;
	line-height:34px;
}

#main .modal-toggle:hover {
	right:98px;
	background-color:#fff;
	width:40px;
	height:40px;
}

#main .modal-toggle:hover i {
	font-size:28px;
	line-height:40px;
}

/****************************
    - 17. Modal / About -
****************************/
#modal .title {
	margin-bottom:42px;
}

#modal {
	background:#000;
	background:rgba(0,0,0,0.9);
	display:none;
	left:0;
	min-height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:997;
}

#modal .inner {
	max-width:612px;
}

#modal .modal-toggle {
	margin-bottom:28px;
	text-align:center;
}

#modal #modal-close i {
	font-size:20px;
	line-height:20px;
}

/********************
    - 18. No JS -
********************/
.no-js #timer,
.no-js .modal-toggle,
.no-js .page-loader {
	display:none;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#3d3f3d96; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #e0e1e1; 
}



@import url(https://fonts.googleapis.com/css?family=Poiret+One);

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root, html, body {
  font-family: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  
  color:#343434;
}
h1 {
  text-align: center;
  margin: 1rem auto 1rem;
  font-weight: normal;
}
p {
  margin: 1rem;
}
.row {
  width: 80%;
  height: 150px;
  margin: 2rem auto;
}
.cell {
  display: inline-block;
  width: 49%;
  text-align: center;
}
.circle {
  display: inline-block;
  
 

}
.square {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: whiteSmoke;
  box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;
}

.loader {
  background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);
  animation: spin 1s infinite linear;
}
.loader:before {
  display: block;
  content: '';
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: #222;
  border-radius: 50%;
}

.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.spin {
  animation: spin 1s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.elastic-spin {
  animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

.flash {
  animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.grow {
  animation: grow 2s ease infinite;
}
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fade-in {
  animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.swing {
	transform-origin: top center;
	animation: swing 2s ease infinite;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.fade-in-down {
  animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-left {
  animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-out-down {
  animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fade-out-right {
  animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.bounce-in {
  animation: bounce-in 2s ease infinite;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bounce-in-right {
  animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.bounce-out {
  animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
  0% { transform: scale(1); }
  25% { transform: scale(.95); }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(.3);
  } 
}

.bounce-out-down {
  animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.hinge {
  animation: hinge 2s ease infinite;
}
@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(700px); opacity: 0; }
}

.roll-in {
  animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}

.roll-out {
  animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
    0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}