/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@font-face {
font-family: 'Helvetica Neue LT Std 45 Light';
font-style: normal;
font-weight: normal;
src: local('Helvetica Neue LT Std 45 Light'), url('HelveticaNeueLTStd Lt.woff') format('woff');
}


html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family:'Helvetica Neue LT Std 45 Light';
    background:rgb(0,0,0);
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

/*@media (orientation: portrait) {
  body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}*/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
svg,
video {

  vertical-align: middle;
}

img {

  vertical-align:top;
  max-width: 380px;

}

/*
 * Remove default fieldset styles.
 */

fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */




/* ==========================================================================
   Main and Aside Nav Menu
   ========================================================================== */


main{


  width:100%;
  height:736px;
  background: rgb(0,0,0);

}


header{

  position: fixed;
  z-index: 1000;
  background-color: black;
  width: 100%;
  height: 150px;

}

header.menu-active{

  position: fixed;
  z-index: 1000;
  background-color: black;
  width: 100%;
  height: 150px;

}

nav > section > p{

  position:absolute;
  left:11%;
  font-size: 0.7em;
  color:rgb(255,255,255);


}

nav > section > p > span > a{

  text-decoration:underline;
  cursor: pointer;
  color:rgb(255,255,255);
  -webkit-transtion: 500ms ease-in;
  -moz-transition: 500ms ease-in;
  -ms-transition: 500ms ease-in;
  -o-transition: 500ms ease-in;
  transition: 500ms ease-in;

}

nav > section > p > span > a:hover{


 color: rgb(193, 160, 30);
 -webkit-transtion: 500ms ease-out;
 -moz-transition: 500ms ease-out;
 -ms-transition: 500ms ease-out;
 -o-transition: 500ms ease-out;
 transition: 500ms ease-out;

}

aside > figure > img {

  /*margin-top:150px;*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

figure > img.logo-vc2 {

  width: 275px;
  height: 90px;
  margin-top: 25px;
  position: fixed;
  left: 27%;

}

figure > img.logo-vc2-nav{

  width: 275px;
  height: 90px;
  margin-top: 25px;
  position: fixed;
/*  left: 8%; */

}

figure > img.menu-vc2{

  margin-top: 38px;
  margin-left: -15px;
  float: left;
  position: fixed;
  cursor:pointer;

}

figure > img.menu-vc2-nav{

  margin-top: 38px;
  margin-left: 275px;
  float: left;
  position: fixed;
  cursor:pointer;

}

nav {


  position: absolute;
  top: 0;
  left: -500px;
  right: 0;
  bottom: 0;
/*  z-index: 900000; */
  background-color: black;
  font-family:'Helvetica Neue LT Std 45 Light';
  font-weight:normal;
  text-transform:uppercase;

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

.navActive{

  left: 0px;
  z-index: 900000;

}

.navDefault{

  left:-500px;
  z-index:0;

}

.navActive360px{

  left:-30px

}

.ulActive360px{

  margin-left: 60px !important;

}


nav > ul {

  font-size: 2em;

}

ul{

  margin-left:30px;
  margin-top: 270px;
  padding:0;

}

nav > ul > li {

  list-style-type:none;
  margin-top: 7px;

}

nav > ul > li > a{

  color: rgb(255, 255, 255);
  text-decoration:none;
  margin-top: 7px;

  -webkit-transition:500ms ease-out;
  -moz-transition:500ms ease-out;
  -ms-transition:500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

nav > ul > li > a:hover{

  color: rgb(193, 160, 30);

  /*Transition Effects*/

  -webkit-transition:500ms ease-out;
  -moz-transition:500ms ease-out;
  -ms-transition:500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}


nav > ul > li > a > span{

  color: rgb(193, 160, 30);
  font-weight: bolder;

}

/* ==========================================================================
   Footer Starts
   ========================================================================== */


footer{

  position:fixed;
  z-index: 990000;
  width:100% !important;
  background-color:black;
  bottom:0;
  left:0;
  padding-left:6px;
  padding-bottom: 5px;
  color: rgb(255, 255, 255);
  font-style:normal;
  font-size:0.6em;

  -webkit-transition:500ms ease-out;
  -moz-transition:500ms ease-out;
  -ms-transition:500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

footer > p {

  text-align:center;
  margin-left: -12px;
  font-size: 1.2em;
  width: 100%;

}


footer > ul > li{

  list-style-type:none;



}

footer > article{

  float:left;
  font-size:1.2em;

  -webkit-transition:500ms ease-out;
  -moz-transition:500ms ease-out;
  -ms-transition:500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

#facebook{

  position:fixed;
  width:3%;
  max-width:1.4em;
  margin-left:6px;
  margin-top:1px;

}

hr{

  border-top:3px solid rgb(193, 160, 30);
  margin-left: 0px;
  width: 94.44%;
  margin-bottom: -7px;

}

/* ==========================================================================
   Container General Settings
   ========================================================================== */

#container{

  width: 97%;
  height: 100%;
  background: rgb(0,0,0);
  overflow: hidden;

}


/* ==========================================================================
   Mosaic and Work Container
   ========================================================================== */


#mosaic{

  position:relative;
  width:100%;
  height:100%;
  overflow:overlay;
  display:none;
  padding-right: 12px;
  padding-left: 15px;
  margin-top: 155px;

}

#mosaic > .mosaic-container{

  margin:0;
  padding:0;

}

