body {
    margin: 0;
    font-family: Arial
}

.roundedDivBox40{
    border: 1px solid #BBBBBB;
   width:40%;border-radius:10px; 
   margin-top:5px;
   margin-bottom:5px;padding-top: 5px;
   padding-bottom: 100px;
}

.roundedDivBox{
    border: 1px solid #BBBBBB;
   border-radius:10px; 
   margin-top:5px;
   margin-bottom:5px;padding-top: 5px;
   padding-bottom: 100px"
}
.roundedDivBox:hover{
    background-color: whitesmoke;
    border: 1px solid #bbb;
    border-style: solid;     
}

.bluedarkDivBox{
border: 1px solid #BBBBBB;
   border-radius:10px; 
   margin-top:5px;
   margin-bottom:5px;padding-top: 5px;
   padding-bottom: 100px"
}

p {                font-size: 2vh;            }
h1 {                font-size: 4.25vh;            }
h2 {                font-size: 3vh;            }
h3 {                font-size: 4vh;            }
h4 {                font-size: 8vh;            }

div.clear {
    clear: both;
    }

/* WebKit and Opera browsers */ @-webkit-keyframes logospinner { 
    from 
    { 
        -webkit-transform: rotateY(-360deg); 
    } 
    to { 
        -webkit-transform: rotateY(0deg); 
    } 
} /* all other browsers */ 
@keyframes logospinner { 
    from { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg);     
    } 
}
  /* WebKit and Opera browsers */ @-webkit-keyframes logospinnerAlt { 
    from 
    { 
        -webkit-transform: rotateY(0deg); 
    } 
    to { 
        -webkit-transform: rotateY(-360deg); 
    } 
} /* all other browsers */ 
@keyframes logospinnerAlt { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg);     
    } 
}
.BBQsmallTile {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:18%;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.25%;
    margin-top: 0.25%;
    margin-bottom: 0%;
    border-radius: 10px;
    background-color:#eee;
} 
.BBQTile {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:100%;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    border-radius: 10px;
    background-color:#ccc;
} 
.faded{ 
    opacity: 0.8;  
    border-radius: 10px;
    height:50%; 
}
.flatbox {
    position: relative;           
    transition: 0.3s;
    float: center;
    width: 49%;
    min-height: 5vh;
    padding: 0px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0%;
    margin-bottom: 0%;
    border-radius: 10px;
    border: 1px solid #BBBBBB;
    border-style: none;
    overflow:hidden;
} 
.Gridcontainer {
    display: grid;
    grid-template-columns: 30% 8% 32% 8%;
    margin-left: 5%;  
    padding-left: 2%
  }

.LogoEndBlock{
    width:48%;
    margin-top:5%;
}
.longlinebox{
    margin-bottom:5%;
    position: relative;           
    transition: 0.3s;
    float: center;
    width: 100%;
    min-height: 4vh;
    padding: 0px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0%;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
    border-style: solid;
    overflow:hidden;
}
.prentjieboxL {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:18%;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.25%;
    margin-top: 0.25%;
    margin-bottom: 0%;
    border-radius: 10px;
    border: 1px solid #BBBBBB;
    border-style: none;
    overflow:hidden;
} 

.prentjieboxR {
    position: relative;           
    transition: 0.3s;
    float: right;
    width: 24%;
    min-height: 18vh;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0%;
    margin-bottom: 0.5%;
    border-radius: 10px;
    border: 1px solid #BBBBBB;
    border-style: none;
    overflow:hidden;
}

