:root {
    --greyShade1: #3C3C3B;
    --greyShade2: #4A4A49;
    --greyShade3: #575756;
    --greyShade4: #646363;
    --greenShade1: #22855A;
    --greenShade2: #278A5D;
    --greenShade3: #7FA15E;
}
html , * {
padding: 0;
margin: 0;
}
body {
font-family: "Figtree", sans-serif;
font-optical-sizing: auto;
font-style: normal;
background: #fff;
padding: 0;
margin: 0;
border-top: 10px solid var(--greenShade1);
}
a {
text-decoration: none;
transition: all 0.3s ease-out;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
@media only screen and (max-width: 650px) {
.container {
padding: 0 30px;
}
}



/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* HEADER */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
header {
background: #fff;
padding: 65px 0 40px;
text-align: center;
}
header img {
width: 250px;
height: auto;
margin: 20px 0;
}
header h1 {
display: none;
}
header h2 {
color: var(--greyShade1);
font-weight: 500;
font-size: 31px;
line-height: 130%;
}
header h2 .h1darkGreen {
color: var(--greenShade1);
font-weight: 900;
text-transform: uppercase;
}
header h2 .bolden {
font-weight: 900;
text-transform: uppercase;
}

@media only screen and (max-width: 900px) {
header h2 {
font-size: 27px;
}
header img {
width: 225px;
margin: 20px 0;
}
header {
padding: 50px 0 30px;
}
}
@media only screen and (max-width: 600px) {
header h2 {
font-size: 25px;
}
header img {
width: 215px;
margin: 20px 0;
}
header {
padding: 30px 0 15px;
}
}
@media only screen and (max-width: 500px) {
header h2 {
font-size: 23px;
}
header img {
width: 200px;
margin: 17px 0;
}
header {
padding: 30px 0 15px;
}
}
@media only screen and (max-width: 400px) {
header h2 {
font-size: 21px;
}
header img {
width: 160px;
margin: 16px 0;
}
}






/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* section 1 */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
section.section1 {
background-color: var(--greenShade1);
background-image: url('../images/GreenGradient_RGB_5percent.svg'),url('../images/GreenGradient_RGB.svg');
background-size: 115%, cover;
background-position: center center , center center;
padding: 65px 0;
text-align: center;
position: relative;
}
section.section1 p.introP {
font-size: 25px;
line-height: 145%;
color: #fff;
padding: 0 15%;
}
section.section1 .sectionsWrapper {
display: flex;
margin: 40px 0 20px;
text-align: left;
position: relative;
align-items: center;
justify-content: center;
}
section.section1 .section1LHS {
flex: 1;
width: 50%;
background-color: #fff;
border-radius: 50px 0px 0px 0px;
padding: 75px 75px 75px 60px;
align-self: stretch;
}
section.section1 .section1RHS {
flex: 1;
width: 50%;
background-color: #222222;
border-radius: 0px 0px 50px 0px;
padding: 75px 60px 75px 75px;
align-self: stretch;
}
section.section1 .sectionsWrapper h3 {
text-transform: uppercase;
font-weight: 300;
font-size: 15px;
letter-spacing: 7px;
margin-bottom: 15px;
}
section.section1 .sectionsWrapper p {
font-size: 20px;
font-weight: 500;
line-height: 150%;
}
section.section1 .sectionsWrapper .section1LHS h3 {
color: var(--greyShade4);
} 
section.section1 .sectionsWrapper .section1LHS p {
color: var(--greenShade1);
}
section.section1 .sectionsWrapper .section1RHS h3 {
color: #fff;
} 
section.section1 .sectionsWrapper .section1RHS p {
color: var(--greenShade3);
}
section.section1 .sectionsWrapper .logooverlay {
width: 96px;
height: 96px;
position: absolute;
background-color: #fff;
background-image: url('../images/ROXSports_icon_RGB.svg');
background-size: cover;
background-repeat: no-repeat;
background-size: 80%;
background-position: center center;
border-radius: 100px;
/*left: 50%;
top: 50%;
transform: translate(-50%,-50%);*/
animation-name: spin2;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;    
}
@-webkit-keyframes spin2 {
0% { transform:rotate(0deg) }
25% { transform:rotate(0deg) }
50% { }
75% { transform:rotate(0deg) }
100% { transform:rotate(360deg) }
}

@media only screen and (max-width: 1650px) {
section.section1 {
background-size: 115% , cover;
}
}
@media only screen and (max-width: 1450px) {
section.section1 {
background-size: 130% , cover;
}
}
@media only screen and (max-width: 1100px) {
section.section1 .section1LHS {
padding: 65px 65px 65px 50px;
}
section.section1 .section1RHS {
padding: 65px 50px 65px 65px;
}
section.section1 .sectionsWrapper h3 {
font-size: 14px;
letter-spacing: 7px;
margin-bottom: 13px;
}
section.section1 .sectionsWrapper p {
font-size: 19px;
}
section.section1 .sectionsWrapper .logooverlay {
width: 86px;
height: 86px;
}
section.section1 {
background-size: 150% , cover;
}
}
@media only screen and (max-width: 900px) {
section.section1 p.introP {
font-size: 24px;
padding: 0 7%;
}
section.section1 {
padding: 50px 0;
}
section.section1 .section1LHS {
padding: 55px 55px 55px 55px;
}
section.section1 .section1RHS {
padding: 55px 55px 55px 65px;
}
}
@media only screen and (max-width: 700px) {
section.section1 {
background-size: 250% , cover;
}
}
@media only screen and (max-width: 650px) {
section.section1 .sectionsWrapper {
flex-direction: column;
}
section.section1 .sectionsWrapper .logooverlay {
margin-top: 10px;
}
section.section1 .section1LHS , section.section1 .section1RHS {
width: calc(100% - 110px);
padding: 55px;
text-align: center;
}
section.section1 .section1LHS {
border-radius: 40px 0px 0px 0px;
}
section.section1 .section1RHS {
border-radius: 0px 0px 40px 0px;
}
}
@media only screen and (max-width: 600px) {
section.section1 p.introP {
font-size: 22px;
padding: 0 5%;
}
section.section1 {
padding: 40px 0;
}
}
@media only screen and (max-width: 500px) {
section.section1 .section1LHS , section.section1 .section1RHS {
width: calc(100% - 70px);
padding: 55px 35px;
text-align: center;
}
section.section1 .sectionsWrapper .logooverlay {
width: 76px;
height: 76px;
}
section.section1 {
background-size: 300% , cover;
}
}
@media only screen and (max-width: 450px) {
section.section1 p.introP {
font-size: 20px;
padding: 0 3%;
}
section.section1 {
padding: 30px 0;
}
section.section1 .sectionsWrapper p {
font-size: 18px;
}
}
@media only screen and (max-width: 400px) {
section.section1 {
background-size: 380% , cover;
}
}
@media only screen and (max-width: 365px) {
section.section1 .sectionsWrapper .logooverlay {
margin-top: 40px;
}
}
@media only screen and (max-width: 350px) {
section.section1 {
background-size: 450% , cover;
}
}
    

/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* section 2 */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
h2.sectionTitle {
text-transform: uppercase;
font-weight: 300;
font-size: 15px;
letter-spacing: 7px;
text-align: center;
line-height: 150%;
}
section.section2 {
padding: 65px 0 60px;
}
section.section2 h2.sectionTitle {
color: var(--greyShade4);
}
section.section2 .colsWrapper {
width: 70%;
margin: 45px auto 0;
display: flex;
}
section.section2 .colItem {
width: 33%;
text-align: center;
flex: 1;
padding: 0 2%;
}
section.section2 .colItem img {
width: 55px;
height: auto;
margin-bottom: 20px;
}
section.section2 .colItem h4 {
color: var(--greyShade1);
font-weight: 600;
font-size: 20px;
line-height: 130%;
}

@media only screen and (max-width: 1200px) {
section.section2 .colsWrapper {
width: 85%;
}
}
@media only screen and (max-width: 900px) {
section.section2 .colsWrapper {
width: 90%;
}
section.section2 .colItem h4 {
font-size: 19px;
}
}
@media only screen and (max-width: 750px) {
section.section2 .colsWrapper {
width: 95%;
}
section.section2 .colItem h4 {
font-size: 18px;
}
section.section2 .colItem img {
width: 50px;
margin-bottom: 17px;
}
section.section2 {
padding: 50px 0 50px;
}
}
@media only screen and (max-width: 650px) {
section.section2 .colsWrapper {
flex-direction: column;
}
section.section2 .colItem {
width: calc(100% - 30%);
padding: 0 15%;
margin-bottom: 30px;
}
section.section2 .colItem h4 {
font-size: 21px;
}
section.section2 .colItem img {
width: 55px;
margin-bottom: 20px;
}
section.section2 {
padding: 50px 0 40px;
}
}
@media only screen and (max-width: 450px) {
section.section2 .colItem h4 {
font-size: 19px;
}
section.section2 .colItem img {
width: 52px;
margin-bottom: 17px;
}
}
@media only screen and (max-width: 400px) {
section.section2 .colItem {
width: calc(100% - 20%);
padding: 0 10%;
margin-bottom: 25px;
}
}


/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* section 3 */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
section.section3 {
padding: 75px 0 50px;
background-color: #f7f7f7;
}
section.section3 h2.sectionTitle {
color: var(--greyShade4);
}
section.section3 .colItem {
width: 33%;
flex: 1;
border-radius: 30px 0 30px 0;
padding: 35px 50px;
color: #fff;
background-image: url('../images/GreenGradient_RGB_5percent.svg');
background-size: cover;
background-size: 250%;
background-position: center;
}
section.section3 .colItem:nth-child(1) , section.section3 .colItem:nth-child(3) {
background-color: var(--greenShade1);
}
section.section3 .colItem:nth-child(2) {
background-color: var(--greyShade1);
}
section.section3 .colsWrapper {
display: flex;
margin: 45px 0 25px;
flex-wrap: wrap;
gap: 50px; 
position: relative;
}
section.section3 .colItem h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
}
section.section3 .colItem ul {
margin: 0;
padding: 0;
}
section.section3 .colItem ul li {
font-size: 17px;
line-height: 130%;
margin-bottom: 8px;
margin-left: 15px;
padding-left: 10px;
font-weight: 400;
}
section.section3 .arrows1 {
position: absolute;
width: 40px;
height: 70px;
left: 31.3%;
top: calc(50% - 35px);
background-image: url('../images/section3arrows.svg');
background-size: cover;
background-position: center;
}
section.section3 .arrows2 {
position: absolute;
width: 40px;
height: 70px;
right: 31.3%;
top: calc(50% - 35px);
background-image: url('../images/section3arrows_place2.svg');
background-size: cover;
background-position: center;    
}

