/* ------------------------------------------------
 Author: ArtStyles
 URL: http://themeforest.net/user/artstyles
 
 Template Name: Artico - Creative Coming Soon Template
 Version: 1.0
------------------------------------------------ */

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

 - General Styles
 - Typography
 - Main Intro
 - Clouds
 - Countdown
 - Rocket
 - Overlay style
 - Nav Overlay
 - About
 - Contact
 - Social Buttons
 - Animations
 - Responsive Styles
 
------------------------------------------------ */


/* ---------------------------
    - General Styles
--------------------------- */
html, body {
    height: 100%;
	overflow: hidden;
}
body {
	background: #fff;
	color: #394655;
    font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;	
    line-height: 24px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* ---------------------------
    - General Styles
--------------------------- */
h1 {
	font-family: 'Roboto Slab', serif;
    font-size: 56px;
	font-weight: 700;
    line-height: 58px;
    margin-top: 36px;
    margin-bottom: 24px;  
}
h2 {
	font-family: 'Roboto Slab', serif;
    font-size: 46px;
    font-weight: 700;	
    line-height: 48px;
    margin-top: 38px;
    margin-bottom: 24px;
}
h3 {
	font-family: 'Roboto Slab', serif;
    font-size: 36px;
    line-height: 38px;
    margin-top: 30px;
    margin-bottom: 24px;
}
h4 {
	font-family: 'Roboto Slab', serif;
    font-size: 28px;
    line-height: 30px;
    margin-top: 28px;
    margin-bottom: 24px;
}
h5 {
	font-family: 'Roboto Slab', serif;
    font-size: 24px;
    line-height: 26px;
    margin-top: 26px;
    margin-bottom: 24px;
}
h6 {
	font-family: 'Roboto Slab', serif;
    font-size: 18px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}
p {
    margin-top: 14px;
    margin-bottom: 24px;
}

::-moz-selection { background: #858b9b; color: #fff; }
	 ::selection { background: #858b9b; color: #fff; }

	 
/* ---------------------------
    - Main Intro
--------------------------- */
#intro {
	background: #222e3c;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#particles-js {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	top: 0;
}
.scene, .layer {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
.title {
	color: #F2ECE8;
}
.title-details {
	font-size: 18px;
	color: #F2ECE8;
}

/* ---------------------------
    - Clouds
--------------------------- */
div[class^="cloud-group"] {
	position: absolute;
	opacity: 0.4;	
}
.cloud-group-1.cloud-1 {
	top:10%;
	left: 10%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;
}
.cloud-group-1.cloud-2 {
	top: 50%;
	left: 20%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;
}
.cloud-group-1.cloud-3 {
	top: 35%;
	left: 10%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;
}
.cloud-group-1.cloud-4 {
	top: 40%;
	left: 80%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;
}
.cloud-group-1.cloud-5 {
	top: 10%;
	left: 50%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;	
}
.cloud-group-1.cloud-6 {
	top: 80%;
	left: 80%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;	
}
.cloud-group-1.cloud-7 {
	top: 80%;
	left: 10%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;	
}
.cloud-group-1.cloud-8 {
	top: 40%;
	left: 50%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;	
}

.cloud-group-2.cloud-1 {
	top:10%;
	left: 10%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;		
}
.cloud-group-2.cloud-2 {
	top: 50%;
	left: 20%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;		
}
.cloud-group-2.cloud-3 {
	top: 35%;
	left: 10%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;		
}
.cloud-group-2.cloud-4 {
	top: 40%;
	left: 80%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;		
}
.cloud-group-2.cloud-5 {
	top: 10%;
	left: 50%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;		
}
.cloud-group-2.cloud-6 {
	top: 80%;
	left: 80%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;		
}
.cloud-group-2.cloud-7 {
	top: 80%;
	left: 10%;
	-webkit-animation: motionCloud 3s 0.1s infinite linear;
	   -moz-animation: motionCloud 3s 0.1s infinite linear;
		    animation: motionCloud 3s 0.1s infinite linear;		
}
.cloud-group-2.cloud-8 {
	top: 40%;
	left: 50%;
	-webkit-animation: motionCloud 2s 0.1s infinite linear;
	   -moz-animation: motionCloud 2s 0.1s infinite linear;
		    animation: motionCloud 2s 0.1s infinite linear;		
}

.cloud-1 img, .cloud-6 img {
	width: 290px;
}
.cloud-2 img, .cloud-7 img {
	width: 180px;
}
.cloud-3 img, .cloud-8 img {
	width: 180px;
}
.cloud-4 img {
	width: 290px;
}
.cloud-5 img {
	width: 242px;
}

.bottom-clouds-white {
	background-image: url(../images/bottom-clouds-white.svg);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 80%;
	height: 175px;
	width: 100%;
	position: absolute;
	bottom: 0;
}
.bottom-clouds {
	background-image: url(../images/bottom-clouds.svg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 50%;
	height: 100%;
	width: 100%;
	opacity: 0.5;
}

/* ---------------------------
    - Countdown
--------------------------- */
#countdown_dashboard {
	padding: 30px 0 0;
}
.dash {
	color: #F2ECE8;
	display: inline-block;
	min-width: 100px;
	height: 120px;
	padding: 20px 10px;
	position: relative;
	text-align: center;
}
.dash .digit {
	font-family: 'Roboto Slab', serif;
	font-size: 68px;
	line-height: 50px;
}
.dash_title {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	left: 0;
	font-size: 14px;
	text-transform: uppercase;
}

/* ---------------------------
    - Rocket
--------------------------- */
.rocket {
	height: 300px;	
 	margin: 30px auto 0;
	position: relative;
	width: 300px;
	z-index: 2;
	-webkit-animation: animation-rocket linear 1.5s infinite both;
            animation: animation-rocket linear 1.5s infinite both;
}
.smoke-rocket {
	margin: 0 auto;
	position: relative;
	width: 400px;
	z-index: 1;
}
.rocket img,
.smoke-rocket img {
	width: 100%;
}

/* ---------------------------
    - Overlay style
--------------------------- */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.9);
}
.overlay .overlay-close {
	background-color: #fff;
 	background-image: url(../images/icon-close-overlay.svg);
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
	color: transparent;
	height: 60px;
	outline: none;
	position: absolute;
	right: 30px;
	top: 20px;
	text-indent: 200%;
	width: 60px;
	z-index: 10;
	transform:rotate(45deg);
	-webkit-transition: -webkit-transform 0.3s;
	        transition: transform 0.3s;

}
.overlay .overlay-close:hover {
	background-image: url(../images/icon-close-overlay-hover.svg);
	transform:rotate(0deg);
}
.overlay .container-fluid {
 	overflow: hidden;
	height: 100%;
}
.overlay .row-height {
	height: 100%;
}
.overlay .col-right {
	padding: 60px 30px 30px;
    height: 100%;
    overflow: auto;
}
.title-page {
	padding-bottom: 20px;
	position: relative;
}	
.title-page:before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #858b9b;
    width: 100px;
    bottom: 0;	
}
.title-content {
	border-bottom: 1px solid #858b9b;
	padding-bottom: 20px;
}

