/*########### Skins ###########*/ 

@import url("orange.css");


/* ######## 1 - Reset Styles #########  */ 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, img, small, strong, ol, ul, li, form, label,
table, caption, tr, td, footer, header { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
footer, header, menu, nav, section { display: block; }

body { line-height: 1; -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility; font-weight:400; font-family: 'Oxygen', sans-serif; background-color:#12080f; }
 
ol, ul { list-style: none; }

a { color:#efefef; text-decoration:none; }
a:focus { color:#fff; outline:0; text-decoration:none; }
a:hover { color:#fff; text-decoration:none; }

.wrapper { width:940px; margin:0 auto; top: 15%; position: relative;}


/* ######## 2 - Main Styles #########  */ 

.main-content { height:800px; display:block; }
.divider { background:url("../img/divider.png") no-repeat center; width:420px; display:block; height:13px; margin:60px auto 0;}
#logo { width:300px; margin:0 auto; padding:40px 0 0; }

h1.title { padding:49px 0 0; text-transform:uppercase; font-size:36px; text-align:center;   color:#f8f9f9; text-shadow:1px 1px 2px rgba(0,0,0,0.3); }

p.subtitle { font-size:15px; color:#8f9092; text-align:center; padding:42px 0 0; } 
.subtitle a{background-color: #4cbceb;padding: 15px;border-radius: 25px; color:#fff}
.subtitle a:hover{background-color: #3b9ec8; padding: 15px;border-radius: 25px;}

#counter { clear:both; width:640px; text-align:center; text-align:center; display:block; margin:80px auto 0; height:110px;}
.counter-wrap { float:left; text-align:center; width:80px; }
.counter-div { float:left; text-align:center; margin:35px 46px 0; font-size:30px;  }

.counter-wrap span { font-size:72px; width:80px; text-align:center; color:#f8f9f9; text-shadow:1px 1px 2px rgba(0,0,0,0.3); }

.counter-wrap p { font-size:14px; color:#7c7c7e; width:80px;   text-shadow:1px 1px 2px rgba(0,0,0,0.3); margin:20px 2px 0; text-align:center; }

.newsletter-form { width:500px; display:block; border-radius:40px; background-color:#ffffff; clear:both; padding:2px 2px; height:46px; margin:75px auto 0;}

input.email-newsletter { padding:4px 17px; width:304px;  border-radius:40px; display:block; float:left; border-radius:40px; height:36px; border:0; box-shadow:0; -webkit-box-shadow:0; color:#a2a2a2; font-size:13px; font-style:italic;}

input.button-newsletter { float:right; width:140px; display:block; border-radius:40px; border:0; outline:0; height:46px; text-transform:uppercase; color:#ffffff;  text-shadow:1px 1px 2px rgba(0,0,0,0.3); font-weight:400; }

input:focus { color:#858585; border:0; outline:0; -webkit-box-shadow:0; box-shadow: 0px 0px 0px ; border-color:#ffffff; }
input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { color:#858585; border:0; box-shadow: 0px 0px 0px #ffffff ; -webkit-box-shadow:0; outline:0;  border-color:#ffffff;}
input:focus:valid:focus, textarea:focus:valid:focus, select:focus:valid:focus { color:#858585;  border:0;box-shadow: 0px 0px 0px #ffffff; -webkit-box-shadow:0; outline:0;  border-color:#ffffff;}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { box-shadow: 0px 0px 0px rgba(255,255,255,1); }

.newsletter-form p { padding:16px 20px 0; font-size:12px;  clear:both; color:#ffffff;  text-shadow:1px 1px 2px rgba(0,0,0,0.3);  }



.features { background-color:#ffffff; padding:0 0 95px;}

.features h1.title { padding:70px 0 0; text-transform:uppercase; font-size:30px; text-align:center;   color:#2c3133; text-shadow:1px 1px 2px rgba(255,255,255,0.3); }

.features p.subtitle { font-size:15px; color:#8f9092; text-align:center; padding:24px 0 0; } 

.featu-icon { height:30px; width:30px; display:block; border-radius:40px; padding:12px 12px; margin:0 auto;  }
.featu-icon:hover { cursor:pointer; }
 

.features-wrap { margin:80px 0 0; }
.features-wrap h3 { text-align:center; margin:30px 0 0; }
.features-wrap p { text-align:center; margin:31px 0 0; font-size:14px; color:#9d9d9d; padding:0px 30px; line-height:1.8; font-weight:300px;}
 
.features-wrap a p { margin:16px 0 0;  }

.footer { height:50px; padding:10px 0 0; background-color:#232526; }  
.copy { float:left; color:#6a6d6e; font-size:12px; padding:10px 0 0;}
.copy p span, .balance p a {color:#b1b2b2; }
.balance{float:right; color:#6a6d6e; font-size:12px; padding:10px 0 0;}

ul.social { float:right; padding:3px 0 0; }
ul.social li { float:left; margin:0 0 0 4px; }
ul.social li a { width:36px; height:37px; display:block; opacity:0.5; }
ul.social li a:hover { opacity:1; }
li.facebook a { background:url("../img/facebook.png") no-repeat center; }
li.pinterest a { background:url("../img/pinterest.png") no-repeat center;  }
li.linkedin a { background:url("../img/linkedin.png") no-repeat center;  }
li.google a { background:url("../img/google.png") no-repeat center; }
li.dribbble a { background:url("../img/dribbble.png") no-repeat center; }


@media(min-width: 768px) and (max-width: 979px) {   
.wrapper { width:725px; margin:0 auto; } 
}



@media(min-width: 480px) and (max-width: 767px) { 
.wrapper { width:460px; margin:0 auto;top: 5%; position: relative; }
h1.title { font-size:26px; }
#counter {   width:435px; text-align:center;  margin:60px auto 0; height:82px;}
.counter-wrap { float:left; text-align:center; width:80px; }
.counter-div { float:left; text-align:center; margin:20px 28px 0;   font-size:30px;  }
.counter-wrap span { font-size:52px; width:40px; text-align:center; color:#f8f9f9; text-shadow:1px 1px 2px rgba(0,0,0,0.3); }
.counter-wrap p { font-size:14px; color:#7c7c7e; width:40px;   text-shadow:1px 1px 2px rgba(0,0,0,0.3); margin:15px 2px 0; text-align:center; }
.newsletter-form { width:456px; display:block; border-radius:40px; background-color:#ffffff; clear:both; padding:2px 2px; height:46px; margin:75px auto 0;}
input.email-newsletter { padding:4px 17px; width:270px;  }
.main-content { height:720px; display:block; }
.ft { padding:60px 0 0; }
}

@media(max-width: 480px) { 
.wrapper { width:300px; margin:0 auto; top: 5%; position: relative;}
h1.title { font-size:24px;  line-height:2;}
#counter {   width:300px; text-align:center;  margin:60px auto 0; height:52px;}
.counter-wrap { float:left; text-align:center; width:80px; }
.counter-div { float:left; text-align:center; margin:15px 18px 0; font-size:10px;  }
.counter-wrap span { font-size:30px; width:30px; text-align:center; color:#f8f9f9; text-shadow:1px 1px 2px rgba(0,0,0,0.3); }
.counter-wrap p { font-size:12px; color:#7c7c7e; width:40px;   text-shadow:1px 1px 2px rgba(0,0,0,0.3); margin:15px 2px 0; text-align:center; }
.newsletter-form { width:300px; display:block; border-radius:40px; background-color:#ffffff; clear:both; padding:2px 2px; height:46px; margin:75px auto 0;}
input.email-newsletter { padding:4px 17px; width:150px;  }
.main-content { height:720px; display:block; }
.ft { padding:60px 0 0; }
.divider { width:300px; }
p.subtitle { display:none; }
#logo { width:300px; }
input.button-newsletter { width:110px; }
.features h1.title { font-size:28px;  line-height:2; }
.footer { height:100px; }
.copy { width:100%; float:none; margin:0 auto; text-align:center; }
.features-wrap { margin:60px 0 0; }
ul.social { float:none; padding:20px 0 0; width:200px; margin:0 auto; }

}