/* Teuta CSS */

/* RESET *************************************/
    *{	
        box-sizing:border-box;
        margin:0;}

/* Osnovno uređivanje HTML-a *****************/    
    body{
        font-family:"Poppins-Regular";
        font-size:16px;
        color:#333;}
    @font-face {
        font-family: "Roboto-Regular";
        src: url(fonts/Roboto-Regular.ttf);}
    @font-face {
        font-family: "Roboto-MediumItalic";
        src: url(fonts/Roboto-MediumItalic.ttf);}
    @font-face {
        font-family: "Roboto-BoldItalic";
        src: url(fonts/Roboto-BoldItalic.ttf)
    }
    @font-face {
        font-family: "AkayaTelivigala-Regular";
        src: url(fonts/AkayaTelivigala-Regular.ttf);}
    @font-face {
        font-family: "PlayfairDisplay";
        src: url(fonts/PlayfairDisplay-VariableFont_wght.ttf);}
    h1,h2{
        font-family: "PlayfairDisplay";
        font-size: 30px;
    }
    ul{	
        list-style-type:none;
        padding:0;
    }
    a{	
        text-decoration:none;
        color:#343434;
    }
    p{
        font-family: "Roboto-Regular";
        font-size: 18px;
        letter-spacing: -0.4px;
    }
    #katedrala{
        position: absolute;
        z-index: 0;
        top:120px;
        user-select: none;
    }
        
/* Layout ************************************/
body{
    background:url(slike/katedrala_web2.jpg);
    background-position: center top;
}
.wrapper{
    max-width:1050px;
    margin:0 auto;}

/* Navigacija ********************************/
nav{
    display: flex;
    border-bottom: 1px solid black;
    height:140px;
}
#myNav{
	display: none;}
#hamburger{
	display: none;}
#teuta{
    width: 20%;
}
#navigacija{
    width: 75%;
}
#social{
    margin-top: 53px;
    margin-left: 1%;
    width:4%;
    text-align: center;
}
#teuta h1{
    margin-top:35px;
    margin-bottom: 35px;
    font-family:"AkayaTelivigala-Regular";
    font-size: 55px;
    color: #343434;
    letter-spacing: -0.4px;
}
#navigacija ul{
    display:flex;
    margin-top:56.5px;
    justify-content: right;
}
#navigacija ul li{
    margin:0 3px;
}
#navigacija ul li a{
    font-family: "PlayfairDisplay";
    font-weight: 400;
    font-size: 18px;
    padding:5px 15px;
    border: #343434 solid 1px;
    letter-spacing: -0.4px;
    position: relative;
}
#navigacija ul li a:hover{
    color:white;
    transition: color 1s;
}
#navigacija ul li a::before {
    background: #343434;
    opacity: 0.9;
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
    color:white;
}     
#navigacija ul li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
#social a img:hover{
    transform: scale(1.1) rotate3d(0, 1, 0, 360deg);
    transition: 1.5s ;
}

/* HEADER ************************************/
header{
    display: flex;
    padding-top: 60px;
}
:root{
    --showAfter: 2s;
    --showAAfter: 4s;
    --showAAAfter: 7s;
    --showAAAAfter: 10s;
}
@keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
header h1{
    font-size: 50px;
    opacity: 0;
    transform: translateX(3rem);
    animation: fadeInUp 2s ease forwards;
}
#header1{
    width: 55%;
    margin-right: 5%;
}
#header1 h1 img{
   margin-left: 10px;
   margin-bottom: 4px;
   opacity: 0;
    transform: translateX(3rem);
    animation: fadeInUp 2s ease calc(var(--showAfter)) forwards;
}
#star-2{
    display: none;
}
#header1 p{
    margin-top: 22px;
}  
#header1 p:nth-of-type(1){
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 3s ease calc(var(--showAAfter)) forwards;
}
#header1 p:nth-of-type(2){
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 3s ease calc(var(--showAAAfter)) forwards;
}
#header1 div{
    font-family: "PlayfairDisplay";
    font-weight: 400;
    font-size: 18px;
    margin-top: 22px;
}
#header1 div a{
    display: inline-block;
    padding:5px 15px;
    border: #343434 solid 1px;
    color: white;
    background: #343434;

    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 3s ease calc(var(--showAAAAfter)) forwards;
    
}
#header1 div a:hover{
    color:#343434;
    background: white;
    transition: 0.5s;
    padding:3px 13px;
    margin:2px 0 0 2px;
}