/* Effects */
.intro {
 	overflow-x: hidden;
	-webkit-transition: -webkit-transform 0.5s;
	        transition: transform 0.5s;	
}
.intro.overlay-left-open {
	-webkit-transform: translateX(50%);
	        transform: translateX(50%);
}
.intro.overlay-right-open {
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.intro::after {
	content: '';
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,112,235,0.6);
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	        transition: opacity 0.5s, visibility 0s 0.5s;
}
.intro.overlay-left-open::after,
.intro.overlay-right-open::after  {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	        transition: opacity 0.5s;
}
.overlay-contentpush-left,
.overlay-contentpush-right {
	background: rgba(255,255,255,1);
 	visibility: hidden;
 	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
	        transition: transform 0.5s, visibility 0s 0.5s;
}
.overlay-contentpush-left {
 	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
}
.overlay-contentpush-right {
  	-webkit-transform: translateX(100%);
	        transform: translateX(100%);   	
}	
.overlay-contentpush-left.open-ov,
.overlay-contentpush-right.open-ov {
	visibility: visible;
	-webkit-transform: translateX(0%);
	        transform: translateX(0%);
	-webkit-transition: -webkit-transform 0.5s;
	        transition: transform 0.5s;
}

/* ---------------------------
    - Nav Overlay
--------------------------- */
.nav-overlay span {
	background: #fff;
	cursor: pointer;
	height: 60px;
	margin-top: auto;
	margin-bottom: auto;
	padding: 18px 30px;
	position: absolute;
	top: 0;
	bottom: 0;	
	text-transform: uppercase;
	width: 160px;
	z-index: 1;
}
.nav-overlay #trigger-overlay-contact {
	right: 0;
	text-align: right;
}	
.nav-overlay span:after {
	content: '';
	background: #f46b85;	
	position: absolute;
	height: 100%;	
	width: 0%;
	top: 0;
	z-index: -1;	
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	        transition: all 0.3s;	
}
.nav-overlay #trigger-overlay-about:after {
    left: 0;
}
.nav-overlay #trigger-overlay-contact:after {
    right: 0;
}
.nav-overlay span:before {
	content: '';
	position: absolute;
	background: #fff;
	height: 100%;	
	width: 100%;	
	top: 0;
	left: 0;
	z-index: -2;	
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	        transition: all 0.3s;	
}
.nav-overlay span:hover,
.nav-overlay span:active {
	color: #fff;
}
.nav-overlay span:hover:after,
.nav-overlay span:active:after {
	width: 100%;
}

