@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700&subset=latin-ext');

@font-face
{
 font-family: 'Myriad Pro';
 font-style: normal;
 font-weight: normal;
 src: local('Myriad Pro'), url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face
{
 font-family: 'Myriad Pro';
 font-style: normal;
 font-weight: bold;
 src: local('Myriad Pro Bold'), url('fonts/MYRIADPRO-BOLD.woff') format('woff');
}

:root
{
 --color-blue: #14acc9;
 --color-gray: #aaa;
 --color-gray-on-gray: #777;
 --color-gray-on-black: #ccc;
 --color-gray-background: #d8d8d8;
}

*
{
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
}

body
{
 height: 100%;
 margin: 0;
}

a
{
 color: var(--color-blue);
 text-decoration: underline;
 cursor: pointer;
}

p
{
 font-family: 'Myriad Pro', sans-serif;
 font-weight: normal;
 font-size: 10pt;
 line-height: 18pt;
}

h1, h3
{
 color: var(--color-blue);
 font-family: 'Myriad Pro', sans-serif;
}

.clr
{
 clear: both;
 display: none !important;
}

.right
{
 text-align: right;
}

.center
{
 text-align: center;
}

.float-right
{
 float: right;
}

h2
{
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 18pt;
 letter-spacing: 2pt;
 color: #000;
 text-transform: uppercase;
 margin: 60px 0;
}

b, strong
{
 font-weight: normal;
 color: var(--color-blue);
}

div.container
{
 width: 96%;
 max-width: 1000px;
 margin: 0 auto;
}

header
{
 background: var(--color-gray-background) url(../img/back.jpg) center;
 background-size: cover;
 min-height: 900px;
 padding: 60px 20px;
 text-align: center;
}

header h1
{
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 24pt;
 margin: 100px 0 60px 0;
 letter-spacing: 3pt;
 color: #fff;
 text-transform: uppercase;
}

header #tagline
{
 font-family: 'Montserrat', sans-serif;
 font-weight: normal;
 font-size: 11pt;
 margin-bottom: 60px;
 letter-spacing: 3pt;
 color: #fff;
 text-transform: uppercase;
}

header p
{
 font-family: 'Montserrat','Myriad Pro', sans-serif;
 font-weight: normal;
 font-size: 10pt;
 line-height: 18pt;
 color: #fff;
 max-width: 940px;
 margin: 0 auto;
}

header #contact-button
{
 position: absolute;
 top: 60px;
 right: 60px;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #fff;
 font-size: 9pt;
 letter-spacing: 1pt;
 cursor: pointer;
}

header #contact-button button
{
 padding: 10px 40px;
 cursor: pointer;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #fff;
 font-size: 9pt;
 letter-spacing: 1pt;
}

ul#menu
{
 list-style: none;
 color: #fff;
}

ul#menu > li
{
 display: inline-block;
 margin: 0 2em;
 font-family: 'Montserrat', sans-serif;
 font-weight: 500;
 font-size: 11pt;
}

ul#menu > li > a
{
 display: inline-block;
}

#index-photos
{
 margin: 0 auto 40px auto;
}

#index-photos > ul
{
 list-style: none;
}

#index-photos > ul > li
{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 margin: 0 20px 20px 20px; 
 color: #fff;
 text-transform: uppercase;
 font-family: 'Myriad Pro', sans-serif;
 font-size: 13pt;
 letter-spacing: 1pt;
 position: relative;
 height: 240px;
}

.img-rounded
{
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -khtml-border-radius: 50%;
 border: 5px solid var(--color-blue);
}

.photo:hover .img-rounded
{
 border: 5px solid #fff;
}

.img-rounded > img
{
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -khtml-border-radius: 50%;
 vertical-align: middle;
}

span.photo-name
{
 display: inline-block;
 position: relative;
 top: 220px;
 width: 200px;
}

/* photo effect */

.photo
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;
}

