@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+Display:100,300,400,500,700&display=swap,subset=latin,latin-ext);

:root {
    --darkblue: #242447;
    /*--blue: #000064;*/
    --blue: #1e1e52;
    --sand: rgb(234,218,212);
    --red: #AB0000;
}

body,h1,h2,h3,h4,h5,h6,p,a,span,label,input,li,ul,ol,div{
    font-family: 'Montserrat', sans-serif;
}

.noto{
    font-family: 'Noto Serif Display', serif !important;
}

html {font-size: 100%;} /*16px*/

body{
    margin: 0;
    padding: 0;
}

::selection {
  background: #ac2d49; /* WebKit/Blink Browsers */
  color: #fff;
}
::-moz-selection {
  background: #ac2d49; /* Gecko Browsers */
  color: #fff;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(172, 45, 73, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(172, 45, 73, 0.6) !important;
  outline: none !important;
}

div:focus{
	outline: none !important;
}

h1{
    font-size: 3.052rem;
    line-height: 1.1;
    font-family: 'Noto Serif Display', serif !important;
    font-weight: 600;
    color: var(--darkblue);
}

h2{
    font-size: 2.241rem;
    line-height: 1.1;
    color: var(--darkblue);
    font-family: 'Noto Serif Display', serif !important;
}

h3 {
    font-family: 'Noto Serif Display', serif !important;
    font-size: 1.8rem;
}

h4 {
    font-size: 1.563rem;
    font-family: 'Noto Serif Display', serif !important;
}

h5 {
    font-size: 1.25rem;
    font-family: 'Noto Serif Display', serif !important;
}

small, .text_small {font-size: 0.8rem;}

a{
	transition: all 0.25s;
}

p{
    color: var(--darkblue)
}

a:hover,
a:focus{
	text-decoration: none;
}

.bg{
	background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.clear{
    clear: both;
}

.mc{
    display: flex !important;
    align-items: center;
    justify-content: center;
}



.wrapper{
    margin-top: 130px;
}

/* LOGO */

#start .noto{
    color: var(--blue);
    font-weight: 700;
}

.navbar .brand h2{
    font-size: 40px;
    line-height: 41px;
    color: var(--blue) !important;
    font-weight: 600;
    margin: 0;
}

#start .menu h1{
    position: relative;
    display: inline-block;
    margin-bottom: 23px;
}

#start .menu h1:after{
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 3px !important;
    content: '';
    border-radius: 100%;
    background: #fff;
}

#start .menu h2{
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.3rem;
}

ul.channels{
     position: relative;
     z-index: 1;
}

#start ul.languages,
ul.channels{
    padding: 0;
    margin-top: 50px;
}

#start ul.languages li{
    padding: 0 8px;
}

ul.channels li{
    padding: 0 8px;
}

#start ul.languages li:before,
ul.channels li:before{
    content: '';
    display: none;
}

#start ul.languages img{
    width: 26px;
    height: 16px;
    position: absolute;
    margin-top: -20px;
    left: 50%;
    margin-left: -13px;
}

.fa-youtube{
     color: #FF0000;
}

.fa-facebook-square{
     color: #4267B2;
}

/* BUTTONS */

.btn{
    border-radius: 0;
}

.btn-primary{
    background: var(--red);
    border: none;
    font-family: 'Noto Serif Display', serif !important;
    text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background: var(--blue);
    border: none;
}

/* HOMEPAGE */

#start{
    background: rgb(219,201,189);
    background: linear-gradient(90deg, rgba(219,201,189,1) 0%, rgba(227,210,200,1) 50%, rgba(210,221,210,1) 100%);
}

#start .menu{
    height: 100vh;
}

#start ul li{
    display: block;
    position: relative;
}

#start ul li a{
    color: var(--blue);
    font-weight: 600;
}

#start ul li:before{
    content: url(../images/navicon.svg);
    height: 30px;
    width: 28px;
    padding: 4px;
    position: absolute;
    opacity: 0;
    top: 7px;
    transition: all 0.25s;
    left: 40%;
}

#start ul li:hover:before{
    opacity: 1;
    left: calc(50% - 110px);
}

#start .startMenu{
    padding: 0;
    margin: 80px 0 0 0;
    list-style: none;
}

#start .picture{
    position: absolute;
    right: 0;
}

#start img{
    height: 100vh;
    width: auto;
    max-height: auto;
    right: 0;
    position: relative;
    margin-left: auto;
    margin-right: 0;
}

