@font-face {

  font-family: GESS;

  src: url('http://mcnt.mobi-mind.mobi/cgcnt/CCenter/26/ASSETS/GE%20SS%20Two%20Medium.otf');

}



body{

	

	background: no-repeat center top; 

     background-size: cover;

     background-attachment: fixed; 

		 direction: rtl;

		 text-align: right;

		 font-family: GESS;

}



#main .inner {

    width: 100%;

    max-width: 100%;

    margin: 5px auto;

    padding: 0 0.5em;

}



section, summary, time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;}





.Servicenamestyle {

    position: absolute;

    bottom: 0px;

    font-size: 1.6em;

    width: 100%;



}

.Catnamestyle {

position: relative;

    bottom: 0px;

    font-size: 1.3em;

    width: 100%;

    z-index: 10;

    display: inline-block;

    text-align: center;

}



.burgericon{

    text-align: right  !important;

    padding-right: 15px;

	position: absolute;

    z-index: 101;

    width: 100%;

}



.imgsize {

	width: 100%;

    height: 100%;

}





.timelinecontent {

	    margin: 5px auto;

	    float: right  !important;

		width: 100%;

}

.categorybox {

	    margin: 5px auto;

	    float: right  !important;

		width: 100%;

		border-radius: 20px;

		height: 200px !important;

}



.categoryicon {

	  display: block;

    position: absolute;

	right: 10px;

    z-index: 10;

    width: 50px;

    height: 50px;

    margin: 10px;

}

.categoryiconInside {

	  display: block;

 position: absolute;

    z-index: 10;

    width: auto;

    height: 70%;

    margin: 10px;

}



.contentbox {

	

	box-shadow: 0px 0px 2px #00000075;

    border-radius: 4px;

	height: 254px;

    margin-bottom: 16px;

	

}



.timelinecategory{

	border-radius: 20px;

	height: 200px !important;

	margin: 10px 5px;

	float: right !important;

	width: 100%;

}

.yellowColor{

	background-color: #ffdf9c;

}

.greenColor{

	background-color: #aaffc4;

}

.purpleColor{

	background-color: #ddb0ff;

}

.redColor{

	background-color: #ffb0c1;

}

.blueColor{

	background-color: #aaecff;

}

/* this will have a default color in case the topic doesn't have one*/

.CategoryColor{

	background-color: #ffdf9c;

}



.right-alignment{

	float: right !important;

}



.timelineCatIcon {

	

	width: 35%;

	margin: 10% auto 3%;

}

.CategoriesCatIcon {

	margin: 2% auto;

    height: 60%;

}



.InsideCatImage{

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    position: relative;

    background-position: bottom center;

				}

	

.sectionCat{

	height: 75px;

}

	

.timelineCatTitle {

	width: 90%;

    text-align: center;

    margin: 5px auto;

}

.CategoriesCatTitle {

	width: 90%;

    text-align: center;

    margin: 5px auto;

	bottom: 0;

    position: absolute;

}

.CategorynameStyle{

	

	position: absolute;

    font-size: 1.3em;

    width: 100%;

	

}

.section1{

	

    background-size: cover;

    padding: 0em 0 6em 0;

    background-position: top center;

    background-repeat: no-repeat;

    /* position: relative; */

    text-align: center;

	height: 330px;

}

.section2{

	

	background: #ffffff;

    background-size:  cover;

    padding: 0.5em 0 0.5em 0;

    background-position: center center;

    background-repeat:  no-repeat;

    position: relative;

	margin-top: -1px;

}



.section3{

	height: 330px;

}





.white-bg {

	    background: #ffffff;

}



.mainSection {

       padding: 4em 0;

    position: relative;

    width: 95%;

    margin: 0.5em auto;

}





.mainSection:before {

	top: 10px;

}

.mainSection:after {

	bottom: 10px;

}





.contentImage {

	    float: right;

	    display: inline-block;

    height: auto;

    overflow: hidden;

    position: relative;

    width: 30%;

}

.details-bg{

	height: 200px;

	background-position: top;

    background-size: cover;

    background-repeat: no-repeat;

}

.p-t-20{

	

	    padding-top: 20px;

}



 .contentText {

    display: inline-block;

    padding: 3.5em;

    vertical-align: middle;

    width: 60%;

	text-align: right;

}