@media only screen and (max-width: 1350px) {
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 31.1%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 31.1%;
}
}
@media only screen and (max-width: 1220px) {
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 30.8%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 30.8%;
}
section.section3 .colItem h3 {
font-size: 21px;
margin-bottom: 15px;
}
section.section3 .colItem ul li {
font-size: 16px;
margin-bottom: 7px;
}
section.section3 .colItem {
padding: 30px 45px;
}
}
@media only screen and (max-width: 1160px) {
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 30.6%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 30.6%;
}
}
@media only screen and (max-width: 1050px) {
section.section3 .colItem {
padding: 28px 35px;
}
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 30.4%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 30.4%;
}
section.section3 {
padding: 65px 0 40px;
}
}
@media only screen and (max-width: 950px) {
section.section3 .colItem {
padding: 25px 30px;
}
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 30.2%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 30.2%;
}
section.section3 .colsWrapper {
margin: 35px 0 25px;
}
}
@media only screen and (max-width: 900px) {
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 29.8%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 29.8%;
}
section.section3 .colItem h3 {
font-size: 20px;
margin-bottom: 13px;
}
section.section3 .colItem ul li {
font-size: 15px;
margin-bottom: 5px;
}
}
@media only screen and (max-width: 800px) {
section.section3 .arrows1 {
width: 40px;
height: 70px;
left: 29.4%;
}
section.section3 .arrows2 {
width: 40px;
height: 70px;
right: 29.4%;
}
}
@media only screen and (max-width: 750px) {
section.section3 {
padding: 55px 0 10px;
}
/* go one col */
section.section3 .colsWrapper {
display: block;
}
section.section3 .colItem {
display: inline-block;
width: calc(100% - 60px);
margin-bottom: 50px;
}
section.section3 .colItem:nth-of-type(3n) {
margin-bottom: 25px;
} 
section.section3 .arrows1 {
width: 40px;
height: 50px;
left: calc(50% - 20px);
top: 40%;
transform: rotate(90deg) !important;
}
section.section3 .arrows2 {
width: 40px;
height: 50px;
left: calc(50% - 20px);
top: 50%;
transform: rotate(90deg) !important;
}
}

