.head {color: red; background-color: ;  width: ; margin-bottom: 0px; margin-top:0px; display:inline-block; text-align: left; padding-top: 100px; }
.head-small_1 {width: 400px; background-color: ; float: left;  border: 0px solid white; height: 90px; padding-top: 14px; padding-left: px; }
.head-small_2 {width: 600px; background-color: ; float: left;  border: 0px solid white; height: 60px;padding-top: 00px;  }

img#logo {width: 390px; padding-left: 30px;  }

hr.title-down{height: 20px; background-color: #F7F7F7;border: 0; box-shadow: inset 0 18px 18px -20px rgba(0, 0, 0, 0.3); margin-bottom: 0; margin-top: 0; }

hr.footer-down{height: 20px; background-color: #F7F7F7;border: 0; box-shadow: inset 00px -18px 18px -20px rgba(0, 0, 0, 0.2); margin-bottom: 0; margin-top: 0; }

span.b1{text-align: justify; color: #8DA8B0; padding-top: 0;  padding-left:20px; font-size: 36px; margin:0; font-weight: bold; letter-spacing: 0px}
span.b2{text-align: justify; background-color: /*#2ECC71*/#8DA8B0;  font-size: 36px; margin:0; font-weight: bold; letter-spacing: 0px; color: white; }
span.b3{text-align: justify; background-color: white;  font-size: 23px; margin:0; font-weight: ; letter-spacing: 0px; color: #242421; padding-left: 20px;}

/* head size 1000 px -  */

.head-small_1 h2.b1 {text-align: justify; color: #242421; padding-top: 0; padding-left: 20px; padding-right: 20px; font-size: 36px; margin:0; font-weight: 400; letter-spacing: 0px}

/* HEADER NAVIGATION */
.head ul.nav {font-size: 20px; list-style-type: none; text-align: left; margin:0; padding: 0; padding-left: 0px; float:right; padding right: 20px; padding-top: 15px; display:inline-block; width: 530px; }
.head li.nav {font-size: 20px; font-weight: 500;  list-style-type: none; float: ; margin:0; padding: 0; padding-bottom: 10px;}
.head li.nav a {cursor: pointer; padding: 10px; text-decoration: none; margin:0px; color: #242421; transition: ease-out 0.3s; -webkit-transition: ease-out 0.3s; -moz-transition: ease-out 0.3s; -o-transition: ease-out 0.3s;}
.head li.nav a:hover {color: ;}
.head li.nav a.active {color: ;}

/* Underline From Center */
.head li.nav {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden;}
.head li.nav#active {box-shadow: 0 0 0px rgba(0, 0, 0, 1);border-bottom: 0px solid; border-color: #242421;  bottom:0;  display: inline-block; vertical-align: middle; }
.head li.nav:before {content: "";position: absolute;z-index: -1;left: 51%;right: 51%;bottom: 0;background: #242421;height: 2px;-webkit-transition-property: left, right;transition-property: left, right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.head li.nav:hover:before, 
.head li.nav:focus:before,     
.head li.nav:active:before {left: 12px;right: 12px;}
.head li.nav#active { }

.head li.nav a.active {text-shadow: 00px 0px 2px white; font-weight: bold; }
.head li.nav a.active:after{/*content:" \f04d"; */color: #8DA8B0; ;font-family: FontAwesome;}

@media screen and (max-width: 750px) {
    .navig-button {display: block; position: absolute; top: 20px; right:30px; padding-bottom: 0; margin-bottom: 0;}
}

@media screen and (max-width: 1050px) {    
    .head-small_1 {width: 260px; padding-top: 12px;}
    .head-small_2 {width: 470px; }
    .head-small_1 h2.b1 {font-size: 30px; padding-left: 0px; }
    .head ul.nav {width: 414px;}
    .head li.nav {font-size: 16px; }
    .head li.nav a {padding-left: 7px; padding-right: 7px; }
    span.b1 {padding-left: 7px; font-size: 26px;}
    span.b2 {font-size: 26px;}
    span.b3 {padding-left: 8px; font-size: 17px;}
    .head ul.nav {padding-top: 10px; }
    img#logo {width: 273px; padding-left: 10px;  }
    
    .head li.nav:hover:before, 
    .head li.nav:focus:before,     
    .head li.nav:active:before {left: 8px;right: 8px;}
}

@media screen and (max-width: 800px) {    
    .head-small_1 {width: 240px; margin-top: 3px;padding-top: 10px; }
    .head-small_2 {width: 438px; }
    .head-small_1 h2.b1 {font-size: 28px; }
    .head ul.nav {width: 390px; }
    .head li.nav {font-size: 16px; }
    .head li.nav a {padding-left: 4px; padding-right: 4px; }
    span.b1 {font-size: 24px; }
    span.b2 {font-size: 24px; }
    span.b3 {padding-left: 8px; font-size: 15px;  }
    img#logo {width: 245px; padding-left: 10px;  }
    
    .head li.nav:hover:before, 
    .head li.nav:focus:before,     
    .head li.nav:active:before {left: 5px;right: 5px;}
}

@media screen and (max-width: 750px) {
    .head-small_1 {float:left;  width: 100%;}
    .head-small_2 {width: 0px; }
    .head ul.nav {display:none; }
    .head-small_1 h2.b1 {padding-left: 20px;}
    span.b1 {padding-left: 0; }
    span.b3 {padding-left: 0px; }
    img#logo {width: 400px; padding-left: 0px;  margin: 0 auto; }
}

@media screen and (max-width: 500px) { 
    img#logo {width: 300px;}
}

@media screen and (max-width: 400px) { 
    img#logo {width: 250px;}
}

@media screen and (max-width: 300px) { 
    img#logo {width: 200px;}
}