@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body.home{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url(img/white1.jpg);
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    min-height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;

}
/*NAV BASIC--------------------------------------------*/

header{
    font-weight: bold;
}
nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 70px 100px;
    box-sizing: border-box;
    transition: .5s;
    z-index: 300;
}
nav.black{
    background: rgba(0,0,0,.8);
    height: 80px;
    padding: 10px 50px;
    width: 100%;
}
/*LOGO BEGIN-----------------------------------------------------*/

nav .logo{
    float: left;
}
nav .logo img{
    height: 80px;
    transition: .5s;
    margin-left: -10px;
}
nav.black .logo img{
    height: 60px;
}

/*NAV UL------------------------------*/
nav ul{
    float: right;
    margin: 0;
    padding: 0;
    margin-top: 20px;
    
}
/*NAV UL LI-----------------------------------*/
nav ul li{
    list-style: none;  
    position: relative;
    display: inline-block;
}
/*UL INSIDE SERVICES---------------------------*/
ul.drop-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 0;
    margin-top: 3px;
}

/*LI INSIDE UL THAT INSIDE SERVICES-------------- DROP MENU*/
ul.drop-menu > li{
    font-family: 'Roboto', sans-serif;
    color: black;
    background: white;
    text-transform: uppercase;
    height: 40px;
    width: 200px;
    padding-top: 10px; 
    padding-left: 25px ;
    border: whitesmoke 0.9px solid;
    padding-bottom: 10px;
}


/*HOVER DROP MENU------------------------------------------*/
ul.drop-menu > li:hover{
    background: #f46137 !important;
    color: white !important;
}

/*DROP MENU LI---------------------------------------------*/
.drop-menu > li{
    display: none;
    position:relative;
    z-index:999;
}

li:hover > ul.drop-menu li{
    display: block;
  }

nav ul li a{
    font-family: 'Roboto', sans-serif;
    color: black;
    padding: 5px 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .5s;
}
nav.black ul li a{
    color: #fff;
    line-height: 20px;
}

nav ul li a.active,
nav ul li a:hover {
    color: #fff;
    background: #f46137;
    list-style: none;
    text-decoration: none;
}

    /*********************************************************** BEGIN OF MENU ********************************************************/
    .drop-menu li:nth-child(1) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 300ms;
        animation-delay: 200ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(2) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 400ms;
        animation-delay: 300ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(3) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 500ms;
        animation-delay: 400ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(4) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 600ms;
        animation-delay: 500ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(5) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 700ms;
        animation-delay: 600ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(6) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 800ms;
        animation-delay: 700ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
      .drop-menu li:nth-child(7) {
        opacity: 0;
        transform-origin: top right;
        animation-name: menuFour;
        animation-duration: 800ms;
        animation-delay: 700ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
    
    
      @keyframes menuFour{
        0% {
          opacity: 0;
          transform: rotate(-30deg) translateX(30px);
         }
    
        100% {
          opacity: 1;
          transform: rotate(0deg) translateX(0px);
         }
      }
      /*********************************************************** END OF MENU ********************************************************/



#socialMedia{
    float: left;
    position: relative;
    z-index: 500;
    list-style: none;
    margin-left: 50px;
    width: 20%;
    margin-top: 10px;
}



#socialMedia li{
    float: left;
    text-decoration: none;
    padding: 5px;
    list-style: none;
    
}

#socialMedia .fa{
    color: black;
    font-size: 30px;
}

#socialMedia .fa:hover{
    color: #f46137;
}



#address p{
    font-family: 'Roboto', sans-serif;
    color: black;
    text-transform: uppercase; 
    float: left;
    font-size: 16px;
    position: relative;
    z-index: 500;
    margin-top: 20px;
}
#address .fa{
    color: red;
    transition: all .2s ease-in-out;
    position: relative;
    z-index: 500;
  }
  #address .fa:hover{
    transform: scale(2);
    color: #999;
  }

