@charset "utf-8";

html {
   background: white;
   opacity: 0;
   overflow-x: hidden;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	margin:0;
   padding:0;   
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}


#topNav{
position: fixed;
top: 0;
left:0;
height:55px;
width: 100%;
background: rgba(0,0,0,0.9);
z-index: 10;
color: white;
}

#ouinoTitle{
position: absolute;
top: 15px;
left: 30px;
height: 25px; 
width:auto;
cursor: pointer;
}

.navItems{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
line-height: 55px;
position: relative;
float: right;
margin: 0 20px 0 0;
color: white;
cursor: pointer;
}


.subMenuOptions{
font-family: 'Open Sans Condensed', sans-serif;
position: relative;
margin: 10px;
float: left;
cursor: pointer;
font-size: 18px;
color: white;
min-width: 60px;
}

.navItems a, .subMenuOptions a{
color: white;
text-decoration:none;
}

.navItems a b, .subMenuOptions a b{
color: #EBB82F;
}

#mobileMenu, #otherLangCont{
position: absolute;
width:160px;
height: auto;
right:0;
top: 55px;
line-height: 16px;
background: rgba(0,0,0,0.9);
padding: 5px 10px 10px 10px;
font-size:14px;
display: none;
}

#otherLangCont{
width:auto;
}

#mobileMenuLogo{
position: absolute;
right:15px;
cursor: pointer;
top: 7px;
height:40px; 
width:40px;
display: none;
}

@media screen and (max-width:600px) {#nav6{display: none;} #ouinoTitle{left: 10px;}#nav4{margin-right: 20px !important;} #alsoAvail{margin-right: 10px !important;} }
@media screen and (max-width:355px) {#mobileMenuLogo{display: block;} .navItems{display: none;}}


.floatImg{float: right; max-width: 500px;}
.floatImg3{float: right; max-width: 400px; padding-top:0;  margin-top:-20px; margin-left: 10px;}
.floatImg2{float: right; max-width: 300px; padding-top: 0; margin-top:-20px;}
.lefter{float: left; margin-left: 0px; margin-right: 25px;}

#topLogo{
position: absolute;
width:453px;
height:42px;
top: 14px;
left: 14px;
}

@media screen and (max-width:500px) {
#topLogo{
width:300px;
height:28px;
top: 20px;
}	
}

#topTitle{
color: black;
}

h1, h2, h3, h4, h5{
font-family: 'Fjalla One', sans-serif;
font-weight:normal;
}

h1{font-size: 40px;}

h2{font-size: 37px; margin-top: 55px; margin-bottom: 35px;}

h3{
font-size: 31px; 
margin-bottom: 10px;
margin-top: 40px;
}

h4{
font-size: 22px;
text-align: center;
}

h5{
font-size: 22px;
margin-bottom: -6px;
}


hr {
margin: 30px auto;
}

#mainCont{
position: relative;
width: 100%;
max-width: 1300px;
margin: 80px auto 80px auto;
}


main{
padding: 30px 3% 90px 3%;
margin: 0;
width: 68%;
position: relative;
float: left;
}



aside{
padding: 30px 1% 10px 1%;
margin: 0;
width: 24%;
float: right;
position: relative;
}

