/* --------------------------------------
=========================================
LUKA - Creative Portfolio / Photography Template
Version: 1.0
Designed By: ilmosys
=========================================
-----------------------------------------

1. GLOABL-CSS
	1.1 GENERAL-CSS
	1.2 TYPOGRAPHY
	
2. HEADER SECTION

3. SCREEN SHOT SECTION	

4. BUY IT SECTION

5. FOOTER SECTION

6. RESPONSIVE FIX
    7.1 FOR MAXIMUM WIDTH 320PX 
	7.2 FOR MAXIMUM WIDTH 768PX 
	
-----------------------------------------*/

/* --------------------------------------
=========================================
   1. GLOABL - CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
@font-face {
  font-family: 'Montserrat Black';
  src:  url('../fonts/montserrat-black-webfont.eot');
  src:  url('../fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/montserrat-black-webfont.woff') format('woff'), 
        url('../fonts/montserrat-black-webfont.svg') format('svg');
}

@font-face {
  font-family: 'Montserrat Light';
  src:  url('../fonts/montserrat-light-webfont.eot');
  src:  url('../fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/montserrat-light-webfont.woff') format('woff'), 
        url('../fonts/montserrat-light-webfont.svg') format('svg');
}

@font-face {
  font-family: 'Montserrat Bold';
  src:  url('../fonts/montserrat-bold-webfont.eot');
  src:  url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/montserrat-bold-webfont.woff') format('woff'), 
        url('../fonts/montserrat-bold-webfont.svg') format('svg');
}
/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

body {
	background: #eeeff1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
	line-height: 1.5;
	color: #8f96a9;
}
.button {
	background-color: #56AD48;
	color: #ffffff;
	border: 0;
	border-radius: 70px;
	padding: 12px 20px;
	letter-spacing: 2px;
    text-transform: uppercase;
}
.button:hover {
	background-color:transparent;
  color: #56AD48;
  border:0;
  border-radius: 0px;
  padding: 12px 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.button.disable {
	color: #fff;
	background: #bcbcbc none repeat scroll 0 0;
}
.btn {
	vertical-align:baseline;
}
a{
	color:#FFF;
}
iframe {
	border: none;
}
.header-button-second {
	background-color:#FFF;
	color: #56AD48;
	font-size: 14px;
}
/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/
	
h1, h2, h3, h4, h5, h6 p {
	color: #303030;
}
h1 {
	font-size: 45px; /* PIXEL FALLBACK */
}
h2 {
	font-size: 36px; /* PIXEL FALLBACK */
	font-size: 3.6rem;
	font-weight: bold;
	margin-top: 0;
}
h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px; /* PIXEL FALLBACK */
	font-size: 2.2rem;
	font-weight: bold;
}
h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	font-weight: bold;
	text-transform: uppercase;
}
h5{
	color:#FFF;
	font-weight:100;
	font-size:20px;
	line-height:28px;
	letter-spacing:2px;
	margin-top: 15px;
	margin-bottom:15px;
}

/*---------------------------------------
   2.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes animate {
  0% { 
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}


/* --------------------------------------
=========================================
   3. HEADER SECTION
=========================================
-----------------------------------------*/
header {
	background: url(../img/main_bg.jpg);
	background-position: center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
	min-height: 700px;
	text-align: center;
	position: relative;
	padding: 0 0 100px;
}
.logo {
	margin-top: 110px;
	font-family: 'Montserrat Black', sans-serif;
  	font-weight: 900;
  	font-size: 40px;
  	letter-spacing: 1px;
  	color:#FFF;
}
a .logo:hover {
	text-decoration:none;
}
header h1 {
	color: #fff;
	font-weight: normal;
}
header h3 {
	color: #fff;
	font-size: 48px; /* PIXEL FALLBACK */
	font-weight: normal;
	margin-top: 50px;
}
.down-arrow {
	bottom: -32px;
	position: absolute;
	left: 0;
	right: 0;
}
.down-arrow img{
	cursor: pointer;
	}
.header-button {
	margin: 25px 15px 0;
	font-size: 14px;
}
/* --------------------------------------
=========================================
   4. SCREEN SHOT SECTION
=========================================
-----------------------------------------*/
#screen-shot {
	padding: 100px 0;
	background: #fff;
	text-align: center;
}
#screen-shot h5 {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	color: #8f96a9;
}
.screen-shot {
	margin-top: 30px;
}
.screen-shot img {
	width: 100%;
	max-width: 540px;
}
.live-preview {
	width: 100%;
	margin: 25px 0 0;
}
/* --------------------------------------
=========================================
   5. BUY IT SECTION
=========================================
-----------------------------------------*/	
#buy-it {
	background: url(../img/main_bg.jpg);
	text-align: center;
	padding: 100px 0;
}
#buy-it h2 {
	color: #fff;
	font-weight: normal;
}
#buy-it h5 {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	color: #fff;
	margin: 25px 0;
}
.buy-button {
	width: 100%;
	max-width: 350px;
	line-height: 66px;
}
/* --------------------------------------
=========================================
  6. FOOTER SECTION
=========================================
-----------------------------------------*/		
footer {
	background: #000;
	padding: 50px 0;
	text-align: center;
}
footer p {
	font-size: 14px; /* PIXEL FALLBACK */
	font-size: 1.4rem;
	color: #fff;
}
footer p a {
	color: #fff;
	text-decoration: none;
}
/* --------------------------------------
=========================================
   7. RESPONSIVE FIX
=========================================
-----------------------------------------*/	
/*---------------------------------------
   7.1 FOR MAXIMUM WIDTH 320PX              
-----------------------------------------*/

@media (max-width: 350px) {
button {
	font-size: 14px; /* PIXEL FALLBACK */
	font-size: 1.4rem;
}
}
/*---------------------------------------
   7.2 FOR MAXIMUM WIDTH 768PX              
-----------------------------------------*/	
@media (max-width: 768px) {
.logo {
	margin-top: 50px;
}
}