* {
margin: 0;
}
html, body {
height: 100%;
margin: 0 auto;
background: rgba(133,209,241,1);
background: -moz-linear-gradient(top, rgba(133,209,241,1) 0%, rgba(197,233,248,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(133,209,241,1)), color-stop(100%, rgba(197,233,248,1)));
background: -webkit-linear-gradient(top, rgba(133,209,241,1) 0%, rgba(197,233,248,1) 100%);
background: -o-linear-gradient(top, rgba(133,209,241,1) 0%, rgba(197,233,248,1) 100%);
background: -ms-linear-gradient(top, rgba(133,209,241,1) 0%, rgba(197,233,248,1) 100%);
background: linear-gradient(to bottom, rgba(133,209,241,1) 0%, rgba(197,233,248,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85d1f1', endColorstr='#c5e9f8', GradientType=0 );
background-attachment: fixed;
font-family: 'PT Sans', sans-serif;
font-size: 13px;
}
/* ************* LOGIN ********************************** */
#login img {
position: absolute;
right: 20px;
top: 20px;
}
/* ************* LOGO *********************************** */
h1#logo {
width: 273px;
margin: auto;
padding-top: 7px;
text-align: center;
}
/* ************* GLOBALS ******************************** */
.goLeft {
float: left;
}
.goRight {
float: right;
}
/* ************* MENU PRINCIPAL ************************* */
#wrapper header {
height: 186px;
width: 100%;
position: fixed;
overflow: hidden;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.menu1 {
margin: auto;
padding-top: 10px;
width: 513px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.menu1 ul li {
display: inline-block;
border: 4px #FFF solid;
-webkit-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.34);
-moz-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.34);
box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.34);
}
.menu1 ul li:nth-child(-n+4) {
margin-right: 10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.mAll a {
font-family: 'Rosario', sans-serif;
/* font-family: Futura, "Trebuchet MS", Arial, sans-serif; */
font-size: 14px;
font-style: italic;
font-weight: bold;
text-decoration: none;
display: block;
padding: 10px 8px;
}
.menu1 ul li a:link, .menu1 ul li a:visited {
color: #FFF;
}
.menu1 ul li a:hover, .menu1 ul li a:active, .menu1 ul li a.ativo {
color: #265f88;
}
.m1, .pag1 {
background: rgba(255,179,0,1);
background: -moz-linear-gradient(-45deg, rgba(255,179,0,1) 0%, rgba(250,150,0,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,179,0,1)), color-stop(100%, rgba(250,150,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,179,0,1) 0%, rgba(250,150,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,179,0,1) 0%, rgba(250,150,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,179,0,1) 0%, rgba(250,150,0,1) 100%);
background: linear-gradient(135deg, rgba(255,179,0,1) 0%, rgba(250,150,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb300', endColorstr='#fa9600', GradientType=1 );
}
.m2, .pag2 {
background: rgba(246,88,83,1);
background: -moz-linear-gradient(-45deg, rgba(246,88,83,1) 0%, rgba(231,73,73,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(246,88,83,1)), color-stop(100%, rgba(231,73,73,1)));
background: -webkit-linear-gradient(-45deg, rgba(246,88,83,1) 0%, rgba(231,73,73,1) 100%);
background: -o-linear-gradient(-45deg, rgba(246,88,83,1) 0%, rgba(231,73,73,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(246,88,83,1) 0%, rgba(231,73,73,1) 100%);
background: linear-gradient(135deg, rgba(246,88,83,1) 0%, rgba(231,73,73,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f65853', endColorstr='#e74949', GradientType=1 );
}
.m3, .pag3 {
background: rgba(40,209,235,1);
background: -moz-linear-gradient(-45deg, rgba(40,209,235,1) 0%, rgba(40,183,235,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(40,209,235,1)), color-stop(100%, rgba(40,183,235,1)));
background: -webkit-linear-gradient(-45deg, rgba(40,209,235,1) 0%, rgba(40,183,235,1) 100%);
background: -o-linear-gradient(-45deg, rgba(40,209,235,1) 0%, rgba(40,183,235,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(40,209,235,1) 0%, rgba(40,183,235,1) 100%);
background: linear-gradient(135deg, rgba(40,209,235,1) 0%, rgba(40,183,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28d1eb', endColorstr='#28b7eb', GradientType=1 );
}
.m4, .pag4 {
background: rgba(0,158,225,1);
background: -moz-linear-gradient(-45deg, rgba(0,158,225,1) 0%, rgba(0,141,212,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,158,225,1)), color-stop(100%, rgba(0,141,212,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,158,225,1) 0%, rgba(0,141,212,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,158,225,1) 0%, rgba(0,141,212,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,158,225,1) 0%, rgba(0,141,212,1) 100%);
background: linear-gradient(135deg, rgba(0,158,225,1) 0%, rgba(0,141,212,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee1', endColorstr='#008dd4', GradientType=1 );
}
.m5, .pag5 {
background: rgba(109,205,85,1);
background: -moz-linear-gradient(-45deg, rgba(109,205,85,1) 0%, rgba(88,179,69,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(109,205,85,1)), color-stop(100%, rgba(88,179,69,1)));
background: -webkit-linear-gradient(-45deg, rgba(109,205,85,1) 0%, rgba(88,179,69,1) 100%);
background: -o-linear-gradient(-45deg, rgba(109,205,85,1) 0%, rgba(88,179,69,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(109,205,85,1) 0%, rgba(88,179,69,1) 100%);
background: linear-gradient(135deg, rgba(109,205,85,1) 0%, rgba(88,179,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dcd55', endColorstr='#58b345', GradientType=1 );
}
/* ************* STICKY BOTTOM ************************** */
#wrapper {
min-height: 100%;
margin: 0 auto -500px; /* the bottom margin is the negative value of the footer's height */
}
#sticky, .push {
height: 500px; /* '.push' must be the same height as 'footer' */
}
#sticky {
position: relative;
width: 100%;
font-size: 12px;
background: repeat-x url("../img/chao.png"),
repeat-x url("../img/footer.jpg"),
no-repeat url("../img/cloudsL.png"),
no-repeat url("../img/cloudsR.png"),
repeat-x url("../img/cloudsS.png"),
repeat-x url("../img/cloudsM.png");
-webkit-animation:moveCloud 80s linear infinite;
-moz-animation:movecloud 80s linear infinite;
-ms-animation:movecloud 80s linear infinite;
-o-animation:moveCloud 80s linear infinite;
animation:moveCloud 80s linear infinite;
background-position: 0px 352px, 0px 474px, left 164px, right 164px, 2000px 323px, 1300px 307px;
overflow: hidden;
}
@keyframes moveCloud {
0% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, 2000px 323px, 1300px 307px;}
100% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, -100% 323px, -300% 307px;}
}
@-webkit-keyframes moveCloud {
0% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, 2000px 323px, 1300px 307px;}
100% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, -100% 323px, -300% 307px;}
}
@-moz-keyframes moveCloud {
0% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, 2000px 323px, 1300px 307px;}
100% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, -100% 323px, -300% 307px;}
}
@-o-keyframes moveCloud {
0% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, 2000px 323px, 1300px 307px;}
100% {background-position: 0px 352px, 0px 474px, left 164px, right 164px, -100% 323px, -300% 307px;}
}
/* ************* ZEPPELIN ******************************* */
#zeppelin {
position: absolute;
margin-top: 5px;
-webkit-animation:movezep 45s linear infinite;
-moz-animation:movezep 45s linear infinite;
-ms-animation:movezep 45s linear infinite;
-o-animation:movezep 45s linear infinite;
animation:movezep 45s linear infinite;
}
@-webkit-keyframes movezep {
0% {margin-left: -500px;}
100% {margin-left: 100%;}
}
@-moz-keyframes movezep {
0% {margin-left: -500px;}
100% {margin-left: 100%;}
}
@-ms-keyframes movezep {
0% {margin-left: -500px;}
100% {margin-left: 100%;}
}
@-o-keyframes movezep {
0% {margin-left: -500px;}
100% {margin-left: 100%;}
}
/* ************* MAIN *********************************** */
#main {
position: relative;
z-index: 10;
margin: 0 auto;
width: 594px;
height: 376px;
background: url("../img/bkg01.png") left top;
}
#mainGal {
position: relative;
z-index: 10;
margin: 0 auto;
width: 594px;
height: 376px;
background: url("../img/bkg02.png") left top;
}
/* ************* CURRENT PAGE *************************** */
#currentPage {
position: relative;
margin: -101px 0 0 53px;
height: 56px;
width: 131px;
border: 7px #FFF solid;
font: italic bold 19px 'Rosario', sans-serif;
color: white;
text-align: center;
}
.pag1T {color: #ffcc57;}
.pag2T {color: rgba(246,88,83,1);}
.pag3T {color: rgba(40,209,235,1);}
.pag4T {color: rgba(0,158,225,1);}
.pag5T {color: rgba(109,205,85,1);}
.contactLinks a:link {text-decoration: none; color: #dddddd;}
#currentPage p {margin-top: 16px;}
/* ************* FACEBOOK ******************************* */
#face {
position: relative;
margin-left: 286px;
height: 156px;
width: 285px;
overflow: hidden;
}
#face .hideFace {
float: left;
display: block;
top: -2px;
border: 0px;
height: 100%;
background-color: #FFF;
}
#mapa {
position: relative;
margin-left: 234px;
height: 154px;
width: 338px;
overflow: hidden;
}
/* ************ MAINCONTENT ***************************** */
#mainContent {
position: relative;
margin: 43px 0 0 36px;
padding: 10px 8px;
height: 143px;
width: 512px;
color: #dddddd; /*blue #12659d*/
text-align: justify;
overflow: hidden;
background: url(../img/blackBoard.jpg) no-repeat ;
background-size: cover;
}
#mainContent2 {
position: relative;
margin: 43px 0 0 36px;
padding: 10px 8px;
height: 147px;
width: 512px;
color: #dddddd; /*blue #12659d*/
text-align: justify;
overflow: hidden;
background: url(../img/blackBoard.jpg) no-repeat ;
background-size: cover;
}
#mainContent h1 {
float: left;
}
#mainContent p { }
.imgHome {
float: right;
width: 190px;
height: 145px;
}
.imgHome01 {border: 2px #c69a74 solid;}
/* ************* HOVER EFFECT - HOME PAGE *************** */
.view {
position: relative;
float: right;
width: 180px;
height: 140px;
}
.mask {
position: relative;
width: 176px;
height: 136px;
top: 2px;
left: 2px;
opacity: 0;
filter: alpha(opacity = 0);
overflow: visible;
border-top: 0px solid rgba(0,0,0,0.7);
box-sizing: border-box;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
filter: alpha(opacity = 100);
border-top: 0px solid rgba(0,0,0,0.7);
}
.third-effect a.lupa {
position: relative;
top: -140px; /* Center the link */
left: 1px;
opacity: 0;
filter: alpha(opacity = 0);
-webkit-transition:opacity 0.5s 0s ease-in-out;
-moz-transition:opacity 0.5s 0s ease-in-out;
-o-transition:opacity 0.5s 0s ease-in-out;
transition:opacity 0.5s 0s ease-in-out;
}
.third-effect:hover a.lupa {
opacity: 1;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
transition-delay:0.1s;
}
/* ************* APAGADOR E GIZ ************************* */
#apagadorGiz {
position: relative;
margin: -9px 0 0 450px;
width: 45px;
height:9px;
}
/* ************* SABICHÃO ******************************* */
#sabichao1 {
position: relative;
z-index: 9;
margin: auto;
bottom: 155px;
left: -330px;
width: 91px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#sabichao2 {
position: relative;
z-index: 9;
margin: auto;
bottom: 158px;
left: 330px;
width: 91px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#menino1 {
position: relative;
z-index: 9;
margin: auto;
bottom: 145px;
left: 355px;
width: 91px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#rapariga {
position: relative;
z-index: 9;
margin: auto;
bottom: 80px;
left: 355px;
width: 91px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#menino2 {
position: relative;
z-index: 9;
margin: auto;
bottom: 95px;
left: -370px;
width: 91px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#arcoiris {
position: absolute;
z-index: 9;
top: 0px;
right: 0px;
}
#trees {
position: absolute;
z-index: 7;
background: url(../img/tree_bkg.png) center;
height: 250px;
width: 100%;
margin-top: 113px;
}
/* *********** BORBOLETAS ******************************* */
#borboletaAmarela {
position: absolute;
z-index: 8;
bottom: 350px;;
right: 100px;
height: 29px;
width: 26px;
/* name | duration | iteration-count | timing-function */
-webkit-animation:voavoa 9s ease-in-out infinite;
-moz-animation:voavoa 9s ease-in-out infinite;
-ms-animation:voavoa 9s ease-in-out infinite;
-o-animation:voavoa 9s ease-in-out infinite;
animation:voavoa 9s ease-in-out infinite;
}
#borboletaRosa {
position: absolute;
z-index: 8;
bottom: 250px;
left: 87px;
height: 29px;
width: 26px;
-webkit-animation:voavoa 8s ease-in-out infinite;
-moz-animation:voavoa 8s ease-in-out infinite;
-ms-animation:voavoa 8s ease-in-out infinite;
-o-animation:voavoa 8s ease-in-out infinite;
animation:voavoa 8s ease-in-out infinite;
}
#borboletaRosaS {
position: absolute;
z-index: 8;
margin: auto;
bottom: 186px;
left: 227px;
width: 14px;
height:18px;
-webkit-animation:voavoa 4s ease-in-out infinite;
-moz-animation:voavoa 4s ease-in-out infinite;
-ms-animation:voavoa 4s ease-in-out infinite;
-o-animation:voavoa 4s ease-in-out infinite;
animation:voavoa 4s ease-in-out infinite;
}
#borboletaAzul {
position: absolute;
z-index: 8;
bottom: 360px;
left: 156px;
width: 17px;
height:18px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
-webkit-animation:voavoa 5s ease-in-out infinite;
-moz-animation:voavoa 5s ease-in-out infinite;
-ms-animation:voavoa 5s ease-in-out infinite;
-o-animation:voavoa 5s ease-in-out infinite;
animation:voavoa 5s ease-in-out infinite;
}
#borboletaAzul2 {
position: absolute;
z-index: 8;
bottom: 219px;
left: 240px;
width: 17px;
height:18px;
-webkit-animation:voavoa 7s ease-in-out infinite;
-moz-animation:voavoa 7s ease-in-out infinite;
-ms-animation:voavoa 7s ease-in-out infinite;
-o-animation:voavoa 7s ease-in-out infinite;
animation:voavoa 7s ease-in-out infinite;
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
}
@keyframes voavoa{
from {transform: translate(0, 0px);}
65% {transform: translate(0, 15px);}
to {transform: translate(0, -0px);}
}
@-webkit-keyframes voavoa{
from {-webkit-transform: translate(0, 0px);}
65% {-webkit-transform: translate(0, 15px);}
to {-webkit-transform: translate(0, -0px);}
}
@-moz-keyframes voavoa{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
@-ms-keyframes voavoa{
from {-ms-transform: translate(0, 0px);}
65% {-ms-transform: translate(0, 15px);}
to {-ms-transform: translate(0, -0px);}
}
@-o-keyframes voavoa{
from {-o-transform:translate(0, 0px);}
65% {-o-transform:translate(0, 15px);}
to {-o-transform: translate(0, -0px);}
}
/* ************* ESTRELAS ******************************* */
#estrelasL {
position: absolute;
z-index: 6;
bottom: 167px;
left: 50px;
-webkit-animation:glow 3s infinite;
-moz-animation:glow 3s infinite;
-ms-animation:glow 3s infinite;
-o-animation:glow 3s infinite;
animation:glow 3s infinite;
}
#estrelasR {
position: absolute;
z-index: 6;
bottom: 167px;
right: 50px;
-webkit-animation:glow 3s infinite;
-moz-animation:glow 3s infinite;
-ms-animation:glow 3s infinite;
-o-animation:glow 3s infinite;
animation:glow 3s infinite;
}
@keyframes glow{
from {opacity: 1.0;}
10% {opacity: .8;}
20% {opacity: .6;}
30% {opacity: .4;}
50% {opacity: .3;}
70% {opacity: .4;}
80% {opacity: .6;}
90% {opacity: .8;}
to {opacity: 1.0;}
}
@-webkit-keyframes glow{
from {opacity: 1.0;}
10% {opacity: .8;}
20% {opacity: .6;}
30% {opacity: .4;}
50% {opacity: .3;}
70% {opacity: .4;}
80% {opacity: .6;}
90% {opacity: .8;}
to {opacity: 1.0;}
}
@-moz-keyframes glow{
from {opacity: 1.0;}
10% {opacity: .8;}
20% {opacity: .6;}
30% {opacity: .4;}
50% {opacity: .3;}
70% {opacity: .4;}
80% {opacity: .6;}
90% {opacity: .8;}
to {opacity: 1.0;}
}
@-ms-keyframes glow{
from {opacity: 1.0;}
10% {opacity: .8;}
20% {opacity: .6;}
30% {opacity: .4;}
50% {opacity: .3;}
70% {opacity: .4;}
80% {opacity: .6;}
90% {opacity: .8;}
to {opacity: 1.0;}
}
@-o-keyframes glow{
from {opacity: 1.0;}
10% {opacity: .8;}
20% {opacity: .6;}
30% {opacity: .4;}
50% {opacity: .3;}
70% {opacity: .4;}
80% {opacity: .6;}
90% {opacity: .8;}
to {opacity: 1.0;}
}
/* ************* FOOTER ********************************* */
footer a:link, footer a:visited, footer a:hover, footer a:active {
color: #6b5236;
text-decoration: none;
}
footer #footerLeft,footer #footerRight {
color: #6b5236;
position: absolute;
bottom: 7px;
}
footer #footerLeft {
left: 15%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
footer #footerRight {
right: 15%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
/* ****************************************************** */
/* ************* MEDIA QUERIES ************************** */
/* ****************************************************** */
/* ************ MEDIA QUERIES: Laptops 1330 & Bigger **** */
@media screen and (max-height: 630px) {
#wrapper header {
position: relative;
}
}
/* ************ MEDIA QUERIES: WIDTH MIN 1101px ********* */
@media only screen and (min-width: 1101px){
#borboletaAzul {
left: 100px;
}
}
/* ************ MEDIA QUERIES: iPads and Small Laptops ** */
@media only screen and (min-width: 768px) and (max-width: 1100px){
}
/* *********** MEDIA QUERIES: Smartphones & Small Tablets */
@media only screen and (min-width: 605px) and (max-width: 767px){
#wrapper header {
position: relative;
}
#sabichao2 {
left: 100px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
}
/* *********** MEDIA QUERIES: Smartphones & Small Tablets */
@media only screen and (min-width: 500px) and (max-width: 604px){
#wrapper header {
position: relative;
}
#sabichao2 {
left: 50px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
footer #footerLeft {
left: 10%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
footer #footerRight {
right: 10%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.arco span, .xldesign span{
display: none;
}
}
/* *********** MEDIA QUERIES: Smartphones & Small Tablets */
@media only screen and (min-width: 200px) and (max-width: 499px){
#sabichao2 {
left: 50px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#wrapper header {
position: relative;
height: 370px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.menu1 {
width: 100%;
text-align: center;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.menu1 ul li {
display: inherit;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.menu1 ul li:nth-child(-n+4) {
margin-right: 0px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
footer #footerLeft {
left: 5%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
footer #footerRight {
right: 5%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.arco span, .xldesign span{
display: none;
}
}
/* ************* IMAGE LIGHTBOX ************************* */
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox
{
cursor: pointer;
position: fixed;
z-index: 10000;
-ms-touch-action: none;
touch-action: none;
-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
}
/* ACTIVITY INDICATION */
#imagelightbox-loading, #imagelightbox-loading div
{
border-radius: 50%;
}
#imagelightbox-loading
{
width: 1.5em; /* 40 */
height: 1.5em; /* 40 */
background-color: #53b6ff;
background-color: rgba( 0, 0, 0, .5 ); /* rgba( 83, 182, 255, .5 ); */
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
padding: 0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
}
#imagelightbox-loading div
{
margin-top: 1.0px;
margin-left: 1.5px;
width: 1.35em; /* 20 */
height: 1.35em; /* 20 */
background-color: #fff;
-webkit-animation:imagelightbox-loading .5s ease infinite;
-moz-animation:imagelightbox-loading .5s ease infinite;
-ms-animation:imagelightbox-loading .5s ease infinite;
-o-animation:imagelightbox-loading .5s ease infinite;
animation:imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading
{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-moz-keyframes imagelightbox-loading
{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-ms-keyframes imagelightbox-loading
{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading
{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading
{
from { opacity: .5; transform: scale( .75 ); }
50% { opacity: 1; transform: scale( 1 ); }
to { opacity: .5; transform: scale( .75 ); }
}
/* OVERLAY */
#imagelightbox-overlay
{
background-color: #fff;
background-color: rgba( 255, 255, 255, .9 );
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* "CLOSE" BUTTON */
#imagelightbox-close
{
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
text-align: left;
background-color: #666;
border-radius: 50%;
position: fixed;
z-index: 10002;
top: 2.5em; /* 40 */
right: 2.5em; /* 40 */
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
#imagelightbox-close:hover,
#imagelightbox-close:focus
{
background-color: #111;
}
#imagelightbox-close:before,
#imagelightbox-close:after
{
width: 2px;
background-color: #fff;
content: '';
position: absolute;
top: 20%;
bottom: 20%;
left: 50%;
margin-left: -1px;
}
#imagelightbox-close:before
{
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
#imagelightbox-close:after
{
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
/* CAPTION */
#imagelightbox-caption
{
text-align: center;
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0.625em; /* 10 */
}
/* NAVIGATION */
#imagelightbox-nav
{
background-color: #444;
background-color: rgba( 0, 0, 0, .5 );
border-radius: 20px;
position: fixed;
z-index: 10001;
left: 50%;
bottom: 3.75em; /* 60 */
padding: 0.313em; /* 5 */
-webkit-transform: translateX( -50% );
-ms-transform: translateX( -50% );
transform: translateX( -50% );
}
#imagelightbox-nav button
{
width: 1em; /* 20 */
height: 1em; /* 20 */
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin: 0 0.313em; /* 5 */
}
#imagelightbox-nav button.active
{
background-color: #fff;
}
/* ARROWS */
.imagelightbox-arrow
{
width: 3.75em; /* 60 */
height: 7.5em; /* 120 */
background-color: #444;
background-color: rgba( 0, 0, 0, .5 );
vertical-align: middle;
display: none;
position: fixed;
z-index: 10001;
top: 50%;
margin-top: -3.75em; /* 60 */
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
background-color: #666;
background-color: rgba( 0, 0, 0, .75 );
}
.imagelightbox-arrow:active
{
background-color: #111;
}
.imagelightbox-arrow-left
{
left: 2.5em; /* 40 */
}
.imagelightbox-arrow-right
{
right: 2.5em; /* 40 */
}
.imagelightbox-arrow:before
{
width: 0;
height: 0;
border: 1em solid transparent;
content: '';
display: inline-block;
margin-bottom: -0.125em; /* 2 */
}
.imagelightbox-arrow-left:before
{
border-left: none;
border-right-color: #fff;
margin-left: -0.313em; /* 5 */
}
.imagelightbox-arrow-right:before
{
border-right: none;
border-left-color: #fff;
margin-right: -0.313em; /* 5 */
}
#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
-webkit-animation: fade-in .25s linear;
animation: fade-in .25s linear;
}
@-webkit-keyframes fade-in
{
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-in
{
from { opacity: 0; }
to { opacity: 1; }
}
@media only screen and (max-width: 41.250em) /* 660 */
{
#container
{
width: 100%;
}
#imagelightbox-close
{
top: 1.25em; /* 20 */
right: 1.25em; /* 20 */
}
#imagelightbox-nav
{
bottom: 1.25em; /* 20 */
}
.imagelightbox-arrow
{
width: 2.5em; /* 40 */
height: 3.75em; /* 60 */
margin-top: -2.75em; /* 30 */
}
.imagelightbox-arrow-left
{
left: 1.25em; /* 20 */
}
.imagelightbox-arrow-right
{
right: 1.25em; /* 20 */
}
}
@media only screen and (max-width: 20em) /* 320 */
{
.imagelightbox-arrow-left
{
left: 0;
}
.imagelightbox-arrow-right
{
right: 0;
}
}