Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @import 'https://fonts.googleapis.com/css?family=Lato:300';
- @import 'https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css';
- .center{
- margin-left : auto;
- margin-right : auto;
- display : table;
- position : relative;
- }
- .weather{
- float : left;
- }
- h2{
- margin-top : 0px;
- margin-bottom : 2em;
- color : #fff;
- font-weight : 100;
- font-size : 1em;
- text-transform : uppercase;
- width : 100%;
- text-align : center;
- }
- h2 a{
- color : #fff;
- }
- .weather{
- height : 200px;
- width : 200px;
- position : relative;
- }
- /* ################################################### */
- /* ## SUN ############################################ */
- /* ################################################### */
- .sun_form{
- height : 200px;
- width : 200px;
- animation-name : sun_turn;
- animation-duration: 20s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- -webkit-animation-delay : 0.7s;
- animation-delay : 0.7s;
- }
- .sun_form div:nth-child(1){
- height : 0px;
- width : 0px;
- border-radius : 50%;
- top : 50%;
- left : 50%;
- background-color : #F4C800;
- position : absolute;
- animation-name : sun_center_appear;
- animation-duration: 0.5s;
- -webkit-animation-fill-mode : forwards;
- animation-fill-mode : forwards;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- }
- .sun_form div:not(:nth-child(1)){
- background-color : transparent;
- width : 100%;
- height : 100%;
- position : absolute;
- top : 50%;
- left : 50%;
- margin-left : -50%;
- margin-top : -50%;
- }
- .sun_form div:not(:nth-child(1)) span{
- background-color : transparent;
- width : 0;
- height : 0;
- border-style : solid;
- border-width : 0 7px 20px 7px;
- border-color : transparent transparent #F4C800 transparent;
- position : absolute;
- top : 40px;
- left : 95px;
- opacity : 0;
- animation-name : sun_arrow_appear;
- animation-duration: 0.7s;
- -webkit-animation-fill-mode : forwards;
- animation-fill-mode : forwards;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- }
- .sun_form div:nth-child(2){
- -ms-transform : rotate(45deg);
- -webkit-transform : rotate(45deg);
- transform : rotate(45deg);
- }
- .sun_form div:nth-child(3){
- -ms-transform : rotate(90deg);
- -webkit-transform : rotate(90deg);
- transform : rotate(90deg);
- }
- .sun_form div:nth-child(4){
- -ms-transform : rotate(135deg);
- -webkit-transform : rotate(135deg);
- transform : rotate(135deg);
- }
- .sun_form div:nth-child(5){
- -ms-transform : rotate(180deg);
- -webkit-transform : rotate(180deg);
- transform : rotate(180deg);
- }
- .sun_form div:nth-child(6){
- -ms-transform : rotate(225deg);
- -webkit-transform : rotate(225deg);
- transform : rotate(225deg);
- }
- .sun_form div:nth-child(7){
- -ms-transform : rotate(270deg);
- -webkit-transform : rotate(270deg);
- transform : rotate(270deg);
- }
- .sun_form div:nth-child(8){
- -ms-transform : rotate(315deg);
- -webkit-transform : rotate(315deg);
- transform : rotate(315deg);
- }
- @keyframes sun_center_appear{
- to{
- height : 50%;
- width : 50%;
- top : 25%;
- left : 25%;
- }
- }
- @keyframes sun_arrow_appear{
- 0%{
- top : 50%;
- opacity : 0;
- }
- 50%{
- top : 50%;
- opacity : 0;
- }
- 100%{
- opacity : 1;
- top : 20px;
- }
- }
- @keyframes sun_turn{
- from{
- -ms-transform : rotate(0deg);
- -webkit-transform : rotate(0deg);
- transform : rotate(0deg);
- }
- to{
- -ms-transform : rotate(360deg);
- -webkit-transform : rotate(360deg);
- transform : rotate(360deg);
- }
- }
- /* ################################################### */
- /* ## CLOUD ########################################## */
- /* ################################################### */
- .cloud div:nth-child(1) .cloud_form{
- top : 20px;
- position : absolute;
- opacity : 1;
- animation-name : cloud_moove;
- animation-duration: 4s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- -moz-transform: scale(0.5);
- }
- .cloud div:nth-child(1) .cloud_form div{
- background-color : grey;
- zoom : 0.5;
- }
- .cloud_form{
- opacity : 0;
- animation-name : cloud_appear;
- animation-duration: 0.5s;
- -webkit-animation-fill-mode : forwards;
- animation-fill-mode : forwards;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- }
- .cloud_form div{
- background-color : white;
- position : absolute;
- }
- .cloud_form div:nth-child(1){
- height : 60px;
- width : 60px;
- border-radius : 50%;
- left : 5px;
- top : 95px;
- }
- .cloud_form div:nth-child(2){
- height : 40px;
- width : 40px;
- border-radius : 50%;
- left : 155px;
- top : 115px;
- }
- .cloud_form div:nth-child(3){
- height : 40px;
- width : 140px;
- left : 35px;
- top : 115px;
- }
- .cloud_form div:nth-child(4){
- height : 100px;
- width : 100px;
- border-radius : 50%;
- left : 35px;
- top : 45px;
- }
- .cloud_form div:nth-child(5){
- height : 60px;
- width : 60px;
- border-radius : 50%;
- left : 120px;
- top : 85px;
- }
- @keyframes cloud_appear{
- to{
- opacity : 1;
- }
- }
- @keyframes cloud_moove{
- 0%{
- left : calc(100% - 100px);
- opacity : 0;
- }
- 10%{
- left : calc(95% - 100px);
- opacity : 1;
- }
- 90%{
- left : 5%;
- opacity : 1;
- }
- 100%{
- left : 0%;
- opacity : 0;
- }
- }
- /* ################################################### */
- /* ## STORM ########################################## */
- /* ################################################### */
- .storm .cloud_form{
- position : absolute;
- top : -29px;
- }
- .storm .rain_form{
- position : absolute;
- }
- .storm .rain_form:nth-child(3){
- top : 126px;
- left : 30px;
- }
- .storm .rain_form:nth-child(4){
- top : 136px;
- left : 40px;
- }
- .storm .rain_form:nth-child(4) div{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .storm .rain_form:nth-child(5){
- top : 126px;
- left : 50px;
- }
- .storm .rain_form:nth-child(5) div{
- -webkit-animation-delay : 0.8s;
- animation-delay : 0.8s;
- }
- .storm .rain_form:nth-child(6){
- top : 136px;
- left : 60px;
- }
- .storm .rain_form:nth-child(6) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .storm .rain_form:nth-child(7){
- top : 126px;
- left : 70px;
- }
- .storm .rain_form:nth-child(7) div{
- -webkit-animation-delay : 0.7s;
- animation-delay : 0.7s;
- }
- .storm .rain_form:nth-child(8){
- top : 136px;
- left : 80px;
- }
- .storm .rain_form:nth-child(8) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .storm .rain_form:nth-child(9){
- top : 126px;
- left : 90px;
- }
- .storm .rain_form:nth-child(9) div{
- -webkit-animation-delay : 0.5s;
- animation-delay : 0.5s;
- }
- .storm .rain_form:nth-child(10){
- top : 136px;
- left : 100px;
- }
- .storm .rain_form:nth-child(10) div{
- -webkit-animation-delay : 0.3s;
- animation-delay : 0.3s;
- }
- .storm .rain_form:nth-child(11){
- top : 126px;
- left : 110px;
- }
- .storm .rain_form:nth-child(11) div{
- -webkit-animation-delay : 0.9s;
- animation-delay : 0.9s;
- }
- .storm .rain_form:nth-child(12){
- top : 136px;
- left : 120px;
- }
- .storm .rain_form:nth-child(12) div{
- -webkit-animation-delay : 0.4s;
- animation-delay : 0.4s;
- }
- .storm .storm_form{
- left : 140px;
- top : 94px;
- position : absolute;
- }
- .storm_form div{
- width : 0;
- height : 0;
- border-style : solid;
- position : absolute;
- transform: rotate(10deg);
- }
- .storm_form div:nth-child(1){
- border-width : 0 0 40px 20px;
- border-color : transparent transparent #5A5A5A transparent;
- left : 0px;
- top : 0px;
- animation-name : storm_d1_flash;
- animation-duration: 2s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- }
- .storm_form div:nth-child(2){
- border-width : 40px 20px 0 0;
- border-color : #5A5A5A transparent transparent transparent;
- left : 10px;
- top : 30px;
- animation-name : storm_d2_flash;
- animation-duration: 2s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- }
- @keyframes storm_d1_flash{
- 45% {
- border-color : transparent transparent #5A5A5A transparent;
- }
- 50% {
- border-color : transparent transparent #F4C800 transparent;
- }
- 55% {
- border-color : transparent transparent #5A5A5A transparent;
- }
- }
- @keyframes storm_d2_flash{
- 45% {
- border-color : #5A5A5A transparent transparent transparent;
- }
- 50% {
- border-color : #F4C800 transparent transparent transparent;
- }
- 55% {
- border-color : #5A5A5A transparent transparent transparent;
- }
- }
- /* ################################################### */
- /* ## RAIN ########################################### */
- /* ################################################### */
- .rain .cloud_form{
- position : absolute;
- top : -29px;
- }
- .rain .rain_form{
- position : absolute;
- }
- .rain .rain_form:nth-child(2){
- top : 126px;
- left : 30px;
- }
- .rain .rain_form:nth-child(3){
- top : 136px;
- left : 120px;
- }
- .rain .rain_form:nth-child(3) div{
- -webkit-animation-delay : 0.4s;
- animation-delay : 0.4s;
- }
- .rain .rain_form:nth-child(4){
- top : 136px;
- left : 40px;
- }
- .rain .rain_form:nth-child(4) div{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .rain .rain_form:nth-child(5){
- top : 126px;
- left : 50px;
- }
- .rain .rain_form:nth-child(5) div{
- -webkit-animation-delay : 0.8s;
- animation-delay : 0.8s;
- }
- .rain .rain_form:nth-child(6){
- top : 136px;
- left : 60px;
- }
- .rain .rain_form:nth-child(6) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .rain .rain_form:nth-child(7){
- top : 126px;
- left : 70px;
- }
- .rain .rain_form:nth-child(7) div{
- -webkit-animation-delay : 0.7s;
- animation-delay : 0.7s;
- }
- .rain .rain_form:nth-child(8){
- top : 136px;
- left : 80px;
- }
- .rain .rain_form:nth-child(8) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .rain .rain_form:nth-child(9){
- top : 126px;
- left : 90px;
- }
- .rain .rain_form:nth-child(9) div{
- -webkit-animation-delay : 0.5s;
- animation-delay : 0.5s;
- }
- .rain .rain_form:nth-child(10){
- top : 136px;
- left : 100px;
- }
- .rain .rain_form:nth-child(10) div{
- -webkit-animation-delay : 0.3s;
- animation-delay : 0.3s;
- }
- .rain .rain_form:nth-child(11){
- top : 126px;
- left : 110px;
- }
- .rain .rain_form:nth-child(11) div{
- -webkit-animation-delay : 0.9s;
- animation-delay : 0.9s;
- }
- .rain .rain_form:nth-child(12){
- top : 136px;
- left : 120px;
- }
- .rain .rain_form:nth-child(12) div{
- -webkit-animation-delay : 0.6s;
- animation-delay : 0.6s;
- }
- .rain .rain_form:nth-child(13){
- top : 126px;
- left : 130px;
- }
- .rain .rain_form:nth-child(13) div{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .rain .rain_form:nth-child(14){
- top : 136px;
- left : 140px;
- }
- .rain .rain_form:nth-child(14) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .rain .rain_form:nth-child(15){
- top : 126px;
- left : 150px;
- }
- .rain .rain_form:nth-child(15) div{
- -webkit-animation-delay : 0.9s;
- animation-delay : 0.9s;
- }
- .rain_form{
- height : 50px;
- width : 5px;
- position : relative;
- -ms-transform : rotate(30deg);
- -webkit-transform : rotate(30deg);
- transform : rotate(30deg);
- }
- .rain_form div{
- top : 0px;
- left : 0px;
- height : 0px;
- width : 5px;
- background-color : #078BD2;
- border-radius : 5px;
- position : absolute;
- animation-name : rain_fall;
- animation-duration: 0.4s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- }
- @keyframes rain_fall{
- 0%{
- height : 0px;
- top : 0px;
- }
- 20% {
- height : 40%;
- top : 0px;
- }
- 80% {
- height : 40%;
- top : 70%
- }
- 100% {
- height : 0px;
- top : 100%;
- }
- }
- /* ################################################### */
- /* ## CLOUD SUN RAIN ################################# */
- /* ################################################### */
- .cloud_sun_rain .sun_form{
- zoom : 0.6;
- -moz-transform : scale(0.6);
- left : 133px;
- top : 6px;
- position : absolute;
- }
- .cloud_sun_rain .cloud_form{
- zoom : 0.8;
- -moz-transform : scale(0.8);
- left : 28px;
- top : 6px;
- position : absolute;
- }
- .cloud_sun_rain .rain_form{
- position : absolute;
- }
- .cloud_sun_rain .rain_form:nth-child(3){
- top : 131px;
- left : 63px;
- }
- .cloud_sun_rain .rain_form:nth-child(3) div{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .cloud_sun_rain .rain_form:nth-child(4){
- top : 131px;
- left : 88px;
- }
- .cloud_sun_rain .rain_form:nth-child(4) div{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .cloud_sun_rain .rain_form:nth-child(5){
- top : 131px;
- left : 112px;
- }
- .cloud_sun_rain .rain_form:nth-child(5) div{
- -webkit-animation-delay : 0.8s;
- animation-delay : 0.8s;
- }
- /* ################################################### */
- /* ## SNOW ########################################### */
- /* ################################################### */
- .snow .cloud_form {
- position : absolute;
- top : -29px;
- }
- .snow .snow_form{
- position : absolute;
- }
- .snow .snow_form:nth-child(2){
- top : 126px;
- left : 30px;
- }
- .snow .snow_form:nth-child(3){
- top : 136px;
- left : 120px;
- }
- .snow .snow_form:nth-child(3) span{
- -webkit-animation-delay : 0.4s;
- animation-delay : 0.4s;
- }
- .snow .snow_form:nth-child(4){
- top : 136px;
- left : 40px;
- }
- .snow .snow_form:nth-child(4) span{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .snow .snow_form:nth-child(5){
- top : 126px;
- left : 50px;
- }
- .snow .snow_form:nth-child(5) span{
- -webkit-animation-delay : 0.8s;
- animation-delay : 0.8s;
- }
- .snow .snow_form:nth-child(6){
- top : 136px;
- left : 60px;
- }
- .snow .snow_form:nth-child(6) span{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .snow .snow_form:nth-child(7){
- top : 126px;
- left : 70px;
- }
- .snow .snow_form:nth-child(7) span{
- -webkit-animation-delay : 0.7s;
- animation-delay : 0.7s;
- }
- .snow .snow_form:nth-child(8){
- top : 136px;
- left : 80px;
- }
- .snow .snow_form:nth-child(8) span{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .snow .snow_form:nth-child(9){
- top : 126px;
- left : 90px;
- }
- .snow .snow_form:nth-child(9) span{
- -webkit-animation-delay : 0.5s;
- animation-delay : 0.5s;
- }
- .snow .snow_form:nth-child(10){
- top : 136px;
- left : 100px;
- }
- .snow .snow_form:nth-child(10) span{
- -webkit-animation-delay : 0.3s;
- animation-delay : 0.3s;
- }
- .snow .snow_form:nth-child(11){
- top : 126px;
- left : 110px;
- }
- .snow .snow_form:nth-child(11) span{
- -webkit-animation-delay : 0.9s;
- animation-delay : 0.9s;
- }
- .snow .snow_form:nth-child(12){
- top : 136px;
- left : 120px;
- }
- .snow .snow_form:nth-child(12) span{
- -webkit-animation-delay : 0.6s;
- animation-delay : 0.6s;
- }
- .snow .snow_form:nth-child(13){
- top : 126px;
- left : 130px;
- }
- .snow .snow_form:nth-child(13) span{
- -webkit-animation-delay : 0.2s;
- animation-delay : 0.2s;
- }
- .snow .snow_form:nth-child(14){
- top : 136px;
- left : 140px;
- }
- .snow .snow_form:nth-child(14) span{
- -webkit-animation-delay : 0.1s;
- animation-delay : 0.1s;
- }
- .snow .snow_form:nth-child(15){
- top : 126px;
- left : 150px;
- }
- .snow .snow_form:nth-child(15) span{
- -webkit-animation-delay : 0.9s;
- animation-delay : 0.9s;
- }
- .snow .snow_form:nth-child(16){
- top : 126px;
- left : 30px;
- }
- .snow .snow_form:nth-child(16) span{
- -webkit-animation-delay : 1s;
- animation-delay : 1s;
- }
- .snow .snow_form:nth-child(17){
- top : 136px;
- left : 120px;
- }
- .snow .snow_form:nth-child(17) span{
- -webkit-animation-delay : 1.4s;
- animation-delay : 1.4s;
- }
- .snow .snow_form:nth-child(18){
- top : 136px;
- left : 40px;
- }
- .snow .snow_form:nth-child(18) span{
- -webkit-animation-delay : 1.2s;
- animation-delay : 1.2s;
- }
- .snow .snow_form:nth-child(19){
- top : 126px;
- left : 50px;
- }
- .snow .snow_form:nth-child(19) span{
- -webkit-animation-delay : 1.8s;
- animation-delay : 1.8s;
- }
- .snow .snow_form:nth-child(20){
- top : 136px;
- left : 60px;
- }
- .snow .snow_form:nth-child(20) span{
- -webkit-animation-delay : 1.1s;
- animation-delay : 1.1s;
- }
- .snow .snow_form:nth-child(21){
- top : 126px;
- left : 70px;
- }
- .snow .snow_form:nth-child(21) span{
- -webkit-animation-delay : 1.7s;
- animation-delay : 1.7s;
- }
- .snow .snow_form:nth-child(22){
- top : 136px;
- left : 80px;
- }
- .snow .snow_form:nth-child(22) span{
- -webkit-animation-delay : 1.1s;
- animation-delay : 1.1s;
- }
- .snow .snow_form:nth-child(23){
- top : 126px;
- left : 90px;
- }
- .snow .snow_form:nth-child(23) span{
- -webkit-animation-delay : 1.5s;
- animation-delay : 1.5s;
- }
- .snow .snow_form:nth-child(24){
- top : 136px;
- left : 100px;
- }
- .snow .snow_form:nth-child(24) span{
- -webkit-animation-delay : 1.3s;
- animation-delay : 1.3s;
- }
- .snow .snow_form:nth-child(25){
- top : 126px;
- left : 110px;
- }
- .snow .snow_form:nth-child(25) span{
- -webkit-animation-delay : 1.9s;
- animation-delay : 1.9s;
- }
- .snow .snow_form:nth-child(26){
- top : 136px;
- left : 120px;
- }
- .snow .snow_form:nth-child(26) span{
- -webkit-animation-delay : 1.6s;
- animation-delay : 1.6s;
- }
- .snow .snow_form:nth-child(27){
- top : 126px;
- left : 130px;
- }
- .snow .snow_form:nth-child(27) span{
- -webkit-animation-delay : 1.2s;
- animation-delay : 1.2s;
- }
- .snow .snow_form:nth-child(28){
- top : 136px;
- left : 140px;
- }
- .snow .snow_form:nth-child(28) span{
- -webkit-animation-delay : 1.1s;
- animation-delay : 1.1s;
- }
- .snow .snow_form:nth-child(29){
- top : 126px;
- left : 150px;
- }
- .snow .snow_form:nth-child(29) span{
- -webkit-animation-delay : 1.9s;
- animation-delay : 1.9s;
- }
- .snow_form{
- height : 50px;
- width : 5px;
- position : relative;
- -ms-transform : rotate(30deg);
- -webkit-transform : rotate(30deg);
- transform : rotate(30deg);
- }
- .snow_form span{
- border-radius : 50%;
- background-color : white;
- height : 5px;
- width : 5px;
- position : absolute;
- animation-name : snow_fall;
- animation-duration: 2s;
- -webkit-animation-timing-function : linear;
- animation-timing-function : linear;
- -webkit-animation-iteration-count : infinite;
- animation-iteration-count : infinite;
- }
- @keyframes snow_fall{
- 0%{
- top : 0px;
- opacity : 0;
- left : 0px;
- }
- 10%{
- top : 10%;
- opacity : 1;
- left : 5px;
- }
- 20%{
- top : 20%;
- opacity : 1;
- left : 10px;
- }
- 30%{
- top : 30%;
- opacity : 1;
- left : 4px;
- }
- 40%{
- top : 40%;
- opacity : 1;
- left : 9px;
- }
- 50%{
- top : 50%;
- opacity : 1;
- left : 6px;
- }
- 60%{
- top : 60%;
- opacity : 1;
- left : 11px;
- }
- 70%{
- top : 70%;
- opacity : 1;
- left : 3px;
- }
- 80%{
- top : 80%;
- opacity : 1;
- left : 8px;
- }
- 90%{
- top : 90%;
- opacity : 1;
- left : 5px;
- }
- 100%{
- top : 100%;
- opacity : 0;
- left : 8px;
- }
- }
- .widget {
- width:300px;
- height:330px;
- -webkit-box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.75);
- -moz-box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.75);
- box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.75);
- background-color: #cce6ff;
- }
- .details
- {
- top: 0;
- left: 0;
- right: 0;
- padding: 16px 20px;
- color: #888;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- transition: color $speed ease;
- .thunder &
- {
- color: #ddd;
- }
- .right
- {
- text-align: right;
- }
- #date
- {
- margin: 4px 0;
- }
- #summary
- {
- font-weight: 600;
- font-size: 22px;
- }
- .temp
- {
- font-size: 60px;
- line-height: 60px;
- span
- {
- font-size: 18px;
- line-height: 30px;
- vertical-align: top;
- margin-left: 5px;
- }
- }
- }
- @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);
- /*************************
- *******Typography******
- **************************/
- body {
- background: #fff;
- font-family: 'Open Sans', sans-serif;
- color:#4e4e4e;
- line-height: 22px;
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-weight: 600;
- font-family: 'Open Sans', sans-serif;
- color:#4e4e4e;
- }
- h1{
- font-size: 36px;
- color:#fff;
- }
- h2{
- font-size: 20px;
- }
- h3{
- font-size: 16px;
- color: #787878;
- font-weight: 400;
- line-height: 24px;
- }
- h4{
- font-size: 16px;
- }
- a {
- color: #c52d2f;
- -webkit-transition: color 300ms, background-color 300ms;
- -moz-transition: color 300ms, background-color 300ms;
- -o-transition: color 300ms, background-color 300ms;
- transition: color 300ms, background-color 300ms;
- }
- a:hover, a:focus {
- color: #d43133;
- }
- hr {
- border-top: 1px solid #e5e5e5;
- border-bottom: 1px solid #fff;
- }
- .btn-primary {
- padding: 8px 20px;
- background: #c52d2f;
- color: #fff;
- border-radius: 4px;
- border:none;
- margin-top: 10px;
- }
- .btn-primary:hover,
- .btn-primary:focus{
- background: #c52d2f;
- outline: none;
- box-shadow: none;
- }
- .btn-transparent {
- border: 3px solid #fff;
- background: transparent;
- color: #fff;
- }
- .btn-transparent:hover {
- border-color: rgba(255, 255, 255, 0.5);
- }
- a:hover,
- a:focus {
- color: #111;
- text-decoration: none;
- outline: none;
- }
- .dropdown-menu {
- margin-top: -1px;
- min-width: 180px;
- }
- .center h2{
- font-size: 36px;
- margin-top: 0;
- margin-bottom: 20px;
- }
- .media>.pull-left{
- margin-right: 20px;
- }
- .media>.pull-right{
- margin-left: 20px;
- }
- body > section {
- padding: 70px 0;
- }
- .center {
- text-align: center;
- padding-bottom: 55px;
- }
- .scaleIn {
- -webkit-animation-name: scaleIn;
- animation-name: scaleIn;
- }
- .lead{
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- }
- .transparent-bg {
- background-color: transparent !important;
- margin-bottom: 0;
- }
- @-webkit-keyframes scaleIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @keyframes scaleIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0);
- -ms-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- }
- }
- /*************************
- *******Header******
- **************************/
- #header .search{
- display: inline-block;
- }
- .navbar>.container .navbar-brand{
- margin-left: 0;
- }
- .top-bar {
- padding: 10px 0;
- background: #191919;
- border-bottom: 1px solid #222;
- line-height: 28px;
- }
- .top-number{
- color: #fff;
- }
- .top-number p{
- margin: 0
- }
- .social{
- text-align: right;
- }
- .social-share{
- display: inline-block;
- list-style: none;
- padding: 0;
- margin: 0;
- }
- ul.social-share li {
- display: inline-block;
- }
- ul.social-share li a {
- display: inline-block;
- color: #fff;
- background: #404040;
- width: 25px;
- height: 25px;
- line-height: 25px;
- text-align: center;
- border-radius: 2px;
- }
- ul.social-share li a:hover {
- background: #c52d2f;
- color: #fff;
- }
- .search i {
- color: #fff;
- }
- input.search-form{
- background: transparent;
- border: 0 none;
- width: 60px;
- padding: 0 10px;
- color: #FFF;
- -webkit-transition: all 400ms;
- -moz-transition: all 400ms;
- -ms-transition: all 400ms;
- -o-transition: all 400ms;
- transition: all 400ms;
- }
- input.search-form::-webkit-input-placeholder{
- color: transparent;
- }
- input.search-form:hover::-webkit-input-placeholder {
- color: #fff;
- }
- input.search-form:hover {
- width: 180px;
- }
- .navbar-brand {
- padding: 0;
- margin:0;
- }
- .navbar {
- border-radius: 0;
- margin-bottom: 0;
- background: #151515;
- padding: 15px 0;
- padding-bottom: 0;
- }
- .navbar-nav{
- margin-top: 12px;
- }
- .navbar-nav>li{
- margin-left: 35px;
- padding-bottom: 28px;
- }
- .navbar-inverse .navbar-nav > li > a {
- padding: 5px 12px;
- margin: 0;
- border-radius: 3px;
- color: #fff;
- line-height: 24px;
- display: inline-block;
- }
- .navbar-inverse .navbar-nav > li > a:hover{
- background-color: #c52d2f;
- color: #fff;
- }
- .navbar-inverse {
- border: none;
- }
- .navbar-inverse .navbar-brand {
- font-size: 36px;
- line-height: 50px;
- color: #fff;
- }
- .navbar-inverse .navbar-nav > .active > a,
- .navbar-inverse .navbar-nav > .active > a:hover,
- .navbar-inverse .navbar-nav > .active > a:focus,
- .navbar-inverse .navbar-nav > .open > a,
- .navbar-inverse .navbar-nav > .open > a:hover,
- .navbar-inverse .navbar-nav > .open > a:focus {
- background-color: #c52d2f;
- color: #fff;
- }
- .navbar-inverse .navbar-nav .dropdown-menu {
- background-color: rgba(0,0,0,.85);
- -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
- -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
- border: 0;
- padding: 0;
- margin-top: 0;
- border-top: 0;
- border-radius: 0;
- left: 0;
- }
- .navbar-inverse .navbar-nav .dropdown-menu:before{
- position: absolute;
- top:0;
- }
- .navbar-inverse .navbar-nav .dropdown-menu > li > a {
- padding: 8px 15px;
- color: #fff;
- }
- .navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,
- .navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,
- .navbar-inverse .navbar-nav .dropdown-menu > li.active > a {
- background-color: #c52d2f;
- color: #fff;
- }
- .navbar-inverse .navbar-nav .dropdown-menu > li:last-child > a {
- border-radius: 0 0 3px 3px;
- }
- .navbar-inverse .navbar-nav .dropdown-menu > li.divider {
- background-color: transparent;
- }
- .navbar-inverse .navbar-collapse,
- .navbar-inverse .navbar-form {
- border-top: 0;
- padding-bottom: 0;
- }
- /*************************
- *******Home Page******
- **************************/
- #main-slider {
- position: relative;
- }
- .no-margin {
- margin: 0;
- padding: 0;
- }
- #main-slider .carousel .carousel-content {
- margin-top: 150px;
- }
- #main-slider .carousel .slide-margin{
- margin-top: 140px;
- }
- #main-slider .carousel h2 {
- color: #fff;
- }
- #main-slider .carousel .btn-slide {
- padding: 8px 20px;
- background: #c52d2f;
- color: #fff;
- border-radius: 4px;
- margin-top: 25px;
- display: inline-block;
- }
- #main-slider .carousel .slider-img{
- text-align: right;
- position: absolute;
- }
- #main-slider .carousel .item {
- background-position: 50%;
- background-repeat: no-repeat;
- background-size: cover;
- left: 0 !important;
- opacity: 0;
- top: 0;
- position: absolute;
- width: 100%;
- display: block !important;
- height: 730px;
- -webkit-transition: opacity ease-in-out 500ms;
- -moz-transition: opacity ease-in-out 500ms;
- -o-transition: opacity ease-in-out 500ms;
- transition: opacity ease-in-out 500ms;
- }
- #main-slider .carousel .item:first-child {
- top: auto;
- position: relative;
- }
- #main-slider .carousel .item.active {
- opacity: 1;
- -webkit-transition: opacity ease-in-out 500ms;
- -moz-transition: opacity ease-in-out 500ms;
- -o-transition: opacity ease-in-out 500ms;
- transition: opacity ease-in-out 500ms;
- z-index: 1;
- }
- #main-slider .prev,
- #main-slider .next {
- position: absolute;
- top: 50%;
- background-color: #c52d2f;
- color: #fff;
- display: inline-block;
- margin-top: -25px;
- height: 40px;
- line-height: 40px;
- width: 40px;
- line-height: 40px;
- text-align: center;
- border-radius: 4px;
- z-index: 5;
- }
- #main-slider .prev:hover,
- #main-slider .next:hover {
- background-color: #000;
- }
- #main-slider .prev {
- left: 10px;
- }
- #main-slider .next {
- right: 10px;
- }
- #main-slider .carousel-indicators li {
- width: 20px;
- height: 20px;
- background-color: #fff;
- margin: 0 15px 0 0;
- position: relative;
- }
- #main-slider .carousel-indicators li:after {
- position: absolute;
- content: "";
- width: 24px;
- height: 24px;
- border-radius: 100%;
- background: rgba(0, 0, 0, 0);
- border: 1px solid #FFF;
- left: -3px;
- top: -3px;
- }
- #main-slider .carousel-indicators .active{
- width: 20px;
- height: 20px;
- background-color: #c52d2f;
- margin: 0 15px 0 0;
- border: 1px solid #c52d2f;
- position: relative;
- }
- #main-slider .carousel-indicators .active:after {
- position: absolute;
- content: "";
- width: 24px;
- height: 24px;
- border-radius: 100%;
- background: #c52d2f;
- border: 1px solid #c52d2f;
- left: -3px;
- top: -3px;
- }
- #main-slider .active .animation.animated-item-1 {
- -webkit-animation: fadeInUp 300ms linear 300ms both;
- -moz-animation: fadeInUp 300ms linear 300ms both;
- -o-animation: fadeInUp 300ms linear 300ms both;
- -ms-animation: fadeInUp 300ms linear 300ms both;
- animation: fadeInUp 300ms linear 300ms both;
- }
- #main-slider .active .animation.animated-item-2 {
- -webkit-animation: fadeInUp 300ms linear 600ms both;
- -moz-animation: fadeInUp 300ms linear 600ms both;
- -o-animation: fadeInUp 300ms linear 600ms both;
- -ms-animation: fadeInUp 300ms linear 600ms both;
- animation: fadeInUp 300ms linear 600ms both;
- }
- #main-slider .active .animation.animated-item-3 {
- -webkit-animation: fadeInUp 300ms linear 900ms both;
- -moz-animation: fadeInUp 300ms linear 900ms both;
- -o-animation: fadeInUp 300ms linear 900ms both;
- -ms-animation: fadeInUp 300ms linear 900ms both;
- animation: fadeInUp 300ms linear 900ms both;
- }
- #main-slider .active .animation.animated-item-4 {
- -webkit-animation: fadeInUp 300ms linear 1200ms both;
- -moz-animation: fadeInUp 300ms linear 1200ms both;
- -o-animation: fadeInUp 300ms linear 1200ms both;
- -ms-animation: fadeInUp 300ms linear 1200ms both;
- animation: fadeInUp 300ms linear 1200ms both;
- }
- #feature {
- background: #f2f2f2;
- padding-bottom: 40px;
- }
- .features{
- padding: 0;
- }
- .feature-wrap {
- margin-bottom: 35px;
- overflow: hidden;
- }
- .feature-wrap h2{
- margin-top: 10px;
- }
- .feature-wrap .pull-left {
- margin-right: 25px;
- }
- .feature-wrap i{
- font-size: 48px;
- height: 110px;
- width: 110px;
- margin: 3px;
- border-radius: 100%;
- line-height: 110px;
- text-align:center;
- background: #ffffff;
- color: #c52d2f;
- border: 3px solid #ffffff;
- box-shadow: inset 0 0 0 5px #f2f2f2;
- -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
- -webkit-transition: 500ms;
- -moz-transition: 500ms;
- -o-transition: 500ms;
- transition: 500ms;
- float: left;
- margin-right: 25px;
- }
- .feature-wrap i:hover {
- background: #c52d2f;
- color: #fff;
- box-shadow: inset 0 0 0 5px #c52d2f;
- -webkit-box-shadow: inset 0 0 0 5px #c52d2f;
- border: 3px solid #c52d2f;
- }
- #recent-works .col-xs-12.col-sm-4.col-md-3{
- padding: 0;
- }
- #recent-works{
- padding-bottom: 70px;
- }
- .recent-work-wrap {
- position: relative;
- }
- .recent-work-wrap img{
- width: 100%;
- }
- .recent-work-wrap .recent-work-inner{
- top: 0;
- background: transparent;
- opacity: .8;
- width: 100%;
- border-radius: 0;
- margin-bottom: 0;
- }
- .recent-work-wrap .recent-work-inner h3{
- margin: 10px 0;
- }
- .recent-work-wrap .recent-work-inner h3 a{
- font-size: 24px;
- color: #fff;
- }
- .recent-work-wrap .overlay {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- border-radius: 0;
- background: rgba(218, 68, 83, 0.7);
- color: #fff;
- vertical-align: middle;
- -webkit-transition: opacity 500ms;
- -moz-transition: opacity 500ms;
- -o-transition: opacity 500ms;
- transition: opacity 500ms;
- padding: 30px;
- }
- .recent-work-wrap .overlay .preview {
- bottom: 0;
- display: inline-block;
- height: 35px;
- line-height: 35px;
- border-radius: 0;
- background: transparent;
- text-align: center;
- color: #fff;
- }
- .recent-work-wrap:hover .overlay {
- opacity: 1;
- }
- #services {
- background: #000 url(../images/services/bg_services.png);
- background-size: cover;
- }
- #services .lead,
- #services h2{
- color: #fff;
- }
- .services-wrap {
- padding: 40px 30px;
- background: #fff;
- border-radius: 4px;
- margin: 0 0 40px;
- }
- .services-wrap h3 {
- font-size: 20px;
- margin: 10px 0;
- }
- .services-wrap .pull-left {
- margin-right: 20px;
- }
- #middle {
- background: #f2f2f2;
- }
- .skill h2{
- margin-bottom: 25px;
- }
- .progress-wrap{
- position: relative;
- }
- .progress .color1,
- .progress .color1 .bar-width{
- background: #2d7da4;
- }
- .progress .color2,
- .progress .color2 .bar-width{
- background: #6aa42f;
- }
- .progress .color3,
- .progress .color3 .bar-width{
- background: #ffcc33;
- }
- .progress .color4,
- .progress .color4 .bar-width{
- background: #db3615;
- }
- .progress,
- .progress-bar {
- height: 15px;
- line-height: 15px;
- background: #e6e6e6;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- border-radius: 0;
- overflow: visible;
- text-align: right;
- }
- .progress{
- position: relative;
- }
- .progress .bar-width{
- position: absolute;
- width: 40px;
- height: 20px;
- line-height: 20px;
- text-align: center;
- font-size: 12px;
- font-weight: 700;
- top: -30px;
- border-radius: 2px;
- margin-left: -30px;
- }
- .progress span{
- position: relative;
- }
- .progress span:before{
- content: " ";
- position: absolute;
- width: auto;
- height: auto;
- border-width: 8px 5px;
- border-style: solid;
- bottom: -15px;
- right: 8px;
- }
- .progress .color1 span:before{
- border-color: #2d7da4 transparent transparent transparent;
- }
- .progress .color2 span:before{
- border-color: #6aa42f transparent transparent transparent;
- }
- .progress .color3 span:before{
- border-color: #ffcc33 transparent transparent transparent;
- }
- .progress .color4 span:before{
- border-color: #db3615 transparent transparent transparent;
- }
- .accordion h2{
- margin-bottom: 25px;
- }
- .panel-default{
- border-color: transparent;
- }
- .panel-default>.panel-heading,
- .panel{
- background-color: #e6e6e6;
- border:0 none;
- box-shadow:none;
- }
- .panel-default>.panel-heading+.panel-collapse .panel-body{
- background: #fff;
- color: #858586;
- }
- .panel-body{
- padding: 20px 20px 10px;
- }
- .panel-group .panel+.panel{
- margin-top: 0;
- border-top: 1px solid #d9d9d9;
- }
- .panel-group .panel{
- border-radius: 0;
- }
- .panel-heading{
- border-radius: 0;
- }
- .panel-title>a{
- color: #4e4e4e;
- }
- .accordion-inner img{
- border-radius: 4px;
- }
- .accordion-inner h4{
- margin-top: 0;
- }
- .panel-heading.active{
- background: #1f1f20;
- }
- .panel-heading.active .panel-title>a{
- color:#fff;
- }
- a.accordion-toggle i{
- width: 45px;
- line-height: 44px;
- font-size: 20px;
- margin-top: -10px;
- text-align: center;
- margin-right: -15px;
- background: #c9c9c9;
- }
- .panel-heading.active a.accordion-toggle i{
- background: #c52d2f;
- color: #fff;
- }
- .panel-heading.active a.accordion-toggle.collapsed i{
- background: #c52d2f;
- color: #fff;
- }
- .nav-tabs>li{
- margin-bottom: 0px;
- border-bottom: 1px solid #e6e6e6;
- }
- .nav-tabs{
- border-bottom: transparent;
- border-right: 1px solid #e6e6e6;
- }
- .nav-tabs>li>a {
- background: #f5f5f5;
- color: #666;
- border-radius: 0;
- border: 0 none;
- line-height: 24px;
- margin-right:0;
- padding: 13px 15px;
- }
- .nav-tabs li:last-child{
- border-bottom: 0 none;
- }
- .nav-stacked>li+li{
- margin-top: 0;
- }
- .nav-tabs>li>a:hover{
- background: #1f1f20;
- color:#fff;
- }
- .nav-tabs>li.active>a,
- .nav-tabs>li.active>a:hover,
- .nav-tabs>li.active>a:focus {
- border: 0;
- color:#fff;
- background: #1f1f20;
- position: relative;
- }
- .nav-tabs>li.active>a:after {
- position: absolute;
- content: "";
- width: auto;
- height: auto;
- border-style:solid;
- border-color: transparent transparent transparent #1f1f20;
- border-width: 25px 22px;
- right: -44px;
- top:0;
- }
- .tab-wrap{
- border:1px solid #e6e6e6;
- margin-bottom: 20px;
- }
- .tab-content{
- padding: 20px;
- }
- .tab-content h2{
- margin-top: 0;
- }
- .tab-content img{
- border-radius: 4px;
- }
- .testimonial h2{
- margin-top: 0;
- }
- .testimonial-inner {
- color:#858586;
- font-size: 14px;
- }
- .testimonial-inner .pull-left{
- border-right: 1px solid #e7e7e7;
- padding-right: 15px;
- position: relative;
- }
- .testimonial-inner .pull-left:after{
- content: "";
- position: absolute;
- width: 9px;
- height: 9px;
- top: 50%;
- margin-top: -5px;
- background: #FFF;
- -webkit-transform: rotate(45deg);
- border: 1px solid #e7e7e7;
- right: -5px;
- border-left: 0 none;
- border-bottom: 0 none;
- }
- #partner {
- background: url(../images/partners/partner_bg.png) 50% 50% no-repeat;
- background-size: cover;
- }
- #partner {
- color: #fff;
- text-align: center;
- }
- #partner h2,
- #partner h3 {
- color: #fff;
- }
- .partners ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .partners ul li{
- display: inline-block;
- float: left;
- width: 20%;
- }
- #conatcat-info{
- background: #fff url(../images/contact.png) no-repeat 90% 0;
- padding: 30px 0;
- }
- .contact-info i{
- width: 60px;
- height: 60px;
- font-size: 40px;
- line-height: 60px;
- color: #fff;
- background: #000;
- text-align: center;
- border-radius: 10px;
- }
- .contact-info h2{
- margin-top: 0;
- color: #000;
- }
- .contact-info{
- color:#000;
- }
- /*************************
- ********* About Us Page CSS ******
- **************************/
- .about-us {
- margin-top: 110px;
- margin-bottom: -110px;
- }
- .about-us h2,
- .skill_text h2 {
- color:#4e4e4e;
- font-size: 30px;
- font-weight: 600;
- }
- .about-us p {
- color:#4e4e4e;
- }
- #carousel-slider {
- position: relative;
- }
- #carousel-slider .carousel-indicators {
- bottom: -25px;
- }
- #carousel-slider .carousel-indicators li {
- border: 1px solid #ffbd20;
- }
- #carousel-slider a i {
- border: 1px solid #777;
- border-radius:50%;
- font-size: 28px;
- height: 50px;
- padding: 8px;
- position: absolute;
- top: 50%;
- width: 50px;
- color:#777;
- }
- #carousel-slider a i:hover {
- background:#bfbfbf;
- color:#fff;
- border: 1px solid #bfbfbf;
- }
- #carousel-slider
- .carousel-control {
- width:inherit;
- }
- #carousel-slider .carousel-control.left i {
- left:-25px
- }
- #carousel-slider .carousel-control.right i {
- right: -25px;
- }
- #carousel-slider
- .carousel-control.left,
- #carousel-slider
- .carousel-control.right {
- background: none;
- }
- .skill_text {
- display: block;
- margin-bottom: 60px;
- margin-top: 25px;
- overflow: hidden;
- }
- .sinlge-skill {
- background:#f2f2f2;
- border-radius: 100%;
- color: #FFFFFF;
- font-size: 22px;
- font-weight: bold;
- height: 200px;
- position: relative;
- width: 200px;
- text-transform: uppercase;
- overflow: hidden;
- margin: 30px 0;
- }
- .sinlge-skill p em {
- color: #FFFFFF;
- font-size: 38px;
- }
- .sinlge-skill p {
- line-height: 1;
- }
- .joomla-skill,
- .html-skill,
- .css-skill,
- .wp-skill {
- position: absolute;
- height: 100%;
- bottom: 0;
- width:100%;
- border-radius: 100%;
- padding: 70px 0;
- text-align: center;
- }
- .joomla-skill {
- background: rgb(242,242,242); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 28%, rgba(45,125,164,1) 28%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(28%,rgba(242,242,242,1)), color-stop(28%,rgba(45,125,164,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 28%,rgba(45,125,164,1) 28%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 28%,rgba(45,125,164,1) 28%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 28%,rgba(45,125,164,1) 28%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 28%,rgba(45,125,164,1) 28%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#2d7da4',GradientType=0 ); /* IE6-9 */
- }
- .html-skill {
- background: rgb(242,242,242); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 9%, rgba(106,164,47,1) 9%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(9%,rgba(242,242,242,1)), color-stop(9%,rgba(106,164,47,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 9%,rgba(106,164,47,1) 9%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 9%,rgba(106,164,47,1) 9%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 9%,rgba(106,164,47,1) 9%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 9%,rgba(106,164,47,1) 9%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#6aa42f',GradientType=0 ); /* IE6-9 */
- }
- .css-skill {
- background: rgb(242,242,242); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 32%, rgba(255,189,32,1) 32%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(32%,rgba(242,242,242,1)), color-stop(32%,rgba(255,189,32,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 32%,rgba(255,189,32,1) 32%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 32%,rgba(255,189,32,1) 32%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 32%,rgba(255,189,32,1) 32%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 32%,rgba(255,189,32,1) 32%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffbd20',GradientType=0 ); /* IE6-9 */
- }
- .wp-skill {
- background: rgb(242,242,242); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 19%, rgba(219,54,21,1) 19%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(19%,rgba(242,242,242,1)), color-stop(19%,rgba(219,54,21,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 19%,rgba(219,54,21,1) 19%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 19%,rgba(219,54,21,1) 19%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 19%,rgba(219,54,21,1) 19%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 19%,rgba(219,54,21,1) 19%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#db3615',GradientType=0 ); /* IE6-9 */
- }
- .skill-wrap {
- display: block;
- overflow: hidden;
- margin: 60px 0;
- }
- .team h4 {
- margin-top: 0;
- text-transform: uppercase;
- }
- .team h5 {
- font-weight: 300;
- }
- .single-profile-top,
- .single-profile-bottom {
- font-weight: 400;
- line-height: 24px;
- }
- .single-profile-top,
- .single-profile-bottom {
- border: 1px solid #ddd;
- padding: 15px;
- position: relative;
- }
- .media_image {
- margin-bottom: 10px;
- }
- .team .btn {
- background:transparent;
- font-size: 12px;
- font-weight: 300;
- margin-bottom: 3px;
- padding: 1px 5px;
- text-transform: uppercase;
- border:1px solid#ddd;
- margin-right: 3px;
- }
- ul.social_icons,
- ul.tag {
- list-style: none;
- padding: 0;
- margin: 10px 0;
- display: block;
- }
- ul.social_icons li,
- ul.tag li {
- display: inline-block;
- margin-right: 5px;
- }
- ul.social_icons li a i{
- border-radius: 50%;
- color: #FFFFFF;
- height: 25px;
- line-height: 25px;
- font-size: 12px;
- padding: 0;
- text-align: center;
- width: 25px;
- opacity:.8;
- }
- .team .social_icons .fa-facebook:hover,
- .team .social_icons .fa-twitter:hover,
- .team .social_icons .fa-google-plus:hover {
- transform: rotate(360deg);
- -ms-transform:rotate(360deg);
- -webkit-transform:rotate(360deg);
- transition-duration:2s;
- transition-property: all;
- transition-timing-function: ease;
- opacity:1;
- transition: all 0.9s ease 0s;
- -moz-transition: all 0.9s ease 0s;
- -webkit-transition: all 0.9s ease 0s;
- -o-transition: all 0.9s ease 0s;
- }
- .team .social_icons .fa-facebook {
- background: #0182c4;
- }
- .team .social_icons .fa-twitter {
- background: #20B8FF
- }
- .team .social_icons .fa-google-plus {
- background: #D34836
- }
- .team-bar .first-one-arrow {
- float: left;
- margin-right: 30px;
- width: 2%;
- }
- .team-bar .first-arrow {
- float: left;
- margin-left: 5px;
- margin-right: 35px;
- width: 22%;
- }
- .team-bar .second-arrow {
- float: left;
- margin-left: 5px;
- width: 21%;
- }
- .team-bar .third-arrow {
- float: left;
- margin-left: 40px;
- margin-right: 12px;
- width: 22%;
- }
- .team-bar .fourth-arrow {
- float: left;
- margin-left: 25px;
- width: 20%;
- }
- .team-bar .first-one-arrow hr {
- border-bottom: 1px solid #2D7DA4;
- border-top: 1px solid #2D7DA4;
- }
- .team-bar .first-arrow hr {
- border-bottom: 1px solid #2D7DA4;
- border-top: 1px solid #2D7DA4;
- }
- .team-bar .second-arrow hr {
- border-bottom: 1px solid #6aa42f;
- border-top: 1px solid #6aa42f;
- }
- .team-bar .third-arrow hr {
- border-bottom: 1px solid #FFBD20;
- border-top: 1px solid #FFBD20;
- }
- .team-bar .fourth-arrow hr {
- border-bottom: 1px solid #db3615;
- border-top: 1px solid #db3615;
- }
- .team-bar {
- margin-bottom: 15px;
- margin-top: 30px;
- position: relative;
- }
- .team-bar i {
- border-radius: 50%;
- color: #FFFFFF;
- display: block;
- height: 24px;
- line-height: 24px;
- margin-top: -32px;
- overflow: hidden;
- padding: 0;
- text-align: center;
- width: 24px;
- position: absolute;
- }
- .team-bar .first-arrow .fa-angle-up {
- background:#2D7DA4;
- margin-left:-33px
- }
- .team-bar .second-arrow .fa-angle-down {
- background:#6AA42F;
- margin-left: -33px;
- }
- .team-bar .third-arrow .fa-angle-up {
- background:#FFBD20;
- margin-left: -32px;
- }
- .team-bar .fourth-arrow .fa-angle-down {
- background:#db3615;
- margin-left: -32px;
- }
- .team .single-profile-top:before,
- .team .single-profile-top:after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-style: solid;
- }
- .team .single-profile-top:before {
- left:26px;
- bottom: -20px;
- border-width: 10px;
- border-color:#fff transparent transparent transparent;
- z-index: 1;
- }
- .team .single-profile-top:after {
- left: 25px;
- bottom: -22px;
- border-style: solid;
- border-width: 11px;
- border-color:#ddd transparent transparent transparent;
- z-index: 0;
- }
- .team .single-profile-bottom:before,
- .team .single-profile-bottom:after {
- position: absolute;
- content:"";
- width: 0;
- height: 0;
- border-style: solid;
- }
- .team .single-profile-bottom:before {
- left:30px;
- top: -20px;
- border-width: 10px;
- border-color: transparent transparent #fff transparent;
- z-index: 1;
- }
- .team .single-profile-bottom:after {
- left: 29px;
- top: -22px;
- border-style: solid;
- border-width: 11px;
- border-color: transparent transparent #DDD transparent;
- z-index: 0;
- }
- /***********************
- ****Service page css****
- ***********************/
- .services {
- padding: 0;
- }
- .get-started {
- background: none repeat scroll 0 0 #F3F3F3;
- border-radius: 3px;
- padding-bottom: 30px;
- position: relative;
- margin-bottom: 18px;
- margin-top: 60px;
- }
- .get-started h2 {
- padding-top: 30px;
- margin-bottom: 20px;
- }
- .request {
- bottom: -15px;
- left: 50%;
- position: absolute;
- margin-left: -110px;
- }
- .request h4 {
- position: absolute;
- width: 220px;
- position:relative;
- }
- .request h4 a{
- background:#c52d2f;
- color: #fff;
- font-size: 14px;
- font-weight: normal;
- border-radius: 3px;
- padding: 5px 15px;
- }
- .request h4:after {
- border-color: #c52d2f transparent transparent;
- border-style: solid;
- border-width: 12px;
- bottom: -18px;
- content: "";
- height: 0;
- position: absolute;
- right: 13px;
- z-index: -99999;
- }
- .request h4:before {
- border-color: #c52d2f transparent transparent;
- border-style: solid;
- border-width: 12px;
- bottom: -18px;
- content: "";
- height: 0;
- left: 13px;
- position: absolute;
- z-index: -99999;
- }
- .clients-area {
- padding: 60px;
- }
- .clients-comments {
- background-image: url("../images/image_bg.png");
- background-position: center 118px;
- background-repeat: no-repeat;
- margin-bottom: 100px;
- }
- .clients-comments img {
- background:#DDDDDD;
- border: 1px solid #DDDDDD;
- height: 182px;
- padding: 3px;
- width: 182px;
- transition: all 0.9s ease 0s;
- -moz-transition: all 0.9s ease 0s;
- -webkit-transition: all 0.9s ease 0s;
- -o-transition: all 0.9s ease 0s;
- }
- .clients-comments h3 {
- margin-top: 55px;
- font-weight: 300;
- padding: 0 40px;
- }
- .clients-comments h4 {
- font-weight: 300;
- margin-top: 15px;
- }
- .clients-comments h4 span {
- font-weight: 700;
- font-style: oblique;
- }
- .footer {
- background: none repeat scroll 0 0 #2E2E2E;
- border-top: 5px solid #C52D2F;
- height: 84px;
- margin-top: 110px;
- }
- .footer_left {
- padding: 10px;
- }
- .text-left {
- color: #FFFFFF;
- font-size: 12px;
- margin-top: 15px;
- }
- /*************************
- ********* Portfolio CSS ******
- **************************/
- #portfolio_page {
- margin-top: 115px;
- padding-bottom: 0;
- }
- .portfolio-items,
- .portfolio-filter {
- list-style: none outside none;
- margin: 0 0 40px 0;
- padding: 0;
- }
- .portfolio-filter > li {
- display: inline-block;
- }
- .portfolio-filter > li a {
- background: none repeat scroll 0 0 #FFFFFF;
- font-size: 14px;
- font-weight: 400;
- margin-right: 20px;
- text-transform: uppercase;
- transition: all 0.9s ease 0s;
- -moz-transition: all 0.9s ease 0s;
- -webkit-transition: all 0.9s ease 0s;
- -o-transition: all 0.9s ease 0s;
- border: 1px solid #F2F2F2;
- outline: none;
- border-radius: 3px;
- }
- .portfolio-filter > li a:hover,
- .portfolio-filter > li a.active{
- color:#fff;
- background: #c52d2f;
- border: 1px solid #c52d2f;
- box-shadow: none;
- -webkit-box-shadow: none;
- }
- .portfolio-items > li {
- float: left;
- padding: 0;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .portfolio-item {
- margin: 0;
- padding:0;
- }
- /* Start: Recommended Isotope styles */
- /**** Isotope Filtering ****/
- .isotope-item {
- z-index: 2;
- }
- .isotope-hidden.isotope-item {
- pointer-events: none;
- z-index: 1;
- }
- /**** Isotope CSS3 transitions ****/
- .isotope,
- .isotope .isotope-item {
- -webkit-transition-duration: 0.8s;
- -moz-transition-duration: 0.8s;
- -ms-transition-duration: 0.8s;
- -o-transition-duration: 0.8s;
- transition-duration: 0.8s;
- }
- .isotope {
- -webkit-transition-property: height, width;
- -moz-transition-property: height, width;
- -ms-transition-property: height, width;
- -o-transition-property: height, width;
- transition-property: height, width;
- }
- .isotope .isotope-item {
- -webkit-transition-property: -webkit-transform, opacity;
- -moz-transition-property: -moz-transform, opacity;
- -ms-transition-property: -ms-transform, opacity;
- -o-transition-property: -o-transform, opacity;
- transition-property: transform, opacity;
- }
- /**** disabling Isotope CSS3 transitions ****/
- .isotope.no-transition,
- .isotope.no-transition .isotope-item,
- .isotope .isotope-item.no-transition {
- -webkit-transition-duration: 0s;
- -moz-transition-duration: 0s;
- -ms-transition-duration: 0s;
- -o-transition-duration: 0s;
- transition-duration: 0s;
- }
- /* End: Recommended Isotope styles */
- /* disable CSS transitions for containers with infinite scrolling*/
- .isotope.infinite-scrolling {
- -webkit-transition: none;
- -moz-transition: none;
- -ms-transition: none;
- -o-transition: none;
- transition: none;
- }
- /**************************
- ********* Pricing Table CSS *
- **************************/
- .pricing_heading {
- margin-top: 120px
- }
- .pricing_heading h2,
- .pricing_heading p {
- color:#4e4e4e;
- }
- .pricing-area h1 {
- font-weight: 300;
- margin-top: 0;
- margin-bottom: 15px;
- }
- .pricing-area span {
- font-weight: 700;
- font-size: 18px;
- }
- .pricing-area h3,
- .pricing-area span {
- color: #fff;
- }
- .plan {
- position: relative;
- margin-bottom: 70px;
- }
- .pricing-area ul {
- background:#FAFAFA;
- padding: 0;
- margin: 0;
- }
- .pricing-area ul li {
- list-style: none;
- padding: 15px 0;
- font-size: 16px;
- font-weight: 400;
- }
- .pricing-area ul li:nth-child(even){
- background:#f5f5f5
- }
- .pricing-area .price-three img,
- .pricing-area .price-six img {
- position: absolute;
- right: 15px;
- top: 0;
- }
- .pricing-area .heading-one,
- .pricing-area .heading-two,
- .pricing-area .heading-three {
- padding:17px 0;
- border-radius:2px 2px 0 0;
- }
- .pricing-area .heading-one,
- .pricing-area .heading-two,
- .pricing-area .heading-three,
- .pricing-area .heading-four,
- .pricing-area .heading-five,
- .pricing-area .heading-six,
- .pricing-area .heading-seven {
- margin-left: -10px
- }
- .pricing-area .heading-one,
- .pricing-area .price-one .plan-action .btn-primary {
- background: #e24f43
- }
- .pricing-area .heading-two,
- .pricing-area .price-two .plan-action .btn-primary {
- background:#27AE60;
- }
- .pricing-area .heading-three,
- .pricing-area .price-three .plan-action .btn-primary {
- background: #f39c12;
- }
- .pricing-area .heading-four,
- .pricing-area .price-four .plan-action .btn-primary {
- background: #5c5c5c
- }
- .pricing-area .heading-five,
- .pricing-area .price-five .plan-action .btn-primary {
- background: #5c5c5c
- }
- .pricing-area .heading-six,
- .pricing-area .price-six .plan-action .btn-primary {
- background: #e24f43
- ;
- }
- .pricing-area .heading-seven,
- .pricing-area .price-seven .plan-action .btn-primary {
- background: #5c5c5c
- }
- .pricing-area .bg{
- background: #fafafa
- }
- .pricing-area .heading-one h3:before {
- border-color: #bf4539 transparent transparent;
- }
- .pricing-area .heading-two h3:before {
- border-color: #1f8c4d transparent transparent;
- }
- .pricing-area .heading-three h3:before {
- border-color: #d4880f transparent transparent;
- }
- .pricing-area .heading-four h3:before {
- border-color: #424242 transparent transparent;
- }
- .pricing-area .heading-five h3:before {
- border-color: #424242 transparent transparent;
- }
- .pricing-area .heading-six h3:before {
- border-color: #bf4539 transparent transparent;
- }
- .pricing-area .heading-seven h3:before {
- border-color: #424242 transparent transparent;
- }
- .pricing-area h3:before {
- border-color: #D4880F transparent transparent;
- border-radius: 5px 0 0 0px;
- border-style: solid;
- border-width: 12px;
- content: "";
- height: 0;
- left: 4px;
- position: absolute;
- top: 78px;
- width: 0;
- z-index: -999;
- }
- .small-pricing h3:after {
- height:94px;
- }
- .small-pricing h3:before {
- top: 74px;
- }
- .plan-action {
- height: 40px;
- }
- .pricing-area .plan-action .btn-primary {
- position: relative;
- padding:5px 20px;
- color: #fff
- ;
- margin-top: 5px;
- }
- .pricing-area .plan-action .btn-primary:before {
- border-color: #E24F43 transparent transparent;
- border-radius: 5px 0 0 0;
- border-style: solid;
- border-width: 12px;
- bottom: -12px;
- content: "";
- height: 0;
- left: -9px;
- position: absolute;
- width: 0;
- z-index: -1;
- }
- .pricing-area .plan-action .btn-primary:after {
- border-color: #E24F43 transparent transparent;
- border-radius: 5px 0 0 0;
- border-style: solid;
- border-width: 12px;
- bottom: -12px;
- content: "";
- height: 0;
- position: absolute;
- right: -9px;
- width: 0;
- z-index: -1;
- }
- .pricing-area .price-two .plan-action .btn-primary:before,
- .pricing-area .price-two .plan-action .btn-primary:after {
- border-color: #1f8c4d transparent transparent;
- }
- .pricing-area .price-three .plan-action .btn-primary:before,
- .pricing-area .price-three .plan-action .btn-primary:after {
- border-color: #d4880f transparent transparent;
- }
- .pricing-area .price-four .plan-action .btn-primary:before,
- .pricing-area .price-four .plan-action .btn-primary:after,
- .pricing-area .price-five .plan-action .btn-primary:before,
- .pricing-area .price-five .plan-action .btn-primary:after,
- .pricing-area .price-seven .plan-action .btn-primary:before,
- .pricing-area .price-seven .plan-action .btn-primary:after {
- border-color: #424242 transparent transparent;
- right: -9px;
- }
- .pricing-area .price-six .plan-action .btn-primary:before,
- .pricing-area .price-six .plan-action .btn-primary:after {
- border-color: #bf4539 transparent transparent;
- right: -9px;
- }
- /*************************
- ********* Contact Us CSS ******
- **************************/
- .gmap-area {
- background-image: url("../images/map.jpg");
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: cover;
- padding: 70px 0;
- }
- .gmap-area .gmap iframe {
- border-radius: 50%;
- height: 280px;
- width: 300px;
- }
- .gmap{
- border: 10px solid #f6f5f0;
- border-radius: 50%;
- height: 300px;
- width: 300px;
- box-shadow: 0px 0px 3px 3px #e7e4dc;
- overflow: hidden;
- position: relative;
- margin: 0 auto;
- }
- .gmap-area .map-content ul {
- list-style: none;
- }
- .gmap-area .map-content address h5{
- font-weight: 700;
- /* font-size: 16px; */
- }
- #contact-page{
- padding-top: 0;
- }
- #contact-page .contact-form
- .form-group label {
- color: #4E4E4E;
- font-size: 16px;
- font-weight: 300;
- }
- .form-group .form-control {
- padding: 7px 12px;
- border-color:#f2f2f2;
- box-shadow: none;
- }
- textarea#message{
- resize: none;
- padding: 10px;
- }
- #contact-page .contact-wrap {
- margin-top: 20px;
- }
- /*********************
- ****blog page css*****
- **********************/
- .widget {
- margin-bottom: 60px;
- padding-left: 0;
- }
- .single_comments {
- margin-bottom: 20px;
- }
- .single_comments img {
- float: left;
- margin-right: 10px;
- margin-top: 5px;
- }
- .single_comments p {
- margin-bottom: 0;
- }
- .widget .entry-meta span {
- display: inline-block;
- margin-right: 10px;
- }
- .widget h3 {
- color: #000;
- text-transform: uppercase;
- margin-bottom: 20px;
- }
- .blog_category{
- list-style:none;
- margin:0;
- padding:0;
- }
- .blog_category li{
- float:none;
- margin-bottom:20px;
- }
- .blog_category li a {
- background:#f5f5f5;
- border-radius: 4px;
- color: #888;
- display: inline-block;
- padding: 5px 15px;
- }
- .blog_category li a:hover{
- background:#c52d2f;
- color: #fff;
- }
- .badge:before {
- border-color: transparent transparent transparent #c52d2f;
- border-style: solid;
- border-width: 10px;
- bottom: -8px;
- content: "";
- height: 0;
- left: 5px;
- position: absolute;
- z-index: -99999;
- }
- .badge {
- background-color: #c52d2f;
- border-radius: 5px;
- color: #fff;
- padding: 8px;
- position: relative;
- left: 60px;
- top: -18px;
- font-weight: normal;
- }
- .blog_archieve {
- list-style: none outside none;
- margin: 0;
- padding: 0;
- }
- .blog_archieve li {
- padding: 10px 0;
- border-bottom: 1px solid #f5f5f5;
- }
- .blog_archieve li:first-child {
- padding-top: 0;
- }
- ul.gallery {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- ul.gallery li {
- display: block;
- width: 60px;
- padding: 0;
- margin: 0 4px 4px 0;
- float: left;
- }
- ul.faq {
- list-style: none;
- margin: 0;
- }
- ul.faq li {
- margin-top: 30px;
- }
- ul.faq li:first-child {
- margin-top: 0;
- }
- ul.faq li span.number {
- display: block;
- float: left;
- width: 50px;
- height: 50px;
- line-height: 50px;
- text-align: center;
- background: #34495e;
- color: #fff;
- font-size: 24px;
- }
- ul.faq li > div {
- margin-left: 70px;
- }
- ul.faq li > div h3 {
- margin-top: 0;
- }
- .embed-container {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 30px;
- height: 0;
- overflow: hidden;
- }
- .embed-container iframe,
- .embed-container object,
- .embed-container embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .blog-item {
- border-radius: 0;
- overflow: hidden;
- margin-bottom: 50px;
- }
- .blog .blog-item .img-blog {
- border-radius: 5px;
- margin-bottom: 45px;
- }
- .blog .blog-item .blog-content {
- padding-bottom: 25px;
- }
- .blog .blog-item .blog-content h2 {
- margin-top: 0;
- font-size: 30px;
- }
- .readmore{
- margin-top: 0;
- }
- .blog .blog-item .blog-content h3 {
- color: #858586;
- margin-bottom: 40px;
- /* font-weight: 300 */}
- .blog .blog-item .blog-content h4 {
- font-size: 14px;
- }
- .post-tags {
- }
- .blog .blog-item .entry-meta {
- border-radius: 5px;
- overflow: hidden;
- }
- .blog .blog-item .entry-meta > span {
- background: #f5f5f5;
- border-top: 1px solid #fff;
- display: block;
- font-size: 12px;
- overflow: hidden;
- padding: 5px;
- text-align: left;
- }
- #publish_date {
- background: #c52d2f;
- border-bottom: 5px solid #4e4e4e;
- color: #fff;
- padding: 5px 0;
- text-align: center;
- }
- .blog .blog-item .entry-meta > span {
- color: #ccc;
- }
- .blog .blog-item .entry-meta > span a {
- font-size: 12px;
- margin-left: 3px;
- font-weight: 300;
- color: #888;
- }
- ul.pagination > li > a {
- border: 1px solid #F1F1F1;
- margin-right:5px;
- border-radius: 5px;
- font-size: 16px;
- padding: 5px 14px;
- }
- ul.pagination > li > a i{
- margin-left:5px;
- margin-right:5px;
- }
- ul.pagination > li.active > a,
- ul.pagination > li:hover > a {
- background-color: #c52d2f !important;
- border-color: #c52d2f !important;
- color: #fff;
- }
- .search_box {
- background-image: url("../images/search_icon.png");
- background-position: 314px 15px;
- background-repeat: no-repeat;
- border-color: #DEDEDE;
- height: 48px;
- outline: medium none;
- box-shadow: none;
- }
- .form-control:focus {
- box-shadow:none;
- outline: 0 none;
- }
- ul.tag-cloud,
- ul.sidebar-gallery {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- .tag-cloud li{
- display: inline-block;
- margin-bottom: 3px;
- }
- .tag-cloud li a {
- background: #f5f5f5;
- color: #888;
- border: 0;
- border-radius: 4px;
- padding: 8px 15px;
- }
- .tag-cloud li a:hover{
- background:#c52d2f;
- color: #fff;
- }
- .sidebar-gallery li{
- display: inline-block;
- margin: 0 10px 10px 0;
- }
- .sidebar-gallery li a {
- border-radius: 4px;
- display: inline-block;
- }
- /**********************
- **blog single page css*
- **********************/
- .reply_section {
- background: #f5f5f5;
- border-radius: 5px;
- }
- .post_reply {
- margin-left: 10px;
- margin-top: 45px;
- }
- .post_reply img {
- width: 85px;
- height: 85px;
- border: 5px solid #D5D8DD;
- }
- .post_reply ul {
- list-style: none outside none;
- margin: 0;
- padding: 0;
- margin-top: 5px;
- }
- .post_reply ul li{
- float:left;
- }
- .post_reply ul li a {
- display: block;
- }
- .post_reply ul li a i {
- border: 1px solid #DDDDDD;
- border-radius: 39px;
- color: #FFFFFF;
- font-size: 20px;
- height: 30px;
- margin-right: 3px;
- padding-top: 7px;
- text-align: center;
- width: 30px;
- }
- .post_reply ul li a i.fa-facebook {
- background: #0182C4;
- }
- .post_reply ul li a i.fa-twitter {
- background: none repeat scroll 0 0 #3FC1FE;
- }
- .post_reply ul li a i.fa-google-plus{
- background: none repeat scroll 0 0 #D34836;
- }
- .post_reply ul li a i:hover{
- opacity:.5;
- }
- .post_reply_content {
- margin: 30px;
- }
- .post_reply_content h1 a:hover{
- color:#FFC800;
- }
- .post_reply_content h4 {
- margin-bottom: 50px;
- }
- .reply_section .media-body{
- display:inherit;
- }
- .comment_section .media-body{
- display:inherit;
- }
- #comments_title{
- color:#4e4e4e;
- font-weight:700px;
- font-size:20px;
- margin-top:60px;
- margin-bottom:40px;
- }
- .comment_section {
- margin-top: 30px;
- position: relative;
- }
- .post_comments img {
- width: 85px;
- height: 85px;
- margin-top: 35px;
- }
- .post_reply_comments {
- background:#f5f5f5;
- border-radius: 4px;
- padding: 30px;
- }
- .post_reply_comments:before {
- border-color: transparent #F0F0F0 transparent transparent;
- border-style: solid;
- border-width: 15px;
- content: " ";
- height: 0;
- left: 75px;
- position: absolute;
- top: 20px;
- }
- .post_reply_comments h3,
- .post_reply_content h3{
- margin-top: 0;
- }
- .post_reply_comments h1 a:hover{
- color:#c52d2f;
- }
- .post_reply_comments h4{
- color:#c4c4c5;
- font-weight:400;
- }
- .post_reply_comments p {
- padding-bottom: 30px;
- }
- .post_reply_comments a {
- bottom: 15px;
- position: absolute;
- right: 30px;
- background: #c52d2f;
- color: #fff;
- border-radius: 5px;
- padding: 8px 20px;
- }
- .post_reply_comments a:before {
- border-color: #c52d2f transparent transparent;
- border-style: solid;
- border-width: 16px;
- bottom: -11px;
- content: "";
- height: 0;
- left: -12px;
- position: absolute;
- z-index: 99999;
- }
- .post_reply_comments h2 a{
- }
- .message_heading {
- margin-bottom: 50px;
- margin-top: 60px;
- }
- /******************
- 404 page css
- ******************/
- #error .btn-success:hover,
- .btn-success:focus,
- .btn-success:active,
- .btn-success.active,
- .open .dropdown-toggle.btn-success:hover {
- background-color: #EBEBEB;
- border-color: #EBEBEB;
- color: #4E4E4E;
- }
- #error h1{
- color: #4e4e4e;
- text-transform: uppercase;
- }
- /******************
- shortcodes page css
- ******************/
- .shortcode-item {
- padding-bottom: 0;
- }
- .shortcode-item h2 {
- color: #4E4E4E;
- font-size: 24px;
- margin-bottom: 22px;
- margin-top: 0;
- font-weight: 600
- }
- /***********************
- ********* Footer ******
- ************************/
- #bottom {
- background: #f5f5f5;
- border-bottom: 5px solid #c52d2f;
- font-size: 14px;
- }
- #bottom h3 {
- margin-top: 0;
- margin-bottom: 10px;
- text-transform: uppercase;
- font-size:22px;
- color: #000;
- }
- #bottom ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- #bottom ul li {
- display: block;
- padding: 5px 0;
- }
- #bottom ul li a {
- color: #808080;
- }
- #bottom ul li a:hover {
- color: #c52d2f;
- }
- #bottom .widget {
- margin-bottom: 0;
- }
- #footer {
- padding-top: 30px;
- padding-bottom: 30px;
- color: #fff;
- background: #2e2e2e;
- }
- #footer a {
- color: #fff;
- }
- #footer a:hover {
- color: #c52d2f;
- }
- #footer ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- #footer ul > li {
- display: inline-block;
- margin-left: 15px;
- }
- #button4{
- height: 69px !important;
- width: 69px !important;
- background-color:transparent !important;
- background-image: url('settings.png') !important;
- background-position: center !important;
- background-repeat: no-repeat !important;
- border: 0 !important;
- float:right;
- }
- </style>
- <section id="recent-works" style='margin-top:60px'>
- <div class="container">
- <div class='row'>
- <div class='col-md-8'>
- <div class="center wow fadeInDown">
- <h2>SMART HOUSE</h2>
- <p class="lead" id='tips'></p>
- </div>
- <button id="button4"></button>
- <div class='row' >
- <img src='http://i.imgur.com/ssBcpHQ.png' style='width:100%'>
- </div>
- <div class="row">
- <div class="col-xs-12 col-sm-4 col-md-3">
- <div class="recent-work-wrap">
- <img class="img-responsive" src="http://i.imgur.com/Eisg3sr.png" alt="">
- <div class="overlay">
- <div class="recent-work-inner">
- <h3>Living room </h3>
- <p>You can control your tv and your jonizator here.</p>
- <a class="preview" href="http://localhost:1880/ui/#/1" rel="prettyPhoto"><i class="fa fa-eye"></i> Go to the living room</a>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-4 col-md-3">
- <div class="recent-work-wrap">
- <img class="img-responsive" src="http://i.imgur.com/fjiMUcd.png" alt="">
- <div class="overlay">
- <div class="recent-work-inner">
- <h3><a href="#">Security room</a></h3>
- <p>Control camera in your house</p>
- <a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Go to the security room</a>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-4 col-md-3">
- <div class="recent-work-wrap">
- <img class="img-responsive" src="http://i.imgur.com/o4n0U5v.png" alt="">
- <div class="overlay">
- <div class="recent-work-inner">
- <h3><a href="#">Temperature room</a></h3>
- <p>Control the temperature for your house here. </p>
- <a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-4 col-md-3">
- <div class="recent-work-wrap">
- <img class="img-responsive" src="http://i.imgur.com/HXTqobF.png" alt="">
- <div class="overlay">
- <div class="recent-work-inner">
- <h3><a href="#">Control room </a></h3>
- <p>Control devices here. Execute commands</p>
- <a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
- </div>
- </div>
- </div>
- </div>
- </div><!--/.row-->
- </div>
- <div class='col-md-4'>
- <div class="details widget" >
- <div id='tempCurr' class="temp" style='font-size: 60px; font-family: Lato;
- line-height: 60px; margin-left:10px;'></div>
- <div class="right">
- <div id="summary" style='font-size:24pt'></div>
- <div id="date"></div>
- </div>
- <div style='margin-top:100px; margin-left:-190px;'>
- <div id='sun' class="weather sun">
- <div class="sun_form">
- <div></div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- </div>
- </div>
- <div id='cloud' class="weather cloud">
- <div>
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div id='storm' class="weather storm">
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div class="storm_form">
- <div></div>
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- </div>
- <div id='cloud-sun-rain' class="weather cloud_sun_rain">
- <div class="sun_form">
- <div></div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- <div>
- <span></span>
- </div>
- </div>
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- </div>
- <div id='rain' class="weather rain">
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- <div class="rain_form">
- <div></div>
- </div>
- </div>
- <div id='snow' class="weather snow">
- <div class="cloud_form">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- <div class="snow_form">
- <span></span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div><!--/.container-->
- </section><!--/#recent-works-->
- <script>
- (function(scope) {
- scope.$watch('msg.payload', function(data) {
- console.log(data);
- scope.init2(data);
- });
- })(scope);
- scope.init2 = function(data) {
- var cond = ['sun', 'cloud', 'rain', 'storm', 'snow', 'cloud-sun-rain'];
- setTimeout(function() {
- for (var i = 0; i < 6; i++) {
- document.getElementById(cond[i]).style.display = "none";
- }
- document.getElementById('summary').innerHTML = data.location;
- document.getElementById('tempCurr').innerHTML = Math.round(data.tempc) + "<span style='font-size: 18px;line-height: 30px;vertical-align: top; margin-left: 5px;' id='celsius'>c</span>";
- var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
- var monthNames = ["January", "February", "March", "April", "May", "June",
- "July", "August", "September", "October", "November", "December"
- ];
- var d = new Date();
- var dayName = days[d.getDay()];
- var m = monthNames[d.getMonth()];
- document.getElementById('date').innerHTML = dayName + ", " + d.getDate() + " " + m;
- var change;
- if (data.detail == 'clear sky')
- change = 'sun';
- else if (data.detail == 'scattered clouds' || data.detail == 'broken clouds' || data.detail == 'few clouds' || data.detail == 'mist')
- change = 'cloud';
- else if (data.detail == 'shower rain')
- change = 'rain';
- else if (data.detail == 'rain' && data.detail == 'light rain')
- change = 'cloud-sun-rain';
- else if (data.detail == 'thunderstorm')
- change = 'storm';
- else if (data.detail == 'snow')
- change = 'snow';
- document.getElementById(change).style.display = 'block';
- var str = "";
- if (Math.round(data.tempc) >= 15 && Math.round(data.tempc) <=25 && data.detail =='clear sky')
- str = "It's a great temperature outside for running or talking a walk. Take care of yourself and take a walk.";
- else if (data.detail =='clear sky' && Math.round(data.tempc)>25)
- str = "It's pretty hot outside, we suggest you stay at home and drink something freshy.";
- else if (data.detail == 'thunderstorm')
- str = "It's thunderstorm outside. We suggest you stay at home.";
- else if (data.detail == 'rain' || data.detail == "light rain")
- str = "It's raining outside. We suggest you bring an umbrella with you if you are going outside.";
- else if (Math.round(data.tempc) >= 15 && Math.round(data.tempc) <=25 && (data.detail == 'scattered clouds' || data.detail == 'broken clouds' || data.detail == 'few clouds' || data.detail == 'mist'))
- str = "It's a nice temperature, but it might rain. We suggest you bring your umbrella if you are going outside.";
- else if (Math.round(data.tempc) < 15)
- str = "It's cold outside. Stay warm.";
- else if (Math.round(data.tempc) >= 25)
- str = "It's hot outside. Bring a water or something freshy if you go outside.";
- else if (Math.round(data.tempc) >= 15 && Math.round(data.tempc) <=25)
- str = "It's a nice temperature outside. Enjoy this day."
- document.getElementById('tips').innerHTML = str;
- },200);
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement