/*-----------------------------------------------------------------------------------*/
/* COLORS

Blue: 
Flarie topbar blue: #619af3; 
Flarie Darkest blue: #3c68b0; 
Flarie Middle Blue: #4e87e3

Lightblue: #58c0ed;
Green: #46bb97;
Red: #d54651;

Darkest Gray: #434a55;
Dark Gray: #666d79;
Gray: #aab1bethree-rows-grid
Soft Gray: #ccd1da
Softest Gray: #e7e9ee;

/*-----------------------------------------------------------------------------------*/
/* NEW CSS																			
/*-----------------------------------------------------------------------------------*/

:root {
    --FLARIE_SECTION_GREEN: rgb(69,187,152);
    --FLARIE_SECTION_YELLOW: rgb(237,206,89);
    --FLARIE_SECTION_LIGHTBLUE: rgb(88,188,237);
    --FLARIE_SECTION_BLUE: rgb(97,154,243);
    --FLARIE_SECTION_RED: rgb(214,70,80);
    --FLARIE_SECTION_DARKBLUE: rgb(18,26,37);
    --FLARIE_GAME_BACKGROUND_DARKBLUE: rgb(20,44,72);
    --FLARIE_SECTION_FOOTER: rgb(24,24,24);
    --FLARIE_SECTION_BLACK: rgb(18,18,18);
    --FLARIE_SECTION_NAVBAR: rgb(30,42,58);
    --FLARIE_HEADER_DARKBLUE: rgb(27,40,56);
    --FLARIE_LIGHTGREEN: rgb(69,187,152);
}

.section {
    width:100%;
    height:480px;
    overflow:hidden;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

.content {
    width:60%;
    margin:auto;
}

.navbar-buttons-business > a {
    color:white !important;
}

.navbar {
    position: absolute; /* positon makes the menubar be a 100% of the screen */
    left: 0;
    height: 70px;
    right: 0;
    top: 0;
    z-index: 5;
    background-color: transparent;
    font-family: "BebasNeue-Regular";
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    z-index:20;
}

.navbar-menu {
    height:100%;
    width:100%;
}

.navbar-buttons-container {
    height:70px;
}

.navbar-buttons {
    display:flex;
    flex-direction:row;
    list-style-type: none;
    /* letter-spacing:0.8px; */
    font-size:20px;
    width:20%;
    margin-right:20%;
    float:right;
    justify-content: space-evenly;
    color:white;
    align-items: center;
    padding:2px;
}

.topbar-logo {
    width:110px;
}

.navbar-buttons-business {
    display:flex;
    flex-direction:row;
    list-style-type: none;
    /* letter-spacing:0.8px; */
    font-size:20px;
    width:30%;
    margin-right:20%;
    float:right;
    justify-content: space-evenly;
    color:white;
    align-items: center;
    padding:2px;
}

.navbar-buttons > li > a, .navbar-buttons-business > li > a {
    display: inline-block;
    padding:3px;
    color:white;
}

.navbar-buttons > li > a:hover, .navbar-buttons-business > li > a:hover  {
    cursor:pointer;
}

.navbar-icon {
    display:flex;
    flex-direction:row;
    float:left;
    width:15%;
    margin-left:20%;
    align-items: center;
    height:70px;
}

.navbar-icon > h3 {
    color:white;
    font-size:18px;
    font-family: "BebasNeue-Regular";
    /* letter-spacing:1px; */
    margin:17px 0 9px 0;
    font-weight:normal;
}


/*-----------------------------------------------------------------------------------*/
/* TABLE
/*-----------------------------------------------------------------------------------*/

table {
    font-family: "BebasNeue-Regular";
    border-collapse: collapse;
    width: 100%;
    color: #666d79;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    vertical-align: top;
    width: 20%;
  }
  
/*-----------------------------------------------------------------------------------*/
/* HAMBURGER MENU
/*-----------------------------------------------------------------------------------*/
 
 #menuToggle
 {
   display: none;
   position: absolute;
   top: 22.5px;
   left: 25px;
   z-index: 1;
   -webkit-user-select: none;
   user-select: none;
 }
 
 #menuToggle a
 {
   text-decoration: none;   
   transition: color 0.3s ease;
 }
 
 #menuToggle input
 {
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   
   cursor: pointer;
   
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   
   -webkit-touch-callout: none;
 }
 
 /*
  * Just a quick hamburger
  */
 #menuToggle span
 {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   background: #cdcdcd;
   border-radius: 3px;
   z-index: 1;
   transform-origin: 4px 0px;
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
 
 #menuToggle span:first-child
 {
   transform-origin: 0% 0%;
 }
 
 #menuToggle span:nth-last-child(2)
 {
   transform-origin: 0% 100%;
 }
 
 /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
 #menuToggle input:checked ~ span
 {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: white;
 }
 
 /*
  * But let's hide the middle one.
  */
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }
 
 /*
  * Ohyeah and the last one should go the other direction
  */
 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }

 /*
  * Make this absolute positioned
  * at the top left of the screen
  */
 #menu
 {
   position: absolute;
   width: 100vw;
   margin: 18px 0 0 -50px;
   padding: 15px 0 15px 50px;
   background: rgba(30,42,58,0.8);
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 
 #menu li
 {
   padding: 10px 0;
   font-size: 22px;
   /* letter-spacing: 1px; */
   color:white;
   font-family: "BebasNeue-Regular";
 }
 
 /*
  * And let's slide it in from the left
  */
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }
/*-----------------------------------------------------------------------------------*/

.homepage-background-user {
    background-image: url(../images/backgrounds/startpage.jpg);
    height:100%;
    background-size: cover;
    background-position: center;
}

.homepage-background-business {
    background-image: url(../images/backgrounds/startpage_business.jpg);
    height:100%;
    background-size: cover;
    background-position: center;
}

.homepage {
    overflow:hidden;
    height:100vh;
    position: relative;
}

.homepage-main {
    width:65%;
    margin:auto;
    display:flex;
    height:100%;
    align-items: center;
    justify-content: center;
}


.homepage-text {
    width:40%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    /* letter-spacing:1px; */
}

.homepage-text > div > a > img {
    height:40px;
    width:125px;
    border-radius:5px;
}

.homepage-text > h4 {
    font-size: 70px;
    margin:0;
    margin-bottom:-20px;
    color: var(--FLARIE_HEADER_DARKBLUE);
    line-height: 90%;
}

.homepage-text > h3 {
    font-size: 80px;
    margin:0;
    color:white;
    margin-bottom:0;
}

.homepage-text > h5 {
    font-size: 25px;
    margin:0 0 20px 0;
    color:white;
    font-weight:400;
}

.startpage-business-btn {
    font-family: "BebasNeue-Regular";
    display: block;
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:22px;
    text-align: center;
    border-radius: 18px;
    color: var(--FLARIE_HEADER_DARKBLUE);
    line-height: 40px;
    border: 1px solid white;
    background-color:white;
    z-index:11;
}

/* ******* START PAGE VIDEOS ****** */

.homepage-video{
    width:60%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index:11;
}

.startpage-video-left {
    position: absolute;
    width:27%;
    border-radius:15px;
    left:10.5%;
}

.startpage-video-mid {
    width:30%;
    border-radius:15px;
    z-index: 10;
}

.startpage-video-right {
    position: absolute;
    width:27%;
    border-radius:15px;
    right:10.5%;
}


.startpage-video {
    width:100%;
}


/* ------------------------------ */

.main-divider {
    height:100px;
    background-color:var(--FLARIE_SECTION_DARKBLUE);
    line-height: 100px;
}

.main-divider-btn {
    font-family: "BebasNeue-Regular";
    display: block;
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:22px;
    text-align: center;
    border-radius: 23px;
    color: white;
    font-weight: bold;
    line-height: 40px;
    margin:0 auto;
    border: 1px solid white;
    position: relative;
    top:24px;
    z-index:11;
}

.contact-divider {
    height:270px;
    background:var(--FLARIE_SECTION_DARKBLUE);
    position: relative;
}

.contact-divider > h4 {
    margin:0;
    font-size:35px;
    text-align:center;
    color:white;
    position: relative;
    top: 30%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.contact-divider-btn {
    font-family: "BebasNeue-Regular";
    font-weight: 400;
    display: block;
    text-align: center;
    border-radius: 15px;
    line-height: 15px;
    margin:0 auto;
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:22px;
    border-radius: 20px;
    color: var(--FLARIE_HEADER_DARKBLUE);
    line-height: 38px;
    background-color: white;
    z-index:11;
}

.contact-divider-btn:hover {
    cursor:pointer;
}

.studio-btn {
    font-family: "BebasNeue-Regular";
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:22px;
    text-align: center;
    border-radius: 20px;
    color: var(--FLARIE_HEADER_DARKBLUE);
    line-height: 40px;
    background-color: white;
    position: relative;
    top:25px;
    z-index:11;
}

.black-btn {
    display: flex;
    font-family: "BebasNeue-Regular";
    display: block;
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:20px;
    text-align: center;
    border-radius: 20px;
    color: white;
    line-height: 38px;
    margin:auto;
    font-weight:normal;
    background-color: var(--FLARIE_SECTION_DARKBLUE);
    font-weight: normal;
    position: relative;
    top:-50px;
    z-index:11;
}
    

.news-btn {
    display: flex;
    font-family: "BebasNeue-Regular";
    display: block;
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    border-radius: 20px;
    color: black;
    line-height: 38px;
    margin: auto;
    font-weight: normal;
    background: white;
    position: relative;
    top: -20px;
    z-index: 11;
}

.news-btn:hover {
    cursor: pointer;
}

/*** ------ SECTIONS ------ ***/

.section-container {
    width: 60%;
    height: 100%;
    margin:0 auto;
    font-family: "BebasNeue-Regular";
    position: relative;
}

.contact-us-container {
    width: 80%;
    height: 100%;
    font-family: "BebasNeue-Regular";
    position: relative;
}

.green {
    background-color: var(--FLARIE_SECTION_GREEN);
    overflow:hidden;
}

.yellow {
    background-color: var(--FLARIE_SECTION_YELLOW);
    overflow:hidden;
}

.red {
    background-color: var(--FLARIE_SECTION_RED);
    overflow:hidden;
}




/*** ------ SECTIONS REUSABLE CLASSES ------ ***/


.section-multiple {
    margin:0;
    color:white;
    position: relative;
    top: 45%;
    z-index: 9;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.section-text-mid{
    margin:0;
    font-size: 78px;
    color:white;
    text-align: left;
    z-index: 10;
    line-height:90%;
    padding-bottom:10px;
}

.section-text-mid-small {
    margin:0;
    font-size: 22px;
    color:white;
    text-align: left;
    font-family: "BebasNeue-Regular";
    z-index: 10;
}

.section-text-right{
    margin:0;
    font-size: 90px;
    width:60%;
    margin-left:auto;
    color:var(--FLARIE_HEADER_DARKBLUE);
    position: relative;
    z-index: 10;
    justify-content: flex-end;
    line-height:90%;
    padding-bottom:10px;
}

.section-text-right-small{
    margin:0;
    font-size: 22px;
    color:var(--FLARIE_HEADER_DARKBLUE);
    text-align: end;
    width:60%;
    margin-left:auto;
    font-weight:normal;
    z-index: 10;
}

.section-text-left {
    margin:0;
    width:62%;
    font-size: 80px;
    color:white;
    position: relative;
    z-index: 10;
    line-height:90%;
    padding-bottom:10px;
}

.section-text-left-small{
    margin:0;
    font-size: 22px;
    color:white;
    text-align: start;
    width:60%;
    margin-right:auto;
    font-weight:normal;
    z-index: 10;
}

.business-text-right {
    margin:0;
    width:58%;
    font-size: 90px;
    float:right;
    color:var(--FLARIE_HEADER_DARKBLUE);
    position: relative;
    text-align: end;
    height: 100%;      
    align-items: center;
    z-index: 10;
    line-height:90%;
    padding-bottom:10px;
}

.business-text-right-small{
    margin:0;
    font-size: 22px;
    color:var(--FLARIE_HEADER_DARKBLUE);
    text-align: end;
    width:60%;
    margin-left:auto;
    font-family: "BebasNeue-Regular";
    z-index: 10;
}

.business-text-left {
    margin:0;
    width:62%;
    font-size: 80px;
    color:white;
    float:left;
    position: relative;
    height: 100%;      
    align-items: center;
    z-index: 10;
    line-height:90%;
    padding-bottom:10px;
}


.business-text-left-small{
    margin:0;
    font-size: 26px;
    color:white;
    text-align: start;
    width:60%;
    margin-right:auto;
    font-family: "BebasNeue-Regular";
    z-index: 10;
}

#green-section {
    top:40%;
}

.business-text-left-small {

}

#readStudyLink {
    font-size:24px;
    color:white;
    padding-top:10px;
    text-decoration: underline;
    text-underline-position: under
}

