ಟೆಂಪ್ಲೇಟು:ProjectGLOW/MainPage/styles.css

.glow * {
   padding: 0; 
   margin: 0 auto;
   text-align: center; }
   
/* Border-Box */

.glow *,
.glow *:before,
.glow *:after {
    box-sizing: border-box;
}

.glow { 
	margin: 0 auto;
	text-align: center;  
	font-family: serif;
	font-size: 15px;
	line-height: 1.3;
	color: black;
}

@media only screen and (min-width: 600px) and (min-device-width: 480px) {
  .glow { font-size: 13px; }     
}

@media only screen and (min-width: 900px) and (min-device-width: 480px) {
	.glow { font-size: 15px; }     
}

@media only screen and (min-width: 1340px) and (min-device-width: 480px) {
	.glow { font-size: 17px; }     
}
   
.glow .glow-section {
	margin: 0 auto 25px; 
	position: relative;
	width: 100%;
	padding: 20px;
} 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow .glow-section { padding: 30px; }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {
	.glow .glow-section { padding: 50px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow .glow-section { padding: 60px; }
}

.glow h1 {
	margin-bottom: 1em;
	line-height: 1;
	font-size: 32px;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow h1 { font-size: 36px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow h1 { font-size: 42px; }
}

.glow h2 {
	margin-bottom: .5em;
	line-height: 1;
	font-size: 24px;
	font-weight: normal;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow h2 { font-size: 26px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow h2 { font-size: 28px; }
}

.glow h3 {
	margin-bottom: .5em;
	line-height: 1;
	font-size: 20px;
	font-family: sans-serif;
	text-transform: uppercase;
	color:#fff;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow h3 { font-size: 22px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow h3 { font-size: 24px; }
}


.glow p {
	margin: auto auto 1em;
	line-height: 1.3;
	font-size: 20px;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow p { font-size: 24px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow p { 
		font-size: 28px;
		line-height: 1.4;
		width: 70%;
	}
}

.glow div div p {
	font-size: 16px;
	margin: auto auto .5em;
}

.glow-grid .glow-section p { margin: auto auto .75em; }

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow div div p,
	.glow-grid .glow-section p  { font-size: 18px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow div div p,
	.glow-grid .glow-section p { 
	  font-size: 20px;
		width: auto !important;
	}
}

.glow-button {
  display: block;
  line-height: 1.3;
  margin-bottom: .25em;
	background: #3b639a;
	color: white;
	font-size: 20px;
	font-family: sans-serif;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	padding: .25em 1em;
	border-radius: 4px;
  transition: all .15s ease-out;  
  transform:         translateY(0%);  
}

@media only screen and (min-width: 360px) {
	.glow-button {
		display: inline-block; 
		margin: auto;
		}
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-button { font-size: 22px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-button  { font-size: 24px; }
}

.glow-button:hover {
	background: #36c !important;
	padding: .25em 1.25em;
  transform:         translateY(-7.5%);   
}



/* Translations */

.glow-translations {
	background: #f0f0f0;
	padding: 1em;
	font-family: sans-serif;
	font-size: 80%;
}

.glow-translations div { display: inline; }

.glow-languages-label { font-weight: bold; }


/* Join/Submit box */

.glow-intro {	background-color: #e4e4e4; } 

/* Calls to Action */

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-ctas { 
		padding: 20px; 
    display: grid;		
    grid-template-columns: repeat(2, 1fr);
    grid-gap:    25px;
	}
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-ctas { 
	  max-width: 70%;
	  padding: 0;
	}
}

.glow-ctas div {
	padding: 39px 15px 15px;
	background: white;
	position: relative;
	margin-bottom: 15px;
} 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-ctas div { 
		padding: 44px 20px 20px; 
		margin: auto;
		height: 100%;
		width: 100%;
	}
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {
	.glow-ctas div { padding: 49px 25px 25px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-ctas div { padding: 56px 30px 30px; }
}

@media only screen and (max-width: 739px) {
	.glow-ctas div:last-child { margin-bottom: 0; } 
}

.glow-step-bar {
	background: #d99906;
	font-family: sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	position: absolute;
	line-height: 1;
	font-size: 14px;
	top: 0;
	left: 0;
	padding: 10px;
	display: block;
	width: 100%;
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-step-bar { font-size: 16px; }
}

.glow-ctas div h2 { margin-bottom: 0; }

.glow-ctas div small {
	display: block;
	font-size: 12px;
	margin-top: 1em;
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-ctas div small { font-size: 14px; }
}

.glow-ctas div small a {
	color: rgba(0,0,0,.7);
	padding: 0 .25em;
}

.glow-ctas div small a:hover { color: rgba(0,0,0,1); }

.glow-editor-register .glow-button { background: #339966; }

.glow-learn-more .glow-button {
	padding: .75em;
	border-radius: 0;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-learn-more .glow-button { 
		margin: 0 12.5px;
		padding: .75em 1.25em;
	}
}

/* Grid Sections */

.glow-grid { margin: 0 auto 25px; } 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-grid { 
    display: grid;		
    grid-template-columns: repeat(2, 1fr);
    grid-gap:    25px;
	}
}

.glow-grid .glow-section {
	margin: 0 auto 25px; 
	position: relative;
	width: 100%;
	color: white;
	height: 100%;
} 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-grid .glow-section { margin: auto; }
}

.glow-rules 	{ background: #542981; }
.glow-prizes 	{ background: #a0b114; }
.glow-topics 	{ background: #be357b; }
.glow-faq 		{ background: #5f9ce0; }

.glow-grid .glow-section p {
	font-size: 16px;
	margin: 0 0 .75em;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-grid .glow-section p { font-size: 18px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-grid .glow-section p { 
		font-size: 20px;
		width: auto !important;
	}
}

.glow-grid .glow-section .glow-button {
	background: white;
	text-transform: none;
	color: #3b639a;
	font-size: 14px;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-grid .glow-section .glow-button { font-size: 16px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-grid .glow-section .glow-button  { font-size: 18px; }
}

.glow-grid .glow-section .glow-button:hover { background: white !important; }

.glow-grid .glow-rules .glow-button 	{ color: #542981; }
.glow-grid .glow-prizes .glow-button { color: #a0b114; }
.glow-grid .glow-topics .glow-button { color: #be357b; }
.glow-grid .glow-faq .glow-button 		{ color: #5f9ce0; }

/* Events box */

.glow-events {	background-color: #e4e4e4; } 

.glow-events h1 {	margin-bottom: .25em; } 

.glow-events-grid { padding-bottom: 25px; } 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-events-grid { 
    display: grid;		
    grid-template-columns: repeat(3, 1fr);
    grid-gap:    25px;
	}
}

.glow-events-grid div {
	padding: 15px;
	background: white;
	position: relative;
	margin-bottom: 15px;
} 

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
	.glow-events-grid div { 
		padding: 20px; 
		margin: auto;
		height: 100%;
		width: 100%;
	}
}


@media only screen and (min-width: 1000px) and (min-device-width: 480px) {
	.glow-events-grid div { padding: 25px; }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow-events-grid div { padding: 30px; }
}

@media only screen and (max-width: 739px) {
	.glow-events-grid div:last-child { margin-bottom: 0; } 
}

.glow .glow-events-grid h2 { margin-bottom: 0; 	color:#000;}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.glow .glow-events p { 
		font-size: 20px;
		width: 60% !important;
	}
	.glow .glow-events div div p 	{width: auto !important; }
}

.glow-button .glow-more { background: #727272; }