/*
  Theme Name: Infinite Agency
  Theme URL: http://www.infiniteagency.com.au
  Author: Wiro Wiseso
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  background: #fff;
  color: #666666;
  font-family: "Dosis", sans-serif;
}
* {
	font-family: 'Dosis', sans-serif;
}
a {
  color: #31b58b;
  transition: 0.5s;
}

a:hover, a:active, a:focus {
  color: #31b58b;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Dosis", sans-serif;
  margin: 0 0 20px 0;
  padding: 0;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #03C4EB;
  color: #fff;
}
.bottom {
    bottom: 20px;
    color: #fff;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
	font-size: 16px;
}
.opa-80 {
    opacity: 0.8;
}
.green-btn-container {
  text-align: right;
}

.green-btn {
  font-size: 20px;
  display: inline-block;
  padding: 1em 2.5em;
  border-radius: 2px;
  transition: 0.5s;
  background: #31b58b none repeat scroll 0 0;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  border: 2px solid #31b58b;
}

.green-btn:hover {
  background: none;
  color: #31b58b;
}

.fa.fa-circle {
    color: #37bf9d;
    font-size: 7px;
    padding-right: 10px;
    vertical-align: middle;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Sections Common
--------------------------------*/
.section-title {
    color: #37bf9d;
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
	padding: 3em 0 1em 0;
	letter-spacing: 2px;
	font-weight: normal;
}

.section-description {
  text-align: center;
  margin-bottom: 40px;
  color: #424242;
}

/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
#hero {
  display: table;
  width: 100%;
  height: 100vh;
  background: url(../img/hero-bg.jpg) bottom center scroll;
  background-size: cover;
}

#hero .hero-logo {
  position: absolute;
  margin: auto;
  top: 70px;
  left: 0;
  bottom: 0;
  right: 0;
}

#hero .hero-logo img {
  max-width: 100%;
}

#hero .hero-container {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

#hero h1 {
  font-weight: 500;
  line-height: 48px;
  text-transform: uppercase;
  color: #fff;
  font-size: 35px;
  padding: 0 20px;
}
#hero .bottom {
	padding: 0 20px;
}
@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

#hero h2 {
  color: #999;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  #hero h2 {
    font-size: 24px;
    line-height: 26px;
    margin-bottom: 30px;
  }
}
/* Portfolio Section
--------------------------------*/
#portfolio {
  background: url(../img/panel2bg.jpg) no-repeat;
  background-position: top center;
  background-size: cover;
  padding: 0 0 80px;
}

#portfolio .portfolio-item {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 260px;
  width: 100%;
  display: table;
  overflow: hidden;
  margin-bottom: 30px;
}

#portfolio .portfolio-item .details {
  height: 260px;
  display: table-cell;
  vertical-align: bottom;
  transition: 0.3s;
  text-align: center;
}

#portfolio .portfolio-item .details span {
  display: block;
  color: #fff;
  font-size: 15px;
  margin-bottom: 20px;
}
.portfolio-item.item-1 {
	background-image: url(../img/tile1.png);
}
.portfolio-item.item-2 {
	background-image: url(../img/tile2.png);
}
.portfolio-item.item-3 {
	background-image: url(../img/tile3.png);
}
.portfolio-item.item-4 {
	background-image: url(../img/tile4.png);
}
.subscribe-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.subscribe-text {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
}
@media (max-width: 768px) {
  .subscribe-text, #portfolio .green-btn-container {
    text-align: center;
  }
}
/* Get Started Section
--------------------------------*/
#about {
  background: #fff url(../img/panel3bg.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 80px 0;
}
#about .section-title {
	padding: 1em 0;
}
#about .section-description {
	font-size: 20px;
}
/* Services Section
--------------------------------*/
#services {
  background: #000 url(../img/panel4bg.jpg) no-repeat;
  background-size: cover;
  padding: 80px 0 60px 0;
  background-position: center center;
  background-attachment: fixed;
}
#services .section-title {
	padding: 1em 0;
}
#services .service-item {
  margin-bottom: 20px;
}
#services .service-icon {
  float: left;
}
#services .service-title {
  margin-left: 250px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #fff;
  font-size: 20px;
}
#services .service-description {
  margin-left: 250px;
  line-height: 28px;
  color: #fff;
  font-size: 16px;
}
@media (max-width: 768px) {
	#services .service-icon {
		float: none;
		text-align: center;
		width: 100%;
	}
	#services .service-title {
		text-align: center;
		margin-left: 0;
		margin-top: 25px;
	}
	#services .service-description {
		text-align: center;
		margin-left: 0;
	}
}
/* Contact Section
--------------------------------*/
#contact {
  background: #fff;
  padding: 0;
}
#contact .section-title {
	text-align: left;
    padding-left: 15px;
    padding-top: 2em;
	margin-bottom: 0;
}
#contact .container {
	width: 100%;
	padding: 0;
	overflow: hidden;
}
#map {
  width: 100%;
  height: 600px;
  background-color: grey;
}
#map iframe {
    height: 100%;
    width: 100%;
}
.text-grey, .text-black {
	padding: 10px 10px 10px 1.5em;
	padding-left: 15px;
}
.text-grey {
    color: #8a8a8a;
    font-size: 20px;
}
.text-black {
    color: #000;
    font-size: 24px;
}
.icon {
    margin-right: 10px;
}
.email-1 {
    padding-right: 25px;
}
.email-1, .email-2 {
    display: inline-block;
}
.col-md-6.contact-content {
	padding-bottom: 2em;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #111;
  padding: 30px 0;
  color: #fff;
}
#footer .container {
	width: 98%;
	padding: 0;
	overflow: hidden;
}
.copyright, .links a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}
.copyright {
	float: left;
}
.links {
	float: right;
}
.links a:first-child {
	border-right: 1px solid #fff;
	padding-right: 10px;
}
.links a:last-child {
	padding-left: 10px;
}
.links a:hover {
	color: #37bf9d;
}

/* RETINA DISPLAY */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
	.portfolio-item.item-1 {
		background-image: url(../img/tile1@2x.png);
	}
	.portfolio-item.item-2 {
		background-image: url(../img/tile2@2x.png);
	}
	.portfolio-item.item-3 {
		background-image: url(../img/tile3@2x.png);
	}
	.portfolio-item.item-4 {
		background-image: url(../img/tile4@2x.png);
	}

}