html, body {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
}

.smartCity #content_ind a {
    text-decoration: none;
}
.smartCity #content_ind .container #breadcrumb{ display:none;}
.smartCity #content_ind {padding-bottom:0px;}




.wrapper{
 /* height: 100%;*/
  font-family: "Roboto", sans-serif;
  font-size: 16px;
width: 100%;
}
.wrapper{ margin:0; color:rgba(131,131,131,1);
background-image: url(../images/headerBG.png), url(../images/bodyBG.png);
background-repeat: no-repeat, no-repeat;
background-size: auto, contain;
background-position: top 0px right 30%, bottom 0px left 0px;
}

.containerIn { max-width:960px; margin-left: auto; margin-right: auto;
}

.headerIn{min-height:650px; display:block;
background-image:url(../images/animatedCity.gif); background-position: right 0px top 0px; background-repeat: no-repeat;}
.brand img{ display: block; max-width: 100%; height: auto;margin-top: 4px;visibility: hidden;}
.jumbotronIn{color:rgba(190,45,25,1); margin-top: 320px;}
.jumbotronIn h2{ font-size: 3.25em; font-weight: 300;margin-bottom: 5px; line-height: 110%;}
.jumbotronIn h4{ font-size: 1.3125em; font-weight: 300;margin-top: 5px; line-height: 150%;}

