/*
* Roli
* CSS - Stylesheet v0.1
* Copyright 2017, Daniel Alfaro
* www.roli.com
* 17/10/2017
*/

/* =============================================================================== *\
	Table of Content
   
	[0]	 BASIC: Reset,Clearfix & Basics (remove to use Bootstrap Reboot CSS)
	[1]  GENERAL (Common): general settings, common classes
	[2]  TYPOGRAPHY
	[3]  LAYOUT
	[4]  HEADER - NAVIGATION MENU
	[5]  HEADER - ANIMATION
	[6]  ...
	[10] IMAGE HOVER
	...



\* =============================================================================== */

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700');

/*----------------------------------------------------------------------------------/
  [0] BASIC
/----------------------------------------------------------------------------------*/

/* html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } / * =14px * /
h1   { font-size: 24px; font-size: 2.4rem; } / * =24px * / */

/*----------------------------------------------------------------------------------/
  [1] General (Common): general settings, common classes
/----------------------------------------------------------------------------------*/

::-moz-selection {background: #007eb2; color: white; }
::selection {background: #007eb2; color: white; }

/* [ html & body ] */
html {
	overflow: hidden;
	overflow-y: scroll;
}
body {
	background: #FAFAFA;
	color: #212529;
  font-family: 'Rubik', sans-serif;
}

/*----------------------------------------------------------------------------------/
  [2] Typography
/----------------------------------------------------------------------------------*/

b, strong {
  font-weight: 500;
}
ol, ul {
  list-style: none;
}
ol.lNumbers {
  list-style-type: decimal;
  margin: 0;
}
a {
  font-size: 100%;
  vertical-align:baseline;
  background:transparent;
  color: #033f7f;
  cursor: pointer;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
}
a:hover, a:focus {
  text-decoration: none !important;
  color: #007eb2;
  outline: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}
.h1, h1 {
  font-size: 1.75rem;
}
.h2, h2 {
  font-size: 1.35rem;
}
.h3, h3 {
  font-size: 1.20rem;
}
.h4, h4 {
  font-size: 1rem;
}
.lead {
  font-size: 1rem;
  font-weight: 300;
}
.text-justify {
  text-justify: inter-word;
}

@media (min-width: 320px) { }
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .h1, h1 {
    font-size: 2rem;
  }
  h2, h2 {
    font-size: 2rem;
  }
  .h3, h3 {
    font-size: 1.5rem;
  }
  .h4, h4 {
    font-size: 1.25rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .h1, h1 {
    font-size: 2.5rem;
  }
  .h2, h2 {
    font-size: 2rem;
  }
  .h3, h3 {
    font-size: 1.75rem;
  }
  .h4, h4 {
    font-size: 1.5rem;
  }
  .lead {
    font-size: 1.25rem;
    font-weight: 300;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/*----------------------------------------------------------------------------------/
  [2.1] Text Colors
/----------------------------------------------------------------------------------*/

.text-faded {
  color: #FAFAFA;
}
.text-dark {
  color: #37474F;
}
.text-muted {
  color: #999 !important;
}
.text-white {
  color: #fff;
}
.text-primary {
  color: #033f7f !important;
}
.text-primary-light {
  color: #10d266;
}
.text-border {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Borde al texto */
}
.text-shadow {
  text-shadow: 2px 2px 4px #787876;
}
.text-shadow-yellow {
  text-shadow: 2px 2px 4px #f4f71c;
}

/*----------------------------------------------------------------------------------/
  * Background Colors
/----------------------------------------------------------------------------------*/
.bg-home {
  background-image: url("../images/bg/bg_1.jpg");
  background-position: 0px 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  border-bottom: 5px solid #033f7f;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
}
.bg-texture-gradient1 {  
  background: transparent -webkit-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #033f7f 80%, #c2185b 98%) repeat scroll 0% 0%;
  background: transparent -o-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #033f7f 80%, #c2185b 98%) repeat scroll 0% 0%;
  background: transparent -moz-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #033f7f 80%, #c2185b 98%) repeat scroll 0% 0%;
  background: transparent radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #033f7f 80%, #c2185b 98%) repeat scroll 0% 0%;
}
.bg-texture-gradient2 {
  background:-webkit-linear-gradient(-45deg, #ffb300 33%, transparent 0%), linear-gradient(-45deg, #033f7f 67%, transparent 33%), linear-gradient(-45deg, #ffb300 100%, transparent 67%);
  background:-moz-linear-gradient(-45deg, #ffb300 33%, transparent 0%), linear-gradient(-45deg, #033f7f 67%, transparent 33%), linear-gradient(-45deg, #ffb300 100%, transparent 67%);
  background:linear-gradient(-45deg, #ffb300 33%, transparent 0%), linear-gradient(-45deg, #033f7f 67%, transparent 33%), linear-gradient(-45deg, #ffb300 100%, transparent 67%);
}

.bg-img-bg01 {
  background-image:url("../images/bg/bg_01.jpg");
}
.bg-img-bg02 {
  background-image:url("../images/bg/bg_02.jpg");
}
.bg-img-bg03 {
  background-image:url("../images/bg/bg_03.jpg");
}
.bg-img-bg04 {
  background-image:url("../images/bg/bg_04.jpg");
}
.bg-img-bg05 {
  background-image:url("../images/bg/bg_05.jpg");
}
.bg-img {  
  width: 100%;
  height: 100%;
  position: relative;
  /* background:url("../images/bg/bg_1.jpg") center center no-repeat; */
  /* background-image: url("../images/bg/bg_1.jpg"); */
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-img::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #9ef24b, #094b00);
  opacity: .7;
}
.bg-img-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  /* height: 100%;*/
  position: relative;  
  padding: 1.5rem 1rem;
}
.bg-img-parallax::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #49b5e7, #032b55);
  opacity: .7;
}
.bg-alt {
  background-color: #fff;
}
.bg-faded {
  background-color: #FAFAFA;
}
.bg-primary {
  background-color: #033f7f !important;
}
.bg-green-light {
  background-color: #dcf2d6;
}
.bg-blue-light {
  background-color: #d3e7f1;
}
.bg-blue-dark {
  background-color: #033f7f;
}
.bg-footer {
  background-color: #171717;
}

.box-shadow {
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  box-shadow: 0px 8px 12px -6px rgba(0.50, 0.50, 0.50, 0.50);
}
.border-top-primary {
  border-top: 3px solid #033f7f;
  -webkit-box-shadow: 0 -8px 12px -6px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 -8px 12px -6px rgba(0, 0, 0, 0.40);
  box-shadow: 0px -8px 12px -6px rgba(0, 0, 0, 0.40);
}
.border-bottom-primary {
  border-bottom: 3px solid #033f7f;
  -webkit-box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.40);
  box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
}
.border-bottom-green {
  border-bottom: 3px solid #033f7f;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
  box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
}

@media (min-width: 768px) {
  .bg-img-parallax { 
    padding: 4rem;
  }
}
@media (min-width: 992px) {
  .bg-img-parallax { 
    padding: 5rem;
  }
}

/*----------------------------------------------------------------------------------/
 * Colored Buttons
/----------------------------------------------------------------------------------*/
.btn {
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
  text-transform: uppercase;
  font-weight: 500;
  padding: .6rem 1.5rem;
}
.btn:hover, .btn:focus {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.25);
}
.btn-white {
  color: #033f7f !important;
  background-color: #fff;
  border-color: #fff;
}
.btn-white:hover{
  color: #033f7f;
}
.btn-primary{
  background-color: #033f7f !important;
  border-color: #033f7f !important;
}
.btn-primary:hover, .btn-primary:focus{
  color: #fff !important;
}
.btn-radius{
  border-radius: 50px;
}

/*----------------------------------------------------------------------------------/
  [3]  LAYOUT
/----------------------------------------------------------------------------------*/

section {
  padding: 4rem 0;
}

/*----------------------------------------------------------------------------------/
  [4] HEADER - NAVIGATION MENU
/----------------------------------------------------------------------------------*/

.navbar-brand img {
  max-height: 40px;
}
navbar.sticky-on .navbar-brand img {
  max-height: 70px;
}
.creativus-nav {
  padding: 20px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2); 
}
.creativus-nav .site-brand {
  font-size: 20px;
}
.creativus-nav .site-brand a {
  color: #fff; 
}
.creativus-nav .creativus-toggle {
  color: #fff !important;
  position: absolute;
  z-index: 10;
  right: 20px;
  top: 20px; 
}
.creativus-nav .creativus-main-nav {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; 
}
.creativus-nav .creativus-main-nav ul {
  padding: 0;
  margin: 0; 
}
.creativus-nav .creativus-main-nav ul li {
  display: inline;
  list-style: none;
}
.creativus-nav .creativus-main-nav ul li a {
  padding: 10px;
  color: rgba(255, 255, 255, 0.5); 
}
.creativus-nav .creativus-main-nav ul li.seperator {
  position: relative; 
}
.creativus-nav .creativus-main-nav ul li.seperator:before {
  background: rgba(255, 255, 255, 0.1); 
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 2px;
}
.creativus-navbar {
 /* background: rgba(0, 154, 68, 1) !important;
  position: absolute;
  left: 0;
  right: 0;*/
/*
  border-bottom: 3px solid #007eb2;
    position: relative; 
    top: 0;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
*/
    border-bottom: 3px solid #007eb2;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
}
.creativus-navbar .navbar-nav .nav-link {
  font-weight: bold;
  color: rgba(0,0,0,.5);
}
.creativus-navbar.navbar-light .navbar-nav .nav-link:focus, .creativus-navbar.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(3,63,127,.9);
}
.creativus-navbar.navbar-light .navbar-nav .active > .nav-link, 
.creativus-navbar.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, 
.creativus-navbar.navbar-light .navbar-nav .show > .nav-link {
  color: rgba(3,63,127,.9);
}
.creativus-navbar .navbar-nav > .nav-item > .nav-link {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px; 
}
.creativus-navbar .navbar-nav > .nav-item.creativus-cta a {
  color: #000; 
}
.creativus-navbar .navbar-nav > .nav-item.creativus-seperator {
  position: relative;
  margin-left: 20px;
  padding-left: 20px; 
}
.creativus-navbar .navbar-nav > .nav-item.creativus-seperator:before {
  position: absolute;
  content: "";
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.05); 
}

