article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture, source {
	display: block;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
:hover, :focus, :active {
	outline: none;
}
html, button, input, select, textarea {
	font-family: "Open sans", Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #000;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
body {
	font-size: 13px;
	line-height: 1.6;
	overflow-y: scroll;
	background-color: #f5f5f5;
	margin: 0;
}
a {
	color: #1976d2; 
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
	transition: color .2s ease;
	-moz-transition: color .2s ease;
	-webkit-transition: color .2s ease;
	-o-transition: color .2s ease;
}
a:hover, a:focus, a:active {
	color: #000;
	text-decoration: none;
}
p {
	margin: 0 0 1em;
}
p:last-child {
	margin-bottom: 0;
}
b, strong {
	font-weight: 700;
}
ul, ol {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}
figure, picture {
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: #000;
	margin: 0 0 1em;
}
h1 {
	font-size: 1.58em;
}
h2 {
	font-size: 1.43em;
}
h3 {
	font-size: 1.28em;
}
h4 {
	font-size: 1.14em;
}
h5 {
	font-size: 1.05em;	
}

/* -- GRID -- */

.container {
	width: 90%;
	max-width: 1100px;
	min-width: 300px;
	margin: 3em auto;
}

.grid-wrap {
	margin-left: -3em;
	overflow: hidden;
	zoom: 1;
}
.grid-wrap:before, .grid-wrap:after {
	content: "";
	display: table;
}
.grid-wrap:after {
	clear: both;
}
.grid {
	float: left;
	padding-left: 3em;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

p.align-img-top {
	margin-top: 3rem !important;
}

/*.half-gutter {
	margin-left: -1.5em;
}*/
.half-gutter .grid-col {
	padding-left: 1.5em;
}
.col-one-half {
	width: 50%;
}
.col-one-third {
	width: 33.333%;
}
.col-two-thirds {
	width: 66.666%;
}
.col-one-quarter {
	width: 25%;
}
.col-three-quarters {
	width: 75%;
}
.divide-top {
	border-top: 1px solid #ccc;
	padding-top: 2em;
	margin-top: 1.5em;
}
.mright {
	margin-right: 3em;
}
.mleft {
	margin-left: 3em;
}
.mtop {
	margin-top: 3em;
}
.mbottom {
	margin-bottom: 3em;
}
.fright, .fleft {
	display: block;
	overflow: hidden;
}
.fright {
	float: right;
}
.fleft {
	float: left;
}
.alignleft {
	float: left;
	clear: left;
	margin: .38em 1.62em .38em 0;
}
.alignright {
	float: right;
	clear: right;
	margin: .38em 0 .38em 1.62em;
}
.aligncenter {
display: block;
margin: 0 auto 1.62em;
}
figure, picture {
	max-height: 100%;
	overflow: hidden;
}
img {
	max-width: 100%;
	height: auto;
	width: auto;
}
a img {
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
body, .col-full {
	width: 100%;
}

/* -- HEADER -- */

#navtop {
	clear: both;
	overflow: hidden;
	background: #000;
	background: -moz-linear-gradient(60deg, #000000 0%, #004966 40%, #063c73 60%, #380d59 80%, #000000 100%);
	background: -webkit-linear-gradient(60deg, #000000 0%,#004966 40%,#063c73 60%,#380d59 80%,#000000 100%);
	background: linear-gradient(60deg, #000000 0%,#004966 40%,#063c73 60%,#380d59 80%,#000000 100%); 
	background-size: 300% 300%;
	margin: 0 0 5em 0;
}
#navtop .container {
	position: relative;
}
#navtop .container a {
	font-family: 'Raleway', sans-serif;
	color: #fff;
	text-decoration: none;
	transition: color .2s ease;
	-moz-transition: color .2s ease;
	-webkit-transition: color .2s ease;
	-o-transition: color .2s ease;
}
#navtop .container a:hover, #navtop .container a:active {
	color: #b3ddfa !important;
	/*text-decoration: underline;*/
}
#navtop .container nav ul {
	float: left;
	overflow: hidden;
	font-size: 1.5em;
	line-height: 2em;
	padding: 0 0 0 2em;
}

.animatebg {
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;	
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

header nav ul li {
	display: inline-block;
	padding: 0.2em 0.1em 0.2em 3em;
}
header nav ul li a {
	text-decoration: none;
	padding: 0;
}
#navtop .container nav a:hover, #navtop .container nav a:focus , #navtop .container nav a:active {
	text-decoration: none;
	color: #90caf9;
}
.logo {
	margin-bottom: 3em;
	/* -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  */
	/* -webkit-tap-highlight-color: transparent; */
}
.logo img, .logo picture, .logo source {
	width: 94px;
	height: 55px;
}

/* -- GENERAL -- */

.main > section {
	margin-bottom: 5em;
}
.main > section.close-mb {
	margin-bottom: 2em;
}
.arrow2 {
 font-style: italic;
}
.arrow:after {
/*	content: "»";
	padding-left: 10px*/
}
.main aside {
	margin-bottom: 3em;
}
.main aside menu {
	line-height: 2em;
	padding: 0 0 0 1em;
}
.main aside menu a {

}
.modal { 
	position: absolute;
	display: block;
	width: 255px;
	padding: 15px;
	border: 1px solid #333;
	color: #333; 
	background-color: white;
	top: 60%;
}	
.modal h4 {
	margin-bottom: 5px;
}
.close {
	-webkit-appearance: none;
	border: 1px solid #999;
	color: #999;
	cursor: pointer;
	display: block;
	float: right;
	height: 16px;
	width: 16px;
	margin: 0;
	padding: 1px 2px 4px 2px;
	text-decoration: none;
	text-transform: none;
	background-color: white;
	line-height: 1em;
}

/* -- FOOTER -- */

footer {
	color: #333;
	margin-bottom: 5em;
	font-size: .8em;
}
footer nav ul {
	float: right;
	overflow: hidden;
}
footer a {
	color: #333;
}
footer a:hover, footer a:focus, footer a:active {
	color: #000;
}

/* -- WORKS  -- */

.works figure > a {
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	border-top: 1px solid #ddd;
	padding-top: 1em;
}
.works figure .zoom {
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	background: url(../img/zoom.png) no-repeat center;
	width: 100%;
	height: 100%;
	zoom: 1;
	opacity: 0;
	-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
}
.works figure figcaption {
	margin-top: 1em;
	/* white-space: nowrap;*/
	padding: 0 .5em;
}
.works figure figcaption a {
	font-family: 'Raleway', sans-serif;
	line-height: 1.6em;
	color: #333;
	font-weight: 700;
}
.works figure figcaption p {
	margin: 0;
}
.works-page figure {
	margin-top: .5em;
}
.works figure {
	margin-bottom: 3em;
}
.works figcaption {
	margin-top: 1em;
}

@media only screen and (min-height: 900px) {
	.main { min-height: 540px; }
}

@media only screen and (min-width: 1024px) {
	.modal { width: 265px; left: 33%; }
	.half-gutter {
		margin-left: -1.5em;
	}
   .even-h3 {
		padding-top: 3.2em
    }
	.works figure figcaption {
		min-height: 120px
	}
}
@media only screen and (max-width: 1024px) {
	.modal { left: 20%; }
	.up-sm { margin-bottom: -4em; }
}
@media only screen and (max-width: 768px) {
	.modal { left: 5%; }
}

@media only screen and (min-width: 1200px) {
	body {
		font-size: 14px;
	}
	.works figure figcaption p {
		font-size: 0.9em
	}
}
@media only screen and (min-width: 1520px) {
	.container-hd {
		width: 90%;
		max-width: 1300px;	
	}
}

/* -- Media query 1 (mq1) -- */

@media only screen and (max-width: 960px) {
	.mq1-col-full { width: 100%; }
	.mq1-col-one-half { width: 50%; }
	.mq1-col-one-third { width: 33.333%; }
	.mq1-col-two-thirds { width: 66.666%; }
	.mq1-col-one-quarter { width: 25%; }
	.mq1-col-three-quarters { width: 75%; }
	footer li { float: left; margin-right: 0.5em; padding-right: 0.5em; border-right: 1px solid #ddd;} 
}

/* -- Media query 2 (mq2) -- */

@media only screen and (max-width: 768px) {
	.mq2-col-full { width: 100%;}
	.mq2-col-one-half { width: 50%; }
	.mq2-col-one-third { width: 33.333%; }
	.mq2-col-two-thirds { width: 66.666%; }
	.mq2-col-one-quarter { width: 25%; }
	.mq2-col-three-quarters { width: 75%; }
	.animatebg { -webkit-animation: Gradient 18s ease infinite; -moz-animation: Gradient 18s ease infinite;	animation: Gradient 18s ease infinite;	
}

/* -- Media query 3 (mq3) -- */

@media only screen and (max-width: 480px) {
	.mq3-col-full { width: 100%; }
	.mq3-col-one-half { width: 50%; }
	.mq3-col-one-third { width: 33.333%; }
	.mq3-col-two-thirds { width: 66.666%; }
	.mq3-col-one-quarter { width: 25%; }
	.mq3-col-three-quarters { width: 75%; } 
	.mq3-none {display: none;}
	.about-page aside { display: none; }
	#navtop { margin-bottom: 2em; }
	#navtop .container nav ul { margin-top: -0.4em; padding: 0.2em 0.1em 0 0.2em; }
	header nav ul li{ display: block; text-align: right; font-size: 0.8em; line-height: 2em; padding: 0 0.3em 0.1em 0.2em;  } 
	header nav ul li a { padding-botom: 0.2em }
	footer li { float: none; margin-right: 0em; padding-right: 0em; border-right: none; line-height: 2em;}
	.animatebg { -webkit-animation: Gradient 21s ease infinite; -moz-animation: Gradient 21s ease infinite;	animation: Gradient 21s ease infinite;	
	}
}

/* -- PRINT STYLES  -- */

@media print{ 
	.logo::before { content: "Danilo IxD"; display: block; color: black; font-size: 2em; font-style: italic; }
	#navtop { margin: 0 0 1em 0; }
	.main, .main * { background-color:white !important; color:black !important; }
	tr, img { page-break-inside:avoid }
	img { max-width:100% !important }
	p, h2, h3{ orphans:3; widows:3 }
	h2, h3 { page-break-after:avoid } 
}