/* ---------------------------
    - About
--------------------------- */
.col-left-about {
    background-image: url(../images/bg_col_about.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100%;
	padding: 80px 30px 30px;

}
.col-left-overlay {
	background-color: rgba(57,70,85,0.3);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.skills {
    margin-top: 60px;
	margin-bottom: 60px;
}
.progress {
	background-color: #eee;
	box-shadow: none;
	border-radius: 0;
	height: 4px;
    margin-bottom: 24px;
}
.progress-bar {
	background-color: #f46b85;
	box-shadow: none;
}

.row-features {
    margin-top: 60px;	
}
.row-features div[class^="col-"] {
	padding: 30px;
}
.row-features img {
	width: 50%;
}

/* ---------------------------
    - Contact
--------------------------- */
.col-map {
	height: 100%;
	padding: 0;
}
.map {
	height: 100%;
	width: 100%;
}
input[type="text"],
input[type="email"],
textarea.style-textarea {
	background: transparent;
	color: #394655;
	border-bottom: 2px solid #394655;
	border-top: 0;	
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	font-size: 20px;
	font-weight: 700;
	box-shadow: none;
	-webkit-transition: background 0.3s, border-bottom 0.3s;
	        transition: background 0.3s, border-bottom 0.3s;	
}
input[type="text"],
input[type="email"] {
	height: 60px;
	padding: 6px 20px;	
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea.style-textarea:focus {
	background: #b8bdc9;
	border-color: #b8bdc9;
	border-radius: 0;
	box-shadow: none;
	-webkit-transition: background 0.3s, border-bottom 0.3s;
	        transition: background 0.3s, border-bottom 0.3s;		
}
textarea.style-textarea {
	padding: 20px;
	resize: none;
	overflow: auto;
	-ms-overflow-style: none;
    outline: none;
}
.has-error .form-control,
.has-error .form-control:focus {
	background: #f46b85;
	border-bottom: 2px solid #f46b85;
	box-shadow: none;
	-webkit-transition: background 0.3s, border-bottom 0.3s;
	        transition: background 0.3s, border-bottom 0.3s;	
}
.style-label,
.has-error .form-control.style-label {
	background: transparent;
	border:0;
	box-shadow: none;
	color: #394655;
    padding: 10px 0 0 20px;
}
.has-error .form-control.style-label {
	color: #f46b85;
}	
.help-block.with-errors {
    color: #f46b85;
	font-size: 12px;
    padding: 6px 20px 0 0;
    margin: 0;	
}
.help-block.with-errors ul {
    margin: 0;	
}
.btn-style,
.btn-style.disabled {
	background: #fff;
	border: 2px solid #394655;
	border-radius: 0 0px 0 0px;
	color: #394655;		
	font-size: 16px;
	font-weight: 700;
	height: 60px;
	margin-bottom: 30px;
	opacity: 1;
	position: relative;
	text-transform: uppercase;
	-webkit-transition: border 0.3s, color 0.3s;
	        transition: border 0.3s, color 0.3s;	
}
.btn-style:hover,
.btn-style:focus,
.btn-style:active,
.btn-style:active:focus {
 	border: 2px solid #858b9b;
	color: #858b9b;
    outline: none;
}
.style-text-danger,
.style-text-success {
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.style-text-danger {
	color: #f46b85;	
}
.style-text-success {
	color: #42a24b;	
}

/* ---------------------------
    - Social Buttons
--------------------------- */
.social-buttons {
	border-top: 1px solid #eee;
	margin-top: 30px;
	padding-top: 30px;
}
.social-buttons li {
	padding: 0 20px;
}
.social-buttons li a {
	color: #394655;
	font-size: 18px;
	-webkit-transition: color 0.3s;
	        transition: color 0.3s;	
}
.social-buttons li a:hover {
	color: #f46b85;
}

/* ---------------------------
    - Animations
--------------------------- */
@-webkit-keyframes animation-rocket {
  0% {
    -webkit-transform: translate(0px,0px);
  }
  15% {
    -webkit-transform: translate(0px,-35px);
  }
  30% {
    -webkit-transform: translate(0px,0px);
  }
  45% {
    -webkit-transform: translate(0px,-15px);
  }
  60% {
    -webkit-transform: translate(0px,0px);
  }
  75% {
    -webkit-transform: translate(0px,-5px);
  }
  100% {
    -webkit-transform: translate(0px,0px);
  }
}

@-moz-keyframes animation-rocket{
  0% {
    -moz-transform: translate(0px,0px);
  }
  15% {
    -moz-transform: translate(0px,-25px);
  }
  30% {
    -moz-transform: translate(0px,0px);
  }
  45% {
    -moz-transform: translate(0px,-15px);
  }
  60% {
    -moz-transform: translate(0px,0px);
  }
  75% {
    -moz-transform: translate(0px,-5px);
  }
  100% {
    -moz-transform: translate(0px,0px);
  }
}

@keyframes animation-rocket{
  0% {
    transform: translate(0px,0px);
  }
  15% {
    transform: translate(0px,-35px);
  }
  30% {
    transform: translate(0px,0px);
  }
  45% {
    transform: translate(0px,-15px);
  }
  60% {
    transform: translate(0px,0px);
  }
  75% {
    transform: translate(0px,-5px);
  }
  100% {
    transform: translate(0px,0px);
  }
}

@-webkit-keyframes motionCloud {
  0% {
    transform:  translate(0px,25px);
  }
  25% {
    transform:  translate(0px,0px);
  }
  50% {
    transform:  translate(0px,-25px);
  }
  100% {
    transform:  translate(0px,25px);
  } 
}

@-moz-keyframes motionCloud {
  0% {
    transform:  translate(0px,25px);
  }
  25% {
    transform:  translate(0px,0px);
  }
  50% {
    transform:  translate(0px,-25px);
  }
  100% {
    transform:  translate(0px,25px);
  } 
}

@keyframes motionCloud {
  0% {
    transform: translate(0px,25px);
  }
  25% {
    transform: translate(0px,0px);
  }
  50% {
    transform: translate(0px,-25px);
  }
  100% {
    transform: translate(0px,25px);
  } 
}

/* ---------------------------
    - Responsive Styles
--------------------------- */	
/* Descktop 900px height */
@media only screen and (max-height: 900px) {
    .rocket {
	    height: 220px;
 	    margin: 40px auto 0;
	    width: 220px;
    }		
    .smoke-rocket {
	    margin: 0 auto;
	    width: 280px;
    }	
}

/* Small laptop height */
@media only screen and (max-height: 768px) {
    #countdown_dashboard {
	    padding-top: 20px;
    }	
    .dash {
	    height: 85px;
		min-width: 100px;
	    padding: 20px 4px;
    }
    .dash .digit {
	    font-size: 48px;
   	    line-height: 38px;
    }
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 42px;
		line-height: 48px;
        margin-top: 10px;	
		margin-bottom: 0px;
	}	
    .rocket {
	    height: 220px;
 	    margin: 20px auto 0;
	    width: 220px;
    }		
    .smoke-rocket {
	    margin: 0 auto;
	    width: 280px;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 60%;
    }
}

/* Small laptop */
@media only screen and (max-width: 767px) {	
    .rocket {
	    height: 220px;
 	    margin: 20px auto 0;
	    width: 220px;
    }		
    .smoke-rocket {
	    margin: 0 auto;
	    width: 250px;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 100%;
    }		
   	.overlay .row-height {
	    height: 100%;
		overflow: auto;
    }
    .col-left-about {
        height: 500px;		
	}
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
	}
    .col-map {
	    height: 500px;
    }
}

/* Tablets landscape */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
    .rocket {
	    height: 220px;
 	    margin: 20px auto 0;
	    width: 220px;
    }
}

