/* Getting the new tags to behave */

article,

aside,

audio,

canvas,

command,

datalist,

details,

embed,

figcaption,

figure,

footer,

header,

hgroup,

keygen,

meter,

nav,

output,

progress,

section,

source,

video {

 display: block; 

}

mark,

rp,

rt,

ruby,

summary,

time {

   display: inline; 

}



/************ Global properties ************/

html {

   width: 100%; 

}

body {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 100%;

  color: #222;

  /* min-width: 1020px;   */

  background: #fff;

}



  .bg {

  width: 100%;

  background: url(../images/bg-top.jpg) center 0 no-repeat;

} 

.main {

       width: 1020px;    

  padding: 0;

  margin: 0 auto;

  font-size: 0.875em;

  line-height: 1.785em;

}



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

  .main {

    width: 99%;    

    padding-left: 1px;

    padding-right: 1px;

/* padding: 0;

margin: 0 auto;

font-size: 0.875em;

line-height: 1.785em; */

}

    

}





a {

  color: #f6a20e;

  outline: none;

}

a:hover {

  text-decoration: none;

}

.col-1,

.col-2,

.column-1,

.column-2 {

  float: left;

}



.wrapper {

   width: 100%; 

  overflow: hidden;

  position: relative;

}

.extra-wrap {

  overflow: hidden;

}

p {

  margin-bottom: 18px;

}

.p1 {

  margin-bottom: 8px;

}

.p2 {

  margin-bottom: 15px;

}

.p3 {

  margin-bottom: 30px;

}

.p4 {

  margin-bottom: 40px;

}

.p5 {

  margin-bottom: 50px;

}

.reg {

  text-transform: uppercase;

}

.fleft {

  float: left;

}

.fright {

  float: right;

}

.alignright {

  text-align: right;

}

.aligncenter {

  text-align: center;

}



.twoButton {

  text-align: center; 

}



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



  .twoButton {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 15px; 

  }



  .twoButton a {

     

    margin-left: 45px;

  }



  .twoButton button, a.button {

    padding: 8px;

  }

  

}



.it {

  font-style: italic;

}

.color-1 {

  color: #fff;

}

.color-2 {

  color: #000;

}

.color-3 {

  color: #666;

} 

/************ Boxes ************/

 .indent {

  padding: 21px 0 0;

  position: relative;

  overflow: hidden;

}

.indent-left {

  padding-left: 30px;

}

.indent-right {

  padding-right: 50px;

}

.indent-bot {

  margin-bottom: 20px;

}

.indent-bot2 {

  margin-bottom: 30px;

}

.indent-bot3 {

  margin-bottom: 45px;

}

.prev-indent-bot {

  margin-bottom: 12px;

}

.img-indent-bot {

  margin-bottom: 25px;

}

.margin-bot {

  margin-bottom: 35px;

}

.margin-top {

  margin-top: -7px;

}

.img-indent {

  float: left;

  margin: 0 20px 0px 0;

}

.img-indent2 {

  float: left;

  margin: 0 13px 0px 0;

}

.img-indent-r {

  float: right;

  margin: 0 0px 0px 40px;

}

.buttons a:hover {

  cursor: pointer;

}

.menu li a,

.link,

.button,

.button-2,

h1 a {

  text-decoration: none;

} 

/************ Header ************/

 header {

  width: 100%;

  position: relative;

 z-index: 10;

}



.row-top {

  width: 100%;

  min-height: 101px;

  background: url(../images/row-top-tail.gif) left top repeat-x #f6a20e;

  border-radius: 9px 9px 0 0;

  -moz-border-radius: 9px 9px 0 0;

  -webkit-border-radius: 9px 9px 0 0;

  position: relative;

  overflow: hidden;

  z-index: 1;

}



h1 {

  float: left;

  padding: 30px 0 0 59px;

  position: relative;

}

/*Logo in header*/
.wrapper > h1 {
padding-top: 8px;  
}

h1 a {

display: block;
width: 58px;
height: 82px;
text-indent: -9999px;
background: url(../images/logo.svg);
background-size: cover;

}



/************ Phone numbers in the header ************/



.support {

  display: block;

  font-size: 26px;

  line-height: 1.2em;

  padding: 29px 65px 0 30px;

  letter-spacing: -2px;

  background: url(../images/pic-1.png) 0 32px no-repeat; /* Logo picture */

  float: right;

}

.support a {

  color: #000;

} 



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



  .support a {

    font-size: 18px;

  } 



}



/************ Menu ************/



.menu__item {

  text-decoration: none;

  

}



  #nav {

  display: grid;

  grid-auto-rows: 58px;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

}



