* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html, body { height: 100% !important; min-height: 100%; background: #ccc; font-size: 16px; }
@media screen and (max-width: 720px) { html, body { font-size: 13px; } }

body { overflow-y: scroll; }

/* 
	Typography
*/
h1, h2 { margin-bottom: 20px; }

h1, h2, h3, h4, h5, h6 { color: #000; }

h1 { font-size: 5em; font-family: "Lato", Arial, sans-serif; font-weight: 300; }
h1 .icon { height: auto; line-height: auto; padding: 20px; }
@media screen and (max-width: 720px) { h1 { font-size: 2.5em; } }

h2 { font-family: "Oswald", Arial, sans-serif; text-transform: uppercase; }

p { font-size: 1.35em; color: #888; margin-bottom: 30px; }
p.small { font-size: 1em; }

a { outline: none !important; }

blockquote { border-color: #000; }

.dark blockquote { border-color: #fff; }

/* 
	Modes
*/
.dark { background: #000; }
.dark p { color: #555; color: rgba(255, 255, 255, 0.5); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark .btn { color: #fff; color: rgba(255, 255, 255, 0.5); border-color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.dark .btn:hover { color: #fff; border-color: #fff; background: transparent; }

.white { background: #fff; }
.white p, .white .icon { color: #555; color: rgba(0, 0, 0, 0.5); }
.white .btn { color: #555; color: rgba(0, 0, 0, 0.5); border-color: #555; border-color: rgba(0, 0, 0, 0.5); }
.white .btn:hover { color: #000; border-color: #000; background: transparent; }

.dark.trans { background: rgba(0, 0, 0, 0.8); }

.white.trans { background: rgba(255, 255, 255, 0.8); }

.btn { background: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.btn span { margin-right: 10px; }

/*
	Layout
*/
.centered { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 250px; }

.centered.medium { width: 100%; max-width: 600px; min-height: 350px; padding: 0 20px; }
@media screen and (max-width: 720px) { .centered.medium { min-height: 170px; height: 170px; } }

.centered.large { max-width: 1080px; padding: 20px; width: 100%; min-height: 475px; }
@media screen and (max-width: 992px) { .centered.large { position: relative !important; padding: 0 !important; height: auto !important; } }

section { min-height: 100%; width: 100%; position: relative; padding: 75px 30px; }
section.small { min-height: 1px !important; height: auto !important; padding: 130px 30px !important; width: 100%; }
@media screen and (max-width: 720px) { section { padding: 50px 20px; } }
section#footer { min-height: 1px !important; display: inline-block; height: auto; margin: -5px 0; margin-top: 0; padding-bottom: 0; border-top: 1px solid #222; }
section#footer .pre-icon { color: #fff; }
section#footer h4 { margin-bottom: 35px; }
section#footer .foot .btn-group .icon { height: 80px; line-height: 80px; width: 100%; color: #000; border: 1px solid #000; border-right: none; background: #555; }
section#footer .foot .btn-group .icon:hover { background: #fff; }
section#footer .foot .btn-group:last-child .icon { border-right: 1px solid #000; }
section#footer .copyright p { font-size: .9em; }
section#footer .thumbnail { width: 32%; }
section.content { display: inline-block; margin: -5px 0; }
section#home { height: 100%; }
section#home p { color: #000; }
section#about .centered { height: 250px; }
section.portfolio { padding: 15px; padding-bottom: 0; }
section.portfolio#portfolio { margin-bottom: -3px; }
section.portfolio#portfolio div[class*="col-"] { padding: 0; margin: -3px 0; }
section.portfolio .item { display: inline-block; margin-bottom: 0; position: relative; width: 100%; overflow: hidden; }
@media screen and (max-width: 720px) { section.portfolio .item { margin-bottom: 20px; } }
section.portfolio .item img { max-width: 100%; width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
section.portfolio .item .caption { position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; background: #fff; background: rgba(255, 255, 255, 0.9); color: #666; padding: 40px 30px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; }
section.portfolio .item .caption .centered { height: 100px; }
section.portfolio .item .caption h3 { color: #000; }
@media screen and (max-width: 720px) { section.portfolio .item .caption h3 { font-size: 1.2em; } }
section.portfolio .item .caption p { font-size: 1em; }
section.portfolio .item:hover .caption { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); }
section.portfolio .item:hover .caption p { color: #666; }
section.portfolio .item:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
section .block { padding: 40px; padding-top: 60px; }
section .block.small { padding: 20px 30px; }
section .block.small p { font-size: 1em; }
section .block.small p.small { margin-bottom: 8px; }
section .block.bottom { margin-top: 60px !important; padding-bottom: 0 !important; }
section .block.bottom .icon { border-bottom: none !important; }
section .block.top { padding-top: 0 !important; margin-bottom: 60px !important; }
section .block.top .icon { border-top: none !important; }

section { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }
section img.fs { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); }
section.visible { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; }
section.visible img.fs { -webkit-transition: all 4s; -moz-transition: all 4s; -o-transition: all 4s; transition: all 4s; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
section.visible img.fs.faded { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }

img { max-width: 100%; }
img.fs { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; }
img.faded { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; background: #000; }

p img { margin: 25px 0; }

/*
	Navigation
*/
nav#main { position: absolute; bottom: -80px; left: 0; right: 0; height: 80px; background: #000; border-bottom: 1px solid #222; z-index: 9999999 !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
@media screen and (max-width: 720px) { nav#main { height: 40px; } }
nav#main.visible { bottom: 0; }
nav#main .logo { height: 80px; line-height: 80px; padding: 0 40px; position: absolute; left: 0; color: #666; font-family: "Oswald", Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
@media screen and (max-width: 720px) { nav#main .logo { padding: 0 12px; } }
nav#main .fa-bars { font-size: 14px; }
nav#main .icon.toggle-menu { display: none; }
@media screen and (max-width: 720px) { nav#main .icon.toggle-menu { display: block; } }
nav#main ul { list-style: none; height: 80px; padding: 0; margin: 0; margin-left: 60px; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
@media screen and (max-width: 992px) { nav#main ul { text-align: right; margin-left: 0; } }
nav#main ul li { height: 80px; display: inline-block; border-left: 1px solid #222; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
nav#main ul li a { height: 80px; display: inline-block; padding: 0 40px; line-height: 80px; color: #666; font-family: "Oswald", Arial, sans-serif; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
@media screen and (max-width: 992px) { nav#main ul li a { padding: 0 12px; } }
nav#main ul li a:hover { text-decoration: none; background: #222; color: #fff; }
nav#main ul li a.active { background: #222; color: #fff; }
nav#main ul li:last-child { border-right: 1px solid #222; }
@media screen and (max-width: 992px) { nav#main ul li:last-child { border-right: 0; } }
nav#main .icon { height: 80px; line-height: 80px; border: 0; display: inline-block; border-left: 1px solid #222; color: #666; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
nav#main .icon:hover { background: #222; color: #fff; }
nav#main.affix { position: fixed; z-index: 9999; top: -40px; bottom: auto; height: 40px; border-bottom: 1px solid #222; }
nav#main.affix.visible { top: 0; }
nav#main.affix .icon { line-height: 40px; height: 40px; }
nav#main.affix .logo { height: 40px; line-height: 40px; padding: 0 10px; }
nav#main.affix ul { height: 40px; }
@media screen and (max-width: 720px) { nav#main.affix ul { top: 40px; bottom: auto; height: auto; width: 100%; text-align: center; background: #000; display: none; border-bottom: 1px solid #222; }
  nav#main.affix ul li { width: 100%; }
  nav#main.affix ul li a { width: 100%; }
  nav#main.affix ul.open { display: inline-block; } }
nav#main.affix ul li { height: 40px; }
nav#main.affix ul li a { height: 40px; line-height: 40px; }
@media screen and (max-width: 720px) { nav#main { position: fixed; z-index: 9999; top: -40px; bottom: auto; height: 40px; border-bottom: 1px solid #222; }
  nav#main.visible { top: 0; }
  nav#main .icon { line-height: 40px; height: 40px; }
  nav#main .logo { height: 40px; line-height: 40px; padding: 0 10px; }
  nav#main ul { height: 40px; top: 40px; bottom: auto; height: auto; width: 100%; text-align: center; background: #000; display: none; border-bottom: 1px solid #222; }
  nav#main ul li { width: 100%; height: 40px; }
  nav#main ul li a { width: 100%; height: 40px; line-height: 40px; }
  nav#main ul.open { display: inline-block; } }

.social-icons { margin: 20px 0; }
.social-icons a { margin: 0 20px; color: #000; color: rgba(0, 0, 0, 0.5); -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; }
.social-icons a:hover { color: #000; text-decoration: none; }

.icon { display: inline-block; height: 45px; min-width: 45px; width: auto; padding: 0 20px; line-height: 45px; text-align: center; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, 0.4); color: #444; font-family: "Oswald", Arial, sans-serif; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.icon span { margin-right: 6px; margin-top: 10px;}
.icon:hover { color: #000; background: rgba(255, 255, 255, 0.2); text-decoration: none; border: 1px solid #555; -webkit-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); }

.dark .icon { border-color: #fff; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.6); color: #fff; }
.dark .icon:hover { border-color: #fff; color: #fff; }

.ps-container .ps-scrollbar-y-rail, .ps-container .ps-scrollbar-y { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; }
