/* ==========================================================================
   RESPONSIVE EMBEDED IFRAME
   ========================================================================== */
.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%;}
.mapWrapper {position: relative;padding-bottom: 56.25%;}
.mapWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* ==========================================================================
   HEADER
   ========================================================================== */
@media only screen and (max-width: 1600px) {
    #logo { padding-left: 2vw;}
    #headerBottom { padding-right: 2vw;}
}
@media only screen and (max-width: 1200px) {
    #headerBottom { padding: 20px 2vw; line-height: 35px;}
    #my-header.scrollHeader #headerBottom { padding-top: 20px;}
    #logo { padding: 0; line-height: initial;}
    #languageMenu { top:100px;}
    .languagePicker a { padding: 0 12px;}
    .mainMenu li { padding: 0 30px 0 0;}
}
@media only screen and (max-width: 480px) {
    .mainMenu li {padding: 0 25px 0 0;}
}
/* ==========================================================================
   MMENU
   ========================================================================== */
@media only screen and (max-width: 1200px) {
    .mainMenu ul:nth-of-type(2) { margin: 0;}
    #phoneButton { margin: 0 15px 0 0;}
    #my-menu,.contactInfo li:first-of-type { display: none !important;}
    /*#navPrimary { display: none !important;}*/
    #showMenu { display: inline-block !important; margin: 0; float: right;}

    .mm-panels > .mm-panel, .mm-navbar__title, .mm-panels, .mm-menu_offcanvas, .mm-navbar { background: #131313 !important;}
    .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { color: #a7a7a7; font-size: 2.2em; line-height: 1.2em;}
    .mm-menu a.active { color: #be2222;}
    .mm-navbar { border: none;}
    .mm-navbar hr { display: none;}
    .mm-navbars_bottom span { justify-content: space-evenly;}
    .mm-menu .mm-navbars_bottom a { padding-bottom: 20px;font-size: 1.2em;}
    .mm-listitem { text-align: right;}
    .mm-listitem a { padding-right: 20px;}
}
@media only screen and (min-width: 1201px) {
    #showMenu { display: none !important;}
    #mm-my-menu { display: none !important;}
}
/* ==========================================================================
   GENERAL
   ========================================================================== */
@media only screen and (max-width: 1600px) {
    .wrapper{ width: 96vw;}
    .paddingLeft { padding-left: 2vw;}
    .paddingRight { padding-right: 2vw;}
}
@media only screen and (max-width: 1200px) {
    .generalPadding { padding: 80px 0;}
}
@media only screen and (max-width: 1000px) {
    .gridTitle { grid-gap: 5%; grid-template-columns: 1fr 1fr; margin-bottom: 40px;}
}
@media only screen and (max-width: 800px) {
    .sectionTitle { font-size: 4em;}
    .gridTitle div { margin-top: 15px;}
    .textItem { font-size: 3em;}
}
@media only screen and (max-width: 640px) {
    .gridTitle { grid-template-columns: 1fr; grid-gap: 0;}
}
@media only screen and (max-width: 480px) {
    .sectionTitle { font-size: 3em;}
    .textItem { font-size: 2em;}
    .generalPadding { padding: 60px 0;}
}
/* ==========================================================================
   HOME
   ========================================================================== */
@media only screen and (max-width: 1000px) {
    /*.homeVideo { min-height: 500px;}*/
    /*.homeVideo video { top: 0; min-width: 180vw; left: 50%; transform: translateX(-50%); right: auto;}*/
}
@media only screen and (max-width: 800px) {
    .homeIntro { padding-bottom: 200px; margin-bottom:60px;}
    .homeIntro .grid { padding-left: 250px;}
    /*.homeVideo video { min-width: 200vw;}*/
}
@media only screen and (max-width: 640px) {
    .homeIntro .grid { grid-template-columns: 1fr 480px;padding-left:0;}
    #circle svg { left: 120px;}
    #circle:after { margin: initial; right: 65px; left:auto;}
    /*.homeVideo video { min-width: 250vw;}*/
}
@media only screen and (max-width: 480px) {
    /*.homeVideo { min-height: 300px;}*/
    /*.homeVideo video { min-width: 230vw;}*/

    .homeIntro {margin: 0;}
    .homeIntro .grid { grid-template-columns: 1fr;}
    #circle {width: 320px; float: right;}
    #circle svg { left: 40px;}
    #circle:after { margin: initial; right: 70px; left:auto;}
}
/* ==========================================================================
   DESPRE
   ========================================================================== */
@media only screen and (max-width: 1200px) {
    .scrollText { font-size: 5em;}
}
@media only screen and (max-width: 1000px) {
    .intro .grid { grid-template-columns: 1fr;grid-gap: 5%;}
    .intro .grid img { width: 202px; position: absolute;right: 0; top: -130px;z-index: 0; display: none;}

}
@media only screen and (max-width: 800px) {
    .scrollText { font-size: 4.5em;position: relative;z-index: 1;}
    .under {position:relative; transform:none;font-size: 4em; text-align: left; text-transform: none; color:#ffffff;}
    .over { text-align: left;}
}
@media only screen and (max-width: 480px) {
    .under {font-size: 3em; }
}
@media only screen and (max-width: 640px) {
    .scrollText { margin: 0;}
    .intro .grid div:last-of-type { position: relative; z-index: 1;}
    .servicii .grid { grid-template-columns: 1fr;}
}
/* ==========================================================================
   PROIECTE
   ========================================================================== */
@media only screen and (max-width: 1400px) {
    #pagePortofoliu .paddingLeft { padding-right: 2vw;}
}
@media only screen and (max-width: 1200px) {
    #pagePortofoliu .grid { grid-template-columns: 155px 1fr;}
    #pagePortofoliu #portofoliu { grid-template-columns: repeat(2,1fr);grid-row-gap: 30px;}
}
@media only screen and (max-width: 800px) {
    .fadeImg { display: none !important;}
    #pagePortofoliu .sectionTitle { color: #222222 !important;}
}
@media only screen and (max-width: 700px) {
    #pagePortofoliu #portofoliu { grid-template-columns:1fr;}
    #portofoliu {grid-template-columns: repeat(2,1fr);grid-row-gap: 30px;}
}
@media only screen and (max-width: 600px) {
    .infoProiect .banner { display: block; margin-bottom: 30px;}
    .infoProiect .mainButton { display:none;}
    .proiect .mainButton { display: inline-block; float: right; margin-top: 40px;}
    .bannerContainer { display: none;}
    #pagePortofoliu .grid { grid-template-columns: 1fr; grid-gap: 30px;}
    #pagePortofoliu .grid .infoProiect ~ div { display: none !important;}
    #pagePortofoliu .generalPadding {padding-top: 20px;}
    .infoProiect { position: initial !important;top: auto !important;width: auto !important;left: auto !important;margin: auto !important;}
    #categorii li { display: inline-block;}
    #categorii li:after { content: '/'; margin: 0 10px;}
}
@media only screen and (max-width: 480px) {
    #portofoliu {grid-template-columns: 1fr;}
    #noutati {grid-template-columns: 1fr;}
}
/* ==========================================================================
   MAIN SLIDER
   ========================================================================== */
@media only screen and (max-width: 1400px) {
    .textSlider { left: 2vw;max-width: 50%;}
    .textSlider h1 { font-size: 6em;}
    .sliderContainer .bx-wrapper .bx-next { right: 2vw;}
    .sliderContainer .bx-wrapper .bx-prev { right: calc(2vw + 99px);}
}
@media only screen and (max-width: 1200px) {
    .textSlider h1 { font-size: 5em;}
    .textSlider p { font-size: 1em;}
    .textSlider {max-width: calc(100% - (2vw + 250px));}
}
@media only screen and (max-width: 800px) {
    .textSlider h1 { font-size: 4.5em; margin-bottom: 40px;}
    .textSlider span { font-size: 0.8em; margin-bottom: 10px;}
    .textSlider p { font-size: 0.9em; line-height: 1.2em; margin-bottom: 80px; display: none;}
    .textSlider {max-width:initial; right: 2vw;}
    .sliderContainer .bx-wrapper .bx-prev { right: calc(2vw + 59px);}
    .bx-wrapper .bx-controls-direction a { height: 60px; width: 60px; bottom: 133px;}
    .bx-wrapper .bx-controls-direction i { line-height: 60px;}
}
/*@media only screen and (max-width: 1000px) and (orientation:landscape)  {
    .sliderContainer article { height: 100vh; max-height:55vw; min-height: auto;}
}*/
/* ==========================================================================
   .zigzag
   ========================================================================== */
@media only screen and (max-width: 1200px) {
    .zigzagContent { display: block;}
    .zigzagContent tr, .zigzagContent td { display: block; width: 100% !important;}
}
/* ==========================================================================
   CONTACT
   ========================================================================== */
@media only screen and  (max-width: 800px) {
    #pageFormular .box2,#pageFormular .formStyle { width: 100%; float: none; margin-right: 0;}
    #pageFormular .formStyle { margin-top: 60px;}
    #pageFormular .mapWrapper { height: 300px;}
    .formStyle input, .formStyle textarea, .formStyle select { margin-bottom: 10px;}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
@media only screen and (max-width: 860px) {
    #footerInfo {grid-template-columns: 1fr;grid-gap: 0;}
}
@media only screen and (max-width: 640px) {
    .gridFooter { column-gap: 30px; margin-top: 50px;}
}
@media only screen and (max-width: 480px) {
    .gridFooter { grid-template-columns: 1fr 140px;}
    #footerInfo .socialMedia { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px;}
    #footerInfo .socialMedia li { padding: 0;}
    #developer { font-size: 0.9em;}
    #footerInfo li { display: block;}
}
/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
@media only screen and (max-width: 640px) {
    #instafeed-container {grid-template-columns: repeat(3,1fr);}
    #instafeed-container a { height: 33.4vw;}
}