/* FONT, RESET AND DEFAULTS
--------------------------------------------------------------*/
/*#region*/


/* FONT-FACE
--------------------------------------*/
/*#region*/
/* open-sans-300 - latin_latin-ext */
/* @font-face {
  font-display: swap;
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-300.woff2') format('woff2');
} */
/* open-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-400.woff2') format('woff2');
}
/* open-sans-italic - latin_latin-ext */
/* @font-face {
  font-display: swap;
  font-family: 'OpenSans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-400i.woff2') format('woff2');
} */
/* open-sans-600 - latin_latin-ext */
/* @font-face {
  font-display: swap;
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-600.woff2') format('woff2');
} */

/* istok-web-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Istok';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/istok-web-400.woff2') format('woff2');
}
/* istok-web-700 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Istok';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/istok-web-700.woff2') format('woff2');
}
/*#endregion*/


/* RESET
--------------------------------------*/
/*#region*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
html{box-sizing:border-box;}*, *:before, *:after{box-sizing:inherit;}a{text-decoration:none;outline:none;color:inherit;}input:focus{outline:none;}
/*#endregion*/


/* DEFAULTS
--------------------------------------*/
/*#region*/
body {
  font: normal 15px/22px OpenSans, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  word-spacing: 0.15em;
}

html,
body {
  height: 100%;
}

html {
  overflow-y: scroll;
}

/*force vertical scrollbar to avoid*/
html,
body {
  font-size: 1em;
  color: #212121;
}

a {
  text-decoration: none;
  outline: none;
  color: #0088CB;
}

a:hover {
  color: #354C9B;
}

a i.icon-external-link {
  vertical-align: middle;
  margin-left: 3px;
}

::-moz-selection {
  color: #fff;
  background: #353535;
}

/*00abd6*/
::selection {
  color: #fff;
  background: #353535;
}

::-webkit-selection {
  color: #fff;
  background: #353535;
}

h1,
.content .main_title {
  font: bold 2em Istok, sans-serif;
  line-height: 1em;
  padding: .5em 0 1em 0;
  text-transform: uppercase;
}

h2 {
  font: bold 1.6em Istok, sans-serif;
  line-height: 1em;
  padding: 0 0 15px 0;
}

h3 {
  font: bold 1.2em Istok, sans-serif;
  line-height: 1em;
  padding: 0 0 10px 0;
}

h3 span {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

body {
  background: #F7F7F7;
  margin: 0;
}

img {
  display: block;
}
/*#endregion*/


/*#endregion*/


/* COMMON
--------------------------------------------------------------*/
/*#region*/


#overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(51, 51, 51, .8);
}

/* HEIGHTS AND POSITIONS RELATIONSHIPS
--------------------------------------*/
/*#region*/

:root {
  --wrapMargin: 106px;

  --headerH: 120px;
  --headerHSticky: 74px;
  --headerHPhone: 62px;
  --headerHAdmin: 104px;

  --footerH: 80px;
}

/* Page Wrap and Footer */
/* .page-wrap {
  min-height: 100%;
  margin-bottom: calc(-1 * var(--wrapMargin));
}

.page-wrap:after {
  content: "";
  display: block;
}

.page-wrap:after {
  padding: 25px 0 0;
  height: var(--footerH);
}

.is_computer.home .page-wrap {
  margin-bottom: -221px;
}

.is_computer.home .page-wrap:after {
  padding: var(--footerH) 0 60px;
}

.is_phone .page-wrap {
  margin-bottom: -43px;
}

.is_phone .footer,
.is_phone .page-wrap:after {
  padding: 14px 0;
  height: 44px;
}

.is_computer.admin.home .page-wrap {
  margin-bottom: calc(-1 * var(--wrapMargin));
}

.is_computer.admin.home .footer,
.is_computer.admin.home .page-wrap:after {
  padding: 25px 0 0;
  height: var(--footerH);
} */

/* Header container */
.header {
  height: var(--headerH);
}
.header.sticky {
  height: var(--headerHSticky);
}
.is_phone .header {
  height: var(--headerHPhone);
}

/* Menu */
.header.sticky #menu,
.admin .header.sticky #menu {
  top: 15px;
}


