/*---------------------------------------------------------------------------------------
* Template Name      :  RectCV - Personal Bootstrap 4 HTML Template                      |
* Author             :  Narek Sukiasyan                                                  |
* Version            :  1.1.0                                                            |
* Created            :  April 2020                                                       |
* Updated            :  February 2021                                                    |
* File Description   :  Light theme css file of the template                             |
*----------------------------------------------------------------------------------------
*/
/******************
Table of Content

    1. SETTINGS
        1.1 Preloader
        1.2 Form Control
    2. HELPER
        2.1 Social Icons Design
        2.2 Button Toggler
        2.3 OWL Slider
    3. HEADER
        3.1 General Header Style
        3.2 Horizontal Header Style
    4. HOME SECTION
        4.1 Parallax Element Colors
        4.2 Scroll Down Button
    5. ABOUT SECTION
    6. SERVICE SECTION
    7. PORTFOLIO SECTION
    8. RESUME SECTION
    9. TESTIMONIAL SECTION
    10. BLOG SECTION
    11. CONTACT SECTION
    12. FOOTER SECTION
    13. FACTS SECTION
    14. PROJECT SECTION
    15. VIDEO SECTION

******************/
/*=================
    1. SETTINGS
==================*/
body {
  background-color: #FFFFFF;
}

h2 {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  color: #333333;
}

a {
  color: #333333;
}

p {
  color: #656565;
}

article p, article ul, article ol, article blockquote {
  color: #656565;
}

hr {
  border-top: 1px solid #FCFCFC;
}

/* 1.1 Preloader */
#preloader {
  background-color: #FFFFFF;
}

blockquote footer {
  color: #333333;
}

/* 1.2 Form Control */
.form-control:disabled,
.form-control.disabled,
.form-control[readonly] {
  opacity: .5;
  color: #c2c2c2;
  background-color: initial;
}

/*=================
    2. HELPER
==================*/
section .section-title h2.rect_heading, div.section .section-title h2.rect_heading {
  border: 1px solid #a2a2a2;
}

section .section-title h2.text_background span.heading_background, div.section .section-title h2.text_background span.heading_background {
  color: transparent;
  -webkit-text-stroke: 1px rgba(51, 51, 51, 0.1);
}

section .section-title p, div.section .section-title p {
  color: #333333;
  font-weight: 300;
}

section.backgound-section, div.section.backgound-section {
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.7);
          box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.7);
  -webkit-appearance: none;
}

section.preload, div.section.preload {
  background-attachment: scroll;
}

main section .form-group label {
  color: #333333;
  opacity: .6;
}

main section .form-group.form-focused label {
  background-color: #FFFFFF;
  opacity: 1;
}

main section.background_gpattern {
  background-image: url("../images/background_pattern_light.svg");
}

main section:not(.backgound-section):not(.home):nth-child(odd) {
  background-color: #FCFCFC;
}

main section:not(.backgound-section):not(.home):nth-child(odd) .form-group.form-focused label {
  background-color: #FCFCFC;
}

.box-shadow {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.01);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.01);
}

/* 2.1 Social Icons Design */
.social-icons li a {
  border: 1px solid #a2a2a2;
}

.social-icons li a:hover {
  background: #333333;
  color: #FFFFFF;
}

/* 2.2 Button Toggler */
.button-toggler {
  background: transparent;
}

.button-toggler span {
  background-color: #333333;
}

a.hoveroff:hover {
  text-decoration: none;
  color: #333333;
}

/* 2.3 OWL Slider */
.owl-nav button span {
  font-weight: 700;
}

.toTop {
  background-color: #f8f8f8;
  color: #333333;
  font-size: 1.2em;
}

/*=================
    3. HEADER
==================*/
/* 3.1 General Header Style */
header .site-logo a {
  font-weight: 500;
}

/* 3.2 Horizontal Header Style */
header.horizontal_header .header-ins {
  background-color: #FFFFFF;
  padding: 17px 0px;
}

header.horizontal_header .header-ins.transparent_header {
  background-color: transparent;
}

header.horizontal_header .header-ins:not(.transparent_header).shadow-header {
  -webkit-box-shadow: 0px 1px 8px 3px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 1px 8px 3px rgba(0, 0, 0, 0.06);
}

header.horizontal_header ul li a {
  font-weight: 500;
}

header.horizontal_header ul li a:after {
  color: #fff;
}

/*====================
    4. HOME SECTION
=====================*/
section.home {
  -webkit-box-shadow: none;
          box-shadow: none;
  /* 4.1 Parallax Element Colors */
}

section.home h1 {
  border: 1px solid #333333;
}

section.home .background-parallax .element.red {
  -webkit-box-shadow: 0px 0px 190px 260px rgba(229, 65, 68, 0.1);
          box-shadow: 0px 0px 190px 260px rgba(229, 65, 68, 0.1);
}

section.home .background-parallax .element.blue {
  -webkit-box-shadow: 0px 0px 160px 200px rgba(26, 123, 183, 0.1);
          box-shadow: 0px 0px 160px 200px rgba(26, 123, 183, 0.1);
}

section.home .background-parallax .element.green {
  -webkit-box-shadow: 0px 0px 145px 220px rgba(28, 186, 90, 0.1);
          box-shadow: 0px 0px 145px 220px rgba(28, 186, 90, 0.1);
}

