Bauru - Day&Night Sun&Rain - Pure CSS Illustrations and Animations

bauru-day-night-sun-rain-pure-css-illustrations-and-animations.markdown

Bauru - Day&Night Sun&Rain - Pure CSS Illustrations and Animations

A city (based on Bauru-SP Brasil) made with css only (js used to add some classes to make it night \o). You can use the slider to change day-night and sun-rain. have fun :D And don't forget to click on the clouds!

A Pen by Bojan on CodePen.

License.

index.html

<div class="ceu">
  <div class="estrelas-wrapper hidden"></div>
  <div class="chuva-wrapper hidden">
  </div>
  <div class="nuvem-wrapper">
    <div class="nuvem nuvem1"></div>
    <div class="nuvem tipob nuvem2"></div>
    <div class="nuvem nuvem3"></div>
    <div class="nuvem tipob nuvem4"></div>
    <div class="nuvem nuvem5"></div>
    <div class="nuvem tipob nuvem6"></div>
    <div class="nuvem nuvem7"></div>
    <div class="nuvem tipob nuvem8"></div>
    <div class="nuvem nuvem9"></div>
    <div class="nuvem tipob nuvem10"></div>
  </div>
</div>

<div class="container">
  <div class="info">
    <div class="switch-wrapper">
      <label class="switch dia-noite">
					<input type="checkbox">
					<div class="slider">
						<div class="dia-noite">
							<div class="raio r1"></div>
							<div class="raio r2"></div>
							<div class="raio r3"></div>
							<div class="raio r4"></div>
						</div>
						<div class="e-noite"></div>
					</div>
				</label>
      <label class="switch sol-chuva">
					<input type="checkbox">
					<div class="slider">
						<div class="sol-chuva">
							<div class="raio-chuva"></div>
						</div>
					</div>
				</label>
    </div>
  </div>
</div>