/* Top Margin */
#top_margin {
  height: var(--headerHSticky);
  width: 100%;
  transition: height .4s ease;
}

.collapsed-header:not(.admin) #top_margin {
  height: var(--headerHSticky);
}

.is_phone:not(.admin) #top_margin {
  height: var(--headerHPhone);
  width: 100%;
}

.is_computer:not(.admin) #top_margin {
  height: var(--headerH);
}

.admin #top_margin {
  height: var(--headerHAdmin);
}

/*#endregion*/


/* Main and Fixed
--------------------------------------*/
/*#region*/
.main {
  width: 100%;
  min-height: 400px;
}

.fixed_width {
  position: relative;
  max-width: 1170px;
  /* min-height: var(--headerHSticky); */
  margin: 0 auto;
}
/*#endregion*/


/* HEADER
--------------------------------------*/
/*#region*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  background: #353535 url(img/pat6.png);
  border-bottom: solid 1px #202020;
}

header.sticky {
  box-shadow: 0px 2px 3px 1px #222;
  border: none;
}

.header_items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header_items .logo {
  display: flex;
  width: auto;
  height: 58px;
  transition: height .3s ease;
}
.collapsed-header .header_items .logo,
.admin .header_items .logo {
  height: 44px;
}

.logo,
header #menu,
header.sticky #menu {
  transition: all 0.2s ease;
}

.header,
header.sticky {
  transition: height .4s ease;
}
/*#endregion*/


/* MENU
--------------------------------------*/
/*#region*/
div#menu {
  display: block;
  min-height: 30px;
}

/* Hide mobile menu trigger */
.mobile-triggers-wrap {
  display: none;
  opacity: 0;
  transition: opacity .3s;
}
.mobile-trigger {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.menu.L1 {
  display: flex;
  align-items: center;
}
.menu li {
  display: block;
  position: relative;
  white-space: nowrap;
}

.menu li a {
  display: block;
  position: relative;
  padding: 8px 22px 6px;
  margin-left: 10px;
  text-transform: uppercase;
  font: normal 14px/30px OpenSans;
  color: #c1c1c1;
  transition: background .4s;
}

.menu li a.first {
  margin-left: 0;
}

.menu a.active_hover,
.menu a:hover,
.menu ul li:hover a,
.menu-trigger:hover {
  background: rgba(110, 110, 110, 0.4);
  color: #fff;
}

.menu li a.active,
.menu-trigger.active {
  color: #fff;
  background: rgba(220, 34, 33, 0.9);
  box-shadow: 0 0 2px 3px #252525;
}

/* Menu Icon */
.menu li a i {
  color: #c1c1c1;
  font-size: 1.6em;
  line-height: 1.2em;
}

.menu a:hover i,
.menu li a.active i,
.menu-trigger.active i {
  color: #fff;
}

/* LEVEL 2 */
.menu li:hover ul {
  display: block;
}

.menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 10px;
  z-index: 99;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
  min-width: 12em;
  background: #f7f7f7;
}

.menu ul li {
  display: block;
  width: 100%;
  background: #f7f7f7;
  margin: 0 0 0 0;
}

.menu ul li a {
  display: block;
  color: #353535;
  padding: 4px 22px;
  margin-left: 0;
}

.menu ul li:hover a {
  background: #e5e5e5;
  color: #212121;
}

.menu. ul li.active a,
.menu ul li.active:hover a {
  color: #fff;
  background: rgba(202, 35, 34, 1);
}

.menu li ul li a.active {
  box-shadow: none;
}

/* LEVEL 3 */
.menu. ul ul li {
  background: #f1f1f1;
}

.menu ul ul {
  top: 0;
  left: 100%;
}

ul.menu li a.hidden_menu i.fa-eye-slash {
  color: #ccc;
  font-size: 0.9em;
}
/*#endregion*/


/* CONTENT TITLE
--------------------------------------*/
/*#region*/
.content .main_title {
  background: #ECECEC;
  padding: 4.5% 2% 1.5%;
  margin-bottom: 3%;
  text-align: center;
}
/*#endregion*/


