@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
<!--

body {
	background-image: url(../images/bg2.jpg);
	background-repeat: no-repeat;
	background-position:top center;
	background-size: auto;
	margin: 0px;
	background-color: #015174;
	height:6000px;
	overflow-x: hidden !important;
	-moz-background-size: 100%;
    -o-background-size: 100%;
    -webkit-background-size: 100%; 
    background-size: 100%;
	background-image:url(../images/sea-deep.jpg) no-repeat bottom center;
}
p {
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
}
h1{
	font-family: 'Vollkorn', serif;
	color: #ffffff;
	font-size: 32px;
	font-weight: 100;
	font-style: italic;
	line-height: 42px;
}

#bg {
	position:absolute;
	width:1366px;
	height:540px;
	z-index:1;
	margin-top:1500px;
	display:none;
}
#mountain {
	position:absolute;
	width:100%;
	height:540px;
	z-index:2;
	margin-top:3500px;
}
#trees {
	position:absolute;
	/*width:1366px;*/
	width:100%;
	height:100;
	z-index:3;
	margin-top:2500px;
}
#arrowtop {
	position:absolute;
	width:100%;
	height:100;
	z-index:4;
	margin-top:3200px;
	margin-left:50%
}
#arrowbtm {
	position:absolute;
	width:100%;
	height:100;
	z-index:4;
	margin-top:3550px;
	margin-left:50%
}
#acc {
	position:absolute;
	width:100%;
	height:100;
	z-index:4;
	margin-top:3100px;
}
#acc-bottom {
	position:absolute;
	width:100%;
	height:100;
	z-index:3;
	margin-top:4224px;
}
#turtle {
	position:absolute;
	width:995px;
	height:100;
	z-index:5;
	margin-top:5170px;
}
#tuna {
	position:absolute;
	width:570px;
	height:100;
	z-index:4;
	margin-top:4200px;
}
#whales {
	position:absolute;
	width:1366px;
	height:100;
	z-index:2;
	margin-top:4200px;
}
#jello {
	position:absolute;
	width:100%;
	height:100;
	z-index:1;
	margin-top:4550px;
}
#jello-bg {
	position:absolute;
	width:100%;
	height:100;
	z-index:1;
	margin-top:5500px;
	display:none;
}
#diver {
	position:absolute;
	width:100%;
	height:100;
	z-index:3;
	margin-top:5150px;
}
#diver2 {
	position:absolute;
	width:420px;
	height:100;
	z-index:3;
	margin-top:5150px;
}
#jellyfish {
	position:absolute;
	width:242px;
	height:100;
	z-index:2;
	margin-top:5000px;
}
#coral {
	position:absolute;
	width:100%;
	height:100;
	z-index:4;
	margin-top:5800px;
}
#moon {
	position:absolute;
	width:260px;
	height:100;
	z-index:2;
	margin-top:1600px;
}
#orbit {
	position:absolute;
	width:100%;
	height:100;
	z-index:2;
	margin-top:2400px;
}
#satellite {
	position:absolute;
	width:310px;
	height:100;
	z-index:2;
	margin-top:2300px;
	margin-left:500px;
}
#mars {
	position:absolute;
	width:180px;
	height:100;
	z-index:2;
	margin-top:1300px;
	right:0px;
}
#asteroid {
	position:absolute;
	width:150px;
	height:100;
	z-index:2;
	margin-top:1150px;
}
#jupiter {
	position:absolute;
	width:150px;
	height:100;
	z-index:2;
	margin-top:1900px;
}
#saturn {
	position:absolute;
	width:150px;
	height:100;
	z-index:2;
	margin-top:80px;
	right:50px;
}

/* TEXT */
#text-carousel {
	position: absolute;
	width: 450px !important;
	height: 380px;
	z-index: 5;
	margin-top: 3250px;
	margin-left: 850px;
	display: block !important;
	overflow: hidden;
}
#satellitetext {
	position:absolute;
	height:100;
	z-index:5;
	margin-top:2050px;
	margin-left:500px;
	width:290px;
}
#asteroidtext {
	position:absolute;
	height:100;
	z-index:5;
	margin-top:970px;
	margin-left:950px;
	width:290px;
}
#seatext {
	position:absolute;
	height:100;
	z-index:5;
	margin-top:5200px;
	margin-left:650px;
	width:300px;
}
#seatextfish {
	position:absolute;
	height:100;
	z-index:5;
	margin-top:5200px;
	margin-left:400px;
	width:300px;
}
#quote1 {
	position:absolute;
	width:320px;
	height:100;
	z-index:5;
	margin-top:150px;
	margin-left:550px;
}
#quote2 {
	position:absolute;
	width:320px;
	height:100;
	z-index:5;
	margin-top:4400px;
	margin-left:800px;
}
#fishquote {
	position:absolute;
	width:320px;
	height:100;
	z-index:5;
	margin-top:4240px;
	margin-left:650px;
}

