@font-face{
    font-family: Hiragana;
    src: url('fonts/Hiragana.ttf') format('truetype'), url("fonts/Hiragana.eot");
}

@font-face{
    font-family: Sonsie;
    src: url('fonts/SonsieOne-Regular.ttf') format('truetype'), url("fonts/SonsieOne-Regular.eot");
}

@font-face{
    font-family: OpenSansBold;
    src: url('fonts/OpenSans-Bold.ttf') format('truetype'), url("fonts/OpenSans-Bold.eot");
}

@font-face{
    font-family: OpenSansExtraBold;
    src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype'), url("fonts/OpenSans-ExtraBold.eot");
}

@font-face{
    font-family: OpenSansSemiBold;
    src: url('fonts/OpenSans-Semibold.ttf') format('truetype'), url("fonts/OpenSans-Semibold.eot");
}    

@font-face{
    font-family: OpenSansRegular;
    src: url('fonts/OpenSans-Regular.ttf') format('truetype'), url("fonts/OpenSans-Regular.eot");
}

@font-face{
    font-family: OpenSansLight;
    src: url('fonts/OpenSans-Light.ttf') format('truetype'), url("fonts/OpenSans-Light.eot");
}
 
@font-face{
    font-family: OpenSansItalic;
    src: url('fonts/OpenSans-Italic.ttf') format('truetype'), url("fonts/OpenSans-Italic.eot");
}

@font-face{
    font-family: OpenSansBoldItalic;
    src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype'), url("fonts/OpenSans-BoldItalic.eot");
}   

html {
    height: 100%;
}

body {
  min-height: 100%;
}

html, body {
    color: #FFFFFF;
    font-size: 1.1vw;
    font-family: OpenSansRegular;

    background: rgb(0,85,119);
    background: linear-gradient(rgba(0,85,119,1) 0%, rgba(49,149,196,1) 20vh, rgba(33,160,220,1) 50%, rgba(49,149,196,1) calc(100% - 50vh), rgba(0,85,119,1) 100%);
    //background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background-size: 100% 100%, cover;
    min-height: 100vh;

}






.template {
    display: grid;
    width: 100%;
        margin: 0px;
    padding: 0px;
    grid-template-columns: 2fr minmax(0,8fr) 2fr;
    top: 0;
    left: 0;
    gap: 0px;
}

table {
    width: 100%;
}

.container {
    display: grid;
    width: 100%;
        margin: 0px;
    padding: 0px;
    grid-template-columns: minmax(0,7.2fr) minmax(0,2.8fr);
    //grid-template-rows: 6vh;
    top: 0;
    left: 0;
    gap: 15px;

}

.fullwidth {
     grid-column: 1 / 4;
}

.imgback1 {
    height: 25vw;
}

#bubble1 { animation: changebubble1 15s ease-in-out infinite;    }
#bubble2 { animation: changebubble2 15s ease-in-out infinite;    }
#bubble3 { animation: changebubble3 15s ease-in-out infinite;  }
.egyptspan { font-family: Hiragana !important; }

@keyframes changebubble1{
    0%,100%  {opacity: 1;}
    30%  {opacity: 1;}
    40%  {opacity: 0;}
}
@keyframes changebubble2{
    0%,100%  {opacity: 0;}
    30%  {opacity: 0;}
    40%  {opacity: 1;}
    60%  {opacity: 1;}
    70%  {opacity: 0;}
}
@keyframes changebubble3{
    0%,100%  {opacity: 0;}
    60%  {opacity: 0;}
    70%  {opacity: 1;}
    90%  {opacity: 1;}
}

.imgback1>div{
    position: absolute;
    display: block;
    height: 30vw;
    //z-index: -10;
    background-image: url("graphic/RacekNY.png");
    background-repeat: no-repeat;
    width: 98%;
    background-size: 100% 100%;
    background-position: center bottom;
    margin-top: -5vw;
    left: 0;
    z-index: 0;
    animation: changeBg 15s ease-in-out infinite;
}

