* {margin: 0; padding: 0}

html {
  overflow-x: hidden;
  min-height: 600px
}

.header {
    background: #85c6db;
    height: 650px;
    position: relative;
    overflow: hidden;
    -webkit-animation: headerback 15s linear infinite;
    -moz-animation: headerback 15s linear infinite;
    -o-animation: headerback 15s linear infinite;
    animation: headerback 15s linear infinite;
}


@-webkit-keyframes headerback {
    25% {background: #85c6db}
    50% {background: #0f355b}
    85% {background: #0f355b}
    100% {background: #85c6db}
}

@-moz-keyframes headerback {
    25% {background: #85c6db}
    50% {background: #0f355b}
    85% {background: #0f355b}
    100% {background: #85c6db}
}

@-o-keyframes headerback {
    25% {background: #85c6db}
    50% {background: #0f355b}
    85% {background: #0f355b}
    100% {background: #85c6db}
}

@keyframes headerback {
    25% {background: #85c6db}
    50% {background: #0f355b}
    85% {background: #0f355b}
    100% {background: #85c6db}
}

.text-left {
  text-align: left
}


.laptopp {
    width: 100%;
}

.home-nav {
    position: absolute;
    left: 10%;
    top: 40px;
    font-size: 12px;
    font-weight: 100;
    z-index: 9;
    width: 75%;
}

.dribbble-home {
float: right;
    list-style: none;
    right: 0px;
    position: absolute;
}

.dribbble-home li {
  position: absolute;
}

.dribbble-home a {
      border: 1px white solid;
    border-radius: 50px;
    display: inline-block;
    width: 86px;
    padding-right: 0px !important;
    line-height: 22px;
    height: 25px;
    padding-left: 15px;
}

.dribbble-home a:hover {
background-color: rgba(255, 255, 255, 0.2)
}

.dribbble-home span {
    position: absolute;
    left: 0px;
    top: 2px;
}

.home-nav li a {
  color: rgba(255, 255, 255, 0.80);
  padding-right:  40px;
  -webkit-transition:0.3s ease;
  -moz-transition:0.3s ease;
  -o-transition:0.3s ease;
  transition:0.3s;
}

.home-nav li a:hover {
  color: white;
  font-weight: 400
}


.home-nav .amr span {
      font-size: 22px;
    position: absolute;
    line-height: 11px;
    left: -11px;
    color: rgba(70, 146, 175, 0.74);
}

body {
    min-width: 400px !important;  
    position: relative;
              text-align: center;
          font-family: "open sans";
            color: white;
            background: #103558;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  height: 100%; 
}




.main-t {
top: 30%;
    text-align: left;
    position: absolute;
    width: 50%;
    left: 9%;
    color: white;
    font-family: "open sans";
}

.main-t h1 {
    font-weight: 400;
  font-size: 40px;
  padding-bottom: 9px; 
}

.main-t h3 {
    font-weight: 100;
  font-size: 21px;
  color: rgb(33, 144, 75);
  padding-bottom: 10px;
}

.main-t p {
  font-size: 16px;
  font-weight: 100;
  line-height: 22px;
  opacity: 1;
  padding-top: 9px;
}

.grass {
  width: 240px;
  height: 40px;
  left: -20px;
  border-radius: 50px;
  position: absolute;
  background: #126c48;
  bottom: 20px;
  z-index: 2;
}

.grass-right {
  width: 400px;
  height: 40px;
  right: -20px;
  border-radius: 50px;
  position: absolute;
  background: #126c48;
  bottom: 20px;
  z-index: 2;
}


.grass:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 40px;
  border-radius: 50px;
  background: #219065;
  bottom: 40px;
  left: -60px;
}

.land_tree {
    width: auto;
    height: 40px;
    display: block;
    position: absolute;
    bottom: 40px;
    overflow: hidden;
      right: 240px;
}

.land_tree li {
    border-radius: 50%;
}

.land_tree li:nth-child(1) {
    width: 40px;
    height: 40px;
    margin: 30px 0px 0px 0px;
    background: #219065;
}

.land_tree li:nth-child(2) {
    width: 60px;
    height: 60px;
    margin: 0px 0px 0px -10px;
    background: #126c48;
}

.land_tree li:nth-child(3) {
    width: 50px;
    height: 50px;
    margin: 23px 0px 0px -7px;
    background: #219065;
}

.leftt-gras {
    right: 20px !important;
}


.tree1 {
  background: #21904b;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  border-right: 5px solid #157C3C;
  border-bottom: 5px solid #157C3C;
  z-index: 0;
  left: 90px;
  bottom: 120px;
}

.tree1:after {
    position: absolute;
    content: '';
    width: 2px;
    height: 50px;
    background: #FFF;
    margin: 30px 0px 0px 3px;
    top: 35px;
}

.tree2 {
  background: #26a76f;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border-right: 5px solid #17955e;
  border-bottom: 5px solid #17955e;
  z-index: 0;
  left: 35px;
  bottom: 100px;
}

.tree2:after {
    position: absolute;
    content: '';
    width: 2px;
    height: 50px;
    background: #FFF;
    margin: 23px 10px 0px 0px;
    top: 27px;
}

.r-mountain {
  border-left: 90px rgba(0, 0, 0, 0) solid;
  border-right: 50px rgba(0, 0, 0, 0) solid;
  border-bottom: 140px #B3A385 solid;
  position: absolute;
  right: 0px;
  bottom: 60px;
  height: 80px;
}

.r-mountain:before {
  content: '';
  position: absolute;
  left: 0px;
  border-right: 110px rgba(0, 0, 0, 0) solid;
  border-bottom: 170px #A18E6E solid;
}

.r-mountain:after {
  content: '';
  position: absolute;
  left: -33px;
  border-left: 33px rgba(0, 0, 0, 0) solid;
  border-right: 33px rgba(0, 0, 0, 0) solid;
  border-bottom: 50px #FFF solid;
}

.snow {
  margin: 0px;
  position: absolute;
  top: 41px;
  right: -35px;
  width: 66px;
}

.snow li {
  background: #FFF;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  margin: 0px;
  display: inline-block;
}

.l-mountain {
border-left: 60px rgba(0, 0, 0, 0) solid;
  border-right: 60px rgba(0, 0, 0, 0) solid;
  border-bottom: 80px #b3a385 solid;
  position: absolute;
  right: 67px;
  bottom: 60px;
}

.l-mountain:before {
content: '';
  position: absolute;
  left: 0px;
  border-right: 60px rgba(0, 0, 0, 0) solid;
  border-bottom: 80px #A18E6E solid;
}


.boat {
    bottom: 14px;
    z-index: 1;
    -webkit-animation: boatanimate 20s linear infinite;
    -moz-animation: boatanimate 20s linear infinite;
    -o-animation: boatanimate 20s linear infinite;
    animation: boatanimate 20s linear infinite;
}

@-webkit-keyframes boatanimate {
    0% {right:200px;}
    100% {right:1240px;}
}

@-moz-keyframes boatanimate {
    0% {right:200px;}
    100% {right:1240px;}
}

@-o-keyframes boatanimate {
    0% {right:200px;}
    100% {right:1240px;}
}

@keyframes boatanimate {
    0% {right:200px;}
    100% {right:1240px;}
}

.boat-body {
    width: 100px;
    height: 20px;
    background: #e25c45;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 20px;
}

.white-body {
    width: 65px;
    height: 16px;
    background: #FFF;
    margin: 0px 13px;
    border-top-left-radius: 20px;
}

.windows {
    margin: 0px 12px !important;
}


.boat .circle {
    background: #a18e6e;
    width: 7px;
    height: 7px;
    margin: 5px 3px;
    border-radius: 50%;
}

.smokestack {
    width: 10px;
    height: 17px;
    background: #a18e6e;
    bottom: 30px;
    margin-left: 45px;
}


.dark-back {
  background: #72bad1;
  bottom: -100px;
  width: 400px;
  height: 290px;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
    -webkit-animation: darkback 15s linear infinite;
    -moz-animation: darkback 15s linear infinite;
    -o-animation: darkback 15s linear infinite;
    animation: darkback 15s linear infinite;
}


.dark-back:before {
    position: absolute;
    content: '';
    background: #72bad1;
    left: 861px;
    width: 450px;
    height: 300px;
    border-radius: 50%;
    bottom: -10px;
    -webkit-animation: darkback 15s linear infinite;
    -moz-animation: darkback 15s linear infinite;
    -o-animation: darkback 15s linear infinite;
    animation: darkback 15s linear infinite;
}

.dark-back:after {
    position: absolute;
    content: '';
    background: #72bad1;
    left: 340px;
    width: 540px;
    height: 340px;
    border-radius: 50%;
    bottom: 10px;
    -webkit-animation: darkback 15s linear infinite;
    -moz-animation: darkback 15s linear infinite;
    -o-animation: darkback 15s linear infinite;
    animation: darkback 15s linear infinite;
}


@-webkit-keyframes darkback {
    25% {background: #72bad1}
    50% {background: #0d2f52}
    85% {background: #0d2f52}
    100% {background: #72bad1}
}

@-moz-keyframes darkback {
    25% {background: #72bad1}
    50% {background: #0d2f52}
    85% {background: #0d2f52}
    100% {background: #72bad1}
}

@-o-keyframes darkback {
    25% {background: #72bad1}
    50% {background: #0d2f52}
    85% {background: #0d2f52}
    100% {background: #72bad1}
}

@keyframes darkback {
    25% {background: #72bad1}
    50% {background: #0d2f52}
    85% {background: #0d2f52}
    100% {background: #72bad1}
}


ul {margin-bottom: 1.25rem;}


.light-body{
  width: 80px;
  height: 200px;
  background: #FFFFFF;
}



.lighthouse{
  bottom: 60px;
  position: absolute;
  right: 180px;
  overflow: hidden;
  -webkit-clip-path: polygon(30px 0px, 70px 0px, 80px 200px, 20px 200px);
/*  clip-path: url("../index.html/#clipPolygon");
*/
}

.red-strips {
  position: absolute;
  z-index: 2;
  right: -10px;
  top: -25px;
}

.red-strips li {
  height: 30px;
  margin-bottom: 30px;
  width: 90px;
  background-color: #e25c45;
  -webkit-transform: rotate(-23deg);
  -moz-transform: rotate(-23deg);
  -o-transform: rotate(-23deg);
  transform: rotate(-23deg);
}

.light-box {
  bottom: 260px;
  right: 190px;
  position: absolute;

}

.top-box {
  width: 40px;
  height: 13px;
  background-color: #e25c45;
  display: block
}

.top-box:after  {
    position: absolute;
  content: '';
  border-left: 10px #e25c45 solid;
  border-right: 0px transparent solid;
  border-bottom: 13px transparent solid;
  right: -10px;
}

.top-box:before  {
    position: absolute;
  content: '';
  border-right: 10px #e25c45 solid;
  border-left: 0px transparent solid;
  border-bottom: 13px transparent solid;
  right: 40px;
}


.shadow {
      width: 20px;
  height: 100%;
  display: block;
  position: absolute;
  left: 17px;
  background-color: rgba(31, 31, 31, 0.1);
  z-index: 2;
}

.balcony {
  position: absolute;
  bottom: 8px;
  margin: 0px;
  left: -12px;
  width: 63px;
}

.balcony li {
  background-color: #e25c45;
  width: 3px;
  height: 11px;
  display: inline-block;
}

.line-strip {
width: 59px;
  height: 4px;
  background-color: #e25c45;
  display: block;
  left: -10px;
  position: absolute;
  bottom: 21px;
}

.white-light {
  display: block;
  width: 40px;
  height: 35px;
  background: white;
  position: absolute;
  bottom: 13px;
}

.white-light:after {
  position: absolute;
  content: '';
  width: 23px;
  height: 23px;
  background-color: #f7a83c;
  right: 9px;
  bottom: 5px;
  border-radius: 50%;
}

.upper {
  bottom: 48px;
  position: absolute;
}

.dome {
  position: absolute;
  width: 43px;
  bottom: 50px;
  height: 30px;
  display: block;
  background-color: #b4311a;
  left: -2px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
}

.dome:after {
position: absolute;
  content: '';
  width: 7px;
  height: 21px;
  background-color: #b4311a;
  bottom: 16px;
  border-radius: 5px;
  left: 18px;
}

.enjoy {
    background-color: #1b7dbe;
  min-height: 700px;
    color: white;
    font-family: "open sans";
}

.enj-title {
  color: white;
  font-size: 33px;
  margin: 70px 0px;
    font-weight: 400
}


.enj-content h3 {
  border-bottom: 1px solid #0f68a2;
  line-height: 24px;
  font-weight: 400;
  font-size: 21px;
  padding-bottom: 15px;
}

.dribbblebtn {
  color: #ee7ca5 !important;
    border:1px solid #ee7ca5 !important;
}

.readbtn {
  margin: 18px 0 0 0;
  font-size: 12px;
  width: 150px;
  padding: 7px;
  text-align: center;
  color: #818dad;
  background: white;
  border: 1px solid #818dad;
}

.readbtn:hover{
  border-radius: 5px;
  font-weight: 400
}


a.btnn {
  display: block;
  font-weight: 100;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease;
  border-radius: 50px
}

.keepdiving {
    color: #0A4A74;
  margin-top: 20px;
  font-weight: 400 !important ;
  -webkit-animation:keepdiving 3s linear infinite;
  -moz-animation:keepdiving 3s linear infinite;
  -o-animation:keepdiving 3s linear infinite;
  animation:keepdiving 3s linear infinite;
}

@-webkit-keyframes keepdiving {
  0% {letter-spacing: 0px;}
  50% {letter-spacing: 3px;}
  100% {letter-spacing: 0px;}
}

@-moz-keyframes keepdiving {
  0% {letter-spacing: 0px;}
  50% {letter-spacing: 3px;}
  100% {letter-spacing: 0px;}
}

@-o-keyframes keepdiving {
  0% {letter-spacing: 0px;}
  50% {letter-spacing: 3px;}
  100% {letter-spacing: 0px;}
}

@keyframes keepdiving {
  0% {letter-spacing: 0px;}
  50% {letter-spacing: 3px;}
  100% {letter-spacing: 0px;}
}

.seebtn {
  margin: 45px auto 0px auto;
  width: 220px;
  color: white;
  padding: 12px;
  font-size: 19px;
  border: 1px solid white;
  background: #0f68a2;
}


.seebtn:hover {
  border-radius: 5px;
  font-weight: 400;
  color: white;
}

a.btnn:hover {
    text-decoration: none
}


a.btnn:focus {
  outline: none;
  text-decoration: none
}

.cssaward {
  color:white; font-weight:400; background:#efa619; padding:3px 5px; border-radius:5px;  font-size: 12px;
}


.article-item p {
color: #a3a3a3;
font-weight: 100;
font-size: 15px
}

.grey {
  background-color: #EFEFEF
}

.article-item h3 a {
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 28px;
}

.article-item h3 {
    margin-top: 10px !important
}


.enjoy p {
  font-weight: 100;
  padding: 8px 0 30px 0;
  line-height: 22px;
  font-size: 15px;  
}

.index {
  z-index: 99
}

ul.cloud2 {
  top: 180px;
  right: 12%;
  -webkit-animation: cloudmovee 15s linear infinite;
  -moz-animation: cloudmovee 15s linear infinite;
  -o-animation: cloudmovee 15s linear infinite;
  animation: cloudmovee 15s linear infinite;  
}

@-webkit-keyframes cloudmovee {
    0% {right: 12%}
    25% {right: 12%}
    50% {right: 10%}
    85% {right: 10%}
    100% {right: 12%}
}

@-moz-keyframes cloudmovee {
    0% {right: 12%}
    25% {right: 12%}
    50% {right: 10%}
    85% {right: 10%}
    100% {right: 12%}
}

@-o-keyframes cloudmovee {
    0% {right: 12%}
    25% {right: 12%}
    50% {right: 10%}
    85% {right: 10%}
    100% {right: 12%}
}

@keyframes cloudmovee {
    0% {right: 12%}
    25% {right: 12%}
    50% {right: 10%}
    85% {right: 10%}
    100% {right: 12%}
}
ul.cloud2 li {
    border-radius: 10px;
    display: block;
      -webkit-animation: cloudcolorr 15s linear infinite;
      -moz-animation: cloudcolorr 15s linear infinite;
      -o-animation: cloudcolorr 15s linear infinite;
      animation: cloudcolorr 15s linear infinite;
}

@-webkit-keyframes cloudcolorr {
    0% {background: white}
    25% {background: white}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: white}
}

@-moz-keyframes cloudcolorr {
    0% {background: white}
    25% {background: white}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: white}
}

@-o-keyframes cloudcolorr {
    0% {background: white}
    25% {background: white}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: white}
}

@keyframes cloudcolorr {
    0% {background: white}
    25% {background: white}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: white}
}

ul.cloud2 li:nth-child(1) {
  width: 80px;
  height: 13px;
}

ul.cloud2 li:nth-child(2) {
  width: 35px;
  height: 10px;
    margin-left: 22px;

}

ul.cloud2 li:nth-child(3) {
  width: 110px;
  height: 10px;
  margin-left: -19px;
}


ul.cloud2 li:nth-child(2):after, ul.cloud2 li:nth-child(2):before {
position: absolute;
content: '';
width: 20px;
height: 10px;
background-color: #85c6db;
border-radius: 10px;
right: 20px;
    -webkit-animation: headerback 15s linear infinite;
    -moz-animation: headerback 15s linear infinite;
    -o-animation: headerback 15s linear infinite;
    animation: headerback 15s linear infinite;
}

ul.cloud2 li:nth-child(2):before {

left: 8px;
}


ul.cloud1 {
  top: 90px;
  right: 40%;
  -webkit-animation: cloudmove 15s linear infinite;
  -moz-animation: cloudmove 15s linear infinite;
  -o-animation: cloudmove 15s linear infinite;
  animation: cloudmove 15s linear infinite;  }

@-webkit-keyframes cloudmove {
    0% {right: 40%}
    25% {right: 40%}
    50% {right: 47%}
    85% {right: 47%}
    100% {right: 40%}
}

@-moz-keyframes cloudmove {
    0% {right: 40%}
    25% {right: 40%}
    50% {right: 47%}
    85% {right: 47%}
    100% {right: 40%}
}

@-o-keyframes cloudmove {
    0% {right: 40%}
    25% {right: 40%}
    50% {right: 47%}
    85% {right: 47%}
    100% {right: 40%}
}

@keyframes cloudmove {
    0% {right: 40%}
    25% {right: 40%}
    50% {right: 47%}
    85% {right: 47%}
    100% {right: 40%}
}

ul.cloud1 li {
    background-color: #53a9c5;
    border-radius: 10px;
    display: block;
      -webkit-animation: cloudcolor 15s linear infinite;
      -moz-animation: cloudcolor 15s linear infinite;
      -o-animation: cloudcolor 15s linear infinite;
      animation: cloudcolor 15s linear infinite;
}

@-webkit-keyframes cloudcolor {
    0% {background: #53a9c5}
    25% {background: #53a9c5}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: #53a9c5}
}

@-moz-keyframes cloudcolor {
    0% {background: #53a9c5}
    25% {background: #53a9c5}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: #53a9c5}
}

@-o-keyframes cloudcolor {
    0% {background: #53a9c5}
    25% {background: #53a9c5}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: #53a9c5}
}

@keyframes cloudcolor {
    0% {background: #53a9c5}
    25% {background: #53a9c5}
    50% {background: #0a2847}
    85% {background: #0a2847}
    100% {background: #53a9c5}
}

ul.cloud1 li:nth-child(1) {
  width: 20px;
  height: 5px;
    margin-right: 15px;
    display: inline-block
}

ul.cloud1 li:nth-child(2) {
  width: 50px;
  height: 5px;
  display: inline-block
}

ul.cloud1 li:nth-child(3) {
  width: 140px;
  height: 13px;
margin-top: 10px
}

ul.cloud1 li:nth-child(4) {
  width: 55px;
  height: 13px;
  margin-left: 45px;
}

ul.cloud1 li:nth-child(5) {
  width: 100px;
  height: 20px;
  margin-left: 23px
}

ul.cloud1 li:nth-child(4):after, 
ul.cloud1 li:nth-child(4):before  {
position: absolute;
content: '';
width: 20px;
height: 13px;
background-color: #85c6db;
border-radius: 10px;
right: 30px;
    -webkit-animation: headerback 15s linear infinite;
    -moz-animation: headerback 15s linear infinite;
    -o-animation: headerback 15s linear infinite;
    animation: headerback 15s linear infinite;
}

ul.cloud1 li:nth-child(4):before {
left: 33px;
}


.sun {
  width: 48px;
  height: 48px;
  background-color: #ed961d;
  border-radius: 50%;
  right: 17%;
  top: 150px;
      -webkit-animation: disappear 15s linear infinite;
      -moz-animation: disappear 15s linear infinite;
      -o-animation: disappear 15s linear infinite;
      animation: disappear 15s linear infinite;
}

@-webkit-keyframes disappear {
    0% {opacity: 1}
    25% {opacity: 1}
    50% {opacity: 0}
    85% {opacity: 0}
    100% {opacity: 1}
}

@-moz-keyframes disappear {
    0% {opacity: 1}
    25% {opacity: 1}
    50% {opacity: 0}
    85% {opacity: 0}
    100% {opacity: 1}
}

@-o-keyframes disappear {
    0% {opacity: 1}
    25% {opacity: 1}
    50% {opacity: 0}
    85% {opacity: 0}
    100% {opacity: 1}
}

@keyframes disappear {
    0% {opacity: 1}
    25% {opacity: 1}
    50% {opacity: 0}
    85% {opacity: 0}
    100% {opacity: 1}
}

.sun:before {
  position: absolute;
  content: '';
  width: 42px;
  height: 42px;
  right: 5px;
  top: 0px;
  border-radius: 50%;
  background-color: #f7a83c;
}

.moon {
width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 7px 7px 0 0 white;
  right: 17.5%;
      z-index: 9;
  top: 143px;
      -webkit-animation: appear 15s linear infinite;
      -moz-animation: appear 15s linear infinite;
      -o-animation: appear 15s linear infinite;
      animation: appear 15s linear infinite;
}

@-webkit-keyframes appear {
    0% {opacity: 0}
    25% {opacity: 0}
    50% {opacity: 1}
    85% {opacity: 1}
    100% {opacity: 0}
}

@-moz-keyframes appear {
    0% {opacity: 0}
    25% {opacity: 0}
    50% {opacity: 1}
    85% {opacity: 1}
    100% {opacity: 0}
}

@-o-keyframes appear {
    0% {opacity: 0}
    25% {opacity: 0}
    50% {opacity: 1}
    85% {opacity: 1}
    100% {opacity: 0}
}

@keyframes appear {
    0% {opacity: 0}
    25% {opacity: 0}
    50% {opacity: 1}
    85% {opacity: 1}
    100% {opacity: 0}
}


.flip-light {
  right: -210px !important;
  top: 289px !important;
  -webkit-transform: scale(-1);
  -moz-transform: scale(-1);
  -o-transform: scale(-1);
  transform: scale(-1);

}


.left-lights {
  width: 400px;
  height: 150px;
  right: 230px;
  top: 280px;
background: -moz-linear-gradient(left,  rgba(247,168,60,0) 0%, rgba(247,168,60,0.5) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(247,168,60,0)), color-stop(100%,rgba(247,168,60,0.5)));
background: -webkit-linear-gradient(left,  rgba(247,168,60,0) 0%,rgba(247,168,60,0.5) 100%);
background: -o-linear-gradient(left,  rgba(247,168,60,0) 0%,rgba(247,168,60,0.5) 100%);
background: -ms-linear-gradient(left,  rgba(247,168,60,0) 0%,rgba(247,168,60,0.5) 100%);
background: linear-gradient(to right,  rgba(247,168,60,0) 0%,rgba(247,168,60,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f7a83c', endColorstr='#80f7a83c',GradientType=1 );
  -webkit-clip-path: polygon(0 0, 100% 46%, 100% 59%, 0 100%);
  clip-path: url("../index.html/#lightpath");

  -webkit-animation: light-turn 17s linear infinite;
  -moz-animation: light-turn 9s linear infinite;
  -o-animation: light-turn 17s linear infinite;
  animation: light-turn 9s linear infinite;
}

@-webkit-keyframes light-turn {
    0% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%)}
    25% {  -webkit-clip-path: polygon(0 0, 100% 46%, 100% 59%, 0 100%)}
    50% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%)}
    75% {  -webkit-clip-path: polygon(0 0, 100% 46%, 100% 59%, 0 100%)}
    100% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%)}
}

@-moz-keyframes light-turn {
    0% {opacity: 1}
    25% {opacity: 0}
    50% {opacity: 1}
    75% { opacity: 0}
    100% {opacity: 1}
}

@-o-keyframes light-turn {
    0% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%);}
    25% {  -webkit-clip-path: polygon(0 0, 100% 46%, 100% 59%, 0 100%);}
    50% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%);}
    75% {  -webkit-clip-path: polygon(0 0, 100% 46%, 100% 59%, 0 100%);}
    100% {-webkit-clip-path: polygon(0 42%, 100% 52%, 100% 55%, 0 57%);}
}



ul.stars {
         -webkit-animation: appear 15s linear infinite;
         -moz-animation: appear 15s linear infinite;
         -o-animation: appear 15s linear infinite;
         animation: appear 15s linear infinite;
}

ul.stars li {
    width: 2px;
    height: 2px;
    position: absolute;
    background: white;
    border-radius: 50%;
}


ul.stars li:nth-child(1) { top: 120px; left: 50px;  -webkit-animation: appear 2.4s linear infinite;-moz-animation: appear 2.4s linear infinite;-o-animation: appear 2.4s linear infinite;animation: appear 2.4s linear infinite;}
ul.stars li:nth-child(2) { top: 150px; left: 140px; -webkit-animation: appear 2.4s linear infinite;-moz-animation: appear 2.4s linear infinite;-o-animation: appear 2.4s linear infinite;animation: appear 2.4s linear infinite; }
ul.stars li:nth-child(3) { top: 90px; left: 250px;-webkit-animation: appear 2s linear infinite;-moz-animation: appear 2s linear infinite;-o-animation: appear 2s linear infinite;animation: appear 2s linear infinite; }
ul.stars li:nth-child(4) { top: 290px; left: 70px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite;}
ul.stars li:nth-child(5) { top: 390px; left: 140px; -webkit-animation: appear 2.1s linear infinite;-moz-animation: appear 2.1s linear infinite;-o-animation: appear 2.1s linear infinite;animation: appear 2.1s linear infinite;}
ul.stars li:nth-child(6) { top: 60px; left: 570px; -webkit-animation: appear 2.8s linear infinite;-moz-animation: appear 2.8s linear infinite;-o-animation: appear 2.8s linear infinite;animation: appear 2.8s linear infinite;}
ul.stars li:nth-child(7) { top: 220px; left: 480px; -webkit-animation: appear 2.6s linear infinite;-moz-animation: appear 2.6s linear infinite;-o-animation: appear 2.6s linear infinite;animation: appear 2.6s linear infinite;}
ul.stars li:nth-child(8) { top: 200px; right: 600px; -webkit-animation: appear 2.5s linear infinite;-moz-animation: appear 2.5s linear infinite;-o-animation: appear 2.5s linear infinite;animation: appear 2.5s linear infinite; }
ul.stars li:nth-child(9) { top: 240px; left: 720px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite; }
ul.stars li:nth-child(10) { top: 140px; right: 360px;-webkit-animation: appear 2.1s linear infinite;-moz-animation: appear 2.1s linear infinite;-o-animation: appear 2.1s linear infinite;animation: appear 2.1s linear infinite;}
ul.stars li:nth-child(11) { top: 70px; right: 110px; -webkit-animation: appear 2.8s linear infinite;-moz-animation: appear 2.8s linear infinite;-o-animation: appear 2.8s linear infinite;animation: appear 2.8s linear infinite;}
ul.stars li:nth-child(12) { top: 100px; right: 470px; -webkit-animation: appear 2.9s linear infinite;-moz-animation: appear 2.9s linear infinite;-o-animation: appear 2.9s linear infinite;animation: appear 2.9s linear infinite;}
ul.stars li:nth-child(13) { top: 160px; right: 170px; -webkit-animation: appear 2.7s linear infinite;-moz-animation: appear 2.7s linear infinite;-o-animation: appear 2.7s linear infinite;animation: appear 2.7s linear infinite;}
ul.stars li:nth-child(14) { top: 260px; right: 450px; -webkit-animation: appear 2.8s linear infinite;-moz-animation: appear 2.8s linear infinite;-o-animation: appear 2.8s linear infinite;animation: appear 2.8s linear infinite;}
ul.stars li:nth-child(15) { top: 310px; right: 360px; -webkit-animation: appear 2.6s linear infinite;-moz-animation: appear 2.6s linear infinite;-o-animation: appear 2.6s linear infinite;animation: appear 2.6s linear infinite;}
ul.stars li:nth-child(16) { top: 353px; right: 440px; -webkit-animation: appear 2.4s linear infinite;-moz-animation: appear 2.4s linear infinite;-o-animation: appear 2.4s linear infinite;animation: appear 2.4s linear infinite; }
ul.stars li:nth-child(17) { top: 190px; left: 570px; -webkit-animation: appear 2.1s linear infinite;-moz-animation: appear 2.1s linear infinite;-o-animation: appear 2.1s linear infinite;animation: appear 2.1s linear infinite;}
ul.stars li:nth-child(18) { top: 410px; left: 330px; -webkit-animation: appear 2.3s linear infinite;-moz-animation: appear 2.3s linear infinite;-o-animation: appear 2.3s linear infinite;animation: appear 2.3s linear infinite; }
ul.stars li:nth-child(19) { top: 370px; left: 540px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite;}
ul.stars li:nth-child(20) { top: 130px; left: 400px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite;}
ul.stars li:nth-child(21) { top: 400px; right: 730px; -webkit-animation: appear 2.9s linear infinite;-moz-animation: appear 2.9s linear infinite;-o-animation: appear 2.9s linear infinite;animation: appear 2.9s linear infinite;}
ul.stars li:nth-child(22) { top: 430px; left: 60px; -webkit-animation: appear 2.6s linear infinite;-moz-animation: appear 2.6s linear infinite;-o-animation: appear 2.6s linear infinite;animation: appear 2.6s linear infinite; }
ul.stars li:nth-child(23) { top: 440px; right: 970px; -webkit-animation: appear 2.4s linear infinite;-moz-animation: appear 2.4s linear infinite;-o-animation: appear 2.4s linear infinite;animation: appear 2.4s linear infinite; }
ul.stars li:nth-child(24) { top: 320px; left: 640px;-webkit-animation: appear 2.1s linear infinite;-moz-animation: appear 2.1s linear infinite;-o-animation: appear 2.1s linear infinite;animation: appear 2.1s linear infinite;}
ul.stars li:nth-child(25) { top: 410px; left: 330px;-webkit-animation: appear 2.3s linear infinite;-moz-animation: appear 2.3s linear infinite;-o-animation: appear 2.3s linear infinite;animation: appear 2.3s linear infinite;}
ul.stars li:nth-child(26) { top: 460px; left: 760px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite;}
ul.stars li:nth-child(27) { top: 320px; left: 400px; -webkit-animation: appear 2.2s linear infinite;-moz-animation: appear 2.2s linear infinite;-o-animation: appear 2.2s linear infinite;animation: appear 2.2s linear infinite;}
ul.stars li:nth-child(28) { top: 400px; right: 730px; -webkit-animation: appear 2.9s linear infinite;-moz-animation: appear 2.9s linear infinite;-o-animation: appear 2.9s linear infinite;animation: appear 2.9s linear infinite;}
ul.stars li:nth-child(29) { top: 460px; right: 330px; -webkit-animation: appear 2.6s linear infinite;-moz-animation: appear 2.6s linear infinite;-o-animation: appear 2.6s linear infinite;animation: appear 2.6s linear infinite; }


.desc-text {
  border-bottom: 1px solid #e3e3e3;
    padding-bottom: 20px;
}

.help-container {
  position: absolute;
  bottom: 3px;
  left: 300px;
   -webkit-animation: helpp 6s linear infinite;
   -moz-animation: helpp 6s linear infinite;
   -o-animation: helpp 6s linear infinite;
   animation: helpp 6s linear infinite;
}

 @-webkit-keyframes helpp {
    0% {  -webkit-transform: rotate(-20deg);}
    50% {  -webkit-transform: rotate(-10deg);}
    100% {  -webkit-transform: rotate(-20deg);}
}

 @-moz-keyframes helpp {
    0% {  -moz-transform: rotate(-20deg);}
    50% {  -moz-transform: rotate(-10deg);}
    100% {  -moz-transform: rotate(-20deg);}
}

 @-o-keyframes helpp {
    0% {  -o-transform: rotate(-20deg);}
    50% {  -o-transform: rotate(-10deg);}
    100% {  -o-transform: rotate(-20deg);}
}

 @keyframes helpp {
    0% {  transform: rotate(-20deg);}
    50% {  transform: rotate(-10deg);}
    100% {  transform: rotate(-20deg);}
}

.help {
    margin: 0px;
    position: relative;
}

.help li {
  list-style: none;
  background: #073D61;
  border-radius: 10px;
}

.help li:nth-child(1) {
  width: 8px;
  height: 190px;
}

.help li:nth-child(2) {
  width: 150px;
  height: 8px;
  position: absolute;
  right: -70px;
  top: 40px;
}

.help li:nth-child(3) {
  width: 60px;
  height: 8px;
  position: absolute;
  right: -26px;
  bottom: 80px;
}

.help li:nth-child(4) {
  position: absolute;
  right: -80px;
  bottom: 10px;
  width: 168px;
  height: 98px;
  border-radius: 50%;
  box-shadow: 0px 12px 0 -1px #073D61;
  background-color: transparent;
}

.help li:nth-child(5) {
  position: absolute;
  right: -105px;
  bottom: 30px;
  border-radius: 0px;
  border-bottom: 20px solid #073D61;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  background-color: transparent;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}

.help li:nth-child(6) {
  position: absolute;
  left: -105px;
  bottom: 30px;
  border-radius: 0px;
  border-bottom: 20px solid #073D61;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  background-color: transparent;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  transform: rotate(-40deg);}

.help li:nth-child(7) {
  position: absolute;
  right: -3px;
  top: -14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 6px #073D61;
  background-color: transparent;
}


.planet-corner {
  right: 300px;
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    bottom: 44px !important;
    z-index:2;
}

.planet-corner2 {
  right: 320px;
  bottom: 2px !important
}

.planet-corner2 .planet li {
    background: #08213b
}

.planet-yellow {
  left: 140px;
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  bottom: -37px !important
}

.planet-yellow .planet li {
    background: #BD8329
}

.planet-container {
  bottom: -4px;
  position: absolute;
}

.planet {
  position: relative;
  left: 100px;
  margin: 0px;
}

.planet li {
  background: #126c48;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  width: 7px;
  list-style: none;
}

.planet li:nth-child(1) {
height: 150px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

.planet li:nth-child(n+2):nth-child(-n+5) {
  height: 40px;
  -webkit-transform: rotate(55deg);
  -moz-transform: rotate(55deg);
  -o-transform: rotate(55deg);
  transform: rotate(55deg);
  position: absolute;
  left: 16px;
}

.planet li:nth-child(2) {
bottom: 20px;
}

.planet li:nth-child(3) {
bottom: 45px;
}

.planet li:nth-child(4) {
bottom: 70px;
}

.planet li:nth-child(5) {
bottom: 95px;
}

.planet li:nth-child(n+6):nth-child(-n+9) {
  height: 40px;
  -webkit-transform: rotate(-55deg);
  -moz-transform: rotate(-55deg);
  -o-transform: rotate(-55deg);
  transform: rotate(-55deg);
  position: absolute;
  right: 16px;
}

.planet li:nth-child(6) {
bottom: 30px;
}

.planet li:nth-child(7) {
bottom: 55px;
}

.planet li:nth-child(8) {
bottom: 80px;
}

.planet li:nth-child(9) {
bottom: 105px;
}


.footer {
background: #05568c;
background: -moz-linear-gradient(top, #05568c 0%, #03172c 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #05568c), color-stop(100%, #03172c));
background: -webkit-linear-gradient(top, #05568c 0%, #03172c 100%);
background: -o-linear-gradient(top, #05568c 0%, #03172c 100%);
background: -ms-linear-gradient(top, #05568c 0%, #03172c 100%);
background: linear-gradient(to bottom, #05568c 0%, #03172c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05568c', endColorstr='#03172c', GradientType=0 );
min-height: 350px;
border-bottom: 8px solid #126c48;
position: relative;
overflow: hidden;
}



.diving {
  padding: 20px 0;
background: #1b7dbe;
background: -moz-linear-gradient(top, #1b7dbe 0%, #05568c 48%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #1b7dbe), color-stop(48%, #05568c));
background: -webkit-linear-gradient(top, #1b7dbe 0%, #05568c 48%);
background: -o-linear-gradient(top, #1b7dbe 0%, #05568c 48%);
background: -ms-linear-gradient(top, #1b7dbe 0%, #05568c 48%);
background: linear-gradient(to bottom, #1b7dbe 0%, #05568c 48%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b7dbe', endColorstr='#05568c', GradientType=0 );
}

.articles-item {
    background: white;
  margin: 15px;
  border-radius: 4px;
box-shadow: 0px 6px 6px -2px #044976;
}

.footer-menu {
    margin-top: 160px;
}

.might {
color: #EFA619;
  font-weight: 100;
  font-size: 14px;
  padding-top: 40px;
}

.follow  {
  margin-top: 17px
}

.follow a {
  font-weight:  100;
    padding: 0 27px 0 7px;
  color: rgb(155, 169, 178);
  font-size: 13px;
    -webkit-transition:0.3s ease;
    -moz-transition:0.3s ease;
    -o-transition:0.3s ease;
    transition:0.3s ease;
}

.follow a:hover {
  font-weight: 400;
  color: white;
}

.footer-menu li a {
  font-weight: 400;
  color: #677C8E;
  padding: 0 20px;
  font-size: 15px;
  -webkit-transition:0.3s ease;
  -moz-transition:0.3s ease;
  -o-transition:0.3s ease;
  transition:0.3s ease;
}

.footer-menu li a:hover {
  font-weight: 600;
  color: white;
}

.articles-item img {
  width: 100%;
}

.article-text {
  text-align: left;
  padding: 19px 9px 0 9px;
}

.last {
    color: #a3a3a3;
  font-weight:  100;
  font-size: 15px;
  text-align: left;
  padding: 7px 0 12px 5px;
}

.article-text p {
    color: #818181;
  font-weight:  100;
  font-size: 15px;
  line-height: 21px;
}

.article-text h3 {
  line-height: 31px;
  padding-bottom: 9px;
}

.article-text h3 a {
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 28px;
}

.absolute {
    position: absolute;
}

.sea {
    width: 100%;
    height: 30px;
    background: #2a94d6;
    bottom:7px;
}

.sea:after {
    content: '';
    position: absolute;
    height: 12px;
    background: #1D7FBB;
    bottom: -10px;
    width: 100%;
    left: 0px;
}

.sea span {
    background-color: #8bd9f5;
    position: absolute;
}

.wave1 {
    width: 100px;
    height: 3px;
    left: 420px;
    top: 10px;
}

.wave2 {
    width: 100px;
    height: 3px;
    left: 433px;
    top: 13px;
}

.wave3 {
    width: 50px;
    height: 3px;
    right: 460px;
    top: 15px;
}

.wave4 {
    width: 50px;
    height: 3px;
    right: 467px;
    top: 18px;
}


.laptop {
    width: 80%;
    height: 60%;
    bottom: 0px;
    background: #1c1c1c;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.relative {
    position: relative;
}

.fume {
    margin:0px;
}

.fume li {
    background-color: white;
    border-radius: 50%;
}

.fume1 {
    width: 7px;
    height: 7px;
    margin-left: 48px;
    -webkit-animation: smokeup 2.0s linear infinite;
    -moz-animation: smokeup 2.0s linear infinite;
    -o-animation: smokeup 2.0s linear infinite;
    animation: smokeup 2.0s linear infinite;
}

.fume2 {
    width: 9px;
    height: 9px;
    margin-left: 38px;
    -webkit-animation: smokeup 2.1s linear infinite;
    -moz-animation: smokeup 2.1s linear infinite;
    -o-animation: smokeup 2.1s linear infinite;
    animation: smokeup 2.1s linear infinite;}

.fume3 {
    width: 12px;
    height: 12px;
    margin-left: 48px;
    -webkit-animation: smokeup 2.2s linear infinite;
    -moz-animation: smokeup 2.2s linear infinite;
    -o-animation: smokeup 2.2s linear infinite;
    animation: smokeup 2.2s linear infinite;}

.fume4 {
    width: 15px;
    height: 15px;
    margin-left: 38px;
    -webkit-animation: smokeup 2.3s linear infinite;
    -moz-animation: smokeup 2.3s linear infinite;
    -o-animation: smokeup 2.3s linear infinite;
    animation: smokeup 2.3s linear infinite;}

@-webkit-keyframes smokeup {
    0% {margin-bottom:-3px; opacity: 1}
    80% {margin-bottom:7px; opacity: 0}
    100% {margin-bottom:7px; opacity: 0}
}

@-moz-keyframes smokeup {
    0% {margin-bottom:-3px; opacity: 1}
    80% {margin-bottom:7px; opacity: 0}
    100% {margin-bottom:7px; opacity: 0}
}

@-o-keyframes smokeup {
    0% {margin-bottom:-3px; opacity: 1}
    80% {margin-bottom:7px; opacity: 0}
    100% {margin-bottom:7px; opacity: 0}
}

@keyframes smokeup {
    0% {margin-bottom:-3px; opacity: 1}
    80% {margin-bottom:7px; opacity: 0}
    100% {margin-bottom:7px; opacity: 0}
}






.inline-list > li {
 float: left; }


ul.no-bullet,
ul.inline-list{
list-style: none;
}



.bubbles li {
    background-color: #437DA5;
    border-radius: 50%;
    position: absolute;
}


@-webkit-keyframes bubbless {
    0% {margin-bottom: 0px; opacity: 0.3}
    25% {margin-bottom: 30px; opacity: 0.7}
    70% {margin-bottom: 80px; opacity: 0}
    100% {opacity: 0}
}

@-moz-keyframes bubbless {
    0% {margin-bottom: 0px; opacity: 0.3}
    25% {margin-bottom: 30px; opacity: 0.7}
    70% {margin-bottom: 80px; opacity: 0}
    100% {opacity: 0}
}

@-o-keyframes bubbless {
    0% {margin-bottom: 0px; opacity: 0.3}
    25% {margin-bottom: 30px; opacity: 0.7}
    70% {margin-bottom: 80px; opacity: 0}
    100% {opacity: 0}
}

@keyframes bubbless {
    0% {margin-bottom: 0px; opacity: 0.3}
    25% {margin-bottom: 30px; opacity: 0.7}
    70% {margin-bottom: 80px; opacity: 0}
    100% {opacity: 0}
}

ul.bubbles li:nth-child(1) { bottom: 120px; right: 350px; width: 6px; height: 6px; -webkit-animation: bubbless 3s linear infinite;-moz-animation: bubbless 3s linear infinite;-o-animation: bubbless 3s linear infinite;animation: bubbless 3s linear infinite;}
ul.bubbles li:nth-child(2) { bottom: 100px; right: 580px; width: 4px; height: 4px;-webkit-animation: bubbless 2.9s linear infinite;-moz-animation: bubbless 2.9s linear infinite;-o-animation: bubbless 2.9s linear infinite;animation: bubbless 2.9s linear infinite;}
ul.bubbles li:nth-child(3) { bottom: 60px; left: 350px; width: 8px; height: 8px;-webkit-animation: bubbless 2.5s linear infinite;-moz-animation: bubbless 2.5s linear infinite;-o-animation: bubbless 2.5s linear infinite;animation: bubbless 2.5s linear infinite;}
ul.bubbles li:nth-child(4) { bottom: 70px; left: 500px; width: 6px; height: 6px; -webkit-animation: bubbless 3s linear infinite;-moz-animation: bubbless 3s linear infinite;-o-animation: bubbless 3s linear infinite;animation: bubbless 3s linear infinite;}
ul.bubbles li:nth-child(5) { bottom: 220px; right: 420px; width: 6px; height: 6px; -webkit-animation: bubbless 3.5s linear infinite;-moz-animation: bubbless 3.5s linear infinite;-o-animation: bubbless 3.5s linear infinite;animation: bubbless 3.5s linear infinite;}
ul.bubbles li:nth-child(6) { bottom: 260px; right: 650px; width: 6px; height: 6px; -webkit-animation: bubbless 2.2s linear infinite;-moz-animation: bubbless 2.2s linear infinite;-o-animation: bubbless 2.2s linear infinite;animation: bubbless 2.2s linear infinite;}
ul.bubbles li:nth-child(7) { bottom: 120px; left: 250px; width: 6px; height: 6px; -webkit-animation: bubbless 3.2s linear infinite;-moz-animation: bubbless 3.2s linear infinite;-o-animation: bubbless 3.2s linear infinite;animation: bubbless 3.2s linear infinite;}
ul.bubbles li:nth-child(8) { bottom: 220px; right: 520px; width: 6px; height: 6px; -webkit-animation: bubbless 3s linear infinite;-moz-animation: bubbless 3s linear infinite;-o-animation: bubbless 3s linear infinite;animation: bubbless 3s linear infinite;}
ul.bubbles li:nth-child(9) { bottom: 120px; right: 520px; width: 4px; height: 4px; -webkit-animation: bubbless 4.1s linear infinite;-moz-animation: bubbless 4.1s linear infinite;-o-animation: bubbless 4.1s linear infinite;animation: bubbless 4.1s linear infinite;}
ul.bubbles li:nth-child(10) { bottom: 60px; left: 150px; width: 8px; height: 8px; -webkit-animation: bubbless 2.5s linear infinite;-moz-animation: bubbless 2.5s linear infinite;-o-animation: bubbless 2.5s linear infinite;animation: bubbless 2.5s linear infinite;}
ul.bubbles li:nth-child(11) { bottom: 70px; left: 150px; width: 6px; height: 6px; -webkit-animation: bubbless 3s linear infinite;-moz-animation: bubbless 3s linear infinite;-o-animation: bubbless 3s linear infinite;animation: bubbless 3s linear infinite;}
ul.bubbles li:nth-child(12) { bottom: 210px; left: 380px; width: 6px; height: 6px; -webkit-animation: bubbless 3.5s linear infinite;-moz-animation: bubbless 3.5s linear infinite;-o-animation: bubbless 3.5s linear infinite;animation: bubbless 3.5s linear infinite;}
ul.bubbles li:nth-child(13) { bottom: 280px; left: 480px; width: 6px; height: 6px; -webkit-animation: bubbless 2.7s linear infinite;-moz-animation: bubbless 2.7s linear infinite;-o-animation: bubbless 2.7s linear infinite;animation: bubbless 2.7s linear infinite;}
ul.bubbles li:nth-child(14) { bottom: 100px; left: 70px; width: 6px; height: 6px; -webkit-animation: bubbless 2.6s linear infinite;-moz-animation: bubbless 2.6s linear infinite;-o-animation: bubbless 2.6s linear infinite;animation: bubbless 2.6s linear infinite;}
ul.bubbles li:nth-child(15) { bottom: 120px; right: 120px; width: 4px; height: 4px; -webkit-animation: bubbless 4.1s linear infinite;-moz-animation: bubbless 4.1s linear infinite;-o-animation: bubbless 4.1s linear infinite;animation: bubbless 4.1s linear infinite;}
ul.bubbles li:nth-child(16) { bottom: 80px; right: 80px; width: 8px; height: 8px; -webkit-animation: bubbless 2.5s linear infinite;-moz-animation: bubbless 2.5s linear infinite;-o-animation: bubbless 2.5s linear infinite;animation: bubbless 2.5s linear infinite;}
ul.bubbles li:nth-child(17) { bottom: 100px; right: 490px; width: 7px; height: 7px; -webkit-animation: bubbless 2.8s linear infinite;-moz-animation: bubbless 2.8s linear infinite;-o-animation: bubbless 2.8s linear infinite;animation: bubbless 2.8s linear infinite;}
ul.bubbles li:nth-child(18) { bottom: 200px; left: 590px; width: 6px; height: 6px; -webkit-animation: bubbless 3s linear infinite;-moz-animation: bubbless 3s linear infinite;-o-animation: bubbless 3s linear infinite;animation: bubbless 3s linear infinite;}
ul.bubbles li:nth-child(19) { bottom: 250px; left: 950px; width: 6px; height: 6px; -webkit-animation: bubbless 3.5s linear infinite;-moz-animation: bubbless 3.5s linear infinite;-o-animation: bubbless 3.5s linear infinite;animation: bubbless 3.5s linear infinite;}
ul.bubbles li:nth-child(20) { bottom: 290px; right: 280px; width: 6px; height: 6px; -webkit-animation: bubbless 2.7s linear infinite;-moz-animation: bubbless 2.7s linear infinite;-o-animation: bubbless 2.7s linear infinite;animation: bubbless 2.7s linear infinite;}


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

.articles-item {
      float: none !important;
    margin: 30px auto !important;
    width: 400px !important;
}

.laptopp {
    width: 60% !important;
  margin: 0 0 30px 0;
}

.planet-yellow {
  left: 20px;
}

.planet-corner2 {
  right: 24%
}

.grass, .tree1, .tree2 {
  display: none !important
}

}

@media screen and (max-width:760px) {
  .main-t {
      width: 80%;
      top: 34%
}
}

@media screen and (max-width:600px) {
  .footer-menu li a {
    padding: 0 10px ;
    font-size: 12px ;
  }

  .dribbble-home {
    display: none
  }

.modal-body {
  -webkit-transform:scale(0.8);
  -moz-transform:scale(0.8);
  -o-transform:scale(0.8);
  transform:scale(0.8);
  width: 450px !important;
  margin-left: -225px !important;
  background-position: 450px 290px !important

}}

  .follow a {
        padding: 0 17px 0 7px;
    font-size: 12px;
  }
  .planet-yellow {
display: none}

.about {
  font-size: 15px !important; padding-right: 20px; line-height: 22px !important;
}

}


@font-face {
    font-family: "Flaticon";
    src: url("../fonts/flaticon.eot");
    src: url("../fonts/flaticon.eot#iefix") format("embedded-opentype"),
    url("../fonts/flaticon.woff") format("woff"),
    url("../fonts/flaticon.ttf") format("truetype"),
    url("../fonts/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
        font-size: 20px;
font-style: normal;
float: left;
margin-left: 9px;
}
.flaticon-3d80:before {
    content: "\e000";
}
.flaticon-behance2:before {
    content: "\e001";
}
.flaticon-dribbble2:before {
    content: "\e002";
}
.flaticon-social19:before {
    content: "\e003";
}


.black:before {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: none;
    content: ''
}


#modals:target .black:before{
   display: block;
}

#modals:target .modal-body{
   top: 50%
}

.modal-body {
    width: 550px;
    height: 425px;
    position: fixed;
    text-align: left;
    left: 50%;
    top: -120%;
    z-index: 99999;
    margin-left: -275px;
    margin-top: -220px;
    background-color: white;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.80);
    border-top: 5px solid #1b7dbe;
    border-bottom: 5px solid #1b7dbe;
    background: url('../images/tree.png') no-repeat 323px 290px white;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }

.modal h1 {
  color: #1b7dbe;
  font-weight: 400;
  padding: 30px;
  font-size: 37px
}

#lets_talk {
      color: #55585a;
    font-weight: 100;
    padding: 0 20px 0 30px;
    font-size: 17px;
    line-height: 25px;
}


.send-btn:focus{
  outline: 0
}

.send-btn  {
    font-size: 16px;
    width: 170px;
    border-radius: 22px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    color: #1b7dbe;
    background: white;
    border: 1px solid #1b7dbe;
    transition: 0.3s ease;
    font-weight: 100;
    display: block;
    margin: 30px auto 13px auto;
}


.send-btn:hover{
  border-radius: 5px;
  font-weight: 400
}

.mail {
      color: #26a76f;
    clear: both;
    font-weight: 100;
    font-size: 16px;
    text-align: center;
}

.find-me {
    position: absolute;
    bottom: 20px;
}

.find-me p {
    color: #8E8E8E;
    font-weight: 100;
    padding-left: 32px;
}


.contact-links li {
  margin: 20px 0 0px 7px
}

.contact-links li a span:before {
  font-size: 17px
}

.contact-links a {
      font-size: 15px;
    padding:0px 10px 0px 7px;
    margin: 10px 0 ;
    font-weight: 100;
    color:#7a7a7a;
    -webkit-transition:0.3s ease;
}

.contact-links a:hover {
    color:#3e3e3e;
}

.lnkt {
  background-image: url('../images/linked.jpg');
  display: inline-block;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
    margin: 0 6px -3px 6px;
}

#close {
  display: none
}

.btn-close {
    color: #737373;
  font-size: 30px;
  text-decoration: none;
  position: absolute; right: 10px; top: 10px;
}