@CHARSET "ISO-8859-1";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
    font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#f2f2f2;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border: 0;
}

.d-none{
    display: none;
}
/* Custom CSS
 * --------------------------------------- */
body{
    font-family: 'Roboto', sans-serif;
    color: #f2f2f2;
}
h1{
    font-size: 6em;
}
p{
    font-size: 2em;
}
.section{
    text-align: center;
}

.section {
    background-color:#305CCE;
}

#pp-nav{
    display: none;
}


/* all sections */
.section .logotop{
    margin-bottom: 20px;
    position: relative;
    max-width:20%;
}

.section .intro{
    background-color: #E7B73D;
    width: 420px;
    height: auto;
    z-index: 3;
    position: relative;
    border-radius: 40px;
    margin: 0px auto;
    padding: 20px 30px 70px 30px;
}

.section .intro .skip{
    font-size:14px;
    text-align: right;
    width: 100%;
    display: block;
    position: relative;
    z-index: 3;
}

.section .intro .skip a{
    color:#305CCE;
}

.section .intro h2{
    color:#305CCE;
    font-size:34px;
    font-weight:bold;
    padding-top:20px;
}

.section .intro h4 a{
    color:#305CCE;
    font-weight:bold;
}

.section .intro h4{
    color:#305CCE;
    font-size:20px;
    font-weight:bold;
    padding-top:0px;
    margin-top:5px;
}

.section .intro .white{
    color:#fff;
}

.section .intro p{
    padding-top:20px;
    color:#55637D;
    font-size:16px;
    padding-bottom:20px;
}

.section .flower{
    position: relative;
    position: absolute;
    bottom: 0%;
    left: 56%;
    z-index:-1;
    transform:translateX(3%) translateY(20%);
}

.section .arrows{
    display:block;
    width:100%;
    position:relative;
    z-index:4;
}

.section .left{
    float:left;
    cursor:pointer;
}

.section .right{
    float:right;
    cursor:pointer;
}



/* Section 1
 * --------------------------------------- */
 
#section1 {
    overflow:hidden;
}
 
#section1 .cloud1{
 position: absolute;
 top: 2%;
 left: 1%;
 z-index:1;
 animation-duration        : 10.5s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : cloud1;
animation-timing-function : linear;
transform-origin          : bottom;
}

@keyframes cloud1 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(30%) translateY(-10%) ;
    }
}

#section1 .cloud2{
 position: absolute;
 top: 18%;
 left: 16%;
 z-index:2;
animation-duration        : 10.5s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : cloud2;
animation-timing-function : linear;
transform-origin          : bottom;
}

@keyframes cloud2 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(-30%) translateY(10%) ;
    }
}

#section1 .logo{
    display:block;
    margin:0px auto;
}


#section1 .round{
 position: absolute;
 bottom: 0;
 right: 0%;
 z-index:2;
}

#section1 .airplane {
    position: absolute;
    bottom: 0;
    left: 0%;
    z-index: -1;
    animation-duration        : 6s;
    animation-fill-mode       : both;
    animation-iteration-count : 1;
    animation-name            : airplane;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes airplane {
    0% {
        transform : translateX(0em) translateY(0em) scale(1.0);
    }
    100% {
        transform : translateX(340%) translateY(-350%) scale(2.0);
        opacity: 0;
    }
}

.counter{
    margin-top:30px;
}
.progressbar {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 10px auto 30px;
  height: 8px;
  background: #fff;
  overflow: hidden;
  border-radius:10px;
}

span.progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #E7B73D;
  transition: all .1s;
  border-radius:10px;
}

/* Section 2
 * --------------------------------------- */

#section2 .cloud3{
    position: absolute;
    top: 10%;
    left: 7%;
    z-index:1;
    animation-duration        : 5s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : cloud3;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes cloud3 {
    0% {
        transform : translateX(0em) translateY(40%) ;
    }
    100% {
        transform : translateX(10%) translateY(40%) ;
    }
}

#section2 .cloud4{
    position: absolute;
    top: 40%;
    left: 12%;
    z-index:2;
    animation-duration        : 5s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : cloud4;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes cloud4 {
    0% {
        transform : translateX(0em) translateY(70%) ;
    }
    100% {
        transform : translateX(-10%) translateY(70%) ;
    }
}

