@import url("font.css");
@import url("header.css");
@import url("footer.css");
@import url("section.css");
@import url("accordian.css");
@import url("gallery.css");
@import url("banner.css"); 
@import url("indexbelow.css"); 
@import url("accordion.css");
@import url("sidebox.css");  
@import url("toggle.css");  
*{
	box-sizing:border-box;
	}
body {
	width: auto;
	margin: auto;
	line-height:auto;
	background-image: url(bg.jpg);
	background-size:cover;
	background-attachment: fixed;
	overflow-x:hidden;
	
}
.border_right{		
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
}

blackdot{
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	width:100%;
	height:100%;
	pointer-events:none;
	background-image: url(../images/blackdot.png);
	z-index:0;
	background-attachment: scroll;
	}
blackdot-black{
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	width:100%;
	height:100%;
	pointer-events:none;
	background-image: url(../images/blackdot-black.png);
	z-index:0;
	}
.liftup-img{
	margin-top: -40px;
	z-index: 80;
	position:inherit;
}
.liftup-text{
	
	z-index: 99999;
}
.client-img{
	width: 80%;
}
.overlay{
	background-color: rgba(0, 23, 33, 0.83); /*previously rgba(0, 0, 0, 0.75)*/
	background-blend-mode: overlay;
}
overlay-black{
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	width:100%;
	height:100%;
	pointer-events:none;
	z-index:0;
	background-color: rgba(8, 109, 153, 0.4);
	background-blend-mode: overlay;
}

@media only screen and (max-width: 640px) {
.image-gallery tn {
	width:45%;
	height:100px;
}

}

.two-corner-border{
	border-radius: 3px 70px;
}

.boxshadow {
  border: 0.5px solid;
  padding: 3px;
  box-shadow: 5px 0px 10px #888888;
}


svg {
  position: absolute;
  fill:#e8e8e8;
  bottom: 0;
  width: 100%;
  height: 10vw;
  /* set height to pixels if you want angle to change with screen width */
}

/*** Animated Gradient Text (scss) ***/
.animate_text{
	margin-top: 34%;
	animation: move 3s linear infinite;
	background-image: linear-gradient(to right, #119bd7, #33d0ff, #25ffbb, #33d0ff, #119bd7);
	background-size: 200% auto;
	font: 700 140px/1 'Montserrat', sans-serif;
	letter-spacing: 1px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@keyframes move { to { background-position: 200% center; } }
/*** Animated Gradient Text End ***/

/*** PRELOADER ***/
.preloaderBg {
	position: fixed;
    z-index: 999; 
    top: 0;
	background: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
}

.preloader {
    margin: auto;
  	background: url('../css/tripleonemarine_logo.png') no-repeat center;
    background-size: 150px;
    width: 300px;
    height: 300px;
	margin-top: 25%;
}

.preloader2 {
  border: 5px solid #12a1b2;
  border-top: 5px solid #fff;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  animation: spin 1s infinite ease-in-out;
  position: relative;
  margin: auto;
  top: -280px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*** PRELOADER END***/

@media only screen and (max-width: 800px) {
.border_right{
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #333;
}	
.client-img{
	width: 50%;
}
}














/** icon socmed tepi **/
icon-ct,
icon-te,
icon-fb,
icon-in,
icon-ws,
icon-tt,
icon-tw{
	z-index:999;
	position:fixed;
	right: 10px;
	}

icon-ct:hover,
icon-te:hover,
icon-fb:hover,
icon-in:hover,
icon-ws:hover,
icon-tt:hover,
icon-tw:hover{
	opacity:0.8;
	}	


icon-ws{
	bottom: 428px;
	}
	
icon-te{
	bottom: 500px;
	
	}

icon-ct{
	bottom: 328px;
	}

icon-fb{
	bottom: 278px;
	}

icon-in{
	bottom: 228px;
	}

icon-tt{
	bottom: 178px;
	}

icon-tw{
	bottom: 128px;
	}