@font-face{ font-family: "Manrope"; font-style: normal; font-weight: 300; src: url('../fonts/Manrope-Light.ttf') format("truetype");}
@font-face{ font-family: "Manrope"; font-style: normal; font-weight: 400; src: url('../fonts/Manrope-Regular.ttf') format("truetype");}
@font-face{ font-family: "Manrope"; font-style: normal; font-weight: 500; src: url('../fonts/Manrope-Medium.ttf') format("truetype");}
@font-face{ font-family: "Manrope"; font-style: normal; font-weight: 600; src: url('../fonts/Manrope-SemiBold.ttf') format("truetype");}
@font-face{ font-family: "Manrope"; font-style: normal; font-weight: 700; src: url('../fonts/Manrope-Bold.ttf') format("truetype");}

:root {
  --linka: #dd7c63; 
  --linkaa: #008ca0;

  --mycharcoal: #303030;  
  --mylightgray: #f4f4f4;
  --mywhite: #f9f4f1;
  --myoffwhite: #f9f4f1;
 
  --mydeepgreen: #193c3a;  
  --mygreen: #123c3a;
  --mymustard: #f9ab3d;
  --myred: #dd7c63;
  --myocra: #fbdda8;
  --mygrayblue: #65827f;
  
  --mywidewidth: 1140px;
}

body { font-family: Manrope, Helvetica, sans-serif; font-weight:400; font-size:14px; line-height: 24px; color: var(--mycharcoal); text-align: justify; background-color: var(--myocra)}
a{ color: var(--linka); text-decoration: none; outline: none;}
a:hover,
a:focus{ color: var(--mydeepgreen);}
h2{ font-weight:600; font-size:26px; color: var(--mygreen); margin-bottom: 0}
h3{ font-weight:400; font-size:22px; color: var(--mygreen);}
h4{ font-weight:600; font-size:16px; color: var(--mygreen);}

#sp-top-bar,
#sp-header{ background: white}
#sp-mysection{ background: var(--myoffwhite)}
#sp-page-title{ border-top: 5px solid var(--myred); background: var(--myocra)}
#sp-main-body{ background-color: var(--myocra); padding-bottom: 0;}
#sp-accordion #sp-position1,
#sp-accordion #sp-position2{ width:50%; float:left}
#sp-accordion{ padding-top: 0; padding-bottom: 100px}

.container{ max-width: var(--mywidth);}
#sp-main-body .container{ max-width: 100%; padding:0}

/****************************** bread *****************************************/

.breadcrumb{margin-bottom:-30px; background-color:transparent; font-size:13px}

.sp-column .breadcrumb{margin-left:auto; margin-right:auto; max-width: var(--mywidewidth); padding-left:25px; padding-top: 10px;}

.breadcrumb > li + li:not(:first-child)::before{ content: "/\00a0"; padding: 0 5px; color: var(--linka)}
.breadcrumb > li + li:nth-child(2)::before{ content: ""; padding: 0 5px; color: var(--linka)}

/****************************** articles *************************************/

.com-content-article .article-info{ display: none}

.com-content-article .page-header{ padding-bottom: 75px; padding-left: calc(100vw/2 - var(--mywidth)/2); margin-top: -15px; text-align: left;}
.com-content-article__body{ padding: 75px calc(100vw/2 - var(--mywidth)/2) 100px; background-color: var(--myoffwhite)}

.com-content-article .full-image{ max-width: 256px; height: 120px; float:left}
.com-content-article img{ width: 220px; height: 110px; padding-right: 30px; margin-bottom:30px; float:left}

/****************************** the school/ management ***********************/

.thesch #sp-main-body{ padding-bottom: 50px}
.thesch #sp-accordion{ padding-bottom: 0; background: var(--myoffwhite)}
.thesch #sp-accordion #sp-position1{ width: 100%; padding: 0}
.sch{ margin-top:-40px;}

.thesch .com-content-article__body{ padding-bottom: 50px}
.thesch #sp-accordion .container{ max-width: 100%;}
.sch h2{ padding: 75px 0 75px calc(100vw/2 - var(--mywidth)/2); background-color: var(--myocra); max-width:100%;}
.sch .mod-custom.custom{ padding: 75px calc(100vw/2 - var(--mywidth)/2) 100px}

/****************************** activities/ school life **********************/

.acti #sp-accordion,
.sl #sp-accordion,
.sl #sp-accordion-top{ background-color: var(--myoffwhite);}

.acti #sp-accordion .container{ max-width: var(--mywidth); padding: 0; background-color: var(--myoffwhite);}
.sl #sp-accordion .container,
.sl #sp-accordion-top .container{ max-width: calc(var(--mywidth) + 52px); padding: 0}

.sl .acord h3 { text-transform: initial; background-color: white; border: 1px solid var(--mymustard); padding: 10px 25px; font-weight: 400; margin-top: 0.5rem; line-height:1; font-size: 24px;}  
.sl .accordion-button, 
.sl .accordion-body {padding-left: 25px!important}

.acti .com-content-article .page-header,
.sl .com-content-article .page-header{ padding-left: calc(100vw/2 - var(--mywidth)/2)}
.acti .com-content-article__body,
.sl .com-content-article__body{ padding: 75px 0 0; border-bottom: 1px solid var(--myoffwhite); animation-name: none;}

.sl #sp-main-body #sp-component::after{ background-image: url(../../../images/school/school_life.png); background-repeat: no-repeat; background-size: cover;
content: ""; display: block; position: relative; bottom: 124px; left: 0; width: 100%; height: 35%;}
.acti #sp-main-body #sp-component::after{ background-image: url(../../../images/school/activities_large1.png); background-repeat: no-repeat; background-size: cover;
content: ""; display: block; position: relative; bottom: 160px; left: 0; width: 100%; height: 100%;}

/****************************** accordion activities/ school life *************/

.acord .accordion{ padding-left:0; margin-bottom:0; list-style-type:none}

.acord .accordion-item{ background: transparent; border: none; border-top: 1px solid var(--mymustard)!important; min-height: 75px; overflow: visible!important; transition: all 0.2s ease-in-out; height: inherit!important;}/*for long titles*/

.acord .accordion-item:first-child {border-top:none!important;}

.acord .accordion-header{ margin:0; padding:20px 0; display: block; position: relative; transition: color 0.2s ease-in-out;}

