/* Diego Ricaurte: Graphic and Digital Design */
/*------------------------------------------------------------------
[Color Codes]
Blue: #1b45a7;
Darker Blue: #153684;
Dark Grey: #363b3f;
Darker Grey: #b6b7b7;
Social Buttons: #444749;
Off-white: #f2f2f2;
White: #ffffff;
Black: #000000;
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. Welcome
2. Navbar
3. About 
4. Skills 
5. Portfolio 
6. Footer
7. Portfolio Items 
8. Miscellaneous 
-------------------------------------------------------------------*/

html, body { 
  background: #f2f2f2; 
  height: 100%;
  font-size:15px;
}

.section { 
  padding: 75px 0 75px 0px; 
}

.section h1, .section h2, .section h3, .section h4 {
 font-family: "Lato", sans-serif; 
 font-weight: 700; 
 color: black; 
}

.section p { 
  font-family: "Lato", sans-serif; 
  font-weight: 400; 
  font-size: 15px; 
  line-height: 24px; 
}

.section .heading { 
  text-align: center; 
  margin-bottom: 30px;
}

.firstSec .heading {
  margin-bottom: 0px;

}

.section .profilePic { 
  text-align: center; 
  margin: 0 auto; 
  float: none; 
  padding-bottom: 15px;
}

.section .divider { 
  width: 100px; 
  height: 1px; 
  background: #1b45a7; 
  margin: 0 auto; 
}

section.colored .divider{
  background: white;
}

section.colored h1, section.colored h2, section.colored h3, section.colored h4, section.colored p { 
  color: white; 
}

