@charset "utf-8";

/* -----------------------------------------------------------------------------
  Generic - Fonts
----------------------------------------------------------------------------- */
 /**
  * Exo 2
  */

  @font-face {
      font-family: 'Exo 2';
      src: url("../../fonts/Exo2-Regular.eot");
      src: url("../../fonts/Exo2-Regular.eot?#iefix") format("embedded-opentype"),
         /* url("../../fonts/Exo2-Regular.woff2") format("woff2"), */
          url("../../fonts/Exo2-Regular.woff") format("woff"),
          url("../../fonts/Exo2-Regular.ttf") format("truetype"),
          url("../../fonts/Exo2-Regular.svg#Exo2-Regular") format("svg");
      font-weight: 400;
      font-style: normal;
  }

 @font-face {
     font-family: 'Exo 2';
     src: url("../../fonts/Exo2-Bold.eot");
     src: url("../../fonts/Exo2-Bold.eot?#iefix") format("embedded-opentype"),
        /* url("../../fonts/Exo2-Bold.woff2") format("woff2"), */
         url("../../fonts/Exo2-Bold.woff") format("woff"),
         url("../../fonts/Exo2-Bold.ttf") format("truetype"),
         url("../../fonts/Exo2-Bold.svg#Exo2-Bold") format("svg");
     font-weight: 700;
     font-style: normal;
 }

 /**
  * Arkhip
  */
 @font-face {
     font-family: 'Arkhip';
     src: url("../../fonts/Arkhip.eot");
     src: url("../../fonts/Arkhip.eot?#iefix") format("embedded-opentype"),
         /* url("../../fonts/Arkhip.woff2") format("woff2"), */
         url("../../fonts/Arkhip.woff") format("woff"),
         url("../../fonts/Arkhip.ttf") format("truetype"),
         url("../../fonts/Arkhip.svg#Arkhip") format("svg");
     font-weight: 400;
     font-style: normal;
 }

 /**
  * Lato
  */
 @font-face {
     font-family: 'Lato';
     src: url("../../fonts/Lato-Bold.eot");
     src: url("../../fonts/Lato-Bold.eot?#iefix") format("embedded-opentype"),
       /* url("../../fonts/Lato-Bold.woff2") format("woff2"), */
         url("../../fonts/Lato-Bold.woff") format("woff"),
         url("../../fonts/Lato-Bold.ttf") format("truetype"),
         url("../../fonts/Lato-Bold.svg#Lato-Bold") format("svg");
     font-weight: 700;
     font-style: normal;
 }

 @font-face {
     font-family: 'Lato';
     src: url("../../fonts/Lato-Regular.eot");
     src: url("../../fonts/Lato-Regular.eot?#iefix") format("embedded-opentype"),
        /* url("../../fonts/Lato-Regular.woff2") format("woff2"), */
         url("../../fonts/Lato-Regular.woff") format("woff"),
         url("../../fonts/Lato-Regular.ttf") format("truetype"),
         url("../../fonts/Lato-Regular.svg#Lato-Regular") format("svg");
     font-weight: 400;
     font-style: normal;
 }

 /**
  * Handel Gothic
  */
 @font-face {
     font-family: 'Handel Gothic';
     src: url("../../fonts/HandelGothic.eot");
     src: url("../../fonts/HandelGothic.eot?#iefix") format("embedded-opentype"),
        /* url("../../fonts/HandelGothic.woff2") format("woff2"), */
         url("../../fonts/HandelGothic.woff") format("woff"),
         url("../../fonts/HandelGothic.ttf") format("truetype"),
         url("../../fonts/HandelGothic.svg#HandelGothic") format("svg");
     font-weight: 500;
     font-style: normal;
 }

 /**
  * Copperplate Gothic
  */
 @font-face {
     font-family: 'Copperplate Gothic';
     src: url("../../fonts/CopperplateGothic-Light.eot");
     src: url("../../fonts/CopperplateGothic-Light.eot?#iefix") format("embedded-opentype"),
        /* url("../../fonts/CopperplateGothic-Light.woff2") format("woff2"), */
         url("../../fonts/CopperplateGothic-Light.woff") format("woff"),
         url("../../fonts/CopperplateGothic-Light.ttf") format("truetype"),
         url("../../fonts/CopperplateGothic-Light.svg#CopperplateGothic-Light") format("svg");
     font-weight: 300;
     font-style: normal;
 }

  @font-face {
      font-family: 'Copperplate Gothic';
      src: url("../../fonts/CopperplateGothic-Bold.eot");
      src: url("../../fonts/CopperplateGothic-Bold.eot?#iefix") format("embedded-opentype"),
         /* url("../../fonts/CopperplateGothic-Bold.woff2") format("woff2"), */
          url("../../fonts/CopperplateGothic-Bold.woff") format("woff"),
          url("../../fonts/CopperplateGothic-Bold.ttf") format("truetype"),
          url("../../fonts/CopperplateGothic-Bold.svg#CopperplateGothic-Bold") format("svg");
      font-weight: 700;
      font-style: normal;
  }

 /**
  * Play
  */
 @font-face {
     font-family: 'Play';
     src: url("../../fonts/Play-Bold.eot");
     src: url("../../fonts/Play-Bold.eot?#iefix") format("embedded-opentype"),
       /* url("../../fonts/Play-Bold.woff2") format("woff2"), */
         url("../../fonts/Play-Bold.woff") format("woff"),
         url("../../fonts/Play-Bold.ttf") format("truetype"),
         url("../../fonts/Play-Bold.svg#Play-Bold") format("svg");
     font-weight: 700;
     font-style: normal;
 }

 @font-face {
     font-family: 'Play';
     src: url("../../fonts/Play-Regular.eot");
     src: url("../../fonts/Play-Regular.eot?#iefix") format("embedded-opentype"),
        /* url("../../fonts/Play-Regular.woff2") format("woff2"), */
         url("../../fonts/Play-Regular.woff") format("woff"),
         url("../../fonts/Play-Regular.ttf") format("truetype"),
         url("../../fonts/Play-Regular.svg#Play-Regular") format("svg");
     font-weight: 400;
     font-style: normal;
 }