.section .sun{
    position: absolute;
    left: 0;
    top: 0;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : sun;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes sun {
    0% {
        transform:scale(1.0);
    }
    100% {
        transform:scale(1.1);
    }
}

#section2 .lefteye{
    position: absolute;
    top: 64%;
    left: 12%;
    z-index:2;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : lefteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes lefteye {
    0% {
        transform : skew(0deg, 0deg);
    }
    100% {
        transform : skew(0deg,12deg) ;
    }
}

#section2 .rightteye{
    position: absolute;
    top: 8%;
    right: 3%;
    z-index:2;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : rightteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes rightteye {
    0% {
        transform : skew(0deg, 0deg);
    }
    100% {
        transform : skew(3deg,4deg) ;
    }
}

@media screen and (max-width: 1280px) {
    #section2 .rightteye{
        width:20%;
    }

    #section2 .lefteye{
        width:9%;
    }
}

@media screen and (max-width: 1940px) {
    #section2 .rightteye{
        width:25%;
    }

    #section2 .lefteye{
        width:12%;
    }

    #section2 .cloud3{
        top: 3%;
    }

    #section2 .cloud4{
        top: 35%;
    }
}


/* Section 3
 * --------------------------------------- */
#section3 .arrows{
    display:block;
    width:100%;
}

#section3 .intro h2{
    padding-top:20px;
}

#airplane2 {
    position: absolute;
    top: 10%;
    right: -3%;
}

#section3 .airplane2 {
    position: absolute;
    top: 10%;
    right: -3%;
    z-index: -1;
    animation-duration        : 7s;
    animation-fill-mode       : both;
    animation-iteration-count : 1;
    animation-name            : airplane2;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes airplane2 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(-350%) translateY(-240%) ;
    }
}

#section3 .flower-left-bottom,
#section3 .flower-right-bottom{
    position: absolute;
    bottom: -4%;
    left: 13%;
    z-index: -1;
    animation-duration        : 2.5s;
    animation-direction       : alternate;
    animation-fill-mode       : both;
    animation-iteration-count : infinite;
    animation-name            : rightteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}
#section3 .flower-right-bottom{
    bottom: -4%;
    left:auto;
    right: 13%;
}




/* Section 4
 * --------------------------------------- */

#section4 .coloseum{
    position: absolute;
    left: 8%;
    top: 8%;
    z-index:2;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction       : alternate;
    animation-iteration-count : infinite;
    animation-name            : lefteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

#section4 .coloseumBlack{
    position: absolute;
    left: 8%;
    top: 8%;
    z-index:1;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction       : alternate;
    animation-iteration-count : infinite;
    animation-name            : coloseumBlack;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes coloseumBlack {
    0% {
        transform:scale(1.0);
    }
    100% {
        transform:scale(1.1);
    }
}

#section4 .eifel{
    position: absolute;
    left: 8%;
    bottom: -1%;
    z-index:2;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction       : alternate;
    animation-iteration-count : infinite;
    animation-name            : lefteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

#section4 .muzeu{
    position: absolute;
    right: 8%;
    top: 30%;
    z-index:2;
    animation-duration        : 3s;
    animation-fill-mode       : both;
    animation-direction       : alternate;
    animation-iteration-count : infinite;
    animation-name            : lefteye;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@media screen and (max-width: 1280px) {
    #section4 .muzeu{
        width:20%;
    }

    #section4 .eifel{
        width:12%;
    }
    
    #section4 .coloseum{
        width:16%;
    }
}

@media screen and (max-width: 1940px) {
     #section4 .muzeu{
        width:25%;
    }

    #section4 .eifel{
        width:16%;
    }
    
    #section4 .coloseum{
        width:20%;
    }
}

/* Section 5
 * --------------------------------------- */

#section5 .cercLines{
    position: absolute;
    top: 14%;
    left: -15%;
    z-index:0;
    animation-duration        : 10s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : infinite;
    animation-name            : cercLines;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes cercLines {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(30%) translateY(0%) ;
    }
}

#section5 #horLinesLeft{
    position: absolute;
    top: 44%;
    left: -15%;
    width:80%;
}