.acord .accordion-button{ border:transparent; box-shadow: none; background-color: transparent; line-height: 33px; font-weight: 400; margin: 0; width: 100%; text-align: left; padding: 0; color: var(--mycharcoal); font-size:24px; line-height: 33px}

.acord .accordion-body{ padding: 5px 0px 30px 0px; width:100%;}
.acord .accordion-body a{ color:var(--mymustard);}

/****** accordion activities/ school life collapsing effects *******************/

.acord .accordion-button:hover,
.acord .accordion-button:focus{ color:var(--mymustard); box-shadow:none;}

.acord .accordion-button::after{ background-image:none; font-family: FontAwesome; content: "\f013"; opacity: 0; height: initial; position: relative; right:0px; transition: all 400ms ease-in-out;}

.acord .accordion-button:hover::after,
.acord .accordion-button:not(.collapsed)::after{opacity: 1; right:10px}

.acord .accordion-button:not(.collapsed)::after{ right:0px; opacity: 1; transform: rotate(-180deg);}

.acord .collapsing{transition: all 400ms ease-in-out;}

/**************************** news + blog news **********************************/

.com-content-category-blog .page-header{ padding-bottom: 75px; padding-left: calc(100vw/2 - var(--mywidth)/2); margin-top: -15px;}

.blog-items{ padding: 75px calc(100vw/2 - var(--mywidth)/2) 0; background-color: var(--myoffwhite)}
.com-content-category-blog__navigation{ background-color: var(--myoffwhite)}
nav.pagination__wrapper{ padding: 40px 0 100px calc(100vw/2 - var(--mywidth)/2);}

/***************************** search page **************************************/

.sear #sp-main-body{ padding-top:0}
#searchForm{ padding: 30px calc(100vw/2 - var(--mywidth)/2) 0;}
#search-searchword{ height: 36px; border-radius: 5%; display: inline-block}
.btn-group.pull-left{ padding-right:5px; display: inline-block}
.searchintrosear{ padding: 33px 0 79px 0; margin-top: -12px; font-weight:600; font-size:26px; color: var(--mygreen)}
.searchintrosear p{ margin-bottom: 0; text-align: left}
.search-resultssear{padding:100px calc(100vw/2 - var(--mywidth)/2) calc(100px + 1rem); margin-bottom: 0; background-color: var(--myoffwhite)}
.searchsear .error{padding: 0 calc(100vw/2 - var(--mywidth)/2) 79px; margin-top: -79px; font-weight: 600; font-size: 26px; color: var(--mygreen); text-align: left}
.sear .pagination{ background-color: var(--myoffwhite); margin-top: -40px}

/**************************** Library *******************************************/

.libr_menu #sp-main-body{ padding-bottom: 0px;}
.libr_menu .com-content-article .page-header::after{ background-image: url(../../../images/school/library.png); background-repeat: no-repeat; background-size: contain; 
content: ""; display: block; position: relative; float:right; top: -85px; right: calc(100vw/2 - var(--mywidth)/2); width: 250px; height: 250px; margin-bottom: -100px}

.libr_menu #sp-accordion{ background: var(--myoffwhite); padding-bottom: 50px}
.libr_menu #sp-accordion #sp-position1{ width: 100%;}
.libr_items{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 250px;}
.libr_item{ text-align: center; display: grid; justify-content: center; align-content: baseline;} 

.libr_item a{ display: block; max-width: 250px}
.libr img{width: 100px; height: 100px; margin: auto;}

@media only screen and (max-width: 991px){
.libr_items{ grid-template-columns: 1fr 1fr 1fr;}
}
@media only screen and (max-width: 768px){
.libr_items{ grid-template-columns: 1fr 1fr;}
}
@media only screen and (max-width: 480px){
.libr_items{ grid-template-columns: 1fr;}
}

/***************************** contact page *************************************/

.contact #sp-page-title{background: var(--myocra)}

.contact #sp-mysection .container{ max-width: 100%; padding:0; margin-top: 191px}
.contact #sp-mysection .row{ max-width: var(--mywidth); margin: auto}
.contact #sp-user1{ /*margin-left: calc(12px + 100vw/2 - var(--mywidth)/2);*/ padding-left:0 }
.contact #sp-user2{ /*margin-right: calc(12px + 100vw/2 - var(--mywidth)/2);*/ padding-bottom: 55px; padding-top: 80px; padding-right:0; }

.contact #sp-main-body{ border-top: 5px solid var(--myred); padding-top: 30px; padding-bottom: 50px; background-color: var(--myoffwhite)}
.contact #sp-main-body .container{ padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);}

.contact #sp-left{width: 35%; padding-top:19px; /*height:555px;*/ overflow:hidden}
.contact #sp-component{width: 65%; padding-top:0; padding-right:0}

.contact #sp-user1 h2{ padding-bottom: 105px; max-width: 100%; margin-top: -106px;}
.contact #sp-user1 h3{ text-align: left; padding: 50px 0}

.secr{ background-color:var(--myred); font-size:16px; padding: 0 20px 20px;}
.secrcont{ background-color: white; padding: 25px 0; max-width: 259px;}
.secr h2{ padding-top:22px; padding-bottom:30px; margin:-8px; color:white; line-height:28px; font-size:28px; font-weight:700; text-transform: initial; text-align:center}
.secr button{ background-color: var(--mydeepgreen); opacity:0.7; color: white; border:none; width:80px; height:80px; border-radius:50%; font-size: 2.6rem; outline: none; cursor: default}
.secr h3{ padding-bottom:20px; color: var(--mycharcoal); line-height:18px; font-size:18px; font-weight:500; text-transform: initial; text-align:center}
.secr p{}

/********************************* logo ****************************************/

#sp-logo{ width: 242.5px; margin-top: -60px; padding: 0px}
.sp-default-logo.hidden-xs{display: block}
.sp-default-logo.visible-xs{display: none}

/********************************* @media ***************************************/
/*large screens*/
@media only screen and (min-width: 1200px) {
:root{ --mywidth: 1044px;}

.container, 
.contact #sp-main-body .container{ max-width: var(--mywidewidth);}
#sp-header .container{ max-width: calc(var(--mywidewidth) + 30px); margin:auto}
}

/**should I change 1200 everywhere to 1044???*/

