/*
* Custom Tango fibre homepage - 29/07/2020
* Author : Olivier Robin
* email : olivier.robin@idp.lu
*/

/*@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,700italic,400italic);.mq-debug{position:fixed;z-index:999;left:0;bottom:0;width:2px;height:2px;background-color:red;line-height:2px;text-align:center}.mq-debug:before{content:'S'}@media screen and (min-width:40em){.mq-debug{background-color:green}.mq-debug:before{content:'M'}}@media screen and (min-width:64em){.mq-debug{background-color:#00f}.mq-debug:before{content:'L'}}@media screen and (min-width:75em){.mq-debug{background-color:#ff0}.mq-debug:before{content:'XL'}}@media screen and (min-width:112.5em){.mq-debug{background-color:purple}.mq-debug:before{content:'XXL'}}@font-face{font-family:'Belgacom';src:url(../fonts/belgacom_regular-webfont.eot);src:url(../fonts/belgacom_regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/belgacom_regular-webfont.woff) format("woff"),url(../fonts/belgacom_regular-webfont.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Belgacom';src:url(../fonts/belgacom-bold-webfont.eot);src:url(../fonts/belgacom-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/belgacom-bold-webfont.woff) format("woff"),url(../fonts/belgacom-bold-webfont.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:'Belgacom';src:url(../fonts/belgacom-ultralight-webfont.eot);src:url(../fonts/belgacom-ultralight-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/belgacom-ultralight-webfont.woff) format("woff"),url(../fonts/belgacom-ultralight-webfont.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:'tango_icons';src:url(../fonts/tango_icons.eot?-fexgdg);src:url(../fonts/tango_icons.eot?#iefix-fexgdg) format("embedded-opentype"),url(../fonts/tango_icons.ttf?-fexgdg) format("truetype"),url(../fonts/tango_icons.woff?-fexgdg) format("woff"),url(../fonts/tango_icons.svg?-fexgdg#tango_icons) format("svg");font-weight:400;font-style:normal}.navbar#menu{z-index:10}#menu.navbar .navbar-header .navbar-brand{background-image:url(../images/logo-background.png)!important}#homepage-banner{background-image:url(../images/tango-space-background.jpg);background-size:contain;background-position:center top}.colorblue,body.page-node-customize{color:#005ca9}body.page-node-customize>.wrapper{padding-top:0!important}body.page-node-customize #main{max-width:none;margin:0 auto}body.page-node-customize .scrollbottom{position:absolute;bottom:30px;z-index:100;right:100px}body.page-node-customize .scrollbottom a{display:block;min-height:200px;width:75px}.configurator-content img,body.page-node-customize .scrollbottom>div{display:block;margin:auto}body.page-node-customize .scrollbottom .iconSvg-arrow{z-index:3;bottom:10px;right:0;-webkit-animation-name:arrow;-moz-animation-name:arrow;animation-name:arrow}.page-node-customize .homepage-banner .overlayer,body.page-node-customize .scrollbottom .iconSvg-arrow,body.page-node-customize .scrollbottom .iconSvg-cloud,body.page-node-customize .scrollbottom .iconSvg-dino{position:absolute;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-play-state:running;-moz-animation-play-state:running;animation-play-state:running;-webkit-animation-direction:alternate-reverse;-moz-animation-direction:alternate-reverse;animation-direction:alternate-reverse}.page-node-customize .homepage-banner .overlayer,body.page-node-customize .scrollbottom .iconSvg-dino{-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:scrollbottom;-moz-animation-name:scrollbottom;animation-name:scrollbottom}body.page-node-customize .scrollbottom .iconSvg-cloud{bottom:-10px;-webkit-animation-name:cloud;-moz-animation-name:cloud;animation-name:cloud;-webkit-animation-timing-function:cubic-bezier(0,0,0,1.51);-moz-animation-timing-function:cubic-bezier(0,0,0,1.51);animation-timing-function:cubic-bezier(0,0,0,1.51)}body.page-node-customize .paragraph-text-title{text-align:center;color:#005ca9;font-weight:700;display:block;font-size:45px}body.page-node-customize .paragraph-text-title:after,body.page-node-customize .paragraph-text-title:before{display:none}body.page-node-customize .subscribe a,body.page-node-customize .text-style-1{text-align:center;font-size:25px;font-family:"belgacom"}body.page-node-customize .subscribe{position:fixed;top:0;left:0;right:0;z-index:100;visibility:hidden;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);opacity:0}body.page-node-customize .subscribe a{color:#fff;display:block;position:relative;width:200px;height:100px;padding:25px;text-decoration:none;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;float:right;font-size:19px}body.page-node-customize .subscribe a:after{content:"";display:block;width:400px;height:400px;background:#bed600;position:absolute;top:0;right:0;z-index:-1;border-radius:0 0 0 60px;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform:rotate(-20deg) translate(60%,-60%);-moz-transform:rotate(-20deg) translate(60%,-60%);-ms-transform:rotate(-20deg) translate(60%,-60%);-o-transform:rotate(-20deg) translate(60%,-60%);transform:rotate(-20deg) translate(60%,-60%)}body.page-node-customize .subscribe a i:before{content:'\e602';font-family:'tango_icons';font-size:15px;position:relative;top:3px;font-style:normal}body.page-node-customize .subscribe a:hover{padding:20px 20px 10px 10px}body.page-node-customize .subscribe a:hover:after{-webkit-transform:rotate(-20deg) translate(50%,-50%);-moz-transform:rotate(-20deg) translate(50%,-50%);-ms-transform:rotate(-20deg) translate(50%,-50%);-o-transform:rotate(-20deg) translate(50%,-50%);transform:rotate(-20deg) translate(50%,-50%);background:#005ca9}body.page-node-customize .subscribe.display{-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%);visibility:visible;opacity:1}@-webkit-keyframes scrollbottom{0%{background-size:contain;background-image:url(../images/smalldino-2.svg);bottom:0}10%{background-size:contain;background-image:url(../images/smalldino-2.svg)}to{bottom:100px}}@-moz-keyframes scrollbottom{0%{background-size:contain;background-image:url(../images/smalldino-2.svg);bottom:0}10%{background-size:contain;background-image:url(../images/smalldino-2.svg)}to{bottom:100px}}@keyframes scrollbottom{0%{background-size:contain;background-image:url(../images/smalldino-2.svg);bottom:0}10%{background-size:contain;background-image:url(../images/smalldino-2.svg)}to{bottom:100px}}@-webkit-keyframes cloud{0%{-webkit-transform:scaleX(1.3) translateY(0);transform:scaleX(1.3) translateY(0)}to{-webkit-transform:scaleX(1) translateY(-5px);transform:scaleX(1) translateY(-5px)}}@-moz-keyframes cloud{0%{-moz-transform:scaleX(1.3) translateY(0);transform:scaleX(1.3) translateY(0)}to{-moz-transform:scaleX(1) translateY(-5px);transform:scaleX(1) translateY(-5px)}}@keyframes cloud{0%{-webkit-transform:scaleX(1.3) translateY(0);-moz-transform:scaleX(1.3) translateY(0);-o-transform:scaleX(1.3) translateY(0);transform:scaleX(1.3) translateY(0)}to{-webkit-transform:scaleX(1) translateY(-5px);-moz-transform:scaleX(1) translateY(-5px);-o-transform:scaleX(1) translateY(-5px);transform:scaleX(1) translateY(-5px)}}@-webkit-keyframes arrow{0%{-webkit-transform:translateY(0);transform:translateY(0)}90%,to{-webkit-transform:translateY(5px);transform:translateY(5px)}}@-moz-keyframes arrow{0%{-moz-transform:translateY(0);transform:translateY(0)}90%,to{-moz-transform:translateY(5px);transform:translateY(5px)}}@keyframes arrow{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}90%,to{-webkit-transform:translateY(5px);-moz-transform:translateY(5px);-o-transform:translateY(5px);transform:translateY(5px)}}header .sticky .sharer:hover{margin:0 0 1px}.page-node-customize #menu.navbar #nav{background-color:#fff!important;height:auto;overflow:visible}.page-node-customize .homepage-banner{box-shadow:none}.page-node-customize .homepage-banner .overlayer{top:0;left:0;right:0;bottom:0;background-image:url(../images/space-dino.png);background-position:left bottom;background-repeat:no-repeat;-webkit-animation-name:overlayerdino;-moz-animation-name:overlayerdino;animation-name:overlayerdino;-webkit-animation-duration:15s;-moz-animation-duration:15s;animation-duration:15s;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.configurator-content .box.active img.white+img,.configurator-content img.white,.page-node-customize .homepage-banner .background,header .sticky .sharer{display:none}
*/@font-face { font-family:TT-round; src: url('../fonts/TTRoundsCondensed-Regular.ttf'); }
@font-face { font-family:TT-round-bold; src: url('../fonts/TTRoundsCondensed-Bold.ttf'); }
@charset "UTF-8";

