/*
Theme Name: Alessio Atzeni  - Metrize Icons
Theme URI: http://www.alessioatzeni.com/metrize-icons
Author: Alessio Atzeni
Author URI: http://www.alessioatzeni.com

All work is the property of Alessio Atzeni and the respective owners.
Copyright 2013 Alessio Atzeni. All Rights Reserved.
*/


/* ==================================================
   Basic Styles
================================================== */

html{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	background:#FFFFFF;
	color:#55606A;
	font-weight:300;
	font-size:18px;
	font-family: 'Open Sans', sans-serif;
	line-height:30px;
	overflow-x: hidden;
}


a{
	color:#4c4f55;
	text-decoration: none;
	font-weight:bold;
	cursor: pointer;
	
	-webkit-transition: color 0.1s linear 0s;	
	   -moz-transition: color 0.1s linear 0s;
		 -o-transition: color 0.1s linear 0s;
		    transition: color 0.1s linear 0s;
}

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

a img {
	border: none;
}

a > img {
	vertical-align: bottom;	
}

strong {
  	font-weight: bold;
}

p {
	margin: 0 0 30px;
}

.area{
	margin-bottom:40px;
}

.align_left{
	float:left;
	margin:0 25px 0 0px!important;
}

.align_right{
	float:right;
	margin:0 0 0 25px!important;
}

.text_align_left {
	text-align: left;
}

.text_align_center {
	text-align: center;
}

.text_align_right {
	text-align: right;	
}

.color-text {
	color:#f93c43;
}

.highlight{
	padding:2px;
	background:#f93c43;
	color:#fff;
}

.through{
	text-decoration:line-through;
}

input, button, select, textarea {
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
	outline: 0;
}

input:focus, 
textarea:focus,
input[type="text"]:focus {
	outline: 0;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #AEAEAE;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #AEAEAE;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #AEAEAE;
}

/* ==================================================
   Content
================================================== */

#content {
	padding: 100px 0 70px 0;
}

/* ==================================================
   Typography
================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
	margin:0 0 20px 0;
	color:#4c4f55;
	font-weight:300;
	font-family: 'Open Sans', sans-serif;
	line-height:1.5em;
}

h1{
	font-size:48px;
}

h2{
	font-size:36px;
}

h3{
	margin-bottom: 10px;
	font-size:24px;
}

h4{
	font-size:20px;
}

h5{
	font-size:18px;
}

h6{
	font-size:16px;
}


/* ==================================================
   Margin Bottom Sets
================================================== */

.margin-0{
	margin-bottom:0 !important;
}

.margin-10{
	margin-bottom:10px !important;
}

.margin-15{
	margin-bottom:15px !important;
}

.margin-20{
	margin-bottom:20px !important;
}

.margin-30{
	margin-bottom:30px !important;
}

.margin-40{
	margin-bottom:40px !important;
}

.margin-50{
	margin-bottom:50px !important;
}

.margin-60{
	margin-bottom:60px !important;
}

.margin-70{
	margin-bottom:70px !important;
}

.margin-80{
	margin-bottom:80px !important;
}

.sep {	
	margin: 75px 0;
	text-align: center;
}

.sep .separator {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(../../../img/seperator.png) no-repeat;
	vertical-align: text-top;
}

/* ==================================================
   Header
================================================== */

header {
	padding: 8em 0;
	background-color: #435768;
	text-align: center;
}

.logo-icon {
	display: inline-block;
	width: 128px;
	height: 128px;
	background: url(../img/logo.png) no-repeat;	
	text-indent: -99999px;
}

.version-bundle {
	position: absolute;
	width: 32px;
	height: 32px;
	
	font-size: 14px;
	font-weight: 400;
	line-height: 32px;
	
	background: #8A99A7;
	color: #FFFFFF;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;	
}

header h2 {
	color: #FFFFFF;
	margin: 30px 0;
	font-size: 48px;
	line-height: 1.5em;
}

/* ==================================================
   Content
================================================== */

.social-bar {
	width: 100%;
	background: #354350;
	text-align: right;
	padding: 15px 0 10px;	
}

.social-bar ul {
	margin: 0;
	padding: 0;
}