#busiHours{
    font-family: 'Roboto', sans-serif;
    color: black;
    text-transform: uppercase; 
    float: left;
    text-align: center;
    font-size: 16px;
    position: relative;
    z-index: 500;
    width: 35%;
    margin-top: 20px;
}

#phone{
float: right;
}

#phone p{
    font-family: 'Roboto', sans-serif;
    color: black;
    text-transform: uppercase; 
    float: left;
    font-size: 16px;
    position: relative;
    z-index: 500;
    list-style: none;
    text-decoration: none;
    margin-right: 120px;
    margin-top: 20px;
}

#phone .fa{
    color: #32CD32/*#02b9f6*/;
    transition: all .2s ease-in-out;
    position: relative;
    z-index: 500;
  }
  #phone .fa:hover{
    transform: scale(1.5);
    color: green;
  }

.red{
    color: #f46137;
    text-shadow: darkcyan;
    font-style: italic;
}

header{
    height: 170px;
    width: 100%;
    margin: auto;
}

#slideshow{
    width: 100%;
    height: 100px;
    margin-top: 120px;
}


.item h1{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 43px;
    text-transform: uppercase;
}


#squares{
    width: 100%;
    height: 300px;
}

.section{
    max-width: 960px;
    margin: 0 auto;
    padding: 3% 2%;
}
.grid{
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.grid:after{
    clear: both;
}
.grid:before{
    content: "";
    display: table;
}
.grid li{
    width: 250px;
    height: 150px;
    display: inline-block;
    margin: 10px;
    background-color: black;
    border-radius: 10px;
    /*opacity: 0.9;*/
    background-color:rgba(0, 0, 0, 0.9);        /*************GOOOOOOOOOOOOOOD!!!!!*************/
}
.box{
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
    transition: 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.box:hover{
    transform: scale(1.2);
}

.img-box{
    background: linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.10)), url(img/redmic.jpg);                            
}

.info{
    position: absolute;
    width: inherit;
    height: inherit;
}

.info h3{
    font-family: 'Roboto', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    /*margin-left: 70px;*/
    padding: 25px 0 0 80px;
}

#infoPara{
    color: white;
    font-family: 'Roboto', sans-serif;
    color: #32CD32;
    text-transform: uppercase; 
    font-size: 50px;
    padding: 0 0 0 80px;
    margin-top: -20px;
}

#moveLeft{
    margin-left: -30px;
}



#strip{
    width: 100%;
    height: 80px;
    background-color: #f46137;  
    opacity: 0.9;
}
#strip h1{
    font-family: 'Acme';
    color: white;
    text-transform: uppercase; 
    text-align: center;
    font-size: 25px;  
    font-style: italic;
    padding-top: 25px;
    margin: 0;
}

.boldFont{
    color: black; 
    font-style: italic;
}

#welcome{
    width: 100%;
    height: 800px;
    background: white;
}

#welcome p{
    font-family: 'Abel';
    font-size: 40px;
    text-align: center;
    padding-top: 100px;
}
#welcome h1{
    font-family: 'Abel';
    font-size: 80px;
    font-weight: bolder;
    text-align: center;
    text-transform: uppercase;
}
#welcome h3{
    font-family: 'Abel';
    font-size: 60px;
    font-weight: lighter;
    text-align: center;
    text-transform: uppercase;
}

.orange{
    color: #f46137;
}

.articles{
    font-size: 30px !important;
    text-align: center;
    font-family: 'Abel';
    font-weight: normal;
    padding: 0 30px 10px 30px;
    margin: auto;
    text-transform: none !important;
    margin-top: -90px;
    width: 80%;
}