.menu {

  padding: 0 0 0 0;

  width: 100%;

  

  position: relative;

   z-index: 2; 

  

  font-family: "PT Sans", sans-serif;

}

.menu-item {

  float: left;

  position: relative;

  padding-right: 2px;

  background: url(../images/menu-spacer.gif) right top repeat-y;

  font-family: "PT Sans", sans-serif;

}



.menu-item a {

  display: block;

  font-size: 22px;

  line-height: 2em;

  padding: 6px 15px 8px 15px;

  text-align: center;

  color: #fff;

  text-transform: capitalize;

  letter-spacing: -1px;

  background: #2b2b2b;

  font-family: "PT Sans", sans-serif;

}  



 .menu-item a.active,

.menu-item a:hover {

  background-color: #222;

}



/************ Picture on the main ************/



.picture-on-the-main {   /*** Front page cover ***/

  display: block;

}



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

  .picture-on-the-main {

    display: none;

  }



}



/************ Aside ************/

 .aside {

  width: 100%;

   padding: 12px 0; 

} 



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

  .aside {

    max-width: 360px;

    padding-top: 10px;

  } 

}



/************ Content ************/



 #content {

  width: 100%;





  z-index: 1;

  background-color: whitesmoke;

}



h1 {

  font-size: 28px;

  line-height: 58px;

  color: #222;

  letter-spacing: -1px;

}



h2 {

  font-size: 28px;

  line-height: 58px;

  color: #222;

  letter-spacing: -1px;

}



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

 

  h2 {

    font-size: 20px;

  }



}



h3 {

  font-size: 24px; 

}



 h4 {

  font-size: 22px;

  line-height: 58px;

  color: #222;

  letter-spacing: -1px;

}



h5 {

  font-size: 21px;

  color: #fff;

}



h6 {

  font-size: 16px;

  color: #000;

}



.border-bot {

  width: 100%;

  padding-bottom: 20px;

  background: url(../images/pic-1.gif) 0 bottom repeat-x;

}



.box {

  width: 100%;

  color: #ccc;

  background: url(../images/box-title-tail.gif) left top repeat-x #f6a20e;

  border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

}



.box .padding {

  padding: 25px 10px 0 30px;

}

.box-bg {

  width: 100%;

  padding-bottom: 24px;

   background: url(../images/box-tail.gif) left top repeat-x #222; 

   border-radius: 10px; 

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

}



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



  .box-bg 

   figure,

   h6,

   ul,

   li,

   p {

     display: grid;

     grid-template-columns: 1fr;



    text-align: center;

     max-width: 360px; 

  }



  .box-bg img {

    max-width: 320px;

    text-align: center;

  }



}



.button {

  display: inline-block;

  padding: 6px 20px;

  font-size: 21px;

  line-height: 1.238em;

  letter-spacing: -1px;

  color: #2b2b2b;

  border: 2px solid #fff;

  background: url(../images/button-tail.gif) 0 0 repeat-x #dbdbdb;

  border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  cursor: pointer;

}



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



.button {

  padding: 5px 1px;

}



.button-mobile-hover {

  display: none;

}



}



.button:hover {

  background: #dbdbdb;

}



.button-2 {

  display: inline-block;

  padding: 7px 23px 8px;

  font-size: 21px;

  line-height: 1.238em;

  letter-spacing: -1px;

  color: #fff;

  background: url(../images/button2-tail.gif) 0 0 repeat-x #222;

  border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  cursor: pointer;

}

.button-2:hover {

  background: #f6a410;

}



.list-1 li {

  line-height: 21px;

  padding: 2px 0 2px 20px;

  background: url(../images/marker-1.png) 0 8px no-repeat;

}

.list-1 li a {

  display: inline-block;

  color: #222;

}

.list-1 li a:hover {

  text-decoration: none;

}



.list-2 li {

  line-height: 25px;

  padding: 0px 0 12px 20px;

  background: url(../images/marker-1.png) 0 8px no-repeat;

}

.list-2 li.last-item {

  padding: 0 0 0 20px;

}

.list-2 li a {

  display: inline-block;

  color: #222;

}

.list-2 li a:hover {

  text-decoration: none;

}



.price-list li {

  width: 100%;

  overflow: hidden;

  vertical-align: top;

  line-height: 21px;

  padding: 2px 0;

  color: #222;

}

.price-list strong {

  background: url(../images/pic-2.gif) repeat-x 0% 17px;

  display: block;

  overflow: hidden;

}

.price-list span {

  float: right;

  color: #222;

}