@keyframes changeBg{
    0%,100%  {background-image: url("graphic/RacekNY.png"); opacity: 1;}
    30%  {background-image: url("graphic/RacekNY.png"); opacity: 1;}
    40% {background-image: url("graphic/RacekFR.png"); opacity: 1;} 
    60% {background-image: url("graphic/RacekFR.png"); opacity: 1;}
    70% {background-image: url("graphic/RacekEG.png"); opacity: 1;}  
    90% {background-image: url("graphic/RacekEG.png"); opacity: 1;}
    /* 
   0%,100%  {background-image: url("graphic/RacekNY.png"); transform: skew(0deg, 0deg); background-position: 0vw 0vw; opacity: 1;}
   30%  {background-image: url("graphic/RacekNY.png"); transform: skew(0deg, 0deg);  background-position: 0vw 0vw; opacity: 1;}
   35%  {background-image: url("graphic/RacekNY.png"); transform: skew(0deg, 0deg); background-position: 100vw 0vw; opacity: 0;}
   36% {background-image: url("graphic/Pariz_1.2.png"); transform: skew(0deg, 0deg); background-position: -100vw 0vw; opacity: 0;}
   40% {background-image: url("graphic/Pariz_1.2.png"); transform: skew(0deg, 0deg); background-position: 0vw 0vw; opacity: 1;}
   60% {background-image: url("graphic/Pariz_1.2.png"); transform: skew(0deg, 0deg); background-position: 0vw 0vw; opacity: 1;}
   65% {background-image: url("graphic/Pariz_1.2.png"); transform: skew(0deg, 0deg); background-position: 100vw 0vw; opacity: 0;}
   66% {background-image: url("graphic/Egyp_1.2.png"); transform: skew(0deg, 0deg); background-position: -100vw 0vw; opacity: 0;}
   71% {background-image: url("graphic/Egyp_1.2.png"); transform: skew(0deg, 0deg); background-position: 0vw 0vw; opacity: 1;}
   90% {background-image: url("graphic/Egyp_1.2.png"); transform: skew(0deg, 0deg); background-position: 0vw 0vw; opacity: 1;}
   95% {background-image: url("graphic/Egyp_1.2.png"); transform: skew(0deg, 0deg);  background-position: 100vw 0vw; opacity: 0;}
   96%  {background-image: url("graphic/RacekNY.png"); transform: skew(0deg, 0deg); background-position: -100vw 0vw; opacity: 0;}
   */
}

.imageback2
{
    position: absolute;
    right: 2vw;
    width: 40vw;
    margin-top: 0px;
    z-index: 10;
    background-image: url("graphic/RacekDomaci.png");
    background-repeat: no-repeat;
    display: block;
    height: 40vw;
    background-size: auto 100%;
    background-position: left top;
    overflow: hidden;
}

.twocol {
     grid-column: 1 / 3;
}

h1  {
    font-family: Sonsie;
    font-size: 4vw;
    color: white;
    margin: 2vw 0px 25px 0px;
    font-weight: 200;
}

h2 {
    color: #EDDC21;
    font-family: OpenSansExtraBold;
    font-size: 2.5vw;
    margin-top: 0px; 
    }  
    
h3 {
    font-family: OpenSansBold;
    font-size: 110%;
    }
    
a {
    color: #204060;
}

a:hover {
    color: #000000;
}
    
.gridlogo {
    justify-self: end;
}    
    
.logo {
    margin-right: 4.0vw;
    width: 8vw;
}
    
.holder2 {
    display: block;
    height: 30px;
    }  
.topmenucontainer {
    height: 5vw;
}

.topmenuback {
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.33489145658263302) 0%, rgba(255,255,255,0.8802696078431373) 100%);
    color: black;
}

.topmenuback a {
    color: black !important;
}

.topmenuback li:not(:last-child) {
    border-right: 2px solid black !important;
}
    
.topmenu {
    z-index: 15;
}

.menufixed {
    position: fixed;
}

.bubble {
    position: absolute;
    z-index: 10;
    width: 15vw;
    height: 15vw;
    margin-top: -6vw;
    margin-left: -2vw;
    background-image: url("graphic/bubble.png");
    background-size: 100% 100%;
    transform: rotate(-10deg);
    }
    
    
.bubble span {
    display: block;
    width: 100%;
    text-align: center;    
}

.bubble1 {
    margin-top: 3.0vw;
    font-family: OpenSansExtraBold;
    font-size: 1.3vw;
    width: 50% !important;
    margin-left: 25%;
    color: #000000;
}

.bubble2 {
    font-family: OpenSansExtraBold;
    font-size: 1.4vw;
    width: 80% !important;
    margin-left: 10%;
    color: #FF0000;
}

.bubble3 {
    font-family: OpenSansExtraBold;
    font-size: 0.8vw;
    width: 80% !important;
    margin-left: 10%;
    color: #000000;
}

.bubble4 {
    font-family: OpenSansExtraBold;
    font-size: 1.6vw;
    width: 60% !important;
    margin-left: 20%;
    color: #FF0000;
}