/* Roca Style
--------------------------------------*/
/*#region*/
.roca_style header {
  background-color: #c0c0c0;
  background-image: url(img/bodycornertl.jpg), url(img/bodycornertr.jpg);
  background-position: top left, top right;
  background-repeat: no-repeat;

  border-bottom: solid 1px #aaa;
}

.roca_style header.sticky {
  box-shadow: 0px 2px 3px 1px #888;
}

.roca_style .menu li a {
  color: #333;
  font-weight: bold;
}

.roca_style .content.user h1 {
  padding-left: 32px;
  background: url(img/title_icon.png) no-repeat 0 4px;
}

.roca_style .menu li a.active,
.roca_style .menu li a.active:before,
.roca_style .menu li a.active:after {
  color: #fff;
}

.roca_style .menu.L1 a:hover {
  color: #fff;
}
/*#endregion*/


/*#endregion*/


/* HOME 
--------------------------------------------------------------*/
/*#region*/

/* Home - Global */
.is_computer.home #top_margin {
  background: #353535;
}

.is_computer.admin #top_margin {
  background: none;
}

div.box_inner {
  padding: 0 !important;
  margin: 0 !important;
}

.home .content {
  margin-bottom: 0 !important;
}

.home .content section {
  background: none;
}

/* Home - Snippets Common */
.snip_list {
  display: flex;
  justify-content: space-between;

  padding: 0;
  text-align: center;
}

.snip_list .snip {
  align-self: stretch;
  width: 31%;
  background: #fff;
  margin: 0;
}

.snip_list .snip_title {
  padding: 0 4%;
  text-align: center;
  margin-top: 1em;
  font-size: 1.35em;
  line-height: 1.15em;
  min-height: 2.3em;
  overflow: hidden;
}

.section .snip_content {
  padding: 0 10% 5%;
  margin-top: 5%;
  text-align: center;
}

.snip_list .snip figure {
  padding: 1.5em 0 0;
}

.snip_list .snip figure img {
  display: block;
  margin: 0 auto;
}

.snip .snip_content p,
.snip .snip_content p a,
.snip .snip_content p span,
.snip .snip_content ul {
  color: #212121;
  line-height: 1.4em;
}

/* Home - ProRoca Section Snippets */
.proroca .snip:nth-child(3) {
  margin-right: 0;
}

.proroca .snip .snip_icon {
  padding: 1.5em 0 0;
}

.proroca .snip .snip_icon i {
  display: block;
  text-align: center;
  font-size: 3.5em;
  color: #aaa;
}

.proroca .snip .snip_content {
  padding: 0 10% 10%;
  margin-top: 5%;
  text-align: center;
}

/* Home - Servicii Section */
.home .servicii {
  background: #e5e5e5 url(img/texture3.jpg) no-repeat center center fixed !important;
  margin-bottom: 0 !important;
}

.home .servicii h2 {
  color: #f7f7f7
}

.home .servicii .snip {
  width: 48%;
  background: #f1f1f1;
}

.home .servicii .snip:nth-child(2) {
  margin-right: 0;
}

.home .servicii .snip_title {
  padding: 0;
  margin-bottom: 0;
  min-height: auto;
}

.home .servicii .snip_content {
  margin-top: 3%;
}

.home .servicii .snip_content .more,
.more {
  background: #313131;
  color: #eee;
  display: inline-block;
  font-family: "Istok", sans-serif;
  font-size: 12px;
  line-height: 53px;
  padding: 0 18px;
  text-transform: uppercase;
  transition: all 0.25s ease 0s;
  margin: 2em 0 0;
}

.home .servicii .snip_content .more:hover,
.more:hover {
  text-decoration: none !important;
  color: #ffffff;
  background: #dc2221;
}

/*#endregion*/


/* CONTENTS
--------------------------------------------------------------*/
/*#region*/


/* CONTENTS - COMMON
--------------------------------------*/
/*#region*/
/* Content Global */
.content.user {
  line-height: 1.5em;
  margin-bottom: 3em;
}

.content {
  min-height: 400px;
  position: relative;
}

.content.user section {
  line-height: 1.5em;
  padding: 4%;
  background: #fff;
  /* margin-bottom: 3em; */
}

