@media (min-width: 1200px) {
    
    #menu {display: block;}
    .menu-toggle {display: none;}
    
}

@media (max-width: 1200px){
 
    .wrap {width: 90%;}
    
    .col-55, .col-40, col-35 {width: 44.99999%;}
    .col-65, .col-60, .col-45 {width: 54.99999%;}
    .col-25, .col-20 {width: 49.99999%;}
    
    .desktop_only {display: none;}
    .mobile_only {display: inherit;}
    
    .flex-order-1 {order: 1;}
    .flex-order-2 {order: 2;}
    
    body { margin-top: 120px; }
	
	.menu-toggle {
		display: block;
		z-index: 99999;
	}
	
	#header { 
        position: fixed; 
        top: 0; left: 0; 
        height: 120px;
    }
    
    #header_contact {top: 50px; right: 54px; font-size: 15px; z-index: 9999;}
    
    #header_contact .desktop_only {display: none;}
        #header_contact {font-size: 18px; font-weight: bold;}
        #header_contact i {margin-right: 0px;}
        #header_contact .telephone {display: inline-block;}
        #header_contact .telephone a {font-size: 25px; font-weight: normal; margin-bottom: 0;}
        #header_contact .email {display: inline-block; font-size: 25px; margin-left: 0px;}
    
    #header_contact a {padding: 10px 15px;}
    #header_contact a.toggled-on {color: #fff;}
    
    #logo {left: 0;}
    #logo img {height: 100px;}
	
	#menu {
    display: none;
    position: fixed;
		top: 0;
		right: 0;
        background: #000;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden; 
        max-width: none;
		width: 100%;
		z-index: 999;
	}
		
    #menu ul {
        position: absolute;
        top: 120px;
        right: 0;
        background: #000;
        text-align: center;
        width: auto;
        z-index: 999;
    }
		
		#menu .menu-header ul,
		div.menu ul {
			list-style: none;
			margin: 0;
		}
		#menu .menu-header li,
		div.menu li {
			float: none;
			position: static;
		}
    
        #menu a {
            color: #ccc;
            height: 30px;
            line-height: 30px;
            padding: 0px 20px;
        }
		
		#menu ul li a {
            clear: both; 
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }
        
            #menu ul li:first-child a {border-top: 2px solid #ccc;}
            #menu ul li:last-child a {border-bottom: 2px solid #ccc;}
    
            #menu ul ul {
                display: none;
                position: relative;
                top: 0; left: 0;
                float: left;
                background: #c00d0d;
                overflow: hidden;
                padding: 0;
                width: 100%;
            }
    
            #menu ul ul ul {display: none !important;}
    
            #menu li ul li.menu-item-has-children > a:after {content: '';}
    
            #menu ul ul:after {display: none;}
    
                #menu ul ul li {
                    margin: 0%;
                    width: 100%;
                }
    
                #menu ul ul li a {
                    border-bottom: 1px solid #ccc;
                    font-size: 13px;
                    line-height: 40px;
                    padding: 0;
                    text-align: center;
                    width: 100%;
                }
    
                    #menu ul ul li:last-child a {border-bottom: none;}
                
                    #menu ul ul li a:hover {}
				
				#menu ul, #menu a {padding: 0; width: 100%;}
				
				#menu ul ul :hover > a,
				#menu ul ul li.current_page_item > a,
				#menu ul ul li.current-menu-ancestor > a,
				#menu ul ul li.current-menu-item > a,
				#menu ul ul li.current-menu-parent > a,
				#menu ul ul li.current-page-parent > a, 
				#menu ul ul li.current-page-ancestor > a,
				#menu ul ul li.current_page_parent > a, 
				#menu ul ul li.current_page_ancestor > a {
					
				}
    
                #menu ul li.current_page_item > a,
                #menu ul li.current-menu-ancestor > a,
                #menu ul li.current-menu-item > a,
                #menu ul li.current-menu-parent > a,
                #menu ul li.current-page-parent > a, 
                #menu ul li.current-page-ancestor > a,
                #menu ul li.current_page_parent > a, 
                #menu ul li.current_page_ancestor > a {
                    background: #c00d0d;
                    border-bottom: 1px solid #ccc;
                    color: #fff;
                    font-weight: 800;
                }
    
	       
            #menu li.menu-item-has-children a:after {
                font-family: 'Font Awesome 5 Pro';
                font-size: 10px;
                font-weight: 900;
                content: " \f078";
                padding-left: 3px;
            }
                #menu li.menu-item-has-children	.sub-menu a:after {content: "";}
            
		
    
    
 
}

@media (max-width: 1024px){
    
    .col-3, .col-4, .col-5, .col-6, .col-7  {grid-template-columns: repeat(2, 1fr);}
 
    .gallery-columns-6 .gallery-item, 
    .gallery-columns-5 .gallery-item {width: 24%;}
    
}

@media (max-width: 768px){
    
    .col-60,
    .col-30 {width: 45%;}
 
    .gallery-columns-6 .gallery-item, 
    .gallery-columns-5 .gallery-item, 
    .gallery-columns-4 .gallery-item {width: 32%;}
    
    
    
    body {margin-top: 80px;}
    #header {height: 80px;}
    #logo {left: 20px;}
    #logo img {height: 60px; width: auto;} 
    #header_contact {top: 30px; right: 65px;}
    .menu-toggle {top: 18px; right: 10px;}
    #menu ul {top: 80px;}
    
    #our-activities h2, 
    #interesting-facts h2 {font-size: 2rem;}
    
    
    .wp-caption {float: none !important; display: block; clear: both; margin: 20px 0; width: auto !important;}
    
    .button {
		width: auto;
	}
	
    /*
	table {
		text-align: left;
		margin: 0 auto;
	}	
	
	th, td, tr { 
		display: block; 
		margin: 0 auto;
	}	
	
		td { 
			margin-bottom: 0px;
			min-width: 220px;
		}
    
    */
		
	input[type="text"], input[type="email"], input[type="tel"], textarea {width: 100%;}
 
}


@media (max-width: 640px){
    
    #main-content.grid, 
    #our-activities .grid, 
    #news-header.grid, 
    #footer-menu.grid, 
    .subscribe .grid, 
    .col-2, .col-3, .col-4, .col-5, .col-6, .col-7  {grid-template-columns: auto; grid-auto-rows: auto;}
    
    .col-60,
    .col-30 {width: 99.9999%;}
 
    .gallery-columns-6 .gallery-item, 
    .gallery-columns-5 .gallery-item, 
    .gallery-columns-4 .gallery-item, 
    .gallery-columns-3 .gallery-item {width: 49%;}
    
    
    #search-form input[type=text] { 
        width: 100%; 
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    #search-form input[type=submit], form .button {padding: 10px 0 !important; width: 100% !important;}
    
    
    .slick-prev {
        left: 0px;
        height: 50px;
        width: 50px;
    }

    .slick-next {
        right: 0px;
        height: 50px;
        width: 50px;
    }


    .slick-prev:before, .slick-next:before { 
        font-size: 25px; 
        line-height: 25px; 
    }   

    .slick-prev:before { content: "\f0d9"; padding: 5px 20px;}
    [dir="rtl"] .slick-prev:before { content: "\f0da"; }

    [dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
    .slick-next:before { content: "\f0da"; padding: 5px 30px 5px 20px; }
    [dir="rtl"] .slick-next:before { content: "\f0d9"; padding: 5px 20px; }
       
}