@charset "UTF-8";
/* CSS Document */

/*	-------------------------------------------------------------
	Freights Solutions
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Description: Freight solutions is a well established international logistics solutions provider based in the Kingdom of Saudi Arabia.		
	Filename:		base.css
	Date:			October 01, 2018
	Done by:		ashique ukkadan, ashiqueukkadan@gmail.com	
	Company:        http://ashiqueukkadan.com
	-------------------------------------------------------------	
	-------------------------------------------------------------  */
@font-face {
  font-family: 'caviar';
  src: url(CaviarDreams.ttf);
}
body {font-family: 'Montserrat', sans-serif; font-size: 13px; color: #131313; font-weight: 400; padding-top: 80px;}
/* do not group these rules */
*::-webkit-input-placeholder {
    color: #8499A7!important;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #8499A7!important;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #8499A7!important;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #8499A7!important;
}
a, a img, img, div, li, p, input, textarea, button
	{
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	outline:none;
	}

.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: white;
	background-color:rgba(238,46,36,0.3);
	font-size: 12px;
	padding: 1.1em;
	display: none;
	-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.go-top:hover {
	background-color: #EE2E24;
	color: white;
}
.rc-anchor-light {background:#FFFFFF !important; border-color: #D1DBE0 !important;}
#map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
       @media only screen and (max-width: 1000px){
           
.fs-nav{ background-color: #FFFFFF; height: 80px; border-color:#e7e7e7;}
}
       @media only screen and (min-width: 1000px){
           
.fs-nav{ background-color: #FFFFFF; height: 110px; border-color:#e7e7e7;}
}
.navbar-toggle {
    padding: 9px 10px;
    margin-top: 24px;
    margin-right: 15px; border: 0px;  }
.navbar-inverse .navbar-toggle .icon-bar{ background-color: #EE2E24;}
.navbar-inverse .navbar-toggle:active, .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{ background-color: #FFFFFF; }
.navbar-toggle .icon-bar{width: 30px; height: 4px; }

.close{line-height: 21px; color: #FFFFFF; text-shadow:none; opacity: .9;}
.navbar-brand{height: 80px; padding: 19px;}
.navbar-right {margin-top: 15px;}
.navbar-inverse .navbar-nav>li>a {color:#6F8899; font-weight: 500; text-transform: uppercase;}
.navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {color:#EE2E24;}
.nav>li>a{padding-left: 0px; padding-right: 0px;}
.navbar-inverse .navbar-nav>li>a::after { content: "/"; padding-left: 15px; padding-right: 15px;}
.no-slash>a::after{content:none !important;}
.padding-top{padding-top: 60px;}
.main-slider { height: 600px; background-color:#FFFFFF;}

.carousel { z-index: 1;}
.carousel-inner{overflow:inherit;}
.carousel-caption{ text-align: left; position: static !important; padding-top: 135px; padding-bottom: 140px;}

.carousel .item {
	min-height: 600px; 
	width:100% !important; 
}
.slider-01 {
	background-image: url(../images/header-slider-01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	width: 100%;
}
.slider-02 {
	background-image: url(../images/header-slider-02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}
.slider-03 {
	background-image: url(../images/header-slider-03.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}
.carousel-caption h1 {
	
	font-size: 40px; font-weight: 600; text-shadow:none;
}
.carousel-caption p {
	
	font-size: 16px; font-weight: 300; text-shadow:none;  line-height: 28px; padding-top: 5px; padding-bottom: 5px;
}
.carousel-caption span{ font-weight: 500;}
.carousel .icon-container {
	display: inline-block;
	font-size: 25px;
	line-height: 25px;
	padding: 1em;
	text-align: center;
	border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
}
/*
.carousel-indicators { bottom: 0px; top: 551px; right:0px; left: 365px;}
.carousel-indicators li{ background-image:url(../images/slider-left-icon.svg); margin: 0px; border: 0 solid; width: 115px; height:50px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background-color: transparent; position: relative;}
.carousel-indicators .active{ background-image:url(../images/slider-left-icon.svg); border: 0 solid; width: 114px; height: 50px; background-color: transparent; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.carousel-indicators .active2{ background-image:url(../images/slider-left-icon.svg); border: 0 solid; width: 114px; height: 50px; background-color: transparent; behavior:url(-ms-transform.htc); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; 
    /* Firefox */
    /*-moz-transform:rotate(180deg);
    /* Safari and Chrome */
    /*-webkit-transform:rotate(180deg);
    /* Opera */
    /*-o-transform:rotate(180deg);
    /* IE9 */
    /*-ms-transform:rotate(180deg);}
*/
.carousel-control { bottom: -1px; top: auto; opacity: 1 !important; left: auto; margin-left: 96px;}
.carousel-control.right{ background-image:url(../images/slider-left-icon.svg); border: 0 solid; width: 114px; height: 50px; background-color: transparent; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; left: 270px; bottom: -1px;}

.carousel-control.left{ bottom: -1px; background-image:url(../images/slider-left-icon.svg); border: 0 solid; width: 114px; height: 50px; background-color: transparent; behavior:url(-ms-transform.htc); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; 
    /* Firefox */
    -moz-transform:rotate(180deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(180deg);
    /* Opera */
    -o-transform:rotate(180deg);
    /* IE9 */
    -ms-transform:rotate(180deg);}


/* Animation delays */
.carousel-caption h3:first-child {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.carousel-caption button {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.carousel-inner.container {width:100%; height: 600px;}
.slider-left-text{width:350px; float: left;}
.get-it-now-bt2 { background: url(../images/Get-button-bg.svg); background-size: 181px 50px; width: 181px; height: 50px; color: #EE2E24; border: 0px solid; font-size: 14px; font-weight: 600; text-align: left; padding-left: 25px;  -moz-transition: all .5s ease; -ms-transition: all .5s ease;
   transition: all .5s ease; margin-top: 40px; margin-bottom: 40px; background-color: transparent;
    mask-image: url(../images/Get-button-bg.svg);}
.fa-arrow-right{ padding-left: 10px;	
	-moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}

.get-it-now-bt2:hover .fa-arrow-right 
{ padding-left: 25px; 
	-moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}
.main-service { height: auto; background-color:#FFFFFF;}
.main-details { height: 450px; background-image: url(../images/main-details-bg.jpg); background-size: cover; background-repeat: no-repeat; padding: 60px; padding-top: 75px; padding-bottom: 75px;}
.main-details h1 { font-size:30px; text-align: center; color: #FFFFFF; font-weight: 600; margin: 0; padding: 0;}
.main-details p { font-size:14px; text-align: center; color: #FFFFFF; font-weight: 300; margin: 0; padding-top: 15px;}
.main-details span { font-weight: 500;}
.details {padding-top:40px;}
.details h1 {font-size: 50px; text-align: center; font-weight: bold; margin: 0; padding: 0;}
.details p {font-size: 16px; text-align: center; margin: 0; padding: 0; padding-bottom: 25px;}

.main-get-qt { height: auto; background-color:#FFFFFF; padding: 75px; padding-top:50px;}
.main-get-qt h1, .main-service h1 { font-size:30px; text-align: center; color: #6F8899; font-weight: 600; margin: 0; padding: 0;}
.main-get-qt p, .main-service p { font-size:14px; text-align: center; color: #6F8899; font-weight: 300; margin: 0; padding-top: 3px; padding-bottom: 40px;}

.main-get-qt .form-group {text-align: left; margin-bottom:0px;}
.main-get-qt .form-control{ float: left; background-color: #FFFFFFF; border: 1px solid #D1DBE0; border-radius: 0px; box-shadow: 0px; height: 45px; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0); box-shadow: inset 0 0px 0px rgba(0,0,0,0); padding-left: 20px; padding-right: 20px; color: #6F8899; font-size: 13px; margin-bottom: 15px;}
.main-get-qt .form-control:focus, .main-get-qt .form-control:active, .main-get-qt .form-control:hover{ border: 1px solid #6F8899; border-radius: 0px; box-shadow: 0px; height: 45px; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0); box-shadow: inset 0 0px 0px rgba(0,0,0,0);}

.get-it-now-bt { background: url(../images/main-button-bg.svg); background-position:right; background-size: 400px 50px; background-repeat:no-repeat; width: 181px; height: 50px; color: #FFFFFF; border: 0px solid; font-size: 14px; text-align: left; padding-left: 25px;    -moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}
.fa-arrow-right{ padding-left: 10px;	-moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}
.get-it-now-bt:hover .fa-arrow-right 
{ padding-left: 25px; 
	-moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}
.subscribe { height: 400px; background-image: url(../images/subscribe-bg.jpg); background-size: cover; background-repeat: no-repeat; padding: 60px; padding-top: 100px; padding-bottom: 100px;}
.subscribe h1 { font-size:30px; text-align: center; color: #FFFFFF; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0;}
.subscribe p { font-size:16px; text-align: center; color: #FFFFFF; font-weight: 300; margin: 0; padding-top: 10px; padding-bottom: 10px;}
.subscribe-input { width: 100%; height: 50px; background: #FFFFFF; float: left; border: none; font-size: 13px; font-style: italic; padding-left: 20px; padding-right: 20px; outline: none;   /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 0px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 0px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 0px; }
.subscribe-padding {padding-top:50px;}
.main-footer {  background-color:#31566D; background-repeat: no-repeat; background-size: 180px; background-position: right bottom 50px; padding-top: 20px; padding-bottom: 20px; color: #A0B2BC;}
.col-md-4{padding-left: 20px; padding-right: 20px; margin-bottom: 40px;}
.logo-footer{ height: 212px; text-align:center; display: block; opacity: .5;}
.main-footer h1{ font-size: 18px; font-weight: 600; padding-bottom: 15px; padding-top: 0px; margin: 0; color: rgba(255,255,255,0.8);}
.main-footer p { padding-top: 10px; padding-bottom: 10px; color: rgba(255,255,255,0.5);}
.border{ border-color: #FFFFFF; border-left: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25); padding-left: 40px; padding-right: 5px; } 
.left-right-padding{ padding-left: 40px; padding-right: 40px;}
.service{ background-image: url(../images/Packing-and-Moving.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}
.storage-and-delivery{ background-image: url(../images/storage-and-delivery.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}
.freight-forwarding { background-image: url(../images/Freight-Forwarding.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}
.transportation{ background-image: url(../images/transportation.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}
.customs-clearance{ background-image: url(../images/customs-clearance.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}
.lashing-securing{ background-image: url(../images/Lashing-securing.jpg); background-size: cover; background-repeat: no-repeat; height:352px;}

.service .get-it-now-bt{width: 230px;}

.left {
  position: absolute;
  height: 50px;
  width: 220px;
  float: left;
	bottom: 0;
}

.service .head{ font-size: 16px; color:#FFFFFF; padding-left: 20px; font-weight: 400; line-height: 60px;}
.service span{ padding-left: 20px;    -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease;}

.service .head span:hover{ padding-left: 40px; -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   transition: all .5s ease; }


.footer-nav{ list-style: none; padding: 0; margin:0; padding-top: 10px;}
.footer-nav li {color: rgba(255,255,255,0.5); padding-top: 4px; padding-bottom: 4px;}
.footer-nav a {color: rgba(255,255,255,0.5); padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; font-size: 13px;}
.footer-nav a:hover, .footer-nav a:focus, .footer-nav a:active{color: rgba(255,255,255,0.9);}

.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
	   padding:0;
    list-style: none;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px; 
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
	
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-rss {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
}
.fa-rss:hover {
    background-color: #eb8231;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-google-plus {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #31566D;
	border: 1px solid rgba(255,255,255,0.25);
}
.fa-google-plus:hover {
    background-color: #e25714;
}

.overlay,.sideMenu{position:fixed;bottom:0}
.overlay{top:0;left:-100%;right:100%;margin:auto;background-color:rgba(0,0,0,.5);z-index:998;transition:all ease 0.2s}
.overlay.open{left:0;right:0}
.sidebarNavigation{margin-bottom:0;z-index:999;justify-content:flex-start}
.sidebarNavigation .leftNavbarToggler{margin-right:10px;order:-1}
.sideMenu{left:-100%;top:52px;transition:all ease 0.5s;overflow:hidden;width:100%;z-index:999;max-width:80%;margin-bottom:0;padding:1rem}
.sideMenu.open{left:0;display:block;overflow-y:auto}
.sideMenu ul{margin:0;padding:0 15px}

.about-us { height: 400px; background-image: url(../images/subscribe-bg.jpg); background-size: cover; background-repeat: no-repeat; padding-top: 80px; padding-bottom: 100px;}
.about-us-content{background-image: url(../images/about-us-bg.svg); background-repeat: no-repeat; width: 100%; height: 255px; padding: 50px; color: #FFFFFF;}
.about-us-content h1{font-size: 28px; text-transform: uppercase; font-weight: 600;}
.about-us-content p{font-size: 18px; font-weight:300; padding-top: 10px;}
.about-us-text{padding-top: 40px; padding-bottom: 40px;}
.about-us-text .left-40{padding-left: 50px;}
.about-us-text h1{font-size:24px; color: #ee2e24; font-weight: 700;}
.about-us-text p{font-size: 14px; font-weight:300; padding-top: 20px; line-height: 28px;}
.services-text {padding-top: 60px; padding-bottom: 40px;}
.box-shadow{
-webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.1);
box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.1);
}
.box-shadow:hover, .box-shadow:focus, .box-shadow:active{
-webkit-box-shadow: 0px 20px 30px 0px rgba(238,46,36,0.2);
-moz-box-shadow: 0px 20px 30px 0px rgba(238,46,36,0.2);
box-shadow: 0px 20px 30px 0px rgba(238,46,36,0.2);
}
.services-img{ background-image: url(../images/Packing-and-Moving.jpg); background-repeat: no-repeat;background-position: bottom; height: 250px; background-size: cover;}
.services-img2{ background-image: url(../images/storage-and-delivery.jpg); background-repeat: no-repeat;background-position: bottom; height: 250px; background-size: cover;}
.services-img3{ background-image: url(../images/Freight-Forwarding.jpg); background-repeat: no-repeat;background-position: bottom; height: 250px; background-size: cover;}
.services-img4{ background-image: url(../images/transportation.jpg); background-repeat: no-repeat;background-position: center; height: 250px; background-size: cover;}
.services-img5{ background-image: url(../images/customs-clearance.jpg); background-repeat: no-repeat;background-position: top; height: 250px; background-size: cover;}
.services-img6{ background-image: url(../images/Lashing-securing.jpg); background-repeat: no-repeat;background-position: top; height: 250px; background-size: cover;}
.services-content{padding: 30px;}
.services-content h1{font-size:18px; color: #ee2e24; font-weight: 700;}
.services-content p {padding-top: 10px; padding-bottom: 10px; font-size: 14px; line-height: 26px;}
.useful-links h1{font-size:22px; font-weight: 700; padding:25px; padding-bottom: 10px;}

.contact-form .form-group {text-align: left; margin-bottom:0px;}
.contact-form .form-control{ float: left; background-color: #FFFFFFF; border: 1px solid #D1DBE0; border-radius: 0px; box-shadow: 0px; height: 45px; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0); box-shadow: inset 0 0px 0px rgba(0,0,0,0); padding-left: 20px; padding-right: 20px; color: #6F8899; font-size: 13px; margin-bottom: 15px;}
.main-get-qt .form-control:focus, .contact-form .form-control:active, .contact-form .form-control:hover{ border: 1px solid #6F8899; border-radius: 0px; box-shadow: 0px; height: 45px; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0); box-shadow: inset 0 0px 0px rgba(0,0,0,0);}
.contact-form{ padding-right: 60px;}

.modal-content{-webkit-box-shadow: 0px 30px 200px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 30px 200px 0px rgba(0,0,0,0.3);
box-shadow: 0px 30px 200px 0px rgba(0,0,0,0.3); border: 0px; border: none; border-radius: 16px 16px 16px 16px;
-moz-border-radius: 16px 16px 16px 16px;
-webkit-border-radius: 16px 16px 16px 16px; }
.modal-header{ background-color: #ee2e24; color: #FFFFFF; border-radius: 16px 16px 0px 0px;
-moz-border-radius: 16px 16px 0px 0px;
-webkit-border-radius: 16px 16px 0px 0px; padding-left: 30px; padding-right: 30px;}
.modal-body{ padding: 30px; padding-bottom: 50px; line-height: 24px;}
.modal-body p {line-height: 24px;}
.modal-header .close{margin-top: 0px; font-size: 22px;}



@media only screen and (max-width: 767px){
	
	.nav>li{ padding-left: 0px;}
	.nav>li:hover{background-color: #FFFFFF;}
	.nav>li>a{color: #FFFFFF; padding-left: 20px; padding-bottom: 15px; font-size: 16px; line-height: 16px; padding-top: 15px; text-transform: uppercase;}
	.nav>li>a:hover, .nav>li>a:focus, .nav>li>a:active {ackground-color: #FFFFFF; color: #EE2E24;}
	   
    .carousel-indicators { left:30%; width: 100%;}
	.carousel-control{margin-left: 60px;}
	.carousel-control.right{left: 130px;}
	.navbar-brand{padding: 20px;}
	.slider-01 {
	background-position:-500px;
	width: 100%;}
	   .slider-left-text{width:90%; float: left; padding-left: 25px;}
	   .carousel-caption{ padding-top: 110px; padding-bottom: 100px;}
	  .carousel-caption h1 {font-size: 34px; font-weight: 600; text-shadow:none;}
.carousel-caption p {font-size: 16px; font-weight: 300; text-shadow:none;  line-height: 24px; padding-top: 5px; padding-bottom: 5px;}
	.main-details { height: auto; padding-top: 30px; padding-bottom: 40px; background-position: -150px;}
	.main-get-qt{ padding: 40px;}
	.subscribe { height: auto;  padding: 60px; background-position: right;}
	.subscribe-padding {padding-top:30px; width: 100%;}
	.main-footer{height: auto;}
	.main-footer1 { float: left; width: 40%; padding-right: 10px;}
	.main-footer3 { float: left; clear: both;}
	.border { border:0px; padding-left: 10px; padding-top: 40px;}
	.logo-footer { text-align: left; padding-top: 30px;}
	.about-us{padding: 40px;}
	.about-us-text .left-40{padding-left: 30px;}
	.about-us-content{ width: 100%; height: auto; margin: auto; background-image:none;}
	.about-us-content h1{font-size: 24px;}
	.about-us-content p{font-size: 16px;}
	

    }


#snav.en {

  right: 0;
  text-align: right;


}



#snav.en li span { right: -100px; }



#snav.en li a:hover span { right: 35px; }



/* RTL CSS */





#snav.ar {

  right: 0;

  text-align: right;

}



#snav.ar li span { right: -100px; }



#snav.ar li a:hover span { right: 35px; }



/* main SideNav.css styles */





#snav {

  position: fixed;

  top: 20%;

  z-index: 9999;

  font-size: 18px;

  font-family: 'Open Sans', sans-serif;

}



#snav ul { list-style: none; }



#snav * {

  margin: 0;

  padding: 0;

  outline: 0;

  transition: all .5s ease;

  -webkit-transition: all .5s ease;

  -moz-transition: all .5s ease;

  -o-transition: all .5s ease;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



#snav li a {

  text-decoration: none;

  color: #fff;

  display: block;

  position: relative;

}



@media only screen and (min-width: 767px){

#snav .fa {

  vertical-align: middle;

  font-size: 18px;

  width: 70px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  z-index: 4;

}
#snav .fab {

  vertical-align: middle;

  font-size: 18px;

  width: 70px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  z-index: 4;
  background-color: #31566D;

}
}

@media only screen and (max-width: 767px){

#snav .fa {

  vertical-align: middle;

  font-size: 18px;

  width: 40px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  z-index: 4;

}
#snav .fab {

  vertical-align: middle;

  font-size: 18px;

  width: 40px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  z-index: 4;
  background-color: #31566D;

}
}

#snav li .fab {

  background-color: #31566D;
  color: #FFFFFF;

}
#snav li a:hover .fab { transform: rotate(360deg); }

#snav li span {

  font-size: 15px;

  vertical-align: middle;

  height: 50px;

  line-height: 50px;

  width: auto;

  white-space: nowrap;

  overflow: hidden;

  display: block;

  padding: 0 38px;

  position: absolute;

  top: 0;

  visibility: hidden;

  z-index: 3;

}



#snav li a:hover .fa { transform: rotate(360deg); }



#snav li a:hover span { visibility: visible; }



/* colors styles */



/* menu items title background used for browsers not supporting :nth-child */





#snav li span { background-color: #555; }



/* icons color and background before hover  */





#snav li .fa {

  background-color: #ee2e24;
  color: #FFFFFF;

}



/* icons hover color */





#snav li a:hover .fa { color: #fff; }



/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */





#snav li:nth-child(10n+1) span,

#snav li:nth-child(10n+1) a:hover .fa { background-color: #ED9224; }


#snav li:nth-child(10n+2) span,

#snav li:nth-child(10n+2) a .fa { background-color: #31566D; }


#snav li:nth-child(10n+2) span,

#snav li:nth-child(10n+2) a:hover .fa { background-color: #5493BA; }



#snav li:nth-child(10n+3) span,

#snav li:nth-child(10n+3) a:hover .fa { background-color: #3DC25D; }



#snav li:nth-child(10n+4) span,

#snav li:nth-child(10n+4) a:hover .fa { background-color: #99BE24; }



#snav li:nth-child(10n+5) span,

#snav li:nth-child(10n+5) a:hover .fa { background-color: #38c; }



#snav li:nth-child(10n+6) span,

#snav li:nth-child(10n+6) a:hover .fa { background-color: #ff0000; }



#snav li:nth-child(10n+7) span,

#snav li:nth-child(10n+7) a:hover .fa { background-color: #000; }



#snav li:nth-child(10n+8) span,

#snav li:nth-child(10n+8) a:hover .fa { background-color: #F1A111; }



#snav li:nth-child(10n+9) span,

#snav li:nth-child(10n+9) a:hover .fa { background-color: #777; }



#snav li:nth-child(10n+10) span,

#snav li:nth-child(10n+10) a:hover .fa { background-color: #30555C; }