/*
  Author: bonefishcode
  Template: Bone-S
  Version: 1.0.1
  URL: http://themeforest.net/user/bonefishcode
*/

/*
do not edit this file
place custom style at assets/css/custom.css
*/

/*========================================
01. import google font
02. import css
03. fix ie10 viewport bug
04. reset
05. typography
06. button
07. form
08. helper class
09. preloader
10. border
11. logo
12. nav
13. section common
14. intro section
15. service section
16. about section
17. philosophy
18. subscribe section
19. contact1 section - contact form
20. contact2 section - contact way
21. footer
22. overlay
========================================*/

@charset "UTF-8";

/*========================================
01. import google font
========================================*/
@import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700");
@import url("http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic");

/*========================================
02. import css
========================================*/
@import url("font-awesome.min.css"); /* font awesome */
@import url("stroke-gap-icons.css"); /* stroke gap icons */
@import url("animate.css"); /* animation */

/*========================================
03. fix ie10 viewport bug
========================================*/
@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

/*========================================
04. reset
========================================*/
/* bootstrap */
a:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0;
}
a:active,
a:hover {
  outline: 0;
}
a:focus,
a:hover {
  text-decoration: none;
}
.btn.active,
.btn:active,
.form-control,
.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn,
.form-control {
  border-radius: 2px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: 0;
}
/* browser */
button:focus {
  outline: 0;
}
html,
body {
  height: 100%;
  background-color: transparent;
}
html {
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-overflow-style: scrollbar;
}
body {
  -webkit-font-smoothing: antialiased;
}
/* selection */
::-moz-selection {
  background-color: #fc5151;
  color: #ffffff;
}
::selection {
  background-color: #fc5151;
  color: #ffffff;
}

