/************MEDIA QUERY**** 320 **********/ @media only screen and (min-width: 320px){ .box1{ background-color: rgba(0,0,0,0.3); } .cont-one{ margin-left:15%!important; } .outer-circle1{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; position:relative; -webkit-transform: rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); transform: rotate(320deg); } .inner-circle1{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); transform: rotate(-320deg); } .inner-circle1 img { height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto } .overlay-ser1{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser1:hover { z-index: 1; border-radius:50%; display: normal; transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser1{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link1{ color: white; font-size:12px!important; } .title-link1 .fa{ font-size:15px!important; } /****circle two***/ .outer-circle2{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } .inner-circle2{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } .inner-circle2 img{ height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser2{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transform: all 0.5s; -ms-transform: all 0.5s; -o-transform: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser2:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser2{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link2{ color: white; } .title-link2 .fa{ font-size:15px!important; } /********circle 3 ***********/ .outer-circle3{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(680deg); -ms-transform: rotate(680deg); -o-transform: rotate(680deg); transform: rotate(680deg); } .inner-circle3{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-680deg); -ms-transform: rotate(-680deg); -o-transform: rotate(-680deg); transform: rotate(-680deg); } .inner-circle3 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser3{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser3:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link3{ color: white; } .title-link3 .fa{ font-size:15px!important; } /******************************* four***********/ .outer-circle4{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(850deg); -ms-transform: rotate(850deg); -o-transform: rotate(850deg); transform: rotate(850deg); } .inner-circle4{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-850deg); -ms-transform: rotate(-850deg); -o-transform: rotate(-850deg); transform: rotate(-850deg); } .inner-circle4 img{ height:60%!important; width:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser4{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser4:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1);transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser4{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link4{ color: white; } .title-link4 .fa{ font-size:15px!important; } /*****************CRICLE five ******/ .outer-circle5{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color:#E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(1040deg); -ms-transform: rotate(1040deg); -o-transform: rotate(1040deg); transform: rotate(1040deg); } .inner-circle5{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-1040deg); -ms-transform: rotate(-1040deg); -o-transform: rotate(-1040deg); transform: rotate(-1040deg); } .inner-circle5 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding:5px!important; } .overlay-ser5{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser5:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser5{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link5{ color: white; } .line-bar{ height:10px!important; width:100px!important; background-color: white; border-bottom: 2px solid red; float:left; position: relative; top:100px!important; } .cont-one{ background-color: transparent!important; text-align: center; margin-left:auto; margin-right:auto; padding-left:6%; box-sizing: border-box; } .sd-img img{ height:100%!important; width:100%!important; } .title-link5 .fa{ font-size:15px!important; } @-moz-keyframes rotatebox1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(320deg); -webkit-transform:rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); } } @-moz-keyframes rotatebox1-inner1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(-320deg); -webkit-transform:rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); } } @-moz-keyframes rotatebox2 /*--for firefox--*/{ from{ -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -ms-transform:rotate(50deg); -o-transform:rotate(50deg); } to{ -moz-transform:rotate(500deg); -webkit-transform:rotate(500deg); -ms-transform:rotate(500deg); -o-transform:rotate(500deg); } } @-moz-keyframes rotatebox2-inner2 /*--for firefox--*/{ from{ -moz-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -ms-transform:rotate(-50deg); -o-transform:rotate(-50deg); } to{ -moz-transform:rotate(-500deg); -webkit-transform:rotate(-500deg); -ms-transform:rotate(-500deg); -o-transform:rotate(-500deg); } } @-moz-keyframes rotatebox3 /*--for firefox--*/{ from{ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); } to{ -moz-transform:rotate(670deg); -webkit-transform:rotate(670deg); -ms-transform:rotate(670deg); -o-transform:rotate(670deg); } } @-moz-keyframes rotatebox3-inner3 /*--for firefox--*/{ from{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); } to{ -moz-transform:rotate(-670deg); -webkit-transform:rotate(-670deg); -ms-transform:rotate(-670deg); -o-transform:rotate(-670deg); } } @-moz-keyframes rotatebox4 /*--for firefox--*/{ from{ -moz-transform:rotate(210deg); -webkit-transform:rotate(210deg)); -ms-transform:rotate(210deg); -o-transform:rotate(210deg); } to{ -moz-transform:rotate(860deg); -webkit-transform:rotate(860deg)); -ms-transform:rotate(860deg); -o-transform:rotate(860deg); } } @-moz-keyframes rotatebox4-inner4 /*--for firefox--*/{ from{ -moz-transform:rotate(-210deg); -webkit-transform:rotate(-210deg)); -ms-transform:rotate(-210deg); -o-transform:rotate(-210deg); } to{ -moz-transform:rotate(-860deg); -webkit-transform:rotate(-860deg)); -ms-transform:rotate(-860deg); -o-transform:rotate(-860deg); } } @-moz-keyframes rotatebox5 /*--for firefox--*/{ from{ -moz-transform:rotate(290deg); -webkit-transform:rotate(290deg)); -ms-transform:rotate(290deg); -o-transform:rotate(290deg); } to{ -moz-transform:rotate(1030deg); -webkit-transform:rotate(1030deg)); -ms-transform:rotate(1030deg); -o-transform:rotate(1030deg); } } @-moz-keyframes rotatebox5-inner5 /*--for firefox--*/{ from{ -moz-transform:rotate(-290deg); -webkit-transform:rotate(-290deg)); -ms-transform:rotate(-290deg); -o-transform:rotate(-290deg); } to{ -moz-transform:rotate(-1030deg); -webkit-transform:rotate(-1030deg)); -ms-transform:rotate(-1030deg); -o-transform:rotate(-1030deg); } } @-moz-keyframes ani-linebar /*--for firefox--*/{ from{ width:0px!important; } to{ width:600px!important; } } } /*****************360**********************/ @media only screen and (min-width: 360px){ .box1{ background-color: rgba(0,0,0,0.3); } .cont-one{ margin-left:15%!important; } .outer-circle1{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; position:relative; -webkit-transform: rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); transform: rotate(320deg); } .inner-circle1{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); transform: rotate(-320deg); } .inner-circle1 img { height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto } .overlay-ser1{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser1:hover { z-index: 1; border-radius:50%; display: normal; transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser1{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link1{ color: white; font-size:12px!important; } .title-link1 .fa{ font-size:15px!important; } /****circle two***/ .outer-circle2{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } .inner-circle2{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } .inner-circle2 img{ height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser2{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transform: all 0.5s; -ms-transform: all 0.5s; -o-transform: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser2:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser2{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link2{ color: white; } .title-link2 .fa{ font-size:15px!important; } /********circle 3 ***********/ .outer-circle3{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(680deg); -ms-transform: rotate(680deg); -o-transform: rotate(680deg); transform: rotate(680deg); } .inner-circle3{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-680deg); -ms-transform: rotate(-680deg); -o-transform: rotate(-680deg); transform: rotate(-680deg); } .inner-circle3 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser3{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser3:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link3{ color: white; } .title-link3 .fa{ font-size:15px!important; } /******************************* four***********/ .outer-circle4{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(850deg); -ms-transform: rotate(850deg); -o-transform: rotate(850deg); transform: rotate(850deg); } .inner-circle4{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-850deg); -ms-transform: rotate(-850deg); -o-transform: rotate(-850deg); transform: rotate(-850deg); } .inner-circle4 img{ height:60%!important; width:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser4{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser4:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser4{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link4{ color: white; } .title-link4 .fa{ font-size:15px!important; } /*****************CRICLE five ******/ .outer-circle5{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color:#E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(1040deg); -ms-transform: rotate(1040deg); -o-transform: rotate(1040deg); transform: rotate(1040deg); } .inner-circle5{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-1040deg); -ms-transform: rotate(-1040deg); -o-transform: rotate(-1040deg); transform: rotate(-1040deg); } .inner-circle5 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding:5px!important; } .overlay-ser5{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser5:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser5{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link5{ color: white; } .line-bar{ height:10px!important; width:100px!important; background-color: white; border-bottom: 2px solid red; float:left; position: relative; top:100px!important; } .cont-one{ background-color: transparent!important; text-align: center; margin-left:auto; margin-right:auto; padding-left:6%; box-sizing: border-box; } .sd-img img{ height:100%!important; width:100%!important; } .title-link5 .fa{ font-size:15px!important; } @-moz-keyframes rotatebox1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(320deg); -webkit-transform:rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); } } @-moz-keyframes rotatebox1-inner1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(-320deg); -webkit-transform:rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); } } @-moz-keyframes rotatebox2 /*--for firefox--*/{ from{ -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -ms-transform:rotate(50deg); -o-transform:rotate(50deg); } to{ -moz-transform:rotate(500deg); -webkit-transform:rotate(500deg); -ms-transform:rotate(500deg); -o-transform:rotate(500deg); } } @-moz-keyframes rotatebox2-inner2 /*--for firefox--*/{ from{ -moz-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -ms-transform:rotate(-50deg); -o-transform:rotate(-50deg); } to{ -moz-transform:rotate(-500deg); -webkit-transform:rotate(-500deg); -ms-transform:rotate(-500deg); -o-transform:rotate(-500deg); } } @-moz-keyframes rotatebox3 /*--for firefox--*/{ from{ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); } to{ -moz-transform:rotate(670deg); -webkit-transform:rotate(670deg); -ms-transform:rotate(670deg); -o-transform:rotate(670deg); } } @-moz-keyframes rotatebox3-inner3 /*--for firefox--*/{ from{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); } to{ -moz-transform:rotate(-670deg); -webkit-transform:rotate(-670deg); -ms-transform:rotate(-670deg); -o-transform:rotate(-670deg); } } @-moz-keyframes rotatebox4 /*--for firefox--*/{ from{ -moz-transform:rotate(210deg); -webkit-transform:rotate(210deg)); -ms-transform:rotate(210deg); -o-transform:rotate(210deg); } to{ -moz-transform:rotate(860deg); -webkit-transform:rotate(860deg)); -ms-transform:rotate(860deg); -o-transform:rotate(860deg); } } @-moz-keyframes rotatebox4-inner4 /*--for firefox--*/{ from{ -moz-transform:rotate(-210deg); -webkit-transform:rotate(-210deg)); -ms-transform:rotate(-210deg);-o-transform:rotate(-210deg); } to{ -moz-transform:rotate(-860deg); -webkit-transform:rotate(-860deg)); -ms-transform:rotate(-860deg);-o-transform:rotate(-860deg); } } @-moz-keyframes rotatebox5 /*--for firefox--*/{ from{ -moz-transform:rotate(290deg); -webkit-transform:rotate(290deg)); -ms-transform:rotate(290deg);-o-transform:rotate(290deg); } to{ -moz-transform:rotate(1030deg); -webkit-transform:rotate(1030deg)); -ms-transform:rotate(1030deg); -o-transform:rotate(1030deg); } } @-moz-keyframes rotatebox5-inner5 /*--for firefox--*/{ from{ -moz-transform:rotate(-290deg); -webkit-transform:rotate(-290deg)); -ms-transform:rotate(-290deg); -o-transform:rotate(-290deg); } to{ -moz-transform:rotate(-1030deg); -webkit-transform:rotate(-1030deg)); -ms-transform:rotate(-1030deg); -o-transform:rotate(-1030deg); } } @-moz-keyframes ani-linebar /*--for firefox--*/{ from{ width:0px!important; } to{ width:600px!important; } } } /**********480 *LANDSCAPE********/ @media only screen and (min-width: 480px){ .box1{ background-color: rgba(0,0,0,0.3); } .cont-one{ margin-left:0%!important; padding-left:35%!important; } .outer-circle1{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; position:relative; -webkit-transform: rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); transform: rotate(320deg); } .inner-circle1{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); transform: rotate(-320deg); } .inner-circle1 img { height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto } .overlay-ser1{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser1:hover { z-index: 1; border-radius:50%; display: normal; transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser1{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link1{ color: white; font-size:12px!important; } .title-link1 .fa{ font-size:15px!important; } /****circle two***/ .outer-circle2{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } .inner-circle2{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } .inner-circle2 img{ height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser2{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transform: all 0.5s; -ms-transform: all 0.5s; -o-transform: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser2:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser2{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link2{ color: white; } .title-link2 .fa{ font-size:15px!important; } /********circle 3 ***********/ .outer-circle3{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(680deg); -ms-transform: rotate(680deg); -o-transform: rotate(680deg); transform: rotate(680deg); } .inner-circle3{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-680deg); -ms-transform: rotate(-680deg); -o-transform: rotate(-680deg); transform: rotate(-680deg); } .inner-circle3 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser3{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser3:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link3{ color: white; } .title-link3 .fa { font-size:15px!important; } /******************************* four***********/ .outer-circle4{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(850deg); -ms-transform: rotate(850deg); -o-transform: rotate(850deg); transform: rotate(850deg); } .inner-circle4{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-850deg); -ms-transform: rotate(-850deg); -o-transform: rotate(-850deg); transform: rotate(-850deg); } .inner-circle4 img{ height:60%!important; width:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser4{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser4:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser4{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link4{ color: white; } .title-link4 .fa{ font-size:15px!important; } /*****************CRICLE five ******/ .outer-circle5{ height:150px!important; width:150px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color:#E53935; border-top-color:transparent; float: left; clear:both; -webkit-transform:rotate(1040deg); -ms-transform: rotate(1040deg); -o-transform: rotate(1040deg); transform: rotate(1040deg); } .inner-circle5{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-1040deg); -ms-transform: rotate(-1040deg); -o-transform: rotate(-1040deg); transform: rotate(-1040deg); } .inner-circle5 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding:5px!important; } .overlay-ser5{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser5:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser5{ color: white; float: left; margin-top:10%; font-size:15px!important; text-align: center!important; } .title-link5{ color: white; } .line-bar{ height:10px!important; width:100px!important; background-color: white; border-bottom: 2px solid red; float:left; position: relative; top:100px!important; } .cont-one{ background-color: transparent!important; text-align: center; margin-left:auto; margin-right:auto; padding-left:6%; box-sizing: border-box; } .sd-img img{ height:100%!important; width:100%!important; } .title-link5 .fa{ font-size:15px!important; } .navbar-toggle{ background-color:transparent!important; border:0px!important; margin-top:6%!important; } @-moz-keyframes rotatebox1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(320deg); -webkit-transform:rotate(320deg); -ms-transform:rotate(320deg); -o-transform:rotate(320deg); } } @-moz-keyframes rotatebox1-inner1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); } to{ -moz-transform:rotate(-320deg); -webkit-transform:rotate(-320deg); -ms-transform:rotate(-320deg); -o-transform:rotate(-320deg); } } @-moz-keyframes rotatebox2 /*--for firefox--*/{ from{ -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -ms-transform:rotate(50deg); -o-transform:rotate(50deg); } to{ -moz-transform:rotate(500deg); -webkit-transform:rotate(500deg); -ms-transform:rotate(500deg); -o-transform:rotate(500deg); } } @-moz-keyframes rotatebox2-inner2 /*--for firefox--*/{ from{ -moz-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -ms-transform:rotate(-50deg); -o-transform:rotate(-50deg); } to{ -moz-transform:rotate(-500deg); -webkit-transform:rotate(-500deg); -ms-transform:rotate(-500deg); -o-transform:rotate(-500deg); } } @-moz-keyframes rotatebox3 /*--for firefox--*/{ from{ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); } to{ -moz-transform:rotate(670deg); -webkit-transform:rotate(670deg); -ms-transform:rotate(670deg); -o-transform:rotate(670deg); } } @-moz-keyframes rotatebox3-inner3 /*--for firefox--*/{ from{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); } to{ -moz-transform:rotate(-670deg); -webkit-transform:rotate(-670deg); -ms-transform:rotate(-670deg); -o-transform:rotate(-670deg); } } @-moz-keyframes rotatebox4 /*--for firefox--*/{ from{ -moz-transform:rotate(210deg); -webkit-transform:rotate(210deg)); -ms-transform:rotate(210deg); -o-transform:rotate(210deg); } to{ -moz-transform:rotate(860deg); -webkit-transform:rotate(860deg)); -ms-transform:rotate(860deg); -o-transform:rotate(860deg); } } @-moz-keyframes rotatebox4-inner4 /*--for firefox--*/{ from{ -moz-transform:rotate(-210deg); -webkit-transform:rotate(-210deg)); -ms-transform:rotate(-210deg);-o-transform:rotate(-210deg); } to{ -moz-transform:rotate(-860deg); -webkit-transform:rotate(-860deg)); -ms-transform:rotate(-860deg);-o-transform:rotate(-860deg); } } @-moz-keyframes rotatebox5 /*--for firefox--*/{ from{ -moz-transform:rotate(290deg); -webkit-transform:rotate(290deg)); -ms-transform:rotate(290deg);-o-transform:rotate(290deg); } to{ -moz-transform:rotate(1030deg); -webkit-transform:rotate(1030deg)); -ms-transform:rotate(1030deg); -o-transform:rotate(1030deg); } } @-moz-keyframes rotatebox5-inner5 /*--for firefox--*/{ from{ -moz-transform:rotate(-290deg); -webkit-transform:rotate(-290deg)); -ms-transform:rotate(-290deg); -o-transform:rotate(-290deg); } to{ -moz-transform:rotate(-1030deg); -webkit-transform:rotate(-1030deg)); -ms-transform:rotate(-1030deg); -o-transform:rotate(-1030deg); } } @-moz-keyframes ani-linebar /*--for firefox--*/{ from{ width:0px!important; } to{ width:600px!important; } } } /*****************768**********************/ @media only screen and (min-width: 760px){ .box1{ background-color: rgba(0,0,0,0.3); } .outer-circle1 { height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float: left; clear:both; margin-left:35%; position:relative; } .inner-circle1{ height:100%!important; width:100%!important; border-radius:60%; background-color:white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .inner-circle1:hover { border: 2px green; } .inner-circle1 img{ position: absolute; height:60%; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .overlay-ser1{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s;-o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser1:hover { z-index: 1; border-radius:50%; display: normal; transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser1{ color: white; float: left; margin-top:10%; font-size:20px!important; text-align:center!important; } .title-link1 .fa{ font-size:25px!important; } .title-link1{ color: white; } /****circle two***/ .outer-circle2{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; clear:both; margin-left:35%; -moz-transform:rotate(500deg); -webkit-transform:rotate(500deg); -ms-transform:rotate(500deg);-o-transform:rotate(500deg); transform: rotate(500deg); } .inner-circle2{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-500deg); -ms-transform:rotate(-500deg); -o-transform:rotate(-500deg); transform: rotate(-500deg); } .inner-circle2 img{ height:60%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser2{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser2:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser2{ color: white; float: left; margin-top:10%; font-size:20px!important; text-align:center!important; } .title-link2 .fa{ font-size:25px!important; } .title-link2{ color: white; } /********circle 3 ***********/ .outer-circle3{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; clear:both; margin-left:35%; -webkit-transform:rotate(670deg); -ms-transform:rotate(670deg); -o-transform:rotate(670deg); transform: rotate(670deg); } .inner-circle3{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-670deg); -ms-transform:rotate(-670deg); -o-transform:rotate(-670deg); transform: rotate(-670deg); } .inner-circle3 img{ height:60%; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser3{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser3:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; font-size:20px!important; text-align:center!important; } .title-link3 .fa{ font-size:25px!important; } .title-link3{ color: white; } /******************************* four***********/ .outer-circle4{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; clear:both; -webkit-transform:rotate(860deg); -ms-transform:rotate(860deg); transform: rotate(860deg); margin-left:35%; } .inner-circle4{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-860deg); -ms-transform:rotate(-860deg); -o-transform:rotate(-860deg); transform: rotate(-860deg); } .inner-circle4 img{ height:60%!important; width:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser4{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser4:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser4{ color: white; float: left; margin-top:10%; font-size:20px!important; text-align:center!important; } .title-link4 .fa{ font-size:25px!important; } .title-link4{ color: white; } /*****************CRICLE five ******/ .outer-circle5{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color:#E53935; border-top-color:transparent; clear:both; margin-left:35%; -webkit-transform:rotate(1030deg); -ms-transform:rotate(1030deg); -o-transform:rotate(1030deg); transform: rotate(1030deg); } .inner-circle5{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform:rotate(-1030deg); -ms-transform:rotate(-1030deg); -o-transform:rotate(-1030deg); transform: rotate(-1030deg); } .inner-circle5 img{ height:60%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding:5px!important; } .overlay-ser5{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser5:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color: rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser5{ color: white; float: left; margin-top:10%; font-size:20px!important; text-align:center!important; } .title-link5 .fa{ font-size:25px!important; } .title-link5{ color: white; } .line-bar{ height:10px!important; width:100px!important; background-color: white; border-bottom: 2px solid red; float:left; position: relative; top:100px!important; } .cont-one{ background-color: transparent!important; text-align: center; margin-left:auto!important; margin-right:auto!important; padding-left:6%!important; box-sizing: border-box; } .sd-img img{ height:100%!important; width:100%!important; } @-moz-keyframes rotatebox1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform: rotate(0deg)!important; -o-transform: rotate(0deg)!important; -ms-transform: rotate(0deg)!important; } to{ -moz-transform:rotate(310deg); -webkit-transform: rotate(310deg)!important; -ms-transform: rotate(310deg)!important; -o-transform: rotate(310deg)!important; } } @-moz-keyframes rotatebox1-inner1 /*--for firefox--*/{ from{ -moz-transform:rotate(0deg); -webkit-transform: rotate(0deg)!important; -ms-transform: rotate(0deg)!important; -o-transform: rotate(0deg)!important; } to{ -moz-transform:rotate(-310deg); -webkit-transform: rotate(-310deg)!important; -ms-transform: rotate(-310deg)!important; -o-transform: rotate(-310deg)!important; } } @-moz-keyframes rotatebox2 /*--for firefox--*/{ from{ -moz-transform:rotate(50deg);-webkit-transform:rotate(50deg);-ms-transform:rotate(50deg);-o-transform:rotate(50deg); } to{ -moz-transform:rotate(500deg);-webkit-transform:rotate(500deg);-ms-transform:rotate(500deg);-o-transform:rotate(500deg); } } @-moz-keyframes rotatebox2-inner2 /*--for firefox--*/{ from{ -moz-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-o-transform:rotate(-50deg); } to{ -moz-transform:rotate(-500deg);-webkit-transform:rotate(-500deg);-ms-transform:rotate(-500deg);-o-transform:rotate(-500deg); } } @-moz-keyframes rotatebox3 /*--for firefox--*/{ from{ -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg); } to{ -moz-transform:rotate(670deg);-webkit-transform:rotate(670deg);-ms-transform:rotate(670deg);-o-transform:rotate(670deg); } } @-moz-keyframes rotatebox3-inner3 /*--for firefox--*/{ from{ -moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); } to{ -moz-transform:rotate(-670deg);-webkit-transform:rotate(-670deg);-ms-transform:rotate(-670deg);-o-transform:rotate(-670deg); } } @-moz-keyframes rotatebox4 /*--for firefox--*/{ from{ -moz-transform:rotate(210deg);-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);-o-transform:rotate(210deg); } to{ -moz-transform:rotate(860deg);-webkit-transform:rotate(860deg);-ms-transform:rotate(860deg);-o-transform:rotate(860deg); } } @-moz-keyframes rotatebox4-inner4 /*--for firefox--*/{ from{ -moz-transform:rotate(-210deg);-webkit-transform:rotate(-210deg);-ms-transform:rotate(-210deg);-o-transform:rotate(-210deg); } to{ -moz-transform:rotate(-860deg);-webkit-transform:rotate(-860deg);-ms-transform:rotate(-860deg);-o-transform:rotate(-860deg); } } @-moz-keyframes rotatebox5 /*--for firefox--*/{ from{ -moz-transform:rotate(290deg);-webkit-transform:rotate(290deg);-ms-transform:rotate(290deg);-o-transform:rotate(290deg); } to{ -moz-transform:rotate(1030deg);-webkit-transform:rotate(1030deg);-ms-transform:rotate(1030deg);-o-transform:rotate(1030deg); } } @-moz-keyframes rotatebox5-inner5 /*--for firefox--*/{ from{ -moz-transform:rotate(-290deg);-webkit-transform:rotate(-290deg);-ms-transform:rotate(-290deg);-o-transform:rotate(-290deg); } to{ -moz-transform:rotate(-1030deg);-webkit-transform:rotate(-1030deg);-ms-transform:rotate(-1030deg);-o-transform:rotate(-1030deg); } } @-moz-keyframes ani-linebar /*--for firefox--*/{ from{ width:0px!important; } to{ width:600px!important; } } } /**********min width 1080 ************/ @media only screen and (min-width: 1080px){ .box1{ background-color: rgba(0,0,0,0.3); } .outer-circle1{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 50%; border-left-color: transparent; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-color: #E53935; border-top-color:transparent; float:left!important; margin-left:0px!important; position:relative; clear: none!important; } .inner-circle1{ height:100%!important; width:100%!important; border-radius:50%; background-color:white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .inner-circle1:hover { transform: scale(1,1); border: 2px green; } .inner-circle1 img{ position: absolute; height:60%; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .overlay-ser1{ height:50%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s;-o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser1:hover { z-index: 1; border-radius:50%; display: normal; opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser1{ color: white; float: left; margin-top:10%; text-align: center!important; } .title-link1 { color: white; text-align:center!important; } /****circle two***/ .outer-circle2 { height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 60%; border-left-color: transparent; border-top-right-radius: 60%; border-bottom-right-radius: 60%; border-bottom-left-radius: 60%; border-bottom-color: #E53935; border-top-color:transparent; float: left!important; -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -ms-transform:rotate(50deg); -o-transform:rotate(50deg); transform:rotate(50deg); margin-left:0px!important; clear: none!important; } .inner-circle2{ height:100%!important; width:100%!important; background-color: white; border-radius:60%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; margin: auto; -moz-transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -ms-transform:rotate(-50deg); -o-transform:rotate(-50deg); transform:rotate(-50deg); } .inner-circle2 img{ height:70%!important; width:70%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser2{ height:70%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser2:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; } .title-link3{ color: white; } /********circle 3 ***********/ .outer-circle3{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 70%; border-left-color: transparent; border-top-right-radius: 70%; border-bottom-right-radius: 70%; border-bottom-left-radius: 70%; border-bottom-color: #E53935; border-top-color:transparent; float: left!important; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform: rotate(90deg); margin-left:0px!important; clear: none!important; } .inner-circle3{ height:100%!important; width:100%!important; background-color: white; border-radius:70%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg);transform: rotate(-90deg); } .inner-circle3 img{ height:70%!important; width:70%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser3{ height:60%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser3:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser3{ color: white; float: left; margin-top:10%; } .title-link3{ color: white; } /******************************* four***********/ .outer-circle4{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 70%; border-left-color: transparent; border-top-right-radius: 70%; border-bottom-right-radius: 70%; border-bottom-left-radius: 70%; border-bottom-color: #E53935; border-top-color:transparent; float: left; -moz-transform:rotate(210deg); -webkit-transform:rotate(210deg); -ms-transform:rotate(210deg); -o-transform:rotate(210deg);transform: rotate(210deg); margin-left:0px!important; clear: none!important; } .inner-circle4{ height:100%!important; width:100%!important; background-color: white; border-radius:70%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -moz-transform:rotate(-210deg); -webkit-transform:rotate(-210deg); -ms-transform:rotate(-210deg); -o-transform:rotate(-210deg); transform: rotate(-210deg); } .inner-circle4 img{ height:70%!important; width:70%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .overlay-ser4{ height:70%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser4:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser4{ color: white; float: left; margin-top:10%; } .title-link4{ color: white; } /*****************CRICLE five ******/ .outer-circle5{ height:200px!important; width:200px!important; background-color: white; border-width: 5px!important; border: #E53935 solid; border-top-left-radius: 70%; border-left-color: transparent; border-top-right-radius: 70%; border-bottom-right-radius: 70%; border-bottom-left-radius: 70%; border-bottom-color:#E53935; border-top-color:transparent; float: left; -moz-transform:rotate(290deg); -webkit-transform:rotate(290deg); -ms-transform:rotate(290deg); -o-transform:rotate(290deg); transform: rotate(290deg); margin-left:0px!important; clear: none!important; } .inner-circle5{ height:100%!important; width:100%!important; background-color: white; border-radius:70%; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; -moz-transform:rotate(-290deg); -webkit-transform:rotate(-290deg); -ms-transform:rotate(-290deg); -o-transform:rotate(-290deg); transform: rotate(-290deg); } .inner-circle5 img{ height:70%!important; background-color: white; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding:5px!important; } .overlay-ser5{ height:70%; background-color:transparent; position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity:0; } .overlay-ser5:hover { z-index: 1; border-radius:50%; display: normal; -webkit-transform:scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); opacity:1; height:100%; background-color:rgba(0,0,0,0.3); position: absolute; text-align: center; top:0; bottom: 0; left: 0; right: 0; margin: auto; float: left; } .title-ser5{ color: white; float: left; margin-top:10%; } .title-link5{ color: white; } .line-bar{ height:10px!important; width:100px!important; background-color: white; border-bottom: 2px solid red; float:left; position: relative; top:100px!important; } .cont-one{ background-color: transparent!important; text-align: center; margin-left:auto; margin-right:auto; padding-left:6%; box-sizing: border-box; } .sd-img img{ height:100%!important; width:100%!important; } @-moz-keyframes rotatebox1 /*--for firefox--*/{ from{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); } to{ -moz-transform: rotate(220deg); -webkit-transform: rotate(220deg);-o-transform: rotate(220deg);-ms-transform: rotate(220deg); } } @-moz-keyframes rotatebox1-inner1 /*--for firefox--*/{ from{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); } to{ -moz-transform: rotate(-220deg); -webkit-transform: rotate(-220deg); -ms-transform: rotate(-220deg); -o-transform: rotate(-220deg); } } @-moz-keyframes rotatebox2 /*--for firefox--*/{ from{ -moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);-o-transform:rotate(50deg); } to{ -moz-transform:rotate(410deg);-ms-transform:rotate(410deg);-webkit-transform:rotate(410deg);-o-transform:rotate(410deg); } } @-moz-keyframes rotatebox2-inner2 /*--for firefox--*/{ from{ -moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);-o-transform:rotate(-50deg); } to{ -moz-transform:rotate(-410deg);-ms-transform:rotate(-410deg);-webkit-transform:rotate(-410deg);-o-transform:rotate(-410deg); } } @-moz-keyframes rotatebox3 /*--for firefox--*/{ from{ -moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg); -o-transform:rotate(90deg); } to{ -moz-transform:rotate(580deg);-ms-transform:rotate(580deg);-webkit-transform:rotate(580deg);-o-transform:rotate(580deg); } } @-moz-keyframes rotatebox3-inner3 /*--for firefox--*/{ from{ -moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg); } to{ -moz-transform:rotate(-580deg);-ms-transform:rotate(-580deg);-webkit-transform:rotate(-580deg);-o-transform:rotate(-580deg); } } @-moz-keyframes rotatebox4 /*--for firefox--*/{ from{ -moz-transform:rotate(210deg);-ms-transform:rotate(210deg);-webkit-transform:rotate(210deg); -o-transform:rotate(210deg); } to{ -moz-transform:rotate(770deg);-ms-transform:rotate(770deg);-webkit-transform:rotate(770deg);-o-transform:rotate(770deg); } } @-moz-keyframes rotatebox4-inner4 /*--for firefox--*/{ from{ -moz-transform:rotate(-210deg);-ms-transform:rotate(-210deg);-webkit-transform:rotate(-210deg); -o-transform:rotate(-210deg); } to{ -moz-transform:rotate(-770deg);-ms-transform:rotate(-770deg);-webkit-transform:rotate(-770deg);-o-transform:rotate(-770deg); } } @-moz-keyframes rotatebox5 /*--for firefox--*/{ from{ -moz-transform:rotate(290deg);-ms-transform:rotate(290deg);-webkit-transform:rotate(290deg);-o-transform:rotate(290deg); } to{ -moz-transform:rotate(940deg);-ms-transform:rotate(940deg);-webkit-transform:rotate(940deg);-o-transform:rotate(940deg); } } @-moz-keyframes rotatebox5-inner5 /*--for firefox--*/{ from{ -moz-transform:rotate(-290deg);-ms-transform:rotate(-290deg);-webkit-transform:rotate(-290deg);-o-transform:rotate(-290deg); } to{ -moz-transform:rotate(-940deg);-ms-transform:rotate(-940deg);-webkit-transform:rotate(-940deg);-o-transform:rotate(-940deg); } } @-moz-keyframes ani-linebar /*--for firefox--*/{ from{ width:0px!important; } to{ width:600px!important; } } }