.price-list li a {

  float: left;

  text-decoration: none;

  color: #222;

}

.price-list li a:hover {

  color: #f6a20e;

}



.link:hover {

  text-decoration: underline;

}



.link-1 {

  display: inline-block;

  font-size: 14px;

  padding-right: 8px;

  background: url(../images/marker-3.gif) right 8px no-repeat;

}

.link-1:hover {

  color: #fff;

}



.text-1 {

  line-height: 23px;

}

.text-2 {

  font-size: 14px;

  line-height: 1.285em;

}



dl span {

  float: left;

}

dl strong {

  float: right;

  font-weight: normal;

}

dl dd {

  width: 100%;

  overflow: hidden;

} 







/************ Footer ************/



  footer {

  width: 100%;

  color: #fff;

  text-align: center;

  position: relative;

  overflow: hidden;

  z-index: 9;

}



.footer-bg {

  width: 100%;

  padding: 18px 0 25px;

  background: #2b2b2b;

  border-radius: 9px;

  -moz-border-radius: 9px;

  -webkit-border-radius: 9px;

}



.footer_grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

}



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





  .footer_grid {

    grid-template-columns: 1fr 1fr;

    grid-gap: 15px;

  grid-template-areas: 

  "b1 b2"

  "a1 a2"

  ;

  }



  .footer_grid-item1 {

  grid-area: a1;

}



.footer_grid-item2 {

  grid-area: a2;

}



.footer_grid-item3 {

  grid-area: b1;

}



.footer_grid-item4 {

  grid-area: b2;

}



}



.list-services {

  padding: 0;

  width: 112px;

  margin: 0 auto;

  overflow: hidden;

}

.list-services li {

  float: left;

  padding: 0 0 0 8px;

}

.list-services li:first-child {

  padding: 0;

}

.list-services li a {

  display: block;

  width: 32px;

  height: 32px;

  text-indent: -9999px;

  background: url(../images/social-icons.png) 0 0 no-repeat;

}

.list-services li.item-1 a {

  background-position: -40px 0;

}

.list-services li.item-2 a {

  background-position: -80px 0;

}



#easyTooltip {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  padding: 4px 8px;

  color: #fff;

  border: 1px solid #fff;

  background: #222;

  position: relative;

  z-index: 99;

} 



.viberForPC {

  display: grid;

}



.viberForMobile {

  display: none;

}



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

  .viberForPC {

    display: none;

  }

  

  .viberForMobile {

    display: grid;

  }



}



/************ Extra ************/



.extra {

  min-height: 100%;

  height: auto !important;

  height: 100%;

  /* margin: 0 auto -132px; */

  position: relative;

  overflow: hidden;

}



html,

body {

  height: 100%;

}



/************ Grid ************/



 .foto_grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 30px;

}  



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



  .foto_grid {

    grid-template-columns: 1fr;

  grid-template-areas: 

  "a"

  "b"

  ;

  }



.foto_grid-items1 {

  grid-area: a;

}



.foto_grid-items2 {

  grid-area: b;

}



}



/************ Grid-crane-truck-for-mobile ************/



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



  .grid-crane-truck-for-mobile {

    grid-template-columns: 1fr;

  grid-template-areas: 

  "a"

  "b"

  "c"

  ;

  }



.grid-crane-truck-for-mobile-item1 {

  grid-area: a;

}



.grid-crane-truck-for-mobile-item2 {

  grid-area: b;

}



.grid-crane-truck-for-mobile-item3 {

  grid-area: c;

}



}





/*********Picture + slider of a truck crane card**********************************/



.image-on-mobile {

  display: none;

}



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



.image-gallery,

.big-image,

.thumbs {

  display: none;

}



.image-on-mobile {

  display: inline-block;

}



.image-on-mobile img {

  max-width: 320px;

}



}



 .image-gallery {

  position: relative;

  margin: 0 auto;

  width: 600px;

  border-radius: 20px;

}



.image-gallery .big-image {

  width: 600px;

  height: 360px;

  margin: 0 auto;

  position: static;

}



.image-gallery .big-image img {

  opacity: 0;

  position: absolute;

  left: 0px;

  top: 0px;

  width: 600px;

  margin: 0 auto; 

}



.image-gallery .big-image img:target {

  opacity: 1;

}



.image-gallery .big-image img:target ~ img#default {

  opacity: 0;

}



.image-gallery .big-image img#default {

  opacity: 1;

}



.image-gallery .thumbs {

  overflow: hidden;

  white-space: nowrap;

  margin: 0 45px;

}



