/*
 Theme Name: My Premium Child Theme
 Template: Divi
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*------------------------------------------------------------------------
------------------------- OVERALL EXPLANATION START-----------------------
----------------------------------------------- --------------------------

In this CSS file you will find all effects and elements listed which has been used in the theme.
Everything is set up to fit perfectly in the design and is fully responsive.

However if you want to change specific things either just go in the element with the Divi Builder
and check the CSS Class or CSS Id to find the element in which you want to change things or read my documentation
where I´ve listed all modules and elements with their CSS Classes and/or CSS Ids.

From my experience most customers only want to change following items:

- font sizes (CSS identifier : font-size)
- font thicknesses (CSS identifier : font-weight)
- font colors (CSS identifier : font-color)
- background colors (CSS identifier : background)
- duration of effect (CSS identifier : animation)
- font style (font-style)

To do this just press STRG + F and search for your element via the CSS Class or CSS Id
then find the item you want to change and change the values there.


--------------------------------------------------------------------------
------------------------- OVERALL EXPLANATION END-------------------------
----------------------------------------------- --------------------------*/

@import url("../Divi/style.css");

/* =Theme customization starts here
------------------------------------------------------- */
/* =ALL SIZES - GENERAL CODES */
/* ---------------------------------------------------------------------------------- */
/* --------------------------- HEADER + MENU + GENERAL CSS CODES  ------------------- */
/* ---------------------------------------------------------------------------------- */

/* --------------------------- Adds the top CTA (which is in header.php) and defines all settings for all devices ---------------------- */
#top-cta {
background-color: rgba (0,0,0,0);
text-align: center;
padding: 5px 0 5px;
text-transform: uppercase;
position: fixed;
top: 0;
width: 100%;
z-index: 99997;
}
 
#top-cta a {
color: #00bcd4;
font-size: 28px;
font-weight: 700;
display: inline-block;
}
 
#top-cta a span.cta_gray {
color: #1ABDA6;
text-shadow: 1px 1px 1px #5a5a5a;
}
 
#top-cta .blurb_button {
padding-left: 20px;
}
 
#top-cta a.cta {
background-color: #3c3950;
color: #fff;
}
 
#top-cta a.cta:hover {
background-color:#00bcd4;
}
 
/*-------------------[768px]------------------*/
 
@media only screen and ( max-width: 980px ) {

#top-cta {
padding: 10px 0 10px;
}

#top-cta a {
font-size: 20px;
}

#top-cta .et_pb_promo_button {
padding: 8px 10px;
margin-top: 10px !important;
}
}
 
/*-------------------[480px]------------------*/
@media only screen and ( max-width: 767px ) {

#top-cta {
padding: 7px 0 7px;
}
 
#top-cta a {
font-size: 18px;
}
 
#top-cta .et_pb_promo_button {
padding: 8px 15px;
}
}
 
/*-------------------[320px]------------------*/
@media only screen and ( max-width: 479px ) {

#top-cta {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
line-height: 1.2em;
}
 
#top-cta a {
font-size: 16px;
}
 
#top-cta .et_pb_promo_button {
padding: 8px 10px;
margin-top: 10px !important;
}
}




/* --------------------------- Deletes the white space on posts which appears when you disable comments  ---------------------- */
.single .et_pb_post {
margin-bottom: 0;
padding-bottom: 0;
}
.single #left-area {
padding-bottom: 0;
}

/* --------------------------- Defines that on slide in menu the top header has a specific background color    ---------------------- */
.et_slide_menu_top {
background-color: #3c3950 !Important;
} 

/*--------------------------- Defines position of feedback slider on large desktops  ----------------------------*/
.feedback-slider {
margin-top: -240px;
}

/*--------------------------- Defines the Hover Effect for the Book Button on large desktops ----------------------------*/
.menu-button-1 a:hover {
color:#263249 !important;
}

/*---------------------- shows the secondary menu also in slide in menu----------------------*/
.et_header_style_slide #top-header {
display: block !important;
}

/*-------------------------------------------Height Google Map 1-----------------------------------*/
.custom-map .et_pb_map {
height: 650px !important;
}

/*-------------------------------------------Height Google Map 2-----------------------------------*/
.custom-map-2 .et_pb_map {
height: 450px !important;
}

/* ---------------------------------------------------------------------------------- */
/* ----------------- TOP HEADER CSS CODES FOR SOCIAL MEDIA AND SEARCH  -------------- */
/* ---------------------------------------------------------------------------------- */

