/*--------------------------------------------------------------
   RESET
--------------------------------------------------------------*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
   display: block
}

pre {
   white-space: pre-wrap
}

small {
   font-size: 80%
}






/*--------------------------------------------------------------
   BASE
--------------------------------------------------------------*/

html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth
}

body {
   font-family:'MaisonNeue-Medium',sans-serif !important;
   margin: 0;
   padding: 0;
   letter-spacing: 0px
}
p {font-family:'MaisonNeue-Medium',sans-serif !important;}

svg:not(:root) {
   overflow: hidden
}

.clear {
   clear: both
}

.hideclear {
   display: none
}

.row:after {
   content: "";
   display: table;
   clear: both
}

::-webkit-scrollbar {
   width: 15px
}

::-webkit-scrollbar-track {
   background: #fff
}

::-webkit-scrollbar-thumb {
   background: #DBDBDB;
   border-radius: 50px;
   transition: .3s ease
}






/*--------------------------------------------------------------
   ANIMATION
--------------------------------------------------------------*/

@keyframes flash {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0
   }

   100% {
      opacity: 1
   }
}

@-o-keyframes flash {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0
   }

   100% {
      opacity: 1
   }
}

@-moz-keyframes flash {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0
   }

   100% {
      opacity: 1
   }
}

@-webkit-keyframes flash {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0
   }

   100% {
      opacity: 1
   }
}






/*--------------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------------*/

@font-face {
   font-family: 'MaisonNeue-Demi';
   src: local('MaisonNeue-Demi'), url("../webfonts/MaisonNeue-Demi.ttf")format('opentype')
}

@font-face {
   font-family: 'MaisonNeue-Medium';
   src: local('MaisonNeue-Medium'), url("../webfonts/MaisonNeue-Medium.ttf")format('opentype')
}

@font-face {
   font-family: 'MaisonNeue-Light';
   src: local('MaisonNeue-Light'), url("../webfonts/MaisonNeue-Light.ttf")format('opentype')
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   padding: 0;
   font-family:'MaisonNeue-Demi',sans-serif !important;
}

h1 {
   font-size: 45px;
   color: #232323;
   font-weight: 600;
   text-transform: uppercase
}

p {
   margin: 0;
   font-weight: 200;
   font-size: 14px;
   line-height: 30px
}

a {
   text-decoration: none;
   font-size: 14px;
   font-weight: 200;
   transition: .3s ease
}

i {
   transition: .3s ease
}

.black-title {
   color: #232323;
   margin-bottom: 70px
}

.black-text {
   color: #757575;
}

.white-title {
   color: #fff;
   margin-bottom: 70px
}

.white-text {
   color: rgba(255, 255, 255, 0.8)
}

.green-text {
   display: inline-block;
   text-transform: uppercase;
   font-size: 16px;
   color: #1B882B;
   margin-bottom: 40px;
   font-family: 'MaisonNeue-Demi', sans-serif !important
}






/*--------------------------------------------------------------
   HEADER
--------------------------------------------------------------*/

header {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 99;
   box-shadow: 0px 9px 26px -7px rgb(0 0 0 / 7%);
   background: #fff
}

.top-headernew {
   padding: 0 50px;
   text-align: right;
   background: #0051C1;
   transition: .3s ease
}

.top-headernew a {
   color: #fff !important;
   margin-right: 30px;
   font-family: 'MaisonNeue-Demi', sans-serif !important;
   padding: 20px 0;
   display: inline-block
}

.top-headernew a:hover {
   opacity: .7 !important
}

.top-headernew i {
   margin-right: 10px
}

.bottom-headernew {
   padding: 0 50px
}

.header-left,
.header-right {
   float: left;
   width: 45%
}

.header-right {
   text-align: right
}

.header-center {
   float: left;
   width: 10%;
   text-align: center
}

.header-center img {
   width: auto;
   max-width: 150px;
   padding-top: 40px;
   transition: .3s ease
}

.header-spacer {
   height: 120px
}

.shrink a {
   padding: 40px 40px 30px 40px !important
}

.imgshrink img {
   padding-top: 20px;
   max-width: 130px
}

.topshrink a {
   padding: 10px 0
}






/*--------------------------------------------------------------
   NAVIGATION
--------------------------------------------------------------*/

#menu-button {
   display: none
}

.mobile {
   display: none
}

.primary {
   padding: 0;
   display: block;
   width: 100%;
   background: transparent
}