#header2{
    text-align: right;
    width: 40%;
}
#header2 img{
    padding:10px;
    border:1px #343434 solid;
    opacity: 0;
    transform: translateX(2rem);
    animation: fadeInUp 2s ease calc(var(--showAfter)) forwards;
}

/* O nama ************************************/

#onama{
    display:block;
    padding-top: 70px;
}
#onama-naslov h1{
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}
#onama-tekst{
    display:flex;
}
#onama-tekst p{
    text-align: justify;
    margin: 30px 40px;
    line-height: 1.6;
}
#onama-tekst img{
    align-self: center;
}
#dobrodošli p{
    text-align: center;
    margin-bottom: 60px;
}
#gosti h2{
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.4px;
}
#dojmovi{
    display:flex;
    margin-top:30px;
    margin-bottom: 2px;
}
#dojmovi div:nth-of-type(2){
    margin:0 10%;
}
#dojmovi div{
    width:30%;
    padding:20px;
    border: #343434 solid 1px;
}
#tim2{
    display: none;
}

/* Apartman ******************************************/
#apartman{
    display:block;
    padding-top: 70px;
}
#apartman-naslov{
    text-align: center;
}
#apartman-tekst p{
    margin:30px 0;
    line-height: 1.6;
    text-align: center;
}
#apartman-ikone{
    display: flex;
    justify-content: center;
}
#apartman-ikone div{
    margin:0 12px;
}
#apartman-ikone2{
    display: none;
}
#usluge-naslov h2{
    margin-top: 60px;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.4px;
}
#usluge-ponuda{
    display: flex;
    margin:30px 0;
    justify-content:center;
}
#usluge-ponuda div{
    margin:0 14.5px;
    padding:5px 15px;
    border-radius: 10px;
    border: #343434 solid 1px;
    background: #343434;
    color: white;
}
#usluge-ponuda div:first-of-type{
    margin-left: 0;
}
#usluge-ponuda div:last-of-type{
    margin-right: 0;
}
#prijava p{
    padding-top: 30px;
    text-align: center;
}
#galerija-naslov h2{
    margin: 60px 0 0 0;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.4px;
}
.gallery{
    font-size:0px;
    margin:0 auto;}
.gallery a img{
    border: #343434 1px solid;
    opacity:0.9;}
#main-slika{
    opacity:1;}
#main-slika{
    display:block;
    text-align:center;
    margin-bottom:10px;}
#druge-slike{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
#druge-slike2{
    margin-top:10px;
    display: flex;
    justify-content: center;
}
#main-slika img{
    margin-top: 60px;
}
#main-slika img:hover{
    padding:5px;
    background-color: none;
    border: #343434 solid 1px;
    transition: 0.5s;
    margin-top: 50px;
}
.gallery img:hover{
    opacity:1;
    cursor:pointer;}
.gallery a{
    margin:0 15px 0 15px;}

/* O Zagrebu ******************************/
#ozagrebu{
    padding-top: 70px;
    display:block;
}
#ozagrebu-naslov{
    text-align: center;
}
#ozagrebu-tekst p{
    margin:30px 0;
    line-height: 1.6;
    text-align: justify;
}
#zagreb-slike{
    display: flex;
    justify-content: center;
}
#zagreb-slike div:nth-of-type(2){
    margin:0 75px;
}

/* Kontakt **********************************/
#kontakt{
    padding-top: 70px;
    display:block;
}
#kontakt-naslov div {
    display: flex;
    justify-content: center;
}
#kontakt-naslov h1{
    text-align: center;
}
#kontakt-naslov p{
    text-align: center;
    margin: 30px 0;
    padding:5px 15px;
    border:#343434 solid 1px;
    border-radius: 10px;
    background: #343434;
    color: white;
}
#kontakt-info{
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    margin-top: 30px;
}
#kontakt-info div{
    display: flex;
    justify-content: center;
    margin:0 40px;
}
#kontakt-info div p{
    margin-top: 5px;
    margin-left: 20px;
}
.iframe{
	height:500px;}

iframe{
	height:100%;
    width: 100%;}

/* footer ***************************************/
footer{
    background: #343434;
    color:white;
}
.footer{
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    border-bottom: white solid 1px;
}
.footer a{
    color: white;
    font-size: 18px;
    font-family: "Roboto-Regular";
}
.footer article:nth-of-type(2), .footer article:nth-of-type(3), .footer article:nth-of-type(4){
    width:25%;
    text-align: center;
    margin-top: 12px;
}
.footer article:first-of-type{
    width:12.5%;
    text-align: left;
}
.footer article:first-of-type h1{
    font-family: "AkayaTelivigala-Regular";
    font-size: 35px;
}
.footer article:last-of-type{
    width:12.5%;
    text-align: right;
    margin-top: 12px; 
}
.footer article:last-of-type ul li{
    display: flex;
    justify-content: right;
}
.footer article:last-of-type ul li div{
    margin-left:10px;
    margin-top: 1.5px;
}

