html, body {margin:0; padding: 0; color:#101A37}

html {width: 100%;}

.hid{height: 0; padding: 0; margin: 0 auto; transition: height 0.5s; overflow: hidden; border: none}
	
body {background-color:#eee; font-size: 20px; font-family: 'Ubuntu', sans-serif; line-height: 1.8;  width: 100%}
#main {width: 90%; margin: 0 auto 100px auto; overflow: hidden; color: #344973;}
h1 {font-family: 'Playfair Display', serif ; }
#main h1 {color:#344973}
#footer a, #top {color: #fff}

 #logo2 { position: absolute; z-index: 99; width: 100%;}
#logo2 img {max-width: 300px;  display: block; margin: 0 auto;}


#header {width: 100%; height: 44px; background-color: #052059}
#footer {color: #fff; text-align: center; padding-top: 20px; width: 100%; height: 100px; background-color: #101A37}
#call2 {
    background-color: #FF3D31;
    color: #fff;
    cursor: pointer;
    bottom: 20%;
    padding: 20px 40px;
	width: 260px;
	margin: 50px auto;
}
a {text-decoration: none}


#contact {
    width: 300px;
    margin: 50px auto;}
#contact input, #contact textarea {font-weight: 900; padding: 5px; margin: 3px auto; width: calc(100% - 20px);
font-size: 18px;
    font-family: 'roboto', sans-serif;}
	
	
.btn {
	background-color: #FF3D31;
    color: #fff;
    cursor: pointer;
    border: 2px solid #fff;
    padding: 5px;
    width: 80%;
    margin: 25px auto;
    text-align: center;
    font-size: 18px;
}
.btnW {
    color: #FF3D31;
    cursor: pointer;
    border: 2px solid #FF3D31;
    padding: 5px;
    width: 200px;
    margin: 25px auto;
    text-align: center;
    font-size: 18px;
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 7.5px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-12px, 6px);
    transform: rotate(-45deg) translate(-12px, 3px);
}

.change .bar2 {opacity: 0; back}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-12px, -8px);
    transform: rotate(45deg) translate(-12px, -3px);
}
.burger-box, .burger-box2 {position: absolute; top: 30px; right: 50px; cursor: pointer}
.burger-inner {z-index:100}
.burger-box {top: 10px; right: 10px}
.burger-box.hidMenu, .burger-box2.hidMenu {opacity: 0}
.burger-box2 {top: 2px; right: 10px}


.w70  {margin: 0 auto; position: relative;}




#logoInner div {font-weight: 900; color: #344973; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; line-height: 1.2; text-align: center}


#menu2 #logoInner img {display: block; margin: 0 auto}

#menu {color: #1F41A2; 
	
	height: 500px;
	transition: height 0.5s;
	position: absolute;
	width: 100%;
	overflow: hidden; z-index: 100;}
	
#menu2{background-color: #fff; height: 100%; line-height: 2}
#menu.hid{height: 0; padding: 0; margin: 0 auto; transition: height 0.5s; overflow: hidden; border: none}

#menuFill {position:absolute; right:0; width: 100%;}
#menu ul { list-style-type: none; width: 95%;     max-width: 400px;
    margin: 20px auto;
    display: block;
	padding: 0}
#menu a {color: #1F41A2; }
#menu li {border-bottom: 1px solid #96A1C2; padding: 5px 20px; cursor: pointer}

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

	
	#video1 {width: 95%}
	.fItem{width: 100%; margin: 80px auto }
	#main {width: 100%}
	.w70  {width: 100%}
	#menu2{ font-size: 30px}
	
	
	#top { height: 200px}
	#top h1.vis {font-size: 13vw; margin: 50px auto;}
	
	#logoInner {
    width: 100%;
    margin: 10px auto;}
	.topImg {width: 200%; right: 0}
	#logotxt1 {font-size: 28px ; }
	#logotxt2{    font-size: 18px;}
	
	
}

@media screen and (min-width: 1200px) {
	#video1{    width: calc(100% - 20px)}
	.fItem {width: calc(50% - 2px); margin: 50px auto}
	#main {width: 90%;}
	.w70  {width: 70%; min-width: 500px}
	#menu2{ font-size: 20px}
	
	#top { height: 300px}
	#top h1.vis {font-size: 10vw; margin: 50px auto;}
	#logoInner {width: 500px;
    margin: 50px auto;}
	.topImg {width: 100%; left:0}
	#logotxt1 {font-size: 40px ; }
	#logotxt2{  font-size: 24px;}
	
}