/* ==========================================================================
Intro
========================================================================== */
.intro { background: #f3f5f8; }
.intro p { margin: 50px 0 0; }
h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }


/* ==========================================================================
Portfolio
========================================================================== */
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 0px; position: relative; z-index: 1; overflow: hidden; }
.overlay { 
   display: block; 
   position: absolute; 
   z-index: 20; 
   background: rgba(100, 194, 158, 0.8); 
   overflow: hidden; 
   transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; 
   }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #000; font-weight: 400; font-size: 80%; text-transform: uppercase; line-height: 30px; }
p.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #000; font-weight: 400; font-size: 80%; text-transform: uppercase; line-height: 30px; }

.overlay-effect .overlay { 
  opacity: 0; 
  background: #fff;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 5%;
	left: 8%;
	bottom: auto;
	right: 8%;
	text-align: center;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
  }
.overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
p.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
.overlay-effect .img.hover .overlay { height: 90%; opacity: 1; }
.img img { width: 100%; transform: translate3d(-0px, 0, 0); -ms-transform: translate3d(-0px, 0, 0); }
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; }

.container{margin-left:auto;margin-right:auto;padding-left:0.938rem;padding-right:0.938rem}.container::after{content:"";display:table;clear:both}

@media (min-width: 320px){.container{max-width:420px}}

@media (min-width: 768px){.container{max-width:720px}}

@media (min-width: 992px){.container{max-width:940px}}

@media (min-width: 1200px){.container{max-width:1140px}}.container-fluid{margin-left:auto;margin-right:auto;padding-left:0.938rem;padding-right:0.938rem}.container-fluid::after{content:"";display:table;clear:both}


/* ==========================================================================
Subscribe
========================================================================== */
.subscribe { 
background: url('../img/img-2.jpg') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment: ; padding: 65px 0 300px 0;}


.subscribe h1 { color: #fff; margin-bottom: 0px; }
.subscribe h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
.s2 h1 { color: #fff; margin-bottom: 0px; }
.s2 h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }


/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 70px; }
ul.slides li { margin-bottom: 20px; }
/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp3 { background: url('../../Synthetica/img/olea-nova.jpg') no-repeat center center; background-position: 200px 10px; height: 100%; }

