/*  ///////////////////////   */
/*          GENERAL          */
/*  ///////////////////////   */

* { 
	margin: 0 auto; 
	padding: 0; 


	 -webkit-transition: font-size 0.5s, background-size 0.5s, letter-spacing 0.5s;
      -moz-transition: font-size 0.5s, background-size 0.5s, letter-spacing 0.5s;
        -o-transition: font-size 0.5s, background-size 0.5s, letter-spacing 0.5s;
           transition: font-size 0.5s, background-size 0.5s, letter-spacing 0.5s;
}
/*html, body {
  overflow-x: hidden;
}
*/

.hand-cursor { cursor: pointer; }

/*  ///////////////////////    */
/*      PRELOADER              */
/*  ///////////////////////    */

.icon-loader
{
  width:400px;
  height:400px;
  position: fixed;
  top:50%;
  left:50%;
  margin-top: -200px;
  margin-left: -200px;
  z-index: 90;
  visibility: hidden;
}

div.loader
{
  width:400px;
  height:400px;
  position: fixed;
  top:50%;
  left:50%;
  margin-top: -200px;
  margin-left: -200px;
  z-index: 90;
  visibility: hidden;
}

div.bg-loader
{
  width:100%;
  height:110%;
  position: fixed;
  background-color: white;
  z-index: 80;
  
}

/*  ///////////////////////   */
/*          MAIN MENU         */
/*  ///////////////////////   */

div.main-menu
{
  width:190px;
  height:100%;
  position: fixed;
  background-color: white;
  z-index: 40;
  left:-190px;
}

div.container-main-buttons
{
  width:126px;
  height:420px;
  top: 50%;
  left:50%;

  margin-top: -210px;
  margin-left: -95px;

  position: absolute;
}

div.buttons-main
{
  width:190px;
  height:100px;
  position: absolute;
  text-align: center;
  line-height: 135px;

  font-family: 'din-mediumalternate';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 10px;
  color: #4a5055;
  letter-spacing: 2px;
  z-index: 45;

}

div.button-main-illustration
{
  background-image: url("../img/main_menu_icon_interactive.svg");
  background-repeat: no-repeat;
  background-position: center;
  top:0px;
}

div.button-main-interactive
{
  background-image: url("../img/main_menu_icon_about.svg");
  background-repeat: no-repeat;
  background-position: center;
  top:50%;
  margin-top: -50px;

}

div.button-main-about
{
  background-image: url("../img/main_menu_icon_illustration.svg");
  background-repeat: no-repeat;
  background-position: center;
  bottom: 0px;

}


/* Arrows After Click */

div.arrow-main
{
  position: relative;
  left: -40px;
  opacity: 0;
}

div.arrow-main-illustration
{

  top: 75px;
}

div.arrow-main-interactive
{
  top: 216px;
}


div.arrow-main-about
{
  top: 356px;
}

div.arrow-line-button
{
  width: 40px;
  height: 2px;
  position: relative;
  top:22%;
  text-align: center;
  right: -32px;
}

div.arrow-line-button-illustration
{
  background-color: #cccccc;
}

div.arrow-line-button-interactive
{
  background-color: #cccccc;
}

div.arrow-line-button-about
{
  background-color: #cccccc;
}

div.arrow-button-svg
{
  width: 15px;
  height: 15px;
  position: relative;
  top:20.4%;
  left: 53px;
  top: 8px;
  background-repeat: no-repeat;
}

div.arrow-button-svg-illustration
{
  background-image: url("../img/arrow_illustration.svg");
}

div.arrow-button-svg-interactive
{
  background-image: url("../img/arrow_interactive.svg");
}

div.arrow-button-svg-about
{
  background-image: url("../img/arrow_about.svg");
}

/*  Lines Over  */

div.line-button-illustration
{
  width: 0px;
  height: 2px;
  position: relative;
  top:22%;
  background-color: #cccccc;
  text-align: center;
  right: -32px;
}


div.line-button-interactive
{
  width: 0px;
  height: 2px;
  position: relative;
  top:55.5%;
  background-color: #cccccc;
  right: -32px;
}

div.line-button-about
{
  width: 0px;
  height: 2px;
  position: relative;
  top:89%;
  background-color: #cccccc;
  right: -32px;

}

div.menu-vertical-divider
{
  width: 1px;
  height: 100%;
  margin-left: 189px;
  background-color: #eaeeee;
  position: relative;
}

div.main-menu-vertical-divider
{
  margin-left: 189px;
}


/*  ///////////////////////   */
/*     BACKGROUND  COVER      */
/*  ///////////////////////   */

		
div.container
{ 

	width: 100%;
	height:100%;
  position: fixed;
  overflow-y: auto;
}

div.container-cover
{ 
  width: 100%;
  height:100%;
  position: fixed;
  overflow-y: hidden;
}



