
<!--
.style3 {
	color: #F0F0F0;
    font-family: 'Titillium Web', sans-serif;
	font-size: 14px;
}


<!--
.atcicles3 {
    font-family: 'Oswald', sans-serif;
	font-size: 17px;
}
.atcicles4 {
    font-family: 'Oswald', sans-serif;
	font-size: 24px;
}
.atcicles5` {
    font-family: 'Oswald', sans-serif;
	font-size: 14px;
}
-->
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  max-width: 1220px;
  table-layout: center;
  background-color:#FFFFFF
  
}
*{text-decoration:none; list-style:none;  padding:0px; outline:none;}
body{margin:0px; padding:0px; font-family: 'Oswald', sans-serif;}
section{width:100%; max-width:1200px; margin:0px auto; display:table; position:relative;}
h1{margin:0px auto; display:table; font-size:26px; padding:40px 0px; color:#002e5b; text-align:center;}
h1 span{font-weight:500;}

header{width:100%; display:table; background-color:#fde428; margin-bottom:50px;}
#logo{float:left; font-size:24px; text-transform:uppercase; color:#002e5b; font-weight:600; padding:20px 0px;}
nav{width:auto; float:right;}
nav ul{display:table; float:center;}
nav ul li{float:left;}
nav ul li:last-child{padding-right:0px;}
nav ul li a{color:#002e5b; font-size:21px; padding: 10px 20px; display:inline-block; transition: all 0.5s ease 0s;}
nav ul li a:hover{background-color:#ccc; color:red; transition: all 0.5s ease 0s;}
nav ul li a:hover i{color:#fde428; transition: all 0.5s ease 0s;}
nav ul li a i{padding-right:10px; color:#002e5b; transition: all 0.5s ease 0s;}

.toggle-menu ul{display:table; width:25px;}
.toggle-menu ul li{width:100%; height:3px; background-color:#002e5b; margin-bottom:4px;}
.toggle-menu ul li:last-child{margin-bottom:0px;}

label{display:none;}

input[type=checkbox] {
  transform: scale(1.5);
}

.content{display:table; margin-bottom:60px; width:900px;}
.content h2{font-size:18px; font-weight:500; color:#002e5b; border-bottom:1px solid #fde428; display:table; padding-bottom:10px; margin-bottom:10px;}
.content p{font-size:14px; line-height:22px; color:#7c7c7c; text-align:justify;}

footer{display:table; padding-bottom:30px; width:100%;}
.social{margin:0px auto; display:table; display:table;}
.social li{float:left; padding:0px 10px;}
.social li a{color:#002e5b; transition: all 0.5s ease 0s;}
.social li a:hover{color:#fde428; transition: all 0.5s ease 0s;}

@media only screen and (max-width: 1440px) {
section{max-width:95%;}
}

@media only screen and (max-width: 980px) {
header{padding:20px 0px;}
#logo{padding:0px;}
input[type=checkbox].hidden{
   display:none;
} {position: absolute; top: -9999px; left: -9999px; background:none;}
input[type=checkbox]:fous{background:none;}
label {float:right; padding:8px 0px; display:inline-block; cursor:pointer; }
input[type=checkbox]:checked ~ nav {display:block;}

nav{display:none; position:absolute; right:0px; top:53px; background-color:#002e5b; padding:0px; z-index:99;}
nav ul{width:auto;}
nav ul li{float:none; padding:0px; width:100%; display:table;}
nav ul li a{color:#FFF; font-size:15px; padding:10px 20px; display:block; border-bottom: 1px solid rgba(225,225,225,0.1);}
nav ul li a i{color:#fde428; padding-right:13px;}
}

@media only screen and (max-width: 980px) {
.content{width:90%;}
}

@media only screen and (max-width: 568px) {
h1{padding:25px 0px;}
h1 span{display:block;}
}

@media only screen and (max-width: 480px) {
section {max-width: 90%;}
}

@media only screen and (max-width: 360px) {
h1{font-size:20px;}
label{padding:5px 0px;}
#logo{font-size: 20px;}
nav{top:47px;}
}

@media only screen and (max-width: 320px) {
h1 {padding: 20px 0px;}
}

.style4 {
	font-size: 12px
}

section#timeline {
  width: 80%;
  margin: 20px auto;
  position: relative;
}
section#timeline:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 0 0 -1px;
  width: 2px;
  height: 100%;
  background: Red;
}
section#timeline article {
  width: 100%;
  margin: 0 0 20px 0;
  position: relative;
}
section#timeline article:after {
  content: '';
  display: block;
  clear: both;
}
section#timeline article div.inner {
  width: 40%;
  float: left;
  margin: 5px 0 0 0;
  border-radius: 6px;
}
section#timeline article div.inner span.date {
  display: block;
  width: 70px;
  height: 70px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -32px;
  border-radius: 100%;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #e74c3c;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 2px #25303B;
}
section#timeline article div.inner span.date span {
  display: block;
  text-align: center;
}
section#timeline article div.inner span.date span.day {
  font-size: 17px;
}
section#timeline article div.inner span.date span.month {
  font-size: 17px;
}
section#timeline article div.inner span.date span.year {
  font-size: 17px;
}
section#timeline article div.inner h2 {
  padding: 15px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -1px;
  border-radius: 6px 6px 0 0;
  position: relative;
}
section#timeline article div.inner h2:after {
  content: '';
  position: absolute;
  top: 20px;
  right: -5px;
  	width: 10px; 
	  height: 10px;
  -webkit-transform: rotate(-45deg);
}
section#timeline article div.inner p {
  padding: 15px;
  margin: 0;
  font-size: 14px;
  background: #fff;
  color: #656565;
  border-radius: 0 0 6px 6px;
}
section#timeline article:nth-child(2n+2) div.inner {
  float: right;
}
section#timeline article:nth-child(2n+2) div.inner h2:after {
  left: -5px;
}
section#timeline article:nth-child(1) div.inner h2 {
  background: #e74c3c;
}
section#timeline article:nth-child(1) div.inner h2:after {
  background: #e74c3c;
}
section#timeline article:nth-child(2) div.inner h2 {
  background: #2ecc71;
}
section#timeline article:nth-child(2) div.inner h2:after {
  background: #2ecc71;
}
section#timeline article:nth-child(3) div.inner h2 {
  background: #e67e22;
}
section#timeline article:nth-child(3) div.inner h2:after {
  background: #e67e22;
}
section#timeline article:nth-child(4) div.inner h2 {
  background: #1abc9c;
}
section#timeline article:nth-child(4) div.inner h2:after {
  background: #1abc9c;
}
section#timeline article:nth-child(5) div.inner h2 {
  background: #9b59b6;
}
section#timeline article:nth-child(5) div.inner h2:after {
  background: #9b59b6;
}

@media screen and (max-width: 600px) {
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: center;
  }
  
  table td::before {
    content: attr(data-label);
    float: left;
  }
}


.buttonx {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 225px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.buttonx span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonx span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonx:hover span {
  padding-right: 25px;
}

.buttonx:hover span:after {
  opacity: 1;
  right: 0;
}
.nav-tabs
 
{
 
border-color:#0099CC;
 
width:70%;
font-family: 'Oswald', sans-serif;
	font-size: 22px;
padding: 6px;


}
 
 
.nav-tabs > li a {
 
border: 1px solid #0099CC;
 
background-color:white;
 
color:#0099CC;
 
}
 
 
.nav-tabs > li.active > a,
 
.nav-tabs > li.active > a:focus,
 
.nav-tabs > li.active > a:hover{
 
background-color:red;
 
color:#FFF;
 
border: 1px solid #0099CC;
 
border-bottom-color: transparent;

 
}
 
 
.nav-tabs > li > a:hover{
 
background-color: red !important;
 
border-radius: 5px;
 
color:#FFF;
  
}

@media all and (max-width:724px){
.nav-tabs > li > a > span {display:none;}	
.nav-tabs > li > a {padding: 6px 6px;}
.nav-tabs
 
{
 
border-color:#0099CC;
font-family: 'Oswald', sans-serif;
	font-size: 16px;
	width:100%;


}

}


* {box-sizing: border-box;}
body {font-family: 'Oswald', sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

footer {
      background-color: #f2f2f2;
      padding: 25px;
	    font-size: 14px;

}
}
.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #ED8D8D;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.how-it-works.row .col-2 {
  align-self: stretch;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #ED8D8D;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #ED8D8D;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #ED8D8D;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

<!-- bottom

ul { list-style: none; }
ul>li>a {
color: black;
text-decoration: none;
line-height: 1.8;
}
ul>li>a:hover,
a:hover{
color: red;
font-weight: 500;
}

.col-heading {
display: block;
font-size: 2rem;
text-transform: uppercase;
color:black;
font-weight: 500;
margin: 1rem 0;
padding: .4rem 0px;
border-bottom: 1px solid black; 
letter-spacing: 3px;
}

.fa {
color: #304f50;
margin-right: 10px;
font-size:18px;
width:2.25rem;
}
#to-top {
display: none;
position: fixed;
bottom: 40px;
right: 20px;
font-size: 18px;
border: none;
outline: none;
background-color: #304f50;
color:  #304f50;
padding: 15px;
border-radius: 14px;
cursor: pointer;
z-index: 99;
}
#to-top:hover {
background-color: #555;
}

#bottom-footer {
background-color:black;
color:white;
margin-top: 2rem;
padding-top: .3rem;
}
.vertical-links>li {
display: inline-block;
vertical-align: text-bottom;
}
.vertical-links>li>a {
color: white;
font-weight: 400;
margin-left: 1rem;
list-style-type:square;
}

-->