#section5 .horLinesLeft{
    position: absolute;
    top: 44%;
    left: -15%;
    z-index:0;
    animation-duration        : 40s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : 1;
    animation-name            : horLinesLeft;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes horLinesLeft {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    70% {
        opacity:100;
    }
    100% {
        transform : translateX(370%) translateY(0%) ;
        opacity:0;
    }
}

#section5 #horLinesRight{
    position: absolute;
     top: 7%;
    right: -1%;
}

#section5 .horLinesRight{
    position: absolute;
     top: 7%;
    right: -15%;
    z-index:0;
    animation-duration        : 40s;
    animation-fill-mode       : both;
    animation-direction			: alternate;
    animation-iteration-count : 1;
    animation-name            : horLinesRight;
    animation-timing-function : linear;
    transform-origin          : bottom;
}

@keyframes horLinesRight {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(-480%) translateY(0%) ;
    }
}


@media screen and (max-width: 1940px) {
     #section5 .cercLines{
        width:35%;
    }

   #section5 .lines{
        width:23%;
    }
    
}

@media screen and (max-width: 1280px) {
    #section5 .cercLines{
        width:20%;
    }

   #section5 .lines{
        width:12%;
    }
}

/* Section 6
 * --------------------------------------- */

/* cloud 1 si ploaie */
#section6 #cloud1{
 position: absolute;
 top: 2%;
 left: 1%;
 z-index:1;
 filter: grayscale(100%); 
}

#section6 .cloud1Grey{
  animation-duration        : 7s;
animation-fill-mode       : both;
animation-direction	  : alternate;
animation-iteration-count : 1;
animation-name            : cloud1Grey;
animation-timing-function : linear;
transform-origin          : bottom;

}

@keyframes cloud1Grey {
    0% {
        filter: grayscale(100%); 
    }
    100% {
        filter: grayscale(0%);
    }
}


#section6 .cloud1{
 animation-duration        : 7s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : cloud5;
animation-timing-function : linear;
transform-origin          : bottom;
filter: grayscale(0%) !important;
}

@keyframes cloud5 {
    0% {
        transform : translateX(0em) translateY(0em) ;
        
    }
    100% {
        transform : translateX(30%) translateY(-10%) ;
    }
}

#section6 #picaturi1{
 position: absolute;
 top: 14%;
 left: 4%;
 z-index:-1;
 opacity:0;
}

#section6 .picaturi1{
 animation-duration        : 4.5s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : picaturi1;
animation-timing-function : linear;
transform-origin          : bottom;
 opacity:1 !important;
}

@keyframes picaturi1 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(0%) translateY(10%) ;
    }
}

/* cloud 1 si ploaie */
#section6 #cloud2{
 position: absolute;
 top: 4%;
 right: 3%;
 z-index:2;
 filter: grayscale(100%); 
}

#section6 .cloud2Grey{
  animation-duration        : 7s;
animation-fill-mode       : both;
animation-direction	  : alternate;
animation-iteration-count : 1;
animation-name            : cloud2Grey;
animation-timing-function : linear;
transform-origin          : bottom;

}

@keyframes cloud2Grey {
    0% {
        filter: grayscale(100%); 
    }
    100% {
        filter: grayscale(0%);
    }
}


#section6 .cloud2{
 animation-duration        : 7s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : cloud6;
animation-timing-function : linear;
transform-origin          : bottom;
filter: grayscale(0%) !important;
}

@keyframes cloud6 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(-30%) translateY(10%) ;
    }
}

#section6 #picaturi2{
position: absolute;
top: 20%;
right: 8%;
z-index:0;
opacity:0;
}

#section6 .picaturi2{
 animation-duration        : 4.5s;
animation-fill-mode       : both;
animation-direction			: alternate;
animation-iteration-count : infinite;
animation-name            : picaturi2;
animation-timing-function : linear;
transform-origin          : bottom;
 opacity:1 !important;
}

@keyframes picaturi2 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(0%) translateY(10%) ;
    }
}



@media screen and (max-width: 1940px) {
    #section6 .cloud2{
        top: 4%;
        right: 3%;
        width:25%;
    }

   #section6 .picaturi2{
        width:23%;
         top: 24%;
        right: 8%;
    }
    
}

