/*----------------------------------screen size min 600px - desktop version ---------------------------*/
@media screen and (min-width: 600px){

  
  .navbarBottomText::after {
    display: inline;
    content: "\\domestic";
    background: none;
    animation-name: changeText;
    animation-duration: 120s;
    animation-iteration-count: infinite;
  }

  .mainContent {
    position: fixed;
    left: 0;
    right: 0;
    top: 74px;
    bottom: 65px;
    overflow: hidden;
    background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    animation-name: change;
    animation-duration: 120s;
    animation-iteration-count: infinite;
  }

  @keyframes change {
     0%
       {
       background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg");
      }
     10%
      {
        background-position: center center; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg"); 
      }
    20%
      {
        animation-delay: 10s; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_004.jpg"); 
      } 
    30%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_004.jpg");
      }
    40%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_007.jpg");
      }
     50%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_007.jpg");
      }
    60%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_001.jpg");
      }
    70%
      {
        background-position: center center;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_001.jpg");
      }
    80%
      {
        background-position: center center; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_Photomatch Image.jpg");
      }
     90%
      {
        background-position: center center; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_Photomatch Image.jpg");
      }
    95%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_008.jpg");
      }
    100%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_008.jpg");
      }
    }

    @keyframes changeText {
     0%
       {
       content: "\\3d visuals\\contemporary house\\main front entrance - model: revit - 3d render: lumion";
      }
     10%
      {
       content: "\\3d visuals\\contemporary house\\main front entrance - model: revit - 3d render: lumion";
      }
    20%
      {
       content: "\\3d visuals\\contemporary house\\front elevation - model: revit - 3d render: lumion";
      } 
    30%
      {
        content: "\\3d visuals\\contemporary house\\front elevation - model: revit - 3d render: lumion";
      }
    40%
      {
       content: "\\3d visuals\\contemporary house\\rear under canopy - model: revit - 3d render: lumion";
      }
     50%
      {
        content: "\\3d visuals\\contemporary house\\rear under canopy - model: revit - 3d render: lumion";
      }
    60%
      {
        content: "\\3d visuals\\contemporary house\\front elevation - model: revit - 3d render: lumion";
      }
    70%
      {
        content: "\\3d visuals\\contemporary house\\front elevation - model: revit - 3d render: lumion";
      }
    80%
      {
        content: "\\3d visuals\\contemporary house\\photomatched onto existing site - model: revit - 3d render: lumion";
      }
     90%
      {
        content: "\\3d visuals\\contemporary house\\photomatched onto existing site - model: revit - 3d render: lumion";
      }
    95%
      {
        content: "\\3d visuals\\contemporary house\\rear window close up finish - model: revit - 3d render: lumion";
      }
    100%
      {
        content: "\\3d visuals\\contemporary house\\rear window close up finish - model: revit - 3d render: lumion";
      }
    }
}

/*----------------------------------screen size MAX 600px - Phone version ---------------------------*/
@media screen and (max-width: 600px){

 

  .mainContent {
    position: fixed;
    left: 0;
    right: 0;
    top: 70px;
    bottom: 55px;
    overflow: hidden;
    background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    animation-name: change;
    animation-duration: 120s;
    animation-iteration-count: infinite;
  }

 @keyframes change {
     0%
       {
       background-position: center center;animation-delay: 10s;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg");
      }
     10%
      {
        background-position: center center; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg"); 
      }
    20%
      {
        background-position: center left;animation-delay: 10s; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_004.jpg"); 
      } 
    30%
      {
        background-position: center right;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_004.jpg");
      }
    40%
      {
        background-position: center right;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_007.jpg");
      }
     50%
      {
        background-position: center left;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_007.jpg");
      }
    60%
      {
        background-position: center center;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_001.jpg");
      }
    70%
      {
        background-position: center center;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_001.jpg");
      }
    80%
      {
        background-position: center left; background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_Photomatch Image.jpg");
      }
     90%
      {
        background-position: center right; background-image: url("images/Proposed New House Project - 2D CAD to 3D Model & Visuals_Photomatch Image.jpg");
      }
    95%
      {
        background-position: center left;background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_008.jpg");
      }
    100%
      {
        background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_008.jpg");
      }
    }
  
@keyframes changeText {
     0%
       {
       content: "\\3d visuals\\new build house\\main front entrance";
      }
     10%
      {
       content: "\\3d visuals\\new build house\\main front entrance";
      }
    20%
      {
       content: "\\3d visuals\\new build house\\front elevation";
      } 
    30%
      {
        content: "\\3d visuals\\new build house\\front elevation";
      }
    40%
      {
       content: "\\3d visuals\\new build house\\rear under canopy";
      }
     50%
      {
        content: "\\3d visuals\\new build house\\rear under canopy ";
      }
    60%
      {
        content: "\\3d visuals\\new build house\\front elevation";
      }
    70%
      {
        content: "\\3d visuals\\new build house\\front elevation";
      }
    80%
      {
        content: "\\3d visuals\\new build house\\photomatched onto site";
      }
     90%
      {
        content: "\\3d visuals\\new build house\\photomatched onto  site";
      }
    95%
      {
        content: "\\3d visuals\\new house house\\rear window close up finish";
      }
    100%
      {
        content: "\\3d visuals\\new house house\\rear window close up finish";
      }
    }

  .navbarBottomText::after {
    display: inline;
    content: "Hello";
    background: none;
    animation-name: changeText;
    animation-duration: 120s;
    animation-iteration-count: infinite;
  }
}

/*----------------------------------screen size max 400px - old phone version ---------------------------*/
@media screen and (max-width: 400px){

  .mainContent {
    position: fixed;
    left: 0;
    right: 0;
    top: 55px;
    bottom: 45px;
    overflow: hidden;
    background-image: url("../images/Proposed New House Project - 2D CAD to 3D Model & Visuals_005.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    animation-name: change;
    animation-duration: 120s;
    animation-iteration-count: infinite;
  }
}