/*-----------------------------------------------------------------------------------*/
/* ANIMATION																
/*-----------------------------------------------------------------------------------*/

.animate-1, .animate-2, .animate-3, .animate-4, .animate-5, .animate-6, .animate-7, .animate-8 {
    display:none;
}

.animate-partners-1, .animate-partners-2, .animate-partners-3, .animate-create-game, .animate-create-game-btn, .animate-statistics, .animate-brands, .animate-download, .animate-download-info-1, .animate-download-info-2 {
    display:none;
}

.animate-image-1, .animate-image-2, .animate-image-wheel, .animate-news, .animate-news-header {
    display:none;
}

.animate-flex {
    display:flex;
}

.animate-block {
    display:block;
}

.animate-position {
    top:0% !important;
}

/*-----------------------------------------------------------------------------------*/
/* TermsContainer 
/*-----------------------------------------------------------------------------------*/

.termscontainer {
    position: relative; /* positon makes the menubar be a 100% of the screen */
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background: #fff; /* Header background */
}

.termscontainer p {
    color: #666d79;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    margin: 2px 0 0;
    font-family: "BebasNeue-Regular";
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/*-----------------------------------------------------------------------------------*/
/* Terms-inner 
/*-----------------------------------------------------------------------------------*/

.terms-inner {
    position: relative; /* positon makes the menubar be a 100% of the screen */
    margin: 0 auto;
    width: 90%;
    padding: 80px 0 110px 0;
    background: #fff; /* Header background 58c0ed */
}

.terms-inner img {
    margin-top: 180px;
    text-align: center;
}

.terms-inner a {
    color: #666d79;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    font-family: Helvetica Neue;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.terms-inner a:hover {
    opacity: 0.7;
}

.terms-inner a:link, a:visited, a:active {
    outline: 0;
}


/*-----------------------------------------------------------------------------------*/
/* IMAGES																
/*-----------------------------------------------------------------------------------*/

.image-balloon-left {
    position: absolute;
    top:20%;
    left:3%;
    z-index:2;
}

.image-balloon-right {
    position: absolute;
    top:20%;
    right:10%;
    z-index:2;
}

.image-wheel-right {
    position: absolute;
    bottom:-14%;
    right:-12%;
    width:500px;
    z-index:2;
}


.image-balloon-news-left {
    position: absolute;
    top:40%;
    left:3%;
    z-index:2;
}

.image-balloon-jobs-left {
    position: absolute;
    top:50%;
    left:10%;
    z-index:2;
}

.image-balloon-jobs-right {
    position: absolute;
    top:30%;
    right:10%;
    z-index:2;
}

.image-roller-about-right {
    position: absolute;
    bottom:-12%;
    right:0;
    width:380px;
    z-index:2;
}

.image-roller-about-left {
    position: absolute;
    bottom:-20%;
    left:0;
    width:290px;
    z-index:2;
}


.image-roller-big {
    position: absolute;
    bottom:-5%;
    width:100%;
    height:50%;
    z-index: 1;
}



/*** ------ TEXT REUSABLE CLASSES ------ ***/
.text-left {
    text-align:left;
    font-size:70px;
    margin-bottom:0;
}

/*** ------ END OF SECTIONS REUSABLE CLASSES ------ ***/

.section-text-search {
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height:50%;
}

.search-text {
    text-align:center;
    font-size:80px;
    color:white;
    margin: 0 auto;
    position: relative;
    margin-bottom:0px;
}

#search-input {
    position: absolute;
    margin: 0 auto;
    font-family: "BebasNeue-Regular";
    display: block;
    width: 427px;
    height: 30px;
    padding: 10px;
    font-size:20px;
    text-align: center;
    border-radius: 23px;
    color: white;
    font-weight: bold;
    line-height: 25px;
    background-color: rgb(221,107,115);
    border: 2px solid white;
    letter-spacing:0.5px; 
    outline: none;
    left: 0; 
    right: 0; 
    top: 50%;
    margin-left: auto; 
    margin-right: auto; 
}

#statistics {
    position: relative;
}

.statistics-divider {
    height:200px;
    background-color: var(--FLARIE_SECTION_DARKBLUE);
    /* letter-spacing:1px; */
}

.statistics-container {
    width:60%;
    margin:auto;
    display:flex;
    justify-content: space-around;
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.statistics-container > div {
    width:15%;
}

.statistics-container > div > h2, .statistics-container > div > h2 > p {
    color:white;
    font-size:50px;
    text-align:center;
    margin:0;
    display:flex;
    justify-content: center;
}

.statistics-container > div > h2 > p {
    font-family: "BebasNeue-Regular";
    font-weight: bold;
    margin:0;
}

.statistics-container > div > h3 {
    color:white;
    font-size:24px;
    text-align:center;
    margin:0;
    font-weight: normal;
    font-family: "BebasNeue-Regular";
}

#statistics-game-time {
    width:35%;
}

#statistics-game-rounds {
    width:20%;
}

#statistics-brands, #statistics-games {
    width:35%;
}

#statistics-markets {
    width:30%;
}

/*-----------------------------------------------------------------------------------*/
/* SECTION BACKGROUNDS 																
/*-----------------------------------------------------------------------------------*/

.user-green-bg {
    width:40%;
    position: absolute;
    right:3%;
    top:12%;
    bottom:0;
}

.user-yellow-bg, .business-yellow-bg {
    width:38%;
    position: absolute;
    left:3%;
    top:12%;
    bottom:0;
}

.business-red-bg {
    width:40%;
    position: absolute;
    right:-1.6%;
    top:27%;
    bottom:0;
}

.background-left-2 {
    width:38%;
    position: absolute;
    left:3%;
    top:10%;
    bottom:0;
}

.business-green-bg {
    width:37%;
    position: absolute;
    right:-8%;
    top:6%;
    bottom:0;
}

/*-----------------------------------------------------------------------------------*/
/* BRANDS - BUSINESS																
/*-----------------------------------------------------------------------------------*/
#brands {
    height:620px; 
    overflow:hidden;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

.brands-container {
   
}

#brands-header {
    margin:0;
    font-size:90px;
    /* letter-spacing:1px; */
    padding:70px 0 40px 0;
}

#brands-case-btn {
    font-family: "BebasNeue-Regular";
    display: block;
    width: 280px;
    height: 40px;
    padding: 10px;
    font-size:20px;
    text-align: center;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    line-height: 40px;
    margin:0 auto;
    background-color: var(--FLARIE_SECTION_BLACK);
    /* letter-spacing:1px; */
    position: relative;
    margin-top:25px;
    margin-bottom:75px;
}

.logo {
    width:110px;
    height:28px;
}

.brands-logos > img {
    width:90px;
    padding:10px 10px;
}

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD - BUSINESS																		
/*-----------------------------------------------------------------------------------*/

#download {
    background-image: linear-gradient(to bottom, #58c0ed, #4eb8f1, #4daff3, #54a5f4, #619af3);    height: 365.38px;
    overflow:hidden;
    position: relative;
}

.download-container {
    position: relative;
    top: 45% !important;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color:white;
}

.download-container > h2 {
    font-size:90px;
    margin:auto;
    line-height:90%;
}

.googlePlay {
    height:40px;
    position: relative;
    top:-5px;
    border-radius:5px;
    width:125px;
}

.appStore {
    height:40px;
    position: relative;
    top:-5px;
    border-radius:5px;
    width:125px;

}

/* DOWNLOAD INFO - BUSINESS */

#download-info {
    height: 600px;
    overflow:hidden;
    position: relative;
}

.download-info-header {
    padding-top:40px;
    margin: 0;
    font-size: 90px;
    text-align: end;
    width: 61%;
    margin-left: auto;
    color: var(--FLARIE_SECTION_BLACK);
    position: relative;
    line-height:90%;
}

.image-circle {
    height: 200px;
    width: 200px;
    object-fit: contain;
    margin:auto;
    display:block;
}

.image-circle-small {
    height: 150px;
    width: 150px;
    background-color: var(--FLARIE_HEADER_DARKBLUE);
    border-radius: 50%;
    margin:auto;
    display:block;
    border: 1px solid black;
}

