/*

Template 2078 Adventure

http://www.tooplate.com/view/2078-adventure

*/

/* Body
------------------------------------- */
body {
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  position: relative;
}

html,body {
   overflow-x: hidden;
   font-size: 100%;
   width: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   vertical-align: baseline;
}

img {
vertical-align: middle;
}

/* Typography
------------------------------------- */
h1,h2,h3,h4,h5 {
font-family: 'Raleway', sans-serif;
font-weight: bold;
}

h3 {
color: #525252;
letter-spacing: 1px;
}

h5,h3,h2 {
color: #ffa400;
letter-spacing: 4px;
padding-top: 22px;
}


.heading {
color: #000000;
font-size: 62px;
}

p {
color: #727272;
letter-spacing: 0.9px;
line-height: 28px;
}

a {
outline: none !important;
}

hr {
width: 120px;
}

.color-white {
color: #FFF;
}

.color-white a {
color: #FC3;
}

.color-yellow {
color: #FC3;
}

.color-yellow a {
color: #FC3;
}

/* All Section styles
------------------------------------- */
.section-title {
/*border: 4px solid #000;*/
padding: 50px;
position: relative;
text-align: center;
/*margin-bottom: 92px;*/
}

#about .section-title, #plan .section-title {
border-color: #ffffff;
}

.panel {
background-color: #161616;
border: 0px;
}

.panel-title {
color: #FFF;
}

.panel-body p {
color: #CCC;
}

.medium-icon {
color: #ffa400;
font-size: 36px !important;
font-weight: bold;
}

#work, #about, #servicios,
#portfolio, #plan, #contact {
padding-top: 120px;
padding-bottom: 100px;
}

#servicios, #portfolio, #contact {
text-align: center;
}

.parallax-section {
background-attachment: fixed !important;
background-size: cover !important;
}


/* preloader styles
/* ========================================== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #fff;
}

.sk-rotating-plane {
width: 100px;
height: 20px;
background-color: #00a622;
-webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
        animation: sk-rotatePlane 1.2s infinite ease-in-out; }

@-webkit-keyframes sk-rotatePlane {
0% {
  -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% {
  -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% {
  -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

@keyframes sk-rotatePlane {
0% {
  -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% {
  -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% {
  -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }


/* navigation styles
/* ========================================== */
.custom-navbar {
  background: #000000;
  border: none;
  margin-bottom: 0;
  text-align: center;
}

.custom-navbar .navbar-brand  {
border: none; /*4px solid #ffa400;*/
color: #ffffff;
font-weight: 600;
font-size: 24px;
padding-top: 18px;
}

.custom-navbar .navbar-brand .navbar-toggle {
  background: #ffa400;
   padding: 4px 6px;
  font-size: 16px;
  color: #fff;
}

.custom-navbar .nav li a {
display: block;
padding: 15px 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
}

.custom-navbar .nav li a:hover {
background: transparent;
}

.custom-navbar .nav > li > a:focus {
background-color: transparent;
color: #ffffff;
outline: none;
}

.custom-navbar .nav li.active > a {
border-bottom: 2px solid #ffffff;
}

.custom-navbar .navbar-toggle {
  border: none;
}
.custom-navbar .navbar-toggle .icon-bar {
  background: #ffa400;
  border-color: transparent;
}

/* SUSERTECA TITLE*/
.companyTitle{
font-size: 100px;
}

.sliderImg img{
  width: 40%;
  display:block;
  margin:auto;
}
/* SUSERTECA TITLE*/

/* BxSlider Section Style
/* ========================================== */
.site-slider ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-slider ul li {
float: left;
margin: 0;
}

/* .bx-wrapper img {
opacity: 0.8;
filter: alpha(opacity=80);
}

.bx-wrapper {
background-color: #000000;
} */

.bx-thumbnail-wrapper {
background-color: #161616;
text-align: center;
margin-top: -1px;
position: relative;
}

.caption-wrapper {
position: relative;
}

.slider-caption {
position: absolute;
z-index: 988;
bottom: 140px;
color: #ffffff;
display: inline-block;
right: 0;
left: 0;
text-align: center;
padding: 0 20px 20px 20px;
line-height: 24px;
}
.slider-caption h2 {
font-size: 48px;
font-weight: 600;
display: inline-block;
margin-bottom: 24px;
}
.slider-caption p {
font-size: 26px;
}
.slider-caption img{
  display: inline-block;
  margin-bottom: 25px;
}

