:root .css3-metro-dropdown option,:root .css3-metro-dropdown:after,:root .css3-metro-dropdown::after,:root .css3-metro-dropdown select{color: #000} 
:root .css3-metro-dropdown select,:root .css3-metro-dropdown:after,:root .css3-metro-dropdown::after{display: block; background:#fff ;}
:root .css3-metro-dropdown select,:root .css3-metro-dropdown option{ padding: 12px; color: #000 !important}
:root .css3-metro-dropdown{ position: relative;z-index: 10; display: inline-block;border: 0; left: 10px;}
:root .css3-metro-dropdown::after{content: "\25bc";position: absolute;top: 0;right: 0;display: block;width: 32px;font-size: 22px;line-height: 47px; text-align: center;-webkit-pointer-events: none;-moz-pointer-events: none;pointer-events: none; color: #7fa946}
:root .css3-metro-dropdown select{height: -1px;border: 0;vertical-align: middle; font: normal 16px/1em "Segoe UI", Arial, Helvetica, Sans-serif !important;outline: 0 none;     padding: 0; }
:root .css3-metro-dropdown option{ background: #fff;color: #333;}
.css3-metro-dropdown  select{ min-width: 75px;border-image: url(img/dropdown.png) 20% / 10px / 7px round  round !important;
                              -webkit-border-image: url(img/dropdown.png) 20% / 10px / 7px round  round !important;}
.home .grid90{overflow: hidden}
@media only screen and (max-width: 1024px) {
    .css3-metro-dropdown  select{ border-image: url(img/dropdown.png) 20% / 1.79vw / 0.7vw round  round !important;
                                  -webkit-border-image: url(img/dropdown.png) 20% / 1.79vw / 0.7vw round  round !important;}
    :root .css3-metro-dropdown select, *:root .css3-metro-dropdown option{padding: 5px}
}
@media only screen and (max-width:680px)  and (min-width:420px){
    :root .css3-metro-dropdown select, *:root .css3-metro-dropdown option { color: #000 !important; padding: 3px;}
    :root .css3-metro-dropdown::after{line-height: 37px;}
}
@media only screen and (max-width: 460px) {
    .css3-metro-dropdown{display: block; margin:0 auto 10px auto}
    select, option {color: #000 !important}
    .css3-metro-dropdown select {
        border-image: url("img/dropdown.png") 20% 20% 20% 20% / 3.4vw 3.4vw 3.4vw 3.4vw / 1.8vw round round !important;
        -webkit-border-image: url("img/dropdown.png") 17% / 1.9vw / .9vw round round !important;
        color: #000 !important;
        font-size: 18px !important;
        width:95px;
    }
    :root .css3-metro-dropdown::after {
        color: #7fa946;
        content: "▼";
        display: block;
        font-size: 22px;
        line-height: 68px;
        pointer-events: none;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 32px;
    }
}
@media only screen and (max-width: 560px) {
    :root .css3-metro-dropdown select,:root .css3-metro-dropdown option{ padding: 2px;}
    :root .css3-metro-dropdown::after {
        color: #7fa946;
        content: "▼";
        display: block;
        font-size: 19px;
        line-height: 34px;
        pointer-events: none;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 32px;
    }
    .css3-metro-dropdown{margin: 20px 0}
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
input{ animation: blink linear 500ms infinite; -webkit-animation: blink linear 500ms infinite; opacity: 1}
#trapezoid > p {   text-align: center; width: 100%;}
.bluespan {color: #0025e1}
.pinkspan{color: #9E0F78}
#response  {color: #D37909}
input:focus {animation: none; -webkit-animation: none}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder , textarea:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder , textarea:focus::-moz-placeholder{ color:transparent; }
input:focus:-ms-input-placeholder , textarea:focus:-ms-input-placeholder{ color:transparent; }
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
@font-face {
    font-family: 'Conv_IndieFlower';
    src: url('fonts/IndieFlower.eot');
    src: local('☺'), url('fonts/IndieFlower.woff') format('woff'), url('fonts/IndieFlower.ttf') format('truetype'), url('fonts/IndieFlower.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Conv_GloriaHallelujah';
    src: url('fonts/GloriaHallelujah.eot');
    src: local('☺'), url('fonts/GloriaHallelujah.woff') format('woff'), url('fonts/GloriaHallelujah.ttf') format('truetype'), url('fonts/GloriaHallelujah.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
*, *::after, *::before {
    box-sizing: border-box;
}
html {font-size: 62.5%;}
body {font-size: 1.6rem;overflow-x: hidden; color: #ffffff; background-color: transparent;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
}
@media only screen and (min-width: 1050px) {
    body::before {
        /* never visible - this is used in jQuery to check the current MQ */
        content: 'desktop';
    }
}
a {color: #267481;text-decoration: none;}
#carbonads-container,
#ui8ads-container { position: fixed; bottom: 40px;right: 5%;  width: 180px; display: none; z-index: 5;}
#carbonads-container .close-carbon-adv,
#carbonads-container .close-ui8-adv,
#ui8ads-container .close-carbon-adv,
#ui8ads-container .close-ui8-adv {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 100%;
    background: rgba(25, 30, 46, 0.8);
    text-indent: 100%;
    overflow: hidden;
    width: 32px;
    height: 32px;
}
#carbonads-container .close-carbon-adv:hover,
#carbonads-container .close-ui8-adv:hover,
#ui8ads-container .close-carbon-adv:hover,
#ui8ads-container .close-ui8-adv:hover {
    background: #191e2e;
}
#carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before,
#carbonads-container .close-ui8-adv::after,
#carbonads-container .close-ui8-adv::before,
#ui8ads-container .close-carbon-adv::after,
#ui8ads-container .close-carbon-adv::before,
#ui8ads-container .close-ui8-adv::after,
#ui8ads-container .close-ui8-adv::before {
    content: '';
    background-color: #fff;
    height: 2px;
    width: 14px;
    position: absolute;
    top: 14px;
    left: 9px;
}
#carbonads-container .close-carbon-adv::after,
#carbonads-container .close-ui8-adv::after,
#ui8ads-container .close-carbon-adv::after,
#ui8ads-container .close-ui8-adv::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#carbonads-container .close-carbon-adv::before,
#carbonads-container .close-ui8-adv::before,
#ui8ads-container .close-carbon-adv::before,
#ui8ads-container .close-ui8-adv::before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#carbonads-container .carbonad,
#carbonads-container .ui8ad,
#ui8ads-container .carbonad,
#ui8ads-container .ui8ad {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 100%;
    height: auto;
    padding: 14px;
    text-align: center;
    border-radius: 0 3px 3px 3px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#carbonads-container .carbonad .carbonad-image img,
#carbonads-container .carbonad .ui8ad-image img,
#carbonads-container .ui8ad .carbonad-image img,
#carbonads-container .ui8ad .ui8ad-image img,
#ui8ads-container .carbonad .carbonad-image img,
#ui8ads-container .carbonad .ui8ad-image img,
#ui8ads-container .ui8ad .carbonad-image img,
#ui8ads-container .ui8ad .ui8ad-image img {
    width: 130px;
}
#carbonads-container .carbonad .carbonad-image img,
#carbonads-container .ui8ad .carbonad-image img,
#ui8ads-container .carbonad .carbonad-image img,
#ui8ads-container .ui8ad .carbonad-image img {
    margin: 0 0 10px 10px;
}
#carbonads-container .carbonad .ui8ad-image img,
#carbonads-container .ui8ad .ui8ad-image img,
#ui8ads-container .carbonad .ui8ad-image img,
#ui8ads-container .ui8ad .ui8ad-image img {
    margin: 0 10px 10px;
    width: 130px;
}
#carbonads-container .carbonad .carbonad-text, #carbonads-container .carbonad .carbonad-tag,
#carbonads-container .carbonad .ui8ad-text, #carbonads-container .carbonad .ui8ad-tag,
#carbonads-container .ui8ad .carbonad-text,
#carbonads-container .ui8ad .carbonad-tag,
#carbonads-container .ui8ad .ui8ad-text,
#carbonads-container .ui8ad .ui8ad-tag,
#ui8ads-container .carbonad .carbonad-text,
#ui8ads-container .carbonad .carbonad-tag,
#ui8ads-container .carbonad .ui8ad-text,
#ui8ads-container .carbonad .ui8ad-tag,
#ui8ads-container .ui8ad .carbonad-text,
#ui8ads-container .ui8ad .carbonad-tag,
#ui8ads-container .ui8ad .ui8ad-text,
#ui8ads-container .ui8ad .ui8ad-tag {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
#carbonads-container .carbonad .carbonad-text,
#carbonads-container .carbonad .ui8ad-text,
#carbonads-container .ui8ad .carbonad-text,
#carbonads-container .ui8ad .ui8ad-text,
#ui8ads-container .carbonad .carbonad-text,
#ui8ads-container .carbonad .ui8ad-text,
#ui8ads-container .ui8ad .carbonad-text,
#ui8ads-container .ui8ad .ui8ad-text {
    display: block;
    width: 100%;
    padding: 0;
}
#carbonads-container .carbonad .carbonad-text a,
#carbonads-container .carbonad .ui8ad-text a,
#carbonads-container .ui8ad .carbonad-text a,
#carbonads-container .ui8ad .ui8ad-text a,
#ui8ads-container .carbonad .carbonad-text a,
#ui8ads-container .carbonad .ui8ad-text a,
#ui8ads-container .ui8ad .carbonad-text a,
#ui8ads-container .ui8ad .ui8ad-text a {
    color: #2e5367;
    font-size: 13px;
    font-weight: bold;
}
.no-touch #carbonads-container .carbonad .carbonad-text a:hover, .no-touch
#carbonads-container .carbonad .ui8ad-text a:hover, .no-touch
#carbonads-container .ui8ad .carbonad-text a:hover, .no-touch
#carbonads-container .ui8ad .ui8ad-text a:hover, .no-touch
#ui8ads-container .carbonad .carbonad-text a:hover, .no-touch
#ui8ads-container .carbonad .ui8ad-text a:hover, .no-touch
#ui8ads-container .ui8ad .carbonad-text a:hover, .no-touch
#ui8ads-container .ui8ad .ui8ad-text a:hover {
    text-decoration: underline;
}
#carbonads-container .carbonad .carbonad-tag,
#carbonads-container .carbonad .ui8ad-tag,
#carbonads-container .ui8ad .carbonad-tag,
#carbonads-container .ui8ad .ui8ad-tag,
#ui8ads-container .carbonad .carbonad-tag,
#ui8ads-container .carbonad .ui8ad-tag,
#ui8ads-container .ui8ad .carbonad-tag,
#ui8ads-container .ui8ad .ui8ad-tag {
    margin-top: 5px;
    color: #2b334f;
}
#carbonads-container .carbonad .carbonad-tag a,
#carbonads-container .carbonad .ui8ad-tag a,
#carbonads-container .ui8ad .carbonad-tag a,
#carbonads-container .ui8ad .ui8ad-tag a,
#ui8ads-container .carbonad .carbonad-tag a,
#ui8ads-container .carbonad .ui8ad-tag a,
#ui8ads-container .ui8ad .carbonad-tag a,
#ui8ads-container .ui8ad .ui8ad-tag a {
    color: #f06a59;
}
#carbonads-container .carbonad .carbonad-tag a:hover,
#carbonads-container .carbonad .ui8ad-tag a:hover,
#carbonads-container .ui8ad .carbonad-tag a:hover,
#carbonads-container .ui8ad .ui8ad-tag a:hover,
#ui8ads-container .carbonad .carbonad-tag a:hover,
#ui8ads-container .carbonad .ui8ad-tag a:hover,
#ui8ads-container .ui8ad .carbonad-tag a:hover,
#ui8ads-container .ui8ad .ui8ad-tag a:hover {
    color: #f06a59;
}
#carbonads-container .carbonad .ui8ad-tag,
#carbonads-container .ui8ad .ui8ad-tag,
#ui8ads-container .carbonad .ui8ad-tag,
#ui8ads-container .ui8ad .ui8ad-tag {
    display: inline-block;
    font-size: 11px;
    line-height: 15px;
}
@media only screen and (min-width: 1050px) {
    #carbonads-container,
    #ui8ads-container {
        display: block;
    }
}
@media only screen and (min-width: 1050px) {
    body[data-hijacking="on"] {
        overflow: hidden;
    }
}
#editorbg{background: url(img/codefield.png) no-repeat; background-size: cover;    padding: 0 0 30px 0;}
.cd-section { height: 100vh;}
.cd-section h2 { line-height: 100vh; text-align: center; font-size: 2.4rem;}
.cd-section:first-of-type > div {
    background-image: url(img/bg1.jpg);
}
.cd-section:nth-of-type(2) > div {
    background-image: url(img/office.jpg);
    background-position:  center top;
    background-repeat: no-repeat;

}
.cd-section:nth-of-type(3) > div {
    background-image: url(img/pizzatable.jpg);
    background-position:  center top;
    background-repeat: no-repeat;
}
.cd-section:nth-of-type(4) > div {
    background-image: url(img/codescreen.jpg);
    background-position:  center top;
    background-repeat: no-repeat;
}
.cd-section:nth-of-type(5) > div {
    background-image: url(img/wall.jpg);
}
.cd-section:nth-of-type(6) > div {
    background-image: url(img/wood.jpg)  ;
}
span#left {
    background: url(img/left.png) no-repeat left top  !important ;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0; top: 0;
    background-size: contain !important;
}
span#right {
    background: url(img/right.png) no-repeat right bottom  !important ;
    display: block;
    width: 100%;
    height: 100%;
    right: 0; bottom: 0;
    background-size: contain !important;
}
.inner{max-width: 90%; line-height: 100vh; margin: auto}
.cd-section:first-of-type > div::before {
    /* alert -> all scrolling effects are not visible on small devices */
    /*    content: 'Effects not visible on mobile!';*/
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20px;
    z-index: 2;
    font-weight: bold;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #6a7083;
}
[data-animation="parallax"] .cd-section > div, [data-animation="fixed"] .cd-section > div, [data-animation="opacity"] .cd-section > div {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (min-width: 1050px) {
    .cd-section h2 {
        font-size: 4rem;
        font-weight: 300;
    }
    [data-hijacking="on"] .cd-section {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    [data-hijacking="on"] .cd-section > div {
        visibility: visible;
    }
    [data-hijacking="off"] .cd-section > div {
        opacity: 0;
    }
    [data-animation="rotate"] .cd-section {
        /* enable a 3D-space for children elements */
        -webkit-perspective: 1800px;
        -moz-perspective: 1800px;
        perspective: 1800px;
    }
    [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
        -webkit-perspective-origin: center 0;
        -moz-perspective-origin: center 0;
        perspective-origin: center 0;
    }
    [data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div {
        box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
    }
    [data-animation="opacity"] .cd-section.visible > div {
        z-index: 1;
    }
}
@media only screen and (min-width: 1050px) {
    .cd-section > div {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    [data-hijacking="on"] .cd-section > div {
        position: absolute;
    }
    [data-animation="rotate"] .cd-section > div {
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        -o-transform-origin: center bottom;
        transform-origin: center bottom;
    }
}
.cd-vertical-nav {
    /* lateral navigation */
    position: fixed;
    z-index: 1;
    right: 3%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}
.cd-vertical-nav a {
    display: block;
    height: 40px;
    width: 40px;
    /* image replace */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url(../img/cd-icon-arrow.svg) no-repeat center center;
}
.cd-vertical-nav a.cd-prev {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
    .cd-vertical-nav {
        display: block;
    }
}
/* Extendet rules */
#officecontent{    left: 5%;   position: absolute;   top: 30vh;    width: 40%;}
img{ max-width: 100%; height: auto; border: none; outline: none;}
.grid100{width: 100%; float: none; min-height: 1px}
.grid90{width: 90%;margin: auto; min-height: 1px}
.grid80{width: 80%; float: left; min-height: 1px}
.grid20{width: 20%; float: left; min-height: 1px}
#balls1,#balls2,#balls3{position: absolute; top: -10%; width: 100%; left: 0;  height: 100vh}
#balls1:before, #balls2:before,#balls3:before, #balls1:after,#balls2:after,#balls3:after{ background: #8dc641; border-radius: 50%; 
                                                                                          position: absolute;top: 30%;width: 25%; padding-top:25%;z-index: 2;content: '';  }
#balls1:before,  #balls3:before, #balls2:before{left: 30%;}
#balls1:after,  #balls2:after, #balls3:after{right: 30%;}
#balls1:before{ animation: gotopl 1300ms ease-in-out 100ms infinite;-webkit-animation: gotopl 1300ms ease-in-out 100ms infinite }
#balls1:after{ animation: gotopr 1500ms ease-in-out 300ms infinite;-webkit-animation: gotopr 1500ms ease-in-out 300ms infinite }
#balls3:before{animation: gotopl 1300ms ease-in-out 450ms infinite; -webkit-animation: gotopl 1300ms ease-in-out 450ms infinite }
#balls3:after{animation: gotopr 1500ms ease-in-out 600ms infinite;-webkit-animation: gotopr 1500ms ease-in-out 600ms infinite }
#balls2:before{animation: gotopl 1300ms ease-in-out 700ms infinite;-webkit-animation: gotopl 1300ms ease-in-out 700ms infinite  }
#balls2:after{animation: gotopr 1500ms ease-in-out 1s infinite;-webkit-animation: gotopr 1500ms ease-in-out 1s infinite }
#logo {text-align: center; position: relative}
.nobuble #balls1:before, .nobuble  #balls1:after,.nobuble #balls2:before, .nobuble  #balls2:after,.nobuble #balls3:before, .nobuble  #balls3:after {animation: none}
#trapezoid { border-top: 240px solid white; border-left: 4vw solid transparent; border-right: 1vw solid transparent; height: 0;
             line-height: 0 !important;position: relative;  width: 80%;   margin:  auto; }
#trapezoid:before{content: ''; width: 100%; color: #000; line-height: 1; position: absolute; left: 0; top: -15vw; color: #000; 
                  width: 100%; height:0;white-space: pre}
#officecontent > article {color: #000;float: left; width: 45%;font-family: 'Conv_IndieFlower';line-height: 1.5em; font-size: 2.3vh ; padding: 0 2%}
#officecontent h5 { font-size: 3.5vh;margin-bottom: -8%; position: relative}
#officecontent h5:first-letter{font-size: 4vh;}
#officecontent article:nth-of-type(2) h5{margin-bottom: -14% !important;}
#officecontent > article p {width: 100%; overflow: hidden;white-space: nowrap; color: transparent}
#trapezoid > p { color: #000; line-height: 1.2em; position: absolute; top: -150px;font-size: 2.5vw;font-family: 'Conv_IndieFlower';  font-weight: 100;}
#trapezoid b{font-weight: 800}
#phone {  -webkit-animation: ringing 2000ms linear 2000ms infinite; animation: ringing 2000ms linear 2000ms infinite;left: 10vw; max-width: 13vw;position: absolute;top: 50vh;}
#under2,#under1{position: relative}
#under2:after{content: url(img/line2.png) ; background-size: cover; left: 0; bottom: 5px; display: block; overflow: hidden; position: relative}
#under1:after{content: url(img/line1.png) ; background-size: cover; left: 0; bottom: 15px;display: block; overflow: hidden; position: relative}
.animtext > article #line1 { color:#000 !important; -webkit-animation: typing2 3s steps(35, end) forwards;   animation: typing2 3s steps(35, end) forwards; }
.animtext > article #line2 {-webkit-animation: typing2  3s steps(31, end) 1500ms  forwards; animation: typing2  3s steps(31, end) 1500ms  forwards;}
.animtext > article #line3 {-webkit-animation: typing2  3s steps(32, end) 3100ms   forwards; animation: typing2  3s steps(32, end) 3100ms   forwards;}
.animtext > article #line4 {-webkit-animation: typing2  3s steps(21, end) 4400ms  forwards; animation: typing2  3s steps(21, end) 4400ms  forwards; }
.animtext > article #line5 {-webkit-animation: typing2  3s steps(37, end) 5700ms  forwards; animation: typing2  3s steps(37, end) 5700ms  forwards;}
.animtext > article #line6 {-webkit-animation: typing2 3s steps(31, end) 7200ms  forwards; animation: typing2 3s steps(31, end) 7200ms  forwards;}
/**/
.animtext > article #line7  {-webkit-animation: typing2 3s  steps(31, end) 9s   forwards; animation: typing2 3s  steps(31, end) 9s   forwards;}
.animtext > article #line8  {-webkit-animation: typing2  3s steps(31, end) 9800ms  forwards; animation: typing2  3s steps(31, end) 9800ms  forwards;}
.animtext > article #line9  {-webkit-animation: typing2  3s steps(32, end) 11000ms   forwards; animation: typing2  3s steps(32, end) 11000ms   forwards;}
.animtext > article #line10 {-webkit-animation: typing2  3s steps(21, end) 11900ms  forwards; animation: typing2  3s steps(21, end) 11900ms  forwards;}
.animtext > article #line11 {-webkit-animation: typing2  3s steps(37, end) 13s  forwards; animation: typing2  3s steps(37, end) 13s  forwards;}
.animtext > article #line12 {-webkit-animation: typing2 3s steps(31, end) 14s  forwards; animation: typing2 3s steps(31, end) 14s  forwards;}
.animtext > article #line13 {-webkit-animation: typing2  3s steps(21, end) 15100ms  forwards; animation: typing2  3s steps(21, end) 15100ms  forwards;}
.animtext > article #line14 {-webkit-animation: typing2  3s steps(37, end) 16500ms  forwards;animation: typing2  3s steps(37, end) 16500ms  forwards; }
.animtext > article #line15 {-webkit-animation: typing2 3s steps(31, end) 17800ms  forwards;animation: typing2 3s steps(31, end) 17800ms  forwards; }
.goaway{ -webkit-animation: fload linear 5s forwards;	animation: fload linear 5s forwards; transform-origin: 0%  50% }
.cd-section:nth-of-type(5) h3,.cd-section:nth-of-type(2) h4,.cd-section:nth-of-type(2) h3,.cd-section:nth-of-type(3) h3,.cd-section:nth-of-type(4) h3{text-align: center;  color: #000; 	font-family: 'Conv_GloriaHallelujah'; font-size: 5vh; padding-top: 8vh; position: absolute; width: 100%}
.cd-section:nth-of-type(2) h4{ font-size: 4vh; top: 7%}
#logo img {z-index: 4; margin-top:15%; position: relative;}
.cd-section:nth-of-type(3) h3{ color: #fff; font-size: 7vh;}
.cd-section:nth-of-type(3) p{color: #fff; font-size: 4vh;margin-top: 9%; font-family: 'Conv_GloriaHallelujah'; text-align: center; position: absolute; width: 100%}
.cd-section:nth-of-type(4) h3{font-size:8vh; text-align: left;  color: #000; text-indent: 10% }
#commontext{font-size:22px; text-align: left;  color: #000; }
.cd-section:nth-of-type(4) p{ font-size: 3vh;color: #fff;font-family: 'Conv_GloriaHallelujah'; padding: 3% 0 }
#stick{position: absolute; width: 30%; padding-top: 10%; background: rgba(255,255,255,.5); top: -5%; left: 35%; transform: rotate(15deg) }
#note > p {color: #000; font-family: "Conv_IndieFlower";
           font-size: 1.5vw; height: inherit; line-height: 1.5em;  padding: 10% 2% 2% 5%; text-align: left;width: 100%;}
#animationholder { margin: auto; position: relative;  width: 30%;}
#apply{width: 10%;padding-top:9.5%;  background: url(img/apply.png); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
       -webkit-animation: besmall linear 3s infinite;    animation: besmall linear 3s infinite; background-size: cover; height: 0;}
#apply::after{ -webkit-animation: shadow linear 3s infinite; animation: shadow linear 3s infinite; background: rgba(89,89,89,.3); content: ''; position: absolute; left: 5%;bottom: -75% ; width: 90%;padding-top:90%; height: 0; border-radius: 50%;z-index: -1}
#fixerheader{ width: 100%; padding-top: 5%}
#warrning {bottom: 0; color: #fff;font-family: "Conv_IndieFlower";left: 50%; position: absolute;top: 90vh; z-index: 11;}
#note{ background: rgb(234, 217, 150);width: 20vw; height:  20vw; position: absolute; top: 10vw; left: 10vw; transform: rotate(-5deg);-webkit-transform: rotate(-5deg); z-index: 11}
.bottle {position: absolute; z-index: 5; max-width: 20vw;}
.bottle > img {max-height: 400px;}/*600*/
#show{background: #fff; color: #000; cursor: pointer; padding: 0 5px}
#leftbottle { left: -10%; z-index: 12}
#rightbottle{right: -10%; z-index: 13}
.playingwith{background: #BDBDBD}
.proficient{background: #EEC640}
.everydayuse{background: #8BC544}
#modal_holder_pizza{height: 530px; width: 780px; position: relative; overflow: visible !important}
#modal_holder_pizza p{width: auto; font-size: 22px; padding:5px 15px; }
.piece{display:block; float: left; width: 50%; padding-top: 50%; }
#pizza1{background: transparent; display: block}
#pizza2{background: transparent; display: block}
#pizza3{background: transparent; display: block}
#pizza4{background: transparent; display: block}
.pizza1{background: rgba(0, 0, 0, 0) url("img/piece1.png") no-repeat scroll center top / contain ;height: 90%; margin: auto}
.pizza2{background: rgba(0, 0, 0, 0) url("img/piece2.png") no-repeat scroll center top / contain ;height: 90%; margin: auto}
.pizza3{background: rgba(0, 0, 0, 0) url("img/piece4.png") no-repeat scroll center top / contain ;height:90%; margin: auto}
.pizza4{background: rgba(0, 0, 0, 0) url("img/piece3.png") no-repeat scroll center top / contain ;height: 90%; margin: auto}
#happy{top: 100%; display: block; max-width: 8vw;position: absolute;right: 5vw;}
#cheers{ bottom: 0;left: 0;margin: 5vh auto auto; max-width: 20vw; position: absolute; right: 0; top: 0; z-index: 16; transform: scale(0);-webkit-transform: scale(0);}
.startbeers > #leftbottle{-webkit-animation: leftbottle 1500ms linear 1s forwards;  animation: leftbottle 1500ms linear 1s forwards;  transform:  rotate(0deg); -webkit-transform:rotate(0deg);}
.startbeers > #rightbottle{ -webkit-animation: rightbottle 1500ms linear 1s forwards; animation: rightbottle 1500ms linear 1s forwards;  transform: rotate(0deg); -webkit-transform: rotate(0deg);}
.obectobimage { bottom: 5vw; height: 15vw;left: 10vw; position: absolute; width: 15vw;}
.startbeers > #happy {-webkit-animation: flyhappy 5s ease-in-out 1s ; animation: flyhappy 5s ease-in-out 1s ;transform: rotate(0deg); -webkit-transform: rotate(0deg);}
.startbeers > #cheers { -webkit-animation: cheers 200ms linear 2400ms forwards; animation: cheers 200ms linear 2400ms forwards}
#designby > img {display: inline-block; vertical-align: middle;}
#firstbo{z-index: 2; left: 8vw; bottom: 7vw}
#secondbo{z-index: 1}
.codefield {float: left; left: 10%; margin-top: 6%;position: relative;width: 50%; clear: both;  }
.codefield p#commonj {position: relative; left: 0; padding: 2%; width: 100%;  color: #000}
#second p {padding: 1% 0; color: #fff;   margin: 10px 0;}
#second{margin-top: 2%; }
.fieldfixer{position: relative; height: 100vh;  margin-top: 10%;}
.cd-section:nth-of-type(4) h3{padding-top: 2vh}
#test {min-height: 220px; color: #000; font-family: "Courier New";left: 15%;line-height: 1.9em; position: relative; top: 20px;width: 75%; max-width: 75%;}
#commonj{ font-family: "Courier New";  line-height: 2em;}
.stopanimation{animation: none !important; -webkit-animation: none !important}
#temphidden{visibility: hidden}
#test input{border: none; width: 25px;}
#modal_holder_pizza h1 {font-family: 'Conv_GloriaHallelujah'; position: absolute;  text-shadow: 0 0 2px #fff; color: #000;  font-size: 30px;  background: rgba(255, 255, 255, 0.7); padding: 15px}
#lang2 > h1 {right: 60px;}
#lang3 > h1 { bottom: 40px;}
#lang4 > h1 { bottom: 40px;right: 40px;}
#designby{position: absolute; bottom: 0; text-align: center; width: 100%; color: #4d4d48;	font-family: 'Conv_GloriaHallelujah';line-height: 48px; vertical-align: middle; display: block}
#pizza { overflow: hidden; background: rgba(0, 0, 0, 0) url("img/pizza.png") no-repeat  center center / contain ; border-radius: 50%; bottom: 0; height: 55vh;
         left: 0; margin:30vh auto auto;position: absolute; right: 0; top: 0;width: 53vh;}
/*animation: pizza linear 320s infinite; -webkit-animation: pizza linear 320s infinite;*/
#pizza:hover {  cursor: url(img/fork.png), auto;}
#apply > a {display: block;height: 100%; position: absolute;top: 0; width: 100%;}
/*langauges madness*/
#lang1, #lang2,#lang3,#lang4 {display: none}
.pizza1 #lang1 {display: block}
.pizza2 #lang2 {display: block}
.pizza3 #lang3 {display: block}
.pizza4 #lang4 {display: block}
#modal_holder_pizza #lang1 p {font-size: 16px}
#l1a-1{left:70%;top:-2%}#l1a-2{left:59%;top:4%}#l1a-3{left:49%;top:10%}#l1a-4{left:41%;top:18%}#l1a-5{left:36%;top:26%}#l1a-6{left:32%;top:34%}#l1a-7{left:29%;top:42%}#l1a-8{left:27%;top:50%}#l1a-9{left:26%;top:58%}#l1a-10{left:25%;top:65%}#l1a-11{left:24%;top:71%}#l1a-12{left:22%;top:77%}#l1b-1{left:63%;top:11%}#l1b-2{left:58%;top:19%}#l1b-3{left:54%;top:26%}#l1b-4{left:51%;top:33%}#l1b-5{left:48%;top:40%}#l1b-6{left:43%;top:46%}#l1b-7{left:43%;top:53%}#l1b-8{left:41%;top:61%}#l1b-9{left:39%;top:67%}#l1b-10{left:38%;top:76%}#l1c-1{left:69%;top:18%}#l1c-2{left:56%;top:55%}#l1c-3{left:65%;top:28%}#l1c-4{left:63%;top:37%}#l1c-5{left:59%;top:46%}#l1c-6{left:51%;top:67%}#l1c-7{left:67%;top:52%}#l1c-8{left:65%;top:61%}#l1c-9{left:66%;top:69%}#l1c-10{left:59%;top:76%}#l2a-1,#l3a-1{left:18%;top:-5%}#l2a-2{left:30%;top:2%}#l2a-3{left:41%;top:11%}#l2a-4{left:55%;top:22%}#l2a-5{left:62%;top:34%}#l2a-6{left:66%;top:46%}#l2a-7{left:52%;top:50%}#l2a-8{left:59%;top:68%}#l2a-9{left:66%;top:78%}#l2b-1{left:20%;top:15%}#l2b-2{left:30%;top:27%}#l2b-3{left:39%;top:43%}#l2b-4{left:45%;top:59%}#l2b-5{left:53%;top:75%}#l2c-1{left:18%;top:36%}#l2c-2{left:22%;top:51%}#l2c-3{left:25%;top:63%}#l2c-4{left:35%;top:75%}#l3a-2{left:23%;top:13%}#l3a-3{left:30%;top:30%}#l3a-4{left:32%;top:42%}#l3a-5{left:40%;top:54%}#l3a-6{left:61%;top:73%}#l3b-1{left:39%;top:-2%}#l3b-2{left:43%;top:16%}#l3b-3{left:51%;top:30%}#l3b-4{left:60%;top:45%}#l3b-5{left:60%;top:59%}#l3c-1{left:62%;top:-3%}#l3c-2{left:65%;top:6%}#l3c-3{left:61%;top:18%}#l3c-4{left:69%;top:23%}#l4a-1{left:52%;top:33%}#l4b-1{left:57%;top:-9%}#l4b-2{left:51%;top:5%}#l4b-3{left:50%;top:19%}#l4b-4{left:26%;top:33%}#l4b-5{left:27%;top:45%}#l4b-6{left:42%;top:57%}#l4b-7{left:21%;top:67%}#l4c-1{left:30%;top:-5%}#l4c-2{left:23%;top:9%}#l4c-3{left:24%;top:19%}#l4c-4{left:19%;top:26%}#l4c-5{left:20%;top:2%}
#skillsmodal > h3:nth-of-type(2) { padding-bottom: 20px;position: relative;}
#skillsmodal {max-height: 80vh; overflow-y: visible}
#legend > span { bottom: 0; color: #000; text-shadow: 0 0 2px #fff; display: inline-block;font-size: 20px; margin: 0 -4px 0 0; position: relative; width: 33%;  font-family: "Conv_GloriaHallelujah";}
.pizza4 #legend span, .pizza2 #legend span{float: right}
#legend i {width: 10px; height: 10px}
#legend i {display: block; float: left;height: 10px;  margin: 8px; width: 10px;}
#legend { background: rgba(255, 255, 255, 0.4); position: absolute;   top: 96%;  width: 100%;}
.fallnote #stick{ -webkit-animation: removeSticky linear 1s forwards; animation: removeSticky linear 1s forwards;}
.fallnote{ -webkit-animation: fallingPaper 10s linear 1s forwards; animation: fallingPaper 10s linear 1s forwards;}
.toyellow{-webkit-animation: gograytoyellow linear 5s infinite;animation: gograytoyellow linear 5s infinite;}
.togreen{-webkit-animation: goyellowtogreen linear 5s infinite;animation: goyellowtogreen linear 5s infinite;}
#temphidden > span { background: rgba(0, 0, 0, 0) url("img/sharefb.png") repeat scroll 0 0 / cover ; color: #fff;padding: 0 15px; cursor: pointer}
#temphidden { padding: 2% 0 !important;}
@keyframes removeGlass {
    100% {left: 100vw }
}
@keyframes full {
    100% {height: 25% ;  }
}
@keyframes leak {
    100% {height:35% ;  }
}
@keyframes blink {
    0% {opacity: 1}
    100% {opacity: 0}
}
@-webkit-keyframes removeGlass {
    100% {left: 100vw }
}
@-webkit-keyframes full {
    100% {height: 25% ;  }
}
@-webkit-keyframes leak {
    100% {height:35% ; }
}
@-webkit-keyframes blink {
    0% {opacity: 1}
    100% {opacity: 0}
}
@keyframes shadow {
    50% {bottom: 0% ;  }
    100% {bottom: -75% ;  }
}
@keyframes leftbottle {
    50%    {transform: rotate(0) ;}
    100% {transform:  rotate(15deg); left :43vw }
}
@keyframes rightbottle {
    50%    {transform: rotate(0) ;}
    100% {transform:  rotate(-15deg); right: 43vw}
}
@keyframes flyhappy {
    50%    {top:0;}
    100% {top:200%; transform : rotate(360deg); }
}

@-webkit-keyframes shadow {
    50% {bottom: 0% ;  }
    100% {bottom: -75% ;  }
}
@-webkit-keyframes leftbottle {
    50%    {-webkit-transform: rotate(0) ;}
    100% {-webkit-transform:  rotate(15deg) ; left: 43vw;}
}
@-webkit-keyframes rightbottle {
    50%    {-webkit-transform: rotate(0) ;}
    100% {-webkit-transform:  rotate(-15deg); right: 43vw;}
}
@-webkit-keyframes flyhappy {
    50%    {top:0;}
    100% {top:200%; -webkit-transform : rotate(360deg); }
}
@keyframes gograytoyellow{
    0% { background-color: #bdbdbd }
    50% {background-color: #eec640 }
    100% { background-color: #bdbdbd }
}
@-webkit-keyframes gograytoyellow{
    0% { background-color: #bdbdbd }
    50% {background-color: #eec640 }
    100% { background-color: #bdbdbd }
}

@keyframes goyellowtogreen{
    0% { background-color: #eec640 }
    50% {background-color: #8bc544 }
    100% { background-color: #eec640 }
}
@-webkit-keyframes goyellowtogreen{
    0% { background-color: #eec640 }
    50% {background-color: #8bc544 }
    100% { background-color: #eec640 }
}
@keyframes fallingPaper {
    0% {transform:rotate(0deg);}
    20% {transform:rotate(-25deg);left: -5vw; }
    40% {transform:rotate(25deg);left: 0vw;}
    60% {transform:rotate(-25deg);left: 15vw;}
    80% {transform:rotate(25deg);left: 0vw;}
    100% {transform:rotate(-25deg);top:  100vw;}
}
@-webkit-keyframes fallingPaper {
    0% {-webkit-transform:rotate(0deg);}
    20% {-webkit-transform:rotate(-25deg);left: -5vw; }
    40% {-webkit-transform:rotate(25deg);left: 0vw;}
    60% {-webkit-transform:rotate(-25deg);left: 15vw;}
    80% {-webkit-transform:rotate(25deg);left: 0vw;}
    100% {-webkit-transform:rotate(-25deg);top:100vw;}
}
@keyframes removeSticky {
    to {width:  0;}
}
@-webkit-keyframes removeSticky {
    to {width:  0;}
}
@keyframes typing {
    from {width:  0;}
}
@-webkit-keyframes typing {
    from {width:  0;}
}
@keyframes typing2 {
    0%{width: 0; color:#000}
    50%{width: 0; color:#000}
    100%{ width: 100%; color:#000 }
}
@-webkit-keyframes typing2 {
    0%{width: 0; color:#000}
    50%{width: 0; color:#000}
    100%{ width: 100%; color:#000 }
}
@keyframes fload {
    25%{transform:  rotate(-90deg);}
    100%{     left:-100%}
}
@-webkit-keyframes fload {
    25%{-webkit-transform:  rotate(-90deg);}
    100%{     left:-100%}
}
@keyframes cheers {
    100% {transform:  scale(1)}
}
@-webkit-keyframes cheers {
    100% {-webkit-transform:  scale(1)}
}
@keyframes pizza {
    100% {transform:  rotate(360deg)}
}
@-webkit-keyframes pizza {
    100% {-webkit-transform:  rotate(360deg)}
}
@keyframes flyhappy {
    50%    {top:0;}
    100% {top:100%; 
          transform : rotate(360deg);
    }
}
@-webkit-keyframes flyhappy {
    50%    {top:0;}
    100% {top:100%; 
          -webkit-transform : rotate(360deg);
    }
}
@keyframes besmall {
    50% {width: 8%;padding-top:7.5%; left:0 }
    100% {width: 10%;padding-top:9.5%;  left:0}
}
@-webkit-keyframes besmall {
    50% {width: 8%;padding-top:7.5%; left:0 }
    100% {width: 10%;padding-top:9.5%;  left:0}
}
@keyframes shadow {
    50% {bottom: 0% ;  }
    100% {bottom: -75% ;  }
}

@-webkit-keyframes shadow {
    50% {bottom: 0% ;  }
    100% {bottom: -75% ;  }
}
@keyframes gotopl {
    100% {left:50%; top: -5%; opacity:0.2; width:3%; padding-top:3%;}
}
@-webkit-keyframes gotopl {
    100% {left:50%; top: -5%; opacity:0.2; width:3%; padding-top:3%;}
}

@keyframes gotopr {
    100% {top: -5%;right: 50%; opacity:0.2; width:3%;  padding-top:3%;}
}
@-webkit-keyframes gotopr {
    100% {top: -5%;right: 50%; opacity:0.2; width:3%;  padding-top:3%;}
}
@keyframes ringing {
    0% {transform:rotate(0deg);}
    4% {transform:rotate(-15deg);}
    8% {transform:rotate(0deg);}
    12% {transform:rotate(-15deg);}
    16% {transform:rotate(0deg);}
    20% {transform:rotate(-15deg);}
    24% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}

@-webkit-keyframes ringing {
    0% {-webkit-transform:rotate(0deg);}
    4% {-webkit-transform:rotate(-15deg);}
    8% {-webkit-transform:rotate(0deg);}
    12% {-webkit-transform:rotate(-15deg);}
    16% {-webkit-transform:rotate(0deg);}
    20% {-webkit-transform:rotate(-15deg);}
    24% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(0deg);}
}
/*modal*/
.modal-overlay {height: 100%;left: 0; display: flex;overflow: visible;background: rgba(0, 0, 0, 0.5) ;
                padding: 1.5em; position: absolute; top: 0; transition: opacity .2s;width: 100%;z-index: -1;}
.modal-overlay[aria-hidden="true"] {opacity: 0;visibility: hidden;}
.modal-overlay[aria-hidden="false"] { opacity: 1; visibility: visible;z-index: 2;}
.modal-content { max-width: 800px; margin:2% auto auto; overflow: auto;overflow-x: hidden; padding: 1.5em;
                 right:0; position: absolute; transform: scale(.8); transition: transform .3s; width: 100%; top: 0; left:0; color: #000}
#skillsmodal{background: url(img/bg1.jpg) no-repeat; border: 3px solid #96CE47;}
.modal-overlay[aria-hidden="false"] .modal-content { transform: scale(1);}
.cd-section:nth-of-type(4)  .modal-content h3{font-size: 5vh; text-indent: 0; text-align: center; padding-top: 0;}
.cd-section:nth-of-type(4)  .modal-content p {text-align: left; text-indent: 0; font-size: 16px;padding-top: 2% } 
.btn-close {background: none; border: none;cursor: pointer;font-family: arial; font-size: 2em;font-weight: 800; line-height: 1;  padding: 0;  
            color: #96CE47;          position: absolute; right: 0.5em;  top:  0.5em; z-index: 2;   }
.btn-close:hover {color: #c12f48;}
.btn-close:focus { outline: 1px dotted;}
#skillsmodal > p { color: #000;    padding: 1% 0;}
#skillsmodal  p:first-of-type{padding-top: 10%}
#imgmachine {cursor: pointer; background: rgba(0, 0, 0, 0) url("img/machine.png") repeat scroll 0 0 / cover ;padding-top: 43%;position: absolute; width: 25%; right: 0;  bottom:2%;}
#glass {bottom: 5%; left: 27%; position: absolute;width: 49%;}         
#pull {left: 45%; position: absolute; top: 25%;width: 8%; }
#down { display: none; left: 45.5%; position: absolute; top: 35%; width: 8%;}
#run { height: 0;left: 48%; position: absolute; top: 53.5%; width: 2%;}
#liquid { bottom: 10%; height: 0; left: 37%; position: absolute;  width: 22%;}
.morebeer #run{ -webkit-animation:2500ms linear 0s normal  1  leak;  animation:2500ms linear 0s normal  1  leak;}
.morebeer #liquid{-webkit-animation: 1s linear 1500ms normal forwards 1  full,removeGlass 2s linear 3s forwards; animation: 1s linear 1500ms normal forwards 1  full,removeGlass 2s linear 3s forwards;}
.morebeer #glass {-webkit-animation: removeGlass 2s linear 3s forwards; animation: removeGlass 2s linear 3s forwards;}
.morebeer #pull{display: none}
.morebeer #down{display: block}
@media only screen and (max-width: 1100px) {
    #officecontent article:nth-of-type(2) h5 { margin-bottom:0px !important;}
    .fallnote #stick,.fallnote{ -webkit-animation: none; animation: none;}
    #warrning {display: block; left: 0;position: relative;text-align: center;width: 100%;  z-index: 11; top: initial}
    #showhidepizza{max-height: 100vh; overflow-y: scroll}
    #apply{overflow: hidden}
    #officecontent > article p{color: #000}
    #modal_holder_pizza{width: 90%; margin: auto; height: auto}
    #modal_holder_pizza p {margin: 5px 0}
    #modal_holder_pizza h1 {position: static; text-align: center}
    #modal_holder_pizza h1 br {display: none}
    .pizza1,.pizza2,.pizza3,.pizza4 {background: none}
    .codefield > img {height: 90vh;max-width: 90vw;}
    #temphidden > span,#show {  display: inline-block; margin: 5px 0; padding: 15px; width: auto;}
    #test{width: 70%;margin-top: 30px;}
    #phone { display: block; margin: auto;max-width: 20%; position: static;}
    .cd-section {position: relative; height: auto !important} /*height: 150vh*/
    #balls1:before, #balls2:before,#balls3:before, #balls1:after,#balls2:after,#balls3:after{ width: 30%; padding-top:30%; }
    #logo{max-width: 100%; margin: auto}
    #animationholder { margin: auto; position: relative; width: 30%;}
    /*    .home #animationholder {.home #animationholder { margin-top: 250px;}*/
    .cd-section:nth-of-type(5)  {height: 100vh;}
    .animtext > article #line1,.animtext > article #line2,.animtext > article #line3,.animtext > article #line4,
    .animtext > article #line5,.animtext > article #line6,.animtext > article #line7,.animtext > article #line8,
    .animtext > article #line9,.animtext > article #line10,.animtext > article #line11,.animtext > article #line12,
    .animtext > article #line13,.animtext > article #line14,.animtext > article #line15{animation: none;-webkit-animation: none; color: #000}
    #officecontent > article p {line-height: 2em; font-size: 20px; }
    #officecontent h5{margin-bottom: 0; font-size: 24px;line-height: 2em; }
    #legend {position: static; overflow: visible !important}
    #legend > span {display: block; float: none; width: 100%}
    #legend i {display: inline-block; float: none}
}
@media only screen and (max-width: 1024px) {
    #editorbg{background: url(img/codefieldm.png) no-repeat; background-size: cover;}
    .pizza4 #legend span, .pizza2 #legend span{float: none}
    #officecontent article:nth-of-type(2){margin-top: 75px}
    .toyellow, .togreen{animation: none; -webkit-animation: none}
    .toyellow{background: #bdbdbd}
    .togreen {background: #eec640}
    body, html {overflow-x: hidden; width: 100%}
    .cd-section {height: auto}
    .cd-section:nth-of-type(5) h3, 
    .cd-section:nth-of-type(2) h4, 
    .cd-section:nth-of-type(2) h3, 
    .cd-section:nth-of-type(3) h3, 
    .cd-section:nth-of-type(4) h3 {
        font-size: 40px;
        position: static;
        text-align: center !important;
        width: 100%;
    }
    #phone { max-width: 12%;}
    .cd-section:nth-of-type(4) h2{display: none}
    .cd-section:nth-of-type(3) p, #pizza{position: static}
    #pizza{margin: auto}
    .cd-section:nth-of-type(3) h2{display: none}
    .cd-section:nth-of-type(2) h2{line-height: 50vh}
    .cd-section:nth-of-type(2) > div {
        background-color: #eeeff1;
        background-image: url("img/office.png");
        background-position: center bottom !important;
        background-size: contain !important;
    }
    #rightbottle {right: -20%; }
    #leftbottle{left: -20%;}
    #officecontent h5 {  position: relative;width: 90%;}
    #officecontent, #officecontent article{width: 100%; position: static}
    #officecontent {padding-top: 25px}
    .cd-section:nth-of-type(2) h4 {font-size: 18px; padding-top: 15px}
    .codefield{width: 90%; left: 0; float: none; margin: auto; }
    #commonj,#test{ word-spacing: -2px; font-size: 15px}

    #designby{text-align: left; text-indent: 5%}
    #note > p{font-size: 5vw}
    .cd-section:nth-of-type(5) h3{font-size: 7vw; line-height: 1.2em}
    #note{width: 70vw; height:  70vw; margin: auto; left: 0;; }
    /*    .cd-section {height: 100vh}*/
    .obectobimage { bottom: 40px; height: 25vw;left: 10vw; position: absolute; width: 25vw;}
    #firstbo{z-index: 2; left: 10vw; bottom: 40px}
    #happy{position: relative; margin: auto; right: initial; max-width: 40%}
    #trapezoid > p{font-size: 15px;top: -14vh;}
    #note{position: relative}
    .fieldfixer{   margin-top: 20%; height: 80vw; overflow: hidden}
    #cheers{max-width: 50vw; z-index: 36}
    .cd-section:nth-of-type(5){height: auto !important; } /*max-height: 200vh*/
    /*    #trapezoid{border-top: 15vh solid white;}*/
    @keyframes besmallM {
        50% {width: 35%;padding-top:33.5%;  }
        100% {width: 32%;padding-top:29.5%;  }
    }
    @-webkit-keyframes besmallM {
        50% {width: 35%;padding-top:33.5%;  }
        100% {width: 32%;padding-top:29.5%;  }
    }
    @keyframes leftbottle {
        50%    {transform: rotate(0) ;}
        100% {transform:  rotate(15deg);  left : 41vw;}
    }
    @keyframes rightbottle {
        50%    {transform: rotate(0) ;}
        100% {transform:  rotate(-15deg); right: 41vw;}
    }
    @-webkit-keyframes leftbottle {
        50%    {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(15deg);  left : 41vw;}
    }
    @-webkit-keyframes rightbottle {
        50%    {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(-15deg); right: 41vw;}
    }
    #apply{width: 32%;padding-top:29.5%;  background: url(img/apply.png); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
           -webkit-animation: besmallM linear 2s infinite;     animation: besmallM linear 2s infinite; background-size: cover; height: 0;}
    .home#trapezoid  {     border-top: 200px solid white;}
    .home#trapezoid >p  {     top: -120px;}
    #trapezoid  {     border-top: 130px solid white;}
    #trapezoid >p  {   font-size: 17px;   top: -90px;}

}
@media only screen and (max-width: 568px){
    .home#trapezoid  { border-top: 200px solid white;}
    .home#trapezoid >p {     top: -160px;}
    #apply{width: 20%;padding-top:18.5%;  background: url(img/apply.png); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
           -webkit-animation: besmallM linear 2s infinite;     animation: besmallM linear 2s infinite; background-size: cover; height: 0;}
    @keyframes besmallM {
        50% {width: 22%;padding-top:20.5%;  }
        100% {width: 20%;padding-top:18.5%;  }
    }
    @-webkit-keyframes besmallM {
        50% {width: 22%;padding-top:20.5%;  }
        100% {width: 20%;padding-top:18.5%;  }
    }
    .cd-section:nth-of-type(5) h3, 
    .cd-section:nth-of-type(2) h4, 
    .cd-section:nth-of-type(2) h3, 
    .cd-section:nth-of-type(3) h3, 
    .cd-section:nth-of-type(4) h3 {font-size:5vh;}
    #trapezoid.home > p{text-align: center}
    #trapezoid.home .css3-metro-dropdown {left: 0; margin: 3px 0}
    #imgmachine { background: rgba(0, 0, 0, 0) url("img/machine.png") repeat scroll 0 0 / cover ; bottom: 2%; padding-top: 99%;position: relative;   right: 0; width: 57%;   margin: auto;}
    .obectobimage, #firstbo{bottom: 10vh}
    .codefield > img {   height: 450px; max-width: 87vw;}
    #phone{max-width: 20%}
    .cd-section:nth-of-type(4) p{font-size: 15px}
    #test { left: 28%;  margin-top: 60px;  position: relative;width:72%}
}
@media only screen and (max-width: 1024px) and (min-width: 680px){
    .cd-section:nth-of-type(5) h3, .cd-section:nth-of-type(2) h4, .cd-section:nth-of-type(2) h3, .cd-section:nth-of-type(3) h3, .cd-section:nth-of-type(4) h3 {
        font-size: 5vh;
    }
}
@media only screen and (max-width: 500px){
    #phone{max-width: 30%}
    #test { left: 28%;  margin-top: 80px;  position: relative;width:72%}
    .codefield > img { height: 450px; max-width: 87vw;}   
    @keyframes leftbottle {
        50%  {transform: rotate(0) ;}
        100% {transform:  rotate(15deg);  left : 37vw;}
    }
    @keyframes rightbottle {
        50%  {transform: rotate(0) ;}
        100% {transform:  rotate(-15deg); right: 37vw;}
    }
    @-webkit-keyframes leftbottle {
        50%  {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(15deg);  left : 37vw;}
    }
    @-webkit-keyframes rightbottle {
        50%    {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(-15deg); right: 37vw;}
    }
}

#under2::after { bottom: 20px !important;  position: relative;}
#under1::after{position: relative; bottom: 20px; margin-bottom: -20px;}

@media only screen and (max-width: 765px)and (min-width: 568px) {
    /* #logo img { top: 15vh;} */
    .cd-section:nth-of-type(4) p{font-size: 16px;}
    .codefield > img {   height: 450px; max-width: 87vw;}
    #apply{width: 20%;padding-top:18.5%;  background: url(img/apply.png); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
           -webkit-animation: besmallM linear 2s infinite;     animation: besmallM linear 2s infinite; background-size: cover; height: 0;}
    @keyframes besmallM {
        50% {width: 22%;padding-top:20.5%;  }
        100% {width: 20%;padding-top:18.5%;  }
    }
    @-webkit-keyframes besmallM {
        50% {width: 22%;padding-top:20.5%;  }
    }
}
@media only screen and (max-width: 1024px)and (min-width: 768px) {
    #test { margin-top:60px}
    .codefield > img { height: 45vh; max-width: 90vw;}
    #logo img {  position: relative;  top: 120px;  z-index: 4; } 
    #second p{color: #fff}
    #show{color: #000}
}
@media only screen and (max-width: 1024px)and (min-width: 980px) {
    #test { margin-top:60px}
}
@media only screen and (min-width: 1800px) {
    #phone {max-width: 150px}
    #happy {display: none}
    #apply, #apply:after {animation: none}
    @-webkit-keyframes leftbottle {
        50%    {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(15deg); left: 53vw;}
    }
    @-webkit-keyframes rightbottle {
        50%    {-webkit-transform: rotate(0) ;}
        100% {-webkit-transform:  rotate(-15deg); right: 53vw;}
    }
    .startbeers > #leftbottle{-webkit-animation: leftbottle 1500ms linear 1s forwards;  animation: leftbottle 1500ms linear 1s forwards;  transform:  rotate(0deg); -webkit-transform:rotate(0deg);}
    .startbeers > #rightbottle{ -webkit-animation: rightbottle 1500ms linear 1s forwards; animation: rightbottle 1500ms linear 1s forwards;  transform: rotate(0deg); -webkit-transform: rotate(0deg);}
    input{ animation:none; -webkit-animation:none; opacity: 1}
    .home#trapezoid > p {  top: -200px;}
    .home#trapezoid{    border-top: 250px solid white;}
}

@media only screen and (max-width: 610px)and (min-width: 580px) {
    :root .css3-metro-dropdown select { font: normal 11px/1em "Segoe UI", Arial, Helvetica, Sans-serif !important;}
}
@media only screen and (max-width: 980px)and (min-width: 920px) {
    #animationholder{    top: 60px;}
    #apply{width: 15%;padding-top:13.5%;  background: url(img/apply.png); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
           -webkit-animation: besmallM linear 2s infinite;     animation: besmallM linear 2s infinite; background-size: cover; height: 0;}
    @keyframes besmallM {
        50% {width: 17%;padding-top:15.5%;  }
        100% {width: 15%;padding-top:13.5%;  }
    }
    @-webkit-keyframes besmallM {
        50% {width: 17%;padding-top:15.5%;  }
        100% {width: 15%;padding-top:13.5%;  }
    }

}
#static {display: none}
@media only screen and (min-width:2500px) {
    input, #balls1:before,  #balls3:before, #balls2:before,#balls1:after,  #balls2:after, #balls3:after, #phone,#apply,#apply::after,
    .startbeers > #leftbottle,.startbeers > #rightbottle,.startbeers > #happy,.startbeers > #cheers, .toyellow,.togreen,.animtext > article #line1, 
    .animtext > article #line2,.animtext > article #line3, .animtext > article #line4,.animtext > article #line5, 
    .animtext > article #line6, .animtext > article #line7, .animtext > article #line8,  .animtext > article #line9,  .animtext > article #line10, .animtext > article #line11, 
    .animtext > article #line12, .animtext > article #line13,.animtext > article #line14,.animtext > article #line15
    { animation: none !important; -webkit-animation: none !important}
    .animtext > article #line1, 
    .animtext > article #line2,.animtext > article #line3, .animtext > article #line4,.animtext > article #line5, 
    .animtext > article #line6, .animtext > article #line7, .animtext > article #line8,  .animtext > article #line9,  .animtext > article #line10, .animtext > article #line11, 
    .animtext > article #line12, .animtext > article #line13,.animtext > article #line14,.animtext > article #line15{color: #000}
    #leftbottle { left: 45vw; transform:  rotate(15deg) !important; -webkit-transform:rotate(15deg)  !important; }
    #rightbottle{right: 45vw; transform:  rotate(-15deg)  !important; -webkit-transform:rotate(-15deg)  !important; }
    #cheers{transform:  scale(1);-webkit-transform:  scale(1)}
    #balls1:before,  #balls3:before, #balls2:before,#balls1:after,  #balls2:after, #balls3:after{display: none}
    #static {display: inline-block}
    #standart {display: none}
}