/* Common code */ 

.hero-imageBEE , #Home , .hero-imageContact{
    
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:80px
}

.hero-textContact , .hero-textBEE , .hero-textHome{
    color: white
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none
  }
    
  .topnav a.icon {
    float: right;
    display: block
  }

  .topnav.responsive {
      position: relative
    }
    
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0
      
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left
  }
    
  .topnav.responsive .dropdown {
      float: none
    }
    
  .topnav.responsive .dropdown-content {
      position: relative
    }
    
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left
  }
    
    .icon-bar a{
        padding:14px;
        font-size:15px
    }


}


 
h1 , .hero-textHome , .cardAbout , .hero-textBEE , .hero-textContact , .columnAbout , .footer , .icon-bar a{ 
    text-align:center

}

/* Index */ 

*{
     box-sizing:border-box;
} 

body{
   
    padding:20px;
     background-color: rgba(255, 188, 133, 1);
    margin:0;
    font-family:Arial,Helvetica,sans-serif
} 

.orangeButton{
    border:none;
    outline:0;
    display:inline-block;
    padding:10px 25px;
    color:white;
    background-color:orangered;
    cursor:pointer
}

.orangeButton:hover ,.buttonFooter:hover,.topnav .a:hover,.dropdown:hover .dropbtn{
    background-color:#555;
    color:white
}

/* Top nav */ 

.topnav {
  overflow: hidden;
  background-color: cadetblue;
    z-index: 300
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px
}

#homeTopNav{
    background-color: orangered
}
#homeTopNav:hover{
    background-color: #555
}
.topnav .icon {
  display: none
    
}

.topnav .icon :hover {
  background-color:cadetblue
}

.dropdown {
  float: left;
  overflow: hidden
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: cadetblue;
  margin: 0
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: gainsboro;
  color: black
}

.dropdown:hover .dropdown-content {
  display: block
}


/* Home */ 
#Home{
    background-image:url("hands-typing-on-laptop_4460x4460.JPEG");
}


.hero-textHome img{ 
    height:180;
    width:500px
}
@media only screen and (max-width:672px){
    .hero-textHome img{
        height:100px;
        width:200px
    }
}
@media only screen and (max-width:360px){
    .hero-textHome img{ 
        height:90px;
        width:190px
    }
} 

/* Contact */

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

input[type=submit]{
background-color:orangered;
color:white;
padding:12px 20px;
    border:none;
    cursor:pointer
}

input[type=submit]:hover{
    background-color:#555
}

.containerContact{
    background-color:#f2f2f2;
    margin-bottom:100px;
    padding:10px
}

.columnContact{
    float:left;
    width:50%;
    margin-top:6px;
    padding:20px
}

.rowContact:after{
    content:"";
    display:table;
    clear:both
}



.hero-imageContact{
    background-image:url("adult-american-business-1059122.JPEG");
  
}



.hero-textContact h1{
    font-size:50px
}

.hero-textContact p{
    font-size:16px
}

@media only screen and (max-width:600px){
    .hero-textContact h1{
        font-size:25px
    } 
    
    .hero-textContact p{
        font-size:16px
    }
}

.input-error{
    box-shadow: 0 0 5px red
}

.form-success{
    color:green
}

/* About */

.rowAbout:after{
    content:"";
    display:table;
    clear:both
}

.rowAbout .fa{
    font-size:100px
} 

.columnAbout{
    float:left;
    width:33.33%;
    padding:0px
} 
@media screen and (max-width: 650px){
   .columnAbout{
        width:100%;
        display:block;
        margin-bottom:10px;
}
    .columnContact , input[type=submit]{
        width:100%;
        margin-top:0;
}
    }

#About{ 
    background-color:white;
    margin-top:-20px;
    padding:30px
} 

#divForAboutSectionAbout{
    padding:10px
}

.cardAbout{
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
    padding:16px;
    background-color:#444;
    color:white
}

@media only screen and (max-width:600px){
    #divForAboutSectionAbout p{ 
        font-size:14px
    }
    #About{
        padding:30px
    }
}

/* Services */

.collapsibleServices{
background-color:cadetblue;
    color:white;
    padding:18px;
    width:100%;
    border:none;
    text-align:left;
    outline:none;
    font-size:15px
}

.contentServices{
    padding:0 18px;
    overflow:hidden;
    background-color:#f1f1f1
}

#divForServicesContent{
    padding:4px
}

#divForServices{
    background-color:white;
    top:0;
    padding:2px
}

@media only screen and (max-width:600px){
.contentServices p ,li
    { 
        font-size:14px
    }
    #divForServices{ 
        padding:6px
    }
}

/* Bee */

.containerBEE{
    padding:4px;
    background-color:white
}

.button{
    border:none;
    color:white;
    padding:14px 28px;
    font-size:16px;
    cursor:pointer;
    color:white;
    background-color:orangered
}

hr{ 
    width:80%
}

th{
    height:50px
}

tr:nth-child(even){
    background-color:#f2f2f2
}

table{ 
    border:1px solid #f2f2f2
}

.complianceTargets{ 
    color:dodgerblue
}

.TurnoverThresholdsTables{ 
    color:white
}

.hero-imageBEE{
background-image:url("book-bindings-composition-desk-891059.JPEG");

}

.hero-textBEE h1{
    font-size:50px
}

@media only screen and (max-width:600px){
    .fiveElementsTable tr{
        font-size:14px
    }
    p{
        font-size:14px
    }
    .hero-textBEE h1{
        font-size:25px
    }
    .hero-textBEE p{
        font-size:16px
    }
    .BBEEHeading{
        font-size:30px
    }
    .beeTables tr{ 
        font-size:12px
    }
} 
.beeTables{ 
    width:100%
}
.beeTables td ,th{ 
    padding:2px
}

/* Footer */
.footer{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    padding:2px;
    background-color:white;
    color:black;
   
    border-top:3px solid black;
    z-index: 300
}

.buttonFooter{
    background-color:cadetblue;
    color:white;
    padding:14px 20px;
    margin:8px 2px;
    border:none;
    cursor:pointer;
    width:110px
}

/* socials */
.icon-bar {
    margin:0;
    right:0;
    position:fixed;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    z-index:400
}

.icon-bar a {
    cursor:pointer;
    opacity:0.8;
    margin-bottom:4px;
    border-right:4px solid lightblue;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    display:block;
    padding:16px;
    transition:all 0.3s ease;
    color:white;
    font-size:20px
}

.icon-bar a:hover{
    background-color:#000
}

.blueSocial{
    background:#3B5998;
    color:white
}

.difBlueSocial{
    background:#007bb5;
    color:white
}

.redSocial{
    background:#bb0000;
    color:white
}