body, html {
   height: 100%;
   margin: 0;
   text-align: center;
}

@font-face {
   font-family: Roboto;
   src: url(Roboto-VariableFont_wght.ttf);
}

/*------------------------------------  header -------------------------------------*/
body {background-color: #ffffff;}

.head {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}

.hdim {
   position: absolute;
   float: left;
   width:100%;
   top: 0px;
   height:120px;
   left: 0px;
   opacity: 0.5;
}

.logo {
   position: absolute;
   width:500px;
   height:140px;
   top: -10px;
   left: 0px;
   animation: shake 0.5s;
   animation-iteration-count: infinite;
}

/*------------------------------------  break -------------------------------------*/




/*------------------------------------  panel 1 -------------------------------------*/
.panel1 {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}

.panelcontainer1 {
  position: relative;
  text-align: center;
  color: white;
}


/*------------------------------------  panel 2 -------------------------------------*/
.panelcontainer2 {
  position: relative;
  text-align: center;
  color: white;
}

.panel2 {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}


.panel2-text {
   position: absolute;
  top: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
   font-family: 'Roboto', sans-serif;
   font-size: 50px;
   font-weight:lighter;
   z-index:1;
}

/*------------------------------------  break -------------------------------------*/




/*------------------------------------  squarepanel 1----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square1 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square2 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square3 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square4 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}
/*------------------------------------  break -------------------------------------*/


/*------------------------------------  squarepanel 2----------------------------------*/


.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square5 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square6 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square7 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square8 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/


/*------------------------------------  squarepanel 3----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square9 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square10 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square11 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square12 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/


/*------------------------------------  squarepanel 4----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square13 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square14 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square15 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square16 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/



/*------------------------------------  squarepanel 4----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square17 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square18 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square19 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square20 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}


/*------------------------------------  squarepanel 5----------------------------------*/


.square21 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square22 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square23 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square24 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/

.break {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}

/*------------------------------------  squarepanel 6----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square25 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square26 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square27 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square28 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/



/*------------------------------------  squarepanel 7----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square29 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square30 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square31 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square32 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/



/*------------------------------------  squarepanel 7----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square33 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square34 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square35 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square36 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/



/*------------------------------------  squarepanel 8----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square37 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square38 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square39 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square40 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/



/*------------------------------------  squarepanel 9----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square41 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square42 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square43 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square44 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/

.break {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}


/*------------------------------------  squarepanel 10----------------------------------*/
.squarecontainer {
  position: relative;
  text-align: center;
  color: white;
  border-radius: 16px;
}

.square45 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

.square46 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square47 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius:16px;
}

.square48 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 400px;
    border-radius: 16px;
}

/*------------------------------------  break -------------------------------------*/

.break {
   float:left;
   width:100%;
   height:100%;
   object-fit:cover;
}





.panelcontainer3 {
  position: relative;
  text-align: center;
   font-family: 'Quicksand', sans-serif;
   font-size: 22px;
   font-weight:regular;
  color: #666666;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}