/*
Theme Name: Márk Körmöndi Portfolio
Theme URL: https://mark.kormondi.com
Description: Márk Körmöndi Portfolio Theme
Author: Zsolt Körmöndi
Template: wp-bootstrap-4
Version: 1.0.0
Text Domain: wp-bootstrap-4-child
*/

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/GothamBlack.eot');
    src: url('assets/fonts/GothamBlack.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GothamBlack.woff2') format('woff2'),
    url('assets/fonts/GothamBlack.woff') format('woff'),
    url('assets/fonts/GothamBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Light.eot');
    src: url('assets/fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/Gotham-Light.woff2') format('woff2'),
    url('assets/fonts/Gotham-Light.woff') format('woff'),
    url('assets/fonts/Gotham-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Medium.eot');
    src: url('assets/fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/Gotham-Medium.woff2') format('woff2'),
    url('assets/fonts/Gotham-Medium.woff') format('woff'),
    url('assets/fonts/Gotham-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.eot');
    src: url('assets/fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/Gotham-Bold.woff2') format('woff2'),
    url('assets/fonts/Gotham-Bold.woff') format('woff'),
    url('assets/fonts/Gotham-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('assets/fonts/Gotham-Book.eot');
    src: url('assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/Gotham-Book.woff2') format('woff2'),
    url('assets/fonts/Gotham-Book.woff') format('woff'),
    url('assets/fonts/Gotham-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html{
    scroll-behavior: smooth;
}

body, html {
    font-family: 'Gotham' !important;
    font-size: 16px;
}

body, button, input, optgroup, select, textarea {
    font-family: 'Gotham' !important;

}

.nav-link {
    padding: 0.5rem 1.5rem !important;
}

.nav-link, .nav-link a {
    color:#e1e1e1;
    font-size: 20px;
    font-weight: 200
}

a.nav-link:hover, a.nav-link:active, a.nav-link:focus, a.nav-link:hover {
    color:#ffffff;
    font-weight: 500;
}

.site-header{
    background: RGBA(19,11,13,0.5);
    position:fixed;
    width:100%;
    z-index:100;
    border-bottom:0px;
}

.linkedin {
    margin-right: 3px;
}

.linkedin img {
    width: 44px;
}

.section-1 {
    position: relative;
}

.section-1 .cont-1 {
    top: 61%;
    left: 14%;
    line-height: 2.099vw;
}

.section-1 .text-1 {
    color:#3e3e3e;
    font-size: 1.489vw;
    font-weight:300;
    letter-spacing: -0.038vw;
}

.section-1 .text-1 .big-1{
    font-size: 2.176vw;
    font-weight:700;
}

.section-1 .text-1 .big-2{
    font-size: 2.595vw;
    font-weight:700;
}

.section-1 .text-1 .big-3{
    font-size: 2.863vw;
    font-weight:700;
}

.section-1 .text-1 .big-4{
    font-size: 2.557vw;
    font-weight:700;
}

.section-1 .cont-2 {
    top: 17%;
    left: 61%;
    line-height: 4.809vw;
}

.section-1 .text-2{
    color:#3e3e3e;
    font-size: 1.069vw;
    text-align:center;
    letter-spacing: 0px;
}

.section-1 .text-2 .big-1{
    font-size: 6.031vw;
    font-weight:900;
}

.section-1 .text-2 .big-2{
    font-size: 10.15vw;
    font-weight:900;
}

.section.headline {
    position: relative;
}

.section.headline .cont-1{
    top: 10%;
    left: 12%;
    color: #3e3e3e;
    text-align: center;
    width: 42vw;
    height: 45vw;
}

section.headline .cont-1 .vcc {
    font-size: 5.191vw;
    font-weight: 900;
    font-family: 'Gotham' !important;
    line-height: 4.5vw;
}

.shadow-box {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
}

.paralax {
    height: 6.107vw;
}

.section.item {
    position: relative;
}

.section.item.left .cont-1{
    top:36%;
    left:24.9%;
}

.section.item.right .cont-1{
    top:36%;
    left:58.2%;
}

.section.item .cont-1{
    color:#3e3e3e;
    text-align:center;
    width:17%;
    height:29%;
}

.section.item .item_video{
    position: absolute;
    left: 45%;
    top: 41.4%;
    width: 10vw;
    height: 10vw;
    min-width:0.064vw;
    min-height:0.064vw;
    background-image: url(assets/images/btn_play_inactive.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.section.item .item_video:hover{
    background-image: url('assets/images/btn_play_hover.png');
}

.section.item .vcc{
    font-size: 1.489vw;
    font-weight:200;
    letter-spacing: -0.038vw;
    line-height:1.527vw;
    font-family: 'Gotham' !important;
}

.section.item .big-1{
    font-size: 2.176vw;
    font-weight:700;
    display:block;
    line-height:1.908vw;
    padding-bottom:5%;
}

.vertical-center {
    height:100%;
    width:100%;

    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
    content: " ";
    display: inline-block;
    vertical-align: middle;    /* vertical alignment of the inline element */
    height: 100%;
}

.vertical-center > .text-1 {
    max-width: 100%;

    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
}

.section.contact {
    position: relative;
}

.section.contact .cont-1{
    top:44%;
    left:38.5%;
    color:#3e3e3e;
    text-align:center;
    font-size: 1.489vw;
    font-weight:200;
    line-height:1.908vw;
}

.section.contact .big-1{
    font-size: 2.176vw;
    font-weight:500;
}

*.footer-text {
    font-size: 1.4vw;
    text-align:center;
    color:#fff;
    background:#232323;
    font-weight: 200;
}*

@media screen and (max-width: 500px) {
 .linkedin img {
      width: 30px;
  }

  .custom-logo{
      height: 30px !important;

  }
}