/*** General Styles ***/

body {
  font-family: 'Quicksand', sans-serif;
  padding: 0;

  padding-top: 60px;}

section,
div,
footer {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  padding: 0;
  margin: 0;
  width: 100%;
}

.inner-wrapper { /* This is the wrapper for the content to prevent extreme content width in larger displays */
  max-width: 1170px;
  padding: 0 20px;
  margin: auto;
}

/*** General Styles end ***/


/*** Typography ***/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Marvel', sans-serif;
  line-height: normal;
  font-weight: 700;
  letter-spacing: 5px;
}

h1 {
  font-size: 80px;
  margin: 60px 0px;
}

h2 {
  
}

h3 {
  
}

h4 {
  
}

h5 {
  
}

h6 {
  
}

.main-title { /* This is the main title used at the beginning of each region */
  margin-top: 0px;
  text-align: center;
  color: inherit;
}

.subtitle { /* This is the subtitle used after the main-title */
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 0;
  margin-top: 0px;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 400;
  color: inherit;
}

.with-subtitle {
  margin-bottom: 30px;
}

.without-subtitle {
  margin-bottom: 120px;
}

/*** Typography end ***/

/*** Links ***/

a,
a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
}

/*** Links end ***/

/*** Regions ***/


#services,
#portfolio,
#team,
footer {
  position: relative;
  width: 100%;
  min-height: 600px;
  padding: 40px 0px 100px;
}

.bg-top {
   background: url('../img/logo.png') center 507px no-repeat; /* You can find more images inside the folder img/backgrounds */
}



footer {
  padding: 100px 0px 75px;
}

/*** Regions end ***/


/*** Features ***/