@media (min-width: 576px) {  }

@media (min-width: 768px) {
  .navbar-brand img {
    max-height: 44px;
  }
  .creativus-nav .creativus-main-nav {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    height: 100vh;
    background: black;
    width: 300px;
    right: 0;
    top: 0;
    padding-top: 50px;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    z-index: 1; 
  }
  .creativus-nav .creativus-main-nav.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  .creativus-nav .creativus-main-nav ul li {
    display: block;
    padding: 10px; 
  }
  .creativus-nav .creativus-main-nav ul li a:hover {
    color: #fff; 
  }
  .creativus-navbar .navbar-nav > .nav-item > .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 992px) {
  .navbar-brand img {
    max-height: 50px; 
  }
  .creativus-navbar {
    background: rgba(245, 245, 245, 1) !important;
    border-bottom: 3px solid #007eb2;
/*
    position: relative; 
    top: 0;
*/
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 8px 12px -6px rgba(0, 0, 0, 0.40);
  }
  .creativus-navbar .navbar-nav > .nav-item > .nav-link {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .creativus-navbar .navbar-nav > .nav-item.creativus-seperator {
    padding-left: 0;
    margin-left: 0; 
  }
  .creativus-navbar .navbar-nav > .nav-item.creativus-seperator:before {
    display: none; 
  }
}

@media (min-width: 1200px) {  }

/*----------------------------------------------------------------------------------/
  [5] HEADER - Intro Animation
/----------------------------------------------------------------------------------*/

.cover-fs {
  height: 100vh;
  min-height: 400px;
  padding: 1.5rem 0;   /*  padding: 100px 0;*/
}
.cover-fs .brand {
  margin-top: 50px;
}
.cover-fs h1 {
  font-weight: 100;
}
.cover-fs h1 b {
  font-weight: 700;
}

.box-animation {
  border-top: 7px solid #033f7f;
  border-left: 7px solid #033f7f;
  background-color: #f8f9fa; 
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
  font-size: .8rem;
  font-weight: 500;
  margin-top: 1.5rem !important;
  padding: .5rem 1.2rem;
}
.box-animation:hover { }

.box-animation-buttons {
  margin-top: 1.5rem !important;
}

.btn-down {
  background: transparent;
  border: 2px solid #FFF;
  border-style: double;
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.5rem;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
/*  float: left;*/
  z-index: 9;
  
  position:absolute; 
  margin-left:-1.5em;
  left:50%;
  bottom:100px;
  
  opacity: 0;
}
.btn-down:hover  {
  -webkit-animation: rubberBand 1s;
  animation: rubberBand 1s;
}
.btn-down svg {
  color: #FFF;
  font-size: 2rem;
}

.logo-animate {
  max-height: 70px;
  margin: 20px 0;
}

.creativus-box p {
  font-size: 0.85rem;
}

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

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .cover-fs .brand {
    margin-top: 100px;
  }
  .logo-animate {
    max-height: 100px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .cover-fs {
    padding: 7rem 0;
  }
  .cover-fs .brand {
    margin-top: 2.5rem;
  }
  .box-animation {
    font-size: 1rem;
    margin-top: 2.5rem !important;
    padding: 1rem 1.5rem;
  }
  .box-animation-buttons {
    margin-top: 2.5rem !important;
  }
  .btn-down {
    opacity: 1;
  }
  .logo-animate {
    max-height: 150px;
    margin: 25px 0;
  }
  .creativus-box p {
    font-size: 1rem;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .logo-animate {
    max-height: 150px;
    margin: 30px 0;
  }
}


#about .list-group-item {
  background-color: #FAFAFA;
}
#about .list-group-item:hover {
  background-color: #FFF;
}

