@charset "UTF-8";
<html>
<head>
<style>



       
/*---------------------------------------Media Queries 01-----------------------------------------*/
nav.fixed-top {
  width: 100vw;
}

* {
  box-sizing:border-box;
}
.logo {
  background-color:;
  padding:10px;
  float:left;
  width:15%; /* The width is 20%, by default */
}
              
/*----------------2 columns layout style-----------------*/      
.left01 {
  background-color:;
  padding:50px 0px 0px 100px;
  float:left;
  width:50%; /* The width is 20%, by default */
}

.right01 {
  background-color:;
  padding:50px 100px 0px 0px;
  float:left;
  width:50%; /* The width is 20%, by default */
}

/*----------------3 columns layout style-------------------*/
.left02 {
  background-color:;
  padding:50px 50px 0px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}

.middle02 {
  background-color:;
  padding:50px 50px 0px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}
 
.right02 {
  background-color:;
  padding:50px 50px 100px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}
 
/*----------------4 columns layout style---------------------*/
.left03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}

.mid-left03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}
 
.mid-right03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}
     
.right03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}        
        
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .logo, .left01, .right01, .left02, .middle02, .right02, .left03, .mid-left03, .mid-right03, .right03 {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}        

/*---------------Viewing high res images at 100%----------*/
img[class^="resImage"] {
    width: 65% !important;
    height: auto !important;
}
/*---------------End View high res images at 100%----------*/

/*--------------EMAIL------------------*/
#email a:link{
    text-decoration: none;
    color: white;
    clear: both;
}
#email a:visited {
    text-decoration: none;
    color: white;

}
#email a:hover{
    color: #b36fc0;
}
#email a:active {
  color: white;
}
/*--------------end EMAIL------------------*/


/*--------------Creating button------------------*/
        .button {
          background-color: #e30713;
          border: none;
          color: white;
          padding: 10px 20px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 14px;
        transition-duration: 0.4s;
        cursor: pointer;
        margin: 20px;
                }
        
        .button:hover {
        background-color: grey;
        color: white;
            }
/*--------------End Creating button------------------*/

/********************* clear both****************/
.breakline{
    clear: both;
}
/******************** end clear both************/



/********************* Hover dropdowns Menu****************/

.dropbtn {
  background-color: #ad2085;
  color: white;
  padding: 0px 10px 0px 0px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

.dropdown-content a {
  color: white;
  padding: 0px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f6f6f6;}

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

.dropdown:hover .dropbtn {background-color: #ad2085;}
/********************* End Hover dropdowns Menu****************/






















           
/*---------------------------------------Media Queries 02 Repeated-----------------------------------------*/
* {
  box-sizing:border-box;
}
.logo {
  background-color:;
  padding:10px;
  float:left;
  width:15%; /* The width is 20%, by default */
}
              
/*----------------2 columns layout style-----------------*/      
.left01 {
  background-color:;
  padding:50px 0px 0px 100px;
  float:left;
  width:50%; /* The width is 20%, by default */
}

.right01 {
  background-color:;
  padding:50px 100px 0px 0px;
  float:left;
  width:50%; /* The width is 20%, by default */
}

/*----------------3 columns layout style-------------------*/
.left02 {
  background-color:;
  padding:50px 50px 0px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}

.middle02 {
  background-color:;
  padding:50px 50px 0px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}
 
.right02 {
  background-color:;
  padding:50px 50px 100px 100px;
  float:left;
  width:32%; /* The width is 20%, by default */
}
 
/*----------------4 columns layout style---------------------*/
.left03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}

.mid-left03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}
 
.mid-right03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}
     
.right03 {
  background-color:;
  padding:40px;
  float:left;
  width:25%; /* The width is 20%, by default */
}        
        
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .logo, .left01, .right01, .left02, .middle02, .right02, .left03, .mid-left03, .mid-right03, .right03 {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}        

/*---------------Viewing high res images at 100%----------*/
img[class^="resImage"] {
    width: 65% !important;
    height: auto !important;
}
/*---------------End View high res images at 100%----------*/

/*--------------EMAIL------------------*/
#email a:link{
    text-decoration: none;
    color: white;
    clear: both;
}
#email a:visited {
    text-decoration: none;
    color: white;

}
#email a:hover{
    color: #b36fc0;
}
#email a:active {
  color: white;
}
/*--------------end EMAIL------------------*/

/*--------------Creating button------------------*/
        .button {
          background-color: #e30713;
          border: none;
          color: white;
          padding: 10px 20px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 14px;
        transition-duration: 0.4s;
        cursor: pointer;
        margin: 20px;
                }
        
        .button:hover {
        background-color: grey;
        color: white;
            }
/*--------------End Creating button------------------*/

/**************************The end of media queries*************************/



/*****************This is the footer***************/

    footer {
    background-color: darkgrey;
    padding: 20px 20px 20px 100px;
    margin-top: 350px;
    float: left;
    width: 100%;
        clear:both;
        }

/************ clear both*****************/
.breakline{
    clear: both;
}
/************ end clear both*************/

/********************* Hover dropdowns Menu****************/

.dropbtn {
  background-color: #ad2085;
  color: white;
  padding: 0px 10px 0px 0px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

.dropdown-content a {
  color: white;
  padding: 0px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f6f6f6;}

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

.dropdown:hover .dropbtn {background-color: #ad2085;}
/********************* End Hover dropdowns Menu****************/









</style>

</body>
</html>