html { font-size: 6.25%; } 

.wrapper{
  font-family:'Belgacom';
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

header .sticky {
  width: 60px;
}

@media (max-width:1200px) {
  .sticky {
    top: 55px;
  }
}

a:hover{
  text-decoration: none;
}

/*
* ========================== VIEW 1 ==================================
*/

#main__view1{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 179px);
    min-height: 466px;
    background: #002f62;
    background: linear-gradient(135deg,  #012d6f 0%, #0fa0db 40%,#4ce4c6 60%,#a4ff36 100%);
    overflow: hidden;
    z-index: 0;
  }

  .main__view1Container{
    display: block;
    left: 0;
    height: calc(100vh + 220px);
  }

  .main__view1Title{
      font-family: TT-round-bold,Arial,sans-serif;
      position: absolute;
      top: 130px;
      left: calc(20vw - 180px);
      width: fit-content;
      height: 94px;
      z-index: 1;
      color: #ffffff;
      font-size: 70px;
      text-transform: uppercase;
      font-weight: bold;
  }

  .main__view1Subtitle{
    font-family: TT-round-bold,Arial,sans-serif;
    position: absolute;
    top: 280px;
    left: calc(20vw - 180px);
    color: #ffffff;
    font-size: 29px;
    font-weight: 400;
    z-index: 1;
    white-space: nowrap;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  }

  .main__view1Subtitle1 {
    top: 215px;
    font-size: 32px;
  }
  
  .main__view1Subtitle2 {
    top: 256px;
    font-size: 24px;
  }

  .main__view1Btn a{
    top: 364px;
    left: calc(20vw - 180px);
    z-index: 102;
  }

  

  .main__ctaBtn a{
    display: block;
    background-color: #d8127e;
    border-radius: 5px;
    padding: 16px 42px;
    position: absolute;
    color: #ffffff;
    font-size: 16px;
    font-weight: 100;
    white-space: nowrap;
    transition: all 0.3s;
    text-align: center;

    top: 340px;
    
  }

  .big_cta a {
    font-size: 24px !important;
  }


  .main__ctaBtn a:hover{
    background-color: #ee2f97;
    cursor: pointer;
  }

  .main__view1-bgCircle{
    background-image: url(../images/fibre/tango_fibre_view1_bgcircle.png);
    background-size: 1200px;
    background-repeat: no-repeat;
    background-clip: border-box;
    position: absolute;
    top: -200px;
    left: calc(82% *0.65 - 60px);
    width: 100vw;
    height: calc(100vh + 120px);
    min-height: 765px;
    z-index: 0;
  }

  .main__view1-bgPerso{
    background-image: url(../images/fibre/tango_rocket.png);
    background-size: 1100px;
    background-repeat: no-repeat;
    background-clip: border-box;
    position: absolute;
    top: 190px;
    left: calc(40% * 1.8 - 300px);
    width: 100vw;
    height: calc(100vh - 270px);
    min-height: 375px;
    z-index: 0;
    overflow: hidden;
  }

  .main__view1-bgPlanet{
    background-image: url(../images/fibre/tango_planet2.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 534px;
    right: -225px;
    width: 388px;
    height: calc(100vh - 613px);
    min-height: 32px;
    overflow: hidden;
  }

  .main__view1Slider2{
    width: 100vw;
    max-width: 1800px;
    height: 966px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 5vw;
  }

  .main__view1Bubulle p{
    display: block;
    float: left;
    position: relative;
    background-color: #11B9E8;
    background-repeat: no-repeat;
    border-radius: 200px;
    color: #ffffff;
    text-align: center;
    transition: all 0.3s;
    
    top: 315px;
    margin-bottom: 30px;
    font-size: 18px;
    width: 230px;
    height: 230px;
    padding: 120px 25px 30px 25px;
  }

  /*.main__view1Bubulle a:hover{
    background-color: #038db3;
    cursor: pointer;
  }*/

  .main__view1Bubulle--pos1 p{
    background-image: url(../images/fibre/tango_validation_icon.svg);
    background-position: 50% 24%;
    z-index: 103;
    cursor: default;
  }

  .main__view1Bubulle--pos2 p{
    background-image: url(../images/fibre/tango_advanced_settings_icon.svg);
    background-position: 50% 24%;
    z-index: 104;
    cursor: default;
  }

  .main__view1Bubulle--pos3 p{
    background-image: url(../images/fibre/tango_complete_offer_icon.svg);
    background-position: 52% 28%;
    z-index: 105;
    cursor: default;
  }

  
  @media (max-width:1200px) {
    #main__view1 {
      height: calc(100vh - 135px);
    }

    .main__view1-bgCircle{
      min-height: 721px;
    }

    .main__view1Container {
      height: auto;
    }

    .main__view1-bgPerso{
      background-size: 800px;
      top: 162px;
      left: 260px;
      width: 100%;
      height: calc(100vh - 242px);
      min-height: 359px;
    }
    .main__view1-bgPlanet{
      top: 533px;
      min-height: 0;
    }

    .main__view1Title{
      background-size: 450px;
      position: relative;
      left: 20px;
      top: 30px;
    }

    .main__view1Subtitle{
      position: relative;
      font-size: 24px;
      top: 180px;
      left: 20px;
      top: 50px;
    }

    .main__ctaBtn a{
      position: relative;
      left: 20px;
      width: 250px;
    }

    .main__view3TangoCtapBtn a{
      top: 95px;
    }

    .main__view1Btn a{
      top: 200px;
      left: 0;
    }

    .main__view1Slider2{
      display: flex;
    }

    .main__view1Bubulle p{
      top: 141px;
      margin-bottom: 30px;
      font-size: 18px;
      width: 230px;
      height: 230px;
      padding: 120px 25px 30px 25px;
    }
  }

  @media (max-width:860px) {

    #main__view1{
      height: calc(100vh - 254px);
    }

    .main__view1Title{
      top: 10px;
    }

    .main__view1Subtitle{
      top: 13px;
    }

    .main__view3TangoCtapBtn a{
      top: 33px !important;
    }

    .main__view1-bgPerso{
      height: calc(100vh - 590px);
      min-height: 339px;
      background-size: 500px;
      left: calc(90vw - 262px);
      top: 182px;
    }

    .main__view1-bgPlanet{
      height: calc(100vh - 700px);
      min-height: 255px;
      top: 500px;
      right: -295px;
      background-size: 25%;
    }

    .main__view1-bgCircle{
      height: 100vh;
    }

    .main__view1Bubulle p {
      top: 80px;
      margin-bottom: 30px;
      font-size: 14px;
      width: 150px;
      height: 150px;
      padding: 65px 15px 30px 15px;
    }
    .main__view1Bubulle--pos1 p, .main__view1Bubulle--pos2 p {
      background-position: 50% 10%;
      background-size: 25%;
    }

    .main__view1Bubulle--pos3 p {
      background-position: 50% 14%;
      background-size: 60%;
    }
  }

  @media (max-width:770px) {
    .main__view1Bubulle p {
      top: calc(50vh - 280px);
    }
  }

  @media (max-width:740px) {
    .main__view1Bubulle p {
      top: 80px;
    }
  }
  @media (max-width: 480px){
    #main__view1 { height: 850px;}
    .main__view1Title{ left: 20px; top: 40px; font-size: 50px; margin-bottom: 20px;}
    .main__view1Subtitle { top: 6px; left: 20px;}
    .main__view1Bubulle p {top: 90px;}
    .main__view1Btn p {top: 160px;}
    .main__view1Slider2 {flex-direction: column;}
    .main__view1Bubulle p {left: unset; margin: 0 auto; float: none;}
    .main__view1Slider2 { height: 500px;}
    .main__view1Btn a {top: 150px;}
    .main__view1-bgCircle { min-height: 1100px;}
    .main__view1-bgPlanet { top: 650px; height: 100%;}
    .main__view1-bgPerso { left: calc(90vw - 200px);}
    .main__view1Subtitle { font-size: 20px; white-space: normal;}
  }