/*----------------------------------------------------------------------------------/
  [#] Card Box Styles 
/----------------------------------------------------------------------------------*/
.creativus-item {
  padding-top: 15px;
  padding-bottom: 15px;
}
.creativus-box {
  background: #FFF; /*rgba(245, 245, 245, 1);*/
  margin: 0rem;
  padding: 0.5rem;
  /*box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);*/
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
.creativus-box:hover, .creativus-box:focus {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
}

.creativus-box h4 {
  font-size: 0.85rem;
  color: #033f7f;
  text-align: center;
}

@media (min-width: 320px) { }
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .creativus-box .h4, .creativus-box h4 {
    font-size: 1rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .creativus-box .h4, .creativus-box h4 {
    font-size: 1.25rem;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/*----------------------------------------------------------------------------------/
  [#] PROVIDERS
/----------------------------------------------------------------------------------*/

.providers .heading {
  color: #033f7f;
}

.top-grids {
  text-align: center;
}
.provider {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1rem;
  
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

.top-grids:hover .provider {
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

/*----------------------------------------------------------------------------------/
  [#] SERVICES
/----------------------------------------------------------------------------------*/

.services .heading {
  color: #033f7f;
}

.service-grid-1 {
  text-align: center;
}
.service-image {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1rem;
  width: 100%;
}

/* ------------------------------------------------------------------
Work Section
--------------------------------------------------------------------- */

.single-portfolio {
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
.single-portfolio:hover {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.3);
}

.work-filter {
	margin: 60px 0 30px;
}
#filter {
    overflow: hidden;
}

#filter li {
	display: inline-block;
	position: relative;
	padding: 0px 17px;
}

#filter li:after {
	position: absolute;
	content: ":::";
	font-size: 15px;
	top: 0;
	right: 0;
	margin-right: -5px;
	color: #d0d0d0;
}
#filter li:last-child:after {
	content: "";
}

#filter li a {
  color: #6d6d6d;
  display: block;
  margin: 0 5px 0 0;
  cursor: pointer;
  font-weight: bold;
}
#filter li a:hover,
#filter li a.active {
  border-bottom: 1px dotted #707070;
  cursor: pointer;
  color: #033f7f;
  text-decoration: none;
  font-weight: bold;
}
.portfolio-item {
  margin-bottom: 30px;
  min-height: 270px;
}

