@font-face { font-family: 'HBMedium'; src: url("../fonts/HNMedium.eot");
  /* IE9 Compat Modes */
src: url("../fonts/HNMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/HNMedium.woff2") format("woff2"), url("../fonts/HNMedium.woff") format("woff"), url("../fonts/HNMedium.ttf") format("truetype");
  /* Safari, Android, iOS */ }
@font-face { font-family: 'HBBold'; src: url("../fonts/HNBold.eot");
  /* IE9 Compat Modes */
src: url("../fonts/HNBold.eot?#iefix") format("embedded-opentype"), url("../fonts/HNBold.woff2") format("woff2"), url("../fonts/HNBold.woff") format("woff"), url("../fonts/HNBold.ttf") format("truetype");
  /* Safari, Android, iOS */ }
* { -webkit-overflow-scrolling: touch; }

html { scroll-behavior: smooth; }

body { width: 100%; min-width: 300px; font-family: 'HBMedium', sans-serif; font-size: 16px; line-height: 20px; color: #232121; background: #fff; }

a { color: #232121; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
a:hover, a.active { color: #232121; text-decoration: none; }

a.scrollup { position: absolute; top: 12px; right: -15px; width: 75px; height: 75px; padding: 0; background-image: url(../images/arrow.svg); background-position: center center; background-size: 100%; background-repeat: no-repeat; }

h2 { font-family: 'HBBold', sans-serif; font-size: 2rem; font-weight: 700; }

h3 { font-family: 'HBBold', sans-serif; font-size: 1rem; font-weight: 700; }

.modal-full { padding: 0 !important; }
.modal-full .modal-dialog { min-width: 100%; margin: 0; }
.modal-full .modal-dialog .modal-content { min-height: 100vh; border: none; border-radius: 0; }
.modal-full .modal-dialog .modal-content .modal-header { border: none; padding: 0 2%;}
.modal-full .modal-dialog .modal-content .modal-header .close { margin: 0; padding: 0; font-size: 2rem; opacity: 1; }
.modal-full .modal-dialog .modal-content .modal-body { padding: 0; }

header .container, #about .container, footer .container { max-width: 100%; }

header { position: relative; padding-top: 1%;}

header h1 { display: inline-block; margin: 0 0 1.25rem; font-size: 16px; font-weight: 400; vertical-align: middle; }
header h1 a { color: #232121; white-space: nowrap; }
header h1 a:hover { color: #232121; }

header .menu { padding: 1% 1% 0 2%;}
header .menu .contact { position: relative; display: block;}
header .menu .contact a { display: inline-block; text-decoration: underline;}
header .menu .contact a:hover { opacity: .5; }
header .menu .social { display: block;}
header .menu .social a { display: inline-block; text-decoration: underline;}
header .menu .social a:hover { opacity: .5; }
header .about { padding: 1% 2% 0 1%;}
header .about .text-box .page-text { display: inline-block; }

#main #work { padding-bottom: 1%; }
#main #work .project { position: relative; overflow: hidden; padding: 1%; }
#main #work .project .project-image { overflow: hidden; position: relative; }
#main #work .project .project-image img { width: 100%; height: auto; -webkit-transition: all 2s ease-out; -o-transition: all 2s ease-out; transition: all 2s ease-out; }
#main #work .project:nth-child(even) { padding-right: 2%; }
#main #work .project:nth-child(odd) { padding-left: 2%; }
#main #work .project .project-image .project-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
#main #work .project .project-image .project-overlay a { display: block; height: 100%; }
#main #work .project:hover .project-overlay { background: rgba(150,150,150,0.75); }
#main #work .project:hover .project-overlay h4 a span.project-title { display: block; -webkit-animation: fadeInDown 1s; animation: fadeInDown 1s; }
#main #work .project:hover .project-overlay h4 a span.project-desc { display: block; -webkit-animation: fadeInUp 1.5s; animation: fadeInUp 1.5s; }

#main .section-text { padding-top: 6rem; padding-bottom: 6rem; }
#main .section-text h2 { text-align: center; margin-bottom: 5rem; }

#page { padding: 100px 0; }

#project .container-fluid { padding: 0; }
#project .container-fluid .project-text { padding: 30px 30px 50px; }
#project .container-fluid .project-text .project-title { position: relative; padding-bottom: 70px; }
#project .container-fluid .project-text .project-title h2 { font-size: 2.4rem; }
#project .container-fluid .project-text .project-title span { position: absolute; bottom: 15px; left: 15px; font-size: 1.6rem; }
#project .container-fluid .project-header { padding: 0 2% 1%; }
#project .container-fluid .project-header img { width: 100%; height: auto; }
#project .container-fluid .project-images { padding-bottom: 1%; }
#project .container-fluid .project-images .project-image { padding: 1% 2%; }
#project .container-fluid .project-images .project-image img { width: 100%; height: auto; margin-top: -1px; }
#project .container-fluid .project-images.images-padding .project-image img { margin-top: 1px; }

#modalScrollup { display: none; right: 30px; }

@media (max-width: 767px) { header { padding: 25px 0; }
	header {padding: 2.5% 0 0;}
	header h1 {margin: 0 0 5%; }
	header .menu { padding: 1% 5% 2.5%;}
	header .about { padding: 1% 5%;}
	#main #work .project { padding: 0 5% 5%!important;}
	#project .container-fluid .project-header { padding: 0 5% 2.5%; }
	#project .container-fluid .project-images .project-image { padding: 2.5% 5%; }
	.modal-full .modal-dialog .modal-content .modal-header .close { padding: 0 3%;}
  }