/* 
Theme Name: agdimitriosthesgr
Text Domain: agdimitriosthesgr
Version: 1.0
Description: A wordpress theme created by Leonidas Kralidis for Agios Dimitrios Thessalonikis. 
Tags: responsive, bootstrap, church, saint demetrius, news, articles, posts
Author: Leonidas Kralidis
Author URI: https://www.kralidis.com
*/

@charset "utf-8";
/*
    Created by Leonidas Kralidis for Agios Dimitrios Thessalonikis
*/
/*
    Created on : Sep 20, 2023, 02:15:04 PM
    Author     : Leonidas Kralidis
*/
/*
    COLOUR PALETTE
    Main colour: 8ec2d7
    Subtle colour: b4d7e4
    VERY subtle colour: f0f8f8
    Grey: 3a3a3a
    Another grey: 1a1a1a
    Subtle Grey: 808080
    Less Subtle Grey: 737373
    Offwhite: f8f4f4
*/
/*
[Table of Contents]

0. Smooth scrolling for jumping to index.html's sections
1. Fonts
2. Body and some general stuff
3. Header
    3.1 Logo
    3.2 Main Nav
    3.3 Header Side
    3.4 Hamburger
4. Menu
    4.1 Menu Social
    4.2 Menu copyright
5. Home
    5.1 Home-small
    5.2 Hero Slider
    5.3 Hero Slider Navigation
    5.4 Hero Box for marathon
6. Hero Boxes
7. Page Section
8. Buttons
    8.1 Wordpress block buttons
        8.1.1 Download Button for wp-block-file
        8.1.2 Download Button for wp-block-button
9. Popular
10. Register
11. Search
    11.1 Search Form
12. Services
13. Testimonials
14. Events
    14.1 Events - Saints PopUp Boxes
15. Footer
    15.1 Newsletter
    15.2 Footer Content
    15.3 Footer Copyright
16. News
    16.1 New Post
    16.2 Comments
    16.3 Leave Comment
    16.4 News Page Nav
    16.5 Sidebar
    16.6 Chapters
    16.7 Modal Images
    16.8 Image Grid
    16.9 iFrame Wrapper
    16.10 Flickr Wrapper
    16.11 Breadcrumbs and reading time
18. Mistiria
19. Teachers
20. Milestone
21. Become
22. Preloader
23. Scroll to Top button

*/

/***********
0. Smooth scrolling for jumping to index.html's sections
***********/