/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* section 4 */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
section.section4 {
padding: 60px 0 75px;
background-color: var(--greyShade1);
}
section.section4 h2.sectionTitle {
color: var(--greenShade2);
}
section.section4 .colsWrapper {
display: flex;
margin: 45px 0 0px;
flex-wrap: wrap;
gap: 50px;
}
section.section4 .colItem {
width: 25%;
flex: 1;
/*padding: 35px 50px;*/
text-align: center;
}
section.section4 .colItem .logoHolder {
width: 100%;
padding: 2px;
background-color: var(--greenShade1);
background-image: url('../images/GreenGradient_RGB.svg');
background-size: cover, cover;
background-position: center center , center center;
border-radius: 30px 0 30px 0;
text-align: center;
margin-bottom: 20px;
}
section.section4 .colItem .logoHolder .logoHolderInner {
background-color: var(--greyShade1);
border-radius: 28px 0 28px 0;
padding: 10px 25px;
text-align: center;
}
section.section4 .colItem h4 {
color: #fff;
font-size: 23px;
font-weight: 600;
line-height: 115%;
margin-bottom: 10px;
}
section.section4 .colItem p {
color: #fff;
font-size: 16px;
line-height: 140%;
font-weight: 300;
}
section.section4 .colItem .logoHolder .logoHolderInner img {
width: 90%;
}