#start .kotta{
    position: absolute;
    width: 370px;
    height: 315px;
    bottom: 0;
    background-size: initial !important;
    background-position: 39% 30% !important;
}

#start .startMenu a{
    font-size: 1.6rem;
}

.navbar .brand h3{
    color: var(--blue);
    font-size: 18px;
    margin: 0;
}


/* HEADER */

.navbar{
    background: #fff;
    -webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
}

.nav-link{
    /*color: var(--sand);*/
    color: #cfb3a9;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    
}
.dropdown-item{
    font-family: 'Noto Serif Display', serif !important;
    color: var(--blue);
    text-align: center;
}
.nav-link:hover,
.nav-link:focus{
    color: var(--blue);
}


.subpageHeader{
    position: relative;
}

.subpageHeader,
.subpageHeader .mc{
    height: 440px;
}

.subpageHeader .layer{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(51,51,102,.5);
}

.subpageHeader h1{
    color: #fff;
    position: relative;
}

.subpageHeader h1:after{
    position: absolute;
    display: none;
    left: 2%;
    bottom: -10px;
    width: 96%;
    height: 3px !important;
    content: '';
    border-radius: 100%;
    background: var(--red)
}

/* FOOTER */

footer{
    background: var(--blue);
    padding: 27px 0 27px 15px;
}

footer p,
footer a{
    color: #fff;
    margin: 0;
}

footer a:hover,
footer a:focus{
     color: var(--sand);
}

footer ul{
     padding: 0;
     margin: 0;
}


/* STATIC */

.staticPage{
    padding: 50px 0;
    position: relative;
}

.bgLayer{
    position: fixed;
    z-index: -1;
    top: 130px;
    max-width: 100%;
}

.staticPage h2,
#works h2,
#artists h2,
#news h2{
    position: relative;
    margin: 50px 0 60px;
    display: inline-block;
}

.staticPage h2:after,
#works h2:after,
#artists h2:after,
#news h2:after{
    position: absolute;
    left: 2%;
    bottom: -10px;
    width: 96%;
    height: 3px !important;
    content: '';
    border-radius: 100%;
    background: var(--red)
}

.contactInner{
    -webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    background: #fff;
    padding: 40px;
}

.contactInner .form-control{
    border: 1px solid var(--sand);
    border-radius: 0;
}



/* MŰVÉSZEK */

#artists{
    padding: 100px 0;
    position: relative;
    min-height: 100vh;
}

#artists .card{
    border: none;
}

#artists .item{
    border: none;
    border-radius: 0;
    padding: 0;
    -webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
}

#artists .item .card-body{
     background: #fff !important;
     padding: 0.7rem !important;
}

#artists .item .image{
    height: 350px;
}

#artists .item .image .btn{
    opacity: 0;
    transition: all 0.25s;
}

#artists .item .image:hover .btn,
#artists .item .image:focus .btn{
    opacity: 1;
}

#artists .item h4{
    color: var(--blue);
    text-align: left;
    font-size: 1rem;
    margin: 0;
}

/* HIREK */

#news .item{
    background: rgb(234,218,212);
    background: linear-gradient(90deg, rgba(234,218,212,1) 0%, rgba(255,249,247,1) 56%, rgba(255,249,247,1) 100%);
}

#news .item .left{
    border-right: 1px solid var(--darkblue)
}

#news .item p.date{
    font-family: 'Noto Serif Display', serif !important;
    margin: 0;
}

#news .item p.day{
    font-size: 4rem;
    font-family: 'Noto Serif Display', serif !important;
    margin: 0;
}

#news .item .desc p{
    margin-bottom: 4px;
}

#news .item .desc p,
#news .item .desc p a{
    font-family: 'Noto Serif Display', serif !important;
    font-size: 1.2rem;
    font-weight: 500;
}

#news .item .desc p a{
    color: var(--red)
}

#news .item p.title{
    font-size: 2rem;
    margin-bottom: 0;
}

#news .item h3{
    color: var(--red);
    font-size: 1.6rem;
}



/* MŰJEGYZÉK */

#works,
#news{
    padding: 100px 0;
    position: relative;
}

#works h2{
    cursor: pointer;
}

#works table tr{
    background: rgb(244,235,232,181);
    background: linear-gradient(90deg, rgba(244,235,232,1) 0%, rgba(249,245,244,1) 100%);
    color: var(--blue);
    border: none;
    margin-bottom: 5px;
}

#works table tr.space{
    background: #fff;
}

#works table td{
    border: none;
}

#works table td.name{
    font-family: 'Noto Serif Display', serif !important;
}