.topmenu ul {
    display: flex;
    vertical-align: middle;
    padding-right: 2vw;
    list-style-type: none;
    padding-left: 0px;
   }
   
.leftbor {
        //border-left: 2px dotted white;
        padding-left: 0vw;
        text-align: right;
}

.leftbor ul {
        justify-content: flex-end;
        padding-right: 0px;
}

   
.topmenu li {
    padding: 0vw 0.8vw;
}

.topmenu li:not(:last-child) {
    border-right: 2px solid white;
}
   
.topmenu a, .bottommenu a {
    color: white;
    text-transform: uppercase;
    font-size: 1vw;
    font-family: OpenSansRegular;
    text-decoration: none;
    display: inline-block;
    font-weight: 900;
    }
    
.topmenu a:hover, .bottommenu a:hover {
    text-decoration: underline;
    }

.outtable {
    color: #004454;
    border: 0.2vw solid white;
    border-radius: 0.4vw;
    font-weight: 900;
    background-color: white;
    margin-bottom: 2vw;
}

.outtable2 {
    color: #004454;
    border: 0.2vw solid #DCED65;
    border-radius: 0.4vw;
    background-color: white;
    margin-bottom: 2vw;
}

.outtable3 {
    display: inline-block;
}

.outtable2 .info {
    color: #656565;
    font-weight: bold;
    font-family: OpenSansExtraBold;
    margin-top: 1vw;
    }
    
 .outtable2 .outtable-in {
    background-image: url("graphic/box_backyellow.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 5vw 5vw;
    padding-bottom: 30px;
    
}    
    
.outtable2 span {
    display: block;
    color: black;
    font-family: OpenSansExtraBold;
    //font-size: 110%;
    }

.outtable-in h2 {
        font-family: OpenSansExtraBold;
        font-size: 1.6vw;
        margin: 15px 0px;
        color: #004455;
    }
    

.outtable-in {
    color: #004454;
    border: 1px solid #335566;
    border-radius: 8px;
    text-align: center;
}

.outtable-in>p {
    text-align: left;
    margin: 0;
    padding: 0.5vw 1vw;
    font-size: 1vw;
}

.outtable select {
        font-size: 1.0vw;
        color: #004455;
        font-family: OpenSansBold;
        width: 80%;
        height: 40px;
        padding-left: 10px;
        background-color: #DCEDFE;
        border-width: 0px;
        }
        
.outtable .form {
    text-align: left;
    margin-left: 1vw;
    margin-top: 1vw;
    }
    
.outtable .form h3 {
    font-family: OpenSansBold;
    color: black;
    font-size: 1.0vw;
    }
    
.outtable .form input[type=text] {
    width: 110px;
    font-size: 100%;
    height: 40px;
    border: 1px solid #999999;
    border-radius: 4px;
    padding-left: 7px;
    margin-right: 20px;
}

.outtable .form span {
    display: block;
    margin-bottom: 0.5vw;
    font-size: 1.0vw;
}

.outtable-in input[type=submit] {
    width: 80%;
    font-family: OpenSansRegular;
    font-size: 1.1vw;
    color: white;
    border-radius: 1vw 1vw 0px 1vw;
    height: 2vw;
    background-color: #004455;
    border-width: 0px;
    -webkit-box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.75);
}