.ext article{
position: absolute;
width: 25px; height: 25px;
display: block;
opacity: 0.15;
top: 0; right:20px; bottom: 0; left: auto; margin: auto 0; background-image: url(https://www.ouinolanguages.com/img/warn.svg);	
}

.cust article{top: 5px; right:5px; bottom: auto; left: auto; 	}

.ling, .source{
position: absolute;
left: auto; right: 10px;
top: 10px;
width: 30px; height: 30px;
display: block;
opacity: 0.5;
cursor: pointer;	
}

.source{top: auto; bottom: 10px; background-image: url(https://www.ouinolanguages.com/img/url.svg);}
.ling{top: 10px; background-image: url(https://www.ouinolanguages.com/img/ling.svg);}

.ling:hover, .source:hover{opacity: 1;}


 .blogBtn, .langBtn, .footBtn{
text-align: center;
position: relative;
border-radius: 3px;
font-size: 19px;
text-decoration:none;
font-weight: bold;
transition: 0.3s;
float: left;
width: 90%;
background-color: #1e73be;
color: white;
padding: 20px 5% 20px 5%; 
}
.blogBtn{margin-bottom: 80px; margin-top: 20px;}
.blogBtn:hover{background-color: #134d8e;  color: white !important;}

.langBtn{margin-bottom: 5px; background-color: white;  color: black !important; overflow:hidden; padding: 20px 8% 20px 2%; box-shadow: 0 0 2px black; opacity: 1;}
.langBtn img{position: absolute; left: auto; right: 0; top: 0; height: 100%; width: auto;}


.langBtn:hover{background-color: #dce0e0; box-shadow: 0 0 3px 1px rgba(0,0,0,0.6);}

.footBtn{margin-bottom: 5px; opacity: 1;}

.foot1{background: #FBBC05; color: black !important; margin-top: 36px;}
.foot2{background: #c70000; color: white !important;}
.foot3{background: #395691; color: white !important;}

.foot1:hover{background: #fba105;}
.foot2:hover{background: #FF0000;}
.foot3:hover{background: #4267B2;}

#lipsum, #wordCont {
min-height: 450px; 
}

#wordCont {
background: rgba(0,0,0,0.04); border-radius: 5px; padding-bottom: 20px; 
}

#wordCont h2, #wordCont h3{
margin: 60px 10px 10px 10px;
font-size: 28px;
}


#wordCont h4{
margin: 30px 30% 40px 30%;
border-radius: 5px;
padding: 20px 40px;
font-size: 18px;
cursor: pointer;
background: rgba(0,0,0,0.1);
transition:all 0.4s;
color: rgba(0,0,0,0.8);
box-shadow: 0 0 2px rgba(0,0,0,0.4);
display:none;
}

#wordCont h4:hover{background: #0070B9;box-shadow: 0 0 2px rgba(0,0,0,0.4); color: white; }

@media (max-width:600px) {#wordCont h4{margin: 30px 10% 10px 10%; font-size: 15px;} }

#wordCont, .wordTitle  {
text-align:center;
padding-bottom: 10px;
}

.wordDesc  {
padding: 0 0 0 0;
text-align: center;
margin: -5px 0 15px 5px;
font-size: 18px;
}


.wordTitle strong  {
color: #009432;
font-size: 1.1em;
text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
}



#lipsum span, #wordCont span{
font-size: 1.2em; padding-right: 4px; font-weight: bold;
}


#wordCont img{
width: 96%;
height: auto;
padding: 0;
box-shadow: 0 0 3px rgba(0,0,0,0.6);
margin: 2% auto 10px auto;
}

#lipsum img{
width: 100%;
height: auto;
padding: 30px 0 25px 0;
}


.videoImg{
width: 100%;
height: auto;
padding: 0;
z-index: 1;
}

#lipsum, #wordCont{font-size: 16px;}#lipsum p, #wordCont p{font-size: 16px;}


#lipsum a, #wordCont a{
color: #1e73be; font-weight: bold;
}


.videoLink{position: relative; height: auto;}
.vidBtn{width: 100%; height: auto; position: absolute; top: auto; bottom: 10px; left: 0; opacity: 0.7; z-index: 3; transition: 0.3s;}
.vidBtn:hover{opacity:1;}


.adCont{background: rgba(0,0,0,0.05); margin: 50px 0; border-radius: 5px; text-align: center; padding: 30px 5% 10px 5%; box-shadow: 0 0 3px rgba(0,0,0,0.8);}

@media (max-width:600px) { .adCont{padding: 30px 15px 10px 15px; margin: 50px -20px;}}


.fArea{
margin: 0;
padding: 0 2% 0 2%;
width: 32%;
height: 290px;
position: relative;
}

.f1{margin-left: 13%; float: left;} .f2{margin-right: 13%; float: right;}


.fArea h3{
color: #BCBCBC;
font-size: 27px;
margin-bottom: 20px;
}

.fArea h5{
font-size: 23px;
margin: 0;
}

h4 span{font-size: 15.5px; font-family: 'Open Sans', sans-serif;font-weight: normal;}

aside a{ color: grey;}

.stars{width: 150px; padding-left:5px; padding-top: 10px; padding-bottom: 0;}

.quoteBlog{margin: 30px 0; color: #C20000; padding: 20px 10px 20px 10px; border-top: 3px solid black; border-bottom: 3px solid black; text-align: center; font-size: 30px;}

.quoteBlog2{margin: 20px 0; padding: 15px 10px 15px 10px; border-top:1px solid black; border-bottom: 1px solid black; text-align: center; font-size: 19px;}


#hidden-content8{
padding: 0;
width: 100%;
height: auto;	
max-width: 399px;
display:none;
}

@media (max-width:660px) {#hidden-content8{padding: 0;width: 110%;margin-left: -5%;margin-right: -5%;}}

#myFooter{
position: relative;
margin-top: 20px;
height:415px;
width: 100%;
text-align:center;
float:left;
z-index: 6;
background: rgb(30,30,30);
color: #BCBCBC;
line-height: 34px;
font-size: 18px;
margin-bottom: 0;
padding-top:20px;
}



#myFooter a{
text-decoration:none;
color: #BCBCBC;
}

#myFooter a:hover{
color: #FFC600;
}


#myFooter2{
position: absolute;
top: auto;
bottom: 0;
height:40px;
padding: 20px 0;
width: 100%;
float:left;
font-size: 14px;
line-height: 36px;
color: #999;
text-align:center;
z-index: 6;
background: rgb(20,20,20);
}

#myFooter2 a{
text-decoration:none;
color: #BCBCBC;
}

#myFooter2 a:hover{
color: #FFC600;
}