#bx-pager a {
margin: 20px 10px 0 20px;
padding: 0 0 40px 0;
display: inline-block;
opacity: 0.4;
filter: alpha(opacity=40);
outline: 0;
border: 0;
}
#bx-pager a.active {
opacity: 1;
filter: alpha(opacity=100);
}
#bx-pager a img {
outline: 0;
border: 0;
}
/* HIDE TO PUT CONTROLS IN THE BOTTOM */
.bx-controls {
position: relative;
}

.bx-controls-direction {
position: absolute;
text-align: right;
bottom: 80px;
right: -2px;
z-index: 998;
}
.bx-controls-direction a {
width: 20px;
height: 40px;
background-color: #00a622;
text-decoration: none;
display: block;
float: left;
margin-right: 2px;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
/* HIDE TO PUT CONTROLS IN THE BOTTOM */

/* work section styles
/* ========================================== */
#productos .col-md-4 {
display: block;
width: 100%;
border: 4px solid transparent;
padding: 42px;
transition: all 0.4s linear;
}

#productos .col-md-4:hover {
border: 4px solid #000000;
}

#productos h3 {
font-size: 16px;
}

#productos .col-md-4 hr {
margin-left: 0;
}


/* about section styles
/* ========================================== */
#nosotros {
background: url('../images/about-bg21.jpg') 50% 0 repeat-y fixed;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
color: #ffffff;
}
#nosotros h2 {
padding-bottom: 20px;
}

#nosotros .panel-group .panel, #nosotros .panel {
border-radius: 0;
}

#nosotros .panel-heading {
background: transparent;
text-transform: uppercase;
padding: 0;
}

#nosotros .panel-title > a {
text-decoration: none;
display: block;
width: 100%;
padding: 10px 15px;
}

#nosotros .about-fact {
margin-top: 82px;
text-align: center;
position: relative;
display: block;
}

#nosotros .border-right {
 border-right: 2px solid rgba(250,250,250,0.8);
}


/* team section styles
/* ========================================== */
#servicios {
background: #f2f2f2;
}

#servicios h3 {
color: #ffa400;
font-size: 14px;
font-weight: bold;
}

#servicios .team-wrapper .team-des {
cursor: pointer;
position: relative;
bottom: 0;
transition: all 0.4s linear;
padding: 62px 22px 62px 22px;
margin-top: 20px;
}

#servicios .team-wrapper:hover .team-des {
background: #ffffff;
bottom: 100px;
}

#servicios .team-wrapper .social-icon li a {
font-size: 16px;
}


/* portfolio section styles
/* ========================================== */
#portfolio .col-md-4 {
padding: 12px;
}

.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/*Icon links2*/

p.icon-links2 a {
float: right;
font-size: 0.8em;
padding-right: 10px;
}
/*Icon links2*/
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
max-width: 100%;
/*   min-width: 320px;
max-width: 480px;
max-height: 360px; */
width: 100%;
cursor: pointer;
text-align: center;
}

.grid figure img {
position: relative;
/*display: block;*/
min-height: 100%;
max-width: 100%;
}

.grid figure figcaption {
padding: 2em;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: rgba(250,250,250,0.6);
color: #ffffff;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
font-size: 22px;
float: left;
position: relative;
bottom: 16px;
}

figure.effect-zoe h2 {
display: inline-block;
}

figure.effect-zoe p.icon-links a {
float: right;
font-size: 1.0em;
/* padding-right: 18px; */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
color: #000000 !important;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}

#portfolio .portfolio-bottom  {
padding-top: 62px;
position: relative;
clear: both;
}

#portfolio .portfolio-bottom h2  {
letter-spacing: 2px;
}

#portfolio .portfolio-bottom .btn {
background: transparent;
border: 4px solid #000000;
border-radius: 0;
color: #000000;
font-weight: bold;
letter-spacing: 2px;
padding: 12px 42px;
margin-top: 40px;
margin-right: 16px;
transition: all 0.4s ease-in-out;
}

#portfolio .portfolio-bottom .btn:hover {
background: #000000;
color: #ffffff;
border-color: transparent;
}


/* plan section styles
/* ========================================== */
#plan {
background: url('../images/plan_bg3.jpg') 50% 0 repeat-y fixed;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
color: #ffffff;
}

#plan .plan {
border: 4px solid #ffffff;
padding: 40px;
transition: all 0.4s linear;
margin-bottom: 20px;
}

#plan .plan:hover {
background: #000000;
border-color: #ffa400;
}

#plan .plan-title {
font-size: 42px;
}

#plan .plan-title, #plan .plan-price {
padding: 16px;
}

#plan small {
color: #ffa400;
}