html {
    scroll-behavior: smooth;
}

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
@font-face {
    font-family:"AstyCFStdBlack";
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Black.ttf) format("truetype");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Black.woff) format("woff");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Black.woff2) format("woff2");
    font-weight:normal;
    font-style:normal;
    font-display:swap
}
@font-face {
    font-family:"AstyCFStdBold";
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Bold.ttf) format("truetype");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Bold.woff) format("woff");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Bold.woff2) format("woff2");
    font-weight:normal;
    font-style:normal;
    font-display:swap
}
@font-face {
    font-family:"AstyCFStdBook";
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Regular.ttf) format("truetype");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Regular.woff) format("woff");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Regular.woff2) format("woff2");
    font-weight:normal;
    font-style:normal;
    font-display:swap
}
@font-face {
    font-family:"AstyCFStdMedium";
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Medium.ttf) format("truetype");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Medium.woff) format("woff");
    src:url(/wp-content/themes/agdimitriosthesgr/assets//fonts/CFAsty-Medium.woff2) format("woff2");
    font-weight:normal;
    font-style:normal;
    font-display:swap
}
/*********************************
2. Body and some general stuff
*********************************/
*
{
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
    font-family: 'AstyCFStdBook', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    background: #FFFFFF;
    color: #808080;
}
div
{
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
    list-style: none;
    margin-bottom: 0px;
}
p
{
    font-family: 'AstyCFStdBook', sans-serif;
    font-size: 1rem;
    line-height: 2.29;
    font-weight: 400;
    color: #808080;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
    display: inline;
    position: relative;
    color: inherit;
    border-bottom: solid 1px #8ec2d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
a, a:hover, a:visited, a:active, a:link
{
    color: #8ec2d7;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
p a:active
{
    position: relative;
    color: #8ec2d7;
}
p a:hover
{
    color: #FFFFFF;
    background: #8ec2d7;
}
p a:hover::after
{
    opacity: 0.2;
}
::selection
{
    background: #b4d7e4;
    color: #8ec2d7;
}
p::selection
{
    background: #b4d7e4;
    color: #8ec2d7;
}
h1{font-size: 3rem;}
h2{font-size: 2rem;}
h3{font-size: 1.5rem;}
h4{font-size: 1rem;}
h5{font-size: 0.875rem;}
h6{font-size: 0.5rem;}
h1, h2, h3, h4, h5, h6
{
    font-family: 'AstyCFStdMedium', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    color:#1a1a1a;
}
::-webkit-input-placeholder
{
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #808080 !important;
}
:-moz-placeholder /* older Firefox*/
{
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #808080 !important;
}
::-moz-placeholder /* Firefox 19+ */
{
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #808080 !important;
}
:-ms-input-placeholder
{
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #808080 !important;
}
input::placeholder
{
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #808080 !important;
}
.form-control
{
    color: #db5246;
}
section
{
    display: block;
    position: relative;
    box-sizing: border-box;
}
.clear
{
    clear: both;
}
.clearfix::before, .clearfix::after
{
    content: "";
    display: table;
}
.clearfix::after
{
    clear: both;
}
.clearfix
{
    zoom: 1;
}
.float_left
{
    float: left;
}
.float_right
{
    float: right;
}
.trans_200
{
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.trans_300
{
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.trans_400
{
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.trans_500
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.fill_height
{
    height: 100%;
}
.super_container
{
    width: 100%;
    overflow: hidden;
}
.prlx_parent
{
    overflow: hidden;
}
.prlx
{
    height: 130% !important;
}
.nopadding
{
    padding: 0px !important;
}

/*********************************
3. Header
*********************************/

.header
{
    position: fixed;
    top: 45px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1318px;
    height: 104px;
    background: #FFFFFF;
    z-index: 10;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.header.scrolled
{
    top: 15px;
}
.header.scrolled .header_content::before
{
    box-shadow: 0px 20px 49px rgba(0,0,0,0.17);
}
.header_content
{
    width: calc(100% - 279px);
    height: 100%;
}
.header_content::before
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    box-shadow: 0px 20px 49px rgba(0,0,0,0.67);
    z-index: -1;
}

/*********************************
3.1 Logo
*********************************/

.logo_container
{
    display: inline-block;
    padding-left: 40px;
}
.logo span
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #3a3a3a;
    vertical-align: middle;
    /*text-transform: uppercase;*/
    margin-left: 3px;
    display: inline-block;
    text-align:center;
}

.logo span a
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #3a3a3a;
    vertical-align: middle;
    /*text-transform: uppercase;*/
    margin-left: 3px;
    display: inline-block;
    text-align:center;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.logo span a:hover
{
    color: #8ec2d7;
}

.logo img{
    max-height: 80px;
}
/*********************************
3.2 Main Nav
*********************************/

.main_nav_container
{
    display: inline-block;
    margin-left: auto;
    padding-right: 40px;
}
.main_nav
{
    /* margin-top: 7px; */
    margin-top: auto;
}
.main_nav_item
{
    display: inline-block;
    margin-right: 35px;
}
.main_nav_item:last-child
{
    margin-right: 3px;
}
.main_nav_item a
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    font-weight: 500;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.main_nav_item a:hover
{
    color: #8ec2d7;
}
.main_nav_item a i{
    font-size: 1.25rem;
    vertical-align: middle;
}
/* dropdown */
.has-dropdown {
    position: relative;
}
.has-dropdown:hover .sub-menu
{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.has-dropdown > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    position: relative;
    top: 1px;
    background-color: #8ec2d7;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><polygon fill='black' points='9.899 7.778 17.678 0 19.799 2.121 9.899 12.021 0 2.121 2.121 0'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    /* mask-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><polygon fill='black' points='9.899 7.778 17.678 0 19.799 2.121 9.899 12.021 0 2.121 2.121 0'/></svg>\"); */
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}
.sub-menu
{
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 210px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: all 200ms ease;
    z-index: 13;
}
.sub-menu li
{
    margin: 0;
    padding: 0;
}
.sub-menu li a
{
    display: block;
    padding: 9px 18px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3a3a3a;
    text-decoration: none;
    white-space: nowrap;
    transition: all 200ms ease;
}
.sub-menu li a:hover
{
    /* background: rgba(142, 194, 215, 0.08); */
    color: #8ec2d7;
}
.sub-menu .main_nav_item {
    display: block;
    margin-right: 0;
    width: 100%;
}
.sub-menu .main_nav_item a {
    display: block;
    width: 100%;
    box-sizing: border-box; 
}
/*********************************
3.3 Header Side
*********************************/

.header_side
{
    width: 279px;
    height: 100%;
    background: #8ec2d7;
    
}
.header_side img
{
    width: 25px;
    height: 25px;
}
.header_side span
{
    font-size: 1.125rem;
    font-weight: 500;
    color: #FFFFFF;
}
.header_side_social{
    width: 100%;
}
.header_side_social_list{
    display: flex;
    justify-content: space-evenly;
}
.header_side_social_list li {
    display:inline-block;
}
.header_side_social_list i
{
    font-size: 1.25rem;
    color: #3a3a3a;
    vertical-align: middle;
    text-align:center;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.header_side_social_list i:hover
{
    color: #8ec2d7;
}

/*********************************
3.4 Hamburger
*********************************/

.hamburger_container
{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    padding-right: 20px;
    display: none;
    cursor: pointer;
}
.hamburger_container i
{
    font-size: 1.5rem;
    padding: 10px;
    color: #3a3a3a;
}
.hamburger_container:hover i
{
    color: #8ec2d7;
}

/*********************************
4. Menu
*********************************/

.menu_container
{
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    height: 100vh;
    background: #FFFFFF;
    z-index: 12;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    visibility: hidden;
    opacity: 0;
}
.menu_container.active
{
    visibility: visible;
    opacity: 1;
    right: 0;
}
.menu
{
    position: absolute;
    top:150px;
    left: 0;
    padding-left: 15%;
}
.menu_list
{
    -webkit-transform: translateY(3.5rem);
    -moz-transform: translateY(3.5rem);
    -ms-transform: translateY(3.5rem);
    -o-transform: translateY(3.5rem);
    transform: translateY(3.5rem);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 1000ms 600ms ease;
    opacity: 0;
}
.menu_container.active .menu_list
{
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}
.menu_item
{
    margin-bottom: 9px;
}
.menu_item a
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.menu_item a:hover
{
    color: #8ec2d7;
}
.menu_close_container
{
    position: absolute;
    top: 86px;
    right: 79px;
    width: 21px;
    height: 21px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu_close
{
    top: 9px;
    width: 21px;
    height: 3px;
    background: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.menu_close::after
{
    display: block;
    position: absolute;
    top: -9px;
    left: 9px;
    content: '';
    width: 3px;
    height: 21px;
    background: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
    background: #8ec2d7;
}

/*********************************
4.1 Menu Social
*********************************/

.menu_social_container
{
    margin-top: 100px;
    -webkit-transform: translateY(3.5rem);
    -moz-transform: translateY(3.5rem);
    -ms-transform: translateY(3.5rem);
    -o-transform: translateY(3.5rem);
    transform: translateY(3.5rem);
    -webkit-transition: all 1000ms 1000ms ease;
    -moz-transition: all 1000ms 1000ms ease;
    -ms-transition: all 1000ms 1000ms ease;
    -o-transition: all 1000ms 1000ms ease;
    transition: all 1000ms 1000ms ease;
    opacity: 0;
    padding-left: 4px;
}
.menu_social_item
{
    display: inline-block;  
    margin-right: 30px;
}
.menu_social_item a i
{
    color: #3a3a3a;
    font-size: 2rem;
}
.menu_social_item a i:hover
{
    color: #8ec2d7;
}
.menu_container.active .menu_social_container
{
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

/*********************************
4.2 Menu copyright
*********************************/

.menu_copyright
{
    margin-top: 60px;
    -webkit-transform: translateY(3.5rem);
    -moz-transform: translateY(3.5rem);
    -ms-transform: translateY(3.5rem);
    -o-transform: translateY(3.5rem);
    transform: translateY(3.5rem);
    -webkit-transition: all 1000ms 1200ms ease;
    -moz-transition: all 1000ms 1200ms ease;
    -ms-transition: all 1000ms 1200ms ease;
    -o-transition: all 1000ms 1200ms ease;
    transition: all 1000ms 1200ms ease;
    opacity: 0;
    padding-left: 3px;
    padding-right: 130px;
}
.menu_copyright a
{
    color: #8ec2d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}

.menu_copyright a:hover{
    color: #808080;
}
.menu_container.active .menu_copyright
{
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

/*********************************
5. Home
*********************************/

.home
{
    width: 100%;
    height: 100vh;
}

/*********************************
5.1 Home-small
*********************************/

.home-small
{
    width: 100%;
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: #3a3a3a;
    background-image:url('/wp-content/themes/agdimitriosthesgr/assets/images/slider_background_7.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    color: #ffffff;
}
.home-small .container.text-center h1 
{
    color: #FFFFFF;
    background: rgba(142,194,215,0.6);
    padding: 1rem 3rem;
    width: fit-content;
    margin: auto;
    margin-bottom: 1rem;
}

/*********************************
5.2 Hero Slider
*********************************/

.hero_slider_container
{
    width: 100%;
    height: 100%;
}
.hero_slide
{
    width: 100%;
    height: 100%;
}
.hero_slide_background
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.hero_slide_container
{
    width: 100%;
    height: 100%;
}
.hero_slide_content
{
    max-width: 80%;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}
.hero_slide_content h1
{
    font-size: 4rem;
    font-weight: 400;
    color: #FFFFFF;
}
.hero_slide_content h1 span
{
    background-color: rgba(142, 194, 215, 0.3);
    padding-left: 13px;
    padding-right: 13px;
    margin-left: -12px;
    margin-right: -12px;
}
.animated
{
    -webkit-animation-duration : 1s !important;
    animation-duration : 1s !important;
    -webkit-animation-delay : 500ms;
    animation-delay : 500ms;
}
.animate-out
{
    -webkit-animation-delay : 0ms;
    animation-delay : 0ms;
}

/*********************************
5.3 Hero Slider Navigation
*********************************/

.hero_slider_nav
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(calc(-50% + 30px));
    width: 58px;
    height: 58px;
    background: #FFFFFF;
    z-index: 9;
    cursor: pointer;
}
.hero_slider_nav:hover
{
    background: #8ec2d7;
}
.hero_slider_nav:hover span
{
    color: #FFFFFF;
}
.hero_slider_nav span
{
    display: block;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}
.hero_slider_left
{
    left: 4.32%;
}
.hero_slider_right
{
    right: 4.32%;
}

/*********************************
5.4. Hero Box for marathon
*********************************/

.center_banner_container
{
    position: absolute;
    display: flex;
    top: 21%;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 9;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}

.hero_box_center_banner
{
    height: 150px;
    background: #8ec2d7;
    padding: 20px 20px 10px;
    cursor: pointer;
}
.hero_box_center_banner:hover
{
    background: #3a3a3a;
}

.hero_box_center_banner img
{
    width: 100%;
    height: 70%;
}

.hero_box_center_banner:hover a
{
    color: #8ec2d7;
}
.hero_box_center_banner_content
{
    height: 100%;
    width: 100%;
    text-align: center;
}

.hero_box_center_banner_link
{
    font-size: 1.125rem;
    font-weight: 500;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.hero_box_center_banner:hover a:hover
{
    color: #3a3a3a;
}


/*********************************
6. Hero Boxes
*********************************/

.hero_boxes
{
    width: 100%;
    height: 0px;
    z-index: 9;
    padding-top: 0px;
}
.hero_boxes_inner
{
    position: absolute;
    top: -212px;
    left: 0;
    width: 100%;
}
.hero_box
{
    width: 100%;
    height: 161px;
    background: #8ec2d7;
    cursor: pointer;
    display: grid;
}
.hero_box a {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}
.hero_box:hover
{
    background: #3a3a3a;
}
.hero_box img
{
    width: 62px;
    height: auto;
    margin-top: -6px;
}
svg path
{
    fill: #8ec2d7;
}
.svg-black path
{
    fill: #000000!important;
}
.hero_box svg path,
.hero_box svg rect,
.hero_box svg .st0
{
    fill: #3a3a3a;
}
.hero_box svg
{
    width: 62px;
    height: auto;
}
.hero_box img
{
    width: 62px;
    height: auto;
}
.hero_box:hover svg path,
.hero_box:hover svg rect,
.hero_box:hover svg .st0
{
    fill: #8ec2d7;
}
.hero_box:hover h2
{
    color: #8ec2d7;
}
.hero_box:hover a
{
    color: #8ec2d7;
}
.hero_box_title
{
    font-size: 1.25rem;
    font-weight: 500;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.hero_box:hover h2:hover
{
    color: #3a3a3a;
}
.hero_box_link, 
.hero_box_content a
{
    font-size: 0.75rem;
    font-weight: 500;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.hero_box:hover a:hover
{
    color: #3a3a3a;
}

/*********************************
7. Page Section
*********************************/

.page_section
{
    padding-top: 117px;
    padding-bottom: 117px;
}
.section_title a h2
{
    color: #1a1a1a;
    vertical-align: middle;
    display: inline-block;
    text-align:center;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.section_title a h2:hover
{
    color: #8ec2d7;
}
.section_title h2
{
    display: block;
    color: #1a1a1a;
    font-weight: 500;
    padding-top: 24px;
    font-size: 3rem;
}
.section_title h2::before
{
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 55px;
    height: 4px;
    content: '';
    background: #8ec2d7;
}
.section_title h2 span
{
    color: #8ec2d7;
}

/*********************************
8. Buttons
*********************************/

.button
{
    cursor: pointer;
}
.button:hover
{
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.button a
{
    font-size: 0.875rem;
    line-height: 3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.button_1
{
    width: 202px;
    height: 48px;
}
/*********************************
8.1 Wordpress block buttons
*********************************/

.btn-xl {
    padding: 1rem 1.75rem;
    font-size: 1.25rem;
}

.btn-outline-light {
    color: #3a3a3a;
    border-color: #8ec2d7!important;
}

.btn {
    --bs-btn-color: #3a3a3a;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #8ec2d7;
    --bs-btn-border-width: 0.125rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} 

.btn:focus, .btn:hover{
    background-color: #b4d7e4;
}

/*********************************
8.1.1 Download Button for wp-block-file
*********************************/
.wp-block-file
{
    padding: 1rem 1.75rem;
    font-size: 1.25rem!important;
    border-radius: .25rem!important;
    --bs-btn-color: #3a3a3a;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #8ec2d7;
    --bs-btn-border-width: 0.125rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.wp-block-file:focus, .wp-block-file:hover{
    background-color: #b4d7e4;
}
.wp-block-file a::before
{
    content: "\f019"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
}
.wp-block-file a
{
    position: relative;
    color: inherit;
    font-size: 1.25rem;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.wp-block-file__button 
{
    display:none;
    /* padding: 1rem 1.75rem;
    color: #3a3a3a!important;
    background-color: #b4d7e4;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}
/*********************************
8.1.2 Download Button for wp-block-button
*********************************/
.wp-block-button{
    width: fit-content;
    height: fit-content;
    padding: 0 1rem;
    background: #8ec2d7;
    margin-top: 1rem!important;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
    border-radius: 0;
}
.wp-block-button:hover{
    background: #3a3a3a;
}
.wp-block-button__link, 
.wp-block-button a{
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    padding: 0;
    font-size: 1.125em;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 3.313rem;
}

.wp-block-button__link:hover, 
.wp-block-button a:hover
{
    color: #8ec2d7;
}
/*********************************
9. Popular
*********************************/
.course_boxes
{
    margin-top: 68px;
}
.card
{
    display: block;
    background: #f8f4f4;
    border: none;
}
.card-img-top
{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card-body
{
    /* padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px; */
}
.card-title
{
    margin-top: 55px;
}
.card-title a
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 1.375rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.card-title a:hover
{
    color: #808080;
}
.card-text
{
    font-size: 0.875rem;
    color: #737373;
    margin-top: -12px;
}
.card-text a
{
    display: inline;
    position: relative;
    color: inherit;
    border-bottom: solid 1px #8ec2d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.card-text a, a:hover, a:visited, a:active, a:link
{
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
.card-text a:active
{
    position: relative;
    color: #8ec2d7;
}
.card-text a:hover
{
    color: #FFFFFF;
    background: #8ec2d7;
}
.card-text a:hover::after
{
    opacity: 0.2;
}
.price_box
{
    width: 100%;
    height: 67px;
    background:#f0f8f8;
    margin-top: 41px;
    /* padding-left: 35px; */
}
.course_author_image
{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}
.course_author_name
{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
}
.course_author_name a
{
    font-size: 0.875rem;
    font-weight: 500;
    color: #3a3a3a;
    /* padding-left: 20px; */
    /* margin-top: 7px; */
    margin-top: 0;
    width:100%;
    vertical-align: middle;
    display: inline-block;
    text-align:center;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.course_author_name a:hover
{
    color: #8ec2d7;
}
.course_author_name span
{
    color: #808080;
}
.course_price
{
    width: 67px;
    height: 67px;
    background: #8ec2d7;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course_price span
{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.course_price span a
{
    font-family: 'AstyCFStdBook', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #3a3a3a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 1;
}

.course_price span a:hover
{
    color: #8ec2d7;
}

.course_readmore a
{
    font-size: 1.375rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.course_readmore a:hover
{
    color: #8ec2d7;
}

/*********************************
10. Register
*********************************/

.register
{
    width: 100%;
}
.register_section
{
    width: 100%;
    background: #8ec2d7;
    padding-top: 156px;
    padding-bottom: 161px;
}
.register_content
{
    width: 522px;
}
.register_title
{
    color: #FFFFFF;
    margin-bottom: 16px;
    line-height: 1.63;
}
.register_title:last-child
{
    margin-bottom: 0px;
}
.register_title	span
{
    color: #1a1a1a;
}
.register_text
{
    color: #FFFFFF;
    font-weight: 500;
    margin-top: 32px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0px;
}
.register_button
{
    background: #1a1a1a;
    margin-top: 65px;
}
.register_button a
{
    color: #FFFFFF;
}

/*********************************
11. Search
*********************************/
.search_section
{
    width: 100%;
    height: 80vh;
    padding-top:10vh;
    position: relative;
    overflow: hidden;
}
.search_section::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url('/wp-content/themes/agdimitriosthesgr/assets/images/testimonials_background.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.075  ;
    z-index: 1;
}
.search_section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #f8f4f4;
    z-index: 0;
}
.search_content
{
    width: 50vw;
    position: relative;
    z-index: 2;
    opacity: 1;
}

/*********************************
11.1 Search Form
*********************************/
.search_form{
    display: flex;
    width: 100%;
}
.input_field
{
    width: 100%;
    height: 42px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: solid 2px #FFFFFF;
}
.input_field:focus
{
    outline: none !important;
    border: solid 2px #8ec2d7;
}
#search_form .input_field
{
    width: 100%;
    height: 42px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: solid 2px #8ec2d7;
}
#search_form .input_field:focus
{
    outline: none !important;
    border: solid 2px #3a3a3a;
}
.search_form_name {
    width: 92%;
    height: 42px;
}
.search_submit_button
{
    width: 8%;
    height: 42px;
    background: #8ec2d7;
    color: #FFFFFF;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    cursor: pointer;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.search_submit_button:hover
{
    background: #3a3a3a;
}
.search_submit_button a
{
    color: #FFFFFF;
}
.search_submit_button a:hover
{
    color: #8ec2d7;
}
.search_section .search_content .news_post_button{
    margin-top: 10vh!important;
}
/*********************************
12. Services
*********************************/

.services
{
    padding-bottom: 76px;
}
.services_row
{
    margin-top: 65px;
}
.service_item
{
    margin-bottom: 41px;
}
.service_item h2
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 1.375rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 13px;
}
.service_item p
{
    font-size: 1rem;
    font-weight: 500;
    color: #737373;
    max-width: 100%;
    margin-bottom: 0px;
}
.icon_container
{
    height: 41px;
    width: auto;
    margin-bottom: 30px;
}
.icon_container img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.icon_container svg
{
    width: 100%;
    height: 100%;
}
.frontPageKatafigiLessonsUl
{
    list-style: inside;
    line-height: 1rem;
    margin-top: 0.5rem;
}
.frontPageKatafigiLessonsUl li{
    margin-bottom: 1rem;
}
.services_readmore a
{
    font-size: inherit;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.services_readmore a:hover
{
    color: #8ec2d7;
}
.services_cta p{
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
}

/*********************************
13. Testimonials
*********************************/

.testimonials
{
    width: 100%;
    background: #1a1a1a;
}
.testimonials_background_container
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.testimonials_background
{
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/agdimitriosthesgr/assets/images/testimonials_background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.27;    
}
.testimonials .section_title h2
{
    color: #FFFFFF;
}
.testimonials_slider_container
{
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 56px;
}
.testimonials_item
{
    width: 100%;
    padding-bottom: 75px;
}
.quote
{
    font-size: 2.25rem;
    color: #8ec2d7;
}
.testimonials_text
{
    font-family: 'AstyCFStdBook', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 0px;
}
.testimonial_user
{
    margin-top: 43px;
}
.testimonial_image
{
    width: 98px;
    height: 98px;
    border-radius: 50%;
    overflow: hidden;
}
.testimonial_image img
{
    width: 100%;
    height: auto;
}
.testimonial_name a
{
    font-family: 'AstyCFStdM', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #8ec2d7;
    margin-top: 21px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.testimonial_name a:hover
{
    color: #ffffff;
}
.testimonial_title
{
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    margin-top: 6px;
}
.testimonials_slider .owl-dots
{
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
}
.testimonials_slider .owl-dot span
{
    width: 8px !important;
    height: 8px !important;
    border: solid 2px #FFFFFF;
    background: transparent !important;
}
.testimonials_slider .owl-dot.active span
{
    width: 16px !important;
    height: 16px !important;
    border: none;
    background: #8ec2d7 !important;
}

/*********************************
14. Events
*********************************/

.event_items
{
    margin-top: 68px;
}
.event_item
{
    margin-bottom: 56px;
}
.event_item:last-child
{
    margin-bottom: 0px;
}
.event_date
{
    width: 131px;
    height: 131px;
    border: solid 2px #8ec2d7;
    margin-bottom: 18px;
}
.event_day
{
    font-size: 3rem;
    font-weight: 700;
    color: #8ec2d7;
    margin-bottom: 1px;
    line-height: 1;
}
.event_month
{
    font-size: 1rem;
    font-weight: 700;
    color: #8ec2d7;
    text-transform: uppercase;
}
.event_name a
{
    font-size: 1.375rem;
    font-weight: 500;
    color: #1a1a1a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.event_name a:hover
{
    color: #8ec2d7;
}
.event_location
{
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-top: 2px;
}
.event_content p
{
    font-weight: 500;
    color: #737373;
    margin-top: 21px;
    margin-bottom: 13px;
}
.event_image img
{
    width: 100%;
}
.event_readmore a
{
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.event_readmore a:hover
{
    color: #8ec2d7;
}

/*********************************
14.1 Events - Saints PopUp Boxes
*********************************/

.black_overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.white_container{
    display: none;
    position: absolute;
    border: 16px solid #8ec2d7;
    background-color: white;
    z-index: 21;
    overflow: auto;
    margin: auto;
    width: 80%;
    height: 80%;

    transition: 0.3s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
.white_content {
    padding: 50px;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Saint Buttons */
#openSaint{
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}

#closeSaint {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #8ec2d7;
    font-size: 2.5rem;
    font-weight: bold;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
#closeSaint:hover, #closeSaint:focus {
    color: #3a3a3a;
    text-decoration: none;
    cursor: pointer;
}


/*********************************
15. Footer
*********************************/

.footer
{
    width: 100%;
    padding-top: 86px;
    background: #1a1a1a;
}
.footer .section_title h2
{
    color: #FFFFFF;
}

/*********************************
15.1 Newsletter
*********************************/

.newsletter
{
    padding-bottom: 85px;
    border-bottom: solid 2px #3a3a3a;
}
.newsletter_form_container
{
    width: 60%;
    margin-top: 48px;
}
.newsletter_email
{
    width: calc(100% - 164px);
    height: 42px;
    border: none;
    padding-left: 27px;
    font-weight: 500;
    color: #1a1a1a;
}
.newsletter_email:focus
{
    outline: solid 2px #8ec2d7;
}
.newsletter_submit_btn
{
    width: 164px;
    height: 42px;
    border: none;
    background: #8ec2d7;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.newsletter_submit_btn:focus
{
    border: solid 2px #FFFFFF;
}
.newsletter .logo_container
{
    padding-left: 0px;
    text-align: center;
}
.newsletter .logo img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*********************************
15.2 Footer Content
*********************************/

.footer_content
{
    padding-top: 80px;
    padding-bottom: 83px;
    border-bottom: solid 2px #3a3a3a;
}

.footer_about_text
{
    margin-top: 24px;
    margin-bottom: 0px;
    padding-right: 20px;
}
.footer_column_title
{
    font-size: 1.125rem;
    font-weight: 500;
    color: #FFFFFF;
    padding-top: 15px;
}
.footer_column_content
{
    margin-top: 32px;
}
.footer_list_item
{
    margin-bottom: 11px;
}
.footer_list_item a, 
.footer_contact_item a
{
    font-size: 0.875rem;
    color: #808080;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.footer_list_item a:hover, 
.footer_contact_item a:hover
{
    color: #8ec2d7;
}
.footer_contact_item
{
    font-size: 0.875rem;
    font-weight: 400;
    color: #808080;
    margin-bottom: 22px;
}
.footer_contact_item:last-child
{
    margin-bottom: 0px;
}
.footer_contact_icon
{
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 10px;
}
.footer_contact_icon img
{
    width: 100%;
    height: 100%;
}
.footer_contact_icon svg
{
    width: 100%;
    height: 100%;
}

/*********************************
15.3 Footer Copyright
*********************************/

.footer_bar
{
    padding-top: 19px;
    padding-bottom: 19px;
}
.footer_social .menu_social_item a i
{
    color: #FFFFFF;
}
.footer_social .menu_social_item a i:hover
{
    color: #8ec2d7;
}
.footer_social .menu_social_item:last-child
{
    margin-right: 0px;
}
.footer_copyright a{
    color: #8ec2d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}

.footer_copyright a:hover{
    color: #808080;
}

/*********************************
16. News
*********************************/

.news
{
    width: 100%;
    padding-top: 103px;
    padding-bottom: 118px;
}
.news_post:last-child
{
    /*margin-bottom: 0px;*/
}
.news_post_image
{
    width: 100%;
}
.news_post_image img
{
    width: 100%;
    height: auto;
}
.news_post_top
{
    margin-top: 38px;
}
.news_post_date_container
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* news_post_data(with year) */
.news_post_date
{
    width: 88px;
    height: 88px;
    background: #8ec2d7;

}
.news_post_date div:first-child
{
    font-family: 'AstyCFStdMedium', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}
.news_post_date div:nth-child(2)
{
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1;
    margin-top: 5px;
}
.news_post_date div:last-child
{
    font-size: 0.75rem;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1;
}
/* news_post_date(without year) */
.news_post_date_wo
{
    width: 68px;
    height: 68px;
    background: #8ec2d7;
}
.news_post_date_wo div:first-child
{
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}
.news_post_date_wo div:last-child
{
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1;
    margin-top: 3px;
}
.news_post_title_container
{
    padding-left: 31px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.news_post_title a
{
    font-family: 'AstyCFStdBlack', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1a1a1a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.news_post_title a:hover,
.news_post_author a:hover,
.news_post_comments a:hover, 
.news_post_meta a:hover,
.news_post_meta_content a:hover
{
    color: #808080;
}
.news_post_meta
{
    font-weight: 500;
    font-size: 1rem;
    color: #1a1a1a;
    margin-top: 0.5rem;
    line-height: 1;
}
.news_post_meta svg{
    display: inline-block;
    width: auto;
    height: 1em;
}
.news_post_comments a, 
.news_post_meta a, 
.news_post_meta_content a
{
    color: inherit;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.news_post_author a
{
    color: #8ec2d7;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
    text-transform: uppercase;
    font-family: 'AstyCFStdBold', sans-serif;
}
.news_post_text
{
    /* margin-top: 27px; */
}
.news_post_quote,
.wp-block-quote
{
    background: #f8f4f4;
    padding: 2rem;
}
.news_post_quote::after
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #8ec2d7;
    content: '';
}
.news_post_quote_text,
.wp-block-quote p
{
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 400;
    line-height: 2rem;
    /* margin-top: 0!important; */
}
.news_post_quote_text span,
.wp-block-quote span
{
    font-size: 2.25rem;
    color: #8ec2d7;
    margin-right: 2px;
}
.news_post_button
{
    width: 188px;
    height: 53px;
    background: #8ec2d7;
    margin-top: 18px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.news_post_button a
{
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 3.313rem;
}
.news_post_button:hover{
    background: #3a3a3a;
}
.news_post_button a:hover
{
    color: #8ec2d7;
}
/*********************************
16.1 New Post
*********************************/

.news
{
    width: 100%;
    padding-top: 103px;
    padding-bottom: 118px;
}
.news_post
{
    margin-bottom: 85px;
}
.news_post:last-child
{
    /*margin-bottom: 0px;*/
}
.news_post_image
{
    width: 100%;
}
.news_post_image img
{
    width: 100%;
    height: auto;
}
.news_post_top
{
    padding: 1.5rem 0;
}

.news_post_text p
{
    text-align: left;
    /* margin-top: 27px; */
    color: #000000;
    font-size: 1.25rem;
    line-height: 1.875rem;
}

.news_post_text_excerpt p
{
    margin-top: 27px;
    color: #000000;
}

.news_post_text img{
    width:100%; 
    max-width:600px;
}
.wp-block-heading{
    margin: 1rem 0 0 0;
}
.wp-block-list{
    list-style: circle;
    color:#000000;
    font-size: 1.25rem;
    line-height: 1.875rem;
}
.wp-block-list{
    margin-left:19.2167px;
}
.wp-block-list .wp-block-list{
    list-style: disc;
}
.wp-block-list .wp-block-list .wp-block-list {
    list-style: square;
}
.insidePostTags span{
    color: #737373;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.insidePostTags svg{
    flex: 0 0 auto;
    display:block;
    width: auto;
    height: 1em;
}
/*********************************
16.2 Comments
*********************************/

.news_post_comments
{
    margin-top: 67px;
}
.comments_title
{
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}
.comments_list, 
.children
{
    margin-top: 67px;
}
.comment
{
    margin-bottom: 25px;
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1;
    background: #f8f4f4;
    border: solid 2px transparent;
    padding: 20px;
    padding-top: 5px;
}
.comment:last-child
{
    margin-bottom: 0px;
}
.fn{
    font-style: normal;
    font-weight: bold;
}
.comment-author img
{
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    margin-top: 13px;
}
.comment-body p{
    margin: 0;
    text-align: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.comment-body p br {
    display: none!important;
}
.comment-awaiting-moderation
{
    color: #808080;
}
.comment a{
    color: #808080;
}
.comment a:hover{
    color: #8ec2d7;
}
.reply a{
    color: #8ec2d7;
}
.reply a:hover{
    color: #808080;
}

/*********************************
16.3 Leave Comment
*********************************/

.leave_comment
{
    margin-top: 67px;
}
.leave_comment_title
{
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}
.leave_comment_form_container
{
    margin-top: 25px;
}
.input_field, 
.text_field
{
    width: 100%;
    background: #f8f4f4;
    border: solid 2px transparent;
    margin-bottom: 16px;
    height: 42px;
    padding-left: 16px;
}
.input_field:focus, 
.text_field:focus
{
    outline: none !important;
    border-color: #8ec2d7;
}
.input_field:last-of-type
{
    margin-bottom: 16px;
}
.text_field
{
    padding-top: 13px;
    padding-bottom: 13px;
    height: 189px;
}
.comment_send_btn
{
    width: 100%;
    height: 48px;
    background: #8ec2d7;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
}
.comment_send_btn:hover
{
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.comment_send_btn:focus
{
    outline: solid 2px #3a3a3a;
}

/*********************************
16.4 News Page Nav
*********************************/

.news_page_nav ul li
{
    display: inline-block;
    width: 43px;
    height: 43px;
    background: #737373;
    margin-right: 3px;
}
.news_page_nav ul li.active
{
    background: #8ec2d7;
}
.news_page_nav ul li:hover
{
    background: #8ec2d7;
}
.news_page_nav ul li a
{
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 2.688rem;
}
/*********************************
16.5 Sidebar
*********************************/

.sidebar
{
    width: 100%;
}
.sidebar_section
{
    margin-top: 48px;
}
.sidebar_section:first-child
{
    margin-top: 0px;
}
.sidebar_section_title
{
    margin-top: -1px;
}
.sidebar_section_title h2
{
    font-size: 1.5rem;
    color: #1a1a1a;
    line-height: 1;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar_section_title svg{
    flex: 0 0 auto;
    display:block;
    width: auto;
    height: 1em;
}
.sidebar_list
{
    margin-top: 28px;
}
.sidebar_list_item
{
    padding: 0.75rem 0;
    border-bottom: solid 1px #808080;
}
.sidebar_list_item a
{
    font-size: 0.875rem;
    font-weight: 500;
    color: #737373;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.sidebar_list_item a:hover
{
    color: #8ec2d7;
}
.sidebar_list_item span{
    color: #8ec2d7;
}
.latest_posts
{
    margin-top: 50px;
}
.latest_post
{
    margin-bottom: 27px;
}
.latest_post:last-child
{
    margin-bottom: 0px;
}
.latest_post_image
{
    width: 100%;
}
.latest_post_image img
{
    width: 100%;
    height: auto;
}
.latest_post_title
{
    margin-top: 24px;
}
.latest_post_title a
{
    font-size: 1.125rem;
    font-weight: 500;
    color: #1a1a1a;
}
.latest_post_title a:hover,
.latest_post_author a:hover,
.latest_post_comments a:hover
{
    color: #808080;
}
.latest_post_meta
{
    color: #1a1a1a;
    margin-top: 6px;
}
.latest_post_author a
{
    font-size: 0.75rem;
    font-weight: 500;
    color: #808080;
    line-height: 1;
}
.latest_post_comments a
{
    font-size: 0.75rem;
    font-weight: 500;
    color: #808080;
    line-height: 1;
}
.latest_post_meta span:nth-child(2)
{
    font-size: 0.75rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-left: 5px;
    margin-right: 5px;
}
.tags
{
    /* margin-top: 50px; */
    margin-top: 1rem;
}
.tag
{
    height: 40px;
    background: #737373;
    margin-right: 12px;
    margin-bottom: 10px;
    
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.tag a
{
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 2.5rem;
    padding-left: 30px;
    padding-right: 30px;
}
#active-tag{
    background: #8ec2d7;
}
.tag:hover
{
    background: #8ec2d7;
}
/*********************************
16.6 Chapters
*********************************/
.chapters{
    padding: 20px;
    background: #f8f4f4;
    border: solid 2px transparent;
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 20px;
    max-width: 30vw;
}
/*********************************
16.7 Modal Images
*********************************/

#centeredImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.docSVG{
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 6%!important;
    height: 6%!important;
}

.docSVG-mobile{
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 15%!important;
    height: 15%!important;
}

/* Style the Image Used to Trigger the Modal */
.modal-trigger {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.modal-trigger:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%!important;
    max-width: 700px!important;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f8f4f4;
    font-size: 2.5rem;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/*********************************
16.8 Image Grid
*********************************/

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: auto!important;
    padding: 0 4px;
}
.column-down {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: auto!important;
    padding: 0 4px;
    margin: auto;
    margin-left: initial;
    margin-right: initial;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%!important;
    max-width: none!important;
}
.column-down img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%!important;
    max-width: none!important;
}
/*********************************
16.9 iFrame Wrapper
*********************************/

.iframeWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.iframeWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*********************************
16.10 Flickr Wrapper 
*********************************/

.flickrWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.flickrWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
.flickrWrapper a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
.flickrWrapper script {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
.flickrWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    max-width: none!important;
}
/*********************************
16.11 Breadcrumbs and reading time
*********************************/
.breadcrumbAndTime{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10rem;
}
.breadcrumb
{
    display:block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    background-color: transparent;
    color: #737373;
    font-size: 1rem;
    padding: 0;
    margin: 0;
}
.breadcrumb a
{
    color: #000000;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.breadcrumb a:hover
{
    color: #737373;
}
.readingTime {
    text-align: right;
    flex: 0 0 auto;
    white-space: nowrap;
    color: #737373;
    font-size: 1rem;
}
.readingTime span{
    color: #8ec2d7;
}
/*********************************
18. Mistiria
*********************************/
#mistiriaColumns{
    gap: 5rem;
}
#mistiriaColumns > .wp-block-column {
    min-height: 310px;
    border-radius: 2.5rem;
    padding: 5rem;
    background: #f8f4f4;
    border: 2px solid #8ec2d7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
#mistiriaColumns > .wp-block-column::before {
    content: "";
    position: absolute;
    inset: auto -30% -42% -30%;
    height: 70%;
    background: radial-gradient(circle, rgba(200,159,99,0.28), transparent 62%);
    pointer-events: none;
}
#mistiriaColumns > .wp-block-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(20,20,20,0.16);
    border-color: rgba(139,99,52,0.25);
}
#mistiriaColumns h2{
    font-weight: 700;
    font-size: 2rem;
}
#mistiriaColumns p, 
#mistiriaColumns .wp-block-list{
    font-size: 1.1rem;
}
.mistiriaColumnIcon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1a1a1a;
    color: #f8f4f4;
    font-weight: 800;
    margin-bottom: 28px;
}

/*********************************
19. Teachers
*********************************/

.teacher
{
	margin-bottom: 82px;
}
.teacher:nth-last-child(-n+3)
{
	margin-bottom: 0px;
}
.card
{
	display: block;
	border: none;
	background: #f8f4f4;
}
.card:hover .card-img-top
{
	opacity: 0.6;
}
.card:hover .card_plus
{
	visibility: visible;
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) scale(1);
	-moz-transform: translate(-50%, -50%) scale(1);
	-ms-transform: translate(-50%, -50%) scale(1);
	-o-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}
.card_img
{
	background: #1a1a1a;
}
.card-img-top
{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.card_plus
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) scale(0.5);
	-moz-transform: translate(-50%, -50%) scale(0.5);
	-ms-transform: translate(-50%, -50%) scale(0.5);
	-o-transform: translate(-50%, -50%) scale(0.5);
	transform: translate(-50%, -50%) scale(0.5);
	width: 75px;
	height: 75px;
	background: #ffb606;
	z-index: 10;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}
.card_plus a
{
	display: block;
	font-size: 1.5rem;
	line-height: 4.688rem;
	color: #FFFFFF;
}
.card-body
{
	padding-top: 0px;
	padding-bottom: 58px;
	padding-left: 15px;
	padding-right: 15px;
}
.card-title
{
	margin-top: 55px;
}
.card-title a
{
	font-size: 1.375rem;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.2;
}
.card-title a:hover
{
	color: #808080;
}
.card-text
{
	font-size: 0.875rem;
	font-weight: 500;
	color: #808080;
	margin-top: -7px;
}
.teacher_social
{
	margin-top: 34px;
}
.teachers_social_item, 
.teachers_social_item a i
{
    font-size: 1rem;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    text-rendering: auto;
}
.teachers_social_item a{
    color: #3a3a3a;
}
.teachers_social_item a:hover{
    color: #8ec2d7;
}

/*********************************
20. Milestones
*********************************/

.milestones
{
	width: 100%;
	padding-top: 118px;
	padding-bottom: 107px;
}
.milestones_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.milestone
{
	width: 100%;
}
.milestone_icon
{
	display: inline-block;
	width: 70px;
	height: 70px;
}
.milestone_icon img
{
	width: 100%;
}
.milestone_counter
{
	font-size: 2.25rem;
	font-weight: 500;
	color: #ffb606;
	line-height: 1;
	margin-top: 41px;
}
.milestone_text
{
	font-size: 1.375rem;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 3px;
}

/*********************************
21. Become
*********************************/

.become
{
	width: 100%;
	padding-top: 117px;
	padding-bottom: 117px;
}
.become_title h2
{
	display: block;
	color: #1a1a1a;
	font-weight: 500;
	padding-top: 24px;
}
.become_title h2::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 55px;
	height: 4px;
	content: '';
	background: #ffb606;
}
.become_text
{
	font-weight: 500;
    color: #808080;
	margin-top: 48px;
	margin-bottom: 0px;
}
.become_button
{
	width: 188px;
	height: 53px;
	background: #ffb606;
	margin-top: 37px;
}
.become_button a
{
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 3.313rem;
}
.become_button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.become_image
{
	width: 100%;
	margin-top: 85px;
}
.become_image img
{
	width: 100%;
}

/*********************************
22. Preloader
*********************************/

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: #f8f4f4;
    transition: all 0.6s ease-out;
    width: 100%;
    height: 100vh;
}
#preloader:before,
#preloader:after {
    content: "";
    background-image: url(/wp-content/themes/agdimitriosthesgr/assets/images/logo.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    border: 4px solid #8ec2d7;
    border-radius: 50%;
    animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#preloader:after {
    animation-delay: -0.5s;
}
#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes animate-preloader {
    0% {
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    opacity: 1;
    }

    100% {
    width: 144px;
    height: 144px;
    top: calc(50% - 72px);
    left: calc(50% - 72px);
    opacity: 0;
    }
}

/*********************************
23. Scroll to Top button
*********************************/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: #8ec2d7;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: #3a3a3a;
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, #8ec2d7, transparent 20%);
    color: #3a3a3a;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}