/* Lottie styles for Class Profile, Facts and Figures, etc. animations 
   December 16, 2019
*/

@media only screen and (min-width: 1243px) {
        #lottie {
            margin-left:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie2 {
            margin-right:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
        @media only screen and (min-width:414px) and (max-width: 1243px) {
        #lottie {
            margin-left:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie2 {
            margin-right:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
@media only screen and (max-width: 414px) {
        #lottie {
            margin-left:0;
            width:100%;
            height:305px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie2 {
            margin-right:0;
            width:100%;
            height:360px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}

@media only screen and (min-width: 1243px) {
        #lottie3 {
            margin-left:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie4 {
            margin-right:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
        @media only screen and (min-width:414px) and (max-width: 1243px) {
        #lottie3 {
            margin-left:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie4 {
            margin-right:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
@media only screen and (max-width: 414px) {
        #lottie3 {
            margin-left:0;
            width:100%;
            height:305px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie4 {
            margin-right:0;
            width:100%;
            height:360px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
        
@media only screen and (min-width: 1243px) {
        #lottie5 {
            margin-left:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie6 {
            margin-right:25%;
            width:100%;
            height:400px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
        @media only screen and (min-width:414px) and (max-width: 1243px) {
        #lottie5 {
            margin-left:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie6 {
            margin-right:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
@media only screen and (max-width: 414px) {
        #lottie5 {
            margin-left:0;
            width:100%;
            height:305px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        #lottie6 {
            margin-right:0;
            width:100%;
            height:360px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}

@media only screen and (min-width: 1243px) {
        #lottie7 {
            margin:0;
            width:100%;
            height:420px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
@media only screen and (min-width:414px) and (max-width: 1243px) {
        #lottie7 {
            margin-left:0;
            width:100%;
            height:350px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}
@media only screen and (max-width: 414px) {
        #lottie7 {
            margin-left:0;
            width:100%;
            height:305px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            opacity: 1;
        }}