/*  

CORPORATE COLOURS

Light Grey = #EBEBE0
Dk Grey = #6D6E71
Red #ED1C24

PMS 423 = #8E908F Grey
PMS 1235 = #009CD0 YELLOW
Med. Blue #088FCF

DK Blue #005398
    */

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);


/* --------------------- GLOBAL FORMATING ----------------- */

body {
    margin:0;
    font-family: veranda, helvetica, arial, sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:160%;
    color:DimGray;
    background-color:white;
    -webkit-text-size-adjust: none;
    }

@media only screen and (max-device-width: 768px) { body {font-size:15px}  }

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {display: block; margin: 0; padding: 0;}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clear {clear:both; }

	button {
    background-color:#088FCF;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover {
    background-color: #005398;
    color: white;
	}
   

/* -------  SITE WIDE TEXT SETTINGS --------   */

.full-wrapper {width:100% }

.container{ width:1200px;
            margin-right:auto;
			margin-left:auto;
			padding:0px;
            z-index:4;
            min-height:38px;
            /* position:absolute; */
            }
            @media only screen and (max-device-width: 768px){.container{width:100%}}
            @media (max-width:800px){.container{width:100%}}
            @media (max-width:992px){.container{width:100%}}
            
            
@media only screen and (max-device-width: 768px) {.phone-padding {padding-left:10px; padding-right:10px}  }  

