Team:BGU Israel/css/creative.css

body, html {

 width: 100%;
 height: 100%;

}

body {

 font-family: 'Segoe UI Light';

}

hr {

 max-width: 60px;
 border-width: 1px;
 border-color: #0186ac;

}

hr.light {

 border-color: #fff;

} hr.dark {

   border-color:#262626

}

a {

 color: #0186ac;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;

}

a:hover {

 color: #0186ac;
   text-decoration: none;

}

p{

   font-size:1.2rem;

} ol {

  font-size:1.2rem; 

} .justified {

   text-align: justify;

} h1, h2, h3, h4, h5, h6 {

 font-family: 'Segoe UI Light';
   

}

.bg-primary {

 background-color: #0186ac !important;

}

.bg-dark {

 background-color: #212529 !important;

}

.text-faded {

 color: rgba(255, 255, 255, 0.7);

} .text-white {

   color: rgba(255, 255, 255);

} section {

 padding: 8rem 0;

}

.section-heading {

 margin-top: 0;

}

-moz-selection {
 color: #fff;
 background: #212529;
 text-shadow: none;

}

selection {
 color: #fff;
 background: #212529;
 text-shadow: none;

}

img::selection {

 color: #fff;
 background: transparent;

}

img::-moz-selection {

 color: #fff;
 background: transparent;

}

  1. mainNav {
 border-bottom: 1px solid rgba(33, 37, 41, 0.1);
 background-color: #fff;
 font-family:  'Segoe UI', Calibri;
   padding-left:0;
 

}

  1. mainNav .navbar-brand {
 text-transform: uppercase;
 color: #0186ac;
 

}

  1. mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
 color: #0186ac;

}

  1. mainNav .navbar-nav > li.nav-item > a.nav-link,
  2. mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
 font-size: 1.rem;
 text-transform: uppercase;
 color: #212529 !important; 

font-weight:bold; }

  1. mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
  2. mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
 color: #0186ac;

}

  1. mainNav .navbar-nav > li.nav-item > a.nav-link.active,
  2. mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
 color: #0186ac !important;
 background-color: transparent;

}

  1. mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
  2. mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
 background-color: transparent;

}

@media (min-width: 992px) {

 #mainNav {
   border-color: transparent;
   background-color: transparent;
 }
 #mainNav .navbar-brand {
   color: #434343;
 }
 #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
   color: #fff;
 }
 #mainNav .navbar-nav > li.nav-item > a.nav-link {
   padding: 0.5rem 1rem;
 }
 #mainNav .navbar-nav > li.nav-item > a.nav-link,
 #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
   color: rgba(255, 255, 255, 0.7);
 }
 #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
 #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
   color: #fff;
 }
 #mainNav.navbar-shrink {
   border-bottom: 1px solid rgba(33, 37, 41, 0.1);
   background-color: #fff;
 }
 #mainNav.navbar-shrink .navbar-brand {
   color: #0186ac;
 }
 #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
   color: #0186ac;
 }
 #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
 #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
   color: #212529;
 }
 #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
 #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
   color: #0186ac;
 }

}

header.masthead {

 padding-top: 10rem;
 padding-bottom: calc(10rem - 56px);
 
 background-position: center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

header.masthead hr {

 margin-top: 30px;
 margin-bottom: 30px;

}

header.masthead h1 {

 font-size: 2rem;

}

header.masthead p {

 font-weight: 300;

}

@media (min-width: 768px) {

 header.masthead p {
   font-size: 1.15rem;
 }

}

@media (min-width: 992px) {

 header.masthead {
   height: 100vh;
   min-height: 650px;
   padding-top: 0;
   padding-bottom: 0;
 }
 header.masthead h1 {
   font-size: 3rem;
 }

}

@media (min-width: 1200px) {

 header.masthead h1 {
   font-size: 4rem;
 }

}

.service-box {

 max-width: 400px;

}

.portfolio-box {

 position: relative;
 display: block;
 max-width: 650px;
 margin: 0 auto;

}

.portfolio-box .portfolio-box-caption {

 position: absolute;
 bottom: 0;
 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
 opacity: 0;
 color: #fff;
 background: rgba(240, 95, 64, 0.9);
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;

}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {

 position: absolute;
 top: 50%;
 width: 100%;
 transform: translateY(-50%);
 text-align: center;

}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {

 padding: 0 15px;
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {

 font-size: 14px;
 font-weight: 600;
 text-transform: uppercase;

}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {

 font-size: 18px;

}

.portfolio-box:hover .portfolio-box-caption {

 opacity: 1;

}

.portfolio-box:focus {

 outline: none;

}

@media (min-width: 768px) {

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
   font-size: 16px;
 }
 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
   font-size: 22px;
 }

}

.text-primary {

 color: #0186ac !important;

}

.btn {

 font-weight: 700;
 text-transform: uppercase;
 border: none;
 border-radius: 300px;
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

}

.btn-xl {

 padding: 1rem 2rem;

}

.btn-primary {

 background-color: #0186ac;
 border-color: #0186ac;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {

 color: #fff;
 background-color: #ee4b28 !important;

}

.btn-primary:active, .btn-primary:focus {

 box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;

}

/*parallax*/ .parallax-window {

   min-height: 400px;
   background: transparent;

} @media (min-width: 768px) {

 #contact .container {
   width:60%;
   }

} .footer-nav .navbar-brand {

   padding-left:30px;

}