/*----------------------------------------------------------------------------------- 1. BASE 2. HEADER 2a. LOGO 2b. MOBILE MENU 2c. MAIN MENU 2d. SEARCH BAR 2e. SLIDER 3. CONTENT 3a. BANNER 3b. ABOUT SECTION 3c. FEATURES SECTION 3d. FACILITY SECTION 3e. OUR TEACHER SECTION 3f. OUR CLASSES SECTION 3g. FIRST DAY AT SCHOOL SECTION 3h. TESTIMONIAL SECTION 3i. OUR CLIENT SECTION 4. ABOUT PAGE 5. TEACHER PAGE 6. CLASSES PAGE 7. GALLERY PAGE 8. CONTACT PAGE 9. BLOG PAGE 10. FOOTER 10a. WIDGET FOOTER 10aa. RECENT POST WIDGET 10ab. CONTACT WIDGET 10ac. GALLERY WIDGET 10b. COPYRIGHT -----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 1. BASE /*-----------------------------------------------------------------------------------*/ @import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"); html { font-size: 62.5%; -webkit-font-smoothing: antialiased; height: 100%; } body { word-wrap:break-word; -ms-word-wrap:break-word; font-family:'Open Sans', sans-serif; font-size: 14px; color: #333333; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; } blockquote { margin: 1em 0; border-left: 10px solid #ccc; padding-left: 12px; } table th { background: #ddd; font-weight: bold; } table td, table th { padding: 8px; border: 1px solid #bbb; text-align: left; } dt { font-weight: bold; } pre { white-space: pre; word-wrap: normal; overflow-x: scroll; line-height: 1.3; margin: 1em 0; } figure { max-width: 100%; height: auto; } *::-moz-selection { background:#000; color:#fff; } *::selection { background:#000; color:#fff; } img { max-width:100%; height:auto; display: block; } button { background-image:none; background:transparent; } input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: none; outline: 0; } h1, h2 { font-family:'Dosis', sans-serif; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; margin-top: 0; } h3, h4, h5, h6 { font-family:'Roboto Bold'; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; margin-top: 0; } h1 { font-size: 42px; font-size: 4.2rem; line-height: 1.4; } img { display: block; } .gallery { position: relative; z-index: 2; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .gallery.pop { -webkit-filter: blur(10px); filter: blur(10px); } .gallery figure { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; padding: 10px; overflow: hidden; border-radius: 10px; cursor: pointer; } .gallery figure img { width: 100%; border-radius: 10px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .gallery figure figcaption { display: none; } .popup { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.75); opacity: 0; -webkit-transition: opacity .5s ease-in-out .2s; transition: opacity .5s ease-in-out .2s; } .popup.pop { opacity: 1; -webkit-transition: opacity .2s ease-in-out 0s; transition: opacity .2s ease-in-out 0s; } .popup.pop figure { margin-top: 0; opacity: 1; } .popup figure { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 0 0; transform-origin: 0 0; margin-top: 30px; opacity: 0; -webkit-animation: poppy 500ms linear both; animation: poppy 500ms linear both; } .popup figure img { position: relative; z-index: 2; border-radius: 15px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4); } .popup figure figcaption { position: absolute; bottom: 50px; background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.78)); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)); z-index: 2; width: 100%; border-radius: 0 0 15px 15px; padding: 100px 20px 20px 20px; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 32px; } .popup figure figcaption small { font-size: 11px; display: block; text-transform: uppercase; margin-top: 12px; text-indent: 3px; opacity: .7; letter-spacing: 1px; } .popup figure .shadow { position: relative; z-index: 1; top: -15px; margin: 0 auto; background-position: center bottom; background-repeat: no-repeat; width: 98%; height: 50px; opacity: .6; -webkit-filter: blur(15px) contrast(2); filter: blur(15px) contrast(2); } .popup .close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 25px; height: 25px; cursor: pointer; background: url(#close); border-radius: 25px; background: rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } .popup .close svg { width: 100%; height: 100%; } @-webkit-keyframes poppy { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1); transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1); } 4.3% { -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1); transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1); } 4.7% { -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1); transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1); } 6.81% { -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1); transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1); } 8.61% { -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1); transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1); } 9.41% { -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1); transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1); } 10.21% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1); } 12.91% { -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1); transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1); } 13.61% { -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1); transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1); } 14.11% { -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1); transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1); } 17.22% { -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1); transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1); } 17.52% { -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1); transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1); } 18.72% { -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1); transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1); } 21.32% { -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1); transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1); } 24.32% { -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1); transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1); } 25.23% { -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1); transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1); } 28.33% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1); } 29.03% { -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1); transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1); } 29.93% { -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1); transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1); } 35.54% { -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1); transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1); } 36.74% { -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1); transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1); } 39.44% { -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1); transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1); } 41.04% { -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1); transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1); } 44.44% { -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1); transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1); } 52.15% { -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1); transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1); } 59.86% { -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1); transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1); } 61.66% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1); } 63.26% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1); } 75.28% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1); } 83.98% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1); } 85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1); } 90.69% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1); } } @keyframes poppy { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1); transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1); } 4.3% { -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1); transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1); } 4.7% { -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1); transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1); } 6.81% { -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1); transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1); } 8.61% { -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1); transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1); } 9.41% { -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1); transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1); } 10.21% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1); } 12.91% { -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1); transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1); } 13.61% { -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1); transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1); } 14.11% { -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1); transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1); } 17.22% { -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1); transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1); } 17.52% { -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1); transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1); } 18.72% { -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1); transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1); } 21.32% { -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1); transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1); } 24.32% { -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1); transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1); } 25.23% { -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1); transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1); } 28.33% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1); } 29.03% { -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1); transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1); } 29.93% { -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1); transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1); } 35.54% { -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1); transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1); } 36.74% { -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1); transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1); } 39.44% { -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1); transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1); } 41.04% { -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1); transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1); } 44.44% { -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1); transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1); } 52.15% { -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1); transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1); } 59.86% { -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1); transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1); } 61.66% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1); } 63.26% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1); } 75.28% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1); } 83.98% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1); } 85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1); } 90.69% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1); } } h2 { font-size: 36px; font-size: 3.6rem; line-height: 1; } h3 { font-size: 24px; font-size: 2.4rem; line-height: 1.11111; } h4 { font-size: 18px; line-height: 1.125; } .class-details h4{ font-size: 2.2rem; } h5 { font-size: 16px; font-size: 1.6rem; line-height: 1.125; } h6 { font-size: 14px; font-size: 1.4rem; line-height: 1.6; } a { cursor: pointer; outline: none; color: #49618d; text-decoration: none !important; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } a:hover, a:active, a:focus { color: #0097a7; text-decoration: none; outline: none; } button:focus { outline:0; } p { margin: 0 0 10px; color: #333333; } .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } .overlay.dark { background-color: #000000; opacity: 0.6; } .overlay.green { background-color: #0097a7; opacity: 0.6; } .flex-content{ text-shadow: 2px 2px #000000; } .overlay.color { opacity: 0.3; background:#000; /* background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwZjZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwN2VmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzc4MTRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzg2Mjk3YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #00f6ff 0%, #007eff 25%, #7814ff 50%, #86297a 75%, #ff6600 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00f6ff), color-stop(25%, #007eff), color-stop(50%, #7814ff), color-stop(75%, #86297a), color-stop(100%, #ff6600)); background: -webkit-linear-gradient(left, #00f6ff 0%, #007eff 25%, #7814ff 50%, #86297a 75%, #ff6600 100%); background: -o-linear-gradient(left, #00f6ff 0%, #007eff 25%, #7814ff 50%, #86297a 75%, #ff6600 100%); background: -ms-linear-gradient(left, #00f6ff 0%, #007eff 25%, #7814ff 50%, #86297a 75%, #ff6600 100%); background: linear-gradient(to right, #00f6ff 0%, #007eff 25%, #7814ff 50%, #86297a 75%, #ff6600 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f6ff', endColorstr='#ff6600', GradientType=1);*/ } .no-padding { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .no-margin { margin: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } span.yellow-text { color: #AD783F; } button { margin: 15px 0 !important; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } button.button-normal, .button-normal a { display: inline-block; padding: 10px 30px; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 14px; font-weight: 500; margin: 30px 0; } button.button-normal.white, .button-normal.white a { background-color: #DE8B55; border: 1px solid #DE8B55; color: #fff; } button.button-normal.white:hover, .button-normal.white a:hover { background-color: transparent; border: 1px solid #ffffff; color: #ffffff; } button.button-normal.green, .button-normal.green a { background-color: #DE8B55; border: 1px solid #DE8B55; color: #ffffff; } button.button-normal.green:hover, .button-normal.green a:hover { background-color: transparent; border: 1px solid #0097a7; color: #0097a7; } .flexslider { margin: 0; background: none; border: none; box-shadow: none; overflow: hidden; } form input, form textarea { background-color: #f8f8f8; padding: 0 15px; /*width: 100%;*/ /*height: 45px;*/ border: none; margin-bottom: 10px; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } form textarea { padding: 15px 15px; height: 100%; } form input:focus, form textarea:focus { -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); } /*-----------------------------------------------------------------------------------*/ /* 2. HEADER /*-----------------------------------------------------------------------------------*/ #header { background-color: #ffffff; position: fixed; width: 100%; z-index: 1000; border-top: 5px solid #DADD52; } #header .logo, ul.menus li a, #header.fixedwrap ul.menus li.has-child a:hover:after, #header.fixedwrap ul.menus li.open a:after, #header.fixedwrap .sb-icon-search, #header.fixedwrap .sb-search-submit { -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } /*-----------------------------------------------------------------------------------*/ /* 2a. LOGO /*-----------------------------------------------------------------------------------*/ #header .logo { margin-top: 10px; } #header .logo img{ min-width: 225px; } #header.fixedwrap .logo { margin-top: 5px; } /*-----------------------------------------------------------------------------------*/ /* 2b. MOBILE MENU /*-----------------------------------------------------------------------------------*/ .mobile-menu { display: none; } #slide-buttons { background-color: #0097a7; border-radius: 50%; color: #ffffff; height: 40px; width: 40px; line-height: 46px; border: none; font-size: 22px; padding: 0; position: relative; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .c-menu { position: fixed; z-index: 200; background-color: #383838; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .c-menu--slide-right { width: 100%; height: 100%; } @media all and (min-width: 320px) { .c-menu--slide-right { width: 300px; } } .c-menu--slide-right { top: 0; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } @media all and (min-width: 320px) { .c-menu--slide-right { -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); } } .c-menu--slide-right.is-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .c-menu__close { margin-right: 10px !Important; background-color: #ffffff; border-radius: 50%; color: #0097a7; height: 40px; width: 40px; line-height: 46px; border: none; font-size: 22px; padding: 0; position: relative; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .slide-overlay { position: fixed; z-index: 100; top: 0; left: 0; overflow: hidden; width: 0; height: 0; background-color: #000; opacity: 0; -webkit-transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; } .slide-overlay.is-active { width: 100%; height: 100%; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .logo-menu-right img { display: inline-block; } .menus-mobile { padding: 25px 20px; text-align: left; } .menus-mobile li a { color: #ffffff; font-family:'Dosis', sans-serif; /*font-size: 18px; padding-bottom: 10px; margin-bottom: 10px;*/ font-size: 16px; padding-bottom: 5px; margin-bottom: 5px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #DADD52; width: 100%; display: block; } .menus-mobile ul.child { padding: 0; } .menus-mobile ul.child li a { font-size: 16px; padding-left: 10px; } .menus-mobile li a:hover, .menus-mobile ul.child li a:hover { opacity: 0.7; } .logo-menu-right { margin: 15px 0px; } /*-----------------------------------------------------------------------------------*/ /* 2c. MAIN MENU /*-----------------------------------------------------------------------------------*/ ul.menus { float: right; padding: 0; margin: 0 60px 0 0; } ul.menus li { float: left; } ul.menus li a { font-family:'Dosis', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; /*padding: 26px 16px;*/ padding: 16px 16px; display: block; } #header.fixedwrap ul.menus li a { padding: 20px 20px; } ul.menus li a:hover, ul.menus li.active a, ul.menus li.open a { background-color: #0097a7; color: #ffffff; } ul.menus li.has-child a:hover:after, ul.menus li.open a:after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #0097a7; content:""; display: block; margin: 0 auto -7px; opacity: 100; position: relative; bottom: -40px; width: 0; z-index: 100000; } #header.fixedwrap ul.menus li.has-child a:hover:after, #header.fixedwrap ul.menus li.open a:after { bottom: -20px; } /* Sub Menu */ ul.menus li.has-child ul.child { display: none; } ul.menus li.has-child:hover ul.child { display: block; } ul.menus li.has-child ul.child { position: absolute; background-color: #ffffff; text-align: left; width: 15em; padding: 0; } ul.menus li.has-child ul.child li { margin: 0 !important; width: 100%; } ul.menus li.has-child ul.child li a { background-color: transparent !important; color: #000000; padding: 0 !important; margin: 10px 20px; font-size: 14px; } ul.menus li.has-child ul.child li:first-child a { margin-top: 30px; } ul.menus li.has-child ul.child li:last-child a { margin-bottom: 30px; } ul.menus li.has-child ul.child li a:hover { background-color: transparent !important; color: #0097a7; } ul.menus li.has-child ul.child li a:after, ul.menus li.has-child ul.child li a:hover:after { display: none; } /*-----------------------------------------------------------------------------------*/ /* 2d. SEARCH BAR /*-----------------------------------------------------------------------------------*/ .sb-search { position: absolute; z-index: 1; right: 0; width: 0%; min-width: 70px; height: 100%; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 100%; margin: 0; s z-index: 10; padding: 0px 70px 20px 20px; font-family: inherit; font-size: 20px; color: #999999; } .sb-search-open .sb-search-input{ padding: 0px 0px 20px 20px; } .sb-search-input::-webkit-input-placeholder { color: #999999; } .sb-search-input:-moz-placeholder { color: #999999; } .sb-search-input::-moz-placeholder { color: #999999; } .sb-search-input:-ms-input-placeholder { color: #999999; } .sb-icon-search, .sb-search-submit { display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; text-align: center; cursor: pointer; height: 100%; line-height: 102px; } #header.fixedwrap .sb-icon-search, #header.fixedwrap .sb-search-submit { line-height: 62px; } #header.fixedwrap{ -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } .sb-search-submit { background: transparent; /* IE needs this */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } .sb-search.sb-search-open, .no-js .sb-search { width: 65%; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } .sb-icon-search i { background-color: #0097a7; height: 40px; width: 40px; border-radius: 50%; color: #ffffff; line-height: 40px; font-size: 18px; } /*-----------------------------------------------------------------------------------*/ /* 2e. SLIDER /*-----------------------------------------------------------------------------------*/ .tp-banner .caption { z-index: 1000; } /*-----------------------------------------------------------------------------------*/ /* 3. CONTENT /*-----------------------------------------------------------------------------------*/ .single-wrapper { padding-top: 107px; } .grey-background { background-color: #f8f8f8; } #content .with-bg-image { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } #content .with-bg-image .container { position: relative; z-index: 100; } /* Page Title & Heading Block */ .page-title { padding: 25px 0px 30px 0px; } .heading-block:after { content:''; display: block; margin: 30px 0; width: 50px; border-top: 2px solid #DADD52; } .heading-block h2 { margin-bottom: 5px; } .heading-block h4.tagline { color: #999999; } .heading-block.page-title:after { content:''; display: block; margin: 10px 0 0 0; width: 75px; border-top: 5px solid #DADD52; } .heading-block.page-title h1 { margin-bottom: 0; } /* home slider */ .flexslider-wrap .flexslider .slides > li { position: relative; background-position: center center; } .flexslider-wrap .flexslider .slides .flex-content { position: absolute; top: 60%; z-index: 100; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /*-----------------------------------------------------------------------------------*/ /* 3a. BANNER /*-----------------------------------------------------------------------------------*/ .banner { background-color: #DADD52; } .banner.large { padding: 60px 0; } .banner.small { padding: 30px 0; } .banner h1, .banner h3 { color: #ffffff; margin: 10px 0; } /*-----------------------------------------------------------------------------------*/ /* 3b. ABOUT US SECTION /*-----------------------------------------------------------------------------------*/ .about-us { padding: 100px 0 50px 0; } /*-----------------------------------------------------------------------------------*/ /* 3c. FEATURES SECTION /*-----------------------------------------------------------------------------------*/ .our-features { padding: 100px 0 40px 0; } .features { margin-top: 50px; } .feature-item { margin-bottom: 60px; } .feature-item .feature-desc { overflow: hidden; } .feature-item .feature-desc h4 { margin: 15px 0 10px 0; } .feature-item .feature-icon { display: inline-block; border-radius: 50%; height: 120px; width: 120px; position: relative; overflow: hidden; float: left; margin-right: 20px; } .feature-item .feature-icon .icon { color: #ffffff; font-size: 80px; opacity: 0.8; position: absolute; bottom: -30px; left: -5px; } .custom-food .feature-icon { background-color: #f69c3b; border: 5px solid #ffc67f; } .many-support .feature-icon { background-color: #e57978; border: 5px solid #f7c3c2; } .bus-service .feature-icon { background-color: #fec02a; border: 5px solid #ffdd8a; } .music-lesson .feature-icon { background-color: #7fb881; border: 5px solid #c6e2c7; } .excursions .feature-icon { background-color: #c389ce; border: 5px solid #d9a3e3; } .languages .feature-icon { background-color: #59bec9; border: 5px solid #b2e6ec; } /*-----------------------------------------------------------------------------------*/ /* 3d. FACILITY SECTION /*-----------------------------------------------------------------------------------*/ .our-facility { padding: 100px 0 100px 0; } .facility-item .counter-number { position: relative; display: inline-block; background-color: rgba(255, 255, 255, 0.2); height: 200px; width: 200px; border-radius: 50%; } .facility-item .counter-number h2.counter { color: #ffffff; position: absolute; background-color: rgba(255, 255, 255, 0.3); height: 120px; width: 120px; border-radius: 50%; line-height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .facility-item h4.title { color: #ffffff; margin: 15px 10px; } .facility-item p { color: #ffffff; } /*-----------------------------------------------------------------------------------*/ /* 3e. OUR TEACHER SECTION /*-----------------------------------------------------------------------------------*/ .our-teacher { padding: 100px 0; } .teacher-desc { display: none; } .teacher-desc.active { display: block } .teacher-desc h3 { margin-bottom: 5px; } .teacher-desc ul { margin-top: 30px; } .teacher-desc ul li { display: inline-block; margin: 0 10px; font-size: 18px; } .teacher-desc ul li:first-child { margin-left: 0; } .teacher-photo li { position: relative; float: left; padding: 0; cursor: pointer; } .teacher-photo li.active, .teacher-photo li { opacity: 0.3; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .teacher-photo li.active, .teacher-photo li:hover { opacity: 1; } /*-----------------------------------------------------------------------------------*/ /* 3f. OUR CLASSES SECTION /*-----------------------------------------------------------------------------------*/ .our-classes { padding: 100px 0 60px 0; } .classes { margin-top: 50px; } .class-item { margin-bottom: 40px; } .class-img { position: relative; } .class-img .overlay, .class-img span { opacity: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .class-item:hover .overlay { opacity: 0.3; } .class-img span { position: absolute; font-size: 34px; color: #ffffff; width: 100%; position: absolute; z-index: 5; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .class-item:hover span { opacity: 1; } .class-details { overflow: hidden; position: relative; } .class-desc { padding: 20px; } .class-desc h4 { color: #ffffff; margin-bottom: 5px; } .class-desc p.class-category { color: #ffffff; font-size: 1.1em; font-weight: 600; } .class-desc p.class-date { color: #ffffff; font-style: italic; font-size: 12px; } .class-type { position: absolute; bottom: 0; width: 100.1%; overflow: hidden; } .class-type div { width: 33.33333333%; float: left; background-color: #ffffff; border-left: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1; padding: 10px 15px; height: 60px; } .class-type h6.title { color: #000000; font-family:'Dosis', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; } .class-item:hover h6.title { color: #000000; } .class-type p { color: #0097a7; font-size: 15px; font-weight: 700; text-transform: uppercase; } .class-type .class-price { padding: 15px 10px; text-align: center; } .class-price h3 { color: #0097a7; margin: 0; } .class-price span { text-transform: lowercase; color: #0097a7; font-size: 12px; } /*-----------------------------------------------------------------------------------*/ /* 3g. FIRST DAY AT SCHOOL SECTION /*-----------------------------------------------------------------------------------*/ .first-day { display: inline-block; } .first-day-countdown { margin-top: 40px; } .first-day-countdown h3 { text-transform: capitalize; } .first-day-countdown .day h3 { color: #e57978; } .first-day-countdown .hour h3 { color: #f9ac59; } .first-day-countdown .minute h3 { color: #59bec9; } .first-day-countdown .second h3 { color: #7fb881; } .first-day-countdown .count-bg { position: relative; display: inline-block; height: 200px; width: 200px; border-radius: 50%; } .first-day-countdown .day .count-bg { background-color: rgba(229, 121, 120, 0.3); } .first-day-countdown .hour .count-bg { background-color: rgba(249, 172, 89, 0.3); } .first-day-countdown .minute .count-bg { background-color: rgba(89, 190, 201, 0.3); } .first-day-countdown .second .count-bg { background-color: rgba(127, 184, 129, 0.3); } .first-day-countdown .count-bg p { font-family:'Dosis', sans-serif; font-weight: 700; font-size: 36px; font-size: 3.6rem; color: #ffffff; position: absolute; height: 120px; width: 120px; border-radius: 50%; line-height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .first-day-countdown .day .count-bg p { background-color: rgba(229, 121, 120, 0.6); } .first-day-countdown .hour .count-bg p { background-color: rgba(249, 172, 89, 0.6); } .first-day-countdown .minute .count-bg p { background-color: rgba(89, 190, 201, 0.6); } .first-day-countdown .second .count-bg p { background-color: rgba(127, 184, 129, 0.6); } /*-----------------------------------------------------------------------------------*/ /* 3h. TESTIMONIAL SECTION /*-----------------------------------------------------------------------------------*/ .testimonial { padding: 100px 0; } .testimonial p.text { color: #000000; font-size: 24px; font-style: italic; } .testimonial p.text:after { content:''; display: block; margin: 30px auto; width: 50px; border-top: 2px solid #000000; } .testimonial.with-bg-image p.text { color: #ffffff; } .testimonial.with-bg-image p.text:after { border-top: 2px solid #ffffff; } .testimonial h5.title { color: #000000; margin-bottom: 5px; } .testimonial.with-bg-image h5.title { color: #ffffff; } .testimonial h6.position { color: #000000; margin-bottom: 5px; } .testimonial.with-bg-image h6.position { color: #ffffff; } .flex-control-paging li a.flex-active { background: transparent !important; border: 1px solid #ffffff; } .flex-control-paging li a { background: #ffffff; border: 1px solid #ffffff; } /*-----------------------------------------------------------------------------------*/ /* 4. ABOUT PAGE /*-----------------------------------------------------------------------------------*/ /* Accordion */ .panel-group .panel+.panel { margin-top: 0; } .panel-group .panel-heading { background-color: #DADD52; border-radius: 0; padding: 20px 20px; } .panel-group .panel { border-radius: 0; border: none; } .panel-title { color: #000; position: relative; } .panel-title:after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ffffff; border-top: 0; content:""; position: absolute; right: 0; margin-top: 5px; } .collapsed .panel-title:after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ffffff; border-bottom: 0; } .panel-body { padding: 20px; border-left: 1px solid #DADD52; border-right: 1px solid #DADD52; border-bottom: 1px solid #DADD52; background: #EAEAE5; } /* Our Class and Course */ .class-course { padding: 100px 0; } .class-course-nav { margin: 50px 0 50px 0; display: block; overflow: hidden; } .class-course-nav a { display: block; padding: 15px 10px; position: relative; border: 2px; border-color: #000000; border-style: solid; border-radius: 5px; overflow: hidden; font-weight: 700; } .class-course-nav .icon { position: absolute; font-size: 62px; right: -15px; top: -15px; } .class-course-nav a { opacity: 0.5; } .class-course-nav li.active a, .class-course-nav a:hover { opacity: 1; } .class-course-content { display: none; } .class-course-content.active { display: block } .class-course-content h3 { margin-bottom: 5px; } .class-course-content p.subtitle { font-size: 16px; color: #999999; } .class-course-content .content { margin-top: 20px; } /* Pricing Table */ .pricing-table { padding: 100px 0; } .pricing-table .pricing-item { padding: 0; } .pricing-table .pricing-item.featured { position: relative; top: -20px; } .pricing-item h3.title { color: #ffffff; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding: 25px 0px; margin: 0; } .pricing-table .pricing-item.featured h3.title { padding: 35px 0; } .pricing-item h1.price { color: #ffffff; padding: 25px 0px; margin: 0; } .pricing-item h1.price span { font-size: 18px; text-transform: lowercase; } .pricing-item.featured .content { border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } .pricing-item li { padding: 10px 0; font-size: 16px; background-color: #ecf0f1; border-bottom: 1px solid #ffffff; } .pricing-item li:nth-child(odd) { background-color: #eaebec; } .pricing-item .bottom-section { background-color: #ecf0f1; } /*-----------------------------------------------------------------------------------*/ /* 5. TEACHER PAGE /*-----------------------------------------------------------------------------------*/ .section-1 { margin-bottom: 60px; } /* Teacher Photo */ .teacher-nav { margin-bottom: 60px; overflow: hidden; } .teacher-nav li { float: left; } .teacher-nav li img { opacity: 0.3; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .teacher-nav li.active img, .teacher-nav li:hover img { opacity: 1; } .teacher-photo { position: relative; overflow: hidden; } .teacher-photo .social-links { position: absolute; opacity: 0; bottom: 0; width: 100%; text-align: center; padding: 15px 0px 10px 0px; background-color: rgba(67, 182, 204, 0.8); -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; -moz-transition: opacity 0.6s, -moz-transform 0.6s; transition: opacity 0.6s, transform 0.6s; -webkit-transform: translateY(45px); -moz-transform: translateY(45px); transform: translateY(45px); } .teacher-photo:hover .social-links { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .teacher-photo .social-links ul { margin: 0 auto; text-align: center; display: inline-block; } .teacher-photo .social-links ul li { opacity: 1; } .teacher-photo .social-links ul li a { color: #ffffff; } .teacher-photo .social-links ul li a:hover { opacity: 0.7; } /* Skill Bar*/ .skills-bar { background: #f6f8fb; height: 45px; position: relative; width: 100%; margin-bottom: 10px; -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; transition-property: width, background-color; } .skills-bar .bar { position: relative; height: 45px; width: 0px; padding: 15px 20px; } .skills-bar span.skill-title { font-family:'Dosis', sans-serif; font-size: 18px; font-weight: 700; color: #ffffff; text-transform: uppercase; position: absolute; left: 5%; top: 50%; transform: translate(0%, -50%); } /* Table */ .table th.header { font-family:'Dosis', sans-serif; background-color: #43b6cc; border: none; padding: 15px 25px; color: #ffffff; text-transform: uppercase; font-size: 18px; line-height: 30px; } .table th.header span.icon { font-size: 32px; float: left; line-height: 24px; margin-right: 10px; } .table td { font-family:'Dosis', sans-serif; text-transform: uppercase; font-size: 16px; border: none; border-top: 0 !important; padding: 15px 25px !important; } .table tr { border: none; background-color: #f6f8fb; } .table tr:nth-child(even) { background-color: #ffffff; } .table td.time { color: #0097a7; } /* Lessons */ ul.lesson li { font-family:'Dosis', sans-serif; display: block; margin: 0; padding: 10px 0; text-transform: uppercase; border-bottom: 1px solid #dddddd; } ul.lesson li:first-child { padding-top: 0; } /*-----------------------------------------------------------------------------------*/ /* 6. CLASSES PAGE /*-----------------------------------------------------------------------------------*/ .classes-page { padding: 100px 0 70px 0; } .classes-page .classes-wrapper:nth-child(odd) .class-item .class-img { float: left; } .classes-page .classes-wrapper:nth-child(even) .class-item .class-img { float: right; } .classes-page .class-desc h2 { color: #ffffff; margin-bottom: 5px; } .classes-page .class-desc p.excerpt { color: #ffffff; margin: 20px 0; text-align: justify; } .classes-page .classes-wrapper:nth-child(odd) .class-type .class-year { border-left: 0; } .classes-page .classes-wrapper:nth-child(odd) .class-type .class-price { border-right: 1px solid #c1c1c1; } .classes-page .classes-wrapper .class-type div { height: 80px; } .classes-page .classes-wrapper .class-type h6.title { font-size: 14px; } .classes-page .classes-wrapper .class-type p { font-size: 22px; } .classes-page .classes-wrapper .class-type .class-price h3 { font-size: 44px; } /* SINGLE CLASS */ .single-classes { padding: 100px 0; } .class-flexslider ul.slides { display: block; overflow: hidden; } .class-content ul.with-icon { padding: 20px 0; display: block; } .class-content ul.with-icon li { background-image: url(../img/check-icon.png); background-repeat: no-repeat; background-position: left center; padding-left: 25px; margin: 10px 0px; } .class-feature { padding: 100px 0 40px 0; } .class-feature .feature-item .feature-with-bg { padding: 20px 20px 25px; border-radius: 5px; } .feature-item .feature-with-bg .feature-icon { border: 5px solid #ffffff; } .feature-item .feature-with-bg .feature-icon .icon { opacity: 1; } .feature-item .feature-with-bg .feature-desc h4 { color: #ffffff; } .feature-item .feature-with-bg .feature-desc p { color: #ffffff; } /*-----------------------------------------------------------------------------------*/ /* 7. GALLERY PAGE /*-----------------------------------------------------------------------------------*/ .gallery { padding: 100px 0; } #gallery { position: relative; margin: 0 -12px -12px 0; /*text-align: center;*/ overflow: hidden; } .gallery-item { position: relative; float: left; width: 276px; margin: 0 12px 12px 0; } .gallery-item .gallery-image { position: relative; overflow: hidden; } .gallery-item .gallery-image img { width: 100%; height: auto; } .gallery-image .overlay, .gallery-image span { opacity: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .gallery-image:hover .overlay { opacity: 0.3; } .gallery-image span { font-size: 34px; color: #ffffff; position: absolute; z-index: 5; top: 50%; left: 0; right: 0; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .gallery-image:hover span { opacity: 1; } .load-more button { margin: 60px 0 0 0 !important; } /*-----------------------------------------------------------------------------------*/ /* 8. CONTACT PAGE /*-----------------------------------------------------------------------------------*/ .contact-section { padding: 100px 0; } .map { position: relative; z-index: -1; } .map iframe { width: 100%; height: 350px; border: none; } .contact-section .visit-us, .contact-section .contact-us { margin-top: 40px; } .contact-icon { float: left; margin-right: 15px; font-size: 24px; } .contact-content { overflow: hidden; } .contact-content p { margin: 0; } .contact-form form input#name, .contact-form form input#email { width: 49.3%; float: left; } .contact-form form input#name { margin-right: 10px; } /*-----------------------------------------------------------------------------------*/ /* 9. BLOG PAGE /*-----------------------------------------------------------------------------------*/ .blog { padding: 100px 0 40px 0; } .blog-post .post-item { margin-bottom: 60px; } .blog-post .post-image { position: relative; } .blog-post .post-image .overlay, .blog-post .post-image span { opacity: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .blog-post .post-image:hover .overlay { opacity: 0.3; } .blog-post .post-image span { position: absolute; font-size: 34px; color: #ffffff; position: absolute; z-index: 5; left: 50%; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .blog-post .post-image:hover span { opacity: 1 } .blog-post .post-content { background-color: #f7f8fc; padding: 30px; } .blog-post .post-content h3 { margin-bottom: 10px; } .blog-post .post-content span { font-style: italic; margin: 0px 10px; } .blog-post .post-content span:first-child { margin-left: 0; } .pagination { width: 100%; margin: 0; } /* Blog Sidebar*/ .sidebar-widget { margin-bottom: 60px; } .sidebar-widget.recent-post .post-item { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dddddd; } .sidebar-widget.recent-post .post-item:last-child { border-bottom: none; padding-bottom: 0; } .sidebar-widget.recent-post .post-item .post-thumb { float: left; margin-right: 15px; position: relative; } .sidebar-widget.recent-post .post-item .post-thumb .overlay, .sidebar-widget.recent-post .post-item .post-thumb span { opacity: 0; -webkit-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .sidebar-widget.recent-post .post-item .post-thumb:hover .overlay { opacity: 0.3; } .sidebar-widget.recent-post .post-item .post-thumb:hover span { opacity: 1; } .sidebar-widget.recent-post .post-item .post-thumb .overlay span { color: #ffffff; width: 100%; position: absolute; z-index: 5; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sidebar-widget.recent-post .post-item .post-content { overflow: hidden; } .sidebar-widget.recent-post .post-item .post-content h4 { text-transform: capitalize; } .sidebar-widget.recent-post .post-item .post-content span.date { font-size: 12px; font-style: italic; } .sidebar-widget.archives li a { text-transform: uppercase; display: block; border-bottom: 1px solid #dddddd; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px; } .sidebar-widget.archives li:last-child a { margin-bottom: 0; } .sidebar-widget.tags .tag-items a { border: 1px solid #dddddd; background-color: #dddddd; padding: 5px 15px; display: inline-block; margin-right: 5px; margin-bottom: 5px; } .sidebar-widget.tags .tag-items a:hover { border: 1px solid #0097a7; background-color: #0097a7; color: #ffffff; } /* Single Post */ .blog-single { padding: 100px 0 90px 0; } .single-post .post-content { padding: 30px 0; margin-bottom: 40px; border-bottom: 1px solid #dddddd; } .single-post .post-content h3 { margin-bottom: 10px; } .single-post .post-content span { font-style: italic; margin: 0px 10px; } .single-post .post-content span:first-child { margin-left: 0; } /* Comment Section */ .comment-list li.comment { margin-bottom: 40px; } .comment-list li.comment ol.children { margin-top: 30px; } .comment .avatar img { float: left; margin-right: 20px; border-radius: 50%; } .comment-wrapper { overflow: hidden; } .comment-meta .fn { float: left; text-transform: uppercase; padding-right: 10px; } .comment-metadata { position: relative; display: inline-block; padding-left: 13px; color: #bbbbbb; } .comment-metadata a { color: #bbbbbb; } .comment-metadata:before { content:"/"; position: absolute; left: 0; } .comment .reply { float: right; } .comment .reply a { text-transform: uppercase; color: #0097a7; font-weight: 700; } .comment-content { margin-top: 10px; } /* Comment Form */ .comment-form { padding-top: 40px; border-top: 1px solid #dddddd; } .comment-form form input#name, .comment-form form input#email { width: 49.3%; float: left; } .comment-form form input#name { margin-right: 10px; } /*-----------------------------------------------------------------------------------*/ /* 10. FOOTER /*-----------------------------------------------------------------------------------*/ #footer { background-color: #383838; padding: 50px 0; } /*-----------------------------------------------------------------------------------*/ /* 10a. WIDGET /*-----------------------------------------------------------------------------------*/ .widget-footer .logo-footer { margin-bottom: 20px; } .widget-footer p { color: #ffffff; } .widget-footer h4.title { color: #ffffff; font-size: 20px; margin-bottom: 35px; } .widget-footer h4.title:after { content:''; display: block; margin-top: 10px; width: 30px; border-top: 2px solid #ffffff; } .widget-footer .footer-content h4 { color: #ffffff; margin-bottom: 10px; } /*-----------------------------------------------------------------------------------*/ /* 10aa. RECENT POST WIDGET /*-----------------------------------------------------------------------------------*/ .widget-footer .recent-post .post-item { padding: 15px 0; border-bottom: 1px solid #40b1bd; } .widget-footer .recent-post .post-item:first-child { padding-top: 0; } .widget-footer .recent-post .post-item:last-child { border-bottom: none; } .widget-footer .recent-post .post-item .post-thumb { float: left; margin-right: 15px; position: relative; } .widget-footer .recent-post .post-item .post-thumb .overlay { opacity: 0; -webkit-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .widget-footer .recent-post .post-item .post-thumb:hover .overlay { opacity: 0.3; } .widget-footer .recent-post .post-item .post-thumb span { color: #ffffff; width: 100%; position: absolute; z-index: 5; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .widget-footer .recent-post .post-item .post-thumb:hover span { opacity: 1; } .widget-footer .recent-post .post-item .post-content { overflow: hidden; } .widget-footer .recent-post .post-item .post-content h4 { text-transform: capitalize; } .widget-footer .recent-post .post-item .post-content span.date { color: #ffffff; font-size: 12px; font-style: italic; } /*-----------------------------------------------------------------------------------*/ /* 10ab. CONTACT FOOTER /*-----------------------------------------------------------------------------------*/ .widget-footer .contact-section { padding: 15px 0; border-bottom: 1px solid #40b1bd; } .widget-footer .contact-section:first-child { padding-top: 0; } .widget-footer .contact-section:last-child { border-bottom: none; } /*-----------------------------------------------------------------------------------*/ /* 10b. COPYRIGHT /*----------------------------------------------------------------------------------*/ #copyright { padding: 30px 0; } #copyright .social-links ul { float: right; } #copyright .social-links ul li { display: inline-block; margin: 0 10px; } #copyright .social-links ul li:last-child { margin-right: 0; } #copyright .social-links ul li a { font-size: 16px; } #menu-top-menu #home a{ background: #DADD52; } #menu-top-menu #about a{ background: #F69C3B; } #menu-top-menu #classes a{ background: #59BECA; } #menu-top-menu #gallery a{ background: #E57977; } #menu-top-menu #sc a{ background: #c2709a; } #menu-top-menu #events a{ background: #7FB881; } #menu-top-menu #contact a{ background: #9E9E9E; } #menu-top-menu #careers a{ background: #C289CE; } #menu-top-menu #adventures a{ background: #282877; } #menu-top-menu a{ color: #fff; } #menu-top-menu a:hover{ color: #000; } #menu-top-menu .child a{ color: #000; } #menu-top-menu .child ul{ background: #efefef; } #menu-top-menu .active a{ color: #000; } .salient_features{ display: block; list-style-type: none; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; } .salient_features li{ font-size: 1.5em; padding: 5px 0; } .salient_features li:before { content:'\2713'; color:#de8b55; font-weight: bold; padding-right: 1.0em; } .form-horizontal .control-label{ text-align: left; } .gender_label span.glyphicon { opacity: 0; padding: 5px; font-size: 1.5em; } .btn.active span.glyphicon { opacity: 1; } .gender_label{ width: 100px; height:50px; } .gender_label span{ width: 30px; float: left; } .gender_label img{ width: 30px; height:30px; float: right; } .date-form { margin: 10px; } label.control-label span { cursor: pointer; } /*.date-btn{height:20px;} .ui-datepicker{background: #C5C5C0;padding: 5px;} .ui-datepicker-calendar tbody{background: #efefef;}*/ .datepicker-days thead th,table th{ background: #fff;} .table-responsive input[type="text"] { width: 100%; color: #949494; background: none; outline: none; font-size: .9em; padding: .3em; margin-bottom: 0em; border: solid 0px #949494; -webkit-appearance: none; height: 30px; } .table-responsive td{ padding:1px !important; } .table-responsive thead td{ text-align: center; font-weight: bold; height: 30px; } .table-responsive tbody td{ text-align: center; font-weight: bold; } .register-btn{ padding:5px 50px; font-weight: bold; font-size: 1.2em; } .required{ color: red; font-weight: bold; } #table-error{ color: #a94442; float: right; font-size: 1em; margin-left: 1em; margin-top: 0; } .class-item .expara{ color: white; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; padding-right:10px; } .founder-content p{ text-align: justify; } .founder-content-main p{ line-height: 1.8em; padding-right: 3em; text-align: justify; } .gallery-image img{ max-height: 180px; min-height: 180px; max-width: 100%; min-width: 100%; } .recent-post .post-item .post-thumb img{ max-width: 100px; max-height: 100px; } .recent-post .post-item .post-content h4{ font-size: 1.0em; } .recent-post .post-item .post-content p{ font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .read-more{ float: right; color: #fff; padding-top: 1em; font-style: italic; /*border-bottom: 1px solid #fff;*/ } @media screen and (max-width: 720px) { .page-title{margin-top:65px;} } @media screen and (max-width: 320px) { .btn{padding:6px 6px;} }