<div class="bg-baixo">
  <div class="construcao-wrapper">
    <div class="predio-escuro predio-1"></div>
    <div class="predio-escuro predio-2"></div>
    <div class="predio-escuro predio-3"></div>
    <div class="predio-normal-1">
      <div class="janela-n1 janela-1 noite-brilha"></div>
      <div class="janela-n1 janela-2"></div>
      <div class="janela-n1 janela-3 noite-brilha"></div>
      <div class="janela-n1 janela-4"></div>
      <div class="janela-n1 janela-5"></div>
      <div class="janela-n1 janela-6 noite-brilha"></div>
      <div class="janela-n1 janela-7 noite-brilha"></div>
      <div class="janela-n1 janela-8"></div>
      <div class="janela-n1 janela-9 noite-brilha"></div>
      <div class="janela-n1 janela-10"></div>
      <div class="janela-n1 janela-11"></div>
      <div class="janela-n1 janela-12"></div>
      <div class="janela-n1 janela-13 noite-brilha"></div>
      <div class="janela-n1 janela-14 noite-brilha"></div>
      <div class="janela-n1 janela-15"></div>
      <div class="janela-n1 janela-16 noite-brilha"></div>
      <div class="janela-n1 janela-17"></div>
      <div class="janela-n1 janela-18"></div>
    </div>
    <div class="predio-normal-2">
      <div class="janelas-esquerda">
        <div class="janela noite-brilha"></div>
        <div class="janela"></div>
        <div class="janela noite-brilha"></div>
        <div class="janela"></div>
      </div>
      <div class="janelas-direita">
        <div class="janela-d"></div>
        <div class="janela-d"></div>
        <div class="janela-d noite-brilha"></div>
        <div class="janela-d noite-brilha"></div>
      </div>
    </div>
    <div class="predio-normal-3">
      <div class="fileira-janelas f1">
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
      </div>
      <div class="fileira-janelas f2">
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
      </div>
      <div class="fileira-janelas f3">
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
      </div>
      <div class="fileira-janelas f4">
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3 noite-brilha"></div>
      </div>
      <div class="fileira-janelas f5">
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3 noite-brilha"></div>
        <div class="janela-n3"></div>
        <div class="janela-n3"></div>
      </div>
    </div>
    <div class="arvore a8">
      <div class="folha arvore-1 f1"></div>
      <div class="folha arvore-1 f2"></div>
      <div class="folha arvore-1 f3"></div>
      <div class="folha arvore-1 f4"></div>
    </div>
    <div class="arvore a9">
      <div class="folha arvore-2 f1"></div>
      <div class="folha arvore-2 f2"></div>
      <div class="folha arvore-2 f3"></div>
      <div class="folha arvore-2 f4"></div>
    </div>
    <div class="arvore a10">
      <div class="folha arvore-3 f1"></div>
      <div class="folha arvore-3 f2"></div>
      <div class="folha arvore-3 f3"></div>
      <div class="folha arvore-3 f4"></div>
    </div>
    <div class="arvore a11">
      <div class="folha arvore-2 f1"></div>
      <div class="folha arvore-2 f2"></div>
      <div class="folha arvore-2 f3"></div>
      <div class="folha arvore-2 f4"></div>
    </div>
    <div class="arvore a12">
      <div class="folha arvore-3 f1"></div>
      <div class="folha arvore-3 f2"></div>
      <div class="folha arvore-3 f3"></div>
      <div class="folha arvore-3 f4"></div>
    </div>
    <div class="muro"></div>
    <div class="rua"></div>
    <div class="onibus">
      <div class="azul"></div>
      <div class="janela-padrao janela-atras"></div>
      <div class="janela-pequena janela-p-meio-1"></div>
      <div class="janela-padrao janela-meio"></div>
      <div class="janela-pequena janela-p-meio-2"></div>
      <div class="janela-padrao janela-f1"></div>
      <div class="janela-padrao janela-f2"></div>
      <div class="janela-pequena janela-p-frente"></div>
      <div class="laranja"></div>
      <div class="roda roda-1"></div>
      <div class="roda roda-2"></div>
    </div>
    <div class="rio"></div>
    <div class="poste p1">
      <div class="lampada esquerda"></div>
      <div class="lampada direita"></div>
    </div>
    <div class="poste p2">
      <div class="lampada esquerda"></div>
      <div class="lampada direita"></div>
    </div>
    <div class="poste p3">
      <div class="lampada esquerda"></div>
      <div class="lampada direita"></div>
    </div>
    <div class="poste p4">
      <div class="lampada esquerda"></div>
      <div class="lampada direita"></div>
    </div>
    <div class="arvore a1">
      <div class="folha arvore-3 f1"></div>
      <div class="folha arvore-3 f2"></div>
      <div class="folha arvore-3 f3"></div>
      <div class="folha arvore-3 f4"></div>
    </div>
    <div class="arvore a2">
      <div class="folha arvore-2 f1"></div>
      <div class="folha arvore-2 f2"></div>
      <div class="folha arvore-2 f3"></div>
      <div class="folha arvore-2 f4"></div>
    </div>
    <div class="arvore a3">
      <div class="folha arvore-1 f1"></div>
      <div class="folha arvore-1 f2"></div>
      <div class="folha arvore-1 f3"></div>
      <div class="folha arvore-1 f4"></div>
    </div>
    <div class="arvore a4">
      <div class="folha arvore-2 f1"></div>
      <div class="folha arvore-2 f2"></div>
      <div class="folha arvore-2 f3"></div>
      <div class="folha arvore-2 f4"></div>
    </div>
    <div class="arvore a5">
      <div class="folha arvore-3 f1"></div>
      <div class="folha arvore-3 f2"></div>
      <div class="folha arvore-3 f3"></div>
      <div class="folha arvore-3 f4"></div>
    </div>
    <div class="arvore a6">
      <div class="folha arvore-1 f1"></div>
      <div class="folha arvore-1 f2"></div>
      <div class="folha arvore-1 f3"></div>
      <div class="folha arvore-1 f4"></div>
    </div>
    <div class="arvore a7">
      <div class="folha arvore-2 f1"></div>
      <div class="folha arvore-2 f2"></div>
      <div class="folha arvore-2 f3"></div>
      <div class="folha arvore-2 f4"></div>
    </div>
    <div class="totens">
      <div class="totem t1"></div>
      <div class="totem t2 esquerda"></div>
      <div class="totem t2 direita"></div>
      <div class="totem t3 esquerda"></div>
      <div class="totem t3 direita"></div>
      <div class="totem t4 esquerda"></div>
      <div class="totem t4 direita"></div>
      <div class="totem t5 esquerda"></div>
      <div class="totem t5 direita"></div>
      <div class="totem t6 esquerda"></div>
      <div class="totem t6 direita"></div>
      <div class="totem t7 esquerda"></div>
      <div class="totem t7 direita"></div>
    </div>
    <div class="construcao-do-centro">
      <div class="centro"></div>
    </div>
  </div>
</div>

script.js

var mudaDia = function mudaDia() {
  // se é noite
  if ($('.switch.dia-noite input').prop('checked')) {
    $('body, .lampada, .predio-normal-1, .predio-normal-2, .predio-normal-3').addClass('noite');
    $('.estrelas-wrapper').removeClass('hidden');
    // se não tá chovendo
    if (!$('.switch.sol-chuva input').prop('checked')) {
      colocaEstrelas();
      $('.nuvem-wrapper').addClass('hidden');
    } else
      $('.estrelas-wrapper').empty();
    
  // se é dia
  } else {
    $('.nuvem-wrapper').removeClass('hidden');
    $('body, .lampada, .predio-normal-1, .predio-normal-2, .predio-normal-3').removeClass('noite');
    $('.estrelas-wrapper').addClass('hidden');
  }
};