#MB10{
    text-align: center;
    color: white;
    padding-bottom: 20px;
    padding-top: 20px;
}
.content{
    display: none;
}
.loader{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #16191e;
    position: absolute;
}
.loader>div{
    height: 100px;
    width: 100px;
    border: 15px solid #45474b;
    border-top-color: #cab586;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    animation: spin 1.5s infinite linear;
}
@keyframes spin{
    100%{
        transform: rotate(360deg);
    }
}
/* Tablet/Mobile *************************************************/

@media (max-width:1049px){
    #MB10{
        margin-left:10px;
        margin-right: 10px;
    }
    nav{
        height:50px;
        top:0;
        position: fixed;
        display:flex;
        justify-content:center;
        z-Index: 1;
        background:url(slike/katedrala_web2.jpg);
        border-bottom: black 1px solid;
        width: 100%;
        align-items: center;
    }
    #teuta h1{
        margin:0 0;
        font-family:"AkayaTelivigala-Regular";
        font-size: 28px;
        color: #343434;
        letter-spacing: -0.4px;
    }  
    #social a img:hover{
        transform: none;
    }
    #hamburger{
        margin-top:0px;
        font-size: 24px;
        display:block;
        text-align: center;
        line-height:70px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    #social{
        margin-top:3px;
    }
    #social img{
        width: 24px;
    }
    #myNav{
        display: block;}
    #hamburger{
        display: block;}
    .overlay{
        height:100%;
        width:0;
        position:fixed;
        z-index:1;
        top:0;
        left:0;
        background-image: linear-gradient( 360deg, rgb(252,251,247) 0%, rgb(227,216,189) 95%, rgb(201,180,131) 100%);
        overflow-x:hidden;
        transition:1s;}
    .overlay-content{
        position:relative;
        top:100px;
        width:100%;
        text-align:center;
        margin-top:0px;}
    .overlay a{
        padding:30px;
        text-decoration:none;
        font-size:30px;
        color:black;
        display:block;
        font-family: "PlayfairDisplay-Medium";
        transition:0.3s;}
    .overlay a:hover, .overlay a:focus{
        color: #440751;}
    .overlay .closebtn{
        position: absolute;
        top: 10px;
        right: 6%;
        font-size: 60px;}
    .overlay h1 {
        font-family: "AkayaTelivigala-Regular";
        font-size: 35px;
        margin:30px 0 30px 0;
    }
    #ban{
        margin-top: 20px;
    }
    #navigacija ul{
        display: none;
    }
    #teuta{
        width: 18%;
        margin-left: 2%;
    }
    #navigacija{
        width: 60%;
    }
    #social{
        margin-left: 0%;
        margin-right: 4%;
        width:16%;
        text-align: right;
    }
    header{
        display: block;
        padding-top: 80px;
    }
    #header1{
        width: 100%;
        margin-right: 0;
    }
    #header1 h1{
        font-size: 40px;
    }
    #header1 p, #header1 a{
        font-size: 16px;
    }
    #header1 h1, #header1 p{
        text-align: center;
        margin-left:10px;
        margin-right:10px;
    }
    #header1 h1 img{
        display: none;
    }
    #star-2{
        display: block;
        margin:0 auto;
        margin-bottom: 17px;
        opacity: 0;
        transform: translateX(3rem);
        animation: fadeInUp 2s ease forwards;
    }
    #header1 div{
        text-align: center;
    }
    #header2{
        text-align: center;
        width: 100%;
    }
    #header2 img{
        margin-top: 40px;
        padding:10px;
        border:1px #343434 solid;
        opacity: 0;
        transform: translateY(3rem);
        animation: fadeInUp 2s ease calc(var(--showAfter)) forwards;
    }
    #onama-tekst img{
        display: none;
    }
    #gosti h2{
        margin-left: 10px;
    }
    #dojmovi{
        display: block;
    }
    #dojmovi div:nth-of-type(3){
        margin:30px auto;
    }
    #dojmovi div{
        width:50%;
        margin: 0 auto;
        padding:20px;
        text-align: center;
        border: #343434 solid 1px;
    }
    #tim1{
        display: none;
    }
    #tim2{
        display: block;
    }
    #apartman-tekst{
        margin:30px 0;
    }
    #apartman-tekst p{
        margin:0 10px;
    }
    #apartman-ikone{
        display: none;
    }
    #apartman-ikone2{
        display: block;
        margin-top: 60px;
    }
    #ikone2{
        display: flex;
        justify-content: center;
    }
    #ikone-separator{
        height:22px;
    }
    #ikone2 div, #ikone23 div{
        margin:0 12px;
    }
    #ikone23{
        display: flex;
        justify-content: center;
    }
    #usluge-ponuda{
        margin-top: 60px;
        display: block;
    }
    #usluge-naslov h2{
        margin-left:10px;
    }
    #usluge-ponuda div{
        width:500px;
        margin:22px auto;
        padding:5px 15px;
        border-radius: 10px;
        border: #343434 solid 1px;
        background: #343434;
        color: white;
    }
    #usluge-ponuda div:first-of-type{
        margin: 0 auto;
    }
    #usluge-ponuda div:last-of-type{
        margin: 0 auto;
    }
    #usluge-ponuda div p{
        text-align: center;
    }
    #prijava p{
        padding-top: 0;
        line-height: 1.6;
    }
    #galerija-naslov h2{
        margin-left:10px;
    }
    .gallery{
        margin:0 auto;
    }
    #druge-slike, #druge-slike2{
        display: none;
    }
    #ozagrebu-tekst p{
        margin:30px 10px;
    }
    #zagreb-slike div{
        text-align: center;
    }
    #zagreb-slike div img{
        width:80%;
    }
    #zagreb-slike div{
        margin:22px 0;
    }
    #zagreb-slike div:nth-of-type(2) {
        margin: 22px 0;
    }
    #kontakt-naslov p {
        line-height: 1.6;
        margin: 30px 10px;
    }
    #kontakt-info{
        display: block;
    }
    #kontakt-info div {
        width:200px;
        justify-content: left;
        margin:22px auto;
    }
    #userpic{
        padding:0 2.5px;
    }
    #emailpic{
        padding:0.5px 0.5px;
    }
    #locationpic{
        padding:0 3px;
    }
    #kontakt-info div p {
        margin-top: 5px;
        margin-left: 25px;
    }
    .footer{
        margin: 0 10px;
    }
    #footemail, #footadress, #footphone{
        display: none;
    }
    .footer article:first-of-type{
        width:50%;
        text-align: center;
    }
    .footer article:last-of-type{
        width:50%;
    }
    .footer article:last-of-type ul li{
        justify-content: center;
    }
}