button{
    width: 180px;
    height: 60px;
    background: white;
    border: 0px;
    color: black !important;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Abel';
    border: black 2px solid;
  }

  .buttonDiv{
      text-align: center;
  }
  button:hover{
    background-color: #f46137;
    cursor: pointer;
    color: white !important;
    border: none;
  }

  
  #white-background{
    width: 100%;
    height: 2725px;
    background: white;
    margin: 0;
    padding: 0;
    position: absolute;
  }

  #repairSection{
    width: 90%;
    /*height: 1500px;*/
    margin: auto;
    background-color: #f1f2f7;
    border: 1px solid #e4e4e4;
    margin-top: 50px;
    
  }

  #fix{
    width: 60%;
    margin: auto;
    border-bottom: 0.5px solid #f46137;
  }
  #fix h1{
    text-align: center;
    font-family: 'Abel';
    color: #3c3c3c;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: bolder;
  }

  #repair-boxes{
      max-width: 100%;
      margin: 0 auto;
      padding: 3% 2%;
  }

  .grid-boxes{
      margin: 20px 0 0 0;
      padding: 0;
      list-style: none;
      display: block;
      text-align: center;
      width: 100%;
  }
  .grid-boxes:after{
      clear: both;
  }
  .grid-boxes:after, .grid-boxes:before{
      content: "";
      display: table;
  }

  .grid-boxes li{
      width: 340px;
      height: 400px;
      display: inline-block;
      margin: 20px;
      background: #DCDCDC;
      border-radius: 10px;
      transition: all .2s ease-in-out;
  }
  .grid-boxes li:hover{
    transform: scale(1.1);
    cursor: pointer;
}

  .repair-box{
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
      transition: 0.3s ease-in-out, transform 0.3s ease-in-out;
  }


  .info-box-repair{
      position: absolute;
      width: inherit;
      height: inherit;
      padding: 0 15px 0 15px;
  }

  .info-box-repair .fa{
    font-size: 70px;
    margin: 30px 0 0 10px;
    color: #f46137;
    text-align: center;
}

  .info-box-repair h1{
    font-family: 'Acme';
    color: black;
    font-size: 30px;
    margin: 15px 0 0 15px;
    text-align: center;
  }

  .info-box-repair p{
    font-family: 'Acme';
    color: black;
    font-size: 18px;
    font-weight: lighter;
    margin: 10px 0 0 20px;
    text-align: center;
  }

  .h1Box{
    color: red;
}

#showcase-container{
    width: 100%;
    height: 700px;
    background: white;
}
#showcase{
    width: 70%;
    height: 500px;
    margin: auto;
}

#showcase-heading h1{
    text-align: center;
    font-family: 'Advent Pro';
    font-size: 35px;
    margin-top: 30px;
    color: black;
    font-weight: lighter;
    text-transform: uppercase;
    margin: 100px 0 60px 0;
}


#contact-info{
    text-align: center;
    font-family: 'Advent Pro';
    font-size: 35px;
    margin-top: 30px;
    color: black;
    font-weight: lighter;
    text-transform: uppercase;
    margin: 70px 0 30px 0;
}



#phone-direction-email{
    width: 100%;
    height: 300px;
}

#phone-direction-email h1{
    font-family: 'Oswald';
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    color: black;
}


.bottom-phone{
    width: 25%;
    height: 300px;
    float: left;
}
.bottom-phone p{
    font-family: 'Oswald';
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    color: black;
}

.bottom-phone h1 .fa{
    font-size: 50px;
    margin-top: 10px;
}

.bottom-address{
    width: 25%;
    height: 300px;
    float: left;
}
.bottom-address p{
    font-family: 'Oswald';
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    color: black;
}

.bottom-address h1 .fa{
    font-size: 50px;
    margin-top: 10px;
}

.bottom-busi{
    width: 25%;
    height: 300px;
    float: left;
}
.bottom-busi p{
    font-family: 'Oswald';
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    color: black;
}

.bottom-busi h1 .fa{
    font-size: 50px;
}

.bottom-email{
    width:  25%;
    height: 300px;
    float: left;
}
.bottom-email p{
    font-family: 'Oswald';
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    color: black;
}
.bottom-email h1 .fa{
    font-size: 50px;
}

.acme-font{
    font-family: 'acme';
}