.partner-icons {
    height: 150px;
    width: 150px;
    margin:auto;
    display:block;
}

.partner-header {
    margin-top:50px;
    color: rgb(18,18,18);
}


.grid-section {
    /* letter-spacing:0.5px; */
    padding-top:40px;
}

.grid-section > div {
    width:200px;
    margin-left:auto;
    margin-right:auto;
    height:100%;
}

.grid-section > div > h3 {
    text-align:center;
    margin:0;
    color:var(--FLARIE_HEADER_DARKBLUE);
    padding-top:10px;
    font-size:30px;
    font-family: "BebasNeue-Bold";
    font-weight: 400;
}

.grid-section > div > h4 {
    text-align:center;
    margin:0;
    color:var(--FLARIE_HEADER_DARKBLUE);
    padding-top:5px;
    font-size:18px;
    font-family: "BebasNeue-Regular";
}

.mobile-changes {
    display:block;
}

.mobile-changes-3 {
    display:table;
}

#share-game, #game-brands, #create-game {
    overflow:hidden;
    height:500px;
    position: relative;
}

#game-brands {
    background-image:url('https://dwfedcf5lscmq.cloudfront.net/skins/60646497b385e.jpg');
}

.create-game-container {
    display:flex;
    flex-direction: column;
    position: relative;
    top: 15%;
    width:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index:10;
}

#create-game-background {
    position: absolute;
    top:7%;
    right:5%;
    width:620px;
}

.create-game-text-small {
    line-height:normal;
    padding-top:25px;
    margin:0;
    font-size: 26px;
    color:white;
    text-align: start;
    margin-right:auto;
    font-family: "BebasNeue-Regular";
    z-index: 10;
}

.create-game-text-big {
    margin:0;
    font-size: 80px;
    color:white;
    float:left;
    position: relative;
    align-items: center;
    z-index: 10;
    line-height:90%;
    padding-bottom:10px;
}

#partners {
    max-height:1000px;
    overflow:hidden;
    position: relative;
}

#partner-1,#partner-2,#partner-3 {
    height:220px;
}

#partner-3 {
    margin-bottom:100px;
}

.flex {
    display:flex;
}

.flex-2 {
    display:flex;
}

.share-game-header {
    margin:0;
    font-size: 90px;
    color:white;
    width:100%;
    line-height:90%;
}

.share-game-text {
    margin:0;
    font-size: 26px;
    color:white;
    text-align: start;
    margin-right:auto;
    font-family: "BebasNeue-Regular";
    z-index: 10;
}

.game-brands-header {
    margin:0;
    font-size: 90px;
    color:white;
    width:100%;
    line-height:90%;
    justify-content: center;
}

.share-game-container {
    width:60%;                                                                                                                                         
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height:90%;
}

#share-game-menu {
    list-style-type: none;
    justify-content: space-between;
    padding:0;
    padding-top:20px;
    margin:0;
    /* letter-spacing:0.5px; */
    font-size: 25px;
    color:rgba(255,255,255,0.8);
    text-align: start;
    width:85%;
    margin-right:auto;
    font-weight:normal;
}

#game-brands-menu {
    font-size:25px;
    list-style-type: none;
    justify-content: space-between;
    padding:0;
    padding-top:20px;
    margin:0 auto;
    /* letter-spacing:0.5px; */
    font-size: 25px;
    color: rgba(255,255,255,0.8);
    width:70%;
    font-weight:normal;
}

.menu-active {
    text-decoration: underline;
    text-underline-position: under;
    color:white;
}



/*-----------------------------------------------------------------------------------*/
/* CLOUDS IMAGES BETWEEN SECTIONS																	
/*-----------------------------------------------------------------------------------*/

.section-divider {
    position: absolute;
    bottom:-2px;
    left:0;
    height:45px;
    width:100%;
    right:0;
    pointer-events: none;
}

#case-cloud {
    background-image: url('https://dwfedcf5lscmq.cloudfront.net/skins/6064649ea24e3.png');
    z-index: 10;
    height:64px;
}

.green-cloud {
    background-image: url("../images/clouds/green_cloud.png");
    z-index: 10;
}

.green-cloud-2 {
    background-image: url("../images/clouds/greenCloud.svg");
    background-size: cover;
    background-position: center;
    height:229px;
    z-index: 10;
}

.red-cloud {
    background-image: url("../images/clouds/redCloud.svg");
    z-index: 10;
    background-size: cover;
}

.yellow-cloud {
    background-image: url("../images/clouds/yellow_cloud.png");
    z-index: 10;
}

.yellow-cloud-2 {
    height:85px !important;
    background-image: url("../images/clouds/yellowCloud.svg");
    z-index: 10;
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
}

.blue-cloud {
    background-image: url("../images/clouds/blue_cloud.png");
    z-index: 10;
}

.lightblue-cloud {
    background-image: url("https://dwfedcf5lscmq.cloudfront.net/skins/606452358815f.png");
    z-index: 10;
}

.lightblue-cloud-2 {
    background-image: url("../images/clouds/blueCloud.svg");
    z-index: 10;
    background-repeat: repeat;
    background-size: auto;
}

.white-cloud {
    background-image: url("../images/clouds/clouds-02.svg");
    z-index: 10;
    background-size: cover;
    z-index:5;
}

.white-cloud-2 {
    background-image: url("../images/clouds/clouds-03.svg");
    z-index: 10;
    background-size: cover;
    height:55px !important;
    z-index:10;
}

.black-cloud {
    height:113.77px !important;
    bottom:-33px !important;
    background-image: url("../images/clouds/blackCloud.svg");
    z-index: 10;
    background-size: cover;
}

.black-cloud-top {
    height:113.77px !important;
    top:-33px !important;
    background-image: url("../images/clouds/blackCloud.svg");
    z-index: 10;
    -moz-transform:scaleX(-1) scaleY(-1);
    -o-transform:scaleX(-1) scaleY(-1);
    -webkit-transform:scaleX(-1) scaleY(-1);
    transform:scaleX(-1) scaleY(-1);
}

.news-white-cloud {
    background-image: url("../images/clouds/clouds-03.svg");
    z-index: 10;
    bottom:0;
    background-size: cover;
    position: absolute;
    left:0;
    height:55px;
    width:100%;
    right:0;
}


/*-----------------------------------------------------------------------------------*/
/* PLACEHOLDERS																			
/*-----------------------------------------------------------------------------------*/


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: white;
    font-family: "BebasNeue-Regular";
    opacity:  0.8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
    font-family: "BebasNeue-Regular";
    opacity:  0.8;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
    opacity:  0.8;
    font-family: "BebasNeue-Regular";
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
    font-family: "BebasNeue-Regular";
    opacity:  0.8;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
    font-family: "BebasNeue-Regular";
    opacity:  0.8;
}

::placeholder { /* Most modern browsers support this now. */
    color: white;
    font-family: "BebasNeue-Regular";
    opacity:  0.8;
}


/*-----------------------------------------------------------------------------------*/
/* NEWS																			
/*-----------------------------------------------------------------------------------*/

#news, #news-article {
    font-family: "BebasNeue-Regular";
    position: relative;
}

#news-business {
    font-family: "BebasNeue-Regular";
    position: relative;
}

.news-container {
    width:60%;
    margin:0 auto;
}

#news-background-divider {
    background-color: var(--FLARIE_LIGHTGREEN);
    height:500px;
    position: relative;
    overflow:hidden;
}

#news-business-background {
    background-color: var(--FLARIE_LIGHTGREEN);
    height:380px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#news-business-background > h4{
    margin: 0;
    font-size: 35px;
    text-align: center;
    color: white;
    position: relative;
    top: 90px;
  
}

#news-header {
    width: 60%;
    height: 10%;
    position: absolute;
    top: 180px;
    left: 20%;
}

#news-header > h1 {
    color: #FFFFFF;
    margin:0;
    font-size: 120px;
    font-family: "BebasNeue-Bold";
    font-weight: 400;
    /* letter-spacing:1px; */
}



.news-card {
    height:315px;
    width:324px;
    position: relative;
    margin: auto;
}

.news-card > h3 {
    font-size:20px;
    margin:10px 10px 0 10px;
    /* letter-spacing:1px; */
    color:rgb(18,18,18);
}

.news-card > div > a, .news-card > div > p {
    margin:15px 10px 0 10px;
    font-size: 18px;
    color: gray;
}

.news-card > div {
    display:flex;
    justify-content: space-between;
}

.news-card > div > a {
}

.news-card-container {
    display:grid;
    justify-content: space-between;
    position: relative;
    top: -122.5px;
    grid-template-columns: repeat(auto-fill,minmax(324px,1fr));
    grid-auto-rows: 340px;
    grid-gap: 100px;
    margin: 0 auto;
    grid-row-gap: 80px;
    grid-column-gap:5%;
    overflow: hidden;
    z-index: 14;
}

.news-card-img {
    width:324px;
    height:234px;
    object-fit: cover;
    object-position: center;
    border-radius:15px;
}

.news-card-hide {
    display:none;
}

.article-container > p > img {
    margin:auto;
    max-width:50vw;
}

.article-container > h1 {
    font-size: 50px;
}

#news-date {
    margin-bottom:30px;
}

#news-main-asset {
    position: relative;
    height: 400px;
    width:70%;
    display: block;
    margin:auto;
    margin-bottom:20px;
    z-index: 10;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#news-main-asset > img, #news-main-asset > video {
    height:100%;
    width:100%;
    border-radius:30px;
    object-fit: fill;
}

#news-article-header {
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:60%;
    margin:auto;
    z-index: 10;
}

#news-article-header > h1 {
    color:white;
    font-size:90px;
    margin-bottom:0;
    font-family: "BebasNeue-Bold";
    font-weight: 400;
    /* letter-spacing:1px; */
}

#news-article-header > p {
    color:white;
    font-size:25px;
    margin-bottom:0;
    font-weight: bold;
    /* letter-spacing:0.5px; */
    margin-top:0;
    font-family: "BebasNeue-Regular";
}

.article-container {
    position: relative;
    display: block;
    margin:auto;
    top:-200px;
    margin-top: 20px;
}

.article-container > p {
    font-family: "BebasNeue-Regular";
    font-size:20px;
    margin-top:0;
    margin-bottom:0;
}

.article-container > p > img {
    display:block;
    margin:auto;
}

/*-----------------------------------------------------------------------------------*/
/* JOBS & ABOUT US																		
/*-----------------------------------------------------------------------------------*/
#jobs, #about-us {
    font-family: "BebasNeue-Regular";
    position: relative;
}

