﻿

/*-----------------------------------------------------------------------------
------------------fhd---------------fhd--------------------fhd---------------
-----------------------------------------------------------------------------*/

a.gryph-arrow:after, button.gryph-arrow:after {
    -webkit-transition: all .2s ease;-moz-transition:all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;
    font-family:'mdl2';
    font-weight:bold;
    font-size:12px;
   left:5px;
  top:0px;
   position:relative;
    content:"\E76C";
   line-height:inherit;
   padding:0;
   margin:0;
   display:inline-block;
   vertical-align:middle;
   color:inherit;
}
button:not(.button_div).gryph-arrow:after {left:0px;}
button:not(.button_div).gryph-arrow.prev:after { content:"\E76B"; font-weight:normal;left:-1px;}
button:not(.button_div).gryph-arrow.next:after { content:"\E76C";font-weight:normal}
.gryph-arrow-before span:not(.no-arrow) {}
.gryph-arrow-before span:not(.no-arrow):after {
    font-family:'mdl2';
    font-weight:bold;
    font-size:14px;
    content:"\E70D";
    width:20px; height:20px;
    top:0; bottom:0; margin:auto;
    position:absolute; right:20px;
    text-align:center;
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    -webkit-transition: all 0.1s ease;-moz-transition:all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;
}
.gryph-arrow-before.select span:not(.no-arrow):after  {
   transform:rotateZ(180deg);
   -webkit-transform:rotateZ(180deg);
}
a.gryph-arrow:hover span, button.gryph-arrow:hover span  {  border-bottom:solid 2px; border-color:inherit }
div:not(.links)>a.gryph-arrow:hover span  { left:-5px;   }
a.gryph-arrow:hover:after, button:not(.nav).gryph-arrow:hover:after  { left:10px}


/*menu LINK*/
a.c-uhf-nav-link { border-bottom:solid 2px transparent; cursor:pointer; margin-top:2px;}
a.c-uhf-nav-link:hover {border-bottom:solid 2px; border-color:inherit}



body, form {color: #333;margin:0;padding:0; -webkit-font-smoothing: antialiased;font-family: 'wf_segoe','Segoe UI',Arial,Tahoma; overflow:hidden;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;  
-webkit-touch-callout: none;
 touch-action: pan-y;
}
body {min-width:320px; }
html {overflow-x:hidden;min-width:320px;}