.wp1 {text-align:center;
padding-top:20px;
padding-bottom:10px}
.h{
	height: 160px;
}
.h-4{
	height: 260px;
	background: rgba(255, 255, 255, 0.3);
  box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.w {
	margin-left: 25px;
	font-size:14px;
	color:#7E7E7E;
}
.m{
	margin-right: 25px;
}
.m2 {
	margin-top: 100px;
}
.m3 {
	margin-bottom: 100px;
}
.m4 {
	margin-bottom: 30px;
}
.h-2{
	height: 420px;
}
.h-3{
	height: 460px;
	}
.t{ 
   background: rgba(61, 201, 179, 0.8); padding: 20px 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #309383; -moz-box-shadow: 0px 3px 0px 0px #309383; box-shadow: 0px 3px 0px 0px #309383; margin: 60px 0 0; font-weight: bold;
   }
   .t2{
	   background:#A3BCFF; padding: 5px 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin: 20px 0 0; font-weight: bold;
   }
   .t3{
	   background:#5A6889; padding: 5px 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; text-transform: uppercase; letter-spacing: 1px; display: inline-block;  font-weight: bold;
   }

.l {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 0px 2px rgba(0,0,0,0.2);	
}
.l2 {
  padding-right: 40%;
  padding-bottom:5px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 1px 0px 2px rgba(0,0,0,0.2);		
}
.l3 {
    background: rgba(255, 255, 255, 0.3);
  box-shadow: 1px 0px 2px rgba(0,0,0,0.2);		
}
.pad {
  padding-bottom: 140px;	
}
.pad2 {
  padding-bottom: 20px;
  padding-top: 20px;
}
.columns {
  position: relative;
  width: 100%;
  float: left; }
  .small-4 {
    position: relative;
    width: 33.33333%; }
	
.columns2 {
  position: relative;
  width: 100%;
  float: right; }
  .small-2 {
    position: relative;
    width: 50%; }
	
.col-md-7{width:33.333%}	
	
.col-md-14 {
	position:relative;
	min-height: 1px;
	padding-left: 14px;
	padding-right: 10px;
	padding-top: 10px;
	float:left;
	width:25%;	
	}
.col-md-15 {
	position:relative;
	min-height: 1px;
	display:inline-block;
	width:60%;	
	margin:25px 0 50px 0px;
	}
.col-md-16 {
	position:relative;
	min-height: 1px;
	padding-left: -10px;
	padding-right: 14px;
	padding-top: 10px;
	float:right;
	width:25%;	
	}
.col-md-17 {
	position:relative;
	min-height: 1px;
	display:inline-block;
	width:60%;	
	margin:25px 0 50px 20px;
	
	}
.col-md-18 {
	position:relative;
	min-height: 1px;
	padding-left: -10px;
	padding-right: 14px;
	padding-top: 10px;
	float:right;
	width:33%;	
	}	
.col-md-19 {
	position:relative;
	min-height: 1px;
	padding-left: 14px;
	padding-right: 10px;
	padding-top: 10px;
	float:left;
	width:10%;	
	}	
	
.over {
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	position: absolute;
	top: 20px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	text-align: center;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
.s {font-size: 70%; }
.s3 {font-size: 84%; }	

.top2 {
	margin-top: 160px;
	}	

.ktext {
	font-size: 1.2em;
	margin-left: 4px;
	margin-right: 4px;
}
.ktext-p {
	font-size: 1em;
	margin-left: 4px;
	margin-right: 4px;
	color:#999;
}
.float {
	position:relative;
}
.indent {
	display:inline-block;
	margin:25px 0 50px -100px;
	padding:10px;
	background-color:#F4F6F9
	}
.img2{
	height:50%;
	width:50%;
	margin-top: 16px;
	margin-bottom: 16px;	
}
.img3{
	height:75%;
	width:75%;
		
}
.color1 {
	background-color:#EEE;
	margin-bottom:50px;
}
.col {
	text-align:left;
	margin-bottom: 40px;
	}
.col p{
	color:#333;
}
.col a{
	color:#0000FF;
}	
.right {float:right;
padding-right:10px;}
nav a:hover, a:focus { color: #3dc9b3; text-decoration: none; }
.port {font-size:36px;}

/* ==========================================================================
Screenshots
========================================================================== */
.screenshots ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.screenshots ul li {
    float: left;
    min-height: 100%;
    width: 50%;
    background-color: #000;
    list-style: none;
}
.screenshots figure {
    position: relative;
    overflow: hidden;
}
.screenshots figure2 img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure3 img {
    width: auto;
    height: 240px;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure4 img {
    width: 240px;
    height: auto;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure2:hover img, .screenshots figure:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.screenshots figure3:hover img, .screenshots figure:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.screenshots figure4:hover img, .screenshots figure:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.screenshots figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 25% 0;
    width: 100%;
    height: 100%;
    background-color: rgba(63, 97, 132, 0.85);
    text-align: center;
    font-size: 15px;
    opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figcaption a {
    color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
    color: #73d0da
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
    opacity: 1
}
.visible {
    opacity: 1
}
.screenshots figure.cs-hover figcaption {
    opacity: 1
}
.screenshots figcaption i {
    font-size: 35px
}
.screenshots figcaption p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 400;
}
.screenshots figcaption .caption-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -100px;
    width: 200px;
    -webkit-transform: translate(0px, 15px);
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/* ==========================================================================
Footer
========================================================================== */


ul.legals li { display: inline-block; }

.legals {
	text-align: left;
	margin-left:25px;
	margin-bottom:25px;
	margin-right: 25px;
	font-size: 0.75em;
}
.dark-bg {color:#333;
background-color:#f3f5f8;}