.button{

	background: #123d61;

    border-radius: 6px;

    border: 0;

    color: white;

    cursor: pointer;

    display: inline-block;

    float: left;

    padding: 5px 7px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    display: inline-block;

    /* font-weight: 600; */

    font-size: 13px;

    width: 30%;

    margin: 5px 0;

}



.buttonInside{

	background: #cd1140;

    border-radius: 6px;

    border: 0;

    color: white;

    cursor: pointer;

    display: inline-block;

    padding: 10px 7px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    font-weight: 600;

	font-size: 15px;

	margin: 5px;

}

.subscriptionContainer {

	

	text-align: right;

	width: 60%;

    margin: 0 auto;

	

}







/* slider css*/





		

.slick-dots {

	text-align: center;

  margin: 0 0 10px 0;

  padding: 0;

  li {

    display:inline-block;

    margin-left: 4px;

    margin-right: 4px;

    &.slick-active {

      button {

        background-color:black;

      }

    }

    button {

      text-shadow: none;

      color: transparent;

      background-color:#999;

      border:none;

      width: 15px;

      height: 15px;

      border-radius:50%;

    }

		:hover{

			background-color: black;

		}

  }

}

/* END slider css*/



#toggle{

  visibility: hidden;

  opacity: 0;

  position: relative;

  z-index: -1;

}



#toggle:checked ~ dialog {

  display: block;

}



@keyframes appear {

  0%{

    opacity: 0;

    transform: translateY(-10px);

  }

}



dialog{

  animation: appear 350ms ease-in 1;

  max-width: 500px;

  margin: -50px auto 0;

}



.disclaimerBox{

	text-align:center;

	margin: 10px auto;

	

}







article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

	display: block;}

	

	h1, h2,h3 {

		color:#ffffff;

		font-family: GESS !important;

	}

	h1 {

    font-size: 25px;

}

	.titlecolor{

		

		    color: #404040;

	}

.menu-section{

	position: relative;

  /*  top: 0;

    left: 0;

    width: 100%;

    z-index: 999; */

}



/* Tiles */



	.tiles {

		display: -moz-flex;

		display: -webkit-flex;

		display: -ms-flex;

		display: flex;

		-moz-flex-wrap: wrap;

		-webkit-flex-wrap: wrap;

		-ms-flex-wrap: wrap;

		flex-wrap: wrap;

		postiion: relative;

		 /* margin: -2.5em 0 0 -2.5em; */

	}

	.contentDiv {

		width: calc(20% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}

				

		.tiles article {

			position: relative;

			width: calc(33.33333% - 2.5em);

			margin: 2.5em 0 0 2.5em; 

		}



			.tiles article > .image {

				position: relative;

				display: block;

				width: 100%;

				border-radius: 4px;

				overflow: hidden;

				height: 11em;

			}



				.tiles article > .image img {

					display: block;

					width: 30%;

					margin: 8px auto;

				}



			.contentDiv > .image {

				position: relative;

				display: block;

				width: 100%;

				border-radius: 4px;

				overflow: hidden;

				height: 90px;

			}



				.contentDiv > .image img {

					display: block;

					width: 100%;

					height: 100%;

				}



			.placeholder {

				/* display: block; */

				z-index: 2;

				background: url('http://mobicdn.mobi/cgcnt/CCenter/25/IMAGES/placeholder.png') center;

				background-repeat: no-repeat;

  

				background-size: cover;

			}

			



			.tiles article > a {

				display: -moz-flex;

				display: -webkit-flex;

				display: -ms-flex;

				display: flex;

				-moz-flex-direction: column;

				-webkit-flex-direction: column;

				-ms-flex-direction: column;

				flex-direction: column;

				-moz-align-items: center;

				-webkit-align-items: center;

				-ms-align-items: center;

				align-items: center;

				-moz-justify-content: center;

				-webkit-justify-content: center;

				-ms-justify-content: center;

				justify-content: center;

				position: absolute;

				top: 0;

				left: 0;

				width: 100%;

				height: 100%;

				padding: 1em;

				border-radius: 4px;

				color: #ffffff;

				text-align: center;

				text-decoration: none;

				z-index: 3;

			}



				



				.tiles article > a h2 {

					margin: 0;

					text-shadow: 2px 1px 3px #05336d;

					font-weight: 600;

				}



				.tiles article > a .content {

					width: 100%;

					max-height: 0;

					line-height: 1.5;

					margin-top: 0.35em;

					opacity: 0;

				}



					.tiles article > a .content > :last-child {

						margin-bottom: 0;

					}



		



		* + .tiles {

			margin-top: 2em;

		}



		body.is-preload .tiles article {

			-moz-transform: scale(0.9);

			-webkit-transform: scale(0.9);

			-ms-transform: scale(0.9);

			transform: scale(0.9);

			opacity: 0;

		}



		body.is-touch .tiles article .content {

			max-height: 15em;

			opacity: 1;

		}



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



			.tiles {

				/* margin: -1.25em 0 0 -1.25em; */

			}



				.tiles article {

					width: calc(33.33333% - 1.25em);

					margin: 1.25em 0 0 1.25em; 

				}

				.contentDiv {

					width: calc(19.33333% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}



		}



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



			.tiles {

				 /* margin: -2.5em 0 0 -2.5em;*/

			}



				.tiles article {

					width: calc(33.33333% - 2.5em);

					margin: 2.5em 0 0 2.5em;

				}

				.contentDiv {

					width: calc(33.33333% - 2.5em);

					margin: 2.5em 0 0 2.5em;

				}

.contentImage {

	

	    float: none;

		width: 70%;

		}

		

		.timelineCatIcon {

	

	width: 50%;

	margin: 10% auto 3%;

}

		

		}



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



			.tiles {

			/*	margin: -1.25em 0 0 -1.25em;*/

			}



				.tiles article {

					width: calc(50% - 1.25em);

					margin: 1.25em 0 0 0.85em;

				}

				/*.contentDiv {

					width: calc(50% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}*/

				.contentDiv {

					width: calc(33.33333% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}

		}







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



			.tiles {

				margin: 0;

			}



				.tiles article {

					width: calc(50% - 1.25em);

					margin: 1.25em 0 0 0.85em;

				}



			/*	.contentDiv{

					width: calc(50% - 1.25em);

					margin: 1.25em 0.5em 0 0.75em;

				} */

				.contentDiv{

				    width: calc(33.33333% - 0.4em);

					margin: 1.25em 0.2em 0 0.2em;

				}

				.subscriptionContainer {

					width: 100%;

		

				}

				

	



		}

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

			.tiles article {

					width: 100%;

					margin: 1.25em 0 0 0;

				}

				

				

				

				

		}

		

		

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

		.contentImage {

	

	    float: none;

		width: 100%;

		}

		.contentText {

		padding: 2em !important;

		width: 100%;

		}

		.buttonInside{

	

	float: none;

}

		