#blue-background-divider {
    background-image: linear-gradient(to bottom, #58c0ed, #4eb8f1, #4daff3, #54a5f4, #619af3);    height: 365.38px;
    height:400px;
    position: relative;
    overflow: hidden;
}

#blue-background-divider > h1 {
    height: 110%; 
    position: relative;
    display: flex;
    align-items: center;
    margin:auto;
    font-size: 120px;
    font-family: "BebasNeue-Bold";
    font-weight: 400;
    width:60%;
    color:white;
    /* letter-spacing:2px; */
    opacity:1;
    z-index: 10;
}

.jobs-qualifications {
    font-size:20px;
    margin-top:10px;
    padding-left:15px;
}

.jobs-qualifications > li {
    margin: 0;
	list-style: none;
	background-image: url('https://dwfedcf5lscmq.cloudfront.net/skins/606c674176b2d.png');
	background-repeat: no-repeat;
	background-position: left center;
    padding-left:40px;
    background-size: 22px;
    margin-top:10px;
    color:rgb(18,18,18);
}

/*
li{
    list-style: none;
 }
 li::before{
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    height: 20px;
    padding-right:40px;
    background-position: left center;
    width: 20px;
    background-image: url('https://dwfedcf5lscmq.cloudfront.net/skins/606c674176b2d.png');
    background-size:contain
 }*/


.jobs-section > div > h5 {
    font-size:20px;
    margin-bottom:0;
    color:rgb(18,18,18);
}

#about-us-header {
    justify-content: left !important;
    width:60% !important;
    color: #FFFFFF;
}



.about-section > h4 {
    margin-top:50px;
    /* letter-spacing:0.5px; */
    margin-bottom:0;
    font-size: 28px;
    color:rgb(18,18,18);
}

.about-section > p {
    font-size: 20px;
    font-family: "BebasNeue-Regular";
    font-weight: lighter;
    color:var(--FLARIE_HEADER_DARKBLUE);
    color:rgb(18,18,18);
}

.about-us-section > div > a > img {
    width:14vw;
    height:14vw;
    border-radius:25%;
    margin:auto;
    display: block;
}

.about-section > h2{
    font-size:80px;
    /* letter-spacing:1.5px; */
    margin-bottom:20px;
    margin-top:20px;
    color:rgb(18,18,18);
}

.about-us-section > div > a > h3 {
    text-align: center;
    font-size: 20px;
    margin-bottom:6px;
    margin-top: 5px;
    color:rgb(18,18,18);
}

.about-us-section > div > a > h4 {
    text-align: center;
    font-size: 18px;
    margin-top:0;
    font-weight: unset;
    font-family: "BebasNeue-Regular";
    color:rgb(18,18,18);
}

.about-us-section > div > a > h5 {
    text-align: center;
    font-size: 16px;
    margin-top:6px;
    font-weight: unset;
    font-family: "BebasNeue-Regular";
    color:rgb(18,18,18);
}

#office-text {
    width:60%;
    font-size:20px;
    font-family: "BebasNeue-Regular";
    color:rgb(18,18,18);
}

#about-us-office {
    width:70%;
    margin:auto;
    color:rgb(18,18,18);
}

#team-img {
    padding-top:20px;
    margin: auto;
    width:90%;
    border-radius:50px;
    display: block;
    margin-bottom:50px;
}

.jobs-section > h2 {
    font-size: 90px;
    /* letter-spacing:1px; */
    margin-bottom:20px;
    color:rgb(18,18,18);
}

.jobs-section > div > h4 {
    font-size: 32px;
    /* letter-spacing:1px; */
    margin-bottom:0;
    margin-top:70px;
    color:rgb(18,18,18);
}

.jobs-section {
    margin-top:60px;
}

.jobs-section > p, .jobs-section > div > p {
    font-size: 20px;
    font-family: "BebasNeue-Regular";
    font-weight: lighter;
    margin-top:20px;
    margin-bottom:15px;
    color:rgb(18,18,18);
}

#jobs-text-bold {
    font-family: "BebasNeue-Bold";
    font-size: 28px;
    color:rgb(18,18,18);
}

.jobs-section > a {
    margin-top:50px;
    width: 280px;
    height: 40px;
    display:block;
    padding: 10px;
    font-size:20px;
    text-align: center;
    border-radius: 15px;
    color: white;
    background-color: var(--FLARIE_SECTION_DARKBLUE);
    line-height: 40px;
    /* letter-spacing:0.5px; */
    margin-bottom:50px;
}

/*-----------------------------------------------------------------------------------*/
/* END OF NEW CSS																			
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/* IFRAME GOOGLE MAPS																		
/*-----------------------------------------------------------------------------------*/

#mapIframe {
    margin-bottom:50px;
    height:500px;
}

/*-----------------------------------------------------------------------------------*/
/* THE GRID																			
/*-----------------------------------------------------------------------------------*/

.three-rows-grid {
    display:grid;
    justify-content: space-between;
    position: relative;
    grid-template-columns: repeat(auto-fill,minmax(30%,1fr));
    grid-gap: 100px;
    margin: 0 auto;
    grid-row-gap: 70px;
    grid-column-gap:5%;
    margin-bottom:50px;
}

.four-rows-grid {
    display:grid;
    justify-content: space-between;
    position: relative;
    grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
    grid-auto-rows: 270px;
    grid-gap: 100px;
    margin: 0 auto;
    grid-row-gap: 10px;
    grid-column-gap:0%;
}

iframe {
    overflow:hidden;
}

.one {
    width: 8.33333%;
}

.two {
    width: 16.66667%;
}

.three {
    width: 25%;
}

.four {
    width: 33.33333%;
}

.five {
    width: 41.66667%;
}

.six {
    width: 50%;
}

.seven {
    width: 58.33333%;
}

.eight {
    width: 66.66667%;
}

.nine {
    width: 75%;
}

.ten {
    width: 83.33333%;
}

.eleven {
    width: 91.66667%;
}

.twelve {
    width: 100%;
}

.column, .columns {
    float: left;
    min-height: 1px;
    padding: 0;
    position: relative;
}

.column.centered, .columns.centered {
    float: none;
    margin: 0 auto;
}

/*-----------------------------------------------------------------------------------*/
/* GLOBAL STYLES
/*-----------------------------------------------------------------------------------*/
@font-face {
    font-family: "BebasNeue-Bold";
    src: url(fonts/Bebas-Bold.otf) format("truetype");
}

@font-face {
    font-family: "BebasNeue-Book";
    src: url(fonts/BebasNeue-Book.ttf) format("truetype");
}

@font-face {
    font-family: "BebasNeue-Regular";
    src: url(fonts/Bebas-Regular.otf) format("truetype");
}

body {
    background-color: #fff;
    position: relative;
    margin: 0;
    /* font-family: "BebasNeue-Regular"; */
    overflow-x: hidden;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

h2 {
    font-size: 20px;
    font-weight: 400;
    font-family: "BebasNeue-Bold";
}

h3 {
    font-size: 45px;
    font-weight: 400;
    font-family: "BebasNeue-Bold";
}

h4 {
    font-size: 16px;
    font-weight: 400;
    font-family: "BebasNeue-Bold";
}

h5 {
    font-size: 14px;
    /* font-weight: 400; */
    font-family: "BebasNeue-Regular";}
}

h6 {
    font-size: 12px;
    font-weight: 400;
    font-family: "BebasNeue-Bold";
}


p {
    font-size: 12px;
    color: #000;
    /* font-weight: 300; */
    font-family: "BebasNeue-Regular";
}

b {
    font-weight: 400;
    font-family: "BebasNeue-Bold";
}

.no-padding {
    padding: 0;
}

.space10 {
    margin-bottom: 10px;
}

.space15 {
    margin-bottom: 15px;
}

.space20 {
    margin-bottom: 20px;
}

.space25 {
    margin-bottom: 25px;
}

.space30 {
    margin-bottom: 30px;
}

.space35 {
    margin-bottom: 35px;
}

.space40 {
    margin-bottom: 40px;
}

.space50 {
    margin-bottom: 50px;
}

.space60 {
    margin-bottom: 60px;
}

.space70 {
    margin-bottom: 70px;
}

.space80 {
    margin-bottom: 80px;
}

.space90 {
    margin-bottom: 90px;
}

.space100 {
    margin-bottom: 100px;
}

.space110 {
    margin-bottom: 110px;
}

.space120 {
    margin-bottom: 120px;
}

.space130 {
    margin-bottom: 130px;
}

.space140 {
    margin-bottom: 140px;
}

.space150 {
    margin-bottom: 150px;
}

.space160 {
    margin-bottom: 160px;
}

.space170 {
    margin-bottom: 270px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    cursor: pointer;
}

a:link, a:visited, a:active {
    text-decoration: none;
}

/*-----------------------------------------------------------------------------------*/
/* GAME SECTION - INDEX																			
/*-----------------------------------------------------------------------------------*/

.game-section {
    width:100%;
    background-image: linear-gradient(to bottom, #58c0ed, #4eb8f1, #4daff3, #54a5f4, #619af3);
    min-height:820px;
    position: relative;
}

#game-section-container {
    width:60%;
    display:grid;
    justify-content: space-between;
    position: relative;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-auto-rows: 320px;
    margin: 0 auto;
    grid-row-gap: 80px;
    grid-column-gap:5%;
    padding: 95px 50px;
}

.game-logo {
    
}

.game-logo > div {
    background-color: var(--FLARIE_GAME_BACKGROUND_DARKBLUE);
    border-radius:50px;
    height:220px;
    width:220px;
    margin:auto;
}

.game-logo > div > div {
    height:100%;
    width:80%;
    display:flex;
    align-items: center;
    margin:auto;
}

.game-logo-img {
    width:100%;
    height:100%;
    margin:auto;
}

.game-logo > h5 {
    text-align:center;
    font-size:25px;
    /* letter-spacing:0.5px; */
    font-family: "BebasNeue-Bold";
    font-weight: 400;
    margin-top:10px;
    margin-bottom:5px;
}

.game-logo > p {
    width:100%;
    margin:auto;
    display: block;
    text-align:center;
    font-size:18px;
    /* letter-spacing:0; */
    font-family: "BebasNeue-Regular";
}

/*-----------------------------------------------------------------------------------*/
/* FOOTER 
/*-----------------------------------------------------------------------------------*/