#plan .plan-list li {
padding: 10px 0 10px 0;
}

#plan .plan-button .btn {
background: transparent;
border: 4px solid #ffffff;
border-radius: 0;
color: #ffffff;
font-weight: bold;
letter-spacing: 2px;
padding: 12px 42px;
margin-top: 40px;
margin-right: 16px;
transition: all 0.4s ease-in-out;
}

#plan .plan-button .btn:hover {
background: #ffffff;
color: #ffa400;
border-color: transparent;
}


/* contact section styles
/* ========================================== */
#contact .medium-icon {
color: #ffa400;
padding-top: 10px;
padding-right: 10px;
}

#contact .form-control {
background: transparent;
border-radius: 0;
box-shadow: none;
margin-top: 10px;
margin-bottom: 10px;
transition: all 0.4s ease-in-out;
}

#contact .form-control:focus {
border-color: #ffa400;
}

#contact input {
height: 54px;
}

#contact input[type="submit"] {
background: #000000;
border: 4px solid transparent;
color: #ffffff;
letter-spacing: 1px;
margin-top: 18px;
height: 58px;
}

#contact input[type="submit"]:hover {
background: transparent;
border-color: #000000;
color: #000000;
}

#contact .contact-detail {
background: #ffffff;
border: 4px solid #000000;
position: relative;
top: 40px;
}

#contact .contact-detail .col-md-6 {
padding: 82px;
}

#contact .contact-detail .col-md-6:first-child {
border-right: 4px solid #000000;
}


/* footer section styles
/* ========================================== */
footer {
background: #f9f9f9;
text-align: center;
padding-top: 40px;
padding-bottom: 30px;
}

footer h2 {
border: 4px solid #000000;
display: inline-block;
padding: 12px 32px 12px 32px;
margin-bottom: 32px;
}

.social-icon {
padding: 0;
margin: 0;
}

.social-icon li {
list-style: none;
display: inline-block;
padding: 6px;
}

.social-icon li a {
color: #000000;
font-size: 20px;
font-weight: 300;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease-in-out;
margin: 0 8px 14px 8px;
}

.social-icon li a:hover {
background: #000000;
color: #ffffff;
}
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}

/* Replace the last selector for the type of element you have in
 your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
 if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
   block of code. It's just a nice feature that prevent the images from
   accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

#makeMeScrollable div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
/*Custom designs*/
.productItems{
/*display: table;*/
padding: 0px;
}
.productImages{
margin-bottom: 10px;
padding-bottom: 20px;
}
#scrollBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from th∫e right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #00a622; /* Set a background color */
color: white !important; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}

/*----------------------------------------
  6.Faq Area
----------------------------------------*/

.faq-details .panel-heading {
  padding: 0;
}

.panel-default>.panel-heading {
  background-color: #ffffff !important;
  border: medium none;
  color: #333;
}

.faq-details h4.check-title a {
  color: #333;
  display: block;
  font-weight: 700;
  letter-spacing: 2px;
  margin-left: 40px;
  padding: 6px 10px;
  text-decoration: none;
}

.panel-body {
  padding: 15px 15px 0px 50px;
}

.faq-details h4.check-title {
  color: #444;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0;
}

.faq-details a span.acc-icons {
  position: relative;
}