/* Small Tablets landscape */
@media only screen and (max-device-width: 736px) and (orientation: landscape) {
    #countdown_dashboard {
	    padding: 0px;
    }	
    .dash {
	    height: 85px;
		min-width: 68px;
	    padding: 20px 4px;
    }
    .dash .digit {
	    font-size: 34px;
   	    line-height: 38px;
    }
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 38px;
		line-height: 42px;
        margin-top: 10px;	
		margin-bottom: 0px;
	}	
    .rocket {
	    height: 160px;
 	    margin: 10px auto 0;
	    width: 160px;
    }
    .smoke-rocket {
	    display: none;
    }	
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 60%;
    }
    .cloud-1 img, .cloud-6 img {
	    width: 145px;
    }
    .cloud-2 img, .cloud-7 img {
	    width: 90px;
    }
    .cloud-3 img, .cloud-8 img {
	    width: 90px;
    }
    .cloud-4 img {
	    width: 145px;
    }
    .cloud-5 img {
	    width: 121px;
    }
    .nav-overlay span {
	    height: 42px;
	    padding: 10px 10px;
		width: 120px;
        text-align: center;
    }	
    .nav-overlay #trigger-overlay-contact {
	    text-align: center;
    }
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
    .col-left-about {
        height: 300px;		
	}
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
		overflow: hidden;
	}	
    .col-map {
	    height: 300px;
    }	
}

