/*
Theme Name: JubelnJuig
Text Domain: JubelnJuig
Version: 1.0
Tested up to: 61.0
Requires at least: 1.0
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/
.mobile_menu,
.mob_trigger{
    display: none;
}

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 30px;
  height: 30px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
	  display: block;
	  position: absolute;
	  height: 4px;
	  width: 100%;
	  background: #113d42;
	  border-radius: 9px;
	  opacity: 1;
	  left: 0;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
}
.mob_trigger:hover #nav-icon1 span,
.mob_trigger:hover #nav-icon2 span,
.mob_trigger:hover #nav-icon3 span{
		background: #000;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}

#nav-icon3.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
	background: #fff;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
				background: #8c704f;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
				background: #8c704f;
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
	background: #fff;
}

.mob_trigger{
		display: none;
		position: fixed;
		z-index: 15;
		top: 26px;
		right: 20px;
}
.mobile_menu{
		position: fixed;
		text-align: center;
		display: none;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 11;
		padding: 100px 0px 0px 0px;
		background-color: #eeeeee;
}
.mobile_menu ul{
		list-style: none;
    text-transform: uppercase;
		margin: 0px;
		padding: 0px;
}
.mobile_menu ul li a{
  color: #000;
  text-decoration: none;
  font-size: 25px;
  margin: 0px 0px 10px 0px;
  display: block;
  font-family: "Google Sans", sans-serif;
}
.mont{
    font-family: "Montserrat", sans-serif;
}
.bg_beige{
    background-color: #f6f4ef;
}
.bg_green{
    background-color: #113d42;
    color: #fff;
}
.bg_white{
    background-color: #fff;
    color: #000;
}
.big_cta_block.bg_white h2,
.big_cta_block.bg_white p{
    color: #000;
    text-shadow: 0px 0px 0px rgb(0 0 0 / 50%);
}
.the_header {
    padding: 10px 0px;
    background-color: #fff;
    z-index: 5;
    min-height: 15px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    transition: 0.5s;
}
.the_header.scrolled{

    box-shadow: 0 7px 10px 0 rgb(0 0 0 / 25%);
    transition: 0.5s;
}
.head_tbl {
    width: 100%;
    display: table;
    color: #fff;
}
.head_tr {
    display: table-row;
}
.head_td {
    display: table-cell;
    vertical-align: middle;
}
.head_td.logo_side{
    width: 20%;
}
.top_logo {
    width: 100%;

}
.head_td.menu_side{
    width: 80%;
    text-align: right;
}
.head_td.menu_side ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.head_td.menu_side li {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    transition: 0.2s;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.head_td.menu_side li a {
    color: #000;
    transition: 0.2s;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 15px;
    padding: 30px 10px;
    margin: 0px 0px 0px 0px;
}

.head_td.menu_side li.current_page_item a{
    color: #113d42;
    font-weight: bold;
}


.the_header.scrolled .head_td.menu_side li a{
    text-shadow: 0px 0px 0px rgb(0 0 0 / 50%);

}
.the_header.scrolled .head_td.menu_side li.cta_menu_btn a{
    color: #fff;
}
.card_me{

}
.card_me h4{
  font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 25px;
line-height: 25px;
margin: 20px 0px 15px 0px;
}


.head_td.menu_side li.cta_menu_btn a{
    background-color: #113d42;
    padding: 15px 30px;
    margin: 0px 0px 0px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
}


.slight_m_top{
    padding-top: 10px;
}

.hero_sub {
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    text-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
    letter-spacing: 4px;
    font-size: 13px;
    margin-bottom: 20px;
    opacity: .9;
}
.thumb_overlay {
    height: 70%;
    position: absolute;
    z-index: 1;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    opacity: 0.7;
    background-blend-mode: multiply;
    background-image: linear-gradient(to bottom, rgba(28, 33, 43, 0), #1c212b);
}
.home_feature{
    position: relative;
    background-position: center;
    background-size: cover;
    background-color: #eee;
    padding: 300px 0px;
    width: 100%;
}
.home_feature.secondary_banner{
    position: relative;
    background-position: center;
    background-size: cover;
    background-color: #eee;
    padding: 230px 0px 100px;
    width: 100%;
}












.home_feature h1{
    font-family: "Google Sans", sans-serif;
    text-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 70px;
    line-height: 60px;
    position: relative;
    z-index: 1;
}
.home_feature p{
    font-family: "Montserrat", sans-serif;
    text-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
    font-optical-sizing: auto;
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    padding: 0px 0px 0px 0px;
    margin: 40px 0px 35px 0px;
    position: relative;
    z-index: 1;
}
.home_feature a.cta_btn{
  position: relative;
  z-index: 1;
}
a.cta_btn{
    background-color: #113d42;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 30px;
    margin: 0px 0px 0px 0px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    position: relative;
    z-index; 1;
}
a.cta_btn:hover{
    color: #fff;
    text-decoration: none;
}





.gal_img{
    width: 100%;
    padding: 40%;
    margin: 30px 0px 0px 0px;
    position: relative;
    background-color: #444;
}





.cov{
    background-size: cover;
    background-position: center;
}

.gallery_feature{
    position: relative;
    margin: 40px 0px 0px 0px;
    width: 100%;
    padding-top: 50%;
}
.gal_feat_left{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 49%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
}
.gal_feat_right{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 49%;
    height: 100%;
    border-radius: 20px;
}
.gal_cube_1{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 48%;
    height: 48%;
    background-color: red;
    border-radius: 20px;
}
.gal_cube_2{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 48%;
    height: 48%;
    background-color: red;
    border-radius: 20px;
}
.gal_cube_3{
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 48%;
    height: 48%;
    background-color: red;
    border-radius: 20px;
}
.gal_cube_4{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 48%;
    height: 48%;
    background-color: red;
    border-radius: 20px;
}




















.content_section{
    padding: 100px 0px;
}
.content_section.center_text{
    text-align: center;
}
.content_section.left_text{
    text-align: left;
}


.content_tbl{
    display: table;
    width: 100%;
}
.content_tr{
    display: table-row;
}
.content_td{
    display: table-cell;
    vertical-align: middle;
}
.content_td.left_side{
      width: 50%;
    padding: 0px 40px 0px 0px;
}
.content_td.right_side{
    width: 50%;
    padding: 0px 0px 0px 40px;
}
.content_td .cta_btn{
    margin: 40px 0px 0px 0px;
}
.big_cta_block{
    overflow: hidden;
    position: relative;
    color: #fff;
    padding: 100px;
}
.big_cta_block h2,
.big_cta_block p{
    position: relative;
    text-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
    z-index: 1;
}
.big_cta_block .cta_btn{
    background-color: #f5e845;
    color: #000;
    font-weight: bold;
    position: relative;
    z-index: 1;
}




.big_cta_block h4{
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 25px;
    line-height: 25px;
    margin: 0px 0px 15px 0px;
}



.photo_block{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
}
.photo_block iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}


.content_section h2{
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 60px;
    line-height: 60px;
    margin: 0px 0px 30px 0px;
}
.content_section h2 span{
    color: #2d9aa7;
}
.content_section p a{
    color: #2d9aa7;
    text-decoration: none;
    font-weight: bold;
}







.content_section p{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.content_section .big_cta_block.round.cov p{
    margin: 0px 0px 30px 0px;
    display: block;
}
.quote_card{
    padding: 30px;
    margin: 40px 0px 0px 0px;
    background-color: #fff;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
}
.quote_card h4{
  font-family: "Google Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 22px;
      line-height: 22px;
      margin: 0px 0px 15px 0px;
}
.quote_card p{
    font-style: italic;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}












.white_cards_wrap {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
}
.white_card_tbl {
    width: 100%;
    display: table;
    min-height: 10px;
    border-spacing: 15px 0;
    margin: 0 0 20px 0;
}
.white_card_tr {
    display: table-row;
}
.white_card_td {
    display: table-cell;
    text-decoration: none;
    padding: 30px;
    width: 50%;
    border-radius: 20px;
    overflow: hidden;
    text-align: left;
    color: #12192b;
    position: relative;
    background-color: #fff;
    vertical-align: top;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .1);
}
.white_card_td h4{
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 35px;
    line-height: 35px;
    margin: 15px 0px;
    color: #163c42;
}


.three_cards .white_card_td{
    width: 33.33%;
        text-align: center;
}
.content_td.left_side .photo_block{
    overflow: visible;
}
.content_td.left_side .photo_block .quote_card{
    width: 50%;
    position: absolute;
    bottom: -30px;
    right: -30px;
}
.review_banners img{
  width: 100%;
  height: auto;
}


.white_card_td.center_text h3{
    margin: 0px;
}

.round{
    border-radius: 20px;
}
.white_card_td p{
    font-size: 15px;
    line-height: 22px;
}
.content_section h3{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    font-style: normal;
    padding: 0px 0px 0px 0px;
    margin: 25px 0px 0px 0px;
}
.content_section .white_cards_wrap{
    margin-top: 40px;
}
.content_section .white_card_tbl{
    margin: 0px 0px 15px 0px;
}







.the_footer{
    background: #1f343a;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    padding: 40px 0;
    text-align: center;
}





@media (max-width: 1200px){

}
@media (max-width: 992px){
  .three_cards .white_card_td {
    width: 100%;
    display: block;
    text-align: center;
}
  .mob_trigger {
    display: block;
  }
  .big_cta_block {
      padding: 40px;
  }
  .white_cards_wrap {
    margin-left: 0px;
    margin-right: 0px;
}
  .content_section {
    padding: 50px 0px;
}
  .white_card_td {
    display: block;
    padding: 25px;
    width: 100%;
    margin: 0px 0px 15px 0px;
  }
  .content_section .white_card_tbl {
    margin: 0px 0px 0px 0px;
}
  .content_tbl,
  .content_tr,
  .content_td,
  .content_td.left_side,
  .content_td.right_side{
      display: block;
      width: 100%;
  }
  .hero_sub {
    letter-spacing: 3px;
    font-size: 11px;
  }
  .home_feature {
    padding: 160px 0px 80px;
}
.content_td.right_side {
    padding: 40px 0px 0px 0px;
}
  .home_feature.secondary_banner {
    padding: 160px 0px 40px;
  }
  .home_feature p {
      font-size: 15px;
      line-height: 20px;
      margin: 20px 0px 35px 0px;
  }
  .home_feature h1,
  .content_section h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .content_section h2 br{
      display: none;
  }
  .top_logo {
    width: 100%;
    max-width: 250px;
}
  .head_td.logo_side {
    width: 100%;
}
.head_td.menu_side{
    display: none;
}
}
@media (max-width: 768px){

}