@media only screen and (max-width: 1200px) {
section.section4 .colsWrapper {
margin: 40px 0 0px;
gap: 35px;
}
}
@media only screen and (max-width: 1000px) {
section.section4 .colItem h4 {
font-size: 21px;
margin-bottom: 8px;
}
section.section4 .colItem p {
font-size: 15px;
}
}
@media only screen and (max-width: 900px) {
section.section4 {
padding: 50px 0 55px;
}
section.section4 .colsWrapper {
margin: 35px 0 0px;
gap: 25px;
}
section.section4 .colItem h4 {
font-size: 19px;
margin-bottom: 7px;
}
section.section4 .colItem p {
font-size: 14px;
}
}
@media only screen and (max-width: 750px) {
section.section4 .colsWrapper {
display: block;
text-align: center;
}
section.section4 .colItem {
width: 45%;
display: inline-block;
vertical-align: top;
margin: 0 2% 35px;
}
section.section4 {
padding: 50px 0 30px;
}
}
@media only screen and (max-width: 550px) {
section.section4 .colItem {
width: 65%;
margin: 0 2% 35px;
}
}
@media only screen and (max-width: 450px) {
section.section4 .colItem {
width: 80%;
margin: 0 2% 35px;
}
}

/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* section 5 */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
section.section5 {
background-color: var(--greenShade1);
background-image: url('../images/GreenGradient_RGB_5percent.svg'),url('../images/GreenGradient_RGB.svg');
background-size: cover, cover;
background-position: center center , center center;
padding: 70px 0;
text-align: center;
position: relative;
}
section.section5 h3 {
color: #fff;
font-size: 33px;
line-height: 115%;
margin-bottom: 5px;
font-weight: 700;
}
section.section5 p {
color: #fff;
font-size: 25px;
line-height: 150%;
}
section.section5 p a {
display: inline-block;
border: 2.5px solid #fff;
border-radius: 30px 0 30px 0;
padding: 17px 30px;
color: #fff;
font-size: 22px;
text-transform: uppercase;
margin-top: 25px;
font-weight: 800;
}
section.section5 p a:hover {
background-color: #fff;
color: var(--greenShade1);
}

@media only screen and (max-width: 1150px) {
section.section5 {
background-size: 125%;
}
}
@media only screen and (max-width: 900px) {
section.section5 {
padding: 60px 0;
}
section.section5 h3 {
font-size: 29px;
margin-bottom: 5px;
}
section.section5 p {
font-size: 23px;
}
section.section5 p a {
border: 2.5px solid #fff;
border-radius: 30px 0 30px 0;
padding: 17px 30px;
font-size: 20px;
margin-top: 23px;
}
section.section5 {
background-size: 150%;
}
}
@media only screen and (max-width: 700px) {
section.section5 {
background-size: 185%;
}
}
@media only screen and (max-width: 600px) {
section.section5 {
padding: 40px 0 45px;
}
}
@media only screen and (max-width: 500px) {
section.section5 h3 {
font-size: 25px;
margin-bottom: 5px;
}
section.section5 p {
font-size: 18px;
}
section.section5 p a {
border: 2.5px solid #fff;
border-radius: 25px 0 25px 0;
padding: 15px 26px;
font-size: 18px;
margin-top: 20px;
}
section.section5 {
background-size: 250%;
}
}   
    
    
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* footer */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
footer {
padding: 50px 0;
border-bottom: 10px solid var(--greenShade1);
background-color: #fff;
text-align: center;
}
footer img {
width: 150px;
height: auto;
margin-bottom: 12px;
}
footer p {
color: var(--greyShade1);
font-size: 12px;
line-height: 150%;
margin-bottom: 12px;
}
footer p a {
color: var(--greyShade1);
}
footer p a:hover {
color: var(--greenShade1);
}