/* Phones landscape */
@media only screen and (max-width: 667px) and (orientation: landscape) { 
    #countdown_dashboard {
	    padding: 0px;
    }	
    .dash {
	    height: 85px;
		min-width: 68px;
	    padding: 20px 4px;
    }
    .dash .digit {
	    font-size: 40px;
   	    line-height: 34px;
    }
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 38px;
		line-height: 42px;
        margin-top: 10px;	
		margin-bottom: 0px;
	}
    .rocket {
	    height: 120px;
 	    margin: 10px auto 0;
	    width: 120px;
    }		
    .smoke-rocket {
	    display: none;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 60%;
    }
    .cloud-1 img, .cloud-6 img {
	    width: 145px;
    }
    .cloud-2 img, .cloud-7 img {
	    width: 90px;
    }
    .cloud-3 img, .cloud-8 img {
	    width: 90px;
    }
    .cloud-4 img {
	    width: 145px;
    }
    .cloud-5 img {
	    width: 121px;
    }
    .nav-overlay span {
	    height: 42px;
	    padding: 10px 10px;
		width: 120px;
        text-align: center;
    }	
    .nav-overlay #trigger-overlay-contact {
	    text-align: center;
    }
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
    .col-left-about {
        height: auto;		
	}
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
		overflow: hidden;
	}	
    .col-map {
	    height: 300px;
    }		
    .style-label,
    .has-error .form-control.style-label {
        padding: 10px 0 0 20px;
    }	
    .help-block.with-errors {
        padding: 6px 20px 0 0;	
    }	
}

/* Phones */
@media only screen and (max-width: 480px) {
    #countdown_dashboard {
	    padding: 50px 0 0;
    }	
    .dash .digit {
	    font-size: 50px;
   	    line-height: 34px;
    }		
    .dash {
	    height: 85px;
		min-width: 68px;
	    padding: 20px 4px;
    }  
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 40px;
		line-height: 42px;
        margin-top: 30px;	
		margin-bottom: 0px;
	}
    .rocket {
	    height: 200px;
 	    margin: 40px auto 0;
	    width: 200px;
    }		
    .smoke-rocket {
	    margin: 0 auto;
	    width: 250px;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 100%;
    }		
    .cloud-1 img, .cloud-6 img {
	    width: 145px;
    }
    .cloud-2 img, .cloud-7 img {
	    width: 90px;
    }
    .cloud-3 img, .cloud-8 img {
	    width: 90px;
    }
    .cloud-4 img {
	    width: 145px;
    }
    .cloud-5 img {
	    width: 121px;
    }
    .nav-overlay span {
	    height: 42px;
	    padding: 10px 10px;
		width: 120px;
        text-align: center;
    }	
    .nav-overlay #trigger-overlay-contact {
	    text-align: center;
    }	
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
		overflow: hidden;
	}
    .col-left-about {
        height: auto;		
	}
    .col-map {
	    height: 300px;
    }
    .style-label,
    .has-error .form-control.style-label {
        padding: 10px 0 0 10px;
    }	
    .help-block.with-errors {
        padding: 6px 10px 0 0;	
    }
}