/*========================================
05. typography
========================================*/
body {
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.42857143;
  color: #555555;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  color: #252525;
}
h1 {
  font-size: 86px;
}
h2 {
  font-size: 38px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 12px;
}
a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #fc5151;
}
a:focus,
a:hover {
  color: #fb2929;
}
p {
  margin-bottom: 0;
}
blockquote {
  font-size: 18px;
  border-left-width: 2px;
}
img {
  /* image responsive */
  display: block;
  max-width: 100%;
  height: auto;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.backstretch { /* background image plugin */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/*========================================
06. button
========================================*/
.btn {
  font-size: 12px;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* custom style button */
.btn-theme {
  color: #ffffff;
  background-color: #fc5151;
  border-color: #fc5151;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme.focus,
.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
  color: #ffffff;
  background-color: #fb1f1f;
  border-color: #fb1515;
}
.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
  background-image: none;
}
.btn-theme.disabled,
.btn-theme[disabled],
fieldset[disabled] .btn-theme,
.btn-theme.disabled:hover,
.btn-theme[disabled]:hover,
fieldset[disabled] .btn-theme:hover,
.btn-theme.disabled:focus,
.btn-theme[disabled]:focus,
fieldset[disabled] .btn-theme:focus,
.btn-theme.disabled.focus,
.btn-theme[disabled].focus,
fieldset[disabled] .btn-theme.focus,
.btn-theme.disabled:active,
.btn-theme[disabled]:active,
fieldset[disabled] .btn-theme:active,
.btn-theme.disabled.active,
.btn-theme[disabled].active,
fieldset[disabled] .btn-theme.active {
  background-color: #fc5151;
  border-color: #fc5151;
}
.btn-theme .badge {
  color: #fc5151;
  background-color: #ffffff;
}
.btn-50 { /* 50px height button */
  padding: 0 35px;
}
.btn-50 > span { /* span create by js */
  height: 48px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 3.5px;
}
.btn-grid .btn { /* button margin inside .btn-grid */
  margin: 10px;
}

/*========================================
07. form
========================================*/
.form-control {
  padding-left: 20px;
  padding-right: 20px;
}
.form-50 input { /* 50px height input */
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
}
.form-50 textarea {
  padding: 13.5px 20px;
}
.ie8 .form-50 input,
.ie8 .form-50 textarea {
  line-height: 34px;
}
.form-50 .input-group-btn > .btn {
  height: 50px;
}
.valid {
  color: #2ccdae; /* form valid icon color */
}
.error {
  color: #fc5152; /* form error icon color */
}

/*========================================
08. helper class
========================================*/
.tb { /* table */
  display: table;
  width: 100%;
  height: 100%;
}
.tb-cell { /* table cell */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.tb-row { /* table at row */
  display: table;
  width: 100%;
}
.tb-col { /* table cell at col */
  display: table-cell;
  vertical-align: middle;
}
.icons { /* icon base class */
  display: inline-block;
}
.tc {
  text-align: center;
}
.tl {
  text-align: left;
}
.tr {
  text-align: right;
}
.fn {
  float: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.center {
  margin: 0 auto;
}
.rounded { /* button and form rounded */
  -webkit-border-top-left-radius: 50px;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius-topleft: 50px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomright: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}
.is-mobile .rounded {
  background-clip: padding-box;
}
.shadow { /* button and form shadow */
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.color {
  color: #fc5151; /* theme default color */
}

/*========================================
09. preloader
========================================*/
#preloader {
  background: -webkit-linear-gradient(-45deg, #be2121 0%, #be2121 30%, #191691 75%, #191691 100%); /* preloader background color */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 9999;
}
#preloader-img {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../img/preloader.gif) no-repeat 50% 50%; /* preloader image */
  width: 60px; /* preloader image width */
  height: 60px; /* preloader image height */
  margin-top: -30px; /* half of preloader image height */
  margin-left: -30px; /* half of preloader image width */
}

/*========================================
10. border
========================================*/
.border {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  opacity: 0;
}
.border-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 15px;
  z-index: 10;
  background-color: #ffffff;
}
.border-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 15px;
  height: 0;
  z-index: 10;
  background-color: #ffffff;
}
.border-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 15px;
  height: 0;
  z-index: 10;
  background-color: #ffffff;
}
.border-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0;
  height: 15px;
  z-index: 10;
  background-color: #ffffff;
}
.border-on .border-left,
.border-on .border-right {
  height: 100%;
}
.border-on .border-top,
.border-on .border-bottom {
  width: 100%;
}
.border-on .border {
  opacity: 1;
}
.border-off .border {
  display: none;
}
html:not(.ie8):not(.ie9) .animated {
  visibility: hidden;
}
@media (max-width: 767px) {
  /* extra small devices */
  #wrap {
    margin: 0;
  }
  .border {
    display: none!important;
    /* hide border on mobile */
  }
}

/*========================================
11. logo
========================================*/
#header {
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1050;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#header-logo {
  height: 110px; /* logo height */
}
@media (max-width: 767px) {
  /* extra small devices */
  #header-logo {
    height: 50px; /* logo height on mobile */
  }
}

/*========================================
12. nav
========================================*/
.nav-menu {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1050;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ie8 .nav-menu {
  display: block;
}
.nav-toggle {
  cursor: pointer;
}
.nav-toggle:before { /* menu toggle icon */
  content: "\f205";
  height: 20px;
  width: 20px;
  font-family: FontAwesome;
}
.nav-toggle.nav-open:before { /* menu opened toggle icon */
  content: "\f204";
}
.menu-icon {
  display: block;
}
.nav-toggle,
.nav-menu a {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #ffffff;
  background-color: #e81212; /* nav color */
  text-align: center;
}
.ie8 .nav-toggle,
.ie8 .nav-menu a {
  background-color: #1a1a1a; /* ie8 nav color */
}
.color-nav .nav-toggle,
.color-nav .nav-menu a {
  background-color: #fc5151; /* color nav */
}
.nav-toggle:hover,
.nav-toggle:focus,
.nav-menu a:hover,
.nav-menu a:focus {
  color: #ffffff;
  /* menu icon hover and focus color */
}
.tooltip {
  border-radius: 0;
}
.tooltip.left {
  padding: 0 5px;
  right: 80px!important;
  left: auto!important;
}
.tooltip.left .tooltip-arrow {
  display: none;
}
.tooltip-inner {
  color: #000000;
  background-color: #ffffff;
  border: solid 1px;
  border-color: #ffffff;
  border-radius: 50px;
  padding: 3px 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4em;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px;
}
body:not(.audio-on):not(.youtube-video-desktop) #play,
body:not(.youtube-video-desktop) #volume {
  display: none!important;
}
.ie8 #play,
.ie8 #volume,
.ie8 #bg-video,
.ie8 #audio-player {
  display: none!important;
}
@media (max-width: 767px) {
  /* extra small devices */
  .nav-toggle,
  .nav-menu a {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
}

/*========================================
13. section common
========================================*/
section {
  position: relative;
  overflow-x: hidden;
}
.separator {
  height: 40px;
  line-height: 40px;
}
.separator:after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 1px;
  margin: 20px 0;
  background-color: #252525; /* separator color */
}
.section-desc {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: italic;
  margin-bottom: 30px;
}

