/* ==========================================================================
   General
   ========================================================================== */
/*@media only screen and (min-width: 961px) and (max-width: 1350px){ .wrapper { width: 90%;}}
@media only screen and (max-width: 960px) { .wrapper{ width: 96%;}}*/

/* ==========================================================================
   RESPONSIVE EMBEDED VIDEOS
   ========================================================================== */
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/* ==========================================================================
   GENERAL
   ========================================================================== */
@media only screen and (max-width: 960px ) {
    .generalPadding { padding: 40px 0;}
}
@media only screen and (max-width: 800px ) {
    .generalPadding { padding: 30px 0;}
    h1 { font-size: 26px; margin-bottom: 25px;}
    h2 { font-size: 22px; margin-bottom: 20px;}
    h3 { font-size: 18px; margin-bottom: 15px;}
    h3 { font-size: 16px; margin-bottom: 15px;}
    .mainButton { padding: 10px 30px;}
    .formStyle input, .formStyle textarea, .formStyle select { padding: 10px 15px;}
}
/* ==========================================================================
   HEADER
   ========================================================================== */
@media only screen and (max-width: 1400px ) {
    .nav span { padding: 0 12px;}
}
@media only screen and (max-width: 1200px ) {
    #logo { padding: 15px 15px 15px 0;}
    #pageHeader .wrapper { width: 96%;}
    .nav span { padding: 0 10px;}
}
@media only screen and (max-width: 1000px ) {
    #navPrimary, .headerBar {display: none;}
    .scrollMenu .menu { position: absolute;}
    #logo { padding: 10px 15px 10px 0;}
    #bannerHome { min-height: 300px;}
    .breadcrumbContainer { padding: 10px 0;}
    .breadcrumbContainer h1 { font-size: 2.5em; padding-top: 68px;}

    .headerContact li { display: inline-block;margin-left: 10px; color: rgba(255, 255, 255, 0.8); font-family: "PT Sans", sans-serif; font-weight: 400;}
    .headerContact i { margin-right: 5px;font-size: 0.9em !important; }
    .headerContact a { color: rgba(255, 255, 255, 0.8); font-size: 0.9em !important; }
}
@media only screen and (max-width: 640px ) {
    .breadcrumbContainer ul { float: left;}
    .breadcrumbContainer li { font-size: 13px;}
    .breadcrumbContainer h1 { font-size: 2em;}
}
@media only screen and (max-width: 480px ) {
    .breadcrumbContainer li { overflow: hidden; margin:0; line-height: initial;}
    .breadcrumbContainer a { display: inline-block; padding-right: 15px;}
    .breadcrumbContainer a:after { position: relative; right: -9px;}
    .breadcrumbContainer li:last-of-type {width: 320px;white-space:nowrap;   text-overflow: ellipsis;}

    .download { padding-left: 10px;}
}
/* ==========================================================================
   PANELS
   ========================================================================== */
@media only screen and (max-width: 1000px ){
    #header-panels{ background-color:#012d6c; text-align:left; padding: 10px; border: none;}
    #header-panels IMG { width: 20px; margin-right: 15px;}
    #header-panels A {font-size: 22px; color: #fff;}
    #left-panel { background-color: #fff;}
    #right-panel { background-color: #fff;}
    #right-panel a { display: flex; gap: 10px; margin-bottom: 5px; align-items: center;}
    #right-panel i {width: 21px;}
    #nav { margin: 20px 0 0 0; padding: 0;}
    #nav LI { font-family: 'Roboto', sans-serif; line-height: 24px;}
    #nav LI SPAN { font-weight: 500; color: #444; font-size: 16px;}
    #nav LI A { display: block; color: #444;}
    #nav LI .active span,  #nav LI .active { color: #339fcd;}
    #nav LI UL { padding-left: 20px;}

    .closeButton { font-size: 24px; line-height: 24px; float: right;}
}
@media only screen and (min-width: 1001px){
    #page { padding: 0 !important;}
    #header-panels,#left-panel, #right-panel, .panel-trigger { display: none !important;}
}
/* ==========================================================================
   PAGES
   ========================================================================== */