#footer {
    position: relative;
    padding: 40px 0 20px;
    background: #fff; /* url(../images/indexcsv.png) repeat fixed; */ /* Background color for the people div */
    font-family: "BebasNeue-Regular";
    background: var(--FLARIE_SECTION_FOOTER);
    /*border-top: 1px solid #666d79;*/
    /* background:#00a8ec url(../images/quote-bg.jpg) repeat fixed; */
}

.footer-container {
    display:flex;
}

.footer-section > h3 {
    font-family: "BebasNeue-Regular";
    font-size:18px;
    /* letter-spacing:1px; */
    color:white;
}

.footer-section > a {
    color:white;
    font-family: "BebasNeue-Regular";
    margin-top:10px;
    font-size:17px;
}

.footer-section {
    width:15%;
    display:flex;
    flex-direction: column;
}

.footer-icons {
    margin-top:2%;
    width: 40%;
    text-align:end;
}

.footer-icons > a > img {
    margin-left:5px;
}

#footer-flarie-logo {
    height: 100%;      
    display: flex;
    align-items: center;
    position: relative;
}

#footer-flarie-logo {
    position: absolute;
    top:0;
}

.footer-bottom {
    padding-top:50px;
    width:60%;
    margin:auto;
    display:flex;
    margin-bottom:20px;
}

.footer-bottom > div {
    width:15%;
}

.footer-bottom > a, .footer-bottom > p {
    color:white;
}

#footer-bottom-links {
    width:40%;
    text-align:end;
}

.footer-bottom > div > a, .footer-bottom > div > p {
    color:white;
    font-size:17px;
}


/*-----------------------------------------------------------------------------------*/
/* Phone
/*-----------------------------------------------------------------------------------*/

.phone-container {
    width:50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone {
    height: 450px;
    width:382px;
    margin:auto;
    position: relative;
    background-repeat:no-repeat;
    background-size:cover;
    margin:auto;
    overflow:hidden;
    margin-top:30px;
    background-image: url("../images/phone3_new.png"); 
}

.video {
    position: absolute;
    left:71px;
    top:16px;
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    height: 434px;
    width:243px;
    overflow: hidden;
    background-color:black;
}

.video-case {
    position: absolute;
    left:71px;
    top:18px;
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    height: 480px;
    width:243px;
    overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*-----------------------------------------------------------------------------------*/
/* Contact
/*-----------------------------------------------------------------------------------*/

#contact{
    margin-top: 50px;
}

#contact-header {
    font-size:90px;
    margin-bottom:20px;
    font-family: "BebasNeue-Bold";
    font-weight: 400;
}

#contact-paragraph {
    font-size:22px;
    font-weight: normal;
    font-family: "BebasNeue-Regular";
    /* letter-spacing:0; */
    margin-top:0;
    margin-bottom:20px;
}

.contact-input-text::-webkit-input-placeholder, #contact-input-message::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
    color: black !important;
    font-family: "BebasNeue-Regular";
    font-size:20px;
    opacity:0.9;

}
.contact-input-text:-moz-placeholder, #contact-input-message:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: black !important;
    font-family: "BebasNeue-Regular";
    font-size:20px;
    opacity:0.9;
}
.contact-input-text::-moz-placeholder, #contact-input-message::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: black !important;
    font-family: "BebasNeue-Regular";
    font-size:20px;
    opacity:0.9;
}
.contact-input-text:-ms-input-placeholder, #contact-input-message:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black !important;
    font-family: "BebasNeue-Regular";
    font-size:20px;
    opacity:0.9;
}
.contact-input-text::-ms-input-placeholder, #contact-input-message::-ms-input-placeholder { /* Microsoft Edge */
    color: black !important;
    font-family: "BebasNeue-Regular";
    font-size:20px;
    opacity:0.9;
}

#contact-form {
    width:40%;
    display:flex;
    flex-direction: column;
}

.contact-input-text, #contact-input-message {
    border:1.5px solid black;
    border-radius: 15px;
    outline: none;
    padding-left:20px;
    font-family: "BebasNeue-Regular";
    font-size:18px;
}

.contact-input-text {
    width:65%;
    margin-bottom:20px;
    height: 40px;
}

#contact-input-message {
    width:100%;
    height:80px;
    margin-bottom:50px;
}

#contact-input-submit {
    font-family: "BebasNeue-Regular";
    display: block;
    width: 140px;
    height: 45px;
    padding: 10px;
    font-size:20px;
    text-align: center;
    border-radius: 18px;
    color: white;
    font-weight: bold;
    line-height: 20px;
    font-weight:normal;
    background-color: var(--FLARIE_SECTION_FOOTER);
    position: relative;
    border: none;
    margin-bottom:50px;
    margin-top:50px;
    margin-top:-20px;
}

/*-----------------------------------------------------------------------------------*/
/* SECTION auto INNER
/*-----------------------------------------------------------------------------------*/

.sections-half-inner60 {
    position: relative; /* positon makes the menubar be a 100% of the screen */
    width: 60%;
    height: 539px;
    padding: 0 0 0 0;
    margin: 10px auto 0;
    float: left;
    background: #58c0ed; /* Header background 58c0ed */
    opacity: 0.92;
    filter: alpha(opacity=92); /* For IE8 and earlier */
    /*scrollable*/
}

.sections-half-inner60 h3 {
    color: #fff;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.0;
    margin-top: 95px;
    margin-bottom: 0;
    text-align: center;
    font-family: "BebasNeue-Bold", Helvetica Neue;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.sections-half-inner60 h2 {
    color: #ccd1da;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.0;
    margin-top: 0;
    text-align: center;
    font-family: "BebasNeue-Bold", Helvetica Neue;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.sections-half-inner60 p {
    margin-top: 10px;
    margin-right: 15%;
    margin-left: 15%;
    text-align: center;
}

.sections-half-inner60-imagediv {
    height: 150px;
    width: 150px;
    margin: 0 auto;
}

.sections-half-inner60-imagediv img {
    margin-top: 80px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FFF;
}

.sections-half-inner40 {
    position: relative; /* positon makes the menubar be a 100% of the screen */
    width: 40%;
    height: 539px;
    padding: 0 0 0 0;
    margin: 10px auto 0;
    float: left;
    background: #58c0ed; /* Header background 58c0ed */
}

.sections-half-inner40-imagediv {
    width: 308px;
    height: 539px;
    float: left;
    position: relative;
}

.sections-half-inner40-imagediv img {
    margin-top: 0;
    width: 100%;
    height: 100%;
}

/*-----------------------------------------------------------------------------------*/
/* ADJUSTMENTS FOR DIFFERENT SCREEN SIZES
/*-----------------------------------------------------------------------------------*/
@media screen and (min-width: 200px) and (max-width: 329px) {
    .download-info-header { width:90%; font-size:50px;}
    .statistics-container { width:90%; }
    /* .section {height:300px;} */
    #contact-form {width:90%;}
    .contact-divider > h4 {font-size:22px;}
    .grid-section > div {width:100%; height:140px;}
    #partner-1, #partner-2, #partner-3 {
        height:120px;
    }
    .partner-icons {width:50px; height:50px;}
    .grid-section > div > h4 {font-size:14px;}
    .grid-section > div > h3 {font-size:18px;}
    #partners {height:600px;}
    .image-circle {width:100px; height:100px;}
    #download-info {height:520px;}
    .partner-header {
        text-align: center;
    }
    .section-divider {height:34px !important;}
    .content, #about-us-office  {width:90%;}
    #blue-background-divider > h1 {font-size:50px; text-align: center;}
    #blue-background-divider {height:280px;}

    .about-section > h2 {font-size:40px;}
    .about-us-section > div > img {width:80px; height:80px; border-radius:20px;}
    #team-img {border-radius:20px;}
    .animate-image-1, .animate-image-2 {display:none !important;}
    #news-article-header {width:90%; text-align: center;}
    #news-article-header > h1 {font-size:50px;}
    .download-container > h2 > a > img {width:69px;}
    .download-container > h2 {text-align: center;}

    #green-section {
        top:35%;
    }

/*-----------------------------------------------------------------------------------*/
/* SHARE GAME | BRANDED GAMES | CREATE OWN GAME
/*-----------------------------------------------------------------------------------*/
    #share-game, #game-brands {
        height:665px;
    }

    #share-game-menu {
        width:100%;
        font-size:18px;
    }

    .share-game-header {
        width:100%;
        font-size: 64px;
        text-align:center;
        margin-top:20px;
    }
    
    .share-game-container {
        width:100%;
    }

    #game-brands-menu {
        width:50%;
    }
    

/*-----------------------------------------------------------------------------------*/
/* NEWS
/*-----------------------------------------------------------------------------------*/
    .news-container {width:80%;}
    #news-business-background {
        height:260px;
    }
    
    #news-main-asset {width:100%;}

    .news-card-container {
        top: -122.5px;
        grid-template-columns: repeat(auto-fill,minmax(55%,1fr));
        grid-auto-rows: 340px;
        grid-gap: 100px;
        grid-row-gap: 80px;
        grid-column-gap:5%;
    }
    


/*-----------------------------------------------------------------------------------*/
/* Phone
/*-----------------------------------------------------------------------------------*/

.phone-container {
    width:100%;
}

.phone {
    height: 399px;
    width:340px;
    margin:auto;
    position: relative;
    background-repeat:no-repeat;
    background-size:cover;
    margin:auto;
    margin-top:50px;
    background-image: url("../images/phone3_new.png"); 
}

.video {
    position: absolute;
    left:63px;
    top:15px;
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    height: 400px;
    width:216px;
    overflow: hidden;
}

/*-----------------------------------------------------------------------------------*/
/* NAVBAR
/*-----------------------------------------------------------------------------------*/
    .navbar-buttons-container {
        display:none;
    }

    .navbar-icon {
        width:100%;
        justify-content: center;
        margin-left:0;
    }

    #menuToggle
    {
      display: block;
      
    }

/*-----------------------------------------------------------------------------------*/
/* STATISTICS -> COUNTING NUMBERS
/*-----------------------------------------------------------------------------------*/
.statistics-container > div {
    width:20%;
}

.statistics-container > div > h3 {
    font-size:14px;
}

.statistics-container > div > h2, .statistics-container > div > h2 > p {
    font-size:20px;
}

.statistics-container {
    width:95%;
}

.statistics-divider {
    height:100px;
}

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD - LIGHTBLUE SECTION - BUSINESS
/*-----------------------------------------------------------------------------------*/

#download {
    height: 260px;
}


/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
.footer-container {
    display:block;
    text-align:center;
}

.footer-logo {
    float:right;
}

#footer-flarie-logo {
    display:block;
}