#mosaic > .mosaic-container > li  {

  position:relative;
  list-style-type:none;
  margin:0;
  padding:0;
  display:inline;

}

#mosaic > .mosaic-container > li > a{

  text-decoration:none;
  overflow:hidden;

}

#mosaic > .mosaic-container > li > a > p > span{

  font-size: 0.7em;
  position: absolute;
  top: 12px;
  left: 0;
  width: 90px;

}


/* BRIDGESTONE */

#mosaic > .mosaic-container > li > a > img.square01 {

   width:25.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01:hover {

   width:25.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}


/* CAMPARI ORANGE */

#mosaic > .mosaic-container > li > a > img.square02 {

   width:50.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square02:hover {

   width:50.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

/* DUREX */

#mosaic > .mosaic-container > li > a > img.square04 {

   width:25.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square04:hover {

   width:25.0%;
   margin:-2.2px;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}


/* SEMP TOSHIBA */

#mosaic > .mosaic-container > li > a > img.square01semp {

   width:25.0%;
   margin:-2.2px;
   margin-top: -29.2% !important;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01semp:hover {

   width:25.0%;
   margin:-2.2px;
   margin-top: -29.2% !important;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

/* IDP */

#mosaic > .mosaic-container > li > a > img.square01idp {

   width:25.0%;
   margin:-2.2px;
   margin-top:0.3%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01idp:hover {

   width:25.0%;
   margin-top:0.3%;


   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

/* JUNDIÁ */

#mosaic > .mosaic-container > li > a > img.square01jundia {

   width:25.0%;
   margin:-2.2px;
   margin-left: 24.9%;
   margin-top: -14.8%;


   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01jundia:hover {

   width:25.0%;
   margin:-2.2px;
   margin-left: 24.9%;
   margin-top: -14.8%;


   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}


/* CAMPARI FRANGÉLICO */

#mosaic > .mosaic-container > li > a > img.square04campariFrangelico {

   width:25.0%;
   margin:-2.2px;
   margin-top: -29.8%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square04campariFrangelico:hover {

   width:25.0%;
   margin:-2.2px;
   margin-top: -29.8%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

/* BRIDGESTONE NA ESTRADA */

#mosaic > .mosaic-container > li > a > img.square05 {

   width:50.0%;
   margin:-2.2px;
   margin-left: 24.9%;
   margin-top: -15.4%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square05:hover {

   width:50.0%;
   margin:-2.2px;
   margin-left: 24.9%;
   margin-top: -15.4%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

#mosaic > .mosaic-container > li > a > img.square03 {

   width:50.0%;
   margin:-2.2px;
   margin-top:-6.9%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square03:hover {

   width:50.0%;
   margin:-2.2px;
   margin-top:-6.9%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

#mosaic > .mosaic-container > li > a > img.square04Vanish {

   width:25.0%;
   margin:-2.2px;
   margin-top: -6.9%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square04Vanish:hover {

   width:25.0%;
   margin:-2.2px;
   margin-top: -6.9%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

#mosaic > .mosaic-container > li > a > img.square01Espolon {

   width:25.0%;
   margin:-0.3px;
   margin-top: -6.9%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01Espolon:hover {

   width:25.0%;
   margin:-0.3px;
   margin-top: -6.9%;


   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}


#mosaic > .mosaic-container > li > a > img.square01Aurora {

   width:25.0%;
   margin:-2.2px;
   float:left;
   margin-top: -15.3%;
   margin-left: 75%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: grayscale(100%) brightness(60%) contrast(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
   filter: gray;

   /* Transition effects happen */
   -webkit-transition: 700ms ease-out;
   -moz-transition: 700ms ease-out;
   -o-transition: 700ms ease-out;
   -ms-transition: 700ms ease-out;
   transition: 700ms ease-out;

}

#mosaic > .mosaic-container > li > a > img.square01Aurora:hover {

   width:25.0%;
   margin:-2.2px;
   float:left;
   margin-top: -15.3%;
   margin-left: 75%;

   /* Gray Scale Brightness amd Contrast when mouse is hover */
   -webkit-filter: grayscale(10%) brightness(100%) contrast(100%);
   filter: grayscale(10%) brightness(60%) contrast(100%);

   /* Transition effects happen */
   -webkit-transition: 700ms ease-in;
   -moz-transition: 700ms ease-in;
   -o-transition: 700ms ease-in;
   -ms-transition: 700ms ease-in;
   transition: 700ms ease-in;

}

.title{

  position:absolute;
  left:0;
  z-index:100;
  color:rgb(255,255,255);
  text-shadow:2px 2px black;
  text-transform:uppercase;
  display:none;
  font-size: 0.6em;

}

/* Bug fix for Mozilla FireFox */

.titleReset{

  top:0;
  margin-left:0;

}

/* Aurora bug fix Window's hight ajustment */

.title12{

  position:relative;
  float:left;
}


/* ==========================================================================
   Carousel-Campaigns
   ========================================================================== */

.carousel-wrap{

  display:none;
  position: absolute;
  top: 0px;
  left: 0;
  bottom:0;
  right:0;
  width: 100%;
/*  margin-left: 37.30%; */
  background: rgb(0,0,0);
  opacity:1;
  overflow:hidden;

}

.carousel-wrap-agency{

  display: none;
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0; */
  right: 0;
  width: 100%;
  height: 740px;
  margin-left: 0% !important;
  margin-top: 9.4%;
  z-index:999;

}


.carousel-wrap > header {

  border-left:3px solid rgb(193, 160, 30);
  margin-left:65px;
  margin-top:180px;
  margin-left:15px !important;
  height:150px;
  z-index:1000;

  -webkit-transition: 500ms ease-in;
  -ms-transition: 500ms ease-in;
  -o-transition: 500ms ease-in;
  transition: 500ms ease-in;

}

.carousel-wrap > header > hgroup > h3{

  float:left;
  font-size: 1em;
  margin:-2px 0 0 12px;
  padding:0px;
  color: rgb(255, 255, 255);

}

.carousel-wrap > header > hgroup > h3.head-agency-3{
  font-size:0.9em;
  line-height:2.4em;

}

.carousel-wrap > header > hgroup > h2{


  position: fixed;
  bottom: 75px;
  left:48%;
  color: rgb(255, 255, 255);
  background:black;
  border-radius:100%;
  font-size: 0.9em;
  text-transform:uppercase;
  border:2px solid rgb(193, 160, 30);
  padding-left:8px;
  padding-right:8px;
  padding-bottom:2px;
  padding-top: 2px;
  margin: 0 32px 0 0;
  cursor:pointer;

}

.carousel-wrap > header > hgroup > p{

  clear:both;
  color:rgb(255, 255, 255);
  margin-left:12px;
  width:90%;
  font-size: 0.8em;
  padding-top: 25px;

}

.carousel-wrap > header.headerTextHeight {
  border-left: 3px solid rgb(193, 160, 30);
  margin-left: 30px !important;
  margin-top: 60px;
  height: 20px;
}

.carousel-wrap > header.agency {
  border-left: 3px solid rgb(193, 160, 30);
  margin-left: 20px;
  margin-top: 150px;
  height: 50px;

}

.carousel-wrap > header > hgroup > h2.head-agency{

  margin-top: -5px;
  margin-right: 15px;
  font-size: 1em;

}

.carouselTopChange{

  top:120px;

}

.carouselTopChangeHeight{

  height:850px;

}



/* ==========================================================================
   Clientes List Assets
   ========================================================================== */

.photoWrap > .carousel-wrap > #clientsContainer > ul {

  margin:0;
  padding:0;
  display:none;

}

.photoWrap > .carousel-wrap > #clientsContainer {

  position:absolute;
  width:720px;
  height:463px;
  top:50%;
  left:50%;
  margin-left:-340px;
  margin-top:-200px;


  -webkit-transition: 200ms ease-in;
  -ms-transition: 200ms ease-in;
  -o-transition: 200ms ease-in;
  transition:200ms ease-in;


}

.photoWrap > .carousel-wrap > #clientsContainer > ul > li {

  list-style-type:none;
  margin:0.3em;
  padding:0;
  float:left;
  display:inline;
  width: 23.6%;

}

.photoWrap > .carousel-wrap > #clientsContainer > ul > li > img {

   width:100%;

}


/* ==========================================================================
   Agency List Assets
   ========================================================================== */

.photoWrap > .carousel-wrap-agency > article > p{

  color: white;
  font-size: 0.9em;
  margin-left: 20px;
  margin-right: 15px;
  margin-top: -5px;

}

/* ==========================================================================
   Report List Assets
   ========================================================================== */

.photoWrap > .carousel-wrap > article > header {

  margin:160px 0 0 80px;
  width:80%;
  color: rgb(255, 255, 255);

}

.photoWrap > .carousel-wrap > article > header > hgroup > h4 {

  margin:-20px 0 0 0;
  width:80%;
  color: rgb(255, 255, 255);

}

.photoWrap > .carousel-wrap > article > header > hgroup > h4 > span > a  {

  color:rgb(193, 160, 30);
  cursor:pointer;
  text-decoration:none;

}

.photoWrap > .carousel-wrap > article > header > hgroup > h4 > span > a:hover  {

  text-decoration:underline;

}


/* ==========================================================================
   Work With US FORM List Assets
   ========================================================================== */


form.pure-form > fieldset.personal-data > h4{

  color:rgb(255, 255, 255);

}

.photoWrap > .carousel-wrap > form {

  clear:both;
  width:42em;
  margin:50px auto;
  padding:2em;

}

.photoWrap > .carousel-wrap > form > fieldset {

  border:1px solid rgb(193, 160, 30);
  padding:1em;
  width: 300px;

}

.photoWrap > .carousel-wrap > form > fieldset > legend {

  color:rgb(255,255,255);

}

.photoWrap > .carousel-wrap > form > fieldset > h2 {

  color:rgb(193, 160, 30);

}

.photoWrap > .carousel-wrap > form > fieldset > label {

  color:rgb(255,255,255);
  font-size:1em;

}

form > fieldset >
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="cep"],
input[type="date"],
select{

  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  padding: 0.2em;
  margin-left:150px;
  border: 1px solid gray;
  display:block;

}

form > fieldset > input[type="radio"]{

  margin-left:5px;

}

form > fieldset >
select:focus{

  box-shadow: 4px 4px 4px rgba(193, 160, 30, 1);
  border: 1px solid gray;

}

form > fieldset >
input[type="text"]:focus{

  box-shadow: 4px 4px 4px rgba(193, 160, 30, 1);
  border: 1px solid gray;

}


form > fieldset >
input[type="cep"]:focus{

  box-shadow: 4px 4px 4px rgba(193, 160, 30, 1);
  border: 1px solid gray;

}

form > fieldset >
input[type="date"]:focus{

  box-shadow: 4px 4px 4px rgba(193, 160, 30, 1);
  border: 1px solid gray;

}

form > fieldset >
input[type="email"]:focus{

  box-shadow: 4px 4px 4px rgba(193, 160, 30, 1);
  border: 1px solid gray;

}

form > fieldset{

  margin-top:120px;

}


form > fieldset > label{

    color:rgb(255,255,255);
    font-size:1em;
    float:left;
    line-height:2em;

}


/* input[type="submit"] Style */

input[type="submit"]{

  width:100px;
  border:none !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(193, 160, 30) !important;

  -webkit-transition: 300ms ease-out;
  -o-transition: 300ms ease-out;
  -ms-transition: 300ms ease-out;
  transition:300ms ease-out;


}

input[type="submit"]:hover{

  background: rgb(193, 160, 30) !important;
  color: rgb(255, 255, 255) !important;

  -webkit-transition: 300ms ease-in;
  -o-transition: 300ms ease-in;
  -ms-transition: 300ms ease-in;
  transition:300ms ease-in;

}

/* input[type="text"] boxes size */

#name, #address, #course, #instituition, #nameFather, #nameMother{

  width:50%;

}