.image-gallery .thumbs ul {

  float: left;

  transition: 999999s all;

  transform: translateX(0);

}



.image-gallery .thumbs li {

  display: inline-block;

  margin-right: 3px;

}



.image-gallery .thumbs li a:hover {

  opacity: 1;

}



.image-gallery .thumbs li a {

  opacity: 0.85;

}



.image-gallery .thumbs li a:focus {

  opacity: 1;

}



.image-gallery .thumbs li img {

  width: 128px;

}





/************ Gallery on the main page (Grid) ************/



 .grid-home-gallery {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  grid-gap: 8px;

}



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





  .grid-home-gallery {

    grid-template-columns: 1fr 1fr;

    grid-gap: 15px;

  grid-template-areas: 

  "a1 a2"

  "b1 b2"

  ;

  }



.grid-home-gallery-item1 {

  grid-area: a1;

}



.grid-home-gallery-item2 {

  grid-area: a2;

}



.grid-home-gallery-item3 {

  grid-area: b1;

}



.grid-home-gallery-item4 {

  grid-area: b2;

}



} 



.grid-home-gallery-block1 img {

  width: 100%;

  height: auto; 

}



    .hamburger-menu {

    display: none;

   } 







/************************ Objects *****************************/



.objects-video {

  width: 80%;

  margin: auto;

}



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

  

  .objects-video {

    width: 80%;

    margin: auto;

    z-index: -2;

    

  }

}

/************************ Video *****************************/

.gridForVideo {

  margin-left: 60px;

  display: grid;

  grid-template-columns: 1fr 1fr;

}



.embedSplit {



  width: 80%;

  height: auto;

}



.embed {

  width: 43%;

  height: 250px;

  margin: 0 auto;

}



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



  .embed {

    width: 100%;

   height: auto;

    margin: 0 auto;

  }



  .gridForVideo {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-areas: 

    "a1"

    "b1";

    }

  

  .embedSplitItem1 {

    grid-area: a1;

    width: 100%;

    height: auto;

  }



  .embedSplitItem2 {

    grid-area: b1;

    width: 100%;

    margin: 32px auto;

  }



  .embedSplit {



    width: 95%;

    height: auto;

  }





}





/************************MOBILE VERSION*****************************/



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

  

.mobile-margin10px {

  margin-left: 10px;

  margin-right: 10px;

}





  .toggle {

    display: block;

  }



  .hamburger-menu {

    display: block;

    height: 3px;

   } 



   iframe {

     width: 320px;

     height: 320px;

     padding-bottom: 30px;

     

   }



#nav {

  display: none;

}



   #menu__toggle {

    opacity: 0;

  }

  

  #menu__toggle:checked ~ .menu__btn > span {

    transform: rotate(45deg);

   

  }

  #menu__toggle:checked ~ .menu__btn > span::before {

    top: 0;

    transform: rotate(0);

   

  }

  #menu__toggle:checked ~ .menu__btn > span::after {

    top: 0;

    transform: rotate(90deg);

    

  }

  #menu__toggle:checked ~ .menu__box {

    visibility: visible;

    left: 0;

   z-index: 9;

  

  }

  

  .menu__btn {

    display: flex;

    align-items: center;

    position: fixed;

    top: 20px;

    left: 20px;

    background-color: #2b2b2b;

    width: 46px;

    height: 46px;

    cursor: pointer;

    z-index: 10;

  }

  

  .menu__btn > span,

  .menu__btn > span::before,

  .menu__btn > span::after {

    display: block;

    position: absolute; 

    width: 35px;

    height: 3px;

    background-color: #fff;

    transition-duration: .25s;

  }



  .menu__btn > span::before {

    content: '';

    top: -8px;

  }



  .menu__btn > span::after {

    content: '';

    top: 8px;

  }

  

  .menu__box {

    display: block;

    position: fixed;

    visibility: hidden;

    top: 0;

    left: -100%;

    width: 240px;

    height: 450px;

    margin: 0;

    padding: 80px 0;

    list-style: none;

    background-color: #ECEFF1;

    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);

    transition-duration: .25s;

  }

  

  .menu__item {

    /* margin-top: 40px; */

    display: block;

    padding: 12px 24px; 

    color: #333;

    font-family: 'Roboto', sans-serif;

    font-size: 24px;

    font-weight: 600;

    text-decoration: none;

    transition-duration: .25s;

  }



  .menu__item:hover {

    background-color: #CFD8DC;

  }

  

}


/* BLOG */

.blog_grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;  
gap: 21px;
margin: 2%;
}

.blog_grid-wrapper > div {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);  
padding: 21px;
}