#footer{
    width: 100%;
    height: 50px;
    background: black;
}



#footer p{
    font-family: 'Oswald';
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    color: white;
    padding: 10px 0 0 0;
}






/*--------------------*/


.carousel-control.left, .carousel-control.right{
    margin: 10% 0% 10% 0%;
    height: 0;
  }

  .carousel-control > span > img{
    width: 100px;
    height: 100px;
  }
  .carousel-control > span > img:hover{
      opacity: 1.0;
  }

  #about-nav{
    border-bottom: black 1px solid;
    box-shadow: 2px 0.5px 10px black/*#f46137*/;
  }

  .page-banner-c{
      width: 100%;
      margin: 0;
      padding: 0;
      height: 300px;
      background: url(img/laptopphone.jpg);
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 50px;
  }

  .page-banner{
    /*opacity: 0.8;*/
    background-color: #f46137;
    width: 100%;
    height: 300px;
    /*background-color:rgba(244,97,55, 0.5);*/
    background-color:rgba(0,0,0,0.7);
  }
  .page-banner h1{
    font-family: 'Aclonica';
    font-size: 80px;
    text-align: center;
    color: white;
    margin: auto;
    /*width: 50%;*/
    padding: 10% 0 0 0;
  }

#header-about{
    height: 140px;
}
#another{
    width: 100%;
    height: 1000px;
}

#topHeader-about{
    width: 100%;
    height: 60px;
    background-color: /*#F5F5F5   #58585a  #A9A9A9*/ #C0C0C0;
    
}

#topHeader-about p,#topHeader-about .fa{
    color: black;
}
#slideshow-about{
    margin: auto;
    width: 65%;
    height: 450px;
    background: url(img/orange-background.jpg);
}

#slideshow-about h1{
    color: white;
    font-family: 'Aclonica';
    width: 100%;
    margin: 20% 0 0 20%;
    width: 65%;
    text-transform: none;
}
#slideshow-about .carousel-control img{
    margin: 50% 0 50% 0;
    background: #f46137;
    border: white 5px solid;
}

#welcome-about #welcome{
    height: 400px;
    margin-bottom: 100px;
}

#welcome-about h1{
    font-size: 40px;
}
#welcome-about h3{
    font-size: 30px;
}
#welcome-about .articles{
    font-size: 22px !important;
    width: 70%;
    text-align: center;
}

#people-say-c{
    background: url(img/people.jpg);
    margin-bottom: 200px;
}

#people-say{
    width: 100%;
    height: 700px;
    background-color:rgba(0, 0, 0, 0.9);
    /*background-color:rgba(89,93,143, 0.9);*/

}

#left-people-say{
    width: 50%;
    float: left;
    height: inherit;
}
#left-people-say img{
  margin: auto;
  margin: 0 5% 0 25%;
}


#right-people-say{
    width: 50%;
    float: left;
    height: inherit;        /* A good one huh!!*/
    
}
#right-people-say p{
    text-align: center;
    font-size: 25px;
    font-family: 'Allan';
    width: 80%;
    margin: auto;
    margin-top: 80px;
    color: white;
}


#tech-info{
    width: 100%;
    height: 600px;
    text-align: center;
}


#tech-info h1{   
    text-align: center;
    font-size: 60px;
    font-family: 'Abel';
}
#tech-info p{
    text-align: center;
    font-size: 25px;
    font-family: 'Abel';
    width: 80%;
    margin: auto;
}

#tech-info-bold{
    font-size: 25px;
    font-family: 'Abel';
    font-weight: bolder;
    color: #f46137;
}

#laptopcare-bold{
    font-family: 'Abel';
    font-weight: bolder;
    color: #f46137;
}

#boxes{
    margin-top:20px;
  }
  
  #boxes .box{
    float:left;
    text-align: center;
    width:30%;
    padding:10px;
  }
  
  #boxes .box img{
    width:90px;
  }

  .container{
    width:80%;
    margin:auto;
    overflow:hidden;
  }

  /************* SERVICES  *******/
  
  .bigger-font{
      font-size: 20px;
      color: #f46137;
  }