section.home .background-parallax .element.orange {
  -webkit-box-shadow: 0px 0px 165px 210px rgba(240, 127, 129, 0.1);
          box-shadow: 0px 0px 165px 210px rgba(240, 127, 129, 0.1);
}

h1 {
  font-weight: 600;
  color: #333333;
}

span.welcome_text {
  color: #333333;
  font-weight: 400;
}

/* 4.2 Scroll Down Button */
.scroll-down .scroll-title {
  font-weight: 500;
  font-size: 13px;
}

.scroll-down .scroll-mouse {
  border: 2px solid #333333;
}

.scroll-down .scroll-mouse .whell {
  background-color: #333333;
}

/*====================
    5. ABOUT SECTION
=====================*/
section.about h3 {
  font-weight: 500;
}

section.about .about-info span {
  color: #656565;
}

section.about .about-info span.desc {
  color: #333333;
}

/*=======================
    6. SERVICE SECTION
========================*/
.service-single {
  background-color: #FFFFFF;
  border: 1px solid #dddddd;
}

.service-single h3 {
  color: #333333;
}

/*=======================
    7. PORTFOLIO SECTION
========================*/
.portfolio-item .portfolio-single:hover {
  color: #333333;
}

.portfolio-item .item-box .item-details {
  background-color: rgba(0, 0, 0, 0.65);
}

.portfolio-item .item-box .item-details .item-detail-rect {
  border: 3px solid #fff;
}

.portfolio-item .item-box .item-details .item-detail-rect.r1 {
  top: 3px;
  left: 3px;
}

.portfolio-item .item-box .item-details .item-detail-rect.r2 {
  bottom: 3px;
  right: 3px;
}

.portfolio-item .item-box .item-details .item-details-ins {
  color: #fff;
}

.portfolio-item .item-box .item-details .item-details-ins h3 {
  color: #fff;
  font-size: 1.5rem;
}

.portfolio-item .item-box .item-details .item-details-ins p {
  color: #fff;
}

/*=======================
    8. RESUME SECTION
========================*/
.resume-title {
  font-weight: 500;
  color: #333333;
}

.resume-list li:before {
  border: 2px solid #a2a2a2;
}

.resume-list li:after {
  background-color: #a2a2a2;
  width: 2px;
  height: calc(100% - 43px);
  border-radius: 3px;
  top: 33px;
  left: 10px;
}

.resume-list h3 {
  font-weight: 500;
}

.resume-list h4 {
  font-weight: 500;
}

.resume-list span.time {
  color: #333333;
  font-weight: 300;
}

.skill .progress {
  background-color: #FCFCFC;
}

.skill .skill-icon {
  color: #333333;
}

.skill .progresss-info span {
  font-weight: 400;
  color: #333333;
}

.skill .progresss-info span.progress-percent {
  font-weight: 500;
}

/*===========================
    9. TESTIMONIAL SECTION
============================*/
.testimonial-box {
  border: 2px solid #FFFFFF;
  line-height: 23.5px;
  background-color: #FFFFFF;
}

.testimonial-box .author_picture {
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

/*=======================
    10. BLOG SECTION
========================*/
.news-item {
  background-color: #FFFFFF;
  border: 1px solid #dddddd;
}

.news-item .news-content .news-title .blog-permalink h3 {
  font-weight: 600;
  color: #333333;
}

.news-item .news-content .news-meta-single {
  font-weight: 300;
  color: #333333;
}

.news-item .news-content .news-excerpt p {
  color: #333333;
}

/*=======================
    11. CONTACT SECTION
========================*/
.contact-details h5 {
  font-weight: 500;
  color: #333333;
}

.contact-details p {
  color: #333333;
}

.form-control {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 1px solid #a2a2a2;
  border-radius: 0px;
  background-color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding: .9em 1em;
  color: #333333;
}

.form-control:focus {
  background-color: transparent;
  border: 1px solid #a2a2a2;
  color: #333333;
}

.form-control::-webkit-input-placeholder {
  color: #AAAAAA;
}

.form-control:-ms-input-placeholder {
  color: #AAAAAA;
}

.form-control::-ms-input-placeholder {
  color: #AAAAAA;
}

.form-control::placeholder {
  color: #AAAAAA;
}

/*=======================
    12. FOOTER SECTION
========================*/
footer.horizontal-footer {
  background-color: #FFFFFF;
}

footer.horizontal-footer.shadow_footer {
  -webkit-box-shadow: 0px -1px 8px 3px rgba(0, 0, 0, 0.06);
  box-shadow: 0px -1px 8px 3px rgba(0, 0, 0, 0.06);
}

footer.horizontal-footer .copyright-text {
  font-size: 14px;
  font-weight: 300;
}

/*==========================
    13. FACTS SECTION
===========================*/
section.facts .fact-single, div.section.facts .fact-single {
  color: #333333;
}

/*==========================
    14. PROJECT SECTION
===========================*/
section.project .box, div.section.project .box {
  background-color: #FFFFFF;
}

/*==========================
    15. VIDEO SECTION
===========================*/
section.about_movie {
  background-size: cover;
  background-position: center;
}

.btn-video-play {
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  background-color: #FFFFFF;
}

.btn-video-play:hover {
  -webkit-box-shadow: 0px 0px 0px 8px rgba(250, 250, 250, 0.2);
          box-shadow: 0px 0px 0px 8px rgba(250, 250, 250, 0.2);
}
/*# sourceMappingURL=light.theme.css.map */