.footer-section {
    width:50%;
}

.footer-section > h3 {
    margin-top:20px;
}

.footer-icons {
    float:right;
    width:50%;
    text-align:center;
    margin-top:-30%;
}

.footer-bottom > div {
    width:50%;
}

.footer-bottom {
    width:90%;
}

#flarie-trademark > p {
    display:flex;
    justify-content: center;
    height:100%;
    align-items:center;
}

#footer-bottom-links > a {
    margin-left:0;
    display: flex;
    justify-content: center;
}




/*-----------------------------------------------------------------------------------*/
/* SECTIONS
/*-----------------------------------------------------------------------------------*/
    .section-container, #game-section-container {
         width: 90%; 
    }

    /* SECTIONS TEXT */
    .section-text-right, .section-text-left, .business-text-right, .business-text-left, .section-text-mid, .download-container > h2,.search-text, #brands-header {
        width:95%; font-size:35px;
    }

    .section-text-right-small, .section-text-left-small, .business-text-right-small, .business-text-left-small {
        width:95%; font-size:16px;
    }

/*-----------------------------------------------------------------------------------*/
/* USER -> GAME SECTION
/*-----------------------------------------------------------------------------------*/
    #game-section-container {padding:0; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); grid-row-gap: 0px;}
    .game-logo > div {
        width:140px;
        height:140px;
        border-radius:30px;
    }
    .game-section {min-height:0px;}
    #search-input {width:200px;}

/*-----------------------------------------------------------------------------------*/
/* STARTPAGE 
/*-----------------------------------------------------------------------------------*/

    .homepage-main {
        width:90%;
        flex-direction: column-reverse;
    }

    .homepage-background-user {
        background-image: url(../images/backgrounds/startpage_phone.jpg);
    }

    .homepage-background-business {
        background-image: url(../images/backgrounds/startpage_phone_business.jpg);
    }

/*-----------------------------------------------------------------------------------*/
}

/* ***** NEWER SAMSUNG PHONES ******* */
@media screen and (min-width: 359px) and (max-width: 361px) {

    .phone {
        height: 399px !important;
        width:340px !important;
    }

    .video, .video-case {
        left:59px !important;
        top:15px !important;
        height: 400px !important;
        width:210px !important;
    }
}


@media screen and (min-width: 330px) and (max-width: 499px) {
    .statistics-container,#contact-form, .content, #about-us-office { width:90%; }
    /* .section {height:340px;} */
    .contact-divider > h4 {font-size:22px; top:20%;}
    .contact-divider-btn {margin-top:15px; top:28%;}
    .grid-section > div {width:100%; height:140px;}
    #partner-1, #partner-2, #partner-3 {
        height:120px;
    }
    .partner-icons {width:50px; height:50px;}
    .grid-section > div > h4 {font-size:14px;}
    #partners {height:630px;}
    .image-circle {width:100px; height:100px;}
    #download-info {}
    .grid-section > div > h3 {font-size:18px;}
    .black-cloud {bottom:0px !important; height:34px !important;}
    #news-article-header {width:90%; text-align: center;}
    #news-article-header > h1 {font-size:60px;}

    .contact-divider {height:190px;}
    

    .partner-header {
        text-align: center;
    }

    .animate-image-1, .animate-image-2 {
        display:none !important;
    }

    
    .jobs-section > h2 {
        font-size:60px;
        margin-bottom:0px;
    }

    .jobs-section > a {
        margin-left:auto;
        margin-right:auto;
    }

    .startpage-video-left {

    }

    .startpage-video-right {

    }

    .startpage-video-mid {  

    }

    #contact-header {
        font-size:40px;
    }

    .lightblue-cloud {
        background-size:cover;
    }

    .business-green-div {
        height:480px;
    }

    .green-div {
        top:26% !important;
    }

    .business-section {
        height:370px;
    }

/*-----------------------------------------------------------------------------------*/
/* SECTION BACKGROUNDS && SECTIONS POSTITIONS														
/*-----------------------------------------------------------------------------------*/

.section-divider {
    height:30px;
}

#business-green {
    top:35% !important;
}

.green-cloud-2 {
    height:110px;
}

.user-green-bg {
    width:102%;
    position: absolute;
    right:-4%;
    bottom:0;
    top:39%;
    z-index:10;
}

.yellow-cloud-2 {
    height: 45px !important;
}

.section-multiple {
    top:25%;
}

.user-yellow-bg {
    width:90%;
    position: absolute;
    right:0;
    bottom:0;
    left:-2%;
    top:39%;
    z-index:10;
}


.business-green-bg {
    width: 90%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 17%;
    top: 50%;
    z-index: 10;
}

.business-red-bg {
    width: 97%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 7%;
    top: 50%;
    z-index:10;
} 

.business-yellow-bg {
    width: 90%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: -2%;
    top: 44%;
    z-index:10;
}


/*-----------------------------------------------------------------------------------*/
/* ABOUT US 
/*-----------------------------------------------------------------------------------*/
   .about-us-section > div > a > img {width:35vw; height:35vw;} 
    #blue-background-divider {height:280px;}
    #team-img {border-radius:30px;}
    .about-section > h2 {font-size:40px;}

    #blue-background-divider > h1 {
        font-size:75px;
        text-align: center !important;
        width:90% !important;
        height:100% !important;
        justify-content: center !important;
    }
    
    .three-rows-grid {
        grid-template-columns: repeat(auto-fill,minmax(35%,1fr));
        grid-gap: 100px;
        grid-row-gap: 50px;
        grid-column-gap:5%;
        margin-bottom:50px;
    }


/*-----------------------------------------------------------------------------------*/
/* BRANDS
/*-----------------------------------------------------------------------------------*/

    .brands-logos > img {
        width:59px;
    }
    .brands-logos {
        margin-bottom:0px;
    }
    #brands {
        height:650px;
    }
    #brands-header {
        padding-top:30px;
        padding-bottom:10px;
        font-size:40px;
    }

/*-----------------------------------------------------------------------------------*/
/* NEWS
/*-----------------------------------------------------------------------------------*/

    .news-container {
        width:90%;
    }

    #news-business-background {
        height:260px;
    }

    #news-main-asset {
        width:100%;
        -webkit-transform: translateY(-40%);
        -ms-transform: translateY(-40%);
        transform: translateY(-40%);
        height:320px;
    }

    .news-card {
        height:280px;
        width:288px;
        position: relative;
        margin: auto;
    }    

    .news-card-img {
        width:288px;
        height:208px;
        object-fit: cover;
        object-position: center;
        border-radius:15px;
    }

    .news-card-container {
        top: -122.5px;
        grid-template-columns: repeat(auto-fill,minmax(55%,1fr));
        grid-auto-rows: 300px;
        grid-gap: 100px;
        grid-row-gap: 80px;
        grid-column-gap:5%;
        padding-bottom:15px;
    }

    #news-main-asset > img, #news-main-asset > video {
        height:225px;
    }

    #news-header {
        width:90%;
        left:5%;
        top:100px;
    }

    #news-background-divider {
        height:380px;
    }
    

/*-----------------------------------------------------------------------------------*/
/* SHARE GAME | BRANDED GAMES | CREATE OWN GAME
/*-----------------------------------------------------------------------------------*/

    #share-game, #game-brands {
        height:580px;
    }

    #share-game-menu {
        width:100%;
        margin:auto;
        font-size:17px;
        padding-top:0;
        margin-top:0;
    }

    .share-game-header {
        width:90%;
        text-align:center;
        margin:0 auto;
        line-height:100%;
        margin-bottom:10px;
    }

    .share-game-text {
        margin:auto;
        font-size: 22px;
        margin:0;
        margin-bottom:10px;
        text-align:center;
    }

    .share-game-container {
        width: 90%;
        margin:auto;
        height:unset;
    }

    .flex {
        flex-direction: column;
    }

    .flex-2 {
        flex-direction: column-reverse;
    }

    #game-brands-menu {
        width:100%;
        font-size:17px;
    }

    .share-game-header, .game-brands-header {
        font-size:46px;
        width:unset;
    }


/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
    .footer-container {
        display:block;
        text-align:center;
    }

    .footer-logo {
        float:right;
    }

    #footer-flarie-logo {
        display:block;
        position: relative;
    }

    .footer-section {
        width:50%;
    }

    .footer-section, .footer-bottom > div {
        width:50%;
    }


    .footer-section > h3 {
        margin-top:20px;
    }

    .footer-icons {
        float:right;
        width:50%;
        text-align:center;
        margin-top:-30%;
    }

    .footer-bottom {
        width:90%;
        padding-top:40px;
    }

    #flarie-trademark > p {
        display:flex;
        justify-content: center;
        height:100%;
        align-items:center;
    }

    #footer-bottom-links {
        position: absolute;
        top:93%;
        left:0;
        right:0;
        width:unset;
        text-align: center;;
    }

    #footer-first-div {
        width:0% !important;
    }

    .footer-bottom > div {
        width:33%;
        text-align: center;
    }

/*-----------------------------------------------------------------------------------*/
/* CREATE GAME | STUDIO
/*-----------------------------------------------------------------------------------*/
    #create-game-background {
        position: absolute;
        top: 1%;
        right: 0%;
        width: 370px;
    }

    #create-game {
        height:720px;
    }

    .create-game-text-big {
        font-size:50px !important;
        margin:auto;
    }

    .create-game-container {
        top:45%;
        width:100%;
    }
    
    .create-game-text-small {
        text-align:center;
        margin:auto;
    }

    .studio-btn {
        margin:auto;
    }


/*-----------------------------------------------------------------------------------*/
/* Phone
/*-----------------------------------------------------------------------------------*/

    .phone-container {
        width:100%;
    }

    .phone {
        height: 399px;
        width:340px;
        margin:auto;
        position: relative;
        background-repeat:no-repeat;
        background-size:cover;
        margin:auto;
        margin-top:0;
        background-image: url("../images/phone3_new.png"); 
    }

    .video, .video-case {
        position: absolute;
        left:62px;
        top:15px;
        border-top-left-radius: 20px;
        border-top-right-radius:20px;
        height: 400px;
        width:215px;
        overflow: hidden;
    }

/*-----------------------------------------------------------------------------------*/
/* NAVBAR
/*-----------------------------------------------------------------------------------*/
    .navbar-buttons-container {
        display:none;
    }

    .navbar-icon {
        width:100%;
        justify-content: center;
        margin-left:0;
    }

    #menuToggle
    {
      display: block;
      
    }

