/*** text ***/

/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

body																																																{ font: normal 16px/140% Poppins,Arial,Helvetica,sans-serif; background: #f8fcff; color: #a5a5a5; }
	
p																																																		{ margin: 0px 0px 20px 0px; }

h1,h2,h3,h4																																													{ font-family: 'Poppins', Arial, Helvetica, sans-serif; font-weight: normal; line-height: 100%; }
h1																																																	{ font-size: 30px; color: #FFFFFF; margin: 0 0 30px 0 }																	
h2 																																																	{ font-size: 30px; background: #F8FCFF; text-align: center; padding: 0px; width: 60%; margin: 0 auto 30px; color: #68acce;  }
h2:after 																																														{ content: ""; height: 1px; display: block; position: absolute; left: 4%; right: 4%; top: 14px; z-index: -1; border-bottom: 1px solid #68acce; }
h3																																																	{ font-size: 22px; color: #68ACCE; font-weight: normal; margin: 0 0 20px 0 }


a, a:visited																																												{ text-decoration: none; outline: none; color: #68ACCE; text-decoration: underline; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s;-webkit-transition:.5s; transition:.5s; }
a:active, a:hover																																										{ text-decoration: none; outline: none; }

.column																																															{ display: inline-block; float: left; box-sizing: border-box; }
.column.prct50																																											{ width: 50%;  }
.column.prct50:nth-child(even)																																			{ padding: 0 5% 0 0 }

/* grid */
[class*="ctr-grid"],
[class*="ctr-gridalways"]																							                              { display: -ms-grid; display: grid; }

[class*="ctr-grid"].grid-autofit																			                              { grid-template-columns: repeat(auto-fit, minmax(0, auto)) /* divs inside grid equaly fully stretched */ ; }
[class*="ctr-grid"].grid-autofill 																		                              { grid-template-columns: repeat(auto-fill, minmax(0, auto)) /* divs inside grid divided by its content */; }

[class*="ctr-grid"].grid-twoitems																			                              { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
[class*="ctr-grid"].grid-threeitems																		                              { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
[class*="ctr-grid"].grid-fouritems																		                              { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
[class*="ctr-grid"].grid-fiveitems																		                              { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); }
[class*="ctr-grid"].grid-sixitems																			                              { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); }
[class*="ctr-grid"].grid-sevenitems																		                              { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); }
[class*="ctr-grid"].grid-eightitems																		                              { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); }
[class*="ctr-grid"].grid-nineitems																		                              { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); }
[class*="ctr-grid"].grid-tenitems																			                              { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); }

	/* gaps  */                             
	.grid-gap1,.grid-gap-size1																					                              { grid-gap: 1px; }
	.grid-gap2,.grid-gap-size2																					                              { grid-gap: 5px; }
	.grid-gap3,.grid-gap-size3																					                              { grid-gap: 10px; }
	.grid-gap4,.grid-gap-size4																					                              { grid-gap: 20px; }
	.grid-gap5,.grid-gap-size5																					                              { grid-gap: 50px; }

@media only screen and (max-width:768px) {		                              
 .ctr-grid																														                              { display: block; }
}


/*** forms ***/	                      																															
label																																																{ display: block}

input[type="checkbox"]																																							{ float: left; margin: 5px 10px 0px 0px; }

input,                                																															
select,                               																															
textarea																																														{ padding: 10px 10px; border: none; margin: 0px 0px 10px 0px; box-sizing: border-box; border: 1px solid #F1F1F1; }
select																																															{ padding: 6px; }

input.small, select.small																																						{ width: 30%; max-width: 200px }
input.medium, select.medium																																					{ width: 50%; max-width: 400px }
input.large, select.large, textarea.la																															{ width: 100%; max-width: 600px }

/*** buttons ***/                     																															
.button																																															{ display: inline-block; text-decoration: none; color: #140a33; }
.button.orange																																											{ background: #febc22; padding: 5px 10px; text-align: center; color: #140a33; text-transform: lowercase; font-size: 14px; border-radius: 4px }

.button.submit																																											{ background: #febc22; text-shadow: none; padding: 15px 20px; text-align: center; color: #140a33;  font-size: 14px; font-weight: bold; border-radius: 4px; border: none; font-weight: normal; }
.button.submit:hover																																								{ background: #febc22; }

.button.close																																												{ display: block; background: #F2F2F2; position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 4px; z-index: 5500 }
.button.close:before 																																								{ content: "×"; font-size: 30px; }
.button.close:hover																																									{ background: #E1E1E1; color: #555555; text-decoration: none }

.button.social																																											{ height: 50px; width: 50px; border-radius:50%}
.button.social.facebook																																							{ background: url('../images/social/facebook.png') no-repeat; background-size: cover; }
.button.social.instagram																																						{ background: url('../images/social/instagram.png') no-repeat; background-size: cover; }
.button.social.youtube																																							{ background: url('../images/social/youtube.png') no-repeat; background-size: cover; }
.button.social.twitter																																							{ background: url('../images/social/twitter.png') no-repeat; background-size: cover; }
.button.social.pinterest																																						{ background: url('../images/social/pinterest.png') no-repeat; background-size: cover; }
.button.social.linkedin																																							{ background: url('../images/social/linkedin.png') no-repeat; background-size: cover; }
.button.social.weibo																																								{ background: url('../images/social/weibo.png') no-repeat; background-size: cover; }
.button.social.youku																																								{ background: url('../images/social/youku.png') no-repeat; background-size: cover; }

/*** general layout ***/              																														
#ctr-wrapper 																																												{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto 0px; }
#ctr-content																																												{ padding: 50px 0px }

.centered																																														{ max-width: 1024px; box-sizing: border-box; margin: 0 auto; padding: 0 2%; position: relative;  }
.ctr-flex																																														{ display: flex }

/*** header ***/                                            
#ctr-header																			                                            		    { background: #FFFFFF; padding: 0px; box-sizing: border-box; overflow: auto; }
#ctr-header .logo																                                            			  { max-width: 100%; max-height: 40px; margin: 10px 0; }
#ctr-header .button															                                            				{ position: absolute; right: 2%; top: 40px;}

#ctr-header .backgroundimage										                                            				{ background: #000000 url('../images/header/interrail-eurail-banner.jpg') center 0px no-repeat; color: #FFFFFF; background-size: cover; position: relative; }
#ctr-header .backgroundimage > div                                                                  { padding: 100px 2%;}
#ctr-header .backgroundimage .centered					                                            				{ height: 100%  }			
#ctr-header .backgroundimage .text							                                            				{ position: relative;  }
#ctr-header .backgroundimage h1									                                            				{ color: #FFFFFF; }
#ctr-header .backgroundimage p									                                            				{ font-size: 16px; line-height: 150%; }

/*** uploader ***/                    																															
#ctr-uploader .button																																								{ position: relative; }
#ctr-uploader #uploader-selectimages																																{ margin-left: 10px; }

/*** favorites ***/	                  																															
#ctr-favorites																																											{ text-align: center; }
#ctr-favorites .thumbnail																																						{ display: inline-block; padding: 10px; background: #FFFFFF; margin: 0 10px 10px 0; border: 1px solid #F2F2F2; border-radius: 4px}
#ctr-favorites .thumbnail .date																																			{ display: block; font-size: 12px; font-weight: bold; padding: 0 0 10px 0}

/*** social ***/                      																															
#ctr-socialbuttons																																									{ text-align: center; }
#ctr-socialbuttons a																																								{ margin: 0 10px 0 0 }

/*** popups ***/                      																															
.vale																																																{ display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 8000}
.popup																																															{ display: none; position: absolute; width: 600px; z-index: 9000; top: 10%; left: 50%; margin: 0 0 0 -320px; background: #FFFFFF; padding: 20px; border-radius: 4px}

