/* ==========================================================
   MERITZA CLASSES
   GLOBAL SCIENCE BACKGROUND
========================================================== */


/* ==========================================================
   BACKGROUND LAYER
========================================================== */

.mc-global-science-bg{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}


/* ==========================================================
   BASE ICON
========================================================== */

.mc-science-icon{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    user-select:none;

    line-height:1;

    opacity:.075;

    z-index:0;

}


/* ==========================================================
   ICON SIZE
========================================================== */

.mc-science-icon i{

    display:block;

    line-height:1;

}


/* ==========================================================
   MATHEMATICS
========================================================== */

.mc-science-maths{

    color:#2867C7;

}


/* ==========================================================
   PHYSICS
========================================================== */

.mc-science-physics{

    color:#0A1946;

}


/* ==========================================================
   CHEMISTRY
========================================================== */

.mc-science-chemistry{

    color:#B98C14;

}


/* ==========================================================
   MATHEMATICS POSITIONS
========================================================== */

.maths-1{

    top:8%;

    left:5%;

    font-size:42px;

    transform:rotate(-17deg);

}


.maths-2{

    top:31%;

    right:7%;

    font-size:28px;

    transform:rotate(23deg);

}


.maths-3{

    top:58%;

    left:11%;

    font-size:55px;

    transform:rotate(11deg);

}


.maths-4{

    top:84%;

    right:13%;

    font-size:36px;

    transform:rotate(-28deg);

}


/* ==========================================================
   PHYSICS POSITIONS
========================================================== */

.physics-1{

    top:17%;

    right:18%;

    font-size:48px;

    transform:rotate(-12deg);

}


.physics-2{

    top:43%;

    left:4%;

    font-size:30px;

    transform:rotate(28deg);

}


.physics-3{

    top:68%;

    right:5%;

    font-size:58px;

    transform:rotate(-19deg);

}


.physics-4{

    top:92%;

    left:25%;

    font-size:34px;

    transform:rotate(15deg);

}


/* ==========================================================
   CHEMISTRY POSITIONS
========================================================== */

.chemistry-1{

    top:11%;

    left:24%;

    font-size:34px;

    transform:rotate(21deg);

}


.chemistry-2{

    top:39%;

    right:32%;

    font-size:52px;

    transform:rotate(-25deg);

}


.chemistry-3{

    top:64%;

    left:43%;

    font-size:31px;

    transform:rotate(18deg);

}


.chemistry-4{

    top:87%;

    right:27%;

    font-size:45px;

    transform:rotate(-14deg);

}


/* ==========================================================
   SUBTLE VARIATION
========================================================== */

.maths-1,
.maths-3{

    opacity:.065;

}


.maths-2,
.maths-4{

    opacity:.055;

}


.physics-1,
.physics-3{

    opacity:.06;

}


.physics-2,
.physics-4{

    opacity:.05;

}


.chemistry-1,
.chemistry-3{

    opacity:.06;

}


.chemistry-2,
.chemistry-4{

    opacity:.05;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px){

    .maths-1{

        left:3%;

        font-size:34px;

    }


    .maths-2{

        right:4%;

        font-size:25px;

    }


    .maths-3{

        left:6%;

        font-size:44px;

    }


    .maths-4{

        right:7%;

        font-size:30px;

    }


    .physics-1{

        right:10%;

        font-size:40px;

    }


    .physics-2{

        left:3%;

        font-size:26px;

    }


    .physics-3{

        right:3%;

        font-size:45px;

    }


    .physics-4{

        left:20%;

        font-size:30px;

    }


    .chemistry-1{

        left:18%;

        font-size:29px;

    }


    .chemistry-2{

        right:25%;

        font-size:42px;

    }


    .chemistry-3{

        left:38%;

        font-size:27px;

    }


    .chemistry-4{

        right:20%;

        font-size:37px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767.98px){

    .mc-global-science-bg{

        opacity:.65;

    }


    .mc-science-icon{

        transform-origin:center;

    }


    .maths-1{

        top:7%;

        left:3%;

        font-size:28px;

    }


    .maths-2{

        top:28%;

        right:3%;

        font-size:22px;

    }


    .maths-3{

        top:57%;

        left:4%;

        font-size:34px;

    }


    .maths-4{

        top:83%;

        right:5%;

        font-size:25px;

    }


    .physics-1{

        top:16%;

        right:7%;

        font-size:32px;

    }


    .physics-2{

        top:42%;

        left:3%;

        font-size:23px;

    }


    .physics-3{

        top:67%;

        right:3%;

        font-size:36px;

    }


    .physics-4{

        top:91%;

        left:15%;

        font-size:25px;

    }


    .chemistry-1{

        top:10%;

        left:20%;

        font-size:24px;

    }


    .chemistry-2{

        top:37%;

        right:18%;

        font-size:32px;

    }


    .chemistry-3{

        top:63%;

        left:35%;

        font-size:23px;

    }


    .chemistry-4{

        top:86%;

        right:17%;

        font-size:29px;

    }

}