/*-----------------------------------------------------------------------------------*/
/* STATISTICS -> COUNTING NUMBERS
/*-----------------------------------------------------------------------------------*/
    .statistics-container > div {
        width:20%;
    }

    .statistics-container > div > h3 {
        font-size:14px;
    }

    .statistics-container > div > h2, .statistics-container > div > h2 > p {
        font-size:20px;
    }

    .statistics-container {
        width:95%;
        top:35%;
    }

    .statistics-divider {
        height:100px;
    }

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD - LIGHTBLUE SECTION - BUSINESS
/*-----------------------------------------------------------------------------------*/

    #download {
        height: 260px;
    }

    .googlePlay, .appStore {
        top:10px;
    }

    .download-container {
        text-align:center;
        top:45% !important;
    }

    .download-container > h2 {
        width:unset;
        font-size:40px;
    }


/*-----------------------------------------------------------------------------------*/
/* SECTIONS
/*-----------------------------------------------------------------------------------*/
    .section-container, #game-section-container {
         width: 90%; 
    }

    /* SECTIONS TEXT */
    .section-text-right, .section-text-left, .business-text-right, .business-text-left, .section-text-mid, .search-text, .download-info-header, .text-left {
        width:100%; font-size:39px; /*justify-content: center;*/
    }

    .section-text-right-small, .section-text-left-small, .business-text-right-small, .business-text-left-small {
        width:100%; font-size:16px; /*justify-content: center;*/
    }

/*-----------------------------------------------------------------------------------*/
/* USER -> GAME SECTION
/*-----------------------------------------------------------------------------------*/
    #game-section-container {padding:0; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); grid-row-gap: 0px;}
    .game-logo > div {
        width:140px;
        height:140px;
        border-radius:30px;
    }
    .game-section {min-height:0px;}
    #search-input {
        width:200px;
        top:35%;
    }

    .section-text-search {
        top:50%;
    }

/*-----------------------------------------------------------------------------------*/
/* STARTPAGE 
/*-----------------------------------------------------------------------------------*/
    .homepage-main {
        width:100%;
        flex-direction: column-reverse;
    }

    .homepage-text {
        text-align:center;
        width:90%;
    }

    .homepage-video {
        width:100%;
        height:35%;
    }

    .startpage-business-btn {
        margin:auto;
        width:260px;
    }

    .homepage-text > h4 {
        font-size: 44.8px;
        line-height:110%;
    }

    .homepage-text > h3 {
        font-size: 51.2px;
    }

    .homepage-text > h5 {
        font-size: 18px;
    }

    .homepage-background-user {
        background-image: url(../images/backgrounds/startpage_phone.jpg);
    }

    .homepage-background-business {
        background-image: url(../images/backgrounds/startpage_phone_business.jpg);
    }

/*-----------------------------------------------------------------------------------*/
    
}

@media screen and (min-width: 500px) and (max-width: 799px) {
    .download-info-header { width:90%; font-size:50px;}
    .statistics-container { width:90%; }
    #share-game-menu { width:100% }
    .share-game-header { width:100%; font-size: 80px;}
    /* .section {height:350px;} */
    #contact-form, .news-container, .content, #about-us-office {width:80%;}
    #blue-background-divider > h1 {font-size:70px; text-align: center;}
    .image-roller-about-right {width:250px;}
    .image-roller-about-left {width:200px;}
    .image-roller-big {height:180px;}
    .about-section > h2 {font-size:50px;}
   .about-us-section > div > a > img {width:22vw; height:22vw;} 
    #team-img {border-radius:30px;}
    #news-main-asset {width:100%;}
    .animate-image-1, .animate-image-2 {
        display:none !important;
    }
    .black-cloud {bottom:0px !important; height:34px !important;}

    #news-article-header {width:90%; text-align: center;}
    #news-article-header > h1 {font-size:60px;}

    .brands-logos > img {width:42px;}
    .brands-logos {margin-bottom:0px;}
    #brands {height:430px;}
    #brands-header {padding-top:30px;}

/*-----------------------------------------------------------------------------------*/
/* SECTION BACKGROUNDS && SECTIONS POSTITIONS														
/*-----------------------------------------------------------------------------------*/


.green-cloud-2 {
    height:110px;
}

.user-green-bg {
    width: 65%;
    position: absolute;
    right: -16%;
    bottom: 0;
    top: 13%;
}

/* ***** USER -> YELLOW SECTION ***** */


.business-red-bg {
    width: 60%;
    position: absolute;
    right: -2.6%;
    top: 35%;
}

.business-green-bg {
    width: 65%;
    position: absolute;
    right: -14%;
    bottom: 0;
    top: 6%;
}

.business-yellow-bg, .user-yellow-bg {
    width: 58%;
    position: absolute;
    left: -1%;
    bottom: 0;
    top: 20%;
}

.background-right-brands {
    width:37%;
    position: absolute;
    right:-8%;
    top:6%;
    bottom:0;
}

/* #business-first-section {
    height:400px;
} */


/*-----------------------------------------------------------------------------------*/
/* CREATE GAME | STUDIO
/*-----------------------------------------------------------------------------------*/
    #create-game-background {
        position: absolute;
        top: 17%;
        right: -2%;
        width: 450px;
    }

    #create-game {
        height:420px;
    }

    .create-game-text-big {
        font-size:62px !important;
    }

    .create-game-container {
        top:5%;
    }

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD  | LIGHTBLUE SECTION
/*-----------------------------------------------------------------------------------*/

    #download {
        height:220px;
    }

    .download-container {
        top:40% !important;
    }

    .download-container > h2 {
        font-size:50px;
    }

    #section-red {
        top:45%;
    }

    .googlePlay  {
        height:30px;
        top:0px;
        
    }
    
    .appStore {
        height:30px;
        top:0px;
       
    }

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD - INFO | RIGHT GAME , NO STARTUP COST, WORKS GLOBALLY
/*-----------------------------------------------------------------------------------*/
    #partners {height:1018px;}
    .partner-icons {width:50px; height:50px;}
    .grid-section > div > h4 {font-size:17px;}
    #partners {height:670px;}
    #partner-1, #partner-2, #partner-3 {
        height:120px;
    }

    .image-circle {
        width:120px;
        height:120px;
    }

    .grid-section > div {
        width:120px;
    }

    #download-info {
        height:500px;
    }

    .grid-section > div > h3 {
        font-size:22px;
    }


/*-----------------------------------------------------------------------------------*/
/* SHARE GAME | BRANDED GAMES | CREATE OWN GAME
/*-----------------------------------------------------------------------------------*/

    #share-game, #game-brands {
        height:700px;
    }

    #share-game-menu {
        width:100%;
        margin:auto;
    }

    .share-game-header {
        width:90%;
        text-align:center;
        margin:auto;
        margin-top:20px;
        line-height:100%;
    }

    .share-game-text {
        margin:auto;
    }

    .share-game-container {
        width: 90%;
        margin:auto;
    }

    .flex {
        flex-direction: column;
    }

    .flex-2 {
        flex-direction: column-reverse;
    }

/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
    .footer-container {
        display:block;
        text-align:center;
    }

    .footer-logo {
        float:right;
    }

    #footer-flarie-logo {
        display:block;
    }

    .footer-section, .footer-bottom > div {
        width:50%;
    }

    .footer-section > h3 {
        margin-top:20px;
    }

    .footer-icons {
        float:right;
        width:50%;
        text-align:center;
        margin-top:-30%;
    }

    .footer-bottom {
        width:90%;
    }

    #flarie-trademark > p {
        display:flex;
        justify-content: center;
        height:100%;
        align-items:center;
    }

    #footer-bottom-links > a {
        margin-left:0;
        display: flex;
        justify-content: center;
    }

    .footer-bottom {
        width:90%;
        padding-top:40px;
    }

    #flarie-trademark > p {
        display:flex;
        justify-content: center;
        height:100%;
        align-items:center;
    }

    #footer-flarie-logo {
        position: relative;
    }

    #footer-bottom-links {
        position: absolute;
        top:93%;
        left:0;
        right:0;
        width:unset;
        text-align: center;;
    }

    #footer-first-div {
        width:0% !important;
    }

    .footer-bottom > div {
        width:33%;
        text-align: center;
    }


/*-----------------------------------------------------------------------------------*/
/* Phone
/*-----------------------------------------------------------------------------------*/

    .phone-container {
        width:100%;
    }

/*-----------------------------------------------------------------------------------*/
/* STATISTICS -> COUNTING NUMBERS
/*-----------------------------------------------------------------------------------*/
    .statistics-container > div {
        width:20%;
    }

    .statistics-container > div > h3 {
        font-size:16px;
    }

    .statistics-container > div > h2, .statistics-container > div > h2 > p {
        font-size:24px;
    }

    .statistics-container {
        width:95%;
    }

    .statistics-divider {
        height:160px;
    }

/*-----------------------------------------------------------------------------------*/
/* NAVBAR
/*-----------------------------------------------------------------------------------*/
    .navbar-buttons-container {
        display:none;
    }

    .navbar-icon {
        width:100%;
        justify-content: center;
        margin-left:0;
    }

    #menuToggle
    {
      display: block;
      
    }

/*-----------------------------------------------------------------------------------*/
/* SECTIONS
/*-----------------------------------------------------------------------------------*/
    .section-container, #game-section-container { width: 80%; }

    /* SECTIONS TEXT */
    .section-text-right, .section-text-left, .business-text-right, .business-text-left, .section-text-mid, .search-text, .download-info-header, .text-left, #brands-header {
        width:100%; font-size:50px;
    }

    .section-text-right-small, .section-text-left-small, .business-text-right-small, .business-text-left-small {
        width:100%; font-size:20px;
    }

    .section-multiple {top:40%;}

    .business-green-text-big{
        width: 45%;
    }

    .business-green-text-small {
        width:43%;
    }

    .business-text-right {
        width:70%;
    }

    .business-text-left  {
        width:56%;
    }

    .business-text-right-small {
        width:40%;
    }
    
    .business-text-left-small {
        width:40%;
    }

    #green-section {
        top:42%;
    }

/*-----------------------------------------------------------------------------------*/
/* USER -> GAME SECTION
/*-----------------------------------------------------------------------------------*/
    #game-section-container {
        padding:0;
        grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
        grid-row-gap: 0px;
    }
    .game-logo > div {
        width:140px;
        height:140px;
        border-radius:30px;
    }
    .game-section {
        min-height:0px;
    }
    .search-text {
        font-size:50px;
    }
    #search-input {
        width:200px;
    }