.faq-details a span.acc-icons::before {
  color: #333;
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.faq-details h4.check-title a.active, .faq-details a.active span.acc-icons::before {
  color: #b5880b;
}

.faq-details a.active span.acc-icons::before {
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  background-color: white;
}

/* a:focus {
  outline: 0px solid;
}
a:hover {
  color: #b5880b;/ *#b5880b * /
  text-decoration: none;
}

a:active, a:hover {
  outline: 0 none;
} */

/*------------------------------------------------------
RESPONSIVE STYLES
--------------------------------------------------------*/
@media(min-width:768px) {

  .custom-navbar {
       border-bottom: 1px solid rgba(250,250,250,0.3);
      padding: 16px;
     background: 0 0;
  }

  .custom-navbar.top-nav-collapse {
     padding: 16px;
    background: #000000;
    border-bottom: 0;
  }
}

@media (max-width: 767px) {

 .custom-navbar .nav li.active > a {
      border-bottom: 2px solid transparent !important;
      color: #ffa400;
  }

}
/*
@media (max-width: 1366px) {
/ *  .bx-thumbnail-wrapper {
  display: none;
} * /

.slider-caption {
  bottom: 160px !important;
}

/ *   .bx-controls-direction {
  bottom: 30px;
}  * /
}*/

/* @media (max-width: 1200px) {
.bx-thumbnail-wrapper {
  display: none;
}

/ *   .bx-controls-direction {
  bottom: 30px;
} * /
} */

@media screen and (min-width: 1201px) and (max-width: 1440px)  {
    @media screen and (min-width: 1201px) and (max-width: 1350px)  {
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: -55px;
      }
      .sliderImg {
        bottom: 20px;
        line-height: 18px;
      }
    }
    @media screen and (min-width: 1351px) and (max-width: 1440px)  {
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: -65px;
      }
      .sliderImg {
        bottom: 10px;
        line-height: 24px;
      }
    }

  .row i{
    display: none;
  }
  #scrollBtn{
    font-size: 14px !important;
  }
  .slider-caption h2 {
  font-size: 32px;
  }
  .slider-caption p {
    font-size: 24px;
    line-height: 24px;
    color: #FFFFFF;
  }
  .slider-caption img{
    width: 35%;
    height: 35%;
    align-items: center;
    display: inline-block;
    margin-bottom: 25px;
  }

  .grid img {
    width: 400px;
    height: 250px;
  }
  .productOne img{
    height: 70%;
    width: 70%;
  }
  .productTwo img{
    height: 60%;
    width: 60%;
  }
  .productThree img{
    height: 40%;
    width: 40%;
  }
  .productFour img{
    height: 65% !important;
    width: 65% !important;
    margin-top: 20px;
  }

  .bx-wrapper img{
    display: initial;
  }
  .custom-navbar .navbar-brand {
    font-size: 18px !important;
  }
  .custom-navbar .nav li a {
    font-size: 14px;
  }

  .heading {
    font-size: 36px;
  }
}
@media screen and (min-width: 981px) and (max-width: 1200px)  {
    @media screen and (min-width: 981px) and (max-width: 991px)  {
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: -85px;
      }
    }
    @media screen and (min-width: 992px) and (max-width: 1200px)  {
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: -15px;
      }
      .custom-navbar .nav li a {
        display: flow-root;
      }
      .slider-caption p {
        line-height: 24px !important;
        color: #FFFFFF;
      }
    }
  .sliderImg {
    bottom: -40px;
  }

  .row i{
    display: none;
  }
  #scrollBtn{
    font-size: 12px !important;
  }
  .slider-caption h2 {
  font-size: 32px;
  }
  .slider-caption p {
    font-size: 18px;
    line-height: 14px;
    color: #FFFFFF;
  }
  .slider-caption img{
    width: 30%;
    height: 30%;
    align-items: center;
    display: inline-block;
    margin-bottom: 20px;
  }
  .grid img {
    width: 450px;
    height: 300px;
  }
  .productOne img{
    height: 70%;
    width: 70%;
  }
  .productTwo img{
    height: 60%;
    width: 60%;
  }
  .productThree img{
    height: 40%;
    width: 40%;
  }
  .productFour img{
    height: 65% !important;
    width: 65% !important;
    margin-top: 20px;
  }

  .bx-wrapper img{
    display: initial;
  }
   .custom-navbar .navbar-brand {
    font-size: 18px !important;
  }
  .custom-navbar .nav li a {
    font-size: 14px;
  }

  .heading {
    font-size: 36px;
  }

}

@media screen and (min-width: 768px) and (max-width: 980px)  {
  @media screen and (min-width: 768px) and (max-width: 820px)  {
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 15px;
      font-size: 14px;
     }
     .sliderImg {
      bottom: -100px;
    }
  }
  @media screen and (min-width: 821px) and (max-width: 980px)  {
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: -10px;
      font-size: 14px;
     }
     .sliderImg {
      bottom: -80px;
    }
  }
  .custom-navbar .nav li a {
    font-size: 11px;
  }

  h5 {
    font-size: 11px;
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
    .site-slider {
      padding-top: 50px;
    }

    #plan .plan {
      padding-right: 0;
      margin: 54px auto 54px auto;
      width: 360px;
    }
    .heading {
      font-size: 32px;
    }

    .slider-caption img{
      width: 30%;
      height: 30%;
      align-items: center;
      display: inline-block;
      margin-bottom: 15px;
    }
    .slider-caption p{
      font-size: 16px;
      line-height: 12px;
      color: #FFFFFF;
    }

    .row i{
      display: none;
    }
    #scrollBtn{
      font-size: 14px !important;
    }
    .productOne img{
      height: 40%;
      width: 40%;
      margin-top: 0px !important;
    }
    .productTwo img{
      height: 40%;
      width: 40%;
    }
    .productThree img{
      height: 25%;
      width: 25%;
    }
    .productFour img{
      height: 35% !important;
      width: 35% !important;
      margin-top: 20px;
    }
    .grd img{
      width: 402px !important;
      height: 306px !important;
    }