@media only screen and (max-width: 1200px ){
    #contactPage .contactDetails {width: 40%;}
    #contactPage .formStyle { width: 58%;}
    #contactPage .formStyle .box2 { width: 100%; margin-right: 0;}
}
@media only screen and (max-width: 800px ){
    .detailPage .miniBorder { margin: 15px 0 20px;}
    .anunt { width: 48%;}
    .anunt:nth-of-type(odd) {margin-right: 4%;}
    .anunt:nth-of-type(even) {margin-right: 0;}
}

@media only screen and (max-width: 640px ){
    .detailPage .miniBorder { margin: 15px 0 20px;}
    .anunt { width: 100%;}
    .anunt:nth-of-type(odd), .anunt:nth-of-type(even) {margin-right: 0;}
    .iconText i { font-size: 30px;}
    .iconText p { width: 45px; padding: 5px;}
    .iconText ul { width: calc(100% - 45px); padding: 5px 15px;}
    #contactPage .QapTcha { width: 100% !important; margin-bottom: 20px;}
    #contactPage .QapTcha .TxtStatus { width: 75%;}
}
@media only screen and (max-width: 600px ){
    #contactPage .contactDetails, #contactPage .formStyle { width: 100%;}
    #contactPage .formStyle { margin-top: 20px; padding: 15px;}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
@media only screen and (max-width: 960px ){
    #pageFooter { padding: 20px 0 15px 0;}
    #pageFooter .wrapper { width: 96%;}
    .upPage { right: 10px; bottom: 60px;}
    .upPage a { width: 40px; height: 40px; line-height: 40px;}
}
@media only screen and (max-width: 640px ){
    .footerTop .box3 { width: 48%;}
    .footerTop .box3:nth-of-type(odd) {margin-right: 4%;}
    .footerTop .box3:nth-of-type(even) {margin-right: 0;}
}
@media only screen and (max-width: 480px ){
    .upPage { bottom: 100px;}
}
/* ==========================================================================
   USER
   ========================================================================== */
@media only screen and (max-width: 1400px ){
    .boxPadding { padding: 60px 2vw;}
    .gridPage .whiteBg { padding-top: 40px;}
    .paddingRight { padding-right: 2vw;}
    .paddingLeft { padding-left: 2vw;}
    .pageTitle img { max-width: 150px;}
    .gridUtilizator { margin-left: 316px;}
    .utilizatorMenu { width: 316px;}
    .utilizatorData .styleForm, .utilizatorData .pageTitle{ padding: 0 2vw;}
    .utilizatorMenu #logo { padding: 2vw 0 0 2vw;}
    .utilizatorHeader { padding: 2vw;}
    .gridUtilizator .styleForm { margin: 0 2vw;}
    .utilizatorMenu { padding-right: 2vw; padding-top: 2vw; gap: 2vw;}
    .utilizatorMenu li a { padding-left: 2vw;}
}
@media only screen and (max-width: 1000px ) {
    .gridPage { grid-template-columns: 1fr;}
    .gridUtilizator { margin:0;}
    .utilizatorMenu { position: relative; width: auto;}
    .utilizatorMenu #logo { padding: 2vw 0 2vw 2vw;}
    .utilizatorMenu ul { display: none;}
    .utilizatorHeader { display: flex; justify-content: flex-end; gap: 30px;}
}
@media only screen and (max-width: 640px ) {
    .pageTitle img { max-width: 100px;}

}
@media only screen and (max-height: 560px ) {
    .gridUtilizator { margin:0;}
    .utilizatorMenu { position: relative; width: auto;}
    .utilizatorMenu ul { display: none;}
    .utilizatorHeader { display: flex; justify-content: flex-end; gap: 30px;}
    .utilizatorHeader .panel-trigger { display: inline-block !important; }
    .utilizatorMenu #logo { padding: 2vw 0 2vw 2vw;}
    #right-panel { display: block !important;}
}