/*
Theme Name: RIMS Security Agency Inc.
Theme URI: https://rimssecurityagencycorp.com.ph
Author: RIMS Security Agency Inc.
Author URI: https://rimssecurityagencycorp.com.ph
Description: Custom site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
*/
#envelope {
  width: 100vw;
  height: 100%;
  overflow-x:clip;/* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#envelope::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#envelope {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


body{
 	background: rgb(255,255,255);
	/*background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,70,146,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,70,146,1) 100%);
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,70,146,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#004692",GradientType=1);*/
	overflow-x:clip;
	
	transition: background-color .7s;
}

.logodiv{
	opacity: 1!important;
}

.containerformat{

	text-align:justify;
	color:white;
	height:100vh;
	font-size:1.5rem;
	width:100vw;
	font-family: 'Lato', sans-serif !important;

}

.mainlogo{
	height:100vh;
	width:auto;
	animation: showlog 1.5s;
}

@keyframes showlog{

  0% {opacity:0}
  49%{opacity:0}	
  100%{opacity:1}
}

.rimsbigdiv{
	height:35vh;
}

.rimsicon{
	margin-right:auto; 
	height:100%;
	
}

.bigicon{
	margin-left:auto; 
	height:100%;
}

.shakediv{
	background-image: url('../img/shakehands2.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 30% 30%;
	background-blend-mode: overlay;
	
}

.center{
	margin:auto;
}

html{
	scroll-behavior: smooth;
}
.bordtop{
	border-left: 5px solid white;
	border-top: 5px solid white;
	height: 20px;
	width: 20px;
	margin-left: 0%;
	/*transition: opacity; */
}
/*.bordtopshow {}*/
.bordbot{
	border-right: 5px solid white;
	border-bottom: 5px solid white;
	height: 20px;
	width: 20px;
	margin-right: 0%;
}


.flex-center-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.standard-label-row{
	height:100%;
	width:25%;
	display:inline-block;
	/* overflow:hidden; */
	/* color:#778ca3; */
}
.standard-label-row > div{
	position:relative;
}
 
.animated-standard-label-row > div:after{
	content: " ";
	position:absolute;
	top: 100%;
	left:0;
	border-bottom: 1px solid black;
	width: calc(100vw * .89);
	animation: lineExtend 10s;
}

@keyframes lineExtend{
	0%{width: calc(0vw * .89);}
	100%{width: calc(100vw * .89);}
}

.standard-level-row{
	width:auto;
	margin-left:5%;
	height:100%;
	bottom:0;
	
}
.standard-visual{
	height:85%;
	/* background-color:black; */
	position:relative;
	padding-left:3%;
}

.standard-visual-inner{
	height:85%;
	/* background-color:black; */
	position:relative;
}

.level-row-1{
	position:absolute;
	left: 25%;
	background: linear-gradient(transparent 50%, rgba(0,70,146,1) 50%);
	width:36px;
	animation: popup1 2s;
	animation-timing-function: ease-in-out;
}

@keyframes popup1{

  0% {height:0%;top:100%}
  100%{height:100%;top:0%;}
}

.level-row-1:before{
	content: " ";
	position:absolute;
	top: 49%;
	right:0;
	border: 4px ridge rgba(0,70,146,1);
	width: 100%;
	height: 51%;
	background-color: rgba(0,70,146,1);
}

.goal{
    position: absolute;
    font-size: .9rem;
    left: -4px;
    text-align: center;
    top: -23px;
    font-weight: bold;
    line-height: .8em;

}

.level-row-2{
	position:absolute;
	left: 55%;
	/*background-color: rgba(0,70,146,1);*/
	background: linear-gradient(transparent 2%, rgba(0,70,146,1) 0%);
	/*border: 4px ridge rgba(0,70,146,1);*/
	width:36px;
	animation: popup2 3s;
	animation-timing-function: ease-in-out;
	height:100%;
}

.level-row-2:before{
	content: " ";
	position:absolute;
	top: 2%;
	right:0;
	border: 4px ridge rgba(0,70,146,1);
	width: 100%;
	height: 98%;
	background-color: rgba(0,70,146,1);
	animation:glow 4s infinite;
	animation-timing-function: ease-in-out;
	
}

@keyframes popup2{

  	0% {height:0%;top:100%}
  	100%{height:100%;top:0%;}
}

@keyframes glow{
   0% {border: 4px ridge rgba(0,70,146,1);}	
  80% {border: 4px ridge #0dff09;}
}

.level-row-3:before{
	content: " ";
	position:absolute;
	top: 30%;
	right:0;
	border: 4px ridge rgba(0,70,146,1);
	width: 100%;
	height: 70.5%;
	background-color: rgba(0,70,146,1);
	
	
}

.level-row-3{
	position:absolute;
	left: 85%;
	background: linear-gradient(transparent 30%, rgba(0,70,146,1) 5%);
	width:36px;
	animation: popup3 2.5s;
	animation-timing-function: ease-in-out;
}

@keyframes popup3{

  0% {height:0%;top:100%}
  100%{height:100%;top:0%;}
}

.glowwhite{
	animation: moveright 2s ;
	z-index:-1;
	
}

@keyframes moveright{
	0%{
		-webkit-transform: translateX(-30%);
		-ms-transform: translateX(-30%);
		transform:translateX(-30%);
		opacity:0;
	}
	50%{opacity:.4}
	100%{
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform:translateX(0%);
		opacity:1;
	}
}

.shadowimg{
	position:absolute;
	animation: moveleft 2s ;
	width:100%
}

@keyframes moveleft{
	0%{
		-webkit-transform: translateX(30%);
		-ms-transform: translateX(30%);
		transform:translateX(30%);
		opacity:0;
		
	}
	/* 50%{opacity:.5} */
	100%{
		transform:translateX(0%);
		opacity:1}
}


.salutecontainer{
	position:relative;
}

.workinglabel{
	animation: fadeinleft 4s;
}

@keyframes fadeinleft{
	0%{transform:translateX(30%);opacity:0}
	33.33333333333333%{transform:translateX(0%);opacity:1}
	100%{opacity:1;}
}

.workingbodyshade{
	animation: shadeappear 4s;
	opacity:0;
}

@keyframes shadeappear{
	0%{opacity:0}
	16.67%{opacity:0} 
	50%{opacity:1}
	/* 83.33333333333333%{opacity:1} */
	100%{opacity:0}
}

.workinghand{
	animation: appear 4s;
}

@keyframes appear{
	0%{opacity:0}
	30%{opacity:0} 
	100%{opacity:1}
	
}

.workingbody{
	animation: bodyappear 4s;
}

@keyframes bodyappear{
	0%{opacity:0}
	30%{opacity:0} 
	100%{opacity:1}
}


.workingtogether{
	animation: paraappear 4s
}

@keyframes paraappear{
	0%{opacity:0}
	60%{opacity:0} 
	100%{opacity:1}
}

.mr{
	position:absolute;
	/* height:90%; */
	left: 50%;
    transform: translateX(-50%);
}

.workleft{
	
}

.workright{
	position:relative;
}

.credimg{
	padding-bottom:40px;
	position:relative;
}

.lto{
	animation: credfadeleft 1.8s;
}

.dole{
	animation: credfadeleft 1.7s;
}

.sec{
	animation: credfadeleft 1.6s;
}

.sss{
	animation: credfadeleft 1.5s;
}

.hdmf{
	animation: credfaderight 1.5s;
}

.phic{
	animation: credfaderight 1.6s;
}

.bir{
	animation: credfaderight 1.7s;
}

.philgeps{
	animation: credfaderight 1.8s;
}

@keyframes credfadeleft{
	0%{
		opacity: 0; 
		transform:translateX(100%);
	}
	20%{
		opacity: 0; 
		transform:translateX(100%);
	}
	
	100%{
		opacity: 1; 
		transform:translateX(0%);
	}
}

@keyframes credfaderight{
	0%{
		opacity: 0; 
		transform:translateX(-100%);
	}
	20%{
		opacity: 0; 
		transform:translateX(-100%);
	}
	
	100%{
		opacity: 1; 
		transform:translateX(0%);
	}
}

.credimg > img:hover, .credimg > h5:hover{
	cursor:pointer;
}
.credimg > img{
	width:150px;
	height:150px;
}

.magni{
	position:absolute;
	top: 0;
	right:50%;
	transform:translateX(50%);
}
.magni:hover{
	opacity:0;
	z-index:-5;
	top:100;
}

.col-sm-3 > h5{
	text-align:center;
}

.popupimg{
	display:none;
	position:fixed;
	top:0;
	height:100vh;
	width:100%;
	background-color:black;
	z-index:6;
}

.popupimg > img{
	position:fixed;
	height:100vh;
	width:auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.btnback{
	font-size:3rem;
	background-color:#ff2323;
	position:relative;
	float:right;
	z-index:2;
	
}
.contactdet{
	/* font-size:1.2rem; */
	
}

.credheader:after{
	content:" ";
	height:60px;
}

.majordiv{
	opacity: 0;
	transition: opacity .7s, transform .7s;
}

.majordivright {
	transform: translate3d(100px, 0, 0);
}

.majordivleft{
	transform: translate3d(-100px, 0, 0);
}

.fade-right-transition{
	opacity: 1;
	transform: none;
	color: white;
}

.bodyrighttrans{
	background-color: black;
}

.bodylefttrans{
	background-color: rgb(250,250,250);
}

.fade-left-transition{
	opacity: 1;
	transform: none;
	color: black;

}

.clients >img{
	height: calc(100vh * .20);
	width:auto;
}

.fast{
	animation: fromright1 2s;
}

@keyframes fromright1{
	0%{opacity: 0; transform: translateX(50%);}
	
	100%{opacity: 1; transform: translateX(0%);}
}

.mono{
	animation: fromright2 2s;
}

@keyframes fromright2{
	0%{opacity: 0; transform: translateX(75%);}
	
	100%{opacity: 1; transform: translateX(0%);}
}

.syne{
	animation: fromright3 2s;
}

@keyframes fromright3{
	0%{opacity: 0; transform: translateX(100%);}

	100%{opacity: 1; transform: translateX(0%);}
}
.clientlink{
	text-decoration: none;
	color: #6e6e6e;
	font-size: 1.45rem;
	font-weight:bold;
	transition: 0.5s;
	position: relative;
	padding: 0.2em 0;
}
.clientlink::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1em;
	background-color: #004792;
	opacity: 0;
	transition: opacity 300ms, transform 300ms;
}
.clientlink:hover{
	color: white;
}
.clientlink::after {
  opacity :1;
  transform: scale(0);
  transform-origin: center;
}

.clientlink:hover::after,
.clientlink:focus::after{
  transform: scale(1);
}


@media only screen and (max-width: 1120px) {
	.mr{
	  left:50%;
	}
	
}

@media only screen and (max-width: 992px) {
	.standard-visual{
	  height:90%;
	}
	.standard-level-row {
		margin-left:8%;
	}
	.mr{
	  left:60%;
	}
	.credimg > img{
		width:125px;
		height:125px;
	}
	
}

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

	.salutecontainer{
		position:relative;
		max-width:65%;
		margin:auto;
	}
	
	.shadowimg{
		width:100%;
	}
	

	.shakediv {
		background-size: 60% 40%;
	}
	
	.rimsbigdiv{
		height:25vh;
	}
	
	.mr{
		left:50%;
		height:100%;
		width:auto;
	  
	}
	.workleft{
		height:50%;
	}

	.workright{
		height:50%;
	}
	
	.credimg > img{
		width:100px;
		height:100px;
	}
	
}

@media only screen and (max-width: 700px) and (min-height: 500px){
	.imgland{
		height:auto!important;
		width:100vw!important;
	}
}

@media only screen and (max-width: 576px) {
  .credimg {
	width:25%;
	padding-bottom:30px;
  }
}

@media only screen and (max-width: 565px) {
  .fullcol {
	font-size:1.3rem
  }
}

@media only screen and (max-width: 546px) {
  .curtain{
	right:100px;;
  }
}

@media only screen and (max-width: 536px) {
	.mainlogo{
		height:auto;
		width:100vw;

	}
	
	.logocont{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media only screen and (max-width: 530px) {
  .shakediv {
    background-size: 80% 40%;
  }
}

@media only screen and (max-width: 472px) {
  .	bigicon{
		background-size: 80% 40%;
	}
  
	.standard-label-row{
		font-size:1rem;
	}

	.salutecontainer{
		max-width:75%;

	}
}

@media only screen and (max-width: 468px) {
  	.credimg {
		width:32%;
		padding-bottom:5px;
  	}
  
    .credimg >h5{
		font-size: 1rem;
  	}
	
	.lto{
		animation: credfadeleft 1.5s;
	}

	.dole{
		animation: credfadeleft 1.6s;
	}

	.sec{
		animation: credfadeleft 1.7s;
	}

	.sss{
		animation: credfadeleft 1.8s;
	}
	.hdmf{
		animation: credfadeleft 1.9s;
	}

	.phic{
		animation: credfadeleft 2s;
	}

	.bir{
		animation: credfadeleft 2.1s;
	}

	.philgeps{
		animation: credfadeleft 2.2s;
	}
}


@media only screen and (max-width: 424px) {
	.curtain{
		right:59px;;
	}
  	.credimg > img{
		width:90px;
		height:90px;
	}
}

@media only screen and (max-width: 409px) {
  .fullcol {
	font-size:1.2rem
  }
}

@media only screen and (max-width: 400px) {
	.imgport{
		height:auto!important;
		width:100vw!important;
	}

}

@media only screen and (max-width: 400px) {
	.standard-label-row > div:after{
		width:calc(100vw *.85);
	}
	
}

@media only screen and (max-width: 370px) {
  .bigicon{
    background-size: contain;
  }
    .curtain{
	width:49%;
  }
}

@media only screen and (max-width: 360px) {
	.col-sm-3 > h5{
		font-size:1rem;
	}
}

@media only screen and (max-width: 346px) {
  .fullcol {
	font-size:1rem
  }
}

@media only screen and (max-width: 332px) {
	.credimg {
		width:50%;
		padding-bottom:0;
	}
	.credimg > img{
		width:60px;
		height:60px;
	}
}

@media only screen and (max-width: 335px) {
	.col-sm-3 > h5{
		font-size: .8rem;
	}
}

@media only screen and (max-width: 292px) {
	.contactdet{
		margin-bottom:0!important;
	}
	
	.viewusgmap{
		font-size: 1.4rem;
	}
	
	.material-icons{
		font-size:30px!important;
	}
}

@media only screen and (max-width: 273px) {
	.credheader:after{
		height:10px;
	}
}

@media only screen and (max-width: 250px) {
  .fullcol {
	font-size:.9rem
  }
}




/*FOR LANDCAPE*/
@media only screen and (max-height: 523px) {
	.mainlogo{
		height: 100vh;
    	width: auto;
	}
}

@media only screen and (max-height: 500px) {
	.glowwhite, .shadowimg{
		height: calc(100vh * .6);
		width: auto;
		margin-bottom: -20%;
		margin-top: -10%;
	}

	.credheader:after{
		content:" ";
		height:30px;
	}
	
	.credimg > img{
		width: 80px;
		height: 80px;
	}
}

@media only screen and (max-height: 497px) {
	.contactdet{
		font-size: 1rem;
		margin-bottom: 5%;
	}
}

@media only screen and (max-height: 465px) {
	.mr{
		height:90%;
	}
}

@media only screen and (max-height: 418px)  {
	.credimg{
		padding-bottom:0;
		
	}
	.credimg > h5{
		font-size:1rem;
		
	}
	.credimg > img{
		width:60px;
		height:60px;
		
	}
}

@media only screen and (max-height: 418px)  {
		.credimg > img{
		width: 60px;
		height: 60px;
	}
}

@media only screen and (max-height: 389px), (max-width: 374px) {
	.fullcol {
		font-size:1.1rem;
	}
}

@media only screen and (max-height: 380px) {
	.visiontext{
		margin-top:-15%;
		margin-bottom:-20%;
	}
}

@media only screen and (max-height: 351px) {
	.contactdet{
		font-size: .8rem;
		margin-bottom: 1%;
	}
}

@media only screen and (max-height: 347px) {
	.credimg > img{
		width: 40px;
		height: 40px;
	}
	
	.credimg > h5 {
		font-size: .7rem;
	}
	
	.credheader:after{
		content:" ";
		height:20px;
	}
}

@media only screen and (max-height: 330px), (max-width: 348px) {
	.fullcol {
		font-size:1rem;
	}
}


@media only screen and (max-height: 282px) {
	.fullcol {
		font-size:.9rem;
	}
}

@media only screen and (max-height: 296px) {
	.credheader:after{
		height:0px;
	}
}

@media only screen and (max-height: 262px), (max-width: 374px) {
	.bordtop {
		margin-top:5%;
	}
	.bordbot{
		margin-top:0%;
	}
}

@media only screen and (max-height: 224px) {
	.contactdet{
		margin-bottom: -3.5%;
	}
	
	.contactheader{
		margin-bottom: -9%;
	}
}

@media only screen and (max-height: 215px) {
	.fullcol {
		font-size:.8rem;
	}
	
	.credimg > h5{
		font-size:.7rem;
	}
}