html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  color: #ffffff;
}

a:hover,
a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
}

::selection {
color: #000;
background:#fff;
}

::-moz-selection {
color: #000;
background:#fff;
}

img {
  -moz-user-select: none;
  /*-webkit-user-select: none;*/
  -ms-user-select: none;
  user-select: none;
  /*-webkit-user-drag: none;*/
  user-drag: none;
}

.valign {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section {
  position: relative;
}

.container {
  position: relative;
}

section .container {
  padding-top: 150px;
  padding-bottom: 100px;
}

.row {
  z-index: 3;
  position: relative;
}

.separator {
  width: 170px;
  max-width: 170px;
  margin-top: 120px;
  margin-bottom: 100px;
}

.lineSeparator {
  width: 60px;
  max-width: 60px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.preloaderLogo {
  min-width: 200px;
  max-width: 300px;
  width: 15%;
}

.black-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.8)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.sectionIntro h2 span {
  padding: 25px 50px;
  border: solid 10px #282828;
}

.sectionIntro p {
  margin-top: 100px;
}

.container {
  z-index: 2;
  overflow: hidden;
}

/*parallax letters*/

/*buttons*/

.col-centered {
  float: none;
  margin: 0 auto;
}



/*NAVBAR */

/*TEXT STYLES*/

h1,
h2,
h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 50px;
  text-transform: uppercase;
  letter-spacing: 20px;
}

h2 {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 15px;
  padding: 0px;
    margin: 0px;
}

h3 {
  font-family: 'Droid Serif', serif;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 24px;
  color: #ffffff;
}

h4 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 8px;
}

p {
  font-family: 'Droid Serif', serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #4c4c4c;
}

p.bold {
  font-weight: 700;
}

/*<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->*/

/*<!--Intro -->*/

/*<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->*/

#intro h1 {
  color: white;
}

.introLogo {
  position: relative;
  width: 240px;
  height: auto;
  margin-bottom: 20px;
}

#intro .separator {
  margin-top: 30px;
  margin-bottom: 30px;
}

/*<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->*/

/*<!--Text Separator -->*/

/*<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->*/

#text-separator .container-fluid .col-md-6 {
  padding-left: 50px;
}

#text-separator {
  background-color: #1d1d1d;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 15px;
  overflow: hidden;
}

#text-separator h2 {
  color: white;
  z-index: 100;
  position: relative;
}

#text-separator p {
  color: #e7e7e7;
  z-index: 100;
  position: relative;
}

.portfolioIntro {
  height: 300px;
}

.portfolioIntro h2 {
  padding-top: 120px;
  margin-top: 0;
}

.portfolioIntro h2 span {
  color: white;
  padding: 25px 50px;
  border: solid 10px white !important;
}

.portfolioIntro {
  position: relative;
  z-index: 2;
  background: url('img/portfolioIntro.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 50% 0, 50% 0, 50% 0, 50% 0;
  background-repeat: repeat, repeat, repeat ,no-repeat;
}

#portfolio .black-overlay {
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.gallery {
  max-width: 100%;
}

.gallery-inner .caption {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 40, 40, 0.70);
  -webkit-transition: all 1s ease-in-out;
}

.gallery-inner:hover .caption {
  opacity: 1;
}

.gallery-inner .caption-heading {
  width: 100%;
  height: 120px;
}

.gallery-inner .caption-heading,
.gallery-inner .caption-heading p {
  color: white;
}

.gallery-inner .caption-heading p {
  font-size: 12px;
  font-style: italic;
}

.gallery {
  background: #ffffff;
  min-height: 500px;
}

/* ---- isotope ---- */

/* clear fix */

.gallery:after {
  content: '';
  display: block;
  clear: both;
}

/* 5 columns, percentage width */

.gallery .gallery-inner,
.gallery .grid-sizer {
  width: 33.333%;
  /* change here the column width */
}

.gallery .gallery-inner {
  float: left;
  height: auto;
  background: #4c4c4c;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

.galleryImage {
  /*min-width:100%;*/
  width: 100%;
  height: auto;
}

/* Overlay style */

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  z-index: 3000;
  overflow-y: scroll;
}

.overlay-section {
  position: static;
}

/* Effects */

.overlay-slidedown {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
  transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-close img {
  cursor: pointer;
}

.overlay-close {
  padding: 30px;
}

#contact {
  background: white;
}

label {
  width: 100%;
}

input:focus,
textarea:focus {
  outline: 0;
}

label input,
textarea {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

#contact_form #name,
#contact_form #email,
#contact_form #phone {
  height: 50px;
  padding: 10px;
  padding-bottom: 0px;
  border: 0;
  background: transparent;
  border-bottom: 5px solid #282828;
  border-left: 5px solid #282828;
  font-size: 10px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  color: #282828;
  letter-spacing: 1px;
}

#contact_form #comments {
  height: 200px;
  padding: 10px;
  margin-top: 30px;
  padding-bottom: 0;
  border: 0;
  background: transparent;
  border-bottom: 5px solid #282828;
  border-left: 5px solid #282828;
  font-family: 'Montserrat', sans-serif;
  color: #282828;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#footer .bottomLine {
  padding: 50px;
  margin: 0 auto;
  background-color: #222222;
}

#footer .bottomLine p {
  color: #a5a5a5;
  font-size: 12px;
}

.bottomLine .footerSocialIcons {
  padding: 20px;
}

.footerSocialIcons {
  list-style: none;
}

.footerSocialIcons li {
  display: inline;
  margin: 0 10px;
}

.footerSocialIcons li a {
  color: #a5a5a5;
}

.bottomLine p {
  display: inline;
}

ul {
  line-height: 24px;
}