/* Sections */
.section {
  padding: 2.5em 0;
}

.section h2 {
  margin: 0 0 1em 0;
  font-size: 2.2em;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center;
}

/* Content Links */
.content.user a:hover {
  text-decoration: underline;
}

/* Content Lists */
.content.user ul:not(.swiper-wrapper),
.content.user ol {
  padding-left: 40px;
}

.content.user ul li,
.content.user ol li {
  font-size: 1em;
}

.content.user ul li {
  list-style: outside;
  list-style-type: disc;
}

.content.user ol li {
  list-style: outside;
  list-style-type: none;
}

ol {
  counter-reset: list;
}

ol li {
  list-style: none;
  position: relative;
}

ol li:before {
  counter-increment: list;
  content: counter(list, decimal) ") ";
  position: absolute;
  left: -1.4em;
}

/* Skype shit */
span[class^='skype_pnh_container'] {
  display: none !important;
}
span[class^='skype_pnh_print_container'] {
  display: inline !important;
}

/*#endregion*/


/* SERVICII
--------------------------------------*/
/*#region*/
.section.servicii {
  display: flex;
  justify-content: space-between;
}
.servicii div p img {
  display: block;
  width: 100%;
  height: auto;
}
/*#endregion*/


/* DESPRE ROCA
--------------------------------------*/
/*#region*/
.content .despre-noi.section {
  padding: 0;
}
.despre-noi.section .two_cols {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 4% 8%;
}

.despre-noi .two_cols .col {
  width: 50%;
}
.despre-noi .two_cols .c1 {
  padding-right: 5%;
  /* background-color: cornsilk; */
}

.despre-noi .two_cols .c2 {
  padding-left: 5%;
  /* background-color: burlywood; */
}

.despre-noi img {
  display: block;
  margin: 0 auto;
}
/*#endregion*/


/* CONTACT
--------------------------------------*/
/*#region*/
.content .contact.section {
  padding: 0;
  background: #fff;
  box-shadow: 0px 0px 3px 2px #e7e7e7;
}

.contact .two_cols {
  max-width: 800px;
  margin: 0 auto;
}
.contact .two_cols .col {
  width: 50%;
  padding: 6% 8%;
}
.contact .social-links {
  display: flex;
  align-items: center;
}

.contact .figure-row {
  width: 100%;
}

.contact iframe {
  display: block;
}

.contact .two_cols p i {
  display: inline-block;
  width: 15px;
  vertical-align: middle;
  margin-top: -0.2em;
  text-align: left;
  font-size: inherit !important;
}

.contact .two_cols i.fa-mobile-phone {
  font-size: 1.4em !important;
  text-indent: 3px;
}

.contact .two_cols h3.phone span {
  display: inline-block;
  padding-left: 10px;
}

.contact .mapimg {
  display: block;
  clear: both;
}
/*#endregion*/


/*#endregion*/


/* FOOTER
--------------------------------------------------------------*/
/*#region*/

/* Common */
.footer {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  padding: 3rem 0;
  text-align: center;
  background: #353535 url(img/pat6.png) fixed;
  border-top: solid 1px #202020;
}

.footer a,
.footer p,
.footer .center,
.center {
  color: #aaa;
}