#number{

   width:10%;

}

#zone{

  width:5%;

}

#workWallet{

  width:10%;

}

#section, #serieWorkWallet{

  width:6%;

}

/* Radio Button General Ajusts ZONES */


section.zones {
	clear: both;
  margin: 0.4em;
  display: inline;
}

section.zones label{

  color: rgb(255,255,255);
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4;

}

.clearZone{

  margin-top:9em;
}

.clearGender{

  margin-top:4em;
}

/* hide input */
input.radio:empty {
	margin-left: -2190px;
}

/* style label */
input.radio:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin:0.1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: rgb(193, 160, 30);
}

input.radio:hover:not(:checked) ~ label {
	color: rgb(255, 255, 255);
}

/* toggle on */
input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: rgb(255, 255, 255);
	background-color: rgb(193, 160, 30);
}

input.radio:checked ~ label {
	color: rgb(255, 255, 255);
}

/* radio focus */
input.radio:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}

/* ==========================================================================
   Helper classes IE. and Mozilla Firefox and Safari Ajusts
   ========================================================================= */

   /* Bug fix for Mozilla FireFox 1280px x 700px */

   /* Semp Toshiba */
   .title4-firefox{

     position:absolute;
     top:130px;
     margin-left:-790px;

   }

   /* Campari Frangélico */
   .title7-firefox{

     position:absolute;
     top:-100px;
     margin-left:-790px;


   }

   /* Firestone */
   .title9-firefox{

     position:absolute;
     top: 5px;
     margin-left:-790px !important;
   }



   /* Internet Explorer 9 ajusts*/

   .title12-Ie{

     top:205px !important;

   }

   /* Aurora bug fix Window's hight ajustment */

   .mozillaHelperClassVanish{

     top:10px;

   }

   .mozillaHelperClassEspolon{

     top:5px;

   }

   .mozillaHelperClassBridgestoneNaEstrada{

     top:5px;

   }

   .mozillaHelperClassIdp{

     top:5px;

   }

   .mozillaHelperClassJundia{

     top:5px;

   }

   .mozillaHelperFooter{

    width: 39.1%;
    padding-left: 5px;

   }

   .hrIe{

    margin-right:50px;
    width:93.5%;

   }

   .footerIeHelper{

     left:-5px;

   }

   .closeTabPaddingFix{

     padding-left:7px !important;
     padding-top: 3px !important;

   }


   /* ==========================================================================
      Mobile's Agency settings
      ========================================================================== */


  .agency-container-mobile{
     margin-top:230px;
     margin-left: 10px;
     width: 99.5%;

   }

  .agency-container-mobile > p > span{
    color:rgb(193, 160, 30);

  }

  .agency-container-mobile > p span > a {
    text-decoration: none;
    color:rgb(193, 160, 30);

  }

  .agency-container-mobile > p span > a:hover {
    text-decoration: underline;
    color:rgb(193, 160, 30);

}