@media only screen and (max-width: 1199px) {
:root{ --mywidth: 805px;}

#sp-header .container{ max-width:100%; margin-right:15%; padding:0}
#sp-logo{ float:left; margin-bottom: 0px}
#sp-menu{ width: 100%; position: absolute!important; margin-left: 2%; padding-left: 26%}

.mod-breadcrumbs.breadcrumb{ margin-left: inherit}

.container,
.contact #sp-main-body .container{ max-width: 960px;}
}
@media only screen and (max-width:991px){
:root{ --mywidth: 648px;}

.container,
.contact #sp-main-body .container{ max-width: 720px;}

#sp-logo{ margin-top: 6px;}
#sp-menu{ width: auto; right: 28px; top: -2px;}
.sp-megamenu-parent{ display: none}

#sp-menu{ padding-top: 18px}
.sp-megamenu-wrapper{ display: inline-block; position: relative; right: 8px; top: 2px; margin-left: 30px}

#sp-accordion #sp-position1, 
#sp-accordion #sp-position2{ width:100%} 
.acti #sp-position1 li.accordion-item:last-child {border-bottom:1px solid var(--mymustard)!important}
}
@media only screen and (max-width: 768px) {
.container { max-width: 95%;}
.acti #sp-main-body #sp-component::after{ background-image: url(../../../images/school/activities_small1.png);bottom: 160px; left: 0; width: 100%; height: 100%;}

.libr_menu .com-content-article .page-header::after{ width: 200px; height: 200px; top: -52px;}

.contact #sp-main-body .container,
.contact #sp-user1,
.contact #sp-user2{ margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
.contact #sp-left, .contact #sp-component{ margin: 0 calc(12px + 100vw/2 - var(--mywidth)/2); width: var(--mywidth); padding-left: 0; padding-right: 0;}
.contact #sp-user2,
.contact #sp-component{ padding-top: 50px}
}
@media only screen and (max-width: 716px) {
.com-content-article .page-header{ padding-left: 4.75%; padding-right: 4.75%}
.com-content-article__body{ padding: 75px 4.75% 100px;}
.moduletable.sch h2{ padding-left: 4.75%; padding-right: 4.75%;}
.moduletable.sch .mod-custom.custom{ padding: 75px 4.75% 100px}

.acti .com-content-article .page-header,
.sl .com-content-article .page-header{ padding-left: 4.75%; padding-right: 4.75%}
.acti #sp-accordion .container{ padding-left: 4.75%; padding-right: 4.75%}
.sl #sp-accordion .container,
.sl #sp-accordion-top .container{ margin-left: auto; margin-right: auto; max-width: calc(100% - 4.75%);}

.sl .acord h3{ padding-left: 2.375%; padding-right: 2.375%;}  
.sl .accordion-button, 
.sl .accordion-body{ padding-left: 2.375%!important; padding-right: 2.375%!important;}

.com-content-category-blog .page-header{ padding-left: 4.75%; padding-right: 4.75%}
.blog-items{ padding: 75px 4.75% 0;}
nav.pagination__wrapper{ padding-left: 4.75%;}

#searchForm{  padding-left: 4.75%; padding-right: 4.75%}
.searchintrosear{ padding: 33px 0 79px 0; margin-top: -12px; font-weight: 600; font-size:26px; color: var(--mygreen)}
.searchintrosear p{ margin-bottom:0}
.search-resultssear{  padding-left: 4.75%; padding-right: 4.75%}
.searchsear .error{  padding-left: 4.75%; padding-right: 4.75%}
.sear .pagination{ background-color: var(--myoffwhite); margin-top: -40px}

.libr_menu .com-content-article .page-header::after{ right: 4.75%;}

.contact #sp-mysection .row{ max-width: calc(100% - 9.5%)}

.contact #sp-user1, .contact #sp-user2{ margin:0}

.contact #sp-left, .contact #sp-component{ margin: 0 auto; width: calc(100% - 9.5% - 22px);}
}

@media only screen and (max-width: 480px) {
.sp-default-logo.visible-xs{display: block}
.sp-default-logo.hidden-xs{display: none}
#sp-logo{ width: 92.75px; padding: 18px 0; margin-left: 15px}

.com-content-article .full-image{ max-width: 100%; height: auto; float: none!important; background-color: var(--mywhite); margin-left: auto; margin-right: auto; padding: 1px 36px 0}
.com-content-article img{ width:80%; float:none; height:auto; margin: 0 auto 35px; padding-right:0;}

.libr_menu .com-content-article .page-header::after{ right: 0;}
}

/********************************* diafora ***********************************/

.sp-module .sp-module-title {text-transform: initial;}
.sp-module {margin-top: 0}

.timetable {margin: 0 auto;width:100%}
.timetable a{font-size:14px;}
.timetable td{width:16.6667%;}

.error-logo-wrap{display: none}
.nolink {cursor: default; pointer-events: none;}

#scroll-top{ position: fixed; bottom: 30px; right: 30px; width: 36px; height: 36px; z-index: 600;}
#scroll-top a{ display:block; text-align: center; font-size: 16px; line-height: 36px; color: var(--mydeepgreen); background: var(--myred); border-radius: 50%; transition: color background 500ms; opacity: 0}
#scroll-top a:hover, 
#scroll-top a:active, 
#scroll-top a:focus{ color: var(--myred); background: var(--mydeepgreen);}
.showTop{ opacity: 1;}
@media (max-width: 768px) {
#scroll-top{display: none !important;}
}

/****************************** schedule table *************************/

.ssc #sp-main-body{ padding-bottom: 0}
.ssc .com-content-article__body {border: transparent}
.grta{width:40%}
.grta td{border:1px solid var(--mymustard); background-color:var(--myoffwhite);padding-left:8px}
.grta td:nth-child(1){width:40%;border-left:none;}
.grta td:nth-child(n+2){width:30%;border-right:none}
.grta tr:nth-child(1) td:nth-child(n+2){color: var(--mymustard); font-weight:600;border-top:none}
.grta tr:nth-child(1) td:nth-child(1){background-color:var(--myoffwhite)}
.grta tr:last-child td{border-bottom:none}
.grta tr:first-child td{border-top:none;background:var(--myoffwhite)}
.grta tr:nth-child(4) td,
.grta tr:nth-child(7) td,
.grta tr:nth-child(9) td,
.grta tr:nth-child(12) td{background-color: white;}