/* -----------------------------------------------------------------------------
  Elements - Root
----------------------------------------------------------------------------- */
html,body {
  min-width: 320px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  display: -webkit-box;
  display: flex;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(253,252,252,0.80)), to(rgba(255,255,255,0.5))), url("../../img/content/sfondo.png") no-repeat center;
  background: linear-gradient(rgba(253,252,252,0.80), rgba(255,255,255,0.5)), url("../../img/content/sfondo.png") no-repeat center;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Lato', 'Exo 2', 'Play', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  color: rgba(109,106,105,1.0) ;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
  Message for lte IE9
----------------------------------------------------------------------------- */
 .IE{
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding: 20% 0;
   text-align: center;
   margin:auto 0;
 }

/* -----------------------------------------------------------------------------
  Box Sizing
----------------------------------------------------------------------------- */
 *,
 *::before,
 *::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
 }

 /************************************************************************
     LINKS
 *************************************************************************/

 a:link {
   color: rgba(27,63,150,1.0);
   text-decoration: none;
   -webkit-transition: color 300ms, background 300ms;
   transition: color 300ms, background 300ms;
 }

 a:visited {
   color: rgba(108,127,126,1.0);
   text-decoration: none;
 }

 a:hover {
   color: rgba(241,149,0,1.0);
   text-decoration: underline;
 }
 a:active{
   text-decoration: underline;
 }

 /************************************************************************
     TYPOGRAPHY
 *************************************************************************/

 /* -----------------------------------------------------------------------------
   Elements - Headings
 ----------------------------------------------------------------------------- */
 /**
  * h1 - h6
  */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   margin: 0;
   padding: 0;
   font-weight: 700;
   line-height: 1.5;
 }

 h1 {
   font-size: 3.6em;
 }

 h2 {
   font-size: 2.8em;
 }

 h3 {
   font-size: 2.1em;
 }

 h4 {
   font-size: 1.8em;
 }

 h5 {
   font-size: 1.6em;
 }

 h6 {
   font-size: 1.2em;
 }

 /* -----------------------------------------------------------------------------
   Elements - Text
 ----------------------------------------------------------------------------- */
 /**
  * Text
  */
 p {
   margin-top: 1.5em;
   margin-bottom: 0;
   text-align: justify;
   padding: 0;
   text-rendering: optimizeLegibility;
 }

 strong{
   font-weight: 900;
 }
 b {
   font-weight: 700;
 }

 em,
 i {
   font-style: italic;
 }

 /* -----------------------------------------------------------------------------
   Elements - Media
 ----------------------------------------------------------------------------- */
 img {
   display: block;
   max-width: 100%;
   height: auto;
 }


 /* -----------------------------------------------------------------------------
   Elements - Forms
 ----------------------------------------------------------------------------- */
 input,
 textarea,
 button {
   border-radius: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

 button {
   cursor: pointer;
 }

 /************************************************************************
     ICONS
 *************************************************************************/
 .icon{
   font-size: 0;
   text-indent: -9999px;
   margin: 5px;
 }
 .iconMenu{
   width: 28px;
   height: 28px;
   cursor: pointer;
   stroke: white;
 }
 .iconMenu:hover {
   stroke: #3E697A;
   stroke-width:2px;
 }
 .iconSocial{
   width: 24px;
   height: 24px;
   cursor: pointer;
   fill: white;
   stroke-width: 1px;
 }
 .iconSocial:hover {
   fill: rgba(241,149,0,.95);
 }
 .iconInfo{
   width: 32px;
   height: 32px;
   margin: 0;
   color:red;
   stroke-width: 1px;
   fill:#3E697A;
   stroke:#3E697A;
 }

 .iconInfo:hover {
   fill:rgba(241,149,0,1.0);
   stroke:rgba(241,149,0,1.0);
 }

 /************************************************************************
     WRAPPER - FLEXBOX
 *************************************************************************/

.wrapper{
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  display: -webkit-box;
  display: flex;
  min-width: 320px;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100vh;
}

 /************************************************************************
     HEADER
 *************************************************************************/
 .header{
   -ms-flex-negative: 0;
       flex-shrink: 0;
   min-width: 320px;
   width: 100%;
   margin: 0;
   padding:0;
   height: auto;
   background: #3E697A;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
 /* -----------------------------------------------------------------------------
   Elements - Top Header
 ----------------------------------------------------------------------------- */
 .topHeader{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row nowrap;
           flex-flow: row nowrap;
   display: -webkit-box;
   display: flex;
 }
 .logo{
   -webkit-box-flex: 1;
       -ms-flex: 1 0 9%;
           flex: 1 0 9%;
   -ms-flex-line-pack: center;
       align-content: center;
   margin: auto;
 }
 a.logo{
   display: block;
   text-indent: -9999px;
   width: 60px;
   height: 60px;
   background: url("../../img/logo/WEnCo-logo.svg");
   background-size: 60px 60px;
   margin: 0 auto;
   opacity: .77
 }
 div.companyName{
   -webkit-box-flex: 4;
       -ms-flex: 4 0 60%;
           flex: 4 0 60%;
   color: white;
   overflow: hidden;
   text-align: right;
   -ms-flex-item-align: end;
       align-self: flex-end;
   margin: 0 .5vw;
 }
 .cmpName {
   font-family: 'Handel Gothic';
   font-weight:700;
   font-size: 1.5em;
   margin: 0;
 }
 .cmpActivity {
   font-family: 'Copperplate Gothic';
   font-weight: 700;
   font-size: 1.0em;
   margin: 0;
 }

 /* -----------------------------------------------------------------------------
   Elements - Banner
 ----------------------------------------------------------------------------- */

 .banner{
   grid-area: banner;
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row nowrap;
           flex-flow: row nowrap;
   display: -webkit-box;
   display: flex;
   width: 100%;
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
 }
 .banner div.small {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1 1 13%;
   margin: .5vw;
 }
 .banner div.long {
   -webkit-box-flex:1;
   -ms-flex: 1;
   flex: 1 1 18.33%;
   height: auto;
   margin: .5vw;
 }
 img {
   width: 100%;
   border-radius: 5px;
 }

 /* -----------------------------------------------------------------------------
   Elements - Menu Line
 ----------------------------------------------------------------------------- */

 .menuLine{
   grid-area: menu;
   padding: 0 1.5em;
   background: rgba(241,149,0,.95);
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row nowrap;
           flex-flow: row nowrap;
   display: -webkit-box;
   display: flex;
   width: 100%;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.5);
           box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.5);
 }
 .activePage{
   font-family: 'Copperplate Gothic';
   font-size: 1.35em;
   font-weight: 500;
   font-style: normal;
   color: white;
   padding: 0;
   margin: 0;
 }

 .navLang{
   position: relative;
   display: block;
 }
 .navLang-content{
   display: none;
   position: absolute;
   background-color: #14303B;
   background: rgba(241,149,0,1.0);
   min-width: 160px;
   -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
           box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 .navLang-content a{
   display: block;
   text-decoration: none;
   color: white;
   padding: .7em;
   text-transform: uppercase;
   font-size: 1.2em;
 }

 .navLang-content a.active{
   color: #14303B;
 }
 .navLang-content a:hover:not(.active) {
   color:#3E697A;
 }

 .navLang:hover .navLang-content {
     display: block;
 }

 .sticky {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10;
 }
 .sticky + .content{
   padding-top: 60px;
 }
 /************************************************************************
     MAIN CONTAINER
 *************************************************************************/

 .container{
   -webkit-box-flex: 1;
       -ms-flex: 1 0 auto;
           flex: 1 0 auto;
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   width: 100%;
 }
 /************************************************************************
     NAVIGATION - SITE
 *************************************************************************/

 .navSite{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   height: 0%;
   width: 100%;
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   background-color: #14303B;
   opacity: 0.9;
   overflow-y: hidden;
   -webkit-transition: 0.5s;
   transition: 0.5s;
 }

 .navSite-content {
   position: relative;
   top: 2%;
   width: 100%;
   text-align: right;
   padding-right:20%;
   list-style: none;
 }


 .navSite-content li a {
   color: rgba(253,252,252,1.00);
   display: block;
   font-size: 1.3em;
 	 text-decoration: none;
 	 text-transform: uppercase;
 	 font-family: 'Handel Gothic';
   padding:.7em;
 }

 .navSite ul li a.active {
     color: rgba(127,159,211,1.00);
 }

 .navSite a:hover:not(.active) {
  color:rgba(241,149,0,1.0);
 	font-weight: 700;
 }

 nav.navSite .closebtn{
   position: absolute;
   top: 15px;
   right: 35px;
   font-size: 40px;
   color: rgba(253,252,252,1.00);
   text-decoration: none;
   cursor: pointer;
 }

 /************************************************************************
     PART MAIN
 *************************************************************************/
 main{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   width: 100%;
 }
 /* -----------------------------------------------------------------------------
   Section - Content
 ----------------------------------------------------------------------------- */

 section.content{
   display: block;
   width: 98%;
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
   margin: .5vw auto;
 }
 .content{
   background-image: -webkit-gradient(linear,left top, left bottom,color-stop(16.39%, rgba(253,252,252,1.00)),to(rgba(255,255,255,0.25)));
   background-image: linear-gradient(180deg,rgba(253,252,252,1.00) 16.39%,rgba(255,255,255,0.25) 100%);
   border-top-right-radius: 25px;
   -ms-flex-item-align:baseline;
       align-self:baseline;
   padding: 1.5em;
   width: auto;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .middle{
   border-bottom-left-radius: 25px;
 }
 .pageTitle {
   font-family: 'Handel Gothic';
   font-style: normal;
 	 font-weight: 500;
 	 font-size: 1.7em;
   line-height: 1.1;
   /* color: rgb(30,65,151); */
   color: rgba(62,105,122,1.0);
   padding: 0;
   margin: 0;
 }
 .pageMoto{
   font-family: 'Copperplate Gothic';
   font-size: .95em;
   font-weight: normal;
   font-style: normal;
   line-height: 1.2;
   color: rgba(108,127,126,1.0);
   padding: .2em 0 0;
   margin: 0;
 }
 /* -----------------------------------------------------------------------------
   Quotes
 ----------------------------------------------------------------------------- */
 .quote{
   width: 100%;
   margin: 10px 5px;
   padding: 10px;
   -webkit-box-shadow: none;
           box-shadow: none;
   background-image: none;
 }
 blockquote{
    font-family: 'Handel Gothic';
    color: white;
    text-shadow: 1px 1px 2px rgba(62,105,122,1.0), 0 0 25px #14303B, 0 0 5px #14303B;
    font-style: italic;
    font-size: 1.5em;
    margin: 2.5vw;
    font-weight: 500;
    text-align: center;
  }
  /* -----------------------------------------------------------------------------
    Section - Info
  ----------------------------------------------------------------------------- */
section.ads{
  margin:auto 0;
}
 .ads{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   width: 100%;
   padding: 1.5em 2em;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   margin: 0 auto;
 }

 .tab {
   width: 100%;
   max-width: 280px;
   overflow: hidden;
   margin: 10px 5px;
   padding: 10px;
   background-image: -webkit-gradient(linear,left top, left bottom,color-stop(16.39%, rgba(253,252,252,0.8)),to(rgba(255,255,255,0.3)));
   background-image: linear-gradient(180deg,rgba(253,252,252,0.8) 16.39%,rgba(255,255,255,0.3) 100%);
   border-radius: 10px;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .fade{
   position: relative;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 input {
   position: absolute;
   opacity: 0;
   z-index: -1;
 }
 label {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding: 5px;
   text-transform:uppercase;
   font-size: .9em;
   font-family: 'Handel Gothic';
   color: #3E697A;
   text-align: center;
   cursor: pointer;
 }
 .tumbnail img{
   margin-bottom: 1em;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .tab-content {
   max-height: 0;
   font-size: 0.8em;
   overflow: hidden;
   -webkit-transition: max-height .5s;
   transition: max-height .5s;
 }
 .tab-content p,ul {
   margin: 1em;
 }
 /* :checked */
 input:checked ~ .tab-content {
   max-height: 50em;
   overflow:visible;
 }

 label:hover{
   color:rgba(241,149,0,1.0);
   -webkit-transition: color 300ms, background 300ms;
   transition: color 300ms, background 300ms;
 }

 /* -----------------------------------------------------------------------------
   Page CONTACTS
 ----------------------------------------------------------------------------- */
 .contacts{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   width: 260px;
   padding: 1em;
   margin: 0 auto;
   justify-content: space-around;
   margin: 1.5em;
   background-image: -webkit-gradient(linear,left top, left bottom,color-stop(16.39%, rgba(253,252,252,0.8)),to(rgba(255,255,255,0.3)));
   background-image: linear-gradient(180deg,rgba(253,252,252,0.8) 16.39%,rgba(255,255,255,0.3) 100%);
   border-radius: 10px;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .subTitle{
   border-bottom: solid 1px;
   padding-top:2em;
   font-family: 'Copperplate Gothic';
   font-size: 1.05em;
   font-weight: 600;
   font-style: normal;
   text-align: center;
   color: rgba(108,127,126,1.0);
   padding: 0;
   margin: 0;
 }

 .contacts ul > *{
   text-align: left;
   color: rgba(108,127,126,1.0);
   list-style: none;

 }
 .address{
   padding: 0;
 }
 .contacts img{
   display: inline-block;
   vertical-align: middle;
   margin: .7em;
 }
 .contacts p{
   display: inline-block;
   vertical-align: middle;
   font-size: .9em;
   margin: .7em;
 }
 .contacts a {
   color:rgba(108,127,126,1.0);
   display: inline-block;
 }
 .contacts a:hover{
   color: rgba(241,149,0,.95);
 }
 .list {
   margin: 0 0 10px;
 }

 /* -----------------------------------------------------------------------------
   Page EXTRAS
 ----------------------------------------------------------------------------- */
 .postWall{
   display: -ms-flexbox;
   -ms-flex-wrap: wrap;
   -ms-flex-direction: column;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row wrap;
           flex-flow: row wrap;
   display: -webkit-box;
   display: flex;
   width: 98%;
   margin: .5em auto;
   padding: 0 1.5em;
   justify-content: space-between;
 }
 /* -----------------------------------------------------------------------------
   single POST THUMB
 ----------------------------------------------------------------------------- */
 .post{
   position: relative;
   margin: 1em auto;
   align-self: flex-start;
   border-radius: 10px;
   max-width: 350px;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .post .postHeader {
    position: absolute;
    bottom: 0;
    background: rgba(20, 48, 59, 0.7);; /* Black background with transparency */
    color: #f1f1f1;
    width: 100%;
    padding: .5em;
}
 .postTitle, .postExtr {
   padding: 0 16px 8px;
 }
 .postMetaItem {
   padding: 0 .5em;
 }
 .postTitle {
   margin: 0 0 .5em 0;
   font-family:'Exo 2';
   font-size: 1.0em;
   line-height: 1.2;
 }
 .postTitle a {
   color: white;
 }

 .postTitle a:hover {
   color: rgba(241, 149, 0, 0.95);
   text-decoration: none;
 }
 img.gallery:hover{
   cursor: pointer;
   color: rgba(241, 149, 0, 0.95);
 }

 .postExtr {
   margin: 0 0 .7em 0;
   border-bottom: solid 1px;
   font-size: .75em;
 }
 .postMeta {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .postMetaItem {
   /* color:rgba(108,127,126,1.00); */
   font-family: 'Exo 2';
 	 font-weight: 600;
   font-size: .75em;
 }

 /* -----------------------------------------------------------------------------
   gallery of DRAWINGS
 ----------------------------------------------------------------------------- */
 /* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 5vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(20, 48, 59, 1.0);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 75%;
  max-width: 800px;
  max-height: 800px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: rgba(241, 149, 0, 0.95);
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}
.mySlides img {
  border-radius: 0;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgba(20, 48, 59, 0.7);
  background-color: rgba(241, 149, 0, 0.5);
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  text-decoration: none;
  background-color: rgba(20, 48, 59, 0.7);
}
/* Number text (1/3 etc) */
.numbertext {
  color: rgba(241, 149, 0, 1.0);
  font-size: 1em;
  padding: 8px 12px;
  position: relative;
  background-color: rgba(20, 48, 59, 1.0);
  top: 0;
}
/* Caption text */
.captionText {
  color: #f2f2f2;
  font-size: 1em;
  padding: 1em;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(20, 48, 59, 1.0);
}
/* Fading animation */
.fadeSlide {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s ease;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fadeSlide {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fadeSlide {
  from {opacity: .4}
  to {opacity: 1}
}
 /************************************************************************
     ASIDE
 *************************************************************************/
  aside.images{
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   display: -webkit-box;
   display: flex;
   -ms-flex-line-pack: center;
       align-content: center;
   -webkit-box-pack:start;
       -ms-flex-pack:start;
           justify-content:flex-start;
   text-align: center;
   height: auto;
   -webkit-box-flex: 1;
       -ms-flex: 1 0 20%;
           flex: 1 0 20%;
   margin: 0.5vw;
   background-image: -webkit-gradient(linear,left bottom, left top,color-stop(16.39%, rgba(253,252,252,1.00)),to(rgba(255,255,255,0.1)));
   background-image: linear-gradient(0deg,rgba(253,252,252,1.00) 16.39%,rgba(255,255,255,0.1) 100%);
   display: none;
 }
 .aside{
   margin: 1vw;
   position: relative;
 }
 .image {
  display: block;
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
  .engFlex{
   margin: 1vw;
   display: block;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           /* The image used */
           background-image: url("../../img/content/det_eng.jpg");

           /* Full height */
           height: 100%;

           /* Center and scale the image nicely */
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
 }
 .extrasFlex{
   margin: 1vw;
   display: block;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           /* The image used */
           background-image: url("../../img/content/water2.jpg");

           /* Full height */
           height: 100%;

           /* Center and scale the image nicely */
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
 }
 .cookieFlex {
   margin: 1vw;
   display: block;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   /* The image used */
   background-image: url("../../img/content/cookie.jpg");

   /* Full height */
   height: 100%;

   /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
  .temp{
    -webkit-filter: grayscale(80%) brightness(100%) opacity(50%) contrast(160%);
    filter: grayscale(80%) brightness(100%) opacity(50%) contrast(160%);
  }
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: inherit;
  opacity: 0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  background-color: #14303B;
  border-radius: 5px;
}

.aside:hover .overlay {
  opacity: .9;
}
.fade:hover .overlay {
  opacity: .9;
}
.text {
  color: rgba(241,149,0,1.0);
  /*font-size: 20px;*/
  position: absolute;
  font-size: 80%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.big{
  left:25%;
  -webkit-transform: translate(-15%, -50%);
          transform: translate(-15%, -50%);
  -ms-transform: translate(-15%, -50%);
}
.wide{
  text-align: center;
  text-decoration: none;
  border-bottom: none;
}
.text h6{
  font-family: 'Handel Gothic';
  font-weight: 400;
  line-height: 1.2;
  border-bottom: 1px solid white;
}
.text.wide h6{
  border-bottom: none;
}
.text ul{
  text-align: left;
  padding-left: 1em;
  margin:.5em;
}
.text li{
  padding: .5em 0;
}
 /************************************************************************
     FOOTER
 *************************************************************************/
 .footer{
   -ms-flex-negative: 0;
       flex-shrink: 0;
   display: -ms-flexbox;
   -ms-flex-wrap: nowrap;
   -ms-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row nowrap;
           flex-flow: row nowrap;
   display: -webkit-box;
   display: flex;
   bottom: 0;
   width: 100%;
   font-size: .8em;
   background-color: #14303B;
   color: white;
   padding: 1.5em;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
 .madeBy{
   -webkit-box-flex:1;
       -ms-flex:1 1 18%;
           flex:1 1 18%;
   text-align: left;
   -ms-flex-item-align: end;
       align-self: flex-end;
 }
 .madeBy a {
   color: rgba(241,149,0,.95);
   margin-left: 0;
 }
 .navSocial{
   -webkit-box-flex: 1;
       -ms-flex: 1 0 20%;
           flex: 1 0 20%;
   text-align: center;
   -ms-flex-item-align: center;
       align-self: center;
 }
 .copyright {
   -webkit-box-flex: 1;
       -ms-flex: 1 0 20%;
           flex: 1 0 20%;
   text-align: right;
   -ms-flex-item-align: center;
       align-self: center;
 }

 /************************************************************************
     MEDIA
 *************************************************************************/
 @media all and (max-width:899px){
   html,body{
     background: none;
     background-color: #f0f0f0;
   }
   .content{
     background: none;
     -webkit-box-shadow: none;
             box-shadow: none;
   }
   .topHeader{
     padding: 1vw .5vw;
   }
   .banner{
     margin-bottom: 5px;
     padding: 0 .5vw;
   }
 }
 @media all and (max-width: 599px) {
   div.logo{
    margin-bottom: .5em;
    background: none;
    opacity: 1.0;
   }
   a.logo {
     text-indent:-42px;
     font-family: 'Handel Gothic';
     font-weight:700;
     font-size: 2.5em;
     margin: auto;
     color: white;
     text-align: center;
     background: none;
     padding-top: 15px;
     text-decoration: none;
   }
   .logo a:hover{
     text-decoration: none;
     color: rgba(241,149,0,.95);
   }
   .companyName{
     display: none;
   }

 }

 @media all and (min-width:600px) {

   .header{
     background-image: -webkit-gradient(linear, left top, right top, from(rgba(253,252,252,0.80)), to(rgba(62,105,122,1.0)));
     background-image: linear-gradient(to right, rgba(253,252,252,0.80), rgba(62,105,122,1.0));
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
     -webkit-box-align: baseline;
         -ms-flex-align: baseline;
             align-items: baseline;
   }
   .topHeader{
     width: 100%;
     padding: 1em .5vw;
   }
   .cmpName{
     font-size: 1.8em;
   }
   .cmpActivity{
     font-size: 1.07em;
   }
    .container{
      display: -ms-flexbox;
      -ms-flex-wrap: nowrap;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      display: -webkit-box;
      display: flex;
      width: 100%;
    }
    .text.wide h6{
      font-size: 1em;
    }
    .contacts{
      width: 260px;
    }
    .contacts span{
            align-self: baseline;
    }
    .ads{
      display: -ms-flexbox;
      -ms-flex-wrap: nowrap;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      display: -webkit-box;
      display: flex;
      width: 100%;
      padding: 1.5em 2em;
      -webkit-box-align: baseline;
          -ms-flex-align: baseline;
              align-items: baseline;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -ms-flex-pack: distribute;
              justify-content: space-around;
      margin: 0 auto;
    }
    .responsive{
      display: -ms-flexbox;
      -ms-flex-wrap: wrap;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      display: -webkit-box;
      display: flex;
    }
 }

 @media all and (min-width:900px) {
   a.logo{
     height: 80px;
     width: 80px;
     background-size: 80px 80px;
   }
   .cmpName{
     font-size: 2em;
   }
   .cmpActivity{
     font-size: 1.2em;
   }
    .navSite-content li a{
      padding: 1em;
    }
   .container{
     display: -ms-flexbox;
     -ms-flex-wrap: nowrap;
     -ms-flex-direction: column;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-flow: column nowrap;
             flex-flow: column nowrap;
     display: -webkit-box;
     display: flex;
     width: 100%;
   }
   .content{
     margin: 1.5vw;
     padding: 3vw;
   }
   blockquote{
     font-size: 2em;
   }
   .contacts{
     width: 300px;
   }
   .text.wide h6{
     font-size: 1.2em;
   }
   .footer{
     opacity: .9;
   }
 }
 @media all and (min-width:1200px) {

   a.logo{
     height: 100px;
     width: 100px;
     background-size: 100px 100px;
   }
   .cmpName{
     font-size: 2.7em;
   }
   .cmpActivity{
     font-size: 1.5em;
     /*margin-bottom: .5em;*/
   }
   .activePage,span svg#language,#menu{
     display: none;
   }
   .menuLine{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
     padding: 0 .5vw;
     /*background-color: transparent;*/
   }

   .navLang-content{
     display: inline-block;
     position: relative;
     -webkit-box-shadow: none;
             box-shadow: none;
     z-index: 0;
     background: none;
   }
   .navLang-content a{
     display: inline-block;
     font-size: .8em;
   }
   .sticky{
     position: relative;
   }
   .container{
     display: -ms-flexbox;
     -ms-flex-wrap: nowrap;
     -ms-flex-direction: row;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-flow: row nowrap;
             flex-flow: row nowrap;
     display: -webkit-box;
     display: flex;
     width: 100%;
   }
   .navSite{
     visibility: visible;
     display: -ms-flexbox;
     -ms-flex-wrap: nowrap;
     -ms-flex-direction: column;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-flow: column nowrap;
             flex-flow: column nowrap;
     display: -webkit-box;
     display: flex;
     -webkit-box-flex: 1;
         -ms-flex: 1 0 14.75%;
             flex: 1 0 14.75%;
     height:auto;
     position:relative;
     z-index: 0;
     margin: .5vw;
     -webkit-transition: 0s;
     -webkit-transition: none;
     transition: none;
     /* -webkit-box-pack:justify; */
         /* -ms-flex-pack:justify; */
             /* justify-content:space-between; */
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start;
   }
   ul.navSite-content{
     top: 0;
     margin: 0;
     padding: 0;
     list-style-type: none;
     overflow: hidden;
   }
   .navSite-content li a{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     color: rgba(253,252,252,1.00);
     font-size: 1.2em;
     text-decoration: none;
     text-transform: uppercase;
     font-family: 'Handel Gothic';
     padding:1.5vw;
   }
   nav.navSite .closebtn{
     display: none;
   }
   .navSite-content li a.active{
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
   section.content{
     display: block;
     width: 98%;
     -webkit-box-align: baseline;
         -ms-flex-align: baseline;
             align-items: baseline;
     /* margin: .5vw; */
     padding: 1.5vw 2.5vw 2.5vw;
   }
   .p-title h1{
     line-height: 1;
   }
   .p-content{
     width: auto;
   }
   .post{
     width: 40%;
   }
   aside.images{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
   .contacts{
     padding-top: 1.5em;
     display: flex;
     justify-content: space-around;
   }
 }
@media all and (min-width:1400px){
  .responsive{
    -ms-flex-wrap: nowrap;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
}