/* your styles go here */

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}


.row-eq-height > .col-sm-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

@media (max-width: 768px){
  .row-eq-height {
 display:block
}
  
  .row-eq-height > .col-sm-4 {
  display: block;
}
	
}

/*
 * Styles copied from the Grid example to make grid rows & columns visible.
 */

.center{
	text-align:center;
}


#about{
	overflow:hidden;
	
}

#about-col-left{
	transform:translateX(-100%);
	opacity:0;
	transition: all 1s ease-in-out;
}

#about-col-left.active{
	transform:translateX(0);
	opacity:1;
	
}



#about-col-right{
	transform:translateX(100%);
	opacity:0;
	transition: all 1s ease-in-out;
	
}


#about-col-right.active{
	transform:translateX(0);
	opacity:1;
	
	
}


#services{
	overflow:hidden;
	
}


#service-boxes-container{
	transform:translateY(100%);
	opacity:0;
	transition: all 1s ease-in-out;
	
	
}


#service-boxes-container.active{
	transform:translateY(0%);
	opacity:1;
	}
	
	.menu-logo{
	display:none;	
		
	}
	
	.menu-logo.active{
	display:block;	
		
	}
	
	
	#text-animate{
	opacity:0;
	transition: all 1s ease-in-out;
	}
	
	#text-animate.active{
	opacity:1;	
	}
	
	#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8{
		opacity:0;
		transition: all .1s ease-in-out;
	}
	
	#box1.active, #box2.active, #box3.active, #box4.active, #box5.active, #box6.active, #box7.active, #box8.active{
		opacity:1;
	}
	
	
	#form-animate{
	transform:translateY(100%);
	opacity:0;
	transition: all 1s ease-in-out;
	
	}
	
	#form-animate.active{
	transform:translateY(0%);
	opacity:1;
	}
	
	#contact{
	
			overflow:hidden;
		
	}
	
	.porfolio-box{
		background-color:#5091da;
		transition: all .5s  ease-in-out;
		overflow:hidden
	}
	
	.porfolio-box:hover{
	 background-color:#5091da;
	 overflow:hidden
	 
	}
	
	.porfolio-box img{
		transition: all .5s  ease-in-out;
		opacity:1;
	}
	
	.porfolio-box img:hover{
		opacity:.5;
		transform:scale(120,120)
		
	}
	
	
	
.home-logo{
	width:250px;
	height:250px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	opacity:0;
	transform:translateY(-100%);
	transition:all .5s ease-in-out;
	
}


.home-logo.active{
	opacity:1;
	transform:translateY(0%);
}

.home-logo img{
	width:100%;
}

.menu-logo{
	position: absolute;
    left: 5px;
    top: 0px;
    width: 150px;
	display:none;
	
}



.menu-logo img{
	width:100%;
	margin-top:5px;
}



/* Message boxes */
.ucf .message { margin-bottom: 20px; }
.ucf .message p { font-weight: bold; margin-top: 0; }
.ucf .message p:last-child { margin-bottom: 0; }
.ucf .message ul { margin-bottom: 0; }
/* Error message box */
.ucf .message .errors 
{     background: red;
    border: solid 0px #ccc;
   border-radius: 0px;
    padding: 20px;
    text-align: center;
	}
.ucf .message .errors p { color: #ffffff; }

.errors ul{
	padding-left:0px;
}
.errors ul li {
	color: #ffffff;
	font-size:20px;
}


/* Success message box */
.ucf .message .success 
{    
    border: solid 0px #ccc;
    border-radius: 0px;
    padding: 20px;
    background-color: #5091da;
}
.ucf .message .success p { color: #ffffff; }

/* Form */
.ucf * { outline: none; 
display:block}
.ucf fieldset {}
.ucf legend { font-weight: bold; padding: 10px; border-bottom: 0px solid #e5e5e5;}
.ucf .field-wrapper { clear: both; margin-top: 0; line-height:2em; }
.ucf .field-wrapper label span { display: inline-block; float: left; width:100px; }
.ucf .field-wrapper input[type=text],
.ucf .field-wrapper input[type=tel],
.ucf .field-wrapper input[type=email],
.ucf .field-wrapper input[type=password],
.ucf .field-wrapper textarea,
.ucf .field-wrapper select { border: solid 1px #ccc; border-radius: 0px; padding: 10px; transition: all .3s ease-in-out; }
.ucf .field-wrapper input[type=text]:focus,
.ucf .field-wrapper input[type=tel]:focus,
.ucf .field-wrapper input[type=email]:focus,
.ucf .field-wrapper input[type=password]:focus,
.ucf .field-wrapper textarea:focus,
.ucf .field-wrapper select:focus { border: solid 1px #5091da; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); }
@media ( max-width: 480px ){
	.ucf fieldset { padding: 10px; }
	.ucf .field-wrapper { margin-bottom: 10px; }
	.ucf .field-wrapper input[type=text],
	.ucf .field-wrapper input[type=tel],
	.ucf .field-wrapper input[type=email],
	.ucf .field-wrapper input[type=password],
	.ucf .field-wrapper textarea 
	{ width: 100%; }
	
	.ucf .field-wrapper select { width:170px; }
}
@media ( min-width: 481px ){
	.ucf fieldset { padding: 20px; }
	.ucf .field-wrapper { margin-bottom: 20px; }
	.ucf .field-wrapper input[type=text],
	.ucf .field-wrapper input[type=tel],
	.ucf .field-wrapper input[type=email],
	.ucf .field-wrapper input[type=password],
	.ucf .field-wrapper textarea { width: 100%; }
	.ucf .field-wrapper select { width:100%; }
}

/* Select 2 overrides */
.select2 { margin-bottom: 20px; }
.select2-container .selection,
.select2-container .select2-selection { width: 100% !important; }
.select2-search__field:focus { outline: none; }

/* Google no CAPTCHA reCAPTCHA */
@media ( max-width: 480px ){
	.g-recaptcha{ margin-bottom: 10px; }
}
@media ( min-width: 481px ){
	.g-recaptcha{ padding-left: 100px; margin-bottom: 20px; }
}

/* Honey trap field */
.ucf .hey-honey { left: -9999px; position: absolute; }

/* Button */
.ucf button[type=submit] {
    background-color: #ffffff;
    border: 1px solid #5091da;
    border-radius: 0px;
    color: #5091da;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    width:100%;
    padding: 15px 15px;
   -webkit-appearance: none;
   -moz-appearance: none;
   transition:all .5s ease-in-out;
}


.ucf button[type=submit]:hover {
background-color: #5091da;
 color: #ffffff;

}
.ucf button[type=submit].complete { background: #dff0d8; cursor: default; }
.ucf button.secondary {     background: #ccc;
    border: 0;
    border-radius: 0px;
    margin-top: 10px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    /* margin-left: 100px; */
    padding: 15px 15px;
    transition: background .3s;
}
.ucf button.secondary:hover { background: #ddd; }