/* ==========================================================================
   Helper classes for MAC OS-X: Mavericks and Yosemite
  ========================================================================= */


   .macCloseTab{

     padding-top: 5px !important;
     font-size: 0.7em !important;

   }

   .closeTabQuery{

     font-size:0.6em !important;
     padding-left:6px !important;
     padding-right:7px !important;
     padding-bottom:1px !important;

   }

   .closeTab{

     font-size:0.9em !important;
     padding-left:8px !important;
     padding-right:8px !important;
     padding-bottom:2px !important;

   }

   /* ==========================================================================
      Helper Classes for 360px Mobile Query
     ========================================================================= */


   .logoQueryMenu320px{

    width: 230px !important;
    height:78px !important;
    margin-left: 10px !important;

   }

   .headClients360px{

     margin-top: 60px !important;

   }

   .headerClientsHeight360px{

     height: 220px !important;
     transition: 1s linear;
     -webkit-transition: 1s linear;
     -moz-transition: 1s linear;
     -ms-transition: 1s linear;

   }

   .clientsIconsContainer360px{

     margin-top:-110px !important;
     margin-left: 6px !important;

   }

   .closeTabHeight{
     bottom:85px !important;

   }

   .agencyHeader360px{
     margin-top:115px !important;
     height:75px !important;

   }

   .agencyHeader400px{
     margin-top:110px !important;

   }

   .agencyTitle360px{
     padding-top:15px !important;

   }

   .agencyTitle400px{
     padding-top:0px !important;

   }


   .workusHeader360px{
     margin-top:60px !important;

   }

   .workusFieldset360px{
     margin-top:40px !important;
     width: 250px !important;

   }

   .workusFieldset400px{
     margin-top:40px !important;
     width: 290px !important;

   }


   .reportsFieldset360px{
     margin-top: 60px !important;

   }

   .reportsFieldset400px{
     margin-top: 180px !important;

   }

   .reportsHeader360px{
     margin-top: 180px !important;

   }

   .reportsHeader400px{
     margin-top: 180px !important;

   }

   .imgSlider360px{
     display:none !important;

   }

   .headerClientCarouselActive{
     border:1px solid transparent !important;
     background-color: transparent;

   }

   .photoWrapper360px{
    margin:135px auto 0 5px !important;

   }

   .photoWrapper380px{
     width:320px !important;

   }

   .closeTabMosaic360px{
     display:none;
     bottom: 342px !important;
     left: 316px !important;

   }

   .thumbsImg360px{
     display:none !important;

   }

   .photoIPhone400px{
     width:380px !important;

   }

   .photoIPhone380px{
     width:335px !important;

   }


   /* ==========================================================================
      Helper Classes for 320px Mobile Query
     ========================================================================= */

   .vc2logo340px{
     width:230px !important;
     height:75px !important;
     margin-top:30px !important;
     left:28% !important;

     /* Transiton Animation Assets */

     transition: height 200ms ease-out;
     transition: width 200ms ease-out;
     -webkit-transition: height 200ms ease-out;
     -webkit-transition: width 200ms ease-out;
     -o-transition: height 200ms ease-out;
     -o-transition: width 200ms ease-out;
     -ms-transition: height 200ms ease-out;
     -ms-transtion: width 200ms ease-out;
     -moz-transtion: height:200ms ease-out;
     -moz-transition: width: 200ms ease-out;


   }

   .menulogo340px{
     width:45px !important;
     margin-top:42px !important;
     margin-left:-10px !important;

   }

   .vc2LogoActive340px{
     width:230px !important;
     height:75px !important;
     margin-top:30px !important;
     margin-left:-20px !important;

   }

   .menuLogoActive340px{
     margin-left: 205px !important;
     width:45px !important;
     margin-top:42px !important;

   }

   .menuList340px{
     margin-top: 160px !important;
     font-size: 1.5em !important;

   }

   .clientsTitle340px{
     margin-left: 20px !important;
     margin-top: 30px !important;

   }

   .clientsContainer340px{
     height:195px !important;

   }

   .clientsList340px{
     width:25% !important;

   }

   .clientesWrapper340px{
     margin-left: 15px !important;
     margin-top: 77px !important;

   }

   .workusFiledset320px{
     width:220px !important;
     margin-top:40px !important;

   }

   .closeButton320px{
     bottom: 300px !important;
     left: 280px !important;

   }

   .galleryHeader320px{
     margin-top:150px !important;
     font-size: 0.8em !important;

   }

   .imgPhoto320px{
    width:290px !important;

   }



   /* ==========================================================================
      Mobile Devices Helper Classes
      ========================================================================== */

  .closeTabAndroid{
   padding-top:7px !important;
   padding-bottom: 0px !important;

  }

  .closeTabWindows{
   padding-top: 2px !important;
   padding-bottom: 2px !important;
   font-size: 1em !important;

  }

  /* ==========================================================================
     Mobile Devices Loader
     ========================================================================== */