/*portfolio hover effect*/
figure.css-hover-effect {
  background: #033f7f; 
	background: -moz-linear-gradient(45deg,  #033f7f 42%, #41baec 88%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(42%,#033f7f), color-stop(88%,#41baec)); 
	background: -webkit-linear-gradient(45deg,  #033f7f 42%,#41baec 88%); 
	background: -o-linear-gradient(45deg,  #033f7f 42%,#41baec 88%);
	background: -ms-linear-gradient(45deg,  #033f7f 42%,#41baec 88%); 
	background: linear-gradient(45deg,  #033f7f 42%,#41baec 88%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#094b00', endColorstr='#41baec',GradientType=1 ); 
	position: relative;
	overflow: hidden;
}

figure.css-hover-effect img {
	width: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.35s;
	-moz-transition: opacity 0.35s;
	-o-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.css-hover-effect:hover img {
	opacity: 0.2;
}

figure .figure-link {
	position: absolute;
	top: 20px;
	right: 20px;
}
figure .figure-link a {
	width: 30px;
	height: 30px;
  padding: 0;
	display: block;
	background: #033f7f;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 18px;
	border-radius: 3px;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;  
  text-decoration: none;
}
figure .figure-link a:hover {
	background-color: #fff;
}
figure .figure-link a:hover svg {
	color: #033f7f;
}

figure .figure-info {
	position: absolute;
	bottom: 30%;
	left: 30px;
}
figure .figure-info h2 {
	margin: 0;
	font-size: 21px;
	line-height: 22px;
	font-weight: 300;
}
figure .figure-info h2 a {
	color: #fff;
	text-decoration: none;
}

figure.css-hover-effect span {
	color: #f4f4f4;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 500;
}

/*IE9 Fixing*/
.ie9 figure .figure-info {
	left: 60px
}
.ie9 figure .figure-info h2 {
	font-size: 16px;
}
.ie9 figure.css-hover-effect span {
	font-size: 10px;
}

figure.css-hover-effect h2 ,
figure.css-hover-effect span ,
figure.css-hover-effect .figure-link a {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.css-hover-effect:hover h2,
figure.css-hover-effect:hover span,
figure.css-hover-effect:hover .figure-link a {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}


/*portfolio modal style*/
.portfolioModal {}
.portfolioModal .modal-header {
	border: 0;
}
.portfolioModal .modal-body {
	padding: 15px 40px 45px;
}
.portfolioModal img{
	width: 100%;
}
.portfolioModal .modal-header .close {
	font-size: 30px;
	text-shadow: none;
	z-index: 1200;
	position: relative;
}
.portfolioModal .close:hover,
.portfolioModal .close:focus {
	color: #3f25a9;
	outline: none;
}

.portfolio-details blockquote {
	padding: 0 20px;
	margin: 20px 0 0;
	font-size: 14px;
	border-left: 5px solid #8f8ca8;
}
.portfolio-details blockquote:hover {
	border-left: 5px solid #6145d6;
}

.more-work-button {
	margin-top: 30px;
}

/*----------------------------------------------------------------------------------/
  [#] CONTACTUS
/----------------------------------------------------------------------------------*/

.creativus-form {
  background: #FFF;
  margin: 0px;
  padding: 1rem;
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
.creativus-form:hover, .creativus-form:focus {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
}
.creativus-form .form-group {
  position: relative;
}
.creativus-form .form-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.creativus-form .form-control {
  font-size: .8rem;
  height: 3rem;
  border-radius: 0;
  border: 1px solid #d9d9d9;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.creativus-form .form-control:active, 
.creativus-form .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #033f7f;
}
.creativus-form .icon-form {
  color: #033f7f;
  opacity: 0.6;
  position: absolute;
  font-size: 1.4rem;
  right: .5rem;
  top: .9rem;
  z-index: 10;
}
.creativus-form label {
  font-weight: normal;
}
.creativus-form .form-group label {
  text-transform: uppercase;
  font-size: .9rem;
}
.creativus-form .form-group .form-field {
  position: relative;
}
.creativus-form .form-group .form-field .icon {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.creativus-form .form-group .form-field .form-control {
  padding-right: 50px;
}
.creativus-form textarea.form-control {
  height: inherit;
  resize: vertical;
  min-height: 3rem;
  height: 7rem;
}
.creativus-contact-details {
  padding: 0;
  margin: 0;
}
.creativus-contact-details li {
  padding: 0;
  margin: 0 0 3rem 0;
  list-style: none;
}
.creativus-contact-details li > span {
  display: block;
  color: rgba(0, 0, 0, 0.3);
}
.contact-details-title {
  padding-top: 2rem;
}
.creativus-icon-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
  float: none;
  box-sizing: border-box;
}
.creativus-icon-list.circle {
  float: none;
  border: 0;
  width: auto;
  margin: 0;
  cursor: inherit;
}
.creativus-icon-list li.icon-list-item {
  padding: 0;
  list-style: none;
  clear: both !important;
  position: relative;
  min-height: 4.5rem !important;
  margin: 0 0 1.5rem;
  line-height: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.creativus-icon-list li > span {
  display: block;
  color: rgba(0, 0, 0, 0.6);
}
.creativus-icon-list .icon-list-icon {
  background: #FFF;
  border: 2px solid #033f7f;
  border-style: double;
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.5rem;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  float: left;
  position: relative;
  z-index: 9;

  /*box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);*/
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
.btn:hover, .btn:focus {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.25);
}
.creativus-icon-list .icon-list-item:hover .icon-list-icon {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.25);
}
.creativus-icon-list .icon-list-icon svg {
  color: #033f7f;
  font-size: 2rem;
}
.creativus-icon-list .icon-list-item:hover .icon-list-icon svg {
  -webkit-animation: rubberBand 1s;
  animation: rubberBand 1s;
}
.creativus-icon-list li .icon-description {
  margin-top: .5rem;
  margin-left: .3rem;
  padding-left: .5rem;
  float: left;
}
.creativus-icon-list li .icon-description h4 {
  color: #033f7f;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0em;
  clear: none !important;
}
.creativus-icon-list li .icon-description a {
  color: #212529;
}
.creativus-icon-list li .icon-description a:hover {
  color: #033f7f;
}
.creativus-icon-list li .icon-description span.icon-description-text {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: .9rem;
  line-height: 1.714285714;
  display: block;
}

@media (min-width: 320px) {
  .creativus-icon-list .icon-list-icon {
    font-size: 1.5rem;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .creativus-icon-list .icon-list-icon {
    width: 3em;
    height: 3em;
    line-height: 3em;
  }
  .creativus-icon-list .icon-list-icon svg {
    font-size: 2rem;
  }
  .creativus-icon-list li .icon-description {
    margin-top: .9rem;
    margin-left: .5rem;
    padding-left: 1rem;
  }
  .creativus-icon-list li .icon-description span.icon-description-text {
    font-size: 1rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .creativus-form {
    padding: 2rem;
  }
  .creativus-form .form-control {
    font-size: 1rem;
  }
  .creativus-form textarea.form-control {
    height: 12rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }


/*----------------------------------------------------------------------------------/
  [#] FOOTER
/----------------------------------------------------------------------------------*/

footer {
  padding: 0;
  position: relative;
  background: #033f7f;
  color: #fff;
}
footer .footer-links {
  padding: 1rem 0;
}

footer .social {
  margin: 1.3rem 0;
}

footer .social > a {
  padding: .8rem;
  font-size: 2rem;
  color: rgba(255,255,255,.6);
}

footer .social > a:hover {
  color: rgba(255,255,255,1);
}

footer .copyright {
  font-size: .7rem;
  line-height: .9rem;
  background: #032b55;
  padding: .6rem 0;
}

.copyright span {
  font-size: .7rem;
  font-weight: bold;
}

.copyright span:hover {
  font-size: .8rem;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  footer .copyright {
    font-size: .8rem;
    line-height: 1rem;
    padding: .6rem 0;
  }

  .copyright span {
    font-size: .8rem;
    font-weight: bold;
  }

  .copyright span:hover {
    font-size: .9rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  footer .copyright {
    font-size: 1rem;
    line-height: 1.1rem;
    padding: .7rem 0;
  }

  .copyright span {
    font-size: 1rem;
    font-weight: bold;
  }

  .copyright span:hover {
    font-size: 1.1rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/*----------------------------------------------------------------------------------/
  [#] MAP - Google Location
/----------------------------------------------------------------------------------*/

#map {
  background: #033f7f;
  padding: 0;  
}
.map {
  
}
.map iframe {
	width:100%;
	height:250px;
}

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

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .map iframe {
    height:300px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .map iframe {
    height:350px;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }