@font-face{
    src:url(fonts/Lato-Regular.ttf);
    font-family:Lato-Regular;
}
@font-face{
    src:url(fonts/Lato-Regular.ttf);
    font-family:Lato-Medium;
}
@font-face{
    src:url(fonts/Lato-Black.ttf);
    font-family:Lato-Black;
}
@font-face{
    src:url(fonts/Lato-BlackItalic.ttf);
    font-family:Lato-BlackItalic;
}
@font-face{
    src:url(fonts/Lato-Bold.ttf);
    font-family:Lato-Bold;
}
@font-face{
    src:url(fonts/Lato-Light.ttf);
    font-family:Lato-Light;
}
@font-face{
    src:url(fonts/Lato-Thin.ttf);
    font-family:Lato-Thin;
}
html, body{
    margin:0px;
    padding:0px;
}
body{
    width:100%;
    height:100%;
    -webkit-tap-highlight-color: transparent;
}
.header
{
    background-image:url(../images/img1.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    height:730px;
    width:100%;
}
.logo{
    background-image:url(../images/logo.png);
    height:211.5px;
    width:277.5px;
    background-size:100% auto;
    background-position:center top;
    display:block;
    margin:auto;
    background-repeat:no-repeat;
}
.highlight{
    position:absolute;
    top:558px;
    width:100%;
    height:172px;
    background-color:rgba(0,0,0,0.70);
}
.highlight .left {
    float:left;
    margin-left:2%;
    margin-top:1%;
    color:white;
    font-family:Lato-Light;
}
.highlight .right{
    float:right;
    margin-right:2%;
    margin-top:1%;
    font-family:Lato-Bold;
    font-size:40.89px;
    color:white;
}
.highlight-2{
    position:relative;
    top:320px;
    width:100%;
    height:172px;
    background-color:rgba(0,0,0,0.70);
}
.highlight-2 .left {
    float:left;
    margin-left:2%;
    margin-top:1%;
    color:white;
    font-family:Lato-Light;
}
.highlight-2 .right{
    float:right;
    margin-right:2%;
    margin-top:1%;
    font-size:40.89px;
    color:white;
}
.section-2{
    background-image:url(../images/img2.jpg);
    width:100%;
    height:589px;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;    
    background-position:center;
}
.section-3{
    background-image:url(../images/img3.jpg);
    width:100%;
    height:484px;
    background-size: auto 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}
.footer{
    width:100%;
    background-color:black;
    color:white;
    height:34px;
    padding-top:10px;
    font-family:Lato-Thin;
    font-size:10px;
    text-align:center;
}
.footer a{
    color:white;
    text-decoration:none;
}

.left-circle-opened
{
        background-image: url(../images/left-circle-opened.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 406px;
    height: 112px;
    padding-left: 45px;
    float: left;
    margin-left: -40px;
    margin-top: -7px;
    display: none;
    color: white;
    padding-top: 15px;
}
.left-circle-opened span{
    font-family:Lato-Medium;font-size:34.42px;
}
.left-circle-opened p{
    font-family:Lato-Medium;font-size:15.1px;
}
.right-circle-opened
{
    background-image:url(../images/right-circle-opened.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width:406px;
    padding-right:45px;
    height: 112px;
    float:right;
    margin-right:-40px;
    margin-top:-7px;
    display:none;
    color:white;
    padding-top: 15px;
}
.right-circle-opened span{
    font-family:Lato-Medium;font-size:34.42px;
}
.right-circle-opened p{
    font-family:Lato-Medium;font-size:15.1px;
}
.c1{
    background-image:url(../images/circle1.png);
    height:113px;
    width:113px;
    background-repeat:no-repeat;
    position:relative;
    z-index:99999999;
}
.c2{
    background-image:url(../images/circle2.png);
    height:113px;
    width:113px;
    background-repeat:no-repeat;
    position:relative;
    z-index:999999;
}
.c3{
    background-image:url(../images/circle3.png);
    height:113px;
    width:113px;
    background-repeat:no-repeat;
    position:relative;
    z-index:99999999;
}
.c4{
    background-image:url(../images/circle4.png);
    height:113px;
    width:113px;
    background-repeat:no-repeat;
    position:relative;
    z-index:999999;
}
.c5{
    background-image:url(../images/circle5.png);
    height:113px;
    width:113px;
    background-repeat:no-repeat;
    background-size:100%;
    position:relative;
    z-index:99999999;
}
.table1{
    height:100%;float:left;margin-left:2%;
}
.table2{
    height:100%;float:right;margin-right:2%;
}
.wrapper{
    height:127px;
    
}
@media(max-width:500px)
{
    .wrapper{
        width:350px;
        height:65px;
    }
    #circle5
    {
        min-width: 190px;
    }
    .highlight {
    position: absolute;
    top: 630px;
    width: 100%;
    height: 100px;
    background-color: rgba(0,0,0,0.70);
}
    .highlight .right {
    font-size: 17.03px;
    margin-top: 4%;
}
    .highlight .left span:first-child
    {
        font-size:27.01px !important;
    }
    .highlight .left span:nth-child(3)
    {
        font-size:11.16px !important;
    }
    .highlight .left span:nth-child(5)
    {
        font-size:30.7px !important;
    }
    .highlight-2 .left
    {
        margin-top:5%;
    }
    .highlight-2 .left span{
        font-size:24.42px !important;
    }
    .highlight-2 .right span{
        font-size:15px !important;
    }
    .highlight-2 .right img{
        width:15px;
    }
    .table1{
        position:absolute;
        height:80%;
    }
    .table2{
        position:absolute;
        right:2%;
        height:80%;
    }
.left-circle-opened {
    width: 45%;
    height: 50px;
    background-size: 100% 100%;
    margin-top: -2px;
    margin-left: -24px;
    padding-left: 35px;
    position: relative;
    z-index: 9999999;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-right: 10px;
}.left-circle-opened span {
    font-size: 14px;
}
 .left-circle-opened p {
    font-size: 10px;
    margin-top:2px;
}
 .right-circle-opened
    {
        width:45%;
        height:50px;
        background-size:100% 100%;
        margin-top:-3px;
        margin-right: -24px;
        padding-right: 35px;
        padding-left: 10px;
        position:relative;
        z-index:99999;
    padding-top: 5px;
    padding-bottom: 10px;        
    }
 .right-circle-opened span {
    font-size: 14px;
}
    .right-circle-opened p {
    font-size: 10px;
    margin-top:2px;
}
    .c1{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c2{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c3{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c4{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c5{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .section-2{
        height: 480px;
    }
   /* .left-circle-opened
    {
        width:68%;
        padding-left:15px;
        height:66px;
        background-size:100% 100%;
        margin-left:-21px;
        margin-top:-4px;
    }
    .left-circle-opened span {
    font-size: 15.42px;
}
    .left-circle-opened p {
    font-size: 9.1px;
}
    .right-circle-opened
    {
        width:68%;
        padding-right:15px;
        height:66px;
        background-size:100% 100%;
        margin-right:-14px;
        margin-top:-4px;
    }
    .right-circle-opened span {
    font-size: 15.42px;
}
    .right-circle-opened p {
    font-size: 9.1px;
}
    .c1{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c2{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c3{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c4{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }
    .c5{
        width:60px;
        height:60px;
        background-size:100%;
        background-repeat:no-repeat;
    }*/
    .forA{
        font-size:25px !important;
        font-family:Lato-Bold !important;
    }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
body {
  background: black;
}

.arrow {

  position: absolute;
  outline:none;
  bottom: 180px;
  cursor:pointer;
  display:block;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}