.timelinecategory {

    height: 150px !important;

}



}

/* Main */



	#main {

		padding: 0em 0 2em 0 ;

	}



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



			#main {

				padding: 0em 0 2em 0 ;

			}





		}

		

		/* Image */



	.image {

        border: 0;

    position: relative;

    width: 100%;

    border-radius: 4px 4px 0 0;

    overflow: hidden;

    height: 200px;

    display: flex;

    justify-content: center;

	}



		.image img {

			display: block;

		}



		.image.left, .image.right {

			max-width: 40%;

		}



			.image.left img, .image.right img {

				width: 100%;

			}



		.image.left {

			float: left;

			padding: 0 1.5em 1em 0;

			top: 0.25em;

		}



		.image.right {

			float: right;

			padding: 0 0 1em 1.5em;

			top: 0.25em;

		}



		.image.fit {

			display: block;

			margin: 0 0 2em 0;

			width: 100%;

		}



			.image.fit img {

				width: 100%;

			}



		.image.main {

			display: block;

			margin: 0 0 3em 0;

			width: 100%;

		}



			.image.main img {

				width: 100%;

			}



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



				.image.main {

					margin: 0 auto;

				}



			}

			

			

/* random */

.container{

	margin-top: 0em;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

}







.box {

    padding: 0.5em 1em;

    /* background: #f1f1f1; */

    text-align: right;

    border-radius: 0px 0px 6px 6px;

}











	

.mm_moreicon {

    width: 30px;

    float: right;

    display: inline-block;

    margin-top: 20px;

}



.sectionTitle{

	padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto;

	position: relative;

    width: 100%;

    height: 60px;

}

.sectionTitle img{ 

    vertical-align: middle;

}

.box p {

	 white-space: nowrap;

      overflow: hidden;

text-overflow: ellipsis;

font-size: 16px;

    width: 60%;

    margin: 5px 0;

}



	.titleSection {

		display: inline-block;

 

	font-weight: bold;

		

	}

	

	.serviceImage{

		overflow: hidden;

		height: 200px;

	}

	

	.contentImage{

		overflow: hidden;

	}