/*========================================
14. intro section
========================================*/
#intro {
  text-align: center;
  z-index: 1;
}
.min-height #intro {
  padding: 130px 0 80px;
}
.intro-title {
  font-size: 86px; /* intro title font size */
  color: #ffffff; /* intro title font color */
}
.intro-desc {
  font-size: 14px; /* intro desc font size */
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 10px;
  color: #ffffff; /* intro desc font color */
}
/* countdown */
#countdown {
  display: none;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  width: 100%;
  max-width: 600px;
}
.countdown-on #countdown {
  display: inline-block;
}
.time-wrap {
  padding: 0;
}
.time {
  font-size: 38px; /* countdown time font size */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff; /* countdown unit font color */
  text-shadow: rgba(0, 0, 0, 0.1) 4px 4px 4px;
}
.unit {
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: rgba(0, 0, 0, 0.1) 4px 4px 4px;
  color: #ffffff; /* countdown unit font color */
}
@media (max-width: 767px) {
  /* extra small devices */
  #countdown {
    max-width: 400px;
  }
  .time-wrap {
    margin-top: 20px;
  }
  .time {
    font-size: 28px;
  }
  .unit {
    font-size: 12px;
  }
}
/* button grid */
#intro .btn-grid {
  margin-top: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* medium devices */
  .intro-title {
    font-size: 64px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* small devices */
  .intro-title {
    font-size: 52px;
  }
}
@media (max-width: 767px) {
  /* extra small devices */
  .intro-title {
    font-size: 32px;
  }
  #intro .btn-grid {
    margin-top: 10px;
  }
}
@media (max-width: 991px) {
  /* extra small devices - small devices */
  #countdown {
    margin-top: 0;
  }
}

/*========================================
15. service section
========================================*/
#service {
  padding: 160px 0;
  text-align: center;
  background-color: #f9f9f9;
}
.col-service {
  padding: 0 20px;
}
.col-service .icons {
  width: 106px;
  height: 106px;
  line-height: 100px;
  font-size: 36px;
  border: 3px solid;
  border-color: #fb2929;
  border-radius: 50%;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px;
  background-color: #fc5151;
  color: #ffffff;
}
.is-mobile .col-service .icons {
  background-clip: padding-box;
}
@media (max-width: 991px) {
  /* extra small devices - small devices */
  .col-service:not(:first-child) {
    margin-top: 60px;
  }
}

/*========================================
16. about section
========================================*/
#about {
  position: relative;
  background-color: #fff;
}
#about .col-padding {
  padding-top: 160px;
  padding-bottom: 160px;
}
#about .btn {
  margin-top: 30px;
}
#about .col-img-bg {
  position: absolute;
  top: 0;
  height: 100%;
  background-image: url(../img/bg/about.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-color: #fff;
}
@media (max-width: 991px) {
  /* extra small devices - small devices */
  #about .col-img-bg {
    position: static;
    height: 500px;
  }
}

