html, body{
      padding:0;
      margin:0;
      font-family: 'Open Sans', sans-serif;
      background-size: cover;
}
.footer{
	min-width:100%;
  max-width: 100%;
}

.page {
      max-width: 1300px;
      margin:0 auto;
 }

.container {
      max-width: 1300px;
      margin:0 auto;
 }
.img-flex{
    width: auto;
    height: 137px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.img-flex2{
    width: auto;
    height: 180px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.img-flex3{
    width: auto;
    height: 150px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.img-flex4{
    width: auto;
    height: 142px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.img-flex5{
    width: auto;
    height: 130px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.icon-1 {
  display: none;
}
.event-main{
	background:cover;
	margin:20px;
}

.col-sm-4{
	background:rgba(222,219,219,0.70);
	padding:10px;
	border-color: #fff;
	margin-right:auto;
}

.col-sm-2{
	background:rgba(126,87,197,0.20);
}

.col-xl-10{
	border: 2px solid rgba(126,87,197,0.20);
	padding:20px;
	margin-right:auto;
}

.mtcc{
	margin-top: 20px;
	background:rgba(216,216,216,1.00);
	padding:15px;
}
img {
	display: block;
	margin:0 auto;
}
 hr {
  max-width: 1300px;
    background-color: grey;
}

p {
  font-size: 1em;
  line-height: 1.65em;
}

.p2 {
  font-size: 1em;
  line-height: 1.6em;
}

.p2 a{
	text-decoration: none;
	color: #000;
  font-size: 1em;
  line-height: 1.6em;
}

.p2 a:hover{
	text-decoration: none;
	color: #7F3F97;
  font-size: 1em;
  line-height: 1.6em;
}

.p3 {
  text-align: center;
  font-size: 1.25em;
  line-height: 1.65em;
}

.p3 a{
	text-decoration: none;
	color: #000;
  font-size: 1em;
  line-height: 1.65em;
}

.p3 a:hover{
	text-decoration: none;
	color: #7F3F97;
  font-size: 1em;
  line-height: 1.65em;
}


.p4 {
	margin-top: 0;
  text-decoration: none;
  color: #000;
  font-size: 1em;
  line-height: 1.2em;
}
.p4 a{
  text-decoration: none;
  color: #000;
  font-size: 1em;
  line-height: 1.2em;
}

.p4 a:hover{
    text-decoration: none;
    color: #7F3F97;
    font-size: 1em;
    line-height: 1.2em;
    text-align: center;
}

.p5 {
  font-size: .9em;
  line-height: 1.3em;
}

.p5 a{
	text-decoration: none;
	color: #7F3F97;
}

.p5 a:hover{
	text-decoration: none;
	color: #004987;
}

.p6 {
	text-transform:uppercase;
	margin-top: 10px;
	font-style: bold;
	color: #7F3F97;
  font-size: 1.25em;
  line-height: .5em;
}

h3 {
      text-align: center;
      font-weight: bold;
      font-size: 1.7em;
      line-height: 1.3em;
 }

h4 {
      text-align: left;
      font-weight: bolder;
      font-size: 1.35em;
      line-height: 2em;
 }

h5 {
	  color:#000;
      text-align: center;
      font-weight: bold;
      font-size: 1.35em;
      line-height: 1.25em;
 }


h5 a:hover{
	text-decoration: none;
	color:#7F3F97;
}

h4 a{
    color:#000;
	text-decoration: none;
 }

h4 a:hover{
    text-decoration: none;
	color: #7F3F97;
 }

h6 {
	  color:#000;
      text-align: center;
      font-weight: bold;
      font-size: 1em;
      line-height: 1.25em;
 }
.ride-app{
	background:rgba(216,216,216,1.00);
	padding: 20px;
}

.card-body{
	padding:20px;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px, 50px, 50px, 50px;
	align-items:top;
	justify-content: left;
}
.ride-app2{
	background:rgba(222,219,219,0.70);
	display:grid;
	grid-column: 1;
    grid-row: 1 / 4;
}

.google-apple{
	padding: 30px;
	background:rgba(138,136,136,0.71);
	display:grid;
	grid-column: 2;
    grid-row: 2;
}

.google-apple2{
	padding:30px;
	background:rgba(138,136,136,0.71);
	display:grid;
	grid-column: 3;
    grid-row: 2;
}

.export{
	display: grid;
	grid-column: 2 / 4;
	grid-row: 4;
}

.idea{
	background:#000;
}
.guide{
  vertical-align: center;
  justify-content: center;
}

.latest-research {
      margin-top: 20px;
      background: rgba(0, 71, 133, 0.35);
      padding:20px;
      grid-column: 5 / 13;
      grid-row: 3/ 5;
 }

h1
{
  margin: 0;
  font-weight: normal;
}

time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  margin: 2em auto;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #004987;
  border-bottom: 1px dashed #000;
  box-shadow: 0 2px 0 #000;
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #004987;
}

time.icon span
{
  width: 100%;
  font-size: 2.5em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

time.icon:hover, time.icon:focus
{
  -webkit-animation: swing 0.6s ease-out;
  animation: swing 0.6s ease-out;
}

@-webkit-keyframes swing {
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}

@keyframes swing {
  0%   { transform: rotate(0deg)  skewY(0deg); }
  20%  { transform: rotate(12deg) skewY(4deg); }
  60%  { transform: rotate(-9deg) skewY(-3deg); }
  80%  { transform: rotate(6deg)  skewY(-2deg); }
  100% { transform: rotate(0deg)  skewY(0deg); }
}


.footer {
  display: grid;
  grid-column: 1 / -1;
  grid-row-start: 9;
  margin: auto;
  grid-template-columns: minmax(20px,300px) minmax(20px,300px) minmax(20px,300px) minmax(20px,300px);
  justify-content: center;
  grid-template-rows: 1fr, 40px, 1fr;
  background-color: #7E57C5;
  color: #fff;
 }

.footer > div{
  padding:20px;
}

.footer{
	min-width:100%;
    max-width:100%;
}

.p8{
	color:#fff;
	font-size:.75em;
	line-height: 1em;
}

.p8 a{
	color:#fff;
	text-decoration:none;
}

.p8 a:hover{
	color:#DCDDDE;
	text-decoration:none;
}

.foot4{
	text-align: center;
	color:#fff;
	  font-size: 1em;
	text-decoration:none;
}

.foot4 a{
	color:#fff;
	text-decoration:none;
}

.foot4 a:hover{
	color:#DCDDDE;
  	text-align: center;
}
.copyright{
  max-width:1200px;
  margin:auto;
  grid-column:1/-1;
  font-size: .6em;
  line-height: 1.5em;
}


/*media query tablet*/
@media screen and (max-width: 850px){



.item-button{
  font-size: 25px;
}

 .item-button{
  margin:0;
  padding: 0 0 0 0;
  min-height: 60px;
  font-size: 25px;
}

.ccnews{
  align-content: center;
  justify-content: center;
}
.latest-research {
      padding:20px;
      grid-column: 5 / 13;
      grid-row: 5 / 6;
 }

.img-flex{
	display:none;
}
	
.img-flex2{
	display:none;
}
	
.img-flex3{
	display:none;
}
.img-flex4{
	display:none;
}
.img-flex5{
	display:none;
}
	
(orientation: portrait) { .icon-1 { display: inline; } }

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



 .item-button{
  margin:0;
  padding: 0 0 0 0;
  min-height: 60px;
  font-size: 25px;
  grid-column:1/ -1;
}

	
.ccnews{
	justify-content: space-around;
}

.latest-research {
      padding:20px;
      grid-column: 1 / -1;
      grid-row-start: 8;

 }
	
.ride-app{
	background:rgba(216,216,216,1.00);
	padding: 20px;
}

.card-body{
	padding:20px;
	display:grid;
	grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
	align-items:top;
	justify-content: left;
}
.ride-app2{
	background:rgba(222,219,219,0.70);
	display:grid;
	grid-column: 1 / -1;
    grid-row: 1;
}

.google-apple{
	padding: 30px;
	background:rgba(138,136,136,0.71);
	display:grid;
	grid-column: 1 / 3;
    grid-row: 2;
}

.google-apple2{
	padding:30px;
	background:rgba(138,136,136,0.71);
	display:grid;
	grid-column: 3 / 5;
    grid-row: 2;
}

.export{
	display: grid;
	grid-column: 1 / -1;
	grid-row: 3;
}


.social, .hr-devide, .vl{
  display:none;
}
  }