/* ####################### */
.slider {
  height: 100%;
  width:auto;
  overflow:hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
}
.slider__nav {
  width: 10px;
  height: 10px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}

.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  height: 100%;
}
.slider__contents {
  height: 100%;
  text-align: left;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
	  display:none;
}
.slider__txt {
  color: #fff;
  width: 320px;
  font-size:16px;
  font-weight:normal;
  line-height:25px;
  margin-top:25px;
  margin-bottom:25px;
}

@-webkit-keyframes check {
  50% {
    outline-color: #ffa500;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #ffa500;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #ffa500;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #ffa500;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

#slide-two,#slide-three,#slide-four {
	display: none;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:90%;
	height:80%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

#flink:hover{ border-bottom:none;}
#sicon:hover{ border-bottom:none;}
#mainMenu {
    top: 0;
    position:fixed;
    width:100%;
    height:60px;
    z-index:999;
}
#footer {
    bottom: 0;
    position:fixed;
    width:100%;
    height:40px;
    z-index:10;
	padding-top:5px;
	padding-bottom:5px;
	color:#b2b2b2;
}

/*submenu*/
#mainMenu2 { display:none; }
#lanka { display:none; }
#life { display:none; }
#works { display:none; }
#enqu { display:none; }
#res { display:none; }


#mainMenu li {
    padding: 21px 22px;
    padding-bottom: 0px;
}
#footer  li a {
    display: inline-block;
    color: #b2b2b2;
    text-align: center;
   padding: 22px 22px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bolder;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
}
#mainMenu li a {
    display: inline-block;
    color: #b2b2b2;
    text-align: center;
   /* padding: 21px 22px;*/
    text-decoration: none;
    font-size: 12px;
    font-weight: bolder;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
}
#mainMenu2 li a {
    display: inline-block;
    color: #b2b2b2;
    text-align: center;
   /* padding: 21px 22px;*/
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;

}
#mainMenu li a:hover {
     border-bottom: 3px solid #ffa000;padding-bottom: 18px;
}
#mainMenu2 {
    top: 60px;
    position:fixed;
    width:100%;
    background-color: rgb(42, 42, 42);
    z-index:999;   
}
#mainMenu2 li a:hover{
  color:#ffa500; border-bottom: none;
}
.submenu-item{color: #9c9c9c;font-size: 11px;font-weight: 500;line-height: 16px; text-transform: capitalize; padding: 14px 11px;font-family: "Montserrat", Sans-serif;}
.submenu-list{ padding-right: 10px;padding-left: 10px }
.submenu-div {width: 100%;background-color: #2a2a2a;display: inline;float: right; }


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/preloader.gif) center no-repeat #000;
}












@media (min-width: 769px) and (max-width: 1024px) 

{
    body, html{
    overflow-x: hidden !important;
    }
    #text-carousel {
        margin-left: 590px !important;
    }
    #quote2 {
        margin-left: 600px !important;
        margin-top: 4180px  !important;
    }
    #fishquote {
        margin-top: 4000px !important;
       
    }
    #seatext {
        margin-left: 500px  !important;
        margin-top: 5375px  !important;
    }
    #jello {
        margin-top: 4730px !important;
    }
    #diver2 {
        margin-left: 700px  !important;
        margin-top: 5250px  !important;
    }
    #mountain {
        margin-top: 3450px  !important;
    }
    #satellitetext {
        margin-top: 2080px  !important;
    }
   
    body {
        background-image: url('https://fr128.wearedesigners.net/ACC/wp-content/uploads/2018/03/bg2ipad.jpg') !important;
        /*background-repeat: no-repeat;*/
        /*background-position: top center;*/
        /*background-size: auto;*/
        /*margin: 0px;*/
        /*background-color: #015174;*/
        /*height: 6000px;*/
        /*overflow-x: hidden;*/
        /*-moz-background-size: 100%;*/
        /*-o-background-size: 100%;*/
        /*-webkit-background-size: 100%;*/
        /*background-size: 100%;*/
        /*background-image: url(../images/sea-deep.jpg) no-repeat bottom center;*/
    }
    
    #asteroidtext p {
           font-weight: normal !important;
    }
    
    #satellitetext p {
           font-weight: normal !important;
    }
    
    #seatext p {
           font-weight: normal !important;
    }
    
    #quote1 {
        margin-top: 200px  !important;
    }
    
}