/*
Theme Name:  Agrofile
Theme URI:   http://localhost:8888/agrofile
Version:     1.0
Description: A child theme of Divi. This is a custom child theme created for our site Agrofile.
Author:      ficelle
Author URI:  http://localhost:8888/agrofile
Template:    Divi
*/

/*- Add any CSS custom code for this child theme below this line -*/

/*------------------------------------------------*/
/*---------[ GQ CUSTOM IMAGE OVERLAYS ]-----------*/
/*------------------------------------------------*/
 
     /* FADE IN TEXT */
        .gq_overlay_text .custom_overlay {
            position: relative;}
        .gq_overlay_text .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_text .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #3e8adb;}
        .gq_overlay_text .custom_overlay:hover .overlay {
            opacity: 1;}
        .gq_overlay_text .text {
            color: #fff;
            font-size: 22px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            width: 100%;}
             
    /* FADE IN BUTTON */
        .gq_overlay_button .custom_overlay {
            position: relative;}
        .gq_overlay_button .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_button .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: rgba(2, 2, 2, 0.7);}
        .gq_overlay_button .custom_overlay:hover .overlay {
            opacity: 1;}
        .gq_overlay_button .text {
            color: #fff;
            background: #3e8adb;
            padding: 10px 5px;
            font-size: 15px;
            line-height: 16px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);}
 
     /* SLIDE IN TOP */
        .gq_overlay_slide_top .custom_overlay {
            position: relative;}
        .gq_overlay_slide_top .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_slide_top .overlay {
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 100%;
            height:0;
            transition: .5s ease;}
        .gq_overlay_slide_top .custom_overlay:hover .overlay {
            bottom: 0;
            height: 100%;}
        .gq_overlay_slide_top .text {
            color: #fff;
            font-size: 22px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);}
 
     /* SLIDE IN BOTTOM */
        .gq_overlay_slide_bottom .custom_overlay {
            position: relative;}
        .gq_overlay_slide_bottom .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_slide_bottom .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 100%;
            height: 0;
            transition: .5s ease;}
        .gq_overlay_slide_bottom .custom_overlay:hover .overlay {
            height: 100%;}
        .gq_overlay_slide_bottom .text {
            color: #fff;
            font-size: 22px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);}
 
     /* SLIDE IN RIGHT */
        .gq_overlay_slide_right .custom_overlay {
            position: relative;}
        .gq_overlay_slide_right .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_slide_right .overlay {
            position: absolute;
            bottom: 0;
            left: 100%;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 0;
            height: 100%;
            transition: .5s ease;}
        .gq_overlay_slide_right .custom_overlay:hover .overlay {
            width: 100%;
            left: 0;}
        .gq_overlay_slide_right .text {
            white-space: nowrap; 
            color: white;
            font-size: 20px;
            position: absolute;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);}
 
    /* SLIDE IN LEFT */
        .gq_overlay_slide_left .custom_overlay {
            position: relative;}
        .gq_overlay_slide_left .image {
            display: block;
            width: 100%;
            height: auto;}
        .gq_overlay_slide_left .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 0;
            height: 100%;
            transition: .5s ease;}
        .gq_overlay_slide_left .custom_overlay:hover .overlay {
            width: 100%;}
        .gq_overlay_slide_left .text {
            white-space: nowrap; 
            color: white;
            font-size: 20px;
            position: absolute;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);}