@font-face {
          font-weight:normal;
          font-family: Cavorting;
          src: url('cavorting.otf');
        }
      @font-face {
          font-weight:normal;
          font-family: "digital-7";
          src: url('digital-7italic.otf');
        }

       @font-face {
          font-weight:medium;
          font-family: "avenir";
          src: url('AvenirNextLTPro-Regular.otf');
        }

    .flexcontainer {
      display: flex;
      height: 100%;
       justify-content: center;
       align-items: center;
    }

    .flexchild {
        flex: 0 0 100%;
    }

    .macbookbackground{
      width: 100%;
      height: 100%;
      border: 1px solid red;

       background-image: url(mackboock.svg);
      background-repeat: no-repeat;
    background-position: center;
  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
     }

    .visibility_hid{  visibility: hidden }
    .display_none{  display: none }
    .hidden_{opacity: 0;}


    .lp {fill:none; stroke:#FF6600; stroke-width:2}

    .str5 {stroke:#F9CA6B;stroke-width:1}
    .str6 {stroke:#CCCCCC;stroke-width:1}
    .str0 {stroke:#EF977C;stroke-width:7;stroke-linecap:round}
    .fil1 {fill:#006696}
    .fil1on {fill:#317FA3}
    .fil2 {fill:#EF977C}/*skeen color*/
    .fil3 {fill:none}
    .fil4 {fill:#FDE4AC}
    .fil5 {fill:#F2521F}
    .fil7 {fill:#B64B4D}
    .fil8 {fill:#121C26}
    .fil9 {fill:#E4A85B}
    .fil10 {fill:#CCC}
    .fil10on {fill:#ff9}
    .fil11 {fill:#006470}
    .fil12 {fill:#E8745D}
    .fil13 {fill:#724842}
    .fil14 {fill:#EBCA9C}
    .fil15 {fill:#6E443D}
    .fil16 {fill:#563636}
    .fil17 {fill:#EF9887}
    .fil18 {fill:#016493}
    .fil19 {fill:#183F5B}
    .fil22 {fill:#7E89A8}
    .fil24 {fill:#E6E6E6}

    .fnt1 {fill:black; font-weight:normal;font-size:14.4px;font-family:'Arial'}
    .fnt6 {fill:black; font-weight:normal;font-size:17px;font-family:'Arial'}
    .fnt2 {fill:black; font-weight:normal;font-size:19px;font-family:'Arial'}
    .fnt0 {fill:black; font-weight:bold;font-size:19px;font-family:'Arial'}
    .fnt3 {fill:black; font-weight:bold;font-size:19px;font-family:'Arial'}
    .fnt4 {fill:black; font-weight:normal;font-size:36px;font-family:'Arial'}
    .fnt5 {fill:black; font-weight:bold;font-size:36px;font-family:'Arial'}
/*
.activtab{fill:#3F3F3F;}
.tabs{fill:#666;}*/
.tabletop0 {stroke:#F9CA6B;stroke-width:2}
.tabletop1 {stroke:#E0BF94;stroke-width:2}
.chear {stroke:#888;stroke-width:2;fill:#828486}

.buildings {fill:#A7D6E2;fill-rule:nonzero}
.sky {fill:#DFF2F6;fill-rule:nonzero}
.floor {fill:#CCCCCC;fill-rule:nonzero}
.bin {fill:#927A6C}
.black_{fill:black}
.pen1{fill:#EDC80A}
.pen2{fill:#D1AE15}
.ruber {fill:#F29785}
.bg { background-color: #fff; }
.throwPaper1 {fill:white; stroke:#E6E6E6; stroke-width:1.5}


.clouds1 {
  -webkit-animation: cloudsfly 33s normal linear infinite;
     -moz-animation: cloudsfly 33s normal linear infinite;
      -ms-animation: cloudsfly 33s normal linear infinite;
          animation: cloudsfly 33s normal linear infinite;
}
.clouds2 {
  -webkit-animation: cloudsfly 30s normal linear infinite;
     -moz-animation: cloudsfly 30s normal linear infinite;
      -ms-animation: cloudsfly 30s normal linear infinite;
          animation: cloudsfly 30s normal linear infinite;
          opacity: 0.5;
          -webkit-animation-delay: -22s;
             -moz-animation-delay: -22s;
            -ms-animation-delay: -22s;
            animation-delay: -22s;
}
.clouds3 {
  -webkit-animation: cloudsfly 43s normal  infinite;
     -moz-animation: cloudsfly 43s normal  infinite;
      -ms-animation: cloudsfly 43s normal  infinite;
          animation: cloudsfly 43s normal  infinite;
          opacity: 0.5;
}
@keyframes cloudsfly {
  0%   { -ms-transform: translateX(25vw);
         -webkit-transform:translateX(25vw);
         -moz-transform: translateX(25vw);
         transform: translateX(25vw);
       }
  100% { -ms-transform: translateX(-40vw);
         -webkit-transform:translateX(-40vw);
         -moz-transform: translateX(-40vw);
         transform: translateX(-40vw);

       }
}