#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:rgb(193, 160, 30);
  position:absolute;
  width:0;
  top:50%;
  transition: 1s;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/*@media (orientation: portrait) {
  body > main{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

    height:100%;
  }

  #mosaic{

    position: absolute;

  }

}*/

@media only screen and (max-width: 1024px){

     #mosaic > .mosaic-container > li > a > img.square05 {

         margin-top:-14.7% !important;

   }

     #mosaic > .mosaic-container > li > a > img.square05:hover {

       margin-top:-14.7% !important;

   }

   .photoWrap > .carousel-wrap > #clientsContainer {
       position: absolute;
       width: 400px;
       height: 530px;
       top: 50%;
       left: 50%;
       margin-left: -172px;
       margin-top: -200px;

      -webkit-transition: 200ms ease-in;
      -ms-transition: 200ms ease-in;
      -o-transition: 200ms ease-in;
      transition: 200ms ease-in;

   }

  .photoWrap > .carousel-wrap > #clientsContainer > ul > li {

      width: 25.9%;

   }

   /*Agency Media Screen*/


   .photoWrap > .carousel-wrap-agency > article > p {

      font-size: 0.8em !important;

    }

}

@media only screen and (max-width: 1150px){


    #mosaic > .mosaic-container > li > a > img.square05 {

        margin-top: -15%;

   }

    #mosaic > .mosaic-container > li > a > img.square05:hover {

      margin-top: -15%;

   }

   .carousel-wrap > header > hgroup > h3.head-agency-3 {

      font-size: 0.7em !important;
      line-height: 2.7em;

   }

   /*Agency Media Screen*/

   .photoWrap > .carousel-wrap-agency > article > p {

      font-size: 0.8em;

    }

    /* Semp Toshiba */
    .title4-firefox{

      position:absolute;
      top:115px;
      margin-left:-700px;

    }

    /* Campari Frangélico */
    .title7-firefox{

      position:absolute;
      top:-95px;
      margin-left:-700px;
      font-size:0.9em;

    }

    /* Firestone */
    .title9-firefox{

      position:absolute;
      top: 5px;
      margin-left:-700px !important;
    }

    /* Internet Explorer bug fix for screens with width 1320px*/
    .title12-Ie{

      top:185px !important;

    }


}