.social-bar ul li {
    display: inline-block;
    list-style: none;
    margin: 0 10px;
	max-width: 80px;
}

/* ==================================================
   Footer
================================================== */

footer {
	border-top: 1px solid #F1F1F1;
    padding: 70px 0 30px 0;
    text-align: center;	
}

footer #social ul {
	margin: 0;
	padding: 0;
}

footer #social ul li {
	display: inline-block;
	margin-left: 30px;
	list-style: none;
}

footer #social ul li:first-child {
	margin-left: 0;
}

footer #social ul li a {
	display: block;
	width: 70px;
	height: 70px;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background: transparent;
	
	-webkit-transition: all 400ms ease-out 0s;	
	   -moz-transition: all 400ms ease-out 0s;
		 -o-transition: all 400ms ease-out 0s;
		    transition: all 400ms ease-out 0s;
		  
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
			transform: rotateY(180deg);
	
	-webkit-perspective: 1000px; 
       -moz-perspective: 1000px;  
        -ms-perspective: 1000px;  
            perspective: 1000px;	
}

footer #social ul li a span {
	margin: 0;
	color: #55606a;
	font-size: 32px;
	line-height: 70px;
	
	opacity: 0.3;
	filter: alpha(opacity=30);
	
	-webkit-transition: all 400ms ease-out 0s;	
	   -moz-transition: all 400ms ease-out 0s;
		 -o-transition: all 400ms ease-out 0s;
		    transition: all 400ms ease-out 0s;
		  
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
			transform: rotateY(180deg);
	
	-webkit-perspective: 1000px; 
       -moz-perspective: 1000px;  
        -ms-perspective: 1000px;  
            perspective: 1000px;
}

footer #social ul li:hover a,
footer #social ul li.active a {	
	-webkit-transform: rotateY(0deg);
	   -moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		    transform: rotateY(0deg);
}

footer #social ul li:hover a span,
footer #social ul li.active a span {

	color: #FFFFFF;
	opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transform: rotateY(0deg);
	   -moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
			transform: rotateY(0deg);
}

footer #social ul li:hover a.twitter,
footer #social ul li.active a.twitter {
	background-color: #00ACED;
}

footer #social ul li:hover a.dribbble,
footer #social ul li.active a.dribbble {
	background-color: #EA4C89;
}

footer #social ul li:hover a.forrst,
footer #social ul li.active a.forrst {
	background-color: #223F17;
}

footer #social ul li:hover a.behance,
footer #social ul li.active a.behance {
	background-color: #1478FF;
}

footer #social ul li:hover a.facebook,
footer #social ul li.active a.facebook {
	background-color: #3B5998;
}

footer #social ul li:hover a.google-plus,
footer #social ul li.active a.google-plus {
	background-color: #DD4B39;
}

footer #social ul li:hover a.linkedin,
footer #social ul li.active a.linkedin {
	background-color: #50A1CB;
}

footer #social ul li:hover a.envato,
footer #social ul li.active a.envato {
	background-color: #9ABB70;
}

footer #social ul li:hover a.zerply,
footer #social ul li.active a.zerply {
	background-color: #9DBC7A;
}

footer #credits {
	margin-top: 50px;
	font-size: 14px;	
}

footer #credits > p{
	margin-bottom: 0;
}

footer #credits a {
	font-weight: 600;	
}

/* ==================================================
   Article / Page
================================================== */

.post {
	position: relative;
	margin-top: 50px;
	padding-top: 60px;
	border-top: 1px solid #F1F1F1;
}

.post:first-child {
	margin: 0;
	padding: 0;
	border-top: none;	
}

.entry-title,
.entry-title a {
	margin-bottom: 5px;
	color: #4c4f55;
	font-weight: 300;
}

.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
	color: #FF7B3A;	
}

.post-thumb {
	margin-bottom: 30px;	
}

.post-thumb a {
	position: relative;
	display: block;	
}