/***************** DEALS **********************************/
#slideshow-deals{
    width: 80%;
    padding: 0;
    margin: auto;
    position: relative;
    border: black 0.9px solid;
}

#slideshow-deals img{
    width: 100%;
}

.textOnSlideshow {
    position: absolute;
    top: 15%;
    right: 15%;
    bottom: 15%;
    left: 15%;
    z-index: 10;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

#slideshow-deals .carousel-control.left,
#slideshow-deals .carousel-control.right{
    margin: 20% 0 0 0;
}



  #slideshow-deals .carousel-control > span > img{
    width: 50px;
    height: 50px;
  }
  #slideshow-deals .carousel-control > span > img:hover{
    opacity: 1.0;
  }

  #slideshow-deals h3{
      font-family: 'Abel';
      color: white;
      font-size: 150px;
      font-weight: bolder;
  }

  #slideshow-deals p{
    font-family: 'Abel';
    color: white;
    font-size: 37px;
    font-weight: bolder;
    margin-top: -35px;
  }

  .item .img-i{
      width: 900px;
      height: 600px;
  }



.img-i{
    position: relative;
}

.img-cover{
    /*background-color:rgba(0,0,0,0.1);*/
    background-color: grey;
    opacity: 0.6;
    width: 100%;
    height: 300px;
    position: absolute;
    width: inherit;
    height: inherit;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* DEALS HEAD ************************************/
.deals-head{
    width: 80%;
    margin: auto;
    height: 50px;
    background: #e7e7e7;
    color: #474747;
    margin-top: 70px;
}
.deals-head h1{
    font-family: sans-serif;
    float: left;
    padding: 0;
    margin: 15px 0 0 30px;
    font-weight: bolder;
    font-size: 20px;
}


/* BEST DEALS  **********************************/
#best-deals{
    width: 80%;
    margin: auto;
    height: 600px;
    margin-top: 70px;
    font-family: 'abel'; 
}

#best-deals .deal{
    float: left;
    width: 33.33%;
    padding: 0 0 0 70px;
    box-sizing: border-box;
}

#best-deals .deal h1{
    float: left;
    color: #085eb9;
    font-weight: bolder;
    font-size: 30px;
}

#best-deals .deal p{
    font-size: 20px;
    color: #085eb9;
    float: left;
}

/*  IMG INSIDE DEALS *************************/
#best-deals .deal img{
    width: 300px;
    height: 300px;
}

#best-deals .deal h2{
    font-weight: bolder;
    font-size: 35px;
}
#best-deals .deal h3{
    padding: 0;
    margin: 0;
    background: /*#f46137*/ #fff200;
    color: black;
}
  
.in-store{
    background: #bb0628 !important;
    color: white !important;
    margin: 0;
    padding: 5px 0 5px 0 !important;
    width: 110px;
    text-align: center;
    font-family: sans-serif;
    font-size: 15px !important;
    font-weight: bolder;
    margin-bottom: 10px !important;
}


/* Deals ***********************************************/
#deals{
    width: 80%;
    margin: auto;
    height: 2800px;
    font-family: 'abel'; 
}

.deals-desktop{
    height: 1600px !important;
}

.deals-aio{
    height: 1150px !important;
}

.deals-apple{
    height: 1100px !important;
}

.deals-monitors{
    height: 1100px !important;
}

#deals .in-deal{
    float: left;
    width: 20%;
    padding: 0 0 0 70px;
    margin-top: 100px;
}

#deals .in-deal h1{
    float: left;
    color: #085eb9;
    font-weight: bolder;
    font-size: 20px;
}

#deals .in-deal p{
    font-size: 18px;
    color: #085eb9;
    float: left;
}

#deals .in-deal img{
    width: 200px;
    height: 200px;
}

