START A COURSE
LOG IN
Online Education
Home
About
Courses
Contact
body a { text-decoration: none; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; } /*--/contact--*/ /*-- effect --*/ .mail_form { margin-top: 0em; } .input { position: relative; /*z-index: 1;*/ display: inline-block; max-width: 373px; width: calc(100% - 0em); vertical-align: top; } span.input.input--chisato:nth-child(2), span.input.input--chisato:nth-child(5) { margin: 0 0.33em; } .input__field { position: relative; display: block; float: right; padding: 0.8em; width: 60%; border: none; border-radius: 0; background: #f0f0f0; color: #aaa; font-weight: 400; -webkit-appearance: none; /* for box shadows to show on iOS */ } .input__field:focus { outline: none; } .input__label { display: inline-block; float: right; padding: 0 1em; width: 40%; color: #696969; font-weight: bold; font-size: 12px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .input__label-content { position: relative; display: block; padding: 1.6em 0; width: 100%; } /* Chisato */ .input--chisato { padding-top: 1em; } .input__field--chisato { width: 100%; padding: 1em 0.5em; background: transparent; border: 2px solid #b5b5b5; color: #212121; -webkit-transition: border-color 0.25s; transition: border-color 0.25s; font-size: 14px; } .input__label--chisato { width: 100%; position: absolute; top: 0; text-align: left; overflow: hidden; padding: 0; pointer-events: none; -webkit-transform: translate3d(0, 3em, 0); transform: translate3d(0, 3em, 0); } .input__label-content--chisato { padding: 0 1em; font-weight: 400; color: #7d7b7b; font-family: 'Merriweather Sans', sans-serif; letter-spacing: 1px; } .input__label-content--chisato::after { content: attr(data-content); position: absolute; top: -200%; left: 0; color: #1193d2; font-weight: 600; } .input__field--chisato:focus, .input--filled .input__field--chisato { border-color: #1193d2; } .input__field--chisato:focus+.input__label--chisato, .input--filled .input__label--chisato { -webkit-animation: anim-chisato-1 0.25s forwards; animation: anim-chisato-1 0.25s forwards; } .input__field--chisato:focus+.input__label--chisato .input__label-content--chisato, .input--filled .input__label-content--chisato { -webkit-animation: anim-chisato-2 0.25s forwards ease-in; animation: anim-chisato-2 0.25s forwards ease-in; } @-webkit-keyframes anim-chisato-1 { 0%, 70% { -webkit-transform: translate3d(0, 3em, 0); transform: translate3d(0, 3em, 0); } 71%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes anim-chisato-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 70%, 71% { -webkit-transform: translate3d(0, 125%, 0); transform: translate3d(0, 125%, 0); opacity: 0; -webkit-animation-timing-function: ease-out; } 100% { color: transparent; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); } } @keyframes anim-chisato-1 { 0%, 70% { -webkit-transform: translate3d(0, 3em, 0); transform: translate3d(0, 3em, 0); } 71%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes anim-chisato-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 70%, 71% { -webkit-transform: translate3d(0, 125%, 0); transform: translate3d(0, 125%, 0); opacity: 0; -webkit-animation-timing-function: ease-out; } 100% { color: transparent; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); } } /*-- //effect --*/ .mail_form textarea { outline: none; background: none; border: 2px solid #b5b5b5; font-size: 14px; color: #212121; width: 100%; padding: .9em 0.9em; margin: 2em 0; min-height: 200px; letter-spacing: 1px; } .mail_form textarea::-webkit-input-placeholder { color: #7d7b7b !important; } /*-- //input-effect --*/ .mail_form input[type="submit"], .app_form input[type="submit"] { outline: none; background: #1193d2; color: #fff; padding: 1em 0; font-size: 1em; font-weight: bold; border: none; text-transform: uppercase; width: 24%; } .mail_form input[type="submit"]:hover, .app_form input[type="submit"]:hover { background: #1193d2; } .map iframe { width: 100%; min-height: 453px; } .map { padding: 0; } .contact_grid { padding: 2em 0 2em; text-align: center; background: #1d1d1d; } .contact_grid:nth-child(2) { margin: 0.5em 0; } .contact_grid p { color: #8c8989; line-height: 1.9em; } .agile_contact_grid_left i { font-size: 3em; color: #168eea; line-height: 2em; } .contact_grid_right h4 { font-size: 1.2em; color: #ffffff; font-weight: 600; margin-bottom: .5em; } .contact_grid_right p a { color: #555; text-decoration: none; } .contact_grid_right p span { display: block; } /*-- //contact--*/ /*--responsive--*/ @media(max-width:1199px) { span.input.input--chisato:nth-child(2), span.input.input--chisato:nth-child(5) { margin: 0 !important; } } @media(max-width:1080px) { .input { max-width: 309px; width: calc(100% - 0em); vertical-align: top; float: left; } } @media(max-width:991px) { .contact_grids_info { padding: 0; margin-top: 1em; } .input { max-width: 100%; } span.input.input--chisato:nth-child(2) { margin: 0; } .map iframe { width: 100%; min-height: 303px; } } @media(max-width:640px) { .mail_form input[type="submit"] { width: 40%; } .mail_form textarea { padding: .9em 0.9em; margin: 1.3em 0; min-height: 140px; } } @media(max-width:600px) { .map iframe { width: 100%; min-height: 250px; } } @media(max-width:568px) {} @media(max-width:480px) {} @media(max-width:440px) {} @media(max-width:414px) {} @media(max-width:384px) {} @media(max-width:375px) {} @media(max-width:320px) {} @import url(https://fonts.googleapis.com/css?family=Lato:700); /* common */ .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #2980b9; } .ribbon span { position: absolute; display: block; width: 225px; padding: 15px 0; background-color: #3498db; box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font: 700 10px/1 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center; } /* top left*/ .ribbon-top-left { top: -10px; left: -10px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::after { bottom: 0; left: 0; } .ribbon-top-left span { right: -25px; top: 30px; transform: rotate(-45deg); } /* top right*/ .ribbon-top-right { top: -10px; right: -10px; } .ribbon-top-right::before, .ribbon-top-right::after { border-top-color: transparent; border-right-color: transparent; } .ribbon-top-right::before { top: 0; left: 0; } .ribbon-top-right::after { bottom: 0; right: 0; } .ribbon-top-right span { left: -25px; top: 30px; transform: rotate(45deg); } /* bottom left*/ .ribbon-bottom-left { bottom: -10px; left: -10px; } .ribbon-bottom-left::before, .ribbon-bottom-left::after { border-bottom-color: transparent; border-left-color: transparent; } .ribbon-bottom-left::before { bottom: 0; right: 0; } .ribbon-bottom-left::after { top: 0; left: 0; } .ribbon-bottom-left span { right: -25px; bottom: 30px; transform: rotate(225deg); } /* bottom right*/ .ribbon-bottom-right { bottom: -10px; right: -10px; } .ribbon-bottom-right::before, .ribbon-bottom-right::after { border-bottom-color: transparent; border-right-color: transparent; } .ribbon-bottom-right::before { bottom: 0; left: 0; } .ribbon-bottom-right::after { top: 0; right: 0; } .ribbon-bottom-right span { left: -25px; bottom: 30px; transform: rotate(-225deg); }
Send Us a Message
First Name
Last Name
Email