Line 12: | Line 12: | ||
<!-- https://work.smarchal.com/twbscolor/css/00274c0a436cecf0f1ffffff0 --> | <!-- https://work.smarchal.com/twbscolor/css/00274c0a436cecf0f1ffffff0 --> | ||
<style> | <style> | ||
+ | body { | ||
+ | font-family: 'Comfortaa'; | ||
+ | color: #00274c; | ||
+ | |||
+ | } | ||
+ | |||
+ | .navbar-default { | ||
+ | background-color: #00274c; | ||
+ | border-color: #0a436c; | ||
+ | } | ||
+ | |||
+ | .slide-prev { | ||
+ | position:absolute; | ||
+ | top:400px; | ||
+ | left:0; | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | .slide-next { | ||
+ | position:absolute; | ||
+ | top:400px; | ||
+ | right:0; | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | .carousel-inner > .item img { | ||
+ | min-height:100%; | ||
+ | min-width:1024px; | ||
+ | height:auto; | ||
+ | width:auto; | ||
+ | } | ||
+ | |||
+ | .carousel-item { | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .carousel-caption { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .navbar-default .navbar-brand { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-brand:hover, | ||
+ | .navbar-default .navbar-brand:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .navbar-default .navbar-text { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > li > a { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > li > a:hover, | ||
+ | .navbar-default .navbar-nav > li > a:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > .active > a, | ||
+ | .navbar-default .navbar-nav > .active > a:hover, | ||
+ | .navbar-default .navbar-nav > .active > a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | |||
+ | p > a { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | |||
+ | .active > a:hover { | ||
+ | |||
+ | } | ||
+ | |||
+ | .navbar-default .navbar-nav > .open > a, | ||
+ | .navbar-default .navbar-nav > .open > a:hover, | ||
+ | .navbar-default .navbar-nav > .open > a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle { | ||
+ | border-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle:hover, | ||
+ | .navbar-default .navbar-toggle:focus { | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle .icon-bar { | ||
+ | background-color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-collapse, | ||
+ | .navbar-default .navbar-form { | ||
+ | border-color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-link { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-link:hover { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > li > a { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > .active > a, | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, | ||
+ | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .navig_bar .navbar-right img { | ||
+ | height:10px; | ||
+ | } | ||
+ | .navig_bar { | ||
+ | font-size:16px; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | .navig_bar_left_button { | ||
+ | margin: 0 2px; | ||
+ | border-left: 1px solid #000; | ||
+ | border-right: 1px solid #000; | ||
+ | } | ||
+ | .navig_bar_button { | ||
+ | margin: 0 2px; | ||
+ | border-right: 1px solid #000; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | padding-bottom: 50px; | ||
+ | padding-top:0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #index_title { | ||
+ | font-family: 'Comfortaa'; | ||
+ | font-style: normal; | ||
+ | font-size: 300%; | ||
+ | text-align: center; | ||
+ | float: none; | ||
+ | color: #6792A0; | ||
+ | margin-top: 20px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | .Banner_img { | ||
+ | margin: auto; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | width: 50%; | ||
+ | padding: 0px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .HumanPractices-img { | ||
+ | width: 960px; | ||
+ | height: 460px; | ||
+ | } | ||
+ | |||
+ | .Header-img { | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: contain; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #headerImage { | ||
+ | width:100%; | ||
+ | height:400px; | ||
+ | min-height: 400px; | ||
+ | min-width:100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #headerImage h1 { | ||
+ | margin: 0; | ||
+ | color: white; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin-right: -50%; | ||
+ | transform: translate(-50%, -50%) | ||
+ | } | ||
+ | |||
+ | .a-over { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | .flip3D{ | ||
+ | width:315px; height:315px; margin:10px; float:center; margin: auto; | ||
+ | border-weight: 10px; | ||
+ | cursor: pointer; | ||
+ | |||
+ | } | ||
+ | .flip3D > .front{ | ||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | width:275px; height:275px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | float: center; | ||
+ | } | ||
+ | .flip3D > .back{ | ||
+ | padding-top:20px; | ||
+ | padding-bottom:20px; | ||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 700px ) rotateY( 180deg ); | ||
+ | transform: perspective( 700px ) rotateY( 180deg ); | ||
+ | width:275px; height:275px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | } | ||
+ | .flip3D:hover > .front{ | ||
+ | -webkit-transform: perspective( 700px ) rotateY( -180deg ); | ||
+ | transform: perspective( 700px ) rotateY( -180deg ); | ||
+ | } | ||
+ | .flip3D:hover > .back{ | ||
+ | -webkit-transform: perspective( 700px ) rotateY( 0deg ); | ||
+ | transform: perspective( 700px ) rotateY( 0deg ); | ||
+ | } | ||
+ | .vertical-center { | ||
+ | position: relative; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translateY(-50%); | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | img.board-img { | ||
+ | height: 220px; | ||
+ | width: 220px; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | h3.name-tag { | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 15px; | ||
+ | margin-top: 0px; | ||
+ | font-weight: bold; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | p.desc { | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 11px; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | p.teamText{ | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-weight: bold; | ||
+ | font-size: 12px; | ||
+ | margin-left: 10px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #doubleSpace { | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | ul.teamTextList{ | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 11px; | ||
+ | margin-top: 0px; | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | |||
+ | li { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | ul.Content { | ||
+ | width: 400px; | ||
+ | margin:0 auto; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | #h3Header { | ||
+ | color: grey; | ||
+ | } | ||
+ | |||
+ | #h1Header { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #h1MaizeHeader { | ||
+ | color: #ffc72C; | ||
+ | } | ||
+ | |||
+ | .Footer-Table { | ||
+ | border-collapse: separate; | ||
+ | border-spacing: 5px; | ||
+ | } | ||
+ | |||
+ | .overlay { | ||
+ | position:absolute; | ||
+ | z-index:12; | ||
+ | top:50%; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | text-align:center; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | |||
+ | /* Navbar positioning foo */ | ||
+ | .navbar-wrapper { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ | ||
+ | } | ||
+ | /* The navbar becomes detached from the top, so we round the corners */ | ||
+ | .navbar-wrapper .navbar { | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
+ | .navbar-wrapper { | ||
+ | background-color: #00274c; | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .container-footer { | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | background-color: #00274c; | ||
+ | } | ||
+ | |||
+ | .Banner_img { | ||
+ | margin: auto; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | width: 50%; | ||
+ | padding: 0px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .HumanPractices-img { | ||
+ | width: 960px; | ||
+ | height: 460px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #ProtoCat4Button { | ||
+ | background-color: #00274c; | ||
+ | border: none; | ||
+ | color: white; | ||
+ | padding: 8px 18px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | display: inline-block; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | |||
.flip3D_HP{ | .flip3D_HP{ | ||
width:200px; height:200px; margin:10px; float:center; margin: auto; | width:200px; height:200px; margin:10px; float:center; margin: auto; |
Revision as of 22:35, 21 September 2017