#works table td.link{
    text-align: right;
}

#works table td a{
    color: var(--blue)
}

/* GALÉRIA */

.galleryList h4{
    font-size: 1.2rem;
}

.galleryList p{
    font-size: .8rem;
}

.galleryList .item{
    box-shadow: none !important;
}

.galleryList .item .inner {
    -webkit-box-shadow: 0px 0px 22px -8px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 22px -8px rgb(0 0 0 / 75%);
}

@media (max-width: 768px){
     .wrapper{
         margin-top: 78px;
     }
 
     .d-none{
         display: none !important;
     }
 
     h1,
     h2{
         font-size: 1.6rem;
     }
 
     h3{
         font-size: 1.3rem;
     }
 
     h4{
         font-size: 1.2rem;
     }
 
     .bgLayer{
         top: 90px;
     }
 
     #start .kotta{
         display: none;
     }
 
     .staticPage,
     #artists,
     #news,
     #works{
         padding: 30px 0;
     }
 
     #news .item{
         width: calc(100% - 60px);
         margin-left: 30px;
         padding-left: 25px;
         padding-right: 25px;
     }
 
     #news .item .desc{
         text-align: center;
         padding-top: 15px;
     }
 
     #news .item .left{
         border-right: none;
         border-bottom: 1px solid var(--darkblue);
     }
 
     #news .item p.title{
         font-size: 1.7rem;
     }
 
     #news .item .desc p, #news .item .desc p a{
         font-size: 1rem;
     }
 
     .card-deck{
         padding: 0 30px;
     }
 
     .contactContainer{
         padding: 0 60px;
     }
 
     .contactInner{
         padding: 0 15px 15px;
     }
 
     .contactInner h2{
         margin: 30px 0;
     }
 
     .contactPage .formSide h2{
           font-size: 1.3rem;
      }
 
     .mobilwave {
         height: 300px;
         width: 117px;
         position: absolute;
         bottom: 0;
         right: 0;
         z-index: 40;
         background-size: cover !important;
         background-position: 0 50px !important;
         background-repeat: no-repeat !important;
     }
 
     .mobilwave {
         height: 250px;
         width: 251px;
         bottom: 0;
         right: 0;
         background-position: 23px 41px !important;
       }
 
     #artists .item .image{
         height: 180px;
         background-position: 0 0 !important;
         margin-bottom: 0;
     }
 
     .staticPage h2, #works h2, #artists h2, #news h2{
         text-align: center;
         margin-top: 10px;
         margin-bottom: 35px;
     }
 
     footer p, footer a{
         font-size: 15px;
     }
 
     #news .item p.date{
         font-size: 1.45rem;
         text-transform: uppercase;
     }
 
     
 
     .galleryList h4{
         font-size: 1.1rem;
     }
 
     .subpageHeader, .subpageHeader .mc{
         height: 350px;
     }
 
     .galleryList .item .image{
           margin-bottom: 0px !important;
     }
 
 }

 @media (min-width: 700px) and (max-width: 992px){
     .mobilPicture{
          height: 1200px;
     }
 }
 

@media (min-width: 768px) and (max-width: 992px){

}

@media (min-width: 993px) and (max-width: 1200px){

}

@media (min-width: 1201px) and (max-width: 1366px){
     .navbar .container, 
     footer .container{
          max-width: 1250px;
     }
}

@media (min-width: 1367px){
     .navbar .container, 
     footer .container{
          max-width: 1250px;
     }

}


@media (min-width: 700px) and (max-width: 992px){
     
     #sidebar #dismiss{
          z-index: 99;
          position: absolute;
     }
     .infomenus{
          width: 50%;
          position: absolute;
          left: 0;
          z-index: 98
      }

      .other{
          width: 50%;
          position: absolute;
          right: 0;
          padding-top: 15%;
          z-index: 98
      }

      #start ul.languages, ul.channels{
          margin-top: 0;
          position: relative;
          z-index: 1;
      }

      #sidebar ul.components {
          padding-top: 0
      }

      .mobilPicture{
          position: relative;
      }

      .mobilwave{
          position: absolute;
          bottom: 0;
          height: 450px !important;
          width: 450px !important;
          z-index: 950 !important;
      }

      .menuflow{
          right: 0 !important;
          height: 350px !important;
          width: 350px !important;
          position: absolute;
          background-position: 45px 59px !important;
          background-size: cover !important;
          background-repeat: no-repeat !important;
          margin-top: 0 !important;
      }
 }