/*
* ========================== VIEW 2 ==================================
*/

  #view-2{
      height: 80px;
      padding: 0;
      margin: 0;
      /*box-shadow: 0px 0px 125px 15px rgba(0, 0, 0, .4);*/
      z-index: 200;
  }

  .main__view2{
    width: 100vw;
    background-color: #005CA9;
    height: inherit;
  }

  .main__view2Menu{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100vw;
    height: inherit;
    justify-content: center;
    
  }

  .main__view2Item{
    display: flex;
    list-style: none;
    padding: 10px 50px;
    font-size: 18px;
    height: inherit;
    align-items: center;
    vertical-align: middle;
    border: 1px #005ca9 solid;
    background-color: #005ca9;
    /*background-image: linear-gradient(to top,  #005ca9,rgba(255,255,255,0));*/
    /*transition: all 0.5s;*/
    
  }

  .main__view2Item:hover{
    background-color: #002f62;
    cursor: pointer;
    border: 1px #002F62 solid;
  }

  .main__view2Item a {
    color: #ffffff !important;
    white-space:nowrap;
    text-decoration: none;
    vertical-align: middle;
  }

  @media (max-width:840px) {

    #view-2{
      height: auto;
      padding: 0;
      margin: 0;
      margin-bottom: -10px;
      /*box-shadow: 0px 0px 125px 15px rgba(0, 0, 0, 0);*/
    }

    .main__view2Menu{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      width: 100vw;
      height: inherit;
      justify-content: center;
      padding: 0;
    }

    .main__view2Item{
      display: block;
      left: 0;
      width: 100%;
      text-align: center;
      padding: 20px;
    }
  }
  