.photo .img-rounded,
.photo > img
{
  object-fit: cover;
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover
{
 margin-top: 0;
}

.photo:hover .img-rounded,
.photo:hover > img
{
  box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
}

.photo .glow-wrap
{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -khtml-border-radius: 50%;
}

.photo .glow
{
  display: block;
  position:absolute;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .glow
{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .img-rounded,
.photo:hover .glow-wrap
{
  margin-top: 0;
}

/* */

ul#company
{
 list-style: none;
 margin-bottom: 60px;
}

ul#company > li
{
 display: inline-block;
 vertical-align: top;
 width: 280px;
 max-width: 90%;
 margin: 0 50px 50px 50px;
 font-family: 'Myriad Pro', sans-serif;
 font-size: 10pt;
 color: var(--color-gray);
}

ul#company > li > a
{
 position: relative;
 height: 150px;
 display: block;
}

ul#company > li strong
{
 display: inline-block;
 font-size: 18pt;
 font-weight: bold;
 margin: 1em 0;
 color: #000;
}

ul#company > li img
{
 border: 5px solid var(--color-blue);
}

ul#company > li:hover img
{
 border: 5px solid #fff !important;
}

#mihalygabor
{
 width: 100%;
 border-top: 5px solid var(--color-blue);
 border-bottom: 5px solid var(--color-blue);
 background-color: var(--color-gray-background);
 margin-bottom: 60px;
}

#mihalygabor > div.container > div
{
 display: inline-block;
 vertical-align: bottom;
}

#mihalygabor-left
{
 width: 45%;
}

#mihalygabor-left img
{
 display: block;
 max-width: 100%;
 margin-top: 20px;
}

#mihalygabor-right
{
 width: 55%;
}

#mihalygabor-right > p
{
 color: var(--color-gray-on-gray);
}

.icon-pdf
{
 display: inline-block;
 width: 11px;
 height: 14px;
 background-image: url(/img/icon-pdf-sm.png);
}

.icon-speaker
{
 display: inline-block;
 width: 19px;
 height: 14px;
 background-image: url(/img/icon-speaker-sm.png);
}

.icon-pdf:hover,
.icon-speaker:hover
{
 background-position: 0 -14px;
}

.container-1200,
#mihalygabor > .container
{
 max-width: 1200px !important;
}

#other-projects
{
 margin-bottom: 60px;
}

#other-projects h2
{
 font-size: 20pt;
 letter-spacing: 3pt;
 color: #000;
 text-transform: uppercase;
}

#other-projects .item-left h2
{
 margin: 0 60px 20px 20px;
}

#other-projects .item-right h2
{
 margin: 0 20px 20px 60px;
}

#other-projects h3,
#call-us h3,
#contact h3
{
 font-family: 'Myriad Pro', sans-serif;
 text-transform: uppercase;
 color: var(--color-blue);
 font-size: 12pt;
 letter-spacing: 3pt;
 font-weight: normal;
}

#other-projects .item-left h3
{
 margin: 20px 60px 10px 20px;
}

#other-projects .item-right h3
{
 margin: 20px 20px 10px 60px;
}


#other-projects .item-left,
#other-projects .item-right
{
 display: inline-block;
 vertical-align: top;
 width: 50%;
}

#other-projects > div > div > img
{
 width: 100%;
 display: block;
 border: 5px solid var(--color-blue);
}

#other-projects .item-left > p
{
 margin: 0 60px 0 20px;
}

#other-projects .item-right > p
{
 margin: 0 20px 0 60px;
}

#call-us
{
 background: var(--color-gray-background) url(../img/call-us-back.jpg) center;
 background-size: cover;
 min-height: 220px;
 text-align: center;
 color: #fff;
 padding: 20px;
 margin-bottom: 60px;
}

#call-us h3
{
 margin-top: 40px;
}

#call-us h2
{
 color: #fff;
 font-size: 20pt;
 margin: 20px;
}

#contact
{
 margin-bottom: 60px;
}

#contact h2
{
 margin: 20px;
}

#contact > p
{
 margin-bottom: 120px;
 color: var(--color-gray);
}

#contact-container > div
{
 font-family: 'Myriad Pro', sans-serif;
 display: inline-block;
 vertical-align: top;
 width: 30%;
 margin: 0 1.666666%;
 text-align: center;
 color: var(--color-gray);
 font-size: 10pt;
}

#contact-container > div > a
{
 text-decoration: underline;
 color: var(--color-blue);
}

.contact-icon
{
 width: 100%;
 text-align: center;
 margin-bottom: 20px;
 position: relative;
}

.contact-icon:before
{
 content: '';
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 border-top: 1px solid #888;
 transform: translateY(-50%);
 z-index: -1;
}

.contact-icon span
{
 display: inline-block;
 z-index: 10;
 width: 70px;
 height: 30px;
}

.contact-icon:hover span
{
 background-position: 0 -30px;
}

footer
{
 background-color: #000;
 color: var(--color-gray-on-black);
 padding: 120px 0;
}

footer p
{
 margin-bottom: 2em;
}

footer a
{
 color: var(--color-gray-on-black);
}

.facebook-icon
{
 display: inline-block;
 width: 30px;
 height: 30px;
 background-image: url(../img/icon-facebook.png);
}

.facebook-icon:hover
{
 background-position: 0 -30px;
}

ul#footer-menu
{
 list-style: none;
 margin-bottom: 30px;
}

ul#footer-menu > li
{
 display: inline-block;
 font-family: 'Montserrat', sans-serif;
 font-weight: 500;
 font-size: 11pt;
 text-transform: uppercase;
 color: var(--color-gray);
}

ul#footer-menu > li:not(:last-child):after
{
 content: "|";
 padding: 0 1em;
 color: var(--color-gray);
}

ul#footer-menu > li > a
{
 text-decoration: none;
 color: var(--color-gray);
}

ul#footer-menu > li > a:hover
{
 color: var(--color-blue);
}

#footer-links
{
 margin-bottom: 30px;
 color: var(--color-blue);
}

#footer-links > a
{
 color: var(--color-blue);
}

#footer-links > a:hover
{
 color: var(--color-gray);
}

#footer-copyright
{
 color: var(--color-gray-on-gray);
}

/* popup */

#popup
{
 position: fixed;
 opacity: 0;
 visibility: hidden;
 z-index: 100;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

#popup.is-visible
{
 opacity: 1;
 visibility: visible;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.7);
}

#popup-content
{
 background-color: #fff;
 margin: 2.5% auto;
 width: 90%;
 max-width: var(--site-max-width);
 max-height: 92%;
 padding: 40px;
 z-index: 1000;
 visibility: hidden;

 display: flex;
 flex-direction: column;
}

#popup-loader
{
 visibility: hidden;
 text-align: center;
}

#popup-content.is-visible,
#popup-loader.is-visible
{
 visibility: visible;
}

#popup-content h1
{
 padding-bottom: .5em;
 margin-bottom: 1em;
}

#popup-content h3
{
 text-align: left;
 margin: 1em 0;
 text-transform: none;
 letter-spacing: 0;
 font-size: 10pt;
}

#popup-close
{
 cursor: pointer;
 font-size: 25px;
 position: absolute;
 top: 20px;
 right: 20px;
}

#popup-content h1
{
 font-family: 'Myriad Pro', sans-serif;
 text-transform: uppercase;
 color: var(--color-blue);
 font-size: 12pt;
 letter-spacing: 3pt;
 font-weight: normal;
 text-align: left;
 margin: 0 0 .5em 0;
}

#popup-date
{
 font-family: 'Myriad Pro', sans-serif;
 color: var(--color-blue);
 font-size: 10pt;
}

#popup-container
{
 border-top: 1px solid var(--color-mid-gray);
 padding-top: .5em;
 margin-top: .5em;
 overflow-y: scroll;
}

#popup-content
{
 position: relative;
}

#popup-content p
{
 color: var(--color-mid-gray);
}

#popup-content .video
{
 margin-bottom: 20px;
}

#popup-content img
{
 margin: 20px;
 max-width: 100%;
 height: auto;
}


/* hovereffects */
/* http://kevinjannis.github.io/hovereffects.css/ */

.effect {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-perspective: 400;
  -moz-perspective: 400;
  -ms-perspective: 400;
  -o-perspective: 400;
  perspective: 400;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1em;
  backface-visibility: hidden;
}
.effect:before, .effect:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transform-origin: center center 0 50%;
  -moz-transform-origin: center center 0 50%;
  -ms-transform-origin: center center 0 50%;
  -o-transform-origin: center center 0 50%;
  transform-origin: center center 0 50%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  position: absolute;
  content: attr(data-effect);
  backface-visibility: hidden;
  top: 0;
  left: 0;
  color: rgba(0, 0, 0, 0.9);
}

.effect.zoom-in {
  color: transparent;
}
.effect.zoom-in:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(255, 255, 255, 0.9);
}
.effect.zoom-in:after {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  color: rgba(0, 191, 243, 1);
}
.effect.zoom-in:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.zoom-in:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* media queries */

@media screen and (min-width: 800px)
{
 .container-swap {position: relative;}
 .container-swap > .item-left {position: relative; right: 50%; left: auto;}
 .container-swap > .item-right {position: relative; left: 50%; right: auto;}
}

@media screen and (min-width: 640px)
{
 h2 {font-size: 24pt; letter-spacing: 3pt;}
 #mihalygabor > div.container {position: relative;} 
 #mihalygabor-left {position: relative; right: 55%; left: auto;}
 #mihalygabor-right {position: relative; left: 45%; right: auto;}
}


@media screen and (max-width: 1120px)
{
 #mihalygabor-left {right: 50%;}
}

@media screen and (max-width: 940px)
{
 header #contact-button {position: static; top: 20px; right: auto; margin-bottom: 40px;}
}

@media screen and (max-width: 799px)
{
 header {padding: 30px 10px;}
 header h1 {margin: 40px 0 20px 0;}
 .container-1200 > div {width: 96% !important; margin-bottom: 20px;}
 #other-projects p, #other-projects h2, #other-projects h3 {margin: 0 0 10px 0 !important;}
 ul#menu li {margin: 0 1em 10px 1em;}
}

@media screen and (max-width: 639px)
{
 #mihalygabor-left {width: 100%; margin: 0;}
 #mihalygabor-right {width: 100%; margin: 0;}
 #contact-container > div {width: 96%; margin: 0 0 20px 0;}
 ul#company > li {margin: 0 0 50px 0;}
 footer {padding: 60px 0;}
}

@media screen and (max-width: 480px)
{
 h2 {font-size: 16pt; letter-spacing: 1pt;}
 #popup-content {padding: 20px;}
 #popup-close {margin: -20px -10px 0 0;}
 ul#footer-menu > li {display: block; margin-bottom: 1em;}
 ul#footer-menu > li:not(:last-child):after {content: none;}
}