/*
 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");

/* CUSTOM CSS CODES */
/*----------------------------------- PUTS MAIL + PHONE A BIT DOWN on header ------------------------------------*/
#et-info {
padding-top: 12px; /* pushes the Divi info a bit down to match with the button from secondary menu */
}


/*----------------------------------- MENU + SLIDER CSS CODES ------------------------------------*/
.et-pb-arrow-prev, .et-pb-arrow-next{
background-color: rgba(0,0,0,0.5)   /* Defines the Arrow Background Color*/ 
}

.et-pb-arrow-prev:hover, .et-pb-arrow-next:hover {
background-color: rgba(255,255,255,1); /* Defines the Arrow Background Color while hovering */ 
}

.et-pb-arrow-prev:hover:before, .et-pb-arrow-next:hover:before {
color: #513173; /* Defines the Arror color before hovering */
}

/*----------------------------------- MENU HOVER / BORDER CSS CODES ------------------------------------*/
#top-menu li > a:hover {
 box-shadow: 0 4px 0 0 #1c75ed !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}


/*--------------------------- Defines the Button in Sec. Menu and info----------------------------*/
.menu-button-1 a{
color: #513173 !important;
padding:12px 12px 12px 12px!important;
margin-bottom: 16px;
cursor: pointer;
border: 1px solid #fff; /* Change the values to define border color, thickness and type */
font-weight: 600; /* Defines if the font is slim 100, normal 300 or bold 600-900*/
background-color: #fff;
letter-spacing: 4px;
}

.menu-button-1 a:hover{
background-color: #21C6DA; /* Defines the background color when hovering with the mouse over the button */
border: 1px solid #21C6DA; /* Defines the border color when hovering with the mouse over the button */
letter-spacing: 4px;
}


/*--------------------------- Defines the different divider lines----------------------------*/
 hr.line-left-blue {
        border: 0;
        height: 5px;
        background-color: #513173;
        width: 66px;
        margin-left: 0px;}   


 hr.line-middle-green {
        border: 0;
        height: 5px;
        background-color: #CCDD7F;
        width: 66px;
}   

 hr.line-middle-blue {
        border: 0;
        height: 5px;
        background-color: #21C6DA;
        width: 66px;
}   

 hr.line-middle-project {
        border: 0;
        height: 2px;
        background-color: #9A77D7;
        width: 66px;
}   

/*--------------------------- Defines the Blurb Hover Effect for the Project Overview----------------------------*/
.projecthover1:hover {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
background-color: #fff;
}

.projecthover1:hover p {
 color: #000 !important;
}


/*-------------------------------------------Height Google Map -----------------------------------*/
.et_pb_map { 
height: 550px !important; 
}

/*--------------------------- Defines the Blurb Hover Effect from the first four blurbs----------------------------*/

.hoverblurb0:hover {
background: #21C6DA !important;
color: #fff;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

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

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


/*--------------------------- Defines the Blurb Hover Effect from the 8 smaller Blurbs----------------------------*/
.hoverblurb1:hover {
background: #513173 !important;
color: #fff!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

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

.hoverblurb1:hover h4 {
color: #21C6DA!important;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*--------------------------- Defines the Blurb Hover Effect from the 3 Process Blurbs----------------------------*/
.hoverblurb2:hover {
background: #513173 !important;
color: #fff;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

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

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


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

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

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

.hoverblurb4:hover {
background: #2C2E3D !important;
color: #fff;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

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

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

/*--------------------------- Defines the Blurb Hover Effect from the 4 Contact Blurbs----------------------------*/
.contacthover:hover {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform:scale(1.1);
transform:scale(1.1);
}

/*--------------------------- Defines the Blurb Hover Effect from the 3 Advantage Blurbs----------------------------*/
.hoveradvantage:hover {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform:scale(1.1);
transform:scale(1.1);
}


/*--------------------------- Defines the Blurb Hover Effect from the 3 Work/Projects Blurbs----------------------------*/
.hoverblurb5:hover {
background: #513173 !important;
color: #fff!important;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
border: 1px solid #513173 !Important;
border-radius: 56px;
}

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

.hoverblurb5:hover h4 {
color: #fff !important;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

/*--------------------------- Defines the  Hover Effect from the Company Images ----------------------------*/

.company_images:hover {
box-shadow: 10px 10px 5px #888888;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform:scale(1.1);
transform:scale(1.1);
padding: 5px;
}

/*--------------------------- Defines the  Hover Effect from the Team Members on HOME ----------------------------*/
.team_member:hover {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
border: 1px solid #fff;
}

/*--------------------------- Defines the  Hover Effect from the Team Members on ABOUT US ----------------------------*/

.team_member2:hover {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
box-shadow: 10px 10px 5px #888888;
-webkit-transform:scale(1.1);
transform:scale(1.1);
}