/*-------------------------------- defines the top header with social media icons, mail and search form-------------------------------- */
/* top padding*/
    #top-header .container {padding-top: 20px;}
 
/* social icons */
    #top-header .et-social-icon a {font-size: 23px; padding-bottom: 11px;}
    #et-secondary-menu {
            float: left;
            position: absolute;
            padding-top: 12px;
            margin-top: -20px;
            margin-left: -30px;
}
    #et-secondary-menu:after {
            content: '';
            position: absolute;
            top: 0;
            border-bottom: 46px solid rgba(255,255,255,0);
            right: -32px;}
 
/* search menu */
    .search-form {
float: right;
}
    form#mysearchform {
            margin-top: -20px;
            margin-right: -30px;
}   
    input#s {
            border: 0px;
            padding: 15px;
            margin-right: -3px;}
    input#searchsubmit {
            border: 0;
            padding: 15px 19px;
        color:#fff;}
/* colors */
    /* changes the social icon background colors */ #et-secondary-menu {background: #00bcd4;}
    /* changes the social icon angled edge color */ #et-secondary-menu:after {border-left: 32px solid #00bcd4;}
    /* changes the search form input background color */ input#s {background-color: #fff;}
    /* changes the search form button and font colors */ input#searchsubmit {background-color: #00bcd4; color:#fff;}
    /* changes the search form button color on hover */ input#searchsubmit:hover {background-color: #00bcd4;}




/* ---------------------------------------------------------------------------------- */
/* ------------ ANIMATION(HOVER EFFECT CSS CODES FOR THE DIFFERENT BLURBS  ---------- */
/* ---------------------------------------------------------------------------------- */

/*--------------------------- Defines the Blurb Hover Effect from 4 Features Blurbs ----------------------------*/