@media screen and (max-width: 1280px) {
    #section6 .cloud2{
        width:20%;
        top: 4%;
        right: 3%;
    }

   #section6 .picaturi2{
        width:12%;
        top: 20%;
        right: 8%;
    }
}

@keyframes picaturi2 {
    0% {
        transform : translateX(0em) translateY(0em) ;
    }
    100% {
        transform : translateX(0%) translateY(10%) ;
    }
}

/* Section 7
 * --------------------------------------- */

#section7 #cerculete{
position: absolute;
top: 30%;
left: 23%;
z-index:0;
opacity:0;
}

#section7 .cerculete{
animation-duration        : 24.5s;
animation-fill-mode       : both;
animation-direction	  : alternate;
animation-iteration-count : infinite;
animation-name            : cerculete;
animation-timing-function : linear;
transform-origin          : bottom;
opacity:1 !important;
}

@keyframes cerculete {
    0% {
        transform : rotate(0deg) scale(1.0) translateX(0em) translateY(0%) ;
    }
    100% {
        transform : rotate(35deg) scale(3.3) translateX(-15%)  translateY(30%);
    }
}


/* Responsvie Section 1
 * --------------------------------------- */

@media screen and (max-width: 769px) {
    
    /* all sections */
    .section .intro {
      width: 280px;
    }
    
    .section .logotop {
	max-width: 40%;
    }

    .section .sun {
	top: -8%;
        left: -13%;
        width: 53%;
    }
        
    .section .intro h2, .section .intro p, .section .intro h4{
        text-align: left;
    }
    
    .section .intro h2{
        font-size: 26px;
    }
    
    .section .intro h4{
        font-size: 16px;
    }
    
    .section .intro p{
        font-size: 14px;
    }
    
    .gaugeTemp{
        width: 70%
    }
    
    /*section 1 */
    #section1 .cloud1 {
        width: 70%;
        display: none;
    }

    #section1 .cloud2 {
        width: 44%;
        top: auto;
        bottom: 5%;
        left: auto;
        right: 3%;
    }

    #section1 .logo {
        width: 70%;
    }

    .progressbar {
        max-width: 330px;
    }
    
    .logoAmbr{
        width: 60%;
    }
    
    #section1 .round {
	width: 50%;
	bottom: auto;
	top: 10%;
	right: auto;
	left: -28%;
    }
    
    #section1 .airplane {
        width: 28%;
    }

    /*section 2 */
    .section .flower, #section2 .lefteye, #section2 .rightteye{
        display: none;
    }
    
    #section2 .cloud3 {
	top: auto;
	bottom: 11%;
	width: 50%;
    }
    
    #section2 .cloud4 {
	top: auto;
	bottom: 10%;
	left: 45%;
    }    
    
    /* section3 */
    
    #section3 .flower-left-bottom, #section3 .flower-right-bottom {
	display: none;
    }
    
    
    /*section 4*/
    
    #section4 .coloseum {
	width: 80%;
	top: 6%;
	left: -14%;
    }
    
    #section4 .muzeu {
	width: 95%;
	top: auto;
	bottom: 0%;
    }
    
    .coloseumBlack{
        display: none;
    }
    
    #section4 .eifel {
	width: 13%;
	bottom: auto;
	top: 4%;
	left: auto;
    }
    
     /*section 5*/
    #section5 .cercLines {
	top: auto ;
        bottom: 1%;
        width: 73%;
    }
    
    #section5 #horLinesRight {
	position: absolute;
	top: 2%;
	right: -1%;
	width: 49%;
    }
    
     /*section 6*/
     
    #section6 .cloud1{
        top: auto !important;
        bottom: 0%;
        width: 80%;
    }
    
    #section6 .cloud2{
        display:none;
    }
    
    #section6 .picaturi1{
        top: -8% !important;
        bottom: 2%;
        width: 70%;
        left: 15%;
    }
    
    #section6 .picaturi2{
        top: auto !important;
        bottom: 2%;
        width: 61%;
        left: 10%;
    }
    
     /*section 7*/  
    #section7 #cerculete{
        position: absolute;
        top: 26%;
        left: -53%;
        z-index:0;
        opacity:0;
    }

    
}