.footer .roca_big,
.roca_big {
  font-family: "Istok", "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  font-weight: bold;
  font-size: 1.4em !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer .roca_big a,
.roca_big a {
  color: #aaa;
  transition: color 0.5s;
}

.footer .roca_big a:hover,
.roca_big a:hover {
  color: #fff;
  text-decoration: none !important;
}

.footer .copyright,
.copyright {
  padding: 5px 0;
  font: normal .9rem/1.5 Istok !important;
  color: #777 !important;
}

.footer .context_edit_link i {
  color: #aaa;
}

/* Home Footer */
.home .footer .roca_big,
.roca_big {
  font-size: 2.5em !important;
}

.home .footer .copyright,
.copyright {
  font-size: 1.2em;
  font-weight: normal;
}
/*#endregion*/


/* MISC
--------------------------------------------------------------*/
/*#region*/
.error,
.error i {
  color: #dc2223;
  padding: 8px 0 0 0;
}

.bold {
  font-weight: bold;
}

.blue_link {
  color: #0088CB !important;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.displayN {
  display: none;
}

.reset0 {
  margin: 0;
  padding: 0;
}

.shadow_dark {
  box-shadow: 0px 2px 3px 1px #222;
  border: none;
}

.shadow_medium {
  box-shadow: 0px 1px 2px 1px #ddd;
}

.shadow_small {
  box-shadow: 0px 1px 2px 1px #ddd;
}

.rounded {
  border-radius: 5px;
}

.rounded20_tl_bl {
  border-radius: 20px 0px 0px 20px;
}

.rounded20_tr_br {
  border-radius: 0px 20px 20px 0px;
}

.rounded10_tl_bl {
  border-radius: 10px 0px 0px 10px;
}

.rounded10_tr_br {
  border-radius: 0px 10px 10px 0px;
}

.circular130 {
  width: 130px;
  height: 130px;
  border-radius: 65px;
}

.circular200 {
  width: 200px;
  max-height: 200px;
  border-radius: 100px;
}

/* .clear{clear:both;} */
/* .clearfix:after{content:""; display:table; clear:both;} */

.relative {
  position: relative;
}

.hidden {
  opacity: 0;
}

.visible {
  opacity: 1;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.anim,
.anim * {
  transition: all 0.37s cubic-bezier(0.45, 0, 0.58, 1);
}

.context_edit_link {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none !important;
}

.context_edit_link:hover i {
  color: #dc2221;
}
/*#endregion*/



/* MEDIA QUERIES
--------------------------------------------------------------*/
/*#region*/


/* All Touch devices */
@media only screen and (hover: none) {

  /*  */

}


@media only screen and (min-width: 50px) and (max-width: 1250px) {

  .fixed_width {
    max-width: 960px;
  }

  .list_projects .project {
    width: 31.3%;
    margin: 0 1.5% 30px 1.5%;
  }

  #overlay {
    display: none;
  }

}


@media only screen and (max-width: 1024px) {

  .fixed_width {
    margin: 0 2%;
  }

  #logo {
    margin-left: 2%;
  }

}


@media only screen and (max-width: 960px) {

  .header_items .logo {
    height: 40px;
  }

  .menu li a {
    font-size: 13px;
  }
  .menu li a {
    padding: 6px 22px 4px;
  }
  .menu li a i {
    font-size: 18px;
  }

  .two_cols {
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
  }
  .servicii.section .two_cols,
  .despre-noi.section .two_cols {
    max-width: 670px;
    margin: 0 auto;
  }
  .despre-noi.section .two_cols .col,
  .despre-noi.section .two_cols .col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .servicii.section .two_cols .c1,
  .despre-noi.section .two_cols .c1 {
    margin-bottom: 5rem;
  }

  .servicii.section .two_cols h3 {
    padding: 0;
  }
  .servicii.section .two_cols .col {
    width: 100%;
  }
  
  .despre-noi.section .two_cols {
    max-width: 670px;
  }
  .despre-noi.section .two_cols .col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .despre-noi.section .two_cols .c1 {
    margin-bottom: 2rem;
  }

  .contact .two_cols {
    flex-direction: row;
  }

}