#deals .in-deal h2{
    font-weight: bolder;
    font-size: 30px;
}
#deals .in-deal h3{
    padding: 0;
    margin: 0;
    background: #fff200;
    color: black;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white !important; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    width: 60px;
    opacity: 0.9;
}

#myBtns {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white !important; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    width: 60px;
    opacity: 0.9;
}

#myBtn:hover {
    background-color: black; /* Add a dark-grey background on hover */
}

#contact-infoo{
    width: 80%;
    margin: auto;
    
}

.left-contact{
    width: 50%;
    float: left;
}

.right-contact{
    width: 50%;
    float: left;
}

#contact-infoo h1{
    font-family: 'Raleway';
    font-weight: bolder;
    font-size: 50px;
    color: #008B8B;
}

#contact-infoo h2{
    font-family: 'Raleway';
    font-weight: bolder;
    font-size: 35px;
    
}

#contact-infoo p{
    font-family: 'Raleway';
    font-weight: bolder;
    font-size: 20px;
}



#map-con{
    width: 80%;
    margin: auto;
    margin-bottom: 100px;
}

/* Contact Form ***********************************/
#contact-form-con{
    width: 80%;
    margin: auto;
    position: relative;
    height: 700px;
    font-family: 'abel';
    font-size: 20px;
    margin-bottom: 100px;
}

#contact-form-con img{
    max-width: 100%;
    border-radius: 10px;
    height: inherit;
}

#contact-form{
    border-radius: 5px;
    background-color: white;
    padding: 20px;
    position: absolute;
    width: 100%;
    height: inherit;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
    color: black;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #f46137;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bolder;
}
input[type=submit]:hover{
    background-color: orange;
}

.bold-font{
    font-weight: bolder;
    font-size: 30px;
}

.strip-test{
    display: none;
}

#mobile-version-about .store-image,
#mobile-version-about .showcase-mob,
#mobile-version-about #mob-header,
#mobile-version-about #logo-mob{
    display: none;
}



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

    #slideshow{
        margin-top: 70px;
    }
    #right-people-say p{
        margin-top: 60px;
    }
    
    
}

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

    #right-people-say p{
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1366px) {
    #deals .in-deal h1{
        font-size: 17px;
    }
    
    #deals .in-deal p{
        font-size: 15px;
    }
}

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

    #slideshow{
        margin-top: 20px;
    }

    #white-background{
        height: 3600px;
      }

      #socialMedia{
          display: none;
    }
    #address p{
        margin-left: 90px;
    }

    #busiHours{
        margin-left: 80px;
    }

    #deals .in-deal h1{
        font-size: 16px;
    }
    
    #deals .in-deal p{
        font-size: 14px;
    }


}

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

    #slideshow{
        margin-top: -20px;
    }

    #slideshow h1{
        font-size: 30px;
    }

    #busiHours{
        margin-left: 0px;
    }

    #sunNone{
        display: none;
    }

    #welcome{
        height: 900px;
    }

    .carousel-control.left, .carousel-control.right{
        margin: 25% 0% 10% 0%;
        height: 0;
      }

      .carousel-control > span > img{
        width: 50px;
        height: 50px;
      }

      #right-people-say p{
        margin-top: 20px;
    }

    #tech-info{
        height: 700px;
    }

    #best-deals{
        width: 100%;
        height: 1200px;
    }

    #best-deals .deal{
        float: left;
        margin: 0;
        width: 50%;
        margin-bottom: 100px;
    }

    #deals{
        width: 100%;
        height: 3800px;
    }

    .deals-desktop{
        height: 2400px !important;
    }

    .deals-aio{
        height: 2000px !important;
    }
    
    .deals-apple{
        height: 2000px !important;
    }
    
    .deals-monitors{
        height: 1400px !important;
    }
    
    #deals .in-deal{
        float: left;
        margin: 0;
        width: 33.33%;
    }
    #deals .in-deal img{
        width: 200px;
        height: 200px;
        margin: auto;
        margin-top: 40px;
    }

    #deals .in-deal h1{
        font-size: 25px;
    }

    #deals .in-deal p{
        font-size: 20px;
    }
}