@media only screen and (max-width: 768px){
.grta {width:60%}
}
@media only screen and (max-width:480px){
.grta {width:80%}
}

/***************************** search page **********************/

.search-resultssear{ display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

.result-title{ text-align: center; border-radius: 50%; display: grid; justify-content: center; align-content: center; aspect-ratio: 1} 
.result-title:nth-child(3n+1) { background: var(--mymustard);}
.result-title:nth-child(3n+2) { background: var(--mydeepgreen);}
.result-title:nth-child(3n+3) { background: var(--mycharcoal);}

.result-title a{ color: white; transition: color .3s ease-in-out; width: 90%; margin:auto; text-align:center;}
li:nth-child(3n+1) h3.newsflash-titlehomenew a:hover,
li:nth-child(3n+1) h3.newsflash-titlehomenew a:focus,
.result-title:nth-child(3n+1) a:hover,
.result-title:nth-child(3n+1) a:focus{ color: var(--mycharcoal)}
.result-title:nth-child(3n+2) a:hover,
.result-title:nth-child(3n+2) a:focus,
.result-title:nth-child(3n+3) a:hover,
.result-title:nth-child(3n+3) a:focus{ color: var(--mymustard)}

@media only screen and (max-width: 1199px){
.search-resultssear{ grid-template-columns: 1fr 1fr 1fr 1fr;}
}
@media only screen and (max-width: 991px){
.search-resultssear{ grid-template-columns: 1fr 1fr 1fr;}
}
@media only screen and (max-width: 480px){
.search-resultssear{ grid-template-columns: 1fr 1fr;}
}

/****************************  For contact page ****************/

#visformcontainer h1{text-align:center; font-weight:400; margin-top:20px}

.field1, .field2, .field3, .field4, .field6, .field7, .field8, .field9, .field10 {width:50%; float:left; padding-left: 20px; padding-right: 10px; margin-bottom:20px}
.field5, .field11 {width:100%; padding: 0 20px; margin-bottom:20px}

.visCSSlabel{margin-top:0; margin-bottom:0; padding-top:5px; width: auto}
.visCSSinput{margin-top:0; }

.contact .required textarea, 
.contact .required input{border: 1px solid #b3b2b2/*#999*/; border-radius:0; padding: 0.3rem 1rem 0.2rem; background-color: white; font-size: 1em}
.contact .required textarea{height: 205px; vertical-align:top; overflow:auto; width:100%}
.contact .required input {width:97%; height: 47px; }

.contact .required textarea:focus:invalid:focus, 
.contact .required input:focus:invalid:focus, 
select:focus:invalid:focus { border-color: #ecbcb3!important; box-shadow: 0 0 6px #ebbbb2!important;}

.contact .required textarea:focus,
.contact .required input:focus, 
#search-searchword.inputbox:focus{ border-color: var(--linka)!important; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(145, 202, 202, 0.6)!important;}

.visBtnCon {padding-bottom: 10px}
.contact .btn{padding: .75em 2em; outline: none!important; box-shadow:none}

.visform input{ border:transparent}

.btn{
	background-color: var(--myred);
    color: white;
    font-size:16px;
    font-weight:600;
    border: transparent;
    border-radius: 5%;
    outline:none;
    transition: background-color .7s ease-in-out}
.btn:hover, 
.btn:focus{
    background-color: var(--mygrayblue);
    color: white;
    outline:none;}

.contact .errorcontainer{display: none!important}
.contact .item-page p{font-size:26px!important;padding-left:30px}

/******************************  For home page  ***********************************/

.homeslide #sp-title .sp-column { max-width: var(--mywidewidth); margin: 0 auto; box-shadow: 0 0 20px -10px #909090; background: var(--mylightgray);}
.homeslide #sp-main-body {display: none}

/**********************  For HomePage Modules mainslider + news  ******************/

.myhomeslide {
position: relative; z-index: 0; width: 100%; text-align: center; color: var(--mywhite); display: flex; align-items: center; justify-content: center;}

/****************************  For MainSlider  ************************************/

.myhomeslide{display: flex; max-width: 100%; margin: 0 auto; }
.myhomeslide img {object-fit: cover; height: 410px; }

.mycont{ max-width: 710px; margin: 5% 0 0 5%; position: absolute; top: 0px; left: 0px; display: block; width: 100%;}
.myhyper{ background: rgba(0, 0, 0, 0.3); padding: 40px; border-radius:5px; font-size: 42px; text-align: start;}

.myhyper > a {color: white; transition: color 400ms; font-weight: 400; font-size: 1.1em; line-height: 1em; height: auto;}
.myhyper > a:hover {color: #cdc6c6;}

@media only screen and (max-width: 991px){
.myhomeslide img{ max-height: 410px; height: auto}
}
@media only screen and (max-width: 768px){
.mycont{ margin: 4% 0; max-width: 100%;}
.myhyper{ font-size: 36px; padding: 30px}
}
@media only screen and (max-width: 480px){
.mycont { margin: 2% 0; max-width: 100%; font-size: 24px;}
.myhyper{ font-size: 26px; padding: 20px}
}

/**************************** for usefull information *****************************/

.usef h2 {padding-left: 30px; padding-bottom: 0px; padding-top: 40px; margin-top:0}
.mywrap{ display: grid; grid-template-columns: repeat(6, 1fr); width:100%; justify-content: space-between; margin-bottom: 13px; margin-top: 36px}
.myt{ margin-bottom: 36px; text-align: center;}

.mybtn{ background-color: var(--myred); border:none; width:100px; height:100px; border-radius:50%; font-size: 3rem; cursor: pointer; font-family: 'Font Awesome 5 Free'; font-weight:900; margin:auto auto 3px; display:grid; align-items: center; justify-content: center; transition: background-color .3s ease-in-out}
.mybtn:hover, 
.mybtn:active, 
.mybtn:focus{ background-color: var(--mydeepgreen); }

.mybtn i {color: var(--mydeepgreen); transition: color .3s ease-in-out}
.mybtn:hover i, 
.mybtn:active i, 
.mybtn:focus i{color: var(--myred);}

div.myt a {color: var(--mycharcoal);}
div.myt a:focus,
div.myt a:hover {color: var(--mydeepgreen);}

@media (min-width:481px) and (max-width: 979px){
.mywrap{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width:480px){
.mywrap{grid-template-columns: repeat(2, 1fr);}
}

/**************************** For module news + blog news ******************/

.homenew {background: var(--mywhite); }

.homenew h2 {padding-left: 30px; padding-bottom: 40px; padding-top: 40px; margin-top:0}
.homenew .sp-module-title {display: none}

.newsflash-horizhomenew {background: var(--mywhite); margin-bottom:0}

ul.newsflash-horizhomenew,
.blog-items{ display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 500px; margin: 0;} 
ul.newsflash-horizhomenew{ padding: 0 2%;}

ul.newsflash-horizhomenew > li,
.blog-item { text-align: center; margin:0 1%; height: 450px; list-style-type: none;}

ul.newsflash-horizhomenew > li:nth-child(3n+1),
.blog-item:nth-child(3n+1) { background: var(--mymustard);}
ul.newsflash-horizhomenew > li:nth-child(3n+2),
.blog-item:nth-child(3n+2) { background: var(--mydeepgreen);}
ul.newsflash-horizhomenew > li:nth-child(3n+3),
.blog-item:nth-child(3n+3) { background: var(--mycharcoal);}

h3.newsflash-titlehomenew, .blog h3 {margin: 25px 15px; position: relative; top: 0px; height: 40px; font-weight: 600; font-size: 16px}

li h3.newsflash-titlehomenew a, .blog h3 a{ color: white; transition: color .3s ease-in-out; }

li:nth-child(3n+1) h3.newsflash-titlehomenew a:hover,
li:nth-child(3n+1) h3.newsflash-titlehomenew a:focus,
.blog-item:nth-child(3n+1) h3 a:hover,
.blog-item:nth-child(3n+1) h3 a:focus{ color: var(--mycharcoal)}

li:nth-child(3n+2) h3.newsflash-titlehomenew a:hover,
li:nth-child(3n+2) h3.newsflash-titlehomenew a:focus,
.blog-item:nth-child(3n+2) h3 a:hover,
.blog-item:nth-child(3n+2) h3 a:focus,
li:nth-child(3n+3) h3.newsflash-titlehomenew a:hover,
li:nth-child(3n+3) h3.newsflash-titlehomenew a:focus,
.blog-item:nth-child(3n+3) h3 a:hover,
.blog-item:nth-child(3n+3) h3 a:focus{ color: var(--mymustard)}

.newsflash-image img{width:100%; position: relative; height:150px;}
.blog-item .entry-image {width:100%; margin-bottom:0}
.blog-item .entry-image img{width:100%; height:150px;}

/*.mdt,*/ 
.article-info{ margin: 0 0 25px;}
dd.published{ font-size: 14px; font-weight: 400; line-height:24px; text-transform: initial; color: white /*var(--bs-body-color)*/}

.mypar {padding: 0 15px;}

.mypar a{color: white; transition: color .3s ease-in-out;}

li:nth-child(3n+1) .mypar a:hover,
li:nth-child(3n+1) .mypar a:focus,
.blog-item:nth-child(3n+1) .mypar a:hover,
.blog-item:nth-child(3n+1) .mypar a:focus{ color: var(--mycharcoal)}

li:nth-child(3n+2) .mypar a:hover,
li:nth-child(3n+2) .mypar a:focus,
.blog-item:nth-child(3n+2) .mypar a:hover,
.blog-item:nth-child(3n+2) .mypar a:focus,
li:nth-child(3n+3) .mypar a:hover,
li:nth-child(3n+3) .mypar a:focus,
.blog-item:nth-child(3n+3) .mypar a:hover,
.blog-item:nth-child(3n+3) .mypar a:focus{ color: var(--mymustard)}

/*readmore for News (blog+newsflash) articles and all news button*/
.mrdm{position: relative; bottom: 0px;}
.alln {text-align: center; padding-top: 50px; padding-bottom: 38px; background: var(--mywhite); width:100%}

.mrdm a,
.alln a{ color: white; background-color: var(--myred); border: transparent; border-radius: 5%; cursor: pointer; white-space: nowrap; text-align: center; font-size: 16px; font-weight: 600; display:inline-block; padding: .75em 2em; outline: none !important;
box-shadow: none; vertical-align: middle; line-height: 1.42857143; transition: 0.7s ease-in-out; }

.alln a:hover,
.alln a:focus, 
.mrdm a:hover, 
.mrdm a:focus{background-color: var(--mygrayblue);}

.hid p.counter{display: none}

@media only screen and (max-width: 1199px){
.blog-items{ grid-template-columns: 1fr 1fr 1fr; }
}

@media only screen and (max-width: 991px){
ul.newsflash-horizhomenew > li:nth-child(4) {display: none;}
ul.newsflash-horizhomenew{ grid-template-columns: 1fr 1fr 1fr; }
.blog-items{ grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 768px){
ul.newsflash-horizhomenew > li:nth-child(4){ display:block}
ul.newsflash-horizhomenew{ grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 493px){
.blog-items{ grid-template-columns: 1fr }
}

@media only screen and (max-width: 480px){
ul.newsflash-horizhomenew{ padding:0 4%;}
ul.newsflash-horizhomenew > li{ margin:0 4% 40px;}

ul.newsflash-horizhomenew{ grid-template-columns: 1fr; }
}

/**************************** for projects ***************************************/

.myban{ background: linear-gradient(rgba( 26, 61, 60, .75), rgba( 26, 61, 60, .75)), url("../../../images/school/koules2.jpg");height:100%; margin:0;}
#sp-mybanner{ padding: 60px 0 30px}
.homeslide #sp-mybanner .container,
.homeslide #sp-bottom .container{ max-width: var(--mywidewidth);}

/********************************************************************/
/*
article.item.column-1, article.item.column-2, article.item.column-3, article.item.column-4{ background-color: var(--mylightgray); height:10px}
*/

/**************************  Calendar   ****************************************/

.jeve .com-content-article__body {border: transparent}
.jeve #sp-main-body{padding-bottom:0}
.jeve article.item{background-color: var(--myoffwhite)}
.item-pagejeve table{border-top: 1px solid var(--mymustard);}
.item-pagejeve table{border-collapse:separate; border-spacing: 0 15px;}
.item-pagejeve td:nth-child(1){border:transparent; width:5%;}
.item-pagejeve td:nth-child(1){font-size:32px; line-height:32px; color: var(--mymustard); border:transparent}
.item-pagejeve td:nth-child(2){font-size:15px; border:transparent;width:15%}
.item-pagejeve td:nth-child(3){font-size:17px; background-color: var(--mymustard); width:40%; border-color: var(--mymustard)}
.item-pagejeve td:nth-child(4){font-size:17px; background-color: white; border:1px solid var(--mymustard); width:40%;}
.item-pagejeve table tr td{padding:10px 20px 10px 20px;}

@media only screen and (max-width: 991px){
.item-pagejeve tr td:first-child{display: block;}
.item-pagejeve table tr td{padding:10px;}
.item-pagejeve td:nth-child(1){width:16%;}
.item-pagejeve td:nth-child(2){width:20%;}
.item-pagejeve td:nth-child(3),
.item-pagejeve td:nth-child(4){width:32%}
.item-pagejeve table{  table-layout: fixed;}
}
@media only screen and (max-width: 615px){
.item-pagejeve tr td:first-child,
.item-pagejeve td:nth-child(2){display: block;padding-left:0}
.item-pagejeve td:nth-child(3),
.item-pagejeve td:nth-child(4){display:inline-block;width:100%;padding-right:0}
.item-pagejeve tr td:first-child{height:0px}
.item-pagejeve tr:first-child td:first-child{height:auto}
.item-pagejeve td{vertical-align:top!important}
}

/****************************  For teachers ****************/

.tea #sp-main-body{ padding-bottom: 0}
.tea .com-content-article__body {border: transparent}

.tea th{ color: var(--mymustard); font-size: 20px; font-weight: 600; }

table.mable{ table-layout:fixed; margin-left: -8px; font-size: 13px; text-align: left; width:100%}

.mable td{width: 50%;}
.cable td:nth-child(1),
.dable td:nth-child(1){ width:40%;}
.cable td:nth-child(n+2){ width:30%;}
.dable td:nth-child(2){ width:60%;}

.cable td:nth-child(1),
.dable td:nth-child(1){ background-color: white;}
.cable .rs td:nth-child(1){ background-color:var(--myoffwhite)}

.tea .table > :not(:first-child){ border-top: 2px solid var(--mymustard);}
.tea .table > th {border-top:none}
.mable tr:nth-child(1){border-color: transparent;}
.tea .table > :not(caption) > * > * {border-top-width: 1px; border-bottom-width: 0; }
.mable td .cable .rs td:nth-child(1){ border-color: transparent; }
.cable td:nth-child(2),
.dable td:nth-child(2){ border-left:1px solid var(--mymustard)}

@media only screen and (max-width: 715px){
.cable td{float:left;}
.cable td:nth-child(1){width:100%}
.cable td:nth-child(2){width:50%;border-left:none!important;}
.cable td:nth-child(3){width:50%;}

.cable .rs td:nth-child(1){display: none;border:none!important}
.cable .rs td:nth-child(2){width:50%;}
.cable .rs td:nth-child(3){width:50%!important;}
}

@media only screen and (max-width: 480px){
.mable td{float:left;width:100%}
.dable td:nth-child(1){width:60%}
.dable td:nth-child(2){width:40%}
.prim .dable td:nth-child(n+1){width:50%}
.dable td:nth-child(2){border-left:none!important}
.dable td:nth-child(1){border-right:1px solid var(--mymustard)!important;}
.ellipsis{overflow:hidden;text-overflow: ellipsis;}
}

/**************************  Language swithcer and Search  *******************/

#sp-top1 .sp-column {max-height:52.5px; max-width:100%; /*background-color: var(--myoffwhite);*/ width: 162px/*340px*/; margin-right: 0; margin-left: auto; padding-top:8px}

/*lang switch*/
.visually-hidden{display: none}
.mod-languages{ display:inline-block; padding-top: 10px; margin-left:20px;}
.mod-languages a {font-family:"Open Sans";font-weight:300; font-size:13px}
.mod-languages a:lang(en) {font-family:"Open Sans"!important}
.mod-languages ul.lang-inline li {margin: 0 5px 0 0; transition: 300ms;}
.mod-languages ul.lang-inline li.lang-active { background-color:inherit}
.mod-languages ul.lang-inline li:first-child { /*border-right: 1px solid rgb(153, 153, 153);*/ padding-right: 10px; margin-left: -10px}
.mod-languages ul.lang-inline li:last-child {margin-right: -10px}
.mod-languages ul.lang-inline li > a {display: block; line-height: 36px; color: var(--mycharcoal); padding:0; transition: 300ms;}
.mod-languages ul.lang-inline li > a:hover {color: var(--linka);}

/*search*/
#sp-top1 .searchsear,
#sp-header .searchsear{ display:inline-block; padding-top: 10px; margin-left:20px;}
#sp-top1 input {border-radius:0; font-size:12px; width:206px}
#sp-top1 input:focus{box-shadow: none; border-color: #ccc}

/*contact button*/
.conter{ display:inline-block; padding-top: 10px; margin-left:20px;}

.btncont{ background-color: transparent; border: none; width: 34px; height: 32px; border-radius:10%; font-size: 1rem; cursor: pointer; font-family: 'Font Awesome 5 Free'; font-weight:900; display:grid; align-items: center; justify-content: center; margin:0/*float: right; position: relative; top: 18px; right: calc(50vw - var(--mywidth)/2 + 5px);*/}

.btncont:hover, 
.btncont:focus {outline: none;}
.btncont i {color: var(--myred); transition: color .3s ease-in-out}
.btncont:hover i, 
.btncont:focus i{color: var(--mydeepgreen);}

@media only screen and (min-width:1199px){
#sp-top-bar .container{max-width: 1170px;margin:auto}
}
@media only screen and (min-width:992px) and (max-width:1199px){
#sp-top-bar .container{ width: min-content; margin-right: 0}
#sp-top1 {width:390px; }
}
@media only screen and (max-width:991px){
#sp-top-bar{display: none;padding:0}
}
@media only screen and (min-width: 992px) {
#sp-menu .mod-languages,
#sp-menu .searchsear,
#sp-menu .conter{ display: none}
}

/******************************  menu  **********************************/

.menu-justify .sp-dropdown-main{ right:auto!important; left:0!important;}
.sp-megamenu-parent >li.menu-justify{ position: relative}
.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub{ display: none!important}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after{ display: none}

#sp-menu .sp-megamenu-parent > li{ width: initial; padding-left: 10px; padding-right:10px; text-transform: initial; border-right: 1px solid transparent!important;}

.sp-megamenu-parent > li > a{ color: var(--mydeepgreen)/*#1a1a1a*/; text-transform: initial; font-weight: 600; line-height: 50px;}

li.sp-menu-item.sp-has-child > a{ font-size: 16px/*15px;*/}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{ padding: 8px;}

.sp-megamenu-parent >li.active > a,
.sp-megamenu-parent >li:hover > a{ color: var(--linka);}
/*
.sp-megamenu-parent .sp-has-child > .sp-dropdown{ opacity:0.95}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{ background: var(--mywhite)}
*/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a{ color: var(--linka);}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover{ color: white;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{ color: var(--mydeepgreen); font-size: 14px/*12px*/;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover{ background: var(--linka); /*color: var(--linka);*/}


.offcanvas{visibility: inherit}
 
#offcanvas-toggler{ line-height: 34px; float: none;  margin-left: 0;}
#offcanvas-toggler >i,
#offcanvas-toggler >i:hover{ color: var(--myred); font-size:21px}

.offcanvas-menu {height:auto;}
.offcanvas-menu a{color: white; }
.offcanvas ul{ list-style-type:none}

.close-offcanvas{ border-color:transparent; right: 20px; top: 16px;}

.offcanvas-inner{ margin-top: 72px/*60px; border-top:1px solid rgb(153, 153, 153)*/}

/*
.offcanvas-inner .mod-languages {margin-left:0; padding: 24px 25px 0 25px;}
.offcanvas-inner ul.mod-languages__list > li a {color: white; font-weight: 600;}
.offcanvas-inner ul.mod-languages__list > li a:hover {color: white;}
.offcanvas-inner .searchcontoff{ padding-top:24px}
.offcanvas-inner input#mod-search-searchword{ width:80%;}
.offcanvas-inner .conter{ left: 260px}
*/

.offcanvas-inner .menuoff { padding: 0 30px; margin-top: -20px; margin-bottom: 20px;  border-top:1px solid rgb(153, 153, 153) }
.offcanvas-inner .nav{ margin-top:20px; cursor: pointer; flex-direction: column}
.offcanvas-inner .nav li{ font-size: 13px; background-color: transparent; border: transparent;}
.offcanvas-inner .nav li:hover{ background-color: rgba(0, 0, 0, 0.15)}
.offcanvas-inner .nav li { padding: 10px 20px}
.offcanvas-inner .nav li span{ background: transparent; padding:0; height:0}
.offcanvas-inner .accordion{ --bs-accordion-border-radius: 0;}
.offcanvas-inner .nav li span:after{ bottom: 11px; position: relative; /*left: 20px;*/ --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
.offcanvas-inner .accordion{ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
.offcanvas-inner .accordion-button:not(.collapsed){  box-shadow: none}
.offcanvas-inner .accordion-button i{ transition:transform 200ms ease-in-out;}
.offcanvas-inner .accordion-button:not(.collapsed) i { transform: rotate(-180deg);}
.offcanvas-inner .collapsing{transition: all 400ms ease-in-out;}
/*submenu*/
.offcanvas-menu ul li ul { padding-top: 10px;}
.offcanvas-inner .accordion-body{ padding: 0; margin:0 -20px 0 -35px}
.offcanvas-inner .accordion-body li{ padding: 10px 30px; display: flex}
.offcanvas-inner .accordion-body li:last-child{ margin-bottom: -10px;}
.offcanvas-inner .accordion-body li a{padding-left:15px}

@media only screen and (min-width:992px){
#offcanvas-toggler{ display: none!important}
}

/*****************sp Bottom + Footer ******************/

#sp-bottom{ background: var(--mywhite)}

#sp-footer{ background: var(--mydeepgreen);}

#sp-bottom{ border-top:5px solid var(--mydeepgreen);}
.continf { position: relative; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 50px; margin-left:30px; font-size: 15px;}
.continf h3{ padding: 50px 0 30px; text-align: left;}

.sp-copyright{ font-size:13px; font-weight:300; line-height:24px}
    
/*************************** pagination **************************/

.pagination > li > a{ color: var(--mydeepgreen);}

.pagination > .active > a{ border-color: var(--linka); background-color: var(--linka);}

.pagination > .active > a:hover,
.pagination > .active> a:focus, 
.page-link:hover,
.page-link:focus { border-color: var(--mydeepgreen); background-color: var(--mydeepgreen);
  color: var(--mywhite); box-shadow: none}

/****************************************************************/

/* to prevent browser caching, add the following meta tags immediately after the <jdoc:include type=”head” /> line (128 in this case) in your index.php file:
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="pragma" content="no-cache">
*/

.search-menu{ position: fixed; width: 100%; height: 20em; top: 0; left: 0; right: 0; white-space: nowrap; z-index: 9999; 
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(50%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.01))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%); 
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%); 
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%); 
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc000000", endColorstr="#1a000000",GradientType=0); 
opacity: 0; visibility: hidden;
transition: 500ms ease all;}

.search-menu.toggled{ top: 0; opacity: 1; visibility: visible;}
.search-menu .wrapper{ position: relative; margin: 3em auto 0 auto; padding: 0 1em;}
#sp-top1 .search-menu .wrapper input,
#sp-header .search-menu .wrapper input { width: 90%; padding: 0 0 0.125em 0; background: transparent; border: none; border-bottom: 3px solid #bfbfbf; font-size: 2em; color: #bfbfbf;}
.search-menu .wrapper input:focus{ outline: none; box-shadow: none;}
.search-menu .wrapper button{ position: absolute; display: block; width: 10%; right: 0; top: 0; background: transparent; border: none; color: #bfbfbf; font-size: 2em; transition: 500ms ease all;}
.search-menu .wrapper button:hover{ color: #fff;}
.search-menu .wrapper button:focus{ outline: none;}

@media only screen and (max-width: 480px){
#sp-top1 .search-menu .wrapper input,
#sp-header .search-menu .wrapper input,
.search-menu .wrapper button {font-size: 1.5em;} 
#searchForm input{ margin-bottom: 5px}
}

/****************************** Animations ***********************************/


/****************************** main page ************************************/

.mycont{ animation: zoomIn 1s 300ms both}
.usef{ animation: fadeInUp 1s 400ms both}
.mybtn{ animation: rollIn/*pulse rollIn swing;*/ 1s 1300ms both}
.myt a + a{ animation: zoomIn 1s 2300ms both}

/****************************** articles *************************************/

.com-content-article .page-header{ animation: fadeInDown 1s 300ms both}
.com-content-article__body{ animation: fadeInUp 1s 500ms both}

/****************************** the school/ management ***********************/

.sch h2{ animation: fadeInDown 1s 300ms both}
.sch .mod-custom.custom.visible{ animation: fadeInLeftBig 1s 0s both}

/****************************** accordion activities/ school life *************/

.acord.up{ animation: fadeInDown 1s 500ms both}
.acord.left{ animation: fadeInUp 1s 500ms both}
.acord.right{ animation: fadeInRight 1s 1s both}

/**************************** Library *******************************************/

.libr_menu .com-content-article__body{ animation: none}
.libr_item{ animation: fadeInUp 500ms 600ms both}
.libr_item:nth-child(4n+2){ animation-delay: 700ms; animation-duration: 600ms;}
.libr_item:nth-child(4n+3){ animation-delay: 800ms; animation-duration: 700ms;}
.libr_item:nth-child(4n+4){ animation-delay: 900ms; animation-duration: 800ms;}

/***************************** contact page *************************************/

.contact #sp-user1 h2{ animation: fadeInDown 1s 300ms both}
.contact #sp-user1 .mod-custom.custom{ animation: fadeInLeft 1s 500ms both}
.contact #sp-user2{ animation: fadeInUp 1s 1s both}
.contact #sp-left.visible{ animation: fadeInLeftBig 1.5s 0s both}
.contact #sp-component.visible{ animation: zoomIn 1.5s 300ms both}

/*
.contact #sp-component{ 
will-change: transform;
transition-timing-function: ease;
transition-duration: 0.1s;
transform-origin: center center 0px;
transform-style: preserve-3d;
filter: blur(0px);
}
*/
/**************************** For module news + blog news ******************/

.anim-item.visible{ animation-delay: 300ms; animation-duration: 1s; animation-fill-mode: both;}
.blog-items{ animation: fadeInUp 1s 500ms both;}
.blog-item{ animation-duration: 1s; animation-fill-mode: both;}
.alln.visible{ animation: fadeIn 1s 300ms both}

@media only screen and (min-width: 1200px){
.anim-item:nth-child(1).visible{ animation-name: fadeInLeftBig;}
.anim-item:nth-child(2).visible{ animation-name: fadeInUpBig;}
.anim-item:nth-child(3).visible{ animation-name: fadeInDownBig;}
.anim-item:nth-child(4).visible{ animation-name: fadeInTopRight;}

.blog-item.visible:nth-child(4n+1){ animation-delay: 300ms; animation-name: fadeInLeft;}
.blog-item.visible:nth-child(4n+2){ animation-delay: 500ms; animation-name: fadeInUp;}
.blog-item.visible:nth-child(4n+3){ animation-delay: 600ms; animation-name: fadeInDown;}
.blog-item.visible:nth-child(4n+4){ animation-delay: 400ms; animation-name: fadeInRight;}
.blog-item:nth-child(1){ animation-delay: 700ms; animation-name: fadeInLeft;}
.blog-item:nth-child(2){ animation-delay: 900ms; animation-name: fadeInUp;}
.blog-item:nth-child(3){ animation-delay: 1100ms; animation-name: fadeInDown;}
.blog-item:nth-child(4){ animation-delay: 800ms; animation-name: fadeInRight;}
}

@media only screen and (max-width: 1199px){
.anim-item:nth-child(1).visible{ animation-name: fadeInLeftBig;}
.anim-item:nth-child(2).visible{ animation-name: fadeInUpBig;}
.anim-item:nth-child(3).visible{ animation-name: fadeInDownBig;}

.blog-item.visible:nth-child(3n+1){ animation-delay: 300ms; animation-name: fadeInLeft;}
.blog-item.visible:nth-child(3n+2){ animation-delay: 500ms; animation-name: fadeInUp;}
.blog-item.visible:nth-child(3n+3){ animation-delay: 400ms; animation-name: fadeInDown;}
.blog-item:nth-child(1){ animation-delay: 700ms; animation-name: fadeInLeft;}
.blog-item:nth-child(2){ animation-delay: 900ms; animation-name: fadeInUp;}
.blog-item:nth-child(3){ animation-delay: 1100ms; animation-name: fadeInDown;}
}

@media only screen and (max-width:991px){
.anim-item:nth-child(1).visible{ animation-name: fadeInLeftBig;}
.anim-item:nth-child(2).visible{ animation-name: fadeInUpBig;}
.anim-item:nth-child(3).visible{ animation-name: fadeInDownBig;}
.anim-item:nth-child(4).visible{ animation-name: fadeInRightBig;}

.blog-item.visible:nth-child(2n+1){ animation-delay: 300ms; animation-name: fadeInLeft;}
.blog-item.visible:nth-child(2n+2){ animation-delay: 400ms; animation-name: fadeInUp;}
.blog-item:nth-child(1){ animation-delay: 700ms; animation-name: fadeInLeft;}
.blog-item:nth-child(2){ animation-delay: 900ms; animation-name: fadeInUp;}
}

@media only screen and (max-width: 493px){
.blog-item.visible:nth-child(2n){ animation-delay: 300ms; animation-name: fadeInLeft;}
.blog-item.visible:nth-child(2n+3){ animation-delay: 300ms; animation-name: fadeInRight;}
.blog-item:nth-child(1){ animation-delay: 700ms; animation-name: fadeInLeft;}
}

@media only screen and (max-width: 480px){
.anim-item:nth-child(1).visible{ animation-delay: 300ms; animation-name: fadeInLeftBig;}
.anim-item:nth-child(2).visible{ animation-delay: 400ms; animation-name: fadeInRightBig;}
.anim-item:nth-child(3).visible{ animation-delay: 400ms; animation-name: fadeInLeftBig;}
.anim-item:nth-child(4).visible{ animation-delay: 300ms; animation-name: fadeInRightBig;}
}

/***************************** search page **************************************/

.search-resultssear{ animation: fadeInUp 1s 0s both}