var mudaChuva = function mudaChuva() {
  // se tá chovendo
  if ($('.switch.sol-chuva input').prop('checked')) {
    $('.nuvem-wrapper, .chuva-wrapper').removeClass('hidden');
    $('.nuvem').addClass('chovendo');
    if ($('.switch.dia-noite input').prop('checked'))
      $('.estrelas-wrapper').empty();

  // se não tá chovendo
  } else {
    // se é noite
    if ($('.switch.dia-noite input').prop('checked')) {
      colocaEstrelas();
      $('.nuvem-wrapper').addClass('hidden');
    }
    $('.chuva-wrapper').addClass('hidden');
    $('.nuvem').removeClass('chovendo');
  }
};

var colocaEstrelas = function colocaEstrelas() {
  /* criando estrelas */
  for (i = 0; i < 100; i++)
  $('.estrelas-wrapper').append("<div class='estrelas s" + i +"'></div>");
};

$(function() {
   $('.switch').on('click', function() {
      if ($(this).hasClass('dia-noite'))
       mudaDia();
      else
        mudaChuva();
  });
  
  /* criando chuva */
   for (i = 0; i <= 100; i++)
    $(".chuva-wrapper").append("<div class='chuva chuva-" + i + "'></div>");
  
  $('.nuvem').on('click', function(){
    $(this).toggleClass('pao');
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$dia: #5A7495;
$noite: #181F26;
$textColor: #eee;
$nuvem: #f9f9f9;
$chuva: #e9e9e9;
$pao: #E0B56E;
$md: '1024px';
$sm: '1023px';
$xs: '787px';

$sol: #dcb64c;
$lua: #fbfcfc;

$bg-baixo: #50662e;
$rio: #69764f;
$border-rio: #505f35;
$construcao-do-centro: #bcbcbc;

$totem-topo: #545455;
$totem-chao: #3c3c3c;

$tronco: #353126;
$arvore-1: #44612e - 5;
$arvore-2: #515b2f - 5;
$arvore-3: #374927;

$poste: #49494a;
$lampada-dia: #eee;

$rua: #2a2b2a;
$muro: #736367;

$predio-escuro: #404b54;
$predio-1: #949494;
$predio-2: #807e75;
$detalhe-janela: #896443;

$onibus: #949494;
$azul-bus: #223d79;
$laranja-bus: #9f663f;

$luz-janela: #cdb27b;

// include keyframe animations that work in every browser
@mixin animation($name) {
  @keyframes #{$name} {
    @content;
  }
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
}

// include animations that work in every browser
@mixin browsers($info) {
  animation: $info;
  -webkit-animation: $info;
  -moz-animation: $info;
  -ms-animation: $info;
  -o-animation: $info;
}

// include gradients that work in every browser
@mixin gradient($info) {
  background: linear-gradient($info);
  background: -webkit-linear-gradient($info);
  background: -moz-linear-gradient($info);
  background: -ms-linear-gradient($info);
}

// include transformations that work in every browser
@mixin transform($info) {
  transform: $info;
  -webkit-transform: $info;
  -moz-transform: $info;
  -ms-transform: $info;
}

body {
  background-color: $dia;
  color: $textColor;
  font-family: helvetica, arial;
  line-height: 1.6;
  margin: 0;
  overflow: hidden;
  padding: 0;
  &.noite {
    background-color: $noite;
  }
}

.container {
  bottom: 0;
  height: 300px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 35%;
  z-index: 3;
  @media (max-width: $sm) {
    height: 400px;
    width: 45%;
  }
  @media (max-width: $xs) {
    width: 80%;
  }
  &::before {
    background-color: $textColor;
    border-radius: 5px;
    content: '';
    height: 150px;
    opacity: 0.15;
    left: 0;
    margin: auto;;
    position: absolute;
    right: 0;
    top: -10%;
    width: 80%;
    @media (max-width: $sm) {
      height: 180px;
    }
  }
}

.switch-wrapper {
  margin: 2.5% 0;
  text-align: center;
}

.switch {
  display: inline-block;
  height: 50px;
  position: relative;
  width: 96px;
  & input {
    display: none;
  }
  &.dia-noite {
    margin-right: 26px;
  }
}

.slider {
  background-color: $dia - 10;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  -webkit-transition: .4s;
  &:before {
    background-color: $dia - 25;
    content: "";
    height: 40px;
    left: 5px;
    position: absolute;
    top: 5px;
    transition: .4s;
    -webkit-transition: .4s;
    width: 40px;
  }
  .dia-noite {
    transition: .3s;
    -webkit-transition: .3s;
    background-color: $sol;
    border-radius: 100%;
    height: 15px;
    left: 17px;
    position: absolute;
    top: 17px;
    width: 15px;
    z-index: 3;
    .raio {
      background-color: $sol;
      height: 6px;
      position: absolute;
      width: 2px;
      &.r1 {
        left: 0;
        margin: auto;
        right: 0;
        top: -8px;
        &:after {
          @extend .raio.r1;
          background-color: $sol;
          content: '';
          height: 6px;
          position: absolute;
          top: 25px;
          width: 2px;
        }
      }
      &.r2 {
        left: -6.5px;
        top: 4px;
        @include transform(rotate(90deg));
        &:after {
          @extend .raio.r2;
          background-color: $sol;
          content: '';
          height: 6px;
          left: 0;
          top: -25px;
          position: absolute;
          width: 2px;
          @include transform(rotate(0deg));
        }
      }
      &.r3 {
        left: -2px;
        top: 14px;
        @include transform(rotate(45deg));
        &:after {
          @extend .raio.r3;
          background-color: $sol;
          content: '';
          height: 6px;
          left: 0;
          top: -25px;
          position: absolute;
          width: 2px;
          @include transform(rotate(0deg));
        }
      }
      &.r4 {
        left: 16px;
        top: 14px;
        @include transform(rotate(-45deg));
        &:after {
          @extend .raio.r4;
          background-color: $sol;
          content: '';
          height: 6px;
          left: 0;
          top: -26px;
          position: absolute;
          width: 2px;
          @include transform(rotate(0deg));
        }
      }
    }
  }
  .sol-chuva {
    transition: .3s;
    -webkit-transition: .3s;
    @extend .nuvem;
    left: -37px;
    top: 8px;
    @include transform(scale(0.25));
    .raio-chuva {
      display: none;
    }
    &:after {
      @media(max-width: 787px) {
        height: 55px;
        right: 15px;
        top: -34px;
        width: 55px;
      }
    }
    &:before {
      @media(max-width: 787px) {
        height: 43px;
        left: 19px;
        top: -21px;
        width: 43px;
      }
    }
    @media(max-width: 787px) {
      height: 42px;
      width: 125px;
    }
  }
}

input:checked + .slider {
   background-color: $noite + 20;
    &:before {
      background-color: $noite;
      @include transform(translateX(46px));
    }
  .dia-noite {
    background-color: $lua;
    height: 19px;
    left: 64px;
    top: 15px;
    width: 17px;
    @include transform(rotate(-30deg));
    .raio {
      display: none;
    }
    &:after {
      background-color: $noite;
      border-radius: 100%;
      content: '';
      height: 15px;
      left: 7px;
      position: absolute;
      top: 4px;
      width: 12px;
    }
  }
  .sol-chuva {
    background-color: $noite + 140;
    left: 9px;
    &:after, &:before {
      background-color: $noite + 140;
    }
    .raio-chuva {
      background-color: $noite + 100;
      display: block;
      height: 30px;
      left: 50px;
      position: absolute;
      top: 22px;
      width: 18px;
      @include transform(skew(-15deg));
      &:after {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 25px solid $noite + 100;
        content: '';
        height: 20px;
        left: 2px;
        position: absolute;
        top: 22px;
        width: 5px;
        @include transform(rotate(15deg));
      }
    }
  }
}

.hidden {
  display: none!important;
}

.bg-baixo {
	background-color: $bg-baixo;
	bottom: 0;
	height: 200px;
	position: absolute;
	width: 100vw;
}

.rio {
	background-color: $rio;
	border-radius: 0 0 90% 90%;
	border: 4px solid $border-rio;
	border-width: 0 4px 4px 0;
	bottom: 5px;
	height: 120px;
	position: absolute;
	width: 100vw;
}

.construcao-do-centro {
	background-color: $construcao-do-centro - 15;
	border-radius: 100%;
	border-bottom: 5px solid $construcao-do-centro - 50;
	bottom: 30px;
	box-shadow: 1px 4px 0px $construcao-do-centro - 110;
	height: 73.6px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 330px;
	z-index: 3;
	&:after {
		background-color: $construcao-do-centro - 15;
		bottom: -29px;
		content: '';
		height: 30px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 60px;
		@include transform(skew(-10deg));
	}
	.centro {
		background-color: $construcao-do-centro;
		border: 1px solid $construcao-do-centro - 75;
		border-radius: 100%;
		bottom: 4.3px;
		height: 65px;
		left: 7.5px;
		position: absolute;
		width: 315px;
	}
}

.totens {
	bottom: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 400px;
	.t1 {
	    border-bottom: 125px solid $totem-chao;
	    border-left: 12px solid transparent;
	    border-right: 12px solid transparent;
	    bottom: 0;
	    height: 0;
	    left: 0;
	    margin: auto;
	    position: absolute;
	    right: 0;
	    width: 50px;
	}
	.t2 {
	    border-bottom: 105px solid $totem-chao + 7.5;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: 0;
	    height: 0;
	    position: absolute;
	    width: 30px;
	    &.esquerda {
	    	left: 140px;
	    }
	    &.direita {
	    	right: 140px;
	    }
	}
	.t3 {
	    border-bottom: 60px solid $totem-chao + 15;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: 0;
	    height: 0;
	    position: absolute;
	    width: 50px;
	    z-index: 1;
	    &.esquerda {
	    	left: 90px;
	    	@include transform(skew(3deg));
	    }
	    &.direita {
	    	right: 90px;
	    	@include transform(skew(-3deg));
	    }
	}
	.t4 {
	    border-bottom: 80px solid $totem-chao + 5;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: 0;
	    height: 0;
	    position: absolute;
	    width: 40px;
	    z-index: 2;
	    &.esquerda {
	    	left: 70px;
	    	@include transform(skew(3deg));
	    }
	    &.direita {
	    	right: 70px;
	    	@include transform(skew(-3deg));
	    }
	}
	.t5 {
	    border-bottom: 60px solid $totem-chao + 20;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: -12px;
	    height: 0;
	    position: absolute;
	    width: 60px;
	    z-index: 3;
	    &.esquerda {
	    	left: 55px;
	    	@include transform(skew(3deg));
	    }
	    &.direita {
	    	right: 55px;
	    	@include transform(skew(-3deg));
	    }
	}
	.t6 {
	    border-bottom: 82px solid $totem-chao + 15;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: -15px;
	    height: 0;
	    position: absolute;
	    width: 30px;
	    z-index: 2;
	    &.esquerda {
	    	left: 30px;
	    	@include transform(skew(3deg));
	    }
	    &.direita {
	    	right: 30px;
	    	@include transform(skew(-3deg));
	    }
	}
	.t7 {
	    border-bottom: 105px solid $totem-chao + 5;
	    border-left: 10px solid transparent;
	    border-right: 10px solid transparent;
	    bottom: -12px;
	    height: 0;
	    position: absolute;
	    width: 30px;
	    z-index: 1;
	    &.esquerda {
	    	left: 5px;
	    	@include transform(skew(3deg));
	    }
	    &.direita {
	    	right: 5px;
	   	 	@include transform(skew(-3deg));
	    }
	}
}

.arvore {
	height: 30px;
	position: absolute;
	width: 30px;
	.folha {
		border-radius: 100%;
		position: absolute;
		&.arvore-1 {
			background-color: $arvore-1;
		}
		&.arvore-2 {
			background-color: $arvore-2;
		}
		&.arvore-3 {
			background-color: $arvore-3;
		}
	}
	&.a1 {
		bottom: 200px;
		left: 150px;
		.f1 {
			height: 25px;
			left: -3px;
			top: 0px;
			width: 25px;
		}
		.f2 {
			height: 28px;
			left: 10px;
			top: -7px;
			width: 28px;
		}
		.f3 {
			height: 24px;
			left: 13px;
			top: 8px;
			width: 24px;
		}
		.f4 {
			height: 23px;
			left: 0px;
			top: 10px;
			width: 23px;
		}
		&:after {
			background-color: $tronco;
			bottom: -22px;
			content: '';
			height: 30px;
			left: 14px;
			position: absolute;
			width: 6px;
		}
	}
	&.a2 {
		bottom: 185px;
		left: 200px;
		.f1 {
			height: 23px;
			left: 12px;
			top: 0px;
			width: 23px;
		}
		.f2 {
			height: 23px;
			left: -3px;
			top: -4px;
			width: 23px;
		}
		.f3 {
			height: 21px;
			left: 13px;
			top: 8px;
			width: 21px;
		}
		.f4 {
			height: 18px;
			left: 0px;
			top: 12px;
			width: 18px;
		}
		&:after {
			background-color: $tronco;
			bottom: -18px;
			content: '';
			height: 26px;
			left: 12px;
			position: absolute;
			width: 6px;
		}
	}
	&.a3 {
		bottom: 165px;
		left: 390px;
		.f1 {
			height: 22px;
			left: -5px;
			top: 0px;
			width: 23px;
		}
		.f2 {
			height: 23px;
			left: 10px;
			top: -2px;
			width: 23px;
		}
		.f3 {
			height: 21px;
			left: 13px;
			top: 8px;
			width: 21px;
		}
		.f4 {
			height: 18px;
			left: 0px;
			top: 12px;
			width: 18px;
		}
		&:after {
			background-color: $tronco + 2;
			bottom: -18px;
			content: '';
			height: 26px;
			left: 12px;
			position: absolute;
			width: 6px;
		}
	}
	&.a4 {
		bottom: 160px;
		left: 420px;
		.f1 {
			height: 25px;
			left: -5px;
			top: 0px;
			width: 25px;
		}
		.f2 {
			height: 26px;
			left: 10px;
			top: -2px;
			width: 26px;
		}
		.f3 {
			height: 24px;
			left: 13px;
			top: 8px;
			width: 24px;
		}
		.f4 {
			height: 21px;
			left: 0px;
			top: 12px;
			width: 21px;
		}
		&:after {
			background-color: $tronco + 2;
			bottom: -22px;
			content: '';
			height: 30px;
			left: 14px;
			position: absolute;
			width: 6px;
		}
	}
	&.a6 {
		bottom: 180px;
		left: 1010px;
		.f1 {
			height: 23px;
			left: 12px;
			top: 0px;
			width: 23px;
		}
		.f2 {
			height: 23px;
			left: -3px;
			top: -4px;
			width: 23px;
		}
		.f3 {
			height: 21px;
			left: 13px;
			top: 8px;
			width: 21px;
		}
		.f4 {
			height: 18px;
			left: 0px;
			top: 12px;
			width: 18px;
		}
		&:after {
			background-color: $tronco;
			bottom: -18px;
			content: '';
			height: 26px;
			left: 12px;
			position: absolute;
			width: 6px;
		}
	}
	&.a5 {
		bottom: 170px;
		left: 1040px;
		.f1 {
			height: 23px;
			left: -3px;
			top: 0px;
			width: 23px;
		}
		.f2 {
			height: 23px;
			left: 12px;
			top: -4px;
			width: 23px;
		}
		.f3 {
			height: 21px;
			left: 13px;
			top: 10px;
			width: 21px;
		}
		.f4 {
			height: 20px;
			left: -1px;
			top: 12px;
			width: 20px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
	&.a7 {
		bottom: 180px;
		left: 1280px;
		.f1 {
			height: 24px;
			left: -3px;
			top: 0px;
			width: 24px;
		}
		.f2 {
			height: 25px;
			left: 13px;
			top: -3px;
			width: 25px;
		}
		.f3 {
			height: 23px;
			left: 13px;
			top: 10px;
			width: 23px;
		}
		.f4 {
			height: 22px;
			left: -4px;
			top: 12px;
			width: 22px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
	&.a9 {
		bottom: 224px;
		left: 285px;
		.f1 {
			height: 25px;
			left: -5px;
			top: 0px;
			width: 25px;
		}
		.f2 {
			height: 26px;
			left: 10px;
			top: -2px;
			width: 26px;
		}
		.f3 {
			height: 24px;
			left: 13px;
			top: 8px;
			width: 24px;
		}
		.f4 {
			height: 21px;
			left: 0px;
			top: 12px;
			width: 21px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -18px;
			content: '';
			height: 26px;
			left: 13px;
			position: absolute;
			width: 5px;
		}
	}
	&.a8 {
		bottom: 226px;
		left: 315px;
		.f1 {
			height: 24px;
			left: -3px;
			top: 0px;
			width: 24px;
		}
		.f2 {
			height: 25px;
			left: 13px;
			top: -3px;
			width: 25px;
		}
		.f3 {
			height: 23px;
			left: 13px;
			top: 10px;
			width: 23px;
		}
		.f4 {
			height: 22px;
			left: -4px;
			top: 12px;
			width: 22px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
	&.a10 {
		bottom: 226px;
		left: 510px;
		.f1 {
			height: 24px;
			left: -3px;
			top: 0px;
			width: 24px;
		}
		.f2 {
			height: 25px;
			left: 13px;
			top: -3px;
			width: 25px;
		}
		.f3 {
			height: 23px;
			left: 13px;
			top: 10px;
			width: 23px;
		}
		.f4 {
			height: 22px;
			left: -4px;
			top: 12px;
			width: 22px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
	&.a11 {
		bottom: 226px;
		left: 720px;
		.f1 {
			height: 23px;
			left: 12px;
			top: 0px;
			width: 23px;
		}
		.f2 {
			height: 23px;
			left: -3px;
			top: -4px;
			width: 23px;
		}
		.f3 {
			height: 21px;
			left: 13px;
			top: 8px;
			width: 21px;
		}
		.f4 {
			height: 18px;
			left: 0px;
			top: 12px;
			width: 18px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
	&.a12 {
		bottom: 226px;
		left: 1310px;
		.f1 {
			height: 24px;
			left: -3px;
			top: 0px;
			width: 24px;
		}
		.f2 {
			height: 25px;
			left: 13px;
			top: -3px;
			width: 25px;
		}
		.f3 {
			height: 23px;
			left: 13px;
			top: 10px;
			width: 23px;
		}
		.f4 {
			height: 22px;
			left: -4px;
			top: 12px;
			width: 22px;
		}
		&:after {
			background-color: $tronco + 4;
			bottom: -20px;
			content: '';
			height: 28px;
			left: 13px;
			position: absolute;
			width: 6px;
		}
	}
}

.poste {
	background-color: $poste;
	bottom: 190px;
	height: 50px;
	position: absolute;
	width: 2px;
	z-index: 1;
	.lampada {
		background-color: $poste;
		border-radius: 100%;
		height: 4px;
		position: absolute;
		top: -1px;
		width: 12px;
		&.noite {
			&:before {
				display: block;
			}
		}
		&:after {
			background-color: $lampada-dia;
			border-radius: 100%;
			bottom: -1px;
			content: '';
			height: 4px;
			opacity: 0.7;
			position: absolute;
			width: 10px;
			z-index: -1;
		}
		&:before {
	    	border-bottom: 50px solid $lampada-dia;
			content: '';
			display: none;
			opacity: 0.15;
			position: absolute;
			width: 7px;
			z-index: -1;
		}
		&.esquerda {
			left: -10px;
			&:after {
				left: 1px;
			}
			&:before {	
	    		border-left: 20px solid transparent;
	    		left: -17px;
			}
		}
		&.direita {
			right: -10px;
			&:after {
				right: 1px;
			}
			&:before {	
	    		border-right: 20px solid transparent;
	    		right: -17px;
			}
		}
	}
	&.p1 {
		left: 100px;
	}
	&.p2 {
		left: 450px;
	}
	&.p3 {
		left: 800px;
	}
	&.p4 {
		left: 1150px;
	}
}

.rua {
	background-color: $rua;
	bottom: 200px;
	height: 7px;
	position: absolute;
	width: 100vw;
}

.muro {
	background-color: $muro;
	bottom: 200px;
	height: 40px;
	left: 500px;
	position: absolute;
	width: 675px;
}

.predio-escuro {
	background-color: $predio-escuro;
	bottom: 200px;
	opacity: 0.4;
	position: absolute;
	&.predio-1 {
		height: 120px;
		left: 600px;
		width: 70px;
		&:after {
			background-color: $predio-escuro;
			content: '';
			height: 10px;
			position: absolute;
			right: 0;
			top: -10px;
			width: 30px;
		}
	}
	&.predio-2 {
		height: 130px;
		left: 830px;
		width: 90px;
		&:after {
			background-color: $predio-escuro;
			content: '';
			height: 8px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: -8px;
			width: 50px;
		}
	}
	&.predio-3 {
		height: 110px;
		left: 1000px;
		width: 110px;
	}
}

.predio-normal-1 {
	background-color: $predio-1;
	bottom: 200px;
	height: 180px;
	left: 350px;
	position: absolute;
	width: 80px;
	&.noite {
		.noite-brilha {
			background-color: $luz-janela;
		}
	}
	.janela-n1 {
		background-color: $predio-1 - 70;
		display: inline-block;
		height: 10px;
		margin: 10px 0 0 11px;
		position: relative;
		width: 8.6px;
		&:after {
			background-color: $predio-1 - 50;
			bottom: 0;
			content: '';
			height: 4px;
			position: absolute;
			width: 8.6px;
		}
	}
}

.predio-normal-2 {
	background-color: $predio-2;
	bottom: 200px;
	height: 120px;
	left: 1210px;
	position: absolute;
	width: 60px;
	&.noite {
		.noite-brilha {
			background-color: $luz-janela;
		}
	}
	&:after {
		background-color: $predio-2;
		content: '';
		height: 7px;
		left: 0;
		position: absolute;
		top: -7px;
		width: 12px;
	}
	&:before {
		background-color: $predio-2;
		content: '';
		height: 11px;
		left: 12px;
		position: absolute;
		top: -11px;
		width: 22px;
	}
	.janelas-esquerda {
		display: inline-block;
		position: absolute;
	}
	.janelas-direita {
		@extend .janelas-esquerda;
		margin-left: 43px;
	}
	.janela {
		background-color: $predio-1 - 75;
		height: 12px;
		margin: 12px 0;
		width: 10px;
	}
	.janela-d {
		@extend .janela;
		margin: 12px 0;
		&:after {
			background-color: $detalhe-janela;
			content: '';
			height: 8px;
			margin-top: 4px;
			position: absolute;
			width: 10px;
		}
	}
}

.predio-normal-3 {
	background-color: $predio-1 - 10;
	bottom: 200px;
	height: 170px;
	left: 140px;
	position: absolute;
	width: 110px;
	&.noite {
		.noite-brilha {
			background-color: $luz-janela;
		}
	}
	.fileira-janelas {
		margin: 6px 6px 0 6px;
	}
	.janela-n3 {
		background-color: $predio-1 - 75;
		display: inline-block;
		height: 12px;
		margin: 0;
		position: relative;
		width: 10px;
	}
}

.onibus {
	background-color: $onibus;
	border-radius: 2px;
	bottom: 210px;
	height: 26px;
	position: absolute;
	width: 85px;
	@include browsers(vroomvroom 15s linear infinite);
	&:after {
		background-color: $onibus - 85;
		content: '';
		height: 18px;
		opacity: 0.8;
		position: absolute;
		right: 0;
		top: 2px;
		width: 2px;
	}
	.azul {
		background-color: $azul-bus;
		height: 26px;
		left: 14px;
		position: absolute;
		width: 35px;
	}
	.laranja {
		background-color: $laranja-bus;
		height: 5px;
		position: absolute;
		top: 14px;
		width: 100%;
	}
	.janela-padrao {
		background-color: $onibus - 95;
		border-radius: 2px;
		height: 10px;
		position: absolute;
		top: 2px;
		width: 10px;
	}
	.janela-pequena {
		background-color: $onibus - 95;
		border-radius: 2px;
		height: 10px;
		position: absolute;
		top: 3px;
		width: 7px;
		&:before {
			background-color: $azul-bus - 10;
			bottom: -13px;
			content: '';
			height: 13px;
			position: absolute;
			width: 7px;
		}
	}
	.janela-p-meio-1 {
		left: 16px;
	}
	.janela-p-meio-2 {
		left: 39px;
	}
	.janela-atras {
		left: 2px;	
	}
	.janela-meio {
		left: 26px;	
	}
	.janela-f1 {
		left: 52px;	
	}
	.janela-f2 {
		left: 63px;	
	}
	.janela-p-frente {
		left: 75px;	
		&:before {
			background-color: $onibus - 10;
		}
	}
	.roda {
	  background-color: #1b1b1b;
	  border-radius: 100px;
	  bottom: -5px;
	  height: 12px;
	  position: absolute;
	  width: 12px;
	  @include browsers(gira 0.4s linear infinite);
	  &:after {
	    background-color: #fff;
	    border-radius: 100px;
	    bottom: 0;
	    content: '';
	    display: block;
	    height: 6px;
	    left: 0;
	    margin: auto;
	    opacity: 0.2;
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 6px;
	    @include browsers(gira 0.4s linear infinite);
	  }
	}
	.roda-1 {
	  right: 20px;
	}
	.roda-2 {
	  left: 23px;
	}
}


/* nuvens que viram pao */
.nuvem {
	background-color: $nuvem;
  border-radius: 100px;
  height: 42px;
  opacity: 0.75;
  position: absolute;
  width: 125px;
  &.chovendo, &.chovendo:after, &.chovendo:before {
    background-color: $nuvem - 100;
  }
  &.tipob {
    @media (max-width: $xs) {
      display: none;
    }
    &:after {
      height: 35px;
      right: 15px;
      top: -20px;
      width: 35px;
    }
    &:before {
      height: 60px;
      right: 19px;
      top: -30px;
      width: 60px;
    }
  }
  &:after {
    background-color: $nuvem;
    border-radius: 100px;
    content: '';
    display: block;
    height: 55px;
    position: absolute;
    right: 15px;
    top: -34px;
    width: 55px;
  }
  &:before {
    background-color: $nuvem;
    border-radius: 100px;
    content: '';
    display: block;
    height: 43px;
    position: absolute;
    left: 19px;
    top: -21px;
    width: 43px;
  }
  @media (max-width: $xs) {
    height: 17px;
    width: 50px;
    &:after {
      height: 22px;
      right: 6px;
      top: -13px;
      width: 22px;
    }
    &:before {
      height: 17px;
      left: 7.5px;
      top: -8px;
      width: 17px;
    }
  }
}

@for $i from 1 through 10{  
  .nuvem#{$i}{
    $delay: random(250)*-1 + s;
    $speed: random(60) + 120 + s;
    left: 0;
    top: random(20) + 35 + px;
    @include browsers(walkthecloud $speed $delay linear infinite);
   }
}
  
@include animation(walkthecloud) {
  from {left: -20%; }
  to { left: 120%; }
}

/* estrelas da noite */
.estrelas-wrapper {
  z-index: 1;
}

.estrelas{
  background-color: #f9f9f9;
  border-radius: 5px;
  position: absolute;
}

@for $i from 1 through 100{
  .s#{$i}{
    $speed: random(15) + 10 + s;
    $delay: - (random(25)) + s;
    $size: random(2) + px;
    height: $size;
    left: random(100) + 0%;
    top: random(100) + 0%;
    width: $size;
    @include browsers(shiningStar $speed $delay infinite);
  }
}

@include animation(shiningStar) {
  0% { opacity: 1; }
  20% { opacity: 0.5; }
  40% { opacity: 0; }
  60% { opacity: 0.5; }
  80% { opacity: 0.75; }
  100% { opacity: 1; }
}

/* ta chovendo kd minha canoa? */
.chuva-wrapper {
  overflow: hidden;
  z-index: 2;
}

.chuva {
  background-color: $chuva;
  height: 7px;
  opacity: 0.25;
  position: absolute;
  width: 1px;
  z-index: 2;
}

@for $i from 0 through 100{
  .chuva-#{$i}{
      $speed: random(5) + 1 + s;
      $delay: - (random(100)/random(100)) + s;
      left: random(90) + 0%;
      @include browsers(kdcanoa $speed $delay linear infinite);
  }
}

@include animation(kdcanoa) {
  from { top: -10% }
  to { top: 110% }
}

/* o ceu vira pao */
.pao, .pao.chovendo{
	background-color: $pao;
  border-radius: 80% 90% 80% 85%;
  height: 50px;
  position: absolute;
  width: 125px;
    @media (max-width: $xs) {
      height: 20px;
      width: 50px;                                                                                
    }
  &:after, &.tipob:after {
    background-color: $pao + 30;
    border-radius: 5% 100% 5% 100%;
    bottom: 0;
    box-shadow: 0px 3px 3px ($pao - 20) inset;
    content: '';
    display: block;
    height: 35%;
    left: 0;
    margin: auto;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    @include transform(rotate(1deg));
    width: 75%;
  }
  &:before {
    display: none;
  }
}

/* ônibus e suas animacoes */
.bg-wrapper .onibus-wrapper {
  bottom: 20vh;
  left: 20vw;
  position: absolute;
  z-index: 3;
  img {
    width: 100%;
  }
}

/* roda que roda */
@include animation(gira) {
  100% { -webkit-transform: rotate(360deg); } 
}

/* ônibus que anda */
@include animation(vroomvroom) {
  from {left: -20px; }
  to { left: 110%; }
}