.post-thumb img {
	display: block;
	width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.entry-meta {
	margin-bottom: 20px;	
}

.entry-meta, 
.entry-meta a {
	color: #AEAEAE;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 12px;	
}

.entry-meta a:hover,
.entry-meta a:active,
.entry-meta a:focus{
	color:#ff7b3a;
}

.entry-meta.entry-footer {
    padding-top: 20px;
}

.entry-meta .divider {
    margin: 0 6px;
}

.entry-content .more-link {
	display: block;	
}

.entry-content ul, ol, dl {
	margin-left: 30px;	
}

.entry-content ul {
	list-style-type: disc;	
}

.entry-content ol {
	list-style-type: decimal;	
}

.entry-content ul li,
.entry-content ol li {
	line-height: 40px;
}

.entry-action {
	overflow: hidden;
	margin: 50px 0;
	padding: 50px 0;
	border-top: 1px dashed #F1F1F1;
	border-bottom: 1px dashed #F1F1F1;	
}

.entry-action > div {
	float: left;
	width: 49%;
	text-align: center;
}

.box-image {
	margin-top: 20px;
	margin-bottom: 40px;
}

/* ==================================================
   Button
================================================== */

.button {
	display: inline-block;
  	padding: 14px;
	width: 160px;

  	-webkit-border-radius: 2px;
       -moz-border-radius: 2px;
          	border-radius: 2px;
  	background: #ff7b3a;
  	color: #FFFFFF;
  	vertical-align: middle;
  	text-align: center;
	font-weight: 600;
	font-size: 18px;
  	cursor: pointer;
			
	-webkit-transition: background 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s;
		    transition: background 0.1s linear 0s;
}

.button:hover,
.button:active,
.button:focus {
	background: #8a99a7;
	color: #FFFFFF;	
}

.button + .button {
	margin-left: 35px;	
}


/* ==================================================
   IE
================================================== */

.lt-ie9 #ie {
	padding: 100px 0;
}

.lt-ie9 footer {
	border-top: 1px solid #F1F1F1;
	opacity: 1;
	filter: alpha(opacity=100);
}

.lt-ie9 #jpreSlide,
.ie9 #jpreSlide {
	height: 16px !important;
	margin: -8px 0 0 -100px;	
}

/* ==================================================
   MediaQueries
================================================== */

@media (min-width: 768px) and (max-width: 979px) {
	footer {
		padding-top: 75px;	
	}
	
	footer #social ul li {
		margin-left: 15px;
	}
	
	footer #social ul li a {
		width: 50px;
		height: 50px;
	}
	
	footer #social ul li a span {
		font-size: 24px;
		line-height: 50px;
	}
}

@media (max-width: 767px) {
	header,
	footer,
	.social-bar{
		margin-right: -20px;
		margin-left: -20px;
	}

	header,
	footer,
	.social-bar{
		padding-right: 20px;
		padding-left: 20px;
	}
	
	#content {
		padding: 75px 0;	
	}
	
	footer {
		padding-top: 75px;	
	}
	
	footer #social ul li {
		margin-left: 15px;
	}
	
	footer #social ul li a {
		width: 50px;
		height: 50px;
	}
	
	footer #social ul li a span {
		font-size: 24px;
		line-height: 50px;
	}
}

@media (max-width: 480px) {
	body {
		overflow-x: hidden;	
	}
	
	header {
		padding-top: 5em;
		padding-bottom: 5em;
	}
	
	header h2 {
		font-size: 44px;	
	}
	
	.sep {
		margin: 45px 0;	
	}
	
	.social-bar {
		text-align: center;	
	}
	
	.button {
		padding: 14px 0;
		width: 100%;	
	}
	
	.button + .button {
		margin-top: 30px;
		margin-left: 0;	
	}	
	
	footer {
		padding-top: 45px;
		padding-bottom: 0;
	}
	
	footer #social ul li:first-child,
	footer #social ul li {
		margin: 15px;
	}
	
	.entry-action > div {
		float: none;
		width: 100%;	
	}
	
	.entry-action > div + div {
		margin-top: 25px;	
	}
	
	.social-bar ul li {
		margin: 0 3px;	
	}
}


/* Retina Display */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
 	only screen and (-moz-min-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: 2dppx) {
		
		.sep .separator {
			background-image: url(../../../img/seperator_@2x.png);
			background-size: 24px 24px;
		}
		
		.logo-icon {
			background-image: url(../img/logo_@2x.png);
			background-size: 128px 128px;
		}
	}