@charset "UTF-8";

/* Layout Small Screens */

.links, .languages, .navigation .active span, .slide-1 .person, .slide-1 .birds, .slide-1 .qmark, .slidewrp > h1  {
    display:  none;
}
header{
    height:  10px;
}
nav{
    margin-top: 80px;
    padding-left: 0;

}
 .openedMenu{
     display: block;
 }
a.menuButton{
    display: block;
    background: #88C720 url(../img/mobile_link_menu.png) no-repeat 4px 4px;
    position: absolute;
    width:  30px;
    height:  34px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    top:  64px;
    left: 25px;
    cursor: pointer;
}
.logo {
    float: none;
    text-align: center;
    clear:  both;
    position: absolute;
    left: 30%;
    top:  15px;
}

.navigation {
    display: none;
    position: static;
    padding: 0px 0px 0 0px;

    width: 100%;
}
.navigation li{
    width:  100%;
    background-color: #88C720;
    border-bottom: 1px solid #fff;

}
.navigation a {
    color: #fff;
    display: block;

    padding: 10px;
    background: url(../img/mobile_link_arrow.png) no-repeat right center;
    font-size: 15px;


}
.navigation .active a {
            background: none;
            color:#FFF;
            background: url(../img/mobile_link_arrow.png) no-repeat right center;
        }
 .navigation a:hover{
     background: #5db2c7 url(../img/mobile_link_arrow.png) no-repeat right center;
 }
article{
    background:url(../img/mainimageSmall.jpg) center 0 repeat;
    margin-top:  10px;
}
.slide-1{
    padding: 25px 0 105px;
}

.slide-1 .slogan {
     margin-left:  -10%;
 }
.slide-1 .wrp {
    padding-left: 10%;
    height:  310px;

}
 .slide-2 .wrp {
    padding: 0;

}
.slide-1 .slidewrp {
    width: auto;
    text-align: center;
}
.slidewrp .buttons {
    left: 10%;
    position: absolute;

    width: 80%;
    z-index: 5;
}

.slide-2 h2 {
    font-size: 25px;
}
.slide-2 p{
    font-size: 13px;
    padding: 0 5px;
}
.video h3, .video h3 span {
    font-size: 35px;
}
.slide-3 .buttons div{
    width:  100%;

    }
    .slide-3 .buttons div a,  .slide-3 .buttons div.first a  {
    float: none;
    margin: 5px auto;
    width:  90%;
    max-width:  100%;
    padding: 13px 10px 13px 10px;
    }
.slide-3 {
    padding: 40px 0 0px;
}
.slide-3 p {
    margin: 0px auto 15px auto;
    padding-top: 5px;
    width: 90%;
}
.slide-3 p, .slide-3 p a {
    font-size: 30px;
}
.links2 {
    display: block;
    position: static;
    padding: 10px 0px 10px 0px;

}

.links2 a {
    color: #fff;
    display: block;
    text-decoration: none;
    margin: 15px;
    padding: 9px;
    border: 1px solid #fff;
    background: url(../img/mobile_link_arrow.png) no-repeat right center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
 .links2 a:hover{
     background: #b8b8b8 url(../img/mobile_link_arrow.png) no-repeat right center;
 }
footer {
    padding: 0 0 25px 0;
    position: relative;
}
 footer p {
    padding-left: 15px;
    padding-top: 20px;
}
footer .languages{
    display:  block;
    position: absolute;
    bottom: 50px;
    left:  10px;
}

 /*features page styles*/
.buttonCenter{
    width:  100%;
    margin-left: 0;
}
.top-line .buttons{
    left: 0;
    margin: 0;
}
.top-line .buttons a, .top-line .buttons a.grey{
    width:  75%;
    margin: 1% 5%;

    font-size: 18px;
    text-transform: uppercase;
}

 .overlay.withnav ul {
     display: none;
 }

.sidenav{
    display: none;
}
.overlay.withnav .wrp img.qmarkbirdsmall {
        display: block;

    left: 25%;
    margin-bottom: 20px;
    margin-top: -100px;
    max-width: 50%;
    position: relative;
    text-align: center;

 }
.qmarkbird {
     display: none;
}
  .qmarkbird{
     background:url(../img/bird-1.png);
    width:289px;
    height:311px;
 }
.seperator-1, .seperator-2 {
    width: 100%;
    background: none;
    margin: 0;
    height: 30px;
    display:none;
}

.list-1 .info.leftside,   {
    display: none;
}
.list-1 .info.rightside{
    background:  none;
}
.list-1 .info {
    margin: 0;
    padding: 0;
    width: 100%;
}
/*tabs styling*/

 .list-1 .info, .list-1 .info.leftside,  .list-1 .info.rightside{
     background: #fff;
 }
.list-1 .info p, .list-1 .info ul{
    display: none;
}
.list-1 .info.activetab p, .list-1 .info.activetab ul{
     display: block;
}
.list-1 .info.activetab p{
     text-align: center;
     padding: 2px 5px;
     margin: 0;
}
.list-1 .info.activetab ul {
   border-bottom: #b3d4fc solid 2px;
   padding: 2px 10px;
   margin: 0;
}
 .list-1 .info h5{
     background:  #fff;
     font-size: 23px;
     padding: 10px;
     border-bottom: #b3d4fc solid 2px;

 }
  .list-1 .tab-1 p, .list-1 .tab-1 ul{
     display: block;
 }
/*pricing page styles*/
.info-1 .bub1{


}
.info-1 .bubles {
        background: none;
        max-width: 0;
        height:auto;
        margin:20px 0;
        display: block;
        position:relative;
        left: 50%;
    }
    .info-1 .buble-1, .info-1 .buble-2, .info-1 .buble-3, .info-1 .buble-4, .info-1 .buble-5 {
        position:relative;
        top: auto;
        left: 0;
        margin-left: -87px;
        width:173px;
        height: 173px;
        text-align:center;
        font-size:22px;
        color:#FFF;
        font-weight:normal;
        line-height:110%;
        background:url(../img/circle1.png) no-repeat;
        display: block;
        padding-top: 40px;
        margin-bottom: 10px;
    }
    .info-1 .buble-2 {
    background:url(../img/circle2.png) no-repeat;
    width:196px;
    height: 196px;
    margin-left: -98px;
    }
    .info-1 .buble-3 {
    background:url(../img/circle3.png) no-repeat;
    width:219px;
    height: 219px;
    margin-left: -109px;
    }
    .info-1 .buble-4 {
    background:url(../img/circle4.png) no-repeat;
    width:239px;
    height: 239px;
    margin-left: -119px;
    }
    .info-1 .buble-5 {
    background:url(../img/circle5.png) no-repeat;
    width:260px;
    height: 260px;
    margin-left: -130px;
    }

 .info-2{
     margin-top: 10%;
 }

.info-2 .coll-1, .info-2 .coll-2{
     margin-top: -20%;
 }
@media screen and (max-width: 400px) {
    .info-2{
     margin-top: 0;
     background: none;
 }
.info-2 .coll-1, .info-2 .coll-2{
     margin-top: 0
 }
    .top-line .buttons a, .top-line .buttons a.grey {
        width: 65%;
    }
}