div.bg-fingerprint
{ 
  background: url("../img/cover.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

         
  image-rendering:   -o-crisp-edges;         
  /*image-rendering: -webkit-optimize-contrast;*/
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;

  min-width: 100%;
  min-height: 100%;

  position: fixed;
  width: 100%;
  height:100%;
  z-index: 0;
}

div.intro-svg-container
{ 
  background: url("../img/outlines_intro.svg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;



  min-width: 100%;
  min-height: 100%;

  position: fixed;
  width: 100%;
  height:100%;
}





/*  ///////////////////////    */
/*      WELCOME SENTENCE       */
/*  ///////////////////////    */

div.welcome-sentence-cover
{
  font-family: 'linotype_didotitalic';
  font-size: 58px;
  letter-spacing: -3.5px;
  color: #711d59;

  position: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: -webkit-linear-gradient(left, #81a7cf, #7fcaea, #bf85b9);
  background: linear-gradient(left, #81a7cf, #7fcaea, #bf85b9);
  background-size: 570px;
  
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  top: 73%;
  width: 100%;
  text-align: center;
  
}


/*  ///////////////////////    */
/*         REGULAR TEXT        */
/*  ///////////////////////    */

/* Container para Safari */
div.text-container
{
  top: 82%;
  width: 100%;
  position: absolute;
}

.bold-text
{
  font-family: 'din-mediumalternate';
  /*color: #7e63bc;*/
  color: #7b73a5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.regular-text
{
  font-family: 'din-lightalternate';
  font-size: 14px;
  color: #711d59;
}



/* Texto corrido da Cover */
div.regular-text-cover
{
  
  -webkit-transition: width 0.4s;
     -moz-transition: width 0.4s;
       -o-transition: width 0.4s; 
          transition: width 0.4s;

  text-align: center;
  width: 470px;
}


/*  ///////////////////////    */
/*  BOTOES ILLU / INTE COVER   */
/*  ///////////////////////    */

div.container-buttons
{
  top: 35%;
  width: 100%;
  height: 140px;
  position: fixed;

  font-family: 'din-mediumalternate';
  font-size: 11px;
  color: #000000;
  letter-spacing: 2px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.button-illustration
{
  width: 150px;
  height: 140px;

  line-height: 59px;
  text-align: center;
  
  /*background-image: url("../img/cover-icon-illustration.svg");
  background-repeat: no-repeat;*/
  position: fixed;
  left: 13%;
}

div.button-interactive
{
  width: 150px;
  height: 140px;

  line-height: 59px;
  text-align: center;
  
  /*background-image: url("../img/cover-icon-interactive.svg");
  background-repeat: no-repeat;*/
  position: fixed;
  right: 13%;
  z-index: 150;

}


div.line-button-illustration-cover
{
  width: 0px;
  height: 2px;
  top: -45%;
  position: relative;
  background-color: #8faeca;
}

div.line-button-interactive-cover
{
  width: 0px;
  height: 2px;
  top: -45%;
  position: relative;
  background-color: #8faeca;
}


/*  ///////////////////////    */
/*        NAV ELEMENTS         */
/*  ///////////////////////    */

.navigation
{
  opacity: 0;
}

div.container-nav-elements
{
  z-index: 70;
  position: relative;
}

div.logo
{
  font-family: 'din-lightalternate';
  font-size: 22px;
  color: #cccac0;
  margin-left: 90px;
  margin-top: 21px;
  position: fixed;
  width: 220px;
  height: 45px;
}

div.main-menu-stripes
{
   position: fixed;
   margin-left: 40px;
   margin-top: 25px;
   background-image: url("../img/main_menu_stripes.svg");
   

   width: 21px;
   height: 18px;
}

.hitarea_mainbtn
{
    width: 70px;
    height: 60px;
    position: fixed
}

div.fixed-elements
{
  font-family: 'din-mediumalternate';
  font-size: 12px;
  color: #5f6671;
  position: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.fixed-elements-bottomleft
{
  margin-left: 40px;
  margin-bottom: 20px;
  bottom: 0;
 
}

div.fixed-elements-bottomcenter
{
	margin-left:50%;
  margin-bottom: 50%;
  bottom: 0;
 
}

div.fixed-elements-bottomright
{
  margin-right: 40px;
  margin-bottom: 20px;
  right: 0;
  bottom: 0;
}

.seeall
{
  position: fixed;
  float: right;
  right:0;
  top:0;
  margin-right: 50px;
  margin-top: 30px;

  font-size: 11px !important;

}

.line-seeall
{
   width: 18px;
   height: 2px;
   background-color: #5d717f;
}

.arrow-seeall
{
    right: 37px;
    top: -8px;
    position: relative;
}

.arrow-svg-seeall
{
    top: -9;
    left: 2px;
    position: relative;
}


div.copyright
{
  font-family: 'din-mediumalternate';
  font-size: 9px;
  color: #708292;
  opacity: 0.3;
  
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform-origin: right top 0;
  -webkit-transform-origin: right top 0;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: fixed;
  float: right;
  right:0;
  top:0;
  margin-right: 25px;
  margin-top: 20px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* Rollover Maroto Regular text grey social*/

  a.underlined-over-regular-grey 
  {
    position: relative;
    text-decoration: none;
    color: #5f6671;
    font-size: 10px !important;

  }


/*.underlined-over-regular-grey:after 
{
  padding: 50px;
  position: absolute;
  left: -25px;
  top: -25px;

}*/
  .underlined-over-regular-grey:before 
  {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: -3px;
  left: 0;
  background-color: #8c939e;
  visibility: hidden;

  -webkit-transform: scaleX(0);
  -o-moz-transform: scaleX(0);
  transform: scaleX(0);

  -webkit-transition: all 0.2s ease-in-out 0s;
  -o-moz-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;

  }

  .underlined-over-regular-grey:hover:before 
  {

  visibility: visible;
  -webkit-transform: scaleX(1.6);
  -o-moz-transition: all 0.2s ease-in-out 0s;
  transform: scaleX(1);

  }






/*  ///////////////////////    */
/*        MEDIA QUERY          */
/*  ///////////////////////    */

@media screen and (min-width: 1700px) {
   div.welcome-sentence-cover
   {
     font-size: 75px;
     letter-spacing: -4px;
     background-size: 800px;
   }
}

@media screen and (max-width: 915px) {
   div.container-buttons
   {
   	display:none !important;
   }
}

@media screen and (max-width: 600px) {
   div.welcome-sentence-cover
   {

     font-size: 52px;
     top: 70%;
   }
   div.text-container
   {
     top: 78%;
   }
}

@media screen and (max-width: 640px) {
   div.welcome-sentence-cover
   {
     font-size: 35px;
     top: 70%;
     letter-spacing: -2px;
   }

   div.regular-text-cover
   {
   	 -webkit-transition: width 1s;
        -moz-transition: width 1s;
          -o-transition: width 1s; 
   	         transition: width 1s; 

   	width: 330px;
   }
   .text-seeall 
   {
      visibility: hidden;
   }

   .seeall 
   {
    margin-right: -20px;
   }

   div.text-container
   {
   	top: 77%;
   }

   div.fixed-elements-bottomright
   {
   	display:none !important;
   }

   div.fixed-elements-bottomleft
   {
   	display:none !important;
   }

div.fixed-elements-bottomcenter
   {
   	display:none !important;
   }
   
   div.copyright
   {
    display:none !important;
   }

   div.main-menu-stripes
   {
     margin-left: 25px;
   }

   div.logo
   {
     margin-left: 70px;
     font-size: 24px;
     margin-top: 18px;
   }

   div.buttons-main
   {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 11px;
    letter-spacing: 2px;
   }

   div.button-main-illustration
   {
    background-size: 70%;
   }

    div.button-main-interactive
   {
    background-size: 70%;
   }

   div.button-main-about
   {
    background-size: 70%;
   }

  

}

@media screen and (max-width: 321px) {
   div.welcome-sentence-cover
   {
     font-size: 30px;
     top: 69%;
     letter-spacing: -2px;
   }

   div.regular-text-cover
   {
 /*  	font-size: 14px;*/
   	width: 300px;
   }

   div.text-container
   {
   	top: 76%;
   }

}



.vert a:link {
	color: #ffffff;
	text-decoration: none;
	font-size:1.2em;
		background-color:#006d7c;
	padding:5px;
		border-radius: 5px;
}
.vert a:visited {
	text-decoration: none;
	color: #ffffff;
	font-size:1.2em;
	background-color:#006d7c;
	padding:5px;
		border-radius: 5px;
}
.vert a:hover {
	text-decoration: underline;
	color: #ffffff;
	font-size:1.2em;
	background-color:#5691a2;
	padding:5px;
		border-radius: 5px;
}
.vert a:active {
	text-decoration: none;
	color: #ffffff;
	font-size:1.2em;
	background-color:#006d7c;
	padding:5px;
		border-radius: 5px;
}


.vertclair a:link {
	color: #3c8686;
	text-decoration: none;
	font-size:1.2em;
	background-color:#c8d200;
	padding:5px;
	border-radius: 5px;
}
.vertclair a:visited {
	text-decoration: none;
	color: #3c8686;
	font-size:1.2em;
	background-color:#c8d200;
	padding:5px;
		border-radius: 5px;
}
.vertclair a:hover {
	text-decoration: underline;
	color: #3c8686;
	font-size:1.2em;
	background-color:#e3e599;
	padding:5px;
		border-radius: 5px;
}
.vertclair a:active {
	text-decoration: none;
	color: #3c8686;
	font-size:1.2em;
	background-color:#c8d200;
	padding:5px;
		border-radius: 5px;
}

a {color:#711d59;
}
.tel { font-size:120%;
}