@charset "UTF-8";
/* Group Class CSS */

* {
    box-sizing: border-box; /**For flexbox** !IMPORTANT*/
}
.background {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    width:100vw;
    font-size:1.5vh;
}
#page-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 3% auto 4% auto;
    width: 85vw;
}
@media only screen and (orientation:portrait)
    {#page-wrapper{width:inherit;}}

@media only screen and (min-width:2000px) and (orientation:landscape)
    {#page-wrapper{width: 70vw;}}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#page-wrapper{width: 100vw; margin:0 0}}


.middle-box{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-bottom: 2%;
    width:100%;
}
@media only screen and (min-width: 1025px) and (max-width: 1400px) and (orientation:landscape)
    {.middle-box{display:flex; justify-content:space-around; margin:0 2% 3% 2%;}}
@media only screen and (max-width: 1024px) and (orientation:landscape)
    {.middle-box{width:100%; display:flex; flex-flow:column nowrap; justify-content:space-evenly; margin:0 2% 3% 2%;}}

@media only screen and (orientation:portrait)
    {.middle-box{display:flex; flex-flow:column nowrap; justify-content: flex-start; margin:0 0;}}


/**********************************************************************************************/
#rightcolumn-parent {
    flex: 0 0 35%;/*child of page-box*/
    display: flex;
    flex-flow: column nowrap;
    justify-content:space-between;
    width:35%;
}
@media only screen and (orientation:portrait)
    {#rightcolumn-parent{flex:1 1 auto; display:flex; flex-flow:row wrap; justify-content:flex-end; width:100vw; margin:0 0;}}

@media only screen and (min-width:1025px) and (max-width:1400px) and (orientation:landscape)
    {#rightcolumn-parent{flex:1 1 auto; width:35%;}}
@media only screen and (max-width:1024px) and (orientation:landscape)
    {#rightcolumn-parent{flex:1 1 auto; flex-flow:row wrap; justify-content:flex-end; width:100vw; margin:0 0;}}


#rightcolumn {
	display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: 3%;
}
@media only screen and (orientation:portrait)
    {#rightcolumn{display:flex;flex-flow:row wrap;width: 100vw;margin-left:0;}}

@media only screen and (max-width:1024px) and (orientation:landscape)
    {#rightcolumn{display:flex; flex-flow:row wrap; align-items: flex-start;width:100vw; margin-left:0;}}

/**use for portrait mode only}*/
@media only screen and (min-width:768px) and (orientation:portrait)
    {.button-wrapper{display:flex; flex-flow:row nowrap; justify-content:space-between; margin:3% 0% 0 4%;}}
@media only screen and (max-width:767px) and (orientation:portrait)
    {.button-wrapper{display:flex; flex-flow:row nowrap; justify-content:space-between; margin:3% 2% 0 2%; width:100vw;}}

@media only screen and (max-width:1024px) and (orientation:landscape)
    {.button-wrapper{display:flex; flex-flow:row nowrap; justify-content:flex-start; margin:5% 3% 0 3%; width:100vw;}}


.popup-box-wrapper {
    margin-bottom: 18%;
    font-size: 1.2vw;
}
@media only screen and (min-width:768px) and (orientation:portrait)
    {.popup-box-wrapper{font-size:1.5vw;margin-top:12%;margin-right:5%;}}
@media only screen and (max-width:767px) and (orientation:portrait)
    {.popup-box-wrapper{font-size:1.5vw; width:32%; margin-bottom:5%;}}

@media only screen and (min-width:1025px) and (max-width:1400px) and (orientation:landscape)
    {.popup-box-wrapper{font-size:1.6vw;margin-bottom:20%;}}
@media only screen and (max-width:1024px) and (orientation:landscape)
    {.popup-box-wrapper{font-size:1.8vw;margin:2% 5% 0 0;}}


#buttons {
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
}
@media only screen and (min-width:768px) and (orientation:portrait)
    {#buttons{font-size: 1.3vw;flex-flow: column nowrap; justify-content:flex-start; align-items:center;}}
@media only screen and (max-width:767px) and (orientation:portrait)
    {#buttons{font-size: 1.5vw;flex-flow: row nowrap; justify-content: space-around;width: 100%;margin-bottom:5%;padding-left:3%;padding-right:0;}}

@media only screen and (max-width:1400px) and (orientation:landscape)
    {#buttons{font-size:1.2vw;}}
@media only screen and (min-width:768px) and (orientation:landscape)
    {#buttons{align-items:center;}}
@media only screen and (max-width:767px) and (orientation:landscape)
    {#buttons{width: 65%;}}