/* Mobile Section 1000px  ======================================================================================================== */

#mobile-version{
    display: none;
}
#mobile-version-services{
    display: none;
}





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

    body.home{
        background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(img/a1.jpg);
        width: 100%;
        padding: 0;
        margin: 0;
        background-attachment: fixed;
        background-size: cover;
        height: 100vh !important;
        transition: background-color .5s;
        position: relative;
    }

    html, body{
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-size: cover;
        height: 100vh !important;
        transition: background-color .5s;
        position: relative;
        margin: 0;
        padding: 0;
        max-width: 100%;
        overflow-x: hidden;
        
    }

  
    #mobile-version-about .showcase-mob,
    #mobile-version-about #mob-header,
    #mobile-version-about #logo-mob,
    #mobile-version-services,
    #mobile-version-about .store-image{
        display: block;
    }







    #mobile-version{
        display: block;
    }
    #logo-mob{
        display: block;
        float: left;
    }

    #logo-mob img{
        height: 60px;
        margin: 50px 0 0 50px; 
    }

    #welcome-con{
        display: none;
    }
   
    .showcase-mob #welcome{
        display: block;
        width: 100%;
        background: none;
        padding-top: 70px;
    }
   

    .showcase-mob #welcome h3{
        font-family: 'abel';
        font-size: 20px;
        color: #02b9f6;
        text-transform: none;
        font-weight: bolder;
        width: 90%;
        margin: auto;
    }

    .showcase-mob #welcome p{
        font-family: 'abel';
        color: white;
        font-weight: bolder;
        font-size: 30px;
    }
    #mobile-version-about .showcase-mob #welcome p{
        color: black;

    }

    .showcase-mob .articles{
        font-size: 18px !important;
        width: 100% !important;
        margin-top: -95px;
        
    }

    .showcase-mob .buttonDiv button{
        width: 300px;
        background-color: #f46137;
        color: white !important;
        border: none;
        font-weight: bolder;
        font-family: 'abel';
        font-size: 20px;
        margin-top: -70px;
    }
    .showcase-mob button:hover{
      background-color: #f35550;
      cursor: pointer;
      color: white !important;
      border: none;
    }

    .store-image img{
        width: 100%;
        margin-top: -200px;
        margin-bottom: 230px;
    }


    #strip{
        display: none;
    }
    #slideshow{
        display: none;
    }

    #mobile-version #repairSection{
        width: 100%;
        /*height: 1500px;*/
        margin: auto;
        background-color: white;
        border: 1px solid #e4e4e4;
        margin-top: -250px;
      }
      
      #mobile-version #fix{
        width: 60%;
        margin: auto;
        border-bottom: 0px;
      }
      #mobile-version #fix .fa{
          width: 100%;
          color:#f46137;
          font-size: 100px;
          text-align: center;
          margin-top: -10px;
      }


      .grid-boxes li{ 
          
          width: 300px ;
          height: 360px;
          display: inline-block;
          background: #DCDCDC;
          border-radius: 10px;
          transition: all .2s ease-in-out;
    }

    .info-box-repair h1{
        font-size: 30px;
      }
    
      .info-box-repair p{
        font-size: 16px;
      }

      #mobile-version .mob-strip{
        display: block;
    }

      #mobile-version #showcase{
          margin-top: -100px;
          background: white;
          width: 100%;
      }

      #mobile-version #showcase h1{
          padding-top: 50px;
    }

    .carousel-control.left, .carousel-control.right{
        margin: 10% 0% 10% 0%;
        height: 0;
      }
    
      .carousel-control > span > img{
        width: 60px;
        height: 60px;
      }

    

   



    /* SIDE NAVIGATION ====================================*/
    .side-nav{
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        background-color: #1e2122;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 160px;
        z-index: 700;
    }

    .side-nav a{
        padding: 8px 8px 20px 60px;
        text-decoration: none !important;
        font-size: 20px;
        color: white;
        display: block;
        transition: 0.3s;
        font-family: 'abel';
        text-transform: uppercase;
        font-weight: bolder;
    }

    .side-nav ul{
        margin-top: -60px;
    }

    .side-nav ul li{
        text-decoration: none;
        display: inline-block;
        margin-left: -42px;
        margin-bottom: 0 !important;
    }

    .side-nav p{
        font-size: 10px !important;
        margin: -30px 0 0 10px;

    }

    .side-nav a button{
        width: 200px;
        height: 45px;
        background-color: #1e2122;
        font-family: 'abel';
        border-radius: 0;
        border: white 0.9px solid;
        color: white !important;
    }

    .side-nav a button:hover{
        background-color: white;
        font-family: 'abel';
        border-radius: 0;
        border: black 0.9px solid;
        color: black !important;
    }


    .side-nav a:hover{
        color: #f1f1f1;
    }


    .side-nav .fancy-icon{
        position: absolute;
        top: 40px;
    }
    
    .fancy-icon{
        position: relative;
        top: 60px;
        right: 20px;
        float: right;
        cursor: pointer;
        z-index: 1000;
    }


    #mobile-version-about .fancy-icon .line-1,
    #mobile-version-about .fancy-icon .line-2,
    #mobile-version-about .fancy-icon .line-3{
        background-color: black;
    }

    #mobile-version-services .fancy-icon .line-1,
    #mobile-version-services .fancy-icon .line-2,
    #mobile-version-services .fancy-icon .line-3{
        background-color: black;
    }

 
    
    .line-1,
    .line-2,
    .line-3 {
        background-color: white;
        height: 5px;
        width: 30px;
        margin-bottom: 4px;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }
    
   
    .line-1.is-clicked {
        transform: translateY(9px) rotate(45deg);
        transform-origin: center center;
    }
    
    .line-2.is-clicked {
        transform:  translateX(-100%);
        opacity: 0;
    }
    
    .line-3.is-clicked {
        transform:  translateY(-9px) rotate(-45deg);
        transform-origin: center center;
    }


    
  header{
      display: none !important;
  }

