@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Roboto:300,400|Athiti:300,400|Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Secular+One|Assistant);
@import url(//fonts.googleapis.com/earlyaccess/opensanshebrew.css);
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%; }
#about, #services, #resume, #counter, #portfolio, #testimonials, #blogs, #contact {
padding: 65px 0 85px 0; }
h1, h2, h3, h4, h5, h6, p {
font-family: 'Open Sans Hebrew', sans-serif; }
body.modal-open {
margin-right: 0; }
.header {
background-image: url(https://res.cloudinary.com/dadaboom/image/upload/q_auto/v1521616799/Cover/zafrir-b_w_20_950KB_Flip.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0px;
background-attachment: fixed;
position: relative;
height: 100vh;
min-height: 750px;
overflow-y: hidden; }
.header .overlay {
background-color: rgba(0, 0, 0, 0.6);
height: 100%; }
.mynavbar {
background-color: transparent;
width: 100%;
padding: 30px 0;
z-index: 20;
top: 0;
position: fixed;
-webkit-transition: all .5s ease;
transition: all .5s ease; }
.nav-scroll .mynavbar {
background-color: #ffffff;
padding: 10px 0;
border-radius: 0;
box-shadow: 0 0 2px #e0e0e0;
-webkit-transition: all .5s ease;
transition: all .5s ease; }
.navbar-default {
border: none; }
.navbar-default .navbar-header a {
font-family: 'Open Sans Hebrew', sans-serif;
display: block;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 400;
font-size: 20px;
text-decoration: none; }
.navbar-default .navbar-header a:hover, .navbar-default .navbar-header a:focus {
color: #ffffff; }
.navbar-default .navbar-header a span {
color: #d6b161;
font-weight: 700; }
.navbar-default .nav-list li a {
font-family: 'Open Sans Hebrew', sans-serif;
color: #ffffff;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5pt;
text-align: right; }
.navbar-default .nav-list li a:hover, .navbar-default .nav-list li a:focus {
color: #ffffff;
text-decoration: none; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #d6b161;
background-color: transparent; }
.nav-scroll .mynavbar a, .nav-scroll .mynavbar a:hover, .nav-scroll .mynavbar a:focus {
color: #222222; }
.nav-scroll .mynavbar .nav-list li a {
font-family: 'Open Sans Hebrew', sans-serif;
color: #222222;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5pt; }
.nav-scroll .mynavbar .nav-list li a:hover {
color: #222222;
transition: 700ms ease; }
.nav-scroll .mynavbar .nav-list li.active a {
color: #d6b161;
-webkit-transition: all .5s ease;
transition: all .5s ease; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #d6b161;
background-color: transparent; }
.navbar-default .nav-list li a:focus {
transition: 700ms ease;
text-decoration: none;
background-color: transparent; }
.navbar-default .navbar-toggle {
border: none; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: transparent;
border: none; }
.navbar-default .navbar-toggle .icon-bar {
background-color: #d6b161; }
.welcome-area {
padding: 350px 0 0; }
.welcome-area h2 {
color: #ffffff;
font-size: 58px;
margin-bottom: 25px;
margin-top: 15px;
letter-spacing: 2px;
font-family: 'Secular One', sans-serif; }
.welcome-area span {
color: #ffffff;
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif; }
.welcome-area .social ul {
padding: 0;
margin: 0; }
.welcome-area .social ul li {
display: inline-block; }
.welcome-area .social ul li a {
font-size: 13px;
padding: 0 10px;
display: block; }
.welcome-area .social ul li a i {
color: #ffffff; }
.welcome-area .welcome-scroll {
margin-top: 185px; }
.welcome-area .welcome-scroll .arrow a {
color: #d6b161;
font-size: 10px;
text-decoration: none; }
.welcome-area .welcome-scroll .bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite; }
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px); } }
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px); } }
.typed::after {
content: '|';
display: inline;
color: #d6b161;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite; }
.typed-cursor {
opacity: 0;
display: none; }
.typed-container {
direction: rtl; }
@keyframes blink {
0% {
opacity: 1; }
50% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes blink {
0% {
opacity: 1; }
50% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes blink {
0% {
opacity: 1; }
50% {
opacity: 0; }
100% {
opacity: 1; } }
.services-section {
background-color: #f7f7f7; }
.services-section .section-title {
padding: 0 0 50px 0; }
.services-section .section-title h1 {
color: #222222;
font-size: 25px;
font-weight: 700;
border-right: 5px solid #d6b161;
padding-right: 10px;
letter-spacing: 0.5pt;
text-align: right;
direction: rtl; }
.services-section .thumbnail {
border-radius: 0;
border: 1px solid #e0e0e0;
padding: 40px 30px;
margin-bottom: 30px;
background-color: transparent;
text-align: right;
direction: rtl;
min-height: 420px; }
.services-section .thumbnail:hover {
border: 1px solid #d6b161;
background-color: #ffffff;
transition: 600ms ease; }
.services-section .thumbnail h3 {
color: #222222;
padding-top: 10px;
font-size: 18px;
text-align: right;
direction: rtl; }
.services-section .thumbnail p {
color: #777777;
font-size: 16px;
line-height: 25px; }
.services-section .thumbnail svg {
font-size: 40px; }
.services-section .services-box .services-box-open-icon {
z-index: 2;
position: absolute;
top: 14%;
transform: translateY(-50%);
margin-left: 36px;
display: none;
cursor: pointer; }
.services-section .services-box:hover .services-box-open {
border: 1px solid #d6b161;
background-color: #ffffff;
transition: 600ms ease; }
.services-section .services-box:hover .services-box-open-icon {
display: block; }
.testimonials-section {
background: #f7f7f7; }
.testimonials-section .item p {
font-size: 18px;
line-height: 30px;
text-align: inherit;
letter-spacing: 0.5px;
font-style: italic;
direction: rtl; }
.testimonials-section .carousel-inner .item h5 {
font-weight: 700;
letter-spacing: 1px; }
.testimonials-section .testimonials-row {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row; }
/* carousel */
#quote-carousel {
padding-bottom: 30px;
text-align: center;
min-height: 335px; }
#quote-carousel .carousel-indicators {
left: 0%;
top: auto;
bottom: -10px;
width: 100%;
margin-left: 0;
margin-bottom: 0; }
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
height: 15px;
width: 15px; }
#quote-carousel .carousel-indicators .active {
background: #333333;
height: 15px;
width: 15px;
margin-bottom: 1px; }
#quote-carousel blockquote {
border: none;
padding: 20px 0 0 0; }
.about-section {
background-color: #ffffff; }
.about-section .section-title {
padding: 0 0 50px 0; }
.about-section .section-title h1 {
color: #222222;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
border-right: 5px solid #d6b161;
padding-right: 10px;
letter-spacing: 0.5pt;
text-align: right;
direction: rtl; }
.about-section .section-picture {
position: relative; }
.about-section .section-picture img {
display: block;
margin: 0 auto;
padding: 0;
height: auto;
vertical-align: top;
max-width: 100%;
backface-visibility: hidden; }
.about-section .section-content {
padding: 0 2px; }
.about-section .section-content .tab-content h3 {
color: #d6b161;
font-weight: 400;
margin-top: 0; }
.about-section .section-content .tab-content h3 span {
color: #5f5f5f;
font-weight: 300; }
.about-section .section-content .tab-content p {
color: #666666;
font-size: 16px;
line-height: 25px;
letter-spacing: 0.1pt;
direction: rtl; }
.portfolio-section {
background: #ffffff; }
.portfolio-section .section-title {
padding: 0 0 50px 0; }
.portfolio-section .section-title h1 {
color: #222222;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
border-right: 5px solid #d6b161;
padding-right: 10px;
letter-spacing: 0.5pt;
text-align: right;
direction: rtl; }
.portfolio-section .portfolio-b {
padding: 10px 10px;
overflow: hidden;
height: 255px; }
.portfolio-section .portfolio-box {
position: relative;
overflow: hidden;
display: block;
max-width: 650px;
margin: 0 auto;
height: 246px; }
.portfolio-section .portfolio-box * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease; }
.portfolio-section .portfolio-box img {
opacity: 1;
width: 100%;
display: block; }
.portfolio-section .portfolio-box:hover img {
opacity: 0.6;
-webkit-transform: scale(1.1);
transform: scale(1.1); }
.blogs-section {
background: #ffffff; }
.blogs-section .section-title {
padding: 0 0 50px 0; }
.blogs-section .section-title h1 {
color: #222222;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
border-right: 5px solid #d6b161;
padding-right: 10px;
letter-spacing: 0.5pt;
text-align: right;
direction: rtl; }
.blogs-section .blog-item a {
text-decoration: none; }
.blogs-section .blog-item img {
border: 0;
max-width: 100%;
vertical-align: middle;
height: auto;
box-sizing: border-box; }
.blogs-section .blog-img {
position: relative;
overflow: hidden; }
.blogs-section .blog-content {
padding: 25px;
z-index: 1;
background: #fff;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
height: 194px; }
.blogs-section .blog-content-title {
margin-top: 0;
font-size: 22px;
text-align: right;
direction: rtl; }
.blogs-section .blog-content-title a {
font-weight: 400;
color: #222222;
font-size: 22px; }
.blogs-section .blog-content-desc {
margin-bottom: 15px;
text-align: right;
direction: rtl; }
.blogs-section .blog-content-desc p {
color: #666666;
font-size: 14px;
line-height: 25px;
margin-bottom: 0; }
.blogs-section .blog-content-footer {
text-align: right;
direction: rtl; }
.blogs-section .blog-content-footer a {
text-decoration: none; }
.blogs-section .blog-content-footer span {
font-family: 'Open Sans Hebrew', sans-serif;
font-size: inherit;
color: #222222;
padding-left: 6px;
letter-spacing: 0.5pt; }
.blogs-section .blog-content-footer svg {
color: #d6b161; }
.contact-section {
background-size: cover;
background: no-repeat fixed center;
position: relative; }
.contact-section .overlay {
background-color: rgba(0, 0, 0, 0.9);
height: 100%;
width: 100%; }
.contact-section .section-title {
padding: 0 0 50px 0; }
.contact-section .section-title h1 {
color: #ffffff;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
border-right: 5px solid #d6b161;
padding-right: 10px;
letter-spacing: 0.5pt;
text-align: right;
direction: rtl; }
.map {
width: 100%;
height: 150px;
margin-bottom: 30px; }
.contact-section .input-margin-top {
margin-top: 15px; }
.contact-section form .textarea {
font-family: 'Montserrat', sans-serif;
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
height: 180px;
margin-bottom: 15px;
padding-top: 15px;
border-radius: 0;
text-align: right;
direction: rtl; }
.contact-section form .form-input {
font-family: 'Montserrat', sans-serif;
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
height: 50px;
border-radius: 0;
text-align: right;
direction: rtl; }
.contact-section .form-control::-webkit-input-placeholder, .contact-section .form-control:-moz-placeholder, .contact-section .form-control::-moz-placeholder, .contact-section .form-control:-ms-input-placeholder, .contact-section .form-control::-ms-input-placeholder {
color: #ffffff; }
.contact-section form .button {
background-color: transparent;
color: #d6b161;
font-family: 'Open Sans Hebrew', sans-serif;
font-size: 12px;
border: 1px solid #ffffff;
text-transform: uppercase;
letter-spacing: 1pt;
padding: 16px 0;
border-radius: 0; }
.contact-section .success {
padding: 1em;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #468847;
background-color: #dff0d8;
border: 1px solid #468847;
transition: 500ms ease;
text-align: right; }
.contact-section .error {
padding: 1em;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #b94a48;
background-color: #f2dede;
border: 1px solid #b94a48;
transition: 500ms ease;
text-align: right; }
/**
*
* -------------------------------------------------
*
* Template : Yala - One Page Personal Portfolio Template
* Author : Hamza Mensouri
* Version : 1.0
*
* --------------------------------------------------
*
**/
/* Extra Small devices (Phones) */
@media (max-width: 767px) {
.navbar-default .navbar-collapse {
background-color: #ffffff; }
.navbar-default .nav-list li a {
color: #222222; }
.navbar-default .nav-list li a:hover, .navbar-default .nav-list li a:focus {
color: #222222; }
.welcome-area h2 {
color: #fff;
font-size: 36px;
text-transform: uppercase;
font-weight: 700; }
.welcome-area span {
color: #fff;
font-size: 14px; }
.about-section .section-content {
margin-top: 15px; }
.counter-section .projects #border-left1, #border-left2, #border-left3 {
border-left: none; }
.blogs-section .blog-content-title a {
font-weight: 400;
color: #222222;
font-size: 18px; }
.contact-section form .textarea {
margin-top: 15px; }
.footer-area .footer-text p {
color: #555;
font-weight: 500;
font-size: 13px; }
.footer-text {
text-align: center; }
/*-------------------- Wow animation disabled --------------------*/
.wow {
animation-name: none !important;
visibility: visible !important; } }
/* Small devices (Tablets) */
@media (min-width: 768px) and (max-width: 992px) {
/*-------------------- Intro --------------------*/
.welcome-area h2 {
color: #fff;
font-weight: 700;
font-size: 44px;
text-transform: uppercase; }
.welcome-area span {
color: #fff;
font-size: 17px; }
.about-section .section-content {
margin-top: 15px; }
.counter-section .projects #border-left1, #border-left2, #border-left3 {
border-left: none; }
.blogs-section .blog-content-title a {
font-weight: 400;
color: #222222;
font-size: 18px; }
.footer-area .footer-text p {
color: #555;
text-align: center;
font-weight: 500;
font-size: 13px; }
/*-------------------- Wow animation disabled --------------------*/
.wow {
animation-name: none !important;
visibility: visible !important; } }
/* Medium devices (Desktops) */
@media (min-width: 992px) and (max-width: 1200px) {
.welcome-area h2 {
color: #fff;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px; }
.about-section .section-title h1 {
font-weight: 700;
text-transform: uppercase; } }