.primary ul {
   margin: 0;
   padding: 0
}

.primary ul li {
   display: inline-block;
   list-style-type: none
}

.primary ul li a {
   color: #232323;
   display: block;
   padding: 65px 50px 50px 50px;
   font-family: 'MaisonNeue-Demi', sans-serif !important;
   text-transform: uppercase;
   text-decoration: none;
}

.primary ul li a:hover {
   background: #F7F7F7
}

.primary ul li a:active {
   background: #F7F7F7
}

.primary ul li i {
   color: #0051C1 !important
}

.primary ul.list {
   background: #F7F7F7;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
   box-shadow: 0 2px 7px rgb(0 0 0 / 4%), -7px 2px 7px rgb(0 0 0 / 4%), 7px 2px 7px rgb(0 0 0 / 4%);
   position: absolute;
   z-index: 999;
   border: 0px !important
}

.primary ul.list li {
   display: block;
   width: 300px;
   list-style-type: none
}

.primary ul.list li a {
   line-height: 16px;
   padding: 25px 20px !important;
   color: #232323 !important;
   display: block;
   text-align: left;
   -webkit-transition: all .3s ease-in-out !important;
   transition: all .3s ease-in-out !important;
   border-right: none;
   border-left: 5px solid #F7F7F7;
   border-top: #E7E7E7 solid 1px
}

.primary ul.list li a:hover {
   border-left-color: #0051C1;
   background: rgba(255, 255, 255, 0.6)
}

.primary ul ul {
   display: none;
   position: absolute
}

.primary ul ul ul {
   position: absolute;
   left: 100%;
   top: 0
}

.primary ul li:hover>ul {
   display: block;
   line-height: 18px
}

.primary ul ul li {
   float: none;
   width: 230px;
   position: relative
}






/*--------------------------------------------------------------
   DEFAULT
--------------------------------------------------------------*/

/* hero */
.hero-img {
   position: absolute;
   min-width: 100%;
   min-height: 100%;
   top: 40%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%)
}

.hero-wrapper {
   height: 39vw
}

.hero {
   height: 100%;
   overflow: hidden;
   width: 100%;
   background: #000;
   position: fixed
}

.hero-content {
   margin-top: 15vw;
   position: relative
}

.hero-content h2 {
   color: #fff !important;
   font-size: 1vw;
   margin-bottom: 40px;
   margin-left: 50px;
   text-transform: uppercase
}

.search-section {
   padding: 30px;
   background: #fff;
   box-shadow: 0 0 15px rgb(0 0 0 0.6);
   border-top-right-radius: 200px;
   border-bottom-right-radius: 200px;
   width: 30%
}


/* intro */
.info-left {
   width: 40%;
   float: left
}

.info-right {
   width: 60%;
   float: right;
   position: relative
}

.info-image {
   height: 600px;
   width: 600px;
   border-radius: 400px;
   background-image: url("../siteart/intro.jpg");
   background-size: cover;
   position: absolute;
   top: -100px;
   right: 75px;
   z-index: 9
}

.info-image-wrap {
   width: 650px;
   height: 650px;
   background: rgba(0, 81, 193, 0.2);
   border-radius: 400px;
   position: absolute;
   top: -125px;
   right: 50px
}


/* categories */
.image-section-wrap {
   display: block;
   background: #fff;
   position: relative;
   overflow: hidden
}

.img-col {
   width: 33.33%;
   float: left;
   background-size: cover;
   background-position: bottom center;
   height: 50vw;
   position: relative;
   transition: .3s ease
}

.ag {
   background-image: url("../siteart/ag.jpg")
}

.construction {
   background-image: url("../siteart/contstruction.jpg")
}

.attachments {
   background-image: url("../siteart/attachments.jpg")
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   background: rgba(0, 0, 0, .05);
   transition: .3s ease
}

.img-text {
   position: absolute;
   z-index: 9;
   color: #fff;
   transition: .5s ease;
   top: 18vw;
   left: 0;
   right: 0;
   text-align: center
}

.img-col h1 {
   transition: .5s ease;
   color: #fff !important;
   font-size: 30px !important
}

.img-col p {
   color: #fff !important
}

.img-col i {
   font-size: 30px !important;
   margin-top: 20px;
   opacity: 0;
   color: #58DE6B !important
}

.img-col:hover .overlay {
   background: rgba(0, 0, 0, 0.2)
}

.img-col:hover .img-text {
   top: 17vw
}

.img-col:hover i {
   opacity: 1
}