@media only screen and (max-width: 1220px){

     footer {

        padding-left:12px;
        width:100%;

     }

     footer > article {

        font-size: 1.1em !important;


     }

     .carousel-wrap > header {

       margin-left: 5px;

       -webkit-transition: 500ms ease-in;
       -ms-transition: 500ms ease-in;
       -o-transition: 500ms ease-in;
       transition: 500ms ease-in;


     }

     /*Agency Media Screen*/

     .carousel-wrap > header > hgroup > h3.head-agency-3 {

       font-size: 1em !important;
       line-height: 1.7em !important;

     }

     .photoWrap > .carousel-wrap-agency > article > p {

        font-size: 0.8em;

      }

}


/*@media only screen and (max-width: 1420px){

  #mosaic{

   background:white;

 }

}*/

@media only screen and (min-width: 1320px){


  footer {

     padding-left: 8px;
     padding-bottom: 8px;
     width: 39%;

  }

  footer > article {

     font-size: 1.06em !important;


  }

  .photoWrap > .carousel-wrap > #clientsContainer {

    width:750px;
    margin-left: -359px;
    -webkit-transition: 200ms ease-in;
    -ms-transition: 200ms ease-in;
    -o-transition: 200ms ease-in;
    transition:200ms ease-in;

  }

  .photoWrap > .carousel-wrap > #clientsContainer > ul > li {

     margin: 0.2em;
     width: 24%;

  }

  /* Semp Toshiba */
  .title4-firefox{

    position:absolute;
    top:135px;
    margin-left:-840px;

  }

  /* Campari Frangélico */
  .title7-firefox{

    position:absolute;
    top:-100px;
    margin-left:-840px;

  }

  /* Firestone */
  .title9-firefox{

    position:absolute;
    top: 5px;
    margin-left:-840px !important;
  }

  /* Internet Explorer bug fix for screens with width 1320px*/
  .title12-Ie{

    top:225px !important;

  }


}