/*SEGOE*/
h1  {Font-family:'wf_segoe','Segoe UI', Arial,Tahoma;  font-size:41px;letter-spacing:0px;  line-height:normal;color:#000000} /*Nappis Hero*/
h2 {Font-family:'wf_segoe','Segoe UI',Arial,Tahoma;  font-size:34px;letter-spacing:0px;  line-height:normal;color:#000000} /*sub Hero*/
p, textarea,label, a  {Font-family:'wf_segoe','Segoe UI',Arial,Tahoma;font-size:15px; color:#000000;  line-height:1.6; font-weight:400}
.semibold {font-weight:600;}
.bold {font-weight:800;}
a:link, a:focus, button:focus{ outline-style: none; text-decoration:none; }
form:focus, a:focus, button:focus, div[tabindex="0"]:focus, label[tabindex="0"]:focus {outline:dashed 2px #000000;}
a.white:focus {outline:dashed 2px #ffffff;}

section:focus {outline:none !important}
.bk_white, .bk_whiteg { background-color:#ffffff}
.bk_gray {background-color:#979797}
.bk_blue {background-color:#0078d4}
.bk_black {background-color:#000}
.bk_green {background-color:#89e872}
.bk_transparent {background-color:transparent}
.uppercase { text-transform:uppercase}
.cl_white { color:#ffffff }
.cl_black { color:#000000 }
.cl_red {color:#ed1c24}
.cl_green {color:#008272}
.cl_gray {color:#aeaeae}
.cl_gray1 {color:#4a4a4a}
.cl_blue {color:#005BB3}
.border_box  {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;     }
.button_div {line-height:40px; position:relative; padding-left:20px; padding-right:20px;         
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;  
  box-sizing: border-box;       
  overflow:hidden;  vertical-align:middle;
  display:inline-block; cursor:pointer; text-align:center
}
.button_div:hover { -webkit-transition: color 0.4s ease, background-color 0.4s ease;
  -moz-transition:color 0.4s ease, background-color 0.4s ease;
  -o-transition: color 0.4s ease, background-color 0.4s ease;
  transition: color 0.4s ease, background-color 0.4s ease;}
.links .button_div {padding-left:0px;}
.button_div span {color:inherit;   position:relative;left:0;transition:left 200ms ease-in-out; border-bottom:solid 2px transparent; line-height:24px; vertical-align:middle}
.button_div p, .button_div span {display:inline-block; font-size:16px;}

.wrapper_box {width:90%;max-width:1800px;margin: 0 auto;position: relative;  padding:0 0%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;   }
.web_kit_slow {-webkit-transition: all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.web_kit_fast {-webkit-transition: all 0.1s ease;-moz-transition:all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
.vert_cent {position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);left:0; right:0 }

#Page {max-width: 1920px; min-width: 320px;margin: 0 auto; position: relative;overflow: hidden; background-color: #ffffff;  height:100%;}

#Menu {width:100%;max-width:1920px; margin:0 auto;  position:relative; }   
#Menu .wrapper_box {width:100%}
#Menu .wrapper_box a:not(.button_div) {display:block; font-size:16px; line-height:1.4;  height:100%}
#Menu .Nav {display:-webkit-flex; display:-ms-flexbox;display:flex; flex-wrap:nowrap;-ms-flex-wrap:nowrap;-webkit-box-align:center;-ms-flex-align:center; align-items:center ;justify-content:flex-end}
#Menu .Nav li {padding: 0 0; padding-right:30px; position:relative}
#Menu .menu-2 {padding:10px 40px; background-color:#eee;max-width:1920px; }
#Menu .menu-2 a:not(.button_div) {font-size:14px;}
#Menu .menu-2 a.activ {color:#005BB3;  border-bottom:solid 2px;}

#Hero {width:100%;height:0px; padding-bottom:31%;  position :relative;overflow:hidden;}
#Hero .bg { position:absolute;width:100%;height:100%;left:0;top:0;background: #000 url('/static/img/landing/morele/microsoft-legal/hero.jpg') no-repeat center top; background-size:cover;}
#Hero .wrapper_box {height:100%; position:relative; width:95% ; position:absolute; left:0;right:0; margin:0 auto}
#Hero .box  {width:60%; padding-left:40px;}
#Hero .btn {padding-top:50px}
#Hero .btn .button_div {padding:0px 40px}

#NewName {position:relative}
#NewName .wrapper_box{padding:60px 0; width:90%}
#NewName .wrapper_box .info {width:50%; margin:0 auto; text-align:center;}
#NewName .full-box .items {padding:40px 0; display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between}
#NewName .full-box .items .item {height:700px;width:25%;display:-webkit-flex; display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start; justify-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column; flex-direction:column;-webkit-box-align:center;-ms-flex-align:center; align-items:center}
#NewName .full-box .items .item[data-index='1'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b1.jpg') no-repeat center center; }
#NewName .full-box .items .item[data-index='2'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b2.jpg') no-repeat center center; }
#NewName .full-box .items .item[data-index='3'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b3.jpg') no-repeat center center; }
#NewName .full-box .items .item[data-index='4'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b4.jpg') no-repeat center center; }
#NewName .full-box .items .item {background-size:cover;}
#NewName .full-box .items .box { width:100%; height:100%; display:-webkit-box;
display:-ms-flexbox;
display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column}
#NewName .full-box .items .box p {text-align:center}
#NewName .full-box .items .box .small {font-size:18px; padding-bottom:15px}
#NewName .full-box .items .box .big {font-size:26px; padding-bottom:50px}
#NewName .full-box .items .box .btn {text-align:center; padding-bottom:20px}

#Cechy {position:relative}
#Cechy .wrapper_box {padding:60px 0px; padding-top:0px;}
#Cechy .wrapper_box .info {width:70%; margin:0 auto; text-align:center; }
#Cechy .wrapper_box .info h2 {padding-bottom:60px;}
#Cechy .items {display:-webkit-box;
display:-ms-flexbox;
display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row; padding:20px 0;}
#Cechy .items .item {width:50%;}
#Cechy .items .item .title {font-size:34px;}
#Cechy .items .item.image {width:65%;}
#Cechy .items .item.image img {width:100%; height:auto}
#Cechy .items .item.text {padding:40px; align-self:center}
#Cechy .items .item.text>p {padding-bottom:10px}
#Cechy .info.down {padding-top:40px}
#Cechy .info .btn {text-align:center; padding-bottom:20px}


#Produkty {background-color:#f6f6f6}
#Produkty .wrapper_box {padding:60px 0px;}
#Produkty .wrapper_box .info {width:70%; margin:0 auto; text-align:center}
#Produkty .items {display:-webkit-box;
display:-ms-flexbox;
display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row; padding:0px 0px; margin:40px 0; background-color:#fff}
#Produkty .items .item {width:50%; overflow:hidden}
#Produkty .items .item h2 {padding-top:30px}
#Produkty .items .item.text {padding:40px; align-self:center}
#Produkty .items .item.text>p { font-size:34px;}
#Produkty .items .item.image img {height:100%}
#Produkty .items .item .btn {padding-top:10px}

#BlueBox {}
#BlueBox .wrapper_box {padding:30px 0;}
#BlueBox .wrapper_box .items {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0; background-color:#056bbc}
#BlueBox .items .item {width:45%;}
#BlueBox .items .item.image {width:55%;background: #fff url('/static/img/landing/morele/microsoft-legal/box.jpg') no-repeat center center; background-size:cover}
#BlueBox .items .item.text {padding:40px; align-self:center; flex:1}

#Zysk { background-color:#f6f6f6}
#Zysk .wrapper_box {padding:60px 0px;}
#Zysk .wrapper_box .info {width:50%; margin:0 auto; text-align:center}
#Zysk .items {display:flex; flex-wrap:nowrap; justify-content:flex-start; flex-direction:row; padding:0px 0px; margin:40px 0; text-align:center}
#Zysk .items .item {width:10%;margin:2%; overflow:hidden; display:-webkit-box;
display:-ms-flexbox;
display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-pack:distribute; justify-content:space-around }
#Zysk .items .item .image {}
#Zysk .items .item .image img {}
#Zysk .items .item .text {padding-top:15px}

#GdzieKupic { background-color:#fff}
#GdzieKupic .wrapper_box {padding:60px 0px;}
#GdzieKupic .wrapper_box>.info {width:50%; margin:0 auto; text-align:center;}
#GdzieKupic .items {display:flex; flex-wrap:wrap; justify-content:flex-start; flex-direction:row; padding:0px 0px; margin:40px auto; text-align:center;align-items:stretch; width:100%;}
#GdzieKupic .items .item {width:20%;padding:10px;}
#GdzieKupic .items .item .box {padding:20px; border:solid 1px #dddddd; height:100%; display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between}
#GdzieKupic .items .item .image {text-align:center}
#GdzieKupic .items .item .image img {width:90%}
#GdzieKupic .items .item .text {padding-top:15px}
#GdzieKupic .items .item .text .tytul {font-size:16px}
#GdzieKupic .items .item .btn {padding-top:10px}
#GdzieKupic .items .item .button_div {width:100%}

#Legal {}
#Legal .wrapper_box {padding:60px 0px;}
#Legal .wrapper_box .info {width:70%; margin:0 auto; text-align:center;}
#Legal .wrapper_box .btn {padding:40px;}


/*-----------------------------------------------------------------------------
------------------1280---------------1280--------------------1280---------------
-----------------------------------------------------------------------------*/




@media only screen and (min-width:1101px) and (max-width:1400px)
  {

#licz {background-color: red;}
h1  {font-size:34px;} /*Nappis Hero*/
h2 {font-size:28px;} /*sub Hero*/
p, textarea,label,a  {font-size:15px;}
#Menu .menu-2 a {font-size:14px}

#Hero {padding-bottom:45%;}
#Hero .box  {width:70%;}
#Hero .box p.subtitle {font-size:36px}
#Hero .btn {padding-top:30px}
#Hero .btn .button_div {line-height:40px; padding:0 30px}
#Hero .btn a span {font-size:22px;}

#Cechy .wrapper_box .info {width:80%}

#Zysk .items .item {margin:3%}
#Zysk .items .item .image img {width:100%; height:auto}
#GdzieKupic .wrapper_box .info {width:100%}
#GdzieKupic .items  {justify-content:center}
#GdzieKupic .items .item {width:25%}


#Legal .wrapper_box .info {width:80%}

}


/*-----------------------------------------------------------------------------
------------------760---------------760--------------------760---------------
-----------------------------------------------------------------------------*/

@media only screen and (min-width:601px) and (max-width:1100px)
  {
     
#licz {background-color: orange;}

h1  {font-size:30px; line-height:1.4} /*Nappis Hero*/
h2 {font-size:28px;} /*sub Hero*/
p, textarea,label,a  {font-size:14px;}
#Menu .menu-2 a {font-size:14px}

#Hero {padding-bottom:55%; }
#Hero .box  {width:45%; padding-left:20px}
#Hero .btn {padding-top:20px}

#NewName .full-box .items {flex-wrap:wrap}
#NewName .full-box .items .item {width:50%; height:400px;}
#NewName .full-box .items .item[data-index='1'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b1.jpg') no-repeat center center; background-size:100% auto }
#NewName .full-box .items .item[data-index='2'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b2.jpg') no-repeat center center; background-size:100% auto }
#NewName .full-box .items .item[data-index='3'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b3.jpg') no-repeat center center; background-size:100% auto }
#NewName .full-box .items .item[data-index='4'] {background: #fff url('/static/img/landing/morele/microsoft-legal/b4.jpg') no-repeat center center; background-size:100% auto }
#NewName .full-box .items .box .small {font-size:16px;}
#NewName .full-box .items .box .big {font-size:22px; padding-bottom:30px}

#Cechy .items .item.text {padding:20px; padding-top:0px}
#Cechy .items .item .title {font-size:24px}
#Cechy .items .item.image {width:50%}
#Cechy .wrapper_box .info {width:100%}

#Produkty .items .item.text>p {font-size:24px}
#Produkty .items .item.text {padding:20px}

#BlueBox .items .item.text {padding:20px}
#BlueBox .items .item.text h2 {font-size:24px}


#Zysk .wrapper_box .info {width:100%}
#Zysk .items {flex-wrap:wrap; -webkit-box-pack:center;
    -ms-flex-pack:center;
        justify-content:center}
#Zysk .items .item {width:25%}

#GdzieKupic .wrapper_box .info {width:100%}
#GdzieKupic .items  {justify-content:center}
#GdzieKupic .items .item {width:40%}


#Legal .wrapper_box .info {width:100%}
}






/*-----------------------------------------------------------------------------
------------------320---------------320--------------------320---------------
-----------------------------------------------------------------------------*/



@media only screen and (min-width:0px) and (max-width:600px)
  {
    
   
h1 {font-size:24px; line-height:1.3}
h2 {font-size:24px; line-height:1.4}
#licz {background-color: green;}
 .wrapper_box {width: 95%; padding:0;}
p, textarea,label, #Blank ul {font-size:16px;}
p.small, p.small2, label.small2, p.small span, a.small {font-size:14px !important;}
.button_div p {font-size:14px;}
#Menu .menu-2 {padding:10px}
#Menu .Nav li {padding:0 8px;}
#Menu a.gryph-arrow:after {display:none}
#Menu .button_div span {font-size:14px;}

#Hero{ padding-bottom:unset; background-image:none; height:unset;min-height:unset;display:-webkit-box;display:-ms-flexbox;display:flex;  -webkit-box-orient:vertical;  -webkit-box-direction:reverse;  -ms-flex-direction:column-reverse;  flex-direction:column-reverse; background-color:#eaeaeb }
#Hero .vert_cent {position:relative;padding-top:20px; top:unset; transform:none; -moz-transform:none; -webkit-transform:none; -o-transform:none}
#Hero .wrapper_box {position:relative;padding:40px 0;}
#Hero .btn .button_div {padding:0 20px}
#Hero .box p.subtitle {font-size:18px;}
#Hero .btn {padding-top:20px}
#Hero .btn .button_div {line-height:40px;}
#Hero .btn a span {font-size:18px}
#Hero {background-color:#f2f4f6; height:auto}
#Hero .bg {height:300px; padding-bottom:unset;  background-size:auto 100%; position:relative; background-position:center bottom; background-color:#f2f4f6  }
#Hero .box {width:100%;  -webkit-box-sizing:border-box; box-sizing:border-box; padding-top:0px; padding-left:0px}



#NewName .wrapper_box {width:95%}
#NewName .full-box .items {flex-wrap:wrap}
#NewName .full-box .items .item {height:500px;width:100%; background-size:cover !important}
#NewName .full-box .items .box .big {padding-bottom:20px}

#Cechy .items .item .title {font-size:24px}
#Cechy .items {flex-wrap:wrap; padding:0;}
#Cechy .items .item {width:100%;}
#Cechy .items .item.image {width:100%}
#Cechy .items .item.text {padding:20px}
#Cechy .items[data-index='2'],#Cechy .items[data-index='4'] {-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
        flex-direction:column-reverse}
#Cechy .wrapper_box .info {width:100%}


#Produkty .items {-ms-flex-wrap:wrap;
    flex-wrap:wrap}
#Produkty .items .item {width:100%}
#Produkty .items .item.text {padding:20px}
#Produkty .items .item.text>p {font-size:20px}
#Produkty .items .item.image img {height:auto;width:100%}
#Produkty .items[data-index='2'] {-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
        flex-direction:column-reverse}

#BlueBox .wrapper_box .items {flex-wrap:wrap}
#BlueBox .wrapper_box .items .item {width:100%}
#BlueBox .items .item.text {padding:40px 20px}
#BlueBox .items .item.image {height:200px;}

#Zysk .wrapper_box .info {width:100%}
#Zysk .items {flex-wrap:wrap}
#Zysk .items .item {width:100%; padding-bottom:20px}



#GdzieKupic .wrapper_box .info {width:100%}
#GdzieKupic .items  {justify-content:center}
#GdzieKupic .items .item {width:80%}


#Legal .wrapper_box .info {width:100%}
}



