/*------------------------------------*\
            Common.css
\*------------------------------------*/
/*
    * General.....................General use
    * Space.......................
    * Button Style................
    * Animation Effect............Animation
    * Media Query.................RWD Setting
        * General.....................
*/



.footer a:hover{ color: #76be3d !important }
.rl-style footer a { font-size: 0.875rem; }

/*------------------------------------
            $General
------------------------------------*/
html{ font-size: 16px; }
    body { font-family:'Roboto', sans-serif;}
#topnavarea.affix{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#topnavarea.affix-top{
    display: block;
}
	/*----- Layout -----*/
	.container-fluid{padding: 0;}
	.rl-row-1440{
        max-width: 1440px; 
        margin: 0 12.1%;
        padding-right: 15px;
        padding-left: 15px;
    } 

	/*----- font size for seo -----*/
	.text-lg, .text-md, .text-sm, .text-xs{ margin: 0; }
	.text-lg{ 
        color: #fff;
        font-size: 5.25rem; 
        line-height: 1.1;
        font-weight: 500;
        padding-top: 0;
        padding-bottom: 0;
    }
    .text-md{
        color: #515151; 
        font-size: 3rem; 
        font-weight: 300;
        line-height:1.1; 
    }
    .text-sm{
        color: #76be3d; 
        font-size: 2.25rem;
        font-weight: 500; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: 40px;
    }
    .text-xs{
        color: #515151; 
        font-size: 1.875rem; 
        font-weight: 300;
        line-height: 1.1; 
        padding-top: 0;
        padding-bottom: 40px;
    }
    p, li, .text-p{
    	font-size: 1.125rem; 
    	color: #515151; 
    	line-height: 1.5;
        font-weight: 300;
    }    
    p, ul{ padding-bottom: 0px; margin-bottom: 0px; }

    /*-----Topbar Font Size-----*/
    .rl-style nav p, .rl-style nav li, .rl-style nav a{font-size: 1rem; line-height: 20px;}    
    .rl-style nav p, .rl-style nav ul{padding-bottom: 0px;}

	/*-----Link Style-----*/
    .rl-style a{ font-size: 1.125rem; color: #82be0f; }
    .rl-style a:hover{ color:#82be0f; }
    .rl-style a:focus,
    .rl-style a:active,
    .rl-style a:active:focus{ color:#82be0f; outline: none; }

	/*-----display: flex-----*/
    .border{ border: 1px solid #000; }
    .flex-container{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
    .direction-column{
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .align-center{
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .align-content{
        -webkit-align-content: space-between;
            -ms-flex-line-pack: justify;
                align-content: space-between;
    }
    .align-self-flex-end{
        -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end;
    }
    .justify-center{
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .justify-space-between{
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    

    /*----- background-color -----*/
    .light-gray{ background-color: #e4e4e4; }
    .hard-gray{ background-color: #d7d7d7; }
    .dark-gray{ background-color: #3f3f3f; }





/*------------------------------------
            $Space
------------------------------------*/
    
    /*-----padding-----*/
    .rl-wrapper-topbottom-l{padding-top: 80px;padding-bottom: 80px}
    .rl-wrapper-top-l{padding-top: 80px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 80px;}

    .rl-wrapper-topbottom{padding-top: 60px;padding-bottom: 60px}
    .rl-wrapper-top{padding-top: 60px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 60px;}

    .rl-wrapper-topbottom-s{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top-s{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 40px;}

    .rl-wrapper-topbottom-xs{padding-top: 20px;padding-bottom: 20px}
    .rl-wrapper-top-xs{padding-top: 20px;padding-bottom: 0;}
    .rl-wrapper-bottom-xs{padding-top: 0;padding-bottom: 20px;}
    
    
    /*-----margin-----*/
    .rl-margin-topbottom-l{margin-top: 80px;margin-bottom: 80px}
    .rl-margin-top-l{margin-top: 80px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 80px;}

    .rl-margin-topbottom{margin-top: 60px;margin-bottom: 60px}
    .rl-margin-top{margin-top: 60px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 60px;}

    .rl-margin-topbottom-s{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top-s{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 40px;}
    
    .rl-margin-topbottom-xs{margin-top: 20px;margin-bottom: 20px}
    .rl-margin-top-xs{margin-top: 20px;margin-bottom: 0;}
    .rl-margin-bottom-xs{margin-top: 0;margin-bottom: 20px;}
    
    .no-padding-l{padding-left: 0;}
    .no-padding-r{padding-right: 0;}
    .no-padding-lr{padding-left: 0;padding-right: 0;}
    .no-padding-top{padding-top: 0;}
    .no-padding-bottom{padding-bottom: 0;}
    .no-padding{padding: 0;}





/*------------------------------------
        	$Button Style
------------------------------------*/
	/*----- button with fill bg -----*/
	.rl-btn-fill{
		background-color: #82be0f;
        border: 2px solid #82be0f;
        color: black;
        line-height: normal;
        font-size: 1.125rem;
        border-radius: 0;  
	}
	.rl-btn-fill:hover, 
    .rl-btn-fill:active, .rl-btn-fill:active:focus{
        background-color: transparent !important;
        color: #82be0f !important;
        outline:none;
    }
    .rl-btn-fill:focus{
        background-color: #82be0f;
        color: black;
        outline:none;
    }

	/*----- button with border -----*/
	.rl-btn-border{
		background-color: transparent;
        border: 2px solid #82be0f;
        color: #82be0f;
        /*line-height: normal;*/
        font-size: 1rem;
        border-radius: 0;
	}
	.rl-btn-border:hover,
    .rl-btn-border:active, .rl-btn-border:active:focus{
        background-color: #82be0f;
        border: 2px solid #82be0f;
        color: white;
        outline:none;
    }
    .rl-btn-border:focus{
        background-color: transparent;
        border: 2px solid #82be0f;
        color: #82be0f;
        outline:none;
    }


/*--- magnificPopup overwrite ---*/

.mfp-iframe-holder .mfp-content {
  max-width: 80%;
}


/*------------------------------------$Play button------------------------------------ */

.rl-rel {
    position: relative;
    display: block;
}

.rl-play-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(55px + 2.5vw);
    height: calc(55px + 2.5vw);
    border-radius: 50%;
    margin: calc( (( 55px + 2.5vw) / 2) * (-1)) 0 0 calc( (( 55px + 2.5vw) / 2) * (-1));
    border: 3px solid #e4e4e4;
    background: #0009;
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}

.rl-rel:hover .rl-play-wrapper {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.rl-play {
    width: 0;
    height: 0;
    margin-left: calc( 2.8px + 0.375vw);
    border-top: solid calc(0.625vw + 8px) transparent;
    border-right: solid 0px transparent;
    border-bottom: solid calc(0.625vw + 8px) transparent;
    border-left: solid calc(0.9375vw + 12px) #fff;
    margin-left: 7px;
}


/*------------------------------------
          $Animation Effect
------------------------------------*/
	/*-----smooth transition-----*/
    .transition{
        -webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
    }





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and ( max-width: 1440px ){
	/*------------------------------------
	            $General
	------------------------------------*/
	/*----- font size for seo -----*/
		.text-md,
	    .text-sm{ /*padding-bottom: 35px;*/ }
	    .text-xs{ /*padding-top: 25px; padding-bottom: 15px;*/ }

	/*----- Layout -----*/
		.rl-row-1440{ margin: 0 4.17%; }





}

@media screen and ( max-width: 1199px ){
	/*------------------------------------
	            $General
	------------------------------------*/
	/*----- font size for seo -----*/
	    .text-md, .text-sm{ /*padding-bottom: 25px;*/ }


    /*------------------------------------
            $Space
    ------------------------------------*/
    /*-----space-----*/
    .rl-wrapper-topbottom-l{padding-top: 60px;padding-bottom: 60px}
    .rl-wrapper-top-l{padding-top: 60px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 60px;}

    .rl-wrapper-topbottom{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 40px;}
    
    .rl-wrapper-topbottom-s{padding-top: 25px;padding-bottom: 25px}
    .rl-wrapper-top-s{padding-top: 25px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 25px;}      

    .rl-wrapper-topbottom-xs{padding-top: 15px;padding-bottom: 15px}
    .rl-wrapper-top-xs{padding-top: 15px;padding-bottom: 0;}
    .rl-wrapper-bottom-xs{padding-top: 0;padding-bottom: 15px;}
    

    .rl-margin-topbottom-l{margin-top: 60px;margin-bottom: 60px}
    .rl-margin-top-l{margin-top: 60px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 60px;}

    .rl-margin-topbottom{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 40px;}

    .rl-margin-topbottom-s{margin-top: 25px;margin-bottom: 25px}
    .rl-margin-top-s{margin-top: 25px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 25px;}

    .rl-margin-topbottom-xs{margin-top: 15px;margin-bottom: 15px}
    .rl-margin-top-xs{margin-top: 15px;margin-bottom: 0;}
    .rl-margin-bottom-xs{margin-top: 0;margin-bottom: 15px;}
    }


}

@media screen and ( max-width: 991px ){
	/*------------------------------------
	            $General
	------------------------------------*/
	/*----- Layout -----*/
		.rl-row-1440{
	        padding-right: 15px;
	        padding-left: 15px;
	        margin: 0 auto;
	    }





}

@media screen and ( max-width: 767px ){
	/*------------------------------------
	            $General
	------------------------------------*/
	/*----- font size for seo -----*/
	    .text-md{ font-size: 2.5rem; }
	    .text-md, .text-sm{ /*padding-bottom: 20px;*/ }

    
    /*------------------------------------
            $Space
    ------------------------------------*/
    .rl-wrapper-topbottom-l{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top-l{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 40px;}

    .rl-wrapper-topbottom{padding-top: 30px;padding-bottom: 30px}
    .rl-wrapper-top{padding-top: 30px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 30px;}

    .rl-wrapper-topbottom-s{padding-top: 20px;padding-bottom: 20px}
    .rl-wrapper-top-s{padding-top: 20px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 20px;}  
    

    .rl-margin-topbottom-l{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top-l{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 40px;}
    
    .rl-margin-topbottom{margin-top: 30px;margin-bottom: 30px}
    .rl-margin-top{margin-top: 30px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 30px;}

    .rl-margin-topbottom-s{margin-top: 20px;margin-bottom: 20px}
    .rl-margin-top-s{margin-top: 20px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 20px;}


}

@media screen and (max-width: 500px){
	/*------------------------------------
	            $General
	------------------------------------*/
	/*----- font size for seo -----*/
	    .text-md{font-size: 2rem;}
	    .text-sm{font-size: 1.75rem;}
	    .text-xs{font-size: 1.5rem;}




}