/*!
 * BPkertimag.hu custom stylesheet
 */

/*Carusel Control*/
.carousel-control.right {
    background-image: none;
}
.carousel-control.left {
    background-image: none;
}

.carousel-control {
    color: #cccccc;

}

span.glyphicon.glyphicon-chevron-right {
    font-size: 40px;
}

span.glyphicon.glyphicon-chevron-left {
    font-size: 40px;
}



/*Img Resizer*/

.img_resizer {
    max-width: 50%;
    height: auto;

}
/* Navbar*/

.navbar-inverse {
    background: rgb(0,43,97);
background: linear-gradient(90deg, rgba(0,43,97,1) 0%, rgba(0,40,95,1) 21%, rgba(0,60,101,1) 100%);
    border-color: ##0065a4;
    
    /*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/
}

.navbar-inverse .navbar-nav>li>a {
    color: #ffffff;
    padding-right: 25px;
}

.navbar-inverse{
border-color: #d5a73c;
border-bottom-width: 4px;

}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #d5a73c;
  background-color: transparent;
  border-color: transparent;
  /*margin-top: 10px; */
}

/*Underline effect */
.navbar-inverse .navbar-nav > li > a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #d5a73c;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}
.navbar-inverse .navbar-nav > li > a:active::before {
    background-color: #d5a73c;
}
.navbar-inverse .navbar-nav > li > a:hover::before, a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.navbar-brand { 
    height: 90px; 
    padding-top: 10px;   
}

.navbar-brand>img {
    display: block;
    max-width: 45%;
    height: auto;
    z-index: 1;
    position: absolute;
}


@media only screen and (min-width: 320px) {
    .navbar-header {
        width: 100%;
        height: 40px;
        /*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/

    }

    .navbar-brand {
       width: 170px;
       height: 60px;
       z-index: 1;
       position: absolute;

    }
}



@media only screen and (min-width: 425px) {
    .navbar-brand {
        width: 120px;
        height: 40px;
    }

    .navbar-brand {
       width: 170px;
       z-index: 1;
       position: absolute;
    }
}


@media only screen and (min-width: 768px) {
    .navbar-brand {
        width: 170px;
    }

    .navbar-brand>img {
        max-width: 120%;
    }

    .navbar-right {
    margin-right: 0px;
    }
}




.navbar-nav {
padding: 15px 5px 15px 5px;
}

.navbar-right {
font-size: 18px; 
margin-right: 10px;

}

/*Nav Lang*/

@media only screen and (min-width: 768px) {
.nav-lang {
font-size: 12px; 
margin-top: 30px;
padding-left: 1px;
padding-right: 1px;
margin-right: 0px !important;
}
}

@media only screen and (max-width: 425px) {
.nav-lang {
font-size: 12px; 
margin-top: 20px;
padding-left: 38%;
padding-right: 30%;
margin-right: 0px !important;
}
}
@media only screen and (max-width: 320px) {
.nav-lang {
font-size: 12px; 
margin-top: 20px;
padding-left: 30%;
padding-right: 30%;
margin-right: 0px !important;
}
}



/*Nav form*/

#form > .row{
    padding-bottom: 10px;
    padding-top: 0px;
    margin: 0px;
    align-content: right;
}

#form > input{
  color: #ffffff;
  background-color: transparent;
  border-color: #fffffd;
}

#form > button{
  color: #000000;
  background-color: transparent;
  border-color: transparent;
}

.search{

    padding-top: 10px;
    color: #ffffff !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #000;
}

header.carousel {
    height: 50%;
    margin-top: 70px;
}

/*Content */

.product_content{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    
}

a {
    color: #e5b922;
    text-decoration: none;
}




.panel-default {
    border-color: #ddd;
    margin-top: 5%;
}


.text-primary_1 {
    color: #2d5e24;
}

.text-primary_2 {
    color: #70456f;
}

.text-primary_3 {
    color: #e4b000;
}

.text-primary_4 {
    color: #e43e00;
}

.h8, h8 {
    font-size: 18px;
    color: #0065a4;
}


.row {
    margin-right: -15px;
    margin-left: -15px;

    
}

.row_wrap{

padding-top: 30px;
    margin-top: 30px;
}


.page-header-procucts {
    padding-bottom: 9px;
    padding-top: 3%;
    margin: 40px 0 20px;
    text-align: center;
    border-top: 0px solid #eee;
    color: #e5b922;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    text-align: center;
    color: #e5b922;
    border-bottom: none;
}

.page-header > a {
    text-align: center;
    color: #00275e;
}

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

.banner {
  /* this bit of markup is essential */
  position: relative;
  overflow: hidden;

  /* do this shit by yourself */
  /*background: rgba(0, 0, 0, .5) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAF0lEQVQIW2NkYGD4z8DAwMgAI0AMDA4AI3EBBCKrOnQAAAAASUVORK5CYII=');*/
  color: rgb(0, 101, 164);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20;
  font-weight: 1700;
  text-align: center;
  line-height: 100vh;
  letter-spacing: 2px;
}

.banner__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}



.inner_banner {
    position: relative;
}

.pgi_box  {
position: relative;
  top: 85%;
  left: 90%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  padding-bottom: 1%
}

.caption {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
}

.display-2 {
color: #005cb9;
color: #005cb9;
font-style: oblique;
font-weight: 800;
}


/* Footer section */