.share{
font-size: 20px !important; margin: 0 0 10px 0; text-align:left !important; 
}

.shareCont{
background: rgba(0,0,0,0.05); text-align: left !important; width: 312px; position: relative; margin: 60px auto 0px auto; padding: 30px 0 20px 20px; filter: saturate(60%);
}

#wordCont .shareCont {
margin: 60px auto 10px auto; padding-top: -10px; display:block;
}

#wordCont .share {
padding-top: 0 !important; margin-top: 0;
}

#wordCont .a2a_kit {
margin-left: 5px;
}


aside{position: fixed; right: 9%; max-width:300px; top: 80px; background: rgba(0,0,0,0.04); padding-top: 0; height: 790px;}
@media (max-width:1560px) {aside{right: 7%;}}
@media (max-width:1480px) {aside{right: 5%;}}
@media (max-width:1400px) {aside{right: 3%;}}
@media (max-width:1350px) {aside{right: 1%;} .floatImg{max-width: 400px;}}
@media (max-width:1100px) {main{width: 65%;} aside{width: 27%;} .f1{margin-left: 10%;} .f2{margin-right: 10%;} .fArea{width: 35%;}.floatImg{max-width: 350px;}.floatImg3{max-width: 330px;}}
@media (max-width:1000px) {main{width: 63%;} aside{width: 29%;}.f1{margin-left: 5%;} .f2{margin-right: 5%;} .fArea{width: 40%;} h1{font-size: 38px;} #otherLangCont{opacity: 0;}}
@media (max-width:920px) {.lefter{float:none; margin-right: 0px} #wordCont{background:none; width: 110%; margin-left:-4.5%; margin-top: -10px;} .floatImg, .floatImg3{max-width: none; float:none;} .floatImg3{margin-left: 0px; margin-top: -30px;} h1{font-size: 36px;} main{width: 91%; margin-left: 1%;} aside{ width: 91%; float: left;position: relative; right: auto; max-width:none; height: auto; margin: -20px 0 50px 3%; background: none;} h4{font-size: 32px; } .f2{margin-right: 0; margin: 20px 0 0 5%; float: left;} .fArea{width: 86%;} #myFooter{height:710px;} main{padding: 30px 3% 0 3%;} .langBtn{padding: 20px 5% 20px 5%; background-color: #ecf0f1;} h4 span{font-size: 19px;} .stars{width: 130px; padding-left:5px;} #lipsum, #wordCont{font-size: 15px;}#lipsum p, #wordCont p{font-size: 15px;}}
@media (max-width:620px) { h1{font-size: 27px;} h3, .quoteBlog{font-size: 24px;} h4{font-size: 25px; }.floatImg2{max-width: none; float:none;}}



@media (max-height:766px) and (min-width:921px) {aside{height: 575px;} .blogBtn{display: none;}}
@media (max-height:680px) and (min-width:921px) {aside{height: 390px;} .devices{display: none;} aside h4{margin-bottom: 6px;} }


/*LANGUAGE ADD ON BELOW*/

h1{
margin-bottom: 0;
}

.ext{
font-size: 22px;
display: inline-block;
background-color: rgba(0,0,0,0.02);
position: relative;
padding: 20px 66px 20px 25px;
border-radius: 5px;
transition:all 0.4s;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
text-align: left;
width: 640px;	
margin: 11px auto 0 auto;		
}

.word{
font-size: 20px;
display: inline-block;
background-color: rgba(0,0,0,0.02);
background-image: url(https://www.ouinolanguages.com/img/sound3.svg);
background-position: right 17px top 19px;
background-repeat: no-repeat;
background-size: 25px 25px;
position: relative;
padding: 25px 60px 25px 118px;
border-radius: 5px;
cursor: pointer;
transition:all 0.4s;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
border-left: 15px solid #0070B9;
overflow: hidden; 
text-align: left;
width: 640px;	
margin: 11px auto 0 auto;	
}

.cust{padding: 25px 60px 25px 18px; width: 740px;} 
.cust .pic{display:none;} 

.word em, .ext em{
font-size: 0.9em;
}



.no, .ti{
background-image: none !important;
pointer-events: none !important;
background: rgba(0,0,0,0.02);
}

.no{
padding: 20px 20px 20px 118px;
width: 680px;	
margin: 11px auto 0 auto;		
}

.ti{padding: 20px 25px 20px 25px;
}

.no, .ti{border-left: 15px solid #C02515;}
.w0{background-color: rgb(30,30,30); background-image: url(https://www.ouinolanguages.com/img/sound2.svg); color:white; font-size: 1.5em; border-left: 15px solid #009432; border-right: 15px solid #009432; margin: 12px 0 20px 0;}


.w0:hover{ background-color: #009432; background-image: url(https://www.ouinolanguages.com/img/sound2.svg);}



.notExact{display:none;}

.ext{border-left: 15px solid #2C3E50 !important;}
.ext:hover{background-color: white !important;}


.wordPic{
width: 100%;
background: rgba(0,0,0,0) !important;	
padding: 10px 0 10px 0 !important;	margin: 10px -5px 80px -5px !important;	
display: inline-block !important;		
position: relative !important;	
border-radius: 5px;
}


#wordCont h4:hover{ }

@media (max-width:600px) {#wordCont h4{margin: 30px 10% 10px 10%; font-size: 15px;} }

.more{
position: absolute;
display: inline-block;
left: 0; right: 0;
bottom: -56px;
margin: 0 auto;
border-radius: 5px;
padding: 12px 12px 12px 20px;
width: 170px;
font-size: 18px;
text-align: left;
cursor: pointer;
background-color: rgba(0,0,0,0.08);
background-image: url(https://www.ouinolanguages.com/img/open.svg);
background-size: 20px; background-position: right 16px center; background-repeat: no-repeat;
transition:all 0.4s;
color: black !important;
opacity: 0.5;
text-decoration: none;
font-weight: normal !important;
letter-spacing: -0.04em;
box-shadow: 0 0 2px rgba(0,0,0,0.4) !important;
}


.more:hover{background-image: url(https://www.ouinolanguages.com/img/open2.svg); 
background-color: #0070B9;box-shadow: 0 0 2px rgba(0,0,0,0.4); color: white !important; opacity: 1;
}

@media (max-width:600px) {.more{ font-size: 15px; width: 140px; background-size: 16px;} }

#wordCont hr{opacity: 0;}


.slow{
width: 50px; height: 50px;
position: absolute;
bottom: 7px;
top: auto;
right: 7px;
background-color: rgba(0,0,0,0.0);
border-radius: 5px;
background-image: url(https://www.ouinolanguages.com/img/slow3.svg);
background-size: 60%; background-position: center; background-repeat:no-repeat;
transition:all 0.4s;
opacity: 0.5;
}

.w0 .slow{
background-image: url(https://www.ouinolanguages.com/img/slow2.svg);
}

.wordHover{
color:white;
background-color: #1e73be;
background-image: url(https://www.ouinolanguages.com/img/sound2.svg);
opacity: 1;
}

.slowHover{
background-color: rgba(255,255,255,0.1);
background-image: url(https://www.ouinolanguages.com/img/slow2.svg);
opacity: 1;
}

.slowHover2{
background-color: white;
background-image: url(https://www.ouinolanguages.com/img/slow3.svg);
}

.w0 .slowHover2{
background-image: url(https://www.ouinolanguages.com/img/slow4.svg);
}


.pic{ height: 90px; width: 95px; top: 0; bottom: 0; margin: auto 0; left: 0; position: absolute; overflow: hidden;  box-shadow: 0 0 2px rgba(0,0,0,0.5); border-radius: 0 5px 5px 0;}
.pic img{ height: 109% !important; width: auto !important; top: -3%; position: absolute; left: -27%; }
.no .pic img{ left: -11%; }

.word em, .ext em{margin-top: 10px !important; display: inline-block;}

.wordPic .w1{background-color: rgba(255,255,255,0.5) !important; border-color:#009432 !important; background-image: url(https://www.ouinolanguages.com/img/sound4.svg);}
.w1 .slow{background-image: url(https://www.ouinolanguages.com/img/slow4.svg) !important;}
.w1 .slowHover{background-color: rgba(255,255,255,0.1) !important; background-image: url(https://www.ouinolanguages.com/img/slow2.svg) !important;}
.w1 .slowHover2{background-color: white !important; background-image: url(https://www.ouinolanguages.com/img/slow4.svg) !important;}
.w1.wordHover{background-color: #009432 !important; background-image: url(https://www.ouinolanguages.com/img/sound2.svg) !important;}

.wordPic .w1 .pic{ height: 110px !important; width: 170px !important;} .wordPic .w1 .pic img{ left: -12%;}
.wordPic .w1 { padding-top: 40px; padding-bottom: 40px; padding-left: 200px; }

.wordPic .w2 .pic{display:none; }  
.wordPic .w2, .wordPic .ext{background-color: rgba(255,255,255,0.5) !important; margin-top: 10px; padding-left: 28px; }
.w2 .slowHover{background-color: rgba(255,255,255,0.1) !important;}
.w2 .slowHover2{background-color: white !important; background-image: url(https://www.ouinolanguages.com/img/slow3.svg) !important;}
.w2.wordHover{background-color: #1e73be !important;}


.catBtn{padding: 30px 60px; text-decoration: none; border-radius: 5px; margin: 20px 0 40px 0; display:inline-block; font-size: 22px;}

.wordPic .w2, .wordPic .cust, .wordPic .ext{border-color: #0070B9 !important;}  

.word, .ext{font-size: 20px;} 

 .w1{width: 64%;} .w2{width: 83.5%;} 



@media (max-width:1350px) { .word, .ext {width: 70%;} .cust{width: 82%;} .no {width: 75.3%;} .w0{width: 68%;}  .w1{width: 58%;} .w2{width: 81.2%;}   }
@media (max-width:1100px) { .word, .ext {width: 62%;} .cust{width: 76%;} .no {width: 69%;} .w0{width: 59%;} .w1{width: 49%;} .w2{width: 79%;} }
@media (max-width:920px) { .word, .ext {width: 70%;} .cust{width: 82%;} .no {width: 74.5%;} .w0{width: 68%;}  .w1{width: 60%;} .w2{width: 81.6%;} }
@media (max-width:800px) {  .word, .ext {width: 68%;} .cust{width: 81%;} .no {width: 74%;} .w0{width: 66%;} .word, .ext{font-size: 19px;}  .w1{width: 55%;} .w2{width: 80.7%;} }
@media (max-width:680px) { .wordDesc  {font-size: 17px;}  .word, .ext {width: 63%;} .cust{width: 77%;} .no {width: 70%;} .w0{width: 62%;} .word, .ext{font-size: 18px;} 
.wordPic .w1 .pic{ height: 100px !important; width: 120px !important; left: -20px;} .w1{width: 56%; padding-left: 120px !important;} .w2{width: 75%;} }
@media (max-width:610px) {   .word, .ext {width: 58%;} .cust{width: 75%;} .no {width: 66%;} .w0{width: 55%;}
.wordPic .w1 .pic{ height: 100px !important; width: 120px !important; left: -20px;} .w1{width: 56%; padding-left: 120px !important;} .w2{width: 75%;} }
@media (max-width:500px) { 
#wordCont h2, #wordCont h3  {font-size: 22px !important; }	
 .wordDesc  {font-size: 16px;} .word {background-position: top 5px right 5px; background-size: 19px;} .slow{ width: 35px; height: 30px; bottom: 0; right: 0; }
.pic{ height: 80px; width: 75px; left: -13px;} .word, .ext {padding: 30px 20px 30px 80px; width: 68%; overflow: hidden;}  .ext {padding-right: 20px; width: 68%; }  .cust{padding: 30px 20px 30px 18px; width: 82%;}
.no {width: 68%;} .w0{width: 53%; border-right-width: 10px;} .word, .ext{font-size: 16px; border-left-width: 10px !important;} 
.wordPic .w1 .pic{ height: 80px !important; width: 100px !important; left: -20px;} .w1{width: 50%; padding-left: 100px !important;} .w2{width: 70%;} 
}




.category{
background-color: #2d3436;
color: white !important;
cursor: pointer;
text-decoration: none;
margin-top: 10px;
margin-bottom: 20px;
font-weight: normal !important;
width: auto !important;	
background-image: url(https://www.ouinolanguages.com/img/open2.svg) !important;
border-left: 15px solid #FBBC05; border-right: 15px solid #FBBC05;
}

.category strong{
font-weight: bold !important;
}

.category:hover{
opacity: 1; background-color: #FBBC05;
}
.category{padding: 20px 55px 20px 20px;  background-position: right 15px center;}

@media (max-width:500px) {   
.category{ border-right-width: 10px;} 

}


.quote{
position: relative;
padding: 30px 20px;	
backgound: #ecf0f1;
border-radius: 5px;
box-shadow: 0 0 2px #2c3e50;
margin: 35px 0 35px 0;	
}


.quote img{
position: relative !important; float: left !important; width: 45px !important; height: 45px !important; padding: 0 15px 0 0 !important; margin: -5px 0 0 -5px;
}