@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,800&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family: 'Desyrel';
    src: url('fonts/Desyrel.html') format('woff2'),
        url('fonts/Desyrel-2.html') format('woff');
    font-weight: normal;
    font-style: normal;
}
.example-theme .tabnav .tab {
  color:#000;
}
.example-theme .tab-content p {
  color: #fff;
  border-color: red;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tabs {
position: relative;
overflow: hidden;
background-color:#dd9c2b;
background-image:url(../images/yellow-bg.jpg);
background-repeat:repeat-x;
background-size:2%;

}
.no-margin {
margin-top:0!important;
padding:0!important;
}
.tabnav {
display: flex;
width:60%;
margin:0 auto;
}
.etios {
background-image:url(../images/htc.svg)!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:60%!important;
}
.dzire {
background-image:url(../images/sdn1.svg)!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:60%!important;
}
.innova {
background-image:url(../images/suvv1.svg)!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:60%!important;
}
.traveller {
background-image:url(../images/buss1.svg)!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:60%!important;
}
.tab {
width:8vw;
height:8vw;
line-height:8vw;
margin-right:2vw;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
transition: .1s ease;
text-transform: uppercase;
border-radius: 50%;
background:#FFF;
font-size:.9vw;
font-weight:bold;
padding-top:1.8vw;
border:.03vw solid rgba(0,0,0,1);
}

.tab-wrapper {
  position: relative;
  transition: all .3s ease-in-out;
}

.inline {
  font-size: 0em;
  white-space: nowrap;
}
.inline > * {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: normal;
  vertical-align: top;
  word-spacing: normal;
  white-space: normal;
}

.tab-content {
  font-size: 14px;
  width: 100%;
  padding: 1.5em;
  line-height: 1.3em;
  margin-top:2vw;
}
.tab-content img {
width:100%;
}
.tab-content h3 {
font-family: 'Roboto', sans-serif;
font-size:2.5vw;
color: #fff;
margin-top:2vw;
margin-bottom:1vw!important;
font-weight:600;
line-height:1.3em;
}
.tab-content h4 {
font-family: 'Roboto', sans-serif;
font-size:1.5vw;
color: #fff;
margin-bottom:1vw!important;
font-weight:600;
line-height:1.3em;
}
.tab-content p {
  color: #909090;
  text-align:left;
  padding-left: 0;
    padding-right: 0;
	font-size:1.3vw;
	font-weight:300;
}
.amenities li {
float:left;
list-style:none;
font-size: 1.5vw;
display: block;
width:4vw;
height:4vw;
padding:1vw;
margin-bottom:1vw;
margin-right:.5vw;
border-radius:50%;
background-color:#FFF;
border:1px solid#FFD200;
}
.amenities li:hover {
background-color:#dd9c2b;
border:1px solid#000;
}
.amenities li img {
width:100%;
}

.taxi li {
float:left;
list-style:none;
font-size: 1vw;
color:#000!important;
display: block;
width:8vw;
height:8vw;
line-height:1.5vw;
padding-top:1.8vw!important;
padding:1vw;
margin-bottom:1vw;
margin-right:2vw;
border-radius:50%;
background-color:#FFF;
border:.01vw solid rgba(0,0,0,0.2);
text-align:center;
}
.taxi li a {
color:#000!important;
}
.taxi li:hover {
background-color:#ededed;
}
.taxi li img {
width:100%;
}
@media (min-width: 800px) and (max-width: 899px) {
.taxi li {
margin-right:1.5vw;
}
}
@media (min-width: 768px) and (max-width: 799px) {
.tabnav {
    display: flex;
    width: 90%;
    margin: 0 auto;
	margin-top:15px;
}
.tab {
width:100px;
height: 100px;
line-height:100px;
margin-right:10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
transition: .1s ease;
text-transform: uppercase;
border-radius: 50%;
background: #F2F2F2;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
background-size: auto;
font-size:10px;
padding-top:18px;
border: .01vw solid rgba(0,0,0,0.2);
}
.tab-content {
    font-size: 14px;
    width: 100%;
    padding:5px;
    line-height: 1.3em;
    margin-top:20px;
}
.tab-content h3 {
font-size:25px;
margin-top:10px;
margin-bottom: 10px !important;
}
.tab-content h4 {
font-size:18px;
margin-bottom: 10px !important;
}
.tab-content p {
font-size:14px;
}
.amenities li {
font-size:15px;
width:30px;
height:30px;
line-height:30px;
padding:0;
margin-bottom:10px;
margin-right:20px;
}
.amenities li:hover {
background-color:none;
}
.amenities li img {
width:100%;
}
.taxi li {
float: left;
list-style: none;
font-size:12px;
color: #000 !important;
display: block;
width:120px;
height:120px;
line-height:20px;
padding-top:15px !important;
padding:5px;
margin-bottom: 10px;
margin-right:15px;
}
.taxi li img {
width:80%;
}
}
@media (min-width: 600px) and (max-width: 767px) {
.taxi {
display:none;
}
.tabnav {
    display: flex;
    width: 90%;
    margin: 0 auto;
	margin-top:10px;
}
.tab {
width:100px;
height: 100px;
line-height:100px;
margin-right:15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
transition: .1s ease;
text-transform: uppercase;
border-radius: 50%;
background: #F2F2F2;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
background-size: auto;
font-size:10px;
padding-top:18px;
border: .01vw solid rgba(0,0,0,0.2);
}
.tab-content {
    font-size: 14px;
    width: 100%;
    padding:5px;
    line-height: 1.3em;
    margin-top:20px;
}
.tab-content h3 {
font-size:25px;
margin-top:10px;
margin-bottom: 10px !important;
}
.tab-content h4 {
font-size:18px;
margin-bottom: 10px !important;
}
.tab-content p {
font-size:14px;
}
.amenities li {
font-size:15px;
width:30px;
height:30px;
line-height:30px;
padding:0;
margin-bottom:10px;
margin-right:20px;
}
.amenities li:hover {
background-color:none;
}
.amenities li img {
width:100%;
}
.taxi li {
float: left;
list-style: none;
font-size:12px;
color: #000 !important;
display: block;
width:108px;
height:108px;
line-height:20px;
padding-top:15px !important;
padding:5px;
margin-bottom: 10px;
margin-right:5px;
}
.taxi li img {
width:80%;
}
}
@media (min-width: 480px) and (max-width: 599px) {
.tabnav {
    display: flex;
    width: 100%;
    margin: 0 auto;
}
.tab {
width:120px;
height: 80px;
line-height:80px;
margin-right:5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
transition: .1s ease;
text-transform: uppercase;
border-radius:10px;
background: #dd9c2b;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
background-size: auto;
font-size:16px;
font-weight:600;
padding-top: 0;
border:0;
}
.example-theme .tabnav .tab {
 color: #FFF;
}
.etios, .dzire, .innova, .crysta, .traveller {
background-image: none !important;
}
.tab-content {
    font-size: 14px;
    width: 100%;
    padding:5px;
    line-height: 1.3em;
    margin-top:20px;
}
.tab-content h3 {
font-size:25px;
margin-top:10px;
margin-bottom: 10px !important;
}
.tab-content h4 {
font-size:18px;
margin-bottom: 10px !important;
}
.tab-content p {
font-size:14px;
}
.amenities li {
font-size:15px;
width:30px;
height:30px;
line-height:30px;
padding:0;
margin-bottom:10px;
margin-right:20px;
}
.amenities li:hover {
background-color:none;
}
.amenities li img {
width:100%;
}
.taxi {
display:none;
}
.taxi li {
float: left;
list-style: none;
font-size:12px;
color: #000 !important;
display: block;
width:85px;
height:85px;
line-height:20px;
padding-top:15px !important;
padding:5px;
margin-bottom: 10px;
margin-right:5px;
}
.taxi li img {
width:70%;
}
}
@media (min-width: 320px) and (max-width: 767px) {
.tabs {
  position: relative;
  overflow: hidden;
  background-color: #dd9c2b;
  background-image: url(../images/yellow-bg.jpg);
  background-repeat: repeat-x;
  background-size:8%;
}
.tabnav {
    display: flex;
    width: 90%;
    margin: 0 auto;
	margin-top:20px;
}
.tab {
width:20vw;
height:20vw;
line-height:20vw;
margin-right:2.5vw;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
transition: .1s ease;
text-transform: uppercase;
border-radius:100%;
background: #dd9c2b;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
background-size: auto;
font-size:13px;
font-weight:600;
padding-top: 0;
border:4px solid #fff;
}
.example-theme .tabnav .tab {
    color: #fff;
}
.etios, .dzire, .innova, .crysta, .traveller {
background-image: none !important;
}
.tab-content {
    font-size: 14px;
    width: 100%;
    padding:5px;
    line-height: 1.3em;
    margin-top:20px;
}
.tab-content h3 {
font-size:25px;
margin-top:10px;
margin-bottom: 10px !important;
}
.tab-content h4 {
font-size:18px;
margin-bottom: 10px !important;
}
.tab-content p {
font-size:14px;
}
.amenities li {
font-size:15px;
width:40px;
height:40px;
line-height:30px;
padding:1vw;
margin-bottom:10px;
margin-right:10px;
}
.amenities li:hover {
background-color:none;
}
.amenities li img {
width:100%;
}
.taxi {
display:none;
}
.taxi li {
float: left;
list-style: none;
font-size:9px;
color: #000 !important;
display: block;
width:55px;
height:55px;
line-height:20px;
padding-top:8px !important;
padding:3px;
padding-top: 20px;
margin-bottom: 10px;
margin-right:5px;
}
.taxi li img {
width:70%;
}
}