/* Typography */ h1, h2, h3, h4, h5, h6 { color: #111111; font-family: "Merriweather", serif; font-weight: 400; letter-spacing: 0.5px; margin-top: 0; } h1 { font-size: 36px; margin-bottom: 24px; } h2 { font-size: 30px; margin-bottom: 22px; } h3 { font-size: 26px; margin-bottom: 20px; } h4 { font-size: 22px; margin-bottom: 18px; } h5 { font-size: 18px; margin-bottom: 14px; } h6 { font-size: 16px; margin-bottom: 12px; } a { color: #0082d6; -moz-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -ms-transition: 0.2s ease-in; transition: 0.2s ease-in; letter-spacing: 0.5px; font-weight: 400; outline: 0 !important; } a:hover, a:active, a:focus { color: #0266a7; text-decoration: none; } p { font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #666666; letter-spacing: 0.5px; margin-bottom: 10px; } ul { list-style: none; padding: 0; } ul, ol { padding-left: 16px; margin-top: 0; margin-bottom: 20px; } .list-featured { list-style: none; padding: 0; } .list-featured li { position: relative; padding-left: 14px; margin-bottom: 7px; } .list-featured li:before { position: absolute; display: block; content: ""; width: 6px; height: 6px; border-radius: 50%; left: 0; top: 7px; background-color: #0082d6; } ol li { margin-bottom: 7px; } li { color: #666666; font-size: 16px; line-height: 20px; letter-spacing: 0.5px; } blockquote { border-left: 5px solid #ebebeb; } blockquote p { font-size: 16px; font-weight: 400; } cite { color: #cccccc; font-size: 14px; } strong { font-weight: 700; } .text-uppercase { text-transform: uppercase; } .lead { font-size: 18px; } .text-sm { font-size: 12px; } .text-xs { font-size: 10px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-default { color: #333333; } .text-primary { color: #ba55d3; } .text-success { color: #26ae46; } .text-info { color: #0072bc; } .text-warning { color: #e98b1c; } .text-danger { color: #e80606; } .bg-default { color: white; background: #333333; padding: 3px 4px; } .bg-primary { color: white; background: #0082d6; padding: 3px 4px; } .bg-success { color: white; background: #26ae46; padding: 3px 4px; } .bg-info { color: white; background: #0072bc; padding: 3px 4px; } .bg-warning { color: white; background: #e98b1c; padding: 3px 4px; } .bg-danger { color: white; background: #e80606; padding: 3px 4px; } /* / End Typography */ /* Base CSS */ body { color: #666666; background: #ffffff; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.5px; min-height: 500px; } html, body { height: 100%; margin: 0; } .row { margin-right: 0; margin-left: 0; } .container-fluid { padding: 0; } img { width: 100%; max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; } .page-header { font-size: 30px; font-weight: 700; border: none; padding-top: 50px; margin: 0 0 20px 0; } .page-header.wsub { margin-bottom: 0; } .page-header.wsub h2 { margin-bottom: 0; } .sub-title { color: #111111; font-size: 24px; font-weight: 400; } .space-top { margin-top: 20px !important; } .space-top-2x { margin-top: 40px !important; } .space-bottom { margin-bottom: 20px !important; } .space-bottom-2x { margin-bottom: 40px !important; } .space-left { padding-left: 15px !important; } .space-left-2x { padding-left: 30px !important; } .space-right { padding-right: 15px !important; } .space-right-2x { padding-right: 30px !important; } .space-25 { margin: 12.5px 0; line-height: 0; } .space-50 { margin: 25px 0; line-height: 0; } .space-100 { margin: 50px 0; line-height: 0; } .space-200 { margin: 100px 0; line-height: 0; } .no-margin { margin: 0 !important; } .no-padding { padding: 0 !important; } a:focus { outline: none !important; } .btn { white-space: nowrap; } .btn-social { white-space: nowrap; } .btn-primary { color: #0082d6; background: transparent; border: 2px solid #0082d6; border-radius: 50px; } .btn { white-space: nowrap; } .btn-social { white-space: nowrap; } .btn:focus { outline: none !important; } .btn-social:focus { outline: none !important; } input:focus { outline: none !important; } /* Buttons */ .btn { font-weight: 400; font-size: 13px; letter-spacing: 0.5px; -moz-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -ms-transition: 0.2s ease-in; transition: 0.2s ease-in; border-radius: 0; padding: 9px 10px; } .btn span { margin-left: 10px; margin-right: 10px; } .btn:hover { background: transparent; } .btn:focus { background: transparent; } .btn-xl { font-size: 20px; padding: 9px 10px; } .btn-lg { font-size: 15px; padding: 10px 12px; } .btn-sm { font-size: 12px; padding: 7px 6px; } .btn-xs { font-size: 10px; padding: 5px 8px; } .btn-rounded { border-radius: 5px !important; } .btn-pill { border-radius: 50px !important; } .btn-circle { border-radius: 50% !important; height: 40px; width: 40px; padding: 3px !Important; } .btn-square { height: 40px; width: 40px; border-radius: 5px; padding: 3px !Important; } .btn-link { color: #0082d6; } .btn-link:hover { color: #0266a7; text-decoration: none; } .btn-link:focus { color: #0266a7; text-decoration: none; } /* Default Button */ .btn-default, .btn-default:active, .btn-default:focus { color: #333333; border: 2px solid #333333; background: transparent; } .btn-default:hover { color: white; background: #333333; border: 2px solid #333333; } .btn-default-filled, .btn-default-filled:active, .btn-default-filled:focus { color: white; background: #333333; border: 2px solid #333333; } .btn-default-filled:hover { color: white; background: #111111; border: 2px solid #111111; } /* / End Default Button */ /* Primary Button */ .btn-primary, .btn-primary:active, .btn-primary:focus { color: #0082d6; border: 2px solid #0082d6; background: transparent; } .btn-primary:hover { color: white; background: #0082d6; border: 2px solid #0082d6; } .btn-primary-filled, .btn-primary-filled:active, .btn-primary-filled:focus { color: white; background: #0082d6; border: 2px solid #0082d6; } .btn-primary-filled:hover { color: white; background: #0266a7; border: 2px solid #0266a7; } /* / End Primary Button */ /* Success Button */ .btn-success, .btn-success:active, .btn-success:focus { color: #26ae46; border: 2px solid #26ae46; background: transparent; } .btn-success:hover { color: white; background: #26ae46; border: 2px solid #26ae46; } .btn-success-filled, .btn-success-filled:active, .btn-success-filled:focus { color: white; background: #26ae46; border: 2px solid #26ae46; } .btn-success-filled:hover { color: white; background: #0c7d27; border: 2px solid #0c7d27; } /* / End Success Button */ /* Info Button */ .btn-info, .btn-info:active, .btn-info:focus { color: #0072bc; border: 2px solid #0072bc; background: transparent; } .btn-info:hover { color: white; background: #0072bc; border: 2px solid #0072bc; } .btn-info-filled, .btn-info-filled:active, .btn-info-filled:focus { color: white; background: #0072bc; border: 2px solid #0072bc; } .btn-info-filled:hover { color: white; background: #125988; border: 2px solid #125988; } /* / End Info Button */ /* Warning Button */ .btn-warning, .btn-warning:active, .btn-warning:focus { color: #e98b1c; border: 2px solid #e98b1c; background: transparent; } .btn-warning:hover { color: white; background: #e98b1c; border: 2px solid #e98b1c; } .btn-warning-filled, .btn-warning-filled:active, .btn-warning-filled:focus { color: white; background: #e98b1c; border: 2px solid #e98b1c; } .btn-warning-filled:hover { color: white; background: #c26b05; border: 2px solid #c26b05; } /* / End Warning Button */ /* Danger Button */ .btn-danger, .btn-danger:active, .btn-danger:focus { color: #e80606; border: 2px solid #e80606; background: transparent; } .btn-danger:hover { color: white; background: #e80606; border: 2px solid #e80606; } .btn-danger-filled, .btn-danger-filled:active, .btn-danger-filled:focus { color: white; background: #e80606; border: 2px solid #e80606; } .btn-danger-filled:hover { color: white; background: #c20303; border: 2px solid #c20303; } /* / End Danger Button */ /* Social Buttons */ .btn-social { font-size: 13px; padding: 8px 15px; letter-spacing: 0.5px; vertical-align: middle; -moz-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -ms-transition: 0.2s ease-in; transition: 0.2s ease-in; } .btn-social span { margin-left: 10px; } /* Facebook Button */ .btn-facebook, .btn-facebook:active, .btn-facebook:focus { color: #4e68a1; background: transparent; border: 2px solid #4e68a1; } .btn-facebook:hover { color: white !important; background: #4e68a1; border: 2px solid #4e68a1; } .btn-facebook-filled, .btn-facebook-filled:active, .btn-facebook-filled:focus { color: white; background: #4e68a1; border: 2px solid #4e68a1; } .btn-facebook-filled:hover { color: white; background: #3b4f7a; border: 2px solid #3b4f7a; } .btn-facebook-link, .btn-facebook-link:active, .btn-facebook-link:focus { color: #4e68a1; background: transparent; border: none; } .btn-facebook-link:hover { color: #3b4f7a; } /* / End Facebook Button */ /* Twitter Button */ .btn-twitter, .btn-twitter:active, .btn-twitter:focus { color: #65b5f2; background: transparent; border: 2px solid #65b5f2; } .btn-twitter:hover { color: white; background: #65b5f2; border: 2px solid #65b5f2; } .btn-twitter-filled, .btn-twitter-filled:active, .btn-twitter-filled:focus { color: white; background: #65b5f2; border: 2px solid #65b5f2; } .btn-twitter-filled:hover { color: white; background: #5294c6; border: 2px solid #5294c6; } .btn-twitter-filled:hover { color: white; background: #5294c6; border: 2px solid #5294c6; } .btn-twitter-link, .btn-twitter-link:active, .btn-twitter-link:focus { color: #65b5f2; background: transparent; border: none; } .btn-twitter-link:hover { color: #5294c6; } /* / End Twitter Button */ /* Google Button */ .btn-google, .btn-google:active, .btn-google:focus { color: #e05d4b; background: transparent; border: 2px solid #e05d4b; } .btn-google:hover { color: white; background: #e05d4b; border: 2px solid #e05d4b; } .btn-google-filled, .btn-google-filled:active, .btn-google-filled:focus { color: white; background: #e05d4b; border: 2px solid #e05d4b; } .btn-google-filled:hover { color: white; background: #b94c3d; border: 2px solid #b94c3d; } .btn-google-link, .btn-google-link:active, .btn-google-link:focus { color: #e05d4b; background: transparent; border: none; } .btn-google-link:hover { color: #b94c3d; } /* / End Google Button */ /* Linkedin Button */ .btn-linkedin, .btn-linkedin:active, .btn-linkedin:focus { color: #2083bc; background: transparent; border: 2px solid #2083bc; } .btn-linkedin:hover { color: white; background: #2083bc; border: 2px solid #2083bc; } .btn-linkedin-filled, .btn-linkedin-filled:active, .btn-linkedin-filled:focus { color: white; background: #2083bc; border: 2px solid #2083bc; } .btn-linkedin-filled:hover { color: white; background: #186592; border: 2px solid #186592; } .btn-linkedin-link, .btn-linkedin-link:active, .btn-linkedin-link:focus { color: #2083bc; background: transparent; border: none; } .btn-linkedin-link:hover { color: #186592; } /* / End Linkedin Button */ /* Pinterest Button */ .btn-pinterest, .btn-pinterest:active, .btn-pinterest:focus { color: #d2373b; background: transparent; border: 2px solid #d2373b; } .btn-pinterest:hover { color: white; background: #d2373b; border: 2px solid #d2373b; } .btn-pinterest-filled, .btn-pinterest-filled:active, .btn-pinterest-filled:focus { color: white; background: #d2373b; border: 2px solid #d2373b; } .btn-pinterest-filled:hover { color: white; background: #ad2c2f; border: 2px solid #ad2c2f; } .btn-pinterest-link, .btn-pinterest-link:active, .btn-pinterest-link:focus { color: #d2373b; background: transparent; border: none; } .btn-pinterest-link:hover { color: #ad2c2f; } /* / End Pinterest Button */ /* Dribbble Button */ .btn-dribbble, .btn-dribbble:active, .btn-dribbble:focus { color: #ec5f94; background: transparent; border: 2px solid #ec5f94; } .btn-dribbble:hover { color: white; background: #ec5f94; border: 2px solid #ec5f94; } .btn-dribbble-filled, .btn-dribbble-filled:active, .btn-dribbble-filled:focus { color: white; background: #ec5f94; border: 2px solid #ec5f94; } .btn-dribbble-filled:hover { color: white; background: #b4446e; border: 2px solid #b4446e; } .btn-dribbble-link, .btn-dribbble-link:active, .btn-dribbble-link:focus { color: #ec5f94; background: transparent; border: none; } .btn-dribbble-link:hover { color: #b4446e; } /* / End Dribbble Button */ /* / End Social Buttons */ /* Checkboxes */ .checkbox { padding-left: 10px; } .checkbox label { display: inline-block; position: relative; padding-left: 20px; width: 25px; height: 25px; } .checkbox label span { margin-top: 2px; position: absolute; white-space: nowrap; } .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 25px; height: 25px; left: 0; margin-left: -20px; border: 2px solid #cccccc; border-radius: 5px; background-color: white; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox label::after { display: inline-block; position: absolute; width: 25px; height: 25px; left: 0; top: 0; margin-left: -17px; padding-left: 3px; padding-top: 3px; font-size: 14px; color: #333333; } .checkbox + .checkbox, .radio + .radio { margin-top: 0; } .checkbox input[type="checkbox"] { opacity: 0; } .checkbox input[type="checkbox"]:checked + label::after { font-family: 'FontAwesome'; content: "\f00c"; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.3; } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #ebebeb; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox-default input[type="checkbox"]:checked + label::before { background-color: #333333; border-color: #333333; } .checkbox-default input[type="checkbox"]:checked + label::after { color: white; } .checkbox-default label { color: #333333; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #0082d6; border-color: #0082d6; } .checkbox-primary input[type="checkbox"]:checked + label::after { color: white; } .checkbox-primary label { color: #0082d6; } .checkbox-success input[type="checkbox"]:checked + label::before { background-color: #26ae46; border-color: #26ae46; } .checkbox-success input[type="checkbox"]:checked + label::after { color: white; } .checkbox-success label { color: #26ae46; } .checkbox-info input[type="checkbox"]:checked + label::before { background-color: #0072bc; border-color: #0072bc; } .checkbox-info input[type="checkbox"]:checked + label::after { color: white; } .checkbox-info label { color: #0072bc; } .checkbox-warning input[type="checkbox"]:checked + label::before { background-color: #e98b1c; border-color: #e98b1c; } .checkbox-warning input[type="checkbox"]:checked + label::after { color: white; } .checkbox-warning label { color: #e98b1c; } .checkbox-danger input[type="checkbox"]:checked + label::before { background-color: #e80606; border-color: #e80606; } .checkbox-danger input[type="checkbox"]:checked + label::after { color: white; } .checkbox-danger label { color: #e80606; } /* / End Checkboxes */ /* Radio Buttons */ .radio { padding-left: 10px; } .radio label { display: inline-block; position: relative; padding-left: 20px; width: 25px; height: 25px; } .radio label span { margin-top: 2px; position: absolute; white-space: nowrap; } .radio label::before { content: ""; display: inline-block; position: absolute; width: 25px; height: 25px; left: 0; margin-left: -20px; border: 3px solid #cccccc; border-radius: 50%; background-color: white; -webkit-transition: border 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; } .radio label::after { display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 7px; top: 7px; margin-left: -20px; border-radius: 50%; background-color: #cccccc; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .radio input[type="radio"] { opacity: 0; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label { opacity: 0.3; } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio-default input[type="radio"] + label::after { background-color: #333333; } .radio-default input[type="radio"]:checked + label::before { border-color: #333333; } .radio-default input[type="radio"]:checked + label::after { background-color: #333333; } .radio-default label { color: #333333; } .radio-primary input[type="radio"] + label::after { background-color: #0082d6; } .radio-primary input[type="radio"]:checked + label::before { border-color: #0082d6; } .radio-primary input[type="radio"]:checked + label::after { background-color: #0082d6; } .radio-primary label { color: #0082d6; } .radio-success input[type="radio"] + label::after { background-color: #26ae46; } .radio-success input[type="radio"]:checked + label::before { border-color: #26ae46; } .radio-success input[type="radio"]:checked + label::after { background-color: #26ae46; } .radio-success label { color: #26ae46; } .radio-info input[type="radio"] + label::after { background-color: #0072bc; } .radio-info input[type="radio"]:checked + label::before { border-color: #0072bc; } .radio-info input[type="radio"]:checked + label::after { background-color: #0072bc; } .radio-info label { color: #0072bc; } .radio-warning input[type="radio"] + label::after { background-color: #e98b1c; } .radio-warning input[type="radio"]:checked + label::before { border-color: #e98b1c; } .radio-warning input[type="radio"]:checked + label::after { background-color: #e98b1c; } .radio-warning label { color: #e98b1c; } .radio-danger input[type="radio"] + label::after { background-color: #e80606; } .radio-danger input[type="radio"]:checked + label::before { border-color: #e80606; } .radio-danger input[type="radio"]:checked + label::after { background-color: #e80606; } .radio-danger label { color: #e80606; } /* / End Radio Buttons */ /* Button Groups */ .btn-group-xl > .btn { font-size: 20px; padding: 9px 10px; border-radius: 5px; } .btn-group-lg > .btn { font-size: 15px; padding: 10px 12px; border-radius: 5px; } .btn-group > .btn { border-radius: 5px; } .btn-group-sm > .btn { font-size: 12px; padding: 5px 4px; border-radius: 5px; } .btn-group-xs > .btn { font-size: 10px; padding: 3px; border-radius: 5px; } /* / End Button Groups */ /* Dropdown Buttons */ .dropdown-buttons { display: inline-block; position: relative; } .dropdown-buttons .btn-group > .btn { padding-left: 17px; } .dropdown-buttons .dropdown-icon { margin: 0 2px 0 10px; } .dropdown-buttons .btn { border-radius: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 0; margin: 5px 0 0 0; background-color: #f7f7f7; -webkit-background-clip: padding-box; background-clip: padding-box; border: none; border-radius: 5px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .dropdown-menu > li > a { color: #666666; } .dropdown-menu > li > a:hover { color: white; background: #cccccc; } .dropdown-menu .divider { height: 2px; margin: 3px 0; background-color: #ebebeb; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; } .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover { color: white; background-color: #333333; border-color: #333333; } .btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default { color: white; background-color: #333333; border-color: #333333; } .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { color: white; background-color: #0082d6; border-color: #0082d6; } .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary { color: white; background-color: #0082d6; border-color: #0082d6; } .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover { color: white; background-color: #26ae46; border-color: #26ae46; } .btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success { color: white; background-color: #26ae46; border-color: #26ae46; } .btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover { color: white; background-color: #0072bc; border-color: #0072bc; } .btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info { color: white; background-color: #0072bc; border-color: #0072bc; } .btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover { color: white; background-color: #e98b1c; border-color: #e98b1c; } .btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning { color: white; background-color: #e98b1c; border-color: #e98b1c; } .btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover { color: white; background-color: #e80606; border-color: #e80606; } .btn-danger.active, .btn-danger:active, .open > .dropdown-toggle.btn-danger { color: white; background-color: #e80606; border-color: #e80606; } /* / End Dropdown Buttons */ /* / End Buttons */ /* End Base CSS */ /* Main Demo */ .main-demo header h2, .main-demo header h5, .main-demo header p { color: white; } .main-demo .sidebar-nav li.active a { color: #0082d6; } .main-demo .sidebar-nav li.active a:hover { color: #0266a7; } .main-demo .sidebar-nav a.menu-item { color: white; } .main-demo .sidebar-nav a:hover { color: #0266a7; } .main-demo .menu-footer h6 { color: white; } .main-demo #sidebar-wrapper { background: url("../images/sidebar-nav-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .main-demo .menu-footer { background: transparent; } .main-demo header { background: url("../images/header-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .main-demo.icon-nav .sidebar-nav a.menu-item { color: white; padding: 14px 10px; } /* End Main Demo */ /* Side Navigation */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 360px; } #sidebar-wrapper { z-index: 999; position: fixed; left: 360px; width: 0; height: 100%; margin-left: -360px; overflow-y: auto; background: #f7f7f7; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 360px; } #page-content-wrapper { width: 100%; position: absolute; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -360px; } .sidebar-nav { position: absolute; top: 0; width: 100%; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-align: center; } .sidebar-nav li.active a { color: #0082d6; } .sidebar-nav li.active a:hover { color: #0266a7; } .sidebar-nav a.menu-item { display: block; text-decoration: none; color: #666666; font-size: 15px; font-weight: 400; padding: 10px; } .sidebar-nav a:hover { text-decoration: none; color: #0266a7; } .sidebar-nav > .sidebar-brand { color: #0082d6; font-size: 30px; font-weight: bold; margin: 10px auto; padding: 60px 0; max-width: 150px; } .sidebar-nav > .sidebar-brand a { color: #0082d6; } .sidebar-nav > .sidebar-brand a:hover { color: #0266a7; background: none; } .sidebar-nav > .sidebar-brand img { border-radius: 100%; } #menu-toggle { display: none; font-size: 35px; z-index: 9999; } .menu-footer { width: 360px; position: fixed; bottom: 0; margin-top: 30px; margin-bottom: 15px; text-align: center; background: #f7f7f7; } .menu-footer h6 { font-size: 14px; } .menu-footer i { padding-right: 10px; } .menu-footer a { padding: 0 5px; font-size: 10px; font-weight: 700; } .menu-footer p { color: #666666; font-size: 14px; margin: 10px 0; } /* End Side Navigation */ /* Icon Navigation */ .icon-nav #wrapper.toggled { padding-left: 50px; } .icon-nav #sidebar-wrapper { z-index: 999; position: fixed; left: 50px; width: 0; height: 100%; margin-left: -50px; overflow-y: auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .icon-nav #wrapper.toggled #sidebar-wrapper { width: 50px; } .icon-nav #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -50px; } .icon-nav .sidebar-nav > .sidebar-brand { max-width: 30px; } .icon-nav .sidebar-nav li.active a { color: white; background-color: #0082d6; } .icon-nav .sidebar-nav li.active a:hover { color: white; background: #0266a7; } .icon-nav .sidebar-nav a.menu-item { color: #666666; padding: 14px 10px; } .icon-nav .sidebar-nav a.menu-item:hover { color: white; background: #0266a7; } .icon-nav .menu-footer { width: 50px; } .icon-nav .menu-footer img { width: auto; max-height: 11px; height: auto; opacity: 1; } .icon-nav .menu-footer img:hover { opacity: 0.8; } .icon-nav .menu-footer i { padding-right: 0; } /* End Icon Navigation */ /* Top Navigation */ .top-nav .footer-info { padding: 25px 30px; } .top-nav #home { margin-top: 50px; } .top-nav .navbar-default .navbar-nav > .active > a, .top-nav .navbar-default .navbar-nav > .active > a:focus, .top-nav .navbar-default .navbar-nav > .active > a:hover { color: #0082d6; background-color: transparent; } .top-nav .navbar-default .navbar-nav > .active > a:hover { color: #0266a7; } .top-nav .navbar-nav > li.active > a { color: #0266a7; } .top-nav .navbar-nav > li > a { color: #666666; font-size: 14px; } .top-nav .navbar-default .navbar-nav > .open > a, .top-nav .navbar-default .navbar-nav > .open > a:focus, .top-nav .navbar-default .navbar-nav > .open > a:hover { color: #666666; background-color: transparent; } .top-nav .dropdown-menu > li > a { color: #0082d6; font-size: 12px; padding: 10px; text-align: center; } .top-nav .dropdown-menu > li > a:hover { color: #0266a7; background-color: transparent; } .top-nav .navbar-nav > li > a:hover { color: #0266a7; } .top-nav .dropdown i { padding-right: 10px; } .top-nav .navbar-nav > li > .dropdown-menu { margin-top: 1px; } .top-nav .navbar-toggle { border-color: transparent; } .top-nav .navbar-toggle:hover { background: transparent; } .top-nav .navbar-toggle .icon-bar { background: #0082d6 !important; } .top-nav .navbar-toggle:focus { background-color: transparent !important; } .top-nav header img { border-radius: 50%; max-width: 460px; margin: 0 auto; margin-bottom: 50px; } /* End Top Navigation */ /* Header */ header { padding: 70px; background-color: #ebebeb; } .header-content h2 { font-size: 50px; } /* End Header */ section { padding: 5px 5px; } /* About */ .block i { color: #0082d6; font-size: 22px; } .feature-left .feature-icon { position: absolute; float: left; left: 15px; } .feature-left .feature { text-align: left; padding-left: 35px; } .feature h5 { padding-top: 3px; } .fact-icon { color: #0082d6; font-size: 26px; display: block; margin-top: 0; margin-bottom: 20px; } .award { margin-bottom: 30px; } .timer { color: #111111; font-size: 38px; line-height: 1.2; margin-top: 0; margin-bottom: 20px; } .fact-title { color: #666666; font-size: 16px; margin: 0 0 30px 0; } .progress { height: 7px; margin-bottom: 20px; overflow: hidden; background-color: #ebebeb; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .progress-bar { font-size: 12px; line-height: 20px; color: #666666; background-color: #0082d6; -webkit-box-shadow: none; box-shadow: none; } .progress-title { margin-bottom: 20px; } .progress-bar-default { background-color: #333333; } .progress-bar-primary { background-color: #0082d6; } .progress-bar-success { background-color: #26ae46; } .progress-bar-info { background-color: #0072bc; } .progress-bar-warning { background-color: #e98b1c; } .progress-bar-danger { background-color: #e80606; } .progress-label .sr-only { position: relative; } /* Timeline */ #education .container { padding-left: 30px; padding-right: 30px; margin-left: 60px; } #experience .container { padding-left: 30px; padding-right: 30px; margin-left: 60px; } #group .container { padding-left: 30px; padding-right: 30px; margin-left: 60px; } #activities .container { padding-left: 30px; padding-right: 30px; margin-left: 60px; } #awards .container { padding-left: 30px; padding-right: 30px; margin-left: 60px; } #news .container { margin-left: 60px; } #about .container { margin-left: 60px; } #contact .container { margin-left: 60px; } #publications .container { margin-left: 30px; padding-left: 30px; padding-right: 30px; } #otherprojects .container { margin-left: 30px; padding-left: 30px; padding-right: 30px; } hr, .border-color { border-color: #ebebeb; } .timeline { border-left-width: 5px; border-left-style: solid; padding-left: 25px; position: relative; } .timeline-item { position: relative; } .off-timeline-point { box-shadow: 0 0 0 7px #fefefe; } .point-color { background: #0082d6; } .timeline-point { height: 12px; width: 12px; position: absolute; left: -33px; top: 3px; border-radius: 50%; } .timeline-item { margin-bottom: 30px; } .timeline-date { color: #aaaaaa; font-size: 12px; margin-bottom: 5px; } .timeline-com { margin-bottom: 10px; } .timeline-role { color: #666666; margin-bottom: 10px; } .timeline-location { color: #aaaaaa; font-size: 12px; margin-bottom: 10px; } /* End Timeline */ /* Portfolio */ .portfolio-filter a { font-size: 14px; } .portfolio-filter a.active { color: #0266a7; } #portfolio ul.portfolio { margin-bottom: 0 !important; } .hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0; background-color: rgba(0, 130, 214, 0.8); -webkit-transition: all .2s ease-in-out; transition: all 0.2s ease-in-out; } .hovereffect img { display: block; position: relative; -webkit-transition: all .5s linear; transition: all .2s linear; } .right-img { float: right; width: 380px; height: auto; margin-left: 30px; margin-bottom: 30px; } .hovereffect-title h6, .hovereffect-title h5 { color: white; background: transparent; text-align: center; position: absolute; top: 40%; width: 100%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; padding: 10px; } .hovereffect-title h5 { color: white; background: transparent; text-align: center; position: absolute; top: 43%; width: 100%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; padding: 10px; } .hovereffect-title h4 { color: white; background: transparent; text-align: center; position: absolute; top: 44%; width: 100%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; padding: 10px; } .hovereffect:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .hovereffect:hover .overlay { opacity: 1; filter: alpha(opacity=100); } .hovereffect:hover h6, .hovereffect:hover a.info { opacity: 1; filter: alpha(opacity=100); -ms-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0); } .hovereffect:hover a.info { -webkit-transition-delay: .2s; transition-delay: .2s; } #portfolio .portfolio.block { position: relative; top: 15px; z-index: -1; } #portfolio .portfolio.block h5 { margin-bottom: 10px; } #portfolio .project { padding-top: 15px; padding-bottom: 15px; } #portfolio .project-description { font-size: 14px; } /* End Portfolio */ /* Blog */ .block img { margin-top: 0; margin-bottom: 20px; } .carousel-post { padding: 0 15px; } #journal .owl-theme .owl-controls { margin-top: 20px; } .owl-theme .owl-controls .owl-page span { width: 12px !important; height: 12px !important; margin: 5px !important; background: #0082d6 !important; } /* End Blog */ /* Contact Form */ .form-control { color: #666666; background: #f7f7f7; font-weight: 400; letter-spacing: 0.5px; border: 1px solid #ebebeb; border-radius: 0; margin-bottom: 30px; padding: 10px 20px; min-height: 50px; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-group input { font: normal normal normal 14px/1 FontAwesome, "Open Sans", sans-serif; } .input-group input { font: normal normal normal 14px/1 FontAwesome, "Open Sans", sans-serif; } #contactForm .form-control { color: #555555; background: #f7f7f7; font-weight: 400; letter-spacing: 0.5px; border: 1px solid #9b9b9b; border-radius: 0; margin-bottom: 30px; padding: 10px 20px; min-height: 50px; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #contactForm textarea { max-width: 100%; min-height: 130px !important; max-height: 211px; margin-bottom: 30px; } ::-webkit-input-placeholder { color: #cccccc !important; } :-moz-placeholder { color: #cccccc !important; } ::-moz-placeholder { color: #cccccc !important; } :-ms-input-placeholder { color: #cccccc !important; } .has-error .form-control { color: #e80606 !important; border: 1px solid #e80606 !important; } .help-block.with-errors li { color: #e80606; font-size: 13px; margin-top: -30px; margin-bottom: 0; } #msgSubmit.h3 { font-size: 14px; margin-top: 5px; } #contact-form-1 .form-group { margin-bottom: 0; } #contact-form-1 #contactForm { width: 100%; margin-left: auto; margin-right: auto; } #contact-form-1 .btn-form-submit { width: 100%; border-radius: 0; padding: 14px 24px; } /* End Contact Form */ /* Pages */ .single .meta img { width: auto; max-height: 20px; display: inline-block; border-radius: 50%; margin: 0 3px; } .share a { margin-bottom: 5px; display: inline-block; } /* End Pages */ /* Footer */ footer { background: #f7f7f7; } .footer-info { padding: 25px 0; } footer p { font-size: 14px; font-weight: 400; margin-bottom: 0; color: #666666; } footer .social a { font-size: 14px; margin-left: 10px; } footer .container { padding-left: 45px; padding-right: 45px; } /* End Footer */ /* Scroll to Top */ .scroll-to-top { background: #0082d6; color: white; width: 30px; height: 30px; bottom: 20px; right: 20px; line-height: 25px; border: 2px solid #0082d6; border-radius: 50%; position: fixed; text-align: center; font-size: 18px; z-index: 99; } .scroll-to-top.is-hidden { opacity: 0; -webkit-transform: translate(0, -5px); -webkit-transition: -webkit-transform 0.2s, background 0.2s, color 0.2s, opacity 0 0.2s; } .scroll-to-top.is-visible { opacity: 1; -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform .2s,background .2s,color .2s; } .scroll-to-top:hover { background: #0266a7; color: white; border: 2px solid #0266a7; } .scroll-to-top:focus { background: #0082d6; color: white; border: 2px solid #0082d6; } /* End Scroll to Top */ @media only screen and (max-width: 980px) { .footer-info { text-align: center; line-height: 1.8; } .footer-info .pull-right { float: none !important; display: block; } } @media only screen and (min-width: 992px) { .container { width: 100%; } } @media only screen and (min-width: 768px) { .container { width: 100%; } .top-nav .container { padding-right: 0; padding-left: 0; } .top-nav .navbar-nav { float: none; margin: 0 auto !important; } .top-nav .navbar-nav > li { float: none; display: inline-block; } .navbar-default .navbar-collapse { text-align: center; } #wrapper { padding-left: 360px; } .icon-nav #wrapper { padding-left: 50px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 360px; } .icon-nav #sidebar-wrapper { width: 50px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 0; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } header { padding: 150px 100px; } } @media only screen and (max-width: 767px) { .header-content h2 { font-size: 30px; } .top-nav header img { max-width: 460px; } .top-nav .container { padding-right: 0; padding-left: 0; } .top-nav .navbar-nav > li > a { text-align: center; } .top-nav .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #0082d6; } .top-nav .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #0266a7; } #menu-toggle { display: block; position: absolute; margin-left: 15px; margin-top: 15px; padding: 5px; } #wrapper.toggled { padding-left: 250px; } .icon-nav #wrapper.toggled { padding-left: 50px; } #wrapper.toggled #page-content-wrapper { margin-right: -250px; } .icon-nav #wrapper.toggled #page-content-wrapper { margin-right: -50px; } #wrapper.toggled #sidebar-wrapper { width: 250px; } .icon-nav #wrapper.toggled #sidebar-wrapper { width: 50px; } #sidebar-wrapper { left: 250px; margin-left: -250px; } .icon-nav #sidebar-wrapper { left: 50px; margin-left: -50px; } .menu-footer { width: 250px; position: relative; margin-top: 60px; } .icon-nav .menu-footer { width: 50px; } } @media only screen and (max-width: 480px) { #portfolio .col-xs-6 { width: 100%; } }