/*============= RESETS =============*/

/*-- iPhone X Remove Gutters --*/
html{
	padding: env(safe-area-insest);
}

/*-- Prevent Horizontal Scrolling & Font Style --*/
html,body {
	overflow-x: hidden;
	font-family: 'Lato', sans-serif;
	color:#505962;

}

/*For input type = number ( Chrome, Safari, Edge and Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

p{
    font-size: xx-large;
    font-family: math;
    margin: revert;
}

.blink{
    animation: blink 1s steps(1, end) infintie;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.text-nuno{
   color:	#1EBBA3;
}

/*--- Nav Scrolling Offset --*/

/*--- Extra Bootstrap Column Padding --*/


/*============= NAVIGATION =============*/
.navbar-brand {
	font-family: system-ui;
	text-transform: uppercase;
	font-weight: bold;
	font-size: smaller;
}





.input-group.md-form.form-sm.form-2 input {
border: 1px solid #bdbdbd;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;

}
.input-group{
	width: 50%;
	padding-left: 70px;
}

.input-group1.md-form.form-sm.form-2{
    border: 1px solid #bdbdbd;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
    
}

.input-group1{
    width: 50%;
}
    

 
 


.navbar{
	font-weight: 400;

}

.form-inline .form-control {

   
    
    
    
}
.form-control{
	width: 50%;
	color:black;
}






[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    margin-left: 0px;

    }



 .btn btn-outline-success, .btn btn-outline-success:hover, .btn btn-outline-success:active, .btn btn-outline-success:visited {
    background-color: red !important;
}
.btn-outline-success {
    color: 
#b7b7b7;
border-color:
    #fff;
}



/*-- Remove Button Outline --*/
button:focus, a:focus, a.btn:focus {
   outline: 0;
   -webkit-appearance: none;
   box-shadow: none;
   transition: all .6s ease;
}
button, a, a.btn,
.svg-inline--fa {
   transition: all .6s ease;
}

/*============= LANDING PAGE =============*/

/*--- Fixed Landing Page Section --*/

/*-- Landing Page Caption --*/

/*-- Bouncing Down Arrow --*/


/*============= FEATURES SECTION =============*/


/*===== Heading =====*/
.heading{
    
     text-transform: uppercase;
   font-weight: 400;
   font-size: 1.9rem;
   text-align: center;
   margin-bottom: 1.9rem;
}

.heading2{
    
     text-transform: uppercase;
   font-weight: 400;
   font-size: .9rem;
   text-align: center;
   margin-bottom: 1.9rem;
}



.heading-underline{
    width: 3rem;
    height: .2rem;
   background-color: #1EBBA3;
   margin: 0 auto 2rem;
}
    


/*--- iOS Fixed Background Image --*/


/*============= PORTFOLIO SECTION =============*/

.portfolio-item img:hover {
   transform: scale(1.2);
   cursor: pointer;
   
}
.portfolio-item img {
   transition: transform .4s ease;
}


/*============= POSTJOB BOX SECTION =============*/

.postjobbox{

	background: rgb(0,0,0,0);
	color: black;
	top: 34%;
	left:50%;
	
	
	transform: translate(-50%, -50%);


}


/*============= TEAM SECTION FIXED BG IMG LIGHT =============*/

/*--- footer category for payment/php --*/

.footer_category{
	height: 40px;
	background-color:hsl(0, 0%, 88%);
	width: 100%;
	bottom: 0;
	
	

	 float: left;
     position: fixed;
                
               
	

}

#footerdiv{
	padding-top: 10px;
	padding-left: 140px;

}


/*============= SKILLS SECTION =============*/


/*============= CLIENTS SECTION =============*/


/*============= CONTACT SECTION =============*/

ul.social {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 1.5rem;
}
ul.social li {
   display: inline;
   padding-right: .8rem;
}
ul.social li a {
   color: #1EBBA3;
   transition: all .2s ease;
}
ul.social li a:hover {
   color: #505962;
}


.footer{
	background-color:#343a40;
	color:white;

}
.row.outer{
	background-color: rgba(57,63,70,.85);
	padding: 1rem 2rem 3rem;
}
.footer a,ul.social li a{
	color: white;
}

.footer a,ul.social li a :hover{
	color: #1EBBA3;
}

.footer h3{
	text-transform: uppercase;


}

.form-group{
	margin-top: 1.3rem
}

.form-control{
	background-color:white;
	border-radius:2;
	border:.09rem solid #666b71;
	color: black !important;
	font-size: 1.1rem;

}

.form-control:focus{

	background-color:white;
	border:.15rem solid #666b71;

}

.form-group input::placeholder, .form-group textarea::placeholder{

	color: #fff;
}





.socket{
	border-top: .2rem solid #666b71;
	width: 100%
}



.page-item.active{
    
    background-color:#343a40;
}










/* For Pagination*/
.pagination {
	font-family: cursive;
	padding:20px;
	margin:7px;
	margin-left: 40px;
}
.pagination a {
	margin: 2px;
	padding: 0.3em 0.64em 0.43em 0.64em;
	background-color: #343a40;
	text-decoration: none;
	color: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
}
.pagination a:hover, .pagination a:active {
	padding: 0.3em 0.64em 0.43em 0.64em;
	margin: 2px;
	background-color: #de1818;
	color: #fff;
}