#squares{
    display: none;
}

#white-background{
    display: none;
}

#contact-info-mob{
    background: white;
    margin-top: -130px;
}


#header-about{
    display: none;
}

.page-banner-c{
    display: none;
}


#slideshow-about{
    width: 100%;
    height: 350px;
    background: white;
    margin-top: -250px;
}

#slideshow-about h1{
    color: black;
    font-family: 'Aclonica';
    margin: 17% 0 0 20%;
  
}
#slideshow-about .carousel-control img{
    margin: 50% 0 50% 0;
    background: none;
    border: white 0px solid;
}

.strip-test{
    display: block !important;
}

#welcome-about #welcome{
    height: 600px;
    margin-bottom: 0;
}

#people-say{
    width: 100%;
    height: 700px;
}

#left-people-say{
    display: none;
    margin-top: 0; 
}

#right-people-say{
    width: 100%;
}
#right-people-say p{
    text-align: center;
    font-size: 25px;
    font-family: 'Allan';
    width: 80%;
    margin: auto;
    margin-top: 70px;
    color: white;
}


#tech-info{
    height: 900px;
    background: white;
    margin-top: -200px;
    
}
#tech-info h1{   
    padding-top: 100px;
}

#contact-info{
    background: white;
    height: 100px;
    margin-top: -1px;
    padding-top: 30px;
}

#phone-direction-email{
    width: 100%;
    height: 300px;
    background: white;
    /*margin-top: -30px;*/
}

#phone-direction-email h1{
    font-family: 'Oswald';
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    color: black;
}

#logo-mob h1{
    font-family: 'Aclonica';
    color: white;
    padding: 40px 0 0 50px;
}

#mobile-version-services .page-banner-c{
    display: block;
}




}