@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

/*
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
*/


button::-moz-focus-inner {  border: 0;}
a:focus {     outline: none; }
button:focus {     outline: none; }
::-moz-focus-inner {border:0;}
:focus, :active {    outline: 0;    border: 0;}



select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(../images/small-down-arrow.png);
   background-repeat: no-repeat;
   background-position: 85% center;
}


@font-face {
font-family: 'Runalto';
font-style: normal;
font-weight: normal;
src: local('Runalto'), url('Runalto.woff') format('woff');
}



@font-face {
font-family: 'EssentialsHandwriting';
font-style: normal;
font-weight: normal;
src: local('EssentialsHandwriting'), url('EssentialsHandwriting.woff') format('woff');
}




body {color: #000; margin: 0px; font-family: "Jost", sans-serif; font-style: normal; font-size: 18px; font-weight: 300; line-height: 30px; margin: 0px 0px 0px 0px; }

html {  scroll-behavior: smooth;}


a{transition: all 0.5s ease-in 0s; text-decoration:none!important; outline:none; color: #000;}

a:focus, a:active,  a, focus, select {border:0px; outline:none;}

.clear{clear:both;}

p{margin-top:0px; text-align: left;}

img {border:0px;}

form{margin:0px;}

input {outline:none;}

* {box-sizing:border-box; }

h2 {text-align:center; font-family: 'Runalto'; font-weight:normal; font-size:60px; line-height:110%; margin:0px 0px 10px 0px;}


.top-phone-holder {    display: block;   width: 25px;    height: 25px; float:left; margin-top:25px; position:absolute; border:0px solid red; z-index:150;    }

.burger-menu-holder {    display: block;   width: 32px;    height: 22px; float:right; margin-top:30px; position:relative;    }

.logo-holder {position:fixed; width:100%; height:1px; text-align:center; z-index:101; left:0px; top:0px; }

.logo-holder a {display:block; margin:auto; width:190px;}

.logo-holder img {display:block; margin:15px auto; width:190px; transition: all 0.5s ease-in 0s; }

header { position:fixed; left:0px; top:0px; z-index:110; width:100%; height:75px; }

header.darker {background-color:#111;}

header.darker .logo-holder img { width:100px; transition: all 0.5s ease-in 0s; margin:12px auto;}



.top-phone {display:inline-block; width:25px; height:25px;  float:left; }

.banner-text {width:100%; height:100%; position:absolute; z-index:100; text-align:center; color:#fff;}

.banner-text h1 {font-size:400px; line-height:100%; font-family: 'Runalto'; font-weight:normal; text-transform:uppercase; padding-top:14%; margin:0px;}

.banner-text h5 {font-family: 'EssentialsHandwriting'; font-size:100px; margin:0px; line-height:100%; margin-top:-50px;} 




.category {background-color:#222; display:table; width:100%; padding:60px 0px 90px 0px; }

.category .col-1-of-4 {background-image:url(../images/big-pipe.png); background-repeat:no-repeat; background-position:right center; background-size: 1px 100%;}

.category .col-1-of-4.last {background-image:none;}

.category h2 {color:#fff;}

.category a {display:block; margin:30px auto;}

.category a img  {display:block; margin:auto; max-width:100%; padding:20px; transition: all 0.5s ease-in 0s; width:90%;}

.category a:hover img {padding:0px;}

.category a:hover strong {margin-top:15px; transition: all 0.5s ease-in 0s;}

.category strong {display:block; color:#fff; font-size:35px;  font-family: 'Runalto'; text-align:center; margin-top:20px;  transition: all 0.5s ease-in 0s;}

.category span {display:block; color:#fff; font-size:18px; line-height:180%; text-transform:uppercase; letter-spacing:2px; text-align:center;}

.category .text-button{display:block; width:200px; border:2px solid #fff; color:#fff; text-align:center; font-size:15px; font-weight:500; padding:10px; text-transform:uppercase; letter-spacing:2px; margin:auto; margin-top:40px;  }

.category .text-button:hover {background-color:#fff; color:#000;}





.welcome {background-color:#6b5c4c; display:table; width:100%; padding:90px 0px 60px 0px; color:#fff; margin-top:-1px; }

.welcome .pic1 {display:block; width:100%;}

.welcome .pic1-mobile {display:none; width:100%;}

.welcome-content {padding:100px 100px 0px 100px;}

.welcome-content P { font-size:18px;}

.welcome-content h2 { text-align:left;}

p.big-para {font-size:28px; line-height:160%;}

.welcome .text-button{display:block; width:200px; border:2px solid #fff; color:#fff; text-align:center; font-size:15px; font-weight:500; padding:10px; text-transform:uppercase; letter-spacing:2px; margin:0; margin-top:40px;  }

.welcome .text-button:hover {background-color:#fff; color:#000;}

.circle-holder {  position:absolute;  margin-left:275px;  margin-top:130px; width:200px; height:200px; background-color:rgb(0,0,0,0.7); border-radius:10000px; z-index:100;}

.catalouge-image {width:80px; position:absolute; margin:60px;}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
}














.products { width:100%; padding:60px 0px 40px 0px; display:table; background-image:url(../images/tab-bg.png); background-repeat:repeat-x;}

.products .text-button {display:block; width:200px; border:2px solid #000; text-align:center; font-size:15px; font-weight:500; padding:10px; text-transform:uppercase; letter-spacing:2px; margin:auto; margin-top:40px;  }

.products .text-button:hover {background-color:#000; color:#fff}


.products h2 {margin-bottom:30px;}

.product-box {display:table; border:1px solid #ddd; padding:20px 20px 50px 20px; width:100%; margin-bottom:30px; }

.product-box figure {border:0px solid red; width:100%; display:block; height:300px; margin:0px; padding:0px;}

.product-box .newimg {border:0px solid red; width:100%; display:block; height:370px; margin:0px; padding:0px;}

.product-box img {display:block; padding:20px; width:100%; transition: all 0.5s ease-in 0s;}

.product-box:hover img {padding:0px 0px 20px 0px; transition: all 0.5s ease-in 0s;}

.product-box:hover {background-color:#f7f7f7;}

.product-box span {display:block; text-align:center;  }

.product-box span em {display:block; text-align:center; font-style:normal; font-size:16px; text-transform:uppercase; font-weight:400;}

.product-box span strong {display:block; text-align:center; font-size:30px; font-weight:300;}

.product-box a {display:block;}

.product-box .button {display:block; width:160px; border:2px solid #000; padding:7px; text-align:center; text-transform:uppercase; font-size:15px; font-weight:400; letter-spacing:2px; margin:20px auto; }

.product-box .button :hover {background-color:#000; color:#fff;}


.tab {
  overflow: hidden;
  width:800px;
  margin:auto;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 18px;
  transition: 0.3s;
  font-size: 15px;
  line-height:120%;
  font-family:Jost;
  width:200px;
  float:left;
  border:1px solid #aaa;
  text-transform:uppercase;
  letter-spacing:1px;
  background-image:url(../images/button-bg.png);
  color:#666;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #fff;
  background-image:none;
  border-bottom:1px solid #fff;
  color:#000;
}

.tab button.active:after {display:none;}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 70px 0px 20px 0px;
}











.key-features { width:100%; padding:60px 0px 40px 0px; display:table; background-image:url(../images/bg1.jpg); background-size:cover;}

.key-features h2 {color:#fff; margin-bottom:30px;}

.feature-box {border:1px solid #222; text-align:center; padding:40px; margin-bottom:30px; background-color:rgb(0,0,0,0.4); transition: all 0.5s ease-in 0s;}

.feature-box img {margin:0px auto 20px auto; padding:5px; width:120px; display:block; transition: all 0.5s ease-in 0s;}

.feature-box:hover img { padding:0px; }

.feature-box span {display:block; text-align:center; color:#fff; font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:2px;}

.feature-box:hover {background-color:rgb(0,0,0,0.7);}














.call-to-action {background-color:#fff; display:table; width:100%; padding:160px 0px; background-image:url(../images/call-to-action.jpg); background-position:center; }

.call-to-action a {display:block; width:200px; border:2px solid #000; text-align:center; font-size:15px; font-weight:500; padding:10px; text-transform:uppercase; letter-spacing:2px; margin:auto; margin-top:40px;  }

.call-to-action a:hover {background-color:#000; color:#fff}











.clients {background-color:#f8f8f8; display:table; width:100%; padding:60px 0px;}

.clients h2 {margin-bottom:30px;}

.clients img {display:block; margin:auto; width:100%; border:1px solid #ccc; }

.clients a {display:block; width:200px; border:2px solid #000; text-align:center; font-size:15px; font-weight:500; padding:10px; text-transform:uppercase; letter-spacing:2px; margin:auto;  }

.clients a:hover {background-color:#000; color:#fff;}









.contact-bar {display:table; width:100%; background-color:#222; padding:60px 0px 40px 0px; text-align:center;}

.hline {display:block; margin:20px auto;}

.social-media { display:block; margin:auto; text-align:center;}

.social-media span {display:block; font-size:16px; font-family:500; color:#fff; text-transform:uppercase; letter-spacing:5px; margin:10px 0px;   }

.social-media a {display:inline-block; margin:1px; }

.social-media a img {display:block; width:40px; padding:5px; transition: all 0.5s ease-in 0s;}

.social-media a:hover img {padding:0px; transition: all 0.5s ease-in 0s;}

.email-details {display:inline-block; color:#fff; margin-right:30px; line-height:60px; font-size:20px; background-image:url(../images/pipe.png); background-position:right center; background-repeat:no-repeat; padding-right:40px;}

.email-details img {float:right; margin-left:20px; padding:5px; transition: all 0.5s ease-in 0s; display:inline-block; width:50px;}

.email-details:hover img { padding:0px; }

.phone-details {display:inline-block; color:#fff; margin-right:30px; line-height:52px; font-size:24px;}

.phone-details img {float:left; margin-right:20px; padding:5px; transition: all 0.5s ease-in 0s; display:inline-block; width:50px;}

.phone-details:hover img {padding:0px;}













footer {display:table; width:100%; background-color:#111; padding:60px 0px 0px 0px; color:#aaa;}

footer p {font-size:16px;}

footer a {display:block; color:#aaa; font-size:16px; margin-bottom:6px;}

footer a:hover {color:#fff; padding-left:10px;}


footer h5 {margin:0px 0px 20px 0px; font-family: 'Runalto'; font-weight:normal; font-size:20px; line-height:110%; color:#fff;}

footer h5:after {content:''; display:block; width:30px; height:1px; background-color:#ff0000; margin-top:20px;}

.footer-logo {margin-bottom:20px;}



.copyright {display:table;  width:99%;  border-top:1px solid #333; margin-top:30px; padding:20px 0px; margin:auto;}

#copyright-left {font-size:12px; text-transform:uppercase; letter-spacing:2px; padding-left:0px; }

#copyright-right {font-size:12px; text-transform:uppercase; letter-spacing:2px; padding-right:0px; text-align:right;}

#copyright-right a {display:inline-block; font-size:12px; }

#copyright-right a:hover {padding:0px;}





.announcement {position:fixed; left:0px; bottom:0px; background-color:rgb(0,0,0,0.9); padding:20px 20px 10px 20px; width:100%; z-index:102;}

.announcement img {float:left; cursor:pointer; width:12px; margin-top:5px; }

.line-1{
    position: relative;
    top: 0%;  
    width: 100%;
	line-height:120%;
	margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
	margin-top:10px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#fff;
}

.line-1 strong {background-color:#ff0000; display:inline-block; padding:2px 5px;}

.line-1 strong { }

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 420px;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}







.accordion {
  color:#fff;
  font-size:19px;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 19px;
  transition: 0.4s;
  background-color:transparent;
  font-family:Jost;
  padding:0px;
  padding:10px 0px;
  border-bottom:1px solid #333;
  margin-bottom:0px;
  display:none;
  line-height:160%;
}

.accordion:hover {padding-left:10px;}

.active, .accordion:hover {
}

.accordion:after {
  content: '\002B';
  color: #fff;
  font-weight: 400;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding:0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color:#111;
}

.panel div {padding:20px;}

.panel a{ font-size:16px!important; border:0px!important; padding:0px!important; margin-bottom:0px!important;}

.panel a:hover {padding-left:10px!important;}

.panel .small-links { font-size:14px!important; border:0px!important; padding:0px!important; margin-bottom:0px!important; font-weight:300!important;}








.inside-banner {display:table; width:100%; height:500px; background-color:#000; background-position:center center; background-size:cover;}

.aboutus-banner {background-image:url(../images/inside-banner-1.jpg); }

.projects-banner {background-image:url(../images/inside-banner-6.jpg); }

.contactus-banner {background-image:url(../images/inside-banner-3.jpg); }

.product-banner1 {background-image:url(../images/product-banner-1.jpg); height:120px!important;}

.product-banner2 {background-image:url(../images/product-banner-2.jpg); height:120px!important; }

.pp-banner {background-image:url(../images/inside-banner-8.jpg); }

.terms-banner {background-image:url(../images/inside-banner-9.jpg); }







.page-title {  font-size: 100px;  line-height: 100%;  font-family: 'Runalto';  font-weight: normal; text-transform: uppercase;  padding-top: 12%;  margin: 0px; color:#fff; text-align:center; display:block;}

.inside-content-area {display:table; width:100%; padding:40px 0px;  }

.project-box {width:100%; max-width:1280px; margin:auto; border:1px solid #ccc; margin-bottom:30px;}

.project-box img {width:100%; display:block;}

.project-content {padding:40px; background-color:#f7f7f7;}

.project-content h3 {margin:0px; font-family: 'Runalto';  font-weight: normal;  font-size:200%; line-height:100%; margin-bottom:20px;  }



.contact-box {border:2px solid #000; padding:40px; text-align:center; height:360px; margin-top:40px; margin-bottom:40px;}

.contact-box img {display:block; width:100px; background-color:#222; border-radius:1000px; margin:auto; padding:15px; margin-bottom:30px; transition: all 0.5s ease-in 0s;}

.contact-box:hover img {background-color:#ff0000; padding:10px; transition: all 0.5s ease-in 0s;}

.map {display:block; width:100%; height:600px;  border:0px;}


.pp-content {display:table; width:100%; margin:auto; max-width:1280px;}

.pp-content h3 {font-family: 'Runalto'; font-weight:normal; font-size:40px; line-height:110%; margin:0px 0px 10px 0px;}

.pp-content p strong {font-size:20px; font-weight:500;}

.pp-content p {text-align:justify;}

.pp-content ol li {padding-left:10px; margin-bottom:10px;}

.pp-content ol {margin-bottom:30px;}



.product-d-content  {display:table; width:100%; padding-left:30px; margin-top:30px;}

.product-d-content h2 {font-size:48px; text-align:left; font-family:Jost; font-weight:300;}

.product-d-content span {font-size:14px;  text-transform:uppercase; letter-spacing:2px; font-weight:500;}

.product-d-content .text-button {  display: inline-block;  width: 250px;    background-image:url(../images/button-icon1.png); background-repeat:no-repeat; background-position:14px 14px; background-size:25px auto; background-color:#000; color:#fff;  text-align: center;  font-size:15px;  font-weight: 500;  padding: 12px;  text-transform: uppercase;  letter-spacing: 2px;  margin: 30px 5px 0px 0px;}

.product-d-content .text-button:hover {background-color:#444; color:#fff;}

.product-d-content .text-button2 {  display: inline-block;  width: 250px; background-image:url(../images/button-icon2.png); background-repeat:no-repeat; background-position:14px 14px; background-size:25px auto;   background-color:#01b55e; color:#fff;  text-align: center;  font-size:15px;  font-weight: 500;  padding: 12px;  text-transform: uppercase;  letter-spacing: 2px;  margin: 30px 0px 0px 0px;}

.product-d-content .text-button2:hover {background-color:#079953; color:#fff;}

.product-id { display:inline-block; background-color:#eee; padding:0px 7px; border:1px solid #ccc; font-size:12px!important; line-height:25px!important; margin-bottom:20px;}

.product-d-img {text-align:center; display:table; width:100%; margin-top:40px;}

.product-big {display:block; margin:auto; }

.product-thumb {display:inline-block; margin:auto; width:100px; border:0px solid #ccc; cursor:pointer;}

.big-image-holder { display:table; width:100%; border:0px solid #ccc; margin-bottom:7px;}





.left-menu {display:table; width:100%; margin-top:30px; background-color:#222; border-radius:10px; padding-bottom:60px; }

.left-menu h4 {color:#fff; font-family: 'Runalto'; margin:0px; padding:20px 30px; font-size:30px; font-weight:normal; line-height:35px;}

.left-menu h4 img {float:left; width:30px; margin-right:20px;}

.left-menu a {display:block; width:100%; color:#fff;  padding:8px 30px; font-size:15px; text-transform:uppercase; font-weight:500; letter-spacing:1px; border-top:1px solid #666;}

.left-menu a:hover { color:#fff; padding-left:40px;}

.left-menu a:last-child {border-bottom:1px solid #666;}

.left-menu .small-links { font-weight:400; padding-left:30px;}

.left-menu .small-links:hover {padding-left:40px;}

.current-product {background-color:#111; padding-left:30px!important; background-image:url(../images/menu-arrow.png); background-repeat:no-repeat; background-position:95% center;}

.breadcrumb {display:block; border-top:1px solid #999; padding-top:10px; margin-bottom:30px; font-size:16px!important;}

.breadcrumb a {border-bottom:1px solid #000; font-weight:400;}

.text-left {text-align:left;}

.text-center {text-align:center;}

#product-listing h2 {margin-top:20px;}

div.sticky { position: sticky;  top:70px;}









/* Grid */


.grid-1280 {display:table; width:1800px; margin:auto;  }

.row {width: 100%; display: table; }

.col-1-of-12 {width: 8.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-11 {width: 9.09%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-10 {width: 10%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-9 {width: 11.11%; float: left; padding-left: 15px; padding-right: 15px; }

.col-8-of-9 {width: 88.89%; float: left; padding-left: 15px; padding-right: 15px; }

.col-7-of-9 {width: 77.78%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-9 {width: 66.67%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-9 {width: 55.56%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-9 {width: 44.45%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-9 {width: 33.34%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-9 {width: 22.23%; float: left; padding-left: 15px; padding-right: 15px; }


.col-1-of-8 {width: 12.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-7-of-8 {width: 87.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-8 {width: 75%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-8 {width: 62.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-8 {width: 50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-8 {width: 37.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-8 {width: 25%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-7 {width: 14.28%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-7 {width: 85.68%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-7 {width: 71.4%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-7 {width: 57.12%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-7 {width: 42.84%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-7 {width: 28.56%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-6 {width: 16.66%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-6 {width: 83.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-6 {width: 66.64%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-6 {width: 49.98%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-6 {width: 33.32%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-5 {width: 20%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-5 {width: 80%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-5 {width: 60%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-5 {width: 40%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-4 {width: 25%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-4 {width: 75%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-3 {width: 33.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-3 {width: 66.66%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-2 {width: 50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-1 {width: 100%;  padding-left: 15px; padding-right: 15px; }


.content {display: block; padding: 10px 0px; background-color: #eee; text-align: center; font-size: 10px; color: #000; border: 1px solid #ccc;}


/* Grid */




















/* Scroll Top */

.scrolltop {
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:0px;
	right:0px;	
	z-index:110;
}
.scroll {
	position:absolute;
	right:20px;
	bottom:20px;
	padding:0;
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s; 
	background-color: #ff0000;
}

.scroll a {padding:25px 0px 0px 0px; display:block; color:#fff; height:50px; width:50px;}

.scroll a span {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  display: block;
  margin:auto;
  animation: buttonarrow 0.6s infinite alternate ease-in-out;
}


@keyframes buttonarrow {
	0% {
		transform: translateY(0);
		opacity: 1.0
	}
	100% {
		transform: translateY(-0.5em);
		opacity: 1.0
	}
}

/* Scroll Top */









/* responsive menu */

.responsive-menu-icon { display:none;}


.responsive-menu-icon {
    display: block;
    cursor: pointer;
    background-color:#000;
    width: 66px;
    height: 66px;
    position: fixed;
    right: 0;
    top: 0px;
    padding: 22px;
    box-sizing: border-box;
    z-index: 10000;
    display: none;
    z-index: 1000;
}

.bar1, .bar2, .bar3 {
    width: 23px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-4px, -5px);
}


/* responsive menu */









/* Marquee */

.marquee {
	margin: 0;
	width:1280px;
	overflow: hidden;
	margin:auto;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

.marquee ul.flex {
	display: flex;
	align-items: center;
	margin:0px;
	padding:0px;
}

.marquee ul.flex li {
	flex-shrink: 0;
	width: 250px;
	list-style: none;
}

.marquee ul.flex li img {display:block; width:100%; border:1px solid #ccc; border-right:0px;}

.marquee-wrapper {
	width: 100%;
	overflow: hidden;
}

.marquee-h {
	
	overflow: hidden;
}

.marquee-h .marquee-wrapper {
	height: 300px;
	overflow: hidden;
}

.marquee-h ul li {
	padding: 20px 0;
	text-align: center;
	color: #fff;
	font-size: 38px;
	background-image:linear-gradient(#1e3c72 ,#2a5298 100%)
}

#marqueeRight img {border-top:0px;}

/* Marquee */









/* Popup */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:1000;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 30px;
  background: #fff;
  border-radius:0px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-size:36px;
  margin-bottom:30px;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #ff0000;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
  background-color:transparent;
  border:0px;
  padding:0px;
}

.textbox1 {
  width:100%;
  padding:12px;
  font-family:Jost;
  font-size:17px;
  font-weight:300;
  margin-bottom:10px;
  background-color:#f7f7f7;
  border:1px solid #ccc;
  outline:0px;
  display:block;
}

.textbox2 {
  width:100%;
  padding:10px;
  font-family:Jost;
  font-size:17px;
  font-weight:300;
  margin-bottom:10px;
  background-color:#f7f7f7;
  border:1px solid #ccc;
  outline:0px;
  height:100px;
  display:block;
}

.submit-button{
  width:100%;
  padding:14px;
  font-family:Jost;
  font-size:17px;
  font-weight:300;
  background-color:#000;
  border:0px solid #ccc;
  outline:0px;
  color:#fff;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:2px;
  margin-bottom:0px;
  display:block;
  font-size:15px;
  background-image:url(../images/send.png);
  background-size:30px auto;
  background-repeat:no-repeat;
  background-position:98% center;
}


@media screen and (max-width: 700px){
  .box{
    width: 90%;
  }
  .popup{
    width: 90%;
  }
  
  .popup h2 {
  font-size: 32px;
  margin-bottom: 20px;
	}
	
.submit-button{background-position:95% center; }	
}

/* Popup */