@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,500,700');
/*=======================================================

Template Name: Gymedge 
Template URI: http://radiustheme.com
Description: This is html5 template
Author: radiustheme
Author URI: http://radiustheme.com
Version: 1.0

--------------------------------------------------------

CSS INDEX:
========================================================

01. Theme default CSS
02. Header top area
    02.1 Header Menu style
    02.2 Header search style
    02.3 Header Cart style

03. Slider style
04. About fitness area
05. Feature classes style
06. Being body builder style
07. Class schedule style
08. What clients say style
09. Expert trainers style
10. Online store style
11. Fitness classes summer style
12. Latest news style
13. Logo showcase style
14. Footer style
    14.1 About company
    14.2 Twitter feed
    14.3 Flickr photos
    14.4 Corporate Office

15. Copy right style
16. Scroll to top style
17. Inner banner style
18. About us page style
    18.1 About gymedge style
    18.2 choose style

19. Classes style
20. Single class detail style
21. Schedule page style
22. Right Sidebar style
    22.1 Search style
    22.2 Categories style
    22.3 Happy clients style
    22.4 Join us style
    22.5 Archives style
    22.6 Best seller style

23. Related classes style
24. Latest news page style
25. News details style
26. Our trainer style
27. Trainer Details style
28. Contact form style
29. Error page style
30. Store online grid style
31. Store online list style
32. Product details style
    32.1 Product detail image tab style
    32.2 Product detail information style
    32.3 Product detail overview tab style

33. Related product style
34. Single page style
35. Price Table area style
36. Gallery Area Styles
37. Counter Area Styles
38. Service Area Styles
39. Why Choose Area Styles
40. Home 5 Area Styles 

=======================================================*/
/*=======================================================
=                     01. Theme default CSS            =
========================================================*/


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  margin: 0 0 20px;
  font-weight: 500;
}
h2 {
  color: #111111;
  font-size: 30px;
  text-transform: uppercase;
}
h3 {
  color: #111111;
  font-size: 20px;
  text-transform: capitalize;
}
h4 {
  color: #111111;
  font-size: 16px;
}
a {
  color: #;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #;
  text-decoration: none;
}
a:active,
a:hover {
  outline: 0 none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/*==========================================================
=                     03. Slider style                     =
==========================================================*/
.slider-top-space-header1 {
  margin-top: 4px;
}
@media only screen and (max-width: 767px) {
  .slider-top-space-header1 {
    margin-top: 51px;
  }
}
.slider-top-space-header2 {
  margin-top: 39px;
}
@media only screen and (max-width: 767px) {
  .slider-top-space-header2 {
    margin-top: 51px;
  }
}
.slider-top-space-header3 {
  margin-top: 123px;
}
@media only screen and (max-width: 767px) {
  .slider-top-space-header3 {
    margin-top: 51px;
  }
}
.slider-top-space-header4 {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .slider-top-space-header4 {
    margin-top: 51px;
  }
}
.slider-area {
  position: relative;
  left: 0;
  right: 0;
  display: block;
}
.slider-area .nivo-caption {
  top: -50px;
}
.slider-content .big-title {
  display: inline; background-color: rgba(25,25,25,0.5); padding:10px; border-radius: 30px; border: 2px solid #EFEFEF;
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #FA5A23;
  text-align: center;
  text-transform: uppercase;
}
.slider-content .big-title span {
  color: #fb5b21;
}
.slider-content .small-content {
  color: #e9e9e9;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 26px;
  width: 64%;
}
.slider-content .button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%;
}
.slider-content .button.slider5 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32%;
}
.slider-content .button .custom-button {
  border: 2px solid #fb5b21;
  border-radius: 65px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  padding: 17px 35px;
  position: relative;
  text-transform: uppercase;
}
.slider-content .button .custom-button:hover {
  background: #fb5b21;
}
.nivo-caption .slider-progress {
  background: #fb5b21;
}
.nivo-controlNav {
  left: 0;
  right: 0;
}
.nivo-controlNav .nivo-control {
  background: url(img/slider-control-inactive.png) 0 0 no-repeat;
}
.nivo-controlNav .nivo-control.active {
  background: url(img/slider-control-active.png) 0 0 no-repeat;
}
.slider-area .slider-content .small-content {
  width: 47%;
}
@media only screen and (max-width: 767px) {
  .slider-area .slider-content .small-content {
    width: 90%;
  }
}
.bg-slider {
  position: relative;
}
.bg-slider:before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 6;
  left: 0;
  right: 0;
  background: rgba(33, 33, 33, 0.6);
  position: absolute;
}
.nav-slider .preview-2 .nivo-directionNav a.nivo-nextNav::before {
  background: rgba(255, 255, 255, 0.3);
  height: 55px;
  width: 40px;
  font-size: 20px;
  right: -50px;
  line-height: 55px;
}
.nav-slider .preview-2 .nivo-directionNav a.nivo-prevNav::before {
  background: rgba(255, 255, 255, 0.3);
  height: 55px;
  width: 40px;
  font-size: 20px;
  left: -50px;
  line-height: 55px;
}
.nav-slider .preview-2 .nivoSlider .nivo-directionNav a.nivo-nextNav {
  right: 10px;
}
.nav-slider .preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-nextNav {
  right: 65px;
}
.nav-slider .preview-2 .nivoSlider .nivo-directionNav a.nivo-prevNav {
  left: 10px;
}
.nav-slider .preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-prevNav {
  left: 65px;
}
.main-banner {
  position: relative;
}
.main-banner .main-banner-inner {
  position: absolute;
  left: 50%;
  right: 0;
  top: 60%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  margin: 0 auto;
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner {
    top: 60%;
  }
}
@media only screen and (max-width: 767px) {
  .main-banner .main-banner-inner {
    left: 45%;
    top: 55%;
  }
  
  .slider-content .big-title {
  display: inline; background-color: rgba(25,25,25,0.5); padding:10px; border-radius: 30px; border: 2px solid #EFEFEF;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #FA5A23;
  text-align: center;
  text-transform: uppercase;
}

.slider-content .button .custom-button {
  border: 2px solid #fb5b21;
  border-radius: 35px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  padding: 10px 10px;
  position: relative;
  text-transform: uppercase;
}
}
.main-banner .main-banner-inner .main-banner-top-title {
  font-size: 36px;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
  text-align: left;
  color: #ffffff;
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner .main-banner-top-title {
    font-size: 24px;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .main-banner .main-banner-inner .main-banner-top-title {
    font-size: 20px;
  }
}
@media only screen and (max-width: 480px) {
  .main-banner .main-banner-inner .main-banner-top-title {
    font-size: 16px;
  }
  
  .slider-content .big-title {
  display: inline; background-color: rgba(25,25,25,0.5); padding:10px; border-radius: 30px; border: 2px solid #EFEFEF;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #FA5A23;
  text-align: center;
  text-transform: uppercase;
}

.slider-content .button .custom-button {
  border: 2px solid #fb5b21;
  border-radius: 35px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  padding: 10px 15px;
  position: relative;
  text-transform: uppercase;
}
}
.main-banner .main-banner-inner h1 {
  font-size: 72px;
  text-transform: capitalize;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 5px;
}
.main-banner .main-banner-inner h1 span {
  font-weight: 400;
  color: #ffffff;
}
@media only screen and (max-width: 1199px) {
  .main-banner .main-banner-inner h1 {
    font-size: 56px;
  }
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner h1 {
    font-size: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .main-banner .main-banner-inner h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 480px) {
  .main-banner .main-banner-inner h1 {
    font-size: 24px;
  }
}
.main-banner .main-banner-inner p {
  font-size: 16px;
  width: 55%;
  font-weight: 400;
  text-transform: capitalize;
  text-align: left;
  margin-bottom: 30px;
  color: #ffffff;
}
@media only screen and (max-width: 1199px) {
  .main-banner .main-banner-inner p {
    display: none;
  }
}
.main-banner .main-banner-inner .button {
  border: 2px solid #fb5b21;
  border-radius: 65px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  outline: medium none;
  text-transform: uppercase;
  bottom: -70px;
  display: inline-block;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media only screen and (max-width: 767px) {
  .main-banner .main-banner-inner .button {
    display: none;
  }
  
 
}
.main-banner .main-banner-inner .button a {
  display: inline-block;
  padding: 15px 35px;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner .button a {
    padding: 10px 20px;
  }
}
.main-banner .main-banner-inner .button:hover {
  background: #fb5b21;
}
.main-banner .main-banner-inner .button:hover a {
  color: #ffffff !important;
}
.main-banner .main-banner-inner .main-banner-link {
  margin-bottom: 40px;
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner .main-banner-link {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 480px) {
  .main-banner .main-banner-inner .main-banner-link {
    display: none;
  }
}
.main-banner .main-banner-inner .main-banner-link li {
  margin-right: 10px;
  font-size: 16px;
  display: inline-block;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.main-banner .main-banner-inner .main-banner-link li a {
  text-align: center;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: inline-block !important;
  border: 1px solid #424243;
  line-height: 50px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media only screen and (max-width: 991px) {
  .main-banner .main-banner-inner .main-banner-link li a {
    height: 40px;
    width: 40px;
    line-height: 40px;
  }
}
.main-banner .main-banner-inner .main-banner-link li a i {
  font-size: 16px;
  color: #fb5b21;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.main-banner .main-banner-inner .main-banner-link li a:hover {
  background: #fb5b21;
  border: 1px solid #fb5b21;
}
.main-banner .main-banner-inner .main-banner-link li a:hover i {
  color: #ffffff;
}
/*=================  End of Slider style  =================*/