/* ==========================================================================
   Font include
   ========================================================================== */

@import url('webfonts/slick.css');
@import url('webfonts/slick-theme.css');
@import url('webfonts/icon.css');
@import url('webfonts/fontello.css');
@import url('webfonts/font-awesome.css');
@import url('webfonts/webfonts.css');
@import url('../jQuery/plugin/superfish-menu/css/superfish.css');
@import url('ihover.css');
@import url('hover.css');
@import url('themify-icons.css');
@import url('swipebox.css');
@import url('animate.css');
@import url('jquery.fancybox.css');


/* ==========================================================================
   Webfonts
   ========================================================================== */
   
   .kelson {font-family: 'kelson_sansregular'!important;}
   .politica {font-family: 'politicaregular'!important;}
   .politica-bold {font-family: 'politicabold'!important;}


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
   
	html, body {margin:0px; padding:0px;}
	body {
        background-color:#fafafa;
        font-family: 'kelson_sansregular'; font-size: 16px; color: #303030; line-height: 1.4;
    }
	
	a {color:#003079;}
	a:hover {color:#5cc1d1; text-decoration:none;}

    p {margin-bottom:2rem;}
    ul, ol {margin-bottom:0;}
	

/* ==========================================================================
   Typography
   ========================================================================== */

	h1, h2, h3, h4, h5, h6 {font-family: 'politicabold'; color:#000000;}
	h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {font-family: 'politicaregular';}
	
	h1 {font-size:3.5rem;}
	h2 {font-size:2.8rem;}

/* ==========================================================================
   Margins & Paddings
   ========================================================================== */

	
/* ==========================================================================
   Borders & Shadows
   ========================================================================== */
   
    .box-shadow-lg {
        -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.30);
        box-shadow: 0 0 30px 0 rgba(0,0,0,.30);
    }
	
    .box-shadow-md {
        -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.20);
        box-shadow: 0 0 15px 0 rgba(0,0,0,.20);
    }

/* ==========================================================================
   Dividers
   ========================================================================== */
   
	.separator {
		width: 10px;
		height: 10px;
		margin: 20px auto;
		background: #2162af;
		position: relative;
		/*display: inline-block;*/
		border-radius: 50%;
	}
	.separator:after {
		position: absolute;
		left:5%;
		bottom:4px;
		height: 1px;
		width: 80px;
		background: #eee;
		content:"";
		display: inline-block;
		margin-left: 20px;   
	}
	.separator:before {
		position: absolute;
		right: 5%;
		bottom:4px;
		height: 1px;
		width: 80px;
		background: #eee;
		content:"";
		display: inline-block;
		margin-right: 20px;
	}
	.divider {width:100%; height:1px; border-bottom:1px dashed #CCCCCC; margin:30px 0px;}
	
/* ==========================================================================
   Buttons
   ========================================================================== */
		
	.btn {font-family: 'politicabold'; white-space:normal; font-size:1.4rem;}
    .btn > span {font-family: 'politicaregular';}
    .btn-primary {background-color: #5787c5; border-color:#5381bc;}
    .btn-info {background-color: #5cc1d1;}
    .btn-lg {font-size: 1.75rem;}

    .btn h2, .btn h3 {color: #FFF;}
	
	#quicklinks .btn {font-size:1rem;}

    .scrollup{
		width: 30px;
		height: 30px;
		border-radius: 4px;
		opacity: .3;
		position: fixed;
		bottom: 20px;
		right: 25px;
		color: #fff;
		cursor: pointer;
		background-color: #128aa2;
		z-index: 1000;
		transition: opacity .5s, background-color .5s;
		-moz-transition: opacity .5s, background-color .5s;
		-webkit-transition: opacity .5s, background-color .5s;
	}
	
	.scrollup:hover {
		background: #344454;
		opacity: 1;
	}
	
	.scrollup i {
		font-size: 13px;
		position: absolute;
		opacity: 1;
		color: #fff;
		left: 50%;
		top: 50%;
		margin-top: -7px;
		margin-left: -6px;
		text-decoration: none;
	}
	
/* ==========================================================================
   Helper Styles
   ========================================================================== */

	.bg-primary {background-color: #5787c5!important;}
	    
    .perspective-container {
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        -o-perspective: 600px;
        perspective: 600px;
        
    }

    .perspective-container .rotated {
        /*
        -moz-transform: rotate(-5deg) translateX(0px) translateY(7px);
        -webkit-transform: rotate(-5deg) translateX(0px) translateY(7px);
        -o-transform: rotate(-5deg) translateX(0px) translateY(7px);
        -ms-transform: rotate(-5deg) translateX(0px) translateY(7px);
        transform: rotate(-5deg) translateX(0px) translateY(7px);
        */
        -webkit-transform: rotateZ( -5deg );
        -moz-transform: rotateZ( -5deg );
        -o-transform: rotateZ( -5deg );
        transform: rotateZ( -5deg );
    }
	
	.text-primary {color:#5787c5!important;}
	.smaller {font-size: 60%;}
	
/* ==========================================================================
   Navigation Styles
   ========================================================================== */

    /* Main Nav */
	header nav.navbar-light {background-color:#FFF; border-bottom:5px solid #f1f1f1; border-top:5px solid #f1f1f1;}
	header nav .sf-menu {margin: 0px; font-family: 'politicabold';}
	header nav .sf-menu li {background-color:transparent; font-size:24px; margin:0px 5px;}
	header .navbar-light .navbar-nav .nav-link {color:#5787c5;}
	header .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {background-color:#5787c5; color:#FFFFFF;}
	header nav .sf-menu li ul li {background-color:#FFF; margin:0px;}
	/*header nav .sf-menu a {border:none; color:#5787c5;}*/
	/*header nav .sf-menu a:hover {background-color:#5787c5; color:#FFFFFF;}*/
	
/* ==========================================================================
   Sectional Styles
   ========================================================================== */
    
    /* Header */
	div#logo-row {position:absolute; z-index:10; width:100%;}
	div#logo-row h2, div#logo-row h3 {color:#000; text-align:right;}
	div#logo-row h2 {font-size:24px;}
	div#logo-row h3 {font-size:20px;}
	
	section#hero {position:relative;}
	
	/* Main Slider */
	.hero-slider .slide.slick-active{
		-webkit-animation:Slick-FastSwipeIn 1s both;
			  animation:Slick-FastSwipeIn 1s both;
	}

    .hero-slider .next-arrow, .hero-slider .prev-arrow {
		position:absolute;
		top:50%;
		width:45px;
		height:45px;
		background:rgba(0,48,121,.70);
		border:0 none;
		margin-top:-22.5px;
		text-align:center;
		color:#FFF;
		z-index:5;
	}
	
	.hero-slider .next-arrow {right:1%;}
	.hero-slider .prev-arrow {left:1%;}
	.hero-slider .next-arrow:hover, .hero-slider .prev-arrow:hover {
		cursor:pointer; background:rgba(0,48,121,1);
	}
	
	/* Visitor's Guide */
	#guide-container {
		background-color:#d2d2d2; background-size:cover; background-image:url(../../files/images/layout/general/bg-visitors-guide.png); background-position:center; background-repeat:no-repeat; height:810px; margin-top:-770px; z-index:-3;
	}
	
	#guide-container a {z-index:10;}
	
	/* Video */
	.bg-video #player {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*z-index: -2;*/
	}
	.bg-video .overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background-image:url(../../files/images/layout/general/overlay-tile.png);
		background-repeat:repeat;
	}
	section#countdown h1 {
		position:absolute;
		color: white;
		text-align: center;
		margin-top: 35%;
		font-size: 64px;
		text-shadow: 1px 1px 3px black;
	}
	
	section#countdown h2 {text-shadow: 0 1px 1px #000000;}
	
	/* Countdown */
	/*div#clockworks {position:absolute;}*/
	
	.clockworks {width: 850px; max-width: 100%; height: 300px; margin: 60px auto 0; position: relative;}
	.clockworks p {margin-bottom:0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'politicabold'; color:#FFFFFF; text-align: center; text-transform: uppercase;}
	
	canvas {position: absolute;}
	
	.circle-bg-inner {
		background-image:url(../../files/images/layout/general/overlay-tile.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: inherit;
		height: inherit;
		border-radius: inherit;
		position: absolute;
		z-index: -1;
		-webkit-filter: brightness(70%) contrast(200%);
		filter: brightness(70%) contrast(200%);
	}
	
	.days, .seconds, .hours, .minutes {border-radius: 100%; border: 2px solid #000; position: absolute;}
		
	.days canvas {left: -11px; top: -11px;}
	.days {width: 300px; height: 300px; left: calc(50% - 150px); top:0;}
	.days .num {font-size: 100px; margin-top: 65px;}
	.days .str {font-size: 30px; margin-top:-15px;}
	
	.seconds canvas {top: -4px; left: -4px;}
	.seconds {width: 92px; height: 92px; background: #fff; left: calc(50% - 46px); top: calc(100% - 46px);}
	.seconds .num {font-size: 25px; color:#0c0c0c; margin-top: 15px;}
	.seconds .str {font-size: 14px; color:#0c0c0c;}
	
	.hours canvas {top: -6px; left: -6px;}
	.hours {width:180px; height: 180px; left: 0; top: calc(50% - 90px);}
	.hours .num {font-size: 43px; margin-top: 50px;}
	.hours .str {font-size: 16px;}
	
	.minutes canvas {top: -6px; left: -6px;}
	.minutes {width:180px; height: 180px; right: 0; top: calc(50% - 90px);}
	.minutes .num {font-size: 43px; margin-top: 50px;}
	.minutes .str {font-size: 16px;}

	
	/* Info Cards */
    #info-cards h2 {font-size: 22px;}
    #info-cards a {
        color: inherit;
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1); 
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1); 
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1);
        transition: all 200ms ease-in;
        transform: scale(1);
    }
    #info-cards a:hover {
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1.1);
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1.1);   
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1.1);
        transition: all 200ms ease-in;
        transform: scale(1.1);
    }

    /* Google Map on Footer */
    #map {
        height: 100%; 
        width: 100%; 
        position:absolute; 
        top: 0; 
        left: 0; 
        z-index: 0;
    }

    /* Footer */
	section#social-media a {color:#FFFFFF;}
	section#social-media a:hover {color:#000;}

    footer {font-size: 12px; line-height: 1.6; background-color:#FFF; padding:20px 0px;}
    footer h2 {font-size: 18px; color: #5787c5;}
    footer a {color: #5787c5;}
    footer a:hover {color: #000;}

    /* Content */
    #content {color: #2b2b2b;}
	
	/* Hidden Content */
	.hidden-content {
	  /* Custom styling */
	  max-width: 550px;
	  border-radius: 4px;
	
	  /* Custom transition - slide from top*/
	  transform: translateY(-50px);
	  transition: all .33s;
	}
	
	.fancybox-slide--current .hidden-content {
	  transform: translateY(0);
	}

		
/* ==========================================================================
   Listing Template Styles
   ========================================================================== */
    
    /* Hover Effected Listing Template */
    .ih-item.square {width: 100%; height: 90%;}
    .ih-item.square.effect3 .info {
        height: 90px;
        background: #6989A9;
        opacity: 0.5;
    }
    .ih-item.square.effect3.bottom_to_top .info {
        -webkit-transform: translateY(50%);
        -moz-transform: translateY(50%);
        -ms-transform: translateY(50%);
        -o-transform: translateY(50%);
        transform: translateY(50%);
    }
    .ih-item.square.effect3 .info p {
        color: inherit; margin-top: 10px; font-style: normal; text-transform: uppercase;
    }

    .newspaper-column {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }

    .ih-item.square.effect8 {height: 100%;}
    .ih-item.square.effect8 .img {background-color: #FFF;}

    /* Alphabetical Index */
    ul.index-list {list-style: none; padding: 0px 20px; margin-top:20px;}
    ul.index-list li {margin-bottom:7px; padding-left: 1.3em; padding-bottom: 8px; border-bottom:1px dashed #eaeaea;}
    ul.index-list li:before {
      content: "\f27e"; /* FontAwesome Unicode */
      font-family: FontAwesome;
      display: inline-block;
      margin-left: -1.3em; /* same as padding-left set on li */
      width: 1.3em; /* same as padding-left set on li */
    }
    .listNav, .ln-letters {overflow: hidden;} 
    .listNavHide {display: none;}
    .listNavShow {display: list-item;}
    .letterCountShow {display: block;}
    .ln-letters a {
        font-family: 'politicabold';
        display: block;
        float: left;
        padding: 4px 6px;
        border: 1px solid silver;
        text-decoration: none;
    } 
    .ln-letters .ln-last {border-right: 1px solid silver;}
    .ln-letters a:hover, .ln-letters .ln-selected {background-color: #eaeaea;}
    .ln-letters .ln-disabled {color: #ccc;}
    .ln-letter-count {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        text-align: center;
        font-size: 0.8em;
        line-height: 1.35;
        color: #336699;
    }

    /* Page Menu */
    ul.PageMenu {list-style: none; padding: 0; font-family: 'politicabold';}
    ul.PageMenu li {line-height: 1.5; border-bottom:1px solid #eaeaea; padding: 0.5em 1.1em;}
    ul.PageMenu li:last-child {border-bottom:0px;}
    ul.PageMenu li:before {
      content: "\f105"; /* FontAwesome Unicode */
      font-family: FontAwesome;
      display: inline-block;
      margin-left: -1.1em; /* same as padding-left set on li */
      width: 1.1em; /* same as padding-left set on li */
    }

    /* Check List */
    ul.check-list {list-style: none; padding: 0;}
    ul.check-list li {padding-left: 1.3em;}
    ul.check-list li:before {
      content: "\f00c"; /* FontAwesome Unicode */
      font-family: FontAwesome;
      display: inline-block;
      margin-left: -1.3em; /* same as padding-left set on li */
      width: 1.3em; /* same as padding-left set on li */
      color: #003079;
    }
	
	/* Speakers Listing Template */
	.speaker-container .card {background-color:#f6f6f6;}
	.speaker-container .card .img-thumbnail {border:none; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
	.speaker-container .card a h4 {color:#542E91;}
	.speaker-container .card a:hover h4 {color:inherit;}
	
	/* New Speakers Listing Template */
	#letters .link, #letters .nolink {padding:4px 10px; margin:2px; background-color:#542E91; color:#FFF; border-radius:4px; line-height:36px;}
	#letters .nolink {opacity:0.5;}
	#letters .link:hover {cursor:pointer; background-color:#F500FF;}
	#speakers p {color:#333;}

/* ==========================================================================
   Table Styles
   ========================================================================== */

    table.no-border, table.no-border th, table.no-border tr, table.no-border td {border: none;}

    .responsive-data-table tbody tr th {width: 25%;}
    @media only screen and (max-width: 800px) {
    
		/* Force table to not be like tables anymore */
		.responsive-data-table table, 
		.responsive-data-table thead, 
		.responsive-data-table tbody,  
		.responsive-data-table tfoot, 
		.responsive-data-table th, 
		.responsive-data-table td, 
		.responsive-data-table tr { 
			display: block; 
		}
	 
		/* Hide table headers (but not display: none;, for accessibility) */
		.responsive-data-table thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
	 
		.responsive-data-table tr { border: 1px solid #ccc; }
	 
		.responsive-data-table td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 55%!important; 
			white-space: normal;
			text-align:left;
		}
	 
		.responsive-data-table td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 11px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
			text-align:left;
			font-weight: bold;
		}
        
        .responsive-data-table tfoot td{padding-left: 6px!important;}
		
		.responsive-data-table .wo-data td {padding-left:5px!important;}
        .responsive-data-table .w-thead thead tr{
            position: relative;
			top: 0;
			left: 0;
        }
	 
		/*
		Label the data
		*/
		.responsive-data-table td:before { content: attr(data-title); }
		
		.responsive-data-table .idates td {padding-left:5px!important;}
		
		.responsive-data-table table.satellite-new td {padding-left: 35%!important; width: 100%!important;}
	}
	
	table.registration > thead > tr > th {padding-top:15px; padding-bottom:15px;}
	table.registration > tbody > tr > td {text-align:center;}
	table.registration > tfoot > tr > td {padding:15px;}

	table.satellite-new thead tr th, table.satellite-new tbody tr th, table.satellite-new tbody tr td {text-align: center;}
	table.satellite-new tbody tr th {width: 15%;}
	table.satellite-new tbody tr td {font-size: 14px; vertical-align: middle;}
	table.satellite-new tbody tr td:nth-child(2) {font-weight: bold; font-size: 16px; width: 28%;}

    table.kurul tr {border-bottom:1px dashed #eaeaea;}
    table.kurul tbody tr th {width:28%;}
    table.kurul tbody tr td {width:35%;}

    table.useful-info tbody tr th {width: 20%;}
	
	table.program {background-color: #FFF; border-collapse: separate; border-spacing: 5px;}
	table.program thead tr th {text-align:center; background-color:#393D53; color:#FFF; vertical-align:middle;}
	table.program thead tr th:first-child {width:15%;}
	table.program tbody tr th, table.program tbody tr td {background-color:transparent; font-size:14px; vertical-align:middle;}
	table.program h2 {font-size:20px; margin-bottom:20px; color:#00A8B9;}
	table.program h3 {font-size:16px;}
	table.program h3 small {color:#333;}
	table.program h4 {font-size:14px;}
	/*table.program div[class^="col"] {padding-left:10px; padding-right:10px;}*/
   	
	@media only screen and (max-width: 800px) {
        .responsive-data-table tbody tr th, table.satellite tbody tr td, table.satellite tbody tr th, table.satellite-new tbody tr th {width: 100%; padding-left: 6px;}
		table.registration > tbody > tr > td,
		table.program > tbody > tr > td,
		table.satellite-new > tbody > tr > td {text-align:left;}
		table.registration > tfoot > tr > td,
		table.program > tfoot > tr > td {padding-left:5px!important;}
        
        table.useful-info tbody tr th {width:inherit;}		
	}


	
/* ==========================================================================
   Backgrounds
   ========================================================================== */

	
/* ==========================================================================
   Youtube Styles
   ========================================================================== */
   
   .ytp-watermark, .ytp-watermark:hover, .ytp-native-controls .ytp-watermark, .ytp-hide-controls .ytp-watermark, .html5-video-player .ytp-watermark, .ytp-autohide .ytp-watermark {display:none!important;}
   
/* ==========================================================================
   Adaptive Styles
   ========================================================================== */
   
	@media only screen and (max-width: 1199px) {
		
	}
	
	@media only screen and (min-width: 1366px) and (max-width: 1599px) {
		
	}
	
	@media only screen and (min-width: 1200px) and (max-width: 1365px) {
		
	}
	
	@media only screen and (min-width: 992px) and (max-width: 1199px) {

	}
	
	@media only screen and (min-width: 768px) and (max-width: 991px) {

	}

    
    @media only all and (width: 1024px) and (height: 768px) {

    }
	
	@media only screen and (min-width: 601px) and (max-width: 767px) {
		div#logo-row {position:relative;}
	}
	
	@media only screen and (min-width: 515px) and (max-width: 600px) {
		div#logo-row {position:relative;}
	}
	
	@media only screen and (min-width: 321px) and (max-width: 514px) {
		h1 {font-size:2.5rem;}
		h2 {font-size:2rem;}
		div#logo-row {position:relative;}
		#guide-container {margin-top:-570px; height:610px;}
		#clockworks {padding-top:30px;}
		.clockworks {margin-top: 0px;}
		.days canvas {left: -11px; top: -7px; width: 164px;}
		.days {width: 150px; height: 150px; left: calc(50% - 75px); top:0;}
		.days .num {font-size: 50px; margin-top: 25px;}
		.days .str {font-size: 20px; margin-top:-15px;}
		
		.seconds canvas {top: -4px; left: -4px;}
		.seconds {width: 92px; height: 92px; background: #fff; left: calc(50% - 46px); top: calc(70% - 46px);}
		.seconds .num {font-size: 25px; color:#0c0c0c; margin-top: 15px;}
		.seconds .str {font-size: 14px; color:#0c0c0c;}
		
		.hours canvas {top: -6px; left: -6px; width:126px;}
		.hours {width:120px; height: 120px; left: 0; top: calc(50% - 60px);}
		.hours .num {font-size: 36px; margin-top: 20px;}
		.hours .str {font-size: 16px;}
		
		.minutes canvas {top: -6px; left: -6px; width:126px;}
		.minutes {width:120px; height: 120px; right: 0; top: calc(50% - 60px);}
		.minutes .num {font-size: 36px; margin-top: 20px;}
		.minutes .str {font-size: 16px;}
	}	

	@media only all and (width: 320px) {
		div#logo-row {position:relative;}
		#guide-container {margin-top:-570px; height:610px;}
		#clockworks {padding-top:30px;}
		.clockworks {margin-top: 0px;}
		.days canvas {left: -11px; top: -7px; width: 164px;}
		.days {width: 150px; height: 150px; left: calc(50% - 75px); top:0;}
		.days .num {font-size: 50px; margin-top: 25px;}
		.days .str {font-size: 20px; margin-top:-15px;}
		
		.seconds canvas {top: -4px; left: -4px;}
		.seconds {width: 92px; height: 92px; background: #fff; left: calc(50% - 46px); top: calc(70% - 46px);}
		.seconds .num {font-size: 25px; color:#0c0c0c; margin-top: 15px;}
		.seconds .str {font-size: 14px; color:#0c0c0c;}
		
		.hours canvas {top: -6px; left: -6px; width:126px;}
		.hours {width:120px; height: 120px; left: 0; top: calc(50% - 60px);}
		.hours .num {font-size: 36px; margin-top: 20px;}
		.hours .str {font-size: 16px;}
		
		.minutes canvas {top: -6px; left: -6px; width:126px;}
		.minutes {width:120px; height: 120px; right: 0; top: calc(50% - 60px);}
		.minutes .num {font-size: 36px; margin-top: 20px;}
		.minutes .str {font-size: 16px;}
		}
		.bg-newsletter{
			background: #62abdd; /* Old browsers */
			background: -moz-linear-gradient(top, #62abdd 0%, #363d59 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #62abdd 0%,#363d59 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #62abdd 0%,#363d59 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62abdd', endColorstr='#363d59',GradientType=0 ); /* IE6-9 */
			border-radius:3px!important;	
		}
	
#keepMeUpdatedForm h3{color:#FFF!important; text-align:center!important; line-height:66px!important;}