/*========================================
17. philosophy
========================================*/
#philosophy {
  padding: 160px 0;
  text-align: center;
  background-color: #fc5151;
}
#philosophy blockquote {
  border-left: 0;
  padding: 0;
  margin: 0;
}
#philosophy blockquote p {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-transform: uppercase;
  color: #ffffff;
}
#philosophy blockquote footer {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 24px;
  color: #ffffff;
  font-style: italic;
  text-transform: lowercase;
  margin-top: 20px;
}

/*========================================
18. subscribe section
========================================*/
#subscribe {
  position: relative;
  background-color: #fff;
}
#subscribe-form {
  margin-top: 30px;
}
#subscribe-form .input-group {
  border: 1px solid #ccc;
  border-radius: 50px;
  padding: 2px;
}
#subscribe-form .form-control {
  border-color: transparent;
  background-color: transparent;
}
#subscribe-form .form-control:focus {
  border-color: transparent;
}
#subscribe-form button[type=submit].rounded {
  border-radius: 50px;
}
.subscribe-notice {
  display: inline;
  margin-bottom: 0;
}
#subscribe .col-img-bg {
  position: absolute;
  top: 0;
  height: 100%;
  background-image: url(../img/bg/subscribe.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-color: #fff;
}
#subscribe .col-padding {
  padding-top: 160px;
  padding-bottom: 160px;
}
@media (max-width: 991px) {
  /* extra small devices - small devices */
  #subscribe .col-img-bg {
    position: static;
    height: 500px;
  }
}

/*========================================
19. contact1 section - contact form
========================================*/
#contact1 {
  padding: 140px 0;
  text-align: center;
  background-color: #f9f9f9;
}
#contact1 .section-desc {
  margin-bottom: 60px;
}
#contact-form .form-control {
  border-width: 0 0 1px;
  background-color: transparent;
}
#contact-form .form-control:focus {
  border-color: #aaa;
}
#contact-form button[type=submit] {
  margin: 45px auto 15px;
}
.contact-notice {
  font-weight: 700;
}

/*========================================
20. contact2 section - contact way
========================================*/
#contact2 {
  padding: 80px 0;
  text-align: center;
  background-color: #0a0a0a;
}
address {
  margin-bottom: 0;
}
address p {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 10px;
}
address p,
.contact-info span {
  color: #ffffff;
}
address p span {
  font-size: 28px;
}
.contact-info {
  min-height: 50px;
  line-height: 50px;
}
.contact-info .icons {
  width: 40px;
  font-size: 28px;
  color: #fc5151; /* contact icon */
}
@media (max-width: 991px) {
  /* extra small devices - small devices */
  address:not(:first-child) {
    margin-top: 40px;
  }
}

/*========================================
21. footer
========================================*/
#site-footer {
  padding: 80px 0;
  text-align: center;
  background-color: #f9f9f9;
}
.social-list {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}
.social-list li {
  display: inline-block;
  padding: 10px 5px;
}
.social-list a {
  display: block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  color: #ffffff;
  background-color: #0a0a0a; /* social icon background color */
  text-shadow: rgba(0, 0, 0, 0.1) 4px 4px 4px;
}
.social-list a:hover {
  background-color: #fc5151; /* social icon hover background color */
  color: #ffffff;
}
.copyright {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*========================================
22. overlay
========================================*/
.overlays,
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.overlay {
  background-color: #19191D; /* overlay color */
}
.gradient { /* gradient color */
  background: #19191D;
  /* Old Browsers */
  background: -moz-linear-gradient(-45deg, #00C381 0%, #00C381 30%, #9B1919 75%, #9B1919 100%);
  /* FF3.6+ */
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #00C381), color-stop(30%, #00C381), color-stop(75%, #9B1919), color-stop(100%, #9B1919));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(-45deg, #00C381 0%, #00C381 30%, #9B1919 75%, #9B1919 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #00C381 0%, #00C381 30%, #9B1919 75%, #9B1919 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #00C381 0%, #00C381 30%, #9B1919 75%, #9B1919 100%);
  /* IE 10+ */
  background: linear-gradient(135deg, #00C381 0%, #00C381 12 30%, #9B1919 75%, #9B1919 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00C381', endColorstr='#9B1919', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}