.read-more:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0; left: 0; bottom: 0; right: 0;
    cursor: default
} 
.slidecaption {
    -webkit-animation-name: logospinner; 
   -webkit-animation-timing-function: linear; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-duration: 10s; 
   animation-name: logospinner; 
   animation-timing-function: linear; 
   animation-iteration-count: infinite; 
   animation-duration: 15s; 
   -webkit-transform-style: preserve-3d; 
   -moz-transform-style: preserve-3d; 
   -ms-transform-style: preserve-3d; 
   transform-style: preserve-3d;
}
.slidecaption2 {
    -webkit-animation-name: logospinner; 
   -webkit-animation-timing-function: linear; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-duration: 20s; 
   animation-name: logospinner; 
   animation-timing-function: linear; 
   animation-iteration-count: infinite; 
   animation-duration: 45s; 
   -webkit-transform-style: preserve-3d; 
   -moz-transform-style: preserve-3d; 
   -ms-transform-style: preserve-3d; 
   transform-style: preserve-3d;
}
.smallcard {
    position: center; 
    font-size:0.2vw;          
    transition: 0.3s;
    float:middle;
    width: 15%;        
    cursor: default;
    LINE-HEIGHT:2px;     
    margin-top: 0.1%;
    margin-bottom: 0.5%;  
    padding:0px;      
    border-radius: 5px;
    color:rgba(182, 174, 174, 0.712);
    font-size:1;
    border: 1px solid #BBBBBB;
    border-style: solid;
    height: 6vh;
    overflow: hidden;
    white-space: nowrap;
    background-color: #eee;    
} 
.smokebox {
    position: relative;           
    transition: 0.3s;
    float: left;
    width: 18%;
    min-height: 20vh;
    padding: 0px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.25%;
    margin-top: 0%;
    margin-bottom: 0%;
    border-radius: 10px;
    border: 1px solid #BBBBBB;
    border-style: none;
    overflow:hidden;
} 
.startbuttonleft {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:18%;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.25%;
    margin-top: 1%;
    margin-bottom: 0%;
    border-radius: 10px;
    background-color:rgb(228, 252, 221);    
}
.startbuttonright {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:18%;
    padding: 10px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.25%;
    margin-top: 1%;
    margin-bottom: 0%;
    border-radius: 10px;
    background-color:rgb(224, 218, 253);    
}
.subheadercard {
    position: relative;           
    transition: 0.3s;        
    width: 99%;
    padding: 1px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    border-radius: 10px;
    background-color:#eee;
} 
.timerbox{
    position: relative;           
    transition: 0.3s;
    float: left;
    width: 49%;
    min-height: 5vh;
    padding: 0px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0%;
    margin-bottom: 0%;
    border-radius: 10px;
    border: 1px solid #BBBBBB;
    border-style: none;
    overflow:hidden;
}
.TimerTile {
    position: relative;           
    transition: 0.3s;
    float: left;
    width:48%;
    padding: 3px;
    cursor: default;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    border-radius: 10px;
    background-color:#ddd;
    border: 1px solid #BBBBBB;
    border-style: solid;
} 
.Trendblock{
    background-color:#fff;
    width: 61.75%;    
    border: 1px solid #BBBBBB;
    border-style: solid; 
    border-radius: 10px;   
    margin-left: 0.25%;
    margin-right: 0.5%;
    float: right;
}
.Trendblocknofloat{
    background-color:#fff;
    width: 61.75%;    
    border: 1px solid #BBBBBB;
    border-style: solid; 
    border-radius: 10px;   
    margin-left: 0.25%;
    margin-right: 0.5%;  
}
.Trendbloc70knofloat{
    background-color:#fff;
    width: 70%;    
    border: 1px solid #BBBBBB;
    border-style: solid; 
    border-radius: 10px;   
    margin-left: 0.25%;
    margin-right: 0.5%;  
}
.TrendblockHalf{
    background-color:#fff;
    width: 49%;    
    border: 1px solid #BBBBBB;
    border-style: solid; 
    border-radius: 10px;   
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 1%;    
}
.Trendblockheight50{
    background-color:#fff;
    height: 30vh;    
    border: 1px solid #BBBBBB;
    border-style: solid; 
    border-radius: 10px;   
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 1%;    
}
.TrendblockFull {
    background-color: #fff;
    width: 98%;
    border: 1px solid #BBBBBB;
    border-style: solid;
    border-radius: 10px;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 1%;
}

.inputDivblock{
    margin-top:10px;
    display:inline-block;
    text-align:center;
}

input {
    border-style: solid;
    border: 1px solid #BBBBBB;
    width:100px;
    height:30px;
    vertical-align:middle; 
    border-radius: 6px; 
    padding-left: 4px;   
}

select {    
    border-radius: 6px;
    vertical-align:middle; 
    height:30px;
    padding-left: 4px;   

}
option {
    width:100px;    
}


input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
}
.mybadge {
    margin-left:5px;
    display: inline-block;
    padding: 0.5em 0.75em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1.5;
    width:5;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 1rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .mybadge {
        transition: none;
    }
}

a.mybadge:hover, a.mybadge:focus {
    text-decoration: none;
}

.mybadge:empty {
    display: none;
}

.btn .mybadge {
    position: relative;
    top: -1px;
}

.mybadge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}

.mybadge-primary {
    color: #fff;
    background-color: #007bff;
}

a.mybadge-primary:hover, a.mybadge-primary:focus {
    color: #fff;
    background-color: #0062cc;
}

a.mybadge-primary:focus, a.mybadge-primary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.mybadge-secondary {
    color: #fff;
    background-color: #6c757d;
}

a.mybadge-secondary:hover, a.mybadge-secondary:focus {
    color: #fff;
    background-color: #545b62;
}

a.mybadge-secondary:focus, a.mybadge-secondary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.mybadge-success {
    color: #fff;
    background-color: #28a745;
}

a.mybadge-success:hover, a.mybadge-success:focus {
    color: #fff;
    background-color: #1e7e34;
}

a.mybadge-success:focus, a.mybadge-success.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.mybadge-info {
    color: #fff;
    background-color: #17a2b8;
}

a.mybadge-info:hover, a.mybadge-info:focus {
    color: #fff;
    background-color: #117a8b;
}

a.mybadge-info:focus, a.mybadge-info.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.mybadge-warning {
    color: #212529;
    background-color: #ffc107;
}

a.mybadge-warning:hover, a.mybadge-warning:focus {
    color: #212529;
    background-color: #d39e00;
}

a.mybadge-warning:focus, a.mybadge-warning.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.mybadge-danger {
    color: #fff;
    background-color: #dc3545;
}

a.mybadge-danger:hover, a.mybadge-danger:focus {
    color: #fff;
    background-color: #bd2130;
}

a.mybadge-danger:focus, a.mybadge-danger.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.mybadge-light {
    color: #212529;
    background-color: #f8f9fa;
}

a.mybadge-light:hover, a.mybadge-light:focus {
    color: #212529;
    background-color: #dae0e5;
}

a.mybadge-light:focus, a.mybadge-light.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.mybadge-dark {
    color: #fff;
    background-color: #343a40;
}

a.mybadge-dark:hover, a.mybadge-dark:focus {
    color: #fff;
    background-color: #1d2124;
}

a.mybadge-dark:focus, a.mybadge-dark.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.button-surround {
    border-radius: 20px;
    padding-top: 15;
    padding-bottom: 15;
    border: 1px solid #AAAAAA;
    height: 40px;
}