*{	margin: 0;	padding: 0;}

html,body {
  width: 100%;
   margin:0 auto !important;
   padding:0;
   box-sizing: border-box;
   font-family: 'Livvic', sans-serif;
   background: #eee;
}

a{text-decoration: none}
a:hover{text-decoration: none}
a:focus{text-decoration: none;outline-color: #ff7835 }

.textTest { font-size: 24px !important }

#wrapper { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background-color: #fff; overflow: hidden; }

#mainFooter { width: 100%;}

/* color scheme */
.theme-danger {color:#033060 !important; background-color:#ff3333 !important}
.theme-l7 {color:grey !important; background-color:#fff !important}
.theme-l6 {color:#000 !important; background-color:rgba(237, 245, 254, 1) !important}
.theme-l5 {color:#000 !important; background-color:rgba(237, 245, 254, 0.9) !important}
.theme-l4 {color:#000 !important; background-color:#c3dffd !important}
.theme-l3 {color:#000 !important; background-color:#87bffb !important}
.theme-l2 {color:#fff !important; background-color:#4b9ff8 !important}
.theme-l1 {color:#fff !important; background-color:#0f7ff6 !important}
.theme-d1 {color:#fff !important; background-color:#0657ad !important}
.theme-d2 {color:#fff !important; background-color:#064d9a !important}
.theme-d3 {color:#fff !important; background-color:#054386 !important}
.theme-d4 {color:#fff !important; background-color:#043a73 !important}
.theme-d5 {color:#fff !important; background-color:#033060 !important}
.theme-light {color:#000 !important; background-color:#edf5fe !important}
.theme-dark {color:#fff !important; background-color:#033060 !important}
.theme-action {color:#fff !important; background-color:#033060 !important}
.theme-white {color:#fff !important; background-color:#fff !important}
.theme {color:#fff !important; background-color:#0760be !important}

.text-theme {color:#0760be !important}
.border-theme {border-color:#0760be !important}
.hover-theme:hover {color:#fff !important; background-color:#0760be !important}
.hover-text-theme {color:#0760be !important}
.hover-border-theme:hover {border-color:#0760be !important}

/*-- gradient color ---*/
.gradFire100 {
  background-image: linear-gradient(100deg, #f12711, #f5af19); color: #fff
}

.gradLiner {
  background-image: linear-gradient(to right, #0254d5, #0254d5, #0254d5);
}


.gradFire63 {
  background-image: linear-gradient(-63deg, #f12711, #f5af19);
}

.gradBlueT:hover, .gradFireT {
  background-image: linear-gradient(-63deg, #f12711, #f5af19, #f12711);
  transition: all .4s;
}

.gradBlue100 {
  background-image: linear-gradient(100deg, #56ccf2, #2f80ed);
}

.gradBlue63 {
  background-image: linear-gradient(-63deg, #56ccf2, #2f80ed);
}

.gradBlueT{
  background-image: linear-gradient(-63deg, #2f80ed, #56ccf2, #2f80ed);
  transition: all .4s;
}

.gradBlueT1{
  background-image: linear-gradient(-63deg, #0052D4, #6FB1FC, #0052D4);
  transition: all .4s;
}

.gradBlueT2{
  background-image: linear-gradient(-63deg, #0052D4, #6FB1FC);
  transition: all .4s;
}

.gradBlueChange{
  background-image: linear-gradient(-63deg, #0052D4, #6FB1FC);
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

.gradBlueChange:hover{
  background-image: linear-gradient(-63deg, #f5af19, #f12711);
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}


.gradBlueInverseT2{
  background-image: linear-gradient(-63deg, #6FB1FC, #0052D4 );
  transition: all .4s;
}

.gradBlueS100 {
  background-image: linear-gradient(100deg, #3a7bd5, #00d2ff);
}

.gradBlueS63 {
  background-image: linear-gradient(-63deg, #3a7bd5, #00d2ff);
}

.gradGreen100 {
  background-image: linear-gradient(100deg, #348f50, #56b4d3);
}

.gradGreen63 {
  background-image: linear-gradient(-63deg, #348f50, #56b4d3);
}

.gradGreenS100 {
  background-image: linear-gradient(100deg, #56b4d3, #348f50);
}

.gradGreenS63 {
  background-image: linear-gradient(-63deg, #56b4d3, #348f50);
}

.gradGreenLight100 {
  background-image: linear-gradient(100deg, #1D976C, #93F9B9);
}

.gradGreenLight63 {
  background-image: linear-gradient(-63deg, #1D976C, #93F9B9);
}

.gradGreenSo100 {
  background-image: linear-gradient(100deg, #56ab2f, #a8e063);
}

.gradGreenSo63 {
  background-image: linear-gradient(-63deg, #56ab2f, #a8e063);
}

/* text settings */
.textUppercase{ text-transform: uppercase;}
.textCapitalize{ text-transform: capitalize;}
/*--*/

/* section settings */
.sectionPadding{ padding: 20px 40px;}
/*--*/

/* body{ margin: 0 auto} */

.fixTop{display: block;width: 100%;	height: 60px; position: fixed;
	top:0;
	z-index: 10;
  max-width: 1280px;}

#infTop{
	display: block;
	/* background-color: #4e74f9; */
	height: 30px;
	width: 100%;
  max-width: 1280px;

  padding:0 2px;

}

#socialTop{	padding: 3px 4px 4px 4px; float: left;
}

#socialTop a:not(:first-child){margin: 0 2px !important}

#telTop *{ display: inline-block}

#telTop{ padding: 3px 4px 4px 4px; float: right; color: #fff}


@media (max-width: 499px){
	#websiteWhatsAppHide{ display: none;}
}

@media (min-width: 500px){
	#mobileWhatsAppHide{display: none;}
}

.infTopImg{ width: 18px;}

.infoA:not(:last-child) {margin-right: 6px !important}

.infoA:hover span{color: #ff7835;}

.oi {position: fixed; top: 31px; z-index: 1; width: 100%; max-width: 1265px; height: 1.3px; margin: 0 5px; background-color: lightblue; /* background-image: linear-gradient(to right, #6db0fb, #0254d5, #6db0fb); */}

hr{ color: black}

/*==== NAV ====*/
/* #myTopnav{width: 100%; max-width: 1280px;} */

#top-nav{ width: 100%; max-width: 1280px; height: 2em;
  display: flex;
  align-items: center;
  /* border-top: .10em solid #ff7835; */
	/* border-bottom: .10em solid #ff7835; */
	position: fixed;
	top:30px;
	z-index: 1;
	/* background-color: #fff; */
}

#top-nav ul{ width: 100%; /* margin-top: 8px; */ display:flex; justify-content: space-around; padding: 9px 0 0px;}

#companyNameHidden{padding: 6px 6px 0; font-weight:bold; /* color: #4e74f9; */ }

.customHidden{display: none;}
#top-nav ul li{ display: inline-block}
#top-nav ul li a{ width: 100px; font-size: 15px}

/* #top-nav li.active > a, #top-nav li a:hover, #top-nav li ul li a:hover{color: #fc681e; text-decoration: overline;}
 */
#top-nav li.active > a, #top-nav li a:hover, #top-nav li ul li a:hover{color: #fc681e; color: #fff; /* text-decoration: overline; */}

#top-nav li.activeButton > a, #top-nav li a:hover, #top-nav li ul li a:hover{ color: #fc681e; /* text-decoration: overline; */ font-weight: bold; transition: color .3s;}

.themeNavButton{ color: #3894fd; color: #fff; font-weight: bold; transition: color .4s;}

#topBck{ position: relative; top:0; left: 0; margin-top: 0px !important; display: block;margin-top: 40px !important;}

#pageLogo{
  background-image: url("../img/bck/topBckEvolutionN1.jpg");
	background-position: center;
	background-size: cover;
	min-height: 250px;
}

#pageLogo img{ width: 100%; max-width:35%;  padding: 30px}

#countStudents{ width: 190px; height: 190px;
	position: absolute;
	top: 30px;
	right: 40px;
}

#countStudentFrame{ postion:relative; top:0; left:0; width: 100%; height: 100% }

#whiteCircle{ width: 10em; min-height: 10em; background-color: #fff; border-radius: 25em;
position: absolute; top: 25px; left: 35px; z-index: 1}

#studentHatFrame{ position: absolute; top: -17px; left: 48px ; z-index: 2;}

#studentHatFrame img{ width: 90%;}

#textOneC{ font-family: 'Open Sans', sans-serif; position: absolute; top: 38px; left: 28px; font-size: 2.1em; font-weight: 700; z-index: 1; color: #4e74f9}

#textTwoC{font-family: 'Open Sans', sans-serif; position: absolute; top: 72px; left: 16px; font-size: 1.6em; font-weight: 700; z-index: 1; color: #4e74f9}

/*===== mainContainer ==*/

/*======== FourPreInformation ==============*/
#fourPreInformation{ position: relative;
top:0;
left:0;
}

.sectionHeading1 {margin-top: 20px !important; margin-bottom: 55px !important; font-size: 2.25em; color: #3894fd;font-weight: bold;}

.headingSub{font-size: 1.6em; color: #3894fd; font-weight: bold; text-transform: uppercase}

.pTextStyle{font-size: 1.25em; color: #3894fd; /* font-weight: bold */; text-transform: uppercase}

/*========= Whatsapp Float Interation =========*/
#whatsappFloatFrame{
	position: absolute;
	top: 38px;
	right: 30px;
	z-index: 2;
	width: 250px;
}

.whatsappOuterFloatFrame{
	float:right;
	padding-top: 3px ;
	padding-left: 15px;
	box-sizing: border-box;
	border:1px solid grey;
	border-sizing: border-box;
	border-radius: 1em;
	color: #fff;
	width: 260px;
	height: 50px;
	font-weight: bold;
	cursor: pointer;
	font-size: 1.7em;
	border: .12em solid #fff;
}
.whatsappOuterFloatFrame a {color: #fff;}

/*----*/

#fourPreFrame{
	width: 100%;
	padding: 10px 0;
	display:flex;
}

#firstPreInfo, #secondPreInfo, #thirdPreInfo, #fourthPreInfo{ width:90%; display:flex; align-content: center;  justify-content: space-around; margin: 0 auto !important}

#firstPreInfo p, #secondPreInfo p, #thirdPreInfo p, #fourthPreInfo p{line-height: 1.2em; color: #3894fd}

.stylePreInfo{ width: 100%; margin:0 2px !important;}

.stylePreInfo img{ width: 100%;}


.verticalLine{ height: 3.8em; border-left: .15em solid #3894fd; margin-top: 6px!important;}

.verticalLine1{ height: 23em; border-left: .15em dashed #3894fd; margin-top: 95px!important; position: relative; width:50px; margin-left: 40px !important; }

.handShakeDivision{background-color: #fff; border-radius: 2.5em; width: 64px; position: absolute; top: 50%; left: 0%; transform: translate( -50%, -50%); border: 5px solid #fff }

.stylePreInfo div div:nth-child(1){ width: 25%}

.stylePreInfo div div:nth-child(2){ width: 1%; margin-left: 6% !important; margin-right: 4% !important}

.stylePreInfo div div:nth-child(3){width: 60%; padding-left: 10px; font-size: 1.25em}

/*========== Banner Section ======*/

#bannerSection{ width:100%; margin: 6% 0 !important; text-align: center;}

#bannerText {display: flex; justify-content: center; margin: 15px 0 10px 0 !important}

#firstBannerText{max-width: 639px; width: 70%; text-align: left;}

#secondBannerText{width: 40%; text-align: center;}

#bannerFrame{display: flex; justify-content: center; width: 100%; background-color:}

#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  width: 100%;
  max-width: 639px;
  }

.rslides_tabs {
  list-style: none;
  padding: 0;
  font-size: 18px;
  list-style: none;
  max-width: 639px;
  padding: 0 !important;
  text-align: center;
  width: 100%;

}

.rslides_tabs li {
  float: none;
  margin-right: 1px;
}

/*thihs is the general menu for the banner */
.rslides_tabs a {
  width: auto;
  line-height: 20px;
  height: auto;
  background: transparent;

}

.rslides_tabs li:first-child {
  margin-left: 0;
  }

.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
  }

a {
  color: #fff;
  text-decoration: none;
  }


#slider3-pager{width: 40%; padding-left: 0px !important;}

#slider3-pager li{display: flex; width: 100%; margin:5px 0 !important;}

#slider3-pager a {
  display: inline-block;
  padding: 20px 0 !important;
  width: 100%;
  background-color: #d5d5d5;
  background-image: linear-gradient(-63deg, #0052D4, #6FB1FC);
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

#slider3-pager a:hover {background-image: linear-gradient(100deg, #ff7835, #f5af19); color: #fff;}

#slider3-pager a span{padding-left:30px;}

.mobileScreenView{display:none;}

#slider3-pager img { float: left;}

#slider3-pager .rslides_here a { background-image: linear-gradient(100deg, #ff7835, #f5af19); color: #fff}

#slider3-pager .rslides_here .triangle-left{visibility: visible;}

#slider3-pager a { padding: 0; text-align: left;}

.triangle-left {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-right: 22px solid #ff7835;
	border-bottom: 30px solid transparent;
	visibility: hidden;;
}

/*! http://responsiveslides.com v1.55 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

/*--- setting for inner banner -- */
/*=======  hover effect  =============*/
.nd-wrap {overflow: hidden;	text-align: center;	margin: 0 auto; position: relative;}
/* .nd-wrap img { width:100%; max-width: 600px; max-height: 367px;	display: block;} */
.nd-title {	position: relative;	top: -180px;opacity: 0;	margin: 0 0 30px !important; font-weight: bold; -webkit-transition: all 1s ease 0.01s;	transition: all 1s ease 0.01s;}

.nd-title span {
	color: #fff;
	padding: 0 20px 15px;
	border-bottom: 2px solid #fff;
	display: inline-block;
}
.nd-icon {
    color: #000;
    display: inline-block;
    margin: 0 5px !important;
    opacity: 0;
    position: relative;
	cursor: pointer;
	box-sizing: border-box;
	border: 1.5px solid #fff;
	background-color: #fff;
	-webkit-transition-duration: 0.6s;
			transition-duration: 0.6s;
	-webkit-transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
			transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
}

.nd-icon span {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 3px;
	padding: 10px 15px;
	-webkit-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
}

.nd-icon footer.gradBlueChange{ color:#fff !important; background-color:#87bffb !important; -webkit-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
}

.nd-icon:hover footer.gradBlueChange, .nd-icon1:hover footer.gradBlueChange{ background-color: #ff7835 !important; -webkit-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;}

.nd-icon:hover span, .hover_effect .nd-icon span {
	background: #fff;
	-webkit-transform: scale(1.1,1.1);
			transform: scale(1.1,1.1);
}
.nd-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
}
.nd-content_inner {	display: table;	width: 100%; height: 100%;}
.nd-content_inner1 {display: table-cell;width: 100%;height: 100%;vertical-align: middle;}
/* =============== HOVER AREA =============== */

.nd-wrap:hover .nd-icon,
.nd-wrap:hover .nd-content,
.nd-wrap:hover .nd-title {
	opacity: 1;
	top: 0;
}

.nd-wrap .hover_effect .nd-icon, .nd-wrap .hover_effect .nd-content, .nd-wrap .hover_effect .nd-title{ 	opacity: 1;
	top: 0;}

.nd-wrap:hover .nd-title, .nd-wrap .hover_effect .nd-title {
	-webkit-transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
			transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
}
.nd-wrap:hover .nd-content {
	background: rgba(0, 0, 0, 0.5);
}
/* =============== SET DELAY FOR ICONS WHEN HOVER =============== */
.nd-content .nd-icon:nth-of-type(1) {
	-webkit-transition-delay: 0.1s;
			transition-delay: 0.1s;
}
.nd-content .nd-icon:nth-of-type(2) {
	-webkit-transition-delay: 0.15s;
			transition-delay: 0.15s;
}
.nd-content .nd-icon:nth-of-type(3) {
	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
}
.nd-content .nd-icon:nth-of-type(4) {
	-webkit-transition-delay: 0.25s;
			transition-delay: 0.25s;
}
/* =============== STYLE 6 =============== */
.nd-wrap.nd-style-6:hover .nd-title {
	-webkit-transition: all 0.5s ease 0.01s;
			transition: all 0.5s ease 0.01s;
}
.nd-style-6 .nd-icon {
	-webkit-transform: scale(0,0);
			transform: scale(0,0);
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
}
.nd-wrap.nd-style-6:hover .nd-icon {
	-webkit-transform: scale(1,1);
			transform: scale(1,1);
}

/*--  --*/
.smallButtons{ width: 100px; height: 120px; cursor: pointer; position: relative; border-color: #fff; margin: 0 auto !important; }
.smallButtons1{height: 120px; cursor: pointer; position: relative; border-color: #fff; margin: 0 auto !important; }
.smallButtons .imgFrame, .smallButtons1 .imgFrame{ padding-top: 30px !important; margin-left: auto !important; margin-right: auto !important; width: 34px; }

.smallButtons footer, .smallButtons1 footer{position: absolute; bottom: 0; width: 100%; border-top: 1px solid #000;}

.smallButtons footer p, .smallButtons1 footer p{ margin: 0; padding: 8px 0; font-weight: bold;}
.smallButtons footer p.informacao::before{ content: "Informação"}
.smallButtons footer p.inscreva::before{ content: "Inscreva-se"}

.smallButtons img, .smallButtons1 img{transition: transform .6s;}

.smallButtons:hover img, .smallButtons1:hover img{ transform: scale(1.2); transition: transform .6s;}

.smallIcon{height: 150px; margin: 0 auto; margin-bottom: 10px;}

.smallIcon .imgFrame{ margin: 20px auto;}

.imgPadding{ padding:  0 7px 5px; float: left;}

/*-- banner list 3 setting --*/
.customScrool{ overflow: auto; max-height: 360px;}
.l3 .borderColor{ border: 2px solid #3894fd; padding: 0 20px;}
.customStyle1{font-size: 1.6em; padding: 10px 0; background-color: #dfdfdf}
.customStyle3{font-size: 1.2em; padding: 10px 0; color: #fff}
img.imgPadding{ padding:  0 7px 5px; float: left; width: 180px}
.customStyle2{ padding: 0px 10px 3px; text-align: justify;}
/*----*/
#vejaCursos{ width: 100%;padding-right: 12%; margin-top: 2% !important;}

.fixMargin{padding-bottom: 20px;}

.textRight{text-align: right;}

.linkSeeMore img, .linkSeeMore p{display: inline-block}

.testing2{margin: 60px 80px 0 0 !important}
.testing2 img, .testing2 p{display: inline-block}

.destaqueEffect{
font-size: 1.2em;
animation: destAnimation 5s ease-in-out infinite;
webkit-animation:flow 10s easi-in-out infinte;
moz-animation:flow 10s easi-in-out infinte;
background: linear-gradient(-60deg, #990000, #f6fa00 ,#990000, #f6fa00);
background-size: 400%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 0px !important;
}

@-webkit-keyframes destAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes destAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes destAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.multiColor {

  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}

img.multiColor {background-color: #fff}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

/*==== MODAL  ====*/
#myModal{ margin: 0 auto !important}
.modal{ padding-top: 70px; margin: 0 auto!important }

.modal-content{ border-radius: 2px;}

div#OR {
    height: 30px;
    width: 30px;
    border: 1px solid #C2C2C2;
    border-radius: 50%;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    float: right;
    position: absolute;
    right: -16px;
    top: 40%;
    z-index: 1;
    background: #DFDFDF;
}

/*=============================
    Contact code
===============================*/
.w3-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #808080;
    width: 100%;
}

.w3-border { border: 2px solid #ccc !important;}

input[type=checkbox].w3-check, input[type=radio].w3-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px;
}

/* --contactMe --*/
#contactMe p{
	width: 100%;
}

#contactMe p label, #contactMe p input{
	display: inline-block;
}

#contactMe p label{
	width: 19%;
	text-align: right;
	margin-right: 5px;
}

#contactMe p input{
	width: 70%;
}

#whatsFrame p, #whatsFrame #whatsWidth {
	display: inline-block;
}

#whatsFrame p{
	width: 19%;
	text-align: left;
	padding-left: 22px;
}

#whatsWidth {
	width: 72%;
	text-align: left;
}

#whatsWidth{
	margin-left: 0;
}

#whatsWidth input{
	display: inline-block;
	width: 5%;
	margin-left: 10px;
}

#button-send-form {
    padding: 6px 25px;
	width: 90%;
}

#button-send-form:hover { padding: 6px 25px;}

.btn-group{ padding: 20px; font-size: 1.1em; color: grey;}
p#feedback { font-size: 25px; color: #000; text-decoration: dotted;}
/* The Modal (background) for image zoom */
.modal1 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content1 { margin: auto !important; display: block; width: 80%;}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption1 {
    margin: auto !important;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content1, #caption1 {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close1 { position: relative; top: 5px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; transition: 0.3s; z-index: 9;	float: right; font-weight: 700;
    line-height: 1; text-shadow: 0 1px 0 #fff; opacity: 1;}

.close1:hover, .close1:focus { color: #bbb; text-decoration: none; cursor: pointer;}

/*========= div section divider ===========*/

.sectionDivider{width: 90%; height: .3em; background-color: #3894fd; text-align: center; position: relative; margin: 9% auto !important; text-align: center;}

.circleWhite{background-color: #fff; width: 90px; height: 90px; border-radius: 4em}

.sectionDivider img {position: absolute; top: -30px; left: 51.35%}
.sectionDivider .circleWhite{position: absolute; top: -45px; left: 50%}

.hrStyle{  display: block;
  border-width: .5em;
  border-color: red;
}
/* -- div1 --*/
.sectionDivider1{ width: 90%; background-color: ; height: auto; margin: 9% auto 22%!important; text-align: center; position: relative;}

.circleWhite1{background-color: #fff; width: 90px; height: 90px; border-radius: 4em; z-index: 1; position: absolute; left: 48.8%;}

.sectionDivider1 img{ width: 64px; z-index: 2;position: absolute; top: 15px;}

/* test divider better --*/
.sectionDivider2{ width: 90%; height: 30px; margin: 11% auto 9%!important; text-align: center;}

.circleWhite2{background-color: #fff; width: 90px; height: 90px; border-radius: 4em; z-index: 1; margin: -45px auto 0 !important}

.sectionDivider2 img{ width: 64px; z-index: 2; margin-top: -110px !important}

.hrStyle2{ border-width: 5em;
  height: 2px;
  border-color: #3894fd;
  background-color: #3894fd;
  width: 100%;
  z-indez: 3;
}

#t1{width: 100%; background-color: red; display: flex;}
.d1{width: 50%; height: 30px;}
.d1:nth-child(2){background-color: green}
.d1:nth-child(1){background-color: yellow}

.hrStyle{  position: absolute; top: 40px;
  border-width: .1em;
  border-color: #3894fd;
  width: 100%;
  z-indez: 3;
}

/*======= ThreeMains ======*/
#threeMains{width: 100%; margin-bottom: 60px !important}
#threeMainFrame{display: flex; align-items: center; justify-content: space-around;}
.threeContent{ padding: 10px; width: 25%; min-height: 270px; margin: 0 2px !important; position: relative; background-color:;}

.threeHeading{ width: 100%; margin-bottom: 12px !important; color: #838181; font-weight: bold;}

.threePText{font-size: 1.2em; color: #3894fd}

.lista-normal{list-style: inside square; font-size: 1.2em; color: #3894fd;}

.toBottom {width: 100px;}

.toBottom a{ position: absolute; bottom: 0%; right:0%; padding: 10px 15px; color: #838181}

.toBottom a:hover{ color: #ff7835}

/*======= robertaInfo ======*/
#robertaInfo{ width: 100%; margin: ; position: relative; top:0; left: 0; height: 250px; tex-align: center;}

#robertaFrame{width: 100%;}

.blueRectangle{ width: 40%; height:250px; height: 100%; background-color: #6faffd; position: absolute; top:0; left:0; }

#robertaInfo img{width: 100%; width: 250px; position: absolute; top: 0; left: 40%; background-color:#fff ; border-radius: 11em; padding: 2px; border: 6px solid #fff;z-index: 2; transform: translate(-50%, 0%)}

.pWhiteBox{width:50%; height: 340px; background-colo: #fff;position: absolute; top:0; right:0; padding: 5px 30px; z-index: 1; tex-align: right; color: #838181}

.pWhiteBox p{font-size: 1.25em;}
.pWhiteBox p:nth-child(1){text-indent: -2.5em; }
.pWhiteBox p:nth-child(2){text-indent: -1.5em;}
.pWhiteBox p:nth-child(3){text-indent: 0em;}


.clearFix{overflow: auto;}

#member-description{margin-top: 14px !important;}
#member-description h3{font-size: 1.2em; padding: 5px 0;text-decoration: underline; font-weight: bold}
#member-description h4{font-size: 1.05em;padding: 4px 0; }

/*======  Partners / Clients =====*/
#partnersClients{display: flex; margin-bottom: 60px !important; padding-top: 67px; margin-top: -60px !important}

#partnersFrame, #clientsFrame{ width: 50%;}

#clientsFrame{text-align: right !important}

#partnersFrame .pcTitleBlue, #clientsFrame .pcTitleBlue{background-color: #6faffd; width: 60%; ; margin-bottom: 40px !important }

#partnersFrame .pcTitleBlue{text-align: center}

#partnersFrame .pcTitleBlue h3{background-color: #fff; width: 40%; margin-left: 60% !important; border-radius: 1em 0 0 1em; min-width: 120px;border: 2px solid #fff}

#partnersFrame .col-sm-2, #clientsFrame .col-sm-2 { padding: 20px;}

#clientsFrame .pcTitleBlue{ margin-left: 40% !important; margin-right: -30px !important;}

#clientsFrame .pcTitleBlue h3{background-color: #fff; width: 40%; border-radius:0 1em 1em 0; text-align: center; min-width: 120px; border: 2px solid #fff}

.twoLogoFrame{ display: flex; align-items: center; justify-content: space-around}
.twoLogoFrame .col-sm-2{width: 33%; padding: 4px}
.twoLogoFrame .partner-logo{width: 100%;}

/*-- videos section --*/
.verticalLineDashed{width: 90%; margin: 15px auto 50px !important; border: 1px dashed #3894fd}

.videoText{width: 100%; background-color:; text-align: center; margin-top: -10px !important}

#videoSection{width: 100%; padding: 0 20px;}

#videoFrame{width: 90%; display: flex; justify-content: space-between;  margin: 20px auto !important}

.video-container{width: 33%; padding: 0 5px;}

iframe{ width: 100%;  height: 100%; min-height: 220px; border: 4px solid #fff}
#IframeSpecial>iframe{ width: 100%;  min-height: 630px; border: 4px solid #fff}

.smallImg{width: 64px;}

/*--- video settings for banner --*/
.videoBannerStyle{background-color: red; width: 560px; height: 315px; max-width:100%; max-height: 100%; margin: auto}

/*========= Contact ======*/
#contactSection{padding: 60px 40px 30px;}

.customStyle4{ text-align: left; color: #3894fd; color: #fff;}

#contactFrame{display: flex; padding: 20px 0;}

#contactContent{width: 60%; background-color:;}
#name1{width: 100%; padding: 10px 0!important; text-indent: 10px;}

.btn{ width: 100%;}
.pContact {font-size: 1.1em; font-weight: bold; color: #fff; padding: 10px 0;}
.pContact a {font-weight: bold; color: #fff;}

.pContact:hover, .pContact:hover a {color: #ff7835}

.pContact img{margin-left: 10px !important;}

.custom-padding{margin-left: 10px !important;}
.customPadding{padding:10px 0;}

#contactRightInfo{width:  40%; background-color: ; margin-top: -20px !important; padding-left: 40px; border-left: 1px dashed #3894fd; margin-left: 20px !important;}
#message1 {margin-top: 10px !important;}
.btn {margin-top: 20px !important}
.btn-default {}
.btn-default:hover{background-color: #ff7835}


/*===== Footer =====*/
#mainFooter {background-color: #999}
#mainFooter div{ width: 100%; padding: 20px}
.footerBlocks{ margin: 20px 0; padding: 0 20px; color: #fff}
.footerBlocks:nth-of-type(1) {-webkit-flex-grow: 1}
.footerBlocks:nth-of-type(2) {-webkit-flex-grow: 2}
.footerBlocks:nth-of-type(3) {-webkit-flex-grow: 3}

.footerBlocks:nth-of-type(1) {flex-grow: 1}
.footerBlocks:nth-of-type(2) {flex-grow: 2}
.footerBlocks:nth-of-type(3) {flex-grow: 3}

.footerBlocks ~ .footerBlocks {border-left: 2px solid #fff;}

.footerBlocks ul{list-style: none}

.centerThing {text-align: center;}

.pContactFooter {font-size: 1em; font-weight: bold; color: #fff; padding: 8px 0}

/* .pContactFooter:hover, .pContactFooter:hover a {color: #ff7835} */

.custom-padding:hover, .custom-padding:hover a {color: #ff7835}

.copyrights { padding: 3px; background-color: #696969}
.copyrights h4 {color: #fff; font-size: .9em; text-transform: uppercase}
.copyrights img{ vertical-align: text-bottom}

.changeColorHover:hover {color: #ff7835 }

.pContactFooter:hover {color: #ff7835}
.pContactFooter:hover a {color: #ff7835}

/*====== self promote =========*/
#selfPromote{ width: 100%; text-align: right; background-color: #212121; padding: 10px; font-size: .8em;}
#selfPromote a{}
/*----*/

.hiddenContent{display:none;}

/*=== Animation on scrool settings ==*/
.slideanim3, .slideanim31{visibility: hidden;}
.slide2 {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;s
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

/*-- top animation --*/
@-webkit-keyframes top{from{top:-10px;opacity:0} to{top:0;opacity:1}}
@keyframes top{from{top:-10px;opacity:0} to{top:0;opacity:1}}
.anime-top .stylePreInfo{
    opacity:0;
    animation: top .5s linear forwards;
    -webkit-animation: top .5s linear forwards;
	visibility: visible;
}

.anime-top .stylePreInfo:nth-child(1){
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
}

.anime-top .stylePreInfo:nth-child(2){
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.anime-top .stylePreInfo:nth-child(3){
    animation-delay: .7s;
    -webkit-animation-delay: .7s;
}

.anime-top .stylePreInfo:nth-child(4){
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
}

/*-- anime-top1 --*/
.anime-top1 div{
    opacity:0;
    animation: top .5s linear forwards;
    -webkit-animation: top .5s linear forwards;
}

.anime-top1 div:nth-child(1){
    animation-delay: .7s;
    -webkit-animation-delay: .7s;
}

.anime-top1 div:nth-child(2){
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
}

.anime-top1 div:nth-child(3){
    animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
}

/*-- anime-top2 --*/
.anime-top2 div{
    opacity:0;
    animation: top 1.3s linear forwards;
    -webkit-animation: top 1.3s linear forwards;
}

.anime-top2 div:nth-child(1){
    animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
}

.anime-top2 div:nth-child(2){
    animation-delay: 1.6s;
    -webkit-animation-delay: 1.6s;
}

.anime-top2 div:nth-child(3){
    animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
}

/* Nav collapse setting test 1 --*/

/* Add a black background color to the top navigation */
.topnav { overflow: hidden;}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  background-color: ;
  font-size: 1.2em;
  font-weight: bold;
  /* color: darkblue; */
}

a:focus, a:hover {color: #fff}
/* Add a dark background on topnav links and the dropdown button on hover */

/* .topnav.responsive #top-nav ul li a:hover {
} */

/* .topnav.responsive #top-nav ul li:hover {

} */


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */


/*====== sobre page ====*/
#topBckSobre{ position: relative; top:0; left: 0; margin-top: 45px !important}

#pageLogoSobre{
	background-image: url("../img/bck/topBckEvolution1.jpg");
	background-position: center;
	background-size: cover;
	min-height: 250px;
}

#pageLogoSobre img{ width: 100%; max-width:35%;  padding: 30px}

#sobreInfoFrame1, #sobreInfoFrame2{
	width: 100%;
	padding: 10px 0;
	display:flex;
}

.styleSobreInfo {width: 80%; margin:0 2px !important; padding: 20px 40px;}

.threeHeadingSobre { width: 100%; margin-bottom: 12px !important; color: #838181; font-weight: bold; border-bottom: 1px solid #ccc}

.threePTextSobre {font-size: 1.2em; color: #3894fd; text-align: justify;}

.sectionHeadingSobre1, .sectionHeadingSobre2  {margin-top: 20px !important; margin-bottom: 25px !important; font-size: 2.25em; font-weight: bold; color: #3894fd}

/*---- meet the team --*/

.whatsSobre {padding: 20px 20px 0 20px}

#meetTeam{width: 100%; margin-top: 40px; margin-bottom: 60px !important;}

.meetTeamOuter{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; margin-top: 60px; width: 90%; margin-left: auto; margin-right: auto;}

.meetTeamHeading { font-size: 1.5em; text-decoration: underline; color: #3894fd}
.meetTeamPText { color: #3894fd}

.meetTeamContent {width: 200px; height: 270px; margin: 30px !important; position: relative; text-align: center; text-overflow: ellipsis; overflow: hidden;}

.roundedBorder {border: 4px solid #3894fd; border-radius: 100%}

/*======== servicos page =======*/

#servicosInfoFrame1, #servicosInfoFrame2, #servicosInfoFrame3, #servicosInfoFrame4{
	width: 100%;
	padding: 10px 0;
	display:flex;
}

.styleServicoInfo{width: 90%; margin:0 2px !important; padding: 20px 40px;}

.threeHeadingServico { width: 100%; margin-bottom: 12px !important; color: #838181; font-weight: bold; border-bottom: 1px solid #ccc}

.threePTextServico {font-size: 1.2em; color: #3894fd; text-align: justify;}

.lista-servico{list-style: inside square; font-size: 1.1em; color: #3894fd;}

/*====== Videos pg============*/
#videosInfoFrame1 {width: 100%; padding: 10px 0; display:flex; flex-wrap: wrap; justify-content: space-between}

.styleVideosInfo{width: auto; margin:0 2px !important; padding: 20px 20px;}

.styleVideosInfo iframe{min-width: 320px; height: auto; min-height: 180px}

.threeHeadingVideos {font-size: 1.2em; color: #3894fd}

/*===== Agenda pg =============*/
#agendaInfoFrame1 {width: 100%; padding: 10px 0; display:flex; flex-wrap: wrap; justify-content: space-between}

.styleAgendaInfo{width: auto; margin: 0 4px 40px!important; padding: 0; background-color: #f4f4f4;}

.card-top1{ width: 100%; height: auto; padding: 0px 10px;}

.threeHeadingAgenda {font-size: 1.3em; text-align: center font-weight: bold; margin: 0px; padding: 10px 0px 5px; border-bottom: 1.5px solid #fff; color: #fff}

.datesAgenda {text-align: center; font-size: 1.1em; padding: 4px 2px 6px; color: #fff}

.styleAgendaContent { padding: 10px;}
.marginTop {margin-top: 15px;}
.agendaPStyle { max-width: 220px; color: #3894fd; margin-right: auto; margin-left: auto;}
.styleAgendaLocation {padding: 5px 10px; }
.styleAgendaLocation a{ display: block; padding: 5px 0; color: #3894fd}
.styleAgendaFooter { width: 200px; margin: 8px auto 12px; padding: 10px;text-align: center; color: #fff; }

.disable, a.disabled, section.disabled{
	cursor: not-allowed !important;
}

.card-shadow{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: .2s all}

.card-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); transition: .5s all}


/*======== Galeria pg ===========*/
#galeriaInfoFrame1, #galeriaInfoFrame2, #galeriaInfoFrame3 {width: 100%; padding: 10px 0; margin-bottom: 25px;}

.styleGaleriaInfo{ width: auto; margin: 0 4px!important; padding: 0;}

.flexIt {display : flex; flex-wrap: wrap;}

.galeriaTitle{font-size: 1.2em; color: #3894fd}

.galeriaPics {max-height: 160px; margin: 20px 20px;}

.galeriaPics img {max-height: 160px;}


/*===============
	cursos pg
=================*/
#cursosFrame{padding: 0 20px 80px;}

#cursosFrame div div{ padding-top: 20px }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
}

#cursosFrame footer{ margin-top: 20px; vertical-align: middle; cursor: pointer;}

#cursosFrame footer p{ color: #fff; font-size: 1.4em; padding: 10px 10px}

.w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {
    padding: 6px 8px;
    display: table-cell;
    text-align: left;
	font-size: 1.3em;
	color: #3894fd;
}

.w3-table td a {color: #3894fd}

.w3-table + .w3-table {
    margin-top: 25px;
}

.w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
    /*padding-left: 16px;*/
}

.w3-striped tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

.w3-bordered tr, .w3-table-all tr {
    border-bottom: 1px solid #ddd;
}


.custom-table-centered td {
    text-align: center;
}

.custom-subtable-title, .custom-subtable-title a {
    font-weight: 600;
    color: #000;
}

.custom-padding-top{
    padding-top: 5px;
}

.custom-margin-top{
    margin-top: 10px;
}

.custom-full-width{
    width: 100%;
}

#infoIcon{
	border-radius: 16px;
	-webkit-animation-name: textAttention1;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 4;

	animation-name: textAttention1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

.specialAttention{
	font-weight: bold;
	color: red !important;
	-webkit-animation-name: textAttention;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 4;

	animation-name: textAttention;
	animation-duration: 4s;
	animation-iteration-count: 4;
}

@-webkit-keyframes textAttention{
	0%{transform: scale(1);}
	80%{transform: scale(1.02);}
	100%{transform: scale(1.);}
}

@keyframes textAttention{
	0%{transform: scale(1);}
	80%{transform: scale(1.02);}
	100%{transform: scale(1.);}
}


@-webkit-keyframes textAttention1{
	0%{background-color: transparent;}
	80%{background-color: #ff9900;}
	100%{background-color: transparent;}
}

@keyframes textAttention1{
	0%{background-color: transparent;}
	80%{background-color: #ff9900;}
	100%{background-color: transparent;}
}


.document_descriptionSpecial { font-size: .85em}


.course3{

}


.course3p{
	height: 220px;

}

.documents_download_dd3 {
	text-align: left;
	width: 100%;
	height: 85px;
	display: inline-block
}


.course3Bck {
	margin: 20px 0;
	background-color: lightgrey;
	background-color: #eefcff;
	
}



/*================================
          mobile settings
When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon)
====================================*/
@media screen and (max-width: 600px) {

#socialTop a:not(:first-child){margin: 0 4px !important}

.sectionPadding{ padding: 20px 20px;}
.headingSub{font-size: 1.5em}
.topnav nav ul li a{display: none;}
.topnav a.icon {float: right; display: block; }

/* Add a white background on topnav links and the dropdown button */
.topnav nav ul li a{ /* background-color: #fff; */ color: #000; color: #fff;}
.topnav nav ul li a:hover{ /* background-color: #fff; */ color: #bc3c2f; color: #fff;}

.customHidden{display: inline-block}

#pageLogo {text-align: center}
#pageLogo img{ width: 100%; min-width: 260px; max-width: 100%;  padding: 15px}

#countStudents{background-color: red; height: auto; top: 120px; left: 0; width: 100%;}

#countStudentFrame{ position: absolute; width:65%; height: 65%; margin: 0 auto !important; top: 50%; left: 60%; transform: translate( -50%, -50%)}
#whiteCircle{width: 8em; min-height: 8em; top:13px; left: 33px; border: 1px solid #000}
#studentHatFrame img{width: 65%}
#textOneC{font-size: 1.9em; top: 35px; left:15px}
#textTwoC{font-size: 1.4em; top: 65px; left: 12px}
.mobileHeading1{display: block; font-size: 1.5em; margin-top: 25px !important; margin-bottom: 25px !important;}
#whatsappFloatFrame{position: static; width: 100%; display: block; margin-bottom: 25px !important}
.whatsappOuterFloatFrame{ float: none; text-align: center; width: 100%; font-size: 1.5em; padding-top: 7px;}
.whatsappOuterFloatFrame img{margin-left: 10px !important;}
#fourPreFrame{display: block;}

.stylePreInfo:not(:first-child){margin-top: 25px !important}

.stylePreInfo img{ width: 70%; min-width: 48px}
#bannerText{display: block;}
#firstBannerText{width: 100%; padding: 0 20px;}
.customHiddenBannerText{display: none;}

.stylePreInfo div div:nth-child(1){ width: 25%; margin-top: 5px !important}

.stylePreInfo div div:nth-child(3){width: 90%; padding-left: 10px; padding-top: 10px; font-size: 1.25em}

#bannerFrame{display: block; padding: 0 10px;}
#slider3-pager{width: 100%; margin-top: -30px !important}

.triangle-left {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 20px solid #ff7835;
   }

.customScrool{ overflow: auto; max-height: 560px;}
.fixMargin{padding-bottom: 20px;}

.bigScreen{display: none !important;}
.mobileScreenView { display: block}
#slider3-pager li{ display: inline-block; width: 18%;}
#slider3-pager li a span{ text-align: center; padding: 0;}
#vejaCursos{ margin-top: 20% !important}
.sectionDivider2{margin: 25% 0!important}
#threeMainFrame{ display: block;}
.threeContent{width: 100%; min-height: auto; margin: 0 !important; padding: 0 15px;}
.threeContent ~ .threeContent{margin-top: 60px !important;}
.toBottom{ text-align: right; width: 100%}
.toBottom a{ position: static}

.nd-icon{border: 2px solid #3894fd}
.nd-title {font-size: 1.5em}

.smallButtons{ width: 50px; height: 50px}
.smallButtons .imgFrame {padding: 9px 0 !important}
.smallButtons footer{display: none}

/*-- robertaInfo */
#robertaInfo{height: auto;}
.blueRectangle{ width: 100%; height:150px;}
#robertaInfo img{width: 100%; width: 150px; position: absolute; top: 0; left: 50%; border: 2px solid #fff;}
.pWhiteBox{width: 100%; height: auto; background-colo: #fff; position: static; padding: 175px 30px 5px;}
.pWhiteBox p{font-size: 1em; font-style: italic}
.pWhiteBox p:nth-child(1){text-indent: 0; }
.pWhiteBox p:nth-child(2){text-indent: 0;}
.pWhiteBox p:nth-child(3){text-indent: 0;}
.pWhiteBox p:nth-child(4){text-indent: 0;}

#member-description h3{font-size: 1.15em; padding: 5px 0;text-decoration: underline; font-weight: bold}
#member-description h4{font-size: 1.05em;padding: 4px 0; }
/*-- partnersClients */
#partnersClients{display: block; overflow: hidden; margin-top: -60px !important}
#partnersFrame, #clientsFrame{ width: 100%;}
#clientsFrame{margin-top: 60px !important;}
.verticalLine1{display: none;}
#clientsFrame .pcTitleBlue{ margin-left: 30% !important; margin-right: -30px !important; width: 100%}
#clientsFrame .pcTitleBlue h3{background-color: #fff; width: 30%;}
#partnersFrame .col-sm-2, #clientsFrame .col-sm-2 { padding: 15px;}
/*-- videoSection */
#videoFrame{width: 100%; margin: 20px auto !important; display: block}
.video-container{width: 100%}
/*-- contactSection */
#contactSection{padding: 80px 20px 30px; margin-top: -30px !important}
#contactSection h2{font-size: 1.4em;}
#contactFrame {display: block;}
#contactContent {width: 100%;}

.btn {width: 100%;}
#contactRightInfo { width: 100%; border: 0; padding: 0; margin: 100px 0 30px!important;}


/*--- footer Mobile settings---*/
#mainFooter div.flexIt{display: block; backround-color: yellow;}
.footerBlocks ~ .footerBlocks {border-top: 2px solid #fff; border-left: none; padding: 10px 10px 20px;}

/*-- sectionDivider2 */
.sectionDivider2{ width: 90%;  height: 30px; margin: 20% auto 20%!important;}

.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
 position: absolute;
 right: 10px;
 top: 1px;
 }

.topnav a.icon{position: absolute; top: 1px; right: 10px;}

#top-nav{display: block; /* background-color: #fff; */}

/* #top-nav ul{margin-top: 9px !important} */

.topnav.responsive #top-nav ul{ display: block; background-image: linear-gradient( 85deg, #0052D4, #6FB1FC, #0052D4);}

.topnav.responsive #top-nav ul li{ display: block; width: 100%;}

.topnav.responsive #top-nav ul li:not(:first-child){ border-top: 1px solid blue}

.topnav.responsive #top-nav ul li:nth-child(10){border-bottom: 1px solid blue}

.topnav.responsive #top-nav ul li a {
  float: none;
  display: block;
  text-align: left;
  width: 100%;
  padding: 5px 10px;
  text-decoration: none;
  }

/*--- sobre mobile settings ---*/
  #pageLogoSobre img{ max-width: 100%;}
  #sobreInfoFrame1, #sobreInfoFrame2 {
	width: 100%;
	padding: 10px;
	display:block;
}

.styleSobreInfo {width: 80%; margin:0 2px !important; padding: 20px 10px;}
.sectionHeadingSobre1 {text-align: center;}
.threePTextSobre {text-align: left;}
.meetTeamOuter ~ .meetTeamOuter {margin-top: 0px;}
.meetTeamContent {width: auto; height: auto;}
.meetTeamContent img{ width: 200px;}
.meetTeamHeading {font-size: 1.8em}
.meetTeamPText {font-size: 1.3em}
.styleSobreInfo {width: 100%;}

/*--- Servicos Mobile settings ---*/
  #servicosInfoFrame1, #servicosInfoFrame2, #servicosInfoFrame3, #servicosInfoFrame4{
	width: 100%;
	padding: 10px;
	display:block;
}

.styleServicoInfo h3{font-size: 17px;}

.sectionHeadingSobre1 {text-align: center;}

.styleServicoInfo{width: 80%; margin:0 4px !important; padding: 20px 10px;}

.meetTeamOuter ~ .meetTeamOuter {margin-top: 0px;}

.meetTeamContent {width: auto; height: auto;}

.meetTeamContent img{ width: 200px;}
.meetTeamHeading {font-size: 1.8em}
.meetTeamPText {font-size: 1.3em}
.styleServicoInfo {width: 100%;}

/*-- Videos mobile pg---*/
.styleVideosInfo iframe{min-width: auto;}

/*-- Agenda mobile pg ---*/
.agendaPStyle{ max-width: 100%;}

/*----- Gallery mobile settings pg ---*/
  .galeriaPics {max-height: none;}
  .galeriaPics img { max-height: none;}
}

/*============ testing area -----*/
 #giveMeColor{color: red; background-color: ; margin-bottom: 20px;}
.nd-icon1{background-color: green; margin-bottom: 20px;}
/*--------*/
/* hunting align right problem! */

/* .topnav.responsive{overflow: hidden} */

/* #infTop, #socialTop, #upTop, #myTopnav, #topBck, #fourPreInformation, #bannerSection, .sectionDivider2{display: none;}
} */

/*====== Popup banner */
/*we need to style the popup with CSS so it is placed as a common popup does*/
    #popup {
            display:none;
            position:absolute;       
            z-index: 9999;
			width:100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			text-align: center;
    }
	
	#bannerImage{
		position: relative;
		top: 15%;	
		width: 100%;
	}
	
	#popupInner{
		margin: 5% auto;
		width:55%;
		background: ;
	}
	
	#close{
		/* float: right; */
		width: 57px;
		margin: 5px 0 5px 5px;
		padding: 5px;
		text-align: center;
		cursor: pointer;
		border-radius: 50%;
		border: 2px dashed #ddd;
		background: ;
		color: #fff;
		font-weight: bold;
		font-size: 32px;
	}
	
	#bannerPopupText, #preVendaTop{
		background: rgba(6,52,87,1);
		border-sizing: border-box; 
		border: 2px solid #fff;
		color: #fff;
		font-size: 24px;
		padding: 5px;
		margin: 5px 0;
	}
	#preVendaWhatsImage{
		
		margin-top: 10px;
	}
	
	#preVendaWhatsImage:hover{
		
		margin-top: 8px;
		transform: scale(1.1) 
	}	
/*=====================*/