@media only screen and (max-width: 1390px) {
    /* Style adjustments for viewports that meet the condition */

   nav{

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;
  }

  aside > figure > img {

    /*margin-top: 118px;*/

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }

  footer > article{

    float:left;
    font-size:1em;

    -webkit-transition:500ms ease-out;
    -moz-transition:500ms ease-out;
    -ms-transition:500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }




}



@media only screen and (min-width: 1680px) {
    /* Style adjustments for viewports that meet the condition */

   nav{

    font-size:1.3em;
    margin: 155px 0 0 0;

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;
  }

  aside > figure > img {

    /*margin-top: 118px;*/

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }

  footer{

  padding-left: 15px;
  width: 39%;

 }

  footer > article{

    float:left;
    font-size:1.5em !important;


    -webkit-transition:500ms ease-out;
    -moz-transition:500ms ease-out;
    -ms-transition:500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }

  /* Mosaic Media Screen for devices with min-width of 1680px */

  #mosaic > .mosaic-container > li > a > img.square03{

      margin-top: -1.8%;

  }

  #mosaic > .mosaic-container > li > a > img.square03:hover{

      margin-top: -1.8%;

  }

  #mosaic > .mosaic-container > li > a > img.square05{

      margin-top: -15.1%;

  }

  #mosaic > .mosaic-container > li > a > img.square05:hover{

      margin-top: -15.1%;

  }

  #mosaic > .mosaic-container > li > a > img.square04Vanish {

      margin-top: -1.8%;

  }

  #mosaic > .mosaic-container > li > a > img.square04Vanish:hover {

      margin-top: -1.8%;

  }

  .photoWrap > .carousel-wrap > #clientsContainer {

      width: 990px;
      height:620px;
      top: 50%;
      left: 50%;
      top: 50%;
      margin-left: -480px;
      margin-top: -280px;

  }

  .carousel-wrap > header > hgroup > h3.head-agency-3 {
    font-size: 1.2em;
    line-height: 1.6em;

  }

  .photoWrap > .carousel-wrap-agency > article > p {

    font-size:1.2em;


  }

  .carousel-wrap-agency{

    width: 31.3% !important;

  }

  /* Semp Toshiba */
  .title4-firefox{

    position:absolute;
    top:195px;
    margin-left:-1180px;

  }

  /* Campari Frangélico */
  .title7-firefox{

    position:absolute;
    top:-150px;
    margin-left:-1180px;


  }

  /* Firestone */
  .title9-firefox{

    position:absolute;
    top: 25px;
    margin-left:-1180px !important;
  }

  /* IE 9 and 10 bug fixer for width 1680px + */

  .title12-Ie{

    top:325px !important;

  }

}