/* contact */
.contact-left {
   width: 60%;
   float: left;
   position: relative
}

.contact-link {
   color: #232323 !important;
   margin-right: 30px;
   display: inline-block
}

.contact-link:hover {
   opacity: .7
}

.contact-right i {
   margin-right: 10px
}

.contact-right {
   width: 40%;
   float: right;
   text-align: left !important
}

.contact-map {
   height: 600px;
   width: 600px;
   border-radius: 400px;
   background-size: cover;
   position: absolute;
   top: -100px;
   left: 75px;
   z-index: 9
}

.contact-map iframe {
   border-radius: 400px
}

.contact-map-wrap {
   width: 650px;
   height: 650px;
   background: rgba(0, 81, 193, 0.2);
   border-radius: 400px;
   position: absolute;
   top: -125px;
   left: 50px
}






/*--------------------------------------------------------------
   SUBPAGES
--------------------------------------------------------------*/

/* base */
.page-wrapper {
   display: block;
   overflow: auto;
   position: relative;
   padding: 150px 100px;
   background: #fff
}

.page-banner {
   display: block;
   overflow: auto;
   padding: 12vw 10px;
   background-image: url("../siteart/banner.jpg");
   background-size: cover;
   background-position: 50% 150%;
   background-attachment: fixed
}

.page-banner h1 {
   position: fixed;
   margin-left: 100px;
   margin-top: -20px
}

.green-circle {
   height: 7px;
   width: 7px;
   border-radius: 50px;
   background: #58DE6B;
   display: inline-block;
   margin-right: 7px;
   margin-bottom: 2px;
   -webkit-animation: flash 3s infinite;
   -moz-animation: flash 3s infinite;
   -o-animation: flash 3s infinite;
   animation: flash 3s infinite
}

.black-button {
   border: 1px solid #232323;
   padding: 5px 15px;
   color: #232323;
   border-radius: 50px;
   margin-top: 30px;
   display: inline-block
}

.black-button:hover {
   opacity: 1 !important;
   padding: 5px 20px
}


/* swoop */
.swoop {
   overflow-x: hidden;
   position: relative
}

.swoop:before {
   background-size: 100%;
   background-repeat: no-repeat;
   content: "";
   height: 100%;
   left: 0;
   position: absolute;
   top: -5vw;
   width: 102%
}

.swoop2 {
   overflow-x: hidden;
   position: relative
}

.swoop2:before {
   background-size: 100%;
   background-repeat: no-repeat;
   content: "";
   height: 100%;
   left: 0;
   position: absolute;
   top: -5vw;
   width: 102%
}

.swoop3 {
   overflow-x: hidden;
   position: relative
}

.swoop3:before {
   background-size: 100%;
   background-repeat: no-repeat;
   content: "";
   height: 100%;
   left: 0;
   position: absolute;
   top: -5vw;
   width: 102%
}

.white-swoop-wrap {
   color: #232323;
   padding-top: 2rem;
   margin-top: -150px
}

.white-swoop-wrap:before {
   background-image: url("/siteart/swoop.svg")
}

.white-swoop-wrap2 {
   color: #232323;
   padding-top: 2rem;
   margin-top: -150px
}

.white-swoop-wrap2:before {
   background-image: url("/siteart/swoop.svg")
}

.white-swoop-wrap3 {
   color: #232323;
   padding-top: 2rem;
   margin-top: -150px
}

.white-swoop-wrap3:before {
   background-image: url("/siteart/swoop.svg")
}

.info-wrap {
   background: #fff;
   margin-top: 150px;
   padding-top: 250px;
   padding-bottom: 400px;
   overflow: hidden
}

.info-wrap2 {
   background: #fff;
   margin-top: 150px;
   padding-top: 250px;
   padding-bottom: 400px;
   overflow: hidden
}

.page-wrap {
   background: #fff;
   margin-top: 150px;
   padding-top: 50px;
   padding-bottom: 200px;
   overflow: hidden
}


/* categories */
.category-wrap {
   display: block;
   overflow: auto;
   width: auto;
   max-width: 1400px;
   margin: 0 auto
}

.category-row {
   width: 33.33%;
   float: left
}

.category-container {
   position: relative;
   width: 400px;
   height: 400px;
   margin: 20px auto;
   transition: transform .2s
}

.cat-title {
   position: absolute;
   z-index: 11;
   font-size: 20px;
   top: 180px;
   left: 0;
   right: 0;
   text-align: center;
   text-transform: uppercase;
   color: #fff
}

