/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

body{
  background-image: url(../img/oorban.jpg);
 background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

main{
  background-color:rgba(0, 0, 0, .65)
}

main section.container p{
  padding: .5rem;
}

nav .brand-logo{
  width: 90%;
  font-size: 1.9rem;
}

#index-banner h1{
  letter-spacing: 2px;
  margin-top: 7rem;
}

#index-banner h3{
  letter-spacing: 8px;
  font-weight: 200;
  margin-bottom: 7rem;
  margin-top: 3rem;
}

#index-banner h5{
  margin-bottom: 7rem;
}

#companyActivity div.row{
  margin: 0;
  padding: 0;
}

#companyActivity div.activity{
  position: relative;
  padding: 0;
  margin-bottom: 5rem;
}


.figcaptionWrapper{
  position: absolute;
  bottom:0;
  left: 0;
  width: 100%;
  height: 20%;
  opacity: .95;
}

#companyActivity figcaption{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  font-size: 1.7rem;
  color: #fff;
}

#filterBlue{
  background-color:rgba(66, 165, 245, .6);
}

#filterGreen{
  background-color:rgba(102, 187, 106, .6);
}

#filterRed{
  background-color:rgba(239, 83, 80, .6);
}

#filterOrange{
  background-color:rgba(255, 167, 38, .6);
}

#filterPurple{
  background-color:rgba(171, 71, 188, .6);
}

#filterIndigo{
  background-color:rgba(92, 107, 192, .6);
}

#filterLime{
  background-color:rgba(212, 225, 87, .6);
}

#btnMail h4{
  font-weight: 200;
  margin-top: 2rem;
}

#download-button{
  margin: 4rem;
}

footer #socialIcon{
  padding: 2rem;
}

footer h6{
  font-weight: 200;
  line-height: 150%;
}

footer#mainFooter,
div#salesDescription{
  background-color: rgba(239, 83, 80, .6);
}

footer#mainFooter #socialIcon i,
footer#salesFooter #socialIcon i{
  padding: .5rem;
  color: #ff5252;
}

footer#mainFooter #socialIcon i:hover,
footer#salesFooter #socialIcon i:hover{
  color: #c62828;
}

footer#salesFooter,
footer#projectsFooter,
footer#coursesFooter,
footer#uxFooter,
footer#outsorcingFooter,
footer#contactFooter{
  background-color:transparent;
}


div#projectsDescription{
  background-color:rgba(66, 165, 245, .6);
}

footer#projectsFooter #socialIcon i{
  padding: .5rem;
  color: #1565C0;
}

footer#projectsFooter #socialIcon i:hover{
  color: #40c4ff;
}

div#coursesDescription{
  background-color:rgba(171, 71, 188, .6);
}

footer#coursesFooter #socialIcon i{
  padding: .5rem;
  color: #6a1b9a;
}

footer#coursesFooter #socialIcon i:hover{
  color: #e040fb;
}

div#uxDescription{
  background-color:rgba(255, 167, 38, .6);
}

footer#uxFooter #socialIcon i{
  padding: .5rem;
  color: #ef6c00;
}

footer#uxFooter #socialIcon i:hover{
  color: #ffab40;
}

div#outsorcingDescription{
  background-color:rgba(102, 187, 106, .6);
}

footer#outsorcingFooter #socialIcon i{
  padding: .5rem;
  color: #2E7D32;
}

footer#outsorcingFooter #socialIcon i:hover{
  color: #69f0ae;
}

div#contactDescription{
  background-color:rgba(92, 107, 192, .6);
}

footer#contactFooter #socialIcon i{
  padding: .5rem;
  color: #1a237e;
}

footer#contactFooter #socialIcon i:hover{
  color: #8c9eff;
}

div#contactDescription #socialIcon i{
  padding: .2rem;
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

@media only screen and (max-width: 600px) {
  
  #companyActivity div.activity{
    margin-bottom: 4rem;
  }
  
  
  nav .brand-logo{
    width: 95%;
    font-size: 1rem;
  }

  #index-banner h1{
    font-size: 3rem;
    margin-top: 4rem;
  }

  #index-banner h3{
    font-size: 2rem;
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px){
  nav .brand-logo{
    width: 90%;
    font-size: 1.3rem;
  }

  #index-banner h1{
    font-size: 3.5rem;
    margin-top: 4rem;
  }

  #index-banner h3{
    font-size: 2.2rem;
    margin-bottom: 4rem;
  }
}