/*
 Theme Name:   Porto Child
 Description:  Child Theme for synto.ch
 Author:       Dominique Müller
 Author URI:   -
 Template:     porto
 Version:      1.0
 Text Domain:  porto-child
*/




/* ### Menu ### */
body #header .main-menu > li.menu-item > a { font-size: 14px; }

/*color if navigation is not sticky (startscreen) */
body #header .main-menu > li.menu-item > a,  body #header .main-menu > li.menu-item > a:hover, body #header .main-menu > li.menu-item.active > a, body #header .main-menu > li.menu-item.active > a:hover { color: #fff }

/*color if navigation is sticky */
body #header.sticky-header .main-menu > li.menu-item > a, body #header.sticky-header .main-menu > li.menu-item.active > a:hover, body #header.sticky-header .main-menu > li.menu-custom-content a { color:  #002E73}


/* active and hover*/
body #header .main-menu > li.menu-item.active > a, body #header .main-menu > li.menu-item > a:hover { text-decoration: underline; }


/* undo animations*/
[data-appear-animation], .appear-animation {opacity: 1 !important;}
.fadeInUp, .animated, .appear-animation {animation: none; animation-fill-mode: none; animation-duration: 0s;}    
[data-appear-animation], [fadeInRight] .appear-animation { opacity: 1; transform: translateX(0); }
.fadeInRight, .fadeInUp{ animation-name: none !important; }



/*### Customers Section old###*/
/*.logo-row { margin-top: 30px; margin-bottom: 30px; }
.logo-row img {max-height: 100px; max-width: 65%}
.logo-row img.berner-fachhochschule {max-height: 60px; max-width: 45%}
.logo-row img.energie-service-biel-bienne {max-height: 60px; max-width: 45%}*/


/*### Customers Section NEEW ###*/
.logo-row { margin-top: 25px; margin-bottom: 25px; }
.logo-row img {max-height: 75px; max-width: 60%}
.logo-row img.berner-fachhochschule {max-height: 60px; max-width: 45%}
.logo-row img.energie-service-biel-bienne {max-height: 60px; max-width: 45%}


.masonry-hidden { display:none;}
.additionalCustomerInfo { margin-top: 10px; display: block; font-size:12px; }



/*### Leistungen Section ###*/


.customAlignationFixText >div, .customAlignationFixIcon {display: flex !important; height: 64px; align-items: center;}
.customAlignationFixText {}
.customAlignationFixIcon {}
#leistungen h2, #leistungen h3, #leistungen .porto-sicon-description, #leistungen i {color: #002E73 !important;}
#leistungen .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-color-blue .vc_icon_element-icon {color: #002E73 !important}

#leistungen .leistung-no-padding .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-color-blue .vc_icon_element-icon {color: #002E73 !important; margin-left: 25px}
#leistungen .leistung-small-padding .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-color-blue .vc_icon_element-icon {margin-left: 15px; color: #002E73 !important;}

/*### Handlungsfelder Section ###*/
#handlungsfelder .porto-sicon-title {color: #cfcfcf !important; line-height: 28px !important;}
#handlungsfelder .porto-sicon-description {color: #cfcfcf !important; line-height: 25px !important; position: relative; top: 8px;}






/*### Footer Section ###*/

#footer .footer-address span, #footer .footer-address i, #footer .footer-tel-container span, #footer .footer-tel-container i, #footer .footer-mail-container span, #footer .footer-mail-container i  { font-size: 1.1em;  }
#footer .footer-address span, #footer .footer-tel-container span {font-family: "Open Sans"}

.footer-address {margin-bottom: 25px;  position: relative;}
.footer-address, .footer-contact-container {float: left; display: block; width: 100%}
#footer .footer-address .footer-address-icon-container, #footer .footer-address .footer-address-content-container, #footer .footer-tel-container .footer-tel-icon-container, #footer .footer-tel-container .footer-tel-content-container, #footer .footer-mail-container .footer-mail-content-container, #footer .footer-mail-container .footer-mail-icon-container{ display: inline-block; float: left; width: 100%;}
.footer-tel-container, .footer-mail-container{ display: block;}

#footer .footer-address .footer-address-content-container, #footer .footer-tel-container .footer-tel-content-container, #footer .footer-mail-container .footer-mail-content-container{padding-left: 20px; padding-right: 20px;}


/*### Team and contact Section ###*/


#ueber-uns .zoom {display: none;}

/* reset grid */
.frm_combo_inputs_container > *, .frm_grid_container > *, .frm_section_heading > *, .frm_fields_container .frm_form_field, .frm_fields_container > * {grid-column: auto;}

.member-info-container h4{font-size: 17px; line-height: 18px;}