/*login page css begins here*/

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}


.loginbox{
	width: 320px;
	height: 520px;
	background: rgb(0,0,0,0.7);
	color: #fff;
	top: 50%;
	left:50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border-radius: 10px;

}
h1{

	padding: 0 0 20px;
	text-align: center;
	font-size: 22px;
}
.loginbox p{
	font-weight: bold;
	padding-left: 10px;
	font-size:smaller;
}
.loginbox input{
	padding-left: 10px;
	padding-right: -30px;
	width: 94%;
	margin-bottom: 20px;

	

}
.loginbox input[type = "text"], input[type = "password"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline:none;
	height: 40px;
	color: #fff;
	font-size: 16px;

}
.loginbox input[type = "submit"]{
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;

}
.loginbox input[type = "submit"]:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}

.loginform{
	padding-left: 10px;

}

/* forgot password page styling begins here*/

/*Background cover*/
#background{
    background: url(https://ballyplug.com/images/photo-of-snow-covered-trees.jpg)no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
    

/* Register box styling begins here*/
.rg{
	background: url(https://ballyplug.com/images/photo-of-snow-covered-trees.jpg)no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	
	

}

.registerbox{
	width: 380px;
	height: 620px;
	background: rgb(0,0,0,0.7);
	color: #fff;
	top: 50%;
	left:50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border-radius: 10px;

}
.alert-error{
	text-align: center;
	font-size: 15px;
	color: #FF0000;
	font-weight: bold;
	font-family: monospace;

}
h1{

	padding: 0 0 20px;
	text-align: center;
	font-size: 22px;
}
.registerbox p{
	font-weight: bold;
	padding-left: 10px;

}
.registerbox input{
	padding-left: 10px;
	padding-right: -90px;
	width: 95%;
	margin-bottom: 20px;

	

}
.registerbox input[type = "text"], input[type = "password"], input[type = "ConfirmPassword"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline:none;
	height: 20px;
	color: #fff;
	font-size: 16px;

}
.registerbox input[type = "submit"]{
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;
}
.registerbox input[type = "submit"]:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}

.registerform{
	padding-left: 10px;

}

/*postjob styling begins here*/

body.pstjb{
	font-family: sans-serif;
}


.postjobbox{
	width: 380px;
	height: 620px;
	background: rgb(0,0,0,0);
	color: black;
;
	left:50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;

}


.postjobboxbox p{
	font-weight: bold;
	padding-left: 10px;
}
.postjobbox input{
	padding-left: 10px;
	padding-right: -90px;
	width: 95%;
	margin-bottom: 20px;

	

}
.postjobbox input[type = "text"],  input[type = "ConfirmPassword"], input[type = "venue"],input[type = "date"],input[type = "number"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid black;
	background: transparent;
	outline:none;
	height: 20px;
	color: black;
	font-size: 16px;

}
.postjobbox input[type = "submit"]{
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;
}
.postjobbox input[type = "submit"]:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}
/* This is for the activate.php validation page*/
.activate_text{
    padding: 4rem 2rem;
    
}

.submit_button {
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;
	width: -webkit-fill-available;
}
.submit_button:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}

textarea#styled{
	width: 350px;
	height: 120px;
	border: 2px solid black;
}

/* Styling of the terms and condition div */

#terms-pane	{ 
    width:100%; 
   
    overflow:scroll;
    border:1px solid #ccc;
    background:#eee; 
    margin:5px 0;
    padding:10px 20px; 
    height:280px;
    
}


#onlinelogo {
    margin: 12px 0px 0px 0px;
    width: 11.2%;
    height: 40px;
}

.custom-toggler-icon {
   color: white;
   font-size: 1.6rem;
}


#display{
	margin: 0; padding:0; border: 0;
	
	
	text-align: center;

}

#displaycontent{
	width:100%;
	padding-top:40px;
	text-align: center;
	
	min-height: 500px;
	
	
	position:relative;
	padding-bottom: 50px;
	overflow: hidden;
	
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: ivory;
  font-size: xx-large;
  font-family: 'Lato', sans-serif;
  display:none;
}



.portfolio-item:hover #title {
 display: block;
}


.month_date{
    font-size: 10px;
    font-family: monospace;
    padding: 0px 0px 0px 0px;
    text-shadow: 0 0 6px black;
    vertical-align: middle;
}



/*--- description of display pages--*/

.description{
    width: 671px;
    align-items: unset;
    justify-content: left;
    text-align: left;
    margin: auto;
}

/*--- styling of telephone verification page--*/
.tel-verify {
    border: 1px solid #e8e8e8;
    width: 500px;
    margin: auto;
    text-align: -webkit-center;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*--- styling of visit.php zuree family home--*/
.visitbox{
    
}

.visitbox p{
    font-size: large;
    font-family: math;
}
/*============= TOP SCROLL =============*/


/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */


/* Devices under 768px (md) */


/* Devices under 576px (sm) */



 BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

/*=============Extra button designs =============*/

.button2{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid black;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:black;
text-align:center;
transition: all 0.15s;
}
.button2:hover{

border-color:white;
}
.button2:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
@media all and (max-width:30em){
.button2{
display:block;
margin:0.4em auto;
}
}