.hoverblurb-features:hover {
background: #fff !important;
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hoverblurb-features:hover span.et-pb-icon {
color: #263249 !important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hoverblurb-features:hover h4 {
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*--------------------------- Defines the Blurb Hover Effect from 3 Advantages Blurbs----------------------------*/

.hoverblurb-advantages:hover {
background: #fff !important;
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hoverblurb-advantages:hover span.et-pb-icon {
color: #263249 !important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hoverblurb-advantages:hover h4 {
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*--------------------------- Defines the Hover Effect from the call area ----------------------------*/
.callrow:hover {
background: #3c3950 !important;
color: #fff!important;
font-color: #fff;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.callrow:hover span.et-pb-icon {
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.special-offer:hover {
background: #1ABDA6 !important;
color: #3c3950!important;
font-color: #3c3950;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.special-offer:hover span.et-pb-icon {
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*--------------------------- Defines the Hover Effect for the blurbs that they appear bigger ----------------------------*/
.blurb-scale .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

.blurb-rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.5s ease-out;
}

.blurb-rotate:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}


/*--------------------------- Defines the Hover Effect from the 3 images ----------------------------*/

.tilt.et_pb_image {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
border: 0px solid #fff;
}
 
.tilt.et_pb_image:hover {
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-o-transform: rotate(5deg) scale(1.1);
transform: rotate(5deg) scale(1.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 0px solid #fff;
}

/*--------------------------- Defines the Hover Effect from the buttons to lift them up a little bit  ----------------------------*/
.button-lift:hover{
margin-top: -10px!important;
margin-bottom: 10px !important;
}



/* ---------------------------------------------------------------------------------- */
/* ------------------------------- DIVIDER LINES CSS CODES -------------------------- */
/* ---------------------------------------------------------------------------------- */


/* -------------------------------------- defines the different divider lines -----------------------------------*/
hr.line-blue-left {
        border: 0;
        height: 2px;
        background-color: #3c3950;
        width: 66px;
        margin-left: 0px;
}    

hr.line-middle-white {
        border: 0;
        height: 2px;
        background-color: #fff;
        width: 66px;
}    

hr.line-white-left {
        border: 0;
        height: 2px;
        background-color: #fff;
        width: 66px;
        margin-left: 0px;
}    

hr.line-blue-left-big {
        border: 0;
        height: 6px;
        background-color: #3c3950;
        width: 66px;
        margin-left: 0px;
}    

hr.line-blue-middle-big {
        border: 0;
        height: 6px;
        background-color: #3c3950;
        width: 99px;
}    



/* -------------------------------------------------------------------------------------------- */
/* ------------------------------- CSS CODES FOR ROOMS OVERVIEW PAGE -------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* --------------------------- Defines the Appereance of the rooms overview page which uses the blog/post structure ---------------------- */
.et_pb_blog_0 .et_pb_image_container :hover {
    color: #000;
    outline: 5px solid #00bcd4;
    inline-offset: -50;
}


/* --------------------------- Defines the Appereance of the rooms overview + home page read more button which uses the blog/post structure ---------------------- */
.et_pb_blog_0 .et_pb_post .more-link {
border-width: 1px;
border-style: solid;
border-color: #3c3950;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 12px;
text-transform: uppercase !important;
color: #fff;
background-color: #3c3950;
position: relative;
top: 25px;
box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}

.et_pb_blog_0 .et_pb_post .more-link:hover{
border-width: 1px;
border-style: solid;
border-color: #00bcd4;
color: #fff !Important;
background-color: #00bcd4;
}



/* -------------------------------------------------------------------------------------------- */
/* ---------------- RESPONSIVE BEHAVIOUR SPECIAL CSS CODES FOR OPTIMAL APPEARANCE------,------- */
/* -------------------------------------------------------------------------------------------- */



@media all and (min-width: 1025px) and (max-width: 2600px) {

/* ---------------------------------------Zoom Effect Slider --------------------------------*/
.zoom-effect .et_pb_slide {
background-size: 100% auto;
}

.zoom-effect .et_pb_slide.et-pb-active-slide {
animation: zooming 16s;
}

@keyframes zooming {
0% {
background-size: 100% auto;
}

100% {
background-size: 120% auto;
}
}

/* ---------------------------------------changes size of hamburger menu icon --------------------------------*/
.mobile_menu_bar:before {
font-size: 54px;
background-color: #3c3950 !Important;
padding: 12px !Important;
}


/*--------------------------------Disables the mobile Book Button on larger devices ---------------------------*/
#top-cta {
display: none;
}
}


@media all and (min-width: 981px) and (max-width: 1024px) {

/*---------------------------------------- Disables the text as it would be too long on tablets-------------------------------*/
.rooms-text {
display: none !important;
}

/*-------------------------------------------Defines marign of 3 images in header on tablets -----------------------------------*/
.feedback-slider {
margin-top: -200px;
}

/*-------------------------------------------Disables the Book Button on tablets -----------------------------------*/
#top-cta {
display: none;
}

/* ------------------------------------------- Sets background color and frame for mobile menu ---------------------------*/
.mobile_menu_bar:before {
background-color: #3c3950 !Important;
padding: 6px !Important;
}


/* ------------------------------------------- Disables the social icons on rooms page ---------------------------*/
.social-icons-rooms {
display:none !important;
}
}

@media all and (min-width: 480px) and (max-width: 980px) {

/*-------------------------------------------Defines marign of 3 images in header on mobiles -----------------------------------*/
.feedback-slider {
margin-top: -140px !important;
}

/*-------------------------------------------Defines marign of 3 buttons in header on mobiles -----------------------------------*/
.button-header {
margin-bottom: 80px !important;
}

/*----------------------------------------------- disables the search form on mobile ------------------------------------------- */
.search-form { 
display: none;
}

/* =Set Top Header (with primary menu) to be fixed on mobile */
.et_fixed_nav #main-header {
margin-top: 55px;
}


/* ------------------------------------------- Sets background color and frame for mobile menu icon ---------------------------*/
.mobile_menu_bar:before {
background-color: #3c3950 !Important;
padding: 4px !Important;
}
}

@media all and (min-width: 1px) and (max-width: 479px) {

/*-------------------------------------------Defines marign of 3 images in header on mobiles -----------------------------------*/
.feedback-slider {
margin-top: -100px !important;
}

/*-------------------------------------------Defines marign of 3 buttons in header on mobiles -----------------------------------*/
.button-header {
margin-bottom: 40px !important;
}

/*-------------------------------------------Defines marign of the buttons in rooms overview -----------------------------------*/
.button-rooms {
margin-bottom: 40px !important;
margin-top: 20px !important;
}

/*----------------------------------------------- disables the search form on mobile ------------------------------------------- */
.search-form { 
display: none;
}

/* =Set Top Header (with primary menu) to be fixed on mobile */
.et_fixed_nav #main-header {
margin-top: 55px;
}

/* ------------------------------------------- Sets background color and frame for mobile menu icon ---------------------------*/
.mobile_menu_bar:before {
background-color: #3c3950 !Important;

}


/* ------------------------------------------- Prevents the mobile menu from shrinking ---------------------------*/
.et_header_style_slide .et-fixed-header #et-top-navigation, .et_header_style_fullscreen .et-fixed-header #et-top-navigation {
padding: 11px 0 !important;
padding-top: 24px!important;
}
}