/* Generics */
.border-circle {
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* header */
.logo {
  text-align: center;
  position: relative;
  background-color: rgba(40,40,40,0.5);
  width: 250px;
  height: 250px;
  margin: 60px 0 0;
}

.logo h1 {
  margin: 0;
  font-weight: 300;
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 0;
}

.slogan {
  margin: 60px 0 0;
  font-weight: 400;
  letter-spacing: 0;
}

/* Panel 1 */
.panel1 {
  position: relative;
}

.panel1 .panel-item {
  position: relative;
  margin: 0 auto;
  padding: 10px;
  width: 220px;
  height: 220px;
  border-width: 4px;
  border-style: solid;
  border-color: inherit;
}

.panel1 .panel-icon {
  position: absolute;
  font-size: 80px;
  top: 50%;
  left: 50%;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.3s, top 0.3s, font-size 0.3s;
     -moz-transition: opacity 0.3s, top 0.3s, font-size 0.3s;
       -o-transition: opacity 0.3s, top 0.3s, font-size 0.3s;
          transition: opacity 0.3s, top 0.3s, font-size 0.3s;
}

.panel1 .panel-item:hover .panel-icon {
  opacity: 0;
  top: 60%;
  font-size: 50px;
}

.panel1 .panel-info {
  position: relative;
  text-align: center;
  opacity: 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
     -moz-transition: opacity 0.3s, -moz-transform 0.3s;
       -o-transition: opacity 0.3s, -o-transform 0.3s;
          transition: opacity 0.3s, transform 0.3s;
}

.panel1 .panel-item:hover .panel-info {
  position: relative;
  text-align: center;
  opacity: 1;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}

.panel1 .panel-item h3 {
  margin-top: 30px;
  margin-bottom: 35px;
  text-transform: uppercase;
}

.panel1 .panel-item.border-circle h3 {
  margin-top: 45px;
  margin-bottom: 25px;
}

/* Portfolio items 1 */
.portfolio1 {
  position: relative;
  margin-top: 30px;
}

.portfolio1:first-child {
  margin-top: 0px;
}

.portfolio1 .portfolio-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.portfolio1 .portfolio-image {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
       -o-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

.portfolio1 .portfolio-item:hover .portfolio-image,
.portfolio1 .portfolio-item.active .portfolio-image {
  opacity: 0.5;
}

.portfolio1 .portfolio-link,
.portfolio1 .portfolio-project {
  cursor: pointer;
  position: absolute;
  text-align: center;
  min-width: 120px;
  top: 50%;
  left: 50%;
  padding: 10px 20px;
  color: white;
  border-width: 2px;
  border-style: solid;
  border-color: inherit;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
       -o-transition: opacity 0.3s;
          transition: opacity 0.3s;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.portfolio1 .portfolio-item:hover .portfolio-link,
.portfolio1 .portfolio-item:hover .portfolio-project {
  opacity: 1;
}

/* Portfolio description */
.portfolio-description {
  width: 100%;
  position: relative;
  padding: 50px;
  margin-top: 30px;
  display: none;
}

.portfolio-description .portfolio-image {
  position: relative;
}

.portfolio-description .portfolio-info {
  position: relative;
}

.portfolio-description h3 {
  margin-top: 0px;
}

.portfolio-description .portfolio-project {
  display: inline-block;
  text-align: center;
  min-width: 160px;
  margin-top: 20px;
  padding: 10px 30px;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
}

.portfolio-description .close-link {
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 20px;
  line-height: normal;
}

/* Team 1 */
.team1 {
  position: relative;
}

.team1 .team-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px;
}

.team1:first-child .team-item {
  padding-top: 0px;
}

.team1:last-child .team-item {
  padding-bottom: 0px;
}

.team1 .team-content {
  position: relative;
  width: inherit;
  height: inherit;
  background-color: transparent;
  -webkit-transition: background-color 0.3s;
     -moz-transition: background-color 0.3s;
       -o-transition: background-color 0.3s;
          transition: background-color 0.3s;
}

.team1 img {
  display: block;
  -webkit-transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
       -o-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

.team1 .team-info {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;

  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
       -o-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

.team1 .team-info h2 {
  letter-spacing: 5px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.team1 .team-info p {
  margin-bottom: 35px;
  color: #fff;
  text-shadow: 1px 1px 1px #111;
}

.team1 .team-social i {
  font-size: 20px;
  padding: 0 10px;
}

.team1 .team-social a {
  font-size: 30px;
  padding: 0 10px;
}

.team1 .team-social a:hover {
  color: #ee3124;
  -webkit-transition: color 0.3s;
     -moz-transition: color 0.3s;
       -o-transition: color 0.3s;
          transition: color 0.3s;
}

.team1 .team-content:hover {
  background-color: #404040;
}

.team1 .team-content:hover .team-info {
  opacity: 1;
}

.team1 .team-content img {
  opacity: 0.6;
  border: 8px solid #404040;
}
.team1 .team-content:hover img {
  opacity: 0.9;
   border: 8px solid #ee3124;
}

/* Contact */
.contact-slogan {
  margin-top: 0px;
  margin-bottom: 75px;
}

.contact-email {
  margin-bottom: 75px;
  font-size: 60px;
  line-height: normal;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  display: inline-block;
  word-break: break-all;
}

.contact-social .icon-stack {
  font-size: 50px;
  margin: 0px 20px;
}

.contact-social a {
  display: inline-block;
}

.contact-copyright {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  margin-top: 100px;
  margin-bottom: 0px;
}

/* Social networks */
.contact-social .icon-stack [class*="bg-"] {
  -webkit-transition: color 0.3s;
     -moz-transition: color 0.3s;
       -o-transition: color 0.3s;
          transition: color 0.3s;
}

.contact-social .icon-stack:hover [class*="bg-"] {
  color: #404040;
}

.bg-facebook  { color: #3a589b; }
.bg-dribbble  { color: #ea4c88; }
.bg-twitter   { color: #03ABEA; }
.bg-tumblr    { color: #385774; }
.bg-google    { color: #d34836; }
.bg-flickr    { color: #0063dc; }
.bg-github    { color: #eeb999; }
.bg-youtube   { color: #b50505; }
.bg-linkedin  { color: #03659a; }
.bg-pinterest { color: #C92228; }

/*** Features end ***/


/* Background Colors to use the regions */

.bg-color-white        { background-color: #ffffff; }
.bg-color-grayDark1    { background-color: #404040; }
.bg-color-grayDark2    { background-color: #494949; }
.bg-color-grayLight1   { background-color: #f2f2f2; }
.bg-color-grayLight2   { background-color: #f6f6f6; }
.bg-color-turquoise    { background-color: #1abc9c; }
.bg-color-greenSea     { background-color: #16a085; }
.bg-color-emerald      { background-color: #2ecc71; }
.bg-color-nephritis    { background-color: #27ae60; }
.bg-color-sunFlower    { background-color: #f1c40f; }
.bg-color-orange       { background-color: #f39c12; }
.bg-color-carrot       { background-color: #e67e22; }
.bg-color-pumpkin      { background-color: #d35400; }
.bg-color-peterRiver   { background-color: #3498db; }
.bg-color-belizeHole   { background-color: #2980b9; }
.bg-color-alizarin     { background-color: #e74c3c; }
.bg-color-pomegranate  { background-color: #c0392b; }
.bg-color-amethyst     { background-color: #9b59b6; }
.bg-color-wisteria     { background-color: #8e44ad; }
.bg-color-clouds       { background-color: #ecf0f1; }
.bg-color-silver       { background-color: #bdc3c7; }
.bg-color-wetAsphalt   { background-color: #34495e; }
.bg-color-midnightBlue { background-color: #2c3e50; }
.bg-color-concrete     { background-color: #95a5a6; }
.bg-color-asbestos     { background-color: #7f8c8d; }
.bg-color-salmon       { background-color: #FF6F69; }
.bg-color-blueCream    { background-color: #81A8B8; }
.bg-color-greenCream1  { background-color: #79BD9A; }
.bg-color-greenCream2  { background: url('../img/backg1.gif') top left repeat; }

.bg-color-yellowCream  { background-color: #fff1d4; }

/* Text Colors to use in the regions */

.text-color-white      { color: #ffffff; }
.text-color-grayDark1  { color: #fff; }
.text-color-grayDark2  { color: #888888; }
.text-color-grayLight1 { color: #cdcdcd; }
.text-color-grayLight2 { color: #ededed; }
.text-color-grayLight3 { color: #f6f6f6; }


/* Responsive */
@media (max-width: 767px) {
  
  /*** Regions ***/

  #services,
  #portfolio,
  #team {
    padding: 100px 0px 150px;
  }
  

  
  /*** Features ***/

  /* Panel 1 */
  .panel1 .panel-item {
    margin-bottom: 60px;
  }
  
  .panel1 .span4:last-child .panel-item {
    margin-bottom: 0px;
  }
  
  /* Portfolio items 1 */
  .portfolio1 {
    margin-top: 0px;
  }
  
  .portfolio1 .portfolio-item {
    margin-top: 30px;
  }
  
  .portfolio1:first-child .span4:first-child .portfolio-item {
    margin-top: 0px;
  }
  
  /* Team 1 */
  .team1:first-child .team-item {
    padding-top: 40px;
  }
  
  .team1:first-child .span6:first-child .team-item {
    padding-top: 0px;
  }

  .team1:last-child .team-item {
    padding-bottom: 40px;
  }
  
  .team1:last-child .span6:last-child .team-item {
    padding-bottom: 0px;
  }
  
}