/* 📱 Start mobile nav !
----------------------------------------------*/
@media only screen and (max-width: 820px) {


  /* Common & Reset */
  /*#region*/
  html {
    overflow-x: hidden;
  }

  .fixed_width {
    margin: 0 4%;
  }

  .header .fixed_width {
    margin: 0;
  }

  .header.sticky #menu {
    margin-top: 0;
  }
  .header.sticky #menu,
  .admin .header.sticky #menu {
    top: 0;
  }

  .header {
    padding: 0 2%;
  }

  #logo {
    margin-left: 0;
  }

  .header_items .logo,
  .collapsed-header .header_items .logo,
  .admin .header_items .logo {
    height: 38px;
  }

  .content .section h3 {
    font-size: 1.4em;
  }
  /*#endregion*/


  /* MENU
  --------------------------*/
  /*#region*/
  .mobile-triggers-wrap {
    display: block;
    position: relative;
    z-index: 1001;

    width: 48px;
    height: 44px;

    background-color: rgba(120, 120, 120, .3);
    opacity: 1;
    pointer-events: all;
  }

  .mobile-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: all;
  }
  .close-trigger {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-trigger i {
    font-size: 22px;
    color: #fff;
    margin-right: -2px;
  }

  body.menu-opened {
    overflow: hidden;
  }

  .menu-opened .menu-trigger {
    opacity: 0;
    pointer-events: none;
  }
  .menu-opened .close-trigger {
    opacity: 1;
    pointer-events: all;
  }

  .menu-opened #logo {
    z-index: 1002;
  }

  /* --- */

  .header #menu,
  .header.sticky #menu {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: -100vh;
    left: 0;
    z-index: 1001;

    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    background: #313131;

    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }

  .menu-opened .header #menu {
    overflow-y: auto;
    top: 0;
    opacity: 1;
    pointer-events: all;
  }

  .menu-opened .mobile-triggers-wrap {
    z-index: 1002;
  }

  .menu.L1 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
  }

  .menu li,
  .menu li a {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: transparent;
    margin: 0;
  }
  .menu li.parent {
    background: #5a5a5a;
  }

  .menu ul li {
    background-color: transparent;
  }

  .menu li a {
    font-size: 1.2rem;
    padding: 1em 3%;
    background: #414141;
    margin-bottom: 1px;
  }

  .menu li a:hover {
    background: #555;
  }

  .menu li a.active {
    box-shadow: none;
    background: #dc2221;
  }

  /* Level 2 */
  .menu ul {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-shadow: none;
    background: #4a4a4a;
  }

  .menu ul li a {
    text-align: center;
    font-size: 1rem;
    padding: .6em 3%;
    color: #ddd;
    background: transparent;
    border: none;
    margin: 0;
  }

  .menu ul li a:hover {
    background: #6a6a6a;
    color: #fff
  }
  /*#endregion*/


  /* HOME
  --------------------------*/
  /*#region*/
  .home .section .fixed_width {
    padding: 0;
    margin: 0;
  }

  .snip_list .snip {
    display: block;
    float: none;
    width: 100%;
    padding: 0 2%;
    margin: 0 0 4vh 0;
  }

  .section .snip_content {
    margin-top: 10px !important;
  }

  .home .section .snip_header {
    padding-top: 10%;
  }

  .home .snip_list {
    flex-direction: column;
  }

  .home .proroca .snip_content {
    padding-bottom: 5%;
  }

  .home .servicii .snip {
    width: 100%;
  }
  /*#endregion*/


  /* Titles and Cols
  -------------------------*/
  /*#region*/
  .content h1.main_title {
    padding: 10% 0 5%;
    margin-bottom: 5%;
  }

  .content .section h3 {
    padding-bottom: 0;
    line-height: 1.3em;
  }
  /*#endregion*/
  

}


@media only screen and (max-width: 640px) {

  .header {
    position: absolute;
  }

  .content .snip_header {
    font-size: 1.7em;
    line-height: 1.1em;
    padding-bottom: 0;
  }

  .is_phone .footer .roca_big,
  .is_phone .roca_big {
    font-size: 1.2em !important;
  }

  .snip_list .snip_title {
    margin-top: .5em;
  }
  .proroca .snip .snip_icon i {
    font-size: 2.8em;
  }

  .contact .two_cols {
    flex-direction: column;
    justify-content: center;
    max-width: 540px;
    margin: 0 auto;
  }
  .contact .two_cols .col {
    width: 100%;
    text-align: center;
  }
  .contact .social-links {
    justify-content: center;
  }

  .home .footer .copyright,
  .copyright {
    font-size: 1em;
  }

}


@media only screen and (max-width: 485px) {

  html {
    overflow: auto !important;
  }

  /*let the flow live for small devices*/
  #logo {
    margin-left: 3%;
  }

  .content .section h3 {
    padding-top: 1em;
  }

  .content h1.main_title {
    font-size: 1.4em;
    padding-top: 10%;
  }

  .menu li a {
    font-size: 1rem;
  }

}


/*#endregion*/