/**************************************************/
/* CSS definition eNews Subscription forms */
/**************************************************/
/* Color definitions
  Yellow 1: rgb(255,243,180) #FFF3B4
  Yellow 2: rgb(255,231,105) #FFE769
  Yellow 3: rgb(255,221,81) #FFDD51
  Yellow 4: rgb(246,201,76) #F6C94C

  Blue/Green 1: rgb(0,136,135) #008887
  Blue/Green 2: rgb(51,160,159) #33A09F
  Blue/Green 3: rgb(102,184,183) #66B8B7



  Green 1: rgb(102,160,135) #66A087
  Green 2: rgb(168,188,125) #A8BC7D
  Green 3: rgb(203,215,177) #CBD7B1
  Green 4: rgb(202,201,119) #CAC977

  Blue 1: rgb(127,183,192) #7FB7C0
  Blue 2: rgb(128,189,209) #80BDD1
  Blue 3: rgb(198,226,227) #C6E2E3

  Grey 1: rgb(50,50,50) #323232
  Grey 2: rgb(179,179,179) #B3B3B3
  Grey 3: rgb(242,242,242) #F2F2F2

  */




/****************************************************************************************************/
/* Newsletter (toggle) Button
/****************************************************************************************************/
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button{
    position:relative; 
    z-index:1;
    width:50px; 
    height:50px;
    background-color:#850002;
    border-radius:50%;
    animation:bgColorChange 8s;
    -moz-animation:bgColorChange 8s infinite; /* Firefox */
    -webkit-animation:bgColorChange 8s infinite; /* Safari and Chrome */
}

#page_header #logo_navigation_box #newsletter_button_box .newsletter_button span.at_sign{position:absolute; top:2px; left:18px; color:rgb(0,100,108); font-weight: bold; font-size:20px; }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button:hover{cursor:pointer;}
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button:hover span.at_sign{
  -webkit-animation-name: AtSignBounce;
  animation-name: AtSignBounce;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; 
  -webkit-animation-timing-function: ease-out; 
  animation-timing-function: ease-out; 
  -webkit-animation-delay: 0s; 
  animation-delay: 0s;
  -webkit-animation-direction: linear;
  animation-direction: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes AtSignBounce {
  0% {top:2px;}
  50% {top:1px;}
  100% {top:2px;}
}

@keyframes AtSignBounce {
  0% {top:2px;}
  50% {top:1px;}
  100% {top:2px;}
}



#page_header #logo_navigation_box #newsletter_button_box .newsletter_button #envelope{position:absolute; top:16px; left:9px; height:23px; width:32px; border:2px solid white; border-radius:3px; }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button #flap{
    position:absolute;
    top:17px;
    left:8px;
    width:22px;
    height:22px;
    background-color:white;
    border:2px solid white;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-40deg) skew(10deg);
    transform: rotate(-40deg) skew(10deg);
    border-radius:3px;
}