@media (max-width:600px){
    nav{
        height:50px;
        top:0;
        position: fixed;
        display:flex;
        justify-content:center;
        z-Index: 1;
        background:url(slike/katedrala_web2.jpg);
        border-bottom: black 1px solid;
        width: 100%;
        align-items: center;
    }
    #teuta h1{
        margin:0 0;
        font-family:"AkayaTelivigala-Regular";
        font-size: 28px;
        color: #343434;
        letter-spacing: -0.4px;
    }  
    #social a img:hover{
        transform: none;
    }
    #hamburger{
        margin-top:0px;
        font-size: 24px;
    }
    #social{
        margin-top:3px;
    }
    #social img{
        width: 24px;
    }
    #header1 h1{
        font-size: 35px;
    }
    #header2 img{
        width: 300px;
    }
    #onama-tekst p{
        text-align: justify;
        margin:30px 10px 30px 10px;
    }
    #dobrodošli p{
        line-height: 1.6;
        margin:0 10px 60px 10px;
    }
    #dojmovi div{
        width: 300px;
    }
    #apartman-tekst p{
        text-align: center;
    }
    #ikone2 div{
        margin:0 4px;
    }
    #ikone23 div{
        margin:0 4px;
    }
    #usluge-ponuda div{
        width:300px;
    }
    #prijava p{
        margin:0 10px;
    }
    #main-slika img{
        width:300px;
    }
    #zagreb-slike{
        display: block;
        text-align: center;
    }
    #zagreb-slike div img{
        width:300px;
    }
}
@media (max-width:300px){
    #header1 h1{
        font-size: 30px;
    }
    #header2 img, #dojmovi div, #usluge-ponuda div, #main-slika img,#zagreb-slike div img {
        width: 260px;
    }
    #ikone2 div img, #ikone23 div img{
        width:48px;
    }
    #usluge-ponuda div p{
        font-size: 17px;
    }
    .gallery a{
        margin:0 auto;
    }
    #kontakt-info div p{
        margin-left: 15px;
    }

}
@media (max-height:600px){
    #main-slika img{
        height:280px;
    }
    .iframe{
        height:280px;}
}