/*
Theme Name: Aqua Sport Evasion
Theme URI: http://web2code.com
Author: SGHAIER Mahmoud
Author URI: http://www.web2code.com
Description: Custom theme 
License: commercial
License URI: 
Tags: 
Text Domain: not used
Version: 1.0
*/
body {
background:#000;text-align:left;font-family: 'Coda', sans-serif; font-size:14px ;
top:0;left:0;position:absolute;height:100%;width:100%;margin:0; padding-top: 0px; }

a {text-decoration:none;outline:0;color:#fff}
strong {font-weight:700;}
.hidden {display:none;}
.bluecolor {color:#0ebeff;}
.whitecolor {color:#ffffff;}


/* HEADER */
#header { padding-bottom: 20px }
#header .logo { float: left ;  margin-left: -20px;}
/*
#header .facebook {background: url('img/facebook.png') no-repeat; width:86px;  height:19px; display: block; float: right;margin-right:1%;}
#header .tweeter {background: url('img/tweeter.png') no-repeat; width:99px;  height:19px; display: block; float: right;margin-right:1%;}
#header .youtube {background: url('img/youtube.png') no-repeat; width: 53px ; height:  21px; display: block;float: right;margin-right:1%;}
*/
#header .rsblock {display: block; float: right;margin-left:1%;}
#header .phone { display: block; float: right;margin-right:1%; padding:2px; 
color: white; font-size: 18px; height:19px; line-height: 19px; font-weight: 700; 
margin-bottom: 10px  }

/* tools */
#slideshowImages { display: none }

/* RESPONSIVE NAVIGATION */
nav { height: 40px;width: 100%;background: rgba(0, 0, 0, 0.6) ; 
  font-size: 14px;font-weight: bold;border-bottom: 1px solid #000;
    top:0; position: fixed;  z-index: 5000 ;  }

/* top:0; position: fixed;   z-index: 5000 ;  */
nav ul {padding: 0; height: 40px; max-width: 1140px; min-width: 755px; margin: 0 auto; overflow: hidden;}
nav li {display: inline;float: left; }
nav a {color: #fff;display: inline-block; text-align: left ;text-decoration: none; line-height: 40px;}
nav li a { width:100px;  text-align: center ;  
  border-right: 1px solid #000;box-sizing:border-box;-moz-box-sizing:border-box;
  -webkit-box-sizing:border-box; padding-left:5px;}
nav li:last-child a {border-right: 0;}
nav a:hover, nav a:active, nav a.active { background-color: #4bc9f2; }
nav a#pull {display: none;}
 

/* Contents & widgets  */
.content { background:#000 ; background:rgba(0,0,0,0.4) ; opacity:100;  margin-bottom: 20px; padding-bottom: 10px; }
.content h1 {  font-size:20px ; border-bottom: 1px #ff4800 solid; padding: 0px  ; 
  font-weight: normal; color :white; margin: 0 0 10px 0 }

.content h2 {font-size:16px;font-weight:700;color: #ff4800;;margin: 20px 0 2px 0; padding: 0 ; line-height:18px}
.content h3,.widget h3 {font-size:14px;font-weight:700;line-height:18px;color:#ff4800;margin: 15px 0 4px 0; padding: 2px 0}
.content h4,.widget h4 {font-size:14px;font-weight:400;line-height:18px;color:#ff4800;margin: 10px 0 4px 0; padding: 4px  ; background-color: rgba(0, 0, 0, 0.5) }
.content h5,.widget h5 {font-size:14px;font-weight:700;line-height:18px;color:#fff;margin: 10px 0 4px 0; padding: 2px 0  ;  }
.content h6,.widget h6 {font-size:14px;font-weight:400;line-height:18px;color:#fff;margin: 10px 0 4px 0; padding: 2px 0 ;  }
.content p,.widget p {font-size:14px ;font-weight:400;line-height:18px;color:#fff;margin: 0 0 10px 2px; padding: 2px 0}
.content a,.widget a {color:#ff4800;}

.content ol, .content ul { margin: 0 0 2px 20px; padding: 2px 0 }
.content li { font-size:14px ;font-weight:400;line-height:18px;color:#fff;margin: 0 0 2px 0; padding: 2px 0 }
.content a:hover,.widget a:hover { text-decoration: underline;}
.content img { max-width:100% ; height:auto  ; width:auto}

.widget h1,.widget h2 {  font-size:18px; border-bottom: 1px #ff4800 solid; padding: 0px  ; 
  font-weight: 400; color :#ff4800 ; margin: 0 0 10px 0 ; line-height: 26px  }  
 
.phonewidget { padding:2px;  display: block;
color: white; font-size: 20px; font-weight: 400;  }

a.emailwidget { padding:2px;  display: block;
color: white; font-size: 16px; font-weight: 400;  }

/* Added for blog */
.content .blogDivider {  border-bottom: 1px #0ebeff solid;   margin: 10px 0 ;  }
.content .postedBy { color : white ; display: block; ; font-size: 12px ; padding:0 ; margin:-4px 0 0 0; float:left; }
.content .postedOn { color : white  ; display: block ; font-size: 12px ; padding:0 ; margin:-4px 5px 0 0 ; float:left ;  }

.content .blog img { float:left;margin:0px 10px 0px 0 ; border:1px white solid   }
.content .blogDetail img { width:100%;float:none ; margin:10px 0px}
.content .blogDetail h2  { font-size:20px; line-height:24px }

/* FORMS */
.form { }
.messagebox { border: 1px solid #000 ; padding: 5px ; margin-bottom: 3px ; 
  background-color:  #000 ;}
span.textmessage { color: #fff ; }
span.errormessage {background: red;color:white;width:110px; display: inline-block; font-size:11px  }

.inputTextField {
font-family: 'Coda', sans-serif;
font-size:14px;font-weight:400;background:rgba(0,0,0,0.4) ;
border-bottom:1px solid #8e2800;width:100%;
resize:none;overflow:auto;padding:5px;color:#fff;
border-top:0px;border-left:0px;border-right:0px; margin-bottom: 5px
}

.inputTextArea {
font-family: 'Coda', sans-serif;
font-size:14px;font-weight:400;background:rgba(0,0,0,0.4);border-bottom:1px solid #8e2800;width:100%;
height:120px;resize:none;overflow:auto;padding:5px;color:#fff;
border-top:0px;border-left:0px;border-right:0px; margin-bottom: 5px

}

/* BUTTONS */
.customButton {
  border:0px;
  background-color:#df3f00;   text-indent:0;
  display:inline-block; color:#fff; font-family:'Coda', sans-serif;
  font-size:14px; padding: 10px 20px;
  font-weight:normal; font-style:normal;
  text-decoration:none; text-align:center;
}.customButton:hover {
  background-color:#ff4800;
}.customButton:active {
  position:relative;
  top:1px;
}


a.logoke { display: block ; width:146px ; height: 45px ; background: url(img/kelogo_off.png) ;}
a.logoke:hover {background: url(img/kelogo_on.png) no-repeat;  }

a.logore { display: block ; width:146px ; height: 45px ; background: url(img/relogo_off.png) ; margin-top: 30px;}
a.logore:hover {background: url(img/relogo_on.png) no-repeat;  }

a.logope { display: block ; width:146px ; height: 45px ; background: url(img/pelogo_off.png) ; margin-top: 30px;}
a.logope:hover {background: url(img/pelogo_on.png) no-repeat;  }

a.ketext {font-size: 18px ; color:#d8edf0; text-decoration: none; background: url(img/arrowlink.png) 0 center  no-repeat ; text-indent:14px ; display:block ; padding:5px 0 }
a.ketext:hover { color:#ffffff; text-shadow: 1px 1px #ccc;  }


/* MEDIA QUERIES */
/* Styles for screen 600px and lower */
@media screen and (max-width: 600px) {
  .logo img { width: 100%}
  .content .blog img {  width:100% ; margin:10px 0px ; }
  .content img { max-width:100% ; height:auto  ; width:auto}
  nav { height: auto;border-bottom: 0;}
    nav ul {width: 100%;display: none;height: auto;}
    nav li { width: 100%;float: none; display:block; position: relative;}
    nav li a {border-bottom: 1px solid #000;border-right: 1px solid #000; width: 100% ; 
      text-align: left ;}
    nav  a {text-align: left;width: 100%;text-indent: 25px;}
    nav a#pull {display: block;background-color: #000;width: 100%;position: relative;}
  nav a#pull:after {
    content:"";
    background: url('img/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}

/* Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
  body {  }
  .logo img { width: 100%}
  .content .blog img {  width:100% ; margin:10px 0px ; }
  .content img { max-width:100% ; height:auto  ; width:auto}
  nav {border-bottom: 0;}
  nav ul {display: none;height: auto;}
  nav li { }
  nav a#pull {display: block;background-color: #000;width: 100%;position: relative;}
  nav a#pull:after {
    content:"";
    background: url('img/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}

/* Smartphone */
@media only screen and (max-width : 320px) {
  nav li {display: block;float: none;width: 100%;}
  nav li a {border-bottom: 1px solid #000;}
}



/*** CONTACT  ***/
/*
.messagebox { border: 1px solid #82adb3 ; padding: 5px ; margin-bottom: 3px ; 
  background-color:  #d8edf0 ; }
.messagebox p { line-height: 16px }
span.textmessage { color: #82adb3 ;  font-size:12px ; }
span.errormessage {background: #000;color:white;width:110px; display: inline-block; font-size:11px  }
*/

/* HELPERS */
/* Clearfix */

.clearfix:before,
.clearfix:after {  content: " ";  display: table;}
.clearfix:after { clear: both;}
.clearfix {  *zoom: 1;}
.MB20 {margin-bottom: 20px}
.MT20 {margin-top: 20px}
.floatLeft { float:left;}
.floatRight { float:right; }
/*
  SIMPLE GRID 
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


[class*='col-'] {
  float: left;
  padding-right: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0px;
}

.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 755px;
  margin: 10px auto;
  overflow: hidden;
}

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

.grid-pad {
  padding: 20px 0 0px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}

.push-right {
  float: right;
}

/* Content Columns */
.col-1-1 {width: 100%;}
.col-2-3, .col-8-12 {width: 66.66%;}
.col-1-2, .col-6-12 {width: 50%;}
.col-1-3, .col-4-12 {width: 33.33%;}
.col-1-4, .col-3-12 {width: 25%;}
.col-1-5 {width: 20%;}
.col-1-6, .col-2-12 {width: 16.667%;}
.col-1-7 {width: 14.28%;}
.col-1-8 {width: 12.5%;}
.col-1-9 {width: 11.1%;}
.col-1-10 {width: 10%;}
.col-1-11 {width: 9.09%;}
.col-1-12 {width: 8.33%}

/* Layout Columns */
.col-11-12 {width: 91.66%}
.col-10-12 {width: 83.333%;}
.col-9-12 {width: 75%;}
.col-5-12 {width: 41.66%;}
.col-7-12 {width: 58.33%}

@media handheld, only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  [class*='col-'] {
    width: auto;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
}