#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom{width:30px; position:absolute; top:37px; left:10px;  border:1px solid white;}
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom_left{-webkit-transform-origin:top left;transform-origin:top left; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom_right{-webkit-transform-origin:top right;transform-origin:top right; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }




#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_mobile{display:none;}

#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.eNews_inactive{border-radius:50%; background-color:rgb(0,100,108);}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.eNews_active{border-radius:50% 50% 0 0; background-color:rgb(0,100,108); -webkit-animation:none; animation:none;}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.confirmation_active{border-radius:50% 50% 0 0; background-color:#850002; -webkit-animation:none; animation:none; color:#850002;}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.confirmation_active span.at_sign{ color:#850002;}


@-webkit-keyframes bgColorChange /* Safari and Chrome */
{
/*    0%   {background:rgb(102,184,183);}
    20%   {background:rgb(102,184,183);}
    40%  {background:rgb(51,160,159);}
    60%  {background:rgb(102,184,183);}
    100%  {background:rgb(102,184,183);}
*/
    0%   {background:rgb(0,100,108);}
    20%   {background:rgb(0,100,108);}
    40%  {background:rgb(0,100,108);}
    60%  {background:rgb(0,100,108);}
    100%  {background:rgb(0,100,108);}

}






/****************************************************************************************************/
/* Newsletter button - mobile version
/****************************************************************************************************/
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_mobile{display:none;}











/**************************************************/
/* Newsletter Form box - HEADER
/**************************************************/
#enews_subscription_header_form_box{position:relative; background-color:rgb(102,184,183); border-radius:2px 0 2px 2px; padding: 10px; margin:55px 0 0 300px; width:895px; -webkit-box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); }
#enews_subscription_header_form_box.invisible{display:none;}
#enews_subscription_header_form_box.visible{display:block;}


#enews_subscription_header_form_box h3{margin:5px 0 20px 0; padding: 0; color:white;}
#enews_subscription_header_form_box input{color:rgb(50,50,50); border-radius:2px;}
#enews_subscription_header_form_box a{text-decoration: underline; color:white;}
#enews_subscription_header_form_box label{font-weight: normal; width:100%; color:white;}
#enews_subscription_header_form_box p{color:white;}

#enews_subscription_header_form_box .has-feedback .form-control-feedback{visibility:hidden;}
#enews_subscription_header_form_box .has-feedback.header-has-error .form-control-feedback{visibility: visible;}
#enews_subscription_header_form_box .has-feedback.header-has-error .error_message{display:inline-block; border:1px dotted #850002; background-color:rgb(246, 211, 207);  color:#850002; width:100%; padding:0 3%; border-radius:4px;}

#enews_subscription_header_form_box #icon_adaptation{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_header_form_box #icon_energy{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_header_form_box #icon_ifc{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_header_form_box #logo_procura_plus{float:left; width:30px; height:30px; margin:5px 10px 0 0;}

#enews_subscription_header_form_box #submit_data_button{background-color:transparent; color:white; border-color:white; border-radius:2px; font-weight: bold; -webkit-transition:all 400ms; transition:all 400ms;}
#enews_subscription_header_form_box #submit_data_button:hover{background-color:rgb(246,201,76); color:rgb(50,50,50); border-color:rgb(246,201,76); font-weight: bold;}


/**************************************************/
/* Newsletter Confirmation box - HEADER
/**************************************************/
#enews_subscription_header_confirmation_box{position:relative; background-color:#850002; color:white; border-radius:10px 0 10px 10px; padding: 10px; margin:55px 0 0 300px; width:895px; -webkit-box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); }
















/**************************************************/
/* Newsletter Form box
/**************************************************/
#enews_subscription_form_box{}

#enews_subscription_form_box h3{padding: 0;}
#enews_subscription_form_box input{color:rgb(50,50,50); }
#enews_subscription_form_box a{text-decoration: underline; }
#enews_subscription_form_box label{font-weight: normal; width:100%;}

#enews_subscription_form_box .has-feedback .form-control-feedback{visibility:hidden;}
#enews_subscription_form_box .has-feedback.has-error .form-control-feedback{visibility: visible;}
#enews_subscription_form_box .has-feedback.has-error .error_message{display:inline-block; border:1px dotted #850002; background-color:rgb(246, 211, 207);  color:#850002; width:100%; padding:0 3%; border-radius:4px;}

#enews_subscription_form_box #icon_adaptation{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_form_box #icon_energy{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_form_box #icon_ifc{float:left; width:30px; height:30px; margin:5px 10px 0 0;}
#enews_subscription_form_box #logo_procura_plus{float:left; width:30px; height:30px; margin:5px 10px 0 0;}

#enews_subscription_form_box #submit_data_button{float:left; margin:30px auto; background-color:rgb(127,183,192); color:white; border:1px solid rgb(127,183,192);}
#enews_subscription_form_box #submit_data_button:hover{color:rgb(127,183,192); background-color:white;}


/**************************************************/
/* Newsletter Confirmation box
/**************************************************/
#enews_subscription_header_confirmation_box{position:relative; background-color:#850002; color:white; border-radius:10px 0 10px 10px; padding: 10px; margin:55px 0 0 300px; width:895px; -webkit-box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); box-shadow:-3px 3px 10px 4px rgba(0,0,0,0.2); }













/**********************************************/
/* Media Queries 
/**********************************************/

/* 980 - 1200 */
@media only screen and (min-width: 980px) and (max-width:1199px) {   

    #enews_subscription_header_form_box{ margin:55px 0 0 230px; width:745px; }
    #enews_subscription_header_confirmation_box{ margin:55px 0 0 230px; width:745px; }
}


/* 768 - 980 */
@media only screen and (min-width: 768px) and (max-width:979px) {  
    #enews_subscription_header_form_box{ margin:55px 0 0 218px; width:545px; }
    #enews_subscription_header_confirmation_box{ margin:55px 0 0 230px; width:745px; }

}


/* < 768  */
@media only screen and (max-width: 767px){


  /****************************************************************************************************/
  /* Newsletter button - mobile version
  /****************************************************************************************************/
  #page_header #logo_navigation_box #newsletter_button_box #newsletter_button_mobile{display:block;margin-top:-8px;}
  #page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop{display:none;}

} /* end of < 768  */