@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&amp;display=swap');

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


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


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



select {
   appearance: none;       /* Remove default arrow */
   background-image: url(https://tattoosphere.in/404.html);
   background-repeat: no-repeat;
   background-position: 85% center;
}




body {color: #666; margin: 0px; font-family: poppins; font-size: 15px; font-weight: 300; line-height: 26px; 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;}

p strong {font-weight:600;}

img {border:0px;}

form{margin:0px;}

input {outline:none;}

* {box-sizing:border-box; }


.small-heading {font-size:18px; font-family: "Antonio", sans-serif; color:#c59d5f; letter-spacing:4px; text-transform:uppercase; text-align:center; display:block; font-weight:800;}


h2 {font-size:60px; font-family: "Antonio", sans-serif; font-weight:bold; text-transform:uppercase; margin:0px 0px 30px 0px; line-height:70px;}

h2 strong { text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px; color:#fff; font-weight:500;}


h3 {font-size:30px; font-family: "Antonio", sans-serif; font-weight:bold; text-transform:uppercase; margin:0px 0px 30px 0px; line-height:40px;}

h3 a {color:#c59d5f;}


header { display:table; width:100%; position:fixed; z-index:100; transition: all 0.5s ease-in 0s; height:100px; }

.logo {display:block; text-align:center; margin-top:15px; height:1px; width:100%; position:absolute;  transition: all 0.5s ease-in 0s; }

.logo a {display:block; width:120px; margin:auto; transition: all 0.5s ease-in 0s;  border-radius:1000px; padding:10px;  transition: all 0.5s ease-in 0s;}

.logo a img {display:block;  transition: all 0.5s ease-in 0s; width:100px;}

header.darker {background-color:#222; height:70px; border-bottom:1px solid #333; transition: all 0.5s ease-in 0s; }

header.darker .top-navigation ul {margin:20px 0px 0px 0px; padding:0px; transition: all 0.5s ease-in 0s; }

header.darker .logo {margin-top:5px;}

header.darker .logo a img  {transition: all 0.5s ease-in 0s; width:80px;}

header.darker .logo a {border-bottom:1px solid #333; background-color:#222; width:100px; }



.top-navigation ul {margin:30px 0px 0px 0px; padding:0px; transition: all 0.5s ease-in 0s;}

.top-navigation ul li {list-style:none; float:left; margin-right:45px; }

.logo-gap {width:132px;}

.top-navigation ul li:last-child {margin-right:0px; float: right;}

.top-navigation ul li a {font-size:18px; font-family: "Antonio", sans-serif; color:#fff; letter-spacing:2px; font-weight:800; text-transform:uppercase;}

.top-navigation ul li a:hover { color:#c59d5f;}






#banner1 {width:100%; height:960px; background-image:url(../images/banner1.webp); background-position:center center; background-size:cover;}
#banner2 {width:100%; height:960px; background-image:url(../images/banner2.webp); background-position:center center; background-size:cover;}
#banner3 {width:100%; height:960px; background-image:url(../images/banner3.webp); background-position:center center; background-size:cover;}
#banner4 {width:100%; height:960px; background-image:url(../images/banner4.webp); background-position:center center; background-size:cover;}


#banner1 .small-heading, #banner2 .small-heading, #banner3 .small-heading, #banner4 .small-heading { padding-top:350px;}
#banner1 h2, #banner2 h2, #banner3 h2, #banner4 h2 { font-family: 'traffic-personal-use'; font-size:300px; line-height:250px; color:#fff; font-weight:normal; text-align:center; margin:0px;  word-spacing: -50px;}




.dropbtn {
  border: none;
  cursor: pointer;
  background-color:transparent;
  background-image:url(../images/menu-arrow.webp);
  background-repeat:no-repeat;
  background-position:right center;
  padding-right:30px;
}

.dropbtn:hover, .dropbtn:focus {
  color: #c59d5f;
  background-color:transparent;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #c59d5f;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-weight:600!important;
  border-bottom:1px solid #666;
}

.dropdown-content a:hover {color:#fff!important; background-color:#ae8a53;}


.show {display: block;}






.aboutus { display:table; padding:100px 0px 100px 0px; width:100%;   }

.aboutus .small-heading {text-align:left;}

.aboutus p {max-width:90%;}

.big-para {font-size:20px; font-weight:500; line-height:150%;}

.group-pics-right {text-align:right;}

.group-pics-right img {margin:0px 0px 0px 10px;}

.middle-image {margin-bottom:100px!important;}


.training { display:table; padding:100px 0px 100px 0px; width:100%;   }

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

.group-pics-left img {margin:0px 10px 0px 0px;}

.training p {max-width:100%; }

.training p, .training h2, .training .small-heading {padding-left:10%;}

.training .small-heading {text-align:left; padding-left:11%;}

.training .readmore {margin-left:10%;}








.services { background-color:#000; display:table; width:100%;}

.services img {display:block; width:100%;}

.services div {padding:0px; display:block; }

.services div figure {overflow:hidden; width:100%; height:477px; position:relative; padding:0px; margin:0px;}

.services div figure img { width:100%;  transition: all 0.5s ease-in 0s; display:block;}

.services div:hover figure img { width:120%; margin:-10%; transition: all 0.5s ease-in 0s;}

.service-content {position:absolute; z-index:1; width:100%;  text-align:center; color:#fff; padding:50px!important;  }

.service-content p {text-align:center; max-width:60%; margin:auto;}

.service-content .readmore {margin:30px auto;}

.service-content img {width:150px!important; margin:auto;}









.artist  { background-color:#090909; display:table; padding:100px 0px 100px 0px; width:100%; background-image:url(../images/artist.webp); background-position:right center; background-repeat:no-repeat; background-size:50% auto;  }

.artist .small-heading {text-align:left;}

.artist h2 {color:#fff;}

.artist h2 strong { text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px; color:#090909; font-weight:500;}


.artist p {color:#aaa; padding-right:60px;}

.readmore {background-color:#c59d5f; border:2px solid #c59d5f!important; padding:10px 10px 13px 10px;  width:200px; display:block; text-align:center; font-family:poppins; font-size:20px; color:#fff; font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing:2px; margin-top:40px; transition: all 0.5s ease-in 0s; cursor:pointer;}

.readmore:hover {background-color:transparent; color:#c59d5f; }

















.vline {display:table; width:100%; height:1px; text-align:center; }

.vline img {  position: absolute;  margin-top: -65px;  height: 120px;  width: 3px;}

footer { background-color:#090909; display:table; padding:80px 0px 0px 0px; width:100%; }

footer h2 {color:#fff;}

footer h2 strong  { text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px; color:#090909; font-weight:500;}

footer .small-heading {text-align:left; padding-left:5px;}

.footer-logo {display:block; margin: 130px auto 0 auto; width:180px;}

.copyright {background-color:#070707; display:table; padding:20px 0px 20px 0px; width:100%; margin-top:30px; text-align:center;}

.copyright a {color:#666; font-size:13px; margin:5px; display:inline-block; border-bottom:1px solid #666; line-height:18px;  }

.copyright a:hover {color:#fff; border-bottom:1px solid #fff;}

.copyright-text {display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:center;}

.textbox1 {background-color:transparent; border:0px; border-bottom:1px solid #666; width:100%; line-height:60px; color:#999; font-family:poppins; font-size:15px;}

.submit-button {background-color:#c59d5f; border:2px solid #c59d5f; padding:10px 10px 13px 10px;  width:100%; font-family:poppins; font-size:20px; color:#fff; font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing:2px; margin-top:40px; transition: all 0.5s ease-in 0s; cursor:pointer;}

.submit-button:hover {background-color:transparent; color:#c59d5f; }

.footer-contact  {text-align:right;}

.footer-contact .small-heading {text-align:right; padding-left:5px; margin:0px;}

.footer-contact span {display:block; margin:50px 0px;}

.footer-contact span img {float:right; margin-left:15px; width:50px;}






.call { position:fixed; left:20px; bottom:20px; display:block; width:170px; background-color:#111; border:2px solid #111;  padding:8px; font-weight:500; line-height:30px; z-index:1000; color:#fff; }

.call img {display:inline-table; float:left; margin-right:10px; width:30px;}

.call:hover {border:2px solid #c59d5f!important; }

.whatsapp { position:fixed; right:80px; bottom:20px; display:block; width:170px;  background-color:#111; border:2px solid #111;   padding:8px; font-weight:500; line-height:30px; z-index:1000;  color:#fff;}

.whatsapp img {display:inline-table; float:left; margin-right:10px; width:30px;}

.whatsapp:hover {border:2px solid #c59d5f!important; }





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

.tattoo-banner { background-image:url(../images/banner-tattoo.webp);}

.artist-banner { background-image:url(../images/banner-artist.webp);}

.piercing-banner { background-image:url(../images/banner-piercing.webp);}

.faq-banner { background-image:url(../images/banner-faq.webp);}

.whoweare-banner { background-image:url(../images/banner-whoweare.webp);}

.sitemap-banner { background-image:url(../images/banner-sitemap.webp);}

.aftercare-banner { background-image:url(../images/banner-aftercare.webp);}

.price-banner { background-image:url(../images/banner-price.webp);}


.inside-banner .small-heading { padding-top:180px;}

.inside-banner h2 { font-family: 'traffic-personal-use'; font-size:200px; letter-spacing:5px; line-height:200px; color:#fff; font-weight:normal; text-align:center; margin:0px;  word-spacing: -30px;}






.page-intro {background-color:#f7f7f7; padding:60px 0px 100px 0px; text-align:center;}

.page-intro h2, .page-intro p {text-align:center;}

.page-intro h2 strong {text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px; color:#f7f7f7; font-weight:500;}





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

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

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

.extra-gap {display:table; width:100%; padding:60px 0px;}






.our-work {display:table; width:100%; padding:0px;}

.gray-area {background-color:#f7f7f7; padding:60px 0px 20px 0px; text-align:center; display:table; width:100%;}

.gray-area h2 strong {text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px;  color: #f7f7f7;  font-weight: 500;}

.our-work .readmore { margin:auto; margin-bottom:40px; }

.showcase {display:inline-block; float:left; width:33.33%;}

.showcase img {display:block; width:100%;  filter: grayscale(100%); transition: all 0.5s ease-in 0s;}

.showcase:hover img {filter: none; transition: all 0.5s ease-in 0s;}



.listing  {margin:0px 0px 30px 20px; padding:0px;}

.listing li { list-style-image:url(../images/bullet.webp);  padding-left:10px; }


.creambg {display:table; width:100%; background-color:#c59d5f; padding:30px; text-align:center;}

.creambg h2 {color:#fff;}

.creambg h2 strong {
  text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px;
  color: #c59d5f;
  font-weight: 500;
}

.creambg p {text-align:center; color:#fff;}



.sitemap-links a { font-family: 'poppins'; border: 2px solid #c59d5f; display:block; text-align:center; padding:5px; max-width:200px; margin:auto; margin-bottom:10px;}

.sitemap-links a:hover { background-color:#c59d5f; color:#fff; font-weight:600;}


.fullwidth {width:100%; display:block;}




.price-note h4 { display:block; font-size: 20px; border:2px solid #c59d5f; background-color:#c59d5f; color:#fff; margin:10px 0px; text-align:center; padding:10px;  font-family: "Antonio", sans-serif;  font-weight: bold;  text-transform: uppercase;    line-height: 30px;}





.training-kit {background-color:#f7f7f7; padding:80px 0px 60px 0px; text-align:center; display:table; width:100%;}

.kit-box {display:table; width:100%; box-shadow:0px 0px 20px 0px #ddd; padding:30px; text-align:center; height:220px; margin-bottom:30px; background-color:#fff; font-weight:500; line-height:22px; text-transform:capitalize} 

.kit-box strong {font-size:60px; display:block; font-weight:200; line-height:60px; margin-bottom:20px;}


.about-course {padding:60px 0px 60px 0px; text-align:center; display:table; width:100%;}

.month-box {text-align:center; display:table; width:100%; border:3px solid #c59d5f; padding:30px; margin:20px 0px; height:1020px;}

.month-box  p {text-align:center;}


.month-box2 {text-align:center; display:table; width:100%; border:3px solid #c59d5f; padding:30px; margin:20px 0px; height:1460px;}

.month-box2  p {text-align:justify;}


.meet-our-trainer { background-color:#c59d5f; display:table; width:100%; padding:30px;}

.meet-our-trainer .small-heading {color:#fff;}

.meet-our-trainer p, .meet-our-trainer h2 {color:#fff;}

.meet-our-trainer h2 strong {
text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989993px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756803px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279416px 0px;  color: #c59d5f;  font-weight: 500;}

.meet-our-trainer p {color:#fff;}





button.accordion {
	background-color: transparent;
	color: #000;
	cursor: pointer;
	padding: 15px 15px 12px;
	line-height: 20px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	transition: 0.4s;
	font-weight: 600;
	font-family: 'poppins';
	border: 2px solid #c59d5f;
	border-bottom:0px;
}
button.accordion.active, button.accordion:hover {
	background-color: #eee;
}
button.accordion:after {
	content: '\002B';
	color: #c59d5f;
	font-weight: bold;
	float: right;
	margin-left: 5px;
	font-family: 'Montserrat';
	font-size: 20px;
}
button.accordion.active:after {
	content: "\2212";
}
div.panel {
	padding: 0px 18px;
	background-color: transparent;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	border-left: 2px solid #c59d5f;;
	border-right: 2px solid #c59d5f;;
	border-bottom: 2px solid #c59d5f;;
	margin-bottom: 10px;
}
.panel p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 30px;
	color:#000;
}








.p-training-darkarea {
	width: 100%;
	background-image: url(../images/piercing-bg2.webp);
	background-size: cover;
	background-position: center center;
	padding:3% 0px 2% 0px;
	color:#fff;
	display:table;
	background-color:#222;
	margin:60px 0px;
}


.p-training-darkarea .t-training-days {
	display: table;
	padding: 40px 0 0 0;
	background-image: url(../images/vline.webp);
	background-repeat: no-repeat;
	background-position: center 200px;
    background-size: 2px 545px;
}


.t-training-darkarea {
	width: 100%;
	background-image: url(../images/tattoo-bg2.webp);
	background-size: cover;
	background-position: center center;
	padding:4% 0px 1% 0px;
	color:#fff;
	display:table;
	background-color:#222;
	margin:60px 0px;
}


.t-training-darkarea.second-option {
	width: 100%;
	background-image: url(../images/tattoo-bg2.webp);
	background-size: cover;
	background-position: center center;
	padding:4% 0px 6% 0px;
	color:#fff;
	display:table;
	background-color:#222;
	margin:0px 0px 60px 0px;
}


.t-training-darkarea.second-option .t-training-days {
	display: table;
	padding: 40px 0 0 0;
	background-image: url(../images/vline.webp);
	background-repeat: no-repeat;
	background-position: center 205px;
    background-size: 2px 545px;
}


.t-training {
	width: 100%;
	height: 100%;
	background-image: url(https://tattoosphere.in/404.html);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	background-color:#222;
}

.training-darkarea {
	width: 100%;
	background-image: url(https://tattoosphere.in/404.html);
	background-size: cover;
	background-position: center center;
	padding:4% 0px 1% 0px;
	color:#fff;
	display:table;
	background-color:#222;
}

.p-training-darkarea  h2 strong , .t-training-darkarea h2 strong {text-shadow: rgb(197, 157, 95) 1px 0px 0px, rgb(197, 157, 95) 0.540302px 0.841471px 0px, rgb(197, 157, 95) -0.416147px 0.909297px 0px, rgb(197, 157, 95) -0.989993px 0.14112px 0px, rgb(197, 157, 95) -0.653644px -0.756803px 0px, rgb(197, 157, 95) 0.283662px -0.958924px 0px, rgb(197, 157, 95) 0.96017px -0.279416px 0px; color:#222;}


.training-darkarea h2::after, .p-training-darkarea h2::after, .center-heading::after {margin:20px auto;}

.training-content h1{ text-align:center; font-size:36px; line-height:130%;}

.training-content  .half-left, .training-content .half-right {margin-top:0px;}

.training-content .half-left {padding-right:20px;}

.training-content .half-right {padding-left:40px;}

.training-content  .half-left h2, .training-content .half-right h2 {text-align:left; }

.training-content  .half-left img , .training-content .half-right img  {display:block; width:100%; }

.kit span {display:block; padding:15px;  border:2px solid #fff; text-align:left; font-weight:500; margin:5px auto; max-width:800px;}

.justify {text-align:justify;}

.t-training-days {
	display: table;
	padding: 40px 0 0 0;
	background-image: url(../images/vline.webp);
	background-repeat: no-repeat;
	background-position: center 195px;
    background-size: 2px 750px;
}

.t-training-days h2 {text-align: center; margin-bottom: 40px;}

.t-training-days h2::after {margin:20px auto; }

.day-right {
	width: 45.4%;
	float: right;
	min-height: 150px;
	padding-right: 20px
}
.day-left b, .day-right b {
	padding-top: 7px;
	display: block;
	font-family: "Antonio", sans-serif;
	font-size: 30px;
	font-weight:bold; 
	margin-bottom:20px;
}
.day-right:before {
	content: '';
	width: 20px;
	height: 20px;
	float: left;
	margin-left: -69px;
	margin-top: 10px;
	background-image: url(../images/bullet2.webp);
	background-repeat: no-repeat;
	background-position: center center
}
.day-left {
	width: 45.4%;
	float: left;
	text-align: right;
	min-height: 150px;
	padding-left: 20px;
}
.day-left:before {
	content: '';
	width: 20px;
	height: 20px;
	float: right;
	margin-right: -69px;
	margin-top: 5px;
	background-image: url(../images/bullet2.webp);
	background-repeat: no-repeat;
	background-position: center center
}
.day-left ul, .day-right ul {
	margin: 0;
	padding: 0
}
.day-left li, .day-right li {
	list-style: none
}

.listing  {margin:0px 0px 30px 20px; padding:0px;}

.day-right li img  { float:left; margin-right:10px; margin-top:7px;  }

.day-left li img  { float:right; margin-left:10px;  margin-top:7px; }

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

.listing-no li {padding-left:10px; margin-bottom:10px;}









.mission-and-vision { padding:0px 0px 100px 0px; text-align:center; display:table; width:100%;}

.mission-and-vision h2 {text-align:center; color:#fff;}

.mission-and-vision p {text-align:justify; color:#fff;}

.mission-and-vision h2 strong  { text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989993px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756803px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279416px 0px; color:#c59d5f; font-weight:500;}


.mission-and-vision .readmore {margin:auto; display:block; background-color: #222;   border: 2px solid #222 !important;}

.mission-and-vision .readmore:hover {background-color:#fff; color:#222; border: 2px solid #fff !important;}

.mission-and-vision-box { background-image:url(../images/mission-and-vision-bg.webp); background-size:cover; background-position:left top; display:table; width:100%; padding:92px 89px;}

.cream-box {display:table; width:100%; padding:39px 50px; background-color:rgb(197,157,95,0.9);}



.float-right {float:right!important;}

.fullsize-video {width:100%; height:700px; border:0px;}



.black-area {background-color:#000; display:table; width:100%;}









.overlay {  display: block;  width: 100%;  height: 100%;  background-color: rgb(0,0,0,0.8);  text-align: center;  position: fixed;  top: 0px;  left: 0px;  z-index: 1000000;  color: #fff;}

.overlay table {width:100%; height:100%; border:0px; padding:0px; }

.advt {display:block; margin:auto; max-width:400px; background-color:#fff; padding:10px; margin-top:40px; position:relative; }

.advt img {display:block; margin:auto; width:100%; }

.close {display:block; width:60px; text-align:center; position:absolute; right:0px; background-color:#fff; padding:5px; font-weight:600; font-size:12px; text-transform:uppercase; border-radius:0px 0px 0px 20px; }

.popup-image {  display: block;  margin: auto;  width: 600px;  max-width: 90%;  border: 10px solid #fff;}

.popup-close {  display: block;  width: 95px;  border: 2px solid #fff;  margin: auto;  color: #fff;  padding: 5px;  cursor: pointer;}

.close-image {  display: inline-block; width: 15px;  margin-left: 10px; margin-bottom: -3px;}









/* Grid */


.grid-1280 {display:table; width:1280px; 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:99;
}
.scroll {
	position:absolute;
	right:20px;
	bottom:20px;
	padding:0;
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	transition: 0.5s;
	background-color: #c59d5f;
}

.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:#c59d5f;
    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 {
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {opacity: 0;}

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


/* responsive menu */