@media only screen and (max-height: 700px) {
    /* Style adjustments for viewports that meet the condition */

   nav{

    font-size: 0.8em;
    height: 700px;
  /*  margin: 115px 0 0 0; */

    /*Media screen height transitions*/

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }

  nav > ul{

    margin-top: 170px;


  }

  aside > figure > img {

    /*margin-top: 90px;*/

    /*Media screen height transitions*/

    -webkit-transition:500ms ease-out;
    -moz-transition: 500mms ease-out;
    -ms-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    transition: 500ms ease-out;

  }

}


@media only screen and (min-height: 860px) {

  nav{

  font-size:1.5em;
  margin: 220px 0 0 0;

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

aside > figure > img {

  /*margin-top: 90px;*/

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

 }

}



@media only screen and (min-height: 900px) {

  nav{

  font-size:1.5em;
  margin: 220px 0 0 0;

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

aside > figure > img {

  /*margin-top: 140px;*/

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

 }

}

@media only screen and (min-height: 1000px) {

  nav{

  font-size:1.7em;
  margin: 280px 0 0 0;

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

}

aside > figure > img {

  /*margin-top: 140px;*/

  /*Media screen height transitions*/

  -webkit-transition:500ms ease-out;
  -moz-transition: 500mms ease-out;
  -ms-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;

 }

}

@media only screen and (max-width: 360px){




}



@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}