.intro { padding:15px; background: #fff; border-radius: 5px; box-shadow: 0 0 9px 2px rgba(0,0,0,.5); margin-bottom: 40px;}
a .intro:hover{background: rgba(255,255,255,.7); }
a .intro:hover p{color:rgba(77,76,76,1);}
.introHeader{display:block; float:left; width:100%; margin-bottom: 12px;}
.introHeader h3{ font-size: 24px; font-weight:500; color:rgba(195,10,29,1); margin:17px 0 0 0;}
.prdctLogo{ float:left; margin-right:14px; }
.intro p, .content-block p { font-size: 1.125em;line-height:150%; font-weight:300;color:rgba(131,131,131,1);}
a.groupItem {text-decoration:none;}
.green{ color: rgba(1, 102, 44, 1);}
.blue{color:rgba(1, 106, 177, 1);}
.orange{color:rgba(239, 99, 0,1);}
.img-responsive{display: block; max-width: 100%; height: auto;}
.main {display: flex; flex-direction: column; width:100%; border-radius: 0 5px 0 5px;
  background-color: transparent;
background-image:
  url(../images/smartLightingBG.png),
  url(../images/energywatersBG.png),
  url(../images/smartParkingBG.png),
  url(../images/wasteManagementBG.png),
  url(../images/environmentalMonitoringBG.png),
  url(../images/trafficMonitoringBG.png),
  url(../images/publicWifiBG.png),
  url(../images/electronicGuidesBG.png);

background-position:
  top 0px right 0px,
  top 15% left 0px,
  top 28% right 0px,
  top 44% left 0px,
  top 57% right 0px,
  top 69% left 0px,
  top 87% right 0px,
  top 99% left 0px;

  background-repeat:
    no-repeat;

  background-size:
    38%, 38%,
    48%, 45%,
    40%, 42%,
    56%, 34%;
}

.col-12 {width: 100%;}
.col-11 {width: 91.66666667%;}
.col-10 {width: 83.33333333%;}
.col-9 {width: 75%;}
.col-8 {width: 66.66666667%;}
.col-7 {width: 58.33333333%;}
.col-6 {width: 50%;}
.col-5 {width: 41.66666667%;}
.col-4 {width: 33.33333333%;}
.col-3 {width: 25%;}
.col-2 {width: 16.66666667%;}
.col-1 {width: 8.33333333%;}

.left{align-self: flex-start;}
.right{align-self: flex-end;}

.content-block{ display:flex; flex-direction: row; background:#fff; border-radius: 5px; box-shadow: 0 0 9px 2px rgba(0,0,0, .5); padding:15px; margin-bottom: 20px;}
.content-block p { margin-top: 0px; padding-top: 0px;}
.leftSide{  flex-grow:1; align-self:flex-start; text-align: center; flex-basis: 13.33%;}
  .icon img{ margin-left: auto; margin-right: auto; margin-bottom: 23px;}
  .percent{font-size: 3.125em;}
  .percent sup{font-size: .6em; font-weight: 300;}
  .benefit{ font-size: 1.375em;}

.rightSide{text-align:left; flex-grow:3; margin-left: 15px; padding-left: 15px; background: url("../images/seperator.png") no-repeat left 78px; flex-basis: 13.33%; background-size: 1px 48% ; }
.rightSide h3{ font-size:1.75em; font-weight: 300; margin-bottom: 11px; padding-bottom: 0px;}

.langSmart{ padding:3px; background-color:#BE2D19; border-radius:80%; width:81px; height:80px; float:right;}
.langSmart ul {margin:26px 0px; padding:0;}
.langSmart ul li{ display: inline;margin:0px; padding:10px 8px 10px 8px;}
.langSmart ul li:first-child{border-right:1px solid #fff;}
.langSmart ul li.langSelected{margin-left:-1px;}
.langSmart ul li.langSelected a{ color:#Fff; text-decoration:none;}
.langSmart ul li a{ color:#Fff; text-decoration:underline;}


.contactSales{ color:rgba(115,113,113,1);font-size: 0.94em; font-weight: 400; display:none;}
.contactSales p{margin-top: 5px; margin-bottom: 5px;}
.contactSales a{ color:rgba(202,77,77,1); text-decoration: underline;}
.contactSales a:hover{text-decoration: none;}
.contactSales h4{margin-bottom: 5px; font-size: 1.2em; font-weight: 400;}

.copyrights{display:block; border-top: 1px solid rgba(151,151,151,1); margin-top: 25px; padding-top: 5px; margin-bottom:25px; }
.rights{font-size: 1.0625em; color:rgba(150,150,150,1);}
.subscribe{float:right; background: rgba(190,45,25,1); padding:8px; border-radius: 5px; }
.subscribe a{ color:rgba(255,255,255,1); text-decoration: none;}


.socialShare{ position:fixed; top:350px; right:0px; background: rgba(190,45,25,1); border-radius: 8px 0 0 8px; padding:15px;}

.socialShare span, .socialShare a{color:#fff;width:22px; height:22px;display:block; margin-bottom: 14px;}
.socialShare span:last-child, .socialShare a:last-child{margin-bottom: 0px;}

.twitterSC a{ background: url(../images/twitterIcon.png) no-repeat center center;font-size: 0px;}
.linkedinSC a{ background: url(../images/linkedinIcon.png) no-repeat center center;font-size: 0px;}
.youtubeSC a{ background: url(../images/youtubeIcon.png) no-repeat center center;font-size: 0px;}
.fbSC a{ background: url(../images/facebookIcon.png) no-repeat center center;font-size: 0px;}


.promoVideos{ margin-bottom: 20px;}
.promoVideos a img{ border:3px solid rgba(180,180,180,.6);}
.promoVideos a:hover img{ border:3px solid rgba(190,45,25,.9);}
.promoVideos a span{font-size:13px; color: #5B5757;}
.promoVideos a:hover span{ color:rgba(190,45,25,.9); }
/*----------------------------------media quueries ---------------------------------*/


/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    /* Styles */
 	.col-8,.col-9 {width:100%;}
	.jumbotronIn{ padding:5px; background: rgba(255,255,255,.5); border-radius:5px; }
	.headerIn{background-position: center top 0px; background-size:contain;}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 480px) {
    /* Styles */
	.col-8,.col-9 {width:100%;}
	.jumbotronIn{ padding:5px; background: rgba(255,255,255,.5); border-radius:5px; }
	.headerIn{background-position: center top 0px; background-size:contain;}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 481px)
and (max-width : 768px) {
    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 769px)
and (max-width : 1024px) {
    /* Styles */
    .smartCity #content_ind > .container{ width:769px;  padding:0px!important; }
    .smartCity #content_ind > .container .row:nth-child(2){ margin-left: 0px; margin-right: 0px; padding-left:0px; padding-right:0px;}
    .smartCity #content_ind > .container .row:nth-child(2) .col-lg-12{ padding:0px;}


}

/* Larger screens ----------- */
@media only screen
and (min-width : 1024px) {
    /* Styles */
    .smartCity #content_ind > .container{ width:100%!important; padding:0px!important; }
    .smartCity #content_ind > .container .row:nth-child(2){ margin-left: 0px; margin-right: 0px; padding-left:0px; padding-right:0px;}
    .smartCity #content_ind > .container .row:nth-child(2) .col-lg-12{ padding:0px;}


}