.red {background-color:#8E908F; }  
.dk-grey  {background-color:#6D6E71 }   
.lt-grey  {background-color:#EBEBE0 }
           

img {border:0 }    
@media only screen and (max-device-width: 768px) { #img {width:100%;}  }


@media only screen and (max-device-width: 768px) { .footer-image a {color:white;  text-decoration:none;}  }             

h1{
   font-size:30px;
   color:#009CD0;
   line-height:110%;
   text-transform:uppercase;
   font-family: 'Oswald', sans-serif;
   font-weight:400;
   letter-spacing:2px
   }
   @media only screen and (max-device-width: 768px) { h1, h2, h3, h4, h4 {padding:0 10px}  }
   @media only screen and (max-device-width: 768px) { h1 {font-size:22px}  }
h2{
   font-size:22px;
   color:#999999;
   font-family: 'Oswald', sans-serif;
   font-weight:400;
   letter-spacing:2px;
   text-transform:uppercase;
   }
h3{
   font-size:17px;
   color:#005398;
   line-height:160%;
   font-weight:bold;
   }
h4{
   font-size:16px;
   color:#8E908F;
   line-height:120%;
   font-weight:bold;
   }   

p {
  color:inherit;
  line-height:160%;
  font-size:16px;
  font-weight:normal;
  }
  @media only screen and (max-device-width: 768px) { p, ul, li, ol, dl {font-size:16px;padding:0 10px}  }
  
ul {
  color:inherit;
  line-height:160%;
  font-size:16px;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px
  }
  
ol {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px;
   margin-left:20px
  }
  
li {
   margin-top:5px;
   font-size:inherit;
   color:inherit;
    }

    p a  { color:inherit; font-family: veranda, helvetica, arial, sans-serif; }
    p a:visited { color:#005398; }
    p a:hover { color:#088FCF; text-decoration:underline;}
    p a:active { color:#088FCF; }

.text-center {text-align:center; }
.text-white {color:#fff; }
.text-blue {color:#088FCF; }

.mt10 {margin-top:10px }
.mt20 {margin-top:20px }
.mt30 {margin-top:30px }
.mt40 {margin-top:40px }
.mt50 {margin-top:50px }

.mb10 {margin-bottom:10px }
.mb20 {margin-bottom:20px }
.mb30 {margin-bottom:30px }
.mb40 {margin-bottom:40px }
.mb50 {margin-bottom:50px }

.image-right200 {width:200px; float:right; margin-right:15px; margin-bottom:10px; clear:both;}
             @media (max-width:768px){.image200 {width:300px; float:none; margin:0;}}

.image200 {width:200px; margin-right:15px; margin-bottom:10px; float:left;}
             @media (max-width:768px){.image300 {width:200px; float:none; margin:0;}}
             
.image300 {width:300px; margin-right:15px; margin-bottom:10px;}
             @media (max-width:768px){.image300 {width:300px; float:none; margin:0;}} 
             
.image-right300 {width:300px; float:right; margin-right:15px; margin-bottom:10px;}
             @media (max-width:768px){.image200 {width:300px; float:none; margin:0;}}
             
                 
.image-right400 {width:400px; float:right; margin-left:15px; margin-bottom:10px;}
             @media (max-width:768px){.image-right400 {width:400px; float:none; margin:0;}}
             
.image400 {width:400px; margin-right:15px; margin-bottom:10px;}
             @media (max-width:768px){.image400 {width:400px; float:none; margin:0;}} 
             
.image500 {width:500px; margin-right:15px; margin-bottom:10px;}
             @media (max-width:768px){.image500 {width:100%; float:none; margin:0;}} 
             
.image-right500 {width:500px; float:right; margin-left:15px; margin-bottom:10px; clear:both;}
             @media (max-width:768px){.image-right500 {width:100%; float:none; margin:0;}}
             
.image-right600 {width:600px; float:right; margin-left:15px; margin-bottom:10px; }
             @media (max-width:768px){.image-right600 {width:100%; float:none; margin:0;}}
             
           
             
hr.style1{
	border-top: 1px solid #8c8b8b;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}


hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}


hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  margin:20px 40px; 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}


hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}


hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}           
             
             
             
             

/* ----------------- Menu adjust */

/* Text color for both main menus */
.navbar-default .navbar-nav>li>a{color:#EBEBE0;font-size:16px; letter-spacing:2px; } 
@media (max-width:768px){.navbar-default .navbar-nav>li>a{color:#EBEBE0;font-size:16px;}}

.dropdown-menu>li>a{font-size:16px; letter-spacing:0.5px} 
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{font-size:16px; letter-spacing:0.5px}

/*Main menu "Tap for main Menu" */
#main-menu-type {float:left; font-size:20px; color:#EBEBE0; padding:20px 0 25px 0;border:0px white solid}
@media (min-width:768px){#main-menu-type{display:none;}}

                
.menu-display {display:none; }
              @media only screen and (max-device-width: 768px) {.menu-display{display:inline;}}
              
/* seperating Header on Dropdowns*/
              .dropdown-header{	display:block;
					padding:3px 15px;
					font-size:16px;
					line-height:120%;
					color:#8BE2FF ; /* seperating Header on Dropdowns*/
					
					}
                    
.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#8BE2FF}                    

/* ----- HEADER -------- */


#header-outer {
    width: 1200px;
    border:0px solid green;
    margin-left:auto;
    margin-right:auto;
    }
    @media only screen and (max-device-width: 768px) {#header-outer {width:100%;}  }
    
header {
    margin-left:auto;
    margin-right:auto;
    width: 1200px;
    min-height: 135px;
    border:0px solid pink;
    }
    @media only screen and (max-device-width: 768px) { header {width:100%; min-height:100px;}  }
    
#header-logo-1{float:left; width:350px; margin-top:35px; border:0px black dashed; text-align:center;  line-height:110%; color:#000; font-size:16px;}
             @media only screen and (max-device-width: 768px) { #header-logo-1 {float:none; margin:10px auto 10px auto; width:75%; font-size:12px;}  }    
    

  
#header-phone-image {width:40px; float:right; margin-right:5px; margin-top:20px; border:0px green solid; }
    @media only screen and (max-device-width: 768px) { #header-phone-image {}  }

#header-phone-image img {width:40px; margin-top:-5px}   
                        @media only screen and (max-device-width: 768px) { #header-phone-image img {display:none}  } 
                        
                        
    
#phone-number {float:right; width:auto; margin-top:30px; border:0px red solid;}
    @media only screen and (max-device-width: 768px) { #phone-number {float:none; width:100%; margin:10px auto 20px auto; text-align:center; }  }
    
#phone-number p a {font-size:32px; font-family: 'Oswald', sans-serif; margin:0; text-decoration:none;}
    @media only screen and (max-device-width: 768px) { #phone-number p a {margin:10px 0 20px 0; font-family: 'Oswald', sans-serif;}  }
    
        
    
#tag-line {width:1200px; margin:-28px auto 0 auto; font-size:20px; color:#0080C0; text-align:right; padding-bottom:8px;}
          @media only screen and (max-device-width: 768px) {#tag-line {width:90%; font-size:18px; margin:-28px auto 0 auto; text-align:center;}  }
          
          
.login-wrapper{ width:1200px;
            margin-right:auto;
			margin-left:auto;
			padding:0px;
            z-index:1000;
            margin-top:-31px;
            position:relative;
            /* position:absolute; */
            }
            @media only screen and (max-device-width: 768px){.login-wrapper{display:none;}}
               
          
.login-area {width:200px; min-height:38px; border:0px red dashed; float:right;display:inline; text-align:right; z-index:1000; }
            @media only screen and (max-device-width: 768px){.login-area{display:none; }}       
              
.login-area a {font-size:16px; color:#F6F6F6; letter-spacing:2px; }
            @media only screen and (max-device-width: 768px){.login-area a {color:#999999 }}

.login-area a:hover {color:#009CD0; }


/* LOGIN FOR PHONE ONLY */

.login-wrapper2{ display:none; }
            @media only screen and (max-device-width: 768px){.login-wrapper{display:inline; width:100%; }}


.login-area2 {display:none; }
            @media only screen and (max-device-width: 768px){.login-area{display:inline; width:100%; text-align:center; margin-top:10px}}       
              
.login-area2 a {font-size:16px; color:#F6F6F6; letter-spacing:2px; }
            @media only screen and (max-device-width: 768px){.login-area a {font-size:20px; color:#999; letter-spacing:2px }}

.login-area2 a:hover {color:#009CD0; }





/* ----Home Page ------ */

.home-image-wrap {width:100%; border:1px #A6A6A6 solid; padding:10px; }
                 @media only screen and (max-device-width: 768px){.home-image-wrap {padding-left:20px; padding-right:20px; }}


.call-to-action {width:100%; background-image:url('images/bg-eye.jpg'); margin-top:20px; margin-bottom:30px; padding:15px 20px 20px 20px; background-size:cover;}
.call-to-action h2, h3 {color:#fff; line-height:160%; padding:0; margin:0; }
.action-panel-circle {width:60px; height:60px; background-color:#088FCF; border-radius:30px; text-align:center; margin-top:15px; border:2px #fff solid;}
.action-panel-circle h2 {line-height:260%;}
.panel-3 {text-align:right; padding-top:25px}



      @media only screen and (max-device-width: 768px) {.call-to-action {width:100%; background-image:url('images/bg-eye.jpg'); margin-top:20px; padding:10px 20px; }}
      @media only screen and (max-device-width: 768px) {.call-to-action h2, h3 {color:#fff; line-height:160%; padding:0; margin:0;  }}
      @media only screen and (max-device-width: 768px) {.action-panel-circle {width:60px; height:60px; background-color:#088FCF; border-radius:30px; text-align:center; border:2px #fff solid; }}
      @media only screen and (max-device-width: 768px) {.action-panel-circle h2 {line-height:260%; }}
      @media only screen and (max-device-width: 768px) {.panel-3 {text-align:left; }}
      
      


               
 /* --------   Normal Page ------------- */                
#page-container {
                width:1200px;
                margin-left:auto;
                margin-right:auto;
                margin-top:50px;
                border:0px red solid;
                }
                @media only screen and (max-device-width: 768px) { #page-container {width:100%;margin-top:90px}  }
    
 /* --------   Contact Page ------------- */ 
 
 .form {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    min-height: 250px;
    background-color:white;
    
}

.address {
    float:right;
    width: 45%;
    min-height: 100px;
    margin: 0 auto 0 auto;
	text-align:left;
    border:1px red dashed
}

.map-item {
    background-color:white;
    max-width: 100%;
    min-height: 100px;
    margin: 10px auto 10px auto;
	text-align:center;
}


     
.address {width:500px; border:0px purple dashed; display:inline-block;}
          @media only screen and (max-device-width: 768px) { .address {width:100%}  }

.address-logo {width:200px }
              @media only screen and (max-device-width: 768px) { iframe {width:40%}  }



iframe {width:90%; height:500px }
       @media only screen and (max-device-width: 768px) { iframe {width:100%}  }

/* For PHP form */
#form1 {width:500px; border:0px blue dashed; display:inline-block; }
@media only screen and (max-device-width: 768px) {#form1 {width:100%}  }
#name { }  
#company { }
#postcode {width:70px; }
#telephone { } 
#from { }
#subject { }    
#verif_box {width:100px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.2em; }
#message {border:1px solid #CCCCCC; width:100%; height:100px; font-family:Verdana, Arial, Helvetica, sans-serif; }
#wrong-code {border:1px solid #000; background-color:#D70000; color:#FFFFFF; padding:4px; padding-left:6px;width:295px; }

input[type=text], textarea {width: 280px; }
                           @media only screen and (max-device-width: 768px) { input[type=text], textarea  {width:90%; height:132px}  }
                           
                           
input[type=submit] {margin-top:10px; margin-bottom:20px; border:1px solid #cccccc; width:auto; padding:8px 12px 8px 12px; background-color:#EFEFEF; }
                   @media only screen and (max-device-width: 768px) { input[type=submit]  {height:32px; font-size:16px; margin-left:10px}  }
                           
input[value] {color:black;font-size:17px } 

/* --------   Footer  ------------- */  
          

footer {
	border:0px red dotted;
    width:100%;
    margin:0 auto 0 auto;
    min-height:80px;
    padding-top:20px;
    padding-bottom:20px
    }
    @media only screen and (max-device-width: 768px) { footer {width:100%;   margin-top:10px;}  }


@media only screen and (max-device-width: 768px) {.phone-ml10 {margin-left:10px; line-height:300%}  }              

.footer-wrap {margin-bottom:15px;}
             @media only screen and (max-device-width: 768px) {.footer-wrap {width:190px; margin-left:10px}  }


.tags h1 {font-size:9px; color:#6D6E71; line-height:140%; font-family: veranda, helvetica, arial, sans-serif; letter-spacing:0px; padding-top:20px}      
        
/* ---- Ideograph Panel -------- */  

#ideo {
    margin-left:auto;
    margin-right:auto;
    border:0px solid green;
    width:1200px;
    padding-bottom:15px;
    padding-top:0;
    font-family:verdana, sans-serif;
    font-weight:normal;
    font-size:9px;
    color:#FFFFFF;
    text-align:right;
    }
    @media only screen and (max-device-width: 768px) { #ideo {width:100%;}  }
    
#ideo a {
	color:#6D6E71;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
    }

    @media only screen and (max-device-width: 768px) { #ideo a {padding-right:10px;}  }
    
#ideo a:link {
	color:#6D6E71;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
    }
#ideo a:hover {
	color:#000;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    }