.cat-image {
   border-radius: 400px;
   background-size: cover;
   position: absolute;
   z-index: 9;
   top: 20px;
   left: 20px;
   right: 20px;
   bottom: 20px;
   background-position: center;
   filter: brightness(90%)
}

.cat-image-wrap {
   width: 100%;
   height: 100%;
   background: rgba(0, 81, 193, 0.2);
   border-radius: 400px;
   position: absolute
}

.all {
   background-image: url("../siteart/ag.jpg")
}

.attachments {
   background-image: url("../siteart/attachments.jpg")
}

.tractor {
   background-image: url("../siteart/tractor.jpg")
}

.tillage {
   background-image: url("../siteart/tillage.jpg")
}

.chemical {
   background-image: url("../siteart/chemical.jpeg")
}

.hay {
   background-image: url("../siteart/hay.jpeg")
}

.harvest-eq {
   background-image: url("../siteart/harvest-eq.jpeg")
}

.fertilizer {
   background-image: url("../siteart/fertilizer.jpg")
}

.planting {
   background-image: url("../siteart/planting.jpeg")
}

.category-container:hover {
   transform: scale(1.05)
}


/* contact */
.main-contact-info {
   background: #fff;
   box-shadow: 0 0 15px rgb(0 0 0 / 7%);
   display: block;
   overflow: auto;
   margin-bottom: 200px;
   border-radius: 20px;
   height: 500px
}

.contact-page-left {
   width: 30%;
   float: left;
   position: relative
}

.contact-link {
   color: #232323 !important;
   margin-right: 30px;
   display: inline-block
}

.contact-link:hover {
   opacity: .7
}

.contact-page-left i {
   margin-right: 10px
}

.quick-contact {
   padding: 100px 50px 0
}

.contact-page-right {
   width: 70%;
   float: right;
   height: 500px
}

.contact-page-right iframe {
   margin-bottom: -10px
}

.form-wrapper {
   margin-top: 120px
}


/* custom projects */
.project-wrap {
   display: block;
   overflow: auto;
   margin: 130px auto 0 auto;
   width: auto;
   max-width: 1400px
}

.project-col {
   float: left;
   width: 33.33%
}

.project-img {
   margin: 5px
}

.project-img img {
   width: 100%
}






/*--------------------------------------------------------------
   FOOTER
--------------------------------------------------------------*/

.footer-wrap {
   position: relative;
   background: #F7F7F7;
   padding: 40px 50px 30px
}

.footer-left {
   float: left
}

.footer-right {
   float: right
}

.footer-right a,
.footer-right p {
   color: #232323 !important
}

.footer-right a:hover {
   opacity: .7 !important
}

.footer-right i {
   margin-left: 30px
}

.footer-spacer {
   height: 300px
}






/*--------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------*/

@media screen and (max-width:1720px) {

   /* nav */
   .primary ul li a {
      padding: 65px 30px 50px 30px
   }

   .shrink a {
      padding: 40px 20px 30px 20px !important
   }


   /* swoop */
   .info-wrap {
      padding-bottom: 300px
   }

   .info-wrap2 {
      padding-bottom: 300px
   }


   /* default */
   .info-image {
      height: 450px;
      width: 450px;
      top: -45px;
      right: 75px
   }

   .info-image-wrap {
      width: 500px;
      height: 500px;
      top: -70px;
      right: 50px
   }

   .contact-map {
      height: 450px;
      width: 450px;
      top: -45px;
      left: 75px
   }

   .contact-map-wrap {
      width: 500px;
      height: 500px;
      top: -70px;
      left: 50px
   }


   /* subpages */
   .map {
      height: 450px;
      width: 450px;
      top: -45px;
      right: 75px
   }

   .map-wrap {
      width: 500px;
      height: 500px;
      top: -70px;
      right: 50px
   }
}






@media screen and (max-width:1470px) {

   /* header */
   .top-headernew {
      padding: 0 30px
   }

   .header-center img {
      padding-top: 35px
   }

   .primary ul li a {
      padding: 55px 20px 50px 20px
   }

   .shrink a {
      padding: 35px 15px 30px 15px !important
   }

   .imgshrink img {
      padding-top: 13px
   }


   /* subpages */
   .category-container {
      width: 300px;
      height: 300px;
      margin: 10px auto
   }

   .cat-title {
      font-size: 17px;
      top: 130px
   }
}