/*     .grid img {
      width: 250px !important;
      height: 200px !important;
    } */
  }
/*   @media(min-width:768px) {

  .custom-navbar {
      border-bottom: 1px solid rgba(250,250,250,0.3);
      padding: 16px;
    background: 0 0;
  }

  .custom-navbar.top-nav-collapse {
    padding: 16px;
    background: #000000;
    border-bottom: 0;
  }
} */

/* @media (max-width: 767px) {

.custom-navbar .nav li.active > a {
    border-bottom: 2px solid transparent !important;
    color: #ffa400;
}

} */

@media screen and (min-width: 503px) and (max-width: 767px)  {

  @media screen and (min-width: 503px) and (max-width: 680px)  {
    .productOne img{
      height: 50%;
      width: 50%;
      margin-top: 0px !important;
    }
    .productTwo img{
      height: 50%;
      width: 50%;
    }
    .productThree img{
      height: 30%;
      width: 30%;
    }
    .productFour img{
      height: 45% !important;
      width: 45% !important;
      margin-top: 20px;
    }
  }
  @media screen and (min-width: 681px) and (max-width: 767px)  {
    .productOne img{
      height: 40%;
      width: 40%;
      margin-top: 0px !important;
    }
    .productTwo img{
      height: 40%;
      width: 40%;
    }
    .productThree img{
      height: 25%;
      width: 25%;
    }
    .productFour img{
      height: 35% !important;
      width: 35% !important;
      margin-top: 20px;
    }
  }
  .sliderImg {
    bottom: -180px;
  }

  .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 15px;
    font-size: 14px;
   }

   h5 {
    font-size: 11px;
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .heading {
    font-size: 32px;
  }

  #plan .plan {
    width: 310px;
  }
  .slider-caption img{
    width: 25%;
    height: 25%;
    align-items: center;
    display: inline-block;
    margin-bottom: 10px;
  }
  .slider-caption p{
    font-size: 16px;
    line-height: 12px;
    color: #FFFFFF;
  }

  .row i{
    display: none;
  }
  #scrollBtn{
    font-size: 12px !important;
  }
  .grd img{
    width: 402px !important;
    height: 306px !important;
  }
}

@media screen and (min-width: 413px) and (max-width: 502px)  {

  .sliderImg {
    bottom: -220px;
  }
  .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 15px;
    font-size: 14px;
   }
   h5 {
    font-size: 11px;
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .heading {
    font-size: 32px;
  }
  .slider-caption img{
    width: 30%;
    height: 30%;
    align-items: center;
    display: inline-block;
    margin-bottom: 10px;
  }
  .slider-caption p{
    font-size: 12px;
    line-height: 12px;
    color: #FFFFFF;
  }

  .row i{
    display: none;
  }
  #scrollBtn{
    font-size: 12px !important;
  }
  .grd img{
    width: 382px !important;
    height: 286px !important;
  }
  .productOne img{
    height: 50%;
    width: 50%;
    margin-top: 0px !important;
  }
  .productTwo img{
    height: 50%;
    width: 50%;
  }
  .productThree img{
    height: 30%;
    width: 30%;
  }
  .productFour img{
    height: 45% !important;
    width: 45% !important;
    margin-top: 20px;
  }
}


@media screen and (min-width: 300px) and (max-width: 412px) {
  .sliderImg {
    bottom: -225px;
  }
  .heading {
    font-size: 24px;
  }

  h5 {
    font-size: 11px;
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .slider-caption img{
    width: 25%;
    height: 25%;
    align-items: center;
    display:block;
    margin:auto;
  }
  .slider-caption p{
    font-size: 12px;
    line-height: 12px;
    color: #FFFFFF;
  }
  .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 15px;
    font-size: 14px;
   }
  .row i{
    display: none;
  }
  #scrollBtn{
    font-size: 12px !important;
  }
/*   .grid img {
    width: 350px;
    height: 250px;
  } */
  .grd img{
    width: 382px !important;
    height: 286px !important;
  }
  .productOne img{
    height: 40%;
    width: 40%;
    margin-top: 0px !important;
  }
  .productTwo img{
    height: 40%;
    width: 40%;
  }
  .productThree img{
    height: 20%;
    width: 20%;
  }
  .productFour img{
    height: 35% !important;
    width: 35% !important;
    margin-top: 20px;
  }
}