/*-----------------------------------------------------------------------------------*/
/* STARTPAGE 
/*-----------------------------------------------------------------------------------*/
    .homepage-main {
        width:90%;
        flex-direction: column-reverse;
    }

    .homepage-text {
        text-align:center;
        width:70%;
    }

    .homepage-video {
        width:80%;
        height:40%;
        top:5%;
    }

    .startpage-business-btn {
        margin:auto
    }

  /*  .homepage-text > h4 {
        font-size: 56px;
    }
    
    .homepage-text > h3 {
        font-size: 64px;
    }
    
    .homepage-text > h5 {
        font-size: 20px;
    }*/

    .startpage-video-right {
        width:31%;
        right:4.5%;
    }
    
    .startpage-video-left {
        width:31%;
        left:4.5%;
    }
    
    .startpage-video-mid {
        width:35%;
    }

    .homepage-background-user {
        background-image: url(../images/backgrounds/startpage_tablet.jpg);
    }

    .homepage-background-business {
        background-image: url(../images/backgrounds/startpage_tablet_business.jpg);
    }

/*-----------------------------------------------------------------------------------*/

}


@media screen and (min-width: 800px) and (max-width: 1099px) {
    .section-container, #game-section-container { width: 80%; }
    .navbar-buttons { width:30%; margin-right:15%;}
    .navbar-icon { width:20%}
    #contact-form {width:70%;}
    #blue-background-divider > h1 {font-size:80px; text-align: center;}
    .image-balloon-jobs-right, .image-balloon-jobs-left {
        display: none !important;
    }

    .image-roller-about-right {width:290px;}
    .image-roller-about-left {width:240px;}
    .about-us-section > div > a > img {width:20vw; height:20vw} 
    #team-img {border-radius:40px;}
    #news-article-header > h1 {font-size:71px;}
    #news-article-header, #contact-form, .news-container, #news-article-header, .content, #about-us-office, .download-info-header, .section-text-right, .section-text-left {width:73%;}
    .footer-section, .footer-bottom > div {
        width:50%;
    }
    .footer-bottom {
        width:85%;
    }

    .statistics-container {width:85%;}
    .statistics-container > div > h2, .statistics-container > div > h2 > p {font-size:40px;}
    .statistics-container > div > h3 {font-size:20px;}
    .news-container {
        width:90%;
    }

/*-----------------------------------------------------------------------------------*/
/* SECTION BACKGROUNDS && SECTIONS POSTITIONS														
/*-----------------------------------------------------------------------------------*/


/* ***** USER -> GREEN SECTION ***** */

.green-cloud-2 {
    height:110px;
}

.user-green-bg {
    width: 65%;
    position: absolute;
    right: -16%;
    bottom: 0;
    top: 17%;
}

/* ***** USER -> YELLOW SECTION ***** */


.business-red-bg {
    width: 57%;
    position: absolute;
    right: -3.6%;
    top: 41%;
}

.business-green-bg {
    width: 55%;
    position: absolute;
    right: -5%;
    bottom: 0;
    top: 13%;
}

.business-yellow-bg {
    width: 55%;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 28%;
}

.user-yellow-bg {
    width: 53%;
    position: absolute;
    left: -5%;
    bottom: 0;
    top: 30%;
}

.background-right-brands {
    width:37%;
    position: absolute;
    right:-8%;
    top:6%;
    bottom:0;
}



/*-----------------------------------------------------------------------------------*/
/* CREATE GAME | STUDIO 
/*-----------------------------------------------------------------------------------*/
    #create-game-background {
        position: absolute;
        top: 6%;
        right: -3%;
        width: 540px;
    }

    .create-game-container {
        top:10%;
    }

    #create-game {
        height:530px;
    }

    .create-game-text-big {
        width:105%;
    }



/*-----------------------------------------------------------------------------------*/
/* STARTPAGE 
/*-----------------------------------------------------------------------------------*/
.homepage-main {
    width:90%;
    flex-direction: column-reverse;
}

.homepage-text {
    text-align:center;
    width:70%;
}

.homepage-video {
    width:80%;
    height:45%;
}

.startpage-business-btn {
    margin:auto
}


.homepage-text > h4 {
    font-size: 90px;
}

.homepage-text > h3 {
    font-size: 110px;
}

.homepage-text > h5 {
    font-size: 35px;
}

.homepage-background-user {
    background-image: url(../images/backgrounds/startpage_tablet.jpg);
}

.homepage-background-business {
    background-image: url(../images/backgrounds/startpage_tablet_business.jpg);
}

.startpage-video-right {
    width:31%;
    right:4.5%;
}

.startpage-video-left {
    width:31%;
    left:4.5%;
}

.startpage-video-mid {
    width:35%;
}


/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/* DOWNLOAD
/*-----------------------------------------------------------------------------------*/
 
    #download {
        height:280px;
    }

    .download-container {
        top:40% !important;
    }

    .googlePlay, .appStore {
        top:-4px;
        height:27px;
        width: 10px;
    }

   
/*-----------------------------------------------------------------------------------*/
/* BRANDS | FÖRETAGSLOGGOR
/*-----------------------------------------------------------------------------------*/
    /* #brands {
        height:580px;
    } */

    #brands-header {
        padding: 40px 0 40px 0;
    }

    .brands-logos > img {
        width:64px;
    }


/*-----------------------------------------------------------------------------------*/
/* NAVBAR
/*-----------------------------------------------------------------------------------*/
    .navbar-buttons-container {
        display:none;
    }

    .navbar-icon {
        width:100%;
        justify-content: center;
        margin-left:0;
    }

    #menuToggle {
        display: block;
    }

/*-----------------------------------------------------------------------------------*/
/* SHARE GAME | BRANDED GAMES | CREATE OWN GAME
/*-----------------------------------------------------------------------------------*/

    #game-brands-menu {
        width:85%;
    }

    .share-game-header, .game-brands-header {
        font-size:80px;
    }
    
    .share-game-header {
        width:117%;
    }

    #share-game-menu {
        width:100%;
    }

    .share-game-text {
        margin:unset;
    }


/*-----------------------------------------------------------------------------------*/
/* SECTIONS
/*-----------------------------------------------------------------------------------*/

    /* SECTIONS TEXT */
    .section-text-right, .section-text-left, .business-text-right, .business-text-left, .section-text-mid, .search-text, .download-container > h2, .download-info-header, .text-left, #brands-header {
        font-size:60px;
    } 

    .section-text-right-small, .section-text-left-small, .business-text-right-small, .business-text-left-small {
    font-size:30px;
    }

    .business-green-text-big{
        width: 40%;
    }

    .business-text-right {
        width:70%;
    }

    .business-text-left  {
        width:65%;
    }

    .business-text-right-small {
        width:40%;
    }
    
    .business-text-left-small {
        width:40%;
    }

    .business-green-text-small {
        width:40%;
    }

    #green-section {
        top:45%;
    }

    


/*-----------------------------------------------------------------------------------*/

}

@media screen and (min-width: 1100px) and (max-width: 1399px) {
    .section-container, #game-section-container { width: 80%; }
    .download-info-header { width:80%; }
    .statistics-container { width:80%; }
    #share-game-menu { width:100% }
    .share-game-header { width:100%;}
    .navbar-buttons { width:30%; margin-right:15%;}
    .navbar-icon { width:20%}
    #contact-form {width:60%;}
    #blue-background-divider > h1 {font-size:80px; text-align: center;}
    .content, #about-us-office {width:80%;}
    .image-roller-about-right {width:300px;}
    .image-roller-about-left {width:250px;}
    #news-article-header > h1 {font-size:72px;}
    .news-container {width:80%;}
    .navbar-buttons-business {
        width:45%;
        margin-right:10%;
    }
    .about-us-section > div > a > img {width:18vw; height:18vw} 

    .brands-logos > img {
        width:85px;
    }
    

    .homepage-text div a img{
        width: 117px;
    }


/*-----------------------------------------------------------------------------------*/
/* SECTIONS
/*-----------------------------------------------------------------------------------*/

    /* SECTIONS TEXT */
    .section-text-right, .section-text-left, .business-text-right, .business-text-left, .section-text-mid, .search-text, .download-container > h2, .download-info-header, #brands-header, .share-game-header {
       font-size:50px;
    }

    .section-text-right-small, .section-text-left-small, .business-text-right-small, .business-text-left-small {
       font-size:30px;
    }

/*-----------------------------------------------------------------------------------*/
/* STARTPAGE 
/*-----------------------------------------------------------------------------------*/
    .homepage-main {
        width:84%;
        zoom:80%;
    }

    .homepage-video {
        width:50%;
    }

    .homepage-business-text > a {
        margin:auto
    }

    .green-cloud-2 {
        height:169px !important;
    }

    .googlePlay, .appStore {
        top:5px;
    }

}

@media screen and (min-width: 1400px) and (max-width: 1660px) {
    .section-container, #game-section-container { width: 75%; }
    .section-text-right { width:65%; }
    .download-info-header { width:66%; }
    .statistics-container { width:70%; }
    #share-game-menu { width:100% }
    .share-game-header { width:100%; font-size: 80px;}
    .navbar-buttons { width:23%; margin-left:15%;}
    .navbar-icon { width:20%}
    #contact-form {width:50%;}
    #blue-background-divider > h1 {font-size:90px; text-align: center;}
    #news-article-header > h1 {font-size:90px;}
    .navbar-buttons-business {
        width:45%;
        margin-right:10%;
    }
    .news-container {
        width:85%;
    }
    .homepage-text div a img{
        width: 107px;
    }

    .homepage-main {
        width:84%;
        zoom:80%;
    }

    .homepage-video {
        width:50%;
    }

    .homepage-business-text > a {
        margin:auto
    }

    .green-cloud-2 {
        height:180px !important;
    }

    .googlePlay, .appStore {
        top:5px;
    }
}

@media screen and (min-width: 1661px) and (max-width: 1919px) {
    .section-container { width: 69%; }
    .news-container {
        width:80%;
    }
}

@media screen and (min-width: 1921px) {

    #game-brands {
        background-size:cover;
        background-repeat: no-repeat;
        
    }

    #case-cloud {
        background-size:cover;
        background-repeat: no-repeat;
    }

    
}


@media screen and (min-width: 2550px) {
    .news-card-container {
        grid-template-columns: repeat(auto-fill,minmax(420px,1fr));
    }

    .phone {
        margin-top:37px;
    }

    #phone-brands {
        margin-top:47px !important;
    }

    .black-cloud {
        bottom: -2px !important; 
    }

}