@import url("utilities.css");
@import url("mobile_menu.css");
@import url("pos_slide.css");
@import url("footer.css");



.div_visible { visibility: visible;}
.div_hidden { visibility: hidden;}

/* -------------------------------- UTILITY END ------------------------------  */

/* -------------------------------- CARD ------------------------------  */

.card {position: relative; background-color: #fff; z-index: 1;}
.card h3 { color: #000; text-align: center;}
.card p { color: #000; text-align: center;}

/* -------------------------------- CARD END ------------------------------  */

/* -------------------------------- SQUARE LINKS ------------------------------  */

.square_links {position: relative; background-color: #fff; z-index: 1;}
.div_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}

.square_link:hover .div_overlay {background-color: rgba(0,0,0,0.3);}

.square_link_wrap {
    position: relative;
    padding: 5px 5px;
}

.square_link {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: 5px !important;
}

.square_link img {
    position: relative;
    width: 100%;
    border-radius: 5px;
}
.square_link h3 {
    position: absolute;
    top: 30%;
    left: 10%;
    display: block;
    width: 80%;
    font-family: PTSerif-Regular;
    z-index: 3;
}

.square_link p {
    position: absolute;
    top: 55%;
    left: 10%;
    display: block;
    width: 80%;
    font-family: PTSerif-Regular;
    font-size: 0.8vw;
    line-height: 100%;
    z-index: 3;
}

.link_hr_break {
    position: absolute; 
    width: 80%; 
    top: 50%; 
    left: 10%; 
    height: 1px; 
    background-color: #fff;
    z-index: 3;
}


/* -------------------------------- SQUARE LINKS END ------------------------------  */

/* -------------------------------- NEWS ------------------------------  */


.news_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2);
    z-index: 2;
}

.news { position: relative; background-color: #282828; padding-top: 5vw; padding-bottom: 5vw; z-index: 1 !important;}
.news_link {
    position: relative;
    display: block;
    height: 18vw;
    text-decoration: none;
    background-color: #000;
    border: 0.3vw solid #2f2e2e;
    overflow: hidden;
}

.news_img_wrap {height: 50%; overflow: hidden;}
.news_img_wrap_main {height: 100%; overflow: hidden;}
.news_img_main{
    position: relative;
    width: 100%;
    transition: transform .9s;
}

.news_img {
    position: relative;
    width: 100%;
    transition: transform .9s;
}

.news_link:hover .news_img {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.news_link:hover .news_img_main {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.news_text_wrap_main {
    position: relative;
    height: 100%;
    padding: 10px 20px;
    background-color: #525252;
}

.news_text_wrap {
    position: relative;
    height: 50%;
    padding: 10px 20px;
    background-color: #525252;
}

.news h3 { margin-bottom: 0px !important;}
.news p { margin-bottom: 0px !important;}
.news_text {margin-top: 10px;}


/* -------------------------------- NEWS END ------------------------------  */

/*--------------------------  SPACE DIVIDER -------------------------------*/

.back_divider {position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 0;}

.back_divider_img { width: 100vw; height: 100vh; object-fit: cover;}

.space_div, .space_div_1 { position: relative; width: 100%; height: 30vw; background: none;}

.space_div_small { position: relative; width: 100%; height: 20vw; background: none;}

.white_div { position: relative; height: 20px; background: #fff;}

/*-------------------------- END OF SPACE DIVIDER -------------------------------*/

/*-------------------------- RASPORED MISA -------------------------------*/

.raspored_misa h2 {font-size: 2.0vw;}
.raspored_misa h3 {font-size: 1.4vw; margin-top: 2vw;}
.raspored_misa p {font-size: 1.2vw;}

/*-------------------------- RASPORED MISA END -------------------------------*/

/*-------------------------- STRIP -------------------------------*/

.strip { 
    position: relative; 
    width: 100%;
    padding-top: 5vw;
    padding-bottom: 5vw;
    background-color: #fff;
    z-index: 1 !important;
}

#strip_book {
    position: relative;
    width: 80vw;
    margin-left: 10vw;
    height: 25vw;
    z-index: 1 !important;
}


.strip_headline {position: absolute; top: 8vw; left: 15vw; width: 30vw;}
.strip h2 { position: relative;  color: #525252;}
.strip p { position: relative; color: #525252;}
.strip_all { 
    display: block; 
    position: relative;
    width: 40vw;
    margin-left: 50vw;
    margin-top: 3vw;
    border: 2px solid #525252;
    color: #525252; 
    text-decoration: none; 
    z-index: 2;
}
.strip_all:hover { color: #fff; background-color:#525252;}
/*-------------------------- STRIP END -------------------------------*/


@media screen and (max-width: 990px) {
.news_link {height: 50vw;}  
.news_img_wrap {height: 50%;}
.news_img_wrap_main {height: 50%;}
.news_text_wrap_main {height: 50%;}
.news_text_wrap {height: 50%;}

.card h3 {font-size: 3vw;}
.card img { width: 100%;}
.square_link h3 { top: 30%; font-size: 3vw;}
.square_link p { font-size: 2vw;}

.news h2 { font-size: 4vw;}
.news h3 {font-size: 3vw; }
.news p { font-size: 2vw;}  

.space_div, .space_div_1 { height: auto;}
.raspored_misa h2 {font-size: 3.0vw;}
.raspored_misa h3 {font-size: 2.5vw; margin-top: 2vw;}
.raspored_misa p {font-size: 2vw;}

.strip_headline {position: absolute; top: 10vw; left: 12vw; width: 30vw;}
.strip h2 { font-size: 3vw;}
.strip p { display: none;}
.strip_all { width: 80vw; margin-left: 10vw; font-size: 2.5vw;}
    
}


@media screen and (max-width: 767px) {
.news_link {height: auto;}  
.news_img_wrap {height: auto;}
.news_img_wrap_main {height: auto;}
.news_text_wrap_main { width: 100%; height: auto;}
.news_text_wrap {height: auto;}

.card h3 {font-size: 5vw;}

.square_link h3 {top: 35%; font-size: 5vw;}
.square_link p {font-size: 3.5vw;}

.news h2 { font-size: 6vw;}
.news h3 {font-size: 5vw; }
.news p { font-size: 3.5vw;}  

.space_div, .space_div_1 { height: auto;}
.raspored_misa h2 {font-size: 5vw;}
.raspored_misa h3 {font-size: 4vw; margin-top: 2vw;}
.raspored_misa p {font-size: 3vw;}

.strip_headline {position: absolute; top: 10vw; left: 14vw; width: 30vw;}
.strip h2 { font-size: 4vw;}
.strip p { display: none;}
.strip_all { width: 80vw; margin-left: 10vw; font-size: 3vw;}
    
    
}