@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
/** general **/
body {  max-width: 100%; overflow-x: hidden; font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #333; font-size: 16px; }


/* Buttons */
.btn { border-color: #373536; text-decoration: none; text-transform: none; text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; outline: 0; background: #373536; color: #fff; }
.btn:hover { background: #eaeaea; color: #000000; border-color: #433832; }
.btn-default { background: #373536; color: white; border-color: #373536; font-size: 14px; }
.btn-default i { font-size: 16px; }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background: #433832; color: #fff; border-color: #433832; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background: #0079c0; border-color: #000000; }

nav .navbar-nav li a { color: #FFFFFF !important; }
.x-navbar {
background-color: rgba(116,203,209,0.5);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  padding-left: 10px;
  color: C0C0C0;
}
::-moz-placeholder { /* Firefox 19+ */
  padding-left: 10px;
  color: C0C0C0;
}
:-ms-input-placeholder { /* IE 10+ */
  padding-left: 10px;
  color: C0C0C0;
}
:-moz-placeholder { /* Firefox 18- */
  padding-left: 10px;
  color: C0C0C0;
}

@media (min-width: 750px) {
  .back-right {
    float: right;
  }
}


@media (min-width: 992px) {
  .navbar-expand-lg {
    padding-right: 5rem;
    padding-left: 2rem;
  }
}
@media (min-width: 992px) {
  .footer-lg {

    padding-left: 2rem;
  }

}
.carousel-caption {
    width: 100%;
    top: 30%;
    left: 25%;
    bottom: auto;
}

.carousel-caption2 {
    width: 100%;
    top: 30%;
    left: 0%;
    bottom: auto;
}
.cover {
  background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
  box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto;
  border-radius: 5px;
  width: 389px;
  height: 500px;
}

.bg-dark {
    background-color: #7e7f81 !important;
}

.bg-custom { background-color: #000000 !important; opacity: 0.9 !important; }
.bg-light { background-color: #FFFFFF !important; opacity: 1.0 !important; }

.nav-link { font-size: 18px; }
.navbar li a:hover { color: #9dc3e6 !important; }

.navbar-nav > li{
  margin-left:10px;
  margin-right:10px;
}


.cards{
	
    transition: all 0.2s ease;
    cursor: pointer;
    

  }
    


.card:hover{
border-radius: 25px;
box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
filter: drop-shadow(5px 5px 5px 5px rgba(0,0,0,0.3));

}

.cards-wrapper {
  display: flex;
  justify-content: center;
padding-right: 50px;
padding-left: 50px;
}
.card img {
width: 192px;
margin: auto;
display: block;
  margin-left: auto;
  margin-right: auto;
  height: 192px;
  }
.card {
  margin: 0 0.5em;
  min-height: 475px;
  min-width: 192px;
  max-height: 475px;
  border: none;
  border-radius: 0;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 30px;
margin-top: 10px;
padding-top: 20px;
}

@media (min-width: 750px) {
  .card-margin {
     margin-top: -100px;
  }
}

.card-body { padding-left: 10px; padding-right: 10px; }

.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .card img {
    height: 11em;
  }
}

.center-card-btn {
  margin: 0;
  position: absolute;
  bottom: 0px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}



/* logo Area */
#logoArea { padding: 0px 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #FFFFFF; }
#logoArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#logoArea h3 { margin: 0px 0 20px; color: #007fc4; font-size: 16px; line-height: 22px; font-weight: 700; }
#logoArea h3 smaller { margin: 0px 0 20px; color: #007fc4; font-size: 12px; line-height: 22px; font-weight: 700; }
#logoArea a { display: block; text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#logoArea a:hover { color: #000; }
#logoArea p { line-height: 20px; font-size: 15px; max-width: 350px; margin: auto; width: 50%; text-align: center; overflow: hidden; }
#logoArea ul { list-style:none; overflow: hidden; }
#logoArea ul.slides li { margin-right: 30px; }
#logoArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#logoArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#logoArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#logoArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#logoArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#logoArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#logoArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#logoArea #logo { padding-bottom: 40px; position: relative; }

/* specifications */
#specifications background-image: url("images/g-force-logo-black-300.png");

/* Spec Area */
#SpecArea { padding: 0px 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #FFFFFF; }
#SpecArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#SpecArea h3 { margin: 0px 0 20px; color: #007fc4; font-size: 16px; line-height: 22px; font-weight: 700; }
#SpecArea h3 smaller { margin: 0px 0 20px; color: #007fc4; font-size: 12px; line-height: 22px; font-weight: 700; }
#SpecArea a { display: block; text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#SpecArea a:hover { color: #000; }
#SpecArea p { line-height: 20px; font-size: 15px; max-width: 350px; margin: auto; width: 50%; text-align: center; overflow: hidden; }
#SpecArea hr { margin: 0px 0 0px 0; }
#SpecArea ul { list-style:none; overflow: hidden; }
#SpecArea ul.slides li { margin-right: 30px; }
#SpecArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#SpecArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#SpecArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#SpecArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#SpecArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#SpecArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#SpecArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#SpecArea #logo { padding-bottom: 40px; position: relative; }


/* advantage Area */
#advantageArea { padding: 20px 0; overflow: hidden; width: 100%; background: #FFFFFF; background-image: url(../images/quilt-pattern.png); background-repeat: repeat; }
#advantageArea container { width: 95%; }
#advantageArea p { line-height: 20px; font-size: 16px; margin: 0px 10px 20px 10px; overflow: hidden; color: #000000; }
#advantageArea .large { line-height: 22px; font-size: 18px; margin: 0px 10px 20px 10px; overflow: hidden; color: #000000; }
#advantageArea h2 { margin: 0px 0 20px; color: #0079c0; font-size: 28px; line-height: 22px; font-weight: bold; }
#advantageArea h5 { margin: 0px 0 10px; color: #0079c0; font-size: 22px; line-height: 22px; font-weight: bold; }
#advantageArea .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { text-align: center; }
#advantageArea .card-text { text-align: center; }

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
	.float-right { float: right; }
	}

/* trending Area */
#trendingArea { padding: 20px 0; overflow: hidden; width: 100%; background: #f2f2f2; }
#trendingArea container { width: 95%; }
#trendingArea a { text-decoration: none; }
#trendingArea p { line-height: 20px; font-size: 14px; margin: 0px 10px 20px 10px; text-align: center; overflow: hidden; color: #000000; }
#trendingArea h2 { padding: 20px 0px 20px 0px; color: #000000; font-size: 28px; line-height: 22px; font-weight: bold; text-align: left; }
#trendingArea h5 { margin: 0px 0 20px; color: #000000; font-size: 18px; line-height: 22px; font-weight: bold; text-align: center; }
#trendingArea .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { text-align: center; }
#trendingArea .card-text { text-align: center; }

/* Product Area */
#productArea { padding: 0px 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #FFFFFF; }
#productArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; text-align: center; }
#productArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#productArea h3 { margin: 0px 0 20px; color: #007fc4; font-size: 16px; line-height: 22px; font-weight: 700; }
#productArea h3 smaller { margin: 0px 0 20px; color: #007fc4; font-size: 12px; line-height: 22px; font-weight: 700; }
#productArea a { display: block; text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#productArea a:hover { color: #000; }
#productArea p { line-height: 20px; font-size: 15px; max-width: 350px; margin: auto; width: 50%; text-align: center; overflow: hidden; }
#productArea ul { list-style:none; overflow: hidden; }
#productArea ul.slides li { margin-right: 30px; }
#productArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#productArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#productArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#productArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#productArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#productArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#productArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#productArea #logo { padding-bottom: 40px; position: relative; }

#productArea .tabs{ width:90%; height:auto; margin:0 auto; }

/* tab list item */
#productArea .tabs .tabs-list{ list-style:none; margin:0px; padding:0px; }
#productArea .tabs .tabs-list li{ width:300px; float:left; margin:0px; margin-right:2px; padding:10px 5px; text-align: center; background-color: #d9d9d9; border-radius:3px; }
#productArea .tabs .tabs-list li:hover{ cursor:pointer; }
#productArea .tabs .tabs-list li a{ text-decoration: none; color: #000000; font-weight: bold; }

/* Tab content section */
#productArea .tabs .tab{ display:none; width:96%; min-height:250px; height:auto; border-radius:3px; padding:20px 15px; background-color: #FFFFFF; color: darkslategray; clear:both; }
#productArea .tabs .tab h3{ border-bottom:3px solid cornflowerblue; letter-spacing:1px; font-weight:normal; padding:5px; }
#productArea .tabs .tab p{ line-height:20px; letter-spacing: 1px }

/* When active state */
#productArea .active{ display:block !important; }
#productArea .tabs .tabs-list li.active{ background-color: #0079c0 !important; color: #black !important; }
#productArea .active a{ color:black !important; }

#productArea .active a::after {
  content: " ";
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid teal;
  height: 0;
  width: 0;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}


/* media query */
@media screen and (max-width:360px){
    .tabs{
        margin:0;
        width:96%;
    }
    .tabs .tabs-list li{
        width:80px;
    }
}



/* footer Area */

#footerNew { padding: 0px; overflow: hidden; min-width: 100vw; background: #464647; min-height: 30vh; min-width: 100%; font-size: 18px; }

#footerNew .left { color: #FFFFFF; background: #9dc3e6; padding-top: 20px; padding-left: 40px; overflow: hidden; background-image: url(../images/footer-bg-new.png); background-size: cover; background-repeat:no-repeat; width: 100%; min-height: 30vh; }

@media (min-width: 768px) {
  .row.equal {
    padding-top: 10px;
	display: flex;
    flex-wrap: wrap;
  }
}

#footerNew .left p { color: #FFFFFF; }
#footerNew .left a { color: #FFFFFF; }
#footerNew .left img { padding-left: 7px; }
#footerNew .left a:hover { }
#footerNew .left h5 { color: #0c2a46; font-size: 20px; font-weight: bold; padding-bottom: 10px; }
#footerNew .middle { color: #FFFFFF; padding-top: 20px; padding-left: 20px; overflow: hidden; background: #1a77a3; min-height: 280px;  }
#footerNew .middle li a { color: #FFFFFF; }
#footerNew .right { padding-top: 20px;  padding-left: 0px; overflow: hidden; background: #bdd7ee; min-height: 280px; text-align: center; }
@media (min-width: 1780px) {
#footerNew .right {
    padding-right: 147px;
  }
}

#footerNew .right p { color: #0c2a46; font-size: 18px; -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: 100%; }
#footerNew .right a { color: #0c2a46; }
#footerNew .right a:hover { }
#footerNew .right li { padding: 0 0 10px 0px; width: auto; border: none; font-size: 16px; }
#footerNew .right h5 { color: #0c2a46; font-size: 20px; font-weight: bold; padding-bottom: 10px; }
 
#footerNew .fa-stack        .fa { color: #FFFFFF; }
#footerNew .fa-stack        .fa.fa-circle-thin { color: black; }
#footerNew .fa-stack        .fa.fa-circle { opacity:1.0; color: #0c2a46; }

#footerNew .fa-stack:hover  .fa { color: #000000; }
#footerNew .fa-stack:hover  .fa.fa-user-plus { color: white; }
#footerNew .fa-stack:hover  .fa.fa-circle-thin { color: green; }
#footerNew .fa-stack:hover  .fa.fa-circle { opacity:1.0; color: #C0C0C0; }
#footerNew .left li { padding: 0 0 10px 0px; width: auto; border: none; font-size: 16px; }
#footerNew .left a { color: #FFFFFF; }
#footerNew .left h5 { color: #FFFFFF; }

/* footer Area */
#footerArea { padding: 0; overflow: hidden; width: 100%; background: #FFFFFF; }
#footerArea .footer-left { padding: 0; overflow: hidden; width: 70%; background: blue; }
#footerArea .footer-right { padding: 0; overflow: hidden; width: 30%; background: green; }


#footerArea .footer_top { padding: 30px 0; border-bottom: 1px solid #464647; width: 100%; background: #353739;  }
#footerArea h4 { color: #0c78be; text-transform: uppercase; font-size: 16px; font-weight: 400; }
#footerArea h5 { color: #fff; text-transform: uppercase; font-size: 15px; margin: 0px; font-weight: 400; }
#footerArea a { color: #0c2a46;  font-size: 13px; font-weight: bold; }
#footerArea p { padding: 10px 0; margin: 0px; color: #0c2a46; float: left; font-size: 14px; line-height: 24px; font-weight: bold; }
#footerArea p a { display: inline; font-size: 14px; }
#footerArea a:hover { color: #C0C0C0; }
#footerArea ul { padding: 0px; list-style: none; }
#footerArea li { width: 100%; float: left; line-height: 40px;  }
#footerArea .photo ul { list-style: none; overflow: hidden; }
#footerArea .photo li { width: 60px; height: 60px; margin: 10px 10px 0 0; float:left; border: none; }
#footerArea .photo li a { display: block; color: #fff; border: 3px solid #212730; }
#footerArea .photo li a img { width: 100%; height: auto; }
#footerArea .photo li a:hover { border-color: #373536; }
#footerArea .footer_bottom { padding: 10px 0; }
#footerArea .footer_bottom ul { margin: 0px; float:right; }
#footerArea .footer_bottom p { margin: 0px; float:left; display: block; }
#footerArea .footer_bottom li { padding: 0 0 0 10px; width: auto; border: none; }


/* BG Area */
#bg_area {
 height: 100vh;
    background-image: url(../images/footer-bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
	.nav-link { font-size: 17px; }
	}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
	.nav-link { font-size: 16px; }
	}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
	.nav-link { font-size: 15px; }
	}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
	.nav-link { font-size: 14px; }
	}
@media only screen and (max-width: 768px) {
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 769px) and (max-width: 999px) {
	.caption-110 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1400px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	 }

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1400px) {

.navbar-nav > li { margin-left:10px; margin-right:10px; }
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 1150px) {

.hide-small { display: none; }

	
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.hide-mobile { display: none; }

	
	}