@media only screen and (max-width: 600px) {
footer {
padding: 40px 0;
}
}
@media only screen and (max-width: 450px) {
footer {
padding: 35px 0;
}
footer p {
font-size: 11px;
}
}
@media only screen and (max-width: 400px) {
footer img {
width: 120px;
}
}






/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* Cookies */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
body .featherlight:last-of-type {
background: rgba(60,60,59,0.95);
}
body #cookiesContent {
display: none;   
color: var(--greyShade1);
}
.featherlight .featherlight-inner {
display: block !important;
}
#cookiesContent h2 , #cookiesContent h3 , #cookiesContent h4 , #cookiesContent h5 , #cookiesContent p , #cookiesContent li {
margin-bottom: 10px;
color: var(--greyShade1);
}
#cookiesContent p {
margin-bottom: 10px;
color: var(--greyShade1);
font-size: 13px;
line-height: 135%;
}
#cookiesContent li {
margin-bottom: 3px;
color: var(--greyshade1);
font-size: 13px;
line-height: 135%;
}
#cookiesContent ul {
margin-bottom: 10px;
}
#cookiesContent table {
color: var(--greyshade1);
font-size: 13px;
line-height: 135%;
}
#cookiesContent a {
color: var(--greyshade1);
}
#cookiesContent a:hover {
color: var(--greenShade1);
}
#cookiesContent h3 , #cookiesContent h4 , #cookiesContent h5 {
margin-top: 10px;
}
#cookiesContent ul {
margin-left: 25px;
}
#cookiesContent li {
margin-left: 15px;
padding-left: 15px;
}
#cookiesContent table {
width: 100%;
margin-bottom: 10px;
}
#cookiesContent table th , #cookiesContent table td {
border: 1px solid #ddd;
}
#cookiesContent table th , #cookiesContent table td {
padding: 5px;
}
.featherlight .featherlight-content {
margin-left: 10% !important;
margin-right: 10% !important;
max-height: 85% !important;
}
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-content {
padding: 20px 20px 0 !important;
border-bottom: 20px solid transparent !important;
margin-left: 7% !important;
margin-right: 7% !important;
}
}
@media only screen and (max-width: 600px) {
#cookiesContent p , #cookiesContent li , #cookiesContent table {
font-size: 12px;
}
}
@media only screen and (max-width: 450px) {
.featherlight-content {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.featherlight .featherlight-content {
padding: 15px 15px 0 !important;
border-bottom: 15px solid transparent !important;
margin-left: 5% !important;
margin-right: 5% !important;
}
#cookiesContent p , #cookiesContent li , #cookiesContent table {
font-size: 12px;
}
}








/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* animation bits */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */

header img.logo , header img.formulaIMG , header h1 , header h2 , section *, footer , .logooverlay {
transform: translateY(15px);
opacity: 0;
}
.come-in {
transform: translateY(15px);
animation: come-in 0.5s ease forwards;
}
section.section1 .sectionsWrapper .logooverlay {
opacity: 1 !important;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to { transform: translateY(0); transition: opacity;  }
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}





/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* animated formula */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
.formulaAnimated {
margin: 25px auto;
}
.formulaAnimated ,
.formulaAnimated #canvas ,
.formulaAnimated #dom_overlay_container {
width: 250px !important;
height: 44px !important;
}
@media only screen and (max-width: 900px) {
.formulaAnimated ,
.formulaAnimated #canvas ,
.formulaAnimated #dom_overlay_container {
width: 225px !important;
height: 39px !important;
}
}
@media only screen and (max-width: 600px) {
.formulaAnimated ,
.formulaAnimated #canvas ,
.formulaAnimated #dom_overlay_container {
width: 215px !important;
height: 38px !important;
}
}
@media only screen and (max-width: 500px) {
.formulaAnimated ,
.formulaAnimated #canvas ,
.formulaAnimated #dom_overlay_container {
width: 200px !important;
height: 35px !important;
}
}
@media only screen and (max-width: 400px) {
.formulaAnimated ,
.formulaAnimated #canvas ,
.formulaAnimated #dom_overlay_container {
width: 160px !important;
height: 28px !important;
}
}