/* Document : common Created on : 29/05/2014, 10:49:28 Author : Cristiano Description: Purpose of the stylesheet follows. */ @charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700); @import url(http://fonts.googleapis.com/css?family=Vidaloka:400); html { padding: 0 !important; margin: 0 !important; width: 100%; height: 100%; } body { padding: 0 !important; margin: 0 !important; background-image: url('../img/bg.jpg'); width: 100%; height: 100%; } img { display: block; border: 0; margin: 0; padding: 0; } *::-webkit-input-placeholder { color: #252525; } *:-moz-placeholder { /* FF 4-18 */ color: #252525; } *::-moz-placeholder { /* FF 19+ */ color: #252525; } *:-ms-input-placeholder { /* IE 10+ */ color: #252525; } #site { position: relative; width: 100%; height: inherit; display: block; overflow: hidden; } #site .child { width: 100%; height: inherit; overflow: auto; padding-right: 17px; display: block; } .fim { width: 100%; height: 10%; } .logo { position: fixed; display: block; z-index: 9999; margin: 1.5% 0 0 20%; width: 25%; -webkit-transform: translate3d(0,0,0); } .selo { position: fixed; display: block; z-index: 9999; margin: 2% 0 0 33.2%; width: 4.3%; -webkit-transform: translate3d(0,0,0); } .logo img, .selo img { width: 100%; } #menu { position: fixed; background-color: #252525; width: 100%; height: 10%; padding: 0; margin: 0; bottom: 0; list-style: none; z-index: 9999999; } #menu li img { display: block; width: 100%; } #menu li div { display: table-cell; vertical-align: middle; } #menu li { position: relative; display: table; float: left; width: 2.8%; height: 100%; margin: 0 1.6%; cursor: pointer; } #menu .traco { position: absolute; background-color: #505050; height: 1px; width: 85%; top: 50%; margin-left: 2%; } #menu li.logo-menu { float: right; width: 6.5%; margin: 0 1% 0 0; } #menu .label { position: absolute; width: 10%; bottom: 150%; display: none; } #menu .label .seta { position: relative; width: 8%; left: 47%; } #menu .label .tit { font-family: "Vidaloka"; font-size: 0.8vw; width: 100%; background-color: #ffdd00; padding: 5%; text-align: center; } #menu .label .seta img { width: 100%; } #menu-mob { position: fixed; z-index: 99999; background-color: #252525; padding: 0; margin: 0; list-style: none; top: 10px; left: 10px; width: 90%; max-height: 90%; overflow: auto; display: none; } #menu-mob li { border-bottom: 1px solid #343434; cursor: pointer; color: #fff; font-family: "Vidaloka"; font-size: 12px; padding: 10px 10px; } #menu-mob li:hover { color: #fff; background-color: grey; } #bt-menu-mob { position: fixed; top: 10px; left: 10px; background-color: #252525; z-index: 9999; padding: 8px 8px 4px 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: none;} #bt-menu-mob b { width: 21px; height: 4px; border-radius: 2px; display: block; background: #fff; margin-bottom: 4px; } #section0 { background-image: url('../img/bg-home.jpg'); -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; background-position: center bottom; background-repeat: no-repeat; position: relative; width: 100%; height: 91.7%; overflow-x:hidden; z-index: 9; } #section0 .electro { position: relative; top: 43%; left: 26.1%; } #section0 .electro .nome { position: relative; font-family: "Vidaloka"; font-size: 6vw; color: #ffffff; line-height: 70%; } #section0 .electro .txt { position: relative; font-family: "Oswald"; font-weight: 300; font-size: 1.6vw; color: #ffffff; top: -5%; padding-left: 7%; } #section0 .seta { position: absolute; width: 18%; bottom: 2%; left: 42%; } #section0 .seta .label { font-family: "Oswald"; font-weight: 300; font-size: 1vw; border: 1px solid #ffffff; padding: 10px 10px 12px 10px; color: #ffffff; text-align: center; width: 100%; cursor: pointer; } #section0 .seta .label:hover { background-color: #ffdd00; border: 1px solid #ffdd00; color: #000; } #section0 .seta .setas { position: relative; width: 22%; padding-top: 20%; margin: 0 auto; } #section0 .seta .setas img { width: 100%; } #section0 .seta .setas .bt, #section0 .seta .setas .md { margin-top: -40%; } .section { position: relative; display: table; width: 63%; margin: 0 auto; height: auto; } .section .traco { position: absolute; height: 100%; width: 2px; margin: 0 auto; background-color: #252525; left: 49.9%; top: 0; } .section .titulo { font-family: "Vidaloka"; font-size: 2vw; line-height: 95%; color: #252525; background-color: #ffdd00; padding: 3% 4% 4% 4%; } .section .fleft { display: block; float: left; text-align: left; margin-left: 6%; } .section .fright { display: block; float: right; text-align: right; margin-right: 6%; } .section .box-left, .section .box-right { position: relative; float: left; width: 49.5%; } .section .box-right { border-left: 2px solid #252525; } .section .texto { position: relative; font-family: "Oswald"; font-weight: 300; font-size: 1.1vw; } .section .texto i { position: absolute; width: 3.5% } .section .texto i img { width: 100%; } .section .texto .ico-left { top: 0; left: -6.3%; } .section .texto .ico-right { top: 0; right: -6.4%; } .section .foto { position: relative; display: block; } .section .foto img { width: 100%; } .section .foto .compartilhar { position: absolute; width: 100%; right: 0; top: 100%; padding-top: 3px; text-align: right; z-index: 99999; } .section .foto .compartilhar .icone { float: right; padding-left: 5px; } #tabs { position: fixed; height: 100%; width: 20%; z-index: 999999; top: 0; right: -16.4%; } #tabs .bts, #tabs .box { float: left; } #tabs .bts { width: 18%; height: 100%; padding-top: 10%; } #tabs .box { width: 72%; height: 100%; background-color: #ffdd00; padding: 0 5%; } #tabs .bts img { width: 100%; margin-bottom: 5%; } #tabs .bts .bt-e-books { position: relative; width: 100%; } #tabs .bts .bt-mensagem { position: relative; width: 100%; } #tabs .box .e-books, #tabs .box .mensagem { display: none; } #tabs .box .titulo { font-family: "Vidaloka"; margin-top: 13%; font-size: 1.3vw; } #tabs .box .traco { margin: 5% 0; height: 1px; width: 100%; background-color: #252525; } #tabs .box .txt { font-family: "Oswald"; font-weight: 300; font-size: 0.85vw; } #tabs .box .form { margin-top: 5%; } #tabs .box .form input { font-family: "Oswald"; font-weight: 300; font-size: 0.7vw; width: 95%; background: transparent; border: 1px solid #252525; margin: 1% 0; padding: 2%; } #tabs .box .form textarea { font-family: "Oswald"; font-weight: 300; font-size: 0.7vw; width: 95%; height: 8vh; background: transparent; border: 1px solid #252525; margin: 1% 0; padding: 2%; } #tabs .box button { font-family: "Vidaloka"; background-color: #252525; color: #ffdd00; font-size: 1vw; width: 100%; padding: 3% 0; border: 0; margin-top: 4%; } #tabs .box button:hover { color: #ffffff; } #tabs .box .e-books { width: 100%; } #tabs .box .e-books img { width: 100%; } #tabs .box .e-books .livro { width: 50.5%; text-align: center; margin: 5% auto; } #inicio { padding-top: 5%; } #inicio img { width: 100%; } #inicio .ano { display: block; width: 11%; margin: 0 auto 0 auto; } #inicio .foto1 { width: 95%; } #infancia-na-italia { background: url('../img/back-sec-2.png') no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; background-position: 0 10%; } #infancia-na-italia img { width: 100%; } #infancia-na-italia .foto2 { width: 80%; margin-left: 10%; } #casamento .foto3>img{ width: 100%; } #formacao .foto4 { width: 60%; margin: 15% 0 0 20%; } #formacao .foto4 .compartilhar .ic1 { padding-right: 41%; } #sonho .foto5 { width: 98%; } #sonho .foto6 { width: 90%; margin-left: 5%; } #sonho .foto5 .compartilhar img { width: auto; } #inalg-direito .foto7 { width: 90%; margin-left: 5%; } #hospital .foto .compartilhar { text-align: left; } #hospital .foto .compartilhar .icone { float: left; padding-left: 0; padding-right: 5px; } /* Media Queries */ /** telefones **/ @media (max-width: 479px) { body, html{ height: auto; } body { width: 100%; overflow-x: hidden; } .hideFone { display: none !important; } .hideFoneMin { display: none !important; } .showFoneMin { display: block !important; } #bt-menu-mob { display: block; } .logo { width: 45%; } .selo { width: 7.7%; margin-left: 42.3%; } #tabs { width: 50%; right: -41%; } #tabs .box .titulo { font-size: 15px; } #tabs .box .txt { font-size: 12px; } .section { width: 95%; } #section0 .electro .nome { font-size: 30px; } #section0 .electro .txt { font-size: 12px; } #section0 .seta { width: 45%; left: 23%; } #section0 .seta .label { font-size: 14px; } #section0 .seta .setas { width: 20%; padding-top: 5px; } .section .titulo { font-size: 24px } .section .texto { font-size: 18px; } .section .box-left, .section .box-right { width: 90%; border: 0; } .section .texto .ico-left, .section .texto .ico-right { display: none; } .section .fleft, .section .fright { display: block; float: right; text-align: right; margin: 0; } .section .texto { text-align: left; } #inicio .ano { display: block; width: 20%; margin: 0 auto 0 auto; } #infancia-na-italia { background-position: 0 30%; padding-bottom: 20px; } #formacao .titulo { margin: 20px 0 0 0; } #formacao .box-right .titutlo { display: none; } } @media (min-width: 480px) and (max-width: 767px) { body, html{ height: auto; } body { width: 100%; overflow-x: hidden; } .hideFone { display: none !important; } #bt-menu-mob { display: block; } .logo { width: 35%; } .selo { width: 6%; margin-left: 38.3%; } #tabs { width: 40%; right: -33%; } #tabs .box .titulo { font-size: 15px; } #tabs .box .txt { font-size: 12px; } #site { overflow-x: scroll; } .section { width: 95%; } #section0 .electro .nome { font-size: 36px; } #section0 .electro .txt { font-size: 12px; } #section0 .seta { width: 40%; left: 25%; } #section0 .seta .label { font-size: 14px; } #section0 .seta .setas { width: 20%; padding-top: 5px; } .section .titulo { font-size: 24px } .section .texto { font-size: 18px; } } /** tablets **/ @media (min-width: 768px) and (max-width: 991px) { body, html{ height: auto; } .hideFone { display: none !important; } #bt-menu-mob { display: block; } #menu-mob li { font-size: 14px; } .logo { width: 35%; } .selo { width: 6%; margin-left: 38.3%; } #tabs { width: 40%; right: -33%; } #tabs .box .titulo { font-size: 20px; } #site { overflow-x: scroll; } .section { width: 95%; } #section0 .electro .nome { font-size: 60px; } #section0 .electro .txt { font-size: 20px; } #section0 .seta { width: 30%; left: 35%; } .section .titulo { font-size: 24px } .section .texto { font-size: 18px; } } /** monitores e tablets maiores **/ @media only screen and (min-width: 992px) and (max-width: 1280px) { body, html { height: auto; } .hideDesktop { display: none !important; } #section0 .electro .nome { font-size: 75px; } #section0 .electro .txt { font-size: 25px; } .section { width: 95%; } .section .titulo { font-size: 24px } } /** monitores e tvs **/ @media (min-width: 1281px){ .hideDesktop { display: none !important; } }