/*
* ========================== VIEW 3 ==================================
*/

  #view-3{
    height: 1200px;
    padding: 0;
    margin: 0;
    min-width: 600px;
  }

  .main__view3{
    position: absolute;
    width: 100vw;
    min-height: 858px;
    background-image: url('../images/fibre/tango_fibre_view3_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .main__view3Slider1{
    position: relative;
    display: block;
    left: 258px;
  }

  .main__view3Title{
    font-family: TT-round-bold,Arial,sans-serif;
    position: relative;
    top: 80px;
    width: 674px;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: #BCFC32;
  }

  .main__view3Subtitle{
    position: relative;
    top: 70px;
    margin-top: 40px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color:#fff;
  }

  .main__view3Btn{
    display: block;
    position: relative;
    top: 120px;
    width: 650px;
  }

  .main__view3Btn:hover{
    cursor: pointer;
  }

  .main__view3BtnBackCircle{
    position: absolute;
    background-image: linear-gradient(90deg,  #B8FA36,rgba(255,255,255,0));
    width: 245px;
    height: 245px;
    border-radius: 200px;
    z-index: 1;
  }

  .main__view3BtnPanel{
    font-family: TT-round,Arial,sans-serif;
    display: block;
    position: relative;
    top: 23px;
    left: 23px;
    height: 199px;
    border-radius: 200px;
    background-color: #ffffff;
    background-image: linear-gradient(to top,  #ffffff,rgba(255,255,255,0));
    transition: all 0.5s;
    z-index: 2;
  }

  .main__view3BtnPanel:hover{
    background-color: #bbb;
  }

  .main__view3BtnBorderPrice{
    display: block;
    float: left;
    position: relative;
    top: 0;
    left: 0;
    padding: 50px 0 0 45px;
    width: 199px;
    height: 199px;
    border: #e3e3e3 6px solid;
    border-radius: 200px;
    background-color: #fff;
    background-image: linear-gradient(-45deg,  #fff 0%,#dedede 70%, #cecece 85%);
    z-index: 3;
  }

  .main__view3BtnTxtPrice1{
    display: block;
    color: #d8127e;
    font-size: 19px;
    font-weight: 100;
    z-index: 5;
  }

  .main__view3BtnTxtPrice2{
    font-family: TT-round-bold,Arial,sans-serif;
    position: relative;
    color: #d8127e;
    font-size: 68px;
    font-weight: 700;
    line-height: 0.7;
    z-index: 6;
    float: left;
  }

  .main__view3BtnTxtPrice3{
    font-family: TT-round-bold,Arial,sans-serif;
    position: relative;
    color: #d8127e;
    font-size: 34px;
    font-weight: 700;
    text-align: start;
    vertical-align: top;
    line-height: 0.7;
    z-index: 6;
    float: left;
  }

  .main__view3BtnTxtPrice4{
    position: relative;
    color: #d8127e;
    font-size: 34px;
    font-weight: 100;
    text-align: start;
    vertical-align: top;
    line-height: 0.7;
    z-index: 6;
  }

  .main__view3BtnTxtPanel{
    position: relative;
    display: flex;
    flex-direction: column;
    align-content: center;
    left: 20px;
    top: 37px;
    z-index: 8;
  }

  .main__view3BtnTxtPanel1{
    color: #d8127e;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
  }

  .main__view3BtnTxtPanel2{
    font-family: TT-round-bold,Arial,sans-serif;
    color: #005CA9;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 0.75;
  }

  .main__view3BtnTxtPanel3{
    color: #005CA9;
    font-size: 29px;
    font-weight: 100;
    line-height: 1.5;
  }

  .main__view3TangoEasyshopBtn{
    position: relative;
    background-image: url(../images/fibre/tango_easyshop_btn.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: 50% 50%;
    width: 323px;
    height: 414px;
    z-index: 110;
    position: absolute;
    top: 650px;
    left: calc(20vw - 232px);
  }

  .main__view3TangoCtapBtn a{
    top: 320px;
    left: calc(20vw - 180px);
    z-index: 102;
  }

  .Btn_bottom a{
    top: 600px !important;
  }

  .main__view3CmdBtn a{
    top: 980px;
    left: calc(50% - 213px);
    z-index: 102;
  }

  .main__view3Argues{
    position: absolute;
    top: 1100px;
    left: -273px;
    width: 100vw;
    height: inherit;
  }

  .main__view3Menu{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100vw;
    height: inherit;
    justify-content: center;
  }

  .main__view3list {
    display: flex;
    list-style: none;
    padding: 10px 50px;
    font-size: 20px;
    height: inherit;
    align-items: center;
    vertical-align: middle;
    color: #005CA9;
    transition: all 0.5s;
    white-space: nowrap;
  }

  .main__view3list a{
    text-decoration: none;
  }

  .main__view3list:hover{
    color: #002F62;
  }

  .main__view3Item1::before {
    content: url(../images/fibre/tango_available_icon.svg);
    margin-right: 20px;
    top: 5px;
    position: relative;
  }

  .main__view3Item2::before {
    content: url(../images/fibre/tango_secure.svg);
    margin-right: 20px;
    top: 5px;
    position: relative;
  }

  .main__view3Item3::before {
    content: url(../images/fibre/tango_fast.svg);
    margin-right: 20px;
    top: 5px;
    position: relative;
  }

  @media (max-width:1200px) {

    #view-3{
      height: 1300px;
    }

    .main__view3{
      min-height: 850px;
    }

    .main__view3Slider1{
      left: 0;
    }

    .main__view3Title{
      top: 80px;
      left: 0;
      width: 75%;
      font-size: 30px;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }

    .main__view3Subtitle{
      top: 70px;
      left: 0;
      width: 85%;
      max-width: 600px;
      margin-top: 40px;
      font-size: 24px;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }

    .main__view3CmdBtn a{
      top: 770px;
      left: 0;
      z-index: 102;
      left: calc(50% - 125px);
    }

    .main__view3Btn{
      top: 120px;
      left: -20px;
      margin-right: auto;
      margin-left: auto;
      width: calc(90% - 20px);
    }

    .main__view3BtnTxtPanel{
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      left: -5%;
      top: 40px;
      margin-right: auto;
      margin-left: auto;
    }

    .main__view3BtnTxtPanel2{
      font-size: 40px;
      text-align: center;
    }

    .main__view3TangoEasyshopBtn{
      height: 200px;
      background-size: 80%;
      top: 750px;
      left: calc(25% - 77px);
      left: calc(50vw - 173px);
    }

    .main__view3TangoCtapBtn a{
      top: 95px;
      left: 20px;
      z-index: 102;
    }

    .Btn_bottom a{
      top: 210px !important;
    }

    .main__view3Slider1 .main__view3TangoCtapBtn a{
      top: 210px;
      left: 0;
      margin-right: auto;
      margin-left: auto;
      z-index: 102;
    }

    .main__view3Argues {
      top: 975px;
      left: calc(50vw - 190px);
    }

    .main__view3Menu {
      flex-direction: column;
      align-items: flex-start;
      width: min-content;
      /*margin-right: auto;
      margin-left: auto;*/
    }

    .main__view3Item1{
      margin-left: -4px;
    }

    .main__view3Item3{
      margin-left: -18px;
    }

  }

  @media (max-width:640px) {
    .main__view3BtnTxtPanel{
      top: 60px;
      left:-5px;
    }

    .main__view3BtnTxtPanel3{
      font-size: 14px;
    }

    .main__view3BtnTxtPanel2{
      font-size: 24px;
    }

    .main__view3BtnTxtPanel1{
      font-size: 18px;
    }

    .main__view3CmdBtn a {
      position: absolute;
      top: 1180px;
      /*left: calc(50vw - 100px);*/
      z-index: 102;
    }
    .main__view3Argues {
      left: calc(50vw - 165px);
    }
  }

  @media (max-width: 480px){
    .main__view3Title {font-size: 24px;}
    .main__view3Subtitle {font-size: 18px;}
    .main__view3TangoEasyshopBtn {width: 223px; left: calc(50vw - 113px);}
    .main__ctaBtn a {
      padding: 20px 30px;
      font-size: 16px;
      font-weight: 400;
    }
    .main__view3 { min-height: 900px;}
    .main__view3Title { top: 60px;}
    .main__view3Btn { width: 199px;}
    .main__view3BtnPanel { height: 340px;}
    .main__view3BtnTxtPanel {
      position: absolute;
      top: 220px;
      left: 27px;
    }
    .main__view3TangoEasyshopBtn { top: 800px;}
    .main__view3Argues {top: 1000px;}
    .main__view3TangoCtapBtn a { top: 40px; left: 20px;}
    .main__view3CmdBtn a { top: 1200px;}
  }
}

/*
* ==================== effects and others ===========================
*/

/*#menu.navbar .navbar-header .navbar-brand {
  background-image: url()!important;
}*/

.navbar#menu {
  z-index: 1000 !important;
}