/* Small phones landscape */
@media only screen and (max-width: 568px) and (orientation: landscape) {
    #countdown_dashboard {
	    padding: 0px;
    }
    .dash {
	    height: 85px;
		min-width: 68px;
	    padding: 20px 4px;
    }
    .dash .digit {
	    font-size: 40px;
   	    line-height: 34px;
    }
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 38px;
		line-height: 42px;
        margin-top: 10px;	
		margin-bottom: 0px;
	}
    .rocket {
	    height: 100px;
 	    margin: 0px auto 0;
	    width: 100px;
    }	
    .smoke-rocket {
	    display: none;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 60%;
    }
    .cloud-1 img, .cloud-6 img {
	    width: 145px;
    }
    .cloud-2 img, .cloud-7 img {
	    width: 90px;
    }
    .cloud-3 img, .cloud-8 img {
	    width: 90px;
    }
    .cloud-4 img {
	    width: 145px;
    }
    .cloud-5 img {
	    width: 121px;
    }
    .nav-overlay span {
	    height: 42px;
	    padding: 10px 10px;
		width: 120px;
        text-align: center;
    }	
    .nav-overlay #trigger-overlay-contact {
	    text-align: center;
    }
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
    .col-left-about {
        height: auto;		
	}
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
		overflow: hidden;
	}	
    .col-map {
	    height: 150px;
    }		
    .style-label,
    .has-error .form-control.style-label {
        padding: 10px 0 0 20px
    }	
    .help-block.with-errors {
        padding: 6px 20px 0 0;	
    }	
}

/* Small phones */
@media only screen and (max-width: 320px) {
    #countdown_dashboard {
	    padding: 0px 0 0;
    }	
    .dash {
	    height: 85px;
		min-width: 68px;
	    padding: 20px 4px;
    }
    .dash .digit {
	    font-size: 40px;
   	    line-height: 34px;
    }
    .dash_title {
	    font-size: 12px;
    }
    .title-details {
	    font-size: 14px;
    }
	.title {
		font-size: 38px;
		line-height: 42px;
        margin-top: 10px;	
		margin-bottom: 0px;
	}	
    .rocket {
	    height: 150px;
 	    margin: 10px auto 0;
	    width: 150px;
    }	
    .smoke-rocket {
	    margin: 0 auto;
	    width: 200px;
    }
    .bottom-clouds-white, .bottom-clouds {
	    background-size: 100%;
    }	
    .cloud-1 img, .cloud-6 img {
	    width: 145px;
    }
    .cloud-2 img, .cloud-7 img {
	    width: 90px;
    }
    .cloud-3 img, .cloud-8 img {
	    width: 90px;
    }
    .cloud-4 img {
	    width: 145px;
    }
    .cloud-5 img {
	    width: 121px;
    }
    .nav-overlay span {
	    height: 42px;
	    padding: 10px 10px;
		width: 120px;
        text-align: center;
    }	
    .nav-overlay #trigger-overlay-contact {
	    text-align: center;
    }
	.overlay .row-height {
	    height: 100%;
		overflow: auto;	
    }
    .col-left-about {
        height: 260px;		
	}			  	  			
    .overlay .col-right {
		height: auto;
		padding: 0px 30px 30px;
		overflow: hidden;
	}
    .col-map {
	    height: 300px;
    }	
    .style-label,
    .has-error .form-control.style-label {
        padding: 10px 0 0 10px;
    }	
    .help-block.with-errors {
        padding: 6px 10px 0 0;	
    }	
}