@media screen and (max-width:1410px) {

   /* default */
   .info-left {
      width: 60%
   }

   .info-right {
      width: 40%
   }

   .info-image {
      height: 300px;
      width: 300px;
      top: 0px;
      right: -15px
   }

   .info-image-wrap {
      width: 350px;
      height: 350px;
      top: -25px;
      right: -40px
   }

   .contact-left {
      width: 40%
   }

   .contact-right {
      width: 60%
   }

   .contact-map {
      height: 300px;
      width: 300px;
      top: 0px;
      left: -15px
   }

   .contact-map-wrap {
      width: 350px;
      height: 350px;
      top: -25px;
      left: -40px
   }


   /* subpages */
   .swoop:before {
      top: 0
   }

   .white-swoop-wrap {
      margin-top: -80px
   }

   .white-swoop-wrap2 {
      margin-top: -135px
   }

   .white-swoop-wrap3 {
      margin-top: -100px
   }

   .page-wrapper {
      padding: 100px
   }

   .info-wrap {
      padding: 100px 100px 150px
   }

   .info-wrap2 {
      padding-top: 100px;
      padding-bottom: 100px;
      margin-top: 70px
   }
}






@media screen and (max-width:1280px) {

   /* subpages */
   .contact-page-left {
      width: 40%
   }

   .contact-page-right {
      width: 60%
   }
}






@media screen and (max-width:1330px) {

   /* typography */
   h1 {
      font-size: 25px
   }

   p {
      font-size: 13px;
      line-height: 30px
   }

   a {
      font-size: 13px
   }

   .black-title {
      margin-bottom: 40px
   }

   .white-title {
      margin-bottom: 40px
   }

   .green-text {
      font-size: 15px;
      margin-bottom: 20px
   }

   input,
   textarea,
   textarea_comment,
   select {
      font-size: 13px
   }

   .CaptchaMessagePanel {
      font-size: 13px
   }


   /* header */
   .header-center {
      width: auto;
      text-align: left
   }

   .header-center img {
      padding-top: 5px;
      max-width: 100px
   }

   .header-right {
      float: right;
      width: auto;
      padding-top: 10px
   }

   .bottom-headernew {
      padding: 0 30px
   }

   .top-headernew span {
      display: none
   }

   .top-headernew a {
      margin-right: 0;
      padding: 10px 0
   }

   .top-headernew i {
      margin-right: 0;
      margin-left: 15px
   }

   .shrink a {
      padding: 0 !important
   }

   .imgshrink img {
      padding-top: 5px;
      max-width: 100px
   }


   /* navigation */
   nav.primary ul {
      display: none
   }

   #menu-button {
      display: block;
      position: relative;
      z-index: 10;
      cursor: pointer;
      transition: .3s ease;
      margin-top: -5px
   }

   #menu-button a {
      color: #232323;
      font-size: 27px
   }

   nav.mobile {
      display: block;
      position: fixed;
      top: 0;
      left: -300px;
      width: 300px;
      height: 100%;
      background: #fff;
      z-index: 500;
      overflow: auto;
      box-shadow: 0px 9px 26px -7px rgb(0 0 0 / 10%)
   }

   nav.mobile .mobile_top {
      position: relative;
      display: block;
      padding: 0;
      margin: 45px 0px 10px 0px;
      color: #999;
      font-size: 18px;
      font-weight: 400
   }

   nav.mobile .menu-toggle {
      position: absolute;
      padding: 3px 8px 3px;
      font-family: Arial, sans-serif;
      font-size: 25px;
      font-weight: thin;
      line-height: 1;
      color: #232323 !important;
      text-decoration: none;
      top: -33px;
      z-index: 9999;
      right: 10px;
   }

   nav.mobile ul {
      list-style: none;
      padding: 0px !important;
      padding-inline-start: 0px !important
   }

   ul.mobile-list {
      background: #f7f7f7 !important
   }

   ul.mobile-list li a {
      transition: .3s ease;
      border-bottom: 1px solid #E2E2E2 !important;
      border-left: 5px solid #f7f7f7 !important
   }

   ul.mobile-list li a:hover {
      border-left-color: #0051C1 !important;
      background: #fff !important
   }

   nav.mobile ul li {
      position: relative;
      padding: none !important;
      transition: .3s ease
   }

   nav.mobile ul li a:hover {
      border-left-color: #0051C1;
      background: #f7f7f7
   }

   nav.mobile ul li a {
      position: relative;
      display: block;
      font-size: 13px;
      border-left: 5px solid #fff;
      border-bottom: 1px solid #eee;
      color: #232323 !important;
      text-transform: uppercase;
      text-decoration: none;
      font-family: 'MaisonNeue-Demi', sans-serif !important;
      padding: 20px 10px
   }

   nav.mobile ul li .fa-chevron-down {
      color: #232323 !important;
      font-size: 11px;
      margin-top: -3px
   }


   /* default */
   .search-section {
      display: none
   }

   .header-spacer {
      height: 80px
   }

   .info-left {
      width: 100%;
      float: none
   }

   .info-right {
      display: none
   }

   .img-col h1 {
      font-size: 20px !important
   }

   .img-col i {
      font-size: 20px !important;
      margin-top: 10px
   }

   .contact-right {
      width: 100%;
      float: none
   }

   .contact-left {
      display: none
   }


   /* subpages */
   .page-banner h1 {
      margin-left: 50px
   }

   .category-row {
      width: 50%
   }

   .page-wrap {
      margin-top: 60px
   }

   .category-container {
      width: 95%;
      height: 37vw;
      margin: 10px auto
   }

   .cat-title {
      font-size: 15px;
      top: 45%
   }

   .main-contact-info {
      margin-bottom: 150px;
      height: 300px
   }

   .contact-page-left {
      width: 50%
   }

   .contact-page-left i {
      margin-right: 10px
   }

   .quick-contact {
      padding: 70px 30px 0
   }

   .contact-page-right {
      width: 50%;
      height: 300px
   }

   .form-wrapper {
      margin: 20px auto 0 auto !important
   }

   .project-wrap {
      margin: 50px auto 0 auto
   }


   /* footer */
   .footer-wrap {
      padding: 20px 30px
   }

   .footer-right i {
      margin-left: 10px;
      margin-top: 7px
   }

   .footer-spacer {
      height: 500px
   }
}