.sub_footer {
background: rgb(0,43,97);
background: linear-gradient(90deg, rgba(0,43,97,1) 0%, rgba(0,40,95,1) 21%, rgba(0,60,101,1) 100%);
border-top: 2px solid #808080;
border-bottom: 20px solid #e5b922;
   /* padding: 30px 0 70px;*/
}



.footer_text > p {
    color: #fff;
    padding-left: 20px;
    font-size: 14px;
    padding-bottom: 15px;
    padding-top: 15px;
}



.list-unstyled {
    list-style: none;
    padding-left: 20px;
}

.content_wrapper {
    padding-top: 15px;
    
}  

.col-md-8{

    padding-bottom: 15px;

}

.banner__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 115%;
    height: auto;
    min-height: 100%;
    transform: translateX(-50%) translateY(-33%)scale(0.89);
    z-index: -1;
}

.container_main {
    margin-top: 7%;
}

.carousel-caption {
    position: relative; 
    /* right: 15%; */
    /* bottom: 20px; */
    /* left: 15%; */
    /* z-index: 10; */
    padding-top: 20%;
    /* padding-bottom: 20px; */
    /* color: rgba(255, 255, 255, 0.8); */
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.banner {
    position: relative;
    overflow: hidden;
    /* background: rgba(0, 0, 0, 0) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAF0lEQVQIW2NkYGD4z8DAwMgAI0AMDA4AI3EBBCKrOnQAAAAASUVORK5CYII=);*/
    color: rgb(0, 101, 164);

}

.carousel-caption {
    position: relative;
    right: 0%;
    bottom: 0;
    left: 0%;
    z-index: 10;
    padding-top: 15%;
    padding-bottom: 0%;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    font-size: 120%
}

/*Card columns*/

.masonry { /* Masonry container */
    column-count: 3;
    column-gap: 1em;
}

.item1 { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item1 {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
  -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item1 img{max-width:100%;}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

/*Modal*/
.modal-header .close {
    margin-top: -10px;
}

.masonry_oc {
    opacity: 0.8;
    column-count: 3;
    column-gap: 1em;
}

.item1 { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

/*Modal for Parallax */
.modal-header .close {
    margin-top: -10px;
}

.masonry_oc {
    opacity: 0.8;
    column-count: 3;
    column-gap: 1em;
}

.masonry_parallax { /* Masonry container */
    column-count: 2;
    column-gap: 1em;
}

@media only screen and (min-width: 320px) {
    .masonry_parallax {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}


@media only screen and (min-width: 400px) {
    .masonry_parallax {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry_parallax {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry_parallax {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry_parallax {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

.item_parallax {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
  -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item_parallax img{
    max-width:100%;
    border-radius: 5%;
}

.item_parallax { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}



/* Parallax*/

.row_wrap_parallax {
    padding-top: 50px;
    margin-top: 30px;
}


.parallax { 
    /* The image used 
    background-image: url(../assets/parallax/parallax_1.png); */ 
 
    /* Full height */ 
    height: 100%; 
    width: initial;
 
    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
.parallax2 { 
    /* The image used  
    background-image: url(../assets/parallax/parallax_2.png); */ 
 
    /* Full height */ 
    height: 50%; 
 
    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

/* Help Tips*/
.help_content{
    padding: 5px;
}

.target_help {
    padding:5px;
    margin-right:2px;
    margin-bottom:2px;
    float:left;
    }

.helpTips {top:-30px;position:absolute;display:inline-block;padding:1em;border-radius:4px;width:275px;color:#333;background:#fff;line-height:1.25em;box-shadow:0 0 50px rgba(0,0,0,.25);z-index:1;}

.helpTips:after {top: 1.5em;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-width: 10px;margin-top: -10px;}
.helpTips.right:after {right: 100%;border-right-color: #fff;}
.helpTips.left:after {left: 100%;border-left-color: #fff;}

.helpTips .helpTips_title{display:block;font-weight:bold;margin-bottom:.75em;font-size:1.1em;color: #0065a4;}
.helpTips .helpTips_controls{display:block;margin-top:1em;}
.helpTips .helpTips_controls .btn{margin-right:.5em;}

.helpTips.left{right:100%;margin-right:20px;}
.helpTips.right{left:100%;margin-left:20px;}

.imgtext {
    text-align:center;
}

@media only screen and (min-width: 768px) {
.imgtext {
    text-align:left;
     }
}

@media only screen and (min-width: 1023px) {
.imgtext {
    text-align:center;
     }
}

@media only screen and (max-width: 1023px) {
    #myCarousel {
        display: none;
    }
}

/* Lang selector*/

.en:lang(en), .hu:lang(hu){
    font-size: 12px;
    margin-top: -65px;
    font-weight: bold;
}

.hu{
    font-size: 12px;
    margin-top: -65px;
    font-weight: normal;
}

.en, .hu:lang(en){
    font-size: 12px;
    margin-top: -65px;
}

/* Unique header for biocsirak.html only*/

.unique-header {
  background-image: url('/assets/img/header_csira_img.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
}


/* Media Query for Phones and smaller devices */
@media screen and (max-width: 767px) {
  .unique-header {
     display: none; /* Hide the element for phones and smaller devices */
  }
}


/* Media Query for Tablets and larger screens */
@media screen and (min-width: 768px) {
  .unique-header {
    height: 38vh; /* Adjust the height for larger screens */
  }
}

/* Media Query for Desktops and larger screens */
@media screen and (min-width: 1024px) {
  .unique-header {
    height: 50vh; /* Adjust the height for even larger screens */
  }
}