.bublina1 {
    width: 40vw;
    height: 20vw;
    margin: 0 auto;
    background-image: url("graphic/RacekBubliny.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    color: black;
    display: table;       
}

.bublina1 .cell {
        display: table-cell;
        text-align: center;
        vertical-align: top;
        font-family: OpenSansSemiBold;
    }
    
.bublinafirst {
        width: 55.5%;
    }
    
.bublina1 p {
    //white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 5vw;
    margin: 0px;
    font-size: 0.9vw;
    }
.hrefright {
    text-align: right;
    font-size: 0.8vw;
}    
.bublina1 p::first-letter {
    font-size: 3vw;
    line-height: 40px;
    margin-left: 10px;
    float: left;
    margin-right: 5px;
    margin-top: 7px;
    font-family: Sonsie;
    color: #A0A0A0;
}

.bublina1 p {
    text-align: left; 
    height: 3.6vw;   
}

.margined1 {
    margin-top: 3.6vw; 
    margin-left: 3.5vw;
    width: 15vw;
    }  
    
.margined2 {
     margin-top: 4.5vw;
     margin-left: 2.2vw;
     width: 13.5vw; 
    } 
    
.margined2 p {
    height: 2.8vw;
    font-size: 0.7vw;
}
    
.bublina1 .name {
    color: #A0A0A0;
    font-family: OpenSansBoldItalic;
    font-size: 1vw;
}

.bublina1 .pos {
    margin-top: 0.1vw;
    font-size: 0.8vw;
    font-family: OpenSansSemiBold;
}

.bublina2 {
    width: 30vw;
    height: 16vw;
    margin: -50px auto;
    background-image: url("graphic/RacekPC.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
}

.mcenter {
    justify-self: end;
}

.mcenter ul {
     justify-content: center;
     padding-right: 0px;
     padding-left: 0px;
}

.orderoutdiv {
    background-color: #DCED65;
    border-radius: 1.2vw;
    padding: 5px 5px;
    display: block;
}

.orderdiv {
    border: 1px solid #000000;
    border-radius: 1vw;
    background-color: #FFFFFF;
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 0.2vw;
    overflow: hidden;
    color: #000000;
}

.orderdiv2 {
    display: block;
    padding: 1vw 2vw;
}

//.orderdiv > div:nth-child(2n + 2) div { background: #dddddd;}
//.orderdiv > div:nth-child(2n + 3) div { background: #cccccc;}

.orderdiv > div {
    //background-color: #eaecff;
    padding: 0.5vw 1vw;

}

.orderdiv > div > div {
    border-width: 0px;
    grid-template-columns: 50% 50%;
    border-radius: 0px;    
}

.orderright > div {
    border-left: 1px dotted #000000 !important;
    padding: 0.5vw 1vw;
    padding-bottom: 2vw;
    background-image: url("graphic/racek_globus_maly.png");
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: 5vw 5vw;
    padding-top: 5vw;
}

.orderright > div > h4 {
    color: #FF0000;
    font-size: 0.9vw;
}

.orderright > div > p {
    font-family: OpenSansSemiBold;
    font-size: 0.8vw;
}

.orderright > div > span {
    color: #FF0000;
    font-family: OpenSansExtraBold;
    font-size: 0.9vw;
}

    .threecol {
        grid-column: 1 / 4;
    }
    

    
    .rowcol {
        grid-column: 3 / 3;
         grid-row: 1 / last-line;
        grid-row-start: div 40;
        border: 1px solid blue;
    }
    
.headcol  {   
    text-align: center;
    font-family: OpenSansExtraBold;
    font-size: 1.6vw;
    color: #004455;
}    

.headincol  {   
    text-align: left;
    font-family: OpenSansExtraBold;
    font-size: 1.2vw;
    color: #004455;
}    
    
    .plikhead {
        background: rgb(99,170,255);
        height: auto;
    }


.b-red {
    background-color: #ED0000 !important;
    margin-bottom: 10px;
    }

.selfcenter {
    text-align: center;
}
    
.logob {
    display: block;
    width: 100%;
}

.logob img {
    width: 7vw;
}

.firma {
    font-size: 1.2vw;
    font-family: OpenSansBold;
    display: block;
    width: 100%;
}

.slogan {
    font-size: 0.9vw;
    font-family: OpenSansLight;
    display: block;
    width: 100%;
}

.copy {
    font-size: 0.7vw;
    font-family: OpenSansLight;
    display: block;
    width: 100%;
}

.center {
    text-align: center;
}

.flags {
    
}

.flags ul {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    //list-style-image: url('graphic/flags/eng.png');
}

.flags li {
    list-style: none;    
    background-size: auto 100%;
    background-repeat: no-repeat;
    line-height: 3vw;
}


.flags a {
    margin-left: 5vw;
}

@media only screen and (max-width: 1068px) {

html, body {
    font-size: 4vw;
}

h1 {
    font-size: 8vw;
}
h2 {
    font-size: 6vw;
}
h3 {
    font-size: 5vw;
}

.topmenu a {
    font-size: 2.5vw;
}

.template {
    display: grid;
    width: 100%;
        margin: 0px;
    padding: 0px;
    grid-template-columns: minmax(0,0fr) minmax(0,8fr) minmax(0,0fr);
    top: 0;
    left: 0;
    gap: 0px;
}



.container {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0,10fr);
    //grid-template-rows: 6vh;
}

.twocol {
     grid-column: 1 / 2;
}

    .threecol {
         grid-column: 1 / 4;
    }

    .orderdiv {
        grid-template-columns: 100%;
    }
    .headcol {
        font-size: 5vw;
    }
    
    .headincol {
        font-size: 4vw;
    }

.imageback2 {
    display: none;
}



}