@media screen and (max-width:1030px) {

   /* default */
   .image-section-wrap {
      z-index: 9
   }

   .img-col {
      width: 100%;
      float: none;
      height: 27vw;
      background-position: 50% 50%
   }

   .img-text {
      top: 11vw
   }

   .img-col:hover .img-text {
      top: 10vw
   }


   /* subpages */
   .white-swoop-wrap2:before {
      display: none
   }

   .info-wrap {
      margin-top: 90px
   }

   .info-wrap2 {
      margin-top: 100px
   }
}






@media screen and (max-width:800px) {

   /* content */
   .page-wrapper {
      padding: 70px 50px
   }


   /* subpages */
   .white-swoop-wrap3 {
      margin-top: -60px
   }

   .page-banner {
      padding: 17vw 10px
   }

   .category-container {
      width: 95%;
      height: 38vw
   }

   .cat-title {
      top: 42%
   }

   .cat-image {
      top: 10px;
      bottom: 10px;
      right: 10px;
      left: 10px
   }
}






@media screen and (max-width: 700px) {

   /* subpages */
   .info-wrap {
      margin-top: 50px
   }

   .page-wrap {
      margin-top: 20px
   }

   .info-wrap2 {
      padding-top: 100px;
      padding-bottom: 120px
   }

   .main-contact-info {
      height: auto
   }

   .contact-page-left {
      width: 100%;
      float: none
   }

   .quick-contact {
      padding: 30px
   }

   .contact-page-right {
      width: 100%;
      float: none;
      height: 200px
   }

   .project-col {
      float: none;
      width: 100%
   }
}






@media screen and (max-width:450px) {

   /* header */
   .bottom-headernew {
      padding: 0 15px
   }

   .top-headernew {
      padding: 0 20px
   }


   /* default */
   .img-col h1 {
      font-size: 16px !important
   }

   .img-col i {
      font-size: 16px !important;
      margin-top: 7px
   }


   /* subpages */
   .page-wrapper {
      padding: 50px 30px
   }

   .info-wrap {
      margin-top: 30px
   }

   .info-wrap2 {
      padding-top: 90px;
      padding-bottom: 90px
   }

   .page-banner h1 {
      margin-left: 30px
   }

   .white-swoop-wrap3 {
      margin-top: -35px
   }

   .page-banner {
      padding: 25vw 10px
   }

   .category-container {
      height: 37vw
   }

   .cat-title {
      font-size: 13px;
      top: 40%
   }

   .main-contact-info {
      margin-bottom: 100px
   }
}