/* rtj */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nosifer&family=Poppins:wght@600&family=Raleway:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

*
{
margin:0;
padding:0;
}

body
{
background:black;
margin:0;
padding:0;
color:white;
font-family:'Roboto',sans-serif;
}


a
{
text-decoration:none;
color:white;
}








/* pad 12 font 5vw place holder 3vw */
input
{
width:100%;
box-sizing:border-box;
padding:10px;
font-size:2vw;
color:white;
border-radius:5px;
border:5px solid white;
background:transparent;
}


textarea:focus,input:focus,select:focus,
{
outline:none;
}


input[type=date]
{
color:#222222;
font-size:5vw;
outline:none;
}
	
select
{
width:100%;
padding:12px;
font-size:24px;
border-radius:5px;
border:5px solid white;
color:white;
background:transparent;
}

select option
{

background:black;
color:#fff;
font-family:'Roboto',sans-serif;
font-size:3vw;
}

::-ms-input-placeholder
{ /* Edge 12-18 */
color:grey;
font-size:2vw;
font-family:Helvetica,sans-serif;
}

::placeholder
{
color:grey;
font-size:2vw;
font-family:Helvetica,sans-serif;
}

::-webkit-calendar-picker-indicator
{
filter: invert(1);
}

input[type=checkbox]
{
transform:scale(2.0);
}










.innercont
{
width:96%;
max-width:1200px;
margin:auto;
border:0px solid red;
}


#footer
{
/*background:#71CADB;   background:#800080;*/
background:#000;
width:100%;
min-height:200px;
}

#hiddenmenu
{
display:none;
}
#extras
{
display:none;
}
#gallery
{
display:none;
}

.next
{
display:inline-block;
vertical-align:top;
}

.clear
{
clear:both;
}




#confetti 
{
overflow-y:hidden;
overflow-x:hidden;
width:100%;
margin:0;
height:100%;
position:absolute;
top:0;
}








table
{
margin:0 auto;
border-collapse:collapse;
}

td
{
border:1px solid grey;
text-align:center;
padding:10px;
}




.round
{
border-radius:50%;
height:200px;
width:200px;
}


.divider
{
text-align:center;
padding:4px;
color:dodgerblue;
}










#sticky
{
font-size:5vw;
display:none;
position:fixed;
bottom:10%;
right:10%;
padding:8px;
background:orange;
z-index:99;
}











.greenband
{
background:#01B450;
width:100%;
min-height:60px;
}

.redband
{
background:#E60045;
width:100%;
min-height:200px;
}

.cyanband
{
background:cyan;
width:100%;
min-height:200px;
}

.greyband
{
background:#212121;
width:100%;
min-height:200px;
}

.darkgreyband
{
background:#191919;
width:100%;
min-height:200px;
}





.yellowbutton
{
display:inline-block;
text-align:center;
font-size:20px;
font-weight:600;
min-width:100px;
font-family:Lato,sans-serif;
padding:12px;
background:#FFDC00;
border-radius:5px;
color:black;
}

.orangebutton
{
display:inline-block;
text-align:center;
font-size:20px;
font-weight:600;
min-width:100px;
font-family:Lato,sans-serif;
padding:12px;
background:orange;
color:white;
}

.bluebutton
{
display:inline-block;
text-align:center;
font-size:20px;
font-weight:600;
min-width:100px;
font-family:Lato,sans-serif;
padding:12px;
background:blue;
color:white;
border-radius:5px;
}




.fit
{
width:100%;
max-width:100%;
}

.mini
{

max-width:100%;
}

.ofc
{
object-fit:cover;
width:100px;
height:100px;
}









.grad 
{
text-align:center;
font-family:Anton,sans-serif;
font-size:36px;
height:150px;
line-height:150px;
vertical-align:middle;

background-image:linear-gradient(#F1A6CC,#E0378D);
}


hr
{
width:100%;
text-align:center;
margin:auto;
}


.center
{
margin:auto;
text-align:center;
}

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

.centered
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}











.col2
{
display:inline-block;
width:48%;
vertical-align:top;
text-align:center;
}

.col3
{
display:inline-block;
width:30%;
vertical-align:top;
text-align:center;
}

.col4
{
display:inline-block;
width:23%;
vertical-align:top;
text-align:center;
}





.cube
{
display:inline-block;
position:relative;
transition: transform .2s;
margin:5px;
width:130px;
height:150px;
border:1px solid grey;
min-width:100px;
}

.cubeband
{

display:inline-block;
position:relative;
transition: transform .2s;
margin:5px;
width:130px;
height:250px;
border:1px solid grey;
background:white;
color:black;
}

.cube:hover
{
transform: scale(1.05);
}

.cubetextw
{
font-family:Anton,sans-serif;
position:absolute;
top:10px;
left:10px;
color:white;
}

.cubetext
{
font-family:Anton,sans-serif;
position:absolute;
top:10px;
left:10px;
color:black;

}








.box
{
position:relative;
top:-20px;
display:inline-block;

vertical-align:top;
background:#F7F7F7;
width:46%;
max-width:300px;
margin:5px;
color:grey;

text-align:center;

overflow:hidden;
}

.box:hover
{
transform: scale(1.05);
}

.boxheader
{
background:#03516E;
height:80px;

width:100%;
text-align:center;

overflow:hidden;
}

.boxtext
{
color:#71CADB;
font-family:Lato,sans-serif;
font-size:28px;
}

.boxprice
{
font-family:Anton,sans-serif;
color:#50C6DB;
font-size:48px;
font-weight:500;
}









.check
{
color:green;
font-size:18px;
}










.diagtext 
{
position:absolute;
top:0;
right:0;
display:inline-block;
transform:translateX(50%) translateY(-50%) rotate(45deg);
transform-origin:center;
z-index:1;
}

.diagtext::before
{
content:"";
display:block;
height:0;
padding-top:100%;
}

.diagtext>span
{
display:inline-block;
background:#eb8c00;
padding:6px 45px;
transform:translateY(-50%);
font-size:18px;
text-align:center;
color:white;
white-space:nowrap;
}





.y
{
color:#FFDC00;
}

.g
{
color:grey;
}






.boldenw
{
color:white;
font-size:6vw;
}
@media only screen and (max-width:800px)
{
.boldenw
{
font-size:10vw;
}
}


.boldenhero
{
color:white;
font-size:7vw;
}
.boldenheromini
{
color:yellow;
font-size:3vw;
}
.boldenmustard
{
font-size:38px;
color:#EEF200;
}



.boldenyellow
{
color:#FFDC00;
font-size:2vw;
}
@media only screen and (max-width:800px)
{
.boldenyellow
{
font-size:8vw;
}
}


.antonbig
{
font-family:Anton,sans-serif;
font-size:36px;
color:white;
}





.gradient
{
    height:300px;
    width:300px;
    border:1px solid black;
    font-size:30px;
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}







:root{
    --overlay-color-1: #ff0000;
    --overlay-color-2: #0000ff;
    --anim-duration: 2s;
}

#gradient {
    opacity: 0.8;
    background: none;
}

#gradient:after,
#gradient:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

#gradient:before {
    background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}

#gradient:after {
    background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}

@keyframes OpacityAnim {
    0%{opacity: 1.0}
    100%{opacity: 0.0}
}