.member-info-container { margin-top: 30px; margin-bottom: 20px; }
#ueber-uns form label, .frm_required {color: #fff; }
::placeholder {color: #fff; }
 :-ms-input-placeholder {color: #fff; }
::-ms-input-placeholder {color: #fff; }

.frm_combo_inputs_container, .frm_grid_container, .frm_form_fields .frm_section_heading, .frm_form_fields .frm_fields_container {display: block;}
.custom_field_name, .custom_field_lastname, .custom_field_mail, .custom_field_subject  {width:50%; float: left;} 
.custom_field_name input, .custom_field_lastname input, .custom_field_mail input, .custom_field_subject input{width: 95%; display: block; position: relative;}
.custom_field_lastname input, .custom_field_subject input  {left: 5%; position: relative;}

#ueber-uns form input, #ueber-uns form textarea, #ueber-uns .frm_button_submit, #ueber-uns button.toButton{background-color: transparent; text-transform: uppercase; border-radius: 0; border: 1px solid #727272; color: rgba(255,255,255,0.7); margin-top: 40px;}
#ueber-uns form input, #ueber-uns form textarea{margin-top: 30px; margin-bottom: 30px;}

#ueber-uns form input {height: 45px;}
#ueber-uns form textarea {height: 110px;}

/* buttons */
#ueber-uns button.toButton:hover, #ueber-uns form button.frm_button_submit:hover {background-color: white; cursor: pointer; color: #002e73; }

.footer-contact-container a, .footer-contact-container a:hover {color: #fff; }
.footer-tel-content-container, .footer-tel-icon-container, .footer-mail-icon-container, .footer-mail-content-container, .footer-address-icon-container, .footer-address-content-container {display: inline-block;} 

.footer-mail-icon-container, .footer-tel-icon-container {margin-right: 15px;}
.footer-mail-icon-container, .footer-address-icon-container  {margin-right: 15px; }
.footer-address-icon-container {float: left;}

#ueber-uns form #frm_field_1_container input, #ueber-uns  form #frm_field_2_container input {margin-top: 0}
.collapse-area {padding-top: 60px; padding-bottom: 60px;}

 .accordion a, .accordion h2, .accordion p, .accordion span, .accordion button {color: #fff}


.about-container .card-header, .about-container .card {border:none; background-color: transparent;}
.about-container .card {display: block;}
.about-container .card-body {flex: none;}

#contactFormToggler, #contactDataToggler {width: 100%; float: left;}
.contactToggler {display: block; color: #fff; font-size: 14px; line-height: 28px;} 
.contactToggler:hover, .contactToggler:active, .contactToggler:visited, .contactToggler:focus {color: #fff !important}

.contactToggler > div {display: inline-block; margin-left: 10px;}



.form-control-arrow, .data-control-arrow {display: inline-block;}
 #showContactForm.collapsed  .form-control-arrow {transform: rotate(180deg); }
#showContactForm  .form-control-arrow {transform: rotate(0deg); transition: transform 0.3s ease-in-out}

#showContactData.collapsed  .data-control-arrow {transform: rotate(180deg); }
#showContactData  .data-control-arrow {transform: rotate(0deg); transition: transform 0.3s ease-in-out}

.contact-row {margin-top: 82px;}
.form-row {margin-top: 68px;}

.toggleText {margin-top: 30px; margin-bottom: 20px;}
.additionalCustomerInfo {color: black;}


/********************* manage height of sections with position absolute *********************/

/*#handlungsfelder, #ueber-uns, #leistungen, #kundenundpartner { position: relative; overflow-y: hidden;}
#ueber-uns  {min-height: calc( 100vh - 163px); transition: height 0.3s ease-in-out}
#handlungsfelder, #leistungen, #kundenundpartner {min-height: calc( 100vh - 68px); }


#handlungsfelder > .container, #leistungen > .container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
*/

/********************* manage height of sections with display flex *********************/

/* über uns so gross, damit footer unsichtbar*/
#ueber-uns  {min-height: calc( 100vh - 70px); transition: height 0.3s ease-in-out}

/* über uns so gross, damit footer sichtbar*/
#ueber-uns  {min-height: calc( 100vh - 163px); transition: height 0.3s ease-in-out}

#handlungsfelder, #leistungen, #kundenundpartner {min-height: calc( 100vh - 68px); }

#handlungsfelder, #ueber-uns, #leistungen, #kundenundpartner {display: flex; align-items: center; justify-content: center;}
/*#handlungsfelder > .container, #leistungen > .container{ }*/



#handlungsfelder .porto-sicon-wrapper p {text-align: center; width: 100%;}



/*  parallax test  */
#handlungsfelder, #ueber-uns, #leistungen, #kundenundpartner {z-index: 2; position: relative;}
body .customParallaxSection .wpb_text_column.wpb_content_element {margin-bottom: 0;}
.customParallaxSection {height: 550px; overflow: hidden;}

img.parallax-slider {
   max-width: none;
   width:100% !important;height:auto !important;
} 
.parallax-window {
    min-height: 550px;
    background: transparent !important;
}

.synto-parallax, .parallax-slider, .parallax-mirror, .parallax-window {width: 100% !important}


.synto-parallax, .synto-parallax *{
	background: transparent !important;
}