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

/* A formatação abaixo é aplicada somente aos conteúdos da página Home (seção main)*/

/* --- Formatação para telas de todos os tamanhos --- */
    .active-inst{
      color: #fff;
      background: rgb(247,12,91);
      transition: .7s;
    }

    #container{
      grid-template-rows: 130px auto auto; 
    }
		
	header{
		grid-row: 1/2;
	}

	main{
		grid-row: 2/3;
	}

	footer{
		grid-row: 3/4;
	}

	section{
		padding: 60px 137px 20px;
		transition: .5s;
	}

	main{
		ibackground: pink;
		grid-row-gap: 10px; 
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		color: rgb(145,145,145);
	}

	.sec1{
		ibackground: blue;
		grid-column-gap: 30px; 
		grid-template-columns: auto 228px;
		grid-template-rows: auto auto;
		text-align: justify;
	}

	.sec1 h1{
		grid-row: 1/2;
		font-family: 'rbt-regular';
		font-size: 2.8em;
	}

	.sec1 p{
		grid-row: 2/3;
		font-family: 'rbt-light';
		font-size: 1.8em;
	}

	.sec1 img{
		grid-row: 1/3;
	}

	.sec2 p{
		font-family: 'rbt-light';
		font-size: 2.1em;
		text-align: center;
		line-height: 30px;
	}

	.sec2 p:nth-child(2){
		padding: 50px 0px;
	}

	.sec2 span{
		font-family: 'rbt-regular';
		font-size: 1.8em;
	}

	.sec2 p:nth-child(1) span{
		color: rgb(41,171,226);
	}

	.sec2 p:nth-child(2) span{
		color: rgb(140,198,63);
	}

	.sec2 p:nth-child(3) span{
		color: rgb(251,176,59);
	}

	.sec3{
		padding-top: 130px;
		ibackground: blue;
		grid-column-gap: 60px; 
		grid-row-gap: 80px; 
		grid-template-columns: auto auto auto;
		grid-template-rows: auto auto;
		text-align: center;
	}

	.sec3 h1{
		grid-column: 1/4;
		font-family: 'rbt-light';
		background: rgb(39,135,212);
		padding: 13px 40px;
		border-radius: 5px;
		font-size: 1.8em;
		color: rgb(255,255,255);
		text-align: center;
	}

	.sec3 h2{
	 	display: block;
	 	padding: 30px 0 15px;
	}

	.sec3 div h2 span:first-of-type{
		font-family: 'rbt-thin';
		font-size: 1.8em;
		color: rgb(39,185,212);
	}

	.sec3 div h2 span:last-of-type{
		font-family: 'rbt-regular';
		font-size: 2em;
		color: rgb(39,155,212);
	}

	.sec3 div p{
		font-family: 'rbt-light';
		font-size: 1.8em;
	}

/* --- Formatação para telas de tamanhos especificados nos comentários abaixo --- */

	@media (max-width: 1000px){

		section{
			padding: 60px 40px 20px;
			transition: .5s;
		}

	}

	@media (max-width: 790px){

	    #container{
	      grid-template-rows: auto auto auto; 
	    }

		section{
			padding: 20px 40px 20px;
			transition: .5s;
		}		
		
	}

	@media (max-width: 690px){

		.sec1{
			ibackground: blue;
			grid-column-gap: 0px; 
			grid-row-gap: 20px; 
			grid-template-columns: auto 200px auto;
			grid-template-rows: auto auto auto;
			text-align: center;
		}

		.sec1 h1{
			grid-row: 2/3;
			grid-column: 1/4;
		}

		.sec1 p{
			grid-row: 3/4;
			grid-column: 1/4;
		}

		.sec1 img{
			grid-row: 1/2;
			grid-column: 2/3;
		}

		.sec3{
			padding-top:80px;
			ibackground: blue;
			grid-column-gap: 0px; 
			grid-row-gap: 60px; 
			grid-template-columns: auto;
			grid-template-rows: auto auto auto auto;
			text-align: center;
		}

		.sec3 h1{
			grid-column: 1/2;
		}

	}


	@media (max-width: 490px){

		section{
			padding: 20px 20px 20px;
			transition: .5s;
		}

	}