/* Minification failed. Returning unminified contents. (2365,12): run-time error CSS1036: Expected expression, found '#' (4793,1): run-time error CSS1019: Unexpected token, found '@import' (4793,9): run-time error CSS1019: Unexpected token, found 'url(https://fonts.googleapis.com/css?family=Quicksand:400,700)' (7064,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7065,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7081,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7082,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7106,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7107,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7116,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7117,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7133,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7134,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7150,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7151,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7175,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7176,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7202,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7203,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7239,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7240,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7256,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7257,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7281,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7282,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (7308,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7309,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (7348,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7349,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7375,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7376,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7414,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7415,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7451,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7452,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7500,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7501,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7525,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7526,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7559,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7560,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7583,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7584,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7616,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7617,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7640,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7641,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7673,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7674,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7697,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7698,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7730,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7731,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7754,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7755,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7787,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7788,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7811,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7812,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7844,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7845,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7863,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7864,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7890,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7891,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7909,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7910,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7936,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7937,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7955,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7956,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7982,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7983,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8001,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8002,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8028,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8029,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8038,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8039,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8053,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8054,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8067,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8068,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8088,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8089,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8102,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8103,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8123,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8124,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8137,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8138,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8158,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8159,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8172,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8173,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8193,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8194,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8207,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8208,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8228,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8229,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8242,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8243,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8263,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8264,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8277,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8278,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8298,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8299,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8312,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8313,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8333,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8334,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8343,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8344,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8358,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8359,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8372,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8373,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8393,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8394,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8407,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8408,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8428,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8429,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8442,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8443,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8463,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8464,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8477,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8478,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8498,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8499,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8512,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8513,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8533,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8534,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8547,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8548,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8568,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8569,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8582,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8583,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8603,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8604,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8617,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8618,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8638,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8639,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8675,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8676,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8725,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8726,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8749,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8750,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8785,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8786,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8809,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8810,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8845,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8846,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8859,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8860,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8883,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8884,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8897,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8898,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8921,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8922,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8947,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8948,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8984,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8985,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8998,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8999,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9021,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9022,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9039,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9040,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9066,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9067,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9084,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9085,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9111,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9112,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9129,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9130,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9156,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9157,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9174,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9175,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9201,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9202,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9219,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9220,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9246,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9247,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9264,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9265,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9291,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9292,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9309,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9310,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9336,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9337,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9354,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9355,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9381,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9382,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9399,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9400,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9426,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9427,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9444,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9445,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9471,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9472,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9484,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9485,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9504,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9505,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9517,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9518,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9537,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9538,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9550,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9551,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9570,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9571,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9583,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9584,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9603,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9604,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9616,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9617,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9636,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9637,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9649,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9650,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9669,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9670,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9683,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9684,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9704,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9705,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9717,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9718,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9737,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9738,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9782,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9783,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9843,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9844,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9857,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9858,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9880,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9881,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9894,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9895,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9915,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9916,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9927,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9928,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9945,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9946,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9963,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9964,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9988,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9989,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10006,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10007,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10031,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10032,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10049,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10050,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10074,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10075,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10092,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10093,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10117,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10118,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10135,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10136,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10160,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10161,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10178,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10179,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10204,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10205,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10222,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10223,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10248,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10249,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10266,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10292,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10293,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10310,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10311,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' */ /*-- --*/ html, body { font-size: 100%; background: #fff; font-family: 'Open Sans', sans-serif; } p { margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; margin: 0; } ul, label { margin: 0; padding: 0; } body a:hover { text-decoration: none; } /*-- header --*/ .header-grid-left ul li a, .new-collections-grid1-image-pos a, .new-collections-grid1 h4 a, .login a, .register-home a, .checkout-right-basket a, .bootstrap-tab-text-grid-right ul li a, .occasion-cart a, input[type="submit"], .mail-grid-right1 ul li a, .categories ul li a, .new-products-grid-right-add-cart p a, .new-products-grid-right h4 a, .products-right-grid1-add-cart p a, .timer-grid-left h3 a, .new-collections-grid1-left p a, .copy-right p a, .footer-grid-sub-grid-right h4 a, input[type="submit"], .footer-grid ul li a { transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; } .header-grid { padding: 2em 0; border-bottom: 1px solid #DEDEDE; padding-top: 10px; padding-bottom: 10px; } .logo-nav { padding: 2em 0; } .header-grid-left { float: left; } .header-grid-left ul li { display: inline-block; font-size: 14px; color: #999; margin: 0 1em; } .header-grid-left ul li i { left: -.5em; } .header-grid-left ul li a { text-decoration: none; color: #999; } .header-grid-left ul li a:hover { color: #286e89; } .header-grid-right { float: right; margin-right: 0px; margin-left: 0px; } ul.social-icons li { display: inline-block; margin: 0px 4px; } ul.social-icons li a.facebook { background: url(../images/img-sp.png) no-repeat -2px -5px; display: block; width: 20px; height: 20px; } ul.social-icons li a.facebook:hover { background: url(../images/img-sp.png) no-repeat -2px -54px; display: block; } ul.social-icons li a.twitter { background: url(../images/img-sp.png) no-repeat -49px -13px; display: block; width: 20px; height: 20px; } ul.social-icons li a.twitter:hover { background: url(../images/img-sp.png) no-repeat -49px -54px; display: block; } ul.social-icons li a.g { background: url(../images/img-sp.png) no-repeat -94px -12px; display: block; width: 20px; height: 20px; } ul.social-icons li a.g:hover { background: url(../images/img-sp.png) no-repeat -94px -54px; display: block; } ul.social-icons li a.instagram { background: url(../images/img-sp.png) no-repeat -139px -12px; display: block; width: 20px; height: 20px; } ul.social-icons li a.instagram:hover { background: url(../images/img-sp.png) no-repeat -139px -52px; display: block; } .logo-nav-left { float: left; } .logo-nav-left h1 a { font-size: 1.5em; color: #222; text-decoration: none; } .logo-nav-left h1 a span { display: block; font-size: .2em; line-height: 0; text-transform: uppercase; letter-spacing: 12px; color: #222222; padding-left: .3em; } .logo-nav-left1 { float: left; margin-left: 2em; } .logo-nav-left1 ul li a { font-size: 1em; color: #222; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 600; } .logo-nav-left1 ul li.active a.act { color: #0091ca !important; } .multi-column-dropdown li a { color: #999 !important; } .multi-column-dropdown li a:hover { background-color: #eaeaea; padding-left: 5px; border-left: solid 5px #0091ca; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { color: #0091ca; } .navbar-default { background: none; border: none; } .navbar-collapse { padding: 0; } ul.multi-column-dropdown h4 { font-size: 1.5em; color: #222222; margin: 0 0 .5em; padding-bottom: .5em; border-bottom: 1px solid #E4E4E4; text-transform: capitalize; text-align: center; } .multi-column-dropdown li { list-style-type: none; margin: 7px 0; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #5c5b5b !important; white-space: normal; font-weight: 500 !important; } .dropdown-menu.columns-3 { min-width: 800px; padding: 30px 30px; } /* hover drowpdown menu */ .dropdown:hover .dropdown-menu { display: block; } .multi-column-dropdown > h4 a:hover { color: #0091ca; } /* hover drowpdown menu */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: none; border: none; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; } .nav > li > a:hover, .nav > li > a:focus { background: none; color: #0091ca !important; } .navbar-nav > li > a { padding: 29px 18px 0; } .search-box { margin-top: .6em; } .header-right { float: right; margin-top: 10px; width: 14%; } .box_1 { float: right; margin-top: 5px; } .box_1 h3 { color: #0091ca; font-size: 1em; margin: 0; } .total { display: inline-block; vertical-align: middle; } .box_1 a img { margin: 4px 0 0 0px; } .box_1 p { margin: 0; color: #999; font-size: 14px; } a.simpleCart_empty { color: #212121; font-size: 13px; text-decoration: none; text-align: right; display: block; } /*-- //header --*/ /*-- banner --*/ .banner { background: url(../images/banner.jpg) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 700px; } .banner-info h3 { font-size: 5em; color: #fff; margin: 0; } .banner-info { margin: 9em 0 0; text-align: center; } .banner-info h4 { font-size: 3em; color: #fff; margin: 0em 0 0 7.5em; font-weight: 300; font-family: 'Lato', sans-serif; } .banner-info h4 span { padding: 0.8em .9em; background: #286e89; border-radius: 100%; display: inline-block; } .banner-info h4 span i { display: block; } .banner-info1 p { font-size: 2em; color: #fff; margin: 0; line-height: 1.8em; width: 65%; } /*-- //banner --*/ /*-- banner-bottom --*/ .banner-bottom, .new-collections, .checkout, .collections-bottom, .timer, .register, .products, .typo, .mail, .single, .login, .single-related-products { padding: 2em 0; } .container-checkout { padding: 3em 0; } .banner-bottom-grid-left { float: left; width: 33.1%; } .banner-bottom-grid-left1 { float: left; width: 32.5%; margin: 0 1em; } .banner-bottom-grid-right { float: left; width: 31.5%; } .left1-grid:nth-child(2) { margin: 1em 0 0; } .grid-left-grid1 { position: relative; display: block; overflow: hidden; text-align: center; } .grid-left-grid1, .banner-bottom-grid-left-grid1 { position: relative; width: 100%; } .grid-left-grid1:hover img, .products-right-grids-position:hover img, .timer-grid-right1:hover img { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .grid-left-grid1 img, .products-right-grids-position img, .timer-grid-right1 img { -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .grid-left-grid1-pos { position: absolute; bottom: 14%; left: 2%; width: 90%; text-align: center; text-transform: capitalize; } .grid-left-grid1-pos p { font-size: 2em; color: #fff; margin: 0; } .grid-left-grid1-pos p span { display: block; } .banner-bottom-grid-left1-pos { position: absolute; top: 36%; left: 3%; width: 90%; } .banner-bottom-grid-left1-pos p { font-size: 2em; color: #fff; margin: 0; } .banner-bottom-grid-left1-position { position: absolute; top: 6%; left: 3%; width: 94%; height: 89%; padding: 1em; border: 1px solid #fff; } .banner-bottom-grid-left1-pos1 { padding: 1.8em; background: rgba(0, 0, 0, 0.22); } .banner-bottom-grid-left1-pos1 p { font-size: 2em; color: #fff; margin: 0; } .grid { position: relative; clear: both; margin: 0 auto; padding: 0; max-width: 1000px; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; float: none; overflow: hidden; margin: 0; min-width: 376px; max-width: 480px; max-height: 470px; width: 48%; height: auto; background: #3085a3; text-align: center; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; } .grid figure figcaption { padding: 2em; color: #fff; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h3 { word-spacing: -0.15em; } .grid figure h3 span { color: #286e89; } .grid figure h3 i { display: block; font-style: normal; font-size: .5em; line-height: 0.5; letter-spacing: 5px; text-transform: uppercase; } .grid figure h3, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } /* Individual effects */ /*---------------*/ /***** Julia *****/ /*---------------*/ figure.effect-julia { background: #2f3238; } figure.effect-julia img { -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-julia figcaption { text-align: left; } figure.effect-julia h3 { position: relative; padding: 0.5em 0 1em; font-size: 2em; line-height: 1.5em; } figure.effect-julia p { display: inline-block; margin: 0 0 0.5em; padding: 0.4em 1em; background: #fff; color: #2f3238; text-transform: none; font-weight: 500; font-size: 75%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-360px,0,0); transform: translate3d(-360px,0,0); } figure.effect-julia p:first-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } figure.effect-julia p:nth-of-type(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-julia p:nth-of-type(3) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; } figure.effect-julia:hover p:nth-of-type(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } figure.effect-julia:hover p:nth-of-type(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-julia:hover img { opacity: 0.4; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /*-----------------*/ /*-- //banner-bottom --*/ /*-- new-collections --*/ .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { text-align: center; color: #222; margin: 0; position: relative; font-size: 2em; } .new-collections h3:before, .new-collections h3:after, h3.title:before, h3.title:after, .mail h3:before, .mail h3:after, .single-related-products h3:before, .single-related-products h3:after, .login h3:before, .login h3:after, .register h3:before, .register h3:after { position: absolute; top: 50%; width: 15%; background: #D5D5D5; content: ''; } .new-collections h3:before, .single-related-products h3:before { left: 17%; } h3.title:before, .login h3:before { left: 22%; } .new-collections h3:after, .single-related-products h3:after { right: 17%; } h3.title::after, .login h3:after { right: 22%; } p.est { width: 60%; margin: .5em auto 0 !important; color: #999; font-size: 14px; line-height: 1.8em; text-align: center; font-weight: 500 !important; } .new-collections-grid { padding-left: 0; margin-bottom: 10px; } .new-collections-grids { margin: 3em 0 0; } .new-collections-grid1 { padding: 1em; background: #fff; } .new-collections-grid1 img { margin: 0 auto; } .new-collections-grid1 h4 a { font-size: .9em; color: #222; margin: 1em 0 .3em; text-transform: uppercase; display: block; text-decoration: none; } .new-collections-grid1 h4 a:hover { color: #0091ca; } .new-collections-grid1 p { font-size: 14px; color: #999; line-height: 1.8em; margin: 0 0 .5em; min-height: 75px; max-height: 75px; } .item-addToCart { margin-top: 15px; padding-left: 0px; padding-right: 0px; } .btn_addtocart { text-align:center; } .new-collections-grid1-left .item-addToCart a, .occasion-cart a { font-size: 14px; color: #0091ca; margin: 0; text-decoration: none; /*padding: .5em 5.1em;*/ padding-top: .5em; padding-bottom: .5em; border: 1px solid; } .new-collections-grid1-left .item_addCartDetials a, .occasion-cart a { font-size: 14px; color: #0091ca; margin: 0; text-decoration: none; padding: 5px 15px; padding-top: .5em; padding-bottom: .5em; border: 1px solid; } .new-collections-grid1-left .item-price-offer i { color: #999; position: relative; font-style: normal; font-size: 14px; margin-right: 5px; margin-left: 18px; } .new-collections-grid1-left .item-price-offer span { margin: 0 1em 0 .5em; } .new-collections-grid1-left .item-price-offer i:before, .products-right-grid1-add-cart .item-price-offer i:before { background: #999 none repeat scroll 0 0; content: ""; height: 1px; left: -26%; position: absolute; right: -20%; top: 54%; transform: rotate(-8deg) translate(0, -50%); -moz-transform: rotate(-8deg) translate(0, -50%); -webkit-transform: rotate(-8deg) translate(0, -50%); } .new-collections-grid1-left .item-price-offer { text-transform: capitalize; color: #000; font-size: 1.2em !important; text-align: center; background-color: #e1e1e1; padding: 5px; } .new-collections { background: #F7F7F9; } .rating-left { float: left; } .new-collections-grid1-left .item-addToCart a:hover, .occasion-cart a:hover, .products-right-grid1-add-cart .item-addToCart a:hover, .new-products-grid-right-add-cart .item-addToCart a:hover { color: #222; border: 1px solid; } .new-collections-grid1-left { margin: 1.5em 0 .8em; } .new-collections-grid1-right { position: absolute; bottom: 29%; left: 30%; display: none; z-index: 999; } .new-collections-grid1-right-rate { left: 44% !important; } .new-collections-grid1:hover .new-collections-grid1-right { display: block; } .rating-left img { margin: .3em 0.1em 0; } .new-collections-grid1:nth-child(2) { margin: 1em 0 0; } .new-collections-grid1 { position: relative; overflow:hidden; } .new-collections-grid1:before { content: ""; position: absolute; width: 0%; height: 72%; left: 50%; top: 0; background: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; z-index: 3; } .new-collections-grid1:hover:before { left: 0; top: 0; width: 100%; height: 72%; } .product-image:not(.zoom-available):hover { position: relative; display: block; border: none; text-align: center; } .product-image { width: 100%; } .new-collections-grid1-image { position: relative; } .new-collections-grid1-image-pos { position: absolute; top: 50%; left: 26%; transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; z-index: 9999; display: none; } .new-collections-grid1-image-pos a { padding: 10px 20px; color: #fff; background: #0091ca; text-decoration: none; font-size: 14px; } .new-collections-grid1:hover .new-collections-grid1-image-pos { display: block; } .new-collections-grid1-image-pos a:hover { background: #286e89; } .new-collections-grid1-image-pos1 { left: 41% !important; } .new-collections-grid1-sub { float: left; width: 48.5%; } .new-collections-grid1-sub:nth-child(2) { margin-left: 1em; } .new-collections-grid-sub-grids { margin: 1em 0 0; } .new-one { position: absolute; top: 0%; right: 0%; padding: .1em .5em; background: #286e89; } .new-one p { font-size: 14px; color: #fff; margin: 0; } /*-- //new-collections --*/ /*-- collections-bottom --*/ .collections-bottom-grids { background: url(../images/12.jpg) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 520px; padding: 8em 2em 2em; } .collections-bottom-grid { border: 4px double #212121; padding: 2em; width: 50%; margin-left: 4em; } .collections-bottom-grid h3 { font-size: 3em; color: #fff; margin: 0; line-height: 1.3em; font-family: 'Cabin', sans-serif; } .collections-bottom-grid h3 span { display: block; color: #212121; } .newsletter { padding: 2em; background: #F7F7F9; text-align: center; } .newsletter h3 { font-size: 2em; color: #222; margin: 0; } .newsletter p { color: #999; font-size: 14px; line-height: 1.8em; margin: .5em 0 2em; } .newsletter form { width: 60%; margin: 0 auto; } .newsletter input[type="email"] { outline: none; padding: 10px 10px 10px 35px; background: none; border: none; border-bottom: 1px solid #D9D9D9; font-size: 14px; color: #999; width: 74%; } .newsletter input[type="submit"] { outline: none; padding: 10px 0; background: #0091ca; border: none; font-size: 1em; color: #fff; width: 17%; margin-left: 2em; } .newsletter input[type="submit"]:hover { background: #286e89; } .newsletter form span { left: 1.5em; color: #286e89; top: 0.1em; } /*-- //collections-bottom --*/ /*-- footer --*/ .footer-bs { background-color: #58595b; padding: 60px 40px; color: rgba(255,255,255,1.00); } .footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { padding: 10px 25px; } .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-color: transparent; } .footer-bs .footer-brand h2 { margin: 0px 0px 10px; } .footer-bs .footer-brand p { font-size: 12px; color: rgba(255,255,255,0.70); } .footer-bs .footer-nav ul.pages { list-style: none; padding: 0px; } .footer-bs .footer-nav ul.pages li { padding: 2px 0px; } .footer-bs .footer-nav ul.pages a { color: rgba(255,255,255,1.00); font-size: 11px; } .footer-bs .footer-nav ul.pages a:hover { color: rgba(255,255,255,0.80); text-decoration: none; } .footer-bs .footer-nav h4 { font-size: 20px; margin-bottom: 10px; } .footer-bs .footer-nav ul.list { list-style: none; padding: 0px; } .footer-bs .footer-nav ul.list li { padding: 5px 0px; } .footer-bs .footer-nav ul.list a { color: rgba(255,255,255,0.80); } .footer-bs .footer-nav ul.list a:hover { color: rgba(255,255,255,0.60); text-decoration: none; } .footer-bs .footer-social ul { list-style: none; padding: 0px; } .footer-bs .footer-social h4 { font-size: 20px; } .footer-bs .footer-social li { padding: 2px 4px; } .footer-bs .footer-social a { color: rgba(255,255,255,1.00); font-size: 12px; } .footer-bs .footer-social a:hover { color: rgba(255,255,255,0.80); text-decoration: none; } .footer-bs .footer-ns h4 { font-size: 20px; text-transform: uppercase; margin-bottom: 10px; } .footer-bs .footer-ns p { font-size: 12px; color: rgba(255,255,255,0.70); } @media (min-width: 768px) { .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-left: solid 1px rgba(255,255,255,0.10); } } /**/ .footer { background: #2E2E2E; padding: 3em 0; } .footer-grid h3 { font-size: 2em; color: #fff; margin: 0 0 1em; position: relative; padding-bottom: .5em; } .footer-grid h3:before { position: absolute; bottom: 0%; width: 30%; height: 1px; background: #ffffff; content: ''; } .footer-grid p { font-size: 14px; color: #363637; line-height: 1.8em; margin: 0; } .footer-grid p span { display: block; margin: 1em 0 0; } .footer-grid ul li { list-style-type: none; margin-bottom: 1em; color: #ffffff; font-size: 14px; } .footer-grid ul li i { color: #ffffff; border: 1px solid #ffffff; padding: .5em; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; margin-right: 1em; } .footer-grid ul li span { display: block; margin-left: 3em; } .footer-grid ul li a { color: #ffffff; text-decoration: none; } .footer-grid ul li a:hover { color: #373737; } .footer-grid-left { float: left; width: 33.33%; padding: .3em; } .footer-grid-sub-grid-left { float: left; width: 30%; } .footer-grid-sub-grid-right { float: right; width: 62%; } .footer-grid-sub-grid-right h4 a { text-transform: capitalize; font-size: 1em; line-height: 1.5em; color: #999; text-decoration: none; } .footer-grid-sub-grid-right h4 a:hover { color: #fff; } .footer-grid-sub-grid-right p { margin: .5em 0 0; color: #999; font-size: 14px; line-height: 1.8em; } .footer-grid-sub-grids:nth-child(3) { margin: 1em 0 0; } .footer-logo { text-align: center; margin: 3em 0; } .footer-logo h2 a { font-size: 2em; color: #575757; text-decoration: none; position: relative; } .footer-logo h2 { position: relative; } .footer-logo h2 a span { display: block; font-size: .2em; letter-spacing: 5px; text-transform: uppercase; } .footer-logo h2:before, .footer-logo h2:after { content: ''; width: 36%; height: 4px; border-top: 1px solid #575757; border-bottom: 1px solid #575757; position: absolute; top: 60%; } .footer-logo h2:before { left: 0%; } .footer-logo h2:after { right: 0%; } .copy-right p { text-align: center; color: #999; margin: 0; line-height: 1.8em; } .copy-right p a { color: #fff; text-decoration: none; } .copy-right p a:hover { color: #999; } /*-- //footer --*/ /*-- timer --*/ .timer-grid-left h3 a { text-transform: capitalize; font-size: 1.5em; color: #212121; margin: 0; line-height: 1.5em; text-decoration: none; } .timer-grid-left h3 a:hover { color: #0091ca; } .timer-grid-left-price h4 { color: #999; font-size: 14px; margin: 1em 0 2em; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } .timer-grid-left h3 { margin: 0 0 0.5em; } /* ---------- TIMER ---------- */ #counter { height: 125px; font-size: 40px; color: #212121; overflow: hidden; } .countHours, .countDays, .countMinutes { border-right: 1px solid #E3E3E3; } .countDays, .countHours, .countMinutes, .countSeconds { display: inline-block; padding: 0.5em 0; } .points { float: left; width: 40px; margin: 0; font-size: 44px; font-weight: bold; text-align: center; line-height: 138px; text-shadow: none; color: #999; display: none; } .boxName { float: left; width: 100%; font-size: 14px; color: #999; font-weight: 500; clear: both; padding: 0px; font-family: 'Open Sans', sans-serif; } /* ---------- /TIMER ---------- */ .timer-grid-right { padding: 1em; background: #F7F7F9; position: relative; } .timer-grid-right-pos { position: absolute; top: 0%; right: 0%; } .timer-grid-right-pos h4 { padding: .3em 1em .5em; background: #286e89; font-size: 1em; color: #fff; text-decoration: none; } /*-- //timer --*/ /*-- products --*/ .breadcrumbs { padding: 1.5em 0; background: #b1b1b2; } .breadcrumb1 { padding: 0; margin: 0; } .breadcrumb1 li { font-size: 1em; color: #999; } .breadcrumb1 li a { color: #0091ca; text-decoration: none; } .breadcrumb1 li span { left: 0em; padding-right: 1em; color: #0091ca; } .sorting { float: right; width: 35%; } .sorting-left { float: right; margin-right: 2em; width: 25%; } select#ProductQuantity, select#ProductQuantity { border: 1px solid #212121; outline: none; font-size: 14px; color: #212121; padding: 0.5em; width: 100%; cursor: pointer; } .products-right-grids { margin-bottom: 2em; } .products-right-grids-bottom { background: #F7F7F9; padding: 1em 0 1em 1em; } .products-right-grid1 { text-align: center; } .products-right-grid1-add-cart p i { color: #999; position: relative; font-style: normal; font-size: 14px; } .products-right-grid1-add-cart p, .new-products-grid-right-add-cart p { margin: 0 !important; text-transform: capitalize; color: #000; font-size: 1.2em !important; } .products-right-grid1-add-cart p a, .new-products-grid-right-add-cart p a { font-size: 14px; color: #0091ca; margin: 1em 0 0; text-decoration: none; text-transform: uppercase; padding: 0em 1em; border: 1px solid; } .products-right-grid1-add-cart p a { display: block; } .products-right-grid1-add-cart p span { margin-left: 1em; } .products-right-grid1:hover:before { height: 62% !important; } .products-right-grid1:before { height: 60% !important; } .products-right-grids-pos { top: 40% !important; left: 20% !important; } .products-right-grids-pos-right { bottom: 35% !important; left: 26% !important; } .products-right-grids-bottom-grid { padding-left: 0; } .products-right-grid1:nth-child(2) { margin: 1em 0 !important; } .numbering { text-align: right; } ul.paging { margin: 4em auto 0; } .paging > .active > a, .paging > .active > a:hover { background-color: #286e89; border-color: #EDB62B; } .pagination > li > a { color: #212121; } .categories, .new-products { border: 1px solid #999; border-radius: 1em; background-color: #383838; } .categories { margin: 1em 0; } .categories h3, .filter-price h3, .new-products h3 { font-size: 1.5em; color: #212121; margin: 0; padding: .5em; background: #f5f5f5; text-transform: uppercase; text-align: center; letter-spacing: 5px; } .filter-price h3 { background: none; } .categories ul.cate, .new-products-grids { padding-top: 1em; padding-left: .5em; padding-right: .5em; } .categories ul li { display: block; color: #999; font-size: 14px; padding-left: 2em; margin-bottom: 1em; } .categories ul li a { color: #fff; text-decoration: none; } .categories ul li a:hover { color: #0091ca; } .categories ul li span { float: right; } ul.cate ul { margin-left: 2em; } ul.dropdown-menu1 li { display: block; font-size: 14px; } ul.dropdown-menu1 li a { color: #212121; text-decoration: none; } input#amount { outline: none; margin: 0 auto; text-align: center; width: 100%; } .new-products-grid-left { float: left; width: 35%; } .new-products-grid-right { float: right; width: 60%; } .new-products-grid-right h4 a { text-transform: uppercase; font-size: 14px; line-height: 1.8em; color: #212121; text-decoration: none; display: block; margin-bottom: .5em; } .new-products-grid-right h4 a:hover { color: #0091ca; } .new-products-grid-right-add-cart p span { display: block; margin: 0.5em 0 1em; } .new-products-grid-right-add-cart p a { padding: .5em 1em; } .new-products-grid:nth-child(2) { margin: 3em 0; } .products-right-grids-position, .timer-grid-right1 { position: relative; display: block; overflow: hidden; } .products-right-grids-position1 { position: absolute; top: 40%; left: 10%; } .products-right-grids-position1 h4 { text-transform: uppercase; font-size: 1.5em; color: #fff; letter-spacing: 3px; padding-bottom: .53em; border-bottom: 1px solid #fff; width: 50%; } .products-right-grids-position1 p { margin: 1em 0 0; color: #fff; font-size: 14px; width: 85%; line-height: 1.8em; } .men-position { margin: 3em 0 0; position: relative; padding: 1em; background: #F7F7F9; } .men-position-pos { position: absolute; top: 30%; left: 15%; } .men-position-pos h4 { text-transform: uppercase; font-size: 2em; color: #fff; margin: 0; padding-bottom: 1em; position: relative; } .men-position-pos h4:after { content: ''; background: #fff; width: 50%; right: 15%; height: 2px; position: absolute; bottom: 0%; } .men-position-pos h5 { margin: 1em 0 0; color: #fff; text-transform: uppercase; font-size: 2em; text-align: center; } .men-position-pos h5 span { color: #286e89; font-weight: 600; } /*-- //products --*/ /*--Typography--*/ .well { font-weight: 300; font-size: 14px; } .list-group-item { font-weight: 300; font-size: 14px; } li.list-group-item1 { font-size: 14px; font-weight: 300; } .typo p { margin: 0; font-size: 14px; font-weight: 300; } .show-grid [class^=col-] { background: #fff; text-align: center; margin-bottom: 10px; line-height: 2em; border: 10px solid #f0f0f0; } .show-grid [class*="col-"]:hover { background: #e0e0e0; } .grid_3 { margin-bottom: 2em; } .xs h3, h3.m_1 { color: #000; font-size: 1.7em; font-weight: 300; margin-bottom: 1em; } .grid_3 p { color: #999; font-size: 0.85em; margin-bottom: 1em; font-weight: 300; } .grid_4 { background: none; margin-top: 50px; } .label { font-weight: 300 !important; border-radius: 4px; } .grid_5 { background: none; padding: 2em 0; } .grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars { margin-bottom: 1em; color: #0091ca; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top: none !important; } .tab-content > .active { display: block; visibility: visible; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 0; } .badge-primary { background-color: #03a9f4; } .badge-success { background-color: #8bc34a; } .badge-warning { background-color: #ffc107; } .badge-danger { background-color: #e51c23; } .grid_3 p { line-height: 2em; color: #888; font-size: 0.9em; margin-bottom: 1em; font-weight: 300; } .bs-docs-example { margin: 1em 0; } section#tables p { margin-top: 1em; } .tab-container .tab-content { border-radius: 0 2px 2px 2px; border: 1px solid #e0e0e0; padding: 16px; background-color: #ffffff; } .table td, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 15px !important; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { font-size: 0.9em; color: #999; border-top: none !important; } .tab-content > .active { display: block; visibility: visible; } .label { font-weight: 300 !important; } .label { padding: 4px 6px; border: none; text-shadow: none; } .nav-tabs { margin-bottom: 1em; } .alert { font-size: 0.85em; } h1.t-button, h2.t-button, h3.t-button, h4.t-button, h5.t-button { line-height: 1.8em; margin-top: 0.5em; margin-bottom: 0.5em; } li.list-group-item1 { line-height: 2.5em; } .input-group { margin-bottom: 20px; } .list-group { margin-bottom: 48px; } ol { margin-bottom: 44px; } h2.typoh2 { margin: 0 0 10px; } @media (max-width:768px) { .grid_5 { padding: 0 0 1em; } .grid_3 { margin-bottom: 0em; } } @media (max-width:640px) { h1, .h1, h2, .h2, h3, .h3 { margin-top: 0px; margin-bottom: 0px; } .grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars { margin-bottom: .5em; } .progress { height: 10px; margin-bottom: 10px; } ol.breadcrumb li, .grid_3 p, ul.list-group li, li.list-group-item1 { font-size: 14px; } .breadcrumb { margin-bottom: 10px; } .well { font-size: 14px; margin-bottom: 10px; } h2.typoh2 { font-size: 1.5em; } } @media (max-width:480px) { .table h1 { font-size: 26px; } .table h2 { font-size: 23px; } .table h3 { font-size: 20px; } .label { font-size: 53%; } .alert, p { font-size: 14px; } .pagination { margin: 20px 0 0px; } } @media (max-width: 320px) { .caption span { margin: 0 0 1.5em; } .grid_4 { margin-top: 18px; } h3.title { font-size: 1.6em; } .alert, p, ol.breadcrumb li, .grid_3 p, .well, ul.list-group li, li.list-group-item1, a.list-group-item { font-size: 13px; } .alert { padding: 10px; margin-bottom: 10px; } ul.pagination li a { font-size: 14px; padding: 5px 11px; } .list-group { margin-bottom: 10px; } .well { padding: 10px; } .nav > li > a { font-size: 14px; } table.table.table-striped, .table-bordered, .bs-docs-example { display: none; } } /*-- //Typography --*/ /*-- mail --*/ .mail h3:before { left: 25%; } .mail h3:after { right: 25%; } .mail-grids { margin: 3em 0; } .mail-grid-left input[type="text"], .mail-grid-left input[type="email"], .mail-grid-left textarea { outline: none; border: 1px solid #E4E4E4; background: #f5f5f5; font-size: 14px; color: #212121; padding: 10px; width: 100%; } .mail-grid-left input[type="email"] { margin: 1em 0; } .mail-grid-left textarea { min-height: 200px; margin: 1em 0 .8em; } .mail-grid-left input[type="submit"] { outline: none; border: none; background: #0091ca; font-size: 1em; color: #fff; padding: 10px 0; width: 30%; } .mail-grid-left input[type="submit"]:hover { background: #286e89; } .mail-grid-right1 { padding: 2em; background: #535353; text-align: center; } .mail-grid-right1 img { margin: 0 auto; padding: .5em; border: 1px dotted #212121; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; } .mail-grid-right1 h4 { font-size: 1em; color: #212121; margin: 1em 0; text-transform: uppercase; } .mail-grid-right1 h4 span { display: block; text-transform: capitalize; font-size: .8em; color: #FFFFFF; margin: .5em 0 0; } .mail-grid-right1 ul.phone-mail li { list-style-type: none; margin-bottom: 1em; font-size: 14px; color: #FFFFFF; } .mail-grid-right1 ul.phone-mail li a { color: #FFFFFF; text-decoration: none; } .mail-grid-right1 ul.phone-mail li a:hover { color: #212121; } .mail-grid-right1 ul li i { left: -.5em; } ul.phone-mail { margin: 0 0 2em; } .mail iframe { width: 100%; min-height: 300px; padding: 0 1em; } /*-- //mail --*/ /*-- wmuslider --*/ .wmuSlider { position: relative; overflow: hidden; } .wmuSlider .wmuSliderWrapper article img { /*--max-width: 100%; width: auto; height: auto; display:block;--*/ } /* Default Skin */ .wmuSliderPagination { z-index: 2; position: absolute; left: 45%; bottom: 10%; } ul.wmuSliderPagination { padding: 0; } .wmuSliderPagination li { float: left; margin: 0 8px 0 0; list-style-type: none; } .wmuSliderPagination a { display: block; text-indent: -9999px; width: 50px; height: 5px; background: transparent; border: 2px solid #fff; } .wmuSliderPagination a.wmuActive { background: transparent; border: 2px solid #286e89; } /* Default Skin */ .wmuGallery .wmuGalleryImage { margin-bottom: 10px; } .banner-wrap { padding: 0px 0 5em; } /*-- //wmuslider --*/ /*-- single --*/ .single-right-left h3 { text-transform: capitalize; font-size: 2em; color: #212121; margin: 0; } .single-right-left h4 { color: #0091ca; font-size: 1.5em; margin: .5em 0 1em; } .description { margin: 2em 0; } .description h5 { color: #212121; font-size: 1em; margin: 0; } .description p { font-size: 14px; color: #999; line-height: 1.8em; margin: 0.5em 0 0; } .color-quality { margin-bottom: 20px; margin-left: 16px; } .color-quality-left { float: left; } .color-quality-left h5, .color-quality-right h5, .occasional h5 { text-transform: uppercase; font-size: 1em; color: #212121; margin: 0 0 1em; } .color-quality-left ul li { display: inline-block; margin-right: .5em; } .color-quality-left ul li a { font-size: 14px; color: #999; text-decoration: none; } .color-quality-left ul li a span { width: 15px; height: 15px; display: block; background: #ff0000; margin: 0 auto .5em; } .color-quality-left ul li a.brown span { background: #00008c; } .color-quality-left ul li a.purple span { background: #840084; } .color-quality-left ul li a.gray span { background: #ff00ff; } .color-quality-right { float: right; } .occasional { margin: 2em 0; } label.radio { font-size: 14px; font-weight: 500; color: #999; padding-left: 20px; margin: 0; } .radio i { position: absolute; top: 5px; left: 0; display: block; width: 10px; height: 10px; outline: none; background: #0091ca; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; } .radio input + i:after { content: ''; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background-color: #fff !important; } .colr { float: left; margin-right: 1em; } .social-left { float: left; } .social-right { float: left; margin-left: 2em; } .social-left p { font-size: 14px; color: #999; margin: 0; } .social { margin: 2em 0 0; padding: 1em 0; border-top: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; } .bootstrap-tab { margin: 5em 0 0; } .bootstrap-tab-text p { font-size: 14px; color: #3f3f3f; line-height: 1.8em; margin-left: 20px; margin-right: 20px; } .bootstrap-tab-text h5, .add-review h4 { text-transform: uppercase; font-size: 1.2em; color: #212121; margin: 2em 0; } .bootstrap-tab-text p span { display: block; margin: 2em 0 0; } .bootstrap-tab ul li a { font-size: 1em; color: #999; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #0091ca; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #0d21aa !important; } .headerSubCap { color: #0091ca; } .bootstrap-tab-text-grid-left { float: left; width: 20%; } .bootstrap-tab-text-grid-right { padding: 10px; } .bootstrap-tab-text-grid-right ul li { display: inline-block; } .bootstrap-tab-text-grid-right ul li:nth-child(2) { float: right; } .bootstrap-tab-text-grid-right ul li a { font-size: 1em; color: #0091ca; text-transform: uppercase; text-decoration: none; } .bootstrap-tab-text-grid-right ul li a:hover { color: #212121; } .bootstrap-tab-text-grid-right ul li a span { left: -1em; } .bootstrap-tab-text-grids { margin: 3em 0 0 5em; } .bootstrap-tab-text-grid-right p { margin: 2em 0 0; color: ##707070; font-size: 14px; line-height: 1.8em; } .bootstrap-tab-text-grid { margin: 3em 0 0; background-color: #eeeeee; box-shadow: 9px 8px 9px #888888; } .add-review form { margin: 2em 0 0; } .add-review input[type="text"], .add-review input[type="email"], .add-review textarea { outline: none; padding: 10px; margin-bottom: 18px; background: #f5f5f5; border: 1px solid #D2D2D2; width: 48.6%; font-size: 14px; color: #212121; } .add-review input[type="email"] { margin-left: 1em; } .add-review textarea { width: 100% !important; min-height: 150px; margin-bottom: .8em; } .add-review input[type="text"]:nth-child(3) { width: 100%; margin: 1em 0; } .add-review input[type="submit"] { outline: none; padding: 10px 0; background: #286e89; border: none; width: 30%; font-size: 1em; color: #fff; } .add-review input[type="submit"]:hover { background: #0091ca; } .single-related-products { background: #F7F7F9; } .header-grid-left ul li.active, .header-grid-left ul li.active a { color: #0091ca; } /*-- Ratings --*/ .rating1 { direction: ltr; } .starRating:not(old) { display: inline-block; height: 18px; width: 100px; overflow: hidden; } .starRating:not(old) > input { margin-right: -26%; opacity: 0; } .starRating:not(old) > label { float: right; background: url(../images/1.png); background-size: contain; margin-right: 2px; } .starRating:not(old) > label:before { content: ''; display: block; width: 18px; height: 18px; background: url(../images/2.png); background-size: contain; opacity: 0; transition: opacity 0.2s linear; } .starRating:not(old) > label:hover:before, .starRating:not(old) > label:hover ~ label:before, .starRating:not(:hover) > :checked ~ label:before { opacity: 1; } /*-- //Ratings --*/ /*-- //single --*/ /*-- login --*/ .login-form-grids { width: 45%; padding: 3em; background: #F7F7F9; margin: 3em auto 0; } .login-form-grids input[type="email"], .login-form-grids input[type="password"], .login-form-grids input[type="text"] { outline: none; border: 1px solid #DBDBDB; padding: 10px 10px 10px 45px; font-size: 14px; color: #4b4a4a; display: block; width: 100%; } .login-form-grids .firstname { background: url(../images/img-sp.png) no-repeat 5px -259px #fff; margin: 1em 0 1em; } .login-form-grids .lastname { background: url(../images/img-sp.png) no-repeat 5px -298px #fff; margin: 1em 0 1em; } .login-form-grids .phone { background: url(../images/icons8-phone.png) no-repeat 14px 11px #fff; margin: 1em 0 1em; } .login-form-grids input[type="email"] { background: url(../images/img-sp.png) no-repeat 5px -182px #fff; margin: 1em 0 0; } .login-form-grids input[type="password"] { background: url(../images/img-sp.png) no-repeat 5px -220px #fff; margin: 1em 0 0; } .forgot { margin: 1.5em 0 0; } .login-form-grids input[type="submit"] { outline: none; border: none; padding: 10px 0; font-size: 1em; color: #fff; display: block; width: 100%; background: #286e89; margin: 1.5em 0 0; } .login-form-grids input[type="submit"]:hover { background: #0091ca; } .login-form-grids ::-webkit-input-placeholder { color: #999; } .forgot a { color: #212121; font-size: 14px; text-decoration: none; } .forgot a:hover { color: #0091ca; } .login h4 { margin: 2em 0 0.5em; font-size: 1.5em; color: #212121; text-align: center; text-transform: uppercase; } .login p { font-size: 14px; color: #999; line-height: 1.8em; margin: 0; text-align: center; } .login p a { color: #0091ca; text-decoration: none; font-size: 1.2em; padding: 0 .5em; } .login p a:hover { color: #212121; } .login p a span { top: 0.1em; font-size: .7em; left: 0.3em; } /*-- //login --*/ /*-- register --*/ .register h3:before { left: 20%; } .register h3:after { right: 20%; } .login-form-grids h5, .login-form-grids h6 { font-size: 1em; color: #212121; text-transform: uppercase; margin: 0 0 2em; } /*.login-form-grids input[type="text"]{ background:url(/img/img-sp.png) no-repeat 5px -298px #fff; margin:1em 0; }*/ .login-form-grids input[type="text"]:nth-child(2) { background: url(../images/img-sp.png) no-repeat 9px -259px #fff; } .register-check-box label { font-size: 14px; font-weight: 500; color: #999; margin: 1.5em 0 0 0em; } .checkbox { position: relative; padding-left: 38px !important; cursor: pointer; } .checkbox i { position: absolute; bottom: -2px; left: 0; display: block; width: 25px; height: 25px; outline: none; border: 2px solid #4b4b4b; background: #FFF; } .checkbox input + i:after, .radio input + i:after { position: absolute; opacity: 0; transition: opacity 0.1s; -o-transition: opacity 0.1s; -ms-transition: opacity 0.1s; -moz-transition: opacity 0.1s; -webkit-transition: opacity 0.1s; } .checkbox input:checked + i:after, .radio input:checked + i:after { opacity: 1; } .checkbox input, .radio input { position: absolute; left: -9999px; } .checkbox input + i:after { content: ''; background: url("../images/check.png") no-repeat 1px 2px; top: 0px; left: 2px; width: 16px; height: 16px; font: normal 12px/16px FontAwesome; text-align: center; } .login-form-grids h6 { margin: 2em 0 2em !important; } .login-form-grids input[type="password"]:nth-child(3) { margin: 1em 0; } .register-home { margin: 2em 0 0; text-align: center; } .register-home a { padding: 8px 45px; background: #9F9F9F; color: #fff; font-size: 1em; text-decoration: none; } .register-home a:hover { background: #0091ca; } /*-- //register --*/ /*-- checkout --*/ .checkout h3 { font-size: 1em; color: #212121; text-transform: uppercase; margin: 0 0 3em; } .checkout h3 span { color: #0091ca; } table.timetable_sub { width: 100%; margin: 0 auto; } .timetable_sub thead { background: #004284; } .timetable_sub th { background: #0091ca; color: #fff !important; text-transform: capitalize; font-size: 13px; border-right: 1px solid #A95832; } .timetable_sub th, .timetable_sub td { text-align: center; padding: 7px; font-size: 14px; color: #212121; } .timetable_sub td { border: 1px solid #CDCDCD; } td.colorid { background-color: #ececec; } td.invert-image a img { width: 30%; margin: 0 auto; } .rem { position: relative; } .close1, .close2, .close3 { background: url('../images/close_1.png') no-repeat 0px 0px; cursor: pointer; width: 28px; height: 28px; position: absolute; right: 15px; top: -13px; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } /*-- quantity-starts --*/ .value-minus, .value-plus { height: 40px; line-height: 24px; width: 40px; margin-right: 3px; display: inline-block; cursor: pointer; position: relative; font-size: 18px; color: #fff; text-align: center; -webkit-user-select: none; -moz-user-select: none; border: 1px solid #b2b2b2; vertical-align: bottom; } .quantity-select .entry.value-minus:before, .quantity-select .entry.value-plus:before { content: ""; width: 13px; height: 2px; background: #000; left: 50%; margin-left: -7px; top: 50%; margin-top: -0.5px; position: absolute; } .quantity-select .entry.value-plus:after { content: ""; height: 13px; width: 2px; background: #000; left: 50%; margin-left: -1.4px; top: 50%; margin-top: -6.2px; position: absolute; } .value { cursor: default; width: 40px; height: 40px; padding: 8px 0px; color: #A9A9A9; line-height: 24px; border: 1px solid #E5E5E5; background-color: #E5E5E5; text-align: center; display: inline-block; margin-right: 3px; } .quantity-select .entry.value-minus:hover, .quantity-select .entry.value-plus:hover { background: #E5E5E5; } .quantity-select .entry.value-minus { margin-left: 0; } /*-- quantity-end --*/ .checkout-left-basket h4 { padding: 1em; background: #286e89; font-size: 1.1em; color: #fff; text-transform: uppercase; text-align: center; margin: 0 0 1em; } .checkout-left { margin: 2em 0 0; } .checkout-left-basket ul li { list-style-type: none; margin-bottom: 1em; font-size: 14px; color: #999; } .checkout-left-basket { float: left; width: 25%; } .checkout-right-basket { float: right; margin: 8em 0 0 0em; } .checkout-left-basket ul li span { float: right; } .checkout-left-basket ul li.totalPrice { font-size: 1em; color: #212121; font-weight: 600; padding: 1em 0; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; margin: 2em 0 0; } .checkout-right-basket a { padding: 10px 30px; color: #fff; font-size: 1em; background: #212121; text-decoration: none; } .checkout-right-basket a:hover { background: #0091ca; } .checkout-right-basket a span { left: -.5em; top: 0.1em; } /*-- //checkout --*/ /*-----start-responsive-design------*/ @media (max-width:1440px) { .sb-search.sb-search-open, .no-js .sb-search { width: 45%; } } @media (max-width:1366px) { /*.sb-search { right: 15%; }*/ .sb-search.sb-search-open, .no-js .sb-search { width: 50%; } .logo-nav { padding: 0em 0 0em; } .products-right-grid1:hover:before { height: 62% !important; } } @media (max-width:1280px) { .banner-info { margin: 7em 0 0; } .banner { min-height: 630px; } } @media (max-width:1080px) { .logo-nav-left h1 a { font-size: 1.2em; } .logo-nav-left { float: left; text-align: left; padding-left: 25px; } .logo-nav-left h1 a span { letter-spacing: 9px; } .navbar-collapse { padding: 0; } .navbar-nav > li > a { padding: 25px 15px 0; } /*.sb-search { right: 18%; }*/ .sb-search.sb-search-open, .no-js .sb-search { width: 55%; } .banner-info h3 { font-size: 4.5em; } .banner-info1 p { font-size: 1.5em; } .banner-info { margin: 5em 0 0; } .banner { min-height: 555px; } .banner-bottom, .new-collections, .checkout, .collections-bottom, .timer, .register, .products, .typo, .mail, .single, .login, .single-related-products { padding: 4em 0; } .grid figure { min-width: 310px; } .grid figure h3 i { font-size: .4em; letter-spacing: 4px; } figure.effect-julia h3 { padding: 0em 0 1em; } figure.effect-julia p { font-size: 57%; } .banner-bottom-grid-left1-pos1 { padding: .8em; } .banner-bottom-grid-right { width: 31.4%; } .grid-left-grid1-pos p { font-size: 1.5em; } .banner-bottom-grid-left1 { width: 32%; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 2.6em; } .new-collections-grid1-left p a { margin: 1em 0 0; padding: 0em 0em; width: 65%; text-align: center; display: block; } .new-collections-grid1 p { font-size: 12px; } .new-collections-grid1:hover:before { height: 61%; } .new-collections-grid1:before { height: 65%; } .new-collections-grid1-left { margin: 0.5em 0 .8em; } .new-collections-grid1-sub { float: left; width: 48.2%; } .new-collections-grid1-image-pos a { padding: 7px 20px; } .new-collections-grid1-image-pos { top: 40%; left: 22%; } .new-collections-grid1-right { bottom: 37%; left: 28%; } .new-collections-grid1-image-pos1 { left: 37% !important; } .new-collections-grid1-right-rate { left: 39.5% !important; } .timer-grid-left h3 a { font-size: 1.3em; } .timer-grid-left-price p a { padding: .5em 1em; margin: 0; width: auto; display: -webkit-inline-box; } .collections-bottom-grid h3 { font-size: 2.5em; } .collections-bottom-grids { min-height: 425px; } .newsletter form { width: 72%; } .footer-grid h3 { font-size: 1.7em; } .footer-grid-sub-grid-right h4 a { font-size: .9em; } .footer-logo { margin: 2em 0 3em; } .footer-logo h2:before, .footer-logo h2:after { width: 33%; } .filter-price h3 { padding: 0 !important; } .products-right-grids-position1 h4 { width: 63%; } .products-right-grids-position1 p { width: 100%; } .products-right-grids-position1 { top: 35%; } .products-right-grids-pos { left: 12% !important; } .products-right-grids-pos-right { left: 21% !important; } .products-right-grid1:hover:before { height: 56% !important; } .men-position-pos { top: 20%; } .single-right-left h3 { font-size: 1.8em; } .colr { margin-right: 0.4em; } .bootstrap-tab-text-grids { margin: 2em 0 0 0em; } .add-review input[type="text"], .add-review input[type="email"], .add-review textarea { width: 48.4%; } .checkout-left-basket { width: 40%; } .login-form-grids { width: 60%; } .dropdown-menu.columns-3 { left: -110%; } } @media (max-width:1024px) { .banner-bottom-grid-left1-pos1 p, .banner-bottom-grid-left1-pos p { font-size: 1.8em; } .header-right { width: 16%; } .dropdown-menu.columns-3 { left: -150%; } } @media (max-width:991px) { .logo-nav-left1 ul li a { font-size: 12px; } .logo-nav-left h1 a { font-size: 1.1em; } .navbar-nav > li > a { padding: 20px 10px 0; } .logo-nav-left1 { margin-left: 0em; } .sb-icon-search, .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search, .sb-search-submit { background: #fff url(../images/img-sp.png) no-repeat 0px -101px; } .sb-search { min-width: 35px; height: 35px; } .sb-icon-search, .sb-search-submit { width: 35px; height: 35px; } .sb-search-input { height: 35px; } /*.sb-search { right: 18%; }*/ .header-right { width: 13%; } .box_1 h3 { font-size: 9px; } .sb-search.sb-search-open, .no-js .sb-search { width: 46%; } .banner-info h3 { font-size: 4em; } .banner-info h4 { font-size: 2.5em; } .banner { min-height: 500px; } .banner-info1 p { width: 75%; } .grid figure { min-width: 238px; } figure.effect-julia h3 { font-size: 1.6em; } .grid figure h3 i { letter-spacing: 2px; } .grid figure figcaption { padding: 1em; } .grid figure p { letter-spacing: 0px; } .banner-bottom-grid-left1-pos1 p, .banner-bottom-grid-left1-pos p { font-size: 1.5em; } .banner-bottom-grid-left1-position { padding: .5em; } .banner-bottom-grid-left1 { width: 31.7%; margin: 0 0.5em; } .banner-bottom-grid-right { width: 30.8%; } .banner-bottom-grid-right { width: 31.8%; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 2em; } .banner-bottom, .new-collections, .checkout, .collections-bottom, .timer, .register, .products, .typo, .mail, .single, .login, .single-related-products { padding: 3em 0; } .new-collections-grid, .products-right-grids-bottom-grid { width: 47%; margin: 0 auto; margin-bottom:5px; } .new-collections-grids { margin: 2em 0 0; } .new-collections-grid1:hover:before { height: 69% !important; } .new-collections-grid1:before { height: 70% !important; } .new-collections-grid1-image-pos { left: 31% !important; } .new-collections-grid1-right { bottom: 43% !important; left: 34% !important; } .new-collections-grid1-image-width:before { height: 60% !important; } .new-collections-grid1-image-width:hover:before { height: 60% !important; } .new-collections-grid1-image-width:hover:before { height: 52% !important; } .new-collections-grid1-image-pos1 { left: 33% !important; } .new-collections-grid1-right-rate { left: 37.5% !important; bottom: 30% !important; } .dropdown-menu.columns-3 { min-width: 585px; } ul.multi-column-dropdown h6 { font-size: 1.2em; } .new-collections-grid1-sub { float: none; width: 100%; } .new-collections-grid1-sub:nth-child(2) { margin: 1em 0 0; } .timer-grid-right { width: 60%; margin: 2em auto 0; } .collections-bottom-grid { width: 68%; margin-left: 2em; } .collections-bottom-grids { min-height: 280px; padding: 3.5em 2em 2em; } .newsletter form { width: 100%; } .footer-grid { float: left; width: 50%; } .footer-grid:nth-child(2) { margin-bottom: 2em; } .footer-logo h2 a { font-size: 1.8em; } .footer-logo h2:before, .footer-logo h2:after { width: 30%; } .products-left { width: 70%; margin: 0 auto 2em; } .products-right-grids-position1 p { width: 90%; } p.est { width: 85%; } .mail-grid-right { width: 50%; margin: 2em auto 0; } .value-minus, .value-plus { height: 25px; width: 25px; font-size: 10px; margin-right: 0; } .value { width: 25px; height: 25px; padding: 4px 0px; line-height: 15px; margin-right: 0; } .quantity-select .entry.value-plus:after { height: 6px; top: 60%; margin-top: -4px; } .quantity-select .entry.value-minus:before, .quantity-select .entry.value-plus:before { width: 6px; margin-left: -3px; } .login-form-grids { width: 75%; } } @media (max-width:800px) { .dropdown-menu.columns-3 { min-width: 490px; padding: 1.5em; } .header-grid { padding: 1em 0; } .sb-search.sb-search-open, .no-js .sb-search { width: 57%; } .banner-info h3 { font-size: 3.5em; } .banner-info { margin: 4em 0 0; } .banner { min-height: 470px; } .dropdown-menu { left: -90%; } .single-right-left { float: left; width: 45%; } .single-right-left:nth-child(2) { width: 55%; } .add-review input[type="text"], .add-review input[type="email"], .add-review textarea { width: 48.68%; } } @media (max-width:768px) { .navbar-nav > li > a { padding: 20px 9px 0; } .men-position-pos { top: 41%; } .men-position-pos h4:after { width: 80%; right: -5%; } .sb-search.sb-search-open, .no-js .sb-search { width: 58%; } .sb-search { right: 14%; } .dropdown-menu { left: -100%; } } @media (max-width:767px) { .dropdown-menu { left: 0%; } .navbar-nav { margin: 1em 0 0; background: #DFDFDF; text-align: center; padding-bottom: 1em; } .dropdown-menu.columns-3 { min-width: 360px; text-align: center; padding: 0 1.5em; } ul.multi-column-dropdown h6 { border-bottom: 1px solid #C3C3C3; } ul.multi-column-dropdown { margin: 2em 0; } .logo-nav-left1 { width: 50%; } .navbar-toggle { margin: 1em 0 0; } .navbar-default .navbar-toggle { border-color: #212121; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } .navbar-default .navbar-toggle .icon-bar { background-color: #212121; } .logo-nav { padding: 1em 0; } .sb-search { right: 25%; margin-top: 1em; } .search-box { margin-top: 0; } .sb-search.sb-search-open, .no-js .sb-search { width: 55%; } .box_1 h3 { font-size: 13px; } .header-right { width: 15%; } .navbar { margin-bottom: 0; } } @media (max-width: 736px) { .logo-nav-left1 { width: 44%; } .sb-search { right: 21%; } .header-right { width: 20%; } } @media (max-width:667px) { .logo-nav-left1 { width: 42%; } } @media (max-width: 640px) { .header-right { width: 21%; } .logo-nav-left1 { width: 38%; } .sb-search { right: 20%; } .sb-search.sb-search-open, .no-js .sb-search { width: 76%; } .banner-info h3 { font-size: 3em; } .banner-info h4 { font-size: 2em; } .banner-info1 p { font-size: 1.2em; } .banner { min-height: 410px; } .banner-bottom-grid-left { float: none; width: 100%; } .grid figure { min-width: 330px; margin: 0 auto; } .grid figure figcaption { padding: 2em; } .banner-bottom-grid-left1 { margin: 1em auto; float: none; } .banner-bottom-grid-left1-pos1 p, .banner-bottom-grid-left1-pos p { font-size: 1.6em; } .banner-bottom-grid-left1-pos1 { padding: 2em; } .banner-bottom-grid-right { float: none; margin: 0 auto; } .banner-bottom-grid-right, .banner-bottom-grid-left1 { width: 55%; } .new-collections h3:before, .single-related-products h3:before { left: 13%; } .new-collections h3:after, .single-related-products h3:after { right: 13%; } .new-collections-grid, .products-right-grids-bottom-grid { width: 50%; } .new-collections-grid1-image-width:before { height: 55% !important; } .new-collections-grid1-image-width:hover:before { height: 48% !important; } .collections-bottom-grid { width: 84%; } .collections-bottom-grid h3 { font-size: 2em; } .navbar-nav > li > a { padding: 14px 0 0; } .newsletter input[type="email"] { width: 72%; } .footer-logo h2 a { font-size: 1.5em; } .new-collections-grid1 p { font-size: 14px; } .dropdown-menu.columns-3 { min-width: auto; } .breadcrumbs { padding: 1em 0; } .breadcrumb1 { padding: 0; } .new-collections-grid1:before { height: 66% !important; } .men-position-pos h4 { font-size: 1.7em; } .men-position-pos { top: 37%; left: 8%; } .products-right-grids-position1 p { width: 100%; } .products-right-grids-position1 { left: 5%; } h3.title:before, .login h3:before { left: 17%; } h3.title::after, .login h3:after { right: 17%; } .mail h3:before { left: 22%; } .mail h3:after { right: 22%; } .mail-grid-right { width: 60%; } .mail iframe { min-height: 200px; } .quantity-select .entry.value-minus:before, .quantity-select .entry.value-plus:before { margin-left: -4px; } .quantity-select .entry.value-plus:after { margin-top: -4px; } .checkout-left-basket { width: 55%; } .register h3:before { left: 15%; } .register h3:after { right: 15%; } .single-right-left { float: none; width: 60%; } .single-right-left:nth-child(2) { width: 100%; margin: 2em 0 0; } .single-right-left h3 { font-size: 1.6em; } .single-right-left h4 { font-size: 1.3em; } .colr { margin-right: 2em; } .add-review input[type="text"], .add-review input[type="email"], .add-review textarea { width: 48.3%; } .imagezoom-view { display: none; } } @media (max-width:600px) { .header-grid-left ul li { margin: 0 0.6em; } } @media (max-width:568px) { .header-right { width: 23%; } .sb-search { right: 23%; } .logo-nav-left1 { width: 33%; } .sb-search.sb-search-open, .no-js .sb-search { width: 74%; } .header-grid-left ul li { margin: 0 0.3em; } } @media (max-width:480px) { .header-grid-left, .header-grid-right { float: none; text-align: center; } .header-grid-right { margin: 1em 0 0; } .header-grid-left ul li { margin: 0 0.7em; } .logo-nav-left { float: none; text-align: center; } .navbar-toggle { float: left; } .sb-search { right: 25%; } .header-right { width: 30%; } .sb-search.sb-search-open, .no-js .sb-search { width: 67%; } .logo-nav-left1 { width: 65%; } .banner-info h3 { font-size: 2em; } .banner-info h4 { font-size: 1.8em; margin: 0em 0 0 3.5em; } .banner-info1 p { width: 100%; } .banner-info { margin: 3em 0 0; } .banner { min-height: 325px; } .banner-wrap { padding: 0px 0 3em; } .banner-bottom-grid-right, .banner-bottom-grid-left1 { width: 76%; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 1.8em; } .new-collections h3:before, .new-collections h3:after, h3.title:before, h3.title:after, .mail h3:before, .mail h3:after, .single-related-products h3:before, .single-related-products h3:after, .login h3:before, .login h3:after, .register h3:before, .register h3:after { width: 20%; } .new-collections h3:before, .single-related-products h3:before { left: 2%; } .new-collections h3:after, .single-related-products h3:after { right: 2%; } .banner-bottom, .new-collections, .checkout, .collections-bottom, .timer, .register, .products, .typo, .mail, .single, .login, .single-related-products { padding: 2em 0; } .new-collections-grid, .products-right-grids-bottom-grid { width: 72%; } p.est { width: 100%; } .new-collections-grid1-image-width:before { height: 56% !important; } .new-collections-grid1-image-width:hover:before { height: 50% !important; } .timer-grid-left h3 a { font-size: 1em; } .timer-grid-right { width: 85%; } .collections-bottom-grid h3 { font-size: 1.6em; } .collections-bottom-grids { min-height: 217px; padding: 2.5em 2em 2em; } .newsletter h3 { font-size: 1.6em; } .newsletter { padding: 1.5em; } .newsletter input[type="submit"] { padding: 8px 0; font-size: 14px; width: 21%; margin-left: 1em; } .newsletter input[type="email"] { width: 68%; } .footer-grid h3 { font-size: 1.5em; } .footer { padding: 2em 0; } .footer-grid { float: none; width: 100%; } .footer-grid:nth-child(2) { margin: 2em 0; } .footer-grid:nth-child(3) { margin: 0em 0 2em; } .footer-grid-sub-grid-right h4 a { font-size: 1.1em; } .footer-grid-sub-grid-right { margin: 3em 0 0; } .footer-logo h2 a { font-size: 1.3em; } .footer-logo h2:before, .footer-logo h2:after { width: 26%; } .footer-logo { margin: 2em 0 2em; } .categories h3, .filter-price h3, .new-products h3 { font-size: 1.2em; letter-spacing: 2px; } .products-left { width: 100%; } .categories { margin: 2em 0; } .men-position { margin: 2em 0 0; } .sorting-left { width: 40%; } .sorting { width: 50%; } .products-right-grids-position1 h4 { width: 75%; font-size: 1.2em; } .products-right-grids-position1 { top: 22%; } ul.paging { margin: 3em auto 0; } h3.title:before, .login h3:before { left: 8%; } h3.title::after, .login h3:after { right: 8%; } .mail h3:before { left: 14%; } .mail h3:after { right: 14%; } .mail-grid-left input[type="submit"] { font-size: 14px; width: 100%; } .mail-grid-right { width: 80%; } .timetable_sub th, .timetable_sub td { display: block; } .timetable_sub th { border-right: none; border-bottom: 1px solid #A95832; } td.invert-image a img { width: 50%; } .timetable_sub td { border: none; } tr.rem1 { border: 1px solid #D7D7D7; padding-bottom: 2em; display: block; border-top: none; } .close1, .close2, .close3 { right: 190px; top: -4px; } .quantity-select .entry.value-plus:after { margin-top: -5px; } .quantity-select .entry.value-minus:before, .quantity-select .entry.value-plus:before { margin-left: -3px; } .checkout-left-basket { width: 100%; float: none; } .checkout-right-basket { float: none; margin: 2em 0 0 0em; text-align: center; } .single-right-left { width: 90%; } .colr { margin-right: 1em; } .bootstrap-tab { margin: 3em 0 0; } .bootstrap-tab-text p span { margin: 1em 0 0; } .bootstrap-tab-text h5, .add-review h4 { margin: 2em 0 1em; } .add-review input[type="text"], .add-review input[type="email"], .add-review textarea { width: 100%; } .add-review input[type="email"] { margin: 1em 0 0; } .add-review input[type="submit"] { width: 100%; font-size: 14px; } .login-form-grids { width: 95%; margin: 2em auto 0; padding: 2em; } .login h4 { margin: 1.5em 0 0.5em; font-size: 1.1em; } .bootstrap-tab-text-grid:nth-child(2) { margin: 2em 0 0; } .register h3:before { left: 5%; } .register h3:after { right: 5%; } } @media (max-width: 414px) { .header-right { width: 33%; } .sb-search { right: 36%; } .sb-search.sb-search-open, .no-js .sb-search { width: 63%; } .footer-grid-sub-grid-right h4 a { font-size: 0.9em; } .banner-info h4 { font-size: 1.5em; } .wmuSliderPagination a { width: 35px; } .wmuSliderPagination { left: 60%; } .banner-info { margin: 2em 0 0; } .banner-info1 p { font-size: 1em; } .banner-wrap { padding: 0px 0 2em; } .banner { min-height: 265px; } .banner-bottom-grid-right, .banner-bottom-grid-left1 { width: 90%; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 1.6em; } .new-collections-grid, .products-right-grids-bottom-grid { width: 80%; } .new-collections-grid1-image-width:before { height: 50% !important; } .new-collections-grid1-image-pos1 { left: 27% !important; } .new-collections-grid1-right-rate { left: 31.5% !important; bottom: 25% !important; } .collections-bottom-grids { background: url(../images/12.jpg) no-repeat -120px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .newsletter input[type="email"] { width: 92%; margin: 0 0 .5em; } .newsletter input[type="submit"] { width: 40%; margin-left: 0; } .collections-bottom-grid { margin-left: 0; } .footer-grid-sub-grid-right { margin: 1em 0 0; } .breadcrumb1 { margin: 0 !important; } .bootstrap-tab ul li a { padding: 9px; } .bootstrap-tab-text-grid-right p { margin: 1em 0 0; } .sorting-left { width: 45%; margin-right: 1em; } .products-right-grids-position1 h4 { width: 90%; } .products-right-grids-position1 p { font-size: 12px; } .products-right { padding: 0; } .mail-grid-right { width: 100%; } .mail-grids { margin: 2em 0; } } @media (max-width:384px) { .header-right { width: 32%; } .sb-search { right: 35%; } .sb-search.sb-search-open, .no-js .sb-search { width: 64%; } .logo-nav { padding: 0.5em 0 1em; } .header-grid-left ul li { margin: 0 0.7em .5em; } .header-grid-right { margin: 0.5em 0 0; } } @media (max-width: 375px) { .header-right { width: 37%; } .logo-nav-left1 { width: 63%; } .sb-search { right: 35%; } .sb-search.sb-search-open, .no-js .sb-search { width: 60%; } .banner-bottom-grid-right, .banner-bottom-grid-left1 { width: 100%; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 1.5em; } .new-collections-grid, .products-right-grids-bottom-grid { width: 90%; } .new-collections-grid1-image-pos { left: 26% !important; } .new-collections-grid1-right { left: 31% !important; } .timer-grid-left, .products-left, .single-right, .single-right-left:nth-child(2), .mail-grid-left, .mail iframe { padding: 0; } .timer-grid-left h3 a { font-size: .9em; } .timer-grid-right { width: 100%; margin: 1em auto 0; } .collections-bottom-grid { padding: 1em; } .men-position-pos h4 { font-size: 1.8em; } .men-position-pos h4:after { right: 10%; } .single-right-left h3 { font-size: 1.5em; } .bootstrap-tab-text-grid-right ul li a { font-size: 14px; } .bootstrap-tab-text h5, .add-review h4 { font-size: 1.1em; } .men-position-pos { top: 25%; } .checkout h3 { font-size: 14px; margin: 0 0 2em; line-height: 1.5em; } .close1, .close2, .close3 { right: 143px; } .login-form-grids { width: 100%; padding: 1em; } } @media (max-width: 320px) { .header-grid-left ul li { margin: 0 0.7em 0em; font-size: 13px; } .logo-nav-left { padding-left: 20px; } .logo-nav-left h1 a { font-size: 1em; } .header-right { width: 45%; } .logo-nav-left1 { width: 55%; } .sb-search { right: 4%; margin-top: 4.5em; margin-right: 12px; } .sb-search.sb-search-open, .no-js .sb-search { width: 90%; } .sb-search-input { font-size: 13px; padding-left: .5em; padding-right: 3em; } .banner-info h3 { font-size: 1.7em; } .banner-info1 p { font-size: 13px; } .wmuSliderPagination { left: 50%; } .banner { min-height: 240px; } ul.multi-column-dropdown h6 { font-size: 1.1em; } .dropdown-menu.columns-3 { padding: 0 0.5em; } .grid figure { min-width: 270px; } .grid figure figcaption { padding: 1.5em; } .banner-bottom-grid-left1-pos1 { padding: 1.3em; } .new-collections h3, h3.title, .mail h3, .single-related-products h3, .login h3, .register h3 { font-size: 1.3em; } .new-collections h3:before, .single-related-products h3:before { left: 0%; } .new-collections h3:after, .single-related-products h3:after { right: 0%; } p.est, .new-collections-grid1 p, .bootstrap-tab-text p, .description p, .color-quality-left ul li a, label.radio, .copy-right p, .categories ul li, .footer-grid-sub-grid-right p, .new-collections-grid1-left p a, .footer-grid ul li, .footer-grid p, .occasion-cart a, .timer-grid-left-price h4 { font-size: 13px; } .bootstrap-tab-text h5, .add-review h4 { font-size: 1em; margin: 1.5em 0 0.7em; } .bootstrap-tab ul li a { font-size: 14px; } .color-quality-left, .color-quality-right { float: none; } .description { margin: 2em 0 1em; } .color-quality-right { margin: 1em 0 0; } .men-position-pos h4 { font-size: 1.5em; } .men-position-pos h5 { font-size: 1.6em; } .categories ul.cate, .new-products-grids { padding: 1em 1em 2em; } .categories h3, .filter-price h3, .new-products h3 { font-size: 1.1em; letter-spacing: 1px; } .footer-logo h2 a { font-size: 1.1em; } .footer-logo h2:before, .footer-logo h2:after { width: 21%; } .footer-grid-sub-grid-right { margin: 0; } .footer-grid p span { display: initial; margin: 0; } .new-collections-grid, .products-right-grids-bottom-grid { width: 100%; } .new-collections-grid { padding: 0; } .new-collections-grid1:hover:before { height: 66% !important; } .new-collections-grid1-image-width:hover:before { height: 48% !important; } .new-collections-grid1-image-width:before { height: 45% !important; } .timer-grid-right { margin: 2em auto 0; } .timer-grid-right-pos h4 { font-size: 14px; } .collections-bottom-grid h3 { font-size: 1.3em; } .collections-bottom-grids { background: url(../images/12.jpg) no-repeat -80px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 170px; padding: 1.5em 1em 0em; } .new-collections-grid1 h4 a { font-size: 14px; } .newsletter h3 { font-size: 1.3em; } .newsletter { padding: 1em; } .newsletter p, .new-products-grid-right h4 a, select#country, select#country1 { font-size: 13px; } .sorting { width: 49%; } .products-right-grids-position1 h4 { width: 93%; font-size: 1em; } .products-right-grids-position1 { top: 5%; } .products-right-grid1-add-cart p, .new-products-grid-right-add-cart p { font-size: 1em !important; } .newsletter input[type="email"] { width: 91%; font-size: 13px; } .newsletter p { margin: .5em 0 0.5em; } .newsletter input[type="submit"] { width: 55%; padding: 5px 0; font-size: 13px; } .footer-grid h3 { font-size: 1.3em; } .footer-grid, .mail-grid-right { padding: 0; } .single-right-left { width: 100%; } .single-right-left h4 { font-size: 1.1em; } .add-review input[type="text"], .checkout-left-basket ul li, .add-review input[type="email"], .mail-grid-left input[type="text"], .mail-grid-left input[type="email"], .mail-grid-left textarea, .add-review textarea, .mail-grid-right1 ul.phone-mail li { font-size: 13px; } .checkout-left-basket h4 { padding: .7em; font-size: 1em; } .mail-grid-left textarea { min-height: 135px; } ul.multi-column-dropdown { margin: 1em 0; } .new-products-grid-right { width: 61%; } ul.paging { margin: 2em auto 0; } .mail-grids { margin: 1.5em 0; } .mail iframe { min-height: 140px; } ul.phone-mail { margin: 0 0 1em; } .mail-grid-right1 ul.phone-mail li { margin-bottom: .5em; } .close1, .close2, .close3 { right: 114px; } .checkout-right-basket a { font-size: 14px; } .login-form-grids h5, .login-form-grids h6 { margin: 0 0 1.5em; } .login-form-grids { margin: 1.5em auto 0; } .login-form-grids input[type="email"], .forgot a, .register-check-box label, .login-form-grids input[type="password"], .login-form-grids input[type="text"] { font-size: 13px; } .forgot { margin: 1em 0 0; } .login-form-grids h6 { margin: 2em 0 1.5em !important; } .login-form-grids input[type="submit"], .register-home a { font-size: 14px; } .login h4 { font-size: 1em; } .login p { font-size: 12px; } } .img-responsive, .thumbnail a > img, .thumbnail > img { min-height: 229px; max-height: 229px; } /*--------------------------------*/ /* Bootstrap Image Carousel Slider with Animate.css Code snippet by Hashif (http://hashif.com) for Bootsnipp.com Image credits: unsplash.com */ @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700); body { font-family: 'Quicksand', sans-serif; font-weight: 700; } /********************************/ /* Main CSS */ /********************************/ #first-slider .main-container { padding: 0; } #first-slider .slide1 h3 { color: #fff; font-size: 30px; text-transform: uppercase; font-weight: 700; } #first-slider .slide1 h4 { color: #fff; font-size: 30px; text-transform: uppercase; font-weight: 700; } #first-slider .slide1 .text-left { padding-left: 40px; } #first-slider .carousel-indicators { bottom: 0; } #first-slider .carousel-control.right, #first-slider .carousel-control.left { background-image: none; } #first-slider .carousel .item { min-height: 640px; max-height: 640px; height: auto; width: 100%; } .carousel-inner .item .container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; } #first-slider h3 { animation-delay: 1s; } #first-slider h4 { animation-delay: 2s; } #first-slider h2 { animation-delay: 3s; } #first-slider .carousel-control { width: 6%; text-shadow: none; } #first-slider h1 { text-align: center; margin-bottom: 30px; font-size: 30px; font-weight: bold; } #first-slider .p { padding-top: 125px; text-align: center; } #first-slider .p a { text-decoration: underline; } #first-slider .carousel-indicators li { width: 14px; height: 14px; background-color: #333; border: none; } #first-slider .carousel-indicators .active { width: 16px; height: 16px; background-color: #005aa1; border: none; } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } .carousel-control .fa-angle-right, .carousel-control .fa-angle-left { position: absolute; top: 50%; z-index: 5; display: inline-block; } .carousel-control .fa-angle-left { left: 50%; width: 38px; height: 38px; margin-top: -15px; font-size: 30px; color: #090909; /*border: 3px solid #090909;*/ -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 53px; } .carousel-control .fa-angle-right { right: 50%; width: 38px; height: 38px; margin-top: -15px; font-size: 30px; color: #090909; /*border: 3px solid #090909;*/ -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 53px; } .carousel-control { opacity: 1; filter: alpha(opacity=100); } .div-text-carousel { position: relative; background-color: black; } .div-text-carousel .text-left { color: #fff; padding: 5px; } /********************************/ /* Slides backgrounds */ /********************************/ #first-slider .slide1 { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; } @media screen and (max-width: 1200px) { #first-slider .carousel .item { min-height: 550px; } } @media screen and (max-width: 1160px) { #first-slider .carousel .item { min-height: 500px; } } @media screen and (max-width: 764px) { #first-slider .carousel .item { min-height: 400px; } } @media screen and (max-width: 450px) { #first-slider .carousel .item { min-height: 350px; } } /********************************/ /* Media Queries */ /********************************/ /*@media screen and (max-width: 1199px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.3em; } } @media screen and (max-width: 991px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 7em; } } @media screen and (max-width: 764px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.9em; } } @media screen and (max-width: 758px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.8em; } } @media screen and (max-width: 753px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.7em; } } @media screen and (max-width: 746px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.6em; } } @media screen and (max-width: 740px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.5em; } } @media screen and (max-width: 734px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.4em; } } @media screen and (max-width: 728px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.3em; } } @media screen and (max-width: 722px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.2em; } } @media screen and (max-width: 716px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6.1em; } } @media screen and (max-width: 710px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6em; } } @media screen and (max-width: 704px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.9em; } } @media screen and (max-width: 698px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.8em; } } @media screen and (max-width: 692px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.7em; } } @media screen and (max-width: 686px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.6em; } } @media screen and (max-width: 680px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.5em; } } @media screen and (max-width: 674px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.4em; } } @media screen and (max-width: 669px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.3em; } } @media screen and (max-width: 664px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 659px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 657px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 654px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 645px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 640px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.5em; } } @media screen and (max-width: 637px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.4em; } } @media screen and (max-width: 631px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.3em; } } @media screen and (max-width: 626px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 620px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 614px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 610px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 604px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } } @media screen and (max-width: 600px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } } @media screen and (max-width: 598px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.7em; } } @media screen and (max-width: 593px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.6em; } } @media screen and (max-width: 587px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.5em; } } @media screen and (max-width: 582px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.4em; } } @media screen and (max-width: 576px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.3em; } } @media screen and (max-width: 571px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.2em; } } @media screen and (max-width: 565px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.1em; } } @media screen and (max-width: 559px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4em; } }*/ @media screen and (max-width: 554px) { #first-slider .carousel-indicators li { width: 12px; height: 12px; margin-bottom: 25px; } #first-slider .carousel-indicators .active { width: 12px; height: 12px; margin-bottom: 25px; } /*.new-collections-grid1-left .item-addToCart a { padding: .5em 3.9em; }*/ } /*@media screen and (max-width: 548px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.8em; } } @media screen and (max-width: 543px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.7em; } } @media screen and (max-width: 537px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.6em; } } @media screen and (max-width: 531px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.5em; } } @media screen and (max-width: 526px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.4em; } } @media screen and (max-width: 520px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.3em; } } @media screen and (max-width: 514px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.2em; } } @media screen and (max-width: 509px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.1em; } } @media screen and (max-width: 504px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3em; } } @media screen and (max-width: 497px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 2.9em; } } @media screen and (max-width: 491px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 2.8em; } } @media screen and (max-width: 486px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 2.7em; } } @media screen and (max-width: 480px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 6em; } } @media screen and (max-width: 477px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.9em; } } @media screen and (max-width: 473px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.8em; } } @media screen and (max-width: 469px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.7em; } } @media screen and (max-width: 465px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.6em; } } @media screen and (max-width: 461px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.5em; } } @media screen and (max-width: 457px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.4em; } } @media screen and (max-width: 453px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.3em; } } @media screen and (max-width: 449px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 445px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 441px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 437px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 433px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } } @media screen and (max-width: 429px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.7em; } } @media screen and (max-width: 425px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.6em; } } @media screen and (max-width: 421px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.5em; } } @media screen and (max-width: 418px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.4em; } }*/ /*@media screen and (max-width: 417px){ .new-collections-grid1-left .item-addToCart a, .occasion-cart a{ padding: .5em 5.4em; } }*/ /*@media screen and (max-width: 414px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.4em; } } @media screen and (max-width: 409px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 405px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 401px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 398px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 395px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } } @media screen and (max-width: 391px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.7em; } } @media screen and (max-width: 388px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.6em; } } @media screen and (max-width: 385px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.5em; } } @media screen and (max-width: 380px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.4em; } } @media screen and (max-width: 377px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.3em; } } @media screen and (max-width: 375px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.5em; } } @media screen and (max-width: 374px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.4em; } } @media screen and (max-width: 371px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.3em; } } @media screen and (max-width: 368px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 365px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 362px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 359px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 356px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } } @media screen and (max-width: 353px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.7em; } } @media screen and (max-width: 350px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.6em; } } @media screen and (max-width: 346px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.5em; } } @media screen and (max-width: 343px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.4em; } } @media screen and (max-width: 340px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.3em; } } @media screen and (max-width: 337px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.2em; } } @media screen and (max-width: 334px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.1em; } } @media screen and (max-width: 331px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.0em; } } @media screen and (max-width: 328px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.9em; } } @media screen and (max-width: 325px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.8em; } } @media screen and (max-width: 322px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.7em; } } @media screen and (max-width: 320px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.2em; } } @media screen and (max-width: 318px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5.1em; } } @media screen and (max-width: 315px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 5em; } } @media screen and (max-width: 313px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.9em; } } @media screen and (max-width: 310px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.8em; } }*/ @media screen and (max-width: 309px) { #first-slider .carousel-indicators li { margin-bottom: 45px; } #first-slider .carousel-indicators .active { margin-bottom: 45px; } } /*@media screen and (max-width: 307px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.7em; } }*/ /*@media screen and (max-width: 304px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.6em; } }*/ /*@media screen and (max-width: 301px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.5em; } } @media screen and (max-width: 299px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.4em; } }*/ /*@media screen and (max-width: 296px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.3em; } } @media screen and (max-width: 293px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.2em; } }*/ /*@media screen and (max-width: 290px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4.1em; } } @media screen and (max-width: 287px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 4em; } }*/ /*@media screen and (max-width: 284px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.9em; } } @media screen and (max-width: 282px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.8em; } } @media screen and (max-width: 279px) { .new-collections-grid1-left .item-addToCart a { padding: .5em 3.7em; } }*/ /*------------------------------------*/ /********************************/ /* New Product */ /********************************/ .new-product { position: absolute; top: -0.2%; left: -0.2%; width: 70px; height: 70px; } .ImgNewProduct { width: 70px; height: 70px; } /********************************/ /* New Product */ /********************************/ /********************************/ /* Gender RadioButton */ /********************************/ .login-form-grids .GenderStyle { height: 42px; } .login-form-grids input[type="radio"] { margin: 0px 0 2px 18px; } /********************************/ /* Gender RadioButton */ /********************************/ /********************************/ /* My Orders */ /********************************/ .checkout .container .body-order { height: auto; padding: 10px; background-color: #f8f8f8; margin-bottom: 5px; overflow: hidden; } .body-order .header-order { height: auto; margin-bottom: 5px; overflow: inherit; } .body-order .header-order .order-id { float: left; margin-top: 15px; width: auto; margin-left: 70px; } .body-order .header-order .order-id h3 { text-decoration: none; margin: 0; padding-bottom: 10px; } .body-order .header-order .total-order { float: right; margin-top: 15px; margin-right: 70px; } .body-order .header-order .total-order h3 { text-decoration: none; margin: 0; padding-bottom: 10px; } .body-order .order-detail { height: auto; padding: 15px; box-shadow: 10px 2px 5px #888888; border-top: 1px solid #c2c1c1; } .body-order .order-detail .order-image img { max-height: 150px; max-width: 150px; min-height: 150px; min-height: 150px; margin-left: 50px; margin-right: 50px; margin-top: 5px; margin-bottom: 5px; border-radius: 20px; } .body-order .order-detail .order-name-number .order-name { margin-top: 35px; margin-bottom: 10px; padding: 5px; } .body-order .order-detail .order-name-number .order-price { margin: 5px; } .body-order .order-detail .order-name-number .order-price h3 { margin: 0 0 1em; } .body-order .order-detail .order-state { margin-top: 60px; } .body-order .order-detail .order-state h3 { text-align: center; color: #ff0101; margin: 0 0 1em; } .noproduct-myorder { background-color: #e7e7e7; height: 60px; width: auto; } .noproduct-myorder div { color: #03a2df; text-align: center; padding-top: 19px; } @media (max-width:480px) { .body-order .header-order .order-id { margin-left: 30px; } .body-order .order-detail .order-image img { margin-left: 13px; } } /********************************/ /* My Orders */ /********************************/ /*************************************/ /* Re Captcha */ /*************************************/ .g-recaptcha { margin-top: 15px; margin-left: 57px; margin-right: 57px; } @media (max-width:640px) { .g-recaptcha { transform: scale(0.75); transform-origin: 0 0; margin-left: 10px; margin-right: 10px; } } @media (max-width:480px) { .g-recaptcha { transform: scale(0.75); transform-origin: 0 0; margin-left: 0px; margin-right: 0px; } } /* Terms & Condition */ .terms { margin-right: 2em; margin-left: 2em; } .header-slide { margin-top: 2em; } .header-title { margin-right: 44px; } .style-ol { font-size: 15px; } /* Add new address */ .addNewAddress { margin-top: 2em; margin-bottom: 2em; margin-left: 6em; margin-right: 6em; background-color: #e5e5e5; } .addNewAddress .titleNewAddress { margin-top: 1em; margin-bottom: 1em; padding-left: 23px; padding-right: 23px; } .row_input { padding: 10px; } .save-address { float: right; margin-right: 9px; margin-top: 15px; width: 115px; height: 50px; background-color: #008BFF; border-color: #008BFF; } .cancel-address { float: right; margin-top: 15px; width: 115px; height: 50px; padding-top: 15px; padding-bottom: 15px; } .div-save-address { margin-right: 10px; margin-left: 10px; } .continues-style-btn { width: 150px; height: 50px; padding-top: 13px; padding-bottom: 13px; background-color: #0091c9; border-color: #0091c9; } .edit-style-btn { width: 130px; height: 50px; padding-top: 13px; padding-bottom: 13px; } .btn-save-change { text-align: right; margin-bottom: 15px; margin-right: 95px; margin-top: 17px; } .title-address { padding-left: 85px; padding-top: 15px; padding-right: 85px; font-size: 1.2em; } .btn-addnewaddress { padding-right: 90px; } .btn-CreateNewAddress { float: right; } /* offer price style in details */ .simpleCart_shelfItem h4 span { color: #999; position: relative; font-style: normal; font-size: 14px; margin-right: 5px; margin-left: 18px; } .style-offer-price:before { background: #999 none repeat scroll 0 0; content: ""; height: 1px; left: -26%; position: absolute; right: -20%; top: 45%; } .text_find { padding: 20px; } /*----------------------*/ /* About Us */ /* === section header === */ #header-wrapper { width: 100%; min-height: 400px; text-align: center; position: relative; } #header-wrapper h1 { color: #565656; font-size: 4em; font-weight: 400; margin: 1em 0; } #header-wrapper h2 { color: #fff; font-family: 'Open Sans', sans serif; font-size: 2em; font-weight: normal; margin: 0.5em 0; text-shadow: 1px 1px 1px #333333; } header .logo { text-align: center; } header .logo img { min-height: 400px; max-height: 400px; width: 100%; } /* --- Header slider --- */ #header-wrapper.header-slider { background: #444 url(../images/About-Us.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #main-flexslider ul.slides li p { font-size: 72px; text-transform: uppercase; position: relative; margin-bottom: 0px; text-align: center; line-height: 1; color: #fff; } #main-flexslider.flexslider { margin: 0; background: none; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; } .text-header-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* About Us */ /*----------------------*/ /* who we are */ /* Get Started Section --------------------------------*/ .section-title { font-size: 32px; color: #111; text-transform: uppercase; text-align: center; font-weight: 700; } .section-description { text-align: center; margin-bottom: 40px; } .section-title-divider { width: 50px; height: 3px; background: #03C4EB; margin: 0 auto; margin-bottom: 20px; } #about { background: #fff; padding: 80px 0; } #about .about-container { background: url(../images/develop-header.jpg) left top no-repeat; } #about .about-content { background: #fff; } #about .about-title { color: #333; font-weight: 700; font-size: 28px; font-family: 'Droid Arabic Kufi',serif; margin: 0 0 20px 0; } #about .about-text { line-height: 26px; margin: 0 0 10px 0; } #about .about-text:last-child { margin-bottom: 0; } /* who we are */ /*---------------------------*/ /* Services Section --------------------------------*/ #services { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../images/services-bg.jpg") fixed center center; background-size: cover; padding: 80px 0 60px 0; } #services .company-information { margin-bottom: 15px; } #services .company-information .information-title { font-weight: 700; } #services .company-information .information-description { color: #737373; } /* Services Section --------------------------------*/ /* Subscribe Section --------------------------------*/ #subscribe { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/history-img.jpg) fixed center center; background-size: cover; padding: 80px 0 60px 0; } #subscribe .subscribe-title { color: #fff; font-size: 28px; font-weight: 700; margin-bottom: 30px; } #subscribe .company-history { margin-bottom: 15px; border-bottom: solid 1px #fff; } #subscribe .company-history .history-title { font-weight: 700; margin-bottom: 15px; color: #fff; } #subscribe .company-history .history-description { color: #fff; } #subscribe .company-history .description-data { padding-bottom: 10px; } #subscribe .company-history .description-data img { margin-left: 10px; margin-right: 10px; } #subscribe .company-history .history-description il { font-weight: bold; } /* Subscribe Section --------------------------------*/ /* Mission & Vission */ /*---------------------------*/ #mission-vission { background: #fff; padding: 80px 0; } #mission-vission .about-container .mission .mission-title { font-size: 32px; color: #111; text-align: center; font-weight: 700; } #mission-vission .about-container .mission .mission-description { line-height: 26px; margin: 20px 0 10px 0; text-align: center; } #mission-vission .about-container .vission { border-left: solid 1px black; } #mission-vission .about-container .vission .vission-title { font-size: 32px; color: #111; text-align: center; font-weight: 700; } #mission-vission .about-container .vission p.vission-description { line-height: 26px; margin: 20px 0 0px 0; text-align: center; } #mission-vission .about-container .vission p{ line-height: 26px; text-align: center; } @media (max-width:1199px) { #mission-vission .about-container .vission { border-left: 0; border-top: solid 1px black; } } /* Mission & Vission */ /*---------------------------*/ /* Back to top */ /*-----------------------------*/ /* Back to top button */ .back-to-top { position: fixed; display: none; background: rgba(0, 0, 0, 0.2); color: #fff; padding: 6px 12px 9px 12px; font-size: 16px; border-radius: 2px; right: 15px; bottom: 15px; transition: background 0.5s; } @media (max-width: 768px) { .back-to-top { bottom: 15px; } } .back-to-top:focus { background: rgba(0, 0, 0, 0.2); color: #fff; outline: none; } .back-to-top:hover { background: #03C4EB; color: #fff; } /*Back top top*/ /*-----------------------------*/ /*------------------*/ /* panel colspame */ .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; } .no-careers { margin-top: 20px; margin-bottom: 20px; border-top: solid 1px black; border-bottom: solid 1px black; height: 100px; text-align: center; } .no-careers .no-careers-desc { margin-top: 33px; } .panel-body .panel-body-details { margin: 10px; } .panel-body .careers-title { text-align: center; margin-bottom: 25px; } .panel-body .careers-title h3 { color: #337ab7; } .panel-body .careers-content { margin-left: 35px; } .btn-apply-style { width: 150px; background-color: #01a4ed; } .btn-apply { width: 150px; border: none; padding: 10px; } .picker-icon { background: url(../images/if_calendar_1814093.png) 98% center no-repeat; } /*--------------------------------------------------------------*/ /*Shopping Cart Styles*/ .header-right #shopping-cart { display: none; } .header-right:hover #shopping-cart{ display: block; position: absolute; right:1%; top:15%; z-index: 3; background-color: white; padding: 20px; min-height: 400px; min-width: 300px; font-size: 12px; } .btn-clear-cart{ display: inline; height: 38px; padding: 11px 38px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; } .btn-clear-cart { margin-bottom: 1rem; } .btn-clear-cart:hover, .button:focus { background-color: #f63939; color: black; border-color: #888; outline: 0; } .btn-checkout { display: inline; height: 38px; padding: 11px 38px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; } .btn-checkout:hover { background-color: #69b5f5; color: black; } /* Utilities �������������������������������������������������� */ .u-full-width { width: 100%; box-sizing: border-box; } .u-max-full-width { max-width: 100%; box-sizing: border-box; } .u-pull-right { float: right; } .u-pull-left { float: left; } #cart-content { display: table; margin-bottom: 2.5em; border-collapse: collapse; border-spacing: 0; border-bottom-color: gray; } #cart-content thead tr th{ padding: 10px 9px; text-align: left; border-bottom: 1px solid #E1E1E1; } #cart-content thead tr th:first-child{ padding-left: 0px; } #cart-content tbody tr td:first-child { padding-left: 0; } #cart-content tbody tr td { padding: 10px 9px; text-align: left; border-bottom: 1px solid #E1E1E1; max-width: 10px; } #cart-content tbody tr td:last-child { padding-right: 0; } #cart-content tbody tr td a:hover { color: #0FA0CE; } #cart-content tbody tr td a:active, #cart-content tbody tr td a:hover { outline: 0; } .remove { background-color: red; border-radius: 50%; padding: 5px 10px; text-decoration: none; color: white; font-weight: bold; } /* support Style */ a:hover,a:focus{ text-decoration: none; outline: none; } #accordion .panel{ border: none; border-radius: 0; box-shadow: none; margin: 0 0 10px; overflow: hidden; position: relative; } #accordion .panel-heading{ padding: 0; border: none; border-radius: 0; margin-bottom: 10px; z-index: 1; position: relative; } #accordion .panel-heading:before, #accordion .panel-heading:after{ width: 50%; height: 20%; box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4); position: absolute; bottom: 15px; left: 10px; transform: rotate(-3deg); z-index: -1; } #accordion .panel-heading:after{ left: auto; right: 10px; transform: rotate(3deg); } #accordion .panel-title a{ display: block; padding: 15px 70px 15px 70px; margin: 0; background: #fff; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #0197d6; border-radius: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset; position: relative; } #accordion .panel-title a:before, #accordion .panel-title a.collapsed:before{ font-family: "Font Awesome 5 Free"; font-weight: 900; width: 55px; height: 100%; text-align: center; line-height: 50px; border-left: 2px solid #085aa0; position: absolute; top: 0; right: 0; } #accordion .panel-title a .icon{ display: inline-block; width: 55px; height: 100%; border-right: 2px solid #085aa0; font-size: 20px; color: rgba(0,0,0,0.7); line-height: 50px; text-align: center; position: absolute; top: 0; left: 0; } #accordion .panel-body{ padding: 10px 20px; margin: 0 0 20px; border-bottom: 3px solid #085aa0; border-top: none; background: #fff; font-size: 15px; color: #333; line-height: 27px; } /* Paged List Style */ .paged-list { background-color: #f7f7f9; text-align: right; } .pagination { margin-right: 59px; margin-top: 0px; margin-bottom: 10px; } /*-------------------------------------------------------------*/ /*-----------------------------------------------------------*/ /* image slide style */ #image-slide{ position: relative; width: 100%; height: auto; padding: 20px 130px; } #image-slide .thumb{ position: relative; overflow: hidden; height: auto; } #image-slide .thumbnail{ border: none; overflow: hidden; padding: 10px; background-color: rgb(187, 187, 187); } #image-slide .thumbnail .image{ border: none; overflow: hidden; } #image-slide a.thumbnail img{ display: block; margin: 0; width: 100%; height: auto; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } #image-slide .thumbnail:hover img{ transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{ border-radius: 15px; min-height: 229px; max-height: 229px; } .header-center{ text-align: center; width: 100%; height: 50px; text-decoration: none; } .header-center h3{ padding: 10px; text-align: center; } .container .thumbnail h3{ color: #0555a0; font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-decoration: none; } .container .thumbnail:focus, .container .thumbnail:hover{ text-decoration: none; } .container .thumbnail:hover h3{ color: black; } @media screen and (max-width: 767px) { #image-slide{ width: 100%; padding: 10px 10px; } .container .thumbnail h3{ font-size: 13px; } } /*-------------------------------------------------------------------*/ /*-----------------------------------------------*/ /*------------------------------*/ /* effects image details */ .effect{ transition: .5s ease; opacity: 0; position: absolute; bottom: 3%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%) } .thumb:hover .effect{ opacity: 1; text-decoration: none; } .text{ background-color: #fefefe; color: black; font-size: 16px; padding: 16px 32px; } /*---------------------------------------------------*/ /*--------------------------------------------*/ /*---- New Product style-----*/ .new-text{ position: absolute; top: 0%; left: 5.3%; width: 60px; height: 60px; } .new-text .ImgNew{ height: 60px; width: 60px; } @media screen and (max-width: 767px) { .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{ border-radius: 15px; min-height: 170px; max-height: 170px; } .new-text{ position: absolute; top: 0%; width: 60px; height: 60px; } .new-text .ImgNew{ height: 60px; width: 60px; } } #myFooter { background-color: #0072bb; color: white; } #myFooter-copyright{ border-radius-top: 20px; background-color: #3c3d41; color: white; } #myFooter-copyright .footer-copyright { background-color: #333333; padding-top: 3px; padding-bottom: 3px; text-align: center; } #myFooter .row { margin-top: 30px; margin-bottom: 30px; } #myFooter .navbar-brand { margin-top: 45px; height: 65px; } #img-logo{ height: 270px; } #img-logo img{ width: 100%; height: 100%; } #myFooter .footer-copyright p { margin: 10px; color: #ccc; } #myFooter ul { list-style-type: none; padding-left: 0; padding-right: 0; line-height: 1.7; } #myFooter h5 { font-size: 18px; color: white; font-weight: bold; margin-top: 70px; } #myFooter h2 a{ font-size: 50px; text-align: center; color: #fff; } #myFooter a { color: #d2d1d1; text-decoration: none; } #myFooter a:hover, #myFooter a:focus { text-decoration: none; color: white; } #myFooter .social-networks { text-align: center; padding-top: 53px; padding-bottom: 16px; } #myFooter .social-networks a { font-size: 32px; color: #f9f9f9; padding: 10px; transition: 0.2s; } #myFooter .social-networks a:hover { text-decoration: none; } #myFooter .facebook:hover { color: #0077e2; } #myFooter .google:hover { color: #ef1a1a; } #myFooter .twitter:hover { color: #00aced; } #myFooter .btn { color: white; background-color: #d84b6b; border-radius: 20px; border: none; width: 150px; display: block; margin: 0 auto; margin-top: 10px; line-height: 25px; } @media screen and (max-width: 767px) { #myFooter { text-align: center; } } .countdownHolder{ font: 23px/0.8 'Roboto Condensed', sans-serif; height: 89px; padding-top:1em; } .position{ display: inline-block; height: 1em; overflow: hidden; position: relative; width: 20px; font-weight: 500; font-size: 0.85em; } .digit{ color: #212121; letter-spacing:0; left: 0; bottom: 0; position:absolute; } .countDays{ /* display:none !important;*/ } .countDiv0{ /* display:none !important;*/ } .countHours{} .countDiv1{} .countMinutes{} .countDiv2{} .countSeconds{} .countDiv{ display:inline-block; width:35px; height:1.6em; position:relative; } .countDiv:after{ top:0.9em; } /*--responsive design--*/ @media (max-width: 1366px){ } @media (max-width:1280px){ .position { width:30px; font-size:50px; } } @media (max-width:1080px){ .position { font-size: 35px; width: 23px; } } @media (max-width:1024px){ .position { font-size: 35px; width: 19px; margin-top:22px; } .boxName { font-size: 14px; } .countdownHolder { padding-top:0.5em; } } @media (max-width:800px){ .position { margin-top: 19px; } } @media (max-width: 768px){ } @media (max-width:640px){ .position { width: 16px; font-size: 25px; } } @media (max-width:480px){ .countDays{ /* display:none !important;*/ } .countDiv0{ /* display:none !important;*/ } .countHours{} .countDiv1{} .countMinutes{} .countDiv2{} .countSeconds{} .countDiv{ width:30px !important; } .countdownHolder { padding-top:0.2em; } } @media (max-width:414px){ .countDiv { width: 1px !important; } .position { margin-top: 0; } .countHours, .countDays, .countMinutes { border-right: none; } } @media (max-width: 320px){ .countDays, .countHours, .countMinutes, .countSeconds { width: 58px; height: 58px; } #counter { padding-top: 0; height: 80px; } .boxName { font-size: 13px; } } /*--/responsive design--*/ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); -ms-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); -ms-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); -ms-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); -ms-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; transform-origin: center top; } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; }