.btn, .filter a { 
  font-family: "Lato", sans-serif; 
  font-weight: 400; 
  font-size: 15px; 
  text-decoration: none; 
  background: white; 
  color: #b6b7b7; 
  border: 1px solid #b6b7b7; 
  padding: 18px; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.btn:hover, .btn:focus { 
  background-color: #1b45a7; 
  border-color: #1b45a7; 
  color: white; 
}

.borderBtn, .contactform button { 
  font-family: "Lato", sans-serif; 
  font-weight: 700; 
  font-size: 15px; 
  text-decoration: none; 
  color: white; 
  border: 1px solid white; 
  padding: 15px 45px 15px 45px; 
  display: inline-block; 
  -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  -ms-border-radius: 0px; 
  -o-border-radius: 0px; 
  border-radius: 0px; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.borderBtn:hover, .contactform button:hover, .borderBtn:focus, .contactform button:focus { 
  background-color: white; 
  color: #1b45a7; 
  text-decoration: none; 
}

section .centered { 
  margin: 0 auto; 
  float: none; 
}

.hidethis { 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; 
  filter: alpha(opacity=0); 
  opacity: 0; 
}

.loader { 
  width: 100%; 
  height: 100%; 
  background: white; 
  position: fixed; 
  top: 0px; 
  left: 0px; 
  z-index: 1000; 
}

.loader .inner { width: 100%; height: 100%; background: url(../images/loader.gif) center center no-repeat; }

h1, h2, h3, h4 {

	margin-top: 15px;
	margin-bottom: 15px;
}

h1 {
  font-size: 38px;
}

p {

	margin: 0 0 15px;
}

/*------------------------------------------------------------------
[1. Welcome]
-------------------------------------------------------------------*/

.splashportfoliolink{
  padding-top: 30px;
  text-align: center;
}

.vegas-timer-progress {
  background: #C9091A;
}
.slider-section {
  height: 100%;
  min-height: 618px;
  width: 100%;
  position: relative;
  color: #fff;
  background: #000000;
}

.splashsignature {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.signatureimage {

  width: 100%;
}
/*------------------------------------------------------------------
[2. Navbar]
-------------------------------------------------------------------*/

.navbar-flat { background: #1b45a7; 
  margin-bottom: 0px; 
-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
-ms-border-radius: 0px; 
-o-border-radius: 0px; 
border-radius: 0px; 
}

.navbar-flat .navbar-collapse { 
  text-align: center; 
}

.navbar-flat .navbar-toggle .icon-bar { 
  background: white; 
}

.navbar-flat ul { 
  float: none; 
}

.navbar-flat li { 
  display: inline-block; 
  float: none; 
}
.navbar-flat li a:hover { 
  background: #153684; 
  color: white; 
}
.navbar-flat li a:focus { 
  background: #153684; 
  color: white; 
}
.navbar-flat li.active a { 
  background: #153684; 
  color: white; 
}

.navbar-flat a { 
  font-family: "Lato", sans-serif; 
  font-weight: 700; 
  color: #f2f2f2; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.navbar-flat .navbar-brand { 
  display: none; 
}

/*------------------------------------------------------------------
[3. About]
-------------------------------------------------------------------*/

.about { 
  background: #1b45a7; 
  color: white; 
}

.title{ padding-bottom: 15px; }

.blurb {
  text-align: center;
}

.hero .borderBtn { 
  margin-top: 15px; 
}

.about h3 { 
  color: #f2f2f2 !important; 
}

.firstSec { 
  padding-top: 60px; 
}

.firstSec.fixed { 
  padding-top: 110px; 
}

.services .services-inner {
  margin-top: 0px; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.service { 
  border: 1px solid #e3e5e5; 
  padding-top: 50px; 
  padding-bottom: 50px; 
  text-align: center; 
  color: #1b45a7; 
  margin-left: -1px; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.service h4 { 
  color: black; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.service i { 
  width: 50px; 
  height: 50px; 
  margin: 0 auto; 
  display: block; 
  background: url(../images/icons.png) no-repeat; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

.service .screen { 
  background-position: left top; 
}

.service .heart { 
  background-position: -50px top; 
}

.service .tag { 
  background-position: -100px top; 
}

.service .camera { 
  background-position: -150px top; 
}

.service .pen { 
  background-position: -200px top; 
}

.service .socialmedia { 
  background-position: -250px top; 
}

.service .finger { 
  background-position: -300px top; 
}

.service:hover, .service:focus { 
  background-color: #1b45a7; 
  border-color: #1b45a7; 
  color: white; 
}

.service:hover h4, .service:focus h4 { 
  color: white; 
}

.service:hover .screen, .service:focus .screen { 
  background-position: left bottom; 
}

.service:hover .heart, .service:focus .heart { 
  background-position: -50px bottom; 
}

.service:hover .tag, .service:focus .tag { 
  background-position: -100px bottom; 
}

.service:hover .camera, .service:focus .camera { 
  background-position: -150px bottom; 
}

.service:hover .pen, .service:focus .pen { 
  background-position: -200px bottom; 
}

.service:hover .socialmedia, .service:focus .socialmedia { 
  background-position: -250px bottom; 
}

.service:hover .finger, .service:focus .pen { 
  background-position: -300px bottom; 
}

/*------------------------------------------------------------------
[4. Skills]
-------------------------------------------------------------------*/

section.references {
	max-width: none; 
}

.skillsimage {
  background: url(../images/skillsimage.jpg) center no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-width: 100%;
}

.testimonialtext{
  margin-top: 15px;
  padding: 0px;
}

.testimonialtext p{
  font-size: 15px;
}

.carolinetestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/caroline.png) center no-repeat #444749;
}

.fionatestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/fiona.png) center no-repeat #444749;
}

.damartestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/damar.png) center no-repeat #444749;
}

.danielletestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/danielle.png) center no-repeat #444749;
}

.matttestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/matt.png) center no-repeat #444749;
}

.erictestimonialphoto {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    background: url(../images/referencephotos/eric.png) center no-repeat #444749;
}

.reference {

  width: 300px;
  margin: 0 auto;
}

.testimonialtext {
  text-align: center;
}

.reference {
  text-align: left;
}
  .companylogo {
    float: left;
    padding-right: 10px;
    max-width: 75px;
  }

.referencename {

  margin-bottom: 3px;
}
/*------------------------------------------------------------------
[6. Index Portfolio]
-------------------------------------------------------------------*/

section.portfolio {
  background-color: white;
}

.thumb {
  border: 0px;
  margin-bottom: 0px;
  padding: 7.5px;
}

.thumbimage {
  width:100%;
}

.figure {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.figcaption {
  position: absolute;
  width: 100%;  
  text-align: center;
  background: black;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition:    all 0.5s ease;
  -o-transition:      all 0.5s ease;
}

.figure:hover .figcaption {
  opacity: 1;
}

.figure:before {
  font-weight: 800;
  background: black;
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.5s ease;
  opacity: 0.75;
}

.figure:hover:before {
  opacity: 0;
}

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot .figcaption { left: 0; bottom: -30%;}
.cap-bot:hover .figcaption { bottom: 0; }

/*------------------------------------------------------------------
[7. Footer]
-------------------------------------------------------------------*/

footer{ 
  background: #2c3033; 
}

.padder{
  padding-top: 0px;
  padding-bottom: 20px;

}

.stampcontainer{
  min-width: 125px;
  max-width: 125px;
  float: none;
  padding-bottom: 20px;
}

.stamp {
  width: 100%;
  margin: 0 auto;
}


.socialmedia {
  padding-bottom: 30px;
  padding-top: 20px;
  margin: 0px;
}

footer p { font-size: 12px; 
  color: #b6b7b7; 
  text-align: center; 
}

footer ul { width: 100%; 
  text-align: center; 
  margin-top: 20px; 
}

footer li { display: inline-block; 
  margin: 0 12px; 
}

footer li a { display: block; 
  text-decoration: none; 
  border-bottom: none; 
  padding: 18px; 
  -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  -ms-border-radius: 0px; 
  -o-border-radius: 0px; 
  border-radius: 0px; 
  -webkit-transition: all 0.5s ease-in, 0.5s; 
  -moz-transition: all 0.5s ease-in, 0.5s; 
  -o-transition: all 0.5s ease-in, 0.5s; 
  -ms-transition: all 0.5s ease-in, 0.5s; 
  transition: all 0.5s ease-in, 0.5s; 
}

footer .facebook { 
  background: url(../images/footericons.svg) center no-repeat #444749;
  background-position: left top;  
}

footer .facebook:hover { 
  background-color: #4265b9; 
}

/*footer .youtube { 
  background: url(../images/youtube.png) center no-repeat #444749; 
}
footer .youtube:hover { 
  background-color: #df3333; 
}
*/

footer .pinterest { 
  background: url(../images/footericons.svg) center no-repeat #444749;
  background-position: -144px top; 
}

footer .pinterest:hover { 
  background-color: #df3333; 
}

footer .behance { 
  background: url(../images/footericons.svg) center no-repeat #444749;
  background-position: -108px top;  
}

footer .behance:hover { 
  background-color: #3fbff0; 
}

footer .instagram { 
  background: url(../images/footericons.svg) center no-repeat #444749;
  background-position: -36px top; 
}

footer .instagram:hover { 
  background-color: #956751; 
}

footer .linkedin { 
  background: url(../images/footericons.svg) center no-repeat #444749;
  background-position: -72px top; 
}

footer .linkedin:hover { 
  background-color: #0073b2; 
}

/*------------------------------------------------------------------
[8. Portfolio Item Pages]
-------------------------------------------------------------------*/

.portfolioitemheader{ 
  background: #1b45a7;
  padding-top: 45px;
  padding-bottom: 45px;
}

.portfoliotitle{
  padding: 0px;
  margin-top:0px;
  text-align: center; 
}

h3.portfoliocategories {

  font-weight: 500;
}

.portfoliotitle2 {
  text-align: center; 
  margin-top: 0px;
}

.portfolioitemtext {
  text-align: center;
  margin-bottom: 0px;
}

.backbutton{
  text-align: center;
}

.portfolioitem{
  background: white;
  padding-bottom:0px;
}

video {
  width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 0;
}

.videoborder {
  font-size: 0;
}

.bumper {

  margin-top: 0px;
  margin-bottom: 0px;
}
 
/*------------------------------------------------------------------
[7. Contact]
-------------------------------------------------------------------*/

section.contact .details { text-align: center; padding: 0 0 30px 0px; }
section.contact .details p { font-family: "Lato", sans-serif; font-size: 30px; font-weight: 300; }
section.contact .details p.bigger { font-size: 40px; font-weight: 700; margin-top: 20px; }

.contactform input, .contactform textarea { border: 1px solid #b6b7b7; color: #363b3f; background: none; padding: 15px 30px; margin: 0 3% 20px 0px; resize: none; }
.contactform .error, .contactform .form-error { border-color: #c12728 !important; }
.contactform .no-margin { margin-right: 0px; }
.contactform input.col-lg-6 { width: 48.5%; }
.contactform button { background: #1b45a7; }
.contactform button:hover, .contactform button:focus { border-color: #1b45a7; }
.contactform p { text-align: center; }

.error {
  text-align: center;
  color: red;
  margin: auto;
  display: table;
}

.success {
  text-align: center;
  color: green;
  margin: auto;
  display: table;
}

.form a { color: white; }


/*------------------------------------------------------------------
[9. Vegas Slider]
-------------------------------------------------------------------*/
.vegas-timer-progress {
  background: #153684;
}

/*------------------------------------------------------------------
[9. Miscellaneous]
-------------------------------------------------------------------*/

img { 
  max-width: 100%; 
  height: auto; 
}

.clear { 
  clear: both; 
}

::selection { 
  background-color: #1b45a7; 
  color: white; 
}

::-moz-selection { 
  background-color: #1b45a7; 
  color: white; 
}

input, textarea { 
  -webkit-appearance: none; 
}

/* OWL */

.owl-theme .owl-controls .owl-page span { 
  background: white; 
}

/* CSS Keyframe Animations */

.animated { 
  -webkit-animation-fill-mode: both; 
  -moz-animation-fill-mode: both; 
  -ms-animation-fill-mode: both; 
  -o-animation-fill-mode: both; 
  animation-fill-mode: both; 
  -moz-animation-timing-function: ease-in-out; 
  -webkit-animation-duration: 0.5s; 
  -moz-animation-duration: 0.5s; 
  -ms-animation-duration: 0.5s; 
  -o-animation-duration: 0.5s; 
  animation-duration: 0.5s; 
}

@-webkit-keyframes fadeInUp { 0% { opacity: 0; 
  -webkit-transform: translateY(20px); 
}
  100% { opacity: 1; 
    -webkit-transform: translateY(0); 
  } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; 
  -moz-transform: translateY(20px); 
}
  100% { opacity: 1; 
    -moz-transform: translateY(0); 
  } }
@-o-keyframes fadeInUp { 0% { opacity: 0; 
  -o-transform: translateY(20px); 
}
  100% { opacity: 1; 
    -o-transform: translateY(0); 
  } }
@keyframes fadeInUp { 0% { opacity: 0; 
  transform: translateY(20px); 
}
  100% { opacity: 1; 
    transform: translateY(0); 
  } }

.fadeInUp { 
  -webkit-animation-name: fadeInUp; 
  -moz-animation-name: fadeInUp; 
  -o-animation-name: fadeInUp; 
  animation-name: fadeInUp; 
}

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

    .slider-section {
      height: 100%;
      min-height: 400px;
      width: 100%;
      position: relative;
      color: #fff;
      background: #000000;
    }
    
  	.skillsimage {
      background-attachment: scroll;
    }}

@media only screen and (max-width: 768px) { .navbar-flat li { display: inline-block; 
  } }

@media only screen and (max-width: 765px) { .navbar-brand { display: block !important; 
}

  .navbar-flat li { 
    display: inline; 
  }
  .timeline { 
    background-position: 38px top; 
  }
  .timeline li, .timeline .odd { 
    margin: 0px 0 20px 43px; 
    width: 85%; 
  }
  .timeline .point, .timeline .odd .point { 
    left: -32px; 
    right: auto; 
  }
  .timeline .timestamp, .timeline .bubble { 
    float: left; 
  }
  .timeline .bubble, .timeline .odd .bubble { 
    margin: 0px 0 0 30px; 
    width: 80%; 
    padding: 22px 30px 25px 32px; 
  }
